feat: update formatting for amounts, add view on explorer links (#99)

CoreumFoundation · May 28, 2024 · c11a2b1 · c11a2b1
1 parent 96d1745
commit c11a2b1
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 72 deletions.
diff --git a/apps/web-coreum/package.json b/apps/web-coreum/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-coreum",
-  "version": "2.19.3-108",
+  "version": "2.19.3-109",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {

diff --git a/apps/web-coreum/public/locales/en/transactions.json b/apps/web-coreum/public/locales/en/transactions.json
@@ -45,5 +45,6 @@
   "route": "Route",
   "txHash_1": "Tx hash 1",
   "txHash_2": "Tx hash 2",
-  "destination": "Destination"
+  "destination": "Destination",
+  "view_on_xrpl_explorer": "View on XRPL Explorer"
 }
diff --git a/packages/ui/src/components/transactions_list_bridge/components/desktop/index.tsx b/packages/ui/src/components/transactions_list_bridge/components/desktop/index.tsx
@@ -171,7 +171,7 @@ const Desktop: FC<TransactionsListBridgeState> = ({
     if (asset?.denom_units[1].exponent) {
       const availableValue = new Big(+x.coin.amount)
         .div(Big(10).pow(asset?.denom_units[1].exponent))
-        .toFixed(asset?.denom_units[1].exponent);
+        .toFixed();
 
       amount = formatNumberWithThousandsSeparator(availableValue);
     }
@@ -183,7 +183,7 @@ const Desktop: FC<TransactionsListBridgeState> = ({
     if (x.source === 'xrpl' && tokenInAssets?.extra.xrpl_info?.precision) {
       const availableValue = new Big(+x.coin.amount)
         .div(Big(10).pow(tokenInAssets?.extra.xrpl_info?.precision))
-        .toFixed(tokenInAssets?.extra.xrpl_info?.precision);
+        .toFixed();
 
       amount = formatNumberWithThousandsSeparator(availableValue);
     }
@@ -205,7 +205,7 @@ const Desktop: FC<TransactionsListBridgeState> = ({
         const tokenDenom = tokenInAssets.extra.ibc_info!.display_name;
         const availableValue = new Big(+x.coin.amount)
           .div(Big(10).pow(tokenInAssets.extra.ibc_info!.precision))
-          .toFixed(tokenInAssets.extra.ibc_info!.precision);
+          .toFixed();
 
         amount = formatNumberWithThousandsSeparator(availableValue);
         displayDenom = tokenDenom;
@@ -221,23 +221,40 @@ const Desktop: FC<TransactionsListBridgeState> = ({
           <span className={classes.denom}>{displayDenom}</span>
         </Typography>
       ),
-      sender: (
-        <Tooltip TransitionComponent={Zoom} title={<pre>{x.sender}</pre>} placement="bottom" arrow>
+      sender:
+        x.source === 'xrpl' ? (
           <Link
             shallow
             prefetch={false}
             target="_blank"
-            href={
-              x.source === 'coreum' ? ACCOUNT_DETAILS(x.sender) : XRPL_ACCOUNT_DETAILS(x.sender)
-            }
+            href={XRPL_TRANSACTION_DETAILS(x.txHash_1)}
+            className={classes.link}
           >
-            {getMiddleEllipsis(x?.sender || '', {
-              beginning: 7,
-              ending: 4,
-            })}
+            {t('view_on_xrpl_explorer')}
           </Link>
-        </Tooltip>
-      ),
+        ) : (
+          <Tooltip
+            TransitionComponent={Zoom}
+            title={<pre>{x.sender}</pre>}
+            placement="bottom"
+            arrow
+          >
+            <Link
+              shallow
+              prefetch={false}
+              target="_blank"
+              href={
+                x.source === 'coreum' ? ACCOUNT_DETAILS(x.sender) : XRPL_ACCOUNT_DETAILS(x.sender)
+              }
+              className={classes.link}
+            >
+              {getMiddleEllipsis(x?.sender || '', {
+                beginning: 7,
+                ending: 4,
+              })}
+            </Link>
+          </Tooltip>
+        ),
       destination: (
         <Tooltip
           TransitionComponent={Zoom}
@@ -254,6 +271,7 @@ const Desktop: FC<TransactionsListBridgeState> = ({
                 ? ACCOUNT_DETAILS(x.destination)
                 : XRPL_ACCOUNT_DETAILS(x.destination)
             }
+            className={classes.link}
           >
             {getMiddleEllipsis(x?.destination || '', {
               beginning: 7,
@@ -278,6 +296,7 @@ const Desktop: FC<TransactionsListBridgeState> = ({
                 ? TRANSACTION_DETAILS(x.txHash_1)
                 : XRPL_TRANSACTION_DETAILS(x.txHash_1)
             }
+            className={classes.link}
           >
             {getMiddleEllipsis(x?.txHash_1 || '', {
               beginning: 7,
@@ -302,6 +321,7 @@ const Desktop: FC<TransactionsListBridgeState> = ({
                 ? TRANSACTION_DETAILS(x.txHash_2)
                 : XRPL_TRANSACTION_DETAILS(x.txHash_2)
             }
+            className={classes.link}
           >
             {getMiddleEllipsis(x?.txHash_2 || '-', {
               beginning: 7,

diff --git a/packages/ui/src/components/transactions_list_bridge/components/desktop/styles.ts b/packages/ui/src/components/transactions_list_bridge/components/desktop/styles.ts
@@ -98,6 +98,9 @@ const useStyles = makeStyles()((theme) => ({
   arrows: {
     transform: 'rotate(-90deg)',
   },
+  link: {
+    fontSize: theme.spacing(1.75),
+  },
 }));
 
 export default useStyles;
diff --git a/packages/ui/src/components/transactions_list_bridge/components/desktop/utils.tsx b/packages/ui/src/components/transactions_list_bridge/components/desktop/utils.tsx
@@ -7,10 +7,6 @@ export const columns: {
     key: 'route',
     width: 12,
   },
-  {
-    key: 'amount',
-    width: 15,
-  },
   {
     key: 'sender',
     width: 15,
@@ -27,6 +23,11 @@ export const columns: {
     key: 'txHash_2',
     width: 15,
   },
+  {
+    key: 'amount',
+    align: 'right',
+    width: 15,
+  },
   {
     key: 'time',
     align: 'right',

diff --git a/packages/ui/src/components/transactions_list_bridge/components/mobile/index.tsx b/packages/ui/src/components/transactions_list_bridge/components/mobile/index.tsx
@@ -20,6 +20,7 @@ import Big from 'big.js';
 import Lottie from 'lottie-react';
 import arrows from '@/assets/arrows.json';
 import { XRPL_ACCOUNT_DETAILS, XRPL_TRANSACTION_DETAILS } from '@/utils/go_to_page';
+import { useTranslation } from 'next-i18next';
 
 type ListItemProps = Pick<ListChildComponentProps, 'index' | 'style'> & {
   setRowHeight: Parameters<typeof useListRow>[1];
@@ -41,7 +42,7 @@ const ListItem: FC<ListItemProps> = ({
   metadatas,
 }) => {
   const { classes } = useStyles();
-  // const { t } = useTranslation('transactions');
+  const { t } = useTranslation('transactions');
   const { rowRef } = useListRow(index, setRowHeight);
 
   const renderSource = useCallback((source: string) => {
@@ -184,7 +185,7 @@ const ListItem: FC<ListItemProps> = ({
   if (asset?.denom_units[1].exponent) {
     const availableValue = new Big(+transaction.coin.amount)
       .div(Big(10).pow(asset?.denom_units[1].exponent))
-      .toFixed(asset?.denom_units[1].exponent);
+      .toFixed();
 
     amount = formatNumberWithThousandsSeparator(availableValue);
   }
@@ -196,7 +197,7 @@ const ListItem: FC<ListItemProps> = ({
   if (transaction.source === 'xrpl' && tokenInAssets?.extra.xrpl_info?.precision) {
     const availableValue = new Big(+transaction.coin.amount)
       .div(Big(10).pow(tokenInAssets?.extra.xrpl_info?.precision))
-      .toFixed(tokenInAssets?.extra.xrpl_info?.precision);
+      .toFixed();
 
     amount = formatNumberWithThousandsSeparator(availableValue);
   }
@@ -218,7 +219,7 @@ const ListItem: FC<ListItemProps> = ({
       const tokenDenom = tokenInAssets.extra.ibc_info!.display_name;
       const availableValue = new Big(+transaction.coin.amount)
         .div(Big(10).pow(tokenInAssets.extra.ibc_info!.precision))
-        .toFixed(tokenInAssets.extra.ibc_info!.precision);
+        .toFixed();
 
       amount = formatNumberWithThousandsSeparator(availableValue);
       displayDenom = tokenDenom;
@@ -234,30 +235,42 @@ const ListItem: FC<ListItemProps> = ({
         <span className={classes.denom}>{displayDenom}</span>
       </Typography>
     ),
-    sender: (
-      <Tooltip
-        TransitionComponent={Zoom}
-        title={<pre>{transaction.sender}</pre>}
-        placement="bottom"
-        arrow
-      >
+    sender:
+      transaction.source === 'xrpl' ? (
         <Link
           shallow
           prefetch={false}
           target="_blank"
-          href={
-            transaction.source === 'coreum'
-              ? ACCOUNT_DETAILS(transaction.sender)
-              : XRPL_ACCOUNT_DETAILS(transaction.sender)
-          }
+          href={XRPL_TRANSACTION_DETAILS(transaction.txHash_1)}
+          className={classes.link}
         >
-          {getMiddleEllipsis(transaction?.sender || '', {
-            beginning: 7,
-            ending: 4,
-          })}
+          {t('view_on_xrpl_explorer')}
         </Link>
-      </Tooltip>
-    ),
+      ) : (
+        <Tooltip
+          TransitionComponent={Zoom}
+          title={<pre>{transaction.sender}</pre>}
+          placement="bottom"
+          arrow
+        >
+          <Link
+            shallow
+            prefetch={false}
+            target="_blank"
+            href={
+              transaction.source === 'coreum'
+                ? ACCOUNT_DETAILS(transaction.sender)
+                : XRPL_ACCOUNT_DETAILS(transaction.sender)
+            }
+            className={classes.link}
+          >
+            {getMiddleEllipsis(transaction?.sender || '', {
+              beginning: 7,
+              ending: 4,
+            })}
+          </Link>
+        </Tooltip>
+      ),
     destination: (
       <Tooltip
         TransitionComponent={Zoom}
@@ -274,6 +287,7 @@ const ListItem: FC<ListItemProps> = ({
               ? ACCOUNT_DETAILS(transaction.destination)
               : XRPL_ACCOUNT_DETAILS(transaction.destination)
           }
+          className={classes.link}
         >
           {getMiddleEllipsis(transaction?.destination || '', {
             beginning: 7,
@@ -298,6 +312,7 @@ const ListItem: FC<ListItemProps> = ({
               ? TRANSACTION_DETAILS(transaction.txHash_1)
               : XRPL_TRANSACTION_DETAILS(transaction.txHash_1)
           }
+          className={classes.link}
         >
           {getMiddleEllipsis(transaction?.txHash_1 || '', {
             beginning: 7,
@@ -322,6 +337,7 @@ const ListItem: FC<ListItemProps> = ({
               ? TRANSACTION_DETAILS(transaction.txHash_2)
               : XRPL_TRANSACTION_DETAILS(transaction.txHash_2)
           }
+          className={classes.link}
         >
           {getMiddleEllipsis(transaction?.txHash_2 || '', {
             beginning: 7,

diff --git a/packages/ui/src/components/transactions_list_bridge/components/mobile/styles.ts b/packages/ui/src/components/transactions_list_bridge/components/mobile/styles.ts
@@ -39,6 +39,9 @@ const useStyles = makeStyles()((theme) => ({
   arrows: {
     transform: 'rotate(-90deg)',
   },
+  link: {
+    fontSize: theme.spacing(2),
+  },
 }));
 
 export default useStyles;