fix: integrate web3auth in demo app

docs/src/routes/docs/[...4]wallets/[...33]web3auth/+page.md

@@ -35,10 +35,30 @@ For troubleshooting web3Auth errors, framework, polyfill, etc please see the [of
 ```typescript
 import Onboard from '@web3-onboard/core'
 import web3authModule from '@web3-onboard/web3auth'
+import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
+import { CHAIN_NAMESPACES } from '@web3auth/base'
+
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+  config: {
+    chainConfig: {
+      chainId: `0xAA36A7`,
+      rpcTarget: `https://rpc.sepolia.org/`,
+      chainNamespace: CHAIN_NAMESPACES.EIP155,
+      displayName: 'Sepolia',
+      blockExplorerUrl: 'https://sepolia.etherscan.io',
+      ticker: 'ETH',
+      tickerName: 'Ether',
+      logo: 'https://images.toruswallet.io/ethereum.svg'
+    }
+  }
+})
 
+// must access via http://localhost:8080 to be whitelisted
 const web3auth = web3authModule({
   clientId:
-    'DJuUOKvmNnlzy6ruVgeWYWIMKLRyYtjYa9Y10VCeJzWZcygDlrYLyXsBQjpJ2hxlBO9dnl8t9GmAC2qOP5vnIGo'
+    'BErDmyuxFPtpvM_Isiy8RHNWOWYvkAUehrgmO0rDoe5yr33ixt5s98eT_qePTyRsgpN7SVQwrEUMx7gON0jBDQI',
+  privateKeyProvider: privateKeyProvider,
+  web3AuthNetwork: 'sapphire_devnet'
 })
 
 const onboard = Onboard({
@@ -56,11 +76,15 @@ console.log(connectedWallets)
 ## Types
 
 ```typescript
+import type { Web3AuthOptions, ModalConfig } from '@web3auth/modal'
+import type { CustomChainConfig, OPENLOGIN_NETWORK_TYPE } from '@web3auth/base'
 type Web3AuthModuleOptions = Omit<Web3AuthOptions, 'chainConfig'> & {
   chainConfig?: Partial<CustomChainConfig> & Pick<CustomChainConfig, 'chainNamespace'>
-
   modalConfig?: Record<string, ModalConfig> | undefined
-
+  /**
+   * Web3Auth Network to use for the session & the issued idToken
+   */
+  web3AuthNetwork: OPENLOGIN_NETWORK_TYPE
   /**
    * @deprecated use web3Auth native Z-Index config through
    * uiConfig.modalZIndex

packages/demo/package.json

@@ -24,6 +24,7 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
+    "@0xpass/webauthn-signer": "2.0.0",
     "@blocto/dappauth": "^2.1.0",
     "@safe-global/safe-apps-provider": "^0.18.0",
     "@safe-global/safe-apps-sdk": "^8.1.0",
@@ -32,15 +33,14 @@
     "@web3-onboard/blocto": "^2.1.1",
     "@web3-onboard/capsule": "2.2.0-alpha.1",
     "@web3-onboard/cede-store": "^2.3.1",
-    "@web3-onboard/core": "2.22.1",
     "@web3-onboard/coinbase": "^2.4.1",
+    "@web3-onboard/core": "2.22.1",
     "@web3-onboard/dcent": "^2.2.7",
     "@web3-onboard/enkrypt": "^2.1.1",
     "@web3-onboard/fortmatic": "^2.1.1",
     "@web3-onboard/frame": "^2.1.1",
     "@web3-onboard/frontier": "^2.1.1",
     "@web3-onboard/gas": "^2.2.1",
-    "@web3-onboard/wagmi": "^2.0.1",
     "@web3-onboard/gnosis": "^2.3.1",
     "@web3-onboard/infinity-wallet": "^2.1.1",
     "@web3-onboard/injected-wallets": "^2.11.1",
@@ -52,6 +52,7 @@
     "@web3-onboard/mew-wallet": "^2.1.1",
     "@web3-onboard/okx": "2.0.0-alpha.1",
     "@web3-onboard/particle-network": "^2.1.1",
+    "@web3-onboard/passport": "^2.1.1",
     "@web3-onboard/phantom": "^2.1.1",
     "@web3-onboard/portis": "^2.2.1",
     "@web3-onboard/sequence": "^2.1.1",
@@ -62,12 +63,13 @@
     "@web3-onboard/trust": "^2.1.1",
     "@web3-onboard/uauth": "^2.2.1",
     "@web3-onboard/venly": "^2.1.1",
+    "@web3-onboard/wagmi": "^2.0.1",
     "@web3-onboard/walletconnect": "^2.6.1",
-    "@web3-onboard/web3auth": "^2.4.0-alpha.1",
+    "@web3-onboard/web3auth": "^2.4.0-alpha.2",
     "@web3-onboard/xdefi": "^2.1.1",
     "@web3-onboard/zeal": "^2.1.1",
-    "@web3-onboard/passport": "^2.1.1",
-    "@0xpass/webauthn-signer": "2.0.0",
+    "@web3auth/base": "^8.6.2",
+    "@web3auth/ethereum-provider": "^8.6.2",
     "vconsole": "^3.15.1"
   },
   "license": "MIT",

packages/demo/src/App.svelte

@@ -62,6 +62,8 @@
   } from '@web3-onboard/wagmi'
   import { parseEther, isHex, fromHex } from 'viem'
   import passportModule, { Network } from '@web3-onboard/passport'
+  import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
+  import { CHAIN_NAMESPACES } from '@web3auth/base'
   import { WebauthnSigner } from '@0xpass/webauthn-signer'
 
   if (window.innerWidth < 700) {
@@ -165,9 +167,27 @@
     apiKey: 'pk_test_886ADCAB855632AA'
   })
 
+  const privateKeyProvider = new EthereumPrivateKeyProvider({
+    config: {
+      chainConfig: {
+        chainId: `0xAA36A7`,
+        rpcTarget: `https://rpc.sepolia.org/`,
+        chainNamespace: CHAIN_NAMESPACES.EIP155,
+        displayName: 'Sepolia',
+        blockExplorerUrl: 'https://sepolia.etherscan.io',
+        ticker: 'ETH',
+        tickerName: 'Ether',
+        logo: 'https://images.toruswallet.io/ethereum.svg'
+      }
+    }
+  })
+
+  // must access via http://localhost:8080 to be whitelisted
   const web3auth = web3authModule({
     clientId:
-      'DJuUOKvmNnlzy6ruVgeWYWIMKLRyYtjYa9Y10VCeJzWZcygDlrYLyXsBQjpJ2hxlBO9dnl8t9GmAC2qOP5vnIGo'
+      'BErDmyuxFPtpvM_Isiy8RHNWOWYvkAUehrgmO0rDoe5yr33ixt5s98eT_qePTyRsgpN7SVQwrEUMx7gON0jBDQI',
+    privateKeyProvider: privateKeyProvider,
+    web3AuthNetwork: 'sapphire_devnet'
   })
 
   const arcanaAuth = arcanaAuthModule({
@@ -523,7 +543,7 @@
   }
 
   const sendTransactionWithPreFlight = async (provider, balance) => {
-    await onboard.setChain({ chainId: '0x5' })
+    await onboard.setChain({ chainId: '0xAA36A7' })
 
     const balanceValue = Object.values(balance)[0]
     // if using ethers v6 this is:
@@ -570,7 +590,7 @@
     await wagmiSignMessage(wagmiConfig, {
       message: signMsg,
       connector: wagmiConnector
-    })
+    }).then(console.log)
     // try {
     //   recoveredAddress = recoverAddress(
     //     arrayify(hashMessage(signMsg)),
@@ -601,7 +621,7 @@
   let typedMsg = JSON.stringify(
     {
       domain: {
-        chainId: '0x5',
+        chainId: '0xAA36A7',
         name: 'Web3-Onboard Test App',
         verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
         version: '1'
@@ -648,8 +668,9 @@
     undefined,
     2
   )
-  const signTypedMessage = async (provider, address) => {
-    await onboard.setChain({ chainId: '0x5' })
+  const signTypedMessage = async (connector, address) => {
+    await onboard.setChain({ chainId: '0xAA36A7' })
+    const provider = await connector.getProvider()
     const signature = await provider.request({
       method: 'eth_signTypedData_v4',
       params: [address, typedMsg]