feat(extension): update conway era tx details to the latest figma

apps/browser-extension-wallet/src/config.ts

@@ -22,7 +22,7 @@ export type Config = {
   ADA_PRICE_CHECK_INTERVAL: number;
   TOKEN_PRICE_CHECK_INTERVAL: number;
   AVAILABLE_CHAINS: Wallet.ChainName[];
-  CEXPLORER_BASE_URL: Record<Exclude<EnvironmentTypes, 'Sanchonet'>, string>;
+  CEXPLORER_BASE_URL: Record<EnvironmentTypes, string>;
   CEXPLORER_URL_PATHS: CExplorerUrlPaths;
   SAVED_PRICE_DURATION: number;
 };
@@ -84,7 +84,8 @@ export const config = (): Config => {
     CEXPLORER_BASE_URL: {
       Mainnet: `${process.env.CEXPLORER_URL_MAINNET}`,
       Preprod: `${process.env.CEXPLORER_URL_PREPROD}`,
-      Preview: `${process.env.CEXPLORER_URL_PREVIEW}`
+      Preview: `${process.env.CEXPLORER_URL_PREVIEW}`,
+      Sanchonet: `${process.env.CEXPLORER_URL_SANCHONET}`
     },
     CEXPLORER_URL_PATHS: {
       Tx: 'tx',

apps/browser-extension-wallet/src/features/dapp/components/DappError.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 import { Image } from 'antd';
 import { useTranslation } from 'react-i18next';
 import Empty from '../../../assets/icons/empty.svg';
@@ -10,7 +10,6 @@ type DappErrorProps = {
   description: ReactNode;
   closeButtonLabel?: string;
   onCloseClick?: () => void;
-  onMount?: () => void;
   containerTestId: string;
   imageTestId: string;
   titleTestId: string;
@@ -22,7 +21,6 @@ export const DappError = ({
   description,
   closeButtonLabel,
   onCloseClick,
-  onMount,
   containerTestId,
   imageTestId,
   titleTestId,
@@ -32,14 +30,8 @@ export const DappError = ({
   const { t } = useTranslation();
   const handleClose = useCallback(() => {
     onCloseClick?.();
-    window.close();
   }, [onCloseClick]);
 
-  useEffect(() => {
-    onMount?.();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <div data-testid={containerTestId} className={styles.dappErrorContainer}>
       <div className={styles.dappErrorContent}>

apps/browser-extension-wallet/src/features/dapp/components/collateral/CreateCollateral.tsx

@@ -129,7 +129,10 @@ export const CreateCollateral = ({
               })}
               <div>
                 {renderAmountInfo(
-                  `${Wallet.util.lovelacesToAdaString(collateralTx.fee.toString())} ${cardanoCoin.symbol}`,
+                  Wallet.util.getFormattedAmount({
+                    amount: collateralTx.fee.toString(),
+                    cardanoCoin
+                  }),
                   `${Wallet.util.convertAdaToFiat({
                     ada: Wallet.util.lovelacesToAdaString(collateralTx.fee.toString()),
                     fiat: priceResult?.cardano?.price || 0

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

@@ -9,11 +9,7 @@ import { Skeleton } from 'antd';
 
 const { CertificateType } = Wallet.Cardano;
 
-interface Props {
-  errorMessage?: string;
-}
-
-export const ConfirmDRepRegistrationContainer = ({ errorMessage }: Props): React.ReactElement => {
+export const ConfirmDRepRegistrationContainer = (): React.ReactElement => {
   const { t } = useTranslation();
   const {
     walletUI: { cardanoCoin }
@@ -42,6 +38,7 @@ export const ConfirmDRepRegistrationContainer = ({ errorMessage }: Props): React
 
   const depositPaidWithCardanoSymbol = depositPaidWithSymbol(certificate.deposit, cardanoCoin);
 
+  // TODO: might be changed in scope of https://input-output.atlassian.net/browse/LW-9034
   return (
     <ConfirmDRepRegistration
       dappInfo={dappInfo}
@@ -60,7 +57,6 @@ export const ConfirmDRepRegistrationContainer = ({ errorMessage }: Props): React
           url: t('core.DRepRegistration.url')
         }
       }}
-      errorMessage={errorMessage}
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ConfirmDRepRetirement } from '@lace/core';
 import { certificateInspectorFactory, depositPaidWithSymbol, disallowSignTx, drepIDasBech32FromHash } from './utils';
@@ -12,11 +12,10 @@ import { useViewsFlowContext } from '@providers';
 const { CertificateType } = Wallet.Cardano;
 
 interface Props {
-  errorMessage?: string;
   onError: () => void;
 }
 
-export const ConfirmDRepRetirementContainer = ({ onError, errorMessage }: Props): React.ReactElement => {
+export const ConfirmDRepRetirementContainer = ({ onError }: Props): React.ReactElement => {
   const { t } = useTranslation();
   const {
     walletUI: { cardanoCoin }
@@ -41,23 +40,31 @@ export const ConfirmDRepRetirementContainer = ({ onError, errorMessage }: Props)
     getCertificateData();
   }, [request]);
 
+  const depositPaidWithCardanoSymbol = depositPaidWithSymbol(certificate.deposit, cardanoCoin);
+  const isNotOwnDRepKey = certificate.dRepCredential.hash !== ownPubDRepKeyHash;
+
+  useEffect(() => {
+    if (ownPubDRepKeyHash && isNotOwnDRepKey) {
+      disallowSignTx(request, true);
+      onError();
+    }
+  }, [ownPubDRepKeyHash, isNotOwnDRepKey, onError, request]);
+
+  const onCloseClick = useCallback(() => {
+    window.close();
+  }, []);
+
   if (!certificate || loadingOwnPubDRepKeyHash) {
     return <Skeleton loading />;
   }
 
-  const depositPaidWithCardanoSymbol = depositPaidWithSymbol(certificate.deposit, cardanoCoin);
-  const isNotOwnDRepKey = certificate.dRepCredential.hash !== ownPubDRepKeyHash;
-
   if (isNotOwnDRepKey) {
     return (
       <DappError
         title={t('core.DRepRetirement.drepIdMismatchScreen.title')}
         description={t('core.DRepRetirement.drepIdMismatchScreen.description')}
-        onMount={() => {
-          disallowSignTx(request, false);
-          onError();
-        }}
         containerTestId="drep-id-mismatch-container"
+        onCloseClick={onCloseClick}
         imageTestId="drep-id-mismatch-image"
         titleTestId="drep-id-mismatch-heading"
         descriptionTestId="drep-id-mismatch-description"
@@ -80,7 +87,6 @@ export const ConfirmDRepRetirementContainer = ({ onError, errorMessage }: Props)
           drepId: t('core.DRepRetirement.drepId')
         }
       }}
-      errorMessage={errorMessage}
     />
   );
 };

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

@@ -8,11 +8,7 @@ import { Skeleton } from 'antd';
 
 const { CertificateType } = Wallet.Cardano;
 
-interface Props {
-  errorMessage?: string;
-}
-
-export const ConfirmDRepUpdateContainer = ({ errorMessage }: Props): React.ReactElement => {
+export const ConfirmDRepUpdateContainer = (): React.ReactElement => {
   const { t } = useTranslation();
   const {
     signTxRequest: { request },
@@ -51,7 +47,6 @@ export const ConfirmDRepUpdateContainer = ({ errorMessage }: Props): React.React
           url: t('core.DRepUpdate.url')
         }
       }}
-      errorMessage={errorMessage}
     />
   );
 };

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

@@ -9,11 +9,7 @@ import { Skeleton } from 'antd';
 
 const { CertificateType, RewardAddress } = Wallet.Cardano;
 
-interface Props {
-  errorMessage?: string;
-}
-
-export const ConfirmStakeRegistrationDelegationContainer = ({ errorMessage }: Props): React.ReactElement => {
+export const ConfirmStakeRegistrationDelegationContainer = (): React.ReactElement => {
   const {
     walletUI: { cardanoCoin },
     currentChain
@@ -58,7 +54,6 @@ export const ConfirmStakeRegistrationDelegationContainer = ({ errorMessage }: Pr
           depositPaid: t('core.StakeRegistrationDelegation.depositPaid')
         }
       }}
-      errorMessage={errorMessage}
     />
   );
 };

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

@@ -9,11 +9,7 @@ import { Skeleton } from 'antd';
 
 const { CertificateType, RewardAddress } = Wallet.Cardano;
 
-interface Props {
-  errorMessage?: string;
-}
-
-export const ConfirmStakeVoteDelegationContainer = ({ errorMessage }: Props): React.ReactElement => {
+export const ConfirmStakeVoteDelegationContainer = (): React.ReactElement => {
   const { t } = useTranslation();
   const { currentChain } = useWalletStore();
   const {
@@ -62,7 +58,6 @@ export const ConfirmStakeVoteDelegationContainer = ({ errorMessage }: Props): Re
           alwaysNoConfidence: t('core.StakeVoteDelegation.alwaysNoConfidence')
         }
       }}
-      errorMessage={errorMessage}
     />
   );
 };

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

@@ -9,11 +9,7 @@ import { Skeleton } from 'antd';
 
 const { CertificateType, RewardAddress } = Wallet.Cardano;
 
-interface Props {
-  errorMessage?: string;
-}
-
-export const ConfirmStakeVoteRegistrationDelegationContainer = ({ errorMessage }: Props): React.ReactElement => {
+export const ConfirmStakeVoteRegistrationDelegationContainer = (): React.ReactElement => {
   const { t } = useTranslation();
   const {
     walletUI: { cardanoCoin },
@@ -69,7 +65,6 @@ export const ConfirmStakeVoteRegistrationDelegationContainer = ({ errorMessage }
           depositPaid: t('core.StakeVoteDelegationRegistration.depositPaid')
         }
       }}
-      errorMessage={errorMessage}
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import cn from 'classnames';
 import { Button, PostHogAction } from '@lace/common';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,7 @@ import styles from './ConfirmTransaction.module.scss';
 import { Wallet } from '@lace/cardano';
 import { useWalletStore } from '@stores';
 import { useDisallowSignTx, useSignWithHardwareWallet, useOnBeforeUnload } from './hooks';
-import { getTitleKey, getTxType } from './utils';
+import { getTxType } from './utils';
 import { ConfirmTransactionContent } from './ConfirmTransactionContent';
 import { TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
 import { txSubmitted$ } from '@providers/AnalyticsProvider/onChain';
@@ -20,6 +20,7 @@ import { UserPromptService } from '@lib/scripts/background/services';
 import { DAPP_CHANNELS } from '@src/utils/constants';
 import { of, take } from 'rxjs';
 import { runtime } from 'webextension-polyfill';
+import { Skeleton } from 'antd';
 
 export const ConfirmTransaction = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -45,7 +46,6 @@ export const ConfirmTransaction = (): React.ReactElement => {
     fetchTxType();
   }, [req]);
 
-  const title = txType ? t(getTitleKey(txType)) : '';
   const onConfirm = () => {
     analytics.sendEventToPostHog(PostHogAction.SendTransactionSummaryConfirmClick, {
       [TX_CREATION_TYPE_KEY]: TxCreationType.External
@@ -87,13 +87,17 @@ export const ConfirmTransaction = (): React.ReactElement => {
 
   useOnBeforeUnload(disallowSignTx);
 
+  const onError = useCallback(() => {
+    setConfirmTransactionError(true);
+  }, []);
+
   return (
     <Layout
       layoutClassname={cn(confirmTransactionError && styles.layoutError)}
       pageClassname={styles.spaceBetween}
-      title={!confirmTransactionError && title}
+      title={!confirmTransactionError && txType && t(`core.${txType}.title`)}
     >
-      {req && txType && <ConfirmTransactionContent txType={txType} onError={() => setConfirmTransactionError(true)} />}
+      {req && txType ? <ConfirmTransactionContent txType={txType} onError={onError} /> : <Skeleton loading />}
       {!confirmTransactionError && (
         <div className={styles.actions}>
           <Button

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

@@ -1,8 +1,5 @@
-/* eslint-disable complexity */
-import React from 'react';
-import { Skeleton } from 'antd';
+import React, { useMemo } from 'react';
 import { Wallet } from '@lace/cardano';
-// import { SignTxData } from './types';
 import { ConfirmDRepRegistrationContainer } from './ConfirmDRepRegistrationContainer';
 import { DappTransactionContainer } from './DappTransactionContainer';
 import { ConfirmDRepRetirementContainer } from './ConfirmDRepRetirementContainer';
@@ -16,45 +13,34 @@ import { ConfirmStakeVoteDelegationContainer } from './ConfirmStakeVoteDelegatio
 import { ProposalProceduresContainer } from './ProposalProceduresContainer';
 
 interface Props {
-  txType?: Wallet.Cip30TxType;
-  errorMessage?: string;
+  txType: Wallet.Cip30TxType;
   onError?: () => void;
 }
 
-export const ConfirmTransactionContent = ({ txType, onError, errorMessage }: Props): React.ReactElement => {
-  if (!txType) {
-    return <Skeleton loading />;
-  }
-  if (txType === Wallet.Cip30TxType.DRepRegistration) {
-    return <ConfirmDRepRegistrationContainer errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.DRepRetirement) {
-    return <ConfirmDRepRetirementContainer onError={onError} errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.DRepUpdate) {
-    return <ConfirmDRepUpdateContainer errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.VoteDelegation) {
-    return <ConfirmVoteDelegationContainer errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.VotingProcedures) {
-    return <VotingProceduresContainer errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.VoteRegistrationDelegation) {
-    return <ConfirmVoteRegistrationDelegationContainer errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.StakeRegistrationDelegation) {
-    return <ConfirmStakeRegistrationDelegationContainer errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.StakeVoteDelegationRegistration) {
-    return <ConfirmStakeVoteRegistrationDelegationContainer errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.StakeVoteDelegation) {
-    return <ConfirmStakeVoteDelegationContainer errorMessage={errorMessage} />;
-  }
-  if (txType === Wallet.Cip30TxType.ProposalProcedures) {
-    return <ProposalProceduresContainer errorMessage={errorMessage} />;
-  }
+export const ConfirmTransactionContent = ({ txType, onError }: Props): React.ReactElement => {
+  const containerPerTypeMap: Record<
+    Wallet.Cip30TxType,
+    (props: { onError?: () => void } | never) => React.ReactElement
+  > = useMemo(
+    () => ({
+      [Wallet.Cip30TxType.DRepRegistration]: ConfirmDRepRegistrationContainer,
+      [Wallet.Cip30TxType.DRepRetirement]: ConfirmDRepRetirementContainer,
+      [Wallet.Cip30TxType.DRepUpdate]: ConfirmDRepUpdateContainer,
+      [Wallet.Cip30TxType.VoteDelegation]: ConfirmVoteDelegationContainer,
+      [Wallet.Cip30TxType.VotingProcedures]: VotingProceduresContainer,
+      [Wallet.Cip30TxType.VoteRegistrationDelegation]: ConfirmVoteRegistrationDelegationContainer,
+      [Wallet.Cip30TxType.StakeRegistrationDelegation]: ConfirmStakeRegistrationDelegationContainer,
+      [Wallet.Cip30TxType.StakeVoteDelegationRegistration]: ConfirmStakeVoteRegistrationDelegationContainer,
+      [Wallet.Cip30TxType.StakeVoteDelegation]: ConfirmStakeVoteDelegationContainer,
+      [Wallet.Cip30TxType.ProposalProcedures]: ProposalProceduresContainer,
+      Send: undefined,
+      Mint: undefined,
+      Burn: undefined
+    }),
+    []
+  );
 
-  return <DappTransactionContainer errorMessage={errorMessage} />;
+  const Container = containerPerTypeMap[txType] || DappTransactionContainer;
+
+  return <Container {...(txType === Wallet.Cip30TxType.DRepRetirement && { onError })} />;
 };