wallet integrated ui

examples/react/src/components/Connected.tsx

@@ -507,7 +507,11 @@ export const Connected = () => {
             <Text className="mt-6" variant="small" color="muted" fontWeight="medium">
               Demos
             </Text>
-            <CardButton title="Inventory" description="View all tokens in your wallet" onClick={() => setOpenWalletModal(true)} />
+            <CardButton
+              title="Wallet widget"
+              description="View your integrated wallet"
+              onClick={() => setOpenWalletModal(true)}
+            />
             {(sponsoredContractAddresses[chainId] || networkForCurrentChainId.testnet) && isWaasConnectionActive && (
               <CardButton
                 title="Send sponsored transaction"

packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx

@@ -209,6 +209,7 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
     >
       <SwapModalContextProvider
         value={{
+          isSwapModalOpen: isOpenSwapModal,
           openSwapModal,
           closeSwapModal,
           swapModalSettings
@@ -230,6 +231,7 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
           >
             <AddFundsContextProvider
               value={{
+                isAddFundsModalOpen: openAddFundsModal,
                 triggerAddFunds,
                 closeAddFunds,
                 addFundsSettings

packages/checkout/src/contexts/AddFundsModal.ts

@@ -20,6 +20,7 @@ export interface AddFundsSettings {
 }
 
 type AddFundsModalContext = {
+  isAddFundsModalOpen: boolean
   triggerAddFunds: (settings: AddFundsSettings) => void
   closeAddFunds: () => void
   addFundsSettings?: AddFundsSettings

packages/checkout/src/contexts/SwapModal.ts

@@ -24,6 +24,7 @@ export interface SwapModalSettings {
 }
 
 type SwapModalContext = {
+  isSwapModalOpen: boolean
   openSwapModal: (settings: SwapModalSettings) => void
   closeSwapModal: () => void
   swapModalSettings?: SwapModalSettings

packages/checkout/src/hooks/useAddFundsModal.ts

@@ -8,6 +8,7 @@ import { AddFundsSettings, useAddFundsModalContext } from '../contexts/AddFundsM
  * @property Current settings for the On-ramp modal `addFundsSettings`
  */
 type UseAddFundsModalReturnType = {
+  isAddFundsModalOpen: boolean
   triggerAddFunds: (settings: AddFundsSettings) => void
   closeAddFunds: () => void
   addFundsSettings: AddFundsSettings | undefined
@@ -52,7 +53,7 @@ type UseAddFundsModalReturnType = {
  * ```
  */
 export const useAddFundsModal = (): UseAddFundsModalReturnType => {
-  const { triggerAddFunds, closeAddFunds, addFundsSettings } = useAddFundsModalContext()
+  const { isAddFundsModalOpen, triggerAddFunds, closeAddFunds, addFundsSettings } = useAddFundsModalContext()
 
-  return { triggerAddFunds, closeAddFunds, addFundsSettings }
+  return { isAddFundsModalOpen, triggerAddFunds, closeAddFunds, addFundsSettings }
 }

packages/checkout/src/hooks/useSwapModal.ts

@@ -8,6 +8,7 @@ import { SwapModalSettings, useSwapModalContext } from '../contexts/SwapModal'
  * @property {SwapModalSettings|undefined} swapModalSettings - Current settings for the Swap modal
  */
 type UseSwapModalReturnType = {
+  isSwapModalOpen: boolean
   openSwapModal: (settings: SwapModalSettings) => void
   closeSwapModal: () => void
   swapModalSettings: SwapModalSettings | undefined
@@ -73,7 +74,7 @@ type UseSwapModalReturnType = {
  * ```
  */
 export const useSwapModal = (): UseSwapModalReturnType => {
-  const { openSwapModal, closeSwapModal, swapModalSettings } = useSwapModalContext()
+  const { isSwapModalOpen, openSwapModal, closeSwapModal, swapModalSettings } = useSwapModalContext()
 
-  return { openSwapModal, closeSwapModal, swapModalSettings }
+  return { isSwapModalOpen, openSwapModal, closeSwapModal, swapModalSettings }
 }

packages/connect/src/components/SequenceConnectPreviewProvider/SequenceConnectPreviewProvider.tsx

@@ -119,7 +119,9 @@ export const SequenceConnectPreviewProvider = (props: SequenceConnectProviderPro
         }}
       >
         <GoogleOAuthProvider clientId={googleClientId}>
-          <ConnectModalContextProvider value={{ setOpenConnectModal, openConnectModalState: openConnectModal }}>
+          <ConnectModalContextProvider
+            value={{ isConnectModalOpen: openConnectModal, setOpenConnectModal, openConnectModalState: openConnectModal }}
+          >
             <WalletConfigContextProvider value={{ setDisplayedAssets, displayedAssets, readOnlyNetworks }}>
               <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
                 <div id="kit-provider">

packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx

@@ -165,7 +165,9 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) =>
           }}
         >
           <GoogleOAuthProvider clientId={googleClientId}>
-            <ConnectModalContextProvider value={{ setOpenConnectModal, openConnectModalState: openConnectModal }}>
+            <ConnectModalContextProvider
+              value={{ isConnectModalOpen: openConnectModal, setOpenConnectModal, openConnectModalState: openConnectModal }}
+            >
               <WalletConfigContextProvider value={{ setDisplayedAssets, displayedAssets, readOnlyNetworks }}>
                 <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
                   <ShadowRoot theme={theme}>

packages/connect/src/contexts/ConnectModal.ts

@@ -5,6 +5,7 @@ import React from 'react'
 import { createGenericContext } from './genericContext'
 
 type ConnectModalContext = {
+  isConnectModalOpen: boolean
   setOpenConnectModal: React.Dispatch<React.SetStateAction<boolean>>
   openConnectModalState: boolean
 }

packages/connect/src/hooks/useOpenConnectModal.ts

@@ -7,6 +7,7 @@ import { useConnectModalContext } from '../contexts/ConnectModal'
  * @property Current open state of the Connect modal `openConnectModalState`
  */
 type UseOpenConnectModalReturnType = {
+  isConnectModalOpen: boolean
   setOpenConnectModal: (isOpen: boolean) => void
   openConnectModalState: boolean
 }
@@ -47,7 +48,7 @@ type UseOpenConnectModalReturnType = {
  * ```
  */
 export const useOpenConnectModal = (): UseOpenConnectModalReturnType => {
-  const { setOpenConnectModal, openConnectModalState } = useConnectModalContext()
+  const { isConnectModalOpen, setOpenConnectModal, openConnectModalState } = useConnectModalContext()
 
-  return { setOpenConnectModal, openConnectModalState }
+  return { isConnectModalOpen, setOpenConnectModal, openConnectModalState }
 }

packages/connect/src/hooks/useWallets.ts

@@ -159,6 +159,7 @@ export interface ConnectedWallet {
   address: string
   isActive: boolean
   isEmbedded: boolean
+  signInMethod: string
 }
 
 /**
@@ -222,6 +223,7 @@ export interface UseWalletsReturnType {
  * }
  * ```
  */
+
 export const useWallets = (): UseWalletsReturnType => {
   const { address } = useAccount()
   const connections = useConnections()
@@ -261,12 +263,21 @@ export const useWallets = (): UseWalletsReturnType => {
     name: getConnectorName(connection.connector),
     address: connection.accounts[0],
     isActive: connection.accounts[0] === address,
-    isEmbedded: connection.connector.id.includes('waas')
+    isEmbedded: connection.connector.id.includes('waas'),
+    signInMethod: (connection.connector._wallet as any)?.id
   }))
 
   const setActiveWallet = async (walletAddress: string) => {
-    const connection = connections.find((c: UseConnectionsReturnType[number]) => c.accounts[0] === walletAddress)
+    const connection = connections.find(
+      (c: UseConnectionsReturnType[number]) => c.accounts[0].toLowerCase() === walletAddress.toLowerCase()
+    )
     if (!connection) {
+      console.error('No connection found for wallet address:', walletAddress)
+      return
+    }
+
+    // Do not try to change if it's already active
+    if (wallets.find(w => w.address.toLowerCase() === walletAddress.toLowerCase())?.isActive) {
       return
     }
 
@@ -278,7 +289,9 @@ export const useWallets = (): UseWalletsReturnType => {
   }
 
   const disconnectWallet = async (walletAddress: string) => {
-    const connection = connections.find((c: UseConnectionsReturnType[number]) => c.accounts[0] === walletAddress)
+    const connection = connections.find(
+      (c: UseConnectionsReturnType[number]) => c.accounts[0].toLowerCase() === walletAddress.toLowerCase()
+    )
     if (!connection) {
       return
     }