feat: add advanced mode to receive drawer (#1404)

* feat: add advanced mode to receive drawer

* feat: add functionality to add new unused address

* refactor: simplify translation, util function for total assets

* chore: bump lace-ui-toolkit version

* fix: fix testId on TextLinks

---------

Co-authored-by: Angel Castillo <angel.castillo@iohk.io>
Co-authored-by: Lukasz Jagiela <Lukasz.Jagiela@iohk.io>

Author: 3 people

apps/browser-extension-wallet/package.json

@@ -50,7 +50,7 @@
     "@cardano-sdk/wallet": "0.44.1",
     "@cardano-sdk/web-extension": "0.34.0",
     "@emurgo/cip14-js": "~3.0.1",
-    "@input-output-hk/lace-ui-toolkit": "1.15.1",
+    "@input-output-hk/lace-ui-toolkit": "1.19.0",
     "@lace/cardano": "0.1.0",
     "@lace/common": "0.1.0",
     "@lace/core": "0.1.0",

apps/browser-extension-wallet/src/features/receive-info/components/ReceiveInfo.tsx

@@ -9,6 +9,7 @@ import { HandleInfo } from '@cardano-sdk/wallet';
 import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { Flex } from '@input-output-hk/lace-ui-toolkit';
 
 export interface ReceiveInfoProps {
   name: string;
@@ -42,13 +43,12 @@ export const ReceiveInfo = ({ name, address, handles, goBack }: ReceiveInfoProps
       navigation={<DrawerNavigation onCloseIconClick={handleOnClose} />}
       popupView
     >
-      <div className={styles.container} data-testid="receive-address-qr">
+      <Flex className={styles.container} testId="receive-address-qr" flexDirection="column" gap="$16">
         <AddressCard
           name={name}
           isPopupView
           address={address?.toString()}
           getQRCodeOptions={useCallback(() => getQRCodeOptions(theme, ADDRESS_CARD_QR_CODE_SIZE_POPUP), [theme])}
-          copiedMessage={t('core.infoWallet.addressCopied')}
           onCopyClick={handleCopyAddress}
         />
         {handles?.map(({ nftMetadata, image }) => (
@@ -60,7 +60,7 @@ export const ReceiveInfo = ({ name, address, handles, goBack }: ReceiveInfoProps
             onCopyClick={handleCopyAdaHandle}
           />
         ))}
-      </div>
+      </Flex>
     </Drawer>
   );
 };

apps/browser-extension-wallet/src/hooks/index.ts

@@ -26,4 +26,3 @@ export * from './useWalletAvatar';
 export * from './useActionExecution';
 export * from './useCustomSubmitApi';
 export * from './useSharedWalletData';
-export * from './useNextUnusedAddress';

apps/browser-extension-wallet/src/hooks/useNextUnusedAddress.ts

@@ -139,7 +139,6 @@ const combineObservable = ({ wallet }: Wallet.CardanoWallet): Observable<Observa
         transactionsHistoryOutgoingInFlight,
         transactionsHistoryOutgoingSigned,
         utxoAvailable,
-
         utxoTotal,
         utxoUnspendable
       ]): ObservableWalletState => ({

apps/browser-extension-wallet/src/hooks/useWalletState.ts

@@ -79,6 +79,7 @@ This follows naming from figma
 --lace-gradient => linear-gradient(94.22deg, #ff92e1 -18.3%, #fdc300 118.89%) 
 --lace-pink => #ff92de 
 --lace-yellow => #fdc300 
+--lace-pink-shadow => #ff92de66;
 
 --data-pink => #ff5470 
 --data-pink-10 => rgba(255, 84, 112, 0.1) 

apps/browser-extension-wallet/src/styles/themes/light.scss

@@ -66,4 +66,5 @@ export interface ILocalStorage {
   showMultiAddressModal?: boolean;
   userAvatar?: Record<`${EnvironmentTypes}${string}`, string>;
   isCustomSubmitApiEnabled?: Record<EnvironmentTypes, CustomSubmitApiConfig>;
+  isReceiveInAdvancedMode?: boolean;
 }

apps/browser-extension-wallet/src/types/local-storage.ts

@@ -9,11 +9,12 @@ import CardanoLogo from '../assets/icons/browser-view/cardano-logo.svg';
 import { AssetSortBy, IAssetDetails } from '@views/browser/features/assets/types';
 import { compactNumberWithUnit, formatLocaleNumber, isNumeric } from '@src/utils/format-number';
 import isNumber from 'lodash/isNumber';
-import { CurrencyInfo } from '@src/types';
+import { CardanoTxOut, CurrencyInfo } from '@src/types';
 import { TokenPrice } from '@lib/scripts/types';
 import { PriceResult } from '@hooks';
 import { getTokenDisplayMetadata } from '@utils/get-token-list';
 import { getRandomIcon } from '@lace/common';
+import { isNFT } from './is-nft';
 
 export const variationParser = (variation: number): string =>
   `${variation > 0 ? '+' : ''}${formatLocaleNumber(variation.toString())}`;
@@ -117,3 +118,20 @@ export const assetTransformer = (params: {
 
 export const getTokenAmountInFiat = (amount: string, priceInADA: number, fiat: number): string =>
   new BigNumber(amount).multipliedBy(priceInADA).multipliedBy(fiat).toString(); // first get the price of the amount in ADA and then converted to fiat
+
+export const getTotalAssetsByAddress = (
+  outputs: CardanoTxOut[],
+  assets: Wallet.Assets,
+  targetAddress: string
+): { assets: number; nfts: number } => {
+  const countedAssets = outputs
+    .filter((output) => output.address === targetAddress && !!output.value.assets)
+    .flatMap((output) => [...output.value.assets.keys()])
+    .reduce((allAssets, key) => allAssets.add(key), new Set<string>());
+
+  const nftsInAssets = [...countedAssets]
+    .filter((key: Wallet.Cardano.AssetId) => assets.has(key) && isNFT(assets.get(key)))
+    .reduce((nfts, key) => nfts.add(key), new Set<string>());
+
+  return { assets: countedAssets.size, nfts: nftsInAssets.size };
+};

apps/browser-extension-wallet/src/utils/assets-transformers.ts

@@ -147,3 +147,14 @@ export const compactNumberWithUnit = (value: number | string, decimals = DEFAULT
   const valueToFormat = bigNumberValue.dividedBy(unitThreshold);
   return `${formatLocaleNumber(valueToFormat.toString(), decimals)}${unit}`;
 };
+
+export const formatBalance = (value: number): string => {
+  if (value >= 1_000_000_000) {
+    return `${(value / 1_000_000_000).toFixed(1).replace(/\.0$/, '')}B`;
+  } else if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
+  } else if (value >= 1000) {
+    return `${(value / 1000).toFixed(1).replace(/\.0$/, '')}K`;
+  }
+  return value.toString();
+};

apps/browser-extension-wallet/src/utils/format-number.ts

@@ -6,3 +6,11 @@ import BigNumber from 'bignumber.js';
  */
 export const getTransactionTotalOutput = (outputs: CardanoTxOut[]): BigNumber =>
   outputs.reduce((total, output) => total.plus(output.value.coins.toString()), new BigNumber(0));
+
+export const getTransactionTotalOutputByAddress = (outputs: CardanoTxOut[], targetAddress: string): BigNumber =>
+  outputs.reduce((total, output) => {
+    if (output.address === targetAddress) {
+      return total.plus(output.value.coins.toString());
+    }
+    return total;
+  }, new BigNumber(0));