Started implementing deposit function

pedrosimao · Feb 4, 2022 · adaf0ac · adaf0ac
1 parent 06bbd6e
commit adaf0ac
Show file tree

Hide file tree

Showing 11 changed files with 295 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.7.1",
-    "grommet": "^2.20.0",
+    "grommet": "^2.20.1",
     "near-api-js": "^0.44.2",
     "next": "12.0.7",
     "react": "17.0.2",

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -11,6 +11,7 @@ import {
 } from 'grommet'
 import { List, Unlink, Link } from 'grommet-icons'
 import Image from 'next/image'
+import { utils } from 'near-api-js'
 
 import { NearContext } from 'src/near/nearContext'
 import { CONTRACT_NAME } from 'src/near/config'
@@ -26,6 +27,10 @@ export const Navbar: React.FC = () => {
       `qUId`,
       `${location.origin}/stake`
     )
+    // await walletConnection?.requestSignTransactions({
+    //   transactions: ['deposit'],
+    //   callbackUrl: `${location.origin}/stake`,
+    // })
   }
   const onDisconnectClick = async () => {
     await walletConnection?.signOut()
@@ -69,25 +74,25 @@ export const Navbar: React.FC = () => {
                       />
                     </Clickable>
                     <Anchor
-                      label="Stake"
+                      label="stake"
                       reverse={false}
                       margin="xsmall"
-                      weight={200}
-                      size="xlarge"
+                      weight="normal"
+                      size="medium"
                       onClick={() => router.push('/stake')}
                     />
                     <Anchor
-                      label="Swap"
+                      label="swap"
                       margin="xsmall"
-                      weight={200}
-                      size="xlarge"
+                      weight="normal"
+                      size="medium"
                       reverse={false}
                     />
                     <Anchor
-                      label="Borrow"
+                      label="borrow"
                       margin="xsmall"
-                      weight={200}
-                      size="xlarge"
+                      weight="normal"
+                      size="medium"
                       reverse={false}
                     />
                   </Nav>
@@ -108,7 +113,7 @@ export const Navbar: React.FC = () => {
             {currentUser && currentUser?.isSignedIn ? (
               <Box
                 round
-                background={{ color: 'background-back' }}
+                background="background-back"
                 height="50px"
                 alignContent="center"
                 align="center"
@@ -123,27 +128,21 @@ export const Navbar: React.FC = () => {
                   height="40px"
                   justify="center"
                   pad="small"
-                  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% )"
+                  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
-                    color="black"
-                    size="xsmall"
-                    weight={200}
-                    alignSelf="center"
-                  >
-                    {/* Todo: find the correct way to compute the decimals value*/}
-                    {/* @ts-ignore*/}
-                    {(currentUser?.balance / 1000000000000000000000000).toFixed(
-                      3
-                    )}
+                  <Text size="xsmall" weight={200} alignSelf="center">
+                    {Number(
+                      utils.format.formatNearAmount(currentUser?.balance)
+                    ).toFixed(2)}
                   </Text>
                 </Box>
                 <Anchor onClick={onDisconnectClick} icon={<Unlink />} />
               </Box>
             ) : (
               <Box
                 round
-                background={{ color: 'background-back' }}
+                background="background-back"
                 height="50px"
                 alignContent="center"
                 align="center"

diff --git a/src/grommetTheme.ts b/src/grommetTheme.ts
@@ -1,25 +1,47 @@
 import { grommet } from 'grommet/themes'
-import { deepMerge } from 'grommet/utils'
+import {
+  deepMerge,
+  // normalizeColor,
+} from 'grommet/utils'
+// import { getNormalizedColor } from 'grommet/utils/color'
+// import { css } from 'styled-components'
 
 export const grommetTheme = deepMerge(grommet, {
-  name: 'aruba',
+  name: 'quid-theme',
   rounding: 8,
   spacing: 24,
   defaultMode: 'light',
   global: {
     colors: {
-      brand: '#ED6F00',
+      brand: {
+        dark: '#5700ed',
+        light: '#5700ed',
+      },
+      gradient: {
+        // light: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        light:
+          'linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%)',
+        dark: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      },
+      'gradient-background': {
+        dark: 'linear-gradient(180deg, rgb(32 34 49) 5%, rgb(22 24 29) 15%, #000 100%)',
+        light: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+      },
       background: {
         dark: '#111111',
+        // dark: 'linear-gradient(#e66465, #9198e5)',
+        // dark: css`linear-gradient(90deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(50.559% 99.609% 91.772%) 6.25%, rgb(50.473% 99.613% 92.974%) 12.5%, rgb(50.328% 99.62% 94.988%) 18.75%, rgb(50.126% 99.629% 97.828%) 25%, rgb(49.865% 97.767% 99.641%) 31.25%, rgb(49.547% 93.235% 99.656%) 37.5%, rgb(49.171% 87.801% 99.674%) 43.75%, rgb(48.736% 81.427% 99.695%) 50%, rgb(48.243% 74.067% 99.72%) 56.25%, rgb(47.691% 65.67% 99.748%) 62.5%, rgb(47.08% 56.177% 99.779%) 68.75%, rgb(47.297% 46.411% 99.815%) 75%, rgb(57.721% 45.682% 99.854%) 81.25%, rgb(69.335% 44.894% 99.898%) 87.5%, rgb(82.221% 44.045% 99.947%) 93.75%, rgb(96.471% 43.137% 100%) 100% )`,
         light: '#FFFFFF',
         // dark: `linear-gradient(90deg, rgb(26.667% 26.667% 26.667%) 0%, rgb(21.973% 21.973% 21.973%) 6.25%, rgb(17.865% 17.865% 17.865%) 12.5%, rgb(14.303% 14.303% 14.303%) 18.75%, rgb(11.25% 11.25% 11.25%) 25%, rgb(8.665% 8.665% 8.665%) 31.25%, rgb(6.51% 6.51% 6.51%) 37.5%, rgb(4.746% 4.746% 4.746%) 43.75%, rgb(3.333% 3.333% 3.333%) 50%, rgb(2.233% 2.233% 2.233%) 56.25%, rgb(1.406% 1.406% 1.406%) 62.5%, rgb(0.814% 0.814% 0.814%) 68.75%, rgb(0.417% 0.417% 0.417%) 75%, rgb(0.176% 0.176% 0.176%) 81.25%, rgb(0.052% 0.052% 0.052%) 87.5%, rgb(0.007% 0.007% 0.007%) 93.75%, rgb(0% 0% 0%) 100% )`,
       },
       'background-back': {
-        dark: '#222222',
+        // dark: '#222222',
+        dark: 'rgb(22 21 34)',
         light: '#EEEEEE',
       },
       'background-front': {
-        dark: '#444444',
+        // dark: '#2e2e2e',
+        dark: 'rgb(32 34 49)',
         light: '#FFFFFF',
       },
       'background-contrast': {
@@ -43,13 +65,15 @@ export const grommetTheme = deepMerge(grommet, {
         light: '#666666',
       },
       border: {
-        dark: 'linear-gradient(90deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(50.559% 99.609% 91.772%) 6.25%, rgb(50.473% 99.613% 92.974%) 12.5%, rgb(50.328% 99.62% 94.988%) 18.75%, rgb(50.126% 99.629% 97.828%) 25%, rgb(49.865% 97.767% 99.641%) 31.25%, rgb(49.547% 93.235% 99.656%) 37.5%, rgb(49.171% 87.801% 99.674%) 43.75%, rgb(48.736% 81.427% 99.695%) 50%, rgb(48.243% 74.067% 99.72%) 56.25%, rgb(47.691% 65.67% 99.748%) 62.5%, rgb(47.08% 56.177% 99.779%) 68.75%, rgb(47.297% 46.411% 99.815%) 75%, rgb(57.721% 45.682% 99.854%) 81.25%, rgb(69.335% 44.894% 99.898%) 87.5%, rgb(82.221% 44.045% 99.947%) 93.75%, rgb(96.471% 43.137% 100%) 100% )',
-        light:
-          'linear-gradient(90deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(50.559% 99.609% 91.772%) 6.25%, rgb(50.473% 99.613% 92.974%) 12.5%, rgb(50.328% 99.62% 94.988%) 18.75%, rgb(50.126% 99.629% 97.828%) 25%, rgb(49.865% 97.767% 99.641%) 31.25%, rgb(49.547% 93.235% 99.656%) 37.5%, rgb(49.171% 87.801% 99.674%) 43.75%, rgb(48.736% 81.427% 99.695%) 50%, rgb(48.243% 74.067% 99.72%) 56.25%, rgb(47.691% 65.67% 99.748%) 62.5%, rgb(47.08% 56.177% 99.779%) 68.75%, rgb(47.297% 46.411% 99.815%) 75%, rgb(57.721% 45.682% 99.854%) 81.25%, rgb(69.335% 44.894% 99.898%) 87.5%, rgb(82.221% 44.045% 99.947%) 93.75%, rgb(96.471% 43.137% 100%) 100% )',
+        dark: 'text-xweak',
+        light: 'text-xweak',
+        // dark: css`linear-gradient(90deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(50.559% 99.609% 91.772%) 6.25%, rgb(50.473% 99.613% 92.974%) 12.5%, rgb(50.328% 99.62% 94.988%) 18.75%, rgb(50.126% 99.629% 97.828%) 25%, rgb(49.865% 97.767% 99.641%) 31.25%, rgb(49.547% 93.235% 99.656%) 37.5%, rgb(49.171% 87.801% 99.674%) 43.75%, rgb(48.736% 81.427% 99.695%) 50%, rgb(48.243% 74.067% 99.72%) 56.25%, rgb(47.691% 65.67% 99.748%) 62.5%, rgb(47.08% 56.177% 99.779%) 68.75%, rgb(47.297% 46.411% 99.815%) 75%, rgb(57.721% 45.682% 99.854%) 81.25%, rgb(69.335% 44.894% 99.898%) 87.5%, rgb(82.221% 44.045% 99.947%) 93.75%, rgb(96.471% 43.137% 100%) 100% )`,
+        // light:
+        //   'linear-gradient(90deg, rgb(50.588% 99.608% 91.373%) 0%, rgb(50.559% 99.609% 91.772%) 6.25%, rgb(50.473% 99.613% 92.974%) 12.5%, rgb(50.328% 99.62% 94.988%) 18.75%, rgb(50.126% 99.629% 97.828%) 25%, rgb(49.865% 97.767% 99.641%) 31.25%, rgb(49.547% 93.235% 99.656%) 37.5%, rgb(49.171% 87.801% 99.674%) 43.75%, rgb(48.736% 81.427% 99.695%) 50%, rgb(48.243% 74.067% 99.72%) 56.25%, rgb(47.691% 65.67% 99.748%) 62.5%, rgb(47.08% 56.177% 99.779%) 68.75%, rgb(47.297% 46.411% 99.815%) 75%, rgb(57.721% 45.682% 99.854%) 81.25%, rgb(69.335% 44.894% 99.898%) 87.5%, rgb(82.221% 44.045% 99.947%) 93.75%, rgb(96.471% 43.137% 100%) 100% )',
       },
       control: {
-        light: '#ED6F00',
-        dark: '#EF8B27',
+        light: '#4000bb',
+        dark: '#bb94ff',
       },
       'active-background': {
         light: 'background',
@@ -109,6 +133,7 @@ export const grommetTheme = deepMerge(grommet, {
       color: 'selected-text',
     },
     borderSize: {
+      none: '0px',
       xsmall: '1px',
       small: '2px',
       medium: '4px',
@@ -338,14 +363,45 @@ export const grommetTheme = deepMerge(grommet, {
   },
   scale: 0.3,
   button: {
+    size: {
+      large: {
+        border: {
+          width: '0px',
+          radius: '8px',
+        },
+      },
+    },
     border: {
-      width: '2px',
-      radius: '8px',
+      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: {
@@ -478,6 +534,7 @@ export const grommetTheme = deepMerge(grommet, {
       size: '19px',
       height: '25px',
       maxWidth: '461px',
+      // weight: '100',
     },
     xlarge: {
       size: '20px',
@@ -492,6 +549,7 @@ export const grommetTheme = deepMerge(grommet, {
   },
   anchor: {
     color: 'text',
+    hover: { textDecoration: 'none', fontWeight: 'bold' },
   },
   formField: {
     border: {
@@ -545,26 +603,43 @@ export const grommetTheme = deepMerge(grommet, {
     },
     round: '8px',
   },
+  tab: {
+    color: 'text-weak',
+    border: {
+      side: 'bottom',
+      size: 'xsmall',
+      color: {
+        dark: 'none',
+        light: 'brand',
+      },
+      active: {
+        color: {
+          dark: 'text-weak',
+          light: 'text-weak',
+        },
+      },
+      hover: {
+        color: {
+          dark: 'white',
+          light: 'black',
+        },
+        // extend: undefined,
+      },
+    },
+  },
+  round: '0px',
 
-  // global: {
-  //   breakpoints: {
-  //     xsmall: {
-  //       value: 400,
-  //     },
-  //   },
-  // },
-  // heading: {
-  //   extend: () => `margin-top: 12px; margin-bottom: 12px;`,
-  // },
-  // paragraph: {
-  //   extend: () => `font-weight: 300; margin-top: 0;`,
-  //   xxlarge: {
-  //     size: '28px',
-  //   },
-  // },
   // textInput: {
   //   placeholder: {
-  //     extend: () => `color: #44444`,
+  //     color: 'text-weak',
   //   },
+  //   // color: 'text-weak',
+  //   // extend: () =>
+  //   //   css`
+  //   //     background-color: #555;
+  //   //   `,
+  //   // placeholder: {
+  //   //   extend: () => `color: #44444`,
+  //   // },
   // },
 })
diff --git a/src/near/config.ts b/src/near/config.ts
@@ -1,5 +1,5 @@
 export const CONTRACT_NAME =
-  process.env.CONTRACT_NAME || 'dev-1636228513801-61777166297956'
+  process.env.CONTRACT_NAME || 'dev-1642588138566-86232214910457'
 
 export enum NETWORK_TYPE {
   PRODUCTION = 'production',

diff --git a/src/near/initContract.ts b/src/near/initContract.ts
@@ -1,9 +1,56 @@
 import * as nearAPI from 'near-api-js'
 import { getConfig } from './config'
 
+interface ContractType extends nearAPI.Contract {
+  deposit: (
+    { amount: string, live: boolean }: Record<string, unknown>,
+    gas?: string,
+    deposit?: string
+  ) => void
+  borrow: (
+    { amount: string, short: boolean }: Record<string, unknown>,
+    gas?: string,
+    deposit?: string
+  ) => void
+  new: (
+    { owner_id: string }: Record<string, unknown>,
+    gas?: string,
+    deposit?: string
+  ) => void
+  /*
+   * This function exists to allow withdraw of deposits, either from
+   * a user's SolvencyPool deposit, or LivePool (borrowing) position
+   * Hence, the first boolean parameter (for indicating which pool),
+   * last boolean parameter indicates the currency being withdrawn.
+   */
+  renege: (
+    // @ts-ignore Todo: find a solution for this weird duplicate alert
+    { amount: string, sp: boolean, qd: boolean }: Record<string, unknown>,
+    gas?: string,
+    deposit?: string
+  ) => void
+  /*
+   * Close out caller's borrowing position by paying
+   * off all pledge's own debt with own collateral
+   */
+  fold: (
+    { short: boolean }: Record<string, unknown>,
+    gas?: string,
+    deposit?: string
+  ) => void
+  /*
+   * Call this function to attempt liquidating a single Pledge
+   */
+  clip: (
+    { account: string }: Record<string, unknown>,
+    gas?: string,
+    deposit?: string
+  ) => void
+}
+
 export interface NearContextType {
+  contract: ContractType | null
   walletConnection: nearAPI.WalletConnection | null
-  contract: nearAPI.Contract | null
   currentUser?: {
     accountId: string
     balance: string
@@ -49,15 +96,15 @@ export const initContract = async (): Promise<NearContextType> => {
     nearConfig.contractName,
     {
       // View methods are read-only – they don't modify the state, but usually return some value
-      viewMethods: ['get'],
+      viewMethods: ['get_pledge'],
       // Change methods can modify the state, but you don't receive the returned value when called
-      changeMethods: ['create', 'update', 'del'],
+      changeMethods: ['renege', 'borrow', 'deposit', 'fold', 'clip', 'new'],
       // Sender is the account ID to initialize transactions.
       // getAccountId() will return empty string if user is still unauthorized
       // Todo: check if sender is needed
       // sender: walletConnection.getAccountId(),
     }
   )
-
+  // @ts-ignore - Todo: verify whats the problem with Contract ts type
   return { contract, currentUser, nearConfig, walletConnection }
 }