feat: setup swapStore to manage store for swap page

blueogin · blueogin · commit 951e4e7af15a · 2025-03-14T13:03:15.000-04:00
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,6 +11,7 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+
   return (
     <html lang="en" suppressHydrationWarning>
       <body>
diff --git a/src/app/swap/page.tsx b/src/app/swap/page.tsx
@@ -21,16 +21,22 @@ import {
   ModalContent
 } from '@chakra-ui/react';
 import TokenSelector from '@/components/uis/TokenSelector';
+import { useSwapStore } from '@/store/swap/swapStore';
+import { shallow } from 'zustand/shallow';
 
 export default function Home() {
-  const { address, isConnected } = useAccount();
+  const { address, status, isConnected } = useAccount();
 
+  const {
+    initAssets,
+  } = useSwapStore(
+    state => ({
+      initAssets: state.actions.initAssets,
+    }),
+    shallow
+  );
   useEffect(() => {
-    if (isConnected) {
-      console.log('Wallet address: ', address);
-    } else {
-      console.log('Not connected');
-    }
+    initAssets();
   }, [address, isConnected]);
   
   const onSwapClick = () => {
diff --git a/src/components/features/ThemeSwitch.tsx b/src/components/features/ThemeSwitch.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useTheme } from 'next-themes';
-import { HiSun, HiMoon } from 'react-icons/hi';
+import { HiSun, HiMoon } from 'react-icons/hi2';
 
 export default function ThemeSwitch({ className }: { className?: string }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
diff --git a/src/components/uis/TokenSelector.tsx b/src/components/uis/TokenSelector.tsx
@@ -2,7 +2,7 @@ import SwampAvatar from '@/components/core/SwampAvatar';
 // import LocalTokenSupport from '@/components/core/tokenSelector/LocalTokenSupport';
 import { useGetBalances, useSearchToken } from '@/hooks/swap';
 import { Token } from '@/interfaces';
-// import { useSwapStore } from '@/store/features/swap/swapStore';
+import { useSwapStore } from '@/store/swap/swapStore';
 import { SearchIcon } from '@chakra-ui/icons';
 import {
   Button,
@@ -34,10 +34,14 @@ const TokenSelector = ({ children, type }: TokenSelectorProps) => {
 
   const { filteredTokens, search, setSearch } = useSearchToken();
 
-  // const handleOnClick = (token: Token): void => {
-  //   // setAsset(token.address, type);
-  //   onClose();
-  // };
+  const {
+    actions: { setAsset },
+  } = useSwapStore(state => state);
+
+  const handleOnClick = (token: Token): void => {
+    setAsset(token.address, type);
+    onClose();
+  };
   const onSearchChanged = async (event: any) => {
     // setSearch(event.target.value);
   };
@@ -97,7 +101,7 @@ const TokenSelector = ({ children, type }: TokenSelectorProps) => {
                       color: 'yellow.500',
                     }}
                     value={token.address}
-                    // onClick={() => handleOnClick(token)}
+                    onClick={() => handleOnClick(token)}
                     >
                     <SwampAvatar
                       size={'sm'}
diff --git a/src/config/contractsTestnet.ts b/src/config/contractsTestnet.ts
@@ -2,6 +2,8 @@ import {
     erc20ABI,
     pairABI,
     tokenABI,
+    factoryABI,
+    routerABI
   } from './abis';
   
   export const GOV_TOKEN_ADDRESS = '0xc3de830ea07524a0761646a6a4e4be0e114a3c83';
@@ -14,6 +16,10 @@ import {
   export const ERC20_ABI = erc20ABI;
   export const PAIR_ABI = pairABI;
   export const TOKEN_ABI = tokenABI;
+  export const FACTORY_ABI = factoryABI;
+  export const ROUTER_ABI = routerABI;
+  
+  export const COIN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
 
   export const MULTICALL_ADDRESS = '0x091e99cb1C49331a94dD62755D168E941AbD0693';
   
diff --git a/src/hooks/swap/useGetBalances.tsx b/src/hooks/swap/useGetBalances.tsx
@@ -1,6 +1,6 @@
 import { Token } from '@/interfaces';
 import { useBaseAssetStore } from '@/store/baseAssetsStore';
-import { fetchBalance } from '@wagmi/core';
+import { getBalance } from 'wagmi/actions';
 import { useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 
@@ -21,7 +21,7 @@ const useGetBalances = () => {
       const getBalances = async () => {
         let localList = await Promise.all(
           baseAssets.map(async (token: Token) => {
-            return await fetchBalance({
+            return await getBalance({
               address: address!,
               token: token.address,
             })
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -1,12 +1,25 @@
 'use client';
 
-import React, { PropsWithChildren, useState } from 'react';
+import React, { PropsWithChildren, useState, useEffect } from 'react';
 import Footer from '@/layout/footer';
 import Navbar from '@/layout/navbar';
 import Sidebar from '@/layout/sidebar';
+import { useBaseAssetStore } from '@/store/baseAssetsStore';
+import { shallow } from 'zustand/shallow';
 
 export default function Layout({ children }: PropsWithChildren) {
+
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const { initBaseAssets, isLoading } = useBaseAssetStore(
+    state => ({
+      initBaseAssets: state.actions.initBaseAssets,
+      isLoading: state.isLoading,
+    }),
+    shallow
+  );
+  useEffect(() => {
+    initBaseAssets();
+  }, []);
 
   return (
     <div className="min-h-screen flex flex-col">
diff --git a/src/store/baseAssetsStore.ts b/src/store/baseAssetsStore.ts
@@ -14,18 +14,20 @@ interface BaseAssetState {
     setBaseAsset: (token: Token) => void;
   };
 }
-const BASE_URL = process.env.NEXT_PUBLIC_API ?? 'https://localhost:8000';
+const BASE_URL = process.env.NEXT_PUBLIC_UNISWAP_SUBGRAPH_URL ?? 'https://localhost:8000';
 
 export const useBaseAssetStore = create<BaseAssetState>()(
   devtools((set, get) => ({
     baseAssets: [],
     isLoading: false,
     actions: {
       initBaseAssets: async () => {
+        console.log(process.env.NEXT_PUBLIC_UNISWAP_SUBGRAPH_URL);
         set({ isLoading: true });
         await axios
-          .get(BASE_URL.concat('/assets'))
+          .get(BASE_URL)
           .then(response => {
+            console.log(response);
             let baseAssets = response.data.data;
             baseAssets = mapToken(baseAssets);
 
diff --git a/src/store/swap/swapStore.ts b/src/store/swap/swapStore.ts
@@ -0,0 +1,178 @@
+import { CONTRACTS } from '@/config';
+import { Token } from '@/interfaces';
+import { useBaseAssetStore } from '@/store/baseAssetsStore';
+import { getBalance, getAccount } from 'wagmi/actions';
+import { mainnet } from 'wagmi/chains';  // Or another chain if needed
+import { create } from 'zustand';
+import { readPairFactory } from '@/lib/swamp';
+import { wagmiConfig } from '@/lib/constants/wagmiConfig'
+
+interface SwapState {
+  inputAsset?: Token;
+  outputAsset?: Token;
+  displayRoute: boolean;
+  amountRaw: string;
+  slippage: string;
+  txDeadline: string;
+  isFetching: boolean;
+  priceImpact: string;
+  actions: {
+    initAssets: () => void;
+    updateAssets: () => void;
+    setAsset: (address: string, type: string) => void;
+    setAmountRaw: (amount: string) => void;
+    setSlippage: (slippage: string) => void;
+    setTxDeadline: (txDeadline: string) => void;
+    getSwapQuote: () => void;
+    // cleanRoute: () => void;
+    changeDisplayRoute: (value: boolean) => void;
+    getFeePercentage: () => Promise<{ stableFee: number; volatileFee: number }>;
+    setPriceImpact: (value: string) => void;
+  };
+}
+
+export const useSwapStore = create<SwapState>((set, get) => ({
+  inputAsset: undefined,
+  outputAsset: undefined,
+  displayRoute: true,
+  swapQuote: {},
+  amountRaw: '0',
+  slippage: '2',
+  txDeadline: '300',
+  isFetching: false,
+  priceImpact: '0',
+  actions: {
+    initAssets: async () => {
+      console.log("initAssets");
+      const { getBaseAsset } = useBaseAssetStore.getState().actions;
+      const inputAsset = getBaseAsset(CONTRACTS.COIN_ADDRESS);
+      const outputAsset = getBaseAsset(CONTRACTS.GOV_TOKEN_ADDRESS);
+      const { address } = getAccount(wagmiConfig);
+      if (address) {
+        if (inputAsset) {
+          inputAsset.balance = (
+            await getBalance(wagmiConfig, { address: address })
+          ).formatted;
+        }
+        if (outputAsset) {
+          outputAsset.balance = (
+            await getBalance(wagmiConfig, { address: address, token: outputAsset.address })
+          ).formatted;
+        }
+      }
+
+      set({
+        inputAsset,
+        outputAsset,
+      });
+    },
+    updateAssets: async () => {
+      const { address } = getAccount(wagmiConfig);
+      const { inputAsset, outputAsset } = get();
+      const { setBaseAsset } = useBaseAssetStore.getState().actions;
+      if (address) {
+        if (inputAsset) {
+          if (
+            inputAsset.address.toLowerCase() ===
+            CONTRACTS.COIN_ADDRESS.toLowerCase()
+          ) {
+            inputAsset.balance = (
+              await getBalance(wagmiConfig, { address: address })
+            ).formatted;
+            inputAsset.balanceWei = (
+              await getBalance(wagmiConfig, { address: address })
+            ).value.toString();
+          } else {
+            inputAsset.balance = (
+              await getBalance(wagmiConfig, {
+                address: address,
+                token: inputAsset.address,
+              })
+            ).formatted;
+            inputAsset.balanceWei = (
+              await getBalance(wagmiConfig, {
+                address: address,
+                token: inputAsset.address,
+              })
+            ).value.toString();
+          }
+          setBaseAsset(inputAsset);
+        }
+        if (outputAsset) {
+          if (
+            outputAsset.address.toLowerCase() ===
+            CONTRACTS.COIN_ADDRESS.toLowerCase()
+          ) {
+            outputAsset.balance = (
+              await getBalance(wagmiConfig, { address: address })
+            ).formatted;
+            outputAsset.balanceWei = (
+              await getBalance(wagmiConfig, { address: address })
+            ).value.toString();
+          } else {
+            outputAsset.balance = (
+              await getBalance(wagmiConfig, {
+                address: address,
+                token: outputAsset.address,
+              })
+            ).formatted;
+            outputAsset.balanceWei = (
+              await getBalance(wagmiConfig, {
+                address: address,
+                token: outputAsset.address,
+              })
+            ).value.toString();
+          }
+          setBaseAsset(outputAsset);
+        }
+      }
+
+      set({
+        inputAsset,
+        outputAsset,
+      });
+    },
+    setAsset: (address, type) => {
+      const { getBaseAsset } = useBaseAssetStore.getState().actions;
+      const temp = getBaseAsset(address);
+      if (type === 'input') {
+        set({
+          inputAsset: temp,
+        });
+      } else if (type === 'output') {
+        set({
+          outputAsset: temp,
+        });
+      } else {
+        console.log("Wrong type parameter: use 'input' or 'output'");
+      }
+    },
+    setAmountRaw: (amount: string) => {
+      set({ amountRaw: amount });
+    },
+    setSlippage: (slippage: string) => set({ slippage }),
+    setTxDeadline: (txDeadline: string) => set({ txDeadline }),
+    getSwapQuote: async () => {
+      set({ isFetching: true });
+      // const swapQuote = await _getRoute();
+      // set({ swapQuote: swapQuote });
+      set({ isFetching: false });
+    },
+    // cleanRoute: () => set({ swapQuote: {} }),
+    changeDisplayRoute: (value: boolean) => set({ displayRoute: value }),
+    getFeePercentage: async () => {
+      const stableFee = await readPairFactory(wagmiConfig, {
+        functionName: 'stableFee',
+      });
+      const volatileFee = await readPairFactory(wagmiConfig, {
+        functionName: 'volatileFee',
+      });
+
+      return {
+        stableFee: Number(stableFee) / 100,
+        volatileFee: Number(volatileFee) / 100,
+      };
+    },
+    setPriceImpact: (value: string) => set({ priceImpact: value }),
+  },
+}));
