feat: add transaction expiry date (#1008)

Author: Lucas

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/DappTransactionContainer.tsx

@@ -23,6 +23,7 @@ import { useCurrencyStore, useAppSettingsContext } from '@providers';
 import { logger, walletRepository } from '@lib/wallet-api-ui';
 import { useComputeTxCollateral } from '@hooks/useComputeTxCollateral';
 import { utxoAndBackendChainHistoryResolver } from '@src/utils/utxo-chain-history-resolver';
+import { eraSlotDateTime } from '@src/utils/era-slot-datetime';
 import { AddressBookSchema, useDbStateValue } from '@lib/storage';
 import { getAllWalletsAddresses } from '@src/utils/get-all-wallets-addresses';
 
@@ -83,6 +84,7 @@ export const DappTransactionContainer = withAddressBookContext(
     const userRewardAccounts = useObservable(inMemoryWallet.delegation.rewardAccounts$);
     const rewardAccountsAddresses = useMemo(() => userRewardAccounts?.map((key) => key.address), [userRewardAccounts]);
     const protocolParameters = useObservable(inMemoryWallet?.protocolParameters$);
+    const eraSummaries = useObservable(inMemoryWallet?.eraSummaries$);
     const allWalletsAddresses = getAllWalletsAddresses(useObservable(walletRepository.wallets$));
 
     useEffect(() => {
@@ -153,6 +155,7 @@ export const DappTransactionContainer = withAddressBookContext(
             errorMessage={errorMessage}
             toAddress={toAddressTokens}
             collateral={txCollateral}
+            expiresBy={eraSlotDateTime(eraSummaries, tx.body.validityInterval?.invalidHereafter)}
             ownAddresses={allWalletsAddresses.length > 0 ? allWalletsAddresses : ownAddresses}
             addressToNameMap={addressToNameMap}
           />

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

@@ -86,7 +86,8 @@ export const useInitializeTx = (
             fee: inspection.inputSelection.fee,
             hash: inspection.hash,
             outputs: inspection.inputSelection.outputs,
-            handleResolutions: inspection.handleResolutions
+            handleResolutions: inspection.handleResolutions,
+            validityInterval: inspection.body.validityInterval
           },
           tx,
           totalMinimumCoins,

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -838,6 +838,10 @@
   "core.outputSummaryList.metaData": "Metadata",
   "core.outputSummaryList.deposit": "Deposit",
   "core.outputSummaryList.output": "Bundle",
+  "core.outputSummaryList.expiresBy": "Expires by",
+  "core.outputSummaryList.expiresByTooltip": "This transaction can be added to the blockchain until the specified time. After this, it will automatically expire and no longer be valid.",
+  "core.outputSummaryList.noLimit": "No limit",
+  "core.outputSummaryList.utc": "UTC",
   "core.sendReceive.send": "Send",
   "core.sendReceive.receive": "Receive",
   "core.coinInputSelection.assetSelection": "Select tokens or NFTs",

apps/browser-extension-wallet/src/utils/__tests__/era-slot-datetime.test.ts

@@ -0,0 +1,33 @@
+/* eslint-disable unicorn/no-useless-undefined */
+/* eslint-disable no-magic-numbers */
+import { Cardano, EraSummary } from '@cardano-sdk/core';
+import { eraSlotDateTime } from '../era-slot-datetime';
+import { fromSerializableObject } from '@cardano-sdk/util';
+
+export const eraSummaries = fromSerializableObject<EraSummary[]>([
+  {
+    parameters: { epochLength: 4320, slotLength: 20_000 },
+    start: { slot: 0, time: { __type: 'Date', value: 1_666_656_000_000 } }
+  },
+  {
+    parameters: { epochLength: 86_400, slotLength: 1000 },
+    start: { slot: 0, time: { __type: 'Date', value: 1_666_656_000_000 } }
+  }
+]);
+
+const testSlot = Cardano.Slot(36_201_583);
+
+describe('Testing eraSlotDateTime', () => {
+  test('should return undefined', async () => {
+    expect(eraSlotDateTime(undefined, testSlot)).toEqual(undefined);
+  });
+  test('should return undefined', async () => {
+    expect(eraSlotDateTime(eraSummaries, undefined)).toEqual(undefined);
+  });
+  test('should return formatted time', async () => {
+    expect(eraSlotDateTime(eraSummaries, testSlot)).toEqual({
+      utcDate: '12/17/2023',
+      utcTime: '23:59:43'
+    });
+  });
+});

apps/browser-extension-wallet/src/utils/era-slot-datetime.ts

@@ -0,0 +1,19 @@
+/* eslint-disable consistent-return */
+import { EraSummary } from '@cardano-sdk/core';
+import { Wallet } from '@lace/cardano';
+import { formatDate, formatTime } from './format-date';
+
+export const eraSlotDateTime = (
+  eraSummaries: EraSummary[] | undefined,
+  slot: Wallet.Cardano.Slot | undefined
+): { utcDate: string; utcTime: string } | undefined => {
+  if (!eraSummaries || !slot) {
+    return undefined;
+  }
+  const slotTimeCalc = Wallet.createSlotTimeCalc(eraSummaries);
+  const date = slotTimeCalc(slot);
+  return {
+    utcDate: formatDate({ date, format: 'MM/DD/YYYY', type: 'utc' }),
+    utcTime: formatTime({ date, type: 'utc' })
+  };
+};

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

@@ -17,6 +17,7 @@ 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 { eraSlotDateTime } from '@src/utils/era-slot-datetime';
 import { getAllWalletsAddresses } from '@src/utils/get-all-wallets-addresses';
 import { walletRepository } from '@lib/wallet-api-ui';
 
@@ -100,7 +101,8 @@ interface SendTransactionSummaryProps {
 export const SendTransactionSummary = withAddressBookContext(
   ({ isPopupView = false }: SendTransactionSummaryProps): React.ReactElement => {
     const { t } = useTranslation();
-    const { builtTxData: { uiTx: { fee, outputs, handleResolutions } = {} } = {} } = useBuiltTxState();
+    const { builtTxData: { uiTx: { fee, outputs, handleResolutions, validityInterval } = {} } = {} } =
+      useBuiltTxState();
     const [metadata] = useMetadata();
     const {
       inMemoryWallet,
@@ -115,14 +117,19 @@ export const SendTransactionSummary = withAddressBookContext(
     const { fiatCurrency } = useCurrencyStore();
 
     const assetsInfo = useObservable(inMemoryWallet.assetInfo$);
+    const eraSummaries = useObservable(inMemoryWallet.eraSummaries$);
 
     const outputSummaryListTranslation = {
       recipientAddress: t('core.outputSummaryList.recipientAddress'),
       sending: t('core.outputSummaryList.sending'),
       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'),
+      expiresBy: t('core.outputSummaryList.expiresBy'),
+      expiresByTooltip: t('core.outputSummaryList.expiresByTooltip'),
+      noLimit: t('core.outputSummaryList.noLimit'),
+      utc: t('core.outputSummaryList.utc')
     };
 
     const addressToNameMap = useMemo(
@@ -149,6 +156,7 @@ export const SendTransactionSummary = withAddressBookContext(
       <>
         <OutputSummaryList
           rows={rows}
+          expiresBy={eraSlotDateTime(eraSummaries, validityInterval?.invalidHereafter)}
           txFee={{
             ...getFee(fee?.toString(), priceResult?.cardano?.price, cardanoCoin, fiatCurrency),
             tootipText: t('send.theAmountYoullBeChargedToProcessYourTransaction')

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/types.ts

@@ -37,6 +37,7 @@ export interface BuiltTxData {
     outputs: Set<Wallet.Cardano.TxOut & { handleResolution?: HandleResolution }>;
     fee: Wallet.Cardano.Lovelace;
     handleResolutions?: HandleResolution[];
+    validityInterval?: Wallet.Cardano.ValidityInterval;
   };
   error?: string;
   reachedMaxAmountList?: (string | Wallet.Cardano.AssetId)[];

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

@@ -10,7 +10,16 @@ import styles from './DappTransaction.module.scss';
 import { useTranslate } from '@src/ui/hooks';
 import { TransactionFee, Collateral } from '@ui/components/ActivityDetail';
 
-import { TransactionType, DappTransactionSummary, TransactionAssets, Text, Box, Divider } from '@lace/ui';
+import {
+  TransactionType,
+  DappTransactionSummary,
+  TransactionAssets,
+  DappTransactionTextField,
+  Flex,
+  Text,
+  Box,
+  Divider
+} from '@lace/ui';
 import { DappAddressSections } from '../DappAddressSections/DappAddressSections';
 
 const amountTransformer = (fiat: { price: number; code: string }) => (ada: string) =>
@@ -26,6 +35,7 @@ export interface DappTransactionProps {
   fiatCurrencyCode?: string;
   fiatCurrencyPrice?: number;
   coinSymbol?: string;
+  expiresBy?: { utcDate: string; utcTime: string };
   /** tokens send to being sent to or from the user */
   fromAddress: Map<Cardano.PaymentAddress, TokenTransferValue>;
   toAddress: Map<Cardano.PaymentAddress, TokenTransferValue>;
@@ -113,6 +123,7 @@ export const DappTransaction = ({
   fiatCurrencyPrice,
   coinSymbol,
   dappInfo,
+  expiresBy,
   ownAddresses = [],
   addressToNameMap = new Map()
 }: DappTransactionProps): React.ReactElement => {
@@ -124,6 +135,17 @@ export const DappTransaction = ({
   const isFromAddressesEnabled = groupedFromAddresses.size > 0;
   const isToAddressesEnabled = groupedToAddresses.size > 0;
 
+  const expireByText = expiresBy ? (
+    <Flex flexDirection="column" alignItems="flex-end">
+      <span>{expiresBy.utcDate}</span>
+      <span>
+        {expiresBy.utcTime} {t('core.outputSummaryList.utc')}
+      </span>
+    </Flex>
+  ) : (
+    t('core.outputSummaryList.noLimit')
+  );
+
   return (
     <div>
       {errorMessage && <ErrorPane error={errorMessage} className={styles.error} />}
@@ -184,6 +206,14 @@ export const DappTransaction = ({
           />
         )}
 
+        <div className={styles.depositContainer}>
+          <DappTransactionTextField
+            text={expireByText}
+            label={t('core.outputSummaryList.expiresBy')}
+            tooltip={t('core.outputSummaryList.expiresByTooltip')}
+          />
+        </div>
+
         {returnedDeposit !== BigInt(0) && (
           <TransactionFee
             fee={Wallet.util.lovelacesToAdaString(returnedDeposit.toString())}

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

@@ -27,6 +27,15 @@
     color: var(--text-color-primary);
   }
 
+  .validityIntervalExpiresBy {
+    @include text-body-medium;
+    display: flex;
+    flex-direction: column;
+    color: var(--text-color-primary);
+    overflow-wrap: break-word;
+    text-align: right;
+  }
+
   .metadataRow {
     display: flex;
     justify-content: space-between;

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

@@ -4,6 +4,7 @@ import { renderAmountInfo, renderLabel, RowContainer } from '../OutputSummary/Ou
 import { Typography } from 'antd';
 import styles from './OutputSummaryList.module.scss';
 import { TranslationsFor } from '@ui/utils/types';
+import { Flex } from '@lace/ui';
 
 const { Text } = Typography;
 
@@ -19,9 +20,21 @@ export type Costs = {
 export interface OutputSummaryListProps {
   rows: OutputSummaryProps[];
   txFee: Costs & TootipText;
+  expiresBy: { utcDate: string; utcTime: string };
   deposit?: Costs & TootipText;
   metadata?: string;
-  translations: TranslationsFor<'recipientAddress' | 'sending' | 'txFee' | 'deposit' | 'metadata' | 'output'>;
+  translations: TranslationsFor<
+    | 'recipientAddress'
+    | 'sending'
+    | 'txFee'
+    | 'deposit'
+    | 'metadata'
+    | 'output'
+    | 'expiresBy'
+    | 'expiresByTooltip'
+    | 'noLimit'
+    | 'utc'
+  >;
   ownAddresses?: string[];
   onFeeTooltipHover?: () => unknown;
   onDepositTooltipHover?: () => unknown;
@@ -33,6 +46,7 @@ export const OutputSummaryList = ({
   metadata,
   deposit,
   translations,
+  expiresBy,
   ownAddresses,
   onFeeTooltipHover,
   onDepositTooltipHover
@@ -42,6 +56,17 @@ export const OutputSummaryList = ({
     sending: translations.sending
   };
 
+  const expireByText = expiresBy ? (
+    <Flex flexDirection="column" alignItems="flex-end">
+      <span>{expiresBy.utcDate}</span>
+      <span>
+        {expiresBy.utcTime} {translations.utc}
+      </span>
+    </Flex>
+  ) : (
+    translations.noLimit
+  );
+
   return (
     <div className={styles.listContainer}>
       {rows.map((row, idx) => (
@@ -54,7 +79,6 @@ export const OutputSummaryList = ({
           <OutputSummary {...row} translations={outputSummaryTranslations} ownAddresses={ownAddresses} />
         </div>
       ))}
-
       {metadata && (
         <div className={styles.metadataRow} data-testid="metadata-container">
           <Text className={styles.metadataLabel} data-testid="metadata-label">
@@ -67,6 +91,18 @@ export const OutputSummaryList = ({
       )}
 
       <div className={styles.feeContainer} data-testid="summary-fee-container">
+        <RowContainer>
+          {renderLabel({
+            label: translations.expiresBy,
+            tooltipContent: translations.expiresByTooltip,
+            dataTestId: 'validity-interval-expires-by-label'
+          })}
+
+          <Text className={styles.validityIntervalExpiresBy} data-testid="validity-interval-expires-by-value">
+            {expireByText}
+          </Text>
+        </RowContainer>
+
         {deposit && (
           <RowContainer>
             {renderLabel({