Merge branch 'feat/sdk-v10-aa' into feat/sdk-v10

Author: tanguyenvn

demo/vite-react-app/src/services/web3auth.tsx

@@ -1,4 +1,4 @@
-import { AccountAbstractionProvider, CONNECTOR_EVENTS, IProvider, PLUGIN_EVENTS, SafeSmartAccount, WalletServicesPlugin, Web3Auth, WEB3AUTH_NETWORK_TYPE } from "@web3auth/modal";
+import { CONNECTOR_EVENTS, IProvider, PLUGIN_EVENTS, WalletServicesPlugin, Web3Auth, WEB3AUTH_NETWORK_TYPE, SMART_ACCOUNT } from "@web3auth/modal";
 import { createContext, FunctionComponent, ReactNode, useContext, useEffect, useState } from "react";
 import { CHAIN_CONFIG, CHAIN_CONFIG_TYPE } from "../config/chainConfig";
 import * as ethHandler from "./ethHandler";
@@ -113,26 +113,22 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
     async function init() {
       try {
         const currentChainConfig = CHAIN_CONFIG[chain];
-        const accountAbstractionProvider = new AccountAbstractionProvider({
-          config: {
-            chainConfig: currentChainConfig,
-            bundlerConfig: {
-              url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
-            },
-            smartAccountInit: new SafeSmartAccount(),
-            paymasterConfig: {
-              url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
-            },
-          },
-        });
         setIsLoading(true);
         const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
 
         const web3AuthInstance = new Web3Auth({
           // get your client id from https://dashboard.web3auth.io
           clientId,
           web3AuthNetwork,
-          accountAbstractionProvider,
+          accountAbstractionConfig: {
+            smartAccountType: SMART_ACCOUNT.SAFE,
+            bundlerConfig: {
+              url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
+            },
+            paymasterConfig: {
+              url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
+            },
+          },
           chains: [currentChainConfig],
           uiConfig: {
             uxMode: "redirect",

demo/vue-app-new/package-lock.json

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 
-import { AccountAbstractionProvider, ConnectorFn, CHAIN_NAMESPACES, ChainNamespaceType, coinbaseConnector, IBaseProvider, IProvider, ISmartAccount, KernelSmartAccount, NexusSmartAccount, NFTCheckoutPlugin, SafeSmartAccount, storageAvailable, TrustSmartAccount, WALLET_CONNECTORS, walletConnectV2Connector, WalletServicesPlugin, type Web3AuthOptions } from "@web3auth/modal";
+import { CHAIN_NAMESPACES, ChainNamespaceType, coinbaseConnector, ConnectorFn, NFTCheckoutPlugin, storageAvailable, WALLET_CONNECTORS, walletConnectV2Connector, WalletServicesPlugin, type Web3AuthOptions } from "@web3auth/modal";
 import { Web3AuthContextConfig, Web3AuthProvider } from "@web3auth/modal/vue";
 import { WalletServicesProvider } from "@web3auth/no-modal/vue";
 import { computed, onBeforeMount, ref, watch } from "vue";
 
-import { SMART_ACCOUNT } from "@toruslabs/ethereum-controllers";
 import AppDashboard from "./components/AppDashboard.vue";
 import AppHeader from "./components/AppHeader.vue";
 import AppSettings from "./components/AppSettings.vue";
@@ -25,103 +24,34 @@ const chainOptions = computed(() =>
 
 const showAAProviderSettings = computed(() => formData.chainNamespace === CHAIN_NAMESPACES.EIP155);
 
-const accountAbstractionProvider = computed((): IBaseProvider<IProvider> | undefined => {
-  const { useAccountAbstractionProvider } = formData;
-  if (!showAAProviderSettings.value || !useAccountAbstractionProvider) return undefined;
-
-  // only need to setup AA provider for external wallets, for embedded wallet, we'll use WS which already supports AA
-  if (!formData.useAAWithExternalWallet) return undefined;
-
-  const chainConfig = chainConfigs[formData.chainNamespace as ChainNamespaceType].find((x) => x.chainId === formData.chain)!;
-  // setup aa provider
-  let smartAccountInit: ISmartAccount;
-  switch (formData.smartAccountType) {
-    case "nexus":
-      smartAccountInit = new NexusSmartAccount();
-      break;
-    case "kernel":
-      smartAccountInit = new KernelSmartAccount();
-      break;
-    case "trust":
-      smartAccountInit = new TrustSmartAccount();
-      break;
-    // case "light":
-    //   smartAccountInit = new LightSmartAccount();
-    //   break;
-    // case "simple":
-    //   smartAccountInit = new SimpleSmartAccount();
-    //   break;
-    case "safe":
-    default:
-      smartAccountInit = new SafeSmartAccount();
-      break;
-  }
-
-  return new AccountAbstractionProvider({
-    config: {
-      bundlerConfig: { url: formData.bundlerUrl ?? getDefaultBundlerUrl(chainConfig.chainId) },
-      paymasterConfig: formData.paymasterUrl
-        ? {
-          url: formData.paymasterUrl,
-        }
-        : undefined,
-      smartAccountInit,
-    },
-  });
-});
-
 // Options for reinitializing the web3Auth object
 const options = computed((): Web3AuthOptions => {
   const { config: whiteLabel, enable: enabledWhiteLabel } = formData.whiteLabel;
   const chainConfig = chainConfigs[formData.chainNamespace as ChainNamespaceType].find((x) => x.chainId === formData.chain)!;
 
   // Account Abstraction
   const { useAccountAbstractionProvider } = formData;
-  let accountAbstractionConfig = undefined;
+  let accountAbstractionConfig: Web3AuthOptions["accountAbstractionConfig"];
   if (showAAProviderSettings.value && useAccountAbstractionProvider) {
-    let smartAccountType = ""
-    let smartAccountConfig = undefined;
-    switch (formData.smartAccountType) {
-      case "nexus":
-        smartAccountType = SMART_ACCOUNT.NEXUS;
-        break;
-      case "kernel":
-        smartAccountType = SMART_ACCOUNT.KERNEL;
-        break;
-      case "trust":
-        smartAccountType = SMART_ACCOUNT.TRUST;
-        break;
-      // case "light":
-      //   smartAccountInit = new LightSmartAccount();
-      //   break;
-      // case "simple":
-      //   smartAccountInit = new SimpleSmartAccount();
-      //   break;
-      case "safe":
-      default:
-        smartAccountType = SMART_ACCOUNT.SAFE;
-        break;
-    }
     accountAbstractionConfig = {
-      smartAccountType,
-      paymasterConfig: formData.paymasterUrl ? { url: formData.paymasterUrl } : undefined,
+      smartAccountType: formData.smartAccountType as string,
+      smartAccountConfig: undefined,
       bundlerConfig: { url: formData.bundlerUrl ?? getDefaultBundlerUrl(chainConfig.chainId) },
-      smartAccountConfig,
+      paymasterConfig: formData.paymasterUrl ? { url: formData.paymasterUrl } : undefined,
     }
   }
 
   // Wallet services settings
-  let walletServicesSettings: Web3AuthOptions["walletServicesSettings"];
+  let walletServicesConfig: Web3AuthOptions["walletServicesConfig"];
   const uiConfig = enabledWhiteLabel ? { ...whiteLabel } : undefined;
   if (formData.walletPlugin.enable) {
     const { confirmationStrategy } = formData.walletPlugin;
-    walletServicesSettings = {
+    walletServicesConfig = {
       whiteLabel: {
         ...uiConfig,
         showWidgetButton: true,
       },
       confirmationStrategy,
-      accountAbstractionConfig,
     };
   }
 
@@ -130,7 +60,7 @@ const options = computed((): Web3AuthOptions => {
     clientId: clientIds[formData.network],
     web3AuthNetwork: formData.network,
     uiConfig,
-    accountAbstractionProvider: accountAbstractionProvider.value,
+    accountAbstractionConfig,
     useAAWithExternalWallet: formData.useAAWithExternalWallet,
     // TODO: Add more options
     // chainConfig?: CustomChainConfig;
@@ -143,7 +73,7 @@ const options = computed((): Web3AuthOptions => {
     enableLogging: true,
     connectors: externalConnectors.value,
     multiInjectedProviderDiscovery: formData.multiInjectedProviderDiscovery,
-    walletServicesSettings,
+    walletServicesConfig,
   };
 });
 

demo/vue-app-new/src/MainView.vue

@@ -162,9 +162,10 @@ export const defaultLoginMethod: Record<LOGIN_PROVIDER_TYPE, FormConfigSettings>
   {} as Record<LOGIN_PROVIDER_TYPE, FormConfigSettings>
 );
 
-export type SmartAccountType = "safe" | "kernel" | "nexus" | "trust";
+export type SmartAccountType = "biconomy" | "safe" | "nexus" | "kernel" | "trust";
 
 export const SmartAccountOptions: { name: string; value: SmartAccountType }[] = [
+  { name: "Biconomy", value: "biconomy" },
   { name: "Safe", value: "safe" },
   { name: "Nexus", value: "nexus" },
   { name: "Kernel", value: "kernel" },

demo/vue-app-new/src/config.ts

@@ -11,7 +11,7 @@ const ethWeb3AuthOptions: Web3AuthOptions = {
   clientId: clientIds["mainnet"],
   web3AuthNetwork: "mainnet",
   multiInjectedProviderDiscovery: true,
-  connectors: [walletConnectV2Connector({ projectId: "d3c63f19f9582f8ba48e982057eb096b" }), coinbaseConnector()]
+  connectors: [walletConnectV2Connector({ projectId: "d3c63f19f9582f8ba48e982057eb096b" }), coinbaseConnector()],
 };
 const web3auth = new Web3Auth(ethWeb3AuthOptions);