Merge branch 'main' into feat/LW-10289-use-handleprovider-from-SDK

input-output-hk · May 7, 2024 · 9c4346b · 9c4346b
2 parents 838e483 + dd13595
commit 9c4346b
Show file tree

Hide file tree

Showing 30 changed files with 290 additions and 300 deletions.
diff --git a/apps/browser-extension-wallet/src/utils/__tests__/get-asset-image-url.test.ts b/apps/browser-extension-wallet/src/utils/__tests__/get-asset-image-url.test.ts
@@ -14,7 +14,7 @@ describe('Testing getAssetImageUrl function', () => {
     const fortmatImgSrcSpyResult = 'fortmatImgSrcSpy';
     const fortmatImgSrcSpy = jest.spyOn(getImages, 'fortmatImgSrc').mockReturnValueOnce(fortmatImgSrcSpyResult);
 
-    expect(getImages.getAssetImageUrl('ipfs://image')).toBe('https://ipfs.io/ipfs/image');
+    expect(getImages.getAssetImageUrl('ipfs://image')).toBe('https://ipfs.blockfrost.dev/ipfs/image');
     expect(getImages.getAssetImageUrl('data:image/image')).toBe('data:image/image');
     expect(getImages.getAssetImageUrl('image')).toBe(fortmatImgSrcSpyResult);
     expect(fortmatImgSrcSpy).toBeCalledWith({ img: 'image', type: 'png' });

diff --git a/apps/browser-extension-wallet/src/utils/get-asset-image-url.ts b/apps/browser-extension-wallet/src/utils/get-asset-image-url.ts
@@ -3,7 +3,7 @@ export const fortmatImgSrc = (params: { img: string; type: string }): string =>
 
 export const getAssetImageUrl = (image: string): string => {
   if (image.startsWith('ipfs')) {
-    return image.replace('ipfs://', 'https://ipfs.io/ipfs/');
+    return image.replace('ipfs://', 'https://ipfs.blockfrost.dev/ipfs/');
   }
 
   if (image.startsWith('data:image/')) return image;

diff --git a/...browser-extension-wallet/src/views/browser-view/features/nfts/__tests__/selectors.test.ts b/...browser-extension-wallet/src/views/browser-view/features/nfts/__tests__/selectors.test.ts
@@ -6,6 +6,6 @@ describe('Testing nftImageSelector', () => {
     const imageUri = 'ipfs://nft-address' as unknown as Wallet.Asset.Uri;
     const image = nftImageSelector(imageUri);
 
-    expect(image).toBe('https://ipfs.io/ipfs/nft-address');
+    expect(image).toBe('https://ipfs.blockfrost.dev/ipfs/nft-address');
   });
 });
diff --git a/...et/src/views/browser-view/features/send-transaction/components/SendTransactionSummary.tsx b/...et/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,
@@ -128,24 +130,32 @@ export const SendTransactionSummary = withAddressBookContext(
       [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) || 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}
+          ownAddresses={allWalletsAddresses.length > 0 ? allWalletsAddresses : ownAddresses}
         />
         {isHardwareWallet && !isPopupView && (
           <Text className={styles.connectLedgerText}>

diff --git a/packages/core/src/ui/components/ActivityDetail/TransactionDetails.tsx b/packages/core/src/ui/components/ActivityDetail/TransactionDetails.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import cn from 'classnames';
 
 import { Ellipsis, toast } from '@lace/common';
-import { Box } from '@lace/ui';
+import { Box, Text } from '@lace/ui';
 import { useTranslate } from '@ui/hooks';
 import { getAddressTagTranslations, renderAddressTag } from '@ui/utils';
 
@@ -358,6 +358,7 @@ export const TransactionDetails = ({
                     </div>
                   )}
                   {(summary.addr as string[]).map((addr) => {
+                    const addressName = addressToNameMap?.get(addr);
                     const address = isPopupView ? (
                       <Ellipsis
                         className={cn(styles.addr, styles.fiat)}
@@ -372,8 +373,13 @@ export const TransactionDetails = ({
                     );
                     return (
                       <div key={addr} className={cn([styles.detail, styles.addr, styles.addressTag])}>
-                        {address}
-                        {renderAddressTag(addr, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
+                        {addressName && <Text.Body.Normal weight="$semibold">{addressName}</Text.Body.Normal>}
+                        {<Text.Address color={addressName ? 'secondary' : 'primary'}>{address}</Text.Address>}
+                        {renderAddressTag({
+                          address: addr,
+                          translations: getAddressTagTranslations(t),
+                          ownAddresses
+                        })}
                       </div>
                     );
                   })}

diff --git a/packages/core/src/ui/components/ActivityDetail/TransactionInputOutput.module.scss b/packages/core/src/ui/components/ActivityDetail/TransactionInputOutput.module.scss
@@ -10,12 +10,6 @@
     display: flex;
     justify-content: space-between;
     padding: size_unit(3) 0px;
-    color: var(--text-color-primary);
-    @include text-bodyLarge-bold;
-
-    .label {
-      @include text-bodyLarge-bold;
-    }
 
     button.arrowBtn[data-color='secondary'] {
       border-radius: size_unit(1) !important;
@@ -35,7 +29,6 @@
   .addressContainer {
     display: flex;
     flex-direction: column;
-    gap: size_unit(3);
     border-bottom: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey));
     padding: size_unit(5) 0;
 
@@ -47,22 +40,12 @@
       width: 100%;
       display: flex;
       justify-content: space-between;
+      margin-bottom: size_unit(1.5);
 
       .label {
         display: flex;
         flex: 0 0 50%;
         align-self: baseline;
-        color: var(--text-color-primary, #fff);
-        @include text-body-semi-bold;
-      }
-
-      .address {
-        @include text-address;
-        font-weight: 500;
-        text-align: right;
-      }
-      .addressDetail {
-        font-size: var(--bodySmall, 14px) !important;
       }
 
       .content {
@@ -71,9 +54,6 @@
         align-items: end;
         gap: size_unit(2);
 
-        color: var(--text-color-primary, #ffffff);
-        @include text-body-medium;
-
         text-align: right;
         word-break: break-all;
 
@@ -82,14 +62,6 @@
           flex-direction: column;
           width: 100%;
           align-items: flex-end;
-
-          .asset {
-            color: var(--text-color-primary, #ffffff);
-          }
-
-          .fiat {
-            color: var(--text-color-secondary, #878e9e);
-          }
         }
       }
     }
@@ -114,7 +86,6 @@
 }
 
 .listHeader {
-  color: var(--text-color-primary, #ffffff);
   display: flex;
   justify-content: space-between;
   margin-bottom: size_unit(4);
@@ -124,17 +95,24 @@
     display: flex;
     flex: 0 0 50%;
     align-self: baseline;
-    color: var(--text-color-primary, #ffffff);
-    @include text-body-bold;
   }
 }
 
-.rotateOpen  {
+.rotateOpen {
   transform: rotate(180deg);
-  transition: transform .2s linear;
+  transition: transform 0.2s linear;
 }
 
-.rotateClose  {
+.rotateClose {
   transform: rotate(0deg);
-  transition: transform .2s linear;
+  transition: transform 0.2s linear;
+}
+
+.rightAlign {
+  text-align: right;
+  word-break: break-all;
+}
+
+.addressTextContainer {
+  line-height: size_unit(2);
 }
diff --git a/packages/core/src/ui/components/ActivityDetail/TransactionInputOutput.tsx b/packages/core/src/ui/components/ActivityDetail/TransactionInputOutput.tsx
@@ -11,7 +11,7 @@ import { TranslationsFor } from '../../utils/types';
 
 import { ReactComponent as BracketDown } from '../../assets/icons/bracket-down.component.svg';
 import styles from './TransactionInputOutput.module.scss';
-import { Flex } from '@lace/ui';
+import { Box, Flex, Text } from '@lace/ui';
 import { getAddressTagTranslations, renderAddressTag } from '@ui/utils';
 import { useTranslate } from '@ui/hooks';
 
@@ -61,8 +61,8 @@ export const TransactionInputOutput = ({
   return (
     <div data-testid={testId} className={cn(styles.transactionInOut, { [styles.separatorLine]: withSeparatorLine })}>
       <div className={styles.expanderHeader}>
-        <div className={styles.title}>
-          <span>{title}</span>
+        <div>
+          <Text.Body.Large weight="$bold">{title}</Text.Body.Large>
           {tooltipContent && (
             <Tooltip title={tooltipContent}>
               <InfoCircleOutlined className={styles.infoIcon} />
@@ -84,41 +84,68 @@ export const TransactionInputOutput = ({
       </div>
       {isVisible && (
         <div className={styles.txInOutContent} data-testid="tx-addr-list">
-          {list.map(({ addr: inputAddress, amount: addressAmount, assetList }, idx) => (
-            <div className={styles.addressContainer} key={`${inputAddress}-${idx}`}>
-              <div className={styles.row}>
-                <div className={styles.label}>{translations.address}</div>
-                <Flex flexDirection="column" alignItems="flex-end" gap="$8">
-                  <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)}
-                </Flex>
-              </div>
+          {list.map(({ addr: inputAddress, amount: addressAmount, assetList }, idx) => {
+            const addressName = addressToNameMap?.get(inputAddress);
+            return (
+              <div className={styles.addressContainer} key={`${inputAddress}-${idx}`}>
+                <div className={styles.row}>
+                  <Text.Body.Normal weight="$semibold" className={styles.label}>
+                    {translations.address}
+                  </Text.Body.Normal>
+                  <Flex flexDirection="column" alignItems="flex-end">
+                    {addressName && (
+                      <Box mb="$4" className={cn([styles.rightAlign, styles.addressTextContainer])}>
+                        <Text.Address>{addressToNameMap?.get(inputAddress)}</Text.Address>
+                      </Box>
+                    )}
+                    <Box
+                      mb={addressName ? '$4' : '$12'}
+                      data-testid="tx-address"
+                      className={cn([styles.rightAlign, styles.addressTextContainer])}
+                    >
+                      <Tooltip title={inputAddress}>
+                        <Text.Address color={addressName ? 'secondary' : 'primary'} weight="$medium">
+                          {addEllipsis(inputAddress, 8, 8)}
+                        </Text.Address>
+                      </Tooltip>
+                    </Box>
+                    {renderAddressTag({
+                      address: inputAddress,
+                      translations: getAddressTagTranslations(t),
+                      ownAddresses
+                    })}
+                  </Flex>
+                </div>
 
-              <div className={styles.row}>
-                <div className={styles.label}>{translations.sent}</div>
+                <div className={styles.row}>
+                  <Text.Body.Normal weight="$semibold" className={styles.label}>
+                    {translations.sent}
+                  </Text.Body.Normal>
 
-                <div className={styles.content}>
-                  <div data-testid="tx-amounts" className={styles.amount}>
-                    {/* asset amount */}
-                    <span data-testid="tx-ada-amount" className={styles.asset}>{`${addressAmount} ${coinSymbol}`}</span>
-                    {/* fiat value */}
-                    <span data-testid="tx-fiat-amount" className={styles.fiat}>
-                      {amountTransformer(addressAmount)}
-                    </span>
-                  </div>
-                  {assetList?.map(({ id: assetId, amount: assetAmount, name: assetName, fiatBalance }, indx) => (
-                    <div data-testid="tx-asset" key={assetId || indx} className={styles.amount}>
-                      <span className={styles.asset}> {`${assetAmount} ${assetName || assetId}`}</span>
+                  <div className={styles.content}>
+                    <div data-testid="tx-amounts" className={styles.amount}>
+                      {/* asset amount */}
+                      <Text.Body.Normal data-testid="tx-ada-amount" weight="$medium">
+                        {`${addressAmount} ${coinSymbol}`}
+                      </Text.Body.Normal>
                       {/* fiat value */}
-                      <span className={styles.fiat}>{fiatBalance}</span>
+                      <Text.Body.Normal data-testid="tx-fiat-amount" color="secondary" weight="$medium">
+                        {amountTransformer(addressAmount)}
+                      </Text.Body.Normal>
                     </div>
-                  ))}
+                    {assetList?.map(({ id: assetId, amount: assetAmount, name: assetName, fiatBalance }, indx) => (
+                      <div data-testid="tx-asset" key={assetId || indx} className={styles.amount}>
+                        <Text.Body.Normal weight="$medium">{`${assetAmount} ${assetName || assetId}`}</Text.Body.Normal>
+                        <Text.Body.Normal color="secondary" weight="$medium">
+                          {fiatBalance}
+                        </Text.Body.Normal>
+                      </div>
+                    ))}
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>

diff --git a/packages/core/src/ui/components/ActivityDetail/TxDetailsList.tsx b/packages/core/src/ui/components/ActivityDetail/TxDetailsList.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as BracketDown } from '../../assets/icons/bracket-down.c
 import { DetailRows } from './components';
 import styles from './TransactionInputOutput.module.scss';
 import { TxDetails } from './types';
+import { Text } from '@lace/ui';
 
 interface TxDetailListProps<T extends string> {
   testId: string;
@@ -46,7 +47,7 @@ export const TxDetailList = <T extends string>({
     <div data-testid={testId} className={cn(styles.transactionInOut, { [styles.separatorLine]: withSeparatorLine })}>
       <div className={styles.expanderHeader}>
         <div className={styles.title}>
-          <span>{title}</span>
+          <Text.Body.Large weight="$bold">{title}</Text.Body.Large>
           {tooltipContent && (
             <Tooltip title={tooltipContent}>
               <InfoCircleOutlined className={styles.infoIcon} />
@@ -70,7 +71,9 @@ export const TxDetailList = <T extends string>({
               <div className={cn({ [styles.topBorderContent]: idx > 0 })} />
               {lists.length > 1 && (
                 <div key={`${testId}-list-header`} className={styles.listHeader}>
-                  <div className={styles.listHeaderTitle}>{`${subTitle} ${idx + 1}`}</div>
+                  <Text.Body.Normal className={styles.listHeaderTitle} weight="$bold">{`${subTitle} ${
+                    idx + 1
+                  }`}</Text.Body.Normal>
                 </div>
               )}
               <DetailRows<T> translations={translations} testId={testId} list={list} />

diff --git a/packages/core/src/ui/components/ActivityDetail/components/DetailRows.tsx b/packages/core/src/ui/components/ActivityDetail/components/DetailRows.tsx
@@ -4,6 +4,7 @@ import { DetailRow } from './DetailRow';
 import { TxDetails } from '../types';
 import { TranslationsFor } from '@src/ui/utils/types';
 import styles from '../TransactionInputOutput.module.scss';
+import { Text } from '@lace/ui';
 
 type DetailRowsProps<T extends string> = {
   list: TxDetails<T>;
@@ -33,7 +34,9 @@ export const DetailRows = function DetailRows<T extends string>({
               key={`${testId}-list-header`}
               className={cn(styles.listHeader, { [styles.topBorderContent]: index > 0 })}
             >
-              <div className={styles.listHeaderTitle}>{translations[item.header]}</div>
+              <Text.Body.Normal className={styles.listHeaderTitle} weight="$bold">
+                {translations[item.header]}
+              </Text.Body.Normal>
             </div>
             <DetailRows testId={testId} list={item.details} translations={translations} />
           </>