From 121161d9bde822d4182a32671b026b83fc2c72d4 Mon Sep 17 00:00:00 2001 From: Lyka Labrada Date: Tue, 21 Mar 2023 15:08:01 +0800 Subject: [PATCH] feat(dex): integrate stab-fee api --- next.config.js | 4 +-- src/pages/dex/[poolpairId]/index.page.tsx | 34 +++++++++++++---------- src/store/website.tsx | 16 ++++++++++- 3 files changed, 37 insertions(+), 17 deletions(-) diff --git a/next.config.js b/next.config.js index c0f72acdd..46a1bf683 100644 --- a/next.config.js +++ b/next.config.js @@ -15,9 +15,9 @@ const securityHeaders = [ };` + `style-src 'self' fonts.googleapis.com 'unsafe-inline';` + `font-src fonts.gstatic.com;` + - `connect-src 'self' ocean.defichain.com 35.241.191.23:3000 *.jellyfishsdk.com playground.jellyfishsdk.com wallet.defichain.com; ${ + `connect-src 'self' ocean.defichain.com 35.241.191.23:3000 *.jellyfishsdk.com playground.jellyfishsdk.com wallet.defichain.com ${ process.env.NODE_ENV === "development" - ? `ws://localhost:3000/_next/webpack-hmr` + ? `localhost:* ws://localhost:3000/_next/webpack-hmr` : "" };` + `prefetch-src 'self';`, diff --git a/src/pages/dex/[poolpairId]/index.page.tsx b/src/pages/dex/[poolpairId]/index.page.tsx index 55eb6d244..d6f906277 100644 --- a/src/pages/dex/[poolpairId]/index.page.tsx +++ b/src/pages/dex/[poolpairId]/index.page.tsx @@ -19,6 +19,8 @@ import { Breadcrumb } from "@components/commons/Breadcrumb"; import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import BigNumber from "bignumber.js"; +import { useNetwork } from "@contexts/NetworkContext"; +import { useGetPairsWithStabilizationFeeQuery } from "@store/website"; import { SwapCards } from "./_components/SwapCards"; import { PoolPairDetails } from "./_components/PoolPairDetails"; import { SwapTable } from "./_components/SwapTable"; @@ -45,11 +47,11 @@ export default function PoolPairPage( const [swapItems, setSwapItems] = useState(props.swaps.items); const [poolpairs, setPoolpairs] = useState(props.poolpair); const router = useRouter(); - - const dexStabilizationFee = - poolpairs.tokenA.displaySymbol === "DUSD" - ? poolpairs.tokenA.fee?.pct - : poolpairs.tokenB.fee?.pct; + const { connection } = useNetwork(); + const { data: poolpairsWithDexFee } = useGetPairsWithStabilizationFeeQuery({ + network: connection, + }); + const [dexStabilizationFee, setDexStabilizationFee] = useState(); useEffect(() => { setPoolpairs(props.poolpair); @@ -73,6 +75,17 @@ export default function PoolPairPage( } }, [props, router.query]); + useEffect(() => { + const pairDexStabFee = poolpairsWithDexFee?.find( + (pair) => + pair.tokenADisplaySymbol === poolpairs.tokenA.displaySymbol && + pair.tokenBDisplaySymbol === poolpairs.tokenB.displaySymbol + ); + if (pairDexStabFee !== undefined) { + setDexStabilizationFee(pairDexStabFee.dexStabilizationFee); + } + }, [poolpairsWithDexFee, poolpairs]); + return ( <>
- {["DUSD-DFI", "dUSDC-DUSD", "dUSDT-DUSD", "dEUROC-DUSD"].includes( - poolpairs.displaySymbol - ) && ( + {dexStabilizationFee !== undefined && ( ( @@ -108,12 +119,7 @@ export default function PoolPairPage( )} popoverDescription="There is currently a high DEX Stabilization fee imposed on DUSD-DFI swaps due to DFIP 2206-D." rhs={{ - value: - dexStabilizationFee === undefined - ? undefined - : new BigNumber(dexStabilizationFee) - .multipliedBy(100) - .toFixed(2, BigNumber.ROUND_HALF_UP), + value: dexStabilizationFee, suffix: "%", }} /> diff --git a/src/store/website.tsx b/src/store/website.tsx index 407d24b26..030ac001e 100644 --- a/src/store/website.tsx +++ b/src/store/website.tsx @@ -1,4 +1,5 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; +import { PoolpairWithStabInfo } from "@waveshq/walletkit-core"; interface DefiChainStatus { status: { @@ -74,16 +75,29 @@ export const announcementWebsiteSlice = createApi({ }, }), }), + getPairsWithStabilizationFee: builder.query({ + query: (reqParams) => ({ + url: "/wallet/pairs-with-stab-info", + params: reqParams, + method: "GET", + headers: { + "Access-Control-Allow-Origin": "*", + mode: "no-cors", + }, + }), + }), }), }); const { useGetBlockchainStatusQuery, useGetOceanStatusQuery } = statusWebsiteSlice; -const { useGetAnnouncementsQuery } = announcementWebsiteSlice; +const { useGetAnnouncementsQuery, useGetPairsWithStabilizationFeeQuery } = + announcementWebsiteSlice; export { useGetBlockchainStatusQuery, useGetOceanStatusQuery, useGetAnnouncementsQuery, + useGetPairsWithStabilizationFeeQuery, };