@web3auth/no-modal 10.14.1 → 11.0.0-beta.0

package/dist/lib.esm/providers/ethereum-provider/rpc/jrpcClient.js

@@ -1,22 +1,22 @@
 import { createFetchMiddleware } from '@toruslabs/base-controllers';
-import { mergeMiddleware } from '@web3auth/auth';
+import { JRPCEngineV2 } from '@web3auth/auth';
 
 function createEthChainIdMiddleware(chainId) {
-  return (req, res, next, end) => {
-    if (req.method === "eth_chainId") {
-      res.result = chainId;
-      return end();
-    }
-    return next();
+  return ({
+    request,
+    next
+  }) => {
+    if (request.method === "eth_chainId") return chainId;
+    return next(request);
   };
 }
 function createEthProviderConfigMiddleware(providerConfig) {
-  return (req, res, next, end) => {
-    if (req.method === "eth_provider_config") {
-      res.result = providerConfig;
-      return end();
-    }
-    return next();
+  return ({
+    request,
+    next
+  }) => {
+    if (request.method === "eth_provider_config") return providerConfig;
+    return next(request);
   };
 }
 function createEthJsonRpcClient(providerConfig) {
@@ -24,14 +24,15 @@ function createEthJsonRpcClient(providerConfig) {
     chainId,
     rpcTarget
   } = providerConfig;
-  const fetchMiddleware = createFetchMiddleware({
-    rpcTarget
+  const engine = JRPCEngineV2.create({
+    middleware: [createEthChainIdMiddleware(chainId), createEthProviderConfigMiddleware(providerConfig), createFetchMiddleware({
+      rpcTarget
+    })]
   });
-  const networkMiddleware = mergeMiddleware([createEthChainIdMiddleware(chainId), createEthProviderConfigMiddleware(providerConfig), fetchMiddleware]);
+  const networkMiddleware = engine.asMiddleware();
   return {
-    networkMiddleware,
-    fetchMiddleware
+    networkMiddleware
   };
 }
 
-export { createEthChainIdMiddleware, createEthJsonRpcClient, createEthProviderConfigMiddleware };
+export { createEthJsonRpcClient };

package/dist/lib.esm/providers/ethereum-provider/rpc/walletMiddleware.js

@@ -0,0 +1,201 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { createScaffoldMiddlewareV2, rpcErrors } from '@web3auth/auth';
+import { isHex, toHex } from 'viem';
+
+function createWalletMiddlewareV2({
+  getAccounts,
+  getPrivateKey,
+  getPublicKey,
+  processEthSignMessage,
+  processPersonalMessage,
+  processTransaction,
+  processSignTransaction,
+  processTypedMessageV4,
+  processGetCapabilities,
+  processSendCalls,
+  processGetCallsStatus,
+  processShowCallsStatus
+}) {
+  if (!getAccounts) throw new Error("opts.getAccounts is required");
+  async function validateAndNormalizeKeyholder(address, req) {
+    if (typeof address === "string" && address.length > 0) {
+      const accounts = await getAccounts(req);
+      const normalizedAddress = address.toLowerCase();
+      if (accounts.map(a => a.toLowerCase()).includes(normalizedAddress)) return normalizedAddress;
+    }
+    throw rpcErrors.invalidParams({
+      message: `Invalid parameters: must provide an Ethereum address.`
+    });
+  }
+
+  // Account lookups
+  function ethAccountsHandler(p) {
+    return getAccounts(p.request);
+  }
+
+  // Tx signatures
+  async function ethSendTransactionHandler(p) {
+    var _req$params$, _req$params;
+    if (!processTransaction) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    const txParams = (_req$params$ = (_req$params = req.params) === null || _req$params === void 0 ? void 0 : _req$params[0]) !== null && _req$params$ !== void 0 ? _req$params$ : {
+      from: ""
+    };
+    txParams.from = await validateAndNormalizeKeyholder(txParams.from, req);
+    return processTransaction(txParams, req);
+  }
+  async function ethSignTransactionHandler(p) {
+    var _req$params$2, _req$params2;
+    if (!processSignTransaction) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    const txParams = (_req$params$2 = (_req$params2 = req.params) === null || _req$params2 === void 0 ? void 0 : _req$params2[0]) !== null && _req$params$2 !== void 0 ? _req$params$2 : {
+      from: ""
+    };
+    txParams.from = await validateAndNormalizeKeyholder(txParams.from, req);
+    return processSignTransaction(txParams, req);
+  }
+
+  // Message signatures
+  async function ethSignHandler(p) {
+    if (!processEthSignMessage) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    let msgParams;
+    if (Array.isArray(req.params)) {
+      if (req.params.length !== 2) throw new Error(`WalletMiddleware - incorrect params for eth_sign. expected [address, message]`);
+      const [address, message] = req.params;
+      msgParams = {
+        from: address,
+        data: message
+      };
+    } else {
+      var _req$params3;
+      msgParams = (_req$params3 = req.params) !== null && _req$params3 !== void 0 ? _req$params3 : {
+        from: "",
+        data: ""
+      };
+    }
+    return processEthSignMessage(msgParams, req);
+  }
+  async function ethSignTypedDataV4Handler(p) {
+    if (!processTypedMessageV4) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    if (!(req !== null && req !== void 0 && req.params)) throw new Error("WalletMiddleware - missing params");
+    let msgParams;
+    if (Array.isArray(req.params)) {
+      if (req.params.length !== 2) throw new Error(`WalletMiddleware - incorrect params for eth_signTypedData_v4. expected [address, typedData]`);
+      const [address, message] = req.params;
+      msgParams = {
+        from: address,
+        data: message
+      };
+    } else {
+      msgParams = req.params;
+    }
+    return processTypedMessageV4(msgParams, req);
+  }
+  async function personalSignHandler(p) {
+    if (!processPersonalMessage) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    let msgParams;
+    if (Array.isArray(req.params)) {
+      if (req.params.length < 2) throw new Error(`WalletMiddleware - incorrect params for personal_sign. expected [message, address]`);
+      const params = req.params;
+      if (typeof params[0] === "object" && params[0] !== null && "challenge" in params[0] && "address" in params[0]) {
+        const {
+          challenge,
+          address
+        } = params[0];
+        msgParams = {
+          from: address,
+          data: challenge
+        };
+      } else {
+        msgParams = {
+          from: params[1],
+          data: typeof params[0] === "string" ? params[0] : ""
+        };
+      }
+    } else {
+      var _req$params4;
+      msgParams = (_req$params4 = req.params) !== null && _req$params4 !== void 0 ? _req$params4 : {
+        from: "",
+        data: ""
+      };
+    }
+    return processPersonalMessage(msgParams, req);
+  }
+  async function ethPrivateKeyHandler(p) {
+    if (!getPrivateKey) throw rpcErrors.methodNotSupported();
+    return getPrivateKey(p.request);
+  }
+  async function ethPublicKeyHandler(p) {
+    if (!getPublicKey) throw rpcErrors.methodNotSupported();
+    return getPublicKey(p.request);
+  }
+  async function walletGetCapabilitiesHandler(p) {
+    var _req$params$3;
+    if (!processGetCapabilities) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    if (!req.params || !Array.isArray(req.params) || req.params.length < 2) throw rpcErrors.invalidParams("Invalid parameters");
+    const account = req.params[0];
+    if (!isHex(account)) throw rpcErrors.invalidParams("Invalid account address");
+    let chainIds = (_req$params$3 = req.params[1]) !== null && _req$params$3 !== void 0 ? _req$params$3 : [];
+    if (!Array.isArray(chainIds)) throw rpcErrors.invalidParams(`Invalid params, received: ${chainIds}. expected: Array`);
+    chainIds = chainIds.map(chainId => isHex(chainId) ? chainId : toHex(chainId));
+    const getCapabilitiesParams = [account, chainIds];
+    return processGetCapabilities(getCapabilitiesParams);
+  }
+  async function walletSendCallsHandler(p) {
+    if (!processSendCalls) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    const params = Array.isArray(req.params) ? req.params[0] : req.params;
+    if (!params || typeof params !== "object") throw rpcErrors.invalidParams("Missing or invalid params for wallet_sendCalls");
+    if (!params.version || typeof params.version !== "string") throw rpcErrors.invalidParams(`Invalid version: expected string, got "${params.version || "undefined"}"`);
+    if (!params.chainId) throw rpcErrors.invalidParams("Missing required field: chainId");
+    if (!Array.isArray(params.calls) || params.calls.length === 0) throw rpcErrors.invalidParams("calls must be a non-empty array");
+    const from = params.from;
+    if (from) await validateAndNormalizeKeyholder(from, req);
+    const walletSendCallsParams = _objectSpread(_objectSpread({}, params), {}, {
+      chainId: isHex(params.chainId) ? params.chainId : toHex(params.chainId)
+    });
+    return processSendCalls(walletSendCallsParams);
+  }
+  async function walletBatchCallStatusHandler(p) {
+    if (!processGetCallsStatus) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    const batchId = Array.isArray(req.params) ? req.params[0] : req.params;
+    if (!batchId || typeof batchId !== "string") throw rpcErrors.invalidParams("Missing or invalid batchId");
+    return processGetCallsStatus(batchId);
+  }
+  async function walletShowCallsStatusHandler(p) {
+    if (!processShowCallsStatus) throw rpcErrors.methodNotSupported();
+    const req = p.request;
+    const batchId = Array.isArray(req.params) ? req.params[0] : req.params;
+    if (!batchId || typeof batchId !== "string") throw rpcErrors.invalidParams("Missing or invalid batchId");
+    await processShowCallsStatus(batchId);
+    return true;
+  }
+  return createScaffoldMiddlewareV2({
+    // account lookups
+    eth_accounts: ethAccountsHandler,
+    eth_requestAccounts: ethAccountsHandler,
+    eth_private_key: ethPrivateKeyHandler,
+    eth_public_key: ethPublicKeyHandler,
+    public_key: ethPublicKeyHandler,
+    private_key: ethPrivateKeyHandler,
+    // tx signatures
+    eth_sendTransaction: ethSendTransactionHandler,
+    eth_signTransaction: ethSignTransactionHandler,
+    // message signatures
+    eth_sign: ethSignHandler,
+    eth_signTypedData_v4: ethSignTypedDataV4Handler,
+    personal_sign: personalSignHandler,
+    // EIP5792
+    wallet_getCapabilities: walletGetCapabilitiesHandler,
+    wallet_sendCalls: walletSendCallsHandler,
+    wallet_batchCallStatus: walletBatchCallStatusHandler,
+    wallet_showCallsStatus: walletShowCallsStatusHandler
+  });
+}
+
+export { createWalletMiddlewareV2 };

package/dist/lib.esm/providers/xrpl-provider/providers/privateKeyProviders/xrplPrivateKeyProvider.js

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { providerErrors, JRPCEngine, providerFromEngine, rpcErrors } from '@web3auth/auth';
+import { providerErrors, JRPCEngineV2, providerFromEngineV2, rpcErrors } from '@web3auth/auth';
 import { createXrplJsonRpcClient } from '../../rpc/JrpcClient.js';
 import { RPC_METHODS, createXRPLMiddleware, creatXrplChainSwitchMiddleware } from '../../rpc/xrplRpcMiddlewares.js';
 import { getProviderHandlers } from './xrplWalletUtils.js';
@@ -45,14 +45,14 @@ class XrplPrivateKeyProvider extends BaseProvider {
       keyExportEnabled: this.config.keyExportEnabled
     });
     const xrplWalletMiddleware = createXRPLMiddleware(providerHandlers);
-    const engine = new JRPCEngine();
     const {
       networkMiddleware
     } = createXrplJsonRpcClient(chain);
-    engine.push(this.getChainSwitchMiddleware());
-    engine.push(xrplWalletMiddleware);
-    engine.push(networkMiddleware);
-    const provider = providerFromEngine(engine);
+    const chainSwitchMiddleware = creatXrplChainSwitchMiddleware(params => this.switchChain(params));
+    const engine = JRPCEngineV2.create({
+      middleware: [chainSwitchMiddleware, xrplWalletMiddleware, networkMiddleware]
+    });
+    const provider = providerFromEngineV2(engine);
     this.updateProviderEngineProxy(provider);
     await this.lookupNetwork(privKey, chainId);
     this.emit("chainChanged", chainId);
@@ -94,17 +94,6 @@ class XrplPrivateKeyProvider extends BaseProvider {
       throw WalletInitializationError.rpcConnectionError(`Failed to ping network for following rpc target: ${chain.rpcTarget}`);
     }
   }
-  getChainSwitchMiddleware() {
-    const chainSwitchHandlers = {
-      switchChain: async req => {
-        if (!req.params) throw rpcErrors.invalidParams("Missing request params");
-        if (!req.params.chainId) throw rpcErrors.invalidParams("Missing chainId");
-        await this.switchChain(req.params);
-      }
-    };
-    const chainSwitchMiddleware = creatXrplChainSwitchMiddleware(chainSwitchHandlers);
-    return chainSwitchMiddleware;
-  }
 }
 _XrplPrivateKeyProvider = XrplPrivateKeyProvider;
 _defineProperty(XrplPrivateKeyProvider, "getProviderInstance", async params => {

package/dist/lib.esm/providers/xrpl-provider/providers/privateKeyProviders/xrplWalletUtils.js

@@ -1,3 +1,4 @@
+import { hexToBytes } from '@toruslabs/metadata-helpers';
 import { rpcErrors, providerErrors } from '@web3auth/auth';
 import { sign, generateSeed } from 'ripple-keypairs';
 import { Client, Wallet, deriveAddress } from 'xrpl';
@@ -5,7 +6,7 @@ import ECDSA from 'xrpl/dist/npm/ECDSA';
 
 const deriveKeypair = web3authKey => {
   const seed = generateSeed({
-    entropy: Buffer.from(web3authKey.padStart(64, "0"), "hex"),
+    entropy: hexToBytes(web3authKey.padStart(64, "0")),
     algorithm: "ecdsa-secp256k1"
   });
   const wallet = Wallet.fromSecret(seed, {

package/dist/lib.esm/providers/xrpl-provider/rpc/JrpcClient.js

@@ -1,43 +1,39 @@
 import { createFetchMiddleware } from '@toruslabs/base-controllers';
-import { mergeMiddleware } from '@web3auth/auth';
+import { JRPCEngineV2 } from '@web3auth/auth';
 import { RPC_METHODS } from './xrplRpcMiddlewares.js';
 
 function createXrplChainIdMiddleware(chainId) {
-  return (req, res, next, end) => {
-    if (req.method === RPC_METHODS.CHAIN_ID) {
-      res.result = chainId;
-      return end();
-    }
-    return next();
+  return ({
+    request,
+    next
+  }) => {
+    if (request.method === RPC_METHODS.CHAIN_ID) return chainId;
+    return next(request);
   };
 }
 function createXrplProviderConfigMiddleware(providerConfig) {
-  return (req, res, next, end) => {
-    if (req.method === RPC_METHODS.PROVIDER_CHAIN_CONFIG) {
-      res.result = providerConfig;
-      return end();
-    }
-    return next();
+  return ({
+    request,
+    next
+  }) => {
+    if (request.method === RPC_METHODS.PROVIDER_CHAIN_CONFIG) return providerConfig;
+    return next(request);
   };
 }
-function createConfigMiddleware(providerConfig) {
-  const {
-    chainId
-  } = providerConfig;
-  return mergeMiddleware([createXrplChainIdMiddleware(chainId), createXrplProviderConfigMiddleware(providerConfig)]);
-}
 function createXrplJsonRpcClient(providerConfig) {
   const {
+    chainId,
     rpcTarget
   } = providerConfig;
-  const fetchMiddleware = createFetchMiddleware({
-    rpcTarget
+  const engine = JRPCEngineV2.create({
+    middleware: [createXrplChainIdMiddleware(chainId), createXrplProviderConfigMiddleware(providerConfig), createFetchMiddleware({
+      rpcTarget
+    })]
   });
-  const networkMiddleware = mergeMiddleware([createConfigMiddleware(providerConfig), fetchMiddleware]);
+  const networkMiddleware = engine.asMiddleware();
   return {
-    networkMiddleware,
-    fetchMiddleware
+    networkMiddleware
   };
 }
 
-export { createConfigMiddleware, createXrplChainIdMiddleware, createXrplJsonRpcClient, createXrplProviderConfigMiddleware };
+export { createXrplJsonRpcClient };

package/dist/lib.esm/providers/xrpl-provider/rpc/xrplRpcMiddlewares.js

@@ -1,5 +1,5 @@
 import { randomId } from '@toruslabs/base-controllers';
-import { mergeMiddleware, createAsyncMiddleware } from '@web3auth/auth';
+import { createScaffoldMiddlewareV2, JRPCEngineV2, rpcErrors } from '@web3auth/auth';
 
 const RPC_METHODS = {
   GET_ACCOUNTS: "xrpl_getAccounts",
@@ -12,36 +12,15 @@ const RPC_METHODS = {
   CHAIN_ID: "xrpl_chainId",
   PROVIDER_CHAIN_CONFIG: "xrpl_providerChainConfig"
 };
-function createGetAccountsMiddleware({
-  getAccounts
-}) {
-  return createAsyncMiddleware(async (request, response, next) => {
-    const {
-      method
-    } = request;
-
-    // hack to override big ids from fetch middleware which are not supported in xrpl servers
-    // TODO: fix this for xrpl controllers.
+/** Normalizes request.id for XRPL servers that don't support large IDs from fetch middleware. */
+function createRequestIdNormalizerMiddleware() {
+  return ({
+    request,
+    next
+  }) => {
     request.id = randomId();
-    if (method !== RPC_METHODS.GET_ACCOUNTS) return next();
-    if (!getAccounts) throw new Error("WalletMiddleware - opts.getAccounts not provided");
-    // This calls from the prefs controller
-    const accounts = await getAccounts(request);
-    response.result = accounts;
-    return undefined;
-  });
-}
-function createGenericJRPCMiddleware(targetMethod, handler) {
-  return createAsyncMiddleware(async (request, response, next) => {
-    const {
-      method
-    } = request;
-    if (method !== targetMethod) return next();
-    if (!handler) throw new Error(`WalletMiddleware - ${targetMethod} not provided`);
-    const result = await handler(request);
-    response.result = result;
-    return undefined;
-  });
+    return next(request);
+  };
 }
 function createXRPLMiddleware(providerHandlers) {
   const {
@@ -52,14 +31,45 @@ function createXRPLMiddleware(providerHandlers) {
     getKeyPair,
     getPublicKey
   } = providerHandlers;
-  return mergeMiddleware([createGetAccountsMiddleware({
-    getAccounts
-  }), createGenericJRPCMiddleware(RPC_METHODS.SIGN_TRANSACTION, signTransaction), createGenericJRPCMiddleware(RPC_METHODS.SUBMIT_TRANSACTION, submitTransaction), createGenericJRPCMiddleware(RPC_METHODS.SIGN_MESSAGE, signMessage), createGenericJRPCMiddleware(RPC_METHODS.GET_KEY_PAIR, getKeyPair), createGenericJRPCMiddleware(RPC_METHODS.GET_PUBLIC_KEY, getPublicKey)]);
+  const scaffold = createScaffoldMiddlewareV2({
+    [RPC_METHODS.GET_ACCOUNTS]: params => {
+      if (!getAccounts) throw new Error("WalletMiddleware - opts.getAccounts not provided");
+      return getAccounts(params.request);
+    },
+    [RPC_METHODS.SIGN_TRANSACTION]: params => {
+      return signTransaction(params.request);
+    },
+    [RPC_METHODS.SUBMIT_TRANSACTION]: params => {
+      return submitTransaction(params.request);
+    },
+    [RPC_METHODS.SIGN_MESSAGE]: params => {
+      return signMessage(params.request);
+    },
+    [RPC_METHODS.GET_KEY_PAIR]: params => {
+      return getKeyPair(params.request);
+    },
+    [RPC_METHODS.GET_PUBLIC_KEY]: params => {
+      return getPublicKey(params.request);
+    }
+  });
+  const engine = JRPCEngineV2.create({
+    middleware: [createRequestIdNormalizerMiddleware(), scaffold]
+  });
+  return engine.asMiddleware();
 }
-function creatXrplChainSwitchMiddleware({
-  switchChain
-}) {
-  return mergeMiddleware([createGenericJRPCMiddleware(RPC_METHODS.SWITCH_CHAIN, switchChain)]);
+function creatXrplChainSwitchMiddleware(switchChain) {
+  async function switchChainHandler(params) {
+    const req = params.request;
+    if (!req.params) throw rpcErrors.invalidParams("Missing request params");
+    if (!req.params.chainId) throw rpcErrors.invalidParams("Missing chainId");
+    await switchChain({
+      chainId: req.params.chainId
+    });
+    return undefined;
+  }
+  return createScaffoldMiddlewareV2({
+    [RPC_METHODS.SWITCH_CHAIN]: switchChainHandler
+  });
 }
 
-export { RPC_METHODS, creatXrplChainSwitchMiddleware, createGenericJRPCMiddleware, createGetAccountsMiddleware, createXRPLMiddleware };
+export { RPC_METHODS, creatXrplChainSwitchMiddleware, createXRPLMiddleware };

package/dist/lib.esm/react/context/WalletServicesInnerContext.js

@@ -1,6 +1,5 @@
-import { createContext, useContext, useState, useEffect, useMemo, createElement } from 'react';
-import { EVM_PLUGINS, PLUGIN_EVENTS } from '../../base/plugin/IPlugin.js';
-import { CONNECTOR_STATUS } from '../../base/connector/constants.js';
+import { createContext, useContext, createElement } from 'react';
+import { useWalletServicesContextValue } from './useWalletServicesContextValue.js';
 
 const WalletServicesContext = createContext(null);
 function WalletServicesContextProvider({
@@ -8,60 +7,7 @@ function WalletServicesContextProvider({
   context
 }) {
   const web3AuthContext = useContext(context);
-  const {
-    getPlugin,
-    isInitialized,
-    isConnected
-  } = web3AuthContext;
-  const [ready, setReady] = useState(false);
-  const [connecting, setConnecting] = useState(false);
-  const [walletServicesPlugin, setWalletServicesPlugin] = useState(null);
-  useEffect(() => {
-    if (isInitialized) {
-      const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
-      setWalletServicesPlugin(plugin);
-    }
-  }, [isInitialized, getPlugin]);
-  useEffect(() => {
-    if (isConnected) {
-      const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
-      setWalletServicesPlugin(plugin);
-      // when rehydrating, the connectedListener may be registered after the connected event is emitted, we need to check the status here
-      if ((plugin === null || plugin === void 0 ? void 0 : plugin.status) === CONNECTOR_STATUS.CONNECTED) setReady(true);
-    }
-  }, [isConnected, getPlugin, walletServicesPlugin]);
-  useEffect(() => {
-    const connectedListener = () => {
-      setReady(true);
-      setConnecting(false);
-    };
-    const disconnectedListener = () => {
-      setReady(false);
-      setConnecting(false);
-    };
-    const connectingListener = () => {
-      setConnecting(true);
-    };
-    if (walletServicesPlugin) {
-      walletServicesPlugin.on(PLUGIN_EVENTS.CONNECTED, connectedListener);
-      walletServicesPlugin.on(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-      walletServicesPlugin.on(PLUGIN_EVENTS.CONNECTING, connectingListener);
-    }
-    return () => {
-      if (walletServicesPlugin) {
-        walletServicesPlugin.removeListener(PLUGIN_EVENTS.CONNECTED, connectedListener);
-        walletServicesPlugin.removeListener(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        walletServicesPlugin.removeListener(PLUGIN_EVENTS.CONNECTING, connectingListener);
-      }
-    };
-  }, [walletServicesPlugin]);
-  const value = useMemo(() => {
-    return {
-      plugin: walletServicesPlugin,
-      ready,
-      connecting
-    };
-  }, [walletServicesPlugin, ready, connecting]);
+  const value = useWalletServicesContextValue(web3AuthContext);
   return createElement(WalletServicesContext.Provider, {
     value
   }, children);