feat: show used addresses and next unused address in receive box (#1368)

* feat: show used addresses and next unused address in receive box

* refactor: add flag to button

* fix: revert incorrect package bump

* refactor: change feat flag name

* fix: feature flag not casting correctly

* fix: typo in env variable

* fix: failing unit test in staking modal

Author: Shawn

apps/browser-extension-wallet/.env.defaults

@@ -28,6 +28,7 @@ USE_MULTI_DELEGATION_STAKING_GRID_VIEW=true
 USE_MULTI_DELEGATION_STAKING_FILTERS=false
 USE_ROS_STAKING_COLUMN=false
 USE_FOOR_TOPUP=true
+USE_ADVANCED_RECEIVED=false
 
 USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false
 USE_MULTI_WALLET=true

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

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

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

@@ -0,0 +1,23 @@
+import { Cardano } from '@cardano-sdk/core';
+import { useWalletStore } from '@src/stores';
+import { useEffect, useState } from 'react';
+
+export const useNextUnusedAddress = (): Cardano.PaymentAddress => {
+  const [nextUnusedAddress, setNextUnusedAddress] = useState<Cardano.PaymentAddress>();
+  const { inMemoryWallet } = useWalletStore();
+
+  useEffect(() => {
+    if (!inMemoryWallet) {
+      return;
+    }
+
+    const getNextUnusedAddress = async () => {
+      const _nextUnusedAddress = await inMemoryWallet.getNextUnusedAddress();
+      setNextUnusedAddress(_nextUnusedAddress?.[0].address);
+    };
+
+    getNextUnusedAddress();
+  }, [inMemoryWallet]);
+
+  return nextUnusedAddress;
+};

apps/browser-extension-wallet/src/utils/is-used-addresses.ts

@@ -0,0 +1,6 @@
+import { Cardano } from '@cardano-sdk/core';
+
+export const isUsedAddress = (
+  address: Cardano.PaymentAddress,
+  transactionHistory: Cardano.HydratedTx[]
+): Cardano.HydratedTx => transactionHistory.find((tx) => tx.body.outputs.find((output) => output.address === address));

apps/browser-extension-wallet/src/views/browser-view/components/QRInfoWalletDrawer/QRInfoWalletDrawer.module.scss

@@ -7,7 +7,7 @@
   }
 }
 
-.draweHeaderTitle {
+.drawerHeaderTitle {
   display: flex;
   flex-direction: column;
   gap: size_unit(2);

apps/browser-extension-wallet/src/views/browser-view/components/QRInfoWalletDrawer/QRInfoWalletDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { ADDRESS_CARD_QR_CODE_SIZE, AddressCard, HandleAddressCard } from '@lace/core';
 import { useTheme } from '@providers/ThemeProvider';
 import { useWalletStore } from '@src/stores';
@@ -11,20 +11,36 @@ import { useGetHandles } from '@hooks/useGetHandles';
 import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { Button, Flex } from '@input-output-hk/lace-ui-toolkit';
+import { PlusOutlined } from '@ant-design/icons';
+import { isUsedAddress } from '@src/utils/is-used-addresses';
+import { useNextUnusedAddress } from '@hooks';
+
+const useAdvancedReceived = process.env.USE_ADVANCED_RECEIVED === 'true';
 
 const useWalletInformation = () =>
   useWalletStore((state) => ({
     name: state?.walletInfo?.name,
-    address: state?.walletInfo?.addresses[0].address
+    addresses: state?.walletInfo?.addresses
   }));
 
+const useTransactionHistory = () =>
+  useWalletStore((state) => ({
+    transactionHistory: state?.walletState?.transactions.history
+  }));
+
+const addressCopiedTranslation = 'core.infoWallet.addressCopied';
+
 export const QRInfoWalletDrawer = (): React.ReactElement => {
   const analytics = useAnalyticsContext();
   const { t } = useTranslation();
   const { theme } = useTheme();
-  const { name, address } = useWalletInformation();
+  const { name, addresses } = useWalletInformation();
+
+  const { transactionHistory } = useTransactionHistory();
   const [, closeDrawer] = useDrawer();
   const handles = useGetHandles();
+  const nextUnusedAddress = useNextUnusedAddress();
 
   useKeyboardShortcut(['Escape'], () => closeDrawer());
 
@@ -36,24 +52,61 @@ export const QRInfoWalletDrawer = (): React.ReactElement => {
     analytics.sendEventToPostHog(PostHogAction.ReceiveCopyAddressIconClick);
   };
 
+  const usedAddresses = useMemo(
+    () => addresses?.filter((addr) => isUsedAddress(addr.address, transactionHistory)),
+    [addresses, transactionHistory]
+  );
+
+  const getQRCodeOpts = useCallback(() => getQRCodeOptions(theme, ADDRESS_CARD_QR_CODE_SIZE), [theme]);
+
   return (
-    <div className={styles.infoContainer}>
-      <AddressCard
-        name={name}
-        address={address?.toString()}
-        getQRCodeOptions={useCallback(() => getQRCodeOptions(theme, ADDRESS_CARD_QR_CODE_SIZE), [theme])}
-        copiedMessage={t('core.infoWallet.addressCopied')}
-        onCopyClick={handleCopyAddress}
-      />
-      {handles?.map(({ nftMetadata, image }) => (
-        <HandleAddressCard
-          key={nftMetadata.name}
-          name={nftMetadata.name}
-          image={getAssetImageUrl(image || nftMetadata.image)}
-          copiedMessage={t('core.infoWallet.handleCopied')}
-          onCopyClick={handleCopyAdaHandle}
-        />
-      ))}
-    </div>
+    <Flex flexDirection="column" justifyContent="space-between" alignItems="center">
+      <div className={styles.infoContainer}>
+        {!useAdvancedReceived ? (
+          <AddressCard
+            name={name}
+            address={addresses?.[0].address}
+            getQRCodeOptions={getQRCodeOpts}
+            copiedMessage={t(addressCopiedTranslation)}
+            onCopyClick={handleCopyAddress}
+          />
+        ) : (
+          <>
+            {usedAddresses?.map((addr, i) => (
+              <AddressCard
+                key={addr.accountIndex}
+                name={i === 0 ? name : `Index ${i}`}
+                address={addr.address}
+                getQRCodeOptions={getQRCodeOpts}
+                copiedMessage={t(addressCopiedTranslation)}
+                onCopyClick={handleCopyAddress}
+              />
+            ))}
+            {nextUnusedAddress && (
+              <AddressCard
+                name={'Next Unused Address'}
+                address={nextUnusedAddress}
+                getQRCodeOptions={getQRCodeOpts}
+                copiedMessage={t(addressCopiedTranslation)}
+                onCopyClick={handleCopyAddress}
+              />
+            )}
+          </>
+        )}
+        {handles?.map(({ nftMetadata, image }) => (
+          <HandleAddressCard
+            key={nftMetadata.name}
+            name={nftMetadata.name}
+            image={getAssetImageUrl(image || nftMetadata.image)}
+            copiedMessage={t('core.infoWallet.handleCopied')}
+            onCopyClick={handleCopyAdaHandle}
+          />
+        ))}
+      </div>
+      {/* TODO: onClick to generate visible unused address, translation */}
+      {useAdvancedReceived && (
+        <Button.Secondary icon={<PlusOutlined />} onClick={() => void 0} label="Create new address" />
+      )}
+    </Flex>
   );
 };

apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingModals/__tests__/StakingModals.test.tsx

@@ -25,8 +25,10 @@ jest.mock('../../../store', () => ({
 const handles$ = new BehaviorSubject([]);
 
 const inMemoryWallet = {
-  handles$
+  handles$,
+  getNextUnusedAddress: jest.fn()
 };
+
 jest.mock('@src/stores', () => ({
   ...jest.requireActual<any>('@src/stores'),
   useWalletStore: mockUseWalletStore