From 7a4f6bf03700a3395afacb2ed828e7aebc2acaf9 Mon Sep 17 00:00:00 2001 From: vkulinich Date: Fri, 15 Mar 2024 14:34:22 +0100 Subject: [PATCH] Added stableCoindRate prop --- src/api/asset.ts | 16 +++++++++------- src/api/assetDetails.ts | 3 ++- src/api/spotPrice.ts | 20 +++++++++----------- src/components/InvalidateOnBlock.tsx | 2 +- src/sections/trade/TradePage.tsx | 18 ++++++++++++++++++ 5 files changed, 39 insertions(+), 20 deletions(-) diff --git a/src/api/asset.ts b/src/api/asset.ts index 25958030..3780c019 100644 --- a/src/api/asset.ts +++ b/src/api/asset.ts @@ -2,7 +2,7 @@ import { useAssetMeta } from "./assetMeta" import { useAssetDetails, useAssetDetailsList } from "./assetDetails" import { getAssetLogo } from "components/AssetIcon/AssetIcon" import { u32 } from "@polkadot/types" -import { Maybe, useQueryReduce, useQuerySelect } from "utils/helpers" +import { Maybe, useQueryReduce } from "utils/helpers" import { TradeRouter } from "@galacticcouncil/sdk" import { useApiPromise } from "utils/api" import { useQuery } from "@tanstack/react-query" @@ -24,13 +24,15 @@ export const useAsset = (id: Maybe) => { } export const useUsdPeggedAsset = () => { - return useQuerySelect(useAssetDetailsList(), (data) => - data.find( - (asset) => - asset.symbol.toLowerCase() === - import.meta.env.VITE_USD_PEGGED_ASSET_NAME.toLowerCase(), - ), + const assets = useAssetDetailsList() + + const usdId = assets.data?.find( + (asset) => + asset.symbol.toLowerCase() === + import.meta.env.VITE_USD_PEGGED_ASSET_NAME.toLowerCase(), ) + + return usdId?.id ?? "" } export const useTradeAssets = () => { diff --git a/src/api/assetDetails.ts b/src/api/assetDetails.ts index be255c8a..727b698a 100644 --- a/src/api/assetDetails.ts +++ b/src/api/assetDetails.ts @@ -26,7 +26,7 @@ export const useAssetDetailsList = ( assetType: ["Token"], }, ) => { - const { api } = useApiPromise() + const { api, isLoaded } = useApiPromise() const normalizedIds = ids?.filter(isNotNil).map(normalizeId) @@ -41,6 +41,7 @@ export const useAssetDetailsList = ( filter.assetType.includes(asset.assetType), ) }, + enabled: !!isLoaded, }) } diff --git a/src/api/spotPrice.ts b/src/api/spotPrice.ts index 5f036778..f237bddb 100644 --- a/src/api/spotPrice.ts +++ b/src/api/spotPrice.ts @@ -2,7 +2,7 @@ import { useQueries, useQuery } from "@tanstack/react-query" import { QUERY_KEYS } from "utils/queryKeys" import { u32 } from "@polkadot/types" import { TradeRouter } from "@galacticcouncil/sdk" -import { BN_1, BN_10, BN_NAN } from "utils/constants" +import { BN_1, BN_NAN } from "utils/constants" import BN from "bignumber.js" import { useApiPromise } from "utils/api" import { Maybe } from "utils/helpers" @@ -12,14 +12,14 @@ export const useSpotPrice = ( assetA: Maybe, assetB: Maybe, ) => { - const { tradeRouter } = useApiPromise() + const { tradeRouter, isLoaded } = useApiPromise() const tokenIn = assetA?.toString() ?? "" const tokenOut = assetB?.toString() ?? "" return useQuery( QUERY_KEYS.spotPrice(tokenIn, tokenOut), getSpotPrice(tradeRouter, tokenIn, tokenOut), - { enabled: !!tokenIn && !!tokenOut }, + { enabled: !!tokenIn && !!tokenOut && isLoaded }, ) } @@ -51,9 +51,9 @@ export const getSpotPrice = // error replies are valid in case token has no spot price let spotPrice = BN_NAN try { - const res = await tradeRouter.getBestSpotPrice(tokenIn, tokenOut) + const res = await tradeRouter.getBestSpotPrice(tokenOut, tokenIn) if (res) { - spotPrice = res.amount.div(BN_10.pow(res.decimals)) + spotPrice = BN_1.shiftedBy(res.decimals).div(res.amount) } } catch (e) {} @@ -89,10 +89,9 @@ export const getCoingeckoSpotPrice = async () => { export const useUsdSpotPrices = (ids: Maybe[]) => { const { tradeRouter } = useApiPromise() - const usd = useUsdPeggedAsset() + const usdId = useUsdPeggedAsset() const coingecko = useCoingeckoKsmPrice() - const usdId = usd.data?.id ?? "" const ksmSpotPrice = coingecko.data const assets = ids @@ -117,12 +116,11 @@ export const useUsdSpotPrices = (ids: Maybe[]) => { } export const useUsdSpotPrice = (id: Maybe) => { - const { tradeRouter } = useApiPromise() - const usd = useUsdPeggedAsset() + const { isLoaded, tradeRouter } = useApiPromise() + const usdId = useUsdPeggedAsset() const coingecko = useCoingeckoKsmPrice() const tokenIn = id?.toString() ?? "" - const usdId = usd.data?.id ?? "" const ksmSpotPrice = coingecko.data return useQuery( @@ -136,6 +134,6 @@ export const useUsdSpotPrice = (id: Maybe) => { spotPrice: usdSpotPrice, } }, - { enabled: !!tokenIn && !!usdId && !!ksmSpotPrice }, + { enabled: !!tokenIn && !!usdId && !!ksmSpotPrice && isLoaded }, ) } diff --git a/src/components/InvalidateOnBlock.tsx b/src/components/InvalidateOnBlock.tsx index b12a093f..3fb2e909 100644 --- a/src/components/InvalidateOnBlock.tsx +++ b/src/components/InvalidateOnBlock.tsx @@ -8,7 +8,7 @@ export const InvalidateOnBlock = (props: { children: ReactNode }) => { const queryClient = useQueryClient() useEffect(() => { - if (isLoaded) { + if (isLoaded && api) { let cancel: () => void api.rpc.chain diff --git a/src/sections/trade/TradePage.tsx b/src/sections/trade/TradePage.tsx index bf5df457..691d6903 100644 --- a/src/sections/trade/TradePage.tsx +++ b/src/sections/trade/TradePage.tsx @@ -12,6 +12,9 @@ import { z } from "zod" import { MakeGenerics, useSearch } from "@tanstack/react-location" import { useProviderRpcUrlStore } from "api/provider" import { useApiPromise } from "utils/api" +import { useUsdSpotPrice } from "api/spotPrice" +import { useSpotPrice } from "../../api/spotPrice" +import { useUsdPeggedAsset } from "api/asset" export const TradeApp = createComponent({ tagName: "gc-trade", @@ -40,6 +43,14 @@ type SearchGenerics = MakeGenerics<{ const grafanaUrl = import.meta.env.VITE_GRAFANA_URL const grafanaDsn = import.meta.env.VITE_GRAFANA_DSN +export const TradeWrapper = () => { + const { isLoaded } = useApiPromise() + + if (!isLoaded) return null + + return +} + export function TradePage() { const { api } = useApiPromise() const { account } = useAccountStore() @@ -50,6 +61,12 @@ export function TradePage() { const rawSearch = useSearch() const usdAssetId = import.meta.env.VITE_USD_PEGGED_ASSET_ID const search = TradeAppSearch.safeParse(rawSearch) + const peggedAssetId = useUsdPeggedAsset() + + const usdPrice = useUsdSpotPrice(peggedAssetId) + const spotPrice = useSpotPrice(peggedAssetId, usdAssetId) + + const rate = usdPrice.data?.spotPrice.div(spotPrice.data?.spotPrice ?? 1) const handleSubmit = async (e: CustomEvent) => { const { transaction, notification } = e.detail @@ -110,6 +127,7 @@ export function TradePage() { grafanaUrl={grafanaUrl} grafanaDsn={grafanaDsn} stableCoinAssetId={usdAssetId} + stableCoindRate={rate?.toString()} assetIn={assetIn} assetOut={assetOut} />