Fix/lw 11840 tx list unresponsive nami mode (#1547)

Author: vetalcore

apps/browser-extension-wallet/src/views/nami-mode/NamiView.tsx

@@ -132,11 +132,10 @@ export const NamiView = withDappContext((): React.ReactElement => {
   }, [passwordUtil, setDelegationTxBuilder, setDelegationTxFee, setIsBuildingTx]);
 
   const rewardAccounts = useObservable(inMemoryWallet.delegation.rewardAccounts$);
-  const protocolParameters = useObservable(inMemoryWallet?.protocolParameters$);
   const isStakeRegistered =
     rewardAccounts && rewardAccounts[0].credentialStatus === Wallet.Cardano.StakeCredentialStatus.Registered;
   const { balance } = useBalances(priceResult?.cardano?.price);
-  const { coinBalance: minAda } = walletBalanceTransformer(protocolParameters?.stakeKeyDeposit.toString());
+  const { coinBalance: minAda } = walletBalanceTransformer(walletState?.protocolParameters?.stakeKeyDeposit.toString());
   const coinBalance = balance?.total?.coinBalance && Number(balance?.total?.coinBalance);
   const hasNoFunds = (coinBalance < Number(minAda) && !isStakeRegistered) || (coinBalance === 0 && isStakeRegistered);
 
@@ -160,23 +159,6 @@ export const NamiView = withDappContext((): React.ReactElement => {
     });
   }, [backgroundServices, namiMigration]);
 
-  const getTxInputsValueAndAddress = useCallback(
-    async (inputs: Wallet.Cardano.TxIn[] | Wallet.Cardano.HydratedTxIn[]) =>
-      await Wallet.getTxInputsValueAndAddress(inputs, chainHistoryProvider, inMemoryWallet),
-    [chainHistoryProvider, inMemoryWallet]
-  );
-
-  const sortedTx = useMemo(
-    () =>
-      walletState
-        ? [
-            ...walletState.transactions.outgoing.inFlight,
-            ...walletState.transactions.history.sort((tx1, tx2) => tx2.blockHeader.slot - tx1.blockHeader.slot)
-          ]
-        : undefined,
-    [walletState]
-  );
-
   const openHWFlow = useCallback(
     (path: string) => {
       backgroundServices.handleOpenNamiBrowser({ path });
@@ -244,14 +226,16 @@ export const NamiView = withDappContext((): React.ReactElement => {
         switchWalletMode,
         openExternalLink,
         walletAddresses,
-        transactions: sortedTx,
+        transactions: walletState?.transactions,
         eraSummaries: walletState?.eraSummaries,
-        getTxInputsValueAndAddress,
         certificateInspectorFactory,
         connectHW,
         createHardwareWalletRevamped,
         saveHardwareWallet,
-        setDeletingWallet
+        setDeletingWallet,
+        chainHistoryProvider,
+        protocolParameters: walletState?.protocolParameters,
+        assetInfo: walletState?.assetInfo
       }}
     >
       <CommonOutsideHandlesProvider

packages/core/src/ui/components/AddressCard/AddressDisplayItem.module.scss

@@ -10,7 +10,7 @@
       color: var(--light-mode-dark-grey, var(--color-white)) !important;
       transition: transform 0.5s ease-in-out;
     }
-  
+
     &:hover {
       svg:last-of-type {
         transform: rotate(180deg);
@@ -27,29 +27,31 @@
   }
 }
 
-:global {
-  .ant-dropdown-menu {
-    border-radius: size_unit(1) !important;
-    padding: size_unit(1) size_unit(2) !important;
-    background-color: var(--dark-mode-mid-black, var(--color-white)) !important;
-  }
+.wrapper {
+  :global {
+    .ant-dropdown-menu {
+      border-radius: size_unit(1) !important;
+      padding: size_unit(1) size_unit(2) !important;
+      background-color: var(--dark-mode-mid-black, var(--color-white)) !important;
+    }
 
-  .ant-dropdown-menu-item {
-    padding: size_unit(1.5) 0 !important;
-    color: var(--text-color-primary) !important;
+    .ant-dropdown-menu-item {
+      padding: size_unit(1.5) 0 !important;
+      color: var(--text-color-primary) !important;
 
-    &:hover {
-      background-color: inherit !important;
+      &:hover {
+        background-color: inherit !important;
+      }
     }
-  }
 
-  .ant-dropdown-menu-item:not(:last-child) {
-    border-bottom: 1px solid var(--dark-mode-mid-grey, var(--light-mode-light-grey-plus));
-  }
-  
-  .ant-dropdown-menu-title-content {
-    svg {
-      color: var(--text-color-secondary);
+    .ant-dropdown-menu-item:not(:last-child) {
+      border-bottom: 1px solid var(--dark-mode-mid-grey, var(--light-mode-light-grey-plus));
+    }
+
+    .ant-dropdown-menu-title-content {
+      svg {
+        color: var(--text-color-secondary);
+      }
     }
   }
 }

packages/core/src/ui/components/AddressCard/AddressDisplayItem.tsx

@@ -66,7 +66,13 @@ export const AddressDisplayItem = ({
   );
 
   return displayAsMenu ? (
-    <Dropdown menu={{ items }} placement="top" autoAdjustOverflow dropdownRender={dropdownRender}>
+    <Dropdown
+      overlayClassName={styles.wrapper}
+      menu={{ items }}
+      placement="top"
+      autoAdjustOverflow
+      dropdownRender={dropdownRender}
+    >
       {content}
     </Dropdown>
   ) : (