feat(eth-staking): add unstake pending state, pool stats, stake data …

…from blockbook

packages/blockchain-link-types/src/blockbook.ts

@@ -8,7 +8,7 @@ import type {
     EstimateFeeParams,
     AccountInfoParams,
 } from './params';
-import type { AccountBalanceHistory, FiatRatesLegacy, TokenStandard } from './common';
+import type { AccountBalanceHistory, FiatRatesLegacy, TokenStandard, StakingPool } from './common';
 import type {
     Tx as BlockbookTx,
     Vin,
@@ -103,6 +103,7 @@ export interface AccountInfo {
     nonce?: string;
     tokens?: (XPUBAddress | ERC20 | ERC721 | ERC1155)[];
     erc20Contract?: ERC20;
+    stakingPools?: StakingPool[];
 }
 
 export interface AccountUtxoParams {

packages/blockchain-link-types/src/common.ts

@@ -164,6 +164,18 @@ export interface TokenInfo {
     // transfers: number, // total transactions?
 }
 
+export interface StakingPool {
+    autocompoundBalance: string;
+    claimableAmount: string;
+    contract: string;
+    depositedBalance: string;
+    name: string;
+    pendingBalance: string;
+    pendingDepositedBalance: string;
+    restakedReward: string;
+    withdrawTotalAmount: string;
+}
+
 export interface AccountInfo {
     descriptor: string;
     balance: string;
@@ -209,6 +221,7 @@ export interface AccountInfo {
         ledger: number;
         seq: number;
     };
+    stakingPools?: StakingPool[];
 }
 
 export interface SubscriptionAccountInfo {

packages/blockchain-link-utils/src/blockbook.ts

@@ -392,6 +392,7 @@ export const transformAccountInfo = (payload: BlockbookAccountInfo): AccountInfo
         },
         misc,
         page,
+        stakingPools: payload?.stakingPools,
     };
 };
 

packages/components/src/components/Image/images.ts

@@ -9,6 +9,8 @@ export const SVG_IMAGES = {
     DEVICE_CONFIRM_TREZOR_T2T1: 'device-confirm-trezor-t2t1.svg',
     DEVICE_CONFIRM_TREZOR_T2B1: 'device-confirm-trezor-t2b1.svg',
     SPINNER: 'spinner.svg',
+    SPINNER_BLACK: 'spinner-black.svg',
+    SPINNER_GREY: 'spinner-grey.svg',
     SPINNER_ORANGE: 'spinner-orange.svg',
     DEVICE_ANOTHER_SESSION: 'device-another-session.svg',
     CONNECT_DEVICE: 'connect-device.svg',

packages/suite/src/actions/wallet/stakeActions.ts

@@ -61,7 +61,6 @@ const pushTransaction =
         if (!signedTx || !precomposedTx || !account) return;
 
         const sentTx = await TrezorConnect.pushTransaction(signedTx);
-        // const sentTx = { success: true, payload: { txid: 'ABC ' } };
 
         // close modal regardless result
         dispatch(modalActions.onCancel());
@@ -75,22 +74,38 @@ const pushTransaction =
 
         if (sentTx.success) {
             const { txid } = sentTx.payload;
-            const toastType: Record<StakeType, 'tx-staked' | 'tx-unstaked' | 'tx-claimed'> = {
-                stake: 'tx-staked',
-                unstake: 'tx-unstaked',
-                claim: 'tx-claimed',
+            const notificationPayload = {
+                formattedAmount,
+                device,
+                descriptor: account.descriptor,
+                symbol: account.symbol,
+                txid,
             };
 
-            dispatch(
-                notificationsActions.addToast({
-                    type: toastType[stakeType],
-                    formattedAmount,
-                    device,
-                    descriptor: account.descriptor,
-                    symbol: account.symbol,
-                    txid,
-                }),
-            );
+            if (stakeType === 'stake') {
+                dispatch(
+                    notificationsActions.addToast({
+                        type: 'tx-staked',
+                        ...notificationPayload,
+                    }),
+                );
+            }
+            if (stakeType === 'unstake') {
+                dispatch(
+                    notificationsActions.addToast({
+                        type: 'tx-unstaked',
+                        ...notificationPayload,
+                    }),
+                );
+            }
+            if (stakeType === 'claim') {
+                dispatch(
+                    notificationsActions.addToast({
+                        type: 'tx-claimed',
+                        ...notificationPayload,
+                    }),
+                );
+            }
 
             if (precomposedTx.prevTxid) {
                 // notification from the backend may be delayed.

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimEthForm.tsx

@@ -4,9 +4,10 @@ import { Button, P, variables, Warning } from '@trezor/components';
 import { Translation, FiatValue, FormattedCryptoAmount } from 'src/components/suite';
 import { FeesInfo } from 'src/components/wallet/FeesInfo';
 import { mapTestnetSymbol } from 'src/utils/wallet/coinmarket/coinmarketUtils';
+import { useSelector } from 'src/hooks/suite';
 import { useClaimEthFormContext } from 'src/hooks/wallet/useClaimEthForm';
+import { selectSelectedAccountEverstakeStakingPool } from 'src/reducers/wallet/selectedAccountReducer';
 import { CRYPTO_INPUT } from 'src/types/wallet/stakeForms';
-import { useClaim } from 'src/hooks/wallet/useClaim';
 
 const AmountInfo = styled.div`
     display: flex;
@@ -62,16 +63,11 @@ export const ClaimEthForm = () => {
     // used instead of formState.isValid, which is sometimes returning false even if there are no errors
     const formIsValid = Object.keys(errors).length === 0;
     const transactionInfo = composedLevels?.[selectedFee];
-    const {
-        claim: { readyForClaim },
-    } = useClaim();
-
-    // TODO: Replace with real data.
-    const claimingPeriod = 'in the next block';
+    const { claimableAmount = '0' } = useSelector(selectSelectedAccountEverstakeStakingPool) ?? {};
 
     useEffect(() => {
-        onClaimChange(readyForClaim.toString());
-    }, [onClaimChange, readyForClaim]);
+        onClaimChange(claimableAmount);
+    }, [onClaimChange, claimableAmount]);
 
     return (
         <form onSubmit={handleSubmit(signTx)}>
@@ -81,11 +77,11 @@ export const ClaimEthForm = () => {
                 <TxtRight>
                     <P weight="medium">
                         <GreenTxt>
-                            <FiatValue amount={readyForClaim.toString()} symbol={mappedSymbol} />
+                            <FiatValue amount={claimableAmount} symbol={mappedSymbol} />
                         </GreenTxt>
                     </P>
                     <GreyP size="small" weight="medium">
-                        <FormattedCryptoAmount value={readyForClaim.toString()} symbol={symbol} />
+                        <FormattedCryptoAmount value={claimableAmount} symbol={symbol} />
                     </GreyP>
                 </TxtRight>
             </AmountInfo>
@@ -105,7 +101,7 @@ export const ClaimEthForm = () => {
                     <Translation id="TR_STAKE_CLAIMING_PERIOD" />
                 </GreyP>
 
-                <div>{claimingPeriod}</div>
+                <Translation id="TR_STAKE_CLAIM_IN_NEXT_BLOCK" />
             </ClaimingPeriodWrapper>
 
             <Button

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx

@@ -10,7 +10,7 @@ import { useStakeEthFormContext } from 'src/hooks/wallet/useStakeEthForm';
 import {
     validateDecimals,
     validateInteger,
-    validateLimits,
+    validateLimitsBigNum,
     validateMin,
     validateReserveOrBalance,
 } from 'src/utils/suite/validation';
@@ -54,6 +54,7 @@ export const Inputs = () => {
         localCurrency,
         isAmountForWithdrawalWarningShown,
         isAdviceForWithdrawalWarningShown,
+        currentRate,
     } = useStakeEthFormContext();
 
     const cryptoValue = getValues(CRYPTO_INPUT);
@@ -77,7 +78,7 @@ export const Inputs = () => {
             reserveOrBalance: validateReserveOrBalance(translationString, {
                 account,
             }),
-            limits: validateLimits(translationString, {
+            limits: validateLimitsBigNum(translationString, {
                 amountLimits,
                 formatter: CryptoAmountFormatter,
             }),
@@ -86,22 +87,26 @@ export const Inputs = () => {
 
     return (
         <VStack>
-            <NumberInput
-                noTopLabel
-                name={FIAT_INPUT}
-                control={control}
-                rules={fiatInputRules}
-                maxLength={formInputsMaxLength.fiat}
-                innerAddon={<InputAddon>{localCurrency}</InputAddon>}
-                bottomText={errors[FIAT_INPUT]?.message}
-                inputState={getInputState(fiatError || cryptoError, fiatValue)}
-                onChange={value => {
-                    onFiatAmountChange(value);
-                }}
-            />
+            {currentRate && (
+                <>
+                    <NumberInput
+                        noTopLabel
+                        name={FIAT_INPUT}
+                        control={control}
+                        rules={fiatInputRules}
+                        maxLength={formInputsMaxLength.fiat}
+                        innerAddon={<InputAddon>{localCurrency}</InputAddon>}
+                        bottomText={errors[FIAT_INPUT]?.message}
+                        inputState={getInputState(fiatError || cryptoError, fiatValue)}
+                        onChange={value => {
+                            onFiatAmountChange(value);
+                        }}
+                    />
 
-            {/* TODO: Add new transfer icon. Export from Figma isn't handled as is it should by the strokes to fills online converter */}
-            <StyledIcon icon="TRANSFER" size={16} />
+                    {/* TODO: Add new transfer icon. Export from Figma isn't handled as is it should by the strokes to fills online converter */}
+                    <StyledIcon icon="TRANSFER" size={16} />
+                </>
+            )}
 
             <NumberInput
                 noTopLabel