Skip to content

Commit 53b29d4

Browse files
Hossein-ab99Hossein-ab99
authored
Merge pull request #24 from opexdev/develop
Add total balance by chain & Wallet data
2 parents ce8829e + 7ee1cae commit 53b29d4

File tree

17 files changed

+431
-20
lines changed

17 files changed

+431
-20
lines changed

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import classes from './Chains.module.css'
33

44
import ToggleSwitch from "../../../components/ToggleSwitch/ToggleSwitch";
55
import {useGetAllBalanceByChain, useGetTotalBalanceByChain} from "../../../query";
6+
import {BN} from "../../../utils/utils";
67

78

89
const ChainBalance = ({chainId}) => {
@@ -36,16 +37,13 @@ const ChainBalance = ({chainId}) => {
3637
No Data!
3738
</div>
3839
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+
{data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4 font-size-sm-plus`} key={index}>
4041
<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+
<span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{new BN(balance?.balance).toFormat()}</span></span>
4243
</div>)}
4344
</div>
44-
4545
}
4646

47-
48-
4947
return (
5048

5149
<>
@@ -78,7 +76,7 @@ const ChainBalance = ({chainId}) => {
7876
<span className={`mx-1`}> </span>
7977
<span className={``}>Total Balance: </span>
8078
<span className={`mx-2`}> </span>
81-
<span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : total?.balance}</span>
79+
<span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : new BN(total?.balance).toFormat()}</span>
8280
</div>
8381
</div>
8482

‎src/pages/ChainAndToken/Tokens/TokensBalance.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
22
import {useGetTokenAllBalanceById, useGetTokenTotalBalanceById} from "../../../query";
33
import classes from "../Chains/Chains.module.css";
44
import ToggleSwitch from "../../../components/ToggleSwitch/ToggleSwitch";
5+
import {BN} from "../../../utils/utils";
56

67
const TokensBalance = ({chainId}) => {
78

@@ -29,9 +30,9 @@ const TokensBalance = ({chainId}) => {
2930
No Data!
3031
</div>
3132
else return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-3 ${classes.box} ${classes.striped}`}>
32-
{data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4`} key={index}>
33+
{data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4 font-size-sm-plus`} key={index}>
3334
<span className={`col-8`}>{index + 1} <span className={`mx-3`}></span> {balance?.address}</span>
34-
<span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{balance?.balance}</span></span>
35+
<span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{new BN(balance?.balance).toFormat()}</span></span>
3536
</div>)}
3637
</div>
3738

@@ -69,7 +70,7 @@ const TokensBalance = ({chainId}) => {
6970
<span className={`mx-1`}> </span>
7071
<span className={``}>Total Balance: </span>
7172
<span className={`mx-2`}> </span>
72-
<span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : total?.balance}</span>
73+
<span className={`font-size-md`} style={{color: 'white'}}>{ totalIsLoading ? "Loading..." : new BN(total?.balance).toFormat()}</span>
7374
</div>
7475
</div>
7576

‎src/pages/Dashboard/BriefWallet/BriefWallet.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import classes from './BriefWallet.module.css'
3+
import {useGetWalletTotalUsers} from "../../../query";
4+
import BriefWalletCard from "./BriefWalletCard";
5+
6+
const BriefWallet = () => {
7+
8+
const {data, isLoading, error} = useGetWalletTotalUsers();
9+
10+
const content = () => {
11+
if (error) return <span>Error</span>
12+
if (isLoading) return <span>Loading...</span>
13+
else return <>
14+
<div className={`d-flex flex-column ${classes.striped} ${classes.box} py-2`}>
15+
{data?.map((data, index) => <BriefWalletCard data={data} index={index}/>)}
16+
17+
</div>
18+
19+
20+
</>
21+
22+
}
23+
24+
return (
25+
<div className={`flex-column justify-content-start`} style={{width: "32%"}}>
26+
27+
<p className={`font-size-md-plus mb-4`}>Total User Wallets</p>
28+
29+
{
30+
content()
31+
}
32+
33+
34+
</div>
35+
);
36+
};
37+
38+
export default BriefWallet;

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.box {
2+
background: #282a36;
3+
color: rgba(236, 236, 236, 0.7803921569) !important;
4+
border-color: rgba(36, 38, 51, 0.9803921569) !important;
5+
border-radius: 5px !important;
6+
}
7+
8+
.striped div:nth-child(even){
9+
background-color: #38384678;
10+
-webkit-transition: background-color 0.4s;
11+
-o-transition: background-color 0.4s;
12+
transition: background-color 0.4s;
13+
}

‎src/pages/Dashboard/BriefWallet/BriefWalletCard.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 './BriefWallet.module.css'
3+
import {BN} from "../../../utils/utils";
4+
5+
const BriefWalletCard = ({data, index}) => {
6+
return (
7+
<div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4`}>
8+
<span className={`col-4`}>{data?.currency}</span>
9+
<span className={`col-8`}>{new BN(data?.balance).toFormat()}</span>
10+
</div>
11+
);
12+
};
13+
14+
export default BriefWalletCard;

‎src/pages/Dashboard/Chain/Chain.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Chain = () => {
2727
}
2828

2929
return (
30-
<div className={`flex-column col-5 justify-content-start`}>
30+
<div className={`flex-column justify-content-start`} style={{width: "32%"}}>
3131

3232
<p className={`font-size-md-plus mb-4`}>Chain List</p>
3333

‎src/pages/Dashboard/Chain/ChainCard.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import classes from './Chain.module.css'
3+
import {BN} from "../../../utils/utils";
34

45
const ChainCard = ({data, index}) => {
56

@@ -8,7 +9,7 @@ const ChainCard = ({data, index}) => {
89
return (
910
<div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4`}>
1011
<span className={`col-6`}>{data?.chain}</span>
11-
<span className={`col-6`}>{data?.balance}</span>
12+
<span className={`col-6`}>{new BN(data?.balance).toFormat()}</span>
1213
</div>
1314
);
1415
};

‎src/pages/Dashboard/Dashboard.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {useGetUsersByGroup, useGetUsersList, useGetWithdrawsReq} from "../../que
55
import Chains from "../ChainAndToken/Chains/Chains";
66
import Chain from "./Chain/Chain";
77
import Token from "./Token/Token";
8+
import BriefWallet from "./BriefWallet/BriefWallet";
89

910
const Dashboard = () => {
1011

@@ -15,7 +16,7 @@ const Dashboard = () => {
1516
return <ScrollBar>
1617
<div className="d-flex flex-column justify-content-start align-items-center" style={{minHeight: "100%"}}>
1718

18-
<div className="d-flex flex-row justify-content-between align-items-center my-5" style={{width: "80%"}}>
19+
<div className="d-flex flex-row justify-content-between align-items-center my-5" style={{width: "90%"}}>
1920
<div className="d-flex justify-content-center align-items-center primary-bg"
2021
style={{width: "30%", height: "20vh", borderRadius: "7px"}}>
2122
{users !== null ?
@@ -48,10 +49,11 @@ const Dashboard = () => {
4849
</div>
4950
</div>
5051

51-
<div className="d-flex flex-row justify-content-between align-items-start my-4 col-12" style={{width: "80%"}}>
52+
<div className="d-flex flex-row justify-content-between align-items-start my-4 col-12" style={{width: "90%"}}>
5253

5354
<Chain/>
5455
<Token/>
56+
<BriefWallet/>
5557

5658
</div>
5759

‎src/pages/Dashboard/Token/Token.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Token = () => {
2323

2424
}
2525
return (
26-
<div className={`flex-column col-5 justify-content-start`}>
26+
<div className={`flex-column justify-content-start`} style={{width: "32%"}}>
2727

2828
<p className={`font-size-md-plus mb-4`}>Token List</p>
2929

‎src/pages/Dashboard/Token/TokenCard.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import classes from './Token.module.css'
3+
import {BN} from "../../../utils/utils";
34

45
const TokenCard = ({data, index}) => {
56
return (
67
<div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4`}>
7-
<span className={`col-6`}>{data?.name} - {data?.symbol}</span>
8-
<span className={`col-6`}>{data?.balance}</span>
8+
<span className={`col-8`}>{data?.name} - {data?.symbol}</span>
9+
<span className={`col-4`}>{new BN(data?.balance).toFormat()}</span>
910
</div>
1011
);
1112
};

0 commit comments

Comments
 (0)