Add chain and token

src/Opex.js

@@ -18,6 +18,9 @@ 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";
+import ChainAndToken from "./pages/ChainAndToken/ChainAndToken";
+
 
 function Opex() {
     const {auth, setAuth} = useAuth();
@@ -72,6 +75,8 @@ 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 path={RoutesName.ChainAndToken} element={<ChainAndToken/>}/>
                 </Route>
                 <Route path="unauthorized" element={<Unauthorized/>}/>
             </Route>

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,18 @@ const SideBar = ({closeMenu}) => {
                     <span className="">White List</span>
                 </NavLink>
             </li>
+            <li className="has-child">
+                <NavLink to={Routes.Wallet}>
+                    <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>

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;

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%;
+}

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,8 @@ 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"/>
+                <Route path={RoutesName.ChainAndToken} element="Chain And Token"/>
             </Routes>
     );
 };

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;

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;

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;

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;
+}

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;