Auth state and various improvements (v6)

examples/react/src/App.tsx

@@ -1,4 +1,4 @@
-import { SequenceConnect } from '@0xsequence/connect'
+import { SequenceConnect, useResolvedConnectConfig } from '@0xsequence/connect'
 import { SequenceWalletProvider } from '@0xsequence/wallet-widget'
 import { useCallback, useMemo, useState } from 'react'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
@@ -18,7 +18,24 @@ export const App = () => {
     setWalletUrl(sanitizedUrl)
   }, [])
 
-  const config = useMemo(() => createExampleConfig(walletUrl), [walletUrl])
+  const baseConfig = useMemo(() => createExampleConfig(walletUrl), [walletUrl])
+  const { resolvedConfig: resolvedConnectConfig, walletConfigurationSignIn } = useResolvedConnectConfig(baseConfig.connectConfig)
+
+  const config = useMemo(() => {
+    const baseSignIn = baseConfig.connectConfig.signIn ?? {}
+    const resolvedSignIn = walletConfigurationSignIn ?? {}
+    return {
+      ...baseConfig,
+      connectConfig: {
+        ...resolvedConnectConfig,
+        signIn: {
+          ...baseSignIn,
+          projectName: resolvedSignIn.projectName ?? baseSignIn.projectName,
+          logoUrl: resolvedSignIn.logoUrl ?? baseSignIn.logoUrl
+        }
+      }
+    }
+  }, [baseConfig, resolvedConnectConfig, walletConfigurationSignIn])
 
   return (
     <SequenceConnect config={config}>

examples/react/src/components/Connected.tsx

@@ -37,14 +37,18 @@ export const Connected = () => {
 
   const { wallets, setActiveWallet, disconnectWallet } = useWallets()
 
+  useEffect(() => {
+    console.log('wallets changed', wallets, Date.now())
+  }, [wallets])
+
   const isV3WalletConnectionActive = wallets.some(w => w.id === 'sequence-v3-wallet' && w.isActive)
 
   const sessionState = useSequenceSessionState()
 
   const [hasPermission, setHasPermission] = React.useState(false)
   const [isCheckingPermission, setIsCheckingPermission] = React.useState(false)
 
-  console.log('sessionState', sessionState)
+  // console.log('sessionState', sessionState)
 
   const {
     data: implicitTestTxnData,

examples/react/src/components/Homepage.tsx

@@ -29,6 +29,9 @@ export const Homepage = ({ walletUrl, onWalletUrlChange }: HomepageProps) => {
   const normalizedInput = sanitizeWalletUrl(walletUrlInput)
   const isDirty = normalizedInput !== walletUrl
 
+  console.log('wallets.lenght', wallets.length)
+  console.log('wallets', wallets)
+
   return (
     <main>
       {wallets.length === 0 ? (

examples/react/src/config.ts

@@ -4,6 +4,7 @@ import { Environment } from '@imtbl/config'
 import { passport } from '@imtbl/sdk'
 import { parseEther } from 'viem'
 
+import { webSdkDemoLogoDataUrl } from './constants/index.js'
 import { getEmitterContractAddress } from './constants/permissions'
 
 // const searchParams = new URLSearchParams(location.search)
@@ -37,6 +38,8 @@ export const connectConfig: ConnectConfig = {
   projectAccessKey,
   walletUrl: DEFAULT_WALLET_URL,
   signIn: {
+    projectName: 'Web SDK Demo',
+    logoUrl: webSdkDemoLogoDataUrl,
     descriptiveSocials: true,
     disableTooltipForDescriptiveSocials: true
   },
@@ -96,7 +99,7 @@ export const createExampleConfig = (walletUrl: string) =>
     walletUrl: sanitizeWalletUrl(walletUrl),
     dappOrigin: window.location.origin,
     appName: 'Sequence Web SDK Demo',
-    defaultChainId: ChainId.OPTIMISM,
+    defaultChainId: ChainId.ARBITRUM_SEPOLIA,
     walletConnect: {
       projectId: walletConnectProjectId
     },
@@ -105,7 +108,7 @@ export const createExampleConfig = (walletUrl: string) =>
     enableImplicitSession: true,
     includeFeeOptionPermissions: true,
     explicitSessionParams: {
-      chainId: ChainId.OPTIMISM,
+      chainId: ChainId.ARBITRUM_SEPOLIA,
       nativeTokenSpending: {
         valueLimit: parseEther('0.1')
       },

examples/react/src/constants/index.ts

@@ -1 +1,2 @@
 export const messageToSign = 'Two roads diverged in a yellow wood'
+export { webSdkDemoLogoDataUrl } from './logo.js'

examples/react/src/constants/logo.ts

@@ -0,0 +1,2 @@
+export const webSdkDemoLogoDataUrl =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTgwIDQwQzgwIDYyLjA5MTQgNjIuMDkxNCA4MCA0MCA4MEMxNy45MDg2IDgwIDAgNjIuMDkxNCAwIDQwQzAgMTcuOTA4NiAxNy45MDg2IDAgNDAgMEM2Mi4wOTE0IDAgODAgMTcuOTA4NiA4MCA0MFoiIGZpbGw9IiMxRDI2MzMiPjwvcGF0aD4KPHBhdGggZD0iTTY5LjcxMzYgNTAuMjEzM0M3MS4wNjQ0IDUwLjIxMzMgNzIuMDI1MiA1MS41MjYxIDcxLjUxNzIgNTIuNzc3N0M2Ni40NjY2IDY1LjIyMzMgNTQuMjU4MiA3NCAzOS45OTk5IDc0QzI1Ljc0MTcgNzQgMTMuNTMzMyA2NS4yMjMzIDguNDgyNjMgNTIuNzc3N0M3Ljk3NDY2IDUxLjUyNjEgOC45MzU0OCA1MC4yMTMzIDEwLjI4NjMgNTAuMjEzM0g2OS43MTM2WiIgZmlsbD0iI0VERUJERSI+PC9wYXRoPgo8cGF0aCBkPSJNNzEuNTE3MiAyNy4yMjIyQzcyLjAyNTIgMjguNDczOSA3MS4wNjQ0IDI5Ljc4NjcgNjkuNzEzNiAyOS43ODY3SDEwLjI4NjNDOC45MzU0OSAyOS43ODY3IDcuOTc0NjggMjguNDczOSA4LjQ4MjY0IDI3LjIyMjJDMTMuNTMzMyAxNC43NzY3IDI1Ljc0MTcgNiAzOS45OTk5IDZDNTQuMjU4MiA2IDY2LjQ2NjUgMTQuNzc2NyA3MS41MTcyIDI3LjIyMjJaIiBmaWxsPSIjRURFQkRFIj48L3BhdGg+CjxwYXRoIGQ9Ik02OS44MzcgMzcuMTQ5OUM3Mi4wODQyIDM3LjE0OTkgNzMuMTY4NiAzOC43MTc3IDczLjE2ODYgNDAuNTMzN1Y0My45NDM3SDcwLjgxNjlWNDAuOTM4OEM3MC44MTY5IDQwLjExNTcgNzAuNTE2NCAzOS40MzYzIDY5LjY1NDEgMzkuNDM2M0M2OC43OTE4IDM5LjQzNjMgNjguNTA0NCA0MC4xMTU3IDY4LjUwNDQgNDAuOTM4OFY0My45NDM3SDY2LjE1MjdWNDAuOTM4OEM2Ni4xNTI3IDQwLjExNTcgNjUuODY1MyAzOS40MzYzIDY1LjAwMyAzOS40MzYzQzY0LjE0MDcgMzkuNDM2MyA2My44NDAyIDQwLjExNTcgNjMuODQwMiA0MC45Mzg4VjQzLjk0MzdINjEuNDg4NVY0MC41MzM3QzYxLjQ4ODUgMzguNzE3NyA2Mi41NzI5IDM3LjE0OTkgNjQuODIwMSAzNy4xNDk5QzY2LjA0ODIgMzcuMTQ5OSA2Ni45MzY2IDM3LjYzMzMgNjcuMzQxNiAzOC40MzAzQzY3Ljc3MjggMzcuNjMzMyA2OC43MTM1IDM3LjE0OTkgNjkuODM3IDM3LjE0OTlaIiBmaWxsPSIjRURFQkRFIj48L3BhdGg+CjxwYXRoIGQ9Ik01Ny4yNjI3IDQxLjg1MzNDNTguMDIwNSA0MS44NTMzIDU4LjM0NzEgNDEuMTYwOSA1OC4zNDcxIDQwLjMzNzhWMzcuNDExMkg2MC42OTg4VjQwLjYyNTJDNjAuNjk4OCA0Mi41NDU3IDU5LjU3NTIgNDQuMTM5NyA1Ny4yNjI3IDQ0LjEzOTdDNTQuOTUwMiA0NC4xMzk3IDUzLjgyNjcgNDIuNTQ1NyA1My44MjY3IDQwLjYyNTJWMzcuNDExMkg1Ni4xNzgzVjQwLjMzNzhDNTYuMTc4MyA0MS4xNjA5IDU2LjUwNSA0MS44NTMzIDU3LjI2MjcgNDEuODUzM1oiIGZpbGw9IiNFREVCREUiPjwvcGF0aD4KPHBhdGggZD0iTTUwLjM2ODcgNDQuMTUyN0M0OC44OTI0IDQ0LjE1MjcgNDcuOTM4NiA0My42NDMyIDQ3LjM3NjkgNDIuNjUwM0w0OS4wNzUzIDQxLjY5NjVDNDkuMzEwNSA0Mi4xMTQ2IDQ5LjY2MzIgNDIuMzIzNiA1MC4yNTExIDQyLjMyMzZDNTAuNzM0NSA0Mi4zMjM2IDUwLjk1NjYgNDIuMTUzOCA1MC45NTY2IDQxLjk0NDhDNTAuOTU2NiA0MS4xNDc4IDQ3LjUwNzUgNDEuOTU3OCA0Ny41MDc1IDM5LjQyMzJDNDcuNTA3NSAzOC4xOTUxIDQ4LjU1MjcgMzcuMjAyMiA1MC4zMjk1IDM3LjIwMjJDNTEuODg0MyAzNy4yMDIyIDUyLjczMzUgMzcuOTU5OSA1My4xMTI0IDM4LjY5MTZMNTEuNDEzOSAzOS42NTg0QzUxLjI3MDIgMzkuMjY2NCA1MC44MjYgMzkuMDMxMyA1MC4zODE4IDM5LjAzMTNDNTAuMDQyMSAzOS4wMzEzIDQ5Ljg1OTIgMzkuMTc1IDQ5Ljg1OTIgMzkuMzcxQzQ5Ljg1OTIgNDAuMTgxIDUzLjMwODMgMzkuNDM2MyA1My4zMDgzIDQxLjg5MjVDNTMuMzA4MyA0My4yNjQzIDUxLjk2MjcgNDQuMTUyNyA1MC4zNjg3IDQ0LjE1MjdaIiBmaWxsPSIjRURFQkRFIj48L3BhdGg+CjxwYXRoIGQ9Ik00Mi4xNTI0IDQ2Ljk0ODZIMzkuODAwN1Y0MC42NjQ0QzM5LjgwMDcgMzguNjY1NSA0MS4zMDMyIDM3LjIxNTIgNDMuMzkzNiAzNy4yMTUyQzQ1LjQzMTcgMzcuMjE1MiA0Ni45ODY0IDM4Ljc3IDQ2Ljk4NjQgNDAuNjY0NEM0Ni45ODY0IDQyLjc1NDggNDUuNjAxNiA0NC4xMzk3IDQzLjUyNDIgNDQuMTM5N0M0My4wNDA4IDQ0LjEzOTcgNDIuNTU3NCA0My45OTYgNDIuMTUyNCA0My43NzM4VjQ2Ljk0ODZaTTQzLjM5MzYgNDEuOTMxN0M0NC4xMzgzIDQxLjkzMTcgNDQuNjM0NyA0MS4zNTY4IDQ0LjYzNDcgNDAuNjc3NUM0NC42MzQ3IDM5Ljk4NSA0NC4xMzgzIDM5LjQyMzIgNDMuMzkzNiAzOS40MjMyQzQyLjY0ODkgMzkuNDIzMiA0Mi4xNTI0IDM5Ljk4NSA0Mi4xNTI0IDQwLjY3NzVDNDIuMTUyNCA0MS4zNTY4IDQyLjY0ODkgNDEuOTMxNyA0My4zOTM2IDQxLjkzMTdaIiBmaWxsPSIjRURFQkRFIj48L3BhdGg+CjxwYXRoIGQ9Ik0zNy40NDQ5IDM2LjcxODhDMzYuNjc0MSAzNi43MTg4IDM2LjAzMzkgMzYuMDc4NiAzNi4wMzM5IDM1LjMwNzhDMzYuMDMzOSAzNC41MzY5IDM2LjY3NDEgMzMuODk2NyAzNy40NDQ5IDMzLjg5NjdDMzguMjE1OCAzMy44OTY3IDM4Ljg1NiAzNC41MzY5IDM4Ljg1NiAzNS4zMDc4QzM4Ljg1NiAzNi4wNzg2IDM4LjIxNTggMzYuNzE4OCAzNy40NDQ5IDM2LjcxODhaTTM2LjI2OTEgMzcuNDExMkgzOC42MjA4VjQzLjk0MzdIMzYuMjY5MVYzNy40MTEyWiIgZmlsbD0iI0VERUJERSI+PC9wYXRoPgo8cGF0aCBkPSJNMzEuNzU3MSA0NC4xMzk3QzI5LjcxOSA0NC4xMzk3IDI4LjE2NDIgNDIuNTcxOSAyOC4xNjQyIDQwLjY2NDRDMjguMTY0MiAzOC43NyAyOS43MTkgMzcuMjAyMiAzMS43NTcxIDM3LjIwMjJDMzMuNzk1MiAzNy4yMDIyIDM1LjM1IDM4Ljc3IDM1LjM1IDQwLjY2NDRDMzUuMzUgNDIuNTcxOSAzMy43OTUyIDQ0LjEzOTcgMzEuNzU3MSA0NC4xMzk3Wk0zMS43NTcxIDQxLjkzMTdDMzIuNTAxOCA0MS45MzE3IDMyLjk5ODMgNDEuMzU2OCAzMi45OTgzIDQwLjY3NzVDMzIuOTk4MyAzOS45ODUgMzIuNTAxOCAzOS40MTAyIDMxLjc1NzEgMzkuNDEwMkMzMS4wMTI0IDM5LjQxMDIgMzAuNTE1OSAzOS45ODUgMzAuNTE1OSA0MC42Nzc1QzMwLjUxNTkgNDEuMzU2OCAzMS4wMTI0IDQxLjkzMTcgMzEuNzU3MSA0MS45MzE3WiIgZmlsbD0iI0VERUJERSI+PC9wYXRoPgo8cGF0aCBkPSJNMjMuNzIzNyA0Ny4xNDQ2QzIyLjEwMzYgNDcuMTQ0NiAyMC45Mjc4IDQ2LjQyNiAyMC4zMjY4IDQ1LjE0NTdMMjIuMjczNSA0NC4xMDA1QzIyLjQ4MjUgNDQuNTQ0NyAyMi44NzQ1IDQ1LjAwMiAyMy42ODQ1IDQ1LjAwMkMyNC41MzM3IDQ1LjAwMiAyNS4wOTU1IDQ0LjQ2NjMgMjUuMTYwOCA0My41MjU2QzI0Ljg0NzMgNDMuOCAyNC4zNTA4IDQ0LjAwOSAyMy42MDYxIDQ0LjAwOUMyMS43OTAxIDQ0LjAwOSAyMC4zMjY4IDQyLjYxMTEgMjAuMzI2OCA0MC42NTEzQzIwLjMyNjggMzguNzU2OSAyMS44ODE1IDM3LjIxNTIgMjMuOTE5NyAzNy4yMTUyQzI2LjAxIDM3LjIxNTIgMjcuNTEyNSAzOC42NjU1IDI3LjUxMjUgNDAuNjY0NFY0My4yNTEzQzI3LjUxMjUgNDUuNjAyOSAyNS44Nzk0IDQ3LjE0NDYgMjMuNzIzNyA0Ny4xNDQ2Wk0yMy44ODA1IDQxLjgwMUMyNC41ODYgNDEuODAxIDI1LjEyMTYgNDEuMzE3NiAyNS4xMjE2IDQwLjU5OTFDMjUuMTIxNiAzOS44OTM2IDI0LjU4NiAzOS40MjMyIDIzLjg4MDUgMzkuNDIzMkMyMy4xODggMzkuNDIzMiAyMi42MzkzIDM5Ljg5MzYgMjIuNjM5MyA0MC41OTkxQzIyLjYzOTMgNDEuMzE3NiAyMy4xODggNDEuODAxIDIzLjg4MDUgNDEuODAxWiIgZmlsbD0iI0VERUJERSI+PC9wYXRoPgo8cGF0aCBkPSJNMTYuMzM3NCA0NC4xMzk3QzE0LjI5OTMgNDQuMTM5NyAxMi43NDQ1IDQyLjU3MTkgMTIuNzQ0NSA0MC42NjQ0QzEyLjc0NDUgMzguNzcgMTQuMjk5MyAzNy4yMDIyIDE2LjMzNzQgMzcuMjAyMkMxOC4zNzU1IDM3LjIwMjIgMTkuOTMwMyAzOC43NyAxOS45MzAzIDQwLjY2NDRDMTkuOTMwMyA0Mi41NzE5IDE4LjM3NTUgNDQuMTM5NyAxNi4zMzc0IDQ0LjEzOTdaTTE2LjMzNzQgNDEuOTMxN0MxNy4wODIxIDQxLjkzMTcgMTcuNTc4NiA0MS4zNTY4IDE3LjU3ODYgNDAuNjc3NUMxNy41Nzg2IDM5Ljk4NSAxNy4wODIxIDM5LjQxMDIgMTYuMzM3NCAzOS40MTAyQzE1LjU5MjcgMzkuNDEwMiAxNS4wOTYyIDM5Ljk4NSAxNS4wOTYyIDQwLjY3NzVDMTUuMDk2MiA0MS4zNTY4IDE1LjU5MjcgNDEuOTMxNyAxNi4zMzc0IDQxLjkzMTdaIiBmaWxsPSIjRURFQkRFIj48L3BhdGg+CjxwYXRoIGQ9Ik04LjQ2MjE4IDM1LjEyNDlWNDEuNzIyN0gxMi4zNTU1VjQzLjk0MzdIOC4xMzU1NkM2LjY0NjE1IDQzLjk0MzcgNi4wNDUxNyA0My4xNTk4IDYuMDQ1MTcgNDEuOTE4NlYzNS4xMjQ5SDguNDYyMThaIiBmaWxsPSIjRURFQkRFIj48L3BhdGg+CjxwYXRoIGQ9Ik0zMy45OTk5IDYuNTI3NzRDMzUuOTQ3NiA2LjE4MDk1IDM3Ljk1MjYgNiA0MCA2QzQyLjA0NzMgNiA0NC4wNTIzIDYuMTgwOTUgNDUuOTk5OSA2LjUyNzczVjI5Ljc4NjdIMzMuOTk5OVY2LjUyNzc0WiIgZmlsbD0iI0FDMjgyOCI+PC9wYXRoPgo8cGF0aCBkPSJNNDYuMDAwNCA1MC4yMTMzSDMzLjk5OTNDMzMuOTc0MSA1NS40MzEyIDMzLjAyMzQgNjAuNjAzOCAzMS4xOTA5IDY1LjQ5MDZMMjguNzE4NSA3Mi4wODM2QzMyLjI0ODYgNzMuMzI0OSAzNi4wNDU0IDc0IDM5Ljk5OTkgNzRDNDMuOTU0MyA3NCA0Ny43NTExIDczLjMyNDkgNTEuMjgxMiA3Mi4wODM2TDQ4LjgwODggNjUuNDkwNkM0Ni45NzYzIDYwLjYwMzggNDYuMDI1NiA1NS40MzEyIDQ2LjAwMDQgNTAuMjEzM1oiIGZpbGw9IiNBQzI4MjgiPjwvcGF0aD4KPHBhdGggZD0iTTQ2IDYuNTI3NzFDNTAuMzQwOCA3LjMwMDYgNTQuMzk2NyA4Ljg5NzIyIDU4IDExLjE1MDJWMjkuNzg2N0g0NlY2LjUyNzcxWiIgZmlsbD0iIzMwNkE5RiI+PC9wYXRoPgo8cGF0aCBkPSJNNTEuMjgxMyA3Mi4wODM2QzU2LjczODcgNzAuMTY0NyA2MS41NTg5IDY2Ljg5MjggNjUuMzM5MSA2Mi42NzA0TDY0Ljc0OTIgNjIuMjk1QzYwLjYwNTYgNTkuNjU4MSA1OC4wNzMgNTUuMTE0NyA1OC4wMDE1IDUwLjIxMzNINDYuMDAwNUM0Ni4wMjU3IDU1LjQzMTIgNDYuOTc2NCA2MC42MDM4IDQ4LjgwOSA2NS40OTA2TDUxLjI4MTMgNzIuMDgzNloiIGZpbGw9IiMzMDZBOUYiPjwvcGF0aD4KPHBhdGggZD0iTTIxLjk5OTkgMTEuMTUwMkMyNS42MDMyIDguODk3MjMgMjkuNjU5IDcuMzAwNiAzMy45OTk5IDYuNTI3NzFWMjkuNzg2N0gyMS45OTk5VjExLjE1MDJaIiBmaWxsPSIjREVCMDM4Ij48L3BhdGg+CjxwYXRoIGQ9Ik0yMS45OTgzIDUwLjIxMzNIMzMuOTk5M0MzMy45NzQyIDU1LjQwODkgMzMuMDMxNSA2MC41NTk2IDMxLjIxNDMgNjUuNDI4TDI4LjcxODUgNzIuMDgzNkMyMy4yNjEgNzAuMTY0NyAxOC40NDA5IDY2Ljg5MjggMTQuNjYwNiA2Mi42NzA0TDE1LjI1MDUgNjIuMjk1QzE5LjM5NDEgNTkuNjU4MSAyMS45MjY4IDU1LjExNDcgMjEuOTk4MyA1MC4yMTMzWiIgZmlsbD0iI0RFQjAzOCI+PC9wYXRoPgo8L3N2Zz4='

packages/connect/src/components/Connect/Banner.tsx

@@ -13,7 +13,7 @@ export const Banner = ({ config = {} as ConnectConfig }: BannerProps) => {
   return (
     <>
       {logoUrl && (
-        <div className="flex mt-5 justify-center items-center">
+        <div className="flex mt-5 mb-6 justify-center items-center">
           <Image src={logoUrl} style={{ height: '110px' }} />
         </div>
       )}