diff --git a/src/Opex.js b/src/Opex.js index e56efb0..e360e6c 100644 --- a/src/Opex.js +++ b/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() { }/> }/> }/> + }/> + }/> }/> diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.js index a7d1218..1bd786e 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
@@ -42,6 +42,18 @@ const SideBar = ({closeMenu}) => { White List +
  • + + + Wallet + +
    • +
  • + + + Chain And Token + +
    • 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 ( + + ); +}; + +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 70ba3e2..a5faa88 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,8 @@ const Title = () => { + + ); }; 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 ( +
    +
    + +
    +
    + +
    + +
    + ); +}; + +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
    + Loading... +
    + if (error) return
    + Error! +
    + if (data?.length === 0) return
    + No Data! +
    + else return
    + {data?.map((balance, index) =>
    + {index + 1} {balance?.address} + Balance: {balance?.balance} +
    )} +
    + + } + + + + return ( + + <> + +
    +
    + Exclude Zero Balance + + { + + setParams(prevState => {return { + ...prevState, + excludeZero: !prevState.excludeZero + }}) + + + } } + + /*onchange={()=> setQuery({ + ...query, + ascendingByTime: (prevState => !prevState)} + )}*/ + checked={params?.excludeZero}/> +
    + +
    + {total?.chain?.toUpperCase()} + + Total Balance: + + { totalIsLoading ? "Loading..." : total?.balance} +
    +
    + + {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 Error + if (isLoading) return Loading... + else return <> +
    + {data?.map((chain, index) => setChainId(chain?.id)}>{chain?.name})} + +
    + + { + (chainId !== null) ? + : "" + } + + + } + + + + /*console.log("data", data[0]?.id)*/ + + return ( + +
    +

    Chain List

    + + { + content() + } + +
    +     + ); +}; + +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 Error + if (isLoading) return Loading... + else return <> +
    + {data?.map((chain, index) => setChainId(chain?.id)}>{chain?.name})} + +
    + + { + (chainId !== null) ? + : "" + } + + + } + + return ( + +
    +

    Token List

    + + { + content() + } + +
    +     + ); +}; + +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
    + Loading... +
    + if (error) return
    + Error! +
    + if (data?.length === 0) return
    + No Data! +
    + else return
    + {data?.map((balance, index) =>
    + {index + 1} {balance?.address} + Balance: {balance?.balance} +
    )} +
    + + } + + + return ( + <> + +
    +
    + Exclude Zero Balance + + { + + setParams(prevState => {return { + ...prevState, + excludeZero: !prevState.excludeZero + }}) + + + } } + + /*onchange={()=> setQuery({ + ...query, + ascendingByTime: (prevState => !prevState)} + )}*/ + checked={params?.excludeZero}/> +
    + +
    + {total?.chain?.toUpperCase()} + + Total Balance: + + { totalIsLoading ? "Loading..." : total?.balance} +
    +
    + + {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 Error + if (isLoading) return Loading... + else return <> +
    + {data?.map((data, index) => )} + +
    + + + + + } + + return ( +
    + +

    Chain List

    + + { + content() + } + + +
    + ); +}; + +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 ( +
    + {data?.chain} + {data?.balance} +
    + ); +}; + +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 -
    +
    -
    +
    {users !== null ? @@ -45,9 +48,16 @@ const Dashboard = () => {
    -
    + + + + +
    + + {/*
    - {/*

    Total Orders

    @@ -56,8 +66,9 @@ const Dashboard = () => { style={{width: "46%", borderRadius: "7px"}}>

    Total Trades

    -
    */} -
    +
    +
    */} +
    } 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 Error + if (isLoading) return Loading... + else return <> +
    + {data?.map((data, index) => )} + +
    + + + + + } + return ( +
    + +

    Token List

    + + { + content() + } + + +
    + ); +}; + +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 ( +
    + {data?.name} - {data?.symbol} + {data?.balance} +
    + ); +}; + +export default TokenCard; diff --git a/src/pages/Wallet/Wallet.js b/src/pages/Wallet/Wallet.js new file mode 100644 index 0000000..d0fae80 --- /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
    + if (error) return
    Error
    + if (data?.length === 0) return
    No Data...!
    + + + else return <> + + + }*/ + + + return ( + +
    + + + + + + + + + + + + { + isLoading ? + + + + : data?.length === 0 ? + + + : + data?.map((wallet, index) => + + + + + + + + ) + } + +
    + NameEmailWallet TypeBalanceCurrency
    + +
    No User Exist
    {index + 1}{wallet?.title?.slice(wallet?.title.indexOf("-") +1, wallet?.title?.end) }{wallet?.title?.slice(0, wallet?.title.indexOf("-"))}{wallet?.walletType}{wallet?.balance}{wallet?.currency}
    + {error ? +
    +