feat(orbs): use new token switcher

* switch to new tokens list

* chore(apps/twap): cleanup

---------

Co-authored-by: denis-orbs <[email protected]>

apps/web/package.json

@@ -34,7 +34,7 @@
     "@msafe/aptos-wallet-adapter": "^1.1.3",
     "@next/bundle-analyzer": "14.2.11",
     "@octokit/auth-app": "4.0.7",
-    "@orbs-network/twap-ui-sushiswap": "1.1.57",
+    "@orbs-network/twap-ui-sushiswap": "1.1.61",
     "@pontem/wallet-adapter-plugin": "^0.2.1",
     "@radix-ui/react-slot": "1.0.2",
     "@rainbow-me/rainbowkit": "2.1.6",

apps/web/src/ui/swap/twap/twap.tsx

@@ -6,7 +6,6 @@ import {
   supportedChains,
 } from '@orbs-network/twap-ui-sushiswap'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
-import { useCustomTokens } from '@sushiswap/hooks'
 import {
   Button,
   Dialog,
@@ -20,16 +19,19 @@ import {
   TooltipTrigger,
 } from '@sushiswap/ui'
 import { useTheme } from 'next-themes'
-import { ReactNode, useCallback, useEffect, useMemo } from 'react'
-import { useOtherTokenListsQuery, useTokens } from 'src/lib/hooks/react-query'
-import { useSortedTokenList } from 'src/lib/wagmi/components/token-selector/hooks/use-sorted-token-list'
+import { ReactNode, useCallback, useEffect } from 'react'
 import { ChainId } from 'sushi/chain'
-import { Currency } from 'sushi/currency'
+import { Currency, Native } from 'sushi/currency'
 import { useAccount, useChainId, useSwitchChain } from 'wagmi'
 
+import {
+  TokenListChainId,
+  isTokenListChainId,
+} from '@sushiswap/graph-client/data-api'
+import { useSearchTokens } from 'src/lib/wagmi/components/token-selector/hooks/use-search-tokens'
 import { TokenSelector } from 'src/lib/wagmi/components/token-selector/token-selector'
 import { Checker } from 'src/lib/wagmi/systems/Checker'
-import { Address } from 'viem'
+import { Address, zeroAddress } from 'viem'
 import { usePrice } from '~evm/_common/ui/price-provider/price-provider/use-price'
 import {
   useDerivedStateSimpleSwap,
@@ -133,38 +135,6 @@ const getTokenLogo = (currency: Currency) => {
   }
 }
 
-const useTokenList = () => {
-  const { data: customTokenMap } = useCustomTokens()
-  const {
-    state: { chainId },
-  } = useDerivedStateSimpleSwap()
-
-  const { data: otherTokenMap } = useOtherTokenListsQuery({
-    chainId,
-    query: undefined,
-  })
-  const { data: defaultTokenMap } = useTokens({
-    chainId,
-  })
-
-  const tokenMap = useMemo(() => {
-    return {
-      ...defaultTokenMap,
-      ...otherTokenMap,
-    }
-  }, [defaultTokenMap, otherTokenMap])
-
-  const { data: sortedTokenList } = useSortedTokenList({
-    query: '',
-    customTokenMap,
-    tokenMap,
-    chainId,
-    includeNative: true,
-  })
-
-  return sortedTokenList
-}
-
 const Tooltip = ({ tooltipText }: any) => {
   return (
     <TooltipProvider>
@@ -241,12 +211,29 @@ const DCAButton = ({
   )
 }
 
+const useToken = (address?: string) => {
+  const {
+    state: { chainId },
+  } = useDerivedStateSimpleSwap()
+  const isNative = address === zeroAddress
+  const isEnabled = Boolean(address && !isNative && isTokenListChainId(chainId))
+  const result = useSearchTokens({
+    chainId: isEnabled ? (chainId as TokenListChainId) : undefined,
+    search: address,
+  })
+
+  if (address === zeroAddress && chainId) {
+    return Native.onChain(chainId)
+  }
+
+  return result.data?.[0]
+}
+
 function Provider({ isLimit }: { isLimit?: boolean }) {
   const { openConnectModal } = useConnectModal()
   const { connector } = useAccount()
   const { state, mutate } = useDerivedStateSimpleSwap()
   const { resolvedTheme } = useTheme()
-  const tokens = useTokenList()
   const connectedChainId = useChainId()
 
   useEffect(() => {
@@ -273,7 +260,6 @@ function Provider({ isLimit }: { isLimit?: boolean }) {
         limit={isLimit}
         useTrade={useTrade}
         connector={connector}
-        dappTokens={tokens}
         srcToken={state.token0}
         dstToken={state.token1}
         getTokenLogo={getTokenLogo}
@@ -287,6 +273,7 @@ function Provider({ isLimit }: { isLimit?: boolean }) {
         Tooltip={Tooltip}
         NetworkSelector={TwapNetworkSelector}
         Button={isLimit ? LimitButton : DCAButton}
+        useToken={useToken}
       />
     </div>
   )