feat(dex): integrate stab-fee api

BirthdayResearch · Mar 22, 2023 · 9bfb318 · 9bfb318
1 parent e7eae96
commit 9bfb318
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 17 deletions.
diff --git 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
@@ -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<PoolSwapData[]>(props.swaps.items);
   const [poolpairs, setPoolpairs] = useState<PoolPairData>(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<string>();
 
   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 (
     <>
       <Head
@@ -96,9 +109,7 @@ export default function PoolPairPage(
         />
         <div className="flex flex-wrap flex-row lg:space-x-4">
           <PoolPairDetailsBar poolpair={poolpairs} />
-          {["DUSD-DFI", "dUSDC-DUSD", "dUSDT-DUSD", "dEUROC-DUSD"].includes(
-            poolpairs.displaySymbol
-          ) && (
+          {dexStabilizationFee !== undefined && (
             <PoolPairInfo
               testId="DexStabilizationFee"
               lhsComponent={() => (
@@ -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
@@ -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<PoolpairWithStabInfo[], any>({
+      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,
 };