diff --git a/package.json b/package.json
index 5ae2516..b81ab7f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2",
+ "react-gauge-chart": "^0.4.0",
"react-redux": "^7.2.6",
"styled-components": "^5.3.3"
},
diff --git a/public/images/logo_icon.svg b/public/images/logo_icon.svg
new file mode 100644
index 0000000..4f7b0e3
--- /dev/null
+++ b/public/images/logo_icon.svg
@@ -0,0 +1,48 @@
+
diff --git a/src/components/CryptoInput/index.tsx b/src/components/CryptoInput/index.tsx
index c720933..fc48207 100644
--- a/src/components/CryptoInput/index.tsx
+++ b/src/components/CryptoInput/index.tsx
@@ -1,4 +1,5 @@
import * as React from 'react'
+import Image from 'next/image'
import { Box, Text, TextInput, Button } from 'grommet'
import * as t from './types'
@@ -89,6 +90,20 @@ export const CryptoInput: React.FC = ({
alignSelf="end"
margin="auto 0"
label={currency}
+ color="background-front"
+ icon={
+
+ }
onClick={() => {
const newCurrency =
currency === t.CurrencyTypeEnum.NEAR
diff --git a/src/components/CryptoInput/types.ts b/src/components/CryptoInput/types.ts
index 39349ef..0d8b01d 100644
--- a/src/components/CryptoInput/types.ts
+++ b/src/components/CryptoInput/types.ts
@@ -8,6 +8,6 @@ export interface CryptoInputPropsType {
}
export enum CurrencyTypeEnum {
- NEAR = 'Near',
- QUID = 'qUid',
+ NEAR = 'NEAR',
+ QUID = 'QUID',
}
diff --git a/src/components/SwapInput/index.tsx b/src/components/SwapInput/index.tsx
index 8ec7236..9ec31a1 100644
--- a/src/components/SwapInput/index.tsx
+++ b/src/components/SwapInput/index.tsx
@@ -1,4 +1,5 @@
import * as React from 'react'
+import Image from 'next/image'
import { Box, Button, Text, TextInput } from 'grommet'
import * as t from './types'
@@ -97,11 +98,25 @@ export const SwapInput: React.FC = ({
/>
+ }
plain={false}
alignSelf="end"
margin="auto 0"
label={currency}
onClick={handleChangeCurrency}
+ color="background-front"
/>
@@ -147,8 +162,20 @@ export const SwapInput: React.FC = ({
plain={false}
alignSelf="end"
margin="auto 0"
- // size="small"
- // style={{ cursor: 'pointer' }}
+ color="background-front"
+ icon={
+
+ }
label={
currency === t.CurrencyTypeEnum.NEAR
? t.CurrencyTypeEnum.QUID
diff --git a/src/components/SwapInput/types.ts b/src/components/SwapInput/types.ts
index 61d55e3..a6a7ff7 100644
--- a/src/components/SwapInput/types.ts
+++ b/src/components/SwapInput/types.ts
@@ -12,6 +12,6 @@ export interface SwapInputPropsType {
}
export enum CurrencyTypeEnum {
- NEAR = 'Near',
- QUID = 'qUid',
+ NEAR = 'NEAR',
+ QUID = 'QUID',
}
diff --git a/src/hooks/useGetStats.ts b/src/hooks/useGetStats.ts
index 0273307..2da27d9 100644
--- a/src/hooks/useGetStats.ts
+++ b/src/hooks/useGetStats.ts
@@ -8,6 +8,10 @@ export interface StatsType {
quidSpTotal: string
nearSpStaked: string
quidSpStaked: string
+ credit: string
+ debit: string
+ sCredit: string
+ sDebit: string
}
// Todo: replace by redux-toolkit query
export const useGetStats = (): {
@@ -44,6 +48,10 @@ export const useGetStats = (): {
),
nearSpStaked: utils.format.formatNearAmount(newPledged?.near_sp || '0'),
quidSpStaked: utils.format.formatNearAmount(newPledged?.quid_sp || '0'),
+ credit: utils.format.formatNearAmount(newPledged?.credit || '0'),
+ debit: utils.format.formatNearAmount(newPledged?.debit || '0'),
+ sCredit: utils.format.formatNearAmount(newPledged?.s_credit || '0'),
+ sDebit: utils.format.formatNearAmount(newPledged?.s_debit || '0'),
})
} catch (e) {
// Todo: add a toaster warning of errors
diff --git a/src/pages/borrow.tsx b/src/pages/borrow.tsx
index 72f5fee..6a08992 100644
--- a/src/pages/borrow.tsx
+++ b/src/pages/borrow.tsx
@@ -2,10 +2,13 @@ import * as React from 'react'
import Head from 'next/head'
import { utils } from 'near-api-js'
import { Box, Text, Button, Spinner, Tabs, Tab } from 'grommet'
+// @ts-ignore Todo: create a type definition on typings file
+import GaugeChart from 'react-gauge-chart'
import { NearContext } from 'src/near/nearContext'
import { useGetNearQuoteQuery } from 'src/redux/api/nearQuote'
import { useGetBalance } from 'src/hooks/useGetBalance'
+import { useGetStats } from 'src/hooks/useGetStats'
import { SwapInput } from 'src/components/SwapInput'
@@ -24,6 +27,7 @@ const Borrow: React.FC = () => {
const [isWithdraw, setIsWithdraw] = React.useState(false)
const [isLoading, setIsLoading] = React.useState(false)
const { quidBalance, nearBalance } = useGetBalance()
+ const { stats } = useGetStats()
// Todo: borrow short
// const [isQuid, setIsQuid] = React.useState(false)
@@ -77,20 +81,36 @@ const Borrow: React.FC = () => {
}
const handleWithdraw = async () => {
- if (inputWithdrawAmount && outputWithdrawAmount) {
+ if (inputWithdrawAmount || outputWithdrawAmount) {
try {
setIsLoading(true)
- contract?.renege(
- {
- amount: utils.format.parseNearAmount(inputWithdrawAmount),
- sp: false,
- // Todo: find out how to withdraw short
- qd: utils.format.parseNearAmount(outputWithdrawAmount) || false,
- live: true,
- },
- undefined,
- '1'
- )
+ // Withdraw
+ if (inputWithdrawAmount) {
+ contract?.renege(
+ {
+ amount: utils.format.parseNearAmount(inputWithdrawAmount),
+ sp: false,
+ // Todo: implement short
+ qd: false,
+ live: true,
+ },
+ undefined,
+ '1'
+ )
+ }
+ // Repay
+ if (outputWithdrawAmount) {
+ contract?.swap(
+ {
+ amount: utils.format.parseNearAmount(outputWithdrawAmount),
+ repay: true,
+ // Todo: implement short
+ short: false,
+ },
+ undefined,
+ '1'
+ )
+ }
} catch (e) {
// Todo: deal with errors
console.error(e)
@@ -118,7 +138,7 @@ const Borrow: React.FC = () => {
Borrow
@@ -132,6 +152,39 @@ const Borrow: React.FC = () => {
round="small"
margin="0 auto"
>
+
+
+
+ Deposit
+ (Near)
+ {stats?.credit ? Number(stats?.credit).toFixed(3) : 0}
+
+
+
+
+
+
+
+ Debt
+ {stats?.debit ? Number(stats?.debit).toFixed(3) : 0}
+
+
+
{
@@ -169,7 +222,7 @@ const Borrow: React.FC = () => {
primary
disabled={
isWithdraw
- ? !inputWithdrawAmount || !outputWithdrawAmount || isLoading
+ ? (!inputWithdrawAmount && !outputWithdrawAmount) || isLoading
: !inputAmount || !outputAmount || isLoading
}
label="Confirm"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a6f83c2..9afd539 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -37,7 +37,6 @@ const Home: NextPage = () => {
src="/images/guns.png"
alt="Man with guns"
width={2304}
- // layout="intrinsic"
height={916}
objectFit="scale-down"
/>
@@ -45,13 +44,32 @@ const Home: NextPage = () => {
Stable Coin
- on Near Protocol
+ on
+
+ Protocol
+
+
+
diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
index adf6985..63df4fe 100644
--- a/src/pages/swap.tsx
+++ b/src/pages/swap.tsx
@@ -10,6 +10,7 @@ import { useGetBalance } from 'src/hooks/useGetBalance'
import { SwapInput } from 'src/components/SwapInput'
const EXCHANGE_RATE = 0.99090909091
+const FEE_RATE = 0.0099090909091
const Swap: React.FC = () => {
const { contract } = React.useContext(NearContext)
@@ -27,6 +28,12 @@ const Swap: React.FC = () => {
(1 / Number(nearQuote)) * EXCHANGE_RATE
: Number(nearQuote) * EXCHANGE_RATE
+ const getFee = () => {
+ return isQuid
+ ? (Number(swapAmount) * FEE_RATE).toFixed(2)
+ : (Number(swapAmount) * Number(nearQuote) * FEE_RATE).toFixed(2)
+ }
+
const currentBalance = isQuid ? quidBalance : nearBalance
const handleSwap = async () => {
@@ -105,6 +112,7 @@ const Swap: React.FC = () => {
width: '90%',
margin: '0 auto',
textAlign: 'center',
+ backgroundImage: 'url("/images/button_img.png")',
}}
onClick={handleSwap}
/>
@@ -118,6 +126,15 @@ const Swap: React.FC = () => {
direction="column"
margin="large"
>
+
+ Fee: {swapAmount && getFee()}
+ {' usd'}
+