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}