adding tokens feature

orbs-network · Oct 2, 2023 · a710e7c · a710e7c
1 parent 06338c0
commit a710e7c
Show file tree

Hide file tree

Showing 15 changed files with 448 additions and 388 deletions.
diff --git a/packages/dapp-example/src/Arbidex.tsx b/packages/dapp-example/src/Arbidex.tsx
@@ -1,6 +1,6 @@
 import { StyledArbidexSwap, StyledArbidexBox, StyledArbidexLayout, StyledModalContent } from "./styles";
 import { TWAP, Orders } from "@orbs-network/twap-ui-arbidex";
-import { useConnectWallet, useNetwork, useTheme } from "./hooks";
+import { useConnectWallet, useGetTokens, useTheme } from "./hooks";
 import { useWeb3React } from "@web3-react/core";
 import { Configs } from "@orbs-network/twap";
 import { Dapp, TokensList, UISelector } from "./Components";
@@ -9,41 +9,28 @@ import { SelectorOption, TokenListItem } from "./types";
 import _ from "lodash";
 import { erc20sData, zeroAddress, erc20s, isNativeAddress } from "@defi.org/web3-candies";
 import { createContext, ReactNode, useContext, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
 
 const config = Configs.Arbidex;
 
-export const useDappTokens = () => {
-  const { account } = useWeb3React();
-  const { isInValidNetwork } = useNetwork(config.chainId);
-
-  return useQuery(
-    ["useGetTokens", config.chainId],
-    async () => {
-      const response = await fetch(`https://raw.githubusercontent.com/viaprotocol/tokenlists/main/tokenlists/arbitrum.json`);
-
-      const tokens = await response.json();
-
-      const parsed = tokens.map(({ symbol, address, decimals, name, logoURI }: any) => ({
-        decimals,
-        symbol,
-        name,
-        address,
-        logoURI: isNativeAddress(address) ? config.nativeToken.logoUrl : logoURI,
-      }));
-      const candiesAddresses = [zeroAddress, ..._.map(erc20s.arb, (t) => t().address)];
-
-      const _tokens = _.sortBy(parsed, (t: any) => {
-        const index = candiesAddresses.indexOf(t.address);
-        return index >= 0 ? index : Number.MAX_SAFE_INTEGER;
-      });
-
-      return { ..._.mapKeys(_tokens, (t) => t.address) } as any;
-    },
-    { enabled: !!account && !isInValidNetwork }
-  );
+const parseListToken = (tokens?: any[]) => {
+  return tokens?.map(({ symbol, address, decimals, name, logoURI }: any) => ({
+    decimals,
+    symbol,
+    name,
+    address,
+    logoURI: isNativeAddress(address) ? config.nativeToken.logoUrl : logoURI,
+  }));
 };
 
+const useDappTokens = () => {
+  return useGetTokens({
+    chainId: config.chainId,
+    url: `https://raw.githubusercontent.com/viaprotocol/tokenlists/main/tokenlists/arbitrum.json`,
+    parse: parseListToken,
+    baseAssets: erc20s.arb,
+    modifyList: (_tokens: any) => ({ ..._.mapKeys(_tokens, (t) => t.address) }),
+  });
+};
 interface TokenSelectModalProps {
   isOpen: boolean;
   selectedCurrency?: any;

diff --git a/packages/dapp-example/src/BaseSwap.tsx b/packages/dapp-example/src/BaseSwap.tsx
@@ -1,6 +1,6 @@
 import { StyledBaseSwap, StyledBaseSwapBox, StyledBaseSwapLayout, StyledModalContent } from "./styles";
 import { TWAP, Orders } from "@orbs-network/twap-ui-baseswap";
-import { useConnectWallet, useNetwork, useTheme } from "./hooks";
+import { useConnectWallet, useGetTokens, useTheme } from "./hooks";
 import { useWeb3React } from "@web3-react/core";
 import { Configs } from "@orbs-network/twap";
 import { Dapp, TokensList, UISelector } from "./Components";
@@ -9,28 +9,15 @@ import { SelectorOption, TokenListItem } from "./types";
 import _ from "lodash";
 import { erc20sData, zeroAddress, erc20s } from "@defi.org/web3-candies";
 import { createContext, ReactNode, useContext, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
 
 const config = Configs.BaseSwap;
 
-export const useDappTokens = () => {
-  const { account } = useWeb3React();
-  const { isInValidNetwork } = useNetwork(config.chainId);
-
-  return useQuery(
-    ["useGetTokens", config.chainId],
-    async () => {
-      const candiesAddresses = [zeroAddress, ..._.map(erc20s.poly, (t) => t().address)];
-
-      const _tokens = _.sortBy(tokens, (t: any) => {
-        const index = candiesAddresses.indexOf(t.address);
-        return index >= 0 ? index : Number.MAX_SAFE_INTEGER;
-      });
-
-      return { ..._.mapKeys(_tokens, (t) => t.address) } as any;
-    },
-    { enabled: !!account && !isInValidNetwork }
-  );
+const useDappTokens = () => {
+  return useGetTokens({
+    chainId: config.chainId,
+    tokens,
+    baseAssets: erc20s.base,
+  });
 };
 
 interface TokenSelectModalProps {

diff --git a/packages/dapp-example/src/Chronos.tsx b/packages/dapp-example/src/Chronos.tsx
@@ -1,45 +1,31 @@
 import { StyledChronos, StyledStyledChronosPanel, StyledStyledChronosOrders, StyledChronosLayout, StyledModalContent } from "./styles";
-import { useConnectWallet, useNetwork, useTheme } from "./hooks";
+import { useConnectWallet, useGetTokens, useTheme } from "./hooks";
 import { Configs } from "@orbs-network/twap";
 import { TWAP, Orders } from "@orbs-network/twap-ui-chronos";
 import { useWeb3React } from "@web3-react/core";
 import { Dapp, TokensList, UISelector } from "./Components";
 import { Popup } from "./Components";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
 import _ from "lodash";
 import { erc20s, zeroAddress, erc20sData, isNativeAddress } from "@defi.org/web3-candies";
 import { SelectorOption, TokenListItem } from "./types";
 const config = Configs.Chronos;
 
-export const useDappTokens = () => {
-  const { account } = useWeb3React();
-  const { isInValidNetwork } = useNetwork(config.chainId);
+const tokensURL = "https://raw.githubusercontent.com/viaprotocol/tokenlists/main/tokenlists/arbitrum.json";
 
-  return useQuery(
-    ["useDappTokens", config.chainId],
-    async () => {
-      const response = await fetch(`https://raw.githubusercontent.com/viaprotocol/tokenlists/main/tokenlists/arbitrum.json`);
-
-      const tokens = await response.json();
-
-      const parsed = tokens.map(({ symbol, address, decimals, name, logoURI }: any) => ({
-        decimals,
-        symbol,
-        name,
-        address,
-        logoURI: isNativeAddress(address) ? config.nativeToken.logoUrl : logoURI,
-      }));
-
-      const candiesAddresses = [zeroAddress, ..._.map(erc20s.arb, (t) => t().address)];
-
-      return _.sortBy(parsed, (t: any) => {
-        const index = candiesAddresses.indexOf(t.address);
-        return index >= 0 ? index : Number.MAX_SAFE_INTEGER;
-      });
-    },
-    { enabled: !!account && !isInValidNetwork, staleTime: Infinity }
-  );
+const parseListToken = (item?: any[]) => {
+  return _.map(item, (token) => {
+    return {
+      decimals: token.decimals,
+      symbol: token.symbol,
+      name: token.name,
+      address: token.address,
+      logoURI: isNativeAddress(token.address) ? config.nativeToken.logoUrl : token.logoURI,
+    };
+  });
+};
+const useDappTokens = () => {
+  return useGetTokens({ chainId: config.chainId, url: tokensURL, parse: parseListToken, baseAssets: erc20s.arb });
 };
 
 interface TokenSelectModalProps {
@@ -90,7 +76,7 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
 
   const getTokenLogoURL = useCallback(
     (symbol: string) => {
-      return dappTokens.find((t) => t.symbol === symbol)?.logoURI;
+      return dappTokens.find((t: any) => t.symbol === symbol)?.logoURI;
     },
     [_.size(dappTokens)]
   );