Skip to content

Commit 0cf285b

Browse files
Hossein-ab99Hossein-ab99
committed
#20: Add chain and token api
1 parent 48bc4f2 commit 0cf285b

34 files changed

+738
-13
lines changed

‎src/Opex.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {getTokenByRefreshToken} from "js-api-client";
1919
import setupAxios from "./setupAxios";
2020
import WhiteList from "./pages/WhiteList/WhiteList";
2121
import Wallet from "./pages/Wallet/Wallet";
22+
import ChainAndToken from "./pages/ChainAndToken/ChainAndToken";
2223

2324

2425
function Opex() {
@@ -75,6 +76,7 @@ function Opex() {
7576
<Route path={RoutesName.KYC} element={<KycUsers/>}/>
7677
<Route path={RoutesName.WhiteList} element={<WhiteList/>}/>
7778
<Route path={RoutesName.Wallet} element={<Wallet/>}/>
79+
<Route path={RoutesName.ChainAndToken} element={<ChainAndToken/>}/>
7880
</Route>
7981
<Route path="unauthorized" element={<Unauthorized/>}/>
8082
</Route>

‎src/components/SideBar/SideBar.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,16 @@ const SideBar = ({closeMenu}) => {
4444
</li>
4545
<li className="has-child">
4646
<NavLink to={Routes.Wallet}>
47-
<Icon iconName="icon-user_groups text-color font-size-md-plus"/>
47+
<Icon iconName="icon-layersm text-color font-size-md-plus"/>
4848
<span className="">Wallet</span>
4949
</NavLink>
5050
</li>
51+
<li className="has-child">
52+
<NavLink to={Routes.ChainAndToken}>
53+
<Icon iconName="icon-layersm text-color font-size-md-plus"/>
54+
<span className="">Chain And Token</span>
55+
</NavLink>
56+
</li>
5157
</ul>
5258

5359
</div>

‎src/components/ToggleSwitch/ToggleSwitch.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import classes from "./ToggleSwitch.module.css"
3+
4+
5+
const ToggleSwitch = (props) => {
6+
return (
7+
<label className={`${classes.switch}`}>
8+
<input type="checkbox" onChange={(e)=>props.onchange(e)} checked={props.checked}/>
9+
<span className={`${classes.slider}`}/>
10+
</label>
11+
);
12+
};
13+
14+
export default ToggleSwitch;

‎src/components/ToggleSwitch/ToggleSwitch.module.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.switch {
2+
position: relative;
3+
display: inline-block;
4+
width: 2.5rem;
5+
height: 1.5rem;
6+
}
7+
.switch input {
8+
opacity: 0;
9+
width: 0;
10+
height: 0;
11+
}
12+
.slider {
13+
position: absolute;
14+
cursor: pointer;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
border-radius: 34px;
20+
background-color: #ecececc7;
21+
-webkit-transition: .4s;
22+
transition: .4s;
23+
}
24+
.slider:before {
25+
position: absolute;
26+
content: "";
27+
width: 1.1rem;
28+
height: 1.1rem;
29+
top: 0.2rem;
30+
left: 0.18rem;
31+
right: initial;
32+
background-color: #ffffff;
33+
}
34+
:global(.ltr) .slider:before {
35+
right: 0.18rem;
36+
left: initial;
37+
}
38+
input:checked + .slider {
39+
background-color: #007bff;
40+
}
41+
input:focus + .slider {
42+
box-shadow: 0 0 1px #007bff;
43+
}
44+
input:checked + .slider:before {
45+
right: 0.18rem;
46+
left: initial;
47+
}
48+
:global(.ltr) input:checked + .slider:before {
49+
left: 0.18rem;
50+
right: initial;
51+
}
52+
.slider:before {
53+
border-radius: 50%;
54+
}

‎src/components/TopBar/Title/Title.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const Title = () => {
1616
<Route path={RoutesName.showWithdraw} element="Withdraws"/>
1717
<Route path={RoutesName.WhiteList} element="White List"/>
1818
<Route path={RoutesName.Wallet} element="Wallet"/>
19+
<Route path={RoutesName.ChainAndToken} element="Chain And Token"/>
1920
</Routes>
2021
);
2122
};

‎src/pages/ChainAndToken/ChainAndToken.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import classes from './ChainAndToken.module.css'
3+
import Chains from "./Chains/Chains";
4+
import Tokens from "./Tokens/Tokens";
5+
6+
const ChainAndToken = () => {
7+
return (
8+
<div className={`col-12 d-flex flex-row`}>
9+
<div className={`col-6 `}>
10+
<Chains/>
11+
</div>
12+
<div className={`col-6`}>
13+
<Tokens/>
14+
</div>
15+
16+
</div>
17+
);
18+
};
19+
20+
export default ChainAndToken;

‎src/pages/ChainAndToken/ChainAndToken.module.css‎

Whitespace-only changes.

‎src/pages/ChainAndToken/Chains/ChainBalance.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React, {useEffect, useState} from 'react';
2+
import classes from './Chains.module.css'
3+
4+
import ToggleSwitch from "../../../components/ToggleSwitch/ToggleSwitch";
5+
import {useGetAllBalanceByChain, useGetTotalBalanceByChain} from "../../../query";
6+
7+
8+
const ChainBalance = ({chainId}) => {
9+
10+
console.log("chainId in chainbalance", chainId)
11+
12+
const [params, setParams] = useState({
13+
"excludeZero": false,
14+
});
15+
16+
const {data, isLoading, error, refetch} = useGetAllBalanceByChain(chainId, params);
17+
const {data:total, isLoading:totalIsLoading, error:totalError} = useGetTotalBalanceByChain(chainId);
18+
19+
20+
useEffect(() => {
21+
refetch()
22+
}, [params]);
23+
24+
25+
console.log("data ChainBalance", data)
26+
27+
const content = ()=> {
28+
29+
if (isLoading) return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-5 ${classes.box}`}>
30+
Loading...
31+
</div>
32+
if (error) return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-5 ${classes.box}`}>
33+
Error!
34+
</div>
35+
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}`}>
36+
No Data!
37+
</div>
38+
else return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-3 ${classes.box} ${classes.striped}`}>
39+
{data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4`} key={index}>
40+
<span className={`col-8`}>{index + 1} <span className={`mx-3`}></span> {balance?.address}</span>
41+
<span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{balance?.balance}</span></span>
42+
</div>)}
43+
</div>
44+
45+
}
46+
47+
48+
49+
return (
50+
51+
<>
52+
53+
<div className={`col-12 my-2 d-flex flex-row justify-content-between col-12 mt-4 py-4 px-4 ${classes.box}`}>
54+
<div className={`d-flex flex-row col-5`}>
55+
<span className={``}>Exclude Zero Balance</span>
56+
<span className={`mx-2`}> </span>
57+
<ToggleSwitch
58+
59+
onchange={ () => {
60+
61+
setParams(prevState => {return {
62+
...prevState,
63+
excludeZero: !prevState.excludeZero
64+
}})
65+
66+
67+
} }
68+
69+
/*onchange={()=> setQuery({
70+
...query,
71+
ascendingByTime: (prevState => !prevState)}
72+
)}*/
73+
checked={params?.excludeZero}/>
74+
</div>
75+
76+
<div className={`d-flex flex-row justify-content-center col-7 text-center`}>
77+
<span className={``}>{total?.chain?.toUpperCase()}</span>
78+
<span className={`mx-1`}> </span>
79+
<span className={``}>Total Balance: </span>
80+
<span className={`mx-2`}> </span>
81+
<span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : total?.balance}</span>
82+
</div>
83+
</div>
84+
85+
{content()}
86+
87+
88+
89+
90+
</>
91+
92+
);
93+
};
94+
95+
export default ChainBalance;

‎src/pages/ChainAndToken/Chains/Chains.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, {useEffect, useState} from 'react';
2+
import classes from "./Chains.module.css"
3+
import ChainBalance from "./ChainBalance";
4+
import ScrollBar from "../../../components/ScrollBar";
5+
import {useGetChains} from "../../../query";
6+
7+
const Chains = () => {
8+
9+
const {data, isLoading, error, refetch} = useGetChains();
10+
11+
12+
const [chainId, setChainId] = useState(null);
13+
14+
15+
16+
17+
useEffect(() => {
18+
if (!isLoading && !error) setChainId(data[0]?.id)
19+
20+
}, [data]);
21+
22+
const content = () => {
23+
if (error) return <span>Error</span>
24+
if (isLoading) return <span>Loading...</span>
25+
else return <>
26+
<div className={`d-flex flex-row `}>
27+
{data?.map((chain, index) => <span key={index} className={`${classes.chainTitle} ${chain?.id === chainId && classes.activeChain}`} onClick={()=>setChainId(chain?.id)}>{chain?.name}</span>)}
28+
29+
</div>
30+
31+
{
32+
(chainId !== null) ?
33+
<ChainBalance chainId={chainId}/> : ""
34+
}
35+
</>
36+
37+
}
38+
39+
40+
41+
/*console.log("data", data[0]?.id)*/
42+
43+
return (
44+
<ScrollBar>
45+
<div className={`flex-column col-12 justify-content-start px-5 py-5`}>
46+
<p className={`font-size-md-plus mb-4`}>Chain List</p>
47+
48+
{
49+
content()
50+
}
51+
52+
</div>
53+
</ScrollBar>
54+
);
55+
};
56+
57+
export default Chains;

‎src/pages/ChainAndToken/Chains/Chains.module.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.chainTitle {
2+
padding: 1.2vh 1vw;
3+
background-color: #959caf;
4+
color: #000;
5+
border-radius: 8px;
6+
margin-right: 1vw;
7+
cursor: pointer;
8+
}
9+
10+
.activeChain {
11+
background-color: #2056de;
12+
color: #fff;
13+
}
14+
15+
.box {
16+
background: #282a36;
17+
color: rgba(236, 236, 236, 0.7803921569) !important;
18+
border-color: rgba(36, 38, 51, 0.9803921569) !important;
19+
border-radius: 5px !important;
20+
}
21+
22+
.striped div:nth-child(even){
23+
background-color: #38384678;
24+
-webkit-transition: background-color 0.4s;
25+
-o-transition: background-color 0.4s;
26+
transition: background-color 0.4s;
27+
}

0 commit comments

Comments
 (0)