integrate in demo app

(cherry picked from commit 83885db)

Author: bengobeil

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,14 @@
     "@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/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",
+    "react": ">=18.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: `0x1`,
+                rpcTarget: `https://mainnet.infura.io/v3/${infura_key}`,
+                chainNamespace: CHAIN_NAMESPACES.EIP155,
+                displayName: "Ethereum Mainnet",
+                blockExplorerUrl: "https://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({
@@ -570,7 +590,7 @@
     await wagmiSignMessage(wagmiConfig, {
       message: signMsg,
       connector: wagmiConnector
-    })
+    }).then(console.log)
     // try {
     //   recoveredAddress = recoverAddress(
     //     arrayify(hashMessage(signMsg)),