From 188c1ff95d92679d4bd77b83afd02d5a70b0e5bf Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Fri, 26 Apr 2024 05:09:07 +0200
Subject: [PATCH 1/2] Change transaction layout to accommodate large numbers in
 extension

---
 .changelog/2003.trivial.md               |  1 +
 src/app/components/Transaction/index.tsx | 15 +++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changelog/2003.trivial.md

diff --git a/.changelog/2003.trivial.md b/.changelog/2003.trivial.md
new file mode 100644
index 0000000000..fc22f54916
--- /dev/null
+++ b/.changelog/2003.trivial.md
@@ -0,0 +1 @@
+Change transaction layout to accommodate large numbers in extension
diff --git a/src/app/components/Transaction/index.tsx b/src/app/components/Transaction/index.tsx
index 74aa6249d2..f129f444ab 100644
--- a/src/app/components/Transaction/index.tsx
+++ b/src/app/components/Transaction/index.tsx
@@ -61,6 +61,7 @@ type TransactionDictionary = {
 
 const StyledCardBody = styled(CardBody)`
   flex-direction: row;
+  justify-content: space-between;
 
   @media only screen and (min-width: ${({ theme }) =>
       // TODO: extend theme global breakpoints with more breakpoints or at least with 1024px. Requires Sidebar refactor and Grommet lib validation
@@ -428,7 +429,7 @@ export function Transaction(props: TransactionProps) {
         </Text>
       </CardHeader>
       <StyledCardBody margin={{ bottom: 'small' }}>
-        <Box width="75%">
+        <Box>
           {isMobile && (
             <Box pad={{ left: 'small' }}>
               <Text size="16px" margin={{ bottom: 'xsmall' }}>
@@ -443,7 +444,7 @@ export function Transaction(props: TransactionProps) {
           )}
 
           {!isMobile && (
-            <Grid columns={{ count: 'fit', size: 'xsmall' }} gap="none">
+            <Grid columns={{ count: 2, size: 'max-content' }} width="max-content" gap="none">
               <Box pad="none">
                 <InfoBox copyToClipboardValue={otherAddress} icon={ContactInfo} label={destination}>
                   {otherAddress ? (
@@ -483,8 +484,13 @@ export function Transaction(props: TransactionProps) {
             </Grid>
           )}
         </Box>
-        <Box width="25%" align="end" pad={{ right: 'small' }} margin={{ top: 'xsmall' }}>
-          <Text weight="bold" size={isMobile ? 'medium' : 'xlarge'}>
+        <Box pad={{ right: 'small' }}>
+          <Text
+            weight="bold"
+            size={isMobile ? 'medium' : 'xlarge'}
+            margin={{ bottom: 'xsmall' }}
+            textAlign="end"
+          >
             <AmountFormatter amount={transaction.amount!} smallTicker />
           </Text>
           <Text
@@ -501,6 +507,7 @@ export function Transaction(props: TransactionProps) {
             })()}
             size="small"
             weight="bold"
+            textAlign="end"
           >
             {(() => {
               switch (transaction.status) {

From 837f0af27355ee35edd6199a78d6dd358e11283a Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Sat, 13 Jul 2024 02:26:06 +0200
Subject: [PATCH 2/2] Update jest snapshots

---
 .../__snapshots__/index.test.tsx.snap         | 178 +++++++-----------
 1 file changed, 72 insertions(+), 106 deletions(-)

diff --git a/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
index 730c7ceb8a..35c59fc4ba 100644
--- a/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Transaction/__tests__/__snapshots__/index.test.tsx.snap
@@ -147,7 +147,6 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 75%;
 }
 
 .c9 {
@@ -231,21 +230,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   justify-content: center;
 }
 
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -260,28 +245,22 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   padding: 12px;
 }
 
-.c19 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  margin-top: 6px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 25%;
   padding-right: 12px;
 }
 
-.c23 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -317,7 +296,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   width: 12px;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -332,7 +311,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   cursor: pointer;
 }
 
-.c24:hover {
+.c23:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -340,8 +319,11 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
 .c8 {
   display: grid;
   box-sizing: border-box;
-  grid-template-columns: repeat( auto-fit,minmax(min(96px,100%),1fr) );
+  grid-template-columns: repeat( 2,minmax(max-content,1fr) );
   grid-gap: 0px 0px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
 }
 
 .c4 {
@@ -357,37 +339,40 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   font-weight: bold;
 }
 
-.c17 {
+.c16 {
   font-size: 18px;
   line-height: 24px;
 }
 
-.c20 {
+.c19 {
+  margin-bottom: 6px;
   font-size: 26px;
   line-height: 32px;
+  text-align: right;
   font-weight: bold;
 }
 
-.c21 {
+.c20 {
   font-size: 12px;
   line-height: 18px;
   color: ticker;
   font-weight: 600;
 }
 
-.c22 {
+.c21 {
   font-size: 14px;
   line-height: 20px;
+  text-align: right;
   color: successful-label;
   font-weight: bold;
 }
 
-.c25 {
+.c24 {
   font-size: 14px;
   line-height: 20px;
 }
 
-.c16 {
+.c15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -405,6 +390,10 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 @media only screen and (max-width:768px) {
@@ -462,19 +451,13 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
 }
 
 @media only screen and (max-width:768px) {
-  .c18 {
+  .c17 {
     padding: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c19 {
-    margin-top: 3px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c19 {
+  .c18 {
     padding-right: 6px;
   }
 }
@@ -573,10 +556,10 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
                 account.transaction.unrecognizedTransaction.destination
               </span>
               <div
-                class="c15 c16"
+                class="c7 c15"
               >
                 <span
-                  class="c17"
+                  class="c16"
                   style="overflow-wrap: anywhere;"
                 >
                   source
@@ -617,7 +600,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
                 common.hash
               </span>
               <span
-                class="c17"
+                class="c16"
               >
                 ff1234
               </span>
@@ -628,7 +611,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
           class="c9"
         >
           <div
-            class="c18"
+            class="c17"
           >
             <div
               class="c11"
@@ -669,20 +652,20 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
       </div>
     </div>
     <div
-      class="c19"
+      class="c18"
     >
       <span
-        class="c20"
+        class="c19"
       >
         <span>
           <div
-            class="c15"
+            class="c7"
             style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
           >
             0.001
           </div>
           <span
-            class="c21"
+            class="c20"
           >
             <span
               class="notranslate"
@@ -694,7 +677,7 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
         </span>
       </span>
       <span
-        class="c22"
+        class="c21"
       >
         <span>
           account.transaction.successful
@@ -703,17 +686,17 @@ exports[`<Transaction  /> should handle unknown transaction types gracefully 1`]
     </div>
   </div>
   <footer
-    class="c23"
+    class="c22"
   >
     <a
-      class="c24"
+      class="c23"
       data-testid="explorer-link"
       href="https://oasisscan.com/transactions/ff1234"
       rel="noopener"
       target="_blank"
     >
       <span
-        class="c25"
+        class="c24"
       >
         account.transaction.explorerLink
       </span>
@@ -881,7 +864,6 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 75%;
 }
 
 .c9 {
@@ -965,21 +947,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   justify-content: center;
 }
 
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -994,28 +962,22 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   padding: 12px;
 }
 
-.c19 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  margin-top: 6px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 25%;
   padding-right: 12px;
 }
 
-.c23 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1051,7 +1013,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   width: 12px;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1066,7 +1028,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c24:hover {
+.c23:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -1074,8 +1036,11 @@ exports[`<Transaction  /> should match snapshot 1`] = `
 .c8 {
   display: grid;
   box-sizing: border-box;
-  grid-template-columns: repeat( auto-fit,minmax(min(96px,100%),1fr) );
+  grid-template-columns: repeat( 2,minmax(max-content,1fr) );
   grid-gap: 0px 0px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
 }
 
 .c4 {
@@ -1091,37 +1056,40 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c17 {
+.c16 {
   font-size: 18px;
   line-height: 24px;
 }
 
-.c20 {
+.c19 {
+  margin-bottom: 6px;
   font-size: 26px;
   line-height: 32px;
+  text-align: right;
   font-weight: bold;
 }
 
-.c21 {
+.c20 {
   font-size: 12px;
   line-height: 18px;
   color: ticker;
   font-weight: 600;
 }
 
-.c22 {
+.c21 {
   font-size: 14px;
   line-height: 20px;
+  text-align: right;
   color: successful-label;
   font-weight: bold;
 }
 
-.c25 {
+.c24 {
   font-size: 14px;
   line-height: 20px;
 }
 
-.c16 {
+.c15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1139,6 +1107,10 @@ exports[`<Transaction  /> should match snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 @media only screen and (max-width:768px) {
@@ -1196,19 +1168,13 @@ exports[`<Transaction  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c18 {
+  .c17 {
     padding: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c19 {
-    margin-top: 3px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c19 {
+  .c18 {
     padding-right: 6px;
   }
 }
@@ -1307,10 +1273,10 @@ exports[`<Transaction  /> should match snapshot 1`] = `
                 common.from
               </span>
               <div
-                class="c15 c16"
+                class="c7 c15"
               >
                 <span
-                  class="c17"
+                  class="c16"
                   style="overflow-wrap: anywhere;"
                 >
                   source
@@ -1351,7 +1317,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
                 common.hash
               </span>
               <span
-                class="c17"
+                class="c16"
               >
                 ff1234
               </span>
@@ -1362,7 +1328,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
           class="c9"
         >
           <div
-            class="c18"
+            class="c17"
           >
             <div
               class="c11"
@@ -1403,20 +1369,20 @@ exports[`<Transaction  /> should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c19"
+      class="c18"
     >
       <span
-        class="c20"
+        class="c19"
       >
         <span>
           <div
-            class="c15"
+            class="c7"
             style="display: inline-flex; white-space: nowrap; font-family: "Roboto mono", monospace; letter-spacing: 0;"
           >
             0.001
           </div>
           <span
-            class="c21"
+            class="c20"
           >
             <span
               class="notranslate"
@@ -1428,7 +1394,7 @@ exports[`<Transaction  /> should match snapshot 1`] = `
         </span>
       </span>
       <span
-        class="c22"
+        class="c21"
       >
         <span>
           account.transaction.successful
@@ -1437,17 +1403,17 @@ exports[`<Transaction  /> should match snapshot 1`] = `
     </div>
   </div>
   <footer
-    class="c23"
+    class="c22"
   >
     <a
-      class="c24"
+      class="c23"
       data-testid="explorer-link"
       href="https://oasisscan.com/transactions/ff1234"
       rel="noopener"
       target="_blank"
     >
       <span
-        class="c25"
+        class="c24"
       >
         account.transaction.explorerLink
       </span>