Skip to content

Commit

Permalink
Minor improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedrosimao
pedrosimao committed Feb 8, 2022
1 parent adaf0ac commit 343afd0
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 95 deletions.
2 changes: 1 addition & 1 deletion src/near/config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export const CONTRACT_NAME =
process.env.CONTRACT_NAME || 'dev-1642588138566-86232214910457'
process.env.CONTRACT_NAME || 'dev-1644330473949-94120853225128'

export enum NETWORK_TYPE {
PRODUCTION = 'production',
Expand Down
56 changes: 3 additions & 53 deletions src/near/initContract.ts
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,6 @@
import * as nearAPI from 'near-api-js'
import { getConfig } from './config'

interface ContractType extends nearAPI.Contract {
deposit: (
{ amount: string, live: boolean }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
borrow: (
{ amount: string, short: boolean }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
new: (
{ owner_id: string }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
/*
* This function exists to allow withdraw of deposits, either from
* a user's SolvencyPool deposit, or LivePool (borrowing) position
* Hence, the first boolean parameter (for indicating which pool),
* last boolean parameter indicates the currency being withdrawn.
*/
renege: (
// @ts-ignore Todo: find a solution for this weird duplicate alert
{ amount: string, sp: boolean, qd: boolean }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
/*
* Close out caller's borrowing position by paying
* off all pledge's own debt with own collateral
*/
fold: (
{ short: boolean }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
/*
* Call this function to attempt liquidating a single Pledge
*/
clip: (
{ account: string }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
}
import { ContractType } from 'src/near/types'

export interface NearContextType {
contract: ContractType | null
Expand Down Expand Up @@ -96,13 +50,9 @@ export const initContract = async (): Promise<NearContextType> => {
nearConfig.contractName,
{
// View methods are read-only – they don't modify the state, but usually return some value
viewMethods: ['get_pledge'],
viewMethods: ['get_pledge', 'get_pool_stats'],
// Change methods can modify the state, but you don't receive the returned value when called
changeMethods: ['renege', 'borrow', 'deposit', 'fold', 'clip', 'new'],
// Sender is the account ID to initialize transactions.
// getAccountId() will return empty string if user is still unauthorized
// Todo: check if sender is needed
// sender: walletConnection.getAccountId(),
changeMethods: ['renege', 'borrow', 'deposit', 'fold', 'new'],
}
)
// @ts-ignore - Todo: verify whats the problem with Contract ts type
Expand Down
23 changes: 0 additions & 23 deletions src/near/nearContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
// connect to NEAR
import React, { createContext, useState, useEffect } from 'react'

import { initContract } from './initContract'
// import { CONTRACT_NAME } from 'src/near/config'
import { NearContextType } from './initContract'

// import { connect, keyStores, WalletConnection, Contract } from 'near-api-js'
// import { getConfig } from './config'

export const NearContext = createContext<NearContextType>({
contract: null,
currentUser: null,
Expand All @@ -31,24 +26,6 @@ export const NearProvider = ({
const initNear = async () => {
const { contract, currentUser, walletConnection, nearConfig } =
await initContract()
// const nearConfig = getConfig(process.env.NODE_ENV || 'testnet')
//
// // connect to NEAR
// const updatedConfig = {
// ...nearConfig,
// keyStore: new keyStores.BrowserLocalStorageKeyStore(),
// headers: {},
// }
// const near = await connect(updatedConfig)
//
// const wallet: WalletConnection = await new WalletConnection(near, `quid`)
//
// const account = await wallet.account()
//
// const contract = await new Contract(account, updatedConfig.contractName, {
// viewMethods: ['get_greeting'],
// changeMethods: ['set_greeting'],
// })

setNearState({ contract, currentUser, walletConnection, nearConfig })
}
Expand Down
88 changes: 88 additions & 0 deletions src/near/types.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import * as nearAPI from 'near-api-js'

export interface PledgeType {
debit: string
s_debit: string
credit: string
s_credit: string
quid_sp: string
near_sp: string
}

export interface PoolStatsType {
blood_credit: string
blood_debit: string
froze_long_credit: string
froze_long_debit: string
froze_short_credit: string
froze_short_debit: string
live_short_credit: string
live_short_debit: string
live_long_credit: string
live_long_debit: string
dead_short_credit: string
dead_short_debit: string
dead_long_credit: string
dead_long_debit: string
}

export interface ContractType extends nearAPI.Contract {
/*
* Change Methods
*/
deposit: (
// Live to false means depositing on Solvency Pool and true means you can borrow against the collateral
{ qd_amt: string, live: boolean }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
borrow: (
{ amount: string, short: boolean }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
/*
* This function exists to allow withdraw of deposits, either from
* a user's SolvencyPool deposit, or LivePool (borrowing) position
* Hence, the first boolean parameter (for indicating which pool),
* last boolean parameter indicates the currency being withdrawn.
*/
renege: (
// @ts-ignore Todo: find a solution for this weird duplicate alert
{ amount: string, sp: boolean, qd: boolean }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
/*
* Close out caller's borrowing position by paying
* off all pledge's own debt with own collateral
*/
fold: (
{ short: boolean }: Record<string, unknown>,
gas?: string,
deposit?: string
) => void
/*
* Call this function to attempt liquidating a single Pledge
*/
// clip: (
// { account: string }: Record<string, unknown>,
// gas?: string,
// deposit?: string
// ) => void
/*
* View Methods
*/
// Get Pledge for one Account
get_pledge: (
{ account: string }: Record<string, unknown>,
gas?: string,
deposit?: string
) => Promise<PledgeType>
// Get Pool Stats
get_pool_stats: (
{}: Record<string, unknown>,
gas?: string,
deposit?: string
) => Promise<PoolStatsType>
}
134 changes: 116 additions & 18 deletions src/pages/stake.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,33 @@
import * as React from 'react'
import Head from 'next/head'
import { Box, Text, Tabs, Tab, TextInput, Button } from 'grommet'
import { utils } from 'near-api-js'
import { Box, Text, Tabs, Tab, TextInput, Button } from 'grommet'

import { NearContext } from 'src/near/nearContext'
import { PledgeType, PoolStatsType } from 'src/near/types'

const Stake: React.FC = () => {
const { contract, currentUser } = React.useContext(NearContext)
const [depositAmnt, setDepositAmnt] = React.useState<string | null>(null)
const { contract } = React.useContext(NearContext)
const [withdrawAmnt, setWithdrawAmnt] = React.useState<string | null>(null)
const [pledged, setPledged] = React.useState<PledgeType | undefined>()
const [stats, setStats] = React.useState<PoolStatsType | undefined>()

const getNewPledgedAmnt = async () => {
const newPledges = await contract?.get_pledge({
account: currentUser?.accountId,
})
setPledged(newPledges)
}
const getStats = async () => {
const newStats = await contract?.get_pool_stats({})
setStats(newStats)
}

React.useEffect(() => {
getNewPledgedAmnt()
getStats()
}, [contract])

return (
<>
Expand All @@ -30,15 +50,16 @@ const Stake: React.FC = () => {
size="xxlarge"
margin={{ bottom: 'medium', top: 'large' }}
>
Lend your Nears or qUids
Stake on qUid Solvency Pool
</Text>
{/* Deposit and Withdraw Box*/}
<Box
width="500px"
height="300px"
width={{ max: '500px', width: '90%' }}
// height="300px"
background="background-front"
// animation="slideDown"
gap="small"
pad="small"
pad="medium"
round="small"
direction="column"
margin="0 auto"
Expand Down Expand Up @@ -94,22 +115,12 @@ const Stake: React.FC = () => {
if (depositAmnt) {
contract?.deposit(
{
amount: utils.format.parseNearAmount(depositAmnt),
qd_amt: '0',
live: false,
},
'300000000000000',
utils.format.parseNearAmount(depositAmnt) || undefined
)
// contract?.borrow(
// {
// amount: utils.format.parseNearAmount(depositAmnt),
// short: false,
// },
// '300000000000000',
// utils.format.parseNearAmount(depositAmnt) ||
// utils.format.parseNearAmount('1') ||
// undefined
// )
}
}}
/>
Expand All @@ -119,10 +130,97 @@ const Stake: React.FC = () => {
title="Withdraw"
color="linear-gradient(90deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(53.456% 96.078% 91.912%) 6.25%, rgb(56.324% 92.549% 92.451%) 12.5%, rgb(59.191% 89.02% 92.99%) 18.75%, rgb(62.059% 85.49% 93.529%) 25%, rgb(64.926% 81.961% 94.069%) 31.25%, rgb(67.794% 78.431% 94.608%) 37.5%, rgb(70.662% 74.902% 95.147%) 43.75%, rgb(73.529% 71.373% 95.686%) 50%, rgb(76.397% 67.843% 96.225%) 56.25%, rgb(79.265% 64.314% 96.765%) 62.5%, rgb(82.132% 60.784% 97.304%) 68.75%, rgb(85% 57.255% 97.843%) 75%, rgb(87.868% 53.725% 98.382%) 81.25%, rgb(90.735% 50.196% 98.922%) 87.5%, rgb(93.603% 46.667% 99.461%) 93.75%, rgb(96.471% 43.137% 100%) 100% )"
>
<Box pad="medium">Coming soon...</Box>
<br />
<Box direction="column">
<Box
border={{ size: 'xsmall' }}
width="90%"
flex
direction="column"
round="small"
pad="small"
// background="gradient-background"
background="background-back"
margin="0 auto"
>
<TextInput
plain={true}
focusIndicator={false}
type="number"
name="withdraw"
step="0.1"
placeholder="0.000"
size="xxlarge"
textAlign="end"
min={0}
value={String(withdrawAmnt)}
onChange={(e) => {
setWithdrawAmnt(e?.target?.value)
}}
/>
<Text alignSelf="end" margin="0 10px 0 0">
Near
</Text>
</Box>
<br />
<Button
primary
disabled={!withdrawAmnt}
// color="gradient"
label="Confirm"
alignSelf="center"
size="large"
style={{
width: '90%',
margin: '0 auto',
textAlign: 'center',
}}
onClick={async () => {
if (withdrawAmnt) {
contract?.renege(
{
amount: utils.format.parseNearAmount(withdrawAmnt),
sp: true,
qd: false,
},
'300000000000000'
// utils.format.parseNearAmount('0.00001') || undefined
)
}
}}
/>
</Box>
</Tab>
</Tabs>
</Box>
{/* Stats Box */}
<Box
width={{ max: '500px', width: '90%' }}
background="gradient"
// animation="slideDown"
gap="small"
pad="medium"
round="small"
direction="column"
margin="large"
>
<Box flex direction="row" justify="between" gap="xsmall">
<Text as="h2" size="xlarge">
Total Stake
</Text>
<Text as="h3" size="medium" weight="lighter">
{utils.format.formatNearAmount(stats?.blood_debit || '0')}
</Text>
</Box>
<Box flex direction="row" justify="between">
<Text as="h2" size="xlarge" weight="lighter">
My Staked
</Text>
<Text as="h3" size="medium" weight="lighter">
{utils.format.formatNearAmount(pledged?.near_sp || '0')}
</Text>
</Box>
</Box>
</Box>
</>
)
Expand Down

0 comments on commit 343afd0

Please sign in to comment.