Merge pull request #280 from reservoirprotocol/fix/chain-widget-switc…

…h-wallet Fix chain widget switch wallet
reservoirprotocol · Sep 19, 2024 · 1f0c654 · 1f0c654
2 parents 63b4d73 + d6d93a2
commit 1f0c654
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/.changeset/many-bears-design.md b/.changeset/many-bears-design.md
@@ -0,0 +1,6 @@
+---
+'@reservoir0x/relay-sdk': patch
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Fix wallet switching in ChainWidget, fix sdk convert viem chain to RelayChain helper
diff --git a/packages/sdk/src/utils/chain.ts b/packages/sdk/src/utils/chain.ts
@@ -1,4 +1,4 @@
-import type { Chain } from 'viem'
+import { zeroAddress, type Chain } from 'viem'
 import type { RelayChain, paths } from '../types/index.js'
 import * as viemChains from 'viem/chains'
 import { ASSETS_RELAY_API } from '../constants/servers.js'
@@ -93,7 +93,10 @@ export const convertViemChainToRelayChain = (
       squaredDark: `${ASSETS_RELAY_API}/icons/square/${chain.id}/dark.png`,
       squaredLight: `${ASSETS_RELAY_API}/icons/square/${chain.id}/light.png`
     },
-    currency: chain.nativeCurrency,
+    currency: {
+      address: zeroAddress,
+      ...chain.nativeCurrency
+    },
     explorerUrl: chain.blockExplorers?.default.url ?? '',
     vmType: 'evm',
     depositEnabled: true,

diff --git a/packages/ui/src/components/common/MultiWalletDropdown.tsx b/packages/ui/src/components/common/MultiWalletDropdown.tsx
@@ -139,7 +139,8 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
       }
       contentProps={{
         sideOffset: 12,
-        align: 'end',
+        alignOffset: -16,
+        align: 'start',
         css: { maxWidth: 248, p: 0 }
       }}
     >

diff --git a/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx
@@ -9,13 +9,13 @@ import {
   useContext,
   useCallback
 } from 'react'
-import { parseUnits, type Address } from 'viem'
-import type {
-  AdaptedWallet,
-  Execute,
-  ExecuteStep,
-  ExecuteStepItem,
-  RelayChain
+import { parseUnits, type Address, type WalletClient } from 'viem'
+import {
+  type AdaptedWallet,
+  type Execute,
+  type ExecuteStep,
+  type ExecuteStepItem,
+  type RelayChain
 } from '@reservoir0x/relay-sdk'
 import {
   calculateExecutionTime,
@@ -31,6 +31,7 @@ import { EventNames } from '../../../constants/events.js'
 import { ProviderOptionsContext } from '../../../providers/RelayKitProvider.js'
 import { useAccount, useWalletClient } from 'wagmi'
 import { extractQuoteId, parseFees } from '../../../utils/quote.js'
+import { adaptViemWallet } from '@reservoir0x/relay-sdk'
 
 export enum TransactionProgressStep {
   ReviewQuote,
@@ -236,11 +237,18 @@ export const TransactionModalRenderer: FC<Props> = ({
         throw 'Missing a quote'
       }
 
-      const activeWalletChainId = await wallet?.getChainId()
+      if (!wallet && !walletClient.data) {
+        throw 'Missing a wallet'
+      }
+
+      const _wallet =
+        wallet ?? adaptViemWallet(walletClient.data as WalletClient)
+
+      const activeWalletChainId = await _wallet?.getChainId()
 
       if (fromToken && fromToken?.chainId !== activeWalletChainId) {
         onAnalyticEvent?.(EventNames.SWAP_SWITCH_NETWORK)
-        await wallet?.switchChain(fromToken.chainId)
+        await _wallet?.switchChain(fromToken.chainId)
       }
 
       setProgressStep(TransactionProgressStep.WalletConfirmation)
@@ -333,6 +341,7 @@ export const TransactionModalRenderer: FC<Props> = ({
     address,
     connector,
     wallet,
+    walletClient,
     fromToken,
     toToken,
     customToAddress,