feat: add hooks and store for tokenSelector

Author: blueogin

src/hooks/swap/index.ts

@@ -0,0 +1,2 @@
+export { default as useGetBalances } from './useGetBalances';
+export { default as useSearchToken } from './useSearchToken';

src/hooks/swap/useGetBalances.tsx

@@ -0,0 +1,71 @@
+import { Token } from '@/interfaces';
+import { useBaseAssetStore } from '@/store/baseAssetsStore';
+import { fetchBalance } from '@wagmi/core';
+import { useEffect, useState } from 'react';
+import { useAccount } from 'wagmi';
+
+//* Returns 2 lists of tokens with their balance
+//* tokenList -> whole list
+//* fixedTokens -> banner/fav tokens
+
+const useGetBalances = () => {
+  const { baseAssets: tempBaseAssets } = useBaseAssetStore(state => state);
+  const baseAssets = tempBaseAssets;
+
+  const { address, isConnected, status } = useAccount();
+  const [tokenList, setTokenList] = useState<Token[]>();
+  const [fixedTokens, setFixedTokens] = useState<Token[]>();
+
+  useEffect(() => {
+    if (isConnected) {
+      const getBalances = async () => {
+        let localList = await Promise.all(
+          baseAssets.map(async (token: Token) => {
+            return await fetchBalance({
+              address: address!,
+              token: token.address,
+            })
+              .then(r => {
+                token.balance = r.formatted;
+                token.balanceWei = r.value.toString();
+                return token;
+              })
+              .catch(e => {
+                token.balance = '0';
+                return token;
+              });
+          })
+        );
+        localList = localList
+          .sort((a, b) => Number(b.balance) - Number(a.balance))
+          .map(token => {
+            token.balance = token.balance;
+
+            return token;
+          });
+        setTokenList(localList);
+        setFixedTokens(
+          localList.filter(
+            token =>
+              token.symbol === 'USDT'
+          )
+        );
+      };
+
+      getBalances();
+    } else {
+      let localList = baseAssets;
+      setTokenList(localList);
+      setFixedTokens(
+        baseAssets.filter(
+          token =>
+            token.symbol === 'USDT'
+        )
+      );
+    }
+  }, [status, baseAssets]);
+
+  return { tokenList, fixedTokens };
+};
+
+export default useGetBalances;

src/hooks/swap/useSearchToken.tsx

@@ -0,0 +1,43 @@
+import { Token } from '@/interfaces';
+import { useBaseAssetStore } from '@/store/baseAssetsStore';
+import { useState, useEffect } from 'react';
+
+//* Applies search functionality to the token lists
+//* Returns: filteredTokens<Token[]> and setSearch
+
+const useSearchToken = () => {
+  const { baseAssets: tempBaseAssets } = useBaseAssetStore(state => state);
+  const baseAssets = tempBaseAssets;
+
+  const [filteredTokens, setFilteredTokens] = useState<Token[]>([]);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    let ft = getFilteredTokens(search);
+    setFilteredTokens(ft);
+  }, [search]);
+  const getFilteredTokens = (searchStr: string) => {
+    let ft = baseAssets.filter(token => {
+      if (searchStr && searchStr !== '') {
+        return (
+          token.address.toLowerCase().includes(searchStr.toLowerCase()) ||
+          token.symbol.toLowerCase().includes(searchStr.toLowerCase()) ||
+          token.name.toLowerCase().includes(searchStr.toLowerCase())
+        );
+      } else {
+        return token;
+      }
+    });
+    ft = ft
+      .sort((a, b) => Number(b.balance) - Number(a.balance))
+      .map(token => {
+        token.balance = token.balance;
+        return token;
+      });
+    return ft;
+
+  }
+  return { filteredTokens, search, getFilteredTokens, setSearch };
+};
+
+export default useSearchToken;

src/interfaces/Token.ts

@@ -0,0 +1,12 @@
+export interface Token {
+  price: number | string;
+  stable: boolean;
+  address: `0x${string}`;
+  name: string;
+  symbol: string;
+  decimals: number | string;
+  logoURI: string;
+  liquidStakedAddress: string;
+  balance: number | string;
+  balanceWei?: string;
+}

src/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './Token';

src/store/baseAssetsStore.ts

@@ -0,0 +1,57 @@
+import { CONTRACTS } from '@/config';
+import { Token } from '@/interfaces';
+import { mapToken } from '@/utils/interfaceMaps';
+import axios from 'axios';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+interface BaseAssetState {
+  baseAssets: Token[];
+  isLoading: boolean;
+  actions: {
+    initBaseAssets: () => void;
+    getBaseAsset: (address: string) => Token | undefined;
+    setBaseAsset: (token: Token) => void;
+  };
+}
+const BASE_URL = process.env.NEXT_PUBLIC_API ?? 'https://localhost:8000';
+
+export const useBaseAssetStore = create<BaseAssetState>()(
+  devtools((set, get) => ({
+    baseAssets: [],
+    isLoading: false,
+    actions: {
+      initBaseAssets: async () => {
+        set({ isLoading: true });
+        await axios
+          .get(BASE_URL.concat('/assets'))
+          .then(response => {
+            let baseAssets = response.data.data;
+            baseAssets = mapToken(baseAssets);
+
+            set({ baseAssets });
+          })
+          .catch(error => console.log(error));
+        set({ isLoading: false });
+      },
+      getBaseAsset: (address: string) => {
+        const { baseAssets } = get();
+        return baseAssets.find(
+          (token: Token) =>
+            token.address.toLowerCase() === address.toLowerCase()
+        );
+      },
+      setBaseAsset: (token: Token) => {
+        const { baseAssets } = get();
+        const index = baseAssets.findIndex(
+          (t: Token) => t.address.toLowerCase() === token.address.toLowerCase()
+        );
+        if (index >= 0) {
+          baseAssets[index] = token;
+          console.log('setBaseAsset', token);
+          set({ baseAssets });
+        }
+      },
+    },
+  }))
+);

src/utils/interfaceMaps.ts

@@ -0,0 +1,21 @@
+import { Token } from '@/interfaces';
+
+export const mapToken = (token: any): Token | Token[] => {
+  const mapping = (t: any) =>
+    <Token>{
+      address: t.address,
+      decimals: t.decimals,
+      name: t.name,
+      symbol: t.symbol,
+      logoURI: t.logoURI,
+      stable: t.stable,
+      price: t.price,
+      liquidStakedAddress: t.liquid_staked_address,
+      balance: 0.0,
+    };
+  if (Array.isArray(token)) {
+    return token.map(x => mapping(x));
+  } else {
+    return mapping(token);
+  }
+};