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,292 @@
+'use client';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { RootState } from '../../../..//store/store';
+import { parseBalance } from '@/utils/denom';
+import { getBalances } from '@/store/features/bank/bankSlice';
+import { getIBCBalances } from '@/utils/ibc';
+import chainDenoms from '@/utils/chainDenoms.json';
+import { useAppDispatch, useAppSelector } from '@/hooks/StateHooks';
+import {
+  getDelegations,
+  getAllValidators,
+} from '@/store/features/staking/stakeSlice';
+import { USD_CURRENCY } from '@/utils/contants';
+
+const chainDenomsData = chainDenoms as AssetData;
+
+const OverviewPage = () => {
+  const dispatch = useAppDispatch();
+  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 convertToDollars = (denom: string, amount: number) => {
+    // todo: after common slice
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    const tokensPriceInfo: any = {};
+    if (tokensPriceInfo?.[denom]) {
+      const price = +tokensPriceInfo?.[denom]?.info?.[USD_CURRENCY] || 0;
+      return amount * price;
+    }
+    return 0;
+  };
+
+  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]
+  );
+
+  const calculateTotalStakedAmount = useCallback(() => {
+    let totalStakedAmount = 0;
+    chainIDs.forEach((chainID) => {
+      const staked = stakingChains?.[chainID]?.delegations?.totalStaked || 0;
+      if (staked > 0) {
+        const { minimalDenom, decimals } = getDenomInfo(chainID);
+        totalStakedAmount += convertToDollars(
+          minimalDenom,
+          staked / 10 ** decimals
+        );
+      }
+    });
+    return totalStakedAmount;
+  }, [chainIDs, stakingChains, getDenomInfo]);
+
+  // Todo: can be added after distribution slice is added
+  //   const calculateTotalPendingAmount = useCallback(() => {
+  //     let totalRewards = 0;
+  //     chainIDs.forEach((chainID) => {
+  //       const rewards =
+  //         distributionChains?.[chainID]?.delegatorRewards?.totalRewards || 0;
+  //       if (rewards > 0) {
+  //         const denom =
+  //           networks?.[chainID]?.network?.config?.currencies?.[0]
+  //             ?.coinMinimalDenom;
+  //         const decimals =
+  //           networks?.[chainID]?.network?.config?.currencies?.[0]?.coinDecimals ||
+  //           0;
+  //         totalRewards += convertToDollars(denom, rewards / 10 ** decimals);
+  //       }
+  //     });
+  //     return totalRewards;
+  //   }, [chainIDs, distributionChains, networks]);
+
+  const calculateTotalAvailableAmount = useCallback(() => {
+    let totalBalance = 0;
+    let totalIBCBalance = 0;
+
+    chainIDs.forEach((chainID) => {
+      const { minimalDenom, decimals, chainName } = getDenomInfo(chainID);
+      const balance = parseBalance(
+        balanceChains?.[chainID]?.list || [],
+        decimals,
+        minimalDenom
+      );
+
+      const ibcBalances = getIBCBalances(
+        balanceChains?.[chainID]?.list,
+        minimalDenom,
+        chainName
+      );
+
+      for (let i = 0; i < ibcBalances?.length; i++) {
+        totalIBCBalance += convertToDollars(
+          ibcBalances[i].balance.denom,
+          parseBalance(
+            [ibcBalances[i].balance],
+            ibcBalances?.[i]?.decimals,
+            ibcBalances?.[i]?.balance.denom
+          )
+        );
+      }
+
+      if (balanceChains?.[chainID]?.list?.length > 0) {
+        totalBalance += convertToDollars(minimalDenom, balance);
+      }
+    });
+
+    return { totalBalance, totalIBCBalance };
+  }, [chainIDs, balanceChains, getDenomInfo]);
+
+  const getSortedChainIds = useCallback(() => {
+    let sortedChains: { chainID: string; usdValue: number }[] = [];
+
+    chainIDs.forEach((chainID) => {
+      const { minimalDenom, decimals } = getDenomInfo(chainID);
+      const balanceAmountInDenoms = parseBalance(
+        balanceChains?.[chainID]?.list || [],
+        decimals,
+        minimalDenom
+      );
+
+      // minimalDenom
+      const stakedAmountInDenoms: number =
+        stakingChains?.[chainID]?.delegations?.totalStaked || 0;
+      // minimalDenom
+      // Todo: after distribution slice is added
+      //   const rewards =
+      //     distributionChains?.[chainID]?.delegatorRewards?.totalRewards || 0;
+      const rewardsAmountInDenoms: number = 0;
+      const chain: { chainID: string; usdValue: number } = {
+        chainID,
+        usdValue: 0,
+      };
+      if (balanceChains?.[chainID]?.list?.length > 0) {
+        chain.usdValue =
+          convertToDollars(minimalDenom, balanceAmountInDenoms) +
+          convertToDollars(
+            minimalDenom,
+            stakedAmountInDenoms / 10 ** decimals
+          ) +
+          convertToDollars(
+            minimalDenom,
+            rewardsAmountInDenoms / 10 ** decimals
+          );
+      }
+      sortedChains = [...sortedChains, chain];
+    });
+    sortedChains.sort((x, y) => y.usdValue - x.usdValue);
+    return sortedChains.map((chain) => chain.chainID);
+  }, [chainIDs, getDenomInfo, balanceChains]);
+
+  const getIBCSortedChainIds = useCallback(() => {
+    let sortedIBCChains: {
+      usdValue: number;
+      usdPrice: number;
+      balanceAmount: number;
+      chainName: string;
+      denomInfo: (IBCAsset | NativeAsset)[];
+    }[] = [];
+
+    chainIDs.forEach((chainID) => {
+      const { minimalDenom, chainName } = getDenomInfo(chainID);
+      const chainBalances = balanceChains?.[chainID]?.list || [];
+      chainBalances.forEach((balance) => {
+        const denomInfo = chainDenomsData[chainName]?.filter((denomInfo) => {
+          return denomInfo.denom === balance.denom;
+        });
+        if (balance?.denom !== minimalDenom && denomInfo?.length) {
+          //   const usdDenomPrice =
+          //     tokensPriceInfo[denomInfo[0]?.origin_denom]?.info?.[USD_CURRENCY] || 0;
+          const usdDenomPrice = 0;
+          const balanceAmount = parseBalance(
+            [balance],
+            denomInfo[0].decimals,
+            balance.denom
+          );
+          const usdDenomValue = balanceAmount * usdDenomPrice;
+          sortedIBCChains = [
+            ...sortedIBCChains,
+            {
+              usdValue: usdDenomValue,
+              usdPrice: usdDenomPrice,
+              balanceAmount: balanceAmount,
+              chainName: chainName,
+              denomInfo: denomInfo,
+            },
+          ];
+        }
+      });
+    });
+
+    sortedIBCChains.sort((x, y) => y.usdValue - x.usdValue);
+    return sortedIBCChains;
+  }, [chainIDs, balanceChains, getDenomInfo]);
+
+  useEffect(() => {
+    chainIDs.forEach((chainID) => {
+      const allChainInfo = networks[chainID];
+      const chainInfo = allChainInfo.network;
+      const address = allChainInfo?.walletInfo?.bech32Address;
+      //   const denom =
+      //     networks?.[chainID]?.network?.config?.currencies?.[0]?.coinMinimalDenom;
+      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,
+      //     })
+      //   );
+    });
+  }, []);
+
+  const {
+    totalBalance: totalAvailableAmount,
+    totalIBCBalance: totalIBCAssetsAmount,
+  } = useMemo(
+    () => calculateTotalAvailableAmount(),
+    [calculateTotalAvailableAmount]
+  );
+  const totalStakedAmount = useMemo(
+    () => calculateTotalStakedAmount(),
+    [calculateTotalStakedAmount]
+  );
+  //   const totalPendingAmount = useMemo(
+  //     () => calculateTotalPendingAmount(),
+  //     [calculateTotalPendingAmount]
+  //   );
+
+  const sortedChainIds = useMemo(
+    () => getSortedChainIds(),
+    [getSortedChainIds]
+  );
+
+  const ibcSortedChains = useMemo(
+    () => getIBCSortedChainIds(),
+    [getIBCSortedChainIds]
+  );
+  return (
+    <div>
+      {JSON.stringify(sortedChainIds)}
+      <br />
+      <br />
+      {JSON.stringify(ibcSortedChains)}
+      <br />
+      <br />
+      {totalAvailableAmount +
+        ' ' +
+        totalIBCAssetsAmount +
+        ' ' +
+        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/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/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);