Add IN/OUT Indicator Column to Invoice Dashboard (#204)

Author: sstefdev

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

@@ -12,6 +12,7 @@
   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 TxType from "@requestnetwork/shared-components/tx-type.svelte";
   import { toast } from "svelte-sonner";
   // Icons
   import ChevronDown from "@requestnetwork/shared-icons/chevron-down.svelte";
@@ -302,7 +303,11 @@
         paymentNetworkExtension?.id ===
           Types.Extension.PAYMENT_NETWORK_ID.ETH_FEE_PROXY_CONTRACT
       ) {
-        paymentCurrencies = [currencyInfo as (CurrencyTypes.ERC20Currency | CurrencyTypes.NativeCurrency)];
+        paymentCurrencies = [
+          currencyInfo as
+            | CurrencyTypes.ERC20Currency
+            | CurrencyTypes.NativeCurrency,
+        ];
       } else {
         console.error(
           "Payment network extension not supported:",
@@ -539,6 +544,26 @@
                   </i>
                 </div>
               </th>
+              <th
+                on:click={() => {
+                  const sortBy = processedRequests?.some(
+                    (req) => req.payer?.value === signer
+                  )
+                    ? "payer.value"
+                    : "payee.value";
+                  handleSort(sortBy);
+                }}
+              >
+                <div>
+                  Type<i class={`caret `}>
+                    {#if sortOrder === "asc" && (sortColumn === "payer.value" || sortColumn === "payee.value")}
+                      <ChevronUp />
+                    {:else}
+                      <ChevronDown />
+                    {/if}
+                  </i>
+                </div>
+              </th>
               <th on:click={() => handleSort("state")}>
                 <div>
                   Status<i class={`caret `}>
@@ -623,6 +648,11 @@
                     {/if}
                     {request.currencySymbol}
                   </td>
+                  <td>
+                    <TxType
+                      type={signer === request.payer?.value ? "OUT" : "IN"}
+                    />
+                  </td>
                   <td> {checkStatus(request)}</td>
                   <td
                     ><Tooltip text="Download PDF">

shared/components/tx-type.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  export let type: "IN" | "OUT";
+
+  $: isOut = type === "OUT";
+</script>
+
+<div class="tx" class:out={isOut} class:in={!isOut}>
+  {type}
+</div>
+
+<style>
+  .tx {
+    padding: 8px 0px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    max-width: 40px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .out {
+    background-color: rgba(255, 197, 49, 0.25);
+    color: #be7117;
+  }
+
+  .in {
+    background-color: rgba(11, 180, 137, 0.25);
+    color: #01503a;
+  }
+</style>