From 48bc4f20f853629004be7f1c4286b7725db31e31 Mon Sep 17 00:00:00 2001
From: Hossein <hossein13785ab@gmail.com>
Date: Tue, 16 Jan 2024 17:01:55 +0330
Subject: [PATCH 1/2] #20: Add walletData api & main component

---
 src/Opex.js                          |  3 +
 src/components/SideBar/SideBar.js    |  8 ++-
 src/components/TopBar/Title/Title.js |  2 +
 src/pages/Wallet/Wallet.js           | 84 ++++++++++++++++++++++++++++
 src/pages/Wallet/Wallet.module.css   |  0
 src/pages/Wallet/walletList.js       | 57 +++++++++++++++++++
 src/query/hooks/useGetWalletData.js  | 14 +++++
 src/query/index.js                   |  3 +-
 src/routes/routes.js                 |  1 +
 yarn.lock                            |  4 +-
 10 files changed, 172 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/Wallet/Wallet.js
 create mode 100644 src/pages/Wallet/Wallet.module.css
 create mode 100644 src/pages/Wallet/walletList.js
 create mode 100644 src/query/hooks/useGetWalletData.js

diff --git a/src/Opex.js b/src/Opex.js
index e56efb0..d1b5748 100644
--- a/src/Opex.js
+++ b/src/Opex.js
@@ -18,6 +18,8 @@ import jwt_decode from "jwt-decode";
 import {getTokenByRefreshToken} from "js-api-client";
 import setupAxios from "./setupAxios";
 import WhiteList from "./pages/WhiteList/WhiteList";
+import Wallet from "./pages/Wallet/Wallet";
+
 
 function Opex() {
     const {auth, setAuth} = useAuth();
@@ -72,6 +74,7 @@ function Opex() {
                     <Route path={RoutesName.showWithdraw} element={<WithdrawInfo/>}/>
                     <Route path={RoutesName.KYC} element={<KycUsers/>}/>
                     <Route path={RoutesName.WhiteList} element={<WhiteList/>}/>
+                    <Route path={RoutesName.Wallet} element={<Wallet/>}/>
                 </Route>
                 <Route path="unauthorized" element={<Unauthorized/>}/>
             </Route>
diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.js
index a7d1218..de356de 100644
--- a/src/components/SideBar/SideBar.js
+++ b/src/components/SideBar/SideBar.js
@@ -2,7 +2,7 @@ import {toAbsoluteUrl} from "../utils";
 import {NavLink} from "react-router-dom";
 import * as Routes from "../../routes/routes";
 import Icon from "../Icon/Icon";
-import {WhiteList} from "../../routes/routes";
+import {Wallet, WhiteList} from "../../routes/routes";
 
 const SideBar = ({closeMenu}) => {
     return <div className={`sidebar text-color ${closeMenu ? "close" : "open"}`}>
@@ -42,6 +42,12 @@ const SideBar = ({closeMenu}) => {
                     <span className="">White List</span>
                 </NavLink>
             </li>
+            <li className="has-child">
+                <NavLink to={Routes.Wallet}>
+                    <Icon iconName="icon-user_groups text-color font-size-md-plus"/>
+                    <span className="">Wallet</span>
+                </NavLink>
+            </li>
         </ul>
 
     </div>
diff --git a/src/components/TopBar/Title/Title.js b/src/components/TopBar/Title/Title.js
index 70ba3e2..770886f 100644
--- a/src/components/TopBar/Title/Title.js
+++ b/src/components/TopBar/Title/Title.js
@@ -2,6 +2,7 @@ import React from "react";
 import {Route, Routes} from "react-router-dom";
 import * as RoutesName from "../../../routes/routes";
 import WhiteList from "../../../pages/WhiteList/WhiteList";
+import {Wallet} from "../../../routes/routes";
 
 const Title = () => {
 
@@ -14,6 +15,7 @@ const Title = () => {
                 <Route path={RoutesName.withdraws} element="Withdraws"/>
                 <Route path={RoutesName.showWithdraw} element="Withdraws"/>
                 <Route path={RoutesName.WhiteList} element="White List"/>
+                <Route path={RoutesName.Wallet} element="Wallet"/>
             </Routes>
     );
 };
diff --git a/src/pages/Wallet/Wallet.js b/src/pages/Wallet/Wallet.js
new file mode 100644
index 0000000..cec20e1
--- /dev/null
+++ b/src/pages/Wallet/Wallet.js
@@ -0,0 +1,84 @@
+import React, {useState} from 'react';
+import {useGetWalletData} from "../../query";
+import Loading from "../../components/Loading";
+import ScrollBar from "../../components/ScrollBar";
+
+const Wallet = () => {
+
+    const [params, setParams] = useState({
+        "limit": 500,
+        "offset": 0
+    });
+
+    const {data, isLoading, error, refetch} = useGetWalletData(params);
+
+
+
+    /*const content = () => {
+        if (isLoading) return <div style={{height: "40vh"}}><Loading/></div>
+        if (error) return <div style={{height: "40vh"}}>Error</div>
+        if (data?.length === 0) return <div style={{height: "40vh"}} className={`flex jc-center ai-center`}>No Data...!</div>
+
+
+        else return <>
+            <WalletList data={data}/>
+        </>
+    }*/
+
+
+    return (
+        <ScrollBar>
+            <div className="col-12 d-flex flex-column justify-content-between align-items-center px-5 py-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="">
+                        <th scope="col my-1" style={{width: "4%"}}/>
+                        <th scope="col">Name</th>
+                        <th scope="col">Email</th>
+                        <th scope="col">Wallet Type</th>
+                        <th scope="col">Balance</th>
+                        <th scope="col">Currency</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {
+                        isLoading ?
+                            <tr>
+                                <td colSpan="12" className="text-center py-5" style={{height: "50vh"}}>
+                                    <Loading/>
+                                </td>
+                            </tr>
+                            : data?.length === 0 ?
+                                <tr>
+                                    <td colSpan="12" className="text-center" style={{height: "50vh"}}>No User Exist</td>
+                                </tr> :
+                                data?.map((wallet, index) => <tr key={index}>
+                                    <th scope="row">{index + 1}</th>
+                                    <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?.toLocaleString()}</td>
+                                    <td>{wallet?.currency}</td>
+
+                                </tr>)
+                    }
+                    </tbody>
+                </table>
+                {error ?
+                    <div className="alert alert-danger" role="alert">
+                        <i className="fa fa-exclamation-triangle mx-2" aria-hidden="true"/>
+                        {error.toString()}
+                    </div>
+                    : ""
+                }
+             {/*   {(!isLoading && users?.total > paginate.perPage)&&
+                    <div className="mt-2">
+                        <Pagination total={users.total} paginate={paginate}/>
+                    </div>
+                }*/}
+            </div>
+        </ScrollBar>
+    );
+};
+
+export default Wallet;
diff --git a/src/pages/Wallet/Wallet.module.css b/src/pages/Wallet/Wallet.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Wallet/walletList.js b/src/pages/Wallet/walletList.js
new file mode 100644
index 0000000..29b6451
--- /dev/null
+++ b/src/pages/Wallet/walletList.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import classes from './Wallet.module.css'
+
+const walletList = (data, index) => {
+
+    console.log("data in list", data)
+
+
+    let head = (
+        <div className="flex-row justify-content-between col-12 text-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
+            <span className="width-5 flex jc-start ai-center">Name</span>
+            <span className="width-8 flex jc-start ai-center">Email</span>
+            <span className="width-7 flex  jc-start ai-center">Wallet Type</span>
+            <span className="width-12 flex jc-start ai-center">Balance</span>
+            <span className="width-13 flex jc-start ai-center">Currency</span>
+        </div>
+    );
+
+    let body = (
+        <>
+            {data?.data?.map((tr, index) => {
+
+
+                return (
+
+                    <div className={`column ${classes.striped}`} key={index}>
+
+                        <div className={`${classes.row} row rounded-5 border-bottom px-2 py-2`} key={index}>
+                            <span className="width-5 row jc-start ai-center">{index}</span>
+                            <span className="width-5 row jc-start ai-center">{data?.name}</span>
+                            <span className="width-5 row jc-start ai-center">{data?.title}</span>
+                            <span className="width-5 row jc-start ai-center">{data?.walletType}</span>
+                            <span className="width-5 row jc-start ai-center">{data?.balance}</span>
+                            <span className="width-5 row jc-start ai-center">{data?.currency}</span>
+
+
+
+                        </div>
+
+
+                    </div>
+
+
+
+                )
+            })}
+        </>
+    );
+
+    return  <>
+        {head}
+        {body}
+    </>
+
+};
+
+export default walletList;
diff --git a/src/query/hooks/useGetWalletData.js b/src/query/hooks/useGetWalletData.js
new file mode 100644
index 0000000..d1b68a2
--- /dev/null
+++ b/src/query/hooks/useGetWalletData.js
@@ -0,0 +1,14 @@
+import {useQuery} from "@tanstack/react-query";
+import {adminGetUsersList, adminGetWalletData} from "js-api-client";
+
+export const useGetWalletData = (params) => {
+    return useQuery(
+        ['wallet-data', params], async () => {
+            const {data} = await adminGetWalletData(params)
+            return data;
+        },
+        {
+            retry: 1,
+            notifyOnChangeProps: ['data', 'isLoading', 'error'],
+        });
+}
\ No newline at end of file
diff --git a/src/query/index.js b/src/query/index.js
index 7505a53..c4090ed 100644
--- a/src/query/index.js
+++ b/src/query/index.js
@@ -3,4 +3,5 @@ export {useGetUserInfo} from "./hooks/useGetUserInfo";
 export {useGetWithdrawsReq} from "./hooks/useGetWithdrawsReq";
 export {useGetWithdrawInfo} from "./hooks/useGetWithdrawInfo";
 export {useGetUsersByGroup} from "./hooks/useGetUsersByGroup";
-export {useGetWhiteList} from "./hooks/useGetWhiteList";
\ No newline at end of file
+export {useGetWhiteList} from "./hooks/useGetWhiteList";
+export {useGetWalletData} from "./hooks/useGetWalletData";
\ No newline at end of file
diff --git a/src/routes/routes.js b/src/routes/routes.js
index 7e62f6b..b570fbe 100644
--- a/src/routes/routes.js
+++ b/src/routes/routes.js
@@ -11,4 +11,5 @@ export const showUser = "users/:id";
 
 export const KYC = "kyc";
 export const WhiteList = "white-list";
+export const Wallet = "wallet";
 
diff --git a/yarn.lock b/yarn.lock
index d6af813..6f30771 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9059,8 +9059,8 @@ __metadata:
 
 "js-api-client@https://github.com/opexdev/js-api-client.git#develop":
   version: 1.0.0-beta2
-  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=a6dad61c8dd2e6f7d039243f256b962e8d8fbcdd"
-  checksum: fb5fb3e6f4a285a7e09efcee0eb1065956004dca8e2f8c9d22e4829dced6469edbdd941fc6fc2e9abdb311b7ea5993552f11c7306493bd4126d514b00e3d8eff
+  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=8525035b16be314890321934ed2de3bcdf5b0223"
+  checksum: 636aef17cf715b51f389eec3c348e02c6bb6c313c8eb5b81b6c002d96876db655ce6c8f000569cca145fcbbbf22325c078970d2ba6ecd346c1fe6ae40e488338
   languageName: node
   linkType: hard
 

From 0cf285bc38b0c8d4d1405a5c8dcda9005aae0a4e Mon Sep 17 00:00:00 2001
From: Hossein <hossein13785ab@gmail.com>
Date: Sun, 21 Jan 2024 18:45:28 +0330
Subject: [PATCH 2/2] #20: Add chain and token api

---
 src/Opex.js                                   |  2 +
 src/components/SideBar/SideBar.js             |  8 +-
 src/components/ToggleSwitch/ToggleSwitch.js   | 14 +++
 .../ToggleSwitch/ToggleSwitch.module.css      | 54 +++++++++++
 src/components/TopBar/Title/Title.js          |  1 +
 src/pages/ChainAndToken/ChainAndToken.js      | 20 ++++
 .../ChainAndToken/ChainAndToken.module.css    |  0
 .../ChainAndToken/Chains/ChainBalance.js      | 95 +++++++++++++++++++
 src/pages/ChainAndToken/Chains/Chains.js      | 57 +++++++++++
 .../ChainAndToken/Chains/Chains.module.css    | 27 ++++++
 src/pages/ChainAndToken/Tokens/Tokens.js      | 50 ++++++++++
 .../ChainAndToken/Tokens/Tokens.module.css    | 27 ++++++
 .../ChainAndToken/Tokens/TokensBalance.js     | 85 +++++++++++++++++
 src/pages/Dashboard/Chain/Chain.js            | 43 +++++++++
 src/pages/Dashboard/Chain/Chain.module.css    | 13 +++
 src/pages/Dashboard/Chain/ChainCard.js        | 16 ++++
 src/pages/Dashboard/Dashboard.js              | 23 +++--
 src/pages/Dashboard/Token/Token.js            | 39 ++++++++
 src/pages/Dashboard/Token/Token.module.css    | 13 +++
 src/pages/Dashboard/Token/TokenCard.js        | 13 +++
 src/pages/Wallet/Wallet.js                    |  2 +-
 src/pages/Withdraws/Withdraws.js              |  2 +-
 src/query/hooks/useGetAllBalanceByChain.js    | 18 ++++
 src/query/hooks/useGetChains.js               | 14 +++
 src/query/hooks/useGetTokenAllBalanceById.js  | 18 ++++
 src/query/hooks/useGetTokenTotalBalance.js    | 17 ++++
 .../hooks/useGetTokenTotalBalanceById.js      | 17 ++++
 src/query/hooks/useGetTokens.js               | 13 +++
 src/query/hooks/useGetTotalBalance.js         | 17 ++++
 src/query/hooks/useGetTotalBalanceByChain.js  | 17 ++++
 src/query/index.js                            |  9 +-
 src/routes/routes.js                          |  1 +
 src/setupAxios.js                             |  2 +-
 yarn.lock                                     |  4 +-
 34 files changed, 738 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ToggleSwitch/ToggleSwitch.js
 create mode 100644 src/components/ToggleSwitch/ToggleSwitch.module.css
 create mode 100644 src/pages/ChainAndToken/ChainAndToken.js
 create mode 100644 src/pages/ChainAndToken/ChainAndToken.module.css
 create mode 100644 src/pages/ChainAndToken/Chains/ChainBalance.js
 create mode 100644 src/pages/ChainAndToken/Chains/Chains.js
 create mode 100644 src/pages/ChainAndToken/Chains/Chains.module.css
 create mode 100644 src/pages/ChainAndToken/Tokens/Tokens.js
 create mode 100644 src/pages/ChainAndToken/Tokens/Tokens.module.css
 create mode 100644 src/pages/ChainAndToken/Tokens/TokensBalance.js
 create mode 100644 src/pages/Dashboard/Chain/Chain.js
 create mode 100644 src/pages/Dashboard/Chain/Chain.module.css
 create mode 100644 src/pages/Dashboard/Chain/ChainCard.js
 create mode 100644 src/pages/Dashboard/Token/Token.js
 create mode 100644 src/pages/Dashboard/Token/Token.module.css
 create mode 100644 src/pages/Dashboard/Token/TokenCard.js
 create mode 100644 src/query/hooks/useGetAllBalanceByChain.js
 create mode 100644 src/query/hooks/useGetChains.js
 create mode 100644 src/query/hooks/useGetTokenAllBalanceById.js
 create mode 100644 src/query/hooks/useGetTokenTotalBalance.js
 create mode 100644 src/query/hooks/useGetTokenTotalBalanceById.js
 create mode 100644 src/query/hooks/useGetTokens.js
 create mode 100644 src/query/hooks/useGetTotalBalance.js
 create mode 100644 src/query/hooks/useGetTotalBalanceByChain.js

diff --git a/src/Opex.js b/src/Opex.js
index d1b5748..e360e6c 100644
--- a/src/Opex.js
+++ b/src/Opex.js
@@ -19,6 +19,7 @@ import {getTokenByRefreshToken} from "js-api-client";
 import setupAxios from "./setupAxios";
 import WhiteList from "./pages/WhiteList/WhiteList";
 import Wallet from "./pages/Wallet/Wallet";
+import ChainAndToken from "./pages/ChainAndToken/ChainAndToken";
 
 
 function Opex() {
@@ -75,6 +76,7 @@ function Opex() {
                     <Route path={RoutesName.KYC} element={<KycUsers/>}/>
                     <Route path={RoutesName.WhiteList} element={<WhiteList/>}/>
                     <Route path={RoutesName.Wallet} element={<Wallet/>}/>
+                    <Route path={RoutesName.ChainAndToken} element={<ChainAndToken/>}/>
                 </Route>
                 <Route path="unauthorized" element={<Unauthorized/>}/>
             </Route>
diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.js
index de356de..1bd786e 100644
--- a/src/components/SideBar/SideBar.js
+++ b/src/components/SideBar/SideBar.js
@@ -44,10 +44,16 @@ const SideBar = ({closeMenu}) => {
             </li>
             <li className="has-child">
                 <NavLink to={Routes.Wallet}>
-                    <Icon iconName="icon-user_groups text-color font-size-md-plus"/>
+                    <Icon iconName="icon-layersm text-color font-size-md-plus"/>
                     <span className="">Wallet</span>
                 </NavLink>
             </li>
+            <li className="has-child">
+                <NavLink to={Routes.ChainAndToken}>
+                    <Icon iconName="icon-layersm text-color font-size-md-plus"/>
+                    <span className="">Chain And Token</span>
+                </NavLink>
+            </li>
         </ul>
 
     </div>
diff --git a/src/components/ToggleSwitch/ToggleSwitch.js b/src/components/ToggleSwitch/ToggleSwitch.js
new file mode 100644
index 0000000..d45c111
--- /dev/null
+++ b/src/components/ToggleSwitch/ToggleSwitch.js
@@ -0,0 +1,14 @@
+import React from "react";
+import classes from "./ToggleSwitch.module.css"
+
+
+const ToggleSwitch = (props) => {
+    return (
+        <label className={`${classes.switch}`}>
+            <input type="checkbox" onChange={(e)=>props.onchange(e)}  checked={props.checked}/>
+            <span className={`${classes.slider}`}/>
+        </label>
+    );
+};
+
+export default ToggleSwitch;
\ No newline at end of file
diff --git a/src/components/ToggleSwitch/ToggleSwitch.module.css b/src/components/ToggleSwitch/ToggleSwitch.module.css
new file mode 100644
index 0000000..0ff0d5a
--- /dev/null
+++ b/src/components/ToggleSwitch/ToggleSwitch.module.css
@@ -0,0 +1,54 @@
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 2.5rem;
+    height: 1.5rem;
+}
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 34px;
+    background-color: #ecececc7;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+.slider:before {
+    position: absolute;
+    content: "";
+    width: 1.1rem;
+    height: 1.1rem;
+    top: 0.2rem;
+    left: 0.18rem;
+    right: initial;
+    background-color: #ffffff;
+}
+:global(.ltr) .slider:before {
+    right: 0.18rem;
+    left: initial;
+}
+input:checked + .slider {
+    background-color: #007bff;
+}
+input:focus + .slider {
+    box-shadow: 0 0 1px #007bff;
+}
+input:checked + .slider:before {
+    right: 0.18rem;
+    left: initial;
+}
+:global(.ltr) input:checked + .slider:before {
+    left: 0.18rem;
+    right: initial;
+}
+.slider:before {
+    border-radius: 50%;
+}
\ No newline at end of file
diff --git a/src/components/TopBar/Title/Title.js b/src/components/TopBar/Title/Title.js
index 770886f..a5faa88 100644
--- a/src/components/TopBar/Title/Title.js
+++ b/src/components/TopBar/Title/Title.js
@@ -16,6 +16,7 @@ const Title = () => {
                 <Route path={RoutesName.showWithdraw} element="Withdraws"/>
                 <Route path={RoutesName.WhiteList} element="White List"/>
                 <Route path={RoutesName.Wallet} element="Wallet"/>
+                <Route path={RoutesName.ChainAndToken} element="Chain And Token"/>
             </Routes>
     );
 };
diff --git a/src/pages/ChainAndToken/ChainAndToken.js b/src/pages/ChainAndToken/ChainAndToken.js
new file mode 100644
index 0000000..9f5178c
--- /dev/null
+++ b/src/pages/ChainAndToken/ChainAndToken.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import classes from './ChainAndToken.module.css'
+import Chains from "./Chains/Chains";
+import Tokens from "./Tokens/Tokens";
+
+const ChainAndToken = () => {
+    return (
+        <div className={`col-12 d-flex flex-row`}>
+            <div className={`col-6 `}>
+                <Chains/>
+            </div>
+            <div className={`col-6`}>
+                <Tokens/>
+            </div>
+
+        </div>
+    );
+};
+
+export default ChainAndToken;
diff --git a/src/pages/ChainAndToken/ChainAndToken.module.css b/src/pages/ChainAndToken/ChainAndToken.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/ChainAndToken/Chains/ChainBalance.js b/src/pages/ChainAndToken/Chains/ChainBalance.js
new file mode 100644
index 0000000..f379e50
--- /dev/null
+++ b/src/pages/ChainAndToken/Chains/ChainBalance.js
@@ -0,0 +1,95 @@
+import React, {useEffect, useState} from 'react';
+import classes from './Chains.module.css'
+
+import ToggleSwitch from "../../../components/ToggleSwitch/ToggleSwitch";
+import {useGetAllBalanceByChain, useGetTotalBalanceByChain} from "../../../query";
+
+
+const ChainBalance = ({chainId}) => {
+
+    console.log("chainId in chainbalance", chainId)
+
+    const [params, setParams] = useState({
+        "excludeZero": false,
+    });
+
+    const {data, isLoading, error, refetch} = useGetAllBalanceByChain(chainId, params);
+    const {data:total, isLoading:totalIsLoading, error:totalError} = useGetTotalBalanceByChain(chainId);
+
+
+    useEffect(() => {
+        refetch()
+    }, [params]);
+
+
+    console.log("data ChainBalance", data)
+
+    const content = ()=> {
+
+        if (isLoading) return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-5 ${classes.box}`}>
+            Loading...
+        </div>
+        if (error) return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-5 ${classes.box}`}>
+            Error!
+        </div>
+        if (data?.length === 0) return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-5 ${classes.box}`}>
+            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}>
+                <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>
+            </div>)}
+        </div>
+
+    }
+
+
+
+    return (
+
+        <>
+
+            <div className={`col-12 my-2 d-flex flex-row justify-content-between col-12 mt-4 py-4 px-4 ${classes.box}`}>
+               <div className={`d-flex flex-row col-5`}>
+                   <span className={``}>Exclude Zero Balance</span>
+                   <span className={`mx-2`}> </span>
+                   <ToggleSwitch
+
+                       onchange={ () => {
+
+                           setParams(prevState => {return {
+                               ...prevState,
+                               excludeZero: !prevState.excludeZero
+                           }})
+
+
+                       } }
+
+                       /*onchange={()=> setQuery({
+                           ...query,
+                           ascendingByTime: (prevState => !prevState)}
+                       )}*/
+                       checked={params?.excludeZero}/>
+               </div>
+
+                <div className={`d-flex flex-row justify-content-center col-7 text-center`}>
+                    <span className={``}>{total?.chain?.toUpperCase()}</span>
+                    <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>
+                </div>
+            </div>
+
+            {content()}
+
+
+
+
+        </>
+
+    );
+};
+
+export default ChainBalance;
diff --git a/src/pages/ChainAndToken/Chains/Chains.js b/src/pages/ChainAndToken/Chains/Chains.js
new file mode 100644
index 0000000..113e2a4
--- /dev/null
+++ b/src/pages/ChainAndToken/Chains/Chains.js
@@ -0,0 +1,57 @@
+import React, {useEffect, useState} from 'react';
+import classes from "./Chains.module.css"
+import ChainBalance from "./ChainBalance";
+import ScrollBar from "../../../components/ScrollBar";
+import {useGetChains} from "../../../query";
+
+const Chains = () => {
+
+    const {data, isLoading, error, refetch} = useGetChains();
+
+
+    const [chainId, setChainId] = useState(null);
+
+
+
+
+    useEffect(() => {
+        if (!isLoading && !error) setChainId(data[0]?.id)
+
+    }, [data]);
+
+    const content = () => {
+        if (error) return <span>Error</span>
+        if (isLoading) return <span>Loading...</span>
+        else return <>
+            <div className={`d-flex flex-row `}>
+                {data?.map((chain, index) => <span key={index} className={`${classes.chainTitle} ${chain?.id === chainId && classes.activeChain}`} onClick={()=>setChainId(chain?.id)}>{chain?.name}</span>)}
+
+            </div>
+
+            {
+                (chainId !== null) ?
+                    <ChainBalance chainId={chainId}/> : ""
+            }
+        </>
+
+    }
+
+
+
+    /*console.log("data", data[0]?.id)*/
+
+    return (
+        <ScrollBar>
+            <div className={`flex-column col-12 justify-content-start px-5 py-5`}>
+                <p className={`font-size-md-plus mb-4`}>Chain List</p>
+
+                {
+                    content()
+                }
+
+            </div>
+        </ScrollBar>
+    );
+};
+
+export default Chains;
diff --git a/src/pages/ChainAndToken/Chains/Chains.module.css b/src/pages/ChainAndToken/Chains/Chains.module.css
new file mode 100644
index 0000000..37acdd4
--- /dev/null
+++ b/src/pages/ChainAndToken/Chains/Chains.module.css
@@ -0,0 +1,27 @@
+.chainTitle {
+    padding: 1.2vh 1vw;
+    background-color: #959caf;
+    color: #000;
+    border-radius: 8px;
+    margin-right: 1vw;
+    cursor: pointer;
+}
+
+.activeChain {
+    background-color: #2056de;
+    color: #fff;
+}
+
+.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;
+}
\ No newline at end of file
diff --git a/src/pages/ChainAndToken/Tokens/Tokens.js b/src/pages/ChainAndToken/Tokens/Tokens.js
new file mode 100644
index 0000000..fb64afb
--- /dev/null
+++ b/src/pages/ChainAndToken/Tokens/Tokens.js
@@ -0,0 +1,50 @@
+import React, {useEffect, useState} from 'react';
+import classes from './Tokens.module.css'
+import TokensBalance from "./TokensBalance";
+import ScrollBar from "../../../components/ScrollBar";
+import {useGetTokens} from "../../../query";
+
+const Tokens = () => {
+
+    const {data, isLoading, error, refetch} = useGetTokens();
+
+
+    const [chainId, setChainId] = useState(null);
+
+    useEffect(() => {
+        if (!isLoading && !error) setChainId(data[0]?.id)
+
+    }, [data]);
+
+    const content = () => {
+        if (error) return <span>Error</span>
+        if (isLoading) return <span>Loading...</span>
+        else return <>
+            <div className={`d-flex flex-row `}>
+                {data?.map((chain, index) => <span key={index} className={`${classes.chainTitle} ${chain?.id === chainId && classes.activeChain}`} onClick={()=>setChainId(chain?.id)}>{chain?.name}</span>)}
+
+            </div>
+
+            {
+                (chainId !== null) ?
+                    <TokensBalance chainId={chainId}/> : ""
+            }
+        </>
+
+    }
+
+    return (
+        <ScrollBar>
+            <div className={`flex-column col-12 justify-content-start px-5 py-5`}>
+                <p className={`font-size-md-plus mb-4`}>Token List</p>
+
+                {
+                    content()
+                }
+
+            </div>
+        </ScrollBar>
+    );
+};
+
+export default Tokens;
diff --git a/src/pages/ChainAndToken/Tokens/Tokens.module.css b/src/pages/ChainAndToken/Tokens/Tokens.module.css
new file mode 100644
index 0000000..37acdd4
--- /dev/null
+++ b/src/pages/ChainAndToken/Tokens/Tokens.module.css
@@ -0,0 +1,27 @@
+.chainTitle {
+    padding: 1.2vh 1vw;
+    background-color: #959caf;
+    color: #000;
+    border-radius: 8px;
+    margin-right: 1vw;
+    cursor: pointer;
+}
+
+.activeChain {
+    background-color: #2056de;
+    color: #fff;
+}
+
+.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;
+}
\ No newline at end of file
diff --git a/src/pages/ChainAndToken/Tokens/TokensBalance.js b/src/pages/ChainAndToken/Tokens/TokensBalance.js
new file mode 100644
index 0000000..31bbbf7
--- /dev/null
+++ b/src/pages/ChainAndToken/Tokens/TokensBalance.js
@@ -0,0 +1,85 @@
+import React, {useEffect, useState} from 'react';
+import {useGetTokenAllBalanceById, useGetTokenTotalBalanceById} from "../../../query";
+import classes from "../Chains/Chains.module.css";
+import ToggleSwitch from "../../../components/ToggleSwitch/ToggleSwitch";
+
+const TokensBalance = ({chainId}) => {
+
+    const [params, setParams] = useState({
+        "excludeZero": false,
+    });
+
+    const {data, isLoading, error, refetch} = useGetTokenAllBalanceById(chainId, params);
+    const {data:total, isLoading:totalIsLoading, error:totalError} = useGetTokenTotalBalanceById(chainId);
+
+
+    useEffect(() => {
+        refetch()
+    }, [params]);
+
+    const content = ()=> {
+
+        if (isLoading) return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-5 ${classes.box}`}>
+            Loading...
+        </div>
+        if (error) return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-5 ${classes.box}`}>
+            Error!
+        </div>
+        if (data?.length === 0) return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-5 ${classes.box}`}>
+            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}>
+                <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>
+            </div>)}
+        </div>
+
+    }
+
+
+    return (
+        <>
+
+            <div className={`col-12 my-2 d-flex flex-row justify-content-between col-12 mt-4 py-4 px-4 ${classes.box}`}>
+                <div className={`d-flex flex-row col-5`}>
+                    <span className={``}>Exclude Zero Balance</span>
+                    <span className={`mx-2`}> </span>
+                    <ToggleSwitch
+
+                        onchange={ () => {
+
+                            setParams(prevState => {return {
+                                ...prevState,
+                                excludeZero: !prevState.excludeZero
+                            }})
+
+
+                        } }
+
+                        /*onchange={()=> setQuery({
+                            ...query,
+                            ascendingByTime: (prevState => !prevState)}
+                        )}*/
+                        checked={params?.excludeZero}/>
+                </div>
+
+                <div className={`d-flex flex-row justify-content-center col-7 text-center`}>
+                    <span className={``}>{total?.chain?.toUpperCase()}</span>
+                    <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>
+                </div>
+            </div>
+
+            {content()}
+
+
+
+
+        </>
+    );
+};
+
+export default TokensBalance;
diff --git a/src/pages/Dashboard/Chain/Chain.js b/src/pages/Dashboard/Chain/Chain.js
new file mode 100644
index 0000000..aa7d9b3
--- /dev/null
+++ b/src/pages/Dashboard/Chain/Chain.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import {useGetTotalBalance} from "../../../query";
+import ChainCard from "./ChainCard";
+import classes from "./Chain.module.css"
+
+
+const Chain = () => {
+
+    const {data, isLoading, error} = useGetTotalBalance();
+
+
+    console.log("data,", data )
+
+
+    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) => <ChainCard data={data} index={index}/>)}
+
+            </div>
+
+
+        </>
+
+    }
+
+    return (
+        <div className={`flex-column col-5 justify-content-start`}>
+
+            <p className={`font-size-md-plus mb-4`}>Chain List</p>
+
+            {
+                content()
+            }
+
+
+        </div>
+    );
+};
+
+export default Chain;
diff --git a/src/pages/Dashboard/Chain/Chain.module.css b/src/pages/Dashboard/Chain/Chain.module.css
new file mode 100644
index 0000000..498be0e
--- /dev/null
+++ b/src/pages/Dashboard/Chain/Chain.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;
+}
\ No newline at end of file
diff --git a/src/pages/Dashboard/Chain/ChainCard.js b/src/pages/Dashboard/Chain/ChainCard.js
new file mode 100644
index 0000000..e4fe105
--- /dev/null
+++ b/src/pages/Dashboard/Chain/ChainCard.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import classes from './Chain.module.css'
+
+const ChainCard = ({data, index}) => {
+
+    console.log("data in", data)
+
+    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>
+        </div>
+    );
+};
+
+export default ChainCard;
diff --git a/src/pages/Dashboard/Dashboard.js b/src/pages/Dashboard/Dashboard.js
index cb0c991..a7bcaf3 100644
--- a/src/pages/Dashboard/Dashboard.js
+++ b/src/pages/Dashboard/Dashboard.js
@@ -2,6 +2,9 @@ import React from "react";
 import Loading from "../../components/Loading";
 import ScrollBar from "../../components/ScrollBar";
 import {useGetUsersByGroup, useGetUsersList, useGetWithdrawsReq} from "../../query";
+import Chains from "../ChainAndToken/Chains/Chains";
+import Chain from "./Chain/Chain";
+import Token from "./Token/Token";
 
 const Dashboard = () => {
 
@@ -10,9 +13,9 @@ const Dashboard = () => {
     const {data: kycReq} = useGetUsersByGroup("kyc-requested", 1, 10)
 
     return <ScrollBar>
-        <div className="d-flex flex-column justify-content-around align-items-center" style={{minHeight: "100%"}}>
+        <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" style={{width: "80%"}}>
+            <div className="d-flex flex-row justify-content-between align-items-center my-5" style={{width: "80%"}}>
                 <div className="d-flex justify-content-center align-items-center primary-bg"
                      style={{width: "30%", height: "20vh", borderRadius: "7px"}}>
                     {users !== null ?
@@ -45,9 +48,16 @@ const Dashboard = () => {
                 </div>
             </div>
 
-            <div className="d-flex flex-row justify-content-between align-items-center"
+            <div className="d-flex flex-row justify-content-between align-items-start my-4 col-12" style={{width: "80%"}}>
+
+                <Chain/>
+                <Token/>
+
+            </div>
+
+            {/*<div className="d-flex flex-row justify-content-between align-items-center"
                  style={{width: "80%", height: "30vh"}}>
-                {/*<div className="d-flex flex-column justify-content-center align-items-center primary-bg py-4 px-2"
+                <div className="d-flex flex-column justify-content-center align-items-center primary-bg py-4 px-2"
                      style={{width: "46%", borderRadius: "7px"}}>
                     <h4 className="mb-2">Total Orders</h4>
                     <div className="mt-2" style={{width: "100%"}}><OrdersChart/></div>
@@ -56,8 +66,9 @@ const Dashboard = () => {
                      style={{width: "46%", borderRadius: "7px"}}>
                     <h4 className="mb-2">Total Trades</h4>
                     <div className="mt-2" style={{width: "100%"}}><TradesChart/></div>
-                </div>*/}
-            </div>
+                </div>
+            </div>*/}
+
         </div>
     </ScrollBar>
 }
diff --git a/src/pages/Dashboard/Token/Token.js b/src/pages/Dashboard/Token/Token.js
new file mode 100644
index 0000000..b29363b
--- /dev/null
+++ b/src/pages/Dashboard/Token/Token.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import classes from './Token.module.css'
+import {useGetTotalBalance} from "../../../query";
+import {useGetTokenTotalBalance} from "../../../query/hooks/useGetTokenTotalBalance";
+import ChainCard from "../Chain/ChainCard";
+import TokenCard from "./TokenCard";
+
+const Token = () => {
+
+    const {data, isLoading, error} = useGetTokenTotalBalance();
+
+    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) => <TokenCard data={data} index={index}/>)}
+
+            </div>
+
+
+        </>
+
+    }
+    return (
+        <div className={`flex-column col-5 justify-content-start`}>
+
+            <p className={`font-size-md-plus mb-4`}>Token List</p>
+
+            {
+                content()
+            }
+
+
+        </div>
+    );
+};
+
+export default Token;
diff --git a/src/pages/Dashboard/Token/Token.module.css b/src/pages/Dashboard/Token/Token.module.css
new file mode 100644
index 0000000..498be0e
--- /dev/null
+++ b/src/pages/Dashboard/Token/Token.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;
+}
\ No newline at end of file
diff --git a/src/pages/Dashboard/Token/TokenCard.js b/src/pages/Dashboard/Token/TokenCard.js
new file mode 100644
index 0000000..641bced
--- /dev/null
+++ b/src/pages/Dashboard/Token/TokenCard.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import classes from './Token.module.css'
+
+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>
+        </div>
+    );
+};
+
+export default TokenCard;
diff --git a/src/pages/Wallet/Wallet.js b/src/pages/Wallet/Wallet.js
index cec20e1..d0fae80 100644
--- a/src/pages/Wallet/Wallet.js
+++ b/src/pages/Wallet/Wallet.js
@@ -57,7 +57,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?.toLocaleString()}</td>
+                                    <td>{wallet?.balance}</td>
                                     <td>{wallet?.currency}</td>
 
                                 </tr>)
diff --git a/src/pages/Withdraws/Withdraws.js b/src/pages/Withdraws/Withdraws.js
index e0849d9..d1caa3e 100644
--- a/src/pages/Withdraws/Withdraws.js
+++ b/src/pages/Withdraws/Withdraws.js
@@ -72,7 +72,7 @@ const Withdraws = () => {
                                          src={toAbsoluteUrl("media/img/assets/" + withdraw.destCurrency + ".svg")}
                                          alt=""/>
                                 </td>
-                                <td>{withdraw.amount.toLocaleString()}</td>
+                                <td>{withdraw.amount}</td>
                                 <td>{withdraw.acceptedFee}</td>
                                 <td>{withdraw.appliedFee}</td>
                                 <td>{withdraw.destNote}</td>
diff --git a/src/query/hooks/useGetAllBalanceByChain.js b/src/query/hooks/useGetAllBalanceByChain.js
new file mode 100644
index 0000000..d62e87d
--- /dev/null
+++ b/src/query/hooks/useGetAllBalanceByChain.js
@@ -0,0 +1,18 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+
+export const useGetAllBalanceByChain = (chainId, params) => {
+    return useQuery(
+        ['chain-balance', chainId], async () => {
+            /*if (chainId === null) return;*/
+            const {data} = await axios.get(`https://walletstat.exky.io/v1/balance/${chainId}`, {
+                params: params
+            })
+            return data;
+        },
+        {
+            retry: 1,
+            /*enabled: false,
+            initialData:[]*/
+        });
+}
\ No newline at end of file
diff --git a/src/query/hooks/useGetChains.js b/src/query/hooks/useGetChains.js
new file mode 100644
index 0000000..34afc86
--- /dev/null
+++ b/src/query/hooks/useGetChains.js
@@ -0,0 +1,14 @@
+import {useQuery} from "@tanstack/react-query";
+import {adminGetChains} from "js-api-client";
+import axios from "axios";
+
+export const useGetChains = () => {
+    return useQuery(
+        ['chains'], async () => {
+            const {data} = await axios.get('https://walletstat.exky.io/v1/chain')
+            return data;
+        },
+        {
+            retry: 1,
+        });
+}
\ No newline at end of file
diff --git a/src/query/hooks/useGetTokenAllBalanceById.js b/src/query/hooks/useGetTokenAllBalanceById.js
new file mode 100644
index 0000000..68eace9
--- /dev/null
+++ b/src/query/hooks/useGetTokenAllBalanceById.js
@@ -0,0 +1,18 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+
+export const useGetTokenAllBalanceById = (chainId, params) => {
+    return useQuery(
+        ['token-balance', chainId], async () => {
+            /*if (chainId === null) return;*/
+            const {data} = await axios.get(`https://walletstat.exky.io/v1/balance/token/${chainId}`, {
+                params: params
+            })
+            return data;
+        },
+        {
+            retry: 1,
+            /*enabled: false,
+            initialData:[]*/
+        });
+}
\ No newline at end of file
diff --git a/src/query/hooks/useGetTokenTotalBalance.js b/src/query/hooks/useGetTokenTotalBalance.js
new file mode 100644
index 0000000..8d72504
--- /dev/null
+++ b/src/query/hooks/useGetTokenTotalBalance.js
@@ -0,0 +1,17 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+
+export const useGetTokenTotalBalance = () => {
+    return useQuery(
+        ['Token-Total-balance'], async () => {
+            /*if (chainId === null) return;*/
+            const {data} = await axios.get(`https://walletstat.exky.io/v1/balance/token/total`)
+            return data;
+
+        },
+        {
+            retry: 1,
+            /*enabled: false,
+            initialData:[]*/
+        });
+}
\ No newline at end of file
diff --git a/src/query/hooks/useGetTokenTotalBalanceById.js b/src/query/hooks/useGetTokenTotalBalanceById.js
new file mode 100644
index 0000000..b80b805
--- /dev/null
+++ b/src/query/hooks/useGetTokenTotalBalanceById.js
@@ -0,0 +1,17 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+
+export const useGetTokenTotalBalanceById = (chainId) => {
+    return useQuery(
+        ['token-Total-balance', chainId], async () => {
+            /*if (chainId === null) return;*/
+            const {data} = await axios.get(`https://walletstat.exky.io/v1/balance/token/${chainId}/total`)
+            return data;
+
+        },
+        {
+            retry: 1,
+            /*enabled: false,
+            initialData:[]*/
+        });
+}
\ No newline at end of file
diff --git a/src/query/hooks/useGetTokens.js b/src/query/hooks/useGetTokens.js
new file mode 100644
index 0000000..af2949e
--- /dev/null
+++ b/src/query/hooks/useGetTokens.js
@@ -0,0 +1,13 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+
+export const useGetTokens = () => {
+    return useQuery(
+        ['tokens'], async () => {
+            const {data} = await axios.get('https://walletstat.exky.io/v1/token')
+            return data;
+        },
+        {
+            retry: 1,
+        });
+}
\ No newline at end of file
diff --git a/src/query/hooks/useGetTotalBalance.js b/src/query/hooks/useGetTotalBalance.js
new file mode 100644
index 0000000..2736747
--- /dev/null
+++ b/src/query/hooks/useGetTotalBalance.js
@@ -0,0 +1,17 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+
+export const useGetTotalBalance = () => {
+    return useQuery(
+        ['Total-balance'], async () => {
+            /*if (chainId === null) return;*/
+            const {data} = await axios.get(`https://walletstat.exky.io/v1/balance/total`)
+            return data;
+
+        },
+        {
+            retry: 1,
+            /*enabled: false,
+            initialData:[]*/
+        });
+}
\ No newline at end of file
diff --git a/src/query/hooks/useGetTotalBalanceByChain.js b/src/query/hooks/useGetTotalBalanceByChain.js
new file mode 100644
index 0000000..56de13c
--- /dev/null
+++ b/src/query/hooks/useGetTotalBalanceByChain.js
@@ -0,0 +1,17 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+
+export const useGetTotalBalanceByChain = (chainId) => {
+    return useQuery(
+        ['chain-Total-balance', chainId], async () => {
+            /*if (chainId === null) return;*/
+            const {data} = await axios.get(`https://walletstat.exky.io/v1/balance/${chainId}/total`)
+            return data;
+
+        },
+        {
+            retry: 1,
+            /*enabled: false,
+            initialData:[]*/
+        });
+}
\ No newline at end of file
diff --git a/src/query/index.js b/src/query/index.js
index c4090ed..f4ff85c 100644
--- a/src/query/index.js
+++ b/src/query/index.js
@@ -4,4 +4,11 @@ export {useGetWithdrawsReq} from "./hooks/useGetWithdrawsReq";
 export {useGetWithdrawInfo} from "./hooks/useGetWithdrawInfo";
 export {useGetUsersByGroup} from "./hooks/useGetUsersByGroup";
 export {useGetWhiteList} from "./hooks/useGetWhiteList";
-export {useGetWalletData} from "./hooks/useGetWalletData";
\ No newline at end of file
+export {useGetWalletData} from "./hooks/useGetWalletData";
+export {useGetChains} from "./hooks/useGetChains";
+export {useGetAllBalanceByChain} from "./hooks/useGetAllBalanceByChain";
+export {useGetTotalBalanceByChain} from "./hooks/useGetTotalBalanceByChain";
+export {useGetTotalBalance} from "./hooks/useGetTotalBalance";
+export {useGetTokens} from "./hooks/useGetTokens";
+export {useGetTokenAllBalanceById} from "./hooks/useGetTokenAllBalanceById";
+export {useGetTokenTotalBalanceById} from "./hooks/useGetTokenTotalBalanceById";
\ No newline at end of file
diff --git a/src/routes/routes.js b/src/routes/routes.js
index b570fbe..bdd73bc 100644
--- a/src/routes/routes.js
+++ b/src/routes/routes.js
@@ -12,4 +12,5 @@ export const showUser = "users/:id";
 export const KYC = "kyc";
 export const WhiteList = "white-list";
 export const Wallet = "wallet";
+export const ChainAndToken = "chain-token";
 
diff --git a/src/setupAxios.js b/src/setupAxios.js
index b21a4cc..d92a51e 100644
--- a/src/setupAxios.js
+++ b/src/setupAxios.js
@@ -1,7 +1,7 @@
 import jwt_decode from "jwt-decode";
 import {getTokenByRefreshToken} from "js-api-client";
 
-export default function setupAxios(axios, auth, setAuth, timeout = 10000) {
+export default function setupAxios(axios, auth, setAuth, timeout = 600000) {
     axios.defaults.baseURL = window.env.REACT_APP_API_BASE_URL;
     axios.defaults.headers.Accept = 'application/json';
     axios.defaults.timeout = timeout;
diff --git a/yarn.lock b/yarn.lock
index 6f30771..3448a44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9059,8 +9059,8 @@ __metadata:
 
 "js-api-client@https://github.com/opexdev/js-api-client.git#develop":
   version: 1.0.0-beta2
-  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=8525035b16be314890321934ed2de3bcdf5b0223"
-  checksum: 636aef17cf715b51f389eec3c348e02c6bb6c313c8eb5b81b6c002d96876db655ce6c8f000569cca145fcbbbf22325c078970d2ba6ecd346c1fe6ae40e488338
+  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=a2cc1290d7adc5afe6ceae0dc1b3a34011af53a5"
+  checksum: 4a2f22c75eec68d855df093256f2d2a398c41d7d8e69971693f2917c42cc6e4421c1bdd6ab9bc529a398b8fb37e5affd9b1a4ad6f81a1e0daaaad250fd03bd9b
   languageName: node
   linkType: hard