Added Redux Query for Near Quotes

pedrosimao · Feb 12, 2022 · 32332df · 32332df
1 parent 4428da7
commit 32332df
Show file tree

Hide file tree

Showing 3 changed files with 246 additions and 0 deletions.
diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
@@ -0,0 +1,209 @@
+import * as React from 'react'
+import Head from 'next/head'
+import { utils } from 'near-api-js'
+import { Box, Text, Tabs, Tab, Button } from 'grommet'
+
+import { NearContext } from 'src/near/nearContext'
+import { PledgeType, PoolStatsType } from 'src/near/types'
+
+import { CryptoInput } from 'src/components/CryptoInput'
+
+const Stake: React.FC = () => {
+  const { contract, currentUser } = React.useContext(NearContext)
+  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,
+    })
+    setPledged(newPledges)
+  }
+  const getStats = async () => {
+    const newStats = await contract?.get_pool_stats({})
+    setStats(newStats)
+  }
+
+  React.useEffect(() => {
+    getNewPledgedAmnt()
+    getStats()
+  }, [contract])
+
+  return (
+    <>
+      <Head>
+        <title>qUid Stable Currency - Stake</title>
+        <meta name="description" content="Stake qUid Stable Currency" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Box
+        alignContent="center"
+        width="100%"
+        height="90vh"
+        align="center"
+        flex
+        direction="column"
+      >
+        <Text
+          // color="brand"
+          as="h2"
+          size="xxlarge"
+          margin={{ bottom: 'medium', top: 'large' }}
+        >
+          Stake on qUid Solvency Pool
+        </Text>
+        {/* Deposit and Withdraw Box*/}
+        <Box
+          width={{ max: '500px', width: '90%' }}
+          // height="300px"
+          background="background-front"
+          // animation="slideDown"
+          gap="small"
+          pad="medium"
+          round="small"
+          direction="column"
+          margin="0 auto"
+        >
+          <Tabs justify="center">
+            <Tab title="Deposit">
+              <br />
+              <Box direction="column">
+                <CryptoInput
+                  value={String(depositAmnt)}
+                  maxValue={currentBalance}
+                  onChange={setDepositAmnt}
+                  onChangeCurrency={() => setIsQuid(!isQuid)}
+                />
+                <br />
+                <Button
+                  primary
+                  disabled={!depositAmnt}
+                  // color="gradient"
+                  label="Confirm"
+                  alignSelf="center"
+                  size="large"
+                  style={{
+                    width: '90%',
+                    margin: '0 auto',
+                    textAlign: 'center',
+                  }}
+                  onClick={async () => {
+                    if (depositAmnt) {
+                      contract?.deposit(
+                        {
+                          qd_amt: '0',
+                          live: false,
+                        },
+                        '300000000000000',
+                        utils.format.parseNearAmount(depositAmnt) || undefined
+                      )
+                    }
+                  }}
+                />
+              </Box>
+            </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% )"
+            >
+              <br />
+              <Box direction="column">
+                <CryptoInput
+                  maxValue={currentSpBalance}
+                  value={String(withdrawAmnt)}
+                  onChange={setWithdrawAmnt}
+                  onChangeCurrency={() => setIsQuid(!isQuid)}
+                />
+                <br />
+                <Button
+                  primary
+                  disabled={!withdrawAmnt}
+                  // color="gradient"
+                  label="Confirm"
+                  alignSelf="center"
+                  size="large"
+                  // fill
+                  style={{
+                    width: '90%',
+                    margin: '0 auto',
+                    textAlign: 'center',
+                  }}
+                  onClick={async () => {
+                    if (withdrawAmnt) {
+                      contract?.renege(
+                        {
+                          amount: utils.format.parseNearAmount(withdrawAmnt),
+                          sp: true,
+                          qd: false,
+                        },
+                        '300000000000000'
+                        // utils.format.parseNearAmount('0.00001') || undefined
+                      )
+                    }
+                  }}
+                />
+              </Box>
+            </Tab>
+          </Tabs>
+        </Box>
+        {/*  Stats Box */}
+        <Box
+          width={{ max: '500px', width: '90%' }}
+          background="background-back"
+          // animation="slideDown"
+          gap="xxsmall"
+          pad="medium"
+          round="small"
+          direction="column"
+          margin="large"
+        >
+          <Box flex direction="row" justify="between" gap="xxsmall">
+            <Text as="h2" size="xlarge" margin="xxsmall">
+              Pool Near
+            </Text>
+            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
+              {utils.format.formatNearAmount(stats?.blood_debit || '0')}
+            </Text>
+          </Box>
+          <Box flex direction="row" justify="between" gap="xxsmall">
+            <Text as="h2" size="xlarge" weight="lighter" margin="xxsmall">
+              My Staked Near
+            </Text>
+            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
+              {utils.format.formatNearAmount(pledged?.near_sp || '0')}
+            </Text>
+          </Box>
+          <Box flex direction="row" justify="between" gap="xxsmall">
+            <Text as="h2" size="xlarge" margin="xxsmall">
+              Pool qUid
+            </Text>
+            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
+              {utils.format.formatNearAmount(stats?.blood_credit || '0')}
+            </Text>
+          </Box>
+          <Box flex direction="row" justify="between" gap="xxsmall">
+            <Text as="h2" size="xlarge" weight="lighter" margin="xxsmall">
+              My Staked Quid
+            </Text>
+            <Text as="h3" size="medium" weight="lighter" margin="xxsmall">
+              {utils.format.formatNearAmount(pledged?.quid_sp || '0')}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </>
+  )
+}
+
+export default Stake
diff --git a/src/redux/api/nearQuote.ts b/src/redux/api/nearQuote.ts
@@ -0,0 +1,25 @@
+// Need to use the React-specific entry point to allow generating React hooks
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export interface NearQuoteType {
+  near: { usd: number; eur: number; cny: number; last_updated_at: number }
+}
+// Define a service using a base URL and expected endpoints
+export const nearQuoteApi = createApi({
+  reducerPath: 'nearQuote',
+  baseQuery: fetchBaseQuery({
+    baseUrl: 'https://near-contract-helper.onrender.com',
+  }),
+  endpoints: (builder) => ({
+    // returns USD quote for Near
+    getNearQuote: builder.query<number, void>({
+      query: () => `fiat`,
+      // Pick out data and prevent nested properties in a hook or selector
+      transformResponse: (response: NearQuoteType) => response?.near?.usd,
+    }),
+  }),
+})
+
+// Export hooks for usage in function components, which are
+// auto-generated based on the defined endpoints
+export const { useGetNearQuoteQuery } = nearQuoteApi
diff --git a/src/redux/store.ts b/src/redux/store.ts
@@ -1,14 +1,26 @@
 import { configureStore } from '@reduxjs/toolkit'
+import { setupListeners } from '@reduxjs/toolkit/query'
+import { nearQuoteApi } from './api/nearQuote'
 
 import walletReducer from './walletSlice'
 
 export const store = configureStore({
   devTools: process.env.NODE_ENV !== 'production',
   reducer: {
     wallet: walletReducer,
+    // Add the generated reducer as a specific top-level slice
+    [nearQuoteApi.reducerPath]: nearQuoteApi.reducer,
   },
+  // Adding the api middleware enables caching, invalidation, polling,
+  // and other useful features of `rtk-query`.
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(nearQuoteApi.middleware),
 })
 
+// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
+// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
+setupListeners(store.dispatch)
+
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}