added balance on header page

apps/ui/src/components/organisms/pageHeader/index.module.css

@@ -5,4 +5,13 @@
 
 .stakeButton {
     margin-left: 20px;
+}
+
+.balance {
+    color: var(--col--gray1);
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex-grow: 1;
 }

apps/ui/src/components/organisms/pageHeader/pageHeader.tsx

@@ -1,16 +1,28 @@
 import { useState } from 'react';
+import Image from 'next/image';
+import classNames from 'classnames';
 import { Button } from '../../atoms/button';
 import { Variant } from '../../atoms/button/types';
 import { ConnectWalletButton } from '../../molecules/connectWalletButton';
 import StakeModalController from '../../molecules/stakeModal/StakeModalController';
+import useAuroWalletCore from '../../../hooks/useAuroWalletCore';
+import useAddressBalance from '../../../hooks/useAddressBalance';
+import DollarIcon from './Dollar.svg';
+
 import style from './index.module.css';
 
 const PageHeader = () => {
     const [openStakeModul, setOpenStaekeModul] = useState<boolean>(false);
     const [isDisableStakeButton, setIsDisableStakeButton] = useState(true);
+    const { accountId } = useAuroWalletCore();
+    const { balance } = useAddressBalance(accountId?.[0] ?? null);
 
     return (
         <div className={style.wrapper}>
+            <span className={classNames(style.balance, 't-inter-medium')}>
+                Balance:
+                <Image src={DollarIcon} alt="" /> {balance}
+            </span>
             <ConnectWalletButton handleAddress={setIsDisableStakeButton} />
             <Button
                 className={style.stakeButton}