feat: show widget in token details (#4337)

* build: install widgets

* feat: show widget in token details

* basic integration props

* ts fix and update widget to 2.1.1

* url map

* yarn-deduplicate --strategy=highest
Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

package.json

@@ -140,6 +140,7 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
+    "@uniswap/widgets": "^2.1.1",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",

src/pages/TokenDetails/index.tsx

+import { SwapWidget } from '@uniswap/widgets'
 import { useWeb3React } from '@web3-react/core'
 import {
   LARGE_MEDIA_BREAKPOINT,
@@ -13,11 +14,13 @@ import TokenDetail from 'components/Explore/TokenDetails/TokenDetail'
 import TokenSafetyMessage from 'components/TokenSafety/TokenSafetyMessage'
 import { getChainInfo } from 'constants/chainInfo'
 import { L1_CHAIN_IDS, L2_CHAIN_IDS, SupportedChainId, TESTNET_CHAIN_IDS } from 'constants/chains'
+import { RPC_URLS } from 'constants/networks'
 import { checkWarning } from 'constants/tokenSafety'
 import { useToken } from 'hooks/Tokens'
+import { useActiveLocale } from 'hooks/useActiveLocale'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
 import useTokenDetailPageQuery from 'hooks/useTokenDetailPageQuery'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
@@ -53,22 +56,35 @@ const RightPanel = styled.div`
     display: none;
   }
 `
-const Widget = styled.div`
-  height: 348px;
-  width: 284px;
-  background-color: ${({ theme }) => theme.backgroundModule};
-  border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-`
+
 function NetworkBalances(tokenAddress: string) {
   return useNetworkTokenBalances({ address: tokenAddress })
 }
 
+// widget configuration
+const WIDGET_THEME = {}
+const ROUTER_URL = 'https://api.uniswap.org/v1/'
+const WIDGET_URL_MAP = Object.keys(RPC_URLS).reduce(
+  (acc, cur) => ({ ...acc, [cur]: [RPC_URLS[cur as unknown as SupportedChainId]] }),
+  {}
+)
+
 export default function TokenDetails() {
   const { tokenAddress } = useParams<{ tokenAddress?: string }>()
   const { loading } = useTokenDetailPageQuery(tokenAddress)
   const tokenSymbol = useToken(tokenAddress)?.symbol
 
+  const locale = useActiveLocale()
+  const onTxSubmit = useCallback(() => {
+    console.log('onTxSubmit')
+  }, [])
+  const onTxSuccess = useCallback(() => {
+    console.log('onTxSuccess')
+  }, [])
+  const onTxFail = useCallback(() => {
+    console.log('onTxFail')
+  }, [])
+
   let tokenDetail
   if (!tokenAddress) {
     // TODO: handle no address / invalid address cases
@@ -82,7 +98,7 @@ export default function TokenDetails() {
   const tokenWarning = tokenAddress ? checkWarning(tokenAddress) : null
   /* network balance handling */
   const { data: networkData } = tokenAddress ? NetworkBalances(tokenAddress) : { data: null }
-  const { chainId: connectedChainId } = useWeb3React()
+  const { chainId: connectedChainId, provider } = useWeb3React()
   const totalBalance = 4.3 // dummy data
 
   const chainsToList = useMemo(() => {
@@ -122,7 +138,22 @@ export default function TokenDetails() {
       {tokenAddress && (
         <>
           <RightPanel>
-            <Widget />
+            <SwapWidget
+              defaultChainId={connectedChainId}
+              defaultInputTokenAddress={'NATIVE'}
+              defaultOutputTokenAddress={tokenAddress}
+              hideConnectionUI
+              jsonRpcUrlMap={WIDGET_URL_MAP}
+              locale={locale}
+              onTxSubmit={onTxSubmit}
+              onTxSuccess={onTxSuccess}
+              onTxFail={onTxFail}
+              provider={provider}
+              routerUrl={ROUTER_URL}
+              theme={WIDGET_THEME}
+              // tokenList={[]}
+              width={290}
+            />
             {tokenWarning && <TokenSafetyMessage tokenAddress={tokenAddress} warning={tokenWarning} />}
             {!loading && (
               <BalanceSummary address={tokenAddress} totalBalance={totalBalance} networkBalances={balancesByNetwork} />