Merge pull request #116 from valory-xyz/mohan/staked-olas-status

feat: Show status of staked OLAS amount
valory-xyz · May 23, 2024 · e6196f6 · e6196f6
2 parents dc409bc + 6e5258b
commit e6196f6
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 63 deletions.
diff --git 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,

diff --git 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/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
@@ -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
@@ -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/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
@@ -1,52 +1,77 @@
-import { Flex, Skeleton, Tag, Typography } from 'antd';
-import { memo } from 'react';
+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 Loader = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-top: 4px;
+const RewardsRow = styled(Row)`
+  margin: 0 -24px;
+  > .ant-col {
+    padding: 24px;
+    border-right: 1px solid ${COLOR.BORDER_GRAY};
+  }
 `;
 
-export const MainRewards = () => {
+const DisplayRewards = () => {
   const { availableRewardsForEpochEth, isEligibleForRewards } = useReward();
-  const { isBalanceLoaded } = useBalance();
+  const { isBalanceLoaded, totalOlasStakedBalance } = useBalance();
+
+  // 20 OLAS is the minimum amount to stake
+  const isStaked = totalOlasStakedBalance === 20;
 
   return (
-    <CardSection gap={5} vertical>
-      <Text>Staking rewards today </Text>
-      {isBalanceLoaded ? (
-        <Flex gap={10}>
-          <Text strong>
-            {balanceFormat(availableRewardsForEpochEth, 2)} OLAS
-          </Text>
-          <RewardsEarned isEligibleForRewards={isEligibleForRewards} />
+    <RewardsRow>
+      <Col span={12}>
+        <Flex vertical gap={4} align="flex-start">
+          <Text>Staking rewards today</Text>
+          {isBalanceLoaded ? (
+            <>
+              <Text strong style={{ fontSize: 20 }}>
+                {balanceFormat(availableRewardsForEpochEth, 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>
+          {isBalanceLoaded ? (
+            <>
+              <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>
-      ) : (
-        <Loader>
-          <Skeleton.Button active size="small" style={{ width: 92 }} />
-          <Skeleton.Button active size="small" style={{ width: 92 }} />
-        </Loader>
-      )}
-    </CardSection>
+      </Col>
+    </RewardsRow>
   );
 };
 
-const RewardsEarned = memo(function RewardsEarned({
-  isEligibleForRewards,
-}: {
-  isEligibleForRewards?: boolean;
-}) {
-  if (!isEligibleForRewards)
-    return <Tag color="processing">Not yet earned</Tag>;
-  return <Tag color="success">Earned</Tag>;
-});
+export const MainRewards = () => (
+  <>
+    <DisplayRewards />
+  </>
+);
diff --git 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
@@ -119,7 +119,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' : ''}
         >
@@ -157,7 +157,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
@@ -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
@@ -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}

diff --git 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) => {
@@ -104,6 +106,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;
@@ -193,6 +200,7 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
         walletBalances,
         updateBalances,
         setIsPaused,
+        totalOlasStakedBalance,
       }}
     >
       {children}

diff --git 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,
   };
 };
diff --git 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;
 }