fix: use widget network connection (#4866)

* fix: switch network connector on other network token details

* fix: use jsonRpcUrlMap for widget

* fix: use widget network provider

* build: upgrade widget

* build: upgrade widget

* fix: SwapController typing

package.json

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

src/components/Widget/index.tsx

@@ -4,6 +4,8 @@ import '@uniswap/widgets/dist/fonts.css'
 
 import { Currency, EMPTY_TOKEN_LIST, OnReviewSwapClick, SwapWidget, SwapWidgetSkeleton } from '@uniswap/widgets'
 import { useWeb3React } from '@web3-react/core'
+import { networkConnection } from 'connection'
+import { RPC_PROVIDERS } from 'constants/providers'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { useIsDarkMode } from 'state/user/hooks'
 import { DARK_THEME, LIGHT_THEME } from 'theme/widget'
@@ -24,7 +26,7 @@ export interface WidgetProps {
 export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps) {
   const locale = useActiveLocale()
   const theme = useIsDarkMode() ? DARK_THEME : LIGHT_THEME
-  const { provider } = useWeb3React()
+  const { connector, provider } = useWeb3React()
 
   const { inputs, tokenSelector } = useSyncWidgetInputs(defaultToken)
   const { settings } = useSyncWidgetSettings()
@@ -35,14 +37,14 @@ export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps)
       <SwapWidget
         disableBranding
         hideConnectionUI
-        // jsonRpcUrlMap is excluded - network providers are always passed directly
+        jsonRpcUrlMap={RPC_PROVIDERS}
         routerUrl={WIDGET_ROUTER_URL}
         width={WIDGET_WIDTH}
         locale={locale}
         theme={theme}
         onReviewSwapClick={onReviewSwapClick}
         // defaultChainId is excluded - it is always inferred from the passed provider
-        provider={provider}
+        provider={connector === networkConnection.connector ? null : provider} // use jsonRpcUrlMap for network providers
         tokenList={EMPTY_TOKEN_LIST} // prevents loading the default token list, as we use our own token selector UI
         {...inputs}
         {...settings}

src/components/Widget/inputs.tsx

@@ -68,7 +68,7 @@ export function useSyncWidgetInputs(defaultToken?: Currency) {
     />
   )
 
-  const value: SwapController = useMemo(() => ({ type, amount, ...tokens }), [amount, tokens, type])
+  const value: SwapController['value'] = useMemo(() => ({ type, amount, ...tokens }), [amount, tokens, type])
   const valueHandlers: SwapEventHandlers = useMemo(
     () => ({ onAmountChange, onSwitchTokens, onTokenSelectorClick }),
     [onAmountChange, onSwitchTokens, onTokenSelectorClick]

src/components/Widget/settings.ts

@@ -1,5 +1,5 @@
 import { Percent } from '@uniswap/sdk-core'
-import { Slippage, SwapEventHandlers, SwapSettingsController } from '@uniswap/widgets'
+import { Slippage, SwapController, SwapEventHandlers } from '@uniswap/widgets'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
 import { useCallback, useMemo, useState } from 'react'
 import { useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
@@ -44,7 +44,7 @@ export function useSyncWidgetSettings() {
     setAppSlippage('auto')
   }, [setAppSlippage, setAppTtl])
 
-  const settings: SwapSettingsController = useMemo(() => {
+  const settings: SwapController['settings'] = useMemo(() => {
     const auto = appSlippage === 'auto'
     return { slippage: { auto, max: widgetSlippage }, transactionTtl: widgetTtl }
   }, [widgetSlippage, widgetTtl, appSlippage])

yarn.lock

@@ -4149,7 +4149,7 @@
   resolved "https://registry.yarnpkg.com/@uniswap/redux-multicall/-/redux-multicall-1.1.5.tgz#7c097047d489c1624038c0fbbd3d76dc705bf153"
   integrity sha512-RSMhfuAX2rPimnevvAAiwoyV2bCGTIKhVHEBOLTMF+oVxYcKKe9hCwx/cffY12t/usXWHlEJ//V7JoxTKI1Lyg==
 
-"@uniswap/router-sdk@^1.0.3", "@uniswap/router-sdk@^1.3.0":
+"@uniswap/router-sdk@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@uniswap/router-sdk/-/router-sdk-1.3.0.tgz#8c17e957f65099a18dda536cd05fc34e779628aa"
   integrity sha512-T6kXQFXrAkIHfCCmhyW+0xgUyuFVepL9rlwG9+MjnfVtmGIBssbMzyFKGk5HGQYlk6WQrm630W1j87kdfXpZ/Q==
@@ -4305,10 +4305,10 @@
     "@uniswap/v3-core" "1.0.0"
     "@uniswap/v3-periphery" "^1.0.1"
 
-"@uniswap/widgets@^2.12.0":
+"@uniswap/widgets@^2.13.2":
-  version "2.12.0"
+  version "2.13.2"
-  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.12.0.tgz#4341b84dba9f51d7e08425204e79381c7b3ea45c"
+  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.13.2.tgz#bc5a9996d69d763fbb5aa4ab924531ab5bb299f0"
-  integrity sha512-gQDW+4cP09TUpt2WGIzp5WopY2smfs8blFtoDPfAcaCHFQqZ+83PqGmcYHJeLa6IEUFD/zBNNLpiuNBgfJWgXA==
+  integrity sha512-9bBu3ssEyB9VJs1TWSbHZE9eqI42r2dEJJo+yuoym25ofzdCTcVM6WfBJOGWgUDFlHLELRUBsXTb7uqafwWQtA==
   dependencies:
     "@babel/runtime" ">=7.17.0"
     "@fontsource/ibm-plex-mono" "^4.5.1"
@@ -4316,7 +4316,7 @@
     "@popperjs/core" "^2.4.4"
     "@reduxjs/toolkit" "^1.6.1"
     "@uniswap/redux-multicall" "^1.1.1"
-    "@uniswap/router-sdk" "^1.0.3"
+    "@uniswap/router-sdk" "^1.3.0"
     "@uniswap/sdk-core" "^3.0.1"
     "@uniswap/smart-order-router" "^2.10.0"
     "@uniswap/token-lists" "^1.0.0-beta.30"