{!hasEnoughOlasForInitialFunding && (
- {`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements.olas} OLAS `}
+ {`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements[homeChainId][TokenSymbol.OLAS]} OLAS `}
for staking
)}
{!hasEnoughEthForInitialFunding && (
- {`$${serviceFundRequirements.eth} XDAI `}
+ {`$${serviceFundRequirements[homeChainId][nativeTokenSymbol]} ${nativeTokenSymbol} `}
for trading
@@ -56,9 +66,11 @@ export const MainNeedsFunds = () => {
),
[
- serviceFundRequirements,
hasEnoughEthForInitialFunding,
hasEnoughOlasForInitialFunding,
+ homeChainId,
+ nativeTokenSymbol,
+ serviceFundRequirements,
],
);
diff --git a/frontend/components/MainPage/sections/OlasBalanceSection.tsx b/frontend/components/MainPage/sections/OlasBalanceSection.tsx
index 1c9ac79b4..cb034bae9 100644
--- a/frontend/components/MainPage/sections/OlasBalanceSection.tsx
+++ b/frontend/components/MainPage/sections/OlasBalanceSection.tsx
@@ -1,12 +1,19 @@
-// import { RightOutlined } from '@ant-design/icons';
+import { RightOutlined } from '@ant-design/icons';
import { Flex, Skeleton, Typography } from 'antd';
+import { sum } from 'lodash';
import { useMemo } from 'react';
import styled from 'styled-components';
import { UNICODE_SYMBOLS } from '@/constants/symbols';
-// import { Pages } from '@/enums/PageState';
-import { useBalance } from '@/hooks/useBalance';
-// import { usePageState } from '@/hooks/usePageState';
+import { Pages } from '@/enums/Pages';
+import { TokenSymbol } from '@/enums/Token';
+import {
+ useBalanceContext,
+ useMasterBalances,
+ useServiceBalances,
+} from '@/hooks/useBalanceContext';
+import { usePageState } from '@/hooks/usePageState';
+import { useServices } from '@/hooks/useServices';
import { balanceFormat } from '@/utils/numberFormatters';
import { CardSection } from '../../styled/CardSection';
@@ -22,13 +29,53 @@ type MainOlasBalanceProps = { isBorderTopVisible?: boolean };
export const MainOlasBalance = ({
isBorderTopVisible = true,
}: MainOlasBalanceProps) => {
- const { isBalanceLoaded, totalOlasBalance } = useBalance();
- // const { goto } = usePageState();
+ const { selectedService } = useServices();
+ const { isLoaded: isBalanceLoaded } = useBalanceContext();
+ const { masterWalletBalances } = useMasterBalances();
+ const { serviceStakedBalances, serviceWalletBalances } = useServiceBalances(
+ selectedService?.service_config_id,
+ );
+ const { goto } = usePageState();
+
+ const displayedBalance = useMemo(() => {
+ // olas across master wallets, safes and eoa
+ const masterWalletOlasBalance = masterWalletBalances?.reduce(
+ (acc, { symbol, balance }) => {
+ if (symbol === TokenSymbol.OLAS) {
+ return acc + Number(balance);
+ }
+ return acc;
+ },
+ 0,
+ );
+
+ // olas across all service wallets
+ const serviceWalletOlasBalance = serviceWalletBalances?.reduce(
+ (acc, { symbol, balance }) => {
+ if (symbol === TokenSymbol.OLAS) {
+ return acc + Number(balance);
+ }
+ return acc;
+ },
+ 0,
+ );
+
+ // olas staked across all services
+ const serviceStakedOlasBalance = serviceStakedBalances?.reduce(
+ (acc, { olasBondBalance, olasDepositBalance }) => {
+ return acc + Number(olasBondBalance) + Number(olasDepositBalance);
+ },
+ 0,
+ );
+
+ const totalOlasBalance = sum([
+ masterWalletOlasBalance,
+ serviceWalletOlasBalance,
+ serviceStakedOlasBalance,
+ ]);
- const balance = useMemo(() => {
- if (totalOlasBalance === undefined) return '--';
return balanceFormat(totalOlasBalance, 2);
- }, [totalOlasBalance]);
+ }, [masterWalletBalances, serviceStakedBalances, serviceWalletBalances]);
return (