feat: added withdraw and deposit more buttons for supported stablecoins

Author: Matt561

app/components/UI/AssetOverview/Balance/Balance.tsx

@@ -33,6 +33,9 @@ import {
   getNonEvmNetworkImageSourceByChainId,
 } from '../../../../util/networks/customNetworks';
 import { RootState } from '../../../../reducers';
+import { isSupportedLendingTokenByChainId } from '../../Earn/utils';
+import EarnLendingBalance from '../../Earn/components/EarnLendingBalance';
+import { USER_HAS_LENDING_POSITIONS } from '../../Earn/constants/tempLendingConstants';
 
 interface BalanceProps {
   asset: TokenI;
@@ -143,7 +146,11 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
           {asset.name || asset.symbol}
         </Text>
       </AssetElement>
+      {/* TODO: Abstract StakingBalance and EarnLendingBalance into single EarnBalance entrypoint */}
       {asset?.isETH && <StakingBalance asset={asset} />}
+      {asset?.chainId &&
+        isSupportedLendingTokenByChainId(asset.symbol, asset.chainId) &&
+        USER_HAS_LENDING_POSITIONS && <EarnLendingBalance asset={asset} />}
     </View>
   );
 };

app/components/UI/Earn/components/EarnLendingBalance/EarnLendingBalance.styles.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingTop: 14,
+      paddingBottom: 6,
+      gap: 16,
+    },
+    button: {
+      flex: 1,
+    },
+  });
+};
+
+export default styleSheet;

app/components/UI/Earn/components/EarnLendingBalance/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View } from 'react-native';
+import Button, {
+  ButtonSize,
+  ButtonVariants,
+} from '../../../../../component-library/components/Buttons/Button';
+import { TokenI } from '../../../Tokens/types';
+import styleSheet from './EarnLendingBalance.styles';
+import { useStyles } from '../../../../hooks/useStyles';
+import { strings } from '../../../../../../locales/i18n';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../../../../constants/navigation/Routes';
+import { useSelector } from 'react-redux';
+import { selectStablecoinLendingEnabledFlag } from '../../selectors/featureFlags';
+
+export interface EarnLendingBalanceProps {
+  asset: TokenI;
+}
+
+const EarnLendingBalance = ({ asset }: EarnLendingBalanceProps) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const isStablecoinLendingEnabled = useSelector(
+    selectStablecoinLendingEnabledFlag,
+  );
+
+  const navigation = useNavigation();
+
+  const handleNavigateToWithdrawalInputScreen = () => {
+    navigation.navigate('StakeScreens', {
+      screen: Routes.STAKING.UNSTAKE,
+      params: {
+        token: asset,
+      },
+    });
+  };
+
+  const handleNavigateToDepositInputScreen = () => {
+    navigation.navigate('StakeScreens', {
+      screen: Routes.STAKING.STAKE,
+      params: {
+        token: asset,
+      },
+    });
+  };
+
+  if (!isStablecoinLendingEnabled) return null;
+
+  return (
+    <View style={styles.container}>
+      <Button
+        variant={ButtonVariants.Secondary}
+        style={styles.button}
+        size={ButtonSize.Lg}
+        label={strings('earn.withdraw')}
+        onPress={handleNavigateToWithdrawalInputScreen}
+      />
+      <Button
+        variant={ButtonVariants.Secondary}
+        style={styles.button}
+        size={ButtonSize.Lg}
+        label={strings('earn.deposit_more')}
+        onPress={handleNavigateToDepositInputScreen}
+      />
+    </View>
+  );
+};
+export default EarnLendingBalance;