Get fiat value from Redux Query

pedrosimao · Feb 12, 2022 · 109ad1c · 109ad1c
1 parent 32332df
commit 109ad1c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/src/components/CryptoInput/index.tsx b/src/components/CryptoInput/index.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { Box, Text, TextInput, Button } from 'grommet'
 
-import { fetchFiatValue } from 'src/components/CryptoInput/utils'
 import * as t from './types'
 
 export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
   value,
   maxValue,
+  currencyQuote,
   onChange,
   onChangeCurrency,
 }) => {
@@ -16,18 +16,21 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
   const [fiatValue, setFiatValue] = React.useState<number>(0)
   const isNear = currency === t.CurrencyTypeEnum.NEAR
 
-  const updateFiatValues = async () => {
-    const newFiatValue = isNear ? await fetchFiatValue() : 1
-    const newTotalFiatValue = newFiatValue * Number(value)
-    setFiatValue(newTotalFiatValue)
+  const updateFiatValues = () => {
+    if (currencyQuote && value) {
+      const newFiatValue = isNear ? currencyQuote : 1
+      const newTotalFiatValue = newFiatValue * Number(value)
+      setFiatValue(newTotalFiatValue)
+    }
   }
 
   // Todo: make a redux value for it, updated every X minutes
   React.useEffect(() => {
-    if (value) {
+    if (value && currencyQuote) {
       updateFiatValues()
     }
-  }, [value, isNear])
+  }, [value, currencyQuote, isNear])
+
   return (
     <>
       {maxValue ? (
@@ -113,7 +116,9 @@ export const CryptoInput: React.FC<t.CryptoInputPropsType> = ({
               color="text-weak"
               style={{ marginLeft: 10, width: '100%', minHeight: 24 }}
             >
-              {fiatValue ? ` ~${fiatValue.toFixed(2)} usd` : null}
+              {fiatValue && Number(value)
+                ? ` ~${fiatValue.toFixed(2)} usd`
+                : null}
             </Text>
           </Box>
           <div />

diff --git a/src/components/CryptoInput/types.ts b/src/components/CryptoInput/types.ts
@@ -3,6 +3,7 @@ export interface CryptoInputPropsType {
   onChange: (value: string) => void
   onChangeCurrency?: (e: string) => void
   maxValue?: string
+  currencyQuote?: number
 }
 
 export enum CurrencyTypeEnum {

diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
@@ -7,6 +7,7 @@ import { NearContext } from 'src/near/nearContext'
 import { PledgeType, PoolStatsType } from 'src/near/types'
 
 import { CryptoInput } from 'src/components/CryptoInput'
+import { useGetNearQuoteQuery } from 'src/redux/api/nearQuote'
 
 const Stake: React.FC = () => {
   const { contract, currentUser } = React.useContext(NearContext)
@@ -15,6 +16,9 @@ const Stake: React.FC = () => {
   const [isQuid, setIsQuid] = React.useState<boolean>(false)
   const [pledged, setPledged] = React.useState<PledgeType | undefined>()
   const [stats, setStats] = React.useState<PoolStatsType | undefined>()
+  const { data: nearQuote } = useGetNearQuoteQuery(undefined, {
+    pollingInterval: 30000, // set to 30 seconds
+  })
 
   const currentBalance = isQuid
     ? utils.format.formatNearAmount(pledged?.credit || '0')
@@ -83,6 +87,7 @@ const Stake: React.FC = () => {
                   value={String(depositAmnt)}
                   maxValue={currentBalance}
                   onChange={setDepositAmnt}
+                  currencyQuote={nearQuote}
                   onChangeCurrency={() => setIsQuid(!isQuid)}
                 />
                 <br />
@@ -105,7 +110,7 @@ const Stake: React.FC = () => {
                           qd_amt: '0',
                           live: false,
                         },
-                        '300000000000000',
+                        undefined,
                         utils.format.parseNearAmount(depositAmnt) || undefined
                       )
                     }
@@ -122,6 +127,7 @@ const Stake: React.FC = () => {
                 <CryptoInput
                   maxValue={currentSpBalance}
                   value={String(withdrawAmnt)}
+                  currencyQuote={nearQuote}
                   onChange={setWithdrawAmnt}
                   onChangeCurrency={() => setIsQuid(!isQuid)}
                 />
@@ -147,7 +153,7 @@ const Stake: React.FC = () => {
                           sp: true,
                           qd: false,
                         },
-                        '300000000000000'
+                        undefined
                         // utils.format.parseNearAmount('0.00001') || undefined
                       )
                     }