fix: improve hasEnoughAda check when setting collateral (#1578)

* fix: improve hasEnoughAda check when setting collateral

* fix: resolve e2e lint issue

Author: greatertomi

apps/browser-extension-wallet/src/hooks/__tests__/useCollateral.test.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable import/imports-first */
-const mockUseMaxAda = jest.fn();
+const mockUseHasEnoughCollateral = jest.fn();
 const mockUseBuitTxState = jest.fn();
 const mockUseSyncingTheFirstTime = jest.fn();
 const mockCreateTxBuilder = jest.fn();
@@ -13,11 +13,10 @@ import { BehaviorSubject } from 'rxjs';
 import { cleanup, renderHook } from '@testing-library/react-hooks';
 import { AppSettingsProvider } from '@providers';
 import { StoreProvider } from '@src/stores';
-import { COLLATERAL_ADA_AMOUNT, COLLATERAL_AMOUNT_LOVELACES, useCollateral } from '@hooks';
-import { APP_MODE_BROWSER } from '@src/utils/constants';
+import { useCollateral } from '@hooks';
+import { APP_MODE_BROWSER, COLLATERAL_AMOUNT_LOVELACES } from '@src/utils/constants';
 import { I18nextProvider } from 'react-i18next';
 import { i18n } from '@lace/translation';
-import { Wallet } from '@lace/cardano';
 import { act } from 'react-dom/test-utils';
 import { waitFor } from '@testing-library/react';
 import { TxInspection } from '@cardano-sdk/tx-construction';
@@ -59,9 +58,9 @@ jest.mock('@src/views/browser-view/features/send-transaction', () => {
   };
 });
 
-jest.mock('@hooks/useMaxAda', () => ({
-  ...jest.requireActual<any>('@hooks/useMaxAda'),
-  useMaxAda: mockUseMaxAda
+jest.mock('@hooks/useHasEnoughCollateral', () => ({
+  ...jest.requireActual<any>('@hooks/useHasEnoughCollateral'),
+  useHasEnoughCollateral: mockUseHasEnoughCollateral
 }));
 
 jest.mock('@hooks/useSyncingTheFirstTime', () => ({
@@ -91,7 +90,7 @@ describe('Testing useCollateral hook', () => {
   });
   test('should return proper initial states', async () => {
     mockUseBuitTxState.mockReturnValue({});
-    mockUseMaxAda.mockReturnValue('');
+    mockUseHasEnoughCollateral.mockReturnValue(false);
     const hook = renderHook(() => useCollateral(), { wrapper: getWrapper() });
     await waitFor(() => {
       expect(hook.result.current.isInitializing).toBe(false);
@@ -106,21 +105,21 @@ describe('Testing useCollateral hook', () => {
 
   test('should return proper hasEnoughAda value', async () => {
     mockUseBuitTxState.mockReturnValue({});
-    mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT + 1))));
+    mockUseHasEnoughCollateral.mockReturnValue(true);
 
     const hook = renderHook(() => useCollateral(), { wrapper: getWrapper() });
 
     expect(hook.result.current.hasEnoughAda).toBe(true);
 
-    mockUseMaxAda.mockReset();
-    mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT - 1))));
+    mockUseHasEnoughCollateral.mockReset();
+    mockUseHasEnoughCollateral.mockReturnValue(false);
     hook.rerender();
     await waitFor(() => {
       expect(hook.result.current.hasEnoughAda).toBe(false);
     });
 
-    mockUseMaxAda.mockReset();
-    mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT))));
+    mockUseHasEnoughCollateral.mockReset();
+    mockUseHasEnoughCollateral.mockReturnValue(true);
     hook.rerender();
     await waitFor(() => {
       expect(hook.result.current.hasEnoughAda).toBe(true);
@@ -181,7 +180,7 @@ describe('Testing useCollateral hook', () => {
 
     describe('testing initializeCollateralTx', () => {
       test('should exit early in case there is not enough ada or the wallet is syncing for the first time', async () => {
-        mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT - 1))));
+        mockUseHasEnoughCollateral.mockReturnValue(false);
         mockUseSyncingTheFirstTime.mockReturnValue(false);
         const hook = renderHook(() => useCollateral(), { wrapper: getWrapper() });
 
@@ -196,8 +195,8 @@ describe('Testing useCollateral hook', () => {
           expect(inspect).not.toHaveBeenCalled();
         });
 
-        mockUseMaxAda.mockReset();
-        mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT))));
+        mockUseHasEnoughCollateral.mockReset();
+        mockUseHasEnoughCollateral.mockReturnValue(true);
         mockUseSyncingTheFirstTime.mockReturnValue(true);
         hook.rerender();
         act(() => {
@@ -220,7 +219,7 @@ describe('Testing useCollateral hook', () => {
             coins: COLLATERAL_AMOUNT_LOVELACES
           }
         };
-        mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT + 1))));
+        mockUseHasEnoughCollateral.mockReturnValue(true);
         mockUseSyncingTheFirstTime.mockReturnValue(false);
         const hook = renderHook(() => useCollateral(), { wrapper: getWrapper() });
         act(() => {
@@ -239,7 +238,7 @@ describe('Testing useCollateral hook', () => {
     });
     describe('testing submitCollateralTx', () => {
       test('should exit early in case txBuilder is not set', async () => {
-        mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT - 1))));
+        mockUseHasEnoughCollateral.mockReturnValue(false);
         mockUseSyncingTheFirstTime.mockReturnValue(false);
         const hook = renderHook(() => useCollateral(), { wrapper: getWrapper() });
 
@@ -256,8 +255,8 @@ describe('Testing useCollateral hook', () => {
           expect(mockSetBuiltTxData).not.toHaveBeenCalled();
         });
 
-        mockUseMaxAda.mockReset();
-        mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT))));
+        mockUseHasEnoughCollateral.mockReset();
+        mockUseHasEnoughCollateral.mockReturnValue(true);
         mockUseSyncingTheFirstTime.mockReturnValue(true);
         hook.rerender();
         await act(async () => {
@@ -290,7 +289,7 @@ describe('Testing useCollateral hook', () => {
           isInMemoryWallet: true
         });
 
-        mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT + 1))));
+        mockUseHasEnoughCollateral.mockReturnValue(true);
         mockUseSyncingTheFirstTime.mockReturnValue(false);
         const hook = renderHook(() => useCollateral(), { wrapper: getWrapper() });
 
@@ -309,8 +308,8 @@ describe('Testing useCollateral hook', () => {
       test('should submit the tx and set the colateral for HW (not in memory wallet)', async () => {
         mockSubmitTx.mockReset();
 
-        mockUseMaxAda.mockReset();
-        mockUseMaxAda.mockReturnValue(BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT + 1))));
+        mockUseHasEnoughCollateral.mockReset();
+        mockUseHasEnoughCollateral.mockReturnValue(true);
         mockUseSyncingTheFirstTime.mockReset();
         mockUseSyncingTheFirstTime.mockReturnValue(false);
         const hook = renderHook(() => useCollateral(), { wrapper: getWrapper() });

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

@@ -25,3 +25,4 @@ export * from './useWalletAvatar';
 export * from './useActionExecution';
 export * from './useCustomSubmitApi';
 export * from './useSharedWalletData';
+export * from './useHasEnoughCollateral';

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

@@ -1,19 +1,16 @@
 /* eslint-disable unicorn/no-useless-undefined */
 import { useCallback, useMemo, useState } from 'react';
 import { useObservable } from '@lace/common';
-import { useMaxAda } from '@hooks/useMaxAda';
 import { firstValueFrom } from 'rxjs';
 import { map, take, filter } from 'rxjs/operators';
 import { TxBuilder } from '@cardano-sdk/tx-construction';
 import { Cardano } from '@cardano-sdk/core';
 import { isNotNil } from '@cardano-sdk/util';
-import { Wallet } from '@lace/cardano';
 import { useWalletStore } from '@src/stores';
 import { useSyncingTheFirstTime } from '@hooks/useSyncingTheFirstTime';
 import { useBuiltTxState } from '@src/views/browser-view/features/send-transaction';
-
-export const COLLATERAL_ADA_AMOUNT = 5;
-export const COLLATERAL_AMOUNT_LOVELACES = BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT)));
+import { COLLATERAL_AMOUNT_LOVELACES } from '@utils/constants';
+import { useHasEnoughCollateral } from '@hooks/useHasEnoughCollateral';
 
 export type UseCollateralReturn = {
   initializeCollateralTx: () => Promise<void>;
@@ -34,8 +31,7 @@ export const useCollateral = (): UseCollateralReturn => {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const addresses = useObservable(inMemoryWallet?.addresses$);
   const walletAddress = addresses?.[0]?.address;
-  const maxAvailableAda = useMaxAda();
-  const hasEnoughAda = useMemo(() => maxAvailableAda >= COLLATERAL_AMOUNT_LOVELACES, [maxAvailableAda]);
+  const hasEnoughAda = useHasEnoughCollateral();
   const isSyncingForTheFirstTime = useSyncingTheFirstTime(); // here we check wallet is syncing for the first time
   const output: Cardano.TxOut = useMemo(
     () => ({

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

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { Cardano } from '@cardano-sdk/core';
+import { useWalletStore } from '@stores';
+import { useObservable } from '@lace/common';
+import { COLLATERAL_AMOUNT_LOVELACES } from '@utils/constants';
+
+export const useHasEnoughCollateral = (): boolean => {
+  const [hasEnoughAda, setHasEnoughAda] = useState<boolean>(false);
+  const { inMemoryWallet } = useWalletStore();
+  const addresses = useObservable(inMemoryWallet?.addresses$);
+
+  useEffect(() => {
+    (async () => {
+      const walletAddress = addresses?.[0]?.address;
+      const output = {
+        address: walletAddress && Cardano.PaymentAddress(walletAddress),
+        value: {
+          coins: COLLATERAL_AMOUNT_LOVELACES
+        }
+      };
+
+      try {
+        await inMemoryWallet.createTxBuilder().addOutput(output).build().inspect();
+        setHasEnoughAda(true);
+      } catch {
+        setHasEnoughAda(false);
+      }
+    })();
+  }, [addresses, inMemoryWallet]);
+
+  return hasEnoughAda;
+};

apps/browser-extension-wallet/src/utils/constants.ts

@@ -20,6 +20,9 @@ export const EPOCH_DURATION_DAYS = 5;
 
 export const MIN_COIN_TO_SEND = 1;
 
+export const COLLATERAL_ADA_AMOUNT = 5;
+export const COLLATERAL_AMOUNT_LOVELACES = BigInt(Wallet.util.adaToLovelacesString(String(COLLATERAL_ADA_AMOUNT)));
+
 type StaticBalanceTracker = {
   rewardAccounts: {
     rewards$: Wallet.Cardano.Lovelace;

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/SettingsWalletBase.tsx

@@ -9,7 +9,7 @@ import { NetworkChoiceDrawer } from './NetworkChoiceDrawer';
 import { useWalletStore } from '@src/stores';
 import { AboutDrawer } from './AboutDrawer';
 import { config } from '@src/config';
-import { COLLATERAL_AMOUNT_LOVELACES, useCustomSubmitApi, useRedirection } from '@hooks';
+import { useCustomSubmitApi, useRedirection } from '@hooks';
 import { BrowserViewSections, MessageTypes } from '@lib/scripts/types';
 import { useAnalyticsContext, useBackgroundServiceAPIContext } from '@providers';
 import { useSearchParams, useObservable, Button } from '@lace/common';
@@ -19,6 +19,7 @@ import uniq from 'lodash/uniq';
 import { isKeyHashAddress } from '@cardano-sdk/wallet';
 import { AddressesDiscoveryStatus } from '@lib/communication/addresses-discoverer';
 import { CustomSubmitApiDrawer } from './CustomSubmitApiDrawer';
+import { COLLATERAL_AMOUNT_LOVELACES } from '@utils/constants';
 
 const { Title } = Typography;
 

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/__tests__/SettingsWallet.test.tsx

@@ -13,7 +13,7 @@ import { SettingsWallet } from '../SettingsWallet';
 import '@testing-library/jest-dom';
 import { I18nextProvider } from 'react-i18next';
 import { StoreProvider } from '@src/stores';
-import { APP_MODE_BROWSER } from '@src/utils/constants';
+import { APP_MODE_BROWSER, COLLATERAL_AMOUNT_LOVELACES } from '@src/utils/constants';
 import { i18n } from '@lace/translation';
 import {
   AnalyticsProvider,
@@ -25,7 +25,6 @@ import {
 } from '@providers';
 import { BehaviorSubject } from 'rxjs';
 import { act } from 'react-dom/test-utils';
-import { COLLATERAL_AMOUNT_LOVELACES } from '@hooks';
 import { BrowserViewSections, MessageTypes } from '@lib/scripts/types';
 import * as hooks from '@hooks';
 import * as common from '@lace/common';

packages/e2e-tests/src/steps/analyticsSteps.ts

@@ -16,7 +16,9 @@ export const validateEventProperty = async (event: string, property: string, pro
       interval: 1000,
       timeout: 6000,
       timeoutMsg: `Failed while waiting for event '${event}' contains property '${property}' equal to ${propertyValue}. Actual event property value = '${
-        (await getEventPayload(event)).properties[property]
+        (
+          await getEventPayload(event)
+        ).properties[property]
       }'`
     }
   );
@@ -62,7 +64,9 @@ When(/^I validate that (\d+) analytics event\(s\) have been sent$/, async (numbe
     interval: 1000,
     timeout: 6000,
     timeoutMsg: `Failed while waiting for amount events sent: ${Number(numberOfRequests)}. Actual events amount sent: ${
-      (await getAllEventsNames()).length
+      (
+        await getAllEventsNames()
+      ).length
     }\n
     Actual events:\n ${(await getAllEventsNames()).toString()}`
   });