fix: Include current epoch's rewards in balance breakdown (#374)

* fix: add current epoch rewards * feat: add wallet addresses to Signer tooltip * fix: Update balanceFormat function in YourAgentWallet component * feat: add XDAI balance instead of address
valory-xyz · Sep 26, 2024 · 15760e0 · 15760e0
1 parent 1115a45
commit 15760e0
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 27 deletions.
diff --git 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&nbsp;
     <InfoTooltip>
@@ -17,7 +25,10 @@ export const SignerTitle = () => (
         This setup enables features like the backup wallet.
       </Paragraph>
       <Paragraph className="text-sm m-0">
-        Note: Signer’s XDAI balance is included in wallet XDAI balances.
+        <Flex gap={4} vertical>
+          <Text className="text-sm">{signerText}</Text>
+          <AddressLink address={signerAddress} />
+        </Flex>
       </Paragraph>
     </InfoTooltip>
   </>

diff --git 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 <Skeleton.Input size="small" active />;
+    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 (
     <Card>
@@ -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: <XdaiTitle />,
                 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 = () => {
           <InfoBreakdownList
             list={[
               {
-                left: <SignerTitle />,
+                left: (
+                  <SignerTitle
+                    signerText="Agent’s wallet signer address:"
+                    signerAddress={agentEoaAddress}
+                  />
+                ),
                 leftClassName: 'text-light text-sm',
-                right: <AddressLink address={agentEoaAddress} />,
-                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
@@ -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 (
     <Flex vertical gap={8}>
@@ -97,7 +93,7 @@ const XdaiBalance = () => {
           {
             left: <Text strong>XDAI</Text>,
             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 (
     <Flex vertical gap={8}>
       <InfoBreakdownList
         list={[
           {
-            left: <SignerTitle />,
+            left: (
+              <SignerTitle
+                signerText="Your wallet signer address:"
+                signerAddress={masterEoaAddress}
+              />
+            ),
             leftClassName: 'text-light',
-            right: <AddressLink address={masterEoaAddress} />,
-            rightClassName: 'font-normal',
+            right: `${balanceFormat(eoaBalance?.ETH, 2)} XDAI`,
           },
         ]}
         parentStyle={infoBreakdownParentStyle}