diff --git a/src/components/CryptoInput/index.tsx b/src/components/CryptoInput/index.tsx index 682cf07..3f49640 100644 --- 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 = ({ value, maxValue, + currencyQuote, onChange, onChangeCurrency, }) => { @@ -16,18 +16,21 @@ export const CryptoInput: React.FC = ({ const [fiatValue, setFiatValue] = React.useState(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 = ({ color="text-weak" style={{ marginLeft: 10, width: '100%', minHeight: 24 }} > - {fiatValue ? ` ~${fiatValue.toFixed(2)} usd` : null} + {fiatValue && Number(value) + ? ` ~${fiatValue.toFixed(2)} usd` + : null}
diff --git a/src/components/CryptoInput/types.ts b/src/components/CryptoInput/types.ts index 1b49bc9..d5bbcca 100644 --- 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 index 6da17cc..1f5c548 100644 --- 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(false) const [pledged, setPledged] = React.useState() const [stats, setStats] = React.useState() + 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)} />
@@ -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 = () => { setIsQuid(!isQuid)} /> @@ -147,7 +153,7 @@ const Stake: React.FC = () => { sp: true, qd: false, }, - '300000000000000' + undefined // utils.format.parseNearAmount('0.00001') || undefined ) }