From 80638f9410d4a88c4138f14e1b4f397aa849630d Mon Sep 17 00:00:00 2001
From: Yashovardhan Agrawal <21066442+yashovardhan@users.noreply.github.com>
Date: Wed, 21 Aug 2024 12:23:26 +0530
Subject: [PATCH] Update sfa vue qs

---
 .../sfa-vue-quick-start/package.json          |  13 +-
 .../sfa-vue-quick-start/src/App.vue           |   2 +-
 .../sfa-vue-quick-start/src/Home.vue          |  77 ++++++-----
 .../sfa-vue-quick-start/src/ethersRPC.ts      |  95 +++++++++++++
 .../sfa-vue-quick-start/src/viemRPC.ts        | 130 ++++++++++++++++++
 .../sfa-vue-quick-start/src/web3RPC.ts        | 107 ++++++++++++++
 6 files changed, 382 insertions(+), 42 deletions(-)
 create mode 100644 single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/ethersRPC.ts
 create mode 100644 single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/viemRPC.ts
 create mode 100644 single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/web3RPC.ts

diff --git a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/package.json b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/package.json
index 24848850..6b0fe012 100644
--- a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/package.json
+++ b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/package.json
@@ -12,10 +12,13 @@
     "@web3auth/base": "^9.0.0",
     "@web3auth/ethereum-provider": "^9.0.0",
     "@web3auth/single-factor-auth": "^9.0.0",
-    "core-js": "^3.26.1",
-    "firebase": "^10.4.0",
-    "vue": "^3.3.4",
-    "web3": "^4.2.2"
+    "@babel/plugin-transform-private-methods": "^7.24.7",
+    "core-js": "^3.38.1",
+    "ethers": "^6.13.2",
+    "firebase": "^10.13.0",
+    "viem": "^2.19.8",
+    "vue": "^3.4.38",
+    "web3": "^4.11.1"
   },
   "//IMP END": "IMP END - Web3Auth Installation",
   "devDependencies": {
@@ -31,6 +34,6 @@
     "@vue/eslint-config-typescript": "^11.0.2",
     "eslint": "^8.29.0",
     "eslint-plugin-vue": "^9.8.0",
-    "typescript": "~4.9.4"
+    "typescript": "~5.5.4"
   }
 }
diff --git a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/App.vue b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/App.vue
index 4cddc672..1f006766 100644
--- a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/App.vue
+++ b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <Home />
+  <Home msg="Welcome to Your Vue.js + TypeScript App" />
 </template>
 
 <script lang="ts">
diff --git a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/Home.vue b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/Home.vue
index 4ef8afe9..aebaf919 100644
--- a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/Home.vue
+++ b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/Home.vue
@@ -21,16 +21,25 @@
         <div id="console">
           <h3>Console Output:</h3>
           <pre></pre>
+          <div>
+            <button class="card" @click="getAccounts" style="cursor: pointer">Get Accounts</button>
+          </div>
+          <div>
+            <button class="card" @click="getBalance" style="cursor: pointer">Get Balance</button>
+          </div>
+          <div>
+            <button class="card" @click="signMessage" style="cursor: pointer">Sign Message</button>
+          </div>
+          <div>
+            <button class="card" @click="logout" style="cursor: pointer">Logout</button>
+          </div>
         </div>
       </div>
     </main>
 
     <footer>
-      <a
-        href="https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-vue-quick-start"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <a href="https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/quick-starts/sfa-vue-quick-start"
+        target="_blank" rel="noopener noreferrer">
         Source code
       </a>
     </footer>
@@ -44,7 +53,11 @@ import { Web3Auth, decodeToken } from "@web3auth/single-factor-auth";
 import { CHAIN_NAMESPACES, IProvider, ADAPTER_EVENTS, WEB3AUTH_NETWORK } from "@web3auth/base";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 // IMP END - Quick Start
-import Web3 from "web3";
+// IMP START - Blockchain Calls
+import RPC from "./ethersRPC";
+// import RPC from "./viemRPC";
+// import RPC from "./web3RPC";
+// IMP END - Blockchain Calls
 
 // Firebase libraries for custom authentication
 import { initializeApp } from "firebase/app";
@@ -69,15 +82,20 @@ export default {
     const verifier = "w3a-firebase-demo";
     // IMP END - Verifier Creation
 
+    // IMP START - Chain Config
     const chainConfig = {
       chainNamespace: CHAIN_NAMESPACES.EIP155,
-      chainId: "0x1", // Please use 0x1 for Mainnet
-      rpcTarget: "https://rpc.ankr.com/eth",
-      displayName: "Ethereum Mainnet",
-      blockExplorer: "https://etherscan.io/",
+      chainId: "0xaa36a7",
+      rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+      // Avoid using public rpcTarget in production.
+      // Use services like Infura, Quicknode etc
+      displayName: "Ethereum Sepolia Testnet",
+      blockExplorerUrl: "https://sepolia.etherscan.io",
       ticker: "ETH",
       tickerName: "Ethereum",
+      logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
     };
+    // IMP END - Chain Config
 
     const privateKeyProvider = new EthereumPrivateKeyProvider({
       config: { chainConfig },
@@ -189,10 +207,7 @@ export default {
         uiConsole("provider not initialized yet");
         return;
       }
-      const web3 = new Web3(provider as any);
-
-      // Get user's Ethereum public address
-      const address = await web3.eth.getAccounts();
+      const address = await RPC.getAccounts(provider);
       uiConsole(address);
     };
 
@@ -201,16 +216,7 @@ export default {
         uiConsole("provider not initialized yet");
         return;
       }
-      const web3 = new Web3(provider as any);
-
-      // Get user's Ethereum public address
-      const address = (await web3.eth.getAccounts())[0];
-
-      // Get user's balance in ether
-      const balance = web3.utils.fromWei(
-        await web3.eth.getBalance(address), // Balance is in wei
-        "ether"
-      );
+      const balance = await RPC.getBalance(provider);
       uiConsole(balance);
     };
 
@@ -219,20 +225,19 @@ export default {
         uiConsole("provider not initialized yet");
         return;
       }
-      const web3 = new Web3(provider as any);
-
-      // Get user's Ethereum public address
-      const fromAddress = (await web3.eth.getAccounts())[0];
+      const signedMessage = await RPC.signMessage(provider);
+      uiConsole(signedMessage);
+    };
 
-      const originalMessage = "YOUR_MESSAGE";
 
-      // Sign the message
-      const signedMessage = await web3.eth.personal.sign(
-        originalMessage,
-        fromAddress,
-        "test password!" // configure your own password here.
-      );
-      uiConsole(signedMessage);
+    const sendTransaction = async () => {
+      if (!provider) {
+        uiConsole("provider not initialized yet");
+        return;
+      }
+      uiConsole("Sending Transaction...");
+      const transactionReceipt = await RPC.sendTransaction(provider);
+      uiConsole(transactionReceipt);
     };
     // IMP END - Blockchain Calls
 
diff --git a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/ethersRPC.ts b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/ethersRPC.ts
new file mode 100644
index 00000000..40511864
--- /dev/null
+++ b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/ethersRPC.ts
@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { IProvider } from "@web3auth/base";
+import { ethers } from "ethers";
+
+const getChainId = async (provider: IProvider): Promise<any> => {
+  try {
+    const ethersProvider = new ethers.BrowserProvider(provider);
+    // Get the connected Chain's ID
+    const networkDetails = await ethersProvider.getNetwork();
+    return networkDetails.chainId.toString();
+  } catch (error) {
+    return error;
+  }
+};
+
+const getAccounts = async (provider: IProvider): Promise<any> => {
+  try {
+    const ethersProvider = new ethers.BrowserProvider(provider);
+    const signer = await ethersProvider.getSigner();
+
+    // Get user's Ethereum public address
+    const address = signer.getAddress();
+
+    return await address;
+  } catch (error) {
+    return error;
+  }
+};
+
+const getBalance = async (provider: IProvider): Promise<string> => {
+  try {
+    const ethersProvider = new ethers.BrowserProvider(provider);
+    const signer = await ethersProvider.getSigner();
+
+    // Get user's Ethereum public address
+    const address = signer.getAddress();
+
+    // Get user's balance in ether
+    const balance = ethers.formatEther(
+      await ethersProvider.getBalance(address) // Balance is in wei
+    );
+
+    return balance;
+  } catch (error) {
+    return error as string;
+  }
+};
+
+const sendTransaction = async (provider: IProvider): Promise<any> => {
+  try {
+    const ethersProvider = new ethers.BrowserProvider(provider);
+    const signer = await ethersProvider.getSigner();
+
+    const destination = "0x40e1c367Eca34250cAF1bc8330E9EddfD403fC56";
+
+    const amount = ethers.parseEther("0.001");
+
+    // Submit transaction to the blockchain
+    const tx = await signer.sendTransaction({
+      to: destination,
+      value: amount,
+      maxPriorityFeePerGas: "5000000000", // Max priority fee per gas
+      maxFeePerGas: "6000000000000", // Max fee per gas
+    });
+
+    // Wait for transaction to be mined
+    const receipt = await tx.wait();
+
+    return receipt;
+  } catch (error) {
+    return error as string;
+  }
+};
+
+const signMessage = async (provider: IProvider): Promise<any> => {
+  try {
+    // For ethers v5
+    // const ethersProvider = new ethers.providers.Web3Provider(provider);
+    const ethersProvider = new ethers.BrowserProvider(provider);
+
+    // For ethers v5
+    // const signer = ethersProvider.getSigner();
+    const signer = await ethersProvider.getSigner();
+    const originalMessage = "YOUR_MESSAGE";
+
+    // Sign the message
+    const signedMessage = await signer.signMessage(originalMessage);
+
+    return signedMessage;
+  } catch (error) {
+    return error as string;
+  }
+};
+
+export default { getChainId, getAccounts, getBalance, sendTransaction, signMessage };
diff --git a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/viemRPC.ts b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/viemRPC.ts
new file mode 100644
index 00000000..ce90a92c
--- /dev/null
+++ b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/viemRPC.ts
@@ -0,0 +1,130 @@
+import { createWalletClient, createPublicClient, custom, formatEther, parseEther } from "viem";
+import { mainnet, polygonAmoy, sepolia } from "viem/chains";
+import type { IProvider } from "@web3auth/base";
+
+const getViewChain = (provider: IProvider) => {
+  switch (provider.chainId) {
+    case "1":
+      return mainnet;
+    case "0x13882":
+      return polygonAmoy;
+    case "0xaa36a7":
+      return sepolia;
+    default:
+      return mainnet;
+  }
+};
+
+const getChainId = async (provider: IProvider): Promise<any> => {
+  try {
+    const walletClient = createWalletClient({
+      transport: custom(provider),
+    });
+
+    const address = await walletClient.getAddresses();
+    console.log(address);
+
+    const chainId = await walletClient.getChainId();
+    return chainId.toString();
+  } catch (error) {
+    return error;
+  }
+};
+const getAccounts = async (provider: IProvider): Promise<any> => {
+  try {
+    const walletClient = createWalletClient({
+      chain: getViewChain(provider),
+      transport: custom(provider),
+    });
+
+    const address = await walletClient.getAddresses();
+
+    return address;
+  } catch (error) {
+    return error;
+  }
+};
+
+const getBalance = async (provider: IProvider): Promise<string> => {
+  try {
+    const publicClient = createPublicClient({
+      chain: getViewChain(provider),
+      transport: custom(provider),
+    });
+
+    const walletClient = createWalletClient({
+      chain: getViewChain(provider),
+      transport: custom(provider),
+    });
+
+    const address = await walletClient.getAddresses();
+
+    const balance = await publicClient.getBalance({ address: address[0] });
+    console.log(balance);
+    return formatEther(balance);
+  } catch (error) {
+    return error as string;
+  }
+};
+
+const sendTransaction = async (provider: IProvider): Promise<any> => {
+  try {
+    const publicClient = createPublicClient({
+      chain: getViewChain(provider),
+      transport: custom(provider),
+    });
+
+    const walletClient = createWalletClient({
+      chain: getViewChain(provider),
+      transport: custom(provider),
+    });
+
+    // data for the transaction
+    const destination = "0x40e1c367Eca34250cAF1bc8330E9EddfD403fC56";
+    const amount = parseEther("0.0001");
+    const address = await walletClient.getAddresses();
+
+    // Submit transaction to the blockchain
+    const hash = await walletClient.sendTransaction({
+      account: address[0],
+      to: destination,
+      value: amount,
+    });
+    console.log(hash);
+    const receipt = await publicClient.waitForTransactionReceipt({ hash });
+
+    return JSON.stringify(
+      receipt,
+      (key, value) => (typeof value === "bigint" ? value.toString() : value) // return everything else unchanged
+    );
+  } catch (error) {
+    return error;
+  }
+};
+
+const signMessage = async (provider: IProvider): Promise<any> => {
+  try {
+    const walletClient = createWalletClient({
+      chain: getViewChain(provider),
+      transport: custom(provider),
+    });
+
+    // data for signing
+    const address = await walletClient.getAddresses();
+    const originalMessage = "YOUR_MESSAGE";
+
+    // Sign the message
+    const hash = await walletClient.signMessage({
+      account: address[0],
+      message: originalMessage,
+    });
+
+    console.log(hash);
+
+    return hash.toString();
+  } catch (error) {
+    return error;
+  }
+};
+
+export default { getChainId, getAccounts, getBalance, sendTransaction, signMessage };
diff --git a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/web3RPC.ts b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/web3RPC.ts
new file mode 100644
index 00000000..c1170237
--- /dev/null
+++ b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/web3RPC.ts
@@ -0,0 +1,107 @@
+import type { IProvider } from "@web3auth/base";
+import Web3 from "web3";
+
+
+const getChainId = async (provider: IProvider): Promise<string> => {
+  try {
+    const web3 = new Web3(provider);
+
+    // Get the connected Chain's ID
+    const chainId = await web3.eth.getChainId();
+
+    return chainId.toString();
+  } catch (error) {
+    return error as string;
+  }
+}
+
+const getAccounts = async (provider: IProvider): Promise<any> => {
+  try {
+    const web3 = new Web3(provider as any);
+
+    // Get user's Ethereum public address
+    const address = (await web3.eth.getAccounts());
+
+    return address;
+  } catch (error) {
+    return error;
+  }
+}
+
+const getBalance = async (provider: IProvider): Promise<string> => {
+  try {
+    const web3 = new Web3(provider as any);
+
+    // Get user's Ethereum public address
+    const address = (await web3.eth.getAccounts())[0];
+
+    // Get user's balance in ether
+    const balance = web3.utils.fromWei(
+      await web3.eth.getBalance(address), // Balance is in wei
+      "ether"
+    );
+
+    return balance;
+  } catch (error) {
+    return error as string;
+  }
+}
+
+const signMessage = async (provider: IProvider): Promise<string> => {
+  try {
+    const web3 = new Web3(provider as any);
+
+    // Get user's Ethereum public address
+    const fromAddress = (await web3.eth.getAccounts())[0];
+
+    const originalMessage = "YOUR_MESSAGE";
+
+    // Sign the message
+    const signedMessage = await web3.eth.personal.sign(
+      originalMessage,
+      fromAddress,
+      "test password!" // configure your own password here.
+    );
+
+    return signedMessage;
+  } catch (error) {
+    return error as string;
+  }
+}
+
+const sendTransaction = async (provider: IProvider): Promise<any> => {
+  try {
+    const web3 = new Web3(provider as any);
+
+    // Get user's Ethereum public address
+    const fromAddress = (await web3.eth.getAccounts())[0];
+
+    const destination = fromAddress;
+
+    const amount = web3.utils.toWei("0.001", "ether"); // Convert 1 ether to wei
+    let transaction = {
+      from: fromAddress,
+      to: destination,
+      data: "0x",
+      value: amount,
+    }
+
+    // calculate gas transaction before sending
+    transaction = { ...transaction, gas: await web3.eth.estimateGas(transaction) } as any;
+
+    // Submit transaction to the blockchain and wait for it to be mined
+    const receipt = await web3.eth.sendTransaction(transaction);
+
+    return JSON.stringify(receipt, (key, value) =>
+      typeof value === 'bigint'
+        ? value.toString()
+        : value // return everything else unchanged
+    );
+  } catch (error) {
+    return error as string;
+  }
+}
+
+
+
+export default {getChainId, getAccounts, getBalance, sendTransaction, signMessage};
\ No newline at end of file