storybook fixed

Author: darioAnongba

ui/components/app/multichain-transaction-details-modal/multichain-transaction-details-modal.stories.tsx

@@ -6,46 +6,57 @@ export default {
 };
 
 const mockTransaction = {
-  type: 'Send BTC',
-  status: 'Confirmed',
+  type: 'send',
+  status: 'confirmed',
   timestamp: new Date('Sep 30 2023 12:56').getTime(),
   id: 'b93ea2cb4eed0f9e13284ed8860bcfc45de2488bb6a8b0b2a843c4b2fbce40f3',
-  from: [{
-    address: "bc1p7atgm33ak04ntsq9366mvym42ecrk4y34ssysc99340a39eq9arq0pu9uj",
-    asset: {
-      amount: '1.2',
-      unit: 'BTC',
-    }
-  }],
-  to: [{
-    address: "bc1p3t7744qewy262ym5afgeuqlwswtpfe22y7c4lwv0a7972p2k73msee7rr3",
-    asset: {
-      amount: '1.2',
-      unit: 'BTC',
-    }
-  }],
-  fees: [{
-    type: 'base',
-    asset: {
-      amount: '1.0001',
-      unit: 'BTC',
-    }
-  }]
+  chain: 'bip122:000000000019d6689c085ae165831e93',
+  account: 'test-account-id',
+  from: [
+    {
+      address: 'bc1p7atgm33ak04ntsq9366mvym42ecrk4y34ssysc99340a39eq9arq0pu9uj',
+      asset: {
+        amount: '1.2',
+        unit: 'BTC',
+        fungible: true,
+      },
+    },
+  ],
+  to: [
+    {
+      address: 'bc1p3t7744qewy262ym5afgeuqlwswtpfe22y7c4lwv0a7972p2k73msee7rr3',
+      asset: {
+        amount: '1.2',
+        unit: 'BTC',
+        fungible: true,
+      },
+    },
+  ],
+  fees: [
+    {
+      type: 'priority',
+      asset: {
+        amount: '1.0001',
+        unit: 'BTC',
+        fungible: true,
+      },
+    },
+  ],
 };
 
 export const Default = {
   args: {
     transaction: mockTransaction,
     onClose: () => console.log('Modal closed'),
-    multichainNetwork: {
+    userAddress:
+      'bc1p7atgm33ak04ntsq9366mvym42ecrk4y34ssysc99340a39eq9arq0pu9uj',
+    networkConfig: {
       nickname: 'Bitcoin',
       isEvmNetwork: false,
       chainId: 'bip122:000000000019d6689c085ae165831e93',
       decimals: 8,
-      network: {
-        chainId: 'bip122:000000000019d6689c085ae165831e93',
-        ticker: 'BTC',
-      },
+      ticker: 'BTC',
+      id: 'btc-mainnet',
     },
   },
 };

ui/components/app/multichain-transaction-details-modal/multichain-transaction-details-modal.test.tsx

@@ -11,7 +11,9 @@ import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { MOCK_ACCOUNT_SOLANA_MAINNET } from '../../../../test/data/mock-accounts';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
+  MULTICHAIN_PROVIDER_CONFIGS,
   MultichainNetworks,
+  MultichainProviderConfig,
   SOLANA_BLOCK_EXPLORER_URL,
 } from '../../../../shared/constants/multichain/networks';
 import mockState from '../../../../test/data/mock-state.json';
@@ -117,6 +119,7 @@ const mockProps = {
   transaction: mockTransaction,
   onClose: jest.fn(),
   userAddress: MOCK_ACCOUNT_SOLANA_MAINNET.address,
+  networkConfig: MULTICHAIN_PROVIDER_CONFIGS[MultichainNetworks.BITCOIN],
 };
 
 describe('MultichainTransactionDetailsModal', () => {
@@ -136,6 +139,7 @@ describe('MultichainTransactionDetailsModal', () => {
       transaction: Transaction;
       onClose: jest.Mock;
       userAddress: string;
+      networkConfig: MultichainProviderConfig;
     } = mockProps,
   ) => {
     const store = configureStore(mockState.metamask);
@@ -299,6 +303,7 @@ describe('MultichainTransactionDetailsModal', () => {
       transaction: mockSwapTransaction,
       onClose: jest.fn(),
       userAddress,
+      networkConfig: MULTICHAIN_PROVIDER_CONFIGS[MultichainNetworks.SOLANA],
     };
 
     renderComponent(swapProps);

ui/components/app/multichain-transaction-details-modal/multichain-transaction-details-modal.tsx

@@ -42,6 +42,7 @@ import {
   KEYRING_TRANSACTION_STATUS_KEY,
   useMultichainTransactionDisplay,
 } from '../../../hooks/useMultichainTransactionDisplay';
+import { MultichainProviderConfig } from '../../../../shared/constants/multichain/networks';
 import {
   formatTimestamp,
   getTransactionUrl,
@@ -53,18 +54,20 @@ export type MultichainTransactionDetailsModalProps = {
   transaction: Transaction;
   onClose: () => void;
   userAddress: string;
+  networkConfig: MultichainProviderConfig;
 };
 
 export function MultichainTransactionDetailsModal({
   transaction,
   onClose,
   userAddress,
+  networkConfig,
 }: MultichainTransactionDetailsModalProps) {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
 
   const { assetInputs, assetOutputs, isRedeposit, baseFee, priorityFee } =
-    useMultichainTransactionDisplay(transaction);
+    useMultichainTransactionDisplay(transaction, networkConfig);
 
   const getStatusColor = (txStatus: string) => {
     switch (txStatus.toLowerCase()) {

ui/components/app/transaction-list/transaction-list.component.js

@@ -476,6 +476,9 @@ export default function TransactionList({
             transaction={selectedTransaction}
             onClose={() => toggleShowDetails(null)}
             userAddress={selectedAccount.address}
+            networkConfig={
+              MULTICHAIN_PROVIDER_CONFIGS[selectedTransaction.chain]
+            }
           />
         )}
 
@@ -653,8 +656,9 @@ export default function TransactionList({
 ///: BEGIN:ONLY_INCLUDE_IF(multichain)
 const MultichainTransactionListItem = ({ transaction, toggleShowDetails }) => {
   const t = useI18nContext();
+  const networkConfig = MULTICHAIN_PROVIDER_CONFIGS[transaction.chain];
   const { assetInputs, assetOutputs, isRedeposit } =
-    useMultichainTransactionDisplay(transaction);
+    useMultichainTransactionDisplay(transaction, networkConfig);
   let title = capitalize(transaction.type);
   const statusKey = KEYRING_TRANSACTION_STATUS_KEY[transaction.status];
 
@@ -675,11 +679,8 @@ const MultichainTransactionListItem = ({ transaction, toggleShowDetails }) => {
                 className="activity-tx__network-badge"
                 data-testid="activity-tx-network-badge"
                 size={AvatarNetworkSize.Xs}
-                name={MULTICHAIN_PROVIDER_CONFIGS[transaction.chain].id}
-                src={
-                  MULTICHAIN_PROVIDER_CONFIGS[transaction.chain].rpcPrefs
-                    ?.imageUrl
-                }
+                name={networkConfig.id}
+                src={networkConfig.rpcPrefs?.imageUrl}
                 borderColor={BackgroundColor.backgroundDefault}
               />
             }
@@ -724,11 +725,8 @@ const MultichainTransactionListItem = ({ transaction, toggleShowDetails }) => {
                 className="activity-tx__network-badge"
                 data-testid="activity-tx-network-badge"
                 size={AvatarNetworkSize.Xs}
-                name={MULTICHAIN_PROVIDER_CONFIGS[transaction.chain].id}
-                src={
-                  MULTICHAIN_PROVIDER_CONFIGS[transaction.chain].rpcPrefs
-                    ?.imageUrl
-                }
+                name={networkConfig.id}
+                src={networkConfig.rpcPrefs?.imageUrl}
                 borderColor={BackgroundColor.backgroundDefault}
               />
             }

ui/hooks/useMultichainTransactionDisplay.ts

@@ -8,7 +8,7 @@ import { useSelector } from 'react-redux';
 import { formatWithThreshold } from '../components/app/assets/util/formatWithThreshold';
 import { getIntlLocale } from '../ducks/locale/locale';
 import { TransactionGroupStatus } from '../../shared/constants/transaction';
-import { MULTICHAIN_PROVIDER_CONFIGS } from '../../shared/constants/multichain/networks';
+import { MultichainProviderConfig } from '../../shared/constants/multichain/networks';
 
 export const KEYRING_TRANSACTION_STATUS_KEY = {
   [KeyringTransactionStatus.Failed]: TransactionStatus.failed,
@@ -29,22 +29,24 @@ type Movement = {
   address?: string;
 };
 
-export function useMultichainTransactionDisplay(transaction: Transaction) {
+export function useMultichainTransactionDisplay(
+  transaction: Transaction,
+  networkConfig: MultichainProviderConfig,
+) {
   const locale = useSelector(getIntlLocale);
   const isNegative = transaction.type === TransactionType.Send;
-  const { decimals } = MULTICHAIN_PROVIDER_CONFIGS[transaction.chain];
 
   const assetInputs = aggregateAmount(
     transaction.from as Movement[],
     isNegative,
     locale,
-    decimals,
+    networkConfig.decimals,
   );
   const assetOutputs = aggregateAmount(
     transaction.to as Movement[],
     isNegative,
     locale,
-    decimals,
+    networkConfig.decimals,
   );
   const baseFee = aggregateAmount(
     transaction.fees.filter((fee) => fee.type === 'base') as Movement[],