From b448b4e4541f548cc113219e85bb1d6ba0bc3b5b Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 22 May 2024 17:17:23 +0530
Subject: [PATCH 1/7] chore: Refactor MainRewards component to improve UI and
 add staked amount display

---
 frontend/components/Main/MainRewards.tsx | 82 ++++++++++++++----------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/frontend/components/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
index 6349b50a..6eac517e 100644
--- a/frontend/components/Main/MainRewards.tsx
+++ b/frontend/components/Main/MainRewards.tsx
@@ -1,6 +1,4 @@
-import { Flex, Skeleton, Tag, Typography } from 'antd';
-import { memo } from 'react';
-import styled from 'styled-components';
+import { Col, Flex, Row, Skeleton, Tag, Typography } from 'antd';
 
 import { balanceFormat } from '@/common-util';
 import { useBalance } from '@/hooks';
@@ -10,43 +8,59 @@ import { CardSection } from '../styled/CardSection';
 
 const { Text } = Typography;
 
-const Loader = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-top: 4px;
-`;
-
 export const MainRewards = () => {
   const { availableRewardsForEpochEther, isEligibleForRewards } = useReward();
   const { isBalanceLoaded } = useBalance();
 
+  const isStakingInfoLoaded = false;
+  const isStaked = false;
+  const stakedAmount = 10;
+
   return (
     <CardSection gap={5} vertical>
-      <Text>Staking rewards today </Text>
-      {isBalanceLoaded ? (
-        <Flex gap={10}>
-          <Text strong>
-            {balanceFormat(availableRewardsForEpochEther, 2)} OLAS
-          </Text>
-          <RewardsEarned isEligibleForRewards={isEligibleForRewards} />
-        </Flex>
-      ) : (
-        <Loader>
-          <Skeleton.Button active size="small" style={{ width: 92 }} />
-          <Skeleton.Button active size="small" style={{ width: 92 }} />
-        </Loader>
-      )}
+      <Row justify="space-between">
+        <Col span={12}>
+          <Flex vertical gap={4} align="flex-start">
+            <Text>Staking rewards today</Text>
+            {isBalanceLoaded ? (
+              <>
+                <Text strong style={{ fontSize: 20 }}>
+                  {balanceFormat(availableRewardsForEpochEther, 2)} OLAS
+                </Text>
+                {isEligibleForRewards ? (
+                  <Tag color="success">Earned</Tag>
+                ) : (
+                  <Tag color="processing">Not yet earned</Tag>
+                )}
+              </>
+            ) : (
+              <Flex vertical gap={8}>
+                <Skeleton.Button active size="small" style={{ width: 92 }} />
+                <Skeleton.Button active size="small" style={{ width: 92 }} />
+              </Flex>
+            )}
+          </Flex>
+        </Col>
+
+        <Col span={12}>
+          <Flex vertical gap={4} align="flex-start">
+            <Text>Staked amount</Text>
+            {isStakingInfoLoaded ? (
+              <>
+                <Text strong style={{ fontSize: 20 }}>
+                  {balanceFormat(stakedAmount, 2)} OLAS
+                </Text>
+                {isStaked ? null : <Tag color="processing">Not yet staked</Tag>}
+              </>
+            ) : (
+              <Flex vertical gap={8}>
+                <Skeleton.Button active size="small" style={{ width: 92 }} />
+                <Skeleton.Button active size="small" style={{ width: 92 }} />
+              </Flex>
+            )}
+          </Flex>
+        </Col>
+      </Row>
     </CardSection>
   );
 };
-
-const RewardsEarned = memo(function RewardsEarned({
-  isEligibleForRewards,
-}: {
-  isEligibleForRewards?: boolean;
-}) {
-  if (!isEligibleForRewards)
-    return <Tag color="processing">Not yet earned</Tag>;
-  return <Tag color="success">Earned</Tag>;
-});

From a491c18036b91ac10b10738b5ce7247d5a40246f Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 22 May 2024 17:17:32 +0530
Subject: [PATCH 2/7] chore: Refactor splash window width to use constant

---
 electron/main.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 6725f01b..11b79bc5 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -152,13 +152,15 @@ const createTray = () => {
   });
 };
 
+const APP_WIDTH = 460;
+
 /**
  * Creates the splash window
  */
 const createSplashWindow = () => {
   splashWindow = new BrowserWindow({
-    width: 420,
-    height: 420,
+    width: APP_WIDTH,
+    height: APP_WIDTH,
     resizable: false,
     show: true,
     title: 'Pearl',
@@ -180,7 +182,7 @@ const HEIGHT = 700;
  * Creates the main window
  */
 const createMainWindow = () => {
-  const width = isDev ? 840 : 420;
+  const width = isDev ? 840 : APP_WIDTH;
   mainWindow = new BrowserWindow({
     title: 'Pearl',
     resizable: false,

From 0b624e34c0ea880aece69f41e6531de2a6202d07 Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 22 May 2024 17:30:54 +0530
Subject: [PATCH 3/7] add totalOlasStakedBalance in useBalance hook

---
 frontend/common-util/numberFormatters.ts | 16 ++++++++--------
 frontend/components/Main/MainRewards.tsx | 12 ++++++------
 frontend/context/BalanceProvider.tsx     |  8 ++++++++
 frontend/hooks/useBalance.tsx            |  2 ++
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/common-util/numberFormatters.ts b/frontend/common-util/numberFormatters.ts
index ce1f2872..7613469f 100644
--- a/frontend/common-util/numberFormatters.ts
+++ b/frontend/common-util/numberFormatters.ts
@@ -1,11 +1,11 @@
 export const balanceFormat = (
   balance: number | undefined,
   decimals: 2,
-): string =>
-  balance === undefined
-    ? '--'
-    : Intl.NumberFormat('en-US', {
-        notation: 'compact',
-        maximumFractionDigits: decimals,
-        minimumFractionDigits: decimals,
-      }).format(balance);
+): string => {
+  if (balance === undefined) return '--';
+  return Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: decimals,
+    minimumFractionDigits: decimals,
+  }).format(balance);
+};
diff --git a/frontend/components/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
index 6eac517e..f2531858 100644
--- a/frontend/components/Main/MainRewards.tsx
+++ b/frontend/components/Main/MainRewards.tsx
@@ -8,13 +8,13 @@ import { CardSection } from '../styled/CardSection';
 
 const { Text } = Typography;
 
+// TODO: Replace with real data
+const isStakingInfoLoaded = false;
+const isStaked = false;
+
 export const MainRewards = () => {
   const { availableRewardsForEpochEther, isEligibleForRewards } = useReward();
-  const { isBalanceLoaded } = useBalance();
-
-  const isStakingInfoLoaded = false;
-  const isStaked = false;
-  const stakedAmount = 10;
+  const { isBalanceLoaded, totalOlasStakedBalance } = useBalance();
 
   return (
     <CardSection gap={5} vertical>
@@ -48,7 +48,7 @@ export const MainRewards = () => {
             {isStakingInfoLoaded ? (
               <>
                 <Text strong style={{ fontSize: 20 }}>
-                  {balanceFormat(stakedAmount, 2)} OLAS
+                  {balanceFormat(totalOlasStakedBalance, 2)} OLAS
                 </Text>
                 {isStaked ? null : <Tag color="processing">Not yet staked</Tag>}
               </>
diff --git a/frontend/context/BalanceProvider.tsx b/frontend/context/BalanceProvider.tsx
index d00cc029..49da91eb 100644
--- a/frontend/context/BalanceProvider.tsx
+++ b/frontend/context/BalanceProvider.tsx
@@ -42,6 +42,7 @@ export const BalanceContext = createContext<{
   walletBalances: WalletAddressNumberRecord;
   updateBalances: () => Promise<void>;
   setIsPaused: Dispatch<SetStateAction<boolean>>;
+  totalOlasStakedBalance?: number;
 }>({
   isLoaded: false,
   setIsLoaded: () => {},
@@ -54,6 +55,7 @@ export const BalanceContext = createContext<{
   walletBalances: {},
   updateBalances: async () => {},
   setIsPaused: () => {},
+  totalOlasStakedBalance: undefined,
 });
 
 export const BalanceProvider = ({ children }: PropsWithChildren) => {
@@ -101,6 +103,11 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
     walletBalances,
   ]);
 
+  const totalOlasStakedBalance: number | undefined = useMemo(() => {
+    if (!isLoaded) return;
+    return (olasBondBalance ?? 0) + (olasDepositBalance ?? 0);
+  }, [isLoaded, olasBondBalance, olasDepositBalance]);
+
   const updateBalances = useCallback(async (): Promise<void> => {
     if (!masterEoaAddress) return;
     if (!serviceAddresses) return;
@@ -190,6 +197,7 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
         walletBalances,
         updateBalances,
         setIsPaused,
+        totalOlasStakedBalance,
       }}
     >
       {children}
diff --git a/frontend/hooks/useBalance.tsx b/frontend/hooks/useBalance.tsx
index ea537bae..e40740f5 100644
--- a/frontend/hooks/useBalance.tsx
+++ b/frontend/hooks/useBalance.tsx
@@ -13,6 +13,7 @@ export const useBalance = () => {
     walletBalances,
     updateBalances,
     setIsPaused,
+    totalOlasStakedBalance,
   } = useContext(BalanceContext);
 
   return {
@@ -25,5 +26,6 @@ export const useBalance = () => {
     walletBalances,
     updateBalances,
     setIsPaused,
+    totalOlasStakedBalance,
   };
 };

From 666aea1b5224d372313444174d9fb734ddb63a86 Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 22 May 2024 18:29:52 +0530
Subject: [PATCH 4/7] Refactor CardSection component to use boolean props for
 bordertop and borderbottom

---
 frontend/components/Main/MainAddFunds.tsx        |  2 +-
 frontend/components/Main/MainGasBalance.tsx      |  2 +-
 frontend/components/Main/MainOlasBalance.tsx     |  2 +-
 frontend/components/Settings/Settings.tsx        |  2 +-
 .../components/Setup/Create/SetupEoaFunding.tsx  |  4 ++--
 frontend/components/Setup/SetupRestore.tsx       |  4 ++--
 frontend/components/styled/CardSection.tsx       | 16 ++++++++--------
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/components/Main/MainAddFunds.tsx b/frontend/components/Main/MainAddFunds.tsx
index 009cfad3..2058e70f 100644
--- a/frontend/components/Main/MainAddFunds.tsx
+++ b/frontend/components/Main/MainAddFunds.tsx
@@ -153,7 +153,7 @@ const AddFundsAddressSection = ({
 );
 
 const AddFundsGetTokensSection = () => (
-  <CardSection justify="center" bordertop>
+  <CardSection justify="center" bordertop="true">
     <Link target="_blank" href={COW_SWAP_GNOSIS_XDAI_OLAS_URL}>
       Get OLAS + XDAI on Gnosis Chain {UNICODE_SYMBOLS.EXTERNAL_LINK}
     </Link>
diff --git a/frontend/components/Main/MainGasBalance.tsx b/frontend/components/Main/MainGasBalance.tsx
index b8780265..5266c5ca 100644
--- a/frontend/components/Main/MainGasBalance.tsx
+++ b/frontend/components/Main/MainGasBalance.tsx
@@ -70,7 +70,7 @@ export const MainGasBalance = () => {
   const { isBalanceLoaded } = useBalance();
 
   return (
-    <CardSection justify="space-between" bordertop borderbottom>
+    <CardSection justify="space-between" bordertop="true" borderbottom="true">
       <Text>
         Gas and trading balance&nbsp;
         {masterSafeAddress && (
diff --git a/frontend/components/Main/MainOlasBalance.tsx b/frontend/components/Main/MainOlasBalance.tsx
index ddb93613..39ac921e 100644
--- a/frontend/components/Main/MainOlasBalance.tsx
+++ b/frontend/components/Main/MainOlasBalance.tsx
@@ -21,7 +21,7 @@ export const MainOlasBalance = () => {
   }, [totalOlasBalance]);
 
   return (
-    <CardSection align="end" gap={5} bordertop borderbottom>
+    <CardSection align="end" gap={5} bordertop="true" borderbottom="true">
       {isBalanceLoaded ? (
         <>
           <span className="balance-symbol">{UNICODE_SYMBOLS.OLAS}</span>
diff --git a/frontend/components/Settings/Settings.tsx b/frontend/components/Settings/Settings.tsx
index 8db04bb1..f4f9f55a 100644
--- a/frontend/components/Settings/Settings.tsx
+++ b/frontend/components/Settings/Settings.tsx
@@ -64,7 +64,7 @@ const SettingsMain = () => {
         </Button>
       }
     >
-      <CardSection borderbottom justify="space-between" align="center">
+      <CardSection borderbottom="true" justify="space-between" align="center">
         <Flex vertical>
           <Paragraph strong>Password</Paragraph>
           <Text style={{ lineHeight: 1 }}>********</Text>
diff --git a/frontend/components/Setup/Create/SetupEoaFunding.tsx b/frontend/components/Setup/Create/SetupEoaFunding.tsx
index 5c3b689f..78000ae7 100644
--- a/frontend/components/Setup/Create/SetupEoaFunding.tsx
+++ b/frontend/components/Setup/Create/SetupEoaFunding.tsx
@@ -115,7 +115,7 @@ export const SetupEoaFunding = () => {
         Note that this address will not be used after account creation.
       </Typography.Paragraph>
 
-      <CardSection bordertop borderbottom>
+      <CardSection bordertop="true" borderbottom="true">
         <Typography.Text
           className={loadingStatuses.includes(status) ? 'loading-ellipses' : ''}
         >
@@ -153,7 +153,7 @@ const SetupEoaFundingWaiting = ({
           }
         />
       </CardSection>
-      <CardSection bordertop borderbottom vertical gap={10}>
+      <CardSection bordertop="true" borderbottom="true" vertical gap={10}>
         <AccountCreationCardFlex gap={10}>
           <Flex justify="space-between">
             <Typography.Text className="text-sm" strong>
diff --git a/frontend/components/Setup/SetupRestore.tsx b/frontend/components/Setup/SetupRestore.tsx
index 9d7479bb..a84ca6f8 100644
--- a/frontend/components/Setup/SetupRestore.tsx
+++ b/frontend/components/Setup/SetupRestore.tsx
@@ -30,7 +30,7 @@ export const SetupRestoreMain = () => {
         </Flex>
       }
     >
-      <CardSection gap={10} vertical bordertop borderbottom>
+      <CardSection gap={10} vertical bordertop="true" borderbottom="true">
         <Typography.Text>
           You can recover the Pearl account access by providing the seed phrase
           you received when setting up your account.
@@ -47,7 +47,7 @@ export const SetupRestoreMain = () => {
           </Button>
         </Tooltip>
       </CardSection>
-      <CardSection gap={10} vertical bordertop borderbottom>
+      <CardSection gap={10} vertical bordertop="true" borderbottom="true">
         <Typography.Text>
           If you don’t have the seed phrase but added a backup wallet to your
           account, you can still restore your funds, but you won’t be able to
diff --git a/frontend/components/styled/CardSection.tsx b/frontend/components/styled/CardSection.tsx
index c60b7658..8f54467a 100644
--- a/frontend/components/styled/CardSection.tsx
+++ b/frontend/components/styled/CardSection.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import { COLOR } from '@/constants';
 
 type CardSectionProps = FlexProps & {
-  bordertop?: boolean;
-  borderbottom?: boolean;
+  bordertop?: 'true' | 'false';
+  borderbottom?: 'true' | 'false';
   padding?: number;
 };
 
@@ -18,12 +18,12 @@ export const CardSection = styled(Flex)<CardSectionProps>`
     const { padding, borderbottom, bordertop } = props;
 
     const paddingStyle = `padding: ${Number(padding) ? `${padding}` : '24'}px;`;
-    const borderTopStyle = bordertop
-      ? `border-top: 1px solid ${COLOR.BORDER_GRAY};`
-      : '';
-    const borderBottomStyle = borderbottom
-      ? `border-bottom: 1px solid ${COLOR.BORDER_GRAY};`
-      : '';
+    const borderTopStyle =
+      bordertop === 'true' ? `border-top: 1px solid ${COLOR.BORDER_GRAY};` : '';
+    const borderBottomStyle =
+      borderbottom === 'true'
+        ? `border-bottom: 1px solid ${COLOR.BORDER_GRAY};`
+        : '';
 
     return `
       ${paddingStyle}

From bbcd9bec38b4bc3f3233cc950d6a1b7a38b89df5 Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 22 May 2024 18:30:21 +0530
Subject: [PATCH 5/7] chore: Refactor MainRewards component to improve UI and
 add staked amount display

---
 frontend/components/Main/MainRewards.tsx | 98 +++++++++++++-----------
 frontend/styles/globals.scss             |  2 +-
 2 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/frontend/components/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
index f2531858..660789a2 100644
--- a/frontend/components/Main/MainRewards.tsx
+++ b/frontend/components/Main/MainRewards.tsx
@@ -1,13 +1,21 @@
 import { Col, Flex, Row, Skeleton, Tag, Typography } from 'antd';
+import styled from 'styled-components';
 
 import { balanceFormat } from '@/common-util';
+import { COLOR } from '@/constants';
 import { useBalance } from '@/hooks';
 import { useReward } from '@/hooks/useReward';
 
-import { CardSection } from '../styled/CardSection';
-
 const { Text } = Typography;
 
+const RewardsRow = styled(Row)`
+  margin: 0 -24px;
+  > .ant-col {
+    padding: 24px;
+    border-right: 1px solid ${COLOR.BORDER_GRAY};
+  }
+`;
+
 // TODO: Replace with real data
 const isStakingInfoLoaded = false;
 const isStaked = false;
@@ -17,50 +25,48 @@ export const MainRewards = () => {
   const { isBalanceLoaded, totalOlasStakedBalance } = useBalance();
 
   return (
-    <CardSection gap={5} vertical>
-      <Row justify="space-between">
-        <Col span={12}>
-          <Flex vertical gap={4} align="flex-start">
-            <Text>Staking rewards today</Text>
-            {isBalanceLoaded ? (
-              <>
-                <Text strong style={{ fontSize: 20 }}>
-                  {balanceFormat(availableRewardsForEpochEther, 2)} OLAS
-                </Text>
-                {isEligibleForRewards ? (
-                  <Tag color="success">Earned</Tag>
-                ) : (
-                  <Tag color="processing">Not yet earned</Tag>
-                )}
-              </>
-            ) : (
-              <Flex vertical gap={8}>
-                <Skeleton.Button active size="small" style={{ width: 92 }} />
-                <Skeleton.Button active size="small" style={{ width: 92 }} />
-              </Flex>
-            )}
-          </Flex>
-        </Col>
+    <RewardsRow>
+      <Col span={12}>
+        <Flex vertical gap={4} align="flex-start">
+          <Text>Staking rewards today</Text>
+          {isBalanceLoaded ? (
+            <>
+              <Text strong style={{ fontSize: 20 }}>
+                {balanceFormat(availableRewardsForEpochEther, 2)} OLAS
+              </Text>
+              {isEligibleForRewards ? (
+                <Tag color="success">Earned</Tag>
+              ) : (
+                <Tag color="processing">Not yet earned</Tag>
+              )}
+            </>
+          ) : (
+            <Flex vertical gap={8}>
+              <Skeleton.Button active size="small" style={{ width: 92 }} />
+              <Skeleton.Button active size="small" style={{ width: 92 }} />
+            </Flex>
+          )}
+        </Flex>
+      </Col>
 
-        <Col span={12}>
-          <Flex vertical gap={4} align="flex-start">
-            <Text>Staked amount</Text>
-            {isStakingInfoLoaded ? (
-              <>
-                <Text strong style={{ fontSize: 20 }}>
-                  {balanceFormat(totalOlasStakedBalance, 2)} OLAS
-                </Text>
-                {isStaked ? null : <Tag color="processing">Not yet staked</Tag>}
-              </>
-            ) : (
-              <Flex vertical gap={8}>
-                <Skeleton.Button active size="small" style={{ width: 92 }} />
-                <Skeleton.Button active size="small" style={{ width: 92 }} />
-              </Flex>
-            )}
-          </Flex>
-        </Col>
-      </Row>
-    </CardSection>
+      <Col span={12}>
+        <Flex vertical gap={4} align="flex-start">
+          <Text>Staked amount</Text>
+          {isStakingInfoLoaded ? (
+            <>
+              <Text strong style={{ fontSize: 20 }}>
+                {balanceFormat(totalOlasStakedBalance, 2)} OLAS
+              </Text>
+              {isStaked ? null : <Tag color="processing">Not yet staked</Tag>}
+            </>
+          ) : (
+            <Flex vertical gap={8}>
+              <Skeleton.Button active size="small" style={{ width: 92 }} />
+              <Skeleton.Button active size="small" style={{ width: 92 }} />
+            </Flex>
+          )}
+        </Flex>
+      </Col>
+    </RewardsRow>
   );
 };
diff --git a/frontend/styles/globals.scss b/frontend/styles/globals.scss
index 06a0b67e..ffeb3b25 100644
--- a/frontend/styles/globals.scss
+++ b/frontend/styles/globals.scss
@@ -15,7 +15,7 @@ html, body {
 }
 
 body {
-  max-width: 420px;
+  max-width: 460px;
   border-radius: 8px;
   user-select: none;
 }

From 46da83d2f02487baff6d6508a36be42ef39e61af Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 22 May 2024 19:15:34 +0530
Subject: [PATCH 6/7] chore: add new component

---
 frontend/components/Main/MainRewards.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
index 660789a2..df0f69b7 100644
--- a/frontend/components/Main/MainRewards.tsx
+++ b/frontend/components/Main/MainRewards.tsx
@@ -20,7 +20,7 @@ const RewardsRow = styled(Row)`
 const isStakingInfoLoaded = false;
 const isStaked = false;
 
-export const MainRewards = () => {
+const DisplayRewards = () => {
   const { availableRewardsForEpochEther, isEligibleForRewards } = useReward();
   const { isBalanceLoaded, totalOlasStakedBalance } = useBalance();
 
@@ -70,3 +70,9 @@ export const MainRewards = () => {
     </RewardsRow>
   );
 };
+
+export const MainRewards = () => (
+  <>
+    <DisplayRewards />
+  </>
+);

From 4b249f50879cde9dfe43305d0515cce59e2e1524 Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Thu, 23 May 2024 02:07:59 +0530
Subject: [PATCH 7/7] chore: check if the staked amount is 20 for now

---
 frontend/components/Main/MainRewards.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
index df0f69b7..4c7b8e7b 100644
--- a/frontend/components/Main/MainRewards.tsx
+++ b/frontend/components/Main/MainRewards.tsx
@@ -16,14 +16,13 @@ const RewardsRow = styled(Row)`
   }
 `;
 
-// TODO: Replace with real data
-const isStakingInfoLoaded = false;
-const isStaked = false;
-
 const DisplayRewards = () => {
   const { availableRewardsForEpochEther, isEligibleForRewards } = useReward();
   const { isBalanceLoaded, totalOlasStakedBalance } = useBalance();
 
+  // 20 OLAS is the minimum amount to stake
+  const isStaked = totalOlasStakedBalance === 20;
+
   return (
     <RewardsRow>
       <Col span={12}>
@@ -52,7 +51,7 @@ const DisplayRewards = () => {
       <Col span={12}>
         <Flex vertical gap={4} align="flex-start">
           <Text>Staked amount</Text>
-          {isStakingInfoLoaded ? (
+          {isBalanceLoaded ? (
             <>
               <Text strong style={{ fontSize: 20 }}>
                 {balanceFormat(totalOlasStakedBalance, 2)} OLAS