fix: added watcher for wallets, added types

Author: sstefdev

packages/create-invoice-form/src/lib/create-invoice-form.svelte

@@ -1,31 +1,30 @@
 <svelte:options customElement="create-invoice-form" />
 
 <script lang="ts">
+  import { getAccount } from "@wagmi/core";
+  import { Config as WagmiConfig } from "wagmi";
   // Types
-  import { APP_STATUS } from "@requestnetwork/shared-types/enums";
+  import { type GetAccountReturnType } from "@wagmi/core";
   import type { IConfig } from "@requestnetwork/shared-types";
-
+  import { APP_STATUS } from "@requestnetwork/shared-types/enums";
+  import type { RequestNetwork } from "@requestnetwork/request-client.js";
   // Utils
-  import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
+  import { getInitialFormData, prepareRequestParams } from "./utils";
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
+  import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
-
   // Components
+  import { InvoiceForm, InvoiceView } from "./invoice";
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Status from "@requestnetwork/shared-components/status.svelte";
   import Modal from "@requestnetwork/shared-components/modal.svelte";
 
-  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 wagmiConfig: any;
+  export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: any;
 
-  let account: any;
+  let account: GetAccountReturnType;
   let isTimeout = false;
   let activeConfig = config ? config : defaultConfig;
   let mainColor = activeConfig.colors.main;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
+  import { toast } from "svelte-sonner";
+  import type { GetAccountReturnType } from "@wagmi/core";
   import {
     approveErc20,
     hasErc20Approval,
@@ -9,7 +10,7 @@
     Types,
     type RequestNetwork,
   } from "@requestnetwork/request-client.js";
-  import { toast } from "svelte-sonner";
+  import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   // Components
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
   import Button from "@requestnetwork/shared-components/button.svelte";
@@ -27,7 +28,7 @@
   import { getEthersSigner } from "../../utils";
 
   export let config;
-  export let account: any;
+  export let account: GetAccountReturnType;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let request: Types.IRequestDataWithEvents;
   export let currencyManager: any;

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

@@ -3,6 +3,8 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <script lang="ts">
+  import { getAccount, watchAccount } from "@wagmi/core";
+  import type { Config as WagmiConfig } from "wagmi";
   // Components
   import Copy from "@requestnetwork/shared-components/copy.svelte";
   import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
@@ -20,22 +22,20 @@
   import Download from "@requestnetwork/shared-icons/download.svelte";
   import Search from "@requestnetwork/shared-icons/search.svelte";
   // Types
+  import type { GetAccountReturnType } from "@wagmi/core";
+  import { Types } from "@requestnetwork/request-client.js";
   import type { IConfig } from "@requestnetwork/shared-types";
+  import type { RequestNetwork } from "@requestnetwork/request-client.js";
   // Utils
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
   import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
-
   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 { 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 wagmiConfig: WagmiConfig;
@@ -46,7 +46,7 @@
   let activeConfig = config ? config : defaultConfig;
   let mainColor = activeConfig.colors.main;
   let secondaryColor = activeConfig.colors.secondary;
-  let account: any;
+  let account: GetAccountReturnType;
 
   let loading = false;
   let searchQuery = "";
@@ -82,6 +82,19 @@
     }
   }
 
+  $: {
+    if (account) {
+      watchAccount(wagmiConfig, {
+        onChange(data) {
+          if (data.address !== account?.address) {
+            account = data;
+            getRequests();
+          }
+        },
+      });
+    }
+  }
+
   $: {
     signer = account?.address;
   }