feat(core): show assetId and policyId as tooltip in the dapp tx summa…

…ry LW-10106
input-output-hk · Apr 16, 2024 · 698d992 · 698d992
1 parent f97d6f0
commit 698d992
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 37 deletions.
diff --git a/apps/browser-extension-wallet/src/lib/translations/en.json b/apps/browser-extension-wallet/src/lib/translations/en.json
@@ -190,6 +190,9 @@
   "core.dappTransaction.deposit": "Deposit",
   "core.dappTransaction.returnedDeposit": "Returned deposit",
   "core.dappTransaction.items": "item(s)",
+  "core.dappTransaction.assetId": "AssetId:",
+  "core.dappTransaction.policyId": "PolicyId:",
+  "core.dappTransaction.adaTooltip": "Ada is Cardano's native token and does not have an asset and policy ID.",
   "tab.main.title": "Tab extension",
   "general.buttons.back": "Back",
   "general.button.cancel": "Cancel",

diff --git a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx
@@ -49,22 +49,32 @@ const getAssetTokenName = (assetWithAmount: AssetInfoWithAmount) => {
 const charBeforeEllName = 9;
 const charAfterEllName = 0;
 
-const displayGroupedNFTs = (nfts: AssetInfoWithAmount[], testId?: string) =>
+type UseTranslate = ReturnType<typeof useTranslate>['t'];
+
+const getTransactionAssetTranslations = (t: UseTranslate) => ({
+  assetId: t('core.dappTransaction.assetId'),
+  policyId: t('core.dappTransaction.policyId')
+});
+
+const displayGroupedNFTs = (nfts: AssetInfoWithAmount[], t: UseTranslate, testId?: string) =>
   nfts.map((nft: AssetInfoWithAmount) => {
     const imageSrc = nft.assetInfo.tokenMetadata?.icon ?? nft.assetInfo.nftMetadata?.image ?? undefined;
     return (
       <TransactionAssets
         testId={testId}
         key={nft.assetInfo.fingerprint}
         imageSrc={imageSrc}
+        translations={getTransactionAssetTranslations(t)}
         balance={Wallet.util.calculateAssetBalance(nft.amount, nft.assetInfo)}
+        assetId={nft.assetInfo.assetId}
+        policyId={nft.assetInfo.policyId}
         tokenName={truncate(getAssetTokenName(nft), charBeforeEllName, charAfterEllName)}
         showImageBackground={imageSrc === undefined}
       />
     );
   });
 
-const displayGroupedTokens = (tokens: AssetInfoWithAmount[], testId?: string) =>
+const displayGroupedTokens = (tokens: AssetInfoWithAmount[], t: UseTranslate, testId?: string) =>
   tokens.map((token: AssetInfoWithAmount) => {
     const imageSrc = token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined;
 
@@ -73,7 +83,10 @@ const displayGroupedTokens = (tokens: AssetInfoWithAmount[], testId?: string) =>
         testId={testId}
         key={token.assetInfo.fingerprint}
         imageSrc={token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined}
+        translations={getTransactionAssetTranslations(t)}
         balance={Wallet.util.calculateAssetBalance(token.amount, token.assetInfo)}
+        assetId={token.assetInfo.assetId}
+        policyId={token.assetInfo.policyId}
         tokenName={truncate(getAssetTokenName(token), charBeforeEllName, charAfterEllName)}
         showImageBackground={imageSrc === undefined}
       />
@@ -123,7 +136,7 @@ export const DappAddressSections = ({
                 </Text>
                 <Text className={styles.value} data-testid="dapp-transaction-address">
                   <Tooltip label={address}>
-                    <span>{addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}</span>
+                    {addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}
                   </Tooltip>
                 </Text>
               </div>
@@ -141,11 +154,12 @@ export const DappAddressSections = ({
                     <DappTransactionSummary
                       testId="dapp-transaction-from-row"
                       key={`${address}${coin}`}
+                      adaTooltip={t('core.dappTransaction.adaTooltip')}
                       cardanoSymbol={coinSymbol}
                       transactionAmount={getStringFromLovelace(coin)}
                     />
                   ))}
-                  {displayGroupedTokens(addressData.tokens, 'dapp-transaction-from-row')}
+                  {displayGroupedTokens(addressData.tokens, t, 'dapp-transaction-from-row')}
                 </>
               )}
 
@@ -159,7 +173,7 @@ export const DappAddressSections = ({
                       -{addressData.nfts.length} {itemsCountCopy}
                     </Title>
                   </div>
-                  {displayGroupedNFTs(addressData.nfts, 'dapp-transaction-from-row')}
+                  {displayGroupedNFTs(addressData.nfts, t, 'dapp-transaction-from-row')}
                 </>
               )}
             </>
@@ -181,7 +195,7 @@ export const DappAddressSections = ({
                 </Text>
                 <Text className={styles.value} data-testid="dapp-transaction-address">
                   <Tooltip label={address}>
-                    <span>{addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}</span>
+                    {addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}
                   </Tooltip>
                 </Text>
               </div>
@@ -203,11 +217,12 @@ export const DappAddressSections = ({
                     <DappTransactionSummary
                       key={`${address}${coin}`}
                       cardanoSymbol={coinSymbol}
+                      adaTooltip={t('core.dappTransaction.adaTooltip')}
                       transactionAmount={getStringFromLovelace(coin)}
                       testId="dapp-transaction-to-row"
                     />
                   ))}
-                  {displayGroupedTokens(addressData.tokens, 'dapp-transaction-to-row')}
+                  {displayGroupedTokens(addressData.tokens, t, 'dapp-transaction-to-row')}
                 </>
               )}
 
@@ -225,7 +240,7 @@ export const DappAddressSections = ({
                       {addressData.nfts.length} {itemsCountCopy}
                     </Title>
                   </div>
-                  {displayGroupedNFTs(addressData.nfts, 'dapp-transaction-to-row')}
+                  {displayGroupedNFTs(addressData.nfts, t, 'dapp-transaction-to-row')}
                 </>
               )}
             </>

diff --git a/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx b/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx
@@ -128,6 +128,7 @@ export const DappTransaction = ({
         <DappTransactionSummary
           testId="dapp-transaction-summary-row"
           title={t('core.dappTransaction.transactionSummary')}
+          adaTooltip={t('core.dappTransaction.adaTooltip')}
           cardanoSymbol={coinSymbol}
           transactionAmount={Wallet.util.lovelacesToAdaString(coins.toString())}
         />
@@ -142,7 +143,13 @@ export const DappTransaction = ({
                 testId="dapp-transaction-summary-row"
                 key={key}
                 imageSrc={imageSrc}
+                translations={{
+                  assetId: t('core.dappTransaction.assetId'),
+                  policyId: t('core.dappTransaction.policyId')
+                }}
                 balance={Wallet.util.calculateAssetBalance(assetWithAmount.amount, assetWithAmount.assetInfo)}
+                assetId={assetWithAmount.assetInfo.assetId}
+                policyId={assetWithAmount.assetInfo.policyId}
                 tokenName={truncate(getAssetTokenName(assetWithAmount) ?? '', charBeforeEllName, charAfterEllName)}
                 showImageBackground={imageSrc === undefined}
               />

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
@@ -9,6 +9,7 @@ import { useThemeVariant } from '../../design-tokens/theme/hooks/use-theme-varia
 import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 import { UserProfile } from '../profile-picture';
+import { Tooltip } from '../tooltip';
 import * as Typography from '../typography';
 
 import * as styles from './dapp-transaction-summary.css';
@@ -18,6 +19,12 @@ import type { OmitClassName } from '../../types';
 type Props = OmitClassName<'div'> & {
   imageSrc: string | undefined;
   balance: string;
+  assetId: string;
+  policyId: string;
+  translations: {
+    assetId: string;
+    policyId: string;
+  };
   tokenName?: string;
   coins?: string;
   testId?: string;
@@ -37,6 +44,9 @@ const isImageBase64Encoded = (image: string): boolean => {
 export const TransactionAssets = ({
   imageSrc,
   balance,
+  assetId,
+  policyId,
+  translations,
   tokenName,
   testId,
   showImageBackground = true,
@@ -60,34 +70,46 @@ export const TransactionAssets = ({
     }
   };
 
+  const tooltipLabel = (
+    <div>
+      {translations.assetId} {assetId}
+      <br />
+      {translations.policyId} {policyId}
+    </div>
+  );
+
   return (
     <div className={styles.assetsContainer} data-testid={testId}>
       <Grid {...props} columns="$fitContent">
         <Cell>
-          <UserProfile
-            fallback={setThemeFallbackImagine}
-            imageSrc={getImageSource(imageSrc)}
-            alt={tokenName}
-            radius="rounded"
-            background={showImageBackground ? undefined : 'none'}
-          />
+          <Tooltip label={tooltipLabel}>
+            <UserProfile
+              fallback={setThemeFallbackImagine}
+              imageSrc={getImageSource(imageSrc)}
+              alt={tokenName}
+              radius="rounded"
+              background={showImageBackground ? undefined : 'none'}
+            />
+          </Tooltip>
         </Cell>
         <Cell>
           <Flex
             justifyContent="flex-end"
             alignItems="center"
             className={styles.balanceDetailContainer}
           >
-            <Typography.Body.Small
-              className={classNames(styles.label, {
-                [styles.positiveBalance]: !isNegativeBalance,
-                [styles.negativeBalance]: isNegativeBalance,
-              })}
-            >
-              <span>
-                {balance} {tokenName}
-              </span>
-            </Typography.Body.Small>
+            <Tooltip label={tooltipLabel}>
+              <Typography.Body.Small
+                className={classNames(styles.label, {
+                  [styles.positiveBalance]: !isNegativeBalance,
+                  [styles.negativeBalance]: isNegativeBalance,
+                })}
+              >
+                <span>
+                  {balance} {tokenName}
+                </span>
+              </Typography.Body.Small>
+            </Tooltip>
           </Flex>
         </Cell>
       </Grid>

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
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
+import { Tooltip } from '../tooltip';
 import * as Typography from '../typography';
 
 import * as styles from './dapp-transaction-summary.css';
@@ -15,13 +16,15 @@ import type { OmitClassName } from '../../types';
 type Props = OmitClassName<'div'> & {
   testId?: string;
   transactionAmount: string;
+  adaTooltip: string;
   title?: string;
   cardanoSymbol?: string;
 };
 
 export const TransactionSummary = ({
   testId,
   transactionAmount,
+  adaTooltip,
   title,
   cardanoSymbol,
   ...props
@@ -37,18 +40,22 @@ export const TransactionSummary = ({
     <div className={styles.txAmountContainer} data-testid={testId}>
       <Grid {...props} alignItems="$center" columns="$2">
         <Cell>
-          <CardanoLogoComponent className={styles.cardanoIcon} />
+          <Tooltip label={adaTooltip}>
+            <CardanoLogoComponent className={styles.cardanoIcon} />
+          </Tooltip>
         </Cell>
         <Cell>
           <Flex justifyContent="flex-end">
-            <Typography.Body.Small
-              className={classNames(styles.label, {
-                [styles.positiveBalance]: !transactionAmount.includes('-'),
-                [styles.negativeBalance]: transactionAmount.includes('-'),
-              })}
-            >
-              {transactionAmount} {cardanoSymbol}
-            </Typography.Body.Small>
+            <Tooltip label={adaTooltip}>
+              <Typography.Body.Small
+                className={classNames(styles.label, {
+                  [styles.positiveBalance]: !transactionAmount.includes('-'),
+                  [styles.negativeBalance]: transactionAmount.includes('-'),
+                })}
+              >
+                {transactionAmount} {cardanoSymbol}
+              </Typography.Body.Small>
+            </Tooltip>
           </Flex>
         </Cell>
       </Grid>

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
@@ -17,6 +17,11 @@ import { TransactionType } from './dapp-transaction-type.component';
 
 const subtitle = `Control that displays data items in rows.`;
 
+const translations = {
+  assetId: 'AssetId:',
+  policyId: 'PolicyId:',
+};
+
 export default {
   title: 'List & tables/DApp transaction summary',
   subcomponents: { TransactionSummary, TransactionType },
@@ -35,31 +40,41 @@ const Layout = ({
 
 const items = [
   {
+    assetId: 'MauiAssetId',
+    policyId: 'MauiPolicyId',
     imageSrc: token1,
     balance: '-200.00',
     tokenName: 'Maui',
     recipient: '',
   },
   {
+    assetId: 'HairMauiAssetId',
+    policyId: 'HairMauiPolicyId',
     imageSrc: '',
     balance: '-10.00',
     tokenName: 'HairMaui',
     recipient: '',
   },
   {
+    assetId: 'LapisluzzzAssetId',
+    policyId: 'LapisluzzzPolicyId',
     imageSrc: token2,
     balance: '1000.00',
     tokenName: 'Lapisluzzz',
     recipient: '',
   },
   {
+    assetId: 'HawaiSandAssetId',
+    policyId: 'HawaiSandPolicyId',
     imageSrc: token3,
     balance: '-1078.00',
     tokenName: 'HawaiSand',
     metadataHash: '3430008',
     recipient: '',
   },
   {
+    assetId: 'HelloSandAssetId',
+    policyId: 'HelloSandPolicyId',
     imageSrc: '',
     balance: '-20780.00',
     tokenName: 'HelloSand',
@@ -73,12 +88,16 @@ const Example = (): JSX.Element => (
     <TransactionSummary
       title="Transaction Summary"
       transactionAmount="-100.00"
+      adaTooltip="Special tooltip for ADA token"
     />
     {items.map(value => (
       <TransactionAssets
         key={value.metadataHash}
         imageSrc={value.imageSrc}
+        translations={translations}
         balance={value.balance}
+        assetId={value.assetId}
+        policyId={value.policyId}
         tokenName={value.tokenName}
       />
     ))}
@@ -93,13 +112,17 @@ const MainComponents = (): JSX.Element => (
         <TransactionSummary
           title="Transaction Summary"
           transactionAmount="-100.00"
+          adaTooltip="Special tooltip for ADA token"
         />
         <>
           {items.map(value => (
             <TransactionAssets
               key={value.metadataHash}
               imageSrc={value.imageSrc}
+              translations={translations}
               balance={value.balance}
+              assetId={value.assetId}
+              policyId={value.policyId}
               tokenName={value.tokenName}
             />
           ))}

diff --git a/packages/ui/src/design-system/tooltip/tooltip-content.component.tsx b/packages/ui/src/design-system/tooltip/tooltip-content.component.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 
 import * as Typography from '../typography';
 
 import * as cx from './tooltip-content.css';
 
 export interface TooltipContentProps {
-  label: string;
+  label: ReactNode | string;
 }
 
 export const TooltipContent = ({