hotfix balance tab accounts

src/containers/AccountList/AccountList.js

@@ -1,6 +1,6 @@
-import React, {memo, useState} from "react";
-import {useGet} from "restful-react";
-import {useTheme} from "@material-ui/core/styles";
+import React, { memo, useState, useEffect } from "react";
+import { useGet } from "restful-react";
+import { useTheme } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import classNames from "classnames/bind";
 import consts from "src/constants/consts";
@@ -10,13 +10,14 @@ import AccountCardList from "src/components/ValidatorList/AccountCardList/Accoun
 import AccountCardListSkeleton from "src/components/ValidatorList/AccountCardList/AccountCardListSkeleton.js";
 import Pagination from "src/components/common/Pagination";
 import NoResult from "src/components/common/NoResult";
-import {useRef} from "react";
-import {Container} from "@material-ui/core";
+import { useRef } from "react";
+import { Container } from "@material-ui/core";
 import TitleWrapper from "src/components/common/TitleWrapper";
 import PageTitle from "src/components/common/PageTitle";
 import StatusBox from "src/components/common/StatusBox";
 import TogglePageBar from "src/components/common/TogglePageBar";
 import styles from "./AccountList.module.scss";
+import axios from "axios";
 
 const cx = classNames.bind(styles);
 
@@ -33,14 +34,37 @@ const AccountList = memo(() => {
 	const basePath = `${consts.API.ACCOUNTS}?limit=${consts.REQUEST.LIMIT}`;
 	const path = `${basePath}&page_id=${pageId}`;
 
-	const {data, loading, error} = useGet({
+	const [listBalance, setListBalance] = useState([]);
+
+	const { data, loading, error } = useGet({
 		path: path,
 	});
 
 	let titleSection;
 	let tableSection;
 	let paginationSection;
 
+	//TODO: hardcode hotfix with balance
+	const fetchBalance = async address => {
+		const resp = await axios.get(`https://api.scan.orai.io/v1/account/coins/${address}`);
+		return resp?.data;
+	};
+
+	const fetchAllBalance = async data => {
+		const bal = data.map(e => {
+			return fetchBalance(e.address);
+		});
+		const balanceList = await Promise.all(bal);
+		setListBalance(balanceList);
+	};
+
+	useEffect(() => {
+		if (data?.data?.length) {
+			fetchAllBalance(data.data);
+		}
+		return () => {};
+	}, [data]);
+
 	titleSection = isLargeScreen ? (
 		<Container fixed>
 			<TitleWrapper>
@@ -65,8 +89,14 @@ const AccountList = memo(() => {
 				totalPagesRef.current = null;
 			}
 
+			const dataWithBalance = data?.data?.map((e, i) => {
+				return {
+					...e,
+					balance: listBalance[i]?.total,
+				};
+			});
 			if (Array.isArray(data?.data) && data.data.length > 0) {
-				tableSection = isLargeScreen ? <AccountTable data={data.data} /> : <AccountCardList data={data.data} />;
+				tableSection = isLargeScreen ? <AccountTable data={dataWithBalance} /> : <AccountCardList data={dataWithBalance} />;
 			} else {
 				tableSection = <NoResult />;
 			}