Added Borrow Page

pedrosimao · Feb 20, 2022 · c6b97dc · c6b97dc
1 parent d5639ec
commit c6b97dc
Show file tree

Hide file tree

Showing 10 changed files with 267 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'