feat: flag addresses as own or foreign on send flow

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionSummary.tsx

@@ -17,6 +17,8 @@ import { getTokenAmountInFiat, parseFiat } from '@src/utils/assets-transformers'
 import { useObservable, Banner } from '@lace/common';
 import ExclamationIcon from '../../../../../assets/icons/exclamation-triangle-red.component.svg';
 import { WalletType } from '@cardano-sdk/web-extension';
+import { getAllWalletsAddresses } from '@src/utils/get-all-wallets-addresses';
+import { walletRepository } from '@lib/wallet-api-ui';
 
 const { Text } = Typography;
 
@@ -98,7 +100,7 @@ interface SendTransactionSummaryProps {
 export const SendTransactionSummary = withAddressBookContext(
   ({ isPopupView = false }: SendTransactionSummaryProps): React.ReactElement => {
     const { t } = useTranslation();
-    const { builtTxData: { uiTx: { fee, outputs } = {} } = {} } = useBuiltTxState();
+    const { builtTxData: { uiTx: { fee, outputs, handleResolutions } = {} } = {} } = useBuiltTxState();
     const [metadata] = useMetadata();
     const {
       inMemoryWallet,
@@ -120,32 +122,44 @@ export const SendTransactionSummary = withAddressBookContext(
       output: t('core.outputSummaryList.output'),
       metadata: t('core.outputSummaryList.metaData'),
       deposit: t('core.outputSummaryList.deposit'),
-      txFee: t('core.outputSummaryList.txFee')
+      txFee: t('core.outputSummaryList.txFee'),
+      own: t('core.addressTags.own'),
+      foreign: t('core.addressTags.foreign')
     };
 
     const addressToNameMap = useMemo(
       () => new Map<string, string>(addressList?.map((item: AddressListType) => [item.address, item.name])),
       [addressList]
     );
 
-    const rows = [...(outputs?.values() ?? [])].map((item) => ({
-      list: formatRow({ output: item, assetInfo: assetsInfo, cardanoCoin, fiatCurrency, prices: priceResult }),
-      recipientAddress: item.address,
-      recipientName:
-        addressToNameMap?.get(item.handleResolution?.handle || item.address) || item.handleResolution?.handle
-    }));
+    const rows = [...(outputs?.values() ?? [])].map<OutputSummaryProps>((item) => {
+      const handle =
+        item.handleResolution?.handle ||
+        handleResolutions.find(({ cardanoAddress }) => cardanoAddress === item.address)?.handle;
+      return {
+        list: formatRow({ output: item, assetInfo: assetsInfo, cardanoCoin, fiatCurrency, prices: priceResult }),
+        recipientAddress: item.address,
+        recipientName: addressToNameMap?.get(handle || item.address),
+        recipientHandle: handle
+      };
+    });
+
+    const ownAddresses = useObservable(inMemoryWallet.addresses$)?.map((a) => a.address);
+    const allWalletsAddresses = getAllWalletsAddresses(useObservable(walletRepository.wallets$));
 
     // Where do we get the deposit field? LW-1363
     return (
       <>
         <OutputSummaryList
-          rows={rows as OutputSummaryProps[]}
+          rows={rows}
           txFee={{
             ...getFee(fee?.toString(), priceResult?.cardano?.price, cardanoCoin, fiatCurrency),
             tootipText: t('send.theAmountYoullBeChargedToProcessYourTransaction')
           }}
           metadata={metadata}
           translations={outputSummaryListTranslation}
+          addressToNameMap={addressToNameMap}
+          ownAddresses={allWalletsAddresses.length > 0 ? allWalletsAddresses : ownAddresses}
         />
         {isHardwareWallet && !isPopupView && (
           <Text className={styles.connectLedgerText}>

packages/core/src/ui/components/ActivityDetail/TransactionDetails.tsx

@@ -373,7 +373,12 @@ export const TransactionDetails = ({
                     return (
                       <div key={addr} className={cn([styles.detail, styles.addr, styles.addressTag])}>
                         {address}
-                        {renderAddressTag(addr, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
+                        {renderAddressTag({
+                          address: addr,
+                          translations: getAddressTagTranslations(t),
+                          ownAddresses,
+                          addressToNameMap
+                        })}
                       </div>
                     );
                   })}

packages/core/src/ui/components/ActivityDetail/TransactionInputOutput.tsx

@@ -92,7 +92,12 @@ export const TransactionInputOutput = ({
                   <div data-testid="tx-address" className={cn(styles.addressDetail, styles.content)}>
                     <Tooltip title={inputAddress}>{addEllipsis(inputAddress, 8, 8)}</Tooltip>
                   </div>
-                  {renderAddressTag(inputAddress, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
+                  {renderAddressTag({
+                    address: inputAddress,
+                    translations: getAddressTagTranslations(t),
+                    ownAddresses,
+                    addressToNameMap
+                  })}
                 </Flex>
               </div>
 

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

@@ -133,7 +133,12 @@ export const DappAddressSection = ({
               <Text.Body.Small data-testid="dapp-transaction-address" weight="$medium">
                 <Tooltip label={address}>{addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}</Tooltip>
               </Text.Body.Small>
-              {renderAddressTag(address, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
+              {renderAddressTag({
+                address,
+                translations: getAddressTagTranslations(t),
+                ownAddresses,
+                addressToNameMap
+              })}
             </Flex>
           </div>
           {(addressData.tokens.length > 0 || addressData.coins.length > 0) && (

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

@@ -1,33 +1,10 @@
 @import '../../styles/theme.scss';
 @import '../../../../../common/src/ui/styles/abstracts/typography';
 
-@mixin right-item-display {
+@mixin half-display {
   flex: 50%;
   max-width: 50%;
-  text-align: right;
-  display: flex;
-  flex-direction: column;
-}
-
-.assetInfo {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-
-  span.asset,
-  span.fiat {
-    @include text-body-semi-bold;
-    overflow-wrap: break-word;
-    text-align: right;
-    max-width: 100%;
-  }
-
-  span.asset {
-    color: var(--text-color-primary);
-  }
-  span.fiat {
-    color: var(--text-color-secondary);
-  }
 }
 
 .container {
@@ -40,54 +17,30 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
+
   .labelContainer {
-    display: flex;
-    justify-content: flex-start;
+    @include half-display;
     gap: 5px;
 
-    flex: 50%;
-    max-width: 50%;
-    color: var(--text-color-primary, #3d3b39);
-
     .infoIcon {
       width: size_unit(2.25);
       height: size_unit(2.25);
       margin-bottom: -5px;
       color: var(--text-color-secondary);
     }
-
-    .label {
-      @include text-body-semi-bold;
-      color: var(--text-color-primary, #3d3b39);
-    }
-  }
-
-  .recipientAddress {
-    @include text-address($weight: 500);
-    color: var(--text-color-primary, #3d3b39);
-    flex: 50%;
-    overflow-wrap: break-word;
-    max-width: 50%;
-    text-align: right;
   }
 }
 
 .assetList {
-  @include right-item-display;
+  @include half-display;
   gap: size_unit(4);
 }
 
 .recipient {
-  @include right-item-display;
-
-  .name {
-    @include text-body-semi-bold;
-    margin-bottom: size_unit(2);
-    color: var(--text-color-primary, #3d3b39);
-  }
+  @include half-display;
+  text-align: right;
+}
 
-  .address {
-    @include text-address($weight: 500);
-    color: var(--text-color-secondary, #878e9e);
-  }
+.address {
+  word-break: break-all;
 }

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { renderLabel, renderSentAssets, RowContainer } from './OutputSummaryUtils';
-import { Typography } from 'antd';
 import styles from './OutputSummary.module.scss';
 import { TranslationsFor } from '@ui/utils/types';
-
-const { Text } = Typography;
+import { Text, Flex, Box } from '@lace/ui';
+import { getAddressTagTranslations, renderAddressTag } from '@src/ui/utils';
+import { useTranslate } from '@src/ui/hooks';
 
 export type SentAssetsList = Array<{
   assetAmount: string;
@@ -15,39 +15,62 @@ export interface OutputSummaryProps {
   list: SentAssetsList;
   recipientAddress: string;
   recipientName?: string;
+  recipientHandle?: string;
   translations?: TranslationsFor<'recipientAddress' | 'sending'>;
+  ownAddresses?: string[];
+  addressToNameMap?: Map<string, string>;
 }
 
 export const OutputSummary = ({
   list,
   recipientAddress,
+  recipientHandle,
   translations,
-  recipientName
-}: OutputSummaryProps): React.ReactElement => (
-  <div className={styles.container} data-testid="output-summary-container">
-    <RowContainer data-testid="output-summary-row">
-      {renderLabel({ label: translations.sending, dataTestId: 'output-summary-sending-title' })}
-      <div className={styles.assetList} data-testid="output-summary-asset-list">
-        {renderSentAssets(list)}
-      </div>
-    </RowContainer>
+  recipientName,
+  ownAddresses,
+  addressToNameMap
+}: OutputSummaryProps): React.ReactElement => {
+  const { t } = useTranslate();
 
-    <RowContainer>
-      {renderLabel({ label: translations.recipientAddress, dataTestId: 'output-summary-recipient-title' })}
-      {recipientName ? (
-        <div className={styles.recipient}>
-          <Text className={styles.name} data-testid="output-summary-recipient-name">
-            {recipientName}
-          </Text>
-          <Text className={styles.address} data-testid="output-summary-recipient-address">
-            {recipientAddress}
-          </Text>
+  return (
+    <div className={styles.container} data-testid="output-summary-container">
+      <RowContainer data-testid="output-summary-row">
+        {renderLabel({ label: translations.sending, dataTestId: 'output-summary-sending-title' })}
+        <div className={styles.assetList} data-testid="output-summary-asset-list">
+          {renderSentAssets(list)}
         </div>
-      ) : (
-        <Text className={styles.recipientAddress} data-testid="output-summary-recipient-address">
-          {recipientAddress}
-        </Text>
-      )}
-    </RowContainer>
-  </div>
-);
+      </RowContainer>
+
+      <RowContainer>
+        {renderLabel({ label: translations.recipientAddress, dataTestId: 'output-summary-recipient-title' })}
+        <Flex className={styles.recipient} flexDirection="column">
+          {recipientName && (
+            <Box mb="$16" w="$fill">
+              <Text.Body.Normal weight="$semibold" data-testid="output-summary-recipient-name">
+                {recipientName}
+              </Text.Body.Normal>
+            </Box>
+          )}
+
+          <Flex flexDirection="column" w="$fill" alignItems="flex-end" gap="$8">
+            <Text.Body.Small
+              weight="$semibold"
+              color={recipientName ? 'secondary' : 'primary'}
+              className={styles.address}
+              data-testid="output-summary-recipient-address"
+            >
+              {recipientHandle || recipientAddress}
+            </Text.Body.Small>
+            {renderAddressTag({
+              address: recipientAddress,
+              handle: recipientHandle,
+              translations: getAddressTagTranslations(t),
+              ownAddresses,
+              addressToNameMap
+            })}
+          </Flex>
+        </Flex>
+      </RowContainer>
+    </div>
+  );
+};

packages/core/src/ui/components/OutputSummary/OutputSummaryUtils.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Typography, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import { ReactComponent as Info } from '../../assets/icons/info-icon.component.svg';
 import styles from './OutputSummary.module.scss';
 import { SentAssetsList } from './OutputSummary';
-
-const { Text } = Typography;
+import { Flex, Text } from '@lace/ui';
 
 export const RowContainer = (props: { children: React.ReactNode; key?: string }): React.ReactElement => (
   <div key={props.key} className={styles.rowContent}>
@@ -13,14 +12,12 @@ export const RowContainer = (props: { children: React.ReactNode; key?: string })
 );
 
 export const renderAmountInfo = (amount: string, fiat: string, key?: string): JSX.Element => (
-  <div key={key} className={styles.assetInfo} data-testid="asset-info">
-    <Text className={styles.asset} data-testid="asset-info-amount">
-      {amount}
-    </Text>
-    <Text className={styles.fiat} data-testid="asset-info-amount-fiat">
+  <Flex key={key} w="$fill" flexDirection="column" alignItems="flex-end">
+    <Text.Body.Normal data-testid="asset-info-amount">{amount}</Text.Body.Normal>
+    <Text.Body.Normal weight="$semibold" color="secondary" data-testid="asset-info-amount-fiat">
       {fiat}
-    </Text>
-  </div>
+    </Text.Body.Normal>
+  </Flex>
 );
 
 export const renderSentAssets = (list: SentAssetsList): JSX.Element[] =>
@@ -38,9 +35,7 @@ export const renderLabel = ({
   onTooltipHover?: () => unknown;
 }): JSX.Element => (
   <div className={styles.labelContainer}>
-    <p className={styles.label} data-testid={`${dataTestId}-label`}>
-      {label}
-    </p>
+    <Text.Body.Normal data-testid={`${dataTestId}-label`}>{label}</Text.Body.Normal>
 
     {tooltipContent && (
       <Tooltip