Merge pull request #516 from Magickbase/develop

components/AccountOverview/styles.module.scss

@@ -35,6 +35,10 @@
 
 .balance {
   text-transform: none;
+  b,
+  span {
+    font-weight: 400 !important;
+  }
 }
 
 @media screen and (max-width: 1024px) {

components/AssetList/index.tsx

@@ -4,8 +4,9 @@ import { gql } from 'graphql-request'
 import BigNumber from 'bignumber.js'
 import Table from 'components/Table'
 import TokenLogo from 'components/TokenLogo'
-import { parseTokenName, client, GraphQLSchema } from 'utils'
+import Amount from 'components/Amount'
 import NoDataIcon from 'assets/icons/no-data.svg'
+import { parseTokenName, client, GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
 
 export type UdtList = Array<{
@@ -57,10 +58,6 @@ const AssetList = ({ list = [] }: { list: UdtList }) => {
       <tbody className={styles.tableBody}>
         {list.length ? (
           list.map(item => {
-            const [amountInt, amountFrac] = new BigNumber(item.value ?? '0')
-              .dividedBy(10 ** (item.udt.decimal ?? 0))
-              .toFormat()
-              .split('.')
             return (
               <tr key={item.udt.id}>
                 <td>
@@ -79,11 +76,7 @@ const AssetList = ({ list = [] }: { list: UdtList }) => {
                   {t(item.udt.type === GraphQLSchema.UdtType.Native ? 'native' : 'bridged')}
                 </td>
                 <td>
-                  <div className={styles.amount}>
-                    <span>{amountInt}</span>
-                    {amountFrac ? <span className={styles.frac}>{`.${amountFrac}`}</span> : null}
-                  </div>
-                  <span className={styles.symbol}>{item.udt.symbol ?? ''}</span>
+                  <Amount amount={item.value} udt={item.udt} />
                 </td>
               </tr>
             )

components/RoundedAmount.tsx

@@ -11,7 +11,7 @@ const RoundedAmount: React.FC<{ amount: string; udt: { decimal: number; symbol:
   const isExact = new BigNumber(roundedAmount).isEqualTo(a)
   return (
     <Tooltip title={`${a.toFormat()} ${symbol?.split('.')[0] ?? ''}`} placement="top">
-      <b style={{ fontWeight: 500 }}>
+      <b style={{ whiteSpace: 'nowrap', fontWeight: 500 }}>
         {`${isExact ? '' : '≈ '}`}
         <span>{new BigNumber(rInt).toFormat()}</span>
         {rFrac ? <span style={{ color: 'var(--amount-frac-color)' }}>{`.${rFrac}`}</span> : null}

pages/token/styles.module.scss

@@ -42,6 +42,10 @@
   }
   dd {
     text-transform: none;
+    span,
+    b {
+      font-weight: 400 !important;
+    }
   }
 }
 

pages/tx/[hash].tsx

@@ -142,7 +142,7 @@ const Tx = () => {
       ) : tx ? (
         <HashLink label={tx.from} href={`/address/${tx.from}`} style={{ wordBreak: 'break-all' }} />
       ) : (
-        '-'
+        t('pending')
       ),
     },
     {
@@ -152,7 +152,7 @@ const Tx = () => {
       ) : tx ? (
         <HashLink label={tx.toAlias || tx.to} href={`/address/${tx.to}`} />
       ) : (
-        '-'
+        t('pending')
       ),
     },
     tx?.contractAddress?.length === ADDR_LENGTH
@@ -164,10 +164,12 @@ const Tx = () => {
     {
       field: t('value'),
       // FIXME: tx.value is formatted incorrectly
-      content: (
+      content: tx?.value ? (
         <div className={styles.value}>
-          <Amount amount={tx?.value ?? '0'} udt={{ decimal: 10, symbol: PCKB_UDT_INFO.symbol }} showSymbol />
+          <Amount amount={tx?.value || '0'} udt={{ decimal: 10, symbol: PCKB_UDT_INFO.symbol }} showSymbol />
         </div>
+      ) : (
+        t('pending')
       ),
     },
     tx?.input
@@ -220,60 +222,58 @@ const Tx = () => {
         t('pending')
       ),
     },
-    { field: t('index'), content: tx?.index ?? '-' },
+    { field: t('index'), content: tx?.index ?? t('pending') },
     { field: t('nonce'), content: tx ? (tx.nonce || 0).toLocaleString('en') : <Skeleton animation="wave" /> },
     {
       field: t('status'),
       content: tx ? <PolyjuiceStatus status={tx.polyjuiceStatus ?? null} /> : <Skeleton animation="wave" />,
     },
     {
       field: t('gasPrice'),
-      content:
-        tx && tx.gasPrice !== null ? (
-          <span className={styles.gasPrice}>{`${new BigNumber(tx.gasPrice).toFormat()} ${PCKB_UDT_INFO.symbol}`}</span>
-        ) : isTxLoading ? (
-          <Skeleton animation="wave" />
-        ) : (
-          '-'
-        ),
+      content: tx?.gasPrice ? (
+        <span className={styles.gasPrice}>{`${new BigNumber(tx.gasPrice).toFormat()} ${PCKB_UDT_INFO.symbol}`}</span>
+      ) : isTxLoading ? (
+        <Skeleton animation="wave" />
+      ) : (
+        t('pending')
+      ),
     },
     {
       field: t('gasUsed'),
       content:
-        tx && tx.gasUsed !== null && tx.polyjuiceStatus !== 'pending' ? (
+        tx && tx.gasUsed ? (
           new BigNumber(tx.gasUsed).toFormat()
         ) : isTxLoading ? (
           <Skeleton animation="wave" />
         ) : (
-          '-'
+          t('pending')
         ),
     },
     {
       field: t('gasLimit'),
-      content:
-        tx && tx.gasLimit !== null ? (
-          new BigNumber(tx.gasLimit).toFormat()
-        ) : isTxLoading ? (
-          <Skeleton animation="wave" />
-        ) : (
-          '-'
-        ),
+      content: tx?.gasLimit ? (
+        new BigNumber(tx.gasLimit).toFormat()
+      ) : isTxLoading ? (
+        <Skeleton animation="wave" />
+      ) : (
+        t('pending')
+      ),
     },
     {
       field: t('fee'),
       content:
-        tx && tx.gasPrice !== null && typeof tx.gasUsed !== null && tx.polyjuiceStatus !== 'pending' ? (
+        tx && tx.gasPrice && tx.gasUsed ? (
           <span className={styles.gasFee}>
             <Amount
-              amount={`${new BigNumber(tx.gasUsed).times(new BigNumber(tx.gasPrice))} `}
+              amount={`${new BigNumber(tx.gasUsed).times(new BigNumber(tx.gasPrice))}`}
               udt={{ decimal: 0, symbol: PCKB_UDT_INFO.symbol }}
               showSymbol
             />
           </span>
         ) : isTxLoading ? (
           <Skeleton animation="wave" />
         ) : (
-          '-'
+          t('pending')
         ),
     },
     {

pages/tx/styles.module.scss

@@ -30,6 +30,11 @@
   .gasPrice,
   .gasFee {
     text-transform: none;
+
+    b,
+    span {
+      font-weight: 400 !important;
+    }
   }
 
   a {