feat: enable switching to newly supported networks

Author: aimensahnoun

packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

@@ -1,49 +1,43 @@
 <script lang="ts">
+  import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import {
-    Types,
-    type RequestNetwork,
-  } from "@requestnetwork/request-client.js";
-  import {
-    payRequest,
     approveErc20,
     hasErc20Approval,
+    payRequest,
   } from "@requestnetwork/payment-processor";
-  import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
+  import {
+    Types,
+    type RequestNetwork,
+  } from "@requestnetwork/request-client.js";
   import { toast } from "svelte-sonner";
-
   // Components
-  import Button from "@requestnetwork/shared-components/button.svelte";
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
+  import Button from "@requestnetwork/shared-components/button.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
-
   // Icons
   import Check from "@requestnetwork/shared-icons/check.svelte";
   import Download from "@requestnetwork/shared-icons/download.svelte";
-
   // Utils
   import { formatDate } from "@requestnetwork/shared-utils/formatDate";
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
-
   // Types
   import type { WalletState } from "@requestnetwork/shared-types/web3Onboard";
 
-  import { walletClientToSigner, exportToPDF } from "../../utils";
-  import { formatUnits } from "viem";
   import { onMount } from "svelte";
+  import { formatUnits } from "viem";
+  import { exportToPDF, walletClientToSigner } from "../../utils";
+  import { getCurrencyFromManager } from "../../utils/getCurrency";
 
   export let config;
   export let wallet: WalletState | undefined;
   export let requestNetwork: RequestNetwork | null | undefined;
-  export let request: Types.IRequestDataWithEvents | undefined;
+  export let request: Types.IRequestDataWithEvents;
   export let currencyManager: any;
   export let isRequestPayed: boolean;
 
   let network = request?.currencyInfo?.network || "mainnet";
   // FIXME: Use a non deprecated function
-  let currency = currencyManager.from(
-    request?.currencyInfo.value,
-    request?.currencyInfo.network
-  );
+  let currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
   let statuses: any = [];
   let isPaid = false;
   let loading = false;
@@ -104,10 +98,7 @@
     wallet = wallet;
     network = request?.currencyInfo?.network || "mainnet";
     // FIXME: Use a non deprecated function
-    currency = currencyManager.from(
-      request?.currencyInfo.value,
-      request?.currencyInfo.network
-    );
+    currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
   }
 
   const checkInvoice = async () => {
@@ -205,8 +196,17 @@
   function getNetworkIdFromNetworkName(network: string): string {
     const networkIds: { [key: string]: string } = {
       mainnet: "0x1",
-      sepolia: "0xaa36a7",
       matic: "0x89",
+      bsc: "0x38",
+      xdai: "0x64",
+      avalanche: "0xa86a",
+      optimism: "0xa",
+      moonbeam: "0x504",
+      sepolia: "0xaa36a7",
+      fantom: "0xfa",
+      mantle: "0x1388",
+      zksyncera: "0x144",
+      base: "0x2105",
     };
     return networkIds[network];
   }

packages/invoice-dashboard/src/lib/view-requests.svelte

@@ -5,37 +5,35 @@
 <script lang="ts">
   // Components
   import Copy from "@requestnetwork/shared-components/copy.svelte";
-  import Input from "@requestnetwork/shared-components/input.svelte";
   import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
-  import Skeleton from "@requestnetwork/shared-components/skeleton.svelte";
+  import Input from "@requestnetwork/shared-components/input.svelte";
   import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
-  import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
+  import Skeleton from "@requestnetwork/shared-components/skeleton.svelte";
   import Toaster from "@requestnetwork/shared-components/sonner.svelte";
+  import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
   import { toast } from "svelte-sonner";
-
   // Icons
-  import ChevronUp from "@requestnetwork/shared-icons/chevron-up.svelte";
   import ChevronDown from "@requestnetwork/shared-icons/chevron-down.svelte";
   import ChevronLeft from "@requestnetwork/shared-icons/chevron-left.svelte";
   import ChevronRight from "@requestnetwork/shared-icons/chevron-right.svelte";
-  import Search from "@requestnetwork/shared-icons/search.svelte";
+  import ChevronUp from "@requestnetwork/shared-icons/chevron-up.svelte";
   import Download from "@requestnetwork/shared-icons/download.svelte";
-
+  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";
 
+  import { CurrencyManager } from "@requestnetwork/currency";
+  import type { RequestNetwork } from "@requestnetwork/request-client.js";
+  import { Types } from "@requestnetwork/request-client.js";
   import { onMount } from "svelte";
   import { formatUnits } from "viem";
-  import { Drawer, InvoiceView } from "./dashboard";
-  import { Types } from "@requestnetwork/request-client.js";
-  import type { RequestNetwork } from "@requestnetwork/request-client.js";
   import { debounce, exportToPDF, formatAddress } from "../utils";
-  import { CurrencyManager } from "@requestnetwork/currency";
+  import { getCurrencyFromManager } from "../utils/getCurrency";
+  import { Drawer, InvoiceView } from "./dashboard";
 
   export let config: IConfig;
   export let wallet: WalletState;
@@ -206,16 +204,11 @@
       formattedAmount: string;
       currencySymbol: string;
     } => {
-      const currencyInfo =
-        request.currencyInfo.type === Types.RequestLogic.CURRENCY.ETH
-          ? currencyManager.getNativeCurrency(
-              request.currencyInfo.type,
-              request.currencyInfo.network!
-            )
-          : currencyManager.fromAddress(
-              request.currencyInfo.value,
-              request.currencyInfo.network
-            );
+      const currencyInfo = getCurrencyFromManager(
+        request.currencyInfo,
+        currencyManager
+      );
+
       return {
         ...request,
         formattedAmount: formatUnits(

packages/invoice-dashboard/src/utils/getCurrency.ts

@@ -0,0 +1,14 @@
+import type { CurrencyManager } from "@requestnetwork/currency";
+import { Types } from "@requestnetwork/request-client.js";
+
+export const getCurrencyFromManager = (
+  currency: Types.RequestLogic.ICurrency,
+  currencyManager: CurrencyManager
+) => {
+  const currencyResult =
+    currency.type === Types.RequestLogic.CURRENCY.ETH
+      ? currencyManager.getNativeCurrency(currency.type, currency.network!)
+      : currencyManager.fromAddress(currency.value, currency.network);
+
+  return currencyResult;
+};