feature: basic earnings card

Author: maxbbb

src/features/rnbw-membership/screens/rnbw-membership-screen/RnbwMembershipScreen.tsx

@@ -13,6 +13,7 @@ import { useStakingPositionStore } from '@/features/rnbw-staking/stores/rnbwStak
 import { useAirdropBalanceStore } from '@/features/rnbw-rewards/stores/airdropBalanceStore';
 import { delay } from '@/utils/delay';
 import { time } from '@/utils/time';
+import { RnbwStakingEarningsCard } from './components/RnbwStakingEarningsCard';
 
 export const RnbwMembershipScreen = memo(function RnbwMembershipScreen() {
   return (
@@ -23,6 +24,7 @@ export const RnbwMembershipScreen = memo(function RnbwMembershipScreen() {
           <RnbwStakingCard />
           <RnbwUnstakePenaltyRecoveryCard />
           <MembershipTierCard />
+          <RnbwStakingEarningsCard />
           <RnbwRewardsClaimCard />
           <RnbwAirdropClaimCard />
         </Box>

src/features/rnbw-membership/screens/rnbw-membership-screen/components/RnbwStakingEarningsCard.tsx

@@ -0,0 +1,58 @@
+import { memo } from 'react';
+import { Box, Separator, Text } from '@/design-system';
+import { useRnbwStakingEarnings } from '@/features/rnbw-staking/stores/derived/useRnbwStakingEarnings';
+import { RNBW_SYMBOL } from '@/features/rnbw-rewards/constants';
+import rnbwCoinImage from '@/assets/rnbw.png';
+import { Image } from 'react-native';
+
+export const RnbwStakingEarningsCard = memo(function RnbwStakingEarningsCard() {
+  const { totalEarnings, cashbackEarnings, cashbackShare, exitRewardsEarnings, exitRewardsShare } = useRnbwStakingEarnings();
+
+  return (
+    <Box background="surfacePrimary" borderRadius={32} padding="24px" shadow="18px">
+      <Box gap={16}>
+        <Text size="17pt" weight="bold" color="labelTertiary" align="left">
+          {'Total Earnings'}
+        </Text>
+
+        <Box flexDirection="row" alignItems="center" gap={8}>
+          <Image source={rnbwCoinImage} style={{ width: 40, height: 40 }} />
+          <Text size="34pt" weight="bold" color="label">
+            {totalEarnings}
+          </Text>
+        </Box>
+
+        <Separator color="separatorTertiary" thickness={1} />
+
+        <Box gap={14}>
+          <EarningsRow label="Cashback" percentage={cashbackShare} amount={cashbackEarnings} />
+          <Separator color="separatorTertiary" thickness={1} />
+          <EarningsRow label="Exit Rewards" percentage={exitRewardsShare} amount={exitRewardsEarnings} />
+        </Box>
+      </Box>
+    </Box>
+  );
+});
+
+const EarningsRow = memo(function EarningsRow({ label, percentage, amount }: { label: string; percentage: string; amount: string }) {
+  return (
+    <Box flexDirection="row" alignItems="center" justifyContent="space-between">
+      <Box flexDirection="row" alignItems="center" gap={6}>
+        <Text size="17pt" weight="bold" color="label">
+          {label}
+        </Text>
+        <Text size="17pt" weight="bold" color="labelQuaternary">
+          {percentage}
+        </Text>
+      </Box>
+      <Box flexDirection="row" alignItems="center" gap={2}>
+        <Text size="17pt" weight="bold" color={'green'}>
+          {amount}
+        </Text>
+        <Text size="17pt" weight="bold" color={'green'}>
+          {RNBW_SYMBOL}
+        </Text>
+      </Box>
+    </Box>
+  );
+});

src/features/rnbw-staking/stores/derived/useRnbwStakingEarnings.ts

@@ -0,0 +1,51 @@
+import { convertRawAmountToDecimalFormat, isZero } from '@/helpers/utilities';
+import { createDerivedStore } from '@/state/internal/createDerivedStore';
+import { shallowEqual } from '@/worklets/comparisons';
+import { useStakingPositionStore } from '../rnbwStakingPositionStore';
+import { divWorklet, sumWorklet, toFixedWorklet, toPercentageWorklet } from '@/framework/core/safeMath';
+import { formatNumber } from '@/helpers/strings';
+
+type StakingEarnings = {
+  totalEarnings: string;
+  cashbackEarnings: string;
+  cashbackShare: string;
+  exitRewardsEarnings: string;
+  exitRewardsShare: string;
+};
+
+const EMPTY_EARNINGS: StakingEarnings = {
+  totalEarnings: formatNumber('0', { decimals: 4 }),
+  cashbackEarnings: formatNumber('0'),
+  cashbackShare: '0%',
+  exitRewardsEarnings: formatNumber('0'),
+  exitRewardsShare: '0%',
+};
+
+export const useRnbwStakingEarnings = createDerivedStore<StakingEarnings>(
+  $ => {
+    const data = $(useStakingPositionStore, state => state.getData());
+
+    if (!data) return EMPTY_EARNINGS;
+
+    const tokenDecimals = data.decimals;
+    const sessionPnl = data.sessionPnl;
+    const cashbackRaw = sessionPnl.totalCashbackReceived;
+    const exitRewardsRaw = sessionPnl.exchangeRateGain;
+    const totalRaw = sumWorklet(cashbackRaw, exitRewardsRaw);
+    const totalIsZero = isZero(totalRaw);
+    const totalEarnings = convertRawAmountToDecimalFormat(totalRaw, tokenDecimals);
+    const cashbackEarnings = convertRawAmountToDecimalFormat(cashbackRaw, tokenDecimals);
+    const exitRewardsEarnings = convertRawAmountToDecimalFormat(exitRewardsRaw, tokenDecimals);
+    const cashbackRatio = totalIsZero ? '0' : toFixedWorklet(divWorklet(cashbackRaw, totalRaw), 2);
+    const exitRewardsRatio = totalIsZero ? '0' : toFixedWorklet(divWorklet(exitRewardsRaw, totalRaw), 2);
+
+    return {
+      totalEarnings: formatNumber(totalEarnings, { decimals: 4 }),
+      cashbackEarnings: formatNumber(cashbackEarnings),
+      cashbackShare: totalIsZero ? '0%' : `${toPercentageWorklet(cashbackRatio, 0.001)}%`,
+      exitRewardsEarnings: formatNumber(exitRewardsEarnings),
+      exitRewardsShare: totalIsZero ? '0%' : `${toPercentageWorklet(exitRewardsRatio, 0.001)}%`,
+    };
+  },
+  { equalityFn: shallowEqual, fastMode: true }
+);

src/features/rnbw-staking/stores/rnbwStakingPositionStore.ts

@@ -9,12 +9,12 @@ import { type Address } from 'viem';
 import type { Tier } from '@/features/rnbw-membership/types';
 
 type StakingPnl = {
-  exchangeRateGain: string;
   netProfit: string;
   totalCashbackReceived: string;
   totalExitFeePaid: string;
   totalRnbwStaked: string;
   totalRnbwUnstaked: string;
+  exchangeRateGain: string;
 };
 
 type StakingPositionData = {