From dc7550293f7f07ff3df906148637cd1c4631d291 Mon Sep 17 00:00:00 2001
From: Tolgahan Arikan <tolgahan.arikan@gmail.com>
Date: Thu, 16 Jan 2025 17:32:28 +0300
Subject: [PATCH] Fix connecting in hook, update example

---
 examples/react/src/components/Connected.tsx | 47 ++++++---------------
 packages/kit/src/hooks/useKitWallets.ts     |  5 ++-
 2 files changed, 16 insertions(+), 36 deletions(-)

diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
index 33e8178d..925eab70 100644
--- a/examples/react/src/components/Connected.tsx
+++ b/examples/react/src/components/Connected.tsx
@@ -7,7 +7,8 @@ import {
   validateEthProof,
   getModalPositionCss,
   useOpenConnectModal,
-  ContractVerificationStatus
+  ContractVerificationStatus,
+  useKitWallets
 } from '@0xsequence/kit'
 import { useCheckoutModal, useAddFundsModal, useERC1155SaleContractPaymentModal, useSwapModal } from '@0xsequence/kit-checkout'
 import type { SwapModalSettings } from '@0xsequence/kit-checkout'
@@ -21,8 +22,6 @@ import { formatUnits, parseUnits } from 'viem'
 import {
   useAccount,
   useChainId,
-  useConnections,
-  useConnect,
   useDisconnect,
   usePublicClient,
   useSendTransaction,
@@ -57,11 +56,8 @@ export const Connected = () => {
   const [checkoutTokenContractAddress, setCheckoutTokenContractAddress] = React.useState('')
   const [checkoutTokenId, setCheckoutTokenId] = React.useState('')
 
-  const connections = useConnections()
-  console.log('connections:', connections)
-
-  const waasConnection = connections.find(c => c.connector.id.includes('waas'))
-  const isWaasConnectionActive = waasConnection !== undefined && address === waasConnection.accounts[0]
+  const { wallets, setActiveWallet } = useKitWallets()
+  const isWaasConnectionActive = wallets.some(w => w.isEmbedded && w.isActive)
 
   const {
     data: txnData,
@@ -98,17 +94,8 @@ export const Connected = () => {
 
   const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = React.useState<string | undefined>()
 
-  const { connectAsync } = useConnect()
   const { disconnect } = useDisconnect()
 
-  const handleConnectorChange = async (connectorId: string) => {
-    const newConnection = connections.find(c => c.connector.id === connectorId)
-    if (!newConnection) return
-
-    // Connect with the selected connector
-    await connectAsync({ connector: newConnection.connector })
-  }
-
   useEffect(() => {
     if (pendingFeeOptionConfirmation) {
       setSelectedFeeOptionTokenName(pendingFeeOptionConfirmation.options[0].token.name)
@@ -524,12 +511,12 @@ export const Connected = () => {
               <Text fontWeight="semibold" variant="small" color="text50">
                 Connected Wallets
               </Text>
-              {connections.map(connection => (
+              {wallets.map(wallet => (
                 <Box
-                  key={(connection.connector._wallet as any)?.id ?? connection.connector.id}
+                  key={wallet.id}
                   padding="2"
                   borderRadius="md"
-                  background={connection.accounts[0] === address ? 'backgroundRaised' : 'backgroundMuted'}
+                  background={wallet.isActive ? 'backgroundRaised' : 'backgroundMuted'}
                   display="flex"
                   flexDirection="row"
                   alignItems="center"
@@ -540,29 +527,21 @@ export const Connected = () => {
                     flexDirection="row"
                     alignItems="center"
                     gap="2"
-                    onClick={() => handleConnectorChange(connection.connector.id)}
+                    onClick={() => setActiveWallet(wallet.address)}
                     style={{ cursor: 'pointer' }}
                   >
-                    <Box
-                      borderColor="text50"
-                      background={connection.connector.id === connections[0]?.connector.id ? 'text100' : 'transparent'}
-                    />
+                    <Box borderColor="text50" background={wallet.isActive ? 'text100' : 'transparent'} />
                     <Box flexDirection="column" gap="1">
                       <Text variant="normal" color="text100">
-                        {connection.connector.id.includes('waas') ? 'Embedded - ' : ''}
-                        {(connection.connector._wallet as any)?.name ?? connection.connector.name}
+                        {wallet.isEmbedded ? 'Embedded - ' : ''}
+                        {wallet.name}
                       </Text>
                       <Text variant="normal" fontWeight="bold" color="text100">
-                        {truncateAtMiddle(connection.accounts[0], 10)}
+                        {truncateAtMiddle(wallet.address, 10)}
                       </Text>
                     </Box>
                   </Box>
-                  <Button
-                    variant="text"
-                    size="sm"
-                    label="Disconnect"
-                    onClick={() => disconnect({ connector: connection.connector })}
-                  />
+                  <Button variant="text" size="sm" label="Disconnect" onClick={() => disconnect()} />
                 </Box>
               ))}
             </Box>
diff --git a/packages/kit/src/hooks/useKitWallets.ts b/packages/kit/src/hooks/useKitWallets.ts
index 05a01a60..dd048dc8 100644
--- a/packages/kit/src/hooks/useKitWallets.ts
+++ b/packages/kit/src/hooks/useKitWallets.ts
@@ -1,4 +1,4 @@
-import { type UseConnectionsReturnType, useAccount, useConnections } from 'wagmi'
+import { type UseConnectionsReturnType, useAccount, useConnect, useConnections } from 'wagmi'
 
 export interface KitWallet {
   id: string
@@ -11,6 +11,7 @@ export interface KitWallet {
 export const useKitWallets = () => {
   const { address } = useAccount()
   const connections = useConnections()
+  const { connectAsync } = useConnect()
 
   const wallets: KitWallet[] = connections.map((connection: UseConnectionsReturnType[number]) => ({
     id: connection.connector.id,
@@ -25,7 +26,7 @@ export const useKitWallets = () => {
     if (!connection) return
 
     try {
-      await connection.connector.connect()
+      await connectAsync({ connector: connection.connector })
     } catch (error) {
       console.error('Failed to set active wallet:', error)
     }