Improved Max and Currency buttons on Staking page

pedrosimao · Feb 11, 2022 · 4428da7 · 4428da7
1 parent 937d17f
commit 4428da7
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 113 deletions.
diff --git a/src/components/CryptoInput/index.tsx b/src/components/CryptoInput/index.tsx
@@ -14,91 +14,111 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
     t.CurrencyTypeEnum.NEAR
   )
   const [fiatValue, setFiatValue] = React.useState<number>(0)
+  const isNear = currency === t.CurrencyTypeEnum.NEAR
 
   const updateFiatValues = async () => {
-    const newFiatValue = await fetchFiatValue()
+    const newFiatValue = isNear ? await fetchFiatValue() : 1
     const newTotalFiatValue = newFiatValue * Number(value)
     setFiatValue(newTotalFiatValue)
   }
 
   // Todo: make a redux value for it, updated every X minutes
   React.useEffect(() => {
-    updateFiatValues()
-  }, [value])
+    if (value) {
+      updateFiatValues()
+    }
+  }, [value, isNear])
   return (
-    <Box
-      border={{ size: 'xsmall' }}
-      width="90%"
-      flex
-      direction="column"
-      round="small"
-      pad="small"
-      margin="0 auto"
-      background="background-back"
-      // background="gradient-background"
-    >
-      <Box width="100%" flex direction="row">
-        <TextInput
-          plain={true}
-          focusIndicator={false}
-          type="number"
-          name="withdraw"
-          step="0.1"
-          placeholder="0.000"
-          size="xxlarge"
-          textAlign="start"
-          min={0}
-          value={String(value)}
-          onChange={(e) => {
-            onChange(e?.target?.value)
-          }}
-        />
-        {maxValue ? (
+    <>
+      {maxValue ? (
+        <Box
+          flex
+          width="90%"
+          gap="small"
+          pad="none"
+          align="center"
+          justify="end"
+          direction="row"
+          margin="0 auto"
+        >
+          <Text as="p" size="xsmall" margin="0">
+            balance: {Number(maxValue || 0).toFixed(3)}
+          </Text>
           <Button
+            // primary
             label="max"
-            primary
             alignSelf="end"
-            margin="auto 10px auto 0"
-            color="gradient"
-            // size="small"
+            // margin="auto 10px auto 0"
+            // color="gradient"
+            size="small"
             // gap="xsmall"
             onClick={() => {
               onChange(maxValue)
             }}
           />
-        ) : null}
-      </Box>
-      <Box width="100%" flex direction="row">
-        <Box width="100%">
-          <Text
-            weight="lighter"
-            size="xsmall"
-            alignSelf="start"
-            color="text-weak"
-            style={{ marginLeft: 10, width: '100%' }}
-          >
-            {fiatValue ? ` ~${fiatValue.toFixed(2)} usd` : null}
-          </Text>
         </Box>
-        <Button
-          primary
-          // size="small"
-          plain={false}
-          alignSelf="end"
-          margin="auto 10px auto 0"
-          // size="small"
-          // style={{ cursor: 'pointer' }}
-          label={currency}
-          onClick={() => {
-            const newCurrency =
-              currency === t.CurrencyTypeEnum.NEAR
-                ? t.CurrencyTypeEnum.QUID
-                : t.CurrencyTypeEnum.NEAR
-            setCurrency(newCurrency)
-            onChangeCurrency && onChangeCurrency(newCurrency)
-          }}
-        />
+      ) : null}
+      <Box
+        margin="5px auto 0 auto"
+        border={{ size: 'xsmall' }}
+        width="90%"
+        flex
+        direction="column"
+        round="small"
+        pad="small"
+        background="background-back"
+        // background="gradient-background"
+      >
+        <Box width="100%" flex direction="row">
+          <TextInput
+            plain={true}
+            focusIndicator={false}
+            type="number"
+            name="withdraw"
+            step="0.1"
+            placeholder="0.000"
+            size="xxlarge"
+            textAlign="start"
+            min={0}
+            value={value}
+            onChange={(e) => {
+              onChange(e?.target?.value)
+            }}
+          />
+          <Button
+            primary
+            // size="small"
+            plain={false}
+            alignSelf="end"
+            margin="auto 0"
+            // size="small"
+            // style={{ cursor: 'pointer' }}
+            label={currency}
+            onClick={() => {
+              const newCurrency =
+                currency === t.CurrencyTypeEnum.NEAR
+                  ? t.CurrencyTypeEnum.QUID
+                  : t.CurrencyTypeEnum.NEAR
+              setCurrency(newCurrency)
+              onChangeCurrency && onChangeCurrency(newCurrency)
+            }}
+          />
+        </Box>
+        <Box width="100%" flex direction="row">
+          <Box width="100%">
+            <Text
+              weight="lighter"
+              size="xsmall"
+              alignSelf="start"
+              color="text-weak"
+              style={{ marginLeft: 10, width: '100%', minHeight: 24 }}
+            >
+              {fiatValue ? ` ~${fiatValue.toFixed(2)} usd` : null}
+            </Text>
+          </Box>
+          <div />
+        </Box>
       </Box>
-    </Box>
+    </>
   )
 }
diff --git a/src/components/CryptoInput/types.ts b/src/components/CryptoInput/types.ts
@@ -1,5 +1,5 @@
 export interface CryptoInputPropsType {
-  value: string
+  value?: string
   onChange: (value: string) => void
   onChangeCurrency?: (e: string) => void
   maxValue?: string

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -133,7 +133,7 @@ export const Navbar: React.FC = () => {
                 >
                   <Text size="xsmall" weight={200} alignSelf="center">
                     {Number(
-                      utils.format.formatNearAmount(currentUser?.balance)
+                      utils.format.formatNearAmount(currentUser?.balance || '0')
                     ).toFixed(2)}
                   </Text>
                 </Box>

diff --git a/src/grommetTheme.ts b/src/grommetTheme.ts
@@ -363,45 +363,51 @@ export const grommetTheme = deepMerge(grommet, {
   },
   scale: 0.3,
   button: {
+    border: {
+      radius: '8px',
+    },
+    // default: {
+    //   background: {
+    //     color: 'blue',
+    //   },
+    // },
+    // primary: {
+    //   background: {
+    //     color: 'gradient',
+    //   },
+    // },
     size: {
       large: {
+        // primary: {
+        //   background: {
+        //     color: 'gradient',
+        //   },
+        // },
         border: {
           width: '0px',
           radius: '8px',
         },
       },
+      medium: {
+        border: {
+          width: '0px',
+          radius: '8px',
+        },
+      },
+      small: {
+        font: {
+          size: '9px',
+        },
+        border: {
+          width: '0px',
+          radius: '8px',
+        },
+        pad: {
+          horizontal: '10px',
+          vertical: '2px',
+        },
+      },
     },
-    border: {
-      width: '0px',
-      radius: '2px',
-    },
-    padding: {
-      vertical: '4px',
-      horizontal: '22px',
-    },
-    default: {},
-    primary: {
-      background: 'brand',
-      // background: 'gradient',
-      color: 'text',
-    },
-    hover: {
-      default: {},
-      primary: {
-        background: 'control',
-        // color: 'text-weak',
-      },
-    },
-    // @ts-ignore
-    // extend: ({ theme }) =>
-    //   css`
-    //     transition: all 0.2s;
-    //     :hover {
-    //       transition: all 0.2s;
-    //       // background: ${normalizeColor('gradient', theme)};
-    //     }
-    //     //background-color: blue;
-    //   `,
   },
   calendar: {
     small: {
@@ -642,4 +648,40 @@ export const grommetTheme = deepMerge(grommet, {
   //   //   extend: () => `color: #44444`,
   //   // },
   // },
+
+  /*
+  ./. Globals
+   */
+  // border: {
+  //   width: '0px',
+  //   radius: '8px',
+  // },
+  // padding: {
+  //   vertical: '4px',
+  //   horizontal: '22px',
+  // },
+  // default: {},
+  // primary: {
+  //   background: 'brand',
+  //   // background: 'gradient',
+  //   color: 'text',
+  // },
+  // hover: {
+  //   default: {},
+  //   primary: {
+  //     background: '#fff',
+  //     color: 'text-weak',
+  //   },
+  // },
+  // @ts-ignore
+  // extend: ({ theme }) =>
+  //   css`
+  //     transition: all 0.2s;
+  //     :hover {
+  //       transition: all 0.2s;
+  //       // background: ${normalizeColor('gradient', theme)};
+  //     }
+  //     //background-color: blue;
+  //   `,
+  // },
 })
diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
@@ -10,11 +10,20 @@ import { CryptoInput } from 'src/components/CryptoInput'
 
 const Stake: React.FC = () => {
   const { contract, currentUser } = React.useContext(NearContext)
-  const [depositAmnt, setDepositAmnt] = React.useState<string | null>(null)
-  const [withdrawAmnt, setWithdrawAmnt] = React.useState<string | null>(null)
+  const [depositAmnt, setDepositAmnt] = React.useState<string | undefined>()
+  const [withdrawAmnt, setWithdrawAmnt] = React.useState<string | undefined>()
+  const [isQuid, setIsQuid] = React.useState<boolean>(false)
   const [pledged, setPledged] = React.useState<PledgeType | undefined>()
   const [stats, setStats] = React.useState<PoolStatsType | undefined>()
 
+  const currentBalance = isQuid
+    ? utils.format.formatNearAmount(pledged?.credit || '0')
+    : utils.format.formatNearAmount(currentUser?.balance || '0')
+
+  const currentSpBalance = isQuid
+    ? utils.format.formatNearAmount(pledged?.quid_sp || '0')
+    : utils.format.formatNearAmount(pledged?.near_sp || '0')
+
   const getNewPledgedAmnt = async () => {
     const newPledges = await contract?.get_pledge({
       account: currentUser?.accountId,
@@ -29,7 +38,7 @@ const Stake: React.FC = () => {
   React.useEffect(() => {
     getNewPledgedAmnt()
     getStats()
-  }, [contract, getNewPledgedAmnt, getStats])
+  }, [contract])
 
   return (
     <>
@@ -72,12 +81,9 @@ const Stake: React.FC = () => {
               <Box direction="column">
                 <CryptoInput
                   value={String(depositAmnt)}
-                  maxValue={
-                    currentUser?.balance
-                      ? utils.format.formatNearAmount(currentUser?.balance)
-                      : undefined
-                  }
+                  maxValue={currentBalance}
                   onChange={setDepositAmnt}
+                  onChangeCurrency={() => setIsQuid(!isQuid)}
                 />
                 <br />
                 <Button
@@ -114,13 +120,10 @@ const Stake: React.FC = () => {
               <br />
               <Box direction="column">
                 <CryptoInput
-                  maxValue={
-                    currentUser?.balance
-                      ? utils.format.formatNearAmount(pledged?.near_sp || '0')
-                      : undefined
-                  }
+                  maxValue={currentSpBalance}
                   value={String(withdrawAmnt)}
                   onChange={setWithdrawAmnt}
+                  onChangeCurrency={() => setIsQuid(!isQuid)}
                 />
                 <br />
                 <Button