From db36ca08d041cfe655576af22a7ed882a2ab83a0 Mon Sep 17 00:00:00 2001 From: Nguyen Anh Tu Date: Tue, 24 Sep 2024 18:20:16 +0700 Subject: [PATCH] fix(view): demo - use ethers instead of viem in demo --- demo/vue-app-new/package-lock.json | 149 --------------- demo/vue-app-new/package.json | 1 - demo/vue-app-new/src/services/ethHandlers.ts | 187 ++++--------------- 3 files changed, 41 insertions(+), 296 deletions(-) diff --git a/demo/vue-app-new/package-lock.json b/demo/vue-app-new/package-lock.json index aba29ec6e..0767f65ac 100644 --- a/demo/vue-app-new/package-lock.json +++ b/demo/vue-app-new/package-lock.json @@ -35,7 +35,6 @@ "@web3auth/wallet-connect-v2-adapter": "file:../../packages/adapters/wallet-connect-v2-adapter", "@web3auth/wallet-services-plugin": "file:../../packages/plugins/wallet-services-plugin", "ethers": "^6.13.2", - "viem": "^2.21.9", "vue": "^3.4.31", "vue-i18n": "^9.13.1" }, @@ -5351,19 +5350,6 @@ "ws": "*" } }, - "node_modules/isows": { - "version": "1.0.4", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/wagmi-dev" - } - ], - "license": "MIT", - "peerDependencies": { - "ws": "*" - } - }, "node_modules/iterator.prototype": { "version": "1.1.2", "dev": true, @@ -7375,118 +7361,6 @@ "node_modules/valid-url": { "version": "1.0.9" }, - "node_modules/viem": { - "version": "2.21.9", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/wevm" - } - ], - "license": "MIT", - "dependencies": { - "@adraffy/ens-normalize": "1.10.0", - "@noble/curves": "1.4.0", - "@noble/hashes": "1.4.0", - "@scure/bip32": "1.4.0", - "@scure/bip39": "1.4.0", - "abitype": "1.0.5", - "isows": "1.0.4", - "webauthn-p256": "0.0.5", - "ws": "8.17.1" - }, - "peerDependencies": { - "typescript": ">=5.0.4" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/viem/node_modules/@adraffy/ens-normalize": { - "version": "1.10.0", - "license": "MIT" - }, - "node_modules/viem/node_modules/@noble/curves": { - "version": "1.4.0", - "license": "MIT", - "dependencies": { - "@noble/hashes": "1.4.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - } - }, - "node_modules/viem/node_modules/@noble/hashes": { - "version": "1.4.0", - "license": "MIT", - "engines": { - "node": ">= 16" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - } - }, - "node_modules/viem/node_modules/@scure/bip39": { - "version": "1.4.0", - "license": "MIT", - "dependencies": { - "@noble/hashes": "~1.5.0", - "@scure/base": "~1.1.8" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - } - }, - "node_modules/viem/node_modules/@scure/bip39/node_modules/@noble/hashes": { - "version": "1.5.0", - "license": "MIT", - "engines": { - "node": "^14.21.3 || >=16" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - } - }, - "node_modules/viem/node_modules/abitype": { - "version": "1.0.5", - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/wevm" - }, - "peerDependencies": { - "typescript": ">=5.0.4", - "zod": "^3 >=3.22.0" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - }, - "zod": { - "optional": true - } - } - }, - "node_modules/viem/node_modules/ws": { - "version": "8.17.1", - "license": "MIT", - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": ">=5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, "node_modules/vite": { "version": "5.4.3", "dev": true, @@ -7626,20 +7500,6 @@ "typescript": ">=5.0.0" } }, - "node_modules/webauthn-p256": { - "version": "0.0.5", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/wevm" - } - ], - "license": "MIT", - "dependencies": { - "@noble/curves": "^1.4.0", - "@noble/hashes": "^1.4.0" - } - }, "node_modules/webidl-conversions": { "version": "3.0.1", "license": "BSD-2-Clause" @@ -7884,15 +7744,6 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } - }, - "node_modules/zod": { - "version": "3.23.8", - "license": "MIT", - "optional": true, - "peer": true, - "funding": { - "url": "https://github.com/sponsors/colinhacks" - } } } } diff --git a/demo/vue-app-new/package.json b/demo/vue-app-new/package.json index 1fec405cc..ffd80e84d 100644 --- a/demo/vue-app-new/package.json +++ b/demo/vue-app-new/package.json @@ -37,7 +37,6 @@ "@web3auth/wallet-connect-v2-adapter": "file:../../packages/adapters/wallet-connect-v2-adapter", "@web3auth/wallet-services-plugin": "file:../../packages/plugins/wallet-services-plugin", "ethers": "^6.13.2", - "viem": "^2.21.9", "vue": "^3.4.31", "vue-i18n": "^9.13.1" }, diff --git a/demo/vue-app-new/src/services/ethHandlers.ts b/demo/vue-app-new/src/services/ethHandlers.ts index add9d3800..f1cbec80b 100644 --- a/demo/vue-app-new/src/services/ethHandlers.ts +++ b/demo/vue-app-new/src/services/ethHandlers.ts @@ -1,56 +1,23 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { IProvider, log } from "@web3auth/base"; import { verifyMessage as eipVerifyMessage } from "@web3auth/sign-in-with-ethereum"; -import { BrowserProvider, TypedDataEncoder } from "ethers"; -import { createPublicClient, createWalletClient, custom, extractChain, Hex, parseEther, parseTransaction, TypedDataDefinition } from "viem"; -import * as chains from "viem/chains"; +import { BrowserProvider, parseEther, Transaction } from "ethers"; import { getV4TypedData } from "../config"; import { formDataStore } from "../store/form"; -const viemChains = Object.values(chains); - export const sendEth = async (provider: IProvider, uiConsole: any) => { try { - const chain = extractChain({ - chains: viemChains as chains.Chain[], - id: Number(provider.chainId), - }); - const client = createWalletClient({ - chain, - transport: custom(provider), - }); - const accounts = await client.getAddresses(); - log.info("pubKey", accounts); - const request = await client.prepareTransactionRequest({ - account: accounts[0], - to: accounts[0], + const ethProvider = new BrowserProvider(provider); + const signer = await ethProvider.getSigner(); + const account = await signer.getAddress(); + const txRes = await signer.sendTransaction({ + from: account, + to: account, value: parseEther("0.01"), }); - const txHash = await client.sendTransaction({ - ...request, - account: accounts[0], - }); - - const publicClient = createPublicClient({ - chain, - transport: custom(provider), - }); - - const transaction = await publicClient.getTransaction({ hash: txHash }); // check for big int before logging to not break the stringify - uiConsole("txRes", { - hash: transaction.hash, - from: transaction.from, - to: transaction.to, - gas: transaction.gas.toString(), - gasPrice: transaction.gasPrice?.toString(), - maxFeePerGas: transaction.maxFeePerGas?.toString(), - maxPriorityFeePerGas: transaction.maxPriorityFeePerGas?.toString(), - type: transaction.type?.toString(), - value: transaction.value.toString(), - chainId: transaction.chainId?.toString(), - }); + uiConsole("txRes", txRes.toJSON()); } catch (error) { log.info("error", error); uiConsole("error", error instanceof Error ? error.message : error); @@ -59,23 +26,14 @@ export const sendEth = async (provider: IProvider, uiConsole: any) => { export const signEthMessage = async (provider: IProvider, uiConsole: any) => { try { - const chain = extractChain({ - chains: viemChains as chains.Chain[], - id: Number(provider.chainId), - }); - const client = createWalletClient({ - chain, - transport: custom(provider), - }); - const accounts = await client.getAddresses(); - const fromAddress = accounts[0]; + const ethProvider = new BrowserProvider(provider); + const signer = await ethProvider.getSigner(); + const account = await signer.getAddress(); + const fromAddress = account; log.info("fromAddress", fromAddress); const message = "Some string"; - const sig = await client.request({ - method: "eth_sign", - params: [fromAddress, message as Hex], - }); + const sig = await ethProvider.send("eth_sign", [fromAddress, message]); uiConsole("eth sign", sig); } catch (error) { log.error("error", error); @@ -85,17 +43,11 @@ export const signEthMessage = async (provider: IProvider, uiConsole: any) => { export const getAccounts = async (provider: IProvider, uiConsole: any): Promise => { try { - const chain = extractChain({ - chains: viemChains as chains.Chain[], - id: Number(provider.chainId), - }); - const client = createWalletClient({ - chain, - transport: custom(provider), - }); - const accounts = await client.getAddresses(); - uiConsole("accounts", accounts); - return accounts; + const ethProvider = new BrowserProvider(provider); + const signer = await ethProvider.getSigner(); + const account = await signer.getAddress(); + uiConsole("accounts", account); + return [account]; } catch (error) { log.error("Error", error); uiConsole("error", error instanceof Error ? error.message : error); @@ -104,15 +56,7 @@ export const getAccounts = async (provider: IProvider, uiConsole: any): Promise< }; export const getChainId = async (provider: IProvider, uiConsole: any): Promise => { try { - const chain = extractChain({ - chains: viemChains as chains.Chain[], - id: Number(provider.chainId), - }); - const client = createWalletClient({ - chain, - transport: custom(provider), - }); - const chainId = await client.getChainId(); + const { chainId } = provider; uiConsole("chainId", chainId.toString()); return chainId.toString(); } catch (error) { @@ -123,20 +67,10 @@ export const getChainId = async (provider: IProvider, uiConsole: any): Promise { try { - const chain = extractChain({ - chains: viemChains as chains.Chain[], - id: Number(provider.chainId), - }); - const client = createWalletClient({ - chain, - transport: custom(provider), - }); - const accounts = await client.getAddresses(); - const publicClient = createPublicClient({ - chain, - transport: custom(provider), - }); - const balance = await publicClient.getBalance({ address: accounts[0] }); + const ethProvider = new BrowserProvider(provider); + const signer = await ethProvider.getSigner(); + const account = await signer.getAddress(); + const balance = await ethProvider.getBalance(account); uiConsole("balance", balance.toString()); } catch (error) { log.error("Error", error); @@ -146,39 +80,22 @@ export const getBalance = async (provider: IProvider, uiConsole: any) => { export const signTransaction = async (provider: IProvider, uiConsole: any) => { try { - const chain = extractChain({ - chains: viemChains as chains.Chain[], - id: Number(provider.chainId), - }); - const client = createWalletClient({ - chain, - transport: custom(provider), - }); - const accounts = await client.getAddresses(); - + const ethProvider = new BrowserProvider(provider); + const signer = await ethProvider.getSigner(); + const account = await signer.getAddress(); // only supported with social logins (openlogin adapter) - const serializedTx = await client.signTransaction({ - account: accounts[0], - to: accounts[0], + const serializedTx = await signer.signTransaction({ + from: account, + to: account, value: parseEther("0.01"), }); if (formDataStore.useAccountAbstractionProvider) { // serialized user operation can't be parsed like transaction uiConsole("serialized user operation", serializedTx); } else { - const txRes = parseTransaction(serializedTx); + const tx = Transaction.from(serializedTx); // check for big int before logging to not break the stringify - uiConsole("txRes", { - ...txRes, - chainId: txRes.chainId?.toString(), - gas: txRes.gas?.toString(), - maxFeePerGas: txRes.maxFeePerGas?.toString(), - maxPriorityFeePerGas: txRes.maxPriorityFeePerGas?.toString(), - nonce: txRes.nonce?.toString(), - type: txRes.type?.toString(), - v: txRes.v?.toString(), - value: txRes.value?.toString(), - }); + uiConsole("txRes", tx.toJSON()); } } catch (error) { log.info("error", error); @@ -188,26 +105,16 @@ export const signTransaction = async (provider: IProvider, uiConsole: any) => { export const signPersonalMessage = async (provider: IProvider, uiConsole: any) => { try { - const chain = extractChain({ - chains: viemChains as chains.Chain[], - id: Number(provider.chainId), - }); - const client = createWalletClient({ - chain, - transport: custom(provider), - }); - const accounts = await client.getAddresses(); - const from = accounts[0]; + const ethProvider = new BrowserProvider(provider); + const signer = await ethProvider.getSigner(); + const account = await signer.getAddress(); + const from = account; const originalMessage = "Example `personal_sign` messages"; // Sign the message - const signedMessage = await client.signMessage({ - account: from, - message: originalMessage, - }); + const signedMessage = await signer.signMessage(originalMessage); - const ethProvider = new BrowserProvider(provider); const valid = await eipVerifyMessage({ provider: ethProvider, message: originalMessage, @@ -224,26 +131,14 @@ export const signPersonalMessage = async (provider: IProvider, uiConsole: any) = export const signTypedMessage = async (provider: IProvider, uiConsole: any) => { try { - const chain = extractChain({ - chains: viemChains as chains.Chain[], - id: Number(provider.chainId), - }); - const client = createWalletClient({ - chain, - transport: custom(provider), - }); - const accounts = await client.getAddresses(); - const from = accounts[0]; + const ethProvider = new BrowserProvider(provider); + const signer = await ethProvider.getSigner(); + const account = await signer.getAddress(); + const from = account; const typedData = getV4TypedData(provider.chainId); - const typedDataEncoded = TypedDataEncoder.from(typedData.types); + const signedMessage = await signer.signTypedData(typedData.domain, typedData.types, typedData.message); - const signedMessage = await client.signTypedData({ - account: from, - ...(typedData as unknown as TypedDataDefinition), - primaryType: typedDataEncoded.primaryType, - }); - const ethProvider = new BrowserProvider(provider); const valid = await eipVerifyMessage({ provider: ethProvider, typedData,