feat(core, extension): add balance style to the dapp bridge [LW-9887]

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/DappTransactionContainer.tsx

@@ -177,7 +177,7 @@ export const DappTransactionContainer = withAddressBookContext(
             fromAddress={fromAddressTokens}
             errorMessage={errorMessage}
             toAddress={toAddressTokens}
-            collateral={Wallet.util.lovelacesToAdaString(txCollateral.toString())}
+            collateral={txCollateral}
           />
         ) : (
           <Skeleton loading />

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/__tests__/DappTransactionContainer.test.tsx

@@ -331,7 +331,7 @@ describe('Testing DappTransactionContainer component', () => {
         fiatCurrencyPrice: 2,
         errorMessage,
         coinSymbol: 'ADA',
-        collateral: '1.00',
+        collateral: BigInt(1_000_000),
         txInspectionDetails
       },
       {}

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}
     />
   );
 };

packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss

@@ -1,18 +1,23 @@
 @import '../../styles/theme.scss';
 @import '../../../../../common/src/ui/styles/abstracts/_typography.scss';
 
-.address {
-  display: flex;
-  justify-content: space-between;
-  padding: size_unit(2.5) 0;
+.label {
+  color: var(--text-color-primary, #ffffff) !important;
+  font-size: 16px;
+  font-weight: 600;
 }
 
-.addressInfo {
+.value {
   color: var(--text-color-primary, #ffffff) !important;
-  font-size: medium;
+  font-size: 14px;
   font-weight: 500;
 }
 
+.address {
+  display: flex;
+  justify-content: space-between;
+  padding: size_unit(2.5) 0;
+}
 
 .summaryContent {
   padding-bottom: size_unit(2.5);
@@ -22,4 +27,8 @@
   display: flex;
   justify-content: space-between;
   align-items: end;
-}
+}
+
+.positiveAmount {
+  color: var(--data-green, #2CB67D) !important;
+}

packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx

@@ -9,6 +9,7 @@ import styles from './DappAddressSections.module.scss';
 import { useTranslate } from '@src/ui/hooks';
 
 import { TransactionAssets, SummaryExpander, DappTransactionSummary } from '@lace/ui';
+import classNames from 'classnames';
 
 interface GroupedAddressAssets {
   nfts: Array<AssetInfoWithAmount>;
@@ -113,20 +114,20 @@ export const DappAddressSections = ({
           {[...groupedFromAddresses.entries()].map(([address, addressData]) => (
             <>
               <div key={address} className={styles.address}>
-                <Text className={styles.addressInfo} data-testid="dapp-transaction-from-address-title">
+                <Text className={styles.label} data-testid="dapp-transaction-from-address-title">
                   {t('package.core.dappTransaction.address')}
                 </Text>
-                <Text className={styles.addressInfo} data-testid="dapp-transaction-from-address-address">
+                <Text className={styles.value} data-testid="dapp-transaction-from-address-address">
                   {addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}
                 </Text>
               </div>
               {(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
                 <>
                   <div className={styles.tokenCount}>
-                    <Title level={5} data-testid="dapp-transaction-tokens-title">
+                    <Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
                       {t('package.core.dappTransaction.tokens')}
                     </Title>
-                    <Title level={5}>
+                    <Title level={5} className={styles.value}>
                       -{getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
                     </Title>
                   </div>
@@ -164,28 +165,28 @@ export const DappAddressSections = ({
           {[...groupedToAddresses.entries()].map(([address, addressData]) => (
             <>
               <div key={address} className={styles.address}>
-                <Text className={styles.addressInfo} data-testid="dapp-transaction-to-address-title">
+                <Text className={styles.label} data-testid="dapp-transaction-to-address-title">
                   {t('package.core.dappTransaction.address')}
                 </Text>
-                <Text className={styles.addressInfo} data-testid="dapp-transaction-to-address">
+                <Text className={styles.value} data-testid="dapp-transaction-to-address">
                   {addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}
                 </Text>
               </div>
               {(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
                 <>
                   <div className={styles.tokenCount}>
-                    <Title level={5} data-testid="dapp-transaction-tokens-title">
+                    <Title level={5} className={styles.label} 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={classNames(styles.value, 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)}
@@ -195,11 +196,11 @@ export const DappAddressSections = ({
               {addressData.nfts.length > 0 && (
                 <>
                   <div className={styles.tokenCount}>
-                    <Title level={5} data-testid="dapp-transaction-nfts-title">
+                    <Title level={5} className={styles.label} data-testid="dapp-transaction-nfts-title">
                       {t('package.core.dappTransaction.nfts')}
                     </Title>
-                    <Title level={5}>
-                      +{addressData.nfts.length} {itemsCountCopy}
+                    <Title level={5} className={classNames(styles.value, styles.positiveAmount)}>
+                      {addressData.nfts.length} {itemsCountCopy}
                     </Title>
                   </div>
                   {displayGroupedNFTs(addressData.nfts)}

packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss

@@ -11,7 +11,6 @@
 }
 
 .feeContainer {
-  opacity: 50%;
   padding-bottom: size_unit(2.5);
 }
 
@@ -22,3 +21,7 @@
 .transactionAssetsContainer {
   margin-bottom: size_unit(2.5);
 }
+
+.positiveAmount {
+  color: var(--data-green);
+}

packages/core/src/ui/components/DappTransaction/DappTransaction.stories.tsx

@@ -23,6 +23,8 @@ const data: ComponentProps<typeof DappTransaction> = {
   fiatCurrencyCode: 'usd',
   fromAddress: new Map(),
   toAddress: new Map(),
+  // eslint-disable-next-line no-magic-numbers
+  collateral: 150_000 as unknown as bigint,
   txInspectionDetails: {
     assets: new Map(),
     // eslint-disable-next-line no-magic-numbers

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}`;
@@ -30,7 +31,7 @@ export interface DappTransactionProps {
   /** tokens send to being sent to or from the user */
   fromAddress: Map<Cardano.PaymentAddress, TokenTransferValue>;
   toAddress: Map<Cardano.PaymentAddress, TokenTransferValue>;
-  collateral?: string;
+  collateral?: bigint;
 }
 
 const isNFT = (asset: AssetInfoWithAmount) => asset.assetInfo.supply === BigInt(1);
@@ -150,9 +151,9 @@ export const DappTransaction = ({
           })}
         </div>
 
-        {collateral && (
+        {collateral !== undefined && collateral !== BigInt(0) && (
           <Collateral
-            collateral={collateral}
+            collateral={Wallet.util.lovelacesToAdaString(collateral.toString())}
             amountTransformer={amountTransformer({
               price: fiatCurrencyPrice,
               code: fiatCurrencyCode
@@ -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
           />
         )}
 

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,13 +76,18 @@ export const TransactionAssets = ({
           <Flex
             justifyContent="flex-end"
             alignItems="center"
-            className={cx.balanceDetailContainer}
+            className={styles.balanceDetailContainer}
           >
-            <Typography.Body.Normal className={cx.label}>
+            <Typography.Body.Small
+              className={classNames(styles.label, {
+                [styles.positiveBalance]: !isNegativeBalance,
+                [styles.negativeBalance]: isNegativeBalance,
+              })}
+            >
               <span data-testid={testId}>
                 {balance} {tokenName}
               </span>
-            </Typography.Body.Normal>
+            </Typography.Body.Small>
           </Flex>
         </Cell>
       </Grid>

packages/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,27 +24,30 @@ 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"
+            <Typography.Body.Small
+              className={classNames(styles.label, {
+                [styles.positiveBalance]: !transactionAmount.includes('-'),
+                [styles.negativeBalance]: transactionAmount.includes('-'),
+              })}
+              data-testId="dapp-transaction-amount-value"
             >
               {transactionAmount} {cardanoSymbol}
-            </Typography.Body.Normal>
+            </Typography.Body.Small>
           </Flex>
         </Cell>
       </Grid>

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',

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: '',
   },