Added Borrow Gauge and Currency Icons

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"
   },

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<t.CryptoInputPropsType> = ({
             alignSelf="end"
             margin="auto 0"
             label={currency}
+            color="background-front"
+            icon={
+              <Image
+                src={
+                  currency === t.CurrencyTypeEnum.NEAR
+                    ? '/images/near_icon.svg'
+                    : '/images/logo_small.svg'
+                }
+                alt="Currency Icon"
+                height={77}
+                width={77}
+                objectFit="scale-down"
+              />
+            }
             onClick={() => {
               const newCurrency =
                 currency === t.CurrencyTypeEnum.NEAR

src/components/CryptoInput/types.ts

@@ -8,6 +8,6 @@ export interface CryptoInputPropsType {
 }
 
 export enum CurrencyTypeEnum {
-  NEAR = 'Near',
-  QUID = 'qUid',
+  NEAR = 'NEAR',
+  QUID = 'QUID',
 }

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<t.SwapInputPropsType> = ({
           />
           <Button
             primary
+            icon={
+              <Image
+                alt="currency icon"
+                src={
+                  currency === t.CurrencyTypeEnum.NEAR
+                    ? '/images/near_icon.svg'
+                    : '/images/logo_small.svg'
+                }
+                height={77}
+                width={77}
+                objectFit="scale-down"
+              />
+            }
             plain={false}
             alignSelf="end"
             margin="auto 0"
             label={currency}
             onClick={handleChangeCurrency}
+            color="background-front"
           />
         </Box>
       </Box>
@@ -147,8 +162,20 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
             plain={false}
             alignSelf="end"
             margin="auto 0"
-            // size="small"
-            // style={{ cursor: 'pointer' }}
+            color="background-front"
+            icon={
+              <Image
+                alt="currency icon"
+                src={
+                  currency === t.CurrencyTypeEnum.NEAR
+                    ? '/images/logo_small.svg'
+                    : '/images/near_icon.svg'
+                }
+                height={77}
+                width={77}
+                objectFit="scale-down"
+              />
+            }
             label={
               currency === t.CurrencyTypeEnum.NEAR
                 ? t.CurrencyTypeEnum.QUID

src/components/SwapInput/types.ts

@@ -12,6 +12,6 @@ export interface SwapInputPropsType {
 }
 
 export enum CurrencyTypeEnum {
-  NEAR = 'Near',
-  QUID = 'qUid',
+  NEAR = 'NEAR',
+  QUID = 'QUID',
 }

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

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<boolean>(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 = () => {
         <Text
           as="h2"
           size="xxlarge"
-          margin={{ bottom: 'medium', top: 'large' }}
+          margin={{ bottom: 'medium', top: 'small' }}
           textAlign="center"
         >
           Borrow <br />
@@ -132,6 +152,39 @@ const Borrow: React.FC = () => {
           round="small"
           margin="0 auto"
         >
+          <Box
+            direction="row"
+            justify="center"
+            gap="small"
+            background="background-back"
+            pad="small"
+            round="small"
+            width="90%"
+            margin={'0px auto 10px auto'}
+          >
+            <Box width="30%">
+              <Text size="small" textAlign="center">
+                Deposit <br />
+                (Near) <br />
+                {stats?.credit ? Number(stats?.credit).toFixed(3) : 0}
+              </Text>
+            </Box>
+            <Box width="40%">
+              <GaugeChart
+                id="gauge-chart2"
+                nrOfLevels={22}
+                percent={getCollateralRatio() ? 1 / getCollateralRatio() : 0}
+                colors={['yellow', '#FFC371', 'red']}
+                arcWidth={0.22}
+              />
+            </Box>
+            <Box width="30%" alignContent="center">
+              <Text size="small" textAlign="center">
+                Debt <br />
+                {stats?.debit ? Number(stats?.debit).toFixed(3) : 0}
+              </Text>
+            </Box>
+          </Box>
           <Tabs
             justify="center"
             onActive={(i) => {
@@ -169,7 +222,7 @@ const Borrow: React.FC = () => {
               primary
               disabled={
                 isWithdraw
-                  ? !inputWithdrawAmount || !outputWithdrawAmount || isLoading
+                  ? (!inputWithdrawAmount && !outputWithdrawAmount) || isLoading
                   : !inputAmount || !outputAmount || isLoading
               }
               label="Confirm"

src/pages/index.tsx

@@ -37,21 +37,39 @@ const Home: NextPage = () => {
               src="/images/guns.png"
               alt="Man with guns"
               width={2304}
-              // layout="intrinsic"
               height={916}
               objectFit="scale-down"
             />
           </Box>
           <Text
             as="h1"
             textAlign="center"
-            size="4xl"
+            size="3xl"
             weight="lighter"
             color="text-weak"
           >
             Stable Coin <br />
-            <strong>on Near Protocol</strong>
+            on
+            <Image
+              src="/images/near_logo.svg"
+              alt="Near Protocol Logo"
+              width={250}
+              height={90}
+              objectPosition="15px 20px"
+              objectFit="scale-down"
+            />
+            Protocol
           </Text>
+
+          <Image
+            src="/images/lemnis_logo.svg"
+            alt="Lemnis Logo"
+            width={100}
+            height={50}
+            objectPosition="bottom"
+            objectFit="scale-down"
+          />
+          <br />
         </Box>
       </MainContainer>
     </>

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"
           >
+            <Text
+              weight="lighter"
+              size="xsmall"
+              alignSelf="end"
+              color="text-weak"
+            >
+              Fee: {swapAmount && getFee()}
+              {' usd'}
+            </Text>
             <Text
               weight="lighter"
               size="xsmall"