Solana UI support

.changeset/fresh-dingos-give.md

@@ -0,0 +1,6 @@
+---
+'@reservoir0x/relay-kit-ui': major
+'@reservoir0x/relay-sdk': patch
+---
+
+Add solana ui support in SwapWidget

demo/context/walletFilter.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+interface WalletFilterContextState {
+  walletFilter?: 'EVM' | 'SOL'
+  setWalletFilter: (value: 'EVM' | 'SOL' | undefined) => void
+}
+
+const WalletFilterContext = createContext<WalletFilterContextState | undefined>(
+  undefined
+)
+
+export const WalletFilterProvider: React.FC<{ children: ReactNode }> = ({
+  children
+}) => {
+  const [walletFilter, setWalletFilter] = useState<'EVM' | 'SOL' | undefined>(
+    undefined
+  )
+
+  return (
+    <WalletFilterContext.Provider value={{ walletFilter, setWalletFilter }}>
+      {children}
+    </WalletFilterContext.Provider>
+  )
+}
+
+// Custom hook to use the context
+export const useWalletFilter = () => {
+  const context = useContext(WalletFilterContext)
+  if (!context) {
+    throw new Error('useWalletFilter must be used within a WalletFilterContext')
+  }
+  return context
+}

demo/package.json

@@ -13,10 +13,10 @@
     "trailingComma": "none"
   },
   "dependencies": {
-    "@dynamic-labs/ethereum": "^2.6.0",
-    "@dynamic-labs/sdk-react-core": "^2.6.0",
-    "@dynamic-labs/solana": "^2.6.0",
-    "@dynamic-labs/wagmi-connector": "^2.6.0",
+    "@dynamic-labs/ethereum": "3.0.0",
+    "@dynamic-labs/sdk-react-core": "3.0.0",
+    "@dynamic-labs/solana": "3.0.0",
+    "@dynamic-labs/wagmi-connector": "3.0.0",
     "@radix-ui/colors": "^0.1.8",
     "@reservoir0x/relay-kit-hooks": "workspace:*",
     "@reservoir0x/relay-kit-ui": "workspace:*",
@@ -34,7 +34,7 @@
     "wagmi": "~2.9.8"
   },
   "devDependencies": {
-    "@dynamic-labs/types": "^2.6.0",
+    "@dynamic-labs/types": "3.0.0",
     "@types/node": "^12.12.21",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

demo/pages/_app.tsx

@@ -15,13 +15,17 @@ import {
 } from '@reservoir0x/relay-sdk'
 import { ThemeProvider } from 'next-themes'
 import { useRouter } from 'next/router'
-import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core'
+import {
+  DynamicContextProvider,
+  FilterChain
+} from '@dynamic-labs/sdk-react-core'
 import { EthereumWalletConnectors } from '@dynamic-labs/ethereum'
 import { SolanaWalletConnectors } from '@dynamic-labs/solana'
 import { convertRelayChainToDynamicNetwork } from 'utils/dynamic'
 import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector'
 import { HttpTransport } from 'viem'
 import { chainIdToAlchemyNetworkMap } from 'utils/chainIdToAlchemyNetworkMap'
+import { useWalletFilter, WalletFilterProvider } from 'context/walletFilter'
 
 type AppWrapperProps = {
   children: ReactNode
@@ -32,6 +36,7 @@ const ALCHEMY_API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_KEY || ''
 const queryClient = new QueryClient()
 
 const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
+  const { walletFilter, setWalletFilter } = useWalletFilter()
   const [wagmiConfig, setWagmiConfig] = useState<
     ReturnType<typeof createConfig> | undefined
   >()
@@ -153,6 +158,12 @@ const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
               EthereumWalletConnectors,
               SolanaWalletConnectors
             ],
+            cssOverrides: `
+              [data-testid="send-balance-button"] {
+                display: none;
+              }
+            `,
+            walletsFilter: walletFilter ? FilterChain(walletFilter) : undefined,
             overrides: {
               evmNetworks: () => {
                 return (
@@ -165,7 +176,12 @@ const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
                 )
               }
             },
-            initialAuthenticationMode: 'connect-only'
+            initialAuthenticationMode: 'connect-only',
+            events: {
+              onAuthFlowClose: () => {
+                setWalletFilter(undefined)
+              }
+            }
           }}
         >
           <WagmiProvider config={wagmiConfig}>
@@ -179,11 +195,13 @@ const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <QueryClientProvider client={queryClient}>
-      <AppWrapper>
-        <Component {...pageProps} />
-      </AppWrapper>
-    </QueryClientProvider>
+    <WalletFilterProvider>
+      <QueryClientProvider client={queryClient}>
+        <AppWrapper>
+          <Component {...pageProps} />
+        </AppWrapper>
+      </QueryClientProvider>
+    </WalletFilterProvider>
   )
 }
 

demo/pages/sdk/actions/swap.tsx

@@ -1,14 +1,14 @@
 import { NextPage } from 'next'
 import { useState } from 'react'
-import { useWalletClient } from 'wagmi'
 import { base, zora } from 'viem/chains'
 import { Address } from 'viem'
 import { useRelayClient } from '@reservoir0x/relay-kit-ui'
 import { ConnectButton } from 'components/ConnectButton'
 import { useDynamicContext } from '@dynamic-labs/sdk-react-core'
-import { ISolana } from '@dynamic-labs/solana'
-import { Connection } from '@solana/web3.js'
+import { isEthereumWallet } from '@dynamic-labs/ethereum'
+import { isSolanaWallet } from '@dynamic-labs/solana'
 import { adaptSolanaWallet } from '@reservoir0x/relay-solana-wallet-adapter'
+import { adaptViemWallet } from '@reservoir0x/relay-sdk'
 
 const SwapActionPage: NextPage = () => {
   const [recipient, setRecipient] = useState<string | undefined>()
@@ -23,11 +23,9 @@ const SwapActionPage: NextPage = () => {
   )
   const [txs, setTxs] = useState<string[]>([])
   const [tx, setTx] = useState<string>('')
-  const { data: wallet } = useWalletClient()
   const client = useRelayClient()
 
   const { primaryWallet } = useDynamicContext()
-  const walletAddress = primaryWallet?.address
 
   return (
     <div
@@ -198,27 +196,25 @@ const SwapActionPage: NextPage = () => {
 
           let executionWallet
 
-          if (fromChainId === 792703809) {
-            const connection = await primaryWallet.connector.getPublicClient<
-              Connection | undefined
-            >()
-            const signer = await primaryWallet.connector?.getSigner<ISolana>()
+          if (fromChainId === 792703809 && isSolanaWallet(primaryWallet)) {
+            const connection = await primaryWallet.getConnection()
+            const signer = await primaryWallet.getSigner()
 
-            if (!connection || !signer?.signTransaction || !walletAddress) {
+            if (!connection || !signer?.signTransaction) {
               throw 'Unable to setup Solana wallet'
             }
 
             executionWallet = adaptSolanaWallet(
-              walletAddress,
+              primaryWallet.address,
               792703809,
               connection,
               signer.signAndSendTransaction
             )
+          } else if (isEthereumWallet(primaryWallet)) {
+            const walletClient = await primaryWallet.getWalletClient()
+            executionWallet = adaptViemWallet(walletClient)
           } else {
-            if (!wallet) {
-              throw 'Please connect to execute transactions'
-            }
-            executionWallet = wallet
+            throw 'Unable to configure wallet'
           }
 
           const quote = await client?.actions.getQuote({

demo/pages/ui/chain.tsx

@@ -1,10 +1,14 @@
 import { NextPage } from 'next'
 import { ChainWidget } from '@reservoir0x/relay-kit-ui'
 import { Layout } from 'components/Layout'
-import { useDynamicContext } from '@dynamic-labs/sdk-react-core'
+import {
+  useDynamicContext,
+  useDynamicModals
+} from '@dynamic-labs/sdk-react-core'
 
 const ChainWidgetPage: NextPage = () => {
-  const { setShowAuthFlow } = useDynamicContext()
+  const { setShowAuthFlow, primaryWallet } = useDynamicContext()
+  const { setShowLinkNewWalletModal } = useDynamicModals()
 
   return (
     <Layout>
@@ -46,7 +50,13 @@ const ChainWidgetPage: NextPage = () => {
             logoURI: 'https://ethereum-optimism.github.io/data/USDC/logo.png'
           }}
           // defaultAmount={'5'}
-          onConnectWallet={() => setShowAuthFlow(true)}
+          onConnectWallet={() => {
+            if (primaryWallet) {
+              setShowLinkNewWalletModal(true)
+            } else {
+              setShowAuthFlow(true)
+            }
+          }}
           onAnalyticEvent={(eventName, data) => {
             console.log('Analytic Event', eventName, data)
           }}