From c6b97dcd3090df1b553062928a75b408c27fa609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pedro=20Sim=C3=A3o?= <pedrolimao@gmail.com>
Date: Sun, 20 Feb 2022 01:38:58 +0100
Subject: [PATCH] Added Borrow Page

---
 src/components/CryptoInput/index.tsx |  11 +-
 src/components/Navbar/index.tsx      |   3 +-
 src/components/SwapInput/index.tsx   |  31 +++-
 src/components/SwapInput/types.ts    |   5 +
 src/grommetTheme.ts                  |  13 +-
 src/hooks/useGetStats.ts             |   2 +
 src/pages/borrow.tsx                 | 217 +++++++++++++++++++++++++++
 src/pages/index.tsx                  |   1 -
 src/pages/stake.tsx                  |  20 ++-
 src/pages/swap.tsx                   |  20 ---
 10 files changed, 267 insertions(+), 56 deletions(-)
 create mode 100644 src/pages/borrow.tsx

diff --git a/src/components/CryptoInput/index.tsx b/src/components/CryptoInput/index.tsx
index 8b93bc3..c720933 100644
--- a/src/components/CryptoInput/index.tsx
+++ b/src/components/CryptoInput/index.tsx
@@ -45,17 +45,13 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
           direction="row"
           margin="0 auto"
         >
-          <Text as="p" size="xsmall" margin="0">
+          <Text as="p" size="small" margin="0">
             balance: {Number(maxValue || 0).toFixed(3)}
           </Text>
           <Button
-            // primary
             label="max"
             alignSelf="end"
-            // margin="auto 10px auto 0"
-            // color="gradient"
             size="small"
-            // gap="xsmall"
             onClick={() => {
               onChange(maxValue)
             }}
@@ -71,7 +67,6 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
         round="small"
         pad="small"
         background="background-back"
-        // background="gradient-background"
       >
         <Box width="100%" flex direction="row">
           <TextInput
@@ -91,12 +86,8 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
           />
           <Button
             primary
-            // size="small"
-            plain={false}
             alignSelf="end"
             margin="auto 0"
-            // size="small"
-            // style={{ cursor: 'pointer' }}
             label={currency}
             onClick={() => {
               const newCurrency =
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 8273a8e..556d691 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -95,6 +95,7 @@ export const Navbar: React.FC = () => {
                       weight="normal"
                       size="medium"
                       reverse={false}
+                      onClick={() => router.push('/borrow')}
                     />
                   </Nav>
                 )
@@ -132,7 +133,7 @@ export const Navbar: React.FC = () => {
                   background="gradient"
                   // background="linear-gradient(126deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(56.144% 92.77% 92.417%) 6.25%, rgb(61.342% 86.373% 93.395%) 12.5%, rgb(66.181% 80.417% 94.305%) 18.75%, rgb(70.662% 74.902% 95.147%) 25%, rgb(74.784% 69.828% 95.922%) 31.25%, rgb(78.548% 65.196% 96.63%) 37.5%, rgb(81.953% 61.005% 97.27%) 43.75%, rgb(85% 57.255% 97.843%) 50%, rgb(87.688% 53.946% 98.349%) 56.25%, rgb(90.018% 51.078% 98.787%) 62.5%, rgb(91.99% 48.652% 99.157%) 68.75%, rgb(93.603% 46.667% 99.461%) 75%, rgb(94.858% 45.123% 99.697%) 81.25%, rgb(95.754% 44.02% 99.865%) 87.5%, rgb(96.291% 43.358% 99.966%) 93.75%, rgb(96.471% 43.137% 100%) 100% )"
                 >
-                  <Text size="xsmall" weight={200} alignSelf="center">
+                  <Text size="medium" weight={200} alignSelf="center">
                     {Number(
                       utils.format.formatNearAmount(currentUser?.balance || '0')
                     ).toFixed(2)}
diff --git a/src/components/SwapInput/index.tsx b/src/components/SwapInput/index.tsx
index a922aba..8ec7236 100644
--- a/src/components/SwapInput/index.tsx
+++ b/src/components/SwapInput/index.tsx
@@ -5,15 +5,21 @@ import * as t from './types'
 
 export const SwapInput: React.FC<t.SwapInputPropsType> = ({
   value,
+  outputValue,
   maxValue,
   swapQuote,
   onChange,
+  onChangeOutput,
   onChangeCurrency,
+  inputLabel,
+  outputLabel,
+  isOutputUnlocked = false,
 }) => {
   const [currency, setCurrency] = React.useState<t.CurrencyTypeEnum>(
     t.CurrencyTypeEnum.NEAR
   )
   const handleChangeCurrency = () => {
+    if (!onChangeCurrency) return
     const newCurrency =
       currency === t.CurrencyTypeEnum.NEAR
         ? t.CurrencyTypeEnum.QUID
@@ -22,6 +28,19 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
     onChangeCurrency && onChangeCurrency(newCurrency)
   }
 
+  const getOutputValue = () => {
+    if (isOutputUnlocked) return outputValue ? outputValue : undefined
+    return swapQuote && value ? String(Number(value) * swapQuote) : ''
+  }
+
+  const handleOutputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isOutputUnlocked) {
+      onChangeOutput && onChangeOutput(e?.target?.value)
+      return
+    }
+    onChange(String(Number(e?.target?.value) / (swapQuote || 1)))
+  }
+
   return (
     <Box flex align="center" direction="column">
       {maxValue ? (
@@ -34,7 +53,7 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
           direction="row"
           margin="0 auto"
         >
-          <Text alignSelf="start">Pay:</Text>
+          <Text alignSelf="start">{inputLabel ? inputLabel : 'Pay:'}</Text>
           <Box flex justify="end" align="center" direction="row" gap="xsmall">
             <Text as="p" size="xsmall" margin="0" alignSelf="center">
               balance: {Number(maxValue || 0).toFixed(3)}
@@ -95,7 +114,9 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
         justify="between"
         direction="row"
       >
-        <Text alignSelf="start">Receive: (approximately)</Text>
+        <Text alignSelf="start">
+          {outputLabel ? outputLabel : 'Receive: (approximately)'}
+        </Text>
       </Box>
       <Box
         margin="5px auto 0 auto"
@@ -118,10 +139,8 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
             size="xxlarge"
             textAlign="start"
             min={0}
-            value={swapQuote && value ? String(Number(value) * swapQuote) : ''}
-            onChange={(e) => {
-              onChange(String(Number(e?.target?.value) / (swapQuote || 1)))
-            }}
+            value={getOutputValue()}
+            onChange={handleOutputChange}
           />
           <Button
             primary
diff --git a/src/components/SwapInput/types.ts b/src/components/SwapInput/types.ts
index a79caf1..61d55e3 100644
--- a/src/components/SwapInput/types.ts
+++ b/src/components/SwapInput/types.ts
@@ -1,9 +1,14 @@
 export interface SwapInputPropsType {
   value?: string
+  outputValue?: string
   onChange: (value: string) => void
+  onChangeOutput?: (value: string) => void
   onChangeCurrency?: (e: string) => void
   maxValue?: string
   swapQuote?: number
+  inputLabel?: string
+  outputLabel?: string
+  isOutputUnlocked?: boolean
 }
 
 export enum CurrencyTypeEnum {
diff --git a/src/grommetTheme.ts b/src/grommetTheme.ts
index f2e9c57..a61c661 100644
--- a/src/grommetTheme.ts
+++ b/src/grommetTheme.ts
@@ -522,14 +522,14 @@ export const grommetTheme = deepMerge(grommet, {
   },
   text: {
     xsmall: {
-      size: '17px',
-      height: '23px',
-      maxWidth: '403px',
+      size: '14px',
+      height: '19px',
+      maxWidth: '400px',
     },
     small: {
-      size: '17px',
-      height: '23px',
-      maxWidth: '418px',
+      size: '16px',
+      height: '21px',
+      maxWidth: '408px',
     },
     medium: {
       size: '18px',
@@ -673,7 +673,6 @@ export const grommetTheme = deepMerge(grommet, {
   //     color: 'text-weak',
   //   },
   // },
-  // @ts-ignore
   // extend: ({ theme }) =>
   //   css`
   //     transition: all 0.2s;
diff --git a/src/hooks/useGetStats.ts b/src/hooks/useGetStats.ts
index 63377f1..0273307 100644
--- a/src/hooks/useGetStats.ts
+++ b/src/hooks/useGetStats.ts
@@ -33,6 +33,8 @@ export const useGetStats = (): {
       setIsLoading(true)
       const newStats = await getStats()
       const newPledged = await getPledged()
+      // console.log({ newStats })
+      // console.log({ newPledged })
       setStats({
         nearSpTotal: utils.format.formatNearAmount(
           newStats?.blood_debit || '0'
diff --git a/src/pages/borrow.tsx b/src/pages/borrow.tsx
new file mode 100644
index 0000000..72f5fee
--- /dev/null
+++ b/src/pages/borrow.tsx
@@ -0,0 +1,217 @@
+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'
+
+import { NearContext } from 'src/near/nearContext'
+import { useGetNearQuoteQuery } from 'src/redux/api/nearQuote'
+import { useGetBalance } from 'src/hooks/useGetBalance'
+
+import { SwapInput } from 'src/components/SwapInput'
+
+const EXCHANGE_RATE = 0.99090909091
+
+const Borrow: React.FC = () => {
+  const { contract } = React.useContext(NearContext)
+  const [inputAmount, setInputAmount] = React.useState<string | undefined>()
+  const [outputAmount, setOutputAmount] = React.useState<string | undefined>()
+  const [inputWithdrawAmount, setInputWithdrawAmount] = React.useState<
+    string | undefined
+  >()
+  const [outputWithdrawAmount, setOutputWithdrawAmount] = React.useState<
+    string | undefined
+  >()
+  const [isWithdraw, setIsWithdraw] = React.useState(false)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const { quidBalance, nearBalance } = useGetBalance()
+
+  // Todo: borrow short
+  // const [isQuid, setIsQuid] = React.useState<boolean>(false)
+  const isQuid = false
+  const { data: nearQuote } = useGetNearQuoteQuery(undefined, {
+    pollingInterval: 60000, // set to 60 seconds
+  })
+
+  const swapQuote = isQuid
+    ? // Todo: investigate if exchange rate applies to Quid
+      (1 / Number(nearQuote)) * EXCHANGE_RATE
+    : Number(nearQuote) * EXCHANGE_RATE
+
+  const currentBalance = isQuid ? quidBalance : nearBalance
+  const getCollateralRatio = (): number => {
+    if (nearQuote && inputAmount && outputAmount) {
+      return isQuid
+        ? Number(Number(inputAmount) / (Number(outputAmount) * nearQuote))
+        : (Number(inputAmount) * nearQuote) / Number(outputAmount)
+    }
+    return 0
+  }
+
+  const getLiquidationPrice = (): number => {
+    if (nearQuote && inputAmount && outputAmount) {
+      return nearQuote * getCollateralRatio()
+    }
+    return 0
+  }
+
+  const handleBorrow = async () => {
+    if (inputAmount && outputAmount) {
+      try {
+        setIsLoading(true)
+        contract?.borrow(
+          {
+            amount: utils.format.parseNearAmount(outputAmount),
+            // Todo: find out how to borrow Near against Quids (borrow short?)
+            short: false,
+          },
+          undefined,
+          utils.format.parseNearAmount(inputAmount) || '1'
+        )
+      } catch (e) {
+        // Todo: deal with errors
+        console.error(e)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+  }
+
+  const handleWithdraw = async () => {
+    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'
+        )
+      } catch (e) {
+        // Todo: deal with errors
+        console.error(e)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+  }
+
+  return (
+    <>
+      <Head>
+        <title>qUid Stable Currency - Borrow</title>
+        <meta name="description" content="Borrow Near or qUids" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Box
+        alignContent="center"
+        width="100%"
+        height="91vh"
+        align="center"
+        flex
+        direction="column"
+      >
+        <Text
+          as="h2"
+          size="xxlarge"
+          margin={{ bottom: 'medium', top: 'large' }}
+          textAlign="center"
+        >
+          Borrow <br />
+          {'Near <-> qUid'}
+        </Text>
+        <Box
+          width={{ max: '500px', width: '90%' }}
+          background="background-front"
+          gap="small"
+          pad="medium"
+          round="small"
+          margin="0 auto"
+        >
+          <Tabs
+            justify="center"
+            onActive={(i) => {
+              if (i === 1) {
+                setIsWithdraw(true)
+              } else {
+                setIsWithdraw(false)
+              }
+            }}
+          >
+            <Tab title="Deposit" />
+            <Tab title="Withdraw" />
+          </Tabs>
+          <Box direction="column">
+            <SwapInput
+              inputLabel={isWithdraw ? 'Withdraw' : 'Deposit'}
+              outputLabel={isWithdraw ? 'Repay' : 'Borrow'}
+              value={
+                isWithdraw ? String(inputWithdrawAmount) : String(inputAmount)
+              }
+              outputValue={
+                isWithdraw ? String(outputWithdrawAmount) : String(outputAmount)
+              }
+              maxValue={currentBalance}
+              onChange={isWithdraw ? setInputWithdrawAmount : setInputAmount}
+              onChangeOutput={
+                isWithdraw ? setOutputWithdrawAmount : setOutputAmount
+              }
+              swapQuote={swapQuote}
+              // onChangeCurrency={() => setIsQuid(!isQuid)}
+              isOutputUnlocked
+            />
+            <br />
+            <Button
+              primary
+              disabled={
+                isWithdraw
+                  ? !inputWithdrawAmount || !outputWithdrawAmount || isLoading
+                  : !inputAmount || !outputAmount || isLoading
+              }
+              label="Confirm"
+              alignSelf="center"
+              size="large"
+              icon={isLoading ? <Spinner /> : undefined}
+              style={{
+                width: '90%',
+                margin: '0 auto',
+                textAlign: 'center',
+              }}
+              onClick={isWithdraw ? handleWithdraw : handleBorrow}
+            />
+          </Box>
+          {/*  Stats Box */}
+          {isWithdraw ? null : (
+            <Box
+              background="background-back"
+              pad="medium"
+              round="small"
+              direction="column"
+              margin="large"
+              flex
+            >
+              <Text size="xsmall" alignSelf="end" color="text-weak">
+                Collateral Ratio: {(getCollateralRatio() * 100).toFixed(2)} %
+              </Text>
+              <Text
+                weight="lighter"
+                size="xsmall"
+                alignSelf="end"
+                color="text-weak"
+              >
+                Liquidation Price (Near): ~$
+                {(getLiquidationPrice() * 0.95).toFixed(2)} usd
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </>
+  )
+}
+
+export default Borrow
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1422e19..a6f83c2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -29,7 +29,6 @@ const Home: NextPage = () => {
             src="/images/logo_full.svg"
             alt="qUid Logo"
             width={200}
-            // layout="responsive"
             height={200}
           />
           <br />
diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
index 096401b..59d4536 100644
--- a/src/pages/stake.tsx
+++ b/src/pages/stake.tsx
@@ -111,9 +111,7 @@ const Stake: React.FC = () => {
         {/* Deposit and Withdraw Box*/}
         <Box
           width={{ max: '500px', width: '90%' }}
-          // height="300px"
           background="background-front"
-          // animation="slideDown"
           gap="small"
           pad="medium"
           round="small"
@@ -150,7 +148,7 @@ const Stake: React.FC = () => {
             </Tab>
             <Tab
               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% )"
+              // 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% )"
             >
               <br />
               <Box direction="column">
@@ -191,34 +189,34 @@ const Stake: React.FC = () => {
           margin="large"
         >
           <Box flex direction="row" justify="between" gap="xxsmall">
-            <Text as="h2" size="xlarge" margin="xxsmall">
+            <Text as="h2" size="medium" margin="xxsmall">
               Near Pool Total
             </Text>
-            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
+            <Text as="h3" size="small" weight="lighter" margin="xxsmall">
               {stats?.nearSpTotal}
             </Text>
           </Box>
           <Box flex direction="row" justify="between" gap="xxsmall">
-            <Text as="h2" size="xlarge" weight="lighter" margin="xxsmall">
+            <Text as="h2" size="medium" weight="lighter" margin="xxsmall">
               My Staked Near
             </Text>
-            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
+            <Text as="h3" size="small" weight="lighter" margin="xxsmall">
               {stats?.nearSpStaked}
             </Text>
           </Box>
           <Box flex direction="row" justify="between" gap="xxsmall">
-            <Text as="h2" size="xlarge" margin="xxsmall">
+            <Text as="h2" size="medium" margin="xxsmall">
               qUid Pool Total
             </Text>
-            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
+            <Text as="h3" size="small" weight="lighter" margin="xxsmall">
               {stats?.quidSpTotal}
             </Text>
           </Box>
           <Box flex direction="row" justify="between" gap="xxsmall">
-            <Text as="h2" size="xlarge" weight="lighter" margin="xxsmall">
+            <Text as="h2" size="medium" weight="lighter" margin="xxsmall">
               My Staked Quid
             </Text>
-            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
+            <Text as="h3" size="small" weight="lighter" margin="xxsmall">
               {stats?.quidSpStaked}
             </Text>
           </Box>
diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
index 35ef91b..adf6985 100644
--- a/src/pages/swap.tsx
+++ b/src/pages/swap.tsx
@@ -112,23 +112,12 @@ const Swap: React.FC = () => {
           {/*  Stats Box */}
           <Box
             background="background-back"
-            // animation="slideDown"
             gap="xxsmall"
             pad="medium"
             round="small"
             direction="column"
             margin="large"
           >
-            {/*<Text*/}
-            {/*  weight="lighter"*/}
-            {/*  size="xsmall"*/}
-            {/*  alignSelf="end"*/}
-            {/*  color="text-weak"*/}
-            {/*>*/}
-            {/*  {nearQuote && Number(swapAmount)*/}
-            {/*    ? `Approximate value: ~${nearQuote.toFixed(2)} usd`*/}
-            {/*    : null}*/}
-            {/*</Text>*/}
             <Text
               weight="lighter"
               size="xsmall"
@@ -137,15 +126,6 @@ const Swap: React.FC = () => {
             >
               Price Impact: ~1%
             </Text>
-            {/*<Text*/}
-            {/*  weight="lighter"*/}
-            {/*  size="xsmall"*/}
-            {/*  alignSelf="end"*/}
-            {/*  color="text-weak"*/}
-            {/*>*/}
-            {/*  Minimum after slippage: ~$*/}
-            {/*  {(Number(nearQuote) * 0.95).toFixed(2)} usd*/}
-            {/*</Text>*/}
           </Box>
         </Box>
       </Box>