From 7d6d3ac35e5a8eb959ce35b423b60110a87b769c Mon Sep 17 00:00:00 2001 From: sstefdev Date: Fri, 22 Nov 2024 22:08:41 +0100 Subject: [PATCH 1/5] feat: added network chain icons, network icon function --- shared/icons/network/arbitrum.svelte | 81 ++++++++++++++++++++++++ shared/icons/network/base.svelte | 12 ++++ shared/icons/network/bsc.svelte | 14 ++++ shared/icons/network/celo.svelte | 35 ++++++++++ shared/icons/network/ethereum.svelte | 20 ++++++ shared/icons/network/fantom.svelte | 35 ++++++++++ shared/icons/network/gnosis.svelte | 30 +++++++++ shared/icons/network/matic.svelte | 23 +++++++ shared/icons/network/network-icon.svelte | 10 +++ shared/icons/network/optimism.svelte | 31 +++++++++ shared/icons/network/sepolia.svelte | 19 ++++++ shared/icons/network/zk-sync.svelte | 35 ++++++++++ shared/utils/getNetworkIcon.ts | 27 ++++++++ 13 files changed, 372 insertions(+) create mode 100644 shared/icons/network/arbitrum.svelte create mode 100644 shared/icons/network/base.svelte create mode 100644 shared/icons/network/bsc.svelte create mode 100644 shared/icons/network/celo.svelte create mode 100644 shared/icons/network/ethereum.svelte create mode 100644 shared/icons/network/fantom.svelte create mode 100644 shared/icons/network/gnosis.svelte create mode 100644 shared/icons/network/matic.svelte create mode 100644 shared/icons/network/network-icon.svelte create mode 100644 shared/icons/network/optimism.svelte create mode 100644 shared/icons/network/sepolia.svelte create mode 100644 shared/icons/network/zk-sync.svelte create mode 100644 shared/utils/getNetworkIcon.ts diff --git a/shared/icons/network/arbitrum.svelte b/shared/icons/network/arbitrum.svelte new file mode 100644 index 00000000..e221d59f --- /dev/null +++ b/shared/icons/network/arbitrum.svelte @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/shared/icons/network/base.svelte b/shared/icons/network/base.svelte new file mode 100644 index 00000000..796f196c --- /dev/null +++ b/shared/icons/network/base.svelte @@ -0,0 +1,12 @@ + + + diff --git a/shared/icons/network/bsc.svelte b/shared/icons/network/bsc.svelte new file mode 100644 index 00000000..962c8430 --- /dev/null +++ b/shared/icons/network/bsc.svelte @@ -0,0 +1,14 @@ + + + + diff --git a/shared/icons/network/celo.svelte b/shared/icons/network/celo.svelte new file mode 100644 index 00000000..19673ca8 --- /dev/null +++ b/shared/icons/network/celo.svelte @@ -0,0 +1,35 @@ + + + + + + + + + diff --git a/shared/icons/network/ethereum.svelte b/shared/icons/network/ethereum.svelte new file mode 100644 index 00000000..90a542e9 --- /dev/null +++ b/shared/icons/network/ethereum.svelte @@ -0,0 +1,20 @@ + diff --git a/shared/icons/network/fantom.svelte b/shared/icons/network/fantom.svelte new file mode 100644 index 00000000..bf7eeb5b --- /dev/null +++ b/shared/icons/network/fantom.svelte @@ -0,0 +1,35 @@ + + + Fantom circle@2x + + + + + + + diff --git a/shared/icons/network/gnosis.svelte b/shared/icons/network/gnosis.svelte new file mode 100644 index 00000000..551ce3eb --- /dev/null +++ b/shared/icons/network/gnosis.svelte @@ -0,0 +1,30 @@ + + + + + + diff --git a/shared/icons/network/matic.svelte b/shared/icons/network/matic.svelte new file mode 100644 index 00000000..de48daf7 --- /dev/null +++ b/shared/icons/network/matic.svelte @@ -0,0 +1,23 @@ + + + + diff --git a/shared/icons/network/network-icon.svelte b/shared/icons/network/network-icon.svelte new file mode 100644 index 00000000..108d4dd4 --- /dev/null +++ b/shared/icons/network/network-icon.svelte @@ -0,0 +1,10 @@ + + +{#if icon} + +{/if} diff --git a/shared/icons/network/optimism.svelte b/shared/icons/network/optimism.svelte new file mode 100644 index 00000000..30298569 --- /dev/null +++ b/shared/icons/network/optimism.svelte @@ -0,0 +1,31 @@ + + + + + + diff --git a/shared/icons/network/sepolia.svelte b/shared/icons/network/sepolia.svelte new file mode 100644 index 00000000..2d8a0e59 --- /dev/null +++ b/shared/icons/network/sepolia.svelte @@ -0,0 +1,19 @@ + diff --git a/shared/icons/network/zk-sync.svelte b/shared/icons/network/zk-sync.svelte new file mode 100644 index 00000000..7ccdf87b --- /dev/null +++ b/shared/icons/network/zk-sync.svelte @@ -0,0 +1,35 @@ + + + + + + + diff --git a/shared/utils/getNetworkIcon.ts b/shared/utils/getNetworkIcon.ts new file mode 100644 index 00000000..6f2bed16 --- /dev/null +++ b/shared/utils/getNetworkIcon.ts @@ -0,0 +1,27 @@ +import BscIcon from "../icons/network/bsc.svelte"; +import CeloIcon from "../icons/network/celo.svelte"; +import BaseIcon from "../icons/network/base.svelte"; +import MaticIcon from "../icons/network/matic.svelte"; +import GnosisIcon from "../icons/network/gnosis.svelte"; +import ZkSyncIcon from "../icons/network/zk-sync.svelte"; +import SepoliaIcon from "../icons/network/sepolia.svelte"; +import EthereumIcon from "../icons/network/ethereum.svelte"; +import OptimismIcon from "../icons/network/optimism.svelte"; +import ArbitrumIcon from "../icons/network/arbitrum.svelte"; + +export const getNetworkIcon = (networkName: string) => { + const icons = { + bsc: BscIcon, + celo: CeloIcon, + base: BaseIcon, + matic: MaticIcon, + zksync: ZkSyncIcon, + gnosis: GnosisIcon, + mainnet: EthereumIcon, + sepolia: SepoliaIcon, + optimism: OptimismIcon, + arbitrum: ArbitrumIcon, + }; + + return icons[networkName] || EthereumIcon; +}; From ef7f8d32e8353bcb0d6ab682952a15505151371f Mon Sep 17 00:00:00 2001 From: sstefdev Date: Fri, 22 Nov 2024 23:35:44 +0100 Subject: [PATCH 2/5] feat: added rest of the chains, updated util function --- .../src/lib/view-requests.svelte | 15 +++++++ shared/icons/network/avax.svelte | 15 +++++++ shared/icons/network/fantom.svelte | 37 +++------------ shared/icons/network/mantle.svelte | 28 ++++++++++++ shared/icons/network/moonbeam.svelte | 23 ++++++++++ shared/icons/network/near.svelte | 17 +++++++ shared/icons/network/network-icon.svelte | 16 ++++++- shared/icons/network/ronin.svelte | 45 +++++++++++++++++++ shared/utils/getNetworkIcon.ts | 22 ++++++--- 9 files changed, 181 insertions(+), 37 deletions(-) create mode 100644 shared/icons/network/avax.svelte create mode 100644 shared/icons/network/mantle.svelte create mode 100644 shared/icons/network/moonbeam.svelte create mode 100644 shared/icons/network/near.svelte create mode 100644 shared/icons/network/ronin.svelte diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte index 2d2fdd34..ba460fd4 100644 --- a/packages/invoice-dashboard/src/lib/view-requests.svelte +++ b/packages/invoice-dashboard/src/lib/view-requests.svelte @@ -21,6 +21,7 @@ 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"; + import Network from "@requestnetwork/shared-icons/network/network-icon.svelte"; // Types import type { GetAccountReturnType, @@ -575,6 +576,17 @@ + handleSort("currencyInfo.network")}> +
+ Payment Network + {#if sortOrder === "asc" && sortColumn === "currencyInfo.network"} + + {:else} + + {/if} + +
+ @@ -654,6 +666,9 @@ /> {checkStatus(request)} + + + + + diff --git a/shared/icons/network/fantom.svelte b/shared/icons/network/fantom.svelte index bf7eeb5b..98b71f7e 100644 --- a/shared/icons/network/fantom.svelte +++ b/shared/icons/network/fantom.svelte @@ -1,35 +1,12 @@ - - Fantom circle@2x - - - - - - + diff --git a/shared/icons/network/mantle.svelte b/shared/icons/network/mantle.svelte new file mode 100644 index 00000000..7cc37f7e --- /dev/null +++ b/shared/icons/network/mantle.svelte @@ -0,0 +1,28 @@ + + + + + + diff --git a/shared/icons/network/moonbeam.svelte b/shared/icons/network/moonbeam.svelte new file mode 100644 index 00000000..95c94156 --- /dev/null +++ b/shared/icons/network/moonbeam.svelte @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/shared/icons/network/near.svelte b/shared/icons/network/near.svelte new file mode 100644 index 00000000..4a95561e --- /dev/null +++ b/shared/icons/network/near.svelte @@ -0,0 +1,17 @@ + + + diff --git a/shared/icons/network/network-icon.svelte b/shared/icons/network/network-icon.svelte index 108d4dd4..11e50973 100644 --- a/shared/icons/network/network-icon.svelte +++ b/shared/icons/network/network-icon.svelte @@ -1,10 +1,22 @@ {#if icon} - +
+ + {network} +
{/if} + + diff --git a/shared/icons/network/ronin.svelte b/shared/icons/network/ronin.svelte new file mode 100644 index 00000000..e68a0030 --- /dev/null +++ b/shared/icons/network/ronin.svelte @@ -0,0 +1,45 @@ + + + + + + + + + + diff --git a/shared/utils/getNetworkIcon.ts b/shared/utils/getNetworkIcon.ts index 6f2bed16..c7548a25 100644 --- a/shared/utils/getNetworkIcon.ts +++ b/shared/utils/getNetworkIcon.ts @@ -1,27 +1,39 @@ import BscIcon from "../icons/network/bsc.svelte"; +import AvaxIcon from "../icons/network/avax.svelte"; import CeloIcon from "../icons/network/celo.svelte"; import BaseIcon from "../icons/network/base.svelte"; +import NearIcon from "../icons/network/near.svelte"; import MaticIcon from "../icons/network/matic.svelte"; +import RoninIcon from "../icons/network/ronin.svelte"; import GnosisIcon from "../icons/network/gnosis.svelte"; +import MantleIcon from "../icons/network/mantle.svelte"; import ZkSyncIcon from "../icons/network/zk-sync.svelte"; import SepoliaIcon from "../icons/network/sepolia.svelte"; import EthereumIcon from "../icons/network/ethereum.svelte"; import OptimismIcon from "../icons/network/optimism.svelte"; import ArbitrumIcon from "../icons/network/arbitrum.svelte"; +import MoonbeamIcon from "../icons/network/moonbeam.svelte"; +import FantomIcon from "../icons/network/fantom.svelte"; -export const getNetworkIcon = (networkName: string) => { +export const getNetworkIcon = (network: string) => { const icons = { bsc: BscIcon, celo: CeloIcon, base: BaseIcon, + near: NearIcon, + xdai: GnosisIcon, matic: MaticIcon, - zksync: ZkSyncIcon, - gnosis: GnosisIcon, - mainnet: EthereumIcon, + ronin: RoninIcon, + fantom: FantomIcon, + mantle: MantleIcon, + avalanche: AvaxIcon, sepolia: SepoliaIcon, + zksyncera: ZkSyncIcon, + mainnet: EthereumIcon, optimism: OptimismIcon, arbitrum: ArbitrumIcon, + moonbeam: MoonbeamIcon, }; - return icons[networkName] || EthereumIcon; + return icons[network] || EthereumIcon; }; From 1ced42c39135bd15ad0defd3943f000088055d85 Mon Sep 17 00:00:00 2001 From: sstefdev Date: Sat, 23 Nov 2024 00:00:47 +0100 Subject: [PATCH 3/5] fix: change to Payment Chain in table head --- packages/invoice-dashboard/src/lib/view-requests.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte index ba460fd4..8c849e1c 100644 --- a/packages/invoice-dashboard/src/lib/view-requests.svelte +++ b/packages/invoice-dashboard/src/lib/view-requests.svelte @@ -578,7 +578,7 @@ handleSort("currencyInfo.network")}>
- Payment Network + Payment Chain {#if sortOrder === "asc" && sortColumn === "currencyInfo.network"} {:else} From 141410c9ec24f36f1ab1ba041b8096c455d4f49c Mon Sep 17 00:00:00 2001 From: sstefdev Date: Sun, 24 Nov 2024 09:10:50 +0100 Subject: [PATCH 4/5] chore: add missing functions, updated text on payment chain --- .../src/lib/view-requests.svelte | 14 +------ shared/icons/network/network-icon.svelte | 3 +- shared/utils/capitalize.ts | 2 + shared/utils/checkStatus.ts | 37 +++++++++++++++++++ 4 files changed, 43 insertions(+), 13 deletions(-) create mode 100644 shared/utils/capitalize.ts create mode 100644 shared/utils/checkStatus.ts diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte index 8c849e1c..ec949537 100644 --- a/packages/invoice-dashboard/src/lib/view-requests.svelte +++ b/packages/invoice-dashboard/src/lib/view-requests.svelte @@ -34,12 +34,13 @@ // Utils import { config as defaultConfig } from "@requestnetwork/shared-utils/config"; import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager"; + import { checkStatus } from "@requestnetwork/shared-utils/checkStatus"; import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice"; import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency"; import { CurrencyManager } from "@requestnetwork/currency"; import { onDestroy, onMount, tick } from "svelte"; import { formatUnits } from "viem"; - import { capitalize, debounce, formatAddress } from "../utils"; + import { debounce, formatAddress } from "../utils"; import { Drawer, InvoiceView } from "./dashboard"; import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection"; import { CurrencyTypes } from "@requestnetwork/types"; @@ -382,17 +383,6 @@ const handleRemoveSelectedRequest = () => { activeRequest = undefined; }; - - const checkStatus = (request: any) => { - switch (request?.balance?.balance > 0) { - case true: - return request?.balance?.balance >= request?.expectedAmount - ? "Paid" - : "Partially Paid"; - default: - return capitalize(request?.state); - } - };
+ import { capitalize } from "../../utils/capitalize"; import { getNetworkIcon } from "../../utils/getNetworkIcon"; export let network = "mainnet"; @@ -9,7 +10,7 @@ {#if icon}
- {network} + {capitalize(network)}
{/if} diff --git a/shared/utils/capitalize.ts b/shared/utils/capitalize.ts new file mode 100644 index 00000000..30824cd3 --- /dev/null +++ b/shared/utils/capitalize.ts @@ -0,0 +1,2 @@ +export const capitalize = (str: string) => + (str && str[0].toUpperCase() + str.slice(1)) || ""; diff --git a/shared/utils/checkStatus.ts b/shared/utils/checkStatus.ts new file mode 100644 index 00000000..2bba38e9 --- /dev/null +++ b/shared/utils/checkStatus.ts @@ -0,0 +1,37 @@ +import { capitalize } from "./capitalize"; +import { Types } from "@requestnetwork/request-client.js"; + +export const checkStatus = (request: Types.IRequestDataWithEvents | null) => { + const balance = BigInt(request?.balance?.balance ?? 0); + const expectedAmount = BigInt(request?.expectedAmount ?? 0); + const today = new Date(); + const dueDate = new Date(request?.contentData?.paymentTerms?.dueDate); + const isPaid = balance >= expectedAmount ? "Paid" : "Partially Paid"; + + const eventStatus = { + reject: "Rejected", + cancel: "Canceled", + }; + + for (const [event, status] of Object.entries(eventStatus)) { + if ( + request?.events?.some( + (e: { name?: string }) => e?.name?.toLowerCase() === event.toLowerCase() + ) + ) { + return capitalize(status); + } + } + + if (dueDate < today) { + if (balance === BigInt(0)) { + return "Overdue"; + } + return isPaid; + } else { + if (balance === BigInt(0)) { + return "Awaiting Payment"; + } + return isPaid; + } +}; From 0eaae4998d7ef6cf0cdeccbfa24148da152a7b0a Mon Sep 17 00:00:00 2001 From: sstefdev Date: Tue, 26 Nov 2024 14:03:35 +0100 Subject: [PATCH 5/5] fix: coderabbit comments fix --- .../invoice-dashboard/src/lib/view-requests.svelte | 10 +++++++--- shared/components/dashboard-skeleton.svelte | 8 ++++---- shared/icons/network/network-icon.svelte | 2 +- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte index 109091da..6ab293da 100644 --- a/packages/invoice-dashboard/src/lib/view-requests.svelte +++ b/packages/invoice-dashboard/src/lib/view-requests.svelte @@ -578,7 +578,7 @@ - {#if processedRequests} + {#if processedRequests.length > 0} {#each processedRequests as request} handleRequestSelect(e, request)}> {#if columns.issuedAt} @@ -648,8 +648,12 @@ /> {checkStatus(request)} - + + {#if request.paymentCurrencies.length > 0} + + {:else} + - + {/if} diff --git a/shared/components/dashboard-skeleton.svelte b/shared/components/dashboard-skeleton.svelte index 41840ff1..9a97392d 100644 --- a/shared/components/dashboard-skeleton.svelte +++ b/shared/components/dashboard-skeleton.svelte @@ -1,8 +1,8 @@ -{#each Array(columns) as _} +{#each Array(rows) as _} - {#each Array(rows) as _} + {#each Array(columns) as _} diff --git a/shared/icons/network/network-icon.svelte b/shared/icons/network/network-icon.svelte index 5832ea80..a2eaab02 100644 --- a/shared/icons/network/network-icon.svelte +++ b/shared/icons/network/network-icon.svelte @@ -8,7 +8,7 @@ {#if icon} -
+
{capitalize(network)}