diff --git a/frontend/components/YourWalletPage/Titles.tsx b/frontend/components/YourWalletPage/Titles.tsx index 20dcbbd4f..4b2c7645f 100644 --- a/frontend/components/YourWalletPage/Titles.tsx +++ b/frontend/components/YourWalletPage/Titles.tsx @@ -1,10 +1,18 @@ import { Flex, Typography } from 'antd'; import { InfoTooltip } from '@/components/InfoTooltip'; +import { Address } from '@/types/Address'; + +import { AddressLink } from '../AddressLink'; const { Paragraph, Text, Title } = Typography; -export const SignerTitle = () => ( +type SignerTitleProps = { signerText: string; signerAddress?: Address }; + +export const SignerTitle = ({ + signerText, + signerAddress, +}: SignerTitleProps) => ( <> Signer  @@ -17,7 +25,10 @@ export const SignerTitle = () => ( This setup enables features like the backup wallet. - Note: Signer’s XDAI balance is included in wallet XDAI balances. + + {signerText} + + diff --git a/frontend/components/YourWalletPage/YourAgent.tsx b/frontend/components/YourWalletPage/YourAgent.tsx index aaa751b1c..2b81a5972 100644 --- a/frontend/components/YourWalletPage/YourAgent.tsx +++ b/frontend/components/YourWalletPage/YourAgent.tsx @@ -1,4 +1,4 @@ -import { Card, Flex, Typography } from 'antd'; +import { Card, Flex, Skeleton, Typography } from 'antd'; import Image from 'next/image'; import { useMemo } from 'react'; import styled from 'styled-components'; @@ -78,30 +78,39 @@ const ServiceAndNftDetails = () => { }; export const YourAgentWallet = () => { - const { agentSafeBalance, agentEoaBalance } = useBalance(); - const { accruedServiceStakingRewards } = useReward(); + const { isBalanceLoaded, agentSafeBalance, agentEoaBalance } = useBalance(); + const { + availableRewardsForEpochEth, + isEligibleForRewards, + accruedServiceStakingRewards, + } = useReward(); const { instanceAddress: agentEoaAddress, multisigAddress: agentSafeAddress, } = useAddress(); + const reward = useMemo(() => { + if (!isBalanceLoaded) return ; + if (!isEligibleForRewards) return 'Not yet earned'; + return `~${balanceFormat(availableRewardsForEpochEth, 2)} OLAS`; + }, [isBalanceLoaded, isEligibleForRewards, availableRewardsForEpochEth]); + const olasBalances = useMemo(() => { return [ { title: 'Claimed rewards', - value: balanceFormat(agentSafeBalance?.OLAS ?? 0, 2), + value: `${balanceFormat(agentSafeBalance?.OLAS, 2)} OLAS`, }, { title: 'Unclaimed rewards', - value: balanceFormat(accruedServiceStakingRewards ?? 0, 2), + value: `${balanceFormat(accruedServiceStakingRewards, 2)} OLAS`, + }, + { + title: 'Current epoch rewards', + value: reward, }, ]; - }, [agentSafeBalance?.OLAS, accruedServiceStakingRewards]); - - const agentXdaiBalance = useMemo( - () => (agentSafeBalance?.ETH ?? 0) + (agentEoaBalance?.ETH ?? 0), - [agentSafeBalance?.ETH, agentEoaBalance?.ETH], - ); + }, [agentSafeBalance?.OLAS, accruedServiceStakingRewards, reward]); return ( @@ -128,7 +137,7 @@ export const YourAgentWallet = () => { list={olasBalances.map((item) => ({ left: item.title, leftClassName: 'text-light text-sm', - right: `${item.value} OLAS`, + right: item.value, }))} parentStyle={infoBreakdownParentStyle} /> @@ -140,7 +149,7 @@ export const YourAgentWallet = () => { { left: , leftClassName: 'text-light text-sm', - right: `${balanceFormat(agentXdaiBalance, 2)} XDAI`, + right: `${balanceFormat(agentSafeBalance?.ETH, 2)} XDAI`, }, ]} parentStyle={infoBreakdownParentStyle} @@ -151,10 +160,14 @@ export const YourAgentWallet = () => { , + left: ( + + ), leftClassName: 'text-light text-sm', - right: , - rightClassName: 'font-normal', + right: `${balanceFormat(agentEoaBalance?.ETH, 2)} XDAI`, }, ]} parentStyle={infoBreakdownParentStyle} diff --git a/frontend/components/YourWalletPage/YourWallet.tsx b/frontend/components/YourWalletPage/YourWallet.tsx index 844e662f9..d00583b86 100644 --- a/frontend/components/YourWalletPage/YourWallet.tsx +++ b/frontend/components/YourWalletPage/YourWallet.tsx @@ -84,11 +84,7 @@ const OlasBalance = () => { }; const XdaiBalance = () => { - const { safeBalance, eoaBalance } = useBalance(); - const totalXdaiBalance = useMemo( - () => (safeBalance?.ETH ?? 0) + (eoaBalance?.ETH ?? 0), - [safeBalance?.ETH, eoaBalance?.ETH], - ); + const { safeBalance } = useBalance(); return ( @@ -97,7 +93,7 @@ const XdaiBalance = () => { { left: XDAI, leftClassName: 'text-light', - right: `${balanceFormat(totalXdaiBalance, 2)} XDAI`, + right: `${balanceFormat(safeBalance?.ETH, 2)} XDAI`, }, ]} parentStyle={infoBreakdownParentStyle} @@ -108,16 +104,21 @@ const XdaiBalance = () => { const Signer = () => { const { masterEoaAddress } = useWallet(); + const { eoaBalance } = useBalance(); return ( , + left: ( + + ), leftClassName: 'text-light', - right: , - rightClassName: 'font-normal', + right: `${balanceFormat(eoaBalance?.ETH, 2)} XDAI`, }, ]} parentStyle={infoBreakdownParentStyle}