fix(nami): [LW-11758] error not displayed setting collateral with insufficient balance (#1493)

* fix(nami): reset collateral data on modal close

* fix(nami): correctly await setting collateral

* fix(nami): init collateral explicitly checks available utxos

* fix(nami): clear pw secrets on collateral modal close

* fixup! fix(nami): init collateral explicitly checks available utxos

Author: mchappell

packages/nami/src/adapters/collateral.test.ts

@@ -112,6 +112,12 @@ describe('useCollateral', () => {
     const unspendable$ = of({
       coins: BigInt(4999),
     });
+    mockWithSignTxConfirmation.mockImplementation(
+      async (mockSubmitCollateralTx, password) => {
+        await mockSubmitCollateralTx();
+      },
+    );
+
     const { result } = renderHook(() =>
       useCollateral({
         inMemoryWallet: {
@@ -132,10 +138,12 @@ describe('useCollateral', () => {
     await result.current.submitCollateral(password);
 
     expect(mockWithSignTxConfirmation).toBeCalledWith(
-      mockSubmitCollateralTx,
+      expect.any(Function),
       password,
     );
+
     expect(mockWithSignTxConfirmation).toBeCalledTimes(1);
+    expect(mockSubmitCollateralTx).toBeCalledTimes(1);
   });
 
   describe('getCollateralUtxo', () => {

packages/nami/src/adapters/collateral.ts

@@ -32,8 +32,11 @@ export const useCollateral = ({
     await inMemoryWallet.utxo.setUnspendable([]);
   }, [inMemoryWallet.utxo]);
   const submitCollateral = useCallback(
-    async (password: string) =>
-      withSignTxConfirmation(submitCollateralTx, password),
+    async (password: string) => {
+      await withSignTxConfirmation(async () => {
+        await submitCollateralTx();
+      }, password);
+    },
     [submitCollateralTx, withSignTxConfirmation],
   );
 

packages/nami/src/ui/app/components/transactionBuilder.tsx

@@ -44,6 +44,7 @@ import ConfirmModal from './confirmModal';
 import UnitDisplay from './unitDisplay';
 
 import type { ConfirmModalRef } from './confirmModal';
+import { firstValueFrom } from 'rxjs';
 
 type States = 'DONE' | 'EDITING' | 'ERROR' | 'LOADING';
 const PoolStates: Record<States, States> = {
@@ -117,13 +118,12 @@ const TransactionBuilder = (undefined, ref) => {
     isInitializingCollateral,
     initializeCollateralTx: initializeCollateral,
     collateralFee,
-
     buildDelegation,
     setSelectedStakePool,
     delegationTxFee,
     isBuildingTx,
     stakingError,
-    passwordUtil: { setPassword },
+    passwordUtil: { setPassword, clearSecrets },
     signAndSubmitTransaction,
     getStakePoolInfo,
     submitCollateralTx,
@@ -248,8 +248,19 @@ const TransactionBuilder = (undefined, ref) => {
       }
       collateralRef.current?.openModal();
 
+      const available = await firstValueFrom(
+        inMemoryWallet.balance.utxo.available$,
+      );
+
       try {
-        await initializeCollateral();
+        if (available.coins < BigInt(5_000_000)) {
+          setData(d => ({
+            ...d,
+            error: 'Transaction not possible (maybe insufficient balance)',
+          }));
+        } else {
+          await initializeCollateral();
+        }
       } catch {
         setData(d => ({
           ...d,
@@ -573,7 +584,7 @@ const TransactionBuilder = (undefined, ref) => {
       />
       <ConfirmModal
         isPopup={true}
-        ready={!isInitializingCollateral}
+        ready={!isInitializingCollateral && !data.error}
         title={
           <Box display="flex" alignItems="center">
             <Icon as={FaRegFileCode} mr="2" /> <Box>Collateral</Box>
@@ -587,9 +598,11 @@ const TransactionBuilder = (undefined, ref) => {
         }}
         onCloseBtn={() => {
           capture(Events.SettingsCollateralXClick);
+          clearSecrets();
         }}
         onConfirm={(status, error) => {
           if (status) {
+            clearSecrets();
             capture(Events.SettingsCollateralConfirmClick);
             toast({
               title: 'Collateral added',