fix: In a frontend setup, the SDK prompts a wallet popup as soon as i…

…t is loaded, before the dApp takes over

.github/workflows/website-deploy.yml

@@ -2,7 +2,11 @@ name: Deploy website
 
 on:
   push:
-    branches: ["dev"]
+    branches:
+      [
+        "dev",
+        "fix/in-a-frontend-setup-the-sdk-prompts-a-wallet-popup-as-soon-as-it-is-loaded-before-the-dapp-takes-over",
+      ]
     paths:
       - website/**
 

sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verax-attestation-registry/verax-sdk",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Verax Attestation Registry SDK to interact with the subgraph and the contracts",
   "keywords": [
     "linea-attestation-registry",

sdk/src/VeraxSdk.ts

@@ -5,26 +5,12 @@ import ModuleDataMapper from "./dataMapper/ModuleDataMapper";
 import PortalDataMapper from "./dataMapper/PortalDataMapper";
 import { Address, createPublicClient, createWalletClient, custom, Hex, http, PublicClient, WalletClient } from "viem";
 import UtilsDataMapper from "./dataMapper/UtilsDataMapper";
-import { PrivateKeyAccount, privateKeyToAccount } from "viem/accounts";
+import { privateKeyToAccount } from "viem/accounts";
 import { Conf } from "./types";
 import { SDKMode } from "./utils/constants";
 
 export * from "./types";
 
-let account: PrivateKeyAccount | Address;
-
-if (typeof window === "undefined") {
-  // TODO: return to a "module" setup instead of "CommonJS"
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const dotenv = require("dotenv");
-  dotenv.config({ path: "./.env" });
-  account = privateKeyToAccount(process.env.PRIVATE_KEY as Hex);
-} else if (typeof window.ethereum !== "undefined") {
-  window.ethereum.request({ method: "eth_requestAccounts" }).then((result: Address[]) => {
-    account = result[0];
-  });
-}
-
 export class VeraxSdk {
   static DEFAULT_LINEA_MAINNET: Conf = {
     chain: linea,
@@ -65,33 +51,30 @@ export class VeraxSdk {
   public portal: PortalDataMapper;
   public utils: UtilsDataMapper;
 
-  constructor(conf: Conf) {
+  constructor(conf: Conf, publicAddress?: Address, privateKey?: Hex) {
     this.web3Client = createPublicClient({
       chain: conf.chain,
       transport: http(),
     });
 
-    if (typeof account === "undefined") {
-      this.walletClient = undefined;
-    } else {
-      this.walletClient =
-        conf.mode === SDKMode.BACKEND
-          ? createWalletClient({
-              chain: conf.chain,
-              account,
-              transport: http(),
-            })
-          : createWalletClient({
-              chain: conf.chain,
-              account,
-              transport: custom(window.ethereum),
-            });
+    if (conf.mode === SDKMode.BACKEND) {
+      this.walletClient = createWalletClient({
+        chain: conf.chain,
+        account: privateKey ? privateKeyToAccount(privateKey) : undefined,
+        transport: http(),
+      });
+    } else if (typeof window.ethereum !== "undefined") {
+      this.walletClient = createWalletClient({
+        chain: conf.chain,
+        account: publicAddress,
+        transport: custom(window.ethereum),
+      });
     }
 
-    this.attestation = new AttestationDataMapper(conf, this.web3Client, this.walletClient, this);
-    this.schema = new SchemaDataMapper(conf, this.web3Client, this.walletClient, this);
-    this.module = new ModuleDataMapper(conf, this.web3Client, this.walletClient, this);
-    this.portal = new PortalDataMapper(conf, this.web3Client, this.walletClient, this);
-    this.utils = new UtilsDataMapper(conf, this.web3Client, this.walletClient, this);
+    this.attestation = new AttestationDataMapper(conf, this.web3Client, this, this.walletClient);
+    this.schema = new SchemaDataMapper(conf, this.web3Client, this, this.walletClient);
+    this.module = new ModuleDataMapper(conf, this.web3Client, this, this.walletClient);
+    this.portal = new PortalDataMapper(conf, this.web3Client, this, this.walletClient);
+    this.utils = new UtilsDataMapper(conf, this.web3Client, this, this.walletClient);
   }
 }

sdk/src/dataMapper/AttestationDataMapper.ts

@@ -75,7 +75,7 @@ export default class AttestationDataMapper extends BaseDataMapper<
 
   async updateRouter(routerAddress: Address) {
     const request = await this.simulateUpdateRouter(routerAddress);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateMassImport(portalAddress: Address, attestationPayloads: AttestationPayload[]) {
@@ -101,7 +101,7 @@ export default class AttestationDataMapper extends BaseDataMapper<
 
   async massImport(portalAddress: Address, attestationPayloads: AttestationPayload[]) {
     const request = await this.simulateMassImport(portalAddress, attestationPayloads);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateIncrementVersionNumber() {
@@ -110,7 +110,7 @@ export default class AttestationDataMapper extends BaseDataMapper<
 
   async incrementVersionNumber() {
     const request = await this.simulateIncrementVersionNumber();
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async isRegistered(attestationId: string) {
@@ -166,7 +166,7 @@ export default class AttestationDataMapper extends BaseDataMapper<
   }
 
   private async simulateContract(functionName: string, args: unknown[]) {
-    if (!this.walletClient) throw new Error("Account not available");
+    if (!this.walletClient) throw new Error("VeraxSDK - Wallet not available");
     try {
       const { request } = await this.web3Client.simulateContract({
         address: this.conf.attestationRegistryAddress,

sdk/src/dataMapper/BaseDataMapper.ts

@@ -13,11 +13,11 @@ export default abstract class BaseDataMapper<T, TFilter, TOrder> {
   protected abstract typeName: string;
   protected abstract gqlInterface: string;
 
-  constructor(_conf: Conf, _web3Client: PublicClient, _walletClient: WalletClient | undefined, _veraxSdk: VeraxSdk) {
+  constructor(_conf: Conf, _web3Client: PublicClient, _veraxSdk: VeraxSdk, _walletClient?: WalletClient) {
     this.conf = _conf;
     this.web3Client = _web3Client;
-    this.walletClient = _walletClient;
     this.veraxSdk = _veraxSdk;
+    this.walletClient = _walletClient;
   }
 
   async findOneById(id: string) {

sdk/src/dataMapper/ModuleDataMapper.ts

@@ -22,7 +22,7 @@ export default class ModuleDataMapper extends BaseDataMapper<Module, Module_filt
 
   async updateRouter(routerAddress: Address) {
     const request = await this.simulateUpdateRouter(routerAddress);
-    return await executeTransaction(this.walletClient, request);
+    return await executeTransaction(request, this.walletClient);
   }
 
   async simulateRegister(name: string, description: string, moduleAddress: Address) {
@@ -31,7 +31,7 @@ export default class ModuleDataMapper extends BaseDataMapper<Module, Module_filt
 
   async register(name: string, description: string, moduleAddress: Address) {
     const request = await this.simulateRegister(name, description, moduleAddress);
-    return await executeTransaction(this.walletClient, request);
+    return await executeTransaction(request, this.walletClient);
   }
 
   async simulateRunModules(
@@ -60,7 +60,7 @@ export default class ModuleDataMapper extends BaseDataMapper<Module, Module_filt
     value: number,
   ) {
     const request = await this.simulateRunModules(modulesAddresses, attestationPayload, validationPayloads, value);
-    return await executeTransaction(this.walletClient, request);
+    return await executeTransaction(request, this.walletClient);
   }
 
   async simulateBulkRunModules(
@@ -96,7 +96,7 @@ export default class ModuleDataMapper extends BaseDataMapper<Module, Module_filt
     validationPayloads: string[][],
   ) {
     const request = await this.simulateBulkRunModules(modulesAddresses, attestationPayloads, validationPayloads);
-    return await executeTransaction(this.walletClient, request);
+    return await executeTransaction(request, this.walletClient);
   }
 
   async isContractAddress(contractAddress: Address) {
@@ -129,7 +129,7 @@ export default class ModuleDataMapper extends BaseDataMapper<Module, Module_filt
   }
 
   private async simulateContract(functionName: string, args: unknown[]) {
-    if (!this.walletClient) throw new Error("Account not available");
+    if (!this.walletClient) throw new Error("VeraxSDK - Wallet not available");
     try {
       const { request } = await this.web3Client.simulateContract({
         address: this.conf.moduleRegistryAddress,

sdk/src/dataMapper/PortalDataMapper.ts

@@ -34,7 +34,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
 
   async attest(portalAddress: Address, attestationPayload: AttestationPayload, validationPayloads: string[]) {
     const request = await this.simulateAttest(portalAddress, attestationPayload, validationPayloads);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateBulkAttest(
@@ -63,7 +63,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
 
   async bulkAttest(portalAddress: Address, attestationPayloads: AttestationPayload[], validationPayloads: string[][]) {
     const request = await this.simulateBulkAttest(portalAddress, attestationPayloads, validationPayloads);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateRevoke(portalAddress: Address, attestationId: string) {
@@ -72,7 +72,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
 
   async revoke(portalAddress: Address, attestationId: string) {
     const request = await this.simulateRevoke(portalAddress, attestationId);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateBulkRevoke(portalAddress: Address, attestationIds: string[]) {
@@ -81,7 +81,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
 
   async bulkRevoke(portalAddress: Address, attestationIds: string[]) {
     const request = await this.simulateBulkRevoke(portalAddress, attestationIds);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateReplace(
@@ -109,7 +109,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
     validationPayloads: string[],
   ) {
     const request = await this.simulateReplace(portalAddress, attestationId, attestationPayload, validationPayloads);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateBulkReplace(
@@ -152,7 +152,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
       attestationPayloads,
       validationPayloads,
     );
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateRegister(id: Address, name: string, description: string, isRevocable: boolean, ownerName: string) {
@@ -161,7 +161,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
 
   async register(id: Address, name: string, description: string, isRevocable: boolean, ownerName: string) {
     const request = await this.simulateRegister(id, name, description, isRevocable, ownerName);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateDeployDefaultPortal(
@@ -188,7 +188,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
     ownerName: string,
   ) {
     const request = await this.simulateDeployDefaultPortal(modules, name, description, isRevocable, ownerName);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async getPortalByAddress(id: Address) {
@@ -209,7 +209,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
   }
 
   private async simulatePortalRegistryContract(functionName: string, args: unknown[]) {
-    if (!this.walletClient) throw new Error("Account not available");
+    if (!this.walletClient) throw new Error("VeraxSDK - Wallet not available");
     try {
       const { request } = await this.web3Client.simulateContract({
         address: this.conf.portalRegistryAddress,
@@ -226,7 +226,7 @@ export default class PortalDataMapper extends BaseDataMapper<Portal, Portal_filt
   }
 
   private async simulatePortalContract(portalAddress: Address, functionName: string, args: unknown[]) {
-    if (!this.walletClient) throw new Error("Account not available");
+    if (!this.walletClient) throw new Error("VeraxSDK - Wallet not available");
     try {
       const { request } = await this.web3Client.simulateContract({
         address: portalAddress,

sdk/src/dataMapper/SchemaDataMapper.ts

@@ -22,7 +22,7 @@ export default class SchemaDataMapper extends BaseDataMapper<Schema, Schema_filt
 
   async updateRouter(routerAddress: Address) {
     const request = await this.simulateUpdateRouter(routerAddress);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateCreate(name: string, description: string, context: string, schemaString: string) {
@@ -31,7 +31,7 @@ export default class SchemaDataMapper extends BaseDataMapper<Schema, Schema_filt
 
   async create(name: string, description: string, context: string, schemaString: string) {
     const request = await this.simulateCreate(name, description, context, schemaString);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async simulateUpdateContext(schemaId: string, context: string) {
@@ -40,7 +40,7 @@ export default class SchemaDataMapper extends BaseDataMapper<Schema, Schema_filt
 
   async updateContext(schemaId: string, context: string) {
     const request = await this.simulateUpdateContext(schemaId, context);
-    return executeTransaction(this.walletClient, request);
+    return executeTransaction(request, this.walletClient);
   }
 
   async getIdFromSchemaString(schema: string) {
@@ -73,7 +73,7 @@ export default class SchemaDataMapper extends BaseDataMapper<Schema, Schema_filt
   }
 
   private async simulateContract(functionName: string, args: unknown[]) {
-    if (!this.walletClient) throw new Error("Account not available");
+    if (!this.walletClient) throw new Error("VeraxSDK - Wallet not available");
     try {
       const { request } = await this.web3Client.simulateContract({
         address: this.conf.schemaRegistryAddress,

sdk/src/utils/transactionSender.ts

@@ -2,8 +2,11 @@ import { Hash, WalletClient } from "viem";
 
 // TODO: Use correct type for request
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function executeTransaction(walletClient: WalletClient | undefined, request: any): Promise<Hash> {
-  if (walletClient === undefined) throw new Error("Account not available");
+export async function executeTransaction(request: any, walletClient?: WalletClient): Promise<Hash> {
+  if (!walletClient) {
+    throw new Error("VeraxSDK - Wallet not available");
+  }
+
   const hash: Hash = await walletClient.writeContract(request);
   console.log(`Transaction sent with hash ${hash}`);
   return hash;

website/package.json

@@ -17,7 +17,7 @@
   "type": "module",
   "scripts": {
     "build": "tsc && vite build",
-    "dev": "vite",
+    "dev": "pnpm i && vite --force",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -26,7 +26,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@verax-attestation-registry/verax-sdk": "0.0.14",
+    "@verax-attestation-registry/verax-sdk": "0.0.15",
     "axios": "^1.6.1",
     "connectkit": "^1.5.3",
     "react": "^18.2.0",

website/src/main.tsx

@@ -4,16 +4,14 @@ import App from "./App.tsx";
 import "./index.css";
 import { createConfig, WagmiConfig } from "wagmi";
 import { ConnectKitProvider, getDefaultConfig } from "connectkit";
-import { lineaTestnet } from "wagmi/chains";
-
-const chains = [lineaTestnet];
+import { linea, lineaTestnet } from "wagmi/chains";
 
 const config = createConfig(
   getDefaultConfig({
     infuraId: import.meta.env.VITE_INFURA_API_KEY,
     walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "",
-    appName: "Verax Explorer",
-    chains,
+    appName: "Verax Website",
+    chains: [linea, lineaTestnet],
   }),
 );