Merge pull request #2184 from Web3Auth/feat/analytics

add analytics using Segment

Author: chaitanyapotti

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

@@ -12,8 +12,6 @@ import {
   walletServicesPlugin,
   type AccountAbstractionMultiChainConfig,
   type Web3AuthOptions,
-  WALLET_CONNECTOR_TYPE,
-  ModalConfig,
 } from "@web3auth/modal";
 
 import { type Web3AuthContextConfig, Web3AuthProvider } from "@web3auth/modal/vue";

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

@@ -23,7 +23,7 @@ import { ProviderConfig } from "@toruslabs/base-controllers";
 import { SUPPORTED_NETWORKS } from "@toruslabs/ethereum-controllers";
 import { computed, ref, watch } from "vue";
 import { NFT_CHECKOUT_CONTRACT_ID } from "../config";
-import { getPrivateKey, sendEth, signTransaction as signEthTransaction } from "../services/ethHandlers";
+import { getPrivateKey, sendEth, sendEthWithSmartAccount, signTransaction as signEthTransaction } from "../services/ethHandlers";
 import { getBalance as getSolBalance, getPrivateKey as getSolPrivateKey, signAllTransactions } from "../services/solHandlers";
 import { formDataStore } from "../store/form";
 import { SOLANA_SUPPORTED_NETWORKS } from "../utils/constants";
@@ -237,6 +237,14 @@ const onSignPersonalMsg = async () => {
   printToConsole("result", result);
 };
 
+const isSmartAccount = computed(() => {
+  return web3Auth.value?.accountAbstractionProvider?.smartAccount && web3Auth.value?.accountAbstractionProvider?.bundlerClient;
+});
+
+const onSendAATx = async () => {
+  await sendEthWithSmartAccount(web3Auth.value, printToConsole);
+};
+
 // Solana
 const onGetSolPrivateKey = async () => {
   await getSolPrivateKey(provider.value as IProvider, printToConsole);
@@ -438,6 +446,7 @@ const onSwitchChainNamespace = async () => {
             {{ t("app.buttons.btnSwitchChainNamespace") }} to Solana
           </Button>
           <Button block size="xs" pill class="mb-2" @click="onSendEth">{{ t("app.buttons.btnSendEth") }}</Button>
+          <Button v-if="isSmartAccount" block size="xs" pill class="mb-2" @click="onSendAATx">{{ t("app.buttons.btnSendAATx") }}</Button>
           <Button block size="xs" pill class="mb-2" @click="onSignEthTransaction">
             {{ t("app.buttons.btnSignTransaction") }}
           </Button>

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

@@ -1,4 +1,4 @@
-import { IProvider, log } from "@web3auth/modal";
+import { IProvider, log, type Web3Auth } from "@web3auth/modal";
 import { verifyMessage as eipVerifyMessage } from "@web3auth/sign-in-with-ethereum";
 import { EVM_METHOD_TYPES } from "@web3auth/ws-embed";
 import { BrowserProvider, parseEther, Transaction } from "ethers";
@@ -24,6 +24,31 @@ export const sendEth = async (provider: IProvider, uiConsole: (name: string, val
   }
 };
 
+export const sendEthWithSmartAccount = async (web3Auth: Web3Auth | null, uiConsole: (name: string, value: unknown) => void) => {
+  const { smartAccount, bundlerClient } = web3Auth?.accountAbstractionProvider || {};
+  if (!smartAccount || !bundlerClient) {
+    throw new Error("Smart account or bundler client not found");
+  }
+
+  try {
+    const hash = await bundlerClient.sendUserOperation({
+      account: smartAccount,
+      calls: [
+        {
+          to: smartAccount.address,
+          value: parseEther("0.00001"),
+        },
+      ],
+    });
+
+    const { success, userOpHash, reason, receipt } = await bundlerClient.waitForUserOperationReceipt({ hash });
+    uiConsole("result", { userOpHash, txHash: receipt.transactionHash, txStatus: receipt.status, userOpSuccess: success, userOpReason: reason });
+  } catch (error) {
+    log.error("error", error);
+    uiConsole("error", error instanceof Error ? error.message : error);
+  }
+};
+
 export const signEthMessage = async (provider: IProvider, uiConsole: (name: string, value: unknown) => void) => {
   try {
     const ethProvider = new BrowserProvider(provider);

demo/vue-app-new/src/services/ethHandlers.ts

@@ -63,6 +63,7 @@
       "btnGetPrivateKey": "Get Private Key",
       "btnGetBalance": "Get Balance",
       "btnSendEth": "Send ETH",
+      "btnSendAATx": "Send ETH with Smart Account",
       "btnSignEthMessage": "Sign ETH Message",
       "btnGetConnectedChainId": "Get Connected Chain ID",
       "btnAddChain": "Add Chain",