[LW-9597] Transaction expiry date

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

@@ -28,6 +28,7 @@ import { useCurrencyStore, useAppSettingsContext } from '@providers';
 import { logger, signingCoordinator } 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';
 
 interface DappTransactionContainerProps {
   errorMessage?: string;
@@ -106,6 +107,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$);
 
     useEffect(() => {
       if (!req || !protocolParameters) {
@@ -175,6 +177,7 @@ export const DappTransactionContainer = withAddressBookContext(
             errorMessage={errorMessage}
             toAddress={toAddressTokens}
             collateral={txCollateral}
+            expiresBy={eraSlotDateTime(eraSummaries, tx.body.validityInterval?.invalidHereafter)}
           />
         ) : (
           <Skeleton loading />

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

@@ -85,7 +85,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

@@ -1568,7 +1568,11 @@
       "txFee": "Transaction fee",
       "metaData": "Metadata",
       "deposit": "Deposit",
-      "output": "Bundle"
+      "output": "Bundle",
+      "expiresBy": "Expires by",
+      "expiresByTooltip": "This transaction can be added to the blockchain until the specified time. After this, it will automatically expire and no longer be valid.",
+      "noLimit": "No limit",
+      "utc": "UTC"
     },
     "sendReceive": {
       "send": "Send",

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';
 
 const { Text } = Typography;
 
@@ -98,7 +99,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, validityInterval } = {} } = {} } = useBuiltTxState();
     const [metadata] = useMetadata();
     const {
       inMemoryWallet,
@@ -113,14 +114,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(
@@ -140,6 +146,7 @@ export const SendTransactionSummary = withAddressBookContext(
       <>
         <OutputSummaryList
           rows={rows as OutputSummaryProps[]}
+          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

@@ -11,7 +11,7 @@ import styles from './DappTransaction.module.scss';
 import { useTranslate } from '@src/ui/hooks';
 import { TransactionFee, Collateral } from '@ui/components/ActivityDetail';
 
-import { TransactionType, DappTransactionSummary, TransactionAssets } from '@lace/ui';
+import { TransactionType, DappTransactionSummary, TransactionAssets, DappTransactionTextField, Flex } from '@lace/ui';
 import { DappAddressSections } from '../DappAddressSections/DappAddressSections';
 
 const amountTransformer = (fiat: { price: number; code: string }) => (ada: string) =>
@@ -27,6 +27,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>;
@@ -110,7 +111,8 @@ export const DappTransaction = ({
   fiatCurrencyCode,
   fiatCurrencyPrice,
   coinSymbol,
-  dappInfo
+  dappInfo,
+  expiresBy
 }: DappTransactionProps): React.ReactElement => {
   const { t } = useTranslate();
 
@@ -120,6 +122,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} />}
@@ -162,6 +175,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'
+  >;
   onFeeTooltipHover?: () => unknown;
   onDepositTooltipHover?: () => unknown;
 }
@@ -32,6 +45,7 @@ export const OutputSummaryList = ({
   metadata,
   deposit,
   translations,
+  expiresBy,
   onFeeTooltipHover,
   onDepositTooltipHover
 }: OutputSummaryListProps): React.ReactElement => {
@@ -40,6 +54,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) => (
@@ -52,7 +77,6 @@ export const OutputSummaryList = ({
           <OutputSummary {...row} translations={outputSummaryTranslations} />
         </div>
       ))}
-
       {metadata && (
         <div className={styles.metadataRow} data-testid="metadata-container">
           <Text className={styles.metadataLabel} data-testid="metadata-label">
@@ -65,6 +89,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({

packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx

@@ -13,6 +13,7 @@ import { Grid, Cell } from '../grid';
 
 import { TransactionAssets } from './dapp-transaction-assets.component';
 import { TransactionSummary } from './dapp-transaction-summary.component';
+import { TransactionTextField } from './dapp-transaction-text-field.component';
 import { TransactionType } from './dapp-transaction-type.component';
 
 const subtitle = `Control that displays data items in rows.`;
@@ -82,6 +83,13 @@ const Example = (): JSX.Element => (
         tokenName={value.tokenName}
       />
     ))}
+    <Box mt="$10">
+      <TransactionTextField
+        tooltip="This is a sample tooltip text"
+        label="Expires by"
+        text="No limit"
+      />
+    </Box>
   </Layout>
 );
 
@@ -104,6 +112,9 @@ const MainComponents = (): JSX.Element => (
             />
           ))}
         </>
+        <Box mt="$10">
+          <TransactionTextField label="Expires by" text="No limit" />
+        </Box>
       </Layout>
     </Variants.Cell>
   </Variants.Row>