From 4103109278183285d163518e0f1e6a368d43c0b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pedro=20Sim=C3=A3o?= <pedrolimao@gmail.com>
Date: Mon, 21 Feb 2022 21:57:02 +0100
Subject: [PATCH] Fixed Gauge calculation

---
 src/components/CryptoInput/index.tsx | 25 +++++++-----
 src/components/SwapInput/index.tsx   | 61 +++++++++++-----------------
 src/hooks/useGetBalance.ts           |  2 +-
 src/hooks/useGetStats.ts             |  3 +-
 src/near/config.ts                   |  4 +-
 src/pages/borrow.tsx                 | 38 ++++++++++-------
 src/pages/index.tsx                  |  9 ----
 7 files changed, 65 insertions(+), 77 deletions(-)

diff --git a/src/components/CryptoInput/index.tsx b/src/components/CryptoInput/index.tsx
index fc48207..dbbc4a2 100644
--- a/src/components/CryptoInput/index.tsx
+++ b/src/components/CryptoInput/index.tsx
@@ -35,7 +35,7 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
 
   return (
     <>
-      {showBalance && maxValue ? (
+      {showBalance ? (
         <Box
           flex
           width="90%"
@@ -49,14 +49,16 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
           <Text as="p" size="small" margin="0">
             balance: {Number(maxValue || 0).toFixed(3)}
           </Text>
-          <Button
-            label="max"
-            alignSelf="end"
-            size="small"
-            onClick={() => {
-              onChange(maxValue)
-            }}
-          />
+          {maxValue ? (
+            <Button
+              label="max"
+              alignSelf="end"
+              size="small"
+              onClick={() => {
+                onChange(maxValue)
+              }}
+            />
+          ) : null}
         </Box>
       ) : null}
       <Box
@@ -91,6 +93,7 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
             margin="auto 0"
             label={currency}
             color="background-front"
+            size="small"
             icon={
               <Image
                 src={
@@ -99,8 +102,8 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
                     : '/images/logo_small.svg'
                 }
                 alt="Currency Icon"
-                height={77}
-                width={77}
+                height={66}
+                width={66}
                 objectFit="scale-down"
               />
             }
diff --git a/src/components/SwapInput/index.tsx b/src/components/SwapInput/index.tsx
index 9ec31a1..e57154a 100644
--- a/src/components/SwapInput/index.tsx
+++ b/src/components/SwapInput/index.tsx
@@ -44,21 +44,21 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
 
   return (
     <Box flex align="center" direction="column">
-      {maxValue ? (
-        <Box
-          width="90%"
-          gap="small"
-          pad="none"
-          align="center"
-          justify="between"
-          direction="row"
-          margin="0 auto"
-        >
-          <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)}
-            </Text>
+      <Box
+        width="90%"
+        gap="small"
+        pad="none"
+        align="center"
+        justify="between"
+        direction="row"
+        margin="0 auto"
+      >
+        <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)}
+          </Text>
+          {maxValue ? (
             <Button
               label="max"
               alignSelf="end"
@@ -67,9 +67,9 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
                 onChange(maxValue)
               }}
             />
-          </Box>
+          ) : null}
         </Box>
-      ) : null}
+      </Box>
       <Box
         margin="5px auto 0 auto"
         border={{ size: 'xsmall' }}
@@ -98,6 +98,7 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
           />
           <Button
             primary
+            size="small"
             icon={
               <Image
                 alt="currency icon"
@@ -106,8 +107,8 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
                     ? '/images/near_icon.svg'
                     : '/images/logo_small.svg'
                 }
-                height={77}
-                width={77}
+                height={66}
+                width={66}
                 objectFit="scale-down"
               />
             }
@@ -159,6 +160,7 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
           />
           <Button
             primary
+            size="small"
             plain={false}
             alignSelf="end"
             margin="auto 0"
@@ -171,8 +173,8 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
                     ? '/images/logo_small.svg'
                     : '/images/near_icon.svg'
                 }
-                height={77}
-                width={77}
+                height={66}
+                width={66}
                 objectFit="scale-down"
               />
             }
@@ -185,23 +187,6 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
           />
         </Box>
       </Box>
-      {/* Todo: display some info about the swap transaction */}
-      {/*<Box width="90%" justify="end">*/}
-      {/*  <Text weight="lighter" size="xsmall" alignSelf="end" color="text-weak">*/}
-      {/*    {fiatValue && Number(value)*/}
-      {/*      ? `Approximate value: ~${fiatValue.toFixed(2)} usd`*/}
-      {/*      : null}*/}
-      {/*  </Text>*/}
-      {/*  <Text weight="lighter" size="xsmall" alignSelf="end" color="text-weak">*/}
-      {/*    Price Impact: ~1%*/}
-      {/*  </Text>*/}
-      {/*  <Text weight="lighter" size="xsmall" alignSelf="end" color="text-weak">*/}
-      {/*    Max slippage: ~1%*/}
-      {/*  </Text>*/}
-      {/*  <Text weight="lighter" size="xsmall" alignSelf="end" color="text-weak">*/}
-      {/*    Minimum received after slippage: ~${(fiatValue * 0.95).toFixed(2)} usd*/}
-      {/*  </Text>*/}
-      {/*</Box>*/}
     </Box>
   )
 }
diff --git a/src/hooks/useGetBalance.ts b/src/hooks/useGetBalance.ts
index 10da83f..a15be1f 100644
--- a/src/hooks/useGetBalance.ts
+++ b/src/hooks/useGetBalance.ts
@@ -24,7 +24,7 @@ export const useGetBalance = (): {
         .viewFunction(contract?.contractId || '', 'ft_balance_of', {
           account_id: currentUser?.accountId,
         })
-      const newQuidBalance = utils.format.formatNearAmount(quidRes)
+      const newQuidBalance = utils.format.formatNearAmount(quidRes || '0')
       setQuidBalance(Number(newQuidBalance || 0).toFixed(3))
       // Get Near balance
       const newNearBalance = utils.format.formatNearAmount(
diff --git a/src/hooks/useGetStats.ts b/src/hooks/useGetStats.ts
index 2da27d9..e8d8f40 100644
--- a/src/hooks/useGetStats.ts
+++ b/src/hooks/useGetStats.ts
@@ -37,8 +37,7 @@ 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/near/config.ts b/src/near/config.ts
index 50695cf..44fe4e2 100644
--- a/src/near/config.ts
+++ b/src/near/config.ts
@@ -1,10 +1,10 @@
 export const CONTRACT_NAME =
-  process.env.CONTRACT_NAME || 'dev-1645134464429-38710865502300'
+  process.env.CONTRACT_NAME || 'dev-1645458162959-30481065418494'
 
 export enum NETWORK_TYPE {
   PRODUCTION = 'production',
   DEV = 'development',
-  TEST = 'test',
+  // TEST = 'test',
   TESTNET = 'testnet',
 }
 export const getConfig = (env: string) => {
diff --git a/src/pages/borrow.tsx b/src/pages/borrow.tsx
index 6a08992..5bb1a07 100644
--- a/src/pages/borrow.tsx
+++ b/src/pages/borrow.tsx
@@ -58,6 +58,16 @@ const Borrow: React.FC = () => {
     return 0
   }
 
+  const getGaugeNumber = () => {
+    return isWithdraw
+      ? (Number(stats?.debit || 0) - Number(outputWithdrawAmount || 0)) /
+          ((Number(stats?.credit || 0) - Number(inputWithdrawAmount || 0)) *
+            Number(nearQuote))
+      : (Number(stats?.debit || 0) + Number(outputAmount || 0)) /
+          ((Number(stats?.credit || 0) + Number(inputAmount || 0)) *
+            Number(nearQuote))
+  }
+
   const handleBorrow = async () => {
     if (inputAmount && outputAmount) {
       try {
@@ -84,28 +94,28 @@ const Borrow: React.FC = () => {
     if (inputWithdrawAmount || outputWithdrawAmount) {
       try {
         setIsLoading(true)
-        // Withdraw
-        if (inputWithdrawAmount) {
-          contract?.renege(
+        // Repay first
+        if (outputWithdrawAmount) {
+          await contract?.swap(
             {
-              amount: utils.format.parseNearAmount(inputWithdrawAmount),
-              sp: false,
+              amount: utils.format.parseNearAmount(outputWithdrawAmount),
+              repay: true,
               // Todo: implement short
-              qd: false,
-              live: true,
+              short: false,
             },
             undefined,
             '1'
           )
         }
-        // Repay
-        if (outputWithdrawAmount) {
-          contract?.swap(
+        // Then Withdraw
+        if (inputWithdrawAmount) {
+          await contract?.renege(
             {
-              amount: utils.format.parseNearAmount(outputWithdrawAmount),
-              repay: true,
+              amount: utils.format.parseNearAmount(inputWithdrawAmount),
+              sp: false,
               // Todo: implement short
-              short: false,
+              qd: false,
+              live: true,
             },
             undefined,
             '1'
@@ -173,7 +183,7 @@ const Borrow: React.FC = () => {
               <GaugeChart
                 id="gauge-chart2"
                 nrOfLevels={22}
-                percent={getCollateralRatio() ? 1 / getCollateralRatio() : 0}
+                percent={getGaugeNumber()}
                 colors={['yellow', '#FFC371', 'red']}
                 arcWidth={0.22}
               />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9afd539..6f1fcc6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -60,15 +60,6 @@ const Home: NextPage = () => {
             />
             Protocol
           </Text>
-
-          <Image
-            src="/images/lemnis_logo.svg"
-            alt="Lemnis Logo"
-            width={100}
-            height={50}
-            objectPosition="bottom"
-            objectFit="scale-down"
-          />
           <br />
         </Box>
       </MainContainer>