Adding connection mode selector to react example to switch between wa…

…as or universal
0xsequence · Apr 24, 2024 · fde39e8 · fde39e8
1 parent 9f4e813
commit fde39e8
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 52 deletions.
diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
@@ -35,7 +35,8 @@ import {
   useMediaQuery,
   Switch,
   Select,
-  IconButton
+  IconButton,
+  CheckmarkIcon
 } from '@0xsequence/design-system'
 import { allNetworks } from '@0xsequence/network'
 import { Footer } from './Footer'
@@ -44,9 +45,11 @@ import { delay, formatAddress, getCheckoutSettings } from '../utils'
 import { abi } from '../constants/nft-abi'
 import { ethers } from 'ethers'
 import { Alert, AlertProps } from './Alert'
+import { ConnectionMode } from '../config'
 
 // append ?debug to url to enable debug mode
 const searchParams = new URLSearchParams(location.search)
+const connectionMode: ConnectionMode = searchParams.get('mode') === 'universal' ? 'universal' : 'waas'
 const isDebugMode = searchParams.has('debug')
 
 export const Homepage = () => {
@@ -106,6 +109,13 @@ export const Homepage = () => {
     checkTokenBalancesForFeeOptions()
   }, [pendingFeeOptionConfirmation])
 
+  const handleSwitchConnectionMode = (mode: ConnectionMode) => {
+    const searchParams = new URLSearchParams()
+
+    searchParams.set('mode', mode)
+    window.location.search = searchParams.toString()
+  }
+
   const checkTokenBalancesForFeeOptions = async () => {
     if (pendingFeeOptionConfirmation) {
       const [account] = await walletClient.getAddresses()
@@ -159,10 +169,10 @@ export const Homepage = () => {
 
   useEffect(() => {
     if (txnData) {
-      setLastTxnDataHash(txnData.hash ?? txnData)
+      setLastTxnDataHash((txnData as any).hash ?? txnData)
     }
     if (txnData2) {
-      setLastTxnDataHash2(txnData2.hash ?? txnData)
+      setLastTxnDataHash2((txnData2 as any).hash ?? txnData)
     }
   }, [txnData, txnData2])
 
@@ -368,13 +378,13 @@ export const Homepage = () => {
                 onClick={runSendTransaction}
               />
 
-              {lastTxnDataHash && (txnData?.chainId === chainId || txnData) && (
+              {lastTxnDataHash && ((txnData as any)?.chainId === chainId || txnData) && (
                 <Text
                   as="a"
                   marginLeft="4"
                   variant="small"
                   underline
-                  href={`${networkForCurrentChainId.blockExplorer.rootUrl}/tx/${txnData.hash ?? txnData}`}
+                  href={`${networkForCurrentChainId.blockExplorer.rootUrl}/tx/${(txnData as any).hash ?? txnData}`}
                   target="_blank"
                   rel="noreferrer"
                 >
@@ -407,13 +417,13 @@ export const Homepage = () => {
                 isPending={isPendingMintTxn}
                 onClick={runMintNFT}
               />
-              {lastTxnDataHash2 && (txnData2?.chainId === chainId || txnData2) && (
+              {lastTxnDataHash2 && ((txnData2 as any)?.chainId === chainId || txnData2) && (
                 <Text
                   as="a"
                   marginLeft="4"
                   variant="small"
                   underline
-                  href={`${networkForCurrentChainId.blockExplorer.rootUrl}/tx/${txnData2.hash ?? txnData2}`}
+                  href={`${networkForCurrentChainId.blockExplorer.rootUrl}/tx/${(txnData2 as any).hash ?? txnData2}`}
                   target="_blank"
                   rel="noreferrer"
                 >
@@ -575,11 +585,66 @@ export const Homepage = () => {
               <Box gap="2" flexDirection="row" alignItems="center">
                 <Button onClick={onClickConnect} variant="feature" label="Connect" />
               </Box>
+
+              <Box gap="2" flexDirection="column" marginTop="10" width="1/2">
+                <ConnectionModeSelect
+                  mode="waas"
+                  title="Wallet as a Service (WaaS)"
+                  description="Connect to an embedded wallet for a seamless experience."
+                  onClick={handleSwitchConnectionMode}
+                />
+
+                <ConnectionModeSelect
+                  mode="universal"
+                  title="Universal"
+                  description="Connect to the universal sequence wallet or EIP6963 Injected wallet providers (web extension wallets)."
+                  onClick={handleSwitchConnectionMode}
+                />
+              </Box>
             </Box>
           </Box>
         )}
       </Box>
+
       {!isMobile && <Footer />}
     </Box>
   )
 }
+
+interface ConnectionModeSelectProps {
+  mode: ConnectionMode
+  title: string
+  description: string
+  onClick: (mode: ConnectionMode) => void
+}
+
+const ConnectionModeSelect = (props: ConnectionModeSelectProps) => {
+  const { mode, title, description, onClick } = props
+
+  const isSelected = connectionMode === mode
+
+  return (
+    <Card
+      clickable
+      outlined
+      borderWidth="thick"
+      style={{
+        boxShadow: isSelected ? '0 0 24px rgb(127 59 158 / 0.8)' : 'none',
+        borderColor: isSelected ? 'rgb(127 59 200)' : 'var(--seq-colors-border-normal)'
+      }}
+      onClick={() => onClick(mode)}
+    >
+      <Box gap="2">
+        <Box marginTop="1">
+          <Text variant="normal" fontWeight="bold" color={isSelected ? 'text100' : 'text80'}>
+            {title}
+          </Text>
+          <Text as="p" variant="normal" color="text50" marginTop="4">
+            {description}
+          </Text>
+        </Box>
+        <CheckmarkIcon size="md" style={{ color: 'rgb(127 59 200)' }} visibility={isSelected ? 'visible' : 'hidden'} />
+      </Box>
+    </Card>
+  )
+}
diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts
@@ -1,12 +1,18 @@
 import { KitConfig, getKitConnectWallets } from '@0xsequence/kit'
-import { getDefaultConnectors, mock } from '@0xsequence/kit-connectors'
+import { getDefaultConnectors, getDefaultWaasConnectors, mock } from '@0xsequence/kit-connectors'
 import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 import { findNetworkConfig, allNetworks } from '@0xsequence/network'
 import { createConfig, http } from 'wagmi'
 import { Transport, zeroAddress } from 'viem'
 
-// append ?debug to url to enable debug mode
+export type ConnectionMode = 'waas' | 'universal'
+
 const searchParams = new URLSearchParams(location.search)
+
+// append ?mode=waas|universal to url to switch between connection modes
+const connectionMode: ConnectionMode = searchParams.get('mode') === 'universal' ? 'universal' : 'waas'
+
+// append ?debug to url to enable debug mode
 const isDebugMode = searchParams.has('debug')
 
 const projectAccessKey = 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
@@ -28,55 +34,59 @@ chains.forEach(chain => {
   transports[chain.id] = http(network.rpcUrl)
 })
 
-/// Use this to test the waas connectors
-// WaaS config
-// const waasConfigKey = 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
-// const googleClientId = '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com'
-// const appleClientId = 'com.horizon.sequence.waas'
-// const appleRedirectURI = 'https://' + window.location.host
+const waasConfigKey = 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
+const googleClientId = '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com'
+const appleClientId = 'com.horizon.sequence.waas'
+const appleRedirectURI = 'https://' + window.location.host
 
-// const connectors = [
-//   ...getDefaultWaasConnectors({
-//     walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-//     defaultChainId: arbitrumSepolia.id,
-//     waasConfigKey,
-//     googleClientId,
-//     appleClientId,
-//     appleRedirectURI,
-//     appName: 'Kit Demo',
-//     projectAccessKey,
-//     enableConfirmationModal: localStorage.getItem('confirmationEnabled') === 'true'
-//   }),
-//   ...(isDebugMode
-//     ? getKitConnectWallets(projectAccessKey, [
-//         mock({
-//           accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
-//         })
-//       ])
-//     : [])
-// ]
+const getWaasConnectors = () => {
+  const connectors = [
+    ...getDefaultWaasConnectors({
+      walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
+      defaultChainId: arbitrumSepolia.id,
+      waasConfigKey,
+      googleClientId,
+      appleClientId,
+      appleRedirectURI,
+      appName: 'Kit Demo',
+      projectAccessKey,
+      enableConfirmationModal: localStorage.getItem('confirmationEnabled') === 'true'
+    }),
+    ...(isDebugMode
+      ? getKitConnectWallets(projectAccessKey, [
+          mock({
+            accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
+          })
+        ])
+      : [])
+  ]
+
+  return connectors
+}
 
-/// Use this to test the universal connectors
-const connectors = [
-  ...getDefaultConnectors({
-    walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-    defaultChainId: arbitrumNova.id,
-    appName: 'demo app',
-    projectAccessKey
-  }),
-  ...(isDebugMode
-    ? getKitConnectWallets(projectAccessKey, [
-        mock({
-          accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
-        })
-      ])
-    : [])
-]
+const getUniversalConnectors = () => {
+  const connectors = [
+    ...getDefaultConnectors({
+      walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
+      defaultChainId: arbitrumNova.id,
+      appName: 'demo app',
+      projectAccessKey
+    }),
+    ...(isDebugMode
+      ? getKitConnectWallets(projectAccessKey, [
+          mock({
+            accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
+          })
+        ])
+      : [])
+  ]
+  return connectors
+}
 
 export const wagmiConfig = createConfig({
   transports,
   chains,
-  connectors
+  connectors: connectionMode === 'waas' ? getWaasConnectors() : getUniversalConnectors()
 })
 
 export const kitConfig: KitConfig = {

diff --git a/examples/react/src/index.css b/examples/react/src/index.css
@@ -10,6 +10,7 @@ body {
     'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: var(--seq-colors-background-primary);
 }
 
 code {