chore: Update Readme & Unknown Currency Name Fix (#263)

Author: sstefdev

packages/create-invoice-form/README.md

@@ -53,6 +53,36 @@ export default function CreateInvoice() {
 }
 ```
 
+### Important Note on Currencies Prop
+
+- The currencies prop is now optional.
+- If you include the currencies prop and follow the proper format, it will override the default currencies.
+- To use the default currencies list, simply omit the currencies prop.
+
+#### Example Override for Currencies
+
+If you need to customize the currencies list, ensure you follow the correct format:
+
+```ts
+export const currencies: CurrencyTypes.CurrencyInput[] = [
+  {
+    symbol: "FAU",
+    address: "0x370DE27fdb7D1Ff1e1BaA7D11c5820a324Cf623C",
+    network: "sepolia",
+    decimals: 18,
+    type: RequestLogicTypes.CURRENCY.ERC20,
+  },
+  {
+    symbol: "ETH",
+    network: "sepolia",
+    decimals: 18,
+    type: RequestLogicTypes.CURRENCY.ETH,
+  },
+];
+```
+
+When added, this will replace the default currencies list. To retain the defaults, do not include the `currencies` prop.
+
 #### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts)
 
 Initialize the `RequestNetwork` object using an Ethers `Signer` or Viem `WalletClient`.

packages/invoice-dashboard/README.md

@@ -53,6 +53,36 @@ export default function InvoiceDashboardPage() {
 }
 ```
 
+### Important Note on Currencies Prop
+
+- The currencies prop is now optional.
+- If you include the currencies prop and follow the proper format, it will override the default currencies.
+- To use the default currencies list, simply omit the currencies prop.
+
+#### Example Override for Currencies
+
+If you need to customize the currencies list, ensure you follow the correct format:
+
+```ts
+export const currencies: CurrencyTypes.CurrencyInput[] = [
+  {
+    symbol: "FAU",
+    address: "0x370DE27fdb7D1Ff1e1BaA7D11c5820a324Cf623C",
+    network: "sepolia",
+    decimals: 18,
+    type: RequestLogicTypes.CURRENCY.ERC20,
+  },
+  {
+    symbol: "ETH",
+    network: "sepolia",
+    decimals: 18,
+    type: RequestLogicTypes.CURRENCY.ETH,
+  },
+];
+```
+
+When added, this will replace the default currencies list. To retain the defaults, do not include the `currencies` prop.
+
 #### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts)
 
 Initialize the `RequestNetwork` object using an Ethers `Signer` or Viem `WalletClient`.
@@ -123,15 +153,15 @@ export const config: IConfig = {
 | Accept Request                       | ❌     |
 | Cancel Request                       | ❌     |
 | Add Stakeholder                      | ❌     |
-| Native Payment                       | ❌     |
-| Conversion Payment                   | ❌     |
+| Native Payment                       | ✅     |
+| Conversion Payment                   | ✅     |
 | Batch Payment                        | ❌     |
 | Declarative Payment                  | ❌     |
 | Swap-to-Pay Payment                  | ❌     |
 | Swap-to-Conversion Payment           | ❌     |
 | Escrow Payment                       | ❌     |
-| Improved UI and UX                   | ❌     |
-| More Chains and Currencies           | ❌     |
+| Improved UI and UX                   | ✅     |
+| More Chains and Currencies           | ✅     |
 | More Configuration Options           | ❌     |
 | Attachments                          | ❌     |
 

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

@@ -76,7 +76,8 @@
   let activeConfig = config ? config : defaultConfig;
   let mainColor = activeConfig.colors.main;
   let secondaryColor = activeConfig.colors.secondary;
-  let account: GetAccountReturnType | undefined = wagmiConfig && getAccount(wagmiConfig);
+  let account: GetAccountReturnType | undefined =
+    wagmiConfig && getAccount(wagmiConfig);
 
   let loading = false;
   let searchQuery = "";
@@ -142,8 +143,7 @@
     if (typeof unwatchAccount === "function") unwatchAccount();
   });
 
-  $: cipherProvider =
-    requestNetwork?.getCipherProvider() as CipherProvider;
+  $: cipherProvider = requestNetwork?.getCipherProvider() as CipherProvider;
 
   $: {
     signer = account?.address;
@@ -155,7 +155,10 @@
     currencyManager = initializeCurrencyManager(currencies);
   });
 
-  const getRequests = async (account: GetAccountReturnType, requestNetwork: RequestNetwork | undefined | null) => {
+  const getRequests = async (
+    account: GetAccountReturnType,
+    requestNetwork: RequestNetwork | undefined | null
+  ) => {
     if (!account?.address || !requestNetwork) return;
 
     try {
@@ -385,16 +388,27 @@
     activeRequest = undefined;
   };
 
-  const loadRequests = async (sliderValue: string, currentAccount: GetAccountReturnType | undefined, currentRequestNetwork: RequestNetwork | undefined | null) => {
-    if (!currentAccount?.address || !currentRequestNetwork || !cipherProvider) return;
+  const loadRequests = async (
+    sliderValue: string,
+    currentAccount: GetAccountReturnType | undefined,
+    currentRequestNetwork: RequestNetwork | undefined | null
+  ) => {
+    if (!currentAccount?.address || !currentRequestNetwork || !cipherProvider)
+      return;
 
     loading = true;
     if (sliderValue === "on") {
       try {
         const signer = await getEthersSigner(wagmiConfig);
         if (signer && currentAccount?.address) {
-          loadSessionSignatures = localStorage?.getItem("lit-wallet-sig") === null;
-          await cipherProvider?.getSessionSignatures(signer, currentAccount.address, window.location.host, "Sign in to Lit Protocol through Request Network");
+          loadSessionSignatures =
+            localStorage?.getItem("lit-wallet-sig") === null;
+          await cipherProvider?.getSessionSignatures(
+            signer,
+            currentAccount.address,
+            window.location.host,
+            "Sign in to Lit Protocol through Request Network"
+          );
           cipherProvider?.enableDecryption(true);
           localStorage?.setItem("isDecryptionEnabled", JSON.stringify(true));
         }
@@ -413,6 +427,7 @@
     await getRequests(currentAccount, currentRequestNetwork);
     loading = false;
   };
+
   $: loadRequests(sliderValueForDecryption, account, requestNetwork);
 </script>
 
@@ -421,13 +436,12 @@
   style="--mainColor: {mainColor}; --secondaryColor: {secondaryColor}; "
 >
   {#if loadSessionSignatures}
-    <Modal
-      config={config}
-      isOpen={true}
-      title="Lit Protocol Signature Required"
-    >
+    <Modal {config} isOpen={true} title="Lit Protocol Signature Required">
       <div class="modal-content">
-        <p>This signature is required only once per session and will allow you to:</p>
+        <p>
+          This signature is required only once per session and will allow you
+          to:
+        </p>
         <ul>
           <li>Access encrypted invoice details</li>
         </ul>
@@ -708,7 +722,10 @@
                 <td><StatusLabel status={checkStatus(request)} /></td>
                 <td>
                   {#if request.paymentCurrencies.length > 0}
-                    <Network network={request.paymentCurrencies[0]?.network} />
+                    <Network
+                      network={request.paymentCurrencies[0]?.network}
+                      showLabel={true}
+                    />
                   {:else}
                     <span class="text-gray-400">-</span>
                   {/if}
@@ -1068,6 +1085,6 @@
 
   .modal-content li {
     margin-bottom: 0.5rem;
-    color: #4B5563;
+    color: #4b5563;
   }
 </style>

shared/icons/network/network-icon.svelte

@@ -12,7 +12,7 @@
   <div class="network-icon" aria-label={`Network: ${capitalize(network)}`}>
     <svelte:component this={icon} />
     {#if showLabel}
-      <span>{capitalize(network)}</span>
+      <span>{capitalize(network) || "Unknown"}</span>
     {/if}
   </div>
 {/if}