From 472c95a6a373ee28c3b466ad9253916e517dd847 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Tue, 17 Dec 2024 17:03:36 +0100
Subject: [PATCH 1/4] feat: added new transaction status, validation when the
 payee and payer address is same

---
 .../src/lib/invoice/form.svelte               | 11 ++++++-
 .../src/lib/view-requests.svelte              |  1 +
 shared/components/tx-type.svelte              | 33 +++++++++++++++++--
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 998271d1..95a59ae1 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -43,6 +43,7 @@
   let validationErrors = {
     payeeAddress: false,
     clientAddress: false,
+    sameAddress: false,
     sellerInfo: {
       email: false,
     },
@@ -60,10 +61,16 @@
 
   const checkPayeeAddress = () => {
     validationErrors.payeeAddress = !checkAddress(formData.payeeAddress);
+    validationErrors.sameAddress =
+      formData.payerAddress.toLowerCase() ===
+      formData.payeeAddress.toLowerCase();
   };
 
   const checkClientAddress = () => {
     validationErrors.clientAddress = !checkAddress(formData.payerAddress);
+    validationErrors.sameAddress =
+      formData.payerAddress.toLowerCase() ===
+      formData.payeeAddress.toLowerCase();
   };
 
   const calculateInputWidth = (value: string) => {
@@ -328,7 +335,9 @@
             onBlur={checkClientAddress}
             error={validationErrors.clientAddress
               ? "Please enter a valid Ethereum address"
-              : ""}
+              : validationErrors.sameAddress
+                ? "Payer address cannot be the same as recipient address"
+                : ""}
           />
           <Accordion title="Add Client Info">
             <div class="invoice-form-info">
diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
index 36137d04..1ace7e43 100644
--- a/packages/invoice-dashboard/src/lib/view-requests.svelte
+++ b/packages/invoice-dashboard/src/lib/view-requests.svelte
@@ -721,6 +721,7 @@
                 <td>
                   <TxType
                     type={signer === request.payer?.value ? "OUT" : "IN"}
+                    showBoth={request.payer?.value === request.payee?.value}
                   />
                 </td>
                 <td><StatusLabel status={checkStatus(request)} /></td>
diff --git a/shared/components/tx-type.svelte b/shared/components/tx-type.svelte
index 97765ccf..42d14843 100644
--- a/shared/components/tx-type.svelte
+++ b/shared/components/tx-type.svelte
@@ -1,14 +1,28 @@
 <script lang="ts">
   export let type: "IN" | "OUT";
+  export let showBoth: boolean = false;
 
   $: isOut = type === "OUT";
 </script>
 
-<div class="tx" class:out={isOut} class:in={!isOut}>
-  {type}
-</div>
+{#if showBoth}
+  <div class="tx-group">
+    <div class="tx in overlap">IN</div>
+    <div class="tx out overlap">OUT</div>
+  </div>
+{:else}
+  <div class="tx" class:out={isOut} class:in={!isOut}>
+    {type}
+  </div>
+{/if}
 
 <style>
+  .tx-group {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
   .tx {
     padding: 8px 0px;
     border-radius: 6px;
@@ -28,4 +42,17 @@
     background-color: rgba(11, 180, 137, 0.25);
     color: #01503a;
   }
+
+  .overlap {
+    width: 120px;
+    position: absolute;
+  }
+
+  .overlap.in {
+    left: -14px;
+  }
+
+  .overlap.out {
+    left: 14px;
+  }
 </style>

From aa9d1774a148c98a0c7689dcea41a6e5a6c994e1 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Tue, 17 Dec 2024 18:22:37 +0100
Subject: [PATCH 2/4] fix: optimized the code

---
 .../src/lib/invoice/form.svelte                   | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 95a59ae1..9b1e2966 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -59,18 +59,21 @@
     validationErrors[`${type}`].email = !isEmail(email);
   };
 
+  const checkSameAddress = () => {
+    return (
+      formData.payerAddress.toLowerCase() ===
+      formData.payeeAddress.toLowerCase()
+    );
+  };
+
   const checkPayeeAddress = () => {
     validationErrors.payeeAddress = !checkAddress(formData.payeeAddress);
-    validationErrors.sameAddress =
-      formData.payerAddress.toLowerCase() ===
-      formData.payeeAddress.toLowerCase();
+    validationErrors.sameAddress = checkSameAddress();
   };
 
   const checkClientAddress = () => {
     validationErrors.clientAddress = !checkAddress(formData.payerAddress);
-    validationErrors.sameAddress =
-      formData.payerAddress.toLowerCase() ===
-      formData.payeeAddress.toLowerCase();
+    validationErrors.sameAddress = checkSameAddress();
   };
 
   const calculateInputWidth = (value: string) => {

From 799781c6ae8261b8af319f16e33ea0eaf8e9ea05 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Tue, 17 Dec 2024 21:33:37 +0100
Subject: [PATCH 3/4] fix: update tx type component, change the error message

---
 .../src/lib/invoice/form.svelte               |  2 +-
 shared/components/tx-type.svelte              | 24 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index de3a7038..484514ce 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -349,7 +349,7 @@
             error={validationErrors.clientAddress
               ? "Please enter a valid Ethereum address"
               : validationErrors.sameAddress
-                ? "Payer address cannot be the same as recipient address"
+                ? "Payer address cannot be the same as Payee address"
                 : ""}
           />
           <Accordion title="Add Client Info">
diff --git a/shared/components/tx-type.svelte b/shared/components/tx-type.svelte
index 42d14843..1440d4a8 100644
--- a/shared/components/tx-type.svelte
+++ b/shared/components/tx-type.svelte
@@ -21,16 +21,36 @@
     position: relative;
     display: inline-flex;
     align-items: center;
+    margin-bottom: 6px;
   }
 
   .tx {
-    padding: 8px 0px;
+    padding: 6px 0px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
     max-width: 40px;
     width: 100%;
     text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tx::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    background: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 5px,
+      rgba(255, 255, 255, 0.1) 5px,
+      rgba(255, 255, 255, 0.1) 10px
+    );
+    z-index: 1;
   }
 
   .out {
@@ -50,9 +70,11 @@
 
   .overlap.in {
     left: -14px;
+    background-color: rgba(11, 180, 137, 0.35);
   }
 
   .overlap.out {
     left: 14px;
+    background-color: rgba(255, 197, 49, 0.35);
   }
 </style>

From 4f7428617533ea02147598e97ff0e634d8e68e67 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Wed, 18 Dec 2024 12:42:31 +0100
Subject: [PATCH 4/4] fix: add undefined check for addresses

---
 packages/create-invoice-form/src/lib/invoice/form.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 484514ce..48bddf36 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -61,8 +61,8 @@
 
   const checkSameAddress = () => {
     return (
-      formData.payerAddress.toLowerCase() ===
-      formData.payeeAddress.toLowerCase()
+      formData.payerAddress?.toLowerCase() ===
+      formData.payeeAddress?.toLowerCase()
     );
   };