Skip to content

Commit 48bc4f2

Browse files
Hossein-ab99Hossein-ab99
committed
#20: Add walletData api & main component
1 parent cc4d97f commit 48bc4f2

File tree

10 files changed

+172
-4
lines changed

10 files changed

+172
-4
lines changed

‎src/Opex.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import jwt_decode from "jwt-decode";
1818
import {getTokenByRefreshToken} from "js-api-client";
1919
import setupAxios from "./setupAxios";
2020
import WhiteList from "./pages/WhiteList/WhiteList";
21+
import Wallet from "./pages/Wallet/Wallet";
22+
2123

2224
function Opex() {
2325
const {auth, setAuth} = useAuth();
@@ -72,6 +74,7 @@ function Opex() {
7274
<Route path={RoutesName.showWithdraw} element={<WithdrawInfo/>}/>
7375
<Route path={RoutesName.KYC} element={<KycUsers/>}/>
7476
<Route path={RoutesName.WhiteList} element={<WhiteList/>}/>
77+
<Route path={RoutesName.Wallet} element={<Wallet/>}/>
7578
</Route>
7679
<Route path="unauthorized" element={<Unauthorized/>}/>
7780
</Route>

‎src/components/SideBar/SideBar.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {toAbsoluteUrl} from "../utils";
22
import {NavLink} from "react-router-dom";
33
import * as Routes from "../../routes/routes";
44
import Icon from "../Icon/Icon";
5-
import {WhiteList} from "../../routes/routes";
5+
import {Wallet, WhiteList} from "../../routes/routes";
66

77
const SideBar = ({closeMenu}) => {
88
return <div className={`sidebar text-color ${closeMenu ? "close" : "open"}`}>
@@ -42,6 +42,12 @@ const SideBar = ({closeMenu}) => {
4242
<span className="">White List</span>
4343
</NavLink>
4444
</li>
45+
<li className="has-child">
46+
<NavLink to={Routes.Wallet}>
47+
<Icon iconName="icon-user_groups text-color font-size-md-plus"/>
48+
<span className="">Wallet</span>
49+
</NavLink>
50+
</li>
4551
</ul>
4652

4753
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import {Route, Routes} from "react-router-dom";
33
import * as RoutesName from "../../../routes/routes";
44
import WhiteList from "../../../pages/WhiteList/WhiteList";
5+
import {Wallet} from "../../../routes/routes";
56

67
const Title = () => {
78

@@ -14,6 +15,7 @@ const Title = () => {
1415
<Route path={RoutesName.withdraws} element="Withdraws"/>
1516
<Route path={RoutesName.showWithdraw} element="Withdraws"/>
1617
<Route path={RoutesName.WhiteList} element="White List"/>
18+
<Route path={RoutesName.Wallet} element="Wallet"/>
1719
</Routes>
1820
);
1921
};

‎src/pages/Wallet/Wallet.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, {useState} from 'react';
2+
import {useGetWalletData} from "../../query";
3+
import Loading from "../../components/Loading";
4+
import ScrollBar from "../../components/ScrollBar";
5+
6+
const Wallet = () => {
7+
8+
const [params, setParams] = useState({
9+
"limit": 500,
10+
"offset": 0
11+
});
12+
13+
const {data, isLoading, error, refetch} = useGetWalletData(params);
14+
15+
16+
17+
/*const content = () => {
18+
if (isLoading) return <div style={{height: "40vh"}}><Loading/></div>
19+
if (error) return <div style={{height: "40vh"}}>Error</div>
20+
if (data?.length === 0) return <div style={{height: "40vh"}} className={`flex jc-center ai-center`}>No Data...!</div>
21+
22+
23+
else return <>
24+
<WalletList data={data}/>
25+
</>
26+
}*/
27+
28+
29+
return (
30+
<ScrollBar>
31+
<div className="col-12 d-flex flex-column justify-content-between align-items-center px-5 py-5">
32+
<table className="table table-bordered rounded text-center col-12 striped table-responsive">
33+
<thead className="py-2 my-2" style={{paddingBottom: "1vh !important"}}>
34+
<tr className="">
35+
<th scope="col my-1" style={{width: "4%"}}/>
36+
<th scope="col">Name</th>
37+
<th scope="col">Email</th>
38+
<th scope="col">Wallet Type</th>
39+
<th scope="col">Balance</th>
40+
<th scope="col">Currency</th>
41+
</tr>
42+
</thead>
43+
<tbody>
44+
{
45+
isLoading ?
46+
<tr>
47+
<td colSpan="12" className="text-center py-5" style={{height: "50vh"}}>
48+
<Loading/>
49+
</td>
50+
</tr>
51+
: data?.length === 0 ?
52+
<tr>
53+
<td colSpan="12" className="text-center" style={{height: "50vh"}}>No User Exist</td>
54+
</tr> :
55+
data?.map((wallet, index) => <tr key={index}>
56+
<th scope="row">{index + 1}</th>
57+
<td>{wallet?.title?.slice(wallet?.title.indexOf("-") +1, wallet?.title?.end) }</td>
58+
<td>{wallet?.title?.slice(0, wallet?.title.indexOf("-"))}</td>
59+
<td>{wallet?.walletType}</td>
60+
<td>{wallet?.balance?.toLocaleString()}</td>
61+
<td>{wallet?.currency}</td>
62+
63+
</tr>)
64+
}
65+
</tbody>
66+
</table>
67+
{error ?
68+
<div className="alert alert-danger" role="alert">
69+
<i className="fa fa-exclamation-triangle mx-2" aria-hidden="true"/>
70+
{error.toString()}
71+
</div>
72+
: ""
73+
}
74+
{/* {(!isLoading && users?.total > paginate.perPage)&&
75+
<div className="mt-2">
76+
<Pagination total={users.total} paginate={paginate}/>
77+
</div>
78+
}*/}
79+
</div>
80+
</ScrollBar>
81+
);
82+
};
83+
84+
export default Wallet;

‎src/pages/Wallet/Wallet.module.css‎

Whitespace-only changes.

‎src/pages/Wallet/walletList.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import classes from './Wallet.module.css'
3+
4+
const walletList = (data, index) => {
5+
6+
console.log("data in list", data)
7+
8+
9+
let head = (
10+
<div className="flex-row justify-content-between col-12 text-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
11+
<span className="width-5 flex jc-start ai-center">Name</span>
12+
<span className="width-8 flex jc-start ai-center">Email</span>
13+
<span className="width-7 flex jc-start ai-center">Wallet Type</span>
14+
<span className="width-12 flex jc-start ai-center">Balance</span>
15+
<span className="width-13 flex jc-start ai-center">Currency</span>
16+
</div>
17+
);
18+
19+
let body = (
20+
<>
21+
{data?.data?.map((tr, index) => {
22+
23+
24+
return (
25+
26+
<div className={`column ${classes.striped}`} key={index}>
27+
28+
<div className={`${classes.row} row rounded-5 border-bottom px-2 py-2`} key={index}>
29+
<span className="width-5 row jc-start ai-center">{index}</span>
30+
<span className="width-5 row jc-start ai-center">{data?.name}</span>
31+
<span className="width-5 row jc-start ai-center">{data?.title}</span>
32+
<span className="width-5 row jc-start ai-center">{data?.walletType}</span>
33+
<span className="width-5 row jc-start ai-center">{data?.balance}</span>
34+
<span className="width-5 row jc-start ai-center">{data?.currency}</span>
35+
36+
37+
38+
</div>
39+
40+
41+
</div>
42+
43+
44+
45+
)
46+
})}
47+
</>
48+
);
49+
50+
return <>
51+
{head}
52+
{body}
53+
</>
54+
55+
};
56+
57+
export default walletList;

‎src/query/hooks/useGetWalletData.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {useQuery} from "@tanstack/react-query";
2+
import {adminGetUsersList, adminGetWalletData} from "js-api-client";
3+
4+
export const useGetWalletData = (params) => {
5+
return useQuery(
6+
['wallet-data', params], async () => {
7+
const {data} = await adminGetWalletData(params)
8+
return data;
9+
},
10+
{
11+
retry: 1,
12+
notifyOnChangeProps: ['data', 'isLoading', 'error'],
13+
});
14+
}

‎src/query/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ export {useGetUserInfo} from "./hooks/useGetUserInfo";
33
export {useGetWithdrawsReq} from "./hooks/useGetWithdrawsReq";
44
export {useGetWithdrawInfo} from "./hooks/useGetWithdrawInfo";
55
export {useGetUsersByGroup} from "./hooks/useGetUsersByGroup";
6-
export {useGetWhiteList} from "./hooks/useGetWhiteList";
6+
export {useGetWhiteList} from "./hooks/useGetWhiteList";
7+
export {useGetWalletData} from "./hooks/useGetWalletData";

‎src/routes/routes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ export const showUser = "users/:id";
1111

1212
export const KYC = "kyc";
1313
export const WhiteList = "white-list";
14+
export const Wallet = "wallet";
1415

‎yarn.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9059,8 +9059,8 @@ __metadata:
90599059

90609060
"js-api-client@https://github.com/opexdev/js-api-client.git#develop":
90619061
version: 1.0.0-beta2
9062-
resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=a6dad61c8dd2e6f7d039243f256b962e8d8fbcdd"
9063-
checksum: fb5fb3e6f4a285a7e09efcee0eb1065956004dca8e2f8c9d22e4829dced6469edbdd941fc6fc2e9abdb311b7ea5993552f11c7306493bd4126d514b00e3d8eff
9062+
resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=8525035b16be314890321934ed2de3bcdf5b0223"
9063+
checksum: 636aef17cf715b51f389eec3c348e02c6bb6c313c8eb5b81b6c002d96876db655ce6c8f000569cca145fcbbbf22325c078970d2ba6ecd346c1fe6ae40e488338
90649064
languageName: node
90659065
linkType: hard
90669066

0 commit comments

Comments
 (0)