Add total balance by chain & Wallet data

src/pages/ChainAndToken/Chains/ChainBalance.js

@@ -3,6 +3,7 @@ import classes from './Chains.module.css'
 
 import ToggleSwitch from "../../../components/ToggleSwitch/ToggleSwitch";
 import {useGetAllBalanceByChain, useGetTotalBalanceByChain} from "../../../query";
+import {BN} from "../../../utils/utils";
 
 
 const ChainBalance = ({chainId}) => {
@@ -36,16 +37,13 @@ const ChainBalance = ({chainId}) => {
             No Data!
         </div>
         else return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-3 ${classes.box} ${classes.striped}`}>
-            {data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4`} key={index}>
+            {data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4 font-size-sm-plus`} key={index}>
                 <span className={`col-8`}>{index + 1} <span className={`mx-3`}></span> {balance?.address}</span>
-                <span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{balance?.balance}</span></span>
+                <span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{new BN(balance?.balance).toFormat()}</span></span>
             </div>)}
         </div>
-
     }
 
-
-
     return (
 
         <>
@@ -78,7 +76,7 @@ const ChainBalance = ({chainId}) => {
                     <span className={`mx-1`}> </span>
                     <span className={``}>Total Balance: </span>
                     <span className={`mx-2`}> </span>
-                    <span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : total?.balance}</span>
+                    <span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : new BN(total?.balance).toFormat()}</span>
                 </div>
             </div>
 

src/pages/ChainAndToken/Tokens/TokensBalance.js

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {useGetTokenAllBalanceById, useGetTokenTotalBalanceById} from "../../../query";
 import classes from "../Chains/Chains.module.css";
 import ToggleSwitch from "../../../components/ToggleSwitch/ToggleSwitch";
+import {BN} from "../../../utils/utils";
 
 const TokensBalance = ({chainId}) => {
 
@@ -29,9 +30,9 @@ const TokensBalance = ({chainId}) => {
             No Data!
         </div>
         else return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-3 ${classes.box} ${classes.striped}`}>
-            {data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4`} key={index}>
+            {data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4 font-size-sm-plus`} key={index}>
                 <span className={`col-8`}>{index + 1} <span className={`mx-3`}></span> {balance?.address}</span>
-                <span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{balance?.balance}</span></span>
+                <span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{new BN(balance?.balance).toFormat()}</span></span>
             </div>)}
         </div>
 
@@ -69,7 +70,7 @@ const TokensBalance = ({chainId}) => {
                     <span className={`mx-1`}> </span>
                     <span className={``}>Total Balance: </span>
                     <span className={`mx-2`}> </span>
-                    <span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : total?.balance}</span>
+                    <span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : new BN(total?.balance).toFormat()}</span>
                 </div>
             </div>
 

src/pages/Dashboard/BriefWallet/BriefWallet.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import classes from './BriefWallet.module.css'
+import {useGetWalletTotalUsers} from "../../../query";
+import BriefWalletCard from "./BriefWalletCard";
+
+const BriefWallet = () => {
+
+    const {data, isLoading, error} = useGetWalletTotalUsers();
+
+    const content = () => {
+        if (error) return <span>Error</span>
+        if (isLoading) return <span>Loading...</span>
+        else return <>
+            <div className={`d-flex flex-column ${classes.striped} ${classes.box} py-2`}>
+                {data?.map((data, index) => <BriefWalletCard data={data} index={index}/>)}
+
+            </div>
+
+
+        </>
+
+    }
+
+    return (
+        <div className={`flex-column justify-content-start`} style={{width: "32%"}}>
+
+            <p className={`font-size-md-plus mb-4`}>Total User Wallets</p>
+
+            {
+                content()
+            }
+
+
+        </div>
+    );
+};
+
+export default BriefWallet;

src/pages/Dashboard/BriefWallet/BriefWallet.module.css

@@ -0,0 +1,13 @@
+.box {
+    background: #282a36;
+    color: rgba(236, 236, 236, 0.7803921569) !important;
+    border-color: rgba(36, 38, 51, 0.9803921569) !important;
+    border-radius: 5px !important;
+}
+
+.striped div:nth-child(even){
+    background-color: #38384678;
+    -webkit-transition: background-color 0.4s;
+    -o-transition: background-color 0.4s;
+    transition: background-color 0.4s;
+}

src/pages/Dashboard/BriefWallet/BriefWalletCard.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classes from './BriefWallet.module.css'
+import {BN} from "../../../utils/utils";
+
+const BriefWalletCard = ({data, index}) => {
+    return (
+        <div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4`}>
+            <span className={`col-4`}>{data?.currency}</span>
+            <span className={`col-8`}>{new BN(data?.balance).toFormat()}</span>
+        </div>
+    );
+};
+
+export default BriefWalletCard;

src/pages/Dashboard/Chain/Chain.js

@@ -27,7 +27,7 @@ const Chain = () => {
     }
 
     return (
-        <div className={`flex-column col-5 justify-content-start`}>
+        <div className={`flex-column justify-content-start`} style={{width: "32%"}}>
 
             <p className={`font-size-md-plus mb-4`}>Chain List</p>
 

src/pages/Dashboard/Chain/ChainCard.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import classes from './Chain.module.css'
+import {BN} from "../../../utils/utils";
 
 const ChainCard = ({data, index}) => {
 
@@ -8,7 +9,7 @@ const ChainCard = ({data, index}) => {
     return (
         <div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4`}>
             <span className={`col-6`}>{data?.chain}</span>
-            <span className={`col-6`}>{data?.balance}</span>
+            <span className={`col-6`}>{new BN(data?.balance).toFormat()}</span>
         </div>
     );
 };

src/pages/Dashboard/Dashboard.js

@@ -5,6 +5,7 @@ import {useGetUsersByGroup, useGetUsersList, useGetWithdrawsReq} from "../../que
 import Chains from "../ChainAndToken/Chains/Chains";
 import Chain from "./Chain/Chain";
 import Token from "./Token/Token";
+import BriefWallet from "./BriefWallet/BriefWallet";
 
 const Dashboard = () => {
 
@@ -15,7 +16,7 @@ const Dashboard = () => {
     return <ScrollBar>
         <div className="d-flex flex-column justify-content-start align-items-center" style={{minHeight: "100%"}}>
 
-            <div className="d-flex flex-row justify-content-between align-items-center my-5" style={{width: "80%"}}>
+            <div className="d-flex flex-row justify-content-between align-items-center my-5" style={{width: "90%"}}>
                 <div className="d-flex justify-content-center align-items-center primary-bg"
                      style={{width: "30%", height: "20vh", borderRadius: "7px"}}>
                     {users !== null ?
@@ -48,10 +49,11 @@ const Dashboard = () => {
                 </div>
             </div>
 
-            <div className="d-flex flex-row justify-content-between align-items-start my-4 col-12" style={{width: "80%"}}>
+            <div className="d-flex flex-row justify-content-between align-items-start my-4 col-12" style={{width: "90%"}}>
 
                 <Chain/>
                 <Token/>
+                <BriefWallet/>
 
             </div>
 

src/pages/Dashboard/Token/Token.js

@@ -23,7 +23,7 @@ const Token = () => {
 
     }
     return (
-        <div className={`flex-column col-5 justify-content-start`}>
+        <div className={`flex-column justify-content-start`} style={{width: "32%"}}>
 
             <p className={`font-size-md-plus mb-4`}>Token List</p>
 

src/pages/Dashboard/Token/TokenCard.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import classes from './Token.module.css'
+import {BN} from "../../../utils/utils";
 
 const TokenCard = ({data, index}) => {
     return (
         <div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4`}>
-            <span className={`col-6`}>{data?.name} - {data?.symbol}</span>
-            <span className={`col-6`}>{data?.balance}</span>
+            <span className={`col-8`}>{data?.name} - {data?.symbol}</span>
+            <span className={`col-4`}>{new BN(data?.balance).toFormat()}</span>
         </div>
     );
 };

src/pages/Wallet/Wallet.js

@@ -2,10 +2,13 @@ import React, {useState} from 'react';
 import {useGetWalletData} from "../../query";
 import Loading from "../../components/Loading";
 import ScrollBar from "../../components/ScrollBar";
+import {BN} from "../../utils/utils";
+import ToggleSwitch from "../../components/ToggleSwitch/ToggleSwitch";
 
 const Wallet = () => {
 
     const [params, setParams] = useState({
+        "excludeSystem": true,
         "limit": 500,
         "offset": 0
     });
@@ -28,7 +31,29 @@ const Wallet = () => {
 
     return (
         <ScrollBar>
-            <div className="col-12 d-flex flex-column justify-content-between align-items-center px-5 py-5">
+
+            <div className={`d-flex flex-row col-5 col-12  align-items-center px-5 my-5`}>
+                <span className={``}>Exclude System Wallets</span>
+                <span className={`mx-2`}> </span>
+                <ToggleSwitch
+
+                    onchange={ () => {
+
+                        setParams(prevState => {return {
+                            ...prevState,
+                            excludeSystem: !prevState.excludeSystem
+                        }})
+
+
+                    } }
+
+                    /*onchange={()=> setQuery({
+                        ...query,
+                        ascendingByTime: (prevState => !prevState)}
+                    )}*/
+                    checked={params?.excludeSystem}/>
+            </div>
+            <div className="col-12 d-flex flex-column justify-content-between align-items-center px-5">
                 <table className="table table-bordered rounded text-center col-12 striped table-responsive">
                     <thead className="py-2 my-2" style={{paddingBottom: "1vh !important"}}>
                     <tr className="">
@@ -57,7 +82,7 @@ const Wallet = () => {
                                     <td>{wallet?.title?.slice(wallet?.title.indexOf("-") +1, wallet?.title?.end) }</td>
                                     <td>{wallet?.title?.slice(0, wallet?.title.indexOf("-"))}</td>
                                     <td>{wallet?.walletType}</td>
-                                    <td>{wallet?.balance}</td>
+                                    <td>{new BN(wallet?.balance).toFormat()}</td>
                                     <td>{wallet?.currency}</td>
 
                                 </tr>)

src/query/hooks/useGetWalletTotalUsers.js

@@ -0,0 +1,17 @@
+import {useQuery} from "@tanstack/react-query";
+import {adminGetWalletTotalUsers} from "js-api-client";
+
+export const useGetWalletTotalUsers = () => {
+    return useQuery(
+        ['Wallet-Total-Users'], async () => {
+            /*if (chainId === null) return;*/
+            const {data} = await adminGetWalletTotalUsers()
+            return data;
+
+        },
+        {
+            retry: 1,
+            /*enabled: false,
+            initialData:[]*/
+        });
+}

src/query/index.js

@@ -5,6 +5,7 @@ export {useGetWithdrawInfo} from "./hooks/useGetWithdrawInfo";
 export {useGetUsersByGroup} from "./hooks/useGetUsersByGroup";
 export {useGetWhiteList} from "./hooks/useGetWhiteList";
 export {useGetWalletData} from "./hooks/useGetWalletData";
+export {useGetWalletTotalUsers} from "./hooks/useGetWalletTotalUsers";
 export {useGetChains} from "./hooks/useGetChains";
 export {useGetAllBalanceByChain} from "./hooks/useGetAllBalanceByChain";
 export {useGetTotalBalanceByChain} from "./hooks/useGetTotalBalanceByChain";