Added stableCoindRate prop

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<u32 | string>) => {
 }
 
 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 = () => {

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,
   })
 }
 

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<u32 | string>,
   assetB: Maybe<u32 | string>,
 ) => {
-  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<u32 | string>[]) => {
   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<u32 | string>[]) => {
 }
 
 export const useUsdSpotPrice = (id: Maybe<u32 | string>) => {
-  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<u32 | string>) => {
         spotPrice: usdSpotPrice,
       }
     },
-    { enabled: !!tokenIn && !!usdId && !!ksmSpotPrice },
+    { enabled: !!tokenIn && !!usdId && !!ksmSpotPrice && isLoaded },
   )
 }

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

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 <TradePage />
+}
+
 export function TradePage() {
   const { api } = useApiPromise()
   const { account } = useAccountStore()
@@ -50,6 +61,12 @@ export function TradePage() {
   const rawSearch = useSearch<SearchGenerics>()
   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<TxInfo>) => {
     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}
         />