Merge branch 'frontend-transaction-version-jz'

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Android: enable export logs feature
 - Label UTXOs that were created as change, as such, in coin control
 - Remove support for deprecated the Ethereum Goerli network
+- Revamp transaction history in account overview to improve legibility
 
 # 4.45.0
 - Bundle BitBox02 firmware version v9.21.0

frontends/web/src/components/icon/icon.tsx

@@ -25,6 +25,9 @@ import arrowDownRedSVG from './assets/icons/arrow-down-red.svg';
 import arrowRightGraySVG from './assets/icons/arrow-right-gray.svg';
 import arrowUpGreenSVG from './assets/icons/arrow-up-green.svg';
 import arrowUpRedSVG from './assets/icons/arrow-up-red.svg';
+import arrowUTurn from './assets/icons/arrow-u-turn.svg';
+import arrowFloorUpRedSVG from './assets/icons/arrow-floor-up-red.svg';
+import arrowFloorDownGreenSVG from './assets/icons/arrow-floor-down-green.svg';
 import arrowCircleLeftSVG from './assets/icons/arrow-circle-left.svg';
 import arrowCircleLeftActiveSVG from './assets/icons/arrow-circle-left-active.svg';
 import arrowCircleRightSVG from './assets/icons/arrow-circle-right.svg';
@@ -59,11 +62,13 @@ import eyeOpenedDarkSVG from './assets/icons/eye-opened-dark.svg';
 import globeDarkSVG from './assets/icons/globe-dark.svg';
 import globeLightSVG from './assets/icons/globe-light.svg';
 import guideSVG from './assets/icons/guide.svg';
+import loupeSVG from './assets/icons/loupe.svg';
 import menuDarkSVG from './assets/icons/menu-dark.svg';
 import menuLightSVG from './assets/icons/menu-light.svg';
 import walletConnectDarkSVG from './assets/icons/wallet-connect-dark.svg';
 import walletConnectLightSVG from './assets/icons/wallet-connect-light.svg';
 import walletConnectDefaultSVG from './assets/icons/wallet-connect-default.svg';
+import warningSVG from './assets/icons/warning.svg';
 import warningPNG from './assets/icons/warning.png';
 import warningOutlinedSVG from './assets/icons/warning-outlined.svg';
 import qrCodeDarkSVG from './assets/icons/qr-dark.svg';
@@ -152,6 +157,9 @@ export const ArrowDownRed = (props: ImgProps) => (<img src={arrowDownRedSVG} dra
 export const ArrowRightGray = (props: ImgProps) => (<img src={arrowRightGraySVG} draggable={false} {...props} />);
 export const ArrowUpGreen = (props: ImgProps) => (<img src={arrowUpGreenSVG} draggable={false} {...props} />);
 export const ArrowUpRed = (props: ImgProps) => (<img src={arrowUpRedSVG} draggable={false} {...props} />);
+export const ArrowUTurn = (props: ImgProps) => (<img src={arrowUTurn} draggable={false} {...props} />);
+export const ArrowFloorUpRed = (props: ImgProps) => (<img src={arrowFloorUpRedSVG} draggable={false} {...props} />);
+export const ArrowFloorDownGreen = (props: ImgProps) => (<img src={arrowFloorDownGreenSVG} draggable={false} {...props} />);
 export const ArrowCirlceLeft = (props: ImgProps) => (<img src={arrowCircleLeftSVG} draggable={false} {...props} />);
 export const ArrowCirlceLeftActive = (props: ImgProps) => (<img src={arrowCircleLeftActiveSVG} draggable={false} {...props} />);
 export const ArrowCirlceRight = (props: ImgProps) => (<img src={arrowCircleRightSVG} draggable={false} {...props} />);
@@ -187,6 +195,7 @@ export const GlobeLight = (props: ImgProps) => (<img src={globeLightSVG} draggab
 export const GreenDot = (props: ImgProps) => (<img src={greenDotSVG} draggable={false} {...props} />);
 export const GuideActive = (props: ImgProps) => (<img src={guideSVG} draggable={false} {...props} />);
 export const Info = (props: ImgProps) => (<img src={info} draggable={false} {...props} />);
+export const Loupe = (props: ImgProps) => (<img src={loupeSVG} draggable={false} {...props} />);
 export const MenuDark = (props: ImgProps) => (<img src={menuDarkSVG} draggable={false} {...props} />);
 export const MenuLight = (props: ImgProps) => (<img src={menuLightSVG} draggable={false} {...props} />);
 export const OrangeDot = (props: ImgProps) => (<img src={orangeDotSVG} draggable={false} {...props} />);
@@ -204,7 +213,8 @@ export const StarInactive = (props: ImgProps) => (<img src={starInactiveSVG} dra
 export const Sync = (props: ImgProps) => (<img src={syncSVG} draggable={false} {...props} />);
 export const SyncLight = (props: ImgProps) => (<img src={syncLightSVG} draggable={false} {...props} />);
 export const SelectedCheckLight = (props: ImgProps) => (<img src={selectedCheckLightSVG} draggable={false} {...props} />);
-export const Warning = (props: ImgProps) => (<img src={warningPNG} draggable={false} {...props} />);
+export const Warning = (props: ImgProps) => (<img src={warningSVG} draggable={false} {...props} />);
+export const WarningOLD = (props: ImgProps) => (<img src={warningPNG} draggable={false} {...props} />);
 export const WarningOutlined = (props: ImgProps) => (<img src={warningOutlinedSVG} draggable={false} {...props} />);
 export const YellowDot = (props: ImgProps) => (<img src={yellowDotSVG} draggable={false} {...props} />);
 export const USBSuccess = (props: ImgProps) => (<img src={usbSuccessSVG} draggable={false} {...props} />);

frontends/web/src/components/transactions/components/address-or-txid.tsx

@@ -15,34 +15,7 @@
  */
 
 import { CopyableInput } from '@/components/copy/Copy';
-import transactionStyle from '@/components/transactions/transactions.module.css';
-import parentStyle from '@/components/transactions/transaction.module.css';
-
-type TPropsTxAddress = {
-  label: string;
-  addresses: string[];
-}
-
-export const TxAddress = ({
-  label,
-  addresses,
-}: TPropsTxAddress) => {
-  return (
-    <div className={transactionStyle.activity}>
-      <span className={parentStyle.label}>
-        {label}
-      </span>
-      <span className={parentStyle.address}>
-        {addresses[0]}
-        {addresses.length > 1 && (
-          <span className={parentStyle.badge}>
-                    (+{addresses.length - 1})
-          </span>
-        )}
-      </span>
-    </div>
-  );
-};
+import styles from './details.module.css';
 
 type TPropsTxDetailCopyableValues = {
   label: string;
@@ -54,16 +27,16 @@ export const TxDetailCopyableValues = ({
   values,
 }: TPropsTxDetailCopyableValues) => {
   return (
-    <div className={`${parentStyle.detail} ${parentStyle.addresses}`}>
+    <div className={`${styles.detail} ${styles.addresses}`}>
       <label>{label}</label>
-      <div className={parentStyle.detailAddresses}>
+      <div className={styles.detailAddresses}>
         {values.map((addrOrTxID) => (
           <CopyableInput
             key={addrOrTxID}
             alignRight
             borderLess
             flexibleHeight
-            className={parentStyle.detailAddress}
+            className={styles.detailAddress}
             value={addrOrTxID}
           />
         ))}

frontends/web/src/components/transactions/components/arrow.tsx → frontends/web/src/components/transactions/components/arrows.tsx

@@ -15,7 +15,7 @@
  */
 
 import type { TTransactionStatus, TTransactionType } from '@/api/account';
-import { ArrowDownGreen, ArrowRightGray, ArrowUpRed, Warning } from '@/components/icon/icon';
+import { ArrowFloorDownGreen, ArrowUTurn, ArrowFloorUpRed, Warning } from '@/components/icon/icon';
 
 type TProps = {
   status: TTransactionStatus;
@@ -25,20 +25,20 @@ type TProps = {
 export const Arrow = ({ status, type }: TProps) => {
   if (status === 'failed') {
     return (
-      <Warning style={{ maxWidth: '18px' }} />
+      <Warning />
     );
   }
-  if (type === 'receive') {
+  switch (type) {
+  case 'send':
     return (
-      <ArrowUpRed style={{ maxWidth: '18px' }} />
+      <ArrowFloorUpRed />
     );
-  }
-  if (type === 'send') {
+  case 'receive':
     return (
-      <ArrowDownGreen style={{ maxWidth: '18px' }} />
+      <ArrowFloorDownGreen />
     );
   }
   return (
-    <ArrowRightGray style={{ maxWidth: '18px' }} />
+    <ArrowUTurn />
   );
 };

frontends/web/src/components/transactions/components/date.tsx

@@ -15,31 +15,16 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { parseTimeShort } from '@/utils/date';
+import { parseTimeLongWithYear } from '@/utils/date';
 import { TxDetail } from './detail';
-import transactionsStyle from '@/components/transactions/transactions.module.css';
-import parentStyle from '@/components/transactions/transaction.module.css';
 
 type TProps = {
   time: string | null;
 }
 
-export const TxDate = ({ time }: TProps) => {
-  const { i18n, t } = useTranslation();
-  const shortDate = time ? parseTimeShort(time, i18n.language) : '---';
-  return (
-    <div className={transactionsStyle.date}>
-      <span className={parentStyle.columnLabel}>
-        {t('transaction.details.date')}:
-      </span>
-      <span className={parentStyle.date}>{shortDate}</span>
-    </div>
-  );
-};
-
 export const TxDateDetail = ({ time }: TProps) => {
   const { i18n, t } = useTranslation();
-  const shortDate = time ? parseTimeShort(time, i18n.language) : '---';
+  const shortDate = time ? parseTimeLongWithYear(time, i18n.language) : '---';
   return (
     <TxDetail
       label={t('transaction.details.date')}>

frontends/web/src/components/transactions/components/detail.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import parentStyle from '@/components/transactions/transaction.module.css';
+import styles from './details.module.css';
 
 type TProps = React.PropsWithChildren<{
   label: string;
@@ -25,7 +25,7 @@ export const TxDetail = ({
   children,
 }: TProps) => {
   return (
-    <div className={parentStyle.detail}>
+    <div className={styles.detail}>
       <label>{label}</label>
       <p>{children}</p>
     </div>

frontends/web/src/components/transactions/components/details.tsx → frontends/web/src/components/transactions/components/details-dialog.tsx

@@ -21,13 +21,13 @@ import { A } from '@/components/anchor/anchor';
 import { Dialog } from '@/components/dialog/dialog';
 import { FiatConversion } from '@/components/rates/rates';
 import { Amount } from '@/components/amount/amount';
-import { Note } from '@/components/transactions/note';
+import { Note } from './note';
 import { TxDetail } from './detail';
-import { Arrow } from './arrow';
+import { Arrow } from './arrows';
 import { TxDateDetail } from './date';
 import { TxStatusDetail } from './status';
 import { TxDetailCopyableValues } from './address-or-txid';
-import parentStyle from '@/components/transactions/transaction.module.css';
+import styles from './details.module.css';
 
 type TProps = {
   open: boolean;
@@ -42,7 +42,6 @@ type TProps = {
   time: string | null;
   amount: IAmount;
   sign: string;
-  typeClassName: string;
   explorerURL: string;
 }
 
@@ -59,7 +58,6 @@ export const TxDetailsDialog = ({
   time,
   amount,
   sign,
-  typeClassName,
   explorerURL,
 }: TProps) => {
   const { t } = useTranslation();
@@ -111,12 +109,12 @@ export const TxDetailsDialog = ({
           />
           <TxDateDetail time={time} />
           <TxDetail label={t('transaction.details.fiat')}>
-            <span className={`${parentStyle.fiat} ${typeClassName}`}>
+            <span className={styles.fiat}>
               <FiatConversion amount={amount} sign={sign} noAction />
             </span>
           </TxDetail>
           <TxDetail label={t('transaction.details.fiatAtTime')}>
-            <span className={`${parentStyle.fiat} ${typeClassName}`}>
+            <span className={styles.fiat}>
               {transactionInfo.amountAtTime ?
                 <FiatConversion amount={transactionInfo.amountAtTime} sign={sign} noAction />
                 :
@@ -125,19 +123,19 @@ export const TxDetailsDialog = ({
             </span>
           </TxDetail>
           <TxDetail label={t('transaction.details.amount')}>
-            <span className={`${parentStyle.amount} ${typeClassName}`}>
+            <span className={styles.amount}>
               {sign}
               <Amount amount={amount.amount} unit={amount.unit} />
             </span>
             {' '}
-            <span className={`${parentStyle.currencyUnit} ${typeClassName}`}>{transactionInfo.amount.unit}</span>
+            <span className={styles.currencyUnit}>{transactionInfo.amount.unit}</span>
           </TxDetail>
           {
             transactionInfo.fee && transactionInfo.fee.amount ? (
               <TxDetail label={t('transaction.fee')}>
                 <Amount amount={transactionInfo.fee.amount} unit={transactionInfo.fee.unit} />
                 {' '}
-                <span className={parentStyle.currencyUnit}>{transactionInfo.fee.unit}</span>
+                <span className={styles.currencyUnit}>{transactionInfo.fee.unit}</span>
               </TxDetail>
             ) : (
               <TxDetail label={t('transaction.fee')}>---</TxDetail>
@@ -162,7 +160,7 @@ export const TxDetailsDialog = ({
               <TxDetail label={t('transaction.weight')}>
                 {transactionInfo.weight}
                 {' '}
-                <span className={parentStyle.currencyUnit}>WU</span>
+                <span className={styles.currencyUnit}>WU</span>
               </TxDetail>
             ) : null
           }
@@ -171,7 +169,7 @@ export const TxDetailsDialog = ({
               <TxDetail label={t('transaction.vsize')}>
                 {transactionInfo.vsize}
                 {' '}
-                <span className={parentStyle.currencyUnit}>b</span>
+                <span className={styles.currencyUnit}>b</span>
               </TxDetail>
             ) : null
           }
@@ -180,15 +178,15 @@ export const TxDetailsDialog = ({
               <TxDetail label={t('transaction.size')}>
                 {transactionInfo.size}
                 {' '}
-                <span className={parentStyle.currencyUnit}>b</span>
+                <span className={styles.currencyUnit}>b</span>
               </TxDetail>
             ) : null
           }
           <TxDetailCopyableValues
             label={t('transaction.explorer')}
             values={[transactionInfo.txID]}
           />
-          <div className={`${parentStyle.detail} flex-center`}>
+          <div className={`${styles.detail} flex-center`}>
             <A
               href={explorerURL + transactionInfo.txID}
               title={`${t('transaction.explorerTitle')}\n${explorerURL}${transactionInfo.txID}`}>