feat(core): show positive dapp tx token quantity in green LW-9887

input-output-hk · Mar 21, 2024 · 0dcd03b · 0dcd03b
1 parent e192078
commit 0dcd03b
Show file tree

Hide file tree

Showing 15 changed files with 101 additions and 33 deletions.
diff --git a/packages/core/src/ui/components/ActivityDetail/TransactionFee.tsx b/packages/core/src/ui/components/ActivityDetail/TransactionFee.tsx
@@ -11,6 +11,7 @@ export interface TransactionFeeProps {
   testId?: string;
   tooltipInfo?: string;
   displayFiat?: boolean;
+  highlightPositiveAmount?: boolean;
 }
 export const TransactionFee = ({
   fee,
@@ -20,7 +21,8 @@ export const TransactionFee = ({
   className,
   testId,
   tooltipInfo,
-  displayFiat
+  displayFiat,
+  highlightPositiveAmount
 }: TransactionFeeProps): React.ReactElement => {
   const { t } = useTranslate();
 
@@ -33,6 +35,7 @@ export const TransactionFee = ({
       data-testid={testId ?? 'fee'}
       className={className}
       displayFiat={displayFiat}
+      highlightPositiveAmount={highlightPositiveAmount}
     />
   );
 };
diff --git a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss
@@ -22,4 +22,8 @@
   display: flex;
   justify-content: space-between;
   align-items: end;
-}
+}
+
+.positiveAmount {
+  color: var(--data-green, #2CB67D) !important;
+}
diff --git a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx
@@ -177,15 +177,15 @@ export const DappAddressSections = ({
                     <Title level={5} data-testid="dapp-transaction-tokens-title">
                       {t('package.core.dappTransaction.tokens')}
                     </Title>
-                    <Title level={5}>
-                      +{getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
+                    <Title level={5} className={styles.positiveAmount}>
+                      {getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
                     </Title>
                   </div>
                   {addressData.coins.map((coin) => (
                     <DappTransactionSummary
                       key={`${address}${coin}`}
                       cardanoSymbol={coinSymbol}
-                      transactionAmount={`+${getStringFromLovelace(coin)}`}
+                      transactionAmount={getStringFromLovelace(coin)}
                     />
                   ))}
                   {displayGroupedTokens(addressData.tokens)}
@@ -198,8 +198,8 @@ export const DappAddressSections = ({
                     <Title level={5} data-testid="dapp-transaction-nfts-title">
                       {t('package.core.dappTransaction.nfts')}
                     </Title>
-                    <Title level={5}>
-                      +{addressData.nfts.length} {itemsCountCopy}
+                    <Title level={5} className={styles.positiveAmount}>
+                      {addressData.nfts.length} {itemsCountCopy}
                     </Title>
                   </div>
                   {displayGroupedNFTs(addressData.nfts)}

diff --git a/packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss b/packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss
@@ -22,3 +22,7 @@
 .transactionAssetsContainer {
   margin-bottom: size_unit(2.5);
 }
+
+.positiveAmount {
+  color: var(--data-green);
+}
diff --git a/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx b/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx
@@ -13,6 +13,7 @@ import { TransactionFee, Collateral } from '@ui/components/ActivityDetail';
 
 import { TransactionType, DappTransactionSummary, TransactionAssets } from '@lace/ui';
 import { DappAddressSections } from '../DappAddressSections/DappAddressSections';
+import cn from 'classnames';
 
 const amountTransformer = (fiat: { price: number; code: string }) => (ada: string) =>
   `${Wallet.util.convertAdaToFiat({ ada, fiat: fiat.price })} ${fiat.code}`;
@@ -165,15 +166,16 @@ export const DappTransaction = ({
 
         {returnedDeposit !== BigInt(0) && (
           <TransactionFee
-            fee={`+${Wallet.util.lovelacesToAdaString(returnedDeposit.toString())}`}
+            fee={Wallet.util.lovelacesToAdaString(returnedDeposit.toString())}
             testId="returned-deposit"
             label={t('package.core.dappTransaction.returnedDeposit')}
             coinSymbol={coinSymbol}
-            className={styles.depositContainer}
+            className={cn([styles.depositContainer, styles.positiveAmount])}
             displayFiat={false}
             amountTransformer={() =>
               `${Wallet.util.lovelacesToAdaString(returnedDeposit.toString())} ${fiatCurrencyCode}`
             }
+            highlightPositiveAmount
           />
         )}
 

diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-assets.component.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-assets.component.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import classNames from 'classnames';
+
 import DarkFallBack from '../../assets/images/dark-mode-fallback.png';
 import LightFallBack from '../../assets/images/light-mode-fallback.png';
 import { ThemeColorScheme } from '../../design-tokens';
@@ -9,13 +11,13 @@ import { Grid, Cell } from '../grid';
 import { UserProfile } from '../profile-picture';
 import * as Typography from '../typography';
 
-import * as cx from './dapp-transaction-summary.css';
+import * as styles from './dapp-transaction-summary.css';
 
 import type { OmitClassName } from '../../types';
 
 type Props = OmitClassName<'div'> & {
   imageSrc: string | undefined;
-  balance?: string;
+  balance: string;
   tokenName?: string;
   coins?: string;
   testId?: string;
@@ -41,6 +43,7 @@ export const TransactionAssets = ({
   ...props
 }: Readonly<Props>): JSX.Element => {
   const { theme } = useThemeVariant();
+  const isNegativeBalance = balance.includes('-');
 
   const setThemeFallbackImagine =
     theme === ThemeColorScheme.Dark ? DarkFallBack : LightFallBack;
@@ -58,7 +61,7 @@ export const TransactionAssets = ({
   };
 
   return (
-    <div className={cx.assetsContainer}>
+    <div className={styles.assetsContainer}>
       <Grid {...props} columns="$fitContent">
         <Cell>
           <UserProfile
@@ -73,9 +76,14 @@ export const TransactionAssets = ({
           <Flex
             justifyContent="flex-end"
             alignItems="center"
-            className={cx.balanceDetailContainer}
+            className={styles.balanceDetailContainer}
           >
-            <Typography.Body.Normal className={cx.label}>
+            <Typography.Body.Normal
+              className={classNames(styles.label, {
+                [styles.positiveBalance]: !isNegativeBalance,
+                [styles.negativeBalance]: isNegativeBalance,
+              })}
+            >
               <span data-testid={testId}>
                 {balance} {tokenName}
               </span>

diff --git a/...ages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx b/...ages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx
@@ -2,12 +2,13 @@
 import React from 'react';
 
 import { ReactComponent as AdaComponent } from '@lace/icons/dist/AdaComponent';
+import classNames from 'classnames';
 
 import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 import * as Typography from '../typography';
 
-import * as cx from './dapp-transaction-summary.css';
+import * as styles from './dapp-transaction-summary.css';
 
 import type { OmitClassName } from '../../types';
 
@@ -23,24 +24,27 @@ export const TransactionSummary = ({
   cardanoSymbol,
   ...props
 }: Readonly<Props>): JSX.Element => (
-  <div className={cx.txSummaryContainer}>
+  <div className={styles.txSummaryContainer}>
     {title !== undefined && (
       <Flex justifyContent="flex-start">
-        <Typography.Body.Large className={cx.txSummaryTitle}>
+        <Typography.Body.Large className={styles.txSummaryTitle}>
           {title}
         </Typography.Body.Large>
       </Flex>
     )}
-    <div className={cx.txAmountContainer}>
+    <div className={styles.txAmountContainer}>
       <Grid {...props} alignItems="$center" columns="$2">
         <Cell>
-          <AdaComponent className={cx.adaIcon} />
+          <AdaComponent className={styles.adaIcon} />
         </Cell>
         <Cell>
           <Flex justifyContent="flex-end">
             <Typography.Body.Normal
-              className={cx.label}
-              data-testid="dapp-transaction-amount-value"
+              className={classNames(styles.label, {
+                [styles.positiveBalance]: !transactionAmount.includes('-'),
+                [styles.negativeBalance]: transactionAmount.includes('-'),
+              })}
+              data-testId="dapp-transaction-amount-value"
             >
               {transactionAmount} {cardanoSymbol}
             </Typography.Body.Normal>

diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts
@@ -5,10 +5,17 @@ export const transactionTypeContainer = style({
 });
 
 export const label = sx({
-  color: '$dapp_transaction_summary_label',
   fontWeight: '$semibold',
 });
 
+export const positiveBalance = sx({
+  color: '$dapp_transaction_summary_positive_balance_label_color',
+});
+
+export const negativeBalance = sx({
+  color: '$dapp_transaction_summary_label',
+});
+
 export const txSummaryTitle = style([
   sx({
     color: '$transaction_summary_label_color',

diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx
@@ -48,7 +48,7 @@ const items = [
   },
   {
     imageSrc: token2,
-    balance: '-1000.00',
+    balance: '1000.00',
     tokenName: 'Lapisluzzz',
     recipient: '',
   },

diff --git a/packages/ui/src/design-system/transaction-summary/transaction-summary-amount.component.tsx b/packages/ui/src/design-system/transaction-summary/transaction-summary-amount.component.tsx
@@ -7,6 +7,7 @@ import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 import { Tooltip } from '../tooltip';
 import * as Typography from '../typography';
+import classNames from 'classnames';
 
 import * as cx from './transaction-summary.css';
 
@@ -20,6 +21,7 @@ type Props = OmitClassName<'div'> & {
   'data-testid'?: string;
   className?: string;
   displayFiat?: boolean;
+  highlightPositiveAmount?: boolean;
 };
 
 const makeTestId = (namespace = '', path = ''): string | undefined => {
@@ -33,10 +35,12 @@ export const Amount = ({
   tooltip,
   className,
   displayFiat = true,
+  highlightPositiveAmount,
   ...props
 }: Readonly<Props>): JSX.Element => {
   const testId = props['data-testid'];
-
+  const shouldHighlightPositiveAmount =
+    highlightPositiveAmount === true && !amount.includes('-');
   return (
     <div className={className}>
       <Grid {...props} data-testid={makeTestId(testId, 'root')} columns="$2">
@@ -64,19 +68,22 @@ export const Amount = ({
         </Cell>
         <Cell>
           <Flex flexDirection="column" alignItems="flex-end" h="$fill">
-            <Typography.Body.Normal
-              className={cx.text}
+            <Typography.Body.Small
+              className={classNames(cx.text, {
+                [cx.normalAmount]: !shouldHighlightPositiveAmount,
+                [cx.highlightedAmount]: shouldHighlightPositiveAmount,
+              })}
               data-testid={makeTestId(testId, 'amount')}
             >
               {amount}
-            </Typography.Body.Normal>
+            </Typography.Body.Small>
             {displayFiat && (
-              <Typography.Body.Normal
+              <Typography.Body.Small
                 className={cx.secondaryText}
                 data-testid={makeTestId(testId, 'fiat')}
               >
                 {fiatPrice}
-              </Typography.Body.Normal>
+              </Typography.Body.Small>
             )}
           </Flex>
         </Cell>

diff --git a/packages/ui/src/design-system/transaction-summary/transaction-summary.css.ts b/packages/ui/src/design-system/transaction-summary/transaction-summary.css.ts
@@ -7,7 +7,6 @@ export const label = sx({
 
 export const text = style([
   sx({
-    color: '$transaction_summary_label_color',
     fontWeight: '$medium',
   }),
   {
@@ -39,3 +38,15 @@ export const tooltipText = style([
     display: 'flex',
   }),
 ]);
+
+export const normalAmount = style([
+  sx({
+    color: '$transaction_summary_amount_color',
+  }),
+]);
+
+export const highlightedAmount = style([
+  sx({
+    color: '$transaction_summary_highlighted_amount_color',
+  }),
+]);
diff --git a/packages/ui/src/design-system/transaction-summary/transaction-summary.stories.tsx b/packages/ui/src/design-system/transaction-summary/transaction-summary.stories.tsx
@@ -55,9 +55,6 @@ const Example = (): JSX.Element => (
             <Cell>
               <Amount amount="102.00 ADA" fiatPrice="84.45 USD" />
             </Cell>
-            <Cell>
-              <Amount amount="102.00 ADA" fiatPrice="84.45 USD" />
-            </Cell>
             <Cell>
               <Amount
                 label="With Tooltip"
@@ -67,6 +64,14 @@ const Example = (): JSX.Element => (
                 data-testid="sample"
               />
             </Cell>
+            <Cell>
+              <Amount
+                label="Received"
+                amount="102.00 ADA"
+                fiatPrice="84.45 USD"
+                highlightPositiveAmount
+              />
+            </Cell>
           </Grid>
         </Cell>
       </Grid>

diff --git a/packages/ui/src/design-tokens/colors.data.ts b/packages/ui/src/design-tokens/colors.data.ts
@@ -161,7 +161,10 @@ export const colors = {
   $summary_expander_trigger_label_color_pressed: '',
 
   $transaction_summary_label_color: '',
+  $transaction_summary_amount_color: '',
+  $transaction_summary_highlighted_amount_color: '',
   $transaction_summary_secondary_label_color: '',
+  $dapp_transaction_summary_positive_balance_label_color: '',
 
   $dapp_transaction_summary_type_label_color: '',
   $dapp_transaction_summary_label: '',

diff --git a/packages/ui/src/design-tokens/theme/dark-theme.css.ts b/packages/ui/src/design-tokens/theme/dark-theme.css.ts
@@ -232,8 +232,13 @@ const colors: Colors = {
     darkColorScheme.$primary_mid_grey,
 
   $transaction_summary_label_color: darkColorScheme.$primary_white,
+  $transaction_summary_amount_color: darkColorScheme.$primary_white,
+  $transaction_summary_highlighted_amount_color:
+    darkColorScheme.$secondary_data_green,
   $transaction_summary_secondary_label_color:
     darkColorScheme.$primary_light_grey,
+  $dapp_transaction_summary_positive_balance_label_color:
+    darkColorScheme.$secondary_data_green,
 
   $dapp_transaction_summary_type_label_color:
     darkColorScheme.$primary_accent_purple,

diff --git a/packages/ui/src/design-tokens/theme/light-theme.css.ts b/packages/ui/src/design-tokens/theme/light-theme.css.ts
@@ -252,8 +252,13 @@ const colors: Colors = {
     lightColorScheme.$primary_light_grey_plus,
 
   $transaction_summary_label_color: lightColorScheme.$primary_black,
+  $transaction_summary_amount_color: lightColorScheme.$primary_black,
+  $transaction_summary_highlighted_amount_color:
+    lightColorScheme.$secondary_data_green,
   $transaction_summary_secondary_label_color:
     lightColorScheme.$primary_dark_grey,
+  $dapp_transaction_summary_positive_balance_label_color:
+    lightColorScheme.$secondary_data_green,
 
   $dapp_transaction_summary_type_label_color:
     lightColorScheme.$primary_accent_purple,