Merge pull request #293 from reservoirprotocol/feature/redesign-chain…

…-widget

.changeset/fast-apricots-kneel.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': minor
+---
+
+Implement canonical+ support into SwapWidget, remove ChainWidget

demo/pages/ui/chain.tsx

@@ -1,17 +1,124 @@
 import { NextPage } from 'next'
-import { ChainWidget } from '@reservoir0x/relay-kit-ui'
+import { LinkedWallet, SwapWidget } from '@reservoir0x/relay-kit-ui'
 import { Layout } from 'components/Layout'
 import {
   useDynamicContext,
-  useDynamicModals
+  useDynamicEvents,
+  useDynamicModals,
+  useSwitchWallet,
+  useUserWallets,
+  Wallet
 } from '@dynamic-labs/sdk-react-core'
+import { useTheme } from 'next-themes'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  AdaptedWallet,
+  adaptViemWallet,
+  RelayChain
+} from '@reservoir0x/relay-sdk'
+import { isSolanaWallet } from '@dynamic-labs/solana'
+import { adaptSolanaWallet } from '@reservoir0x/relay-solana-wallet-adapter'
+import { isEthereumWallet } from '@dynamic-labs/ethereum'
+import { useWalletFilter } from 'context/walletFilter'
+
+const dynamicStaticAssetUrl =
+  'https://iconic.dynamic-static-assets.com/icons/sprite.svg'
 
 const ChainWidgetPage: NextPage = () => {
   const { setShowAuthFlow, primaryWallet } = useDynamicContext()
   const { setShowLinkNewWalletModal } = useDynamicModals()
+  const { theme } = useTheme()
+
+  useDynamicEvents('walletAdded', (newWallet) => {
+    if (linkWalletPromise) {
+      const walletLogoId =
+        // @ts-ignore
+        newWallet?.connector?.wallet?.brand?.spriteId ?? newWallet.key
+      const linkedWallet = {
+        address: newWallet.address,
+        walletLogoUrl: `${dynamicStaticAssetUrl}#${walletLogoId}`,
+        vmType:
+          newWallet.chain.toLowerCase() === 'evm'
+            ? 'evm'
+            : ('svm' as 'evm' | 'svm')
+      }
+      linkWalletPromise.resolve(linkedWallet)
+      setLinkWalletPromise(undefined)
+    }
+  })
+  const { setWalletFilter } = useWalletFilter()
+  const _switchWallet = useSwitchWallet()
+  const userWallets = useUserWallets()
+  const wallets = useRef<Wallet<any>[]>()
+  const switchWallet = useRef<(walletId: string) => Promise<void>>()
+  const [wallet, setWallet] = useState<AdaptedWallet | undefined>()
+  const [linkWalletPromise, setLinkWalletPromise] = useState<
+    | {
+        resolve: (value: LinkedWallet) => void
+        reject: () => void
+        params: { chain?: RelayChain; direction: 'to' | 'from' }
+      }
+    | undefined
+  >()
+
+  const linkedWallets = useMemo(() => {
+    const _wallets = userWallets.map((wallet) => {
+      const walletLogoId =
+        // @ts-ignore
+        wallet?.connector?.wallet?.brand?.spriteId ?? wallet.key
+      return {
+        address: wallet.address,
+        walletLogoUrl: `${dynamicStaticAssetUrl}#${walletLogoId}`,
+        vmType:
+          wallet.chain.toLowerCase() === 'evm'
+            ? 'evm'
+            : ('svm' as 'evm' | 'svm')
+      }
+    })
+    wallets.current = userWallets
+    return _wallets
+  }, [userWallets])
+
+  useEffect(() => {
+    switchWallet.current = _switchWallet
+  }, [_switchWallet])
+
+  useEffect(() => {
+    const adaptWallet = async () => {
+      try {
+        if (primaryWallet !== null) {
+          let adaptedWallet: AdaptedWallet | undefined
+          if (isSolanaWallet(primaryWallet)) {
+            const connection = await primaryWallet.getConnection()
+            const signer = await primaryWallet.getSigner()
+
+            adaptedWallet = adaptSolanaWallet(
+              primaryWallet.address,
+              792703809,
+              connection,
+              signer.signAndSendTransaction
+            )
+          } else if (isEthereumWallet(primaryWallet)) {
+            const walletClient = await primaryWallet.getWalletClient()
+            adaptedWallet = adaptViemWallet(walletClient)
+          }
+          setWallet(adaptedWallet)
+        } else {
+          setWallet(undefined)
+        }
+      } catch (e) {
+        setWallet(undefined)
+      }
+    }
+    adaptWallet()
+  }, [primaryWallet, primaryWallet?.address])
 
   return (
-    <Layout>
+    <Layout
+      styles={{
+        background: theme === 'light' ? 'rgba(245, 242, 255, 1)' : '#1c172b'
+      }}
+    >
       <div
         style={{
           display: 'flex',
@@ -21,8 +128,8 @@ const ChainWidgetPage: NextPage = () => {
           paddingTop: 50
         }}
       >
-        <ChainWidget
-          chainId={8453}
+        <SwapWidget
+          lockChainId={8453}
           tokens={[
             {
               chainId: 8453,
@@ -41,21 +148,65 @@ const ChainWidgetPage: NextPage = () => {
               logoURI: 'https://assets.relay.link/icons/1/light.png'
             }
           ]}
-          defaultToken={{
+          defaultToToken={{
             chainId: 8453,
             address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
             decimals: 6,
             name: 'USDC',
             symbol: 'USDC',
             logoURI: 'https://ethereum-optimism.github.io/data/USDC/logo.png'
           }}
-          // defaultAmount={'5'}
-          onConnectWallet={() => {
-            if (primaryWallet) {
-              setShowLinkNewWalletModal(true)
+          multiWalletSupportEnabled={true}
+          linkedWallets={linkedWallets}
+          onLinkNewWallet={({ chain, direction }) => {
+            if (linkWalletPromise) {
+              linkWalletPromise.reject()
+              setLinkWalletPromise(undefined)
+            }
+            if (chain?.vmType === 'evm') {
+              setWalletFilter('EVM')
+            } else if (chain?.id === 792703809) {
+              setWalletFilter('SOL')
             } else {
-              setShowAuthFlow(true)
+              setWalletFilter(undefined)
             }
+            const promise = new Promise<LinkedWallet>((resolve, reject) => {
+              setLinkWalletPromise({
+                resolve,
+                reject,
+                params: {
+                  chain,
+                  direction
+                }
+              })
+            })
+            setShowLinkNewWalletModal(true)
+            return promise
+          }}
+          onSetPrimaryWallet={async (address: string) => {
+            //In some cases there's a race condition between connecting the wallet and having it available to switch to so we need to poll for it
+            const maxAttempts = 20
+            let attemptCount = 0
+            const timer = setInterval(async () => {
+              attemptCount++
+              const newPrimaryWallet = wallets.current?.find(
+                (wallet) => wallet.address === address
+              )
+              if (attemptCount >= maxAttempts) {
+                clearInterval(timer)
+                return
+              }
+              if (!newPrimaryWallet || !switchWallet.current) {
+                return
+              }
+              try {
+                await switchWallet.current(newPrimaryWallet?.id)
+                clearInterval(timer)
+              } catch (e) {}
+            }, 200)
+          }}
+          onConnectWallet={() => {
+            setShowAuthFlow(true)
           }}
           onAnalyticEvent={(eventName, data) => {
             console.log('Analytic Event', eventName, data)

packages/ui/src/components/common/TokenSelector/TokenSelector.tsx

@@ -435,7 +435,18 @@ const TokenSelector: FC<TokenSelectorProps> = ({
       trigger={trigger}
       css={{
         p: '4',
-        sm: { minWidth: size === 'desktop' ? 568 : 400, maxWidth: 568 }
+        sm: {
+          minWidth:
+            size === 'desktop'
+              ? !chainIdsFilter || chainIdsFilter.length > 1
+                ? 568
+                : 378
+              : 400,
+          maxWidth:
+            size === 'desktop' && (!chainIdsFilter || chainIdsFilter.length > 1)
+              ? 568
+              : 378
+        }
       }}
     >
       <Flex

packages/ui/src/components/common/TokenSelector/steps/SetCurrencyStep.tsx

@@ -106,7 +106,7 @@ export const SetCurrencyStep: FC<SetCurrencyProps> = ({
         Select Token
       </Text>
       <Flex css={{ width: '100%', gap: '3' }}>
-        {isDesktop ? (
+        {isDesktop && (!chainIdsFilter || chainIdsFilter.length > 1) ? (
           <>
             <Flex
               direction="column"

packages/ui/src/components/common/TokenSelector/triggers/ChainTrigger.tsx

@@ -14,12 +14,14 @@ import type { RelayChain } from '@reservoir0x/relay-sdk'
 type ChainTriggerProps = {
   token?: Token
   chain?: RelayChain
+  locked?: boolean
   onClick?: () => void
 }
 
 export const ChainTrigger: FC<ChainTriggerProps> = ({
   token,
   chain,
+  locked,
   onClick
 }) => {
   return (
@@ -34,6 +36,7 @@ export const ChainTrigger: FC<ChainTriggerProps> = ({
         width: '100%',
         height: 48,
         backgroundColor: 'gray2',
+        pointerEvents: locked ? 'none' : 'all',
         _hover: {
           backgroundColor: 'gray3'
         }
@@ -47,9 +50,11 @@ export const ChainTrigger: FC<ChainTriggerProps> = ({
       ) : (
         <Text style="h6">Select Chain</Text>
       )}
-      <Box css={{ color: 'gray9' }}>
-        <FontAwesomeIcon icon={faChevronDown} width={14} />
-      </Box>
+      {locked ? null : (
+        <Box css={{ color: 'gray9' }}>
+          <FontAwesomeIcon icon={faChevronDown} width={14} />
+        </Box>
+      )}
     </Button>
   )
 }

packages/ui/src/components/common/TransactionModal/SwapModal.tsx

@@ -115,6 +115,7 @@ export const SwapModal: FC<SwapModalProps> = (swapModalProps) => {
           currency_in: fromToken?.symbol,
           chain_id_out: toToken?.chainId,
           currency_out: toToken?.symbol,
+          is_canonical: useExternalLiquidity,
           quote_id: quoteId,
           txHashes: steps
             ?.map((step) => {

packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx

@@ -199,7 +199,8 @@ export const TransactionModalRenderer: FC<Props> = ({
         chain_id_in: details?.currencyIn?.currency?.chainId,
         amount_out: details?.currencyOut?.amountFormatted,
         currency_out: details?.currencyOut?.currency?.symbol,
-        chain_id_out: details?.currencyOut?.currency?.chainId
+        chain_id_out: details?.currencyOut?.currency?.chainId,
+        is_canonical: useExternalLiquidity
       })
     },
     {

packages/ui/src/components/primitives/Button.tsx

@@ -41,6 +41,15 @@ const ButtonCss = cva({
           color: 'primary-button-hover-color'
         }
       },
+      primaryOutline: {
+        backgroundColor: 'transparent',
+        color: 'gray12',
+        '--border-color': 'primary-outline-button-color',
+        border: '1px solid var(--border-color)',
+        '&:hover': {
+          color: 'primary-outline-button-hover-color'
+        }
+      },
       secondary: {
         backgroundColor: 'secondary-button-background',
         color: 'secondary-button-color',