chore: update readme, fix uknown name for network

Author: sstefdev

packages/create-invoice-form/README.md

@@ -24,6 +24,12 @@ npm install @requestnetwork/create-invoice-form
 
 You can directly pass props into the create-invoice-form web component without needing to create references or use workarounds.
 
+##### 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.
+
 ```tsx
 import Head from "next/head";
 import { config } from "@/utils/config";
@@ -53,6 +59,30 @@ export default function CreateInvoice() {
 }
 ```
 
+#### 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

@@ -24,6 +24,12 @@ npm install @requestnetwork/invoice-dashboard
 
 You can directly pass props into the invoice-dashboard web component without needing to create references or use workarounds.
 
+##### 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.
+
 ```tsx
 import Head from "next/head";
 import { config } from "@/utils/config";
@@ -53,6 +59,30 @@ export default function InvoiceDashboardPage() {
 }
 ```
 
+#### 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`.
@@ -124,14 +154,14 @@ export const config: IConfig = {
 | Cancel Request                       | ❌     |
 | Add Stakeholder                      | ❌     |
 | Native Payment                       | ❌     |
-| Conversion 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

@@ -445,6 +445,7 @@
     await getRequests();
     loading = false;
   };
+
   $: sliderValueForDecryption, enableDecryption();
 </script>
 
@@ -726,7 +727,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}

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}