allow config confirmation strategy

Author: lionellbriones

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

@@ -36,7 +36,7 @@ const externalAdapters = ref<IAdapter<unknown>[]>([]);
 
 const walletPlugins = computed(() => {
   if (formData.chainNamespace !== CHAIN_NAMESPACES.EIP155 || !formData.walletPlugin.enable) return [];
-  const { logoDark, logoLight } = formData.walletPlugin;
+  const { logoDark, logoLight, confirmationStrategy } = formData.walletPlugin;
   const walletServicesPlugin = new WalletServicesPlugin({
     walletInitOptions: {
       whiteLabel: { showWidgetButton: true, logoDark: logoDark || "logo", logoLight: logoLight || "logo" },
@@ -46,6 +46,7 @@ const walletPlugins = computed(() => {
           logLevel: "debug",
         },
       },
+      confirmationStrategy,
     },
   });
   return [walletServicesPlugin];

demo/vue-app-new/src/components/AppSettings.vue

@@ -4,7 +4,15 @@ import { ADAPTER_STATUS, CHAIN_NAMESPACES, ChainNamespaceType, log } from "@web3
 import { useWeb3Auth } from "@web3auth/modal-vue-composables";
 import { computed, InputHTMLAttributes, ref } from "vue";
 
-import { chainConfigs, chainNamespaceOptions, languageOptions, loginProviderOptions, networkOptions, SmartAccountOptions } from "../config";
+import {
+  chainConfigs,
+  chainNamespaceOptions,
+  confirmationStrategyOptions,
+  languageOptions,
+  loginProviderOptions,
+  networkOptions,
+  SmartAccountOptions,
+} from "../config";
 import { formDataStore } from "../store/form";
 
 const formData = formDataStore;
@@ -350,6 +358,15 @@ const onChainNamespaceChange = (value: string) => {
           :placeholder="$t('app.walletPlugin.logoDark')"
           class="sm:col-span-2"
         />
+        <Select
+          v-model="formData.walletPlugin.confirmationStrategy"
+          data-testid="selectLoginProviders"
+          :label="$t('app.walletPlugin.confirmationStrategy')"
+          :aria-label="$t('app.walletPlugin.confirmationStrategy')"
+          :placeholder="$t('app.walletPlugin.confirmationStrategy')"
+          :options="confirmationStrategyOptions"
+          class=""
+        />
       </Card>
       <Card v-if="isActiveTab(4)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
         <Toggle

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

@@ -1,6 +1,7 @@
 import { LANGUAGE_TYPE, LANGUAGES, LOGIN_PROVIDER, LOGIN_PROVIDER_TYPE, WhiteLabelData } from "@web3auth/auth";
 import { CHAIN_NAMESPACES, ChainNamespaceType, CustomChainConfig, WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE } from "@web3auth/base";
 import { SignTypedDataMessageV4 } from "@web3auth/ethereum-provider";
+import { CONFIRMATION_STRATEGY, CONFIRMATION_STRATEGY_TYPE } from "@web3auth/wallet-services-plugin";
 
 import { FormConfigSettings } from "./interfaces";
 
@@ -184,6 +185,7 @@ export type FormData = {
     enable: boolean;
     logoDark: string;
     logoLight: string;
+    confirmationStrategy: Exclude<CONFIRMATION_STRATEGY_TYPE, "popup">;
   };
   useAccountAbstractionProvider: boolean;
   useAAWithExternalWallet?: boolean;
@@ -240,3 +242,9 @@ export const getV4TypedData = (chainId: string): SignTypedDataMessageV4 => ({
     contents: "Hello, Bob!",
   },
 });
+
+export const confirmationStrategyOptions: { name: string; value: string }[] = [
+  { name: "Modal", value: CONFIRMATION_STRATEGY.MODAL },
+  { name: "Auto Approve", value: CONFIRMATION_STRATEGY.AUTO_APPROVE },
+  { name: "Default", value: CONFIRMATION_STRATEGY.DEFAULT },
+];

demo/vue-app-new/src/translations/en.json

@@ -14,7 +14,8 @@
     "walletPlugin": {
       "title": "Wallet Service Plugin",
       "logoLight": "Logo Light",
-      "logoDark": "Logo Dark"
+      "logoDark": "Logo Dark",
+      "confirmationStrategy": "Confirmation Strategy"
     },
     "accountAbstractionProvider": {
       "title": "Account Abstraction Provider",
@@ -49,7 +50,6 @@
       "sessionTime": "Session Time"
     },
     "chainNamespace": "Chain namespace",
-
     "w3aStatus": "Web3Auth status ::::: {status}",
     "isConnected": "Is connected ::::: {isConnected}",
     "isInitialized": "Is initialized ::::: {isInitialized}",