feat: integration of starting overview page

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "staking",
+  "name": "resolute",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -36,6 +36,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-redux": "^8.1.3",
+    "react-router-dom": "^6.18.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   },

frontend/src/app/(routes)/(overview)/overview-components/OverviewPage.tsx

@@ -0,0 +1,78 @@
+'use client';
+import React, { useEffect } from 'react';
+import { RootState } from '../../../../store/store';
+import { getBalances } from '@/store/features/bank/bankSlice';
+import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
+import {
+  getDelegations,
+  getAllValidators,
+} from '@/store/features/staking/stakeSlice';
+import useGetAssetsAmount from '@/custom-hooks/useGetAssetsAmount';
+import useGetSortedChainIDs from '@/custom-hooks/useGetSortedChainIDs';
+import useGetIBCSortedChainIDs from '@/custom-hooks/useGetIBCSortedChainIds';
+
+const OverviewPage = () => {
+  const dispatch = useAppDispatch();
+  const networks = useAppSelector((state: RootState) => state.wallet.networks);
+  const nameToChainIDs: Record<string, string> = useAppSelector(
+    (state: RootState) => state.wallet.nameToChainIDs
+  );
+  const chainIDs = Object.keys(nameToChainIDs).map(
+    (chainName) => nameToChainIDs[chainName]
+  );
+
+  const [totalStakedAmount, totalAvailableAmount, totalRewardsAmount] =
+    useGetAssetsAmount();
+  const [nativeSortedChainIds] = useGetSortedChainIDs();
+  const [ibcSortedChainIds] = useGetIBCSortedChainIDs();
+
+  useEffect(() => {
+    chainIDs.forEach((chainID) => {
+      const allChainInfo = networks[chainID];
+      const chainInfo = allChainInfo.network;
+      const address = allChainInfo?.walletInfo?.bech32Address;
+      const basicChainInputs = {
+        baseURL: chainInfo.config.rest,
+        address,
+        chainID,
+      };
+
+      dispatch(getBalances(basicChainInputs));
+      dispatch(getDelegations(basicChainInputs));
+      dispatch(
+        getAllValidators({
+          baseURL: chainInfo.config.rest,
+          chainID: chainID,
+        })
+      );
+
+      // Todo: after distribution slice
+      //   dispatch(
+      //     getDelegatorTotalRewards({
+      //       baseURL: chainInfo.config.rest,
+      //       address: address,
+      //       chainID: chainID,
+      //       denom: denom,
+      //     })
+      //   );
+    });
+  }, []);
+
+  return (
+    <div>
+      {JSON.stringify(nativeSortedChainIds)}
+      <br />
+      <br />
+      {JSON.stringify(ibcSortedChainIds)}
+      <br />
+      <br />
+      {totalAvailableAmount +
+        ' ' +
+        totalRewardsAmount +
+        ' ' +
+        totalStakedAmount}
+    </div>
+  );
+};
+
+export default OverviewPage;

frontend/src/app/(routes)/(overview)/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import OverviewPage from './overview-components/OverviewPage';
+
+const Page = () => {
+   return <OverviewPage />;
+  //return <>Overview</>
+};
+
+export default Page;

frontend/src/app/layout.tsx

@@ -3,8 +3,8 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 
 import { ConnectWalletButton } from '../components/ConnectWalletButton';
-import { StoreProvider } from 'staking/store/StoreProvider';
-import SideBar from 'staking/components/SideBar';
+import { StoreProvider } from '@/store/StoreProvider';
+import SideBar from '@/components/SideBar';
 
 const inter = Inter({ subsets: ['latin'] });
 

frontend/src/components/popups/WalletPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
 import { Dialog, DialogContent } from '@mui/material';
-import { supportedWallets } from 'staking/utils/contants';
+import { supportedWallets } from '@/utils/contants';
 
 const Walletpage = ({
   open,

frontend/src/custom-hooks/StateHooks.ts

@@ -0,0 +1,7 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from '@/store/store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+type DispatchFunc = () => AppDispatch;
+export const useAppDispatch: DispatchFunc = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/src/custom-hooks/useConvertToDollars.ts

@@ -0,0 +1,7 @@
+const useConvertToDollars = (denom: string, amount: number) => {
+  // Todo: after implementing common slice
+  const price = 1;
+  return amount * price;
+};
+
+export default useConvertToDollars;

frontend/src/custom-hooks/useGetAssetsAmount.ts

@@ -0,0 +1,102 @@
+import { RootState } from '@/store/store';
+import { useCallback, useMemo } from 'react';
+import { useAppSelector } from './StateHooks';
+import { parseBalance } from '@/utils/denom';
+import { getIBCBalances } from '@/utils/ibc';
+
+const useGetAssetsAmount = () => {
+  const nameToChainIDs: Record<string, string> = useAppSelector(
+    (state: RootState) => state.wallet.nameToChainIDs
+  );
+  const chainIDs = Object.keys(nameToChainIDs).map(
+    (chainName) => nameToChainIDs[chainName]
+  );
+  const stakingChains = useAppSelector(
+    (state: RootState) => state.staking.chains
+  );
+  const networks = useAppSelector((state: RootState) => state.wallet.networks);
+  const balanceChains = useAppSelector(
+    (state: RootState) => state.bank.balances
+  );
+
+  const getDenomInfo = useCallback(
+    (
+      chainID: string
+    ): { minimalDenom: string; decimals: number; chainName: string } => {
+      const config = networks?.[chainID]?.network?.config;
+      const currency = config?.currencies?.[0];
+      const chainName = config?.chainName.toLowerCase();
+
+      return {
+        minimalDenom: currency.coinMinimalDenom,
+        decimals: currency.coinDecimals || 0,
+        chainName,
+      };
+    },
+    [networks]
+  );
+
+  // calculates staked amount in usd
+  const totalStakedAmount = useMemo(() => {
+    let totalStakedAmount = 0;
+    chainIDs.forEach((chainID) => {
+      const staked = stakingChains?.[chainID]?.delegations?.totalStaked || 0;
+      if (staked > 0) {
+        const { decimals } = getDenomInfo(chainID);
+        // Todo: common slice
+        const denomPrice = 1;
+        totalStakedAmount += (staked / 10 ** decimals) * denomPrice;
+      }
+    });
+    return totalStakedAmount;
+  }, [chainIDs, stakingChains, getDenomInfo]);
+
+  // calculates bank balances (native + ibs) in usd
+  const availableAmount: number = useMemo(() => {
+    let totalBalance = 0;
+    let totalIBCBalance = 0;
+
+    chainIDs.forEach((chainID) => {
+      const { minimalDenom, decimals, chainName } = getDenomInfo(chainID);
+      const ibcBalances = getIBCBalances(
+        balanceChains?.[chainID]?.list,
+        minimalDenom,
+        chainName
+      );
+
+      // Todo: price
+      const denomPrice = 1;
+
+      for (let i = 0; i < ibcBalances?.length; i++) {
+        totalIBCBalance +=
+          parseBalance(
+            [ibcBalances[i].balance],
+            ibcBalances?.[i]?.decimals,
+            ibcBalances?.[i]?.balance.denom
+          ) * denomPrice;
+      }
+
+      const balance = parseBalance(
+        balanceChains?.[chainID]?.list || [],
+        decimals,
+        minimalDenom
+      );
+
+      if (balanceChains?.[chainID]?.list?.length > 0) {
+        totalBalance += denomPrice * balance;
+      }
+    });
+
+    return totalBalance + totalIBCBalance;
+  }, [chainIDs, balanceChains, getDenomInfo]);
+
+  // calculates rewards amount in usd
+  const rewardsAmount = useMemo(() => {
+    // Todo: implement distribution slice
+    return 0;
+  }, []);
+
+  return [totalStakedAmount, availableAmount, rewardsAmount];
+};
+
+export default useGetAssetsAmount;

frontend/src/custom-hooks/useGetIBCSortedChainIds.ts

@@ -0,0 +1,71 @@
+import { parseBalance } from '@/utils/denom';
+import { useMemo } from 'react';
+import { useAppSelector } from './StateHooks';
+import { RootState } from '@/store/store';
+import chainDenoms from '@/utils/chainDenoms.json';
+const chainDenomsData = chainDenoms as AssetData;
+
+const useGetIBCSortedChainIDs = () => {
+  const networks = useAppSelector((state: RootState) => state.wallet.networks);
+  const balanceChains = useAppSelector(
+    (state: RootState) => state.bank.balances
+  );
+  const nameToChainIDs: Record<string, string> = useAppSelector(
+    (state: RootState) => state.wallet.nameToChainIDs
+  );
+  const chainIDs = Object.keys(nameToChainIDs).map(
+    (chainName) => nameToChainIDs[chainName]
+  );
+
+  const IBCSortedChainIds = useMemo(() => {
+    let sortedIBCChains: {
+      usdValue: number;
+      usdPrice: number;
+      balanceAmount: number;
+      chainName: string;
+      denomInfo: (IBCAsset | NativeAsset)[];
+    }[] = [];
+
+    chainIDs.forEach((chainID) => {
+
+      const config = networks?.[chainID]?.network?.config;
+      const currency = config?.currencies?.[0];
+      const chainName = config?.chainName.toLowerCase();
+      const nativeMinimalDenom = currency.coinMinimalDenom;
+      const chainBalances = balanceChains?.[chainID]?.list || [];
+
+      chainBalances.forEach((balance) => {
+        const denomInfo = chainDenomsData[chainName]?.filter((denomInfo) => {
+          return denomInfo.denom === balance.denom;
+        });
+        if (balance?.denom !== nativeMinimalDenom && denomInfo?.length) {
+          const usdDenomPrice = 1;
+          const balanceAmount = parseBalance(
+            [balance],
+            denomInfo[0].decimals,
+            balance.denom
+          );
+          const usdDenomValue = usdDenomPrice * balanceAmount
+          sortedIBCChains = [
+            ...sortedIBCChains,
+            {
+              usdValue: usdDenomValue,
+              usdPrice: usdDenomPrice,
+              balanceAmount: balanceAmount,
+              chainName: chainName,
+              denomInfo: denomInfo,
+            },
+          ];
+        }
+      });
+    });
+
+    sortedIBCChains.sort((x, y) => y.usdValue - x.usdValue);
+
+    return sortedIBCChains;
+  }, [chainIDs, balanceChains, networks]);
+
+  return [IBCSortedChainIds];
+};
+
+export default useGetIBCSortedChainIDs;

frontend/src/custom-hooks/useGetSortedChainIDs.ts

@@ -0,0 +1,61 @@
+import { parseBalance } from '@/utils/denom';
+import { useMemo } from 'react';
+import { useAppSelector } from './StateHooks';
+import { RootState } from '@/store/store';
+
+const useGetSortedChainIDs = () => {
+  const networks = useAppSelector((state: RootState) => state.wallet.networks);
+  const stakingChains = useAppSelector(
+    (state: RootState) => state.staking.chains
+  );
+  const balanceChains = useAppSelector(
+    (state: RootState) => state.bank.balances
+  );
+  const nameToChainIDs: Record<string, string> = useAppSelector(
+    (state: RootState) => state.wallet.nameToChainIDs
+  );
+  const chainIDs = Object.keys(nameToChainIDs).map(
+    (chainName) => nameToChainIDs[chainName]
+  );
+
+  const sortedChainIds = useMemo(() => {
+    let sortedChains: { chainID: string; usdValue: number }[] = [];
+    chainIDs.forEach((chainID) => {
+      const config = networks?.[chainID]?.network?.config;
+      const currency = config?.currencies?.[0];
+      const minimalDenom = currency?.coinMinimalDenom;
+      const decimals = currency?.coinDecimals || 0;
+      const balanceAmountInDenoms = parseBalance(
+        balanceChains?.[chainID]?.list || [],
+        decimals,
+        minimalDenom
+      );
+
+      // minimalDenom
+      const stakedAmountInDenoms: number =
+        stakingChains?.[chainID]?.delegations?.totalStaked || 0;
+
+      // Todo: distribution slice
+      const rewardsAmountInDenoms: number = 0;
+      const chain: { chainID: string; usdValue: number } = {
+        chainID,
+        usdValue: 0,
+      };
+      // Todo: denom price from common slice
+      const denomPrice = 1;
+      chain.usdValue =
+        denomPrice *
+        (balanceAmountInDenoms +
+          stakedAmountInDenoms / 10 ** decimals +
+          (rewardsAmountInDenoms / 10) * decimals);
+      if (chain.usdValue) sortedChains = [...sortedChains, chain];
+    });
+
+    sortedChains.sort((x, y) => y.usdValue - x.usdValue);
+    return sortedChains.map((chain) => chain.chainID);
+  }, [chainIDs, networks, balanceChains, stakingChains]);
+
+  return [sortedChainIds];
+};
+
+export default useGetSortedChainIDs;

frontend/src/store/features/bank/bankService.ts

@@ -8,7 +8,7 @@ const balanceURL = (address: string, denom: string) =>
 const fetchBalances = (
   baseURL: string,
   address: string,
-  pagination: KeyLimitPagination
+  pagination?: KeyLimitPagination
 ): Promise<AxiosResponse> => {
   let uri = `${cleanURL(baseURL)}${balancesURL}${address}`;
   const parsed = convertPaginationToParams(pagination);