feat: changed the arch to reflect props changes

sstefdev · sstefdev · commit 772141c0500f · 2024-10-17T14:49:23.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/create-invoice-form/package.json b/packages/create-invoice-form/package.json
@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.5.2",
+    "@wagmi/core": "^2.13.8",
     "svelte": "^4.0.5",
     "svelte-check": "^3.6.0",
     "typescript": "^5.0.0",
diff --git a/packages/create-invoice-form/src/lib/create-invoice-form.svelte b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
@@ -18,12 +18,14 @@
   import { InvoiceForm, InvoiceView } from "./invoice";
   import { getInitialFormData, prepareRequestParams } from "./utils";
   import type { RequestNetwork } from "@requestnetwork/request-client.js";
+  import { getAccount } from "@wagmi/core";
 
   export let config: IConfig;
-  export let signer: string = "";
+  export let wagmiConfig: any;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: any;
 
+  let account: any;
   let isTimeout = false;
   let activeConfig = config ? config : defaultConfig;
   let mainColor = activeConfig.colors.main;
@@ -77,7 +79,13 @@
   };
 
   $: {
-    formData.creatorId = signer;
+    if (wagmiConfig) {
+      account = getAccount(wagmiConfig);
+    }
+  }
+
+  $: {
+    formData.creatorId = account?.address as string;
     invoiceTotals = calculateInvoiceTotals(formData.items);
   }
 
@@ -130,7 +138,7 @@
     formData.miscellaneous.createdWith = window.location.hostname;
 
     const requestCreateParameters = prepareRequestParams({
-      signer,
+      address: account?.address,
       formData,
       currency,
       invoiceTotals,
diff --git a/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts
@@ -1,9 +1,10 @@
 import React from "react";
 import type { IConfig } from "@requestnetwork/shared-types";
 import type { RequestNetwork, Types } from "@requestnetwork/request-client.js";
+import { Config as WagmiConfig } from "@wagmi/core";
 export interface CreateInvoiceFormProps {
   config: IConfig;
-  signer: string;
+  wagmiConfig: WagmiConfig;
   requestNetwork: RequestNetwork | null | undefined;
   currencies: {
     symbol: string;
@@ -26,7 +27,7 @@ export interface CreateInvoiceFormProps {
  * @example
  * <CreateInvoiceForm
  *   config={config}
- *   signer={signer}
+ *   wagmiConfig={wagmiConfig}
  *   requestNetwork={requestNetwork}
  *   currencies={[
  *     {
diff --git a/packages/create-invoice-form/src/lib/utils/prepareRequest.ts b/packages/create-invoice-form/src/lib/utils/prepareRequest.ts
@@ -10,11 +10,11 @@ interface IRequestParams {
     totalTaxAmount: number;
     totalAmount: number;
   };
-  signer: string;
+  address: `0x${string}` | undefined;
 }
 
 export const prepareRequestParams = ({
-  signer,
+  address,
   currency,
   formData,
   invoiceTotals,
@@ -123,7 +123,7 @@ export const prepareRequestParams = ({
     },
     signer: {
       type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
-      value: signer,
+      value: address as string,
     },
   };
 };
diff --git a/packages/invoice-dashboard/package.json b/packages/invoice-dashboard/package.json
@@ -39,10 +39,13 @@
     "@requestnetwork/payment-detection": "0.43.1-next.2043",
     "@requestnetwork/payment-processor": "0.45.1-next.2043",
     "@requestnetwork/request-client.js": "0.47.1-next.2043",
+    "@wagmi/connectors": "^5.2.0",
+    "@wagmi/core": "^2.13.8",
     "ethers": "^5.7.2",
     "svelte-sonner": "^0.3.27",
-    "viem": "^2.9.15",
-    "vite-plugin-node-polyfills": "^0.22.0"
+    "viem": "^2.21.27",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "wagmi": "^2.12.17"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.0.0",
diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
@@ -22,19 +22,17 @@
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
   import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
-  // Types
-  import type { WalletState } from "@requestnetwork/shared-types/web3Onboard";
-
   import { onMount } from "svelte";
   import { formatUnits } from "viem";
-  import { walletClientToSigner } from "../../utils";
+  import { getEthersSigner } from "../../utils";
 
   export let config;
-  export let wallet: WalletState | undefined;
+  export let account: any;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let request: Types.IRequestDataWithEvents;
   export let currencyManager: any;
   export let isRequestPayed: boolean;
+  export let wagmiConfig: any;
 
   let network = request?.currencyInfo?.network || "mainnet";
   // FIXME: Use a non deprecated function
@@ -45,15 +43,16 @@
   let requestData: any = null;
   let signer: any = null;
   let approved = false;
-  let address = wallet?.accounts?.[0]?.address;
+  let address = account.address;
   let firstItems: any;
   let otherItems: any;
   let sellerInfo: { label: string; value: string }[] = [];
   let buyerInfo: { label: string; value: string }[] = [];
   let isPayee = request?.payee?.value.toLowerCase() === address?.toLowerCase();
   let unsupportedNetwork = false;
+  let hexStringChain = "0x" + account.chainId.toString(16);
   let correctChain =
-    wallet?.chains[0].id === String(getNetworkIdFromNetworkName(network));
+    hexStringChain === String(getNetworkIdFromNetworkName(network));
 
   const generateDetailParagraphs = (info: any) => {
     return [
@@ -96,7 +95,7 @@
   $: request, checkInvoice();
 
   $: {
-    wallet = wallet;
+    account = account;
     network = request?.currencyInfo?.network || "mainnet";
     // FIXME: Use a non deprecated function
     currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
@@ -109,7 +108,9 @@
       const singleRequest = await requestNetwork?.fromRequestId(
         request!.requestId
       );
-      signer = walletClientToSigner(wallet);
+
+      signer = await getEthersSigner(wagmiConfig);
+
       requestData = singleRequest?.getData();
 
       if (requestData.currencyInfo.type === Types.RequestLogic.CURRENCY.ERC20) {
@@ -183,11 +184,9 @@
   async function switchNetworkIfNeeded(network: string) {
     try {
       const targetNetworkId = String(getNetworkIdFromNetworkName(network));
-      await wallet?.provider.request({
-        method: "wallet_switchEthereumChain",
-        params: [{ chainId: targetNetworkId }],
-      });
-      signer = walletClientToSigner(wallet);
+      await account.connector.switchChain({ chainId: Number(targetNetworkId) });
+      signer = await getEthersSigner(wagmiConfig);
+
       correctChain = true;
     } catch (err) {
       console.error("Something went wrong while switching networks: ", err);
diff --git a/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts b/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts
@@ -3,10 +3,11 @@ import type { IConfig } from "@requestnetwork/shared-types";
 import type { WalletState } from "@requestnetwork/shared-types/web3Onboard";
 import type { RequestNetwork } from "@requestnetwork/request-client.js";
 import { Currency } from "../types";
+import { Config as WagmiConfig } from "wagmi";
 
 export interface InvoiceDashboardProps {
   config: IConfig;
-  wallet: WalletState | null;
+  wagmiConfig: WagmiConfig;
   requestNetwork: RequestNetwork | null | undefined;
   currencies: Currency[];
 }
@@ -23,7 +24,7 @@ export interface InvoiceDashboardProps {
  * @example
  * <InvoiceDashboard
  *   config={config}
- *   wallet={wallet}
+ *   wagmiConfig={wagmiConfig}
  *   requestNetwork={requestNetwork}
  *   currencies={currencies}
  * />
diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
@@ -21,7 +21,6 @@
   import Search from "@requestnetwork/shared-icons/search.svelte";
   // Types
   import type { IConfig } from "@requestnetwork/shared-types";
-  import type { WalletState } from "@requestnetwork/shared-types/web3Onboard";
   // Utils
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
@@ -34,18 +33,20 @@
   import { onMount } from "svelte";
   import { formatUnits } from "viem";
   import { capitalize, debounce, formatAddress } from "../utils";
-
   import { Drawer, InvoiceView } from "./dashboard";
+  import { getAccount, getClient } from "@wagmi/core";
+  import type { Config as WagmiConfig } from "wagmi";
 
   export let config: IConfig;
-  export let wallet: WalletState;
+  export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: any = [];
 
-  let signer = "";
+  let signer: `0x${string}` | undefined;
   let activeConfig = config ? config : defaultConfig;
   let mainColor = activeConfig.colors.main;
   let secondaryColor = activeConfig.colors.secondary;
+  let account: any;
 
   let loading = false;
   let searchQuery = "";
@@ -76,7 +77,13 @@
   let sortColumn = "timestamp";
 
   $: {
-    signer = wallet?.accounts[0]?.address;
+    if (wagmiConfig) {
+      account = getAccount(wagmiConfig);
+    }
+  }
+
+  $: {
+    signer = account?.address;
   }
 
   $: isRequestPayed, getOneRequest(activeRequest);
@@ -86,13 +93,13 @@
   });
 
   const getRequests = async () => {
-    if (!wallet || !requestNetwork) return;
+    if (!account?.address || !requestNetwork) return;
     loading = true;
 
     try {
       const requestsData = await requestNetwork?.fromIdentity({
         type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
-        value: wallet?.accounts[0]?.address,
+        value: account?.address,
       });
       requests = requestsData
         ?.map((request) => request.getData())
@@ -115,7 +122,7 @@
       requests = requests?.filter(
         (request) => request.requestId !== activeRequest.requestId
       );
-      requests = [...requests, _request.getData()].sort(
+      requests = [...requests, _request?.getData()].sort(
         (a, b) => b.timestamp - a.timestamp
       );
     } catch (error) {
@@ -136,8 +143,8 @@
   let totalPages = 1;
 
   $: {
-    const currentWalletAddress = wallet?.accounts[0]?.address;
-    const currentNetwork = wallet?.chains[0]?.id;
+    const currentWalletAddress = account?.address;
+    const currentNetwork = account?.chainId?.toString();
 
     if (
       currentWalletAddress &&
@@ -184,9 +191,9 @@
     if (
       currentTab === "All" ||
       (currentTab === "Get Paid" &&
-        request.payee?.value?.toLowerCase() === signer.toLowerCase()) ||
+        request.payee?.value?.toLowerCase() === signer?.toLowerCase()) ||
       (currentTab === "Pay" &&
-        request.payer?.value?.toLowerCase() === signer.toLowerCase())
+        request.payer?.value?.toLowerCase() === signer?.toLowerCase())
     ) {
       const invoiceMatches = request.contentData?.invoiceNumber
         ?.toString()
@@ -517,8 +524,8 @@
                         <span
                           >{formatAddress(
                             currentTab === "Pay"
-                              ? request.payee?.value ?? ""
-                              : request.payer?.value ?? ""
+                              ? (request.payee?.value ?? "")
+                              : (request.payer?.value ?? "")
                           )}</span
                         >
                         <Copy
@@ -572,7 +579,8 @@
         >
           {#if activeRequest !== undefined}
             <InvoiceView
-              {wallet}
+              {account}
+              {wagmiConfig}
               bind:isRequestPayed
               {requestNetwork}
               {currencyManager}
diff --git a/packages/invoice-dashboard/src/utils/index.ts b/packages/invoice-dashboard/src/utils/index.ts
@@ -1,4 +1,4 @@
 export { debounce } from "./debounce";
 export { formatAddress } from "./formatAddress";
-export { publicClientToProvider, walletClientToSigner } from "./wallet-utils";
+export { publicClientToProvider, getEthersSigner } from "./wallet-utils";
 export { capitalize } from "./capitalize";
diff --git a/packages/invoice-dashboard/src/utils/wallet-utils.ts b/packages/invoice-dashboard/src/utils/wallet-utils.ts
@@ -1,4 +1,6 @@
+import { Config, getConnectorClient } from "@wagmi/core";
 import { providers } from "ethers";
+import type { Account, Chain, Client, Transport } from "viem";
 
 export const publicClientToProvider = (publicClient: any) => {
   const { chains, provider } = publicClient;
@@ -10,17 +12,24 @@ export const publicClientToProvider = (publicClient: any) => {
   return new providers.JsonRpcProvider(provider.url as string, network);
 };
 
-export const walletClientToSigner = (walletClient: any): any => {
-  if (walletClient) {
-    const { accounts, chains, provider } = walletClient;
-    const network = {
-      chainId: parseInt(chains[0].id, 16),
-      name: chains[0].name,
-    };
+export function clientToSigner(client: Client<Transport, Chain, Account>) {
+  const { account, chain, transport } = client;
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  };
 
-    const _provider = new providers.Web3Provider(provider, network);
+  const provider = new providers.Web3Provider(transport, network);
+  const signer = provider.getSigner(account.address);
+  return signer;
+}
 
-    const signer = _provider.getSigner(accounts?.[0]?.address);
-    return signer;
-  }
-};
+export async function getEthersSigner(
+  config: Config,
+  { chainId }: { chainId?: number } = {}
+) {
+  const client = await getConnectorClient(config, { chainId });
+
+  return clientToSigner(client);
+}
diff --git a/shared/utils/initCurrencyManager.ts b/shared/utils/initCurrencyManager.ts
@@ -48,7 +48,7 @@ const defaultCurrencyIds = [
 import { Types } from "@requestnetwork/request-client.js";
 
 export function initializeCurrencyManager(
-  customCurrencies: any[]
+  customCurrencies: any[] = []
 ): CurrencyManager {
   let currenciesToUse: any[];
 
