feat: display locked balance and free balance

src/App.tsx

@@ -8,6 +8,7 @@ import { extension as reefExt } from '@reef-chain/util-lib';
 import { Components } from '@reef-chain/react-lib';
 import Nav from './common/Nav';
 import OptionContext from './context/OptionContext';
+import { BigNumber} from "ethers";
 import ReefSignersContext from './context/ReefSigners';
 import ContentRouter from './pages/ContentRouter';
 import { notify } from './utils/utils';
@@ -62,19 +63,38 @@ const App = (): JSX.Element => {
   const {loading:wcPreloader,setLoading:setWcPreloader} = useWcPreloader()
   const [accounts,setAccounts] = useState<ReefSigner[]>([]);
   const [selectedSigner,setSelectedSigner] = useState<ReefSigner | undefined>(undefined);
+
+
   const {
     loading, error, signers, selectedReefSigner, network, provider, reefState, extension
   } = hooks.useInitReefStateExtension(
     'Reef App', selExtensionName, { ipfsHashResolverFn: getIpfsGatewayUrl },
   );
 
+  const accountsBalances = hooks.useObservableState(reefState.accounts$);
+
+  useEffect(()=>{
+    let updatedAccountsList:any = []
+    if(signers && accountsBalances){
+      signers.forEach((sgnr,idx)=>{
+        let accountUpdatedBal = {
+          ...sgnr,
+          freeBalance: accountsBalances[idx].freeBalance?? BigNumber.from("0"),
+          lockedBalance:accountsBalances[idx].lockedBalance?? BigNumber.from("0")
+        }
+        updatedAccountsList.push(accountUpdatedBal);
+      })
+
+      setAccounts(updatedAccountsList);
+    }
+  },[accountsBalances,signers])
+
   useEffect(()=>{
     setAccounts([]);
     setSelectedSigner(undefined);
   },[selExtensionName])
 
   useEffect(()=>{
-    setAccounts(signers);
     setSelectedSigner(selectedReefSigner);
 
     // if account connected , hide preloader & set account address
@@ -182,8 +202,6 @@ useEffect(()=>{
     }
   }
 
-  const {isAccountSelectorOpen} = useAccountSelector()
-
   // @ts-ignore
   return (
     <>

src/common/Nav.tsx

@@ -163,6 +163,8 @@ const Nav = ({ selectExtension }: Nav): JSX.Element => {
     window.location.reload();
   }
 
+  console.log(accounts)
+
   const {setLoading:setWcPreloader}=useWcPreloader();
   const {isAccountSelectorOpen,setIsAccountSelectorOpen} = useAccountSelector();
 
@@ -179,6 +181,7 @@ const Nav = ({ selectExtension }: Nav): JSX.Element => {
             {menuItemsView}
           </ul>}
 
+
           <Components.AccountSelector
             selExtName={selExtName}
             availableExtensions={availableExtensions}