[Explorer] Adds Sender / Recipients / Amount data to Pay transaction …

…type (MystenLabs#5570)

* creates amount field

* handles multiple recipients

* timestamp at the top

* fix data presentation

* CSS changes

* sets up display when multiple recipients

* adds LShape SVG and splits out logic

* creates basic one Sender/Receiver

* replace done icon

* extends green to multiple recipients

* fixes text alignment issues

* i before e except after c

* adds amounts

* improve recipients gap

* typecheck improvements

* updates tests

* fixes dashed line display across a variety of devices

* Coin label is extracted

* creates Amount component

* uses useFormat

* updates amount when one recipient

* display info extracted correctly

* use media query for line length

* balances out the padding

* fixes typecheck errors

* switches useEffect to useQuery

* uses new Heading components

* uses enabled flag in useQuery

* removes network dependency

* further refactoring

* uses regex in sdk

* further refactoring

* further refactoring

apps/explorer/cypress/e2e/static/e2e.cy.ts

@@ -42,8 +42,8 @@ describe('End-to-end Tests', () => {
 
         it('includes the sender time information', () => {
             cy.visit(`/transactions/${successID}`);
-            cy.get('[data-testid=transaction-sender]').contains(
-                'Sun, 15 Dec 2024 00:00:00 GMT'
+            cy.get('[data-testid=transaction-timestamp]').contains(
+                'Dec 15, 2024, 00:00:00 UTC'
             );
         });
     });

apps/explorer/src/pages/transaction-result/SendReceiveView.module.css

@@ -1,121 +1,104 @@
-.txaddress ul {
-    @apply list-none p-0;
-}
-
-.txaddresssender a,
-.txaddresssender,
-.txaddress ul li a {
+.txaddress a {
     @apply break-all font-mono text-sm text-sui-dark;
 }
 
-.label span {
-    @apply block sm:inline text-sui-grey-80 font-[500] text-[13px] mb-2;
+.txaddress h4 {
+    @apply m-0 font-semibold text-heading4;
 }
 
-.recipient.txaddresssender a,
-.recipient.txaddresssender span {
-    @apply pl-0 pr-0 mx-0;
+.label {
+    border-bottom: 1px solid #f0f1f2;
+    @apply text-sui-grey-100 font-[500] text-lg  mt-0 mb-2 border-b-[1px] border-[#f0f1f2] md:border-0;
 }
 
-.txaddress ul li div {
-    @apply ml-2;
+.oneaddress {
+    @apply flex gap-[8px] items-center text-[14px] leading-[90%] w-[99%];
 }
 
-.recipient.txaddresssender > div {
-    @apply ml-2;
+.oneaddress a {
+    @apply pr-[8px];
 }
 
-.txaddress ul li {
-    @apply p-1.5 pl-5 md:pl-4 pr-0  ml-2;
-
-    display: flex;
-    align-items: center;
+.recipientbox {
+    @apply flex flex-col items-start gap-[20px];
 }
 
-.txaddresssender {
-    @apply relative mt-1;
+.senderbox {
+    @apply flex flex-col gap-[10px];
 }
 
-.recipient.txaddresssender {
-    @apply pl-1.5;
+.recipientbox h4 {
+    @apply mt-[30px];
 }
 
-.recipient.txaddresssender::before {
-    content: '';
-    background-image: url('../../assets/SVGIcons/Start.svg');
-    background-size: 16px 16px;
-    height: 16px;
-    width: 16px;
-    position: absolute;
-    margin-left: -13px;
-    z-index: 2;
-    display: flex;
-    align-items: center;
+.oneheading {
+    @apply mb-[25px];
 }
 
-.recipient.txaddresssender::after {
-    @apply ml-[-0.5rem];
-
-    top: 10px;
-    content: '';
-    position: absolute;
-    margin-left: -5px;
-    height: 15%;
-
-    /* Sui Steel Blue */
+.doneicon svg {
+    @apply fill-success;
+}
 
-    border: 1px dashed #a0b6c3;
-    border-right: none;
-    border-bottom: none;
+.sui {
+    @apply mt-[9.5px] flex flex-row items-start gap-[4px];
 }
 
-.label {
-    border-bottom: 1px solid #f0f1f2;
-    @apply text-sui-grey-100 font-[500] text-lg  mt-0 mb-2 border-b-[1px] border-[#f0f1f2] md:border-0;
+.suiamount {
+    @apply text-heading6 font-semibold ml-[24px] text-sui-grey-100;
 }
 
-.txaddressheader {
-    display: inline-block;
+.suilabel {
+    @apply text-bodySmall pt-[2px] text-sui-grey-80;
 }
 
-.txrecipents {
-    @apply break-all relative mt-0 !important;
+.doneiconwline {
+    @apply relative ml-[10px];
 }
 
-.txrecipents li::before {
+.doneiconwline::before {
     content: '';
-    @apply text-white;
-
-    background-image: url('../../assets/SVGIcons/Done.svg');
-    background-size: 16px 16px;
-    height: 16px;
-    width: 16px;
+    display: block;
     position: absolute;
-    left: 8px;
-    z-index: 2;
-    display: flex;
-    align-items: center;
+    bottom: 50%;
+    right: 16px;
+    width: 12px;
+    height: 200%;
+    border: 1px dashed #a0b6c3;
+    border-bottom-left-radius: 4px;
+    border-right: none;
+    border-top: none;
+    overflow: hidden;
 }
 
-.txrecipents li::after {
-    @apply ml-[-0.5rem];
+@media only screen and (max-width: 439px) {
+    .doneiconwline::before {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 50%;
+        right: 16px;
+        width: 12px;
+        height: 300%;
+        border: 1px dashed #a0b6c3;
+        border-bottom-left-radius: 4px;
+        border-right: none;
+        border-top: none;
+        overflow: hidden;
+    }
+}
 
-    content: '';
-    position: absolute;
-    width: 40px;
-    height: 20px;
-    left: -7px;
-    margin-top: -40px;
+.amountbox {
+    @apply mt-[10px];
+}
 
-    /* Sui Steel Blue */
+.amountbox > :first-child {
+    @apply font-semibold text-sui-grey-100 text-heading4 mb-[10px];
+}
 
-    border: 1px dashed #a0b6c3;
-    border-right: none;
-    border-bottom: none;
-    border-radius: 4px;
-    transform: rotate(270deg);
+.amountbox > :nth-child(2) {
+    @apply font-bold text-sui-grey-90 text-[24px] h-[19px] leading-[80%] mt-0 mb-[40px];
 }
 
-.txrecipents li :first-child::after {
-    height: 20px;
+.amountbox > :nth-child(2) sup {
+    @apply font-medium text-sui-grey-80 text-[13px] h-[13px] leading-[100%] ml-[4px];
 }