feat(suite-native): solana staking view only

Author: vytick

suite-common/wallet-utils/src/solanaStakingUtils.ts

@@ -86,6 +86,12 @@ export const getSolAccountTotalStakingBalance = (account: Account) => {
     return formatNetworkAmount(totalStakingBalance, account.symbol);
 };
 
+export const getSolanaCryptoBalanceWithStaking = (account: Account) => {
+    const stakingBalance = getSolAccountTotalStakingBalance(account);
+
+    return new BigNumber(account.formattedBalance).plus(stakingBalance ?? 0).toString();
+};
+
 export const calculateSolanaStakingReward = (accountBalance?: string, apy?: string) => {
     if (!accountBalance || !apy) return '0';
 

suite-native/intl/src/en.ts

@@ -1244,12 +1244,15 @@ export const en = {
         },
         staked: 'Staked',
         rewards: 'Rewards',
+        rewardsPerEpoch: 'Rewards per Epoch',
         apy: 'Annual percentage yield',
         stakingCanBeManaged: 'Staking can be currently managed only in',
         trezorDesktop: 'Trezor Suite for desktop.',
         stakePendingCard: {
             totalStakePending: 'Total stake pending',
             addingToStakingPool: 'Adding to staking pool',
+            activatingStake: 'Activating stake',
+            totalStakeActivating: 'Total stake activating',
             transactionPending: 'Transaction pending',
             unknownStatus: 'Unknown status',
         },

suite-native/module-staking-management/src/components/StakePendingCard.tsx

@@ -3,6 +3,7 @@ import { TouchableOpacity } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { BASE_CRYPTO_MAX_DISPLAYED_DECIMALS } from '@suite-common/formatters';
+import { NetworkSymbol } from '@suite-common/wallet-config';
 import { AccountsRootState, selectAccountNetworkSymbol } from '@suite-common/wallet-core';
 import { Box, Card, Text } from '@suite-native/atoms';
 import { CryptoAmountFormatter, CryptoToFiatAmountFormatter } from '@suite-native/formatters';
@@ -15,20 +16,34 @@ import {
 import { NativeStakingRootState } from '@suite-native/staking/src/types';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
+type StakePendingCardProps = {
+    accountKey: string;
+    handleToggleBottomSheet: (value: boolean) => void;
+};
 const stakingItemStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     alignItems: 'center',
     gap: utils.spacings.sp4,
 }));
 
 const valuesContainerStyle = prepareNativeStyle(utils => ({
-    maxWidth: '40%',
+    maxWidth: '45%',
     flexShrink: 0,
     alignItems: 'flex-end',
     paddingLeft: utils.spacings.sp8,
 }));
 
-const getCardAlertProps = (isStakeConfirming: boolean, isStakePending: boolean) => {
+const isSolana = (symbol: NetworkSymbol) => ['sol', 'dsol'].includes(symbol);
+
+const getCardAlertProps = (
+    symbol: NetworkSymbol | null,
+    isStakeConfirming: boolean,
+    isStakePending: boolean,
+) => {
+    if (!symbol) {
+        return { alertTitle: undefined, alertVariant: undefined } as const;
+    }
+
     if (isStakeConfirming && !isStakePending) {
         return {
             alertTitle: <Translation id="staking.stakePendingCard.transactionPending" />,
@@ -37,7 +52,11 @@ const getCardAlertProps = (isStakeConfirming: boolean, isStakePending: boolean)
     }
     if (!isStakeConfirming && isStakePending) {
         return {
-            alertTitle: <Translation id="staking.stakePendingCard.addingToStakingPool" />,
+            alertTitle: isSolana(symbol) ? (
+                <Translation id="staking.stakePendingCard.activatingStake" />
+            ) : (
+                <Translation id="staking.stakePendingCard.addingToStakingPool" />
+            ),
             alertVariant: 'loading',
         } as const;
     }
@@ -48,10 +67,12 @@ const getCardAlertProps = (isStakeConfirming: boolean, isStakePending: boolean)
     } as const;
 };
 
-type StakePendingCardProps = {
-    accountKey: string;
-    handleToggleBottomSheet: (value: boolean) => void;
-};
+const getTitle = (symbol: NetworkSymbol) =>
+    isSolana(symbol) ? (
+        <Translation id="staking.stakePendingCard.totalStakeActivating" />
+    ) : (
+        <Translation id="staking.stakePendingCard.totalStakePending" />
+    );
 
 export const StakePendingCard = ({
     accountKey,
@@ -75,20 +96,20 @@ export const StakePendingCard = ({
     );
 
     const cardAlertProps = useMemo(
-        () => getCardAlertProps(isStakeConfirming, isStakePending),
-        [isStakeConfirming, isStakePending],
+        () => getCardAlertProps(symbol, isStakeConfirming, isStakePending),
+        [symbol, isStakeConfirming, isStakePending],
     );
 
     if (!symbol || !cardAlertProps.alertVariant) return null;
 
+    const title = getTitle(symbol);
+
     return (
         <TouchableOpacity onPress={() => handleToggleBottomSheet(true)}>
             <Card {...cardAlertProps}>
                 <Box style={applyStyle(stakingItemStyle)}>
                     <Box flex={1} flexDirection="row" alignItems="center">
-                        <Text>
-                            <Translation id="staking.stakePendingCard.totalStakePending" />
-                        </Text>
+                        <Text>{title}</Text>
                     </Box>
                     <Box style={applyStyle(valuesContainerStyle)}>
                         <CryptoAmountFormatter

suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx

@@ -67,6 +67,12 @@ export const StakingBalancesOverviewCard = ({
 
     if (!symbol) return null;
 
+    const rewardsTitle = ['sol', 'dsol'].includes(symbol) ? (
+        <Translation id="staking.rewardsPerEpoch" />
+    ) : (
+        <Translation id="staking.rewards" />
+    );
+
     return (
         <TouchableOpacity onPress={() => handleToggleBottomSheet(true)}>
             <Card style={applyStyle(stakingCardStyle)}>
@@ -99,7 +105,7 @@ export const StakingBalancesOverviewCard = ({
                         <Box style={applyStyle(stakingItemStyle)}>
                             <Icon name="plusCircle" color="textSubdued" size="medium" />
                             <Text color="textSubdued" variant="label">
-                                <Translation id="staking.rewards" />
+                                {rewardsTitle}
                             </Text>
                         </Box>
                         <CryptoAmountFormatter

suite-native/staking/jest.config.js

@@ -0,0 +1,5 @@
+const { ...baseConfig } = require('../../jest.config.native');
+
+module.exports = {
+    ...baseConfig,
+};

suite-native/staking/package.json

@@ -7,7 +7,8 @@
     "main": "src/index",
     "scripts": {
         "depcheck": "yarn g:depcheck",
-        "type-check": "yarn g:tsc --build"
+        "type-check": "yarn g:tsc --build",
+        "test:unit": "yarn g:jest"
     },
     "dependencies": {
         "@suite-common/wallet-config": "workspace:*",