fix: ledger staking (#1377)

* fix: ledger staking

* fix: react-hooks/exhaustive-deps

* add: hide keyboard when there is a problem with ledger

* fix: ledger

.eslintrc.js

@@ -55,6 +55,7 @@ module.exports = {
         'react-native/no-inline-styles': 2,
         'react-native/no-color-literals': 2,
         'react-native/no-single-element-style-arrays': 2,
+        'react-hooks/exhaustive-deps': 'off'
       },
     },
   ],

src/components/modals/ledger-locked.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 
-import {Image, View} from 'react-native';
+import {Image, Keyboard, View} from 'react-native';
 
 import {Color} from '@app/colors';
 import {BottomPopupContainer} from '@app/components/bottom-popups';
@@ -19,6 +19,7 @@ import {Modals} from '@app/types';
 export const LedgerLocked = ({onClose}: Modals['ledgerLocked']) => {
   useEffect(() => {
     vibrate(HapticEffects.error);
+    Keyboard.dismiss();
   }, []);
 
   return (

src/helpers/ledger-transport-wrapper.ts

@@ -4,7 +4,7 @@ import {ProviderLedgerReactNative} from '@haqq/provider-ledger-react-native';
 import {hideModal, showModal} from './';
 import {ExtractPromiseType} from '../types';
 
-const WAIT_FOR_CONNECTION_TIME = 1000;
+const WAIT_FOR_CONNECTION_TIME = 5_000;
 
 export const ledgerTransportCbWrapper = async <ReturnType>(
   transport: ProviderInterface,
@@ -13,6 +13,7 @@ export const ledgerTransportCbWrapper = async <ReturnType>(
   const timeount = setTimeout(() => {
     if (transport instanceof ProviderLedgerReactNative) {
       showModal('ledgerLocked');
+      Promise.reject('ledgerTransportCbWrapper timeout');
     }
   }, WAIT_FOR_CONNECTION_TIME);
 

src/helpers/provider-instance.ts

@@ -43,8 +43,14 @@ export function removeProviderInstanceForWallet(wallet: Wallet) {
   }
 }
 
+/**
+ * getProviderInstanceForWallet helper
+ * @param {Wallet} wallet
+ * @param {boolean} [skipAwaitForLedgerCall=false] Use `true` for synthetic transaction on Ledger. Default is `false`.
+ */
 export async function getProviderInstanceForWallet(
   wallet: Wallet,
+  skipAwaitForLedgerCall: boolean = false,
 ): Promise<ProviderInterface> {
   const id = getId(wallet);
   if (!hasProviderInstanceForWallet(wallet)) {
@@ -74,7 +80,9 @@ export async function getProviderInstanceForWallet(
             deviceId: wallet.accountId!,
             appName: LEDGER_APP,
           });
-          awaitForLedger(provider);
+          if (!skipAwaitForLedgerCall) {
+            awaitForLedger(provider);
+          }
           cache.set(id, provider);
         }
         break;

src/screens/home-staking.tsx

@@ -102,7 +102,7 @@ export const HomeStakingScreen = observer(() => {
     return () => {
       visible.map(w => abortProviderInstanceForWallet(w));
     };
-  }, [visible]);
+  }, []);
 
   return (
     <HomeStaking

src/screens/staking-delegate-form.tsx

@@ -1,5 +1,7 @@
 import React, {useCallback, useMemo, useState} from 'react';
 
+import {ProviderLedgerReactNative} from '@haqq/provider-ledger-react-native';
+
 import {StakingDelegateForm} from '@app/components/staking-delegate-form';
 import {app} from '@app/contexts';
 import {getProviderInstanceForWallet} from '@app/helpers';
@@ -19,23 +21,37 @@ export const StakingDelegateFormScreen = () => {
   const currentBalance = useMemo(() => balances[account], [balances, account]);
   const [fee, setFee] = useState<Balance | null>(null);
 
+  const setDefaultFee = useCallback(
+    () => setFee(new Balance(Cosmos.fee.amount)),
+    [],
+  );
+
   useLayoutEffectAsync(async () => {
-    const timer = setTimeout(
-      () => setFee(new Balance(Cosmos.fee.amount)),
-      FEE_ESTIMATING_TIMEOUT_MS,
-    );
+    const timer = setTimeout(() => {
+      setDefaultFee();
+    }, FEE_ESTIMATING_TIMEOUT_MS);
 
-    const instance = await getProviderInstanceForWallet(wallet!);
+    const instance = await getProviderInstanceForWallet(wallet!, true);
     const cosmos = new Cosmos(app.provider);
-    const f = await cosmos.simulateDelegate(
-      instance,
-      wallet?.path!,
-      validator.operator_address,
-      currentBalance.availableForStake,
-    );
-    Logger.log('f.amount', f.amount);
-    clearTimeout(timer);
-    setFee(new Balance(f.amount));
+    try {
+      setFee(null);
+      const f = await cosmos.simulateDelegate(
+        instance,
+        wallet!.path!,
+        validator.operator_address,
+        currentBalance.availableForStake,
+      );
+      Logger.log('f.amount', f.amount);
+      setFee(new Balance(f.amount));
+    } catch (err) {
+      if (instance instanceof ProviderLedgerReactNative) {
+        instance.abort();
+        clearTimeout(timer);
+        setDefaultFee();
+      }
+    } finally {
+      clearTimeout(timer);
+    }
 
     return () => {
       clearTimeout(timer);

src/screens/staking-delegate-preview.tsx

@@ -6,7 +6,6 @@ import {StakingDelegatePreview} from '@app/components/staking-delegate-preview';
 import {onTrackEvent} from '@app/event-actions/on-track-event';
 import {showModal} from '@app/helpers';
 import {awaitForBluetooth} from '@app/helpers/await-for-bluetooth';
-import {awaitForLedger} from '@app/helpers/await-for-ledger';
 import {
   abortProviderInstanceForWallet,
   getProviderInstanceForWallet,
@@ -51,19 +50,13 @@ export const StakingDelegatePreviewScreen = observer(() => {
 
         const transport = await getProviderInstanceForWallet(wallet);
 
-        const query = cosmos.delegate(
+        const resp = await cosmos.delegate(
           transport,
           wallet.path!,
           validator.operator_address,
           amount,
         );
 
-        if (wallet.type === WalletType.ledgerBt) {
-          await awaitForLedger(transport);
-        }
-
-        const resp = await query;
-
         if (!resp) {
           throw new Error('transaction_error');
         }

src/screens/staking-undelegate-form.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 
+import {ProviderLedgerReactNative} from '@haqq/provider-ledger-react-native';
 import {observer} from 'mobx-react';
 
 import {StakingUnDelegateForm} from '@app/components/staking-undelegate-form';
@@ -21,6 +22,11 @@ export const StakingUnDelegateFormScreen = observer(() => {
   const [unboundingTime, setUnboundingTime] = useState(604800000);
   const [fee, setFee] = useState<Balance | null>(null);
 
+  const setDefaultFee = useCallback(
+    () => setFee(new Balance(Cosmos.fee.amount)),
+    [],
+  );
+
   const balance = useMemo(() => {
     const delegations =
       StakingMetadata.getDelegationsForValidator(operator_address);
@@ -33,21 +39,28 @@ export const StakingUnDelegateFormScreen = observer(() => {
   }, [operator_address, wallet?.cosmosAddress]);
 
   useLayoutEffectAsync(async () => {
-    const timer = setTimeout(
-      () => setFee(new Balance(Cosmos.fee.amount)),
-      FEE_ESTIMATING_TIMEOUT_MS,
-    );
+    const timer = setTimeout(() => setDefaultFee(), FEE_ESTIMATING_TIMEOUT_MS);
 
-    const instance = await getProviderInstanceForWallet(wallet!);
-    const f = await cosmos.simulateUndelegate(
-      instance,
-      wallet?.path!,
-      validator.operator_address,
-      balance,
-    );
-    Logger.log('f.amount', f.amount);
-    clearTimeout(timer);
-    setFee(new Balance(f.amount));
+    const instance = await getProviderInstanceForWallet(wallet!, true);
+    try {
+      setFee(null);
+      const f = await cosmos.simulateUndelegate(
+        instance,
+        wallet?.path!,
+        validator.operator_address,
+        balance,
+      );
+      Logger.log('f.amount', f.amount);
+      setFee(new Balance(f.amount));
+    } catch (err) {
+      if (instance instanceof ProviderLedgerReactNative) {
+        instance.abort();
+        clearTimeout(timer);
+        setDefaultFee();
+      }
+    } finally {
+      clearTimeout(timer);
+    }
 
     return () => {
       clearTimeout(timer);

src/variables/common.ts

@@ -267,7 +267,7 @@ export const RAFFLE_TOPIC_VARIABLE_NAME = `notificationsTopic:${PushNotification
 export const DEFAULT_GOVERNANCE_LINK = 'https://shell.haqq.network/governance';
 
 export const ZERO_HEX_NUMBER: HexNumber = '0x0';
-export const FEE_ESTIMATING_TIMEOUT_MS = 5000;
+export const FEE_ESTIMATING_TIMEOUT_MS = 5_000;
 
 export const HAQQ_METADATA: JsonRpcMetadata = {
   url: 'https://haqq.network',