├── README.md ├── src ├── redux │ ├── actions │ │ ├── auth.js │ │ ├── wallet.js │ │ ├── actionTypes.js │ │ ├── balance.js │ │ ├── trade.js │ │ ├── crypto.js │ │ ├── stake.js │ │ └── order.js │ ├── index.js │ └── reducers │ │ ├── auth.js │ │ ├── stake.js │ │ ├── wallet.js │ │ ├── index.js │ │ ├── balance.js │ │ ├── order.js │ │ ├── crypto.js │ │ ├── trade.js │ │ └── token.js ├── assets │ ├── logo.png │ ├── caladex.png │ ├── logo1.png │ ├── logo3.png │ ├── metamask.jpg │ ├── Untitled-2.png │ └── avatar │ │ ├── ADA.png │ │ ├── BTC.png │ │ ├── CAX.png │ │ ├── DASH.png │ │ ├── EOS.png │ │ ├── ETH.png │ │ ├── LTC.png │ │ └── NEM.png ├── static │ ├── languages │ │ ├── tr.json │ │ ├── fr.json │ │ ├── po.json │ │ ├── en.json │ │ ├── sp.json │ │ ├── du.json │ │ ├── de.json │ │ └── index.js │ ├── tokensinfo │ │ ├── avatar │ │ │ ├── caladex.png │ │ │ ├── eos.svg │ │ │ ├── dash.svg │ │ │ ├── ethereum.svg │ │ │ ├── litecoin.svg │ │ │ ├── bitcoin.svg │ │ │ ├── nem.svg │ │ │ └── cardano.svg │ │ ├── history.json │ │ ├── quotesOne.json │ │ ├── quotesTwo.json │ │ ├── baseinfo.json │ │ ├── stakinginfo.js │ │ ├── walletinfo.js │ │ └── tokens.js │ └── constants.js ├── setupTests.js ├── utils │ ├── ProtectedRoute.js │ ├── reportWebVitals.js │ ├── Language.js │ ├── theme.js │ ├── helper.js │ └── globalstyles.js ├── index.js ├── constants │ ├── index.js │ └── abis │ │ ├── greeter.json │ │ ├── erc20.json │ │ └── token.json ├── hooks │ ├── useTokenContract.js │ └── useCaladexContract.js ├── components │ ├── New folder (2) │ │ ├── Balances │ │ │ └── EmptyWidget │ │ │ │ └── index.js │ │ └── EarnStaking │ │ │ └── StakingDialog │ │ │ └── CheckButton.js │ ├── Exchange │ │ ├── OrderBook │ │ │ ├── PriceMean │ │ │ │ └── index.js │ │ │ ├── OrderLableBox │ │ │ │ └── index.js │ │ │ ├── OrderSelectBox │ │ │ │ ├── OrderTypeBt │ │ │ │ │ ├── Badge.styled.js │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── OrderBuyList │ │ │ │ └── index.js │ │ │ └── OrderSellList │ │ │ │ └── index.js │ │ ├── TokenPriceBar │ │ │ └── index.js │ │ ├── TradingView │ │ │ └── index.js │ │ ├── Trade │ │ │ ├── TradeSelectBox │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── MarketTradeList │ │ │ │ └── index.js │ │ ├── RecentOrder │ │ │ ├── index.js │ │ │ ├── RecentSelectBox │ │ │ │ └── index.js │ │ │ └── RecentOrderList │ │ │ │ └── index.js │ │ ├── TradingWidget │ │ │ └── index.js │ │ ├── Marketing │ │ │ ├── BuyAndSell │ │ │ │ ├── SelectPairToken │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── MarketSelectBox │ │ │ │ └── index.js │ │ ├── TokenList │ │ │ ├── index.js │ │ │ ├── TokenPairBox │ │ │ │ └── index.js │ │ │ ├── TokenSearchBox │ │ │ │ └── index.js │ │ │ └── TokenInfoList │ │ │ │ └── index.js │ │ ├── TokenPriceTable │ │ │ └── index.js │ │ ├── Table1 │ │ │ └── index.js │ │ ├── Table2 │ │ │ └── index.js │ │ ├── TradeHistoryTable │ │ │ └── index.js │ │ ├── OrderCrypto │ │ │ └── index.js │ │ ├── WalletConnect │ │ │ └── index.js │ │ └── CoinBanner │ │ │ └── index.js │ ├── Common │ │ ├── TokenSearch │ │ │ └── index.js │ │ ├── Title │ │ │ └── index.js │ │ └── FruitBar │ │ │ └── index.js │ ├── Orders │ │ ├── CustomDatePicker │ │ │ └── index.js │ │ └── OrdersHistory │ │ │ └── index.js │ ├── Routes.js │ ├── Main.js │ ├── EarnStaking │ │ └── StakingDialog │ │ │ └── CheckButton.js │ ├── Balances │ │ └── AddressWidget │ │ │ └── index.js │ └── Layouts │ │ ├── Header │ │ └── DrawerNavbar.js │ │ └── Footer │ │ └── index.js ├── pages │ ├── Orders │ │ └── index.js │ ├── TokenInfoBase │ │ └── index.js │ ├── Balances │ │ └── index.js │ ├── EarnStaking │ │ └── index.js │ └── Landing │ │ └── index.js └── App.js ├── public ├── favicon.gif ├── favicon.ico ├── favicon.png ├── logo192.png ├── logo1921.png ├── logo512.png ├── logo5121.png ├── avatar │ ├── ADA.png │ ├── BTC.png │ ├── CAX.png │ ├── DASH.png │ ├── EOS.png │ ├── ETH.png │ ├── LTC.png │ └── NEM.png ├── robots.txt ├── caladex_logo.png ├── Details correction landing page and token info base.pdf ├── Mile stone 1 corrections and work still to be done.pdf ├── .htaccess ├── manifest.json └── index.html ├── .gitignore └── package.json /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/redux/actions/auth.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import ActionTypes from './actionTypes' ; 5 | -------------------------------------------------------------------------------- /public/favicon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/favicon.gif -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo1921.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/logo1921.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/logo5121.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/logo5121.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /public/avatar/ADA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/avatar/ADA.png -------------------------------------------------------------------------------- /public/avatar/BTC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/avatar/BTC.png -------------------------------------------------------------------------------- /public/avatar/CAX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/avatar/CAX.png -------------------------------------------------------------------------------- /public/avatar/DASH.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/avatar/DASH.png -------------------------------------------------------------------------------- /public/avatar/EOS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/avatar/EOS.png -------------------------------------------------------------------------------- /public/avatar/ETH.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/avatar/ETH.png -------------------------------------------------------------------------------- /public/avatar/LTC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/avatar/LTC.png -------------------------------------------------------------------------------- /public/avatar/NEM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/avatar/NEM.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/caladex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/caladex.png -------------------------------------------------------------------------------- /src/assets/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/logo1.png -------------------------------------------------------------------------------- /src/assets/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/logo3.png -------------------------------------------------------------------------------- /public/caladex_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/caladex_logo.png -------------------------------------------------------------------------------- /src/assets/metamask.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/metamask.jpg -------------------------------------------------------------------------------- /src/assets/Untitled-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/Untitled-2.png -------------------------------------------------------------------------------- /src/assets/avatar/ADA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/avatar/ADA.png -------------------------------------------------------------------------------- /src/assets/avatar/BTC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/avatar/BTC.png -------------------------------------------------------------------------------- /src/assets/avatar/CAX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/avatar/CAX.png -------------------------------------------------------------------------------- /src/assets/avatar/DASH.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/avatar/DASH.png -------------------------------------------------------------------------------- /src/assets/avatar/EOS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/avatar/EOS.png -------------------------------------------------------------------------------- /src/assets/avatar/ETH.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/avatar/ETH.png -------------------------------------------------------------------------------- /src/assets/avatar/LTC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/avatar/LTC.png -------------------------------------------------------------------------------- /src/assets/avatar/NEM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/assets/avatar/NEM.png -------------------------------------------------------------------------------- /src/static/languages/tr.json: -------------------------------------------------------------------------------- 1 | { 2 | "cryptochange": "Crypto Exchange tr", 3 | "tokenexchange": "Token Exchangetr" 4 | } 5 | -------------------------------------------------------------------------------- /src/static/tokensinfo/avatar/caladex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/src/static/tokensinfo/avatar/caladex.png -------------------------------------------------------------------------------- /public/Details correction landing page and token info base.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/Details correction landing page and token info base.pdf -------------------------------------------------------------------------------- /public/Mile stone 1 corrections and work still to be done.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Topten1004/Caladex/HEAD/public/Mile stone 1 corrections and work still to be done.pdf -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/static/languages/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "exchange": "Échange", 3 | "tokenlisting": "Jeton liste", 4 | "tokeninfobase": "Jeton Info Base", 5 | "earnstaking": "Gagner/Jalonnement", 6 | "balances": "Solde", 7 | "orders": "Ordres", 8 | "walletconnect": "Portefeuille Relier" 9 | } -------------------------------------------------------------------------------- /src/static/languages/po.json: -------------------------------------------------------------------------------- 1 | { 2 | "exchange": "Troca", 3 | "tokenlisting": "Símbolo Listagem", 4 | "tokeninfobase": "Símbolo Info Base", 5 | "earnstaking": "Ganhar/Estacando", 6 | "balances": "Saldos", 7 | "orders": "Pedidas", 8 | "walletconnect": "Carteira Conectar" 9 | } -------------------------------------------------------------------------------- /src/static/languages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "exchange": "Exchange", 3 | "tokenlisting": "Token Listing", 4 | "tokeninfobase": "Token Info Base", 5 | "earnstaking": "Earn/Staking", 6 | "balances": "Balances", 7 | "orders": "Orders", 8 | "walletconnect": "Wallet Connect" 9 | } 10 | -------------------------------------------------------------------------------- /src/static/languages/sp.json: -------------------------------------------------------------------------------- 1 | { 2 | "exchange": "Intercambio", 3 | "tokenlisting": "Simbólica Intercambio", 4 | "tokeninfobase": "Simbólica Info Base", 5 | "earnstaking": "Ganar/Replanteo", 6 | "balances": "Saldos", 7 | "orders": "Pedidos", 8 | "walletconnect": "Cartera Conectar" 9 | } -------------------------------------------------------------------------------- /src/static/languages/du.json: -------------------------------------------------------------------------------- 1 | { 2 | "exchange": "Aandelenbeurs", 3 | "tokenlisting": "Símbolo Listagem", 4 | "tokeninfobase": "Símbolo Info Baseren", 5 | "earnstaking": "Verdienen/Uitzetten", 6 | "balances": "Saldi", 7 | "orders": "Bestellingen", 8 | "walletconnect": "Portemonnee Aansluiten" 9 | } -------------------------------------------------------------------------------- /src/redux/index.js: -------------------------------------------------------------------------------- 1 | import rootReducer from './reducers'; 2 | import { createStore, applyMiddleware , compose } from 'redux'; 3 | 4 | import thunk from 'redux-thunk'; 5 | 6 | const store = createStore( 7 | rootReducer, 8 | {}, 9 | applyMiddleware(thunk) 10 | ); 11 | 12 | export default store; -------------------------------------------------------------------------------- /src/redux/reducers/auth.js: -------------------------------------------------------------------------------- 1 | 2 | // import ActionTypes from '../actions/actionTypes' ; 3 | 4 | const INITIAL_STATE = { 5 | isAuthenticated : false , 6 | access_token : '' , 7 | } 8 | 9 | export default ( state={INITIAL_STATE} , action={} ) => { 10 | switch(action.type) { 11 | default : 12 | return state ; 13 | } 14 | } -------------------------------------------------------------------------------- /src/static/languages/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "cryptochange": "Crypto Handel", 3 | "tokenexchange": "Token Handel", 4 | "margintrading": "Marge Handel", 5 | "futurestrading": "Futures Handel", 6 | "buycrypto": "Koop Crypto", 7 | "tokeninfobase": "Token Basis Info", 8 | "caxrewards": "CAX Beloningen", 9 | "aboutus": "Over ons", 10 | "signup": "Aanmelden", 11 | "login": "Log in" 12 | } 13 | -------------------------------------------------------------------------------- /src/static/languages/index.js: -------------------------------------------------------------------------------- 1 | import en from './en.json'; 2 | import sp from './sp.json'; 3 | import fr from './fr.json'; 4 | import po from './po.json'; 5 | import du from './du.json'; 6 | 7 | export const dictionaryList = { en, sp, fr, po, du }; 8 | 9 | export const languageOptions = { 10 | en: 'English', 11 | sp: 'Spanish', 12 | fr: 'French', 13 | po: 'Portugeese', 14 | du: 'Dutch', 15 | }; 16 | -------------------------------------------------------------------------------- /public/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | RewriteEngine On 3 | RewriteCond %{HTTP_HOST} ^caladex\.org [NC] 4 | RewriteCond %{SERVER_PORT} 80 5 | RewriteRule ^(.*)$ https://www.caladex.org/$1 [R,L] 6 | RewriteBase /subdirectory 7 | RewriteRule ^index\.html$ - [L] 8 | RewriteCond %{REQUEST_FILENAME} !-f 9 | RewriteCond %{REQUEST_FILENAME} !-d 10 | RewriteCond %{REQUEST_FILENAME} !-l 11 | RewriteRule . /index.html [L] 12 | -------------------------------------------------------------------------------- /src/static/tokensinfo/avatar/eos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/ProtectedRoute.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | 4 | import { Navigate , Outlet } from 'react-router-dom'; 5 | 6 | import { isAuthenticated } from './helper'; 7 | 8 | const ProtectedRoute = () => { 9 | // console.log(isAuthenticated()) ; 10 | // if (!isAuthenticated()) { 11 | // return ; 12 | // } 13 | return ; 14 | } 15 | 16 | export default ProtectedRoute ; -------------------------------------------------------------------------------- /src/utils/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/static/constants.js: -------------------------------------------------------------------------------- 1 | export const DefaultLocale = 'EN'; 2 | 3 | // export const BACKEND_URL = 'https://calahex.io/api/'; 4 | 5 | // export const BACKEND_URL = 'http://127.0.0.1:8000/api/'; 6 | 7 | export const PUBLIC_API_URL = "https://poloniex.com/public?" ; 8 | 9 | export const PUBULIC_EXCHANGE_RATE_API = "https://api.coinbase.com/v2/exchange-rates?currency=" ; 10 | 11 | export const PRIVATE_CALADEX_API = "http://10.10.10.171:5050/api/" ; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | import { Web3ReactProvider } from '@web3-react/core'; 6 | 7 | import reportWebVitals from './utils/reportWebVitals'; 8 | 9 | import { getLibrary } from './utils/helper' ; 10 | 11 | ReactDOM.render( 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ); 17 | 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | import { InjectedConnector } from "@web3-react/injected-connector"; 2 | 3 | export const injected = new InjectedConnector({ supportedChainIds: [1, 3, 4, 5, 42, 1337, 31337] }); 4 | 5 | export const CALADEX_ADDR = "0x695690C290cCaEa84d3101039bd80698B249Ecc1" ; 6 | // export const CALADEX_ADDR = "0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC" ; 7 | 8 | export const DAI_ADDR = "0xad6d458402f60fd3bd25163575031acdce07538d" ; 9 | 10 | export const BLOCK_CONFIRMATION_THRESHOLD = 1; -------------------------------------------------------------------------------- /src/redux/reducers/stake.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import ActionTypes from "../actions/actionTypes" ; 5 | 6 | const INITIAL_STATE = { 7 | tokenStakeInfoList : [] 8 | } 9 | 10 | export default (state=INITIAL_STATE , action) => { 11 | switch(action.type) { 12 | case ActionTypes.GetTokenStakeInfoList : 13 | return ({ 14 | ...state , 15 | tokenStakeInfoList : action.payload 16 | }) 17 | default : 18 | return state ; 19 | } 20 | } -------------------------------------------------------------------------------- /src/redux/reducers/wallet.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | import ActionTypes from '../actions/actionTypes' ; 6 | 7 | const INITIAL_STATE = { 8 | isConnected : false , 9 | address : '' , 10 | balance : 0 , 11 | } 12 | 13 | export default (state=INITIAL_STATE , action={}) => { 14 | switch(action.type) { 15 | case ActionTypes.SetWalletAddress : 16 | return ({ 17 | ...state , 18 | address : action.payload , 19 | }) 20 | default : 21 | return state ; 22 | } 23 | } -------------------------------------------------------------------------------- /src/static/tokensinfo/avatar/dash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/static/tokensinfo/avatar/ethereum.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/hooks/useTokenContract.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { useMemo } from "react"; 4 | import { useWeb3React } from "@web3-react/core"; 5 | 6 | import { ethers } from "ethers"; 7 | 8 | import TOKEN_ABI from '../constants/abis/token.json'; 9 | 10 | export const useTokenContract = (TOKEN_ADDR , SYMBOL) => { 11 | 12 | const { library, active } = useWeb3React(); 13 | 14 | return useMemo(() => { 15 | if (!active || SYMBOL === "ETH") { 16 | return null; 17 | } 18 | 19 | return new ethers.Contract(TOKEN_ADDR, TOKEN_ABI, library.getSigner()); 20 | }) 21 | } -------------------------------------------------------------------------------- /src/hooks/useCaladexContract.js: -------------------------------------------------------------------------------- 1 | 2 | import { useMemo } from "react"; 3 | import { useWeb3React } from "@web3-react/core"; 4 | 5 | import { ethers } from "ethers"; 6 | 7 | import CALADEX_ABI from '../constants/abis/caladex.json'; 8 | import { CALADEX_ADDR } from '../constants' ; 9 | 10 | export const useCaladexContract = () => { 11 | const { library, active } = useWeb3React(); 12 | 13 | return useMemo(() => { 14 | if (!active) { 15 | return null; 16 | } 17 | 18 | return new ethers.Contract(CALADEX_ADDR, CALADEX_ABI, library.getSigner()); 19 | }) 20 | } -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.gif", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/static/tokensinfo/history.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Time" : "014400" , 4 | "Price" : "5000.00" , 5 | "Amount" : "72.000000" 6 | }, 7 | { 8 | "Time" : "014400" , 9 | "Price" : "5000.00" , 10 | "Amount" : "72.000000" 11 | }, 12 | { 13 | "Time" : "014400" , 14 | "Price" : "5000.00" , 15 | "Amount" : "72.000000" 16 | }, 17 | { 18 | "Time" : "014400" , 19 | "Price" : "5000.00" , 20 | "Amount" : "72.000000" 21 | }, 22 | { 23 | "Time" : "014400" , 24 | "Price" : "5000.00" , 25 | "Amount" : "72.000000" 26 | } 27 | ] -------------------------------------------------------------------------------- /src/redux/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' ; 2 | 3 | import authReducer from './auth' ; 4 | import walletReducer from './wallet' ; 5 | import cryptoReducer from './crypto' ; 6 | import tokenReducer from './token' ; 7 | import tradeReducer from './trade' ; 8 | import stakeReducer from './stake' ; 9 | import orderReducer from './order' ; 10 | import balanceReducer from './balance' ; 11 | 12 | export default combineReducers({ 13 | auth : authReducer , 14 | wallet : walletReducer , 15 | crypto : cryptoReducer , 16 | token : tokenReducer , 17 | trade : tradeReducer , 18 | stake : stakeReducer , 19 | order : orderReducer, 20 | balance : balanceReducer, 21 | }); -------------------------------------------------------------------------------- /src/redux/reducers/balance.js: -------------------------------------------------------------------------------- 1 | import ActionTypes from "../actions/actionTypes"; 2 | 3 | const INITIAL_STATE = { 4 | depositStatusObject : {} , 5 | withdrawStatusObject : {} 6 | } 7 | 8 | export default (state=INITIAL_STATE , action) => { 9 | switch(action.type) { 10 | case ActionTypes.UpdateDepositStatus : 11 | return ({ 12 | ...state , 13 | depositStatusObject : action.payload 14 | }) 15 | case ActionTypes.UpdateWithdrawStatus : 16 | return ({ 17 | ...state, 18 | withdrawStatusObject : action.payload 19 | }) 20 | default : 21 | return state ; 22 | } 23 | } -------------------------------------------------------------------------------- /src/components/New folder (2)/Balances/EmptyWidget/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { 6 | Card, 7 | CardContent, 8 | } from '@mui/material'; 9 | 10 | import { makeStyles } from '@mui/styles'; 11 | 12 | const useStyles = makeStyles((theme) => ({ 13 | root : { 14 | border : "1px solid lightgray" 15 | } 16 | })); 17 | const EmptyWidget = () => { 18 | const classes = useStyles() ; 19 | 20 | return ( 21 |
22 | 23 | 24 | 25 | 26 | 27 |
28 | ) 29 | } 30 | 31 | export default EmptyWidget ; -------------------------------------------------------------------------------- /src/pages/Orders/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { makeStyles } from '@mui/styles'; 6 | 7 | import OrdersHistory from '../../components/Orders/OrdersHistory' ; 8 | 9 | const useStyles = makeStyles((theme) => ({ 10 | root : { 11 | marginTop : theme.spacing(4), 12 | marginLeft : "7%", 13 | marginRight : "7%" , 14 | height : "calc(100vh - 126px)", 15 | }, 16 | })); 17 | 18 | const Orders = () => { 19 | 20 | const classes = useStyles() ; 21 | 22 | return ( 23 | <> 24 |
25 | 26 |
27 | 28 | ) 29 | } 30 | 31 | export default Orders ; -------------------------------------------------------------------------------- /src/static/tokensinfo/avatar/litecoin.svg: -------------------------------------------------------------------------------- 1 | Litecoin -------------------------------------------------------------------------------- /src/static/tokensinfo/quotesOne.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Price" : "0.014400" , 4 | "Amount" : "5000.00", 5 | "Total" : "72.000000" 6 | }, 7 | { 8 | "Price" : "0.014400" , 9 | "Amount" : "5000.00", 10 | "Total" : "72.000000" 11 | }, 12 | { 13 | "Price" : "0.014400" , 14 | "Amount" : "5000.00", 15 | "Total" : "72.000000" 16 | }, 17 | { 18 | "Price" : "0.014400" , 19 | "Amount" : "5000.00", 20 | "Total" : "72.000000" 21 | }, 22 | { 23 | "Price" : "0.014400" , 24 | "Amount" : "5000.00", 25 | "Total" : "72.000000" 26 | }, 27 | { 28 | "Price" : "0.014400" , 29 | "Amount" : "5000.00", 30 | "Total" : "72.000000" 31 | } 32 | ] -------------------------------------------------------------------------------- /src/static/tokensinfo/quotesTwo.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Price" : "0.014400" , 4 | "Amount" : "5000.00", 5 | "Total" : "72.000000" 6 | }, 7 | { 8 | "Price" : "0.014400" , 9 | "Amount" : "5000.00", 10 | "Total" : "72.000000" 11 | }, 12 | { 13 | "Price" : "0.014400" , 14 | "Amount" : "5000.00", 15 | "Total" : "72.000000" 16 | }, 17 | { 18 | "Price" : "0.014400" , 19 | "Amount" : "5000.00", 20 | "Total" : "72.000000" 21 | }, 22 | { 23 | "Price" : "0.014400" , 24 | "Amount" : "5000.00", 25 | "Total" : "72.000000" 26 | }, 27 | { 28 | "Price" : "0.014400" , 29 | "Amount" : "5000.00", 30 | "Total" : "72.000000" 31 | } 32 | ] -------------------------------------------------------------------------------- /src/components/Exchange/OrderBook/PriceMean/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | 7 | import { 8 | Box 9 | } from '@mui/material' ; 10 | 11 | 12 | import { makeStyles } from '@mui/styles'; 13 | 14 | const useStyles = makeStyles((theme) => ({ 15 | root : { 16 | display : "flex" , 17 | justifyContent : "center" , 18 | alignItems : "center" , 19 | height : "33px" , 20 | fontSize : "14px" , 21 | fontWeight : "bold" , 22 | color : props => `${props.color}` 23 | } 24 | })); 25 | 26 | const PriceMean = () => { 27 | 28 | const classes = useStyles({color : "#c74a4d"}) ; 29 | 30 | return ( 31 | 32 | 36605.21578968 USD 33 | 34 | ) 35 | } 36 | 37 | export default PriceMean ; -------------------------------------------------------------------------------- /src/constants/abis/greeter.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "inputs": [ 4 | { 5 | "internalType": "string", 6 | "name": "_greeting", 7 | "type": "string" 8 | } 9 | ], 10 | "stateMutability": "nonpayable", 11 | "type": "constructor" 12 | }, 13 | { 14 | "inputs": [], 15 | "name": "greet", 16 | "outputs": [ 17 | { 18 | "internalType": "string", 19 | "name": "", 20 | "type": "string" 21 | } 22 | ], 23 | "stateMutability": "view", 24 | "type": "function" 25 | }, 26 | { 27 | "inputs": [ 28 | { 29 | "internalType": "string", 30 | "name": "_greeting", 31 | "type": "string" 32 | } 33 | ], 34 | "name": "setGreeting", 35 | "outputs": [], 36 | "stateMutability": "nonpayable", 37 | "type": "function" 38 | } 39 | ] -------------------------------------------------------------------------------- /src/redux/reducers/order.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import ActionTypes from '../actions/actionTypes' ; 4 | 5 | const INITIAL_STATE ={ 6 | orderHistoryList : [], 7 | orderTradeHistoryList : [] , 8 | exchangeOrderList : [] 9 | } 10 | 11 | export default (state=INITIAL_STATE , action) => { 12 | switch(action.type) { 13 | case ActionTypes.GetOrderHistory : 14 | return ({ 15 | ...state , 16 | orderHistoryList : action.payload 17 | }) 18 | case ActionTypes.GetOrderTradeHistory : 19 | return ({ 20 | ...state , 21 | orderTradeHistoryList : action.payload 22 | }) 23 | case ActionTypes.GetExchangeOrderList : 24 | return ({ 25 | ...state , 26 | exchangeOrderList : action.payload 27 | }) 28 | default : 29 | return state; 30 | } 31 | } -------------------------------------------------------------------------------- /src/redux/actions/wallet.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import ActionTypes from "./actionTypes" 4 | import { setItem } from '../../utils/helper' 5 | import Web3 from 'web3' ; 6 | 7 | export const SetWalletAddress = ( address ) => async dispatch => { 8 | try { 9 | 10 | setItem("address" , address) ; 11 | 12 | dispatch({ 13 | type : ActionTypes.SetWalletAddress , 14 | payload : address , 15 | }); 16 | } 17 | catch(err) { 18 | console.log(err) ; 19 | } 20 | } 21 | 22 | export const GetWalletBalance = (address) => async dispatch => { 23 | try { 24 | 25 | // const web3 = new Web3('http://localhost:8545') ; 26 | 27 | // if(web3) web3.eth.getBalance( address, (err,bal) => { 28 | // // console.log('account 1 balance :' , web3.utils.fromWei(bal, 'ether')) 29 | // }) 30 | } 31 | catch(err){ 32 | console.log(err) ; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/redux/reducers/crypto.js: -------------------------------------------------------------------------------- 1 | import ActionTypes from "../actions/actionTypes"; 2 | 3 | const INITIAL_STATE = { 4 | cryptoInfoList : [] , 5 | cryptoExchangeRateList : [] , 6 | cryptoBalanceList : [] 7 | } 8 | 9 | export default (state = INITIAL_STATE , action ) => { 10 | switch(action.type) { 11 | case ActionTypes.GetAllCryptoInfo : 12 | return ({ 13 | ...state , 14 | cryptoInfoList : action.payload 15 | }) ; 16 | case ActionTypes.GetExchageRateToUSD : 17 | return ({ 18 | ...state , 19 | cryptoExchangeRateList : action.payload 20 | }) 21 | case ActionTypes.GetWalletBalance : 22 | // console.log(action.payload) ; 23 | return ({ 24 | ...state , 25 | cryptoBalanceList : action.payload 26 | }) 27 | default : 28 | return state ; 29 | } 30 | } -------------------------------------------------------------------------------- /src/components/Exchange/TokenPriceBar/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { 4 | Card , 5 | CardContent , 6 | 7 | } from '@mui/material' ; 8 | 9 | import { TickerTape } from 'react-ts-tradingview-widgets' ; 10 | 11 | import { makeStyles } from '@mui/styles'; 12 | 13 | const useStyles = makeStyles((theme) => ({ 14 | root : { 15 | marginTop : theme.spacing(5) , 16 | boxShadow: "3px -4px 7px 0px lightblue !important", 17 | border : "1px solid lightblue !important" , 18 | "& .js-copyright-label" : { 19 | visibility : "hidden !important", 20 | } 21 | } , 22 | })); 23 | 24 | const TokenPriceTable = () => { 25 | const classes = useStyles() ; 26 | 27 | return ( 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | export default TokenPriceTable ; -------------------------------------------------------------------------------- /src/components/Common/TokenSearch/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React , { useEffect } from 'react' ; 3 | 4 | import { 5 | Box 6 | } from '@mui/material' ; 7 | 8 | import SearchIcon from '@mui/icons-material/Search'; 9 | 10 | const TokenSearch = (props) => { 11 | 12 | const { searchForMoreTokens , searchCtrl} = props ; 13 | 14 | return ( 15 | <> 16 | 17 | 18 | 19 | 20 | 21 | 22 | searchForMoreTokens(e.target.value)}/> 23 | 24 | 25 | ) 26 | } 27 | 28 | export default TokenSearch ; -------------------------------------------------------------------------------- /src/components/Exchange/TradingView/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { AdvancedRealTimeChart } from 'react-ts-tradingview-widgets' ; 6 | 7 | import { 8 | Box 9 | } from '@mui/material' ; 10 | 11 | import { makeStyles } from '@mui/styles'; 12 | 13 | const useStyles = makeStyles((theme) => ({ 14 | root : { 15 | width : "100%" , 16 | borderBottom : "1px solid gray" , 17 | paddingBottom : "1px" , 18 | height : "calc(50vh - 48px)" , 19 | minHeight : "calc(50vh - 48px)" 20 | } , 21 | })); 22 | 23 | const TradingView = () => { 24 | 25 | const classes = useStyles() ; 26 | 27 | return ( 28 | 29 | 36 | 37 | ) 38 | } 39 | 40 | export default TradingView ; -------------------------------------------------------------------------------- /src/components/Orders/CustomDatePicker/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import { makeStyles } from '@mui/styles'; 7 | 8 | const useStyles = makeStyles((theme) => ({ 9 | root : { 10 | 11 | } 12 | })); 13 | 14 | const CustomDatePicker = (props) => { 15 | 16 | const classes = useStyles() ; 17 | 18 | const { 19 | id , 20 | setStartTime , 21 | setEndTime 22 | } = props ; 23 | 24 | const handleDateTime = (e) => { 25 | if(id === 1) { 26 | setStartTime(e.target.value) ; 27 | return ; 28 | } 29 | if(id === 2) { 30 | setEndTime(e.target.value) ; 31 | return ; 32 | } 33 | } 34 | 35 | return ( 36 |
37 | handleDateTime(e)}/> 38 |
39 | ) 40 | } 41 | 42 | export default CustomDatePicker ; -------------------------------------------------------------------------------- /src/redux/reducers/trade.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import ActionTypes from '../actions/actionTypes' ; 5 | 6 | const INITIAL_STATE = { 7 | tradeInfo : {} , 8 | orderSellList : [] , 9 | orderBuyList : [] , 10 | orderTradeList : [] 11 | } 12 | 13 | export default (state=INITIAL_STATE , action ) => { 14 | switch(action.type) { 15 | case ActionTypes.GetTradeHistory : 16 | return ({ 17 | ...state , 18 | tradeInfo : action.payload 19 | }) 20 | case ActionTypes.GetTokenOrderSellList : 21 | return ({ 22 | ...state , 23 | orderSellList : action.payload 24 | }) 25 | case ActionTypes.GetTokenOrderBuyList : 26 | return ({ 27 | ...state , 28 | orderBuyList : action.payload 29 | }) 30 | case ActionTypes.GetTokenTradeList : 31 | return ({ 32 | ...state , 33 | orderTradeList : action.payload 34 | }) 35 | default : 36 | return state; 37 | } 38 | } -------------------------------------------------------------------------------- /src/static/tokensinfo/baseinfo.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "Name" : "Black Dragon" , 4 | "Symbol" : "BDT" , 5 | "Pair" : "ETH" , 6 | "Address" : "0x4Efe8665e564bF454cCF5C90Ee16817F7485d5Cf", 7 | "Logo" : "https://s2.coinmarketcap.com/static/img/coins/64x64/7763.png" 8 | }, 9 | { 10 | "Name" : "Nexo" , 11 | "Symbol" : "NEXO" , 12 | "Pair" : "ETH" , 13 | "Address" : "0xb62132e35a6c13ee1ee0f84dc5d40bad8d815206", 14 | "Logo" : "https://s2.coinmarketcap.com/static/img/coins/64x64/2694.png" 15 | }, 16 | { 17 | "Name" : "Harmony" , 18 | "Symbol" : "ONE" , 19 | "Pair" : "USDT" , 20 | "Address" : "0x4Efe8665e564bF454cCF5C90Ee16817F7485d5Cf", 21 | "Logo" : "https://s2.coinmarketcap.com/static/img/coins/64x64/3945.png" 22 | }, 23 | { 24 | "Name" : "The Sandbox" , 25 | "Symbol" : "SAND" , 26 | "Pair" : "ETH" , 27 | "Address" : "0x3845badAde8e6dFF049820680d1F14bD3903a5d0", 28 | "Logo" : "https://s2.coinmarketcap.com/static/img/coins/64x64/6210.png" 29 | } 30 | ] -------------------------------------------------------------------------------- /src/components/Exchange/Trade/TradeSelectBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | import React from 'react' ; 6 | 7 | import { 8 | Box 9 | } from '@mui/material' ; 10 | 11 | 12 | import { makeStyles } from '@mui/styles'; 13 | 14 | const useStyles = makeStyles(() => ({ 15 | root : { 16 | borderBottom : "2px solid lightgray" , 17 | height : "40px" , 18 | display : "flex" , 19 | alignItems : "flex-end" , 20 | paddingLeft : "20px" , 21 | fontWeight : "bold" 22 | }, 23 | token :{ 24 | fontSize : "13px", 25 | paddingLeft : "15px" 26 | } 27 | })); 28 | 29 | const TradeSelectBox = (props) => { 30 | 31 | const { tradeToken } = props ; 32 | 33 | const classes = useStyles() ; 34 | 35 | return ( 36 | 37 | Market Trade 38 | 39 | ({ tradeToken ? ( tradeToken.symbol + " / " + tradeToken.pair_type ) : "..."}) 40 | 41 | 42 | ) 43 | } 44 | 45 | 46 | export default TradeSelectBox ; -------------------------------------------------------------------------------- /src/static/tokensinfo/avatar/bitcoin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Exchange/RecentOrder/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import RecentSelectBox from './RecentSelectBox' ; 7 | import RecentOrderList from './RecentOrderList' ; 8 | 9 | import { 10 | Box, 11 | Grid 12 | } from '@mui/material' ; 13 | 14 | import { makeStyles } from '@mui/styles'; 15 | 16 | const useStyles = makeStyles(() => ({ 17 | root : { 18 | maxHeight : "calc(50vh - 115px)" , 19 | height : "calc(50vh - 115px)" , 20 | } 21 | })); 22 | 23 | const RecentOrder = (props) => { 24 | 25 | const classes = useStyles() ; 26 | 27 | const { 28 | tradeToken 29 | } = props ; 30 | 31 | return ( 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | ) 45 | } 46 | 47 | export default RecentOrder ; -------------------------------------------------------------------------------- /src/components/Exchange/TradingWidget/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import {AdvancedRealTimeChart , } from 'react-ts-tradingview-widgets' ; 6 | 7 | import { 8 | Card , 9 | CardContent 10 | } from '@mui/material' ; 11 | 12 | import { makeStyles } from '@mui/styles'; 13 | 14 | const useStyles = makeStyles((theme) => ({ 15 | root : { 16 | marginTop : theme.spacing(3) , 17 | boxShadow: "3px -4px 7px 0px lightblue !important", 18 | border : "1px solid lightblue" , 19 | height : "415px" , 20 | } , 21 | })); 22 | 23 | const TradingWidget = () => { 24 | 25 | const classes = useStyles() ; 26 | 27 | return ( 28 | <> 29 | 30 | 31 | 37 | 38 | 39 | 40 | 41 | ) 42 | } 43 | 44 | export default TradingWidget ; -------------------------------------------------------------------------------- /src/pages/TokenInfoBase/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' ; 3 | 4 | 5 | import { makeStyles } from '@mui/styles'; 6 | import TokenInfoBaseTable from '../../components/TokenInfoBase/TokenInfoBaseTable'; 7 | 8 | import { 9 | CardContent , 10 | Card 11 | } from '@mui/material'; 12 | 13 | const useStyles = makeStyles((theme) => ({ 14 | root : { 15 | marginTop : theme.spacing(10) , 16 | minHeight : "calc(100vh - 124px)" , 17 | }, 18 | card : { 19 | boxShadow: "3px -4px 7px 0px lightblue !important", 20 | border : "1px solid lightblue" , 21 | marginLeft : theme.spacing(2) + " !important" , 22 | marginRight : theme.spacing(2) + " !important" , 23 | marginBottom : "0px !important" 24 | } 25 | })); 26 | const TokenInfoBase = () => { 27 | 28 | const classes = useStyles() ; 29 | 30 | return ( 31 |
32 | 33 | 34 | 35 | 36 | 37 |
38 | ) 39 | } 40 | 41 | export default TokenInfoBase ; -------------------------------------------------------------------------------- /src/components/Exchange/Marketing/BuyAndSell/SelectPairToken/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | import React from 'react' ; 6 | 7 | import { 8 | Box, 9 | CircularProgress , 10 | } from '@mui/material' ; 11 | 12 | import { makeStyles } from '@mui/styles'; 13 | 14 | const useStyles = makeStyles((theme) => ({ 15 | root : { 16 | marginTop : "10px", 17 | padding : "20px", 18 | textAlign : "center" , 19 | "& .MuiGrid-item" : { 20 | marginBottom : "15px" 21 | }, 22 | "& .MuiButton-root" : { 23 | borderRadius : "15px", 24 | marginLeft : "5px", 25 | marginRight : "5px" 26 | } 27 | }, 28 | btGp : { 29 | "& .MuiButton-root" : { 30 | borderRadius : "5px", 31 | marginLeft : "15px", 32 | marginRight : "15px" , 33 | textTransform : "capitalize" 34 | } 35 | } 36 | })); 37 | 38 | const SelectPairToken = () => { 39 | 40 | const classes = useStyles() ; 41 | 42 | return ( 43 | 44 | 45 | 46 | ) 47 | } 48 | export default SelectPairToken; -------------------------------------------------------------------------------- /src/components/Exchange/Trade/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import TradeSelectBox from './TradeSelectBox'; 6 | import MarketTradeList from './MarketTradeList'; 7 | 8 | import { 9 | Box , 10 | Grid 11 | } from '@mui/material' ; 12 | 13 | import { makeStyles } from '@mui/styles'; 14 | 15 | const useStyles = makeStyles(() => ({ 16 | root : { 17 | height : "calc(50vh - 48px)" , 18 | borderLeft : "1px solid gray" , 19 | borderBottom : "1px solid gray" 20 | } 21 | })); 22 | 23 | const Trade = (props) => { 24 | 25 | const { tradeToken } = props ; 26 | 27 | const classes = useStyles() ; 28 | 29 | return ( 30 | 31 | 32 | 33 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | ) 45 | } 46 | 47 | 48 | export default Trade ; -------------------------------------------------------------------------------- /src/pages/Balances/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useEffect } from 'react' ; 4 | 5 | import { makeStyles } from '@mui/styles'; 6 | 7 | import { 8 | Grid , 9 | useMediaQuery 10 | } from '@mui/material'; 11 | 12 | import AddressWidget from '../../components/Balances/AddressWidget'; 13 | import WalletManagement from '../../components/Balances/WalletManagement' ; 14 | 15 | 16 | const useStyles = makeStyles((theme) => ({ 17 | root : { 18 | marginTop : "50px" , 19 | marginLeft : "7%", 20 | marginRight : "7%" , 21 | minHeight : "calc(100vh - 124px)" , 22 | }, 23 | })); 24 | 25 | const Balances = () => { 26 | 27 | const classes = useStyles() ; 28 | 29 | const isXs = useMediaQuery("(min-width: 1285px)") ; 30 | 31 | return ( 32 | <> 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | ) 45 | } 46 | 47 | export default Balances ; -------------------------------------------------------------------------------- /src/utils/Language.js: -------------------------------------------------------------------------------- 1 | import React, { useState, createContext , useContext } from 'react'; 2 | 3 | import { languageOptions, dictionaryList } from '../static/languages'; 4 | 5 | // create the language context with default selected language 6 | export const LanguageContext = createContext({ 7 | userLanguage: 'en', 8 | dictionary: dictionaryList.en 9 | }); 10 | 11 | // it provides the language context to app 12 | export function LanguageProvider({ children }) { 13 | 14 | const [userLanguage, setUserLanguage] = useState('en'); 15 | 16 | const provider = { 17 | 18 | userLanguage, 19 | 20 | dictionary: dictionaryList[userLanguage], 21 | 22 | userLanguageChange : selected => { 23 | 24 | const newLanguage = languageOptions[selected] ? selected : 'en' 25 | setUserLanguage(newLanguage); 26 | window.localStorage.setItem('rcml-lang', newLanguage); 27 | 28 | } 29 | 30 | }; 31 | 32 | return ( 33 | 34 | {children} 35 | 36 | ); 37 | }; 38 | 39 | // get text according to id & current language 40 | export function Text({ tid }) { 41 | const languageContext = useContext(LanguageContext); 42 | 43 | return languageContext.dictionary[tid] || tid; 44 | }; 45 | -------------------------------------------------------------------------------- /src/components/Routes.js: -------------------------------------------------------------------------------- 1 | import React, { memo } from "react"; 2 | // import PropTypes from "prop-types"; 3 | 4 | import { Routes , Route } from "react-router-dom"; 5 | 6 | import ProtectedRoute from "../utils/ProtectedRoute"; 7 | 8 | // Pages 9 | import Landing from "../pages/Landing" ; 10 | import Exchange from "../pages/Exchange" ; 11 | import TokenInfoBase from '../pages/TokenInfoBase' ; 12 | import EarnStaking from '../pages/EarnStaking' ; 13 | import Balances from "../pages/Balances"; 14 | import Orders from '../pages/Orders' ; 15 | 16 | const Routing = () => { 17 | // const { selectLanding } = props; 18 | 19 | return ( 20 | 21 | } /> 22 | }> 23 | } /> 24 | } /> 25 | } /> 26 | } /> 27 | } /> 28 | 29 | 30 | ); 31 | } 32 | 33 | Routing.propTypes = { 34 | // selectLanding: PropTypes.func.isRequired, 35 | }; 36 | 37 | export default memo(Routing); 38 | -------------------------------------------------------------------------------- /src/pages/EarnStaking/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { useEffect , useState} from 'react' ; 3 | 4 | import Title from '../../components/Common/Title'; 5 | import CalaDexTradingTickerTape from '../../components/Common/CalaDexTradingTickerTape' ; 6 | 7 | import StakingTable from '../../components/EarnStaking/StakingTable' ; 8 | import { TickerTape } from 'react-ts-tradingview-widgets'; 9 | 10 | import { makeStyles } from '@mui/styles'; 11 | import { getItem } from '../../utils/helper'; 12 | 13 | const useStyles = makeStyles(() => ({ 14 | root : { 15 | minHeight : "calc( 100vh - 125px )" , 16 | } 17 | })); 18 | const EarnStaking = () => { 19 | 20 | const classes = useStyles() ; 21 | 22 | return ( 23 |
24 | 30 | 31 | <CalaDexTradingTickerTape /> 32 | 33 | {/* <TickerTape /> */} 34 | 35 | <StakingTable /> 36 | </div> 37 | ) 38 | } 39 | 40 | export default EarnStaking ; -------------------------------------------------------------------------------- /src/redux/reducers/token.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import ActionTypes from '../actions/actionTypes' ; 5 | 6 | const INITIAL_STATE = { 7 | message : "IDLE" , 8 | tokenInfoList : [] , 9 | tokenLiquidityList : [] , 10 | tokenBalanceInfo : [] 11 | } 12 | 13 | export default (state=INITIAL_STATE , action) => { 14 | switch(action.type){ 15 | case ActionTypes.AddTokenSuccess : 16 | return ({ 17 | ...state , 18 | message : "SUCCESS" 19 | }) 20 | case ActionTypes.AddTokenError : 21 | return ({ 22 | ...state, 23 | message : "ERROR" 24 | }) 25 | case ActionTypes.ConfirmAddToken : 26 | return ({ 27 | ...state , 28 | message : "IDLE" 29 | }) 30 | case ActionTypes.GetTokenInfoList : 31 | return ({ 32 | ...state , 33 | tokenInfoList : action.payload 34 | }) 35 | case ActionTypes.GetTokenLiquidityList : 36 | return ({ 37 | ...state , 38 | tokenLiquidityList : action.payload 39 | }) 40 | case ActionTypes.GetTokenBalanceInfo : 41 | return ({ 42 | ...state, 43 | tokenBalanceInfo : action.payload 44 | }); 45 | default : 46 | return state ; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/components/Main.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useEffect , useRef } from 'react' ; 4 | 5 | import { useNavigate } from 'react-router-dom' ; 6 | 7 | import Header from './Layouts/Header'; 8 | import Footer from './Layouts/Footer' ; 9 | 10 | import Routing from './Routes'; 11 | 12 | import { makeStyles } from '@mui/styles'; 13 | 14 | import { getItem , setItem } from '../utils/helper'; 15 | 16 | const useStyles = makeStyles((theme) => ({ 17 | root : { 18 | "&::-webkit-scrollbar-thumb" : { 19 | backgroundColor : "gray" , 20 | borderRadius : "5px" 21 | } , 22 | "&::-webkit-scrollbar-track" : { 23 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 24 | }, 25 | "&::-webkit-scrollbar":{ 26 | width : "0.625rem" 27 | } , 28 | maxHeight : "100vh" , 29 | overflowY : "scroll" , 30 | overflowX : "auto" , 31 | padding : "0px !important" , 32 | margin : "0px important" 33 | } , 34 | })) 35 | 36 | const Main = () => { 37 | const classes = useStyles() ; 38 | const scrollTop = useRef({ 39 | current : { 40 | innerText : "efefef" 41 | } 42 | }) ; 43 | 44 | return ( 45 | <div className={classes.root} ref={scrollTop}> 46 | <Header scrollTop={scrollTop}/> 47 | <Routing /> 48 | <Footer /> 49 | </div> 50 | ) 51 | } 52 | export default Main ; -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | 4 | // Suspense 5 | import { Fragment , Suspense , lazy } from 'react' ; 6 | 7 | // Theme 8 | import { ThemeProvider , CssBaseline } from '@mui/material'; 9 | import theme from './utils/theme' ; 10 | 11 | // Global Style 12 | // import GlobalStyles from "./utils/globalstyles"; 13 | 14 | // Language 15 | import { LanguageProvider } from "./utils/Language"; 16 | 17 | // Pace 18 | // import Pace from "./utils/Pace"; 19 | 20 | // Store 21 | import { Provider } from 'react-redux' ; 22 | import store from './redux'; 23 | 24 | // Router 25 | import { BrowserRouter , Routes , Route } from 'react-router-dom'; 26 | 27 | import "bootstrap/dist/css/bootstrap.min.css" ; 28 | import "bootstrap/dist/js/bootstrap.min.js" ; 29 | 30 | const MainComponent = lazy(() => import('./components/Main')) ; 31 | 32 | 33 | const App = () => { 34 | return ( 35 | <BrowserRouter> 36 | <LanguageProvider> 37 | <Provider store={store}> 38 | <ThemeProvider theme={theme}> 39 | <CssBaseline /> 40 | {/* <GlobalStyles /> */} 41 | {/* <Pace color={theme.palette.primary.light} /> */} 42 | <Suspense fallback={<Fragment />} > 43 | <Routes> 44 | <Route path="*" element={<MainComponent />} /> 45 | </Routes> 46 | </Suspense> 47 | </ThemeProvider> 48 | </Provider> 49 | </LanguageProvider> 50 | </BrowserRouter> 51 | ); 52 | } 53 | 54 | export default App; 55 | -------------------------------------------------------------------------------- /src/components/EarnStaking/StakingDialog/CheckButton.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import CheckIcon from '@mui/icons-material/Check'; 7 | import { makeStyles } from '@mui/styles'; 8 | 9 | const useStyles = makeStyles(() => ({ 10 | root :{ 11 | position : 'absolute' , 12 | visibility : props => props.visible ? "visible" : "hidden" , 13 | width : props => props.width , 14 | height : props => props.height, 15 | right : props => props.right , 16 | top : props => props.top , 17 | background : props => `linear-gradient(to top right, transparent 50%, ${props.color} 0)` , 18 | borderRadius : props => props.borderRadius , 19 | "& .MuiSvgIcon-root" : { 20 | width: "50%", 21 | height: "50%" , 22 | fontWeight : "bold", 23 | }, 24 | }, 25 | check : { 26 | color : "white" , 27 | marginBottom : "50%" , 28 | marginLeft: "50%" , 29 | display : "flex" , 30 | alignItems : "center" , 31 | justifyContent : "center" , 32 | fontSize : "18px !important" , 33 | } 34 | })); 35 | const CheckButton = (props) => { 36 | 37 | const { width , height , right , top , color , borderRadius} = props ; 38 | 39 | const classes = useStyles(props) ; 40 | 41 | return ( 42 | <div className={classes.root}> 43 | <CheckIcon className={classes.check}/> 44 | </div> 45 | ) 46 | } 47 | 48 | 49 | export default CheckButton ; -------------------------------------------------------------------------------- /src/components/New folder (2)/EarnStaking/StakingDialog/CheckButton.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import CheckIcon from '@mui/icons-material/Check'; 7 | import { makeStyles } from '@mui/styles'; 8 | 9 | const useStyles = makeStyles(() => ({ 10 | root :{ 11 | position : 'absolute' , 12 | visibility : props => props.visible ? "visible" : "hidden" , 13 | width : props => props.width , 14 | height : props => props.height, 15 | right : props => props.right , 16 | top : props => props.top , 17 | background : props => `linear-gradient(to top right, transparent 50%, ${props.color} 0)` , 18 | borderRadius : props => props.borderRadius , 19 | "& .MuiSvgIcon-root" : { 20 | width: "50%", 21 | height: "50%" , 22 | fontWeight : "bold", 23 | }, 24 | }, 25 | check : { 26 | color : "white" , 27 | marginBottom : "50%" , 28 | marginLeft: "50%" , 29 | display : "flex" , 30 | alignItems : "center" , 31 | justifyContent : "center" , 32 | fontSize : "18px !important" , 33 | } 34 | })); 35 | const CheckButton = (props) => { 36 | 37 | const { width , height , right , top , color , borderRadius} = props ; 38 | 39 | const classes = useStyles(props) ; 40 | 41 | return ( 42 | <div className={classes.root}> 43 | <CheckIcon className={classes.check}/> 44 | </div> 45 | ) 46 | } 47 | 48 | 49 | export default CheckButton ; -------------------------------------------------------------------------------- /src/redux/actions/actionTypes.js: -------------------------------------------------------------------------------- 1 | 2 | const ActionTypes = { 3 | SignUpUser : "SignUpUser" , 4 | 5 | SetWalletAddress : "SetWalletAddress" , 6 | GetWalletBalance : "GetWalletBalance" , 7 | 8 | // Landing Page's TokenTable 9 | GetTokenLiquidityList : "GetTokenLiquidityList" , 10 | GetTradeHistory : "GetTradeHistory" , 11 | 12 | 13 | // Balances Page 's WalletMangement 14 | GetExchageRateToUSD : "GetExchageRateToUSD", 15 | GetTokenBalanceInfo : "GetTokenBalanceInfo" , 16 | SetTokenBalance : "SetTokenBalance" , 17 | UpdateDepositStatus : "UpdateDepositStatus" , 18 | UpdateWithdrawStatus : "UpdateWithdrawStatus" , 19 | 20 | 21 | //Token Listing Page 22 | AddTokenSuccess : "AddTokenSuccess" , 23 | AddTokenError : "AddTokenError" , 24 | ConfirmAddToken : "ConfirmAddToken" , 25 | 26 | 27 | 28 | //Token Info Base page 29 | GetTokenInfoList : "GetTokenInfoList" , 30 | 31 | 32 | //Earn Staking Page 33 | GetTokenStakeInfoList : "GetTokenStakeInfoList" , 34 | 35 | 36 | // Exchange Page 37 | GetTokenOrderSellList : "GetTokenOrderSellList" , 38 | GetTokenOrderBuyList : "GetTokenOrderBuyList" , 39 | GetTokenTradeList : "GetTokenTradeList" , 40 | GetExchangeOrderList : "GetExchangeOrderList" , 41 | 42 | OrderLimit : "OrderLimit" , 43 | OrderMarket : "OrderMarket" , 44 | OrderError : "OrderError" , 45 | 46 | // Orders Page 47 | GetOrderHistory : "GetOrderHistory" , 48 | GetOrderTradeHistory : "GetOrderTradeHistory" , 49 | 50 | } 51 | 52 | export default ActionTypes ; -------------------------------------------------------------------------------- /src/components/Exchange/TokenList/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useEffect , useRef } from 'react' ; 4 | 5 | import TokenPairBox from './TokenPairBox'; 6 | import TokenSearchBox from './TokenSearchBox'; 7 | import TokenInfoList from './TokenInfoList'; 8 | 9 | import { 10 | Box , 11 | Grid 12 | } from '@mui/material' ; 13 | 14 | import { makeStyles } from '@mui/styles'; 15 | 16 | const useStyles = makeStyles(() => ({ 17 | root : { 18 | backgroundColor : "white" , 19 | top : 0, 20 | width : '100%' , 21 | height : "calc(100vh - 122px)" , 22 | position : "absolute" , 23 | zIndex : 2000 24 | } 25 | })); 26 | 27 | const TokenList = (props) => { 28 | 29 | const classes = useStyles() ; 30 | 31 | const { 32 | handleChangeTokenId , handleChangeToken, handlePairInfoVisible 33 | } = props ; 34 | 35 | return ( 36 | <Box component={"div"} className={classes.root} > 37 | <Grid container> 38 | <Grid item xs={12}> 39 | <TokenPairBox /> 40 | </Grid> 41 | <Grid item xs={12}> 42 | <TokenSearchBox /> 43 | </Grid> 44 | <Grid item xs={12}> 45 | <TokenInfoList 46 | handleChangeTokenId={handleChangeTokenId} 47 | handleChangeToken={handleChangeToken} 48 | handlePairInfoVisible={handlePairInfoVisible} 49 | /> 50 | </Grid> 51 | </Grid> 52 | </Box> 53 | ) 54 | } 55 | 56 | export default TokenList ; -------------------------------------------------------------------------------- /src/components/Exchange/OrderBook/OrderLableBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React, { useEffect } from 'react' ; 5 | 6 | import { 7 | Grid , 8 | Box 9 | } from '@mui/material' ; 10 | 11 | import { makeStyles } from '@mui/styles'; 12 | 13 | const useStyles = makeStyles((theme) => ({ 14 | root : { 15 | height : "30px", 16 | display : "flex" , 17 | alignItems : "center", 18 | "& .MuiGrid-item" : { 19 | color : theme.palette.primary.main , 20 | textAlign : "center" , 21 | fontSize : "11px" , 22 | fontWeight : "bold" , 23 | textAlign : "right" 24 | } 25 | } 26 | })); 27 | 28 | const OrderLableBox = (props) => { 29 | 30 | const { tradeToken } = props ; 31 | 32 | const classes = useStyles() ; 33 | 34 | useEffect(() => { 35 | 36 | 37 | } , [tradeToken]) ; 38 | return ( 39 | <Box component={"div"} className={classes.root}> 40 | <Grid container> 41 | <Grid item xs={4}> 42 | PRICE({ 43 | tradeToken ? tradeToken.symbol : "..." 44 | }) 45 | </Grid> 46 | <Grid item xs={4}> 47 | AMOUNT({ 48 | tradeToken ? tradeToken.symbol : "..." 49 | }) 50 | </Grid> 51 | <Grid item xs={4}> 52 | TOTAL({ 53 | tradeToken ? tradeToken.pair_type : "..." 54 | }) 55 | </Grid> 56 | </Grid> 57 | </Box> 58 | ) 59 | } 60 | 61 | 62 | export default OrderLableBox ; -------------------------------------------------------------------------------- /src/components/Exchange/Marketing/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useState } from 'react' ; 4 | 5 | import { useWeb3React } from '@web3-react/core'; 6 | 7 | import MarketSelectBox from './MarketSelectBox'; 8 | import BuyAndSell from './BuyAndSell' ; 9 | import WalletConnect from '../WalletConnect'; 10 | 11 | import { 12 | Box 13 | } from '@mui/material' ; 14 | 15 | import { makeStyles } from '@mui/styles'; 16 | 17 | const useStyles = makeStyles((theme) => ({ 18 | root : { 19 | // maxHeight : "calc(50vh - 113.815px)" , 20 | // height : "calc(50vh - 113.815px)" , 21 | } , 22 | })); 23 | 24 | const Marketing = (props) => { 25 | 26 | const classes = useStyles() ; 27 | 28 | const { active } = useWeb3React() ; 29 | 30 | 31 | const { 32 | tradeToken , price , status , handleChangePrice , 33 | methodType , setMethodType 34 | } = props ; 35 | 36 | return ( 37 | <Box component={"div"} className={classes.root}> 38 | <MarketSelectBox 39 | setMethodType={setMethodType} 40 | methodType={methodType} 41 | handleChangePrice={handleChangePrice} 42 | tradeToken={tradeToken} 43 | /> 44 | { 45 | active ? <BuyAndSell 46 | price={price} 47 | tradeToken={tradeToken} 48 | status={status} 49 | handleChangePrice={handleChangePrice} 50 | methodType={methodType} 51 | /> : <WalletConnect 52 | /> 53 | } 54 | 55 | </Box> 56 | ) 57 | } 58 | 59 | export default Marketing ; -------------------------------------------------------------------------------- /src/components/Exchange/OrderBook/OrderSelectBox/OrderTypeBt/Badge.styled.js: -------------------------------------------------------------------------------- 1 | 2 | import { styled } from '@mui/system'; 3 | import BadgeUnstyled from '@mui/base/BadgeUnstyled'; 4 | 5 | const StyledBadge = styled(BadgeUnstyled)` 6 | box-sizing: border-box; 7 | margin: 0; 8 | padding: 0; 9 | color: rgba(0, 0, 0, 0.85); 10 | font-size: 11px; 11 | font-variant: tabular-nums; 12 | list-style: none; 13 | font-feature-settings: 'tnum'; 14 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 15 | 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 16 | 'Segoe UI Symbol'; 17 | position: relative; 18 | display: inline-block; 19 | line-height: 1; 20 | 21 | & .MuiBadge-badge { 22 | visibility : ${props => props.badgeContent === "0" ? "hidden" : "visible"} ; 23 | z-index: 1300; 24 | width: 10px; 25 | height: 10px; 26 | color: #fff; 27 | font-weight: 400; 28 | font-size: 9px; 29 | text-align : center; 30 | white-space: nowrap; 31 | text-align: center; 32 | background: green; 33 | border-radius: 10px; 34 | box-shadow: 0 0 0 1px #fff; 35 | } 36 | 37 | & .MuiBadge-dot { 38 | padding: 0; 39 | z-index: auto; 40 | min-width: 6px; 41 | width: 6px; 42 | height: 6px; 43 | background: #ff4d4f; 44 | border-radius: 100%; 45 | box-shadow: 0 0 0 1px #fff; 46 | } 47 | 48 | & .MuiBadge-anchorOriginTopRight { 49 | position: absolute; 50 | top: 0; 51 | right: 0; 52 | transform: translate(50%, -50%); 53 | transform-origin: 100% 0; 54 | } 55 | 56 | & .MuiSvgIcon-root { 57 | padding : 0px; 58 | color : white; 59 | font-size : 10px; 60 | margin : 0px; 61 | vertical-align : none; 62 | } 63 | `; 64 | 65 | 66 | export default StyledBadge ; -------------------------------------------------------------------------------- /src/components/Exchange/TokenList/TokenPairBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { useState } from 'react' ; 6 | 7 | import StarIcon from '@mui/icons-material/Star'; 8 | 9 | import { 10 | Box , 11 | } from '@mui/material' ; 12 | 13 | import { makeStyles } from '@mui/styles'; 14 | 15 | const useStyles = makeStyles(() => ({ 16 | root : { 17 | boxSizing : "border-box" , 18 | 19 | display:"flex" , 20 | alignItems : "flex-end" , 21 | justifyContent : "space-around", 22 | 23 | borderBottom : "2px solid lightgray" , 24 | 25 | height : "40px" , 26 | 27 | "& div" :{ 28 | cursor : "pointer" , 29 | fontWeight : "bold" , 30 | paddingLeft : "20px" , 31 | paddingRight : "20px" 32 | } 33 | }, 34 | active : { 35 | borderBottom : "1px solid blue" 36 | } 37 | })); 38 | 39 | const TokenPairBox = () => { 40 | 41 | const classes = useStyles() ; 42 | 43 | const [pairType , setPairType] = useState("ETH") ; 44 | 45 | const emitPairType = (pairType) => { 46 | setPairType(pairType) ; 47 | 48 | return ; 49 | } 50 | 51 | return ( 52 | <Box component={"div"} className={classes.root}> 53 | <Box component={"div"}> 54 | <StarIcon /> 55 | </Box> 56 | <Box component={"div"} onClick={() => emitPairType("ETH")} className={pairType === "ETH" ? classes.active : ""}> 57 | ETH 58 | </Box> 59 | <Box component={"div"} onClick={() => emitPairType("USDT")} className={pairType === "USDT" ? classes.active : ""}> 60 | USDT 61 | </Box> 62 | </Box> 63 | ) 64 | } 65 | 66 | export default TokenPairBox ; -------------------------------------------------------------------------------- /src/redux/actions/balance.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import axios from 'axios' ; 5 | import { PRIVATE_CALADEX_API } from '../../static/constants'; 6 | import ActionTypes from './actionTypes' ; 7 | 8 | export const SetTokenBalance = (account , token_id , is_deposit , amount) => async dispatch => { 9 | 10 | try { 11 | let res = await axios.post(`${PRIVATE_CALADEX_API}balance/set` , { 12 | address : account , 13 | token_id : token_id , 14 | is_deposit : is_deposit , 15 | amount : amount 16 | }) ; 17 | 18 | 19 | return ; 20 | } 21 | catch(err) { 22 | console.log(err) ; 23 | } 24 | } 25 | 26 | export const ApproveToken = async (amount , address , symbol ) => { 27 | try { 28 | 29 | let reqBody = { 30 | amount : amount , 31 | symbol : symbol 32 | }; 33 | 34 | if(address !== null) { 35 | reqBody = { 36 | ...reqBody , 37 | address : address , 38 | } 39 | } 40 | 41 | let res = await axios.post(`${PRIVATE_CALADEX_API}balance/withdraw` , reqBody) ; 42 | 43 | if(res.status === 201) { 44 | return "Error" 45 | } 46 | 47 | return "Ok" 48 | } 49 | catch(err) { 50 | console.log(err) ; 51 | return "Error" 52 | } 53 | } 54 | 55 | export const UpdateDepositStatus = (depositStatusObject) => async dispatch => { 56 | return dispatch({ 57 | type : ActionTypes.UpdateDepositStatus , 58 | payload : depositStatusObject 59 | }) 60 | } 61 | 62 | export const UpdateWithdrawStatus = (withdrawStatusObject) => async dispatch => { 63 | return dispatch({ 64 | type : ActionTypes.UpdateWithdrawStatus , 65 | payload : withdrawStatusObject 66 | }) 67 | } -------------------------------------------------------------------------------- /src/components/Exchange/TokenPriceTable/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { 4 | Card , 5 | CardContent , 6 | } from '@mui/material' ; 7 | 8 | // import { CryptoCurrencyMarket } from 'react-ts-tradingview-widgets' ; 9 | 10 | import { makeStyles } from '@mui/styles'; 11 | 12 | const useStyles = makeStyles((theme) => ({ 13 | root : { 14 | marginTop : theme.spacing(5) , 15 | boxShadow: "3px -4px 7px 0px lightblue !important", 16 | border : "1px solid lightblue" , 17 | height : "450px" 18 | } , 19 | crpytoList : { 20 | overflowX : "scroll !important" 21 | } 22 | })); 23 | 24 | 25 | const TokenPriceTable = () => { 26 | const classes = useStyles() ; 27 | 28 | return ( 29 | <Card className={classes.root}> 30 | <CardContent > 31 | {/* <CryptoCurrencyMarket 32 | width="100%" 33 | height={250} 34 | locale='en' 35 | 36 | className={classes.crpytoList} 37 | /> */} 38 | 39 | <iframe src="https://widget.coinlib.io/widget?type=full_v2&theme=light&cnt=9&pref_coin_id=1505&graph=yes" 40 | width="100%" 41 | height="450px" 42 | scrolling="auto" 43 | marginWidth="0" 44 | marginHeight="0" 45 | frameBorder="0" 46 | border="0" 47 | style={{ border:"0px" ,margin:"0px" ,padding:"0px" }} 48 | title="Token Price" 49 | className="lv"> 50 | 51 | </iframe> 52 | </CardContent> 53 | </Card> 54 | 55 | ); 56 | } 57 | 58 | export default TokenPriceTable ; -------------------------------------------------------------------------------- /src/components/Exchange/Marketing/MarketSelectBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import { useState } from 'react' ; 7 | 8 | import { 9 | Box , 10 | Grid , 11 | } from '@mui/material' ; 12 | 13 | import { makeStyles } from '@mui/styles'; 14 | 15 | const useStyles = makeStyles((theme) => ({ 16 | root : { 17 | height : "42px" , 18 | paddingLeft : "20px" , 19 | fontWeight : "bold" , 20 | display : "flex" , 21 | alignItems : "flex-end" , 22 | borderBottom : "2px solid lightgray", 23 | "& .MuiGrid-root" : { 24 | 25 | }, 26 | "& .MuiGrid-item" :{ 27 | textAlign : "center" , 28 | cursor : "grab" 29 | } 30 | } , 31 | active : { 32 | borderBottom : "1px solid blue !important" 33 | } 34 | })); 35 | 36 | const MarketSelectBox = (props) => { 37 | 38 | const classes = useStyles() ; 39 | 40 | const { 41 | handleChangePrice , 42 | setMethodType , 43 | methodType 44 | } = props ; 45 | 46 | const emitChangeMethodType = async (methodType) => { 47 | await handleChangePrice(null) ; 48 | 49 | if(methodType === 1) { 50 | setMethodType(1) ; 51 | } 52 | if(methodType === 2) { 53 | setMethodType(2) 54 | } 55 | } 56 | 57 | return ( 58 | <Box component={"div"} className={classes.root}> 59 | <Grid container> 60 | <Grid item xs={4} onClick={() => emitChangeMethodType(1)} className={ methodType === 1 ? classes.active : ""}> 61 | Limit 62 | </Grid> 63 | <Grid item xs={4} onClick={() => emitChangeMethodType(2)} className={ methodType === 2 ? classes.active : ""}> 64 | Market 65 | </Grid> 66 | </Grid> 67 | </Box> 68 | ) 69 | } 70 | 71 | export default MarketSelectBox ; -------------------------------------------------------------------------------- /src/utils/theme.js: -------------------------------------------------------------------------------- 1 | import { createTheme, responsiveFontSizes } from "@mui/material/styles"; 2 | import * as locale from '@mui/material/locale'; 3 | 4 | import { DefaultLocale } from '../static/constants'; 5 | 6 | // colors 7 | const primary = "#337ab7"; 8 | const secondary = "#ec2027"; 9 | const black = "#303030"; 10 | const darkBlack = "#0c1319"; 11 | const background = "#fff"; 12 | const warningLight = "rgba(255, 246, 32, .3)"; 13 | const warningMain = "rgba(255, 246, 32, .5)"; 14 | const warningDark = "rgba(255, 246, 32, .7)"; 15 | 16 | // border 17 | const borderWidth = 1; 18 | const borderColor = "#2e6da4"; 19 | 20 | // breakpoints 21 | // const xl = 1920; 22 | // const lg = 1280; 23 | // const md = 960; 24 | // const sm = 600; 25 | // const xs = 0; 26 | 27 | // spacing 28 | const spacing = 8; 29 | 30 | const theme = createTheme({ 31 | layout: { 32 | contentWidth: 1140, 33 | footerWidth: 1400 34 | }, 35 | palette: { 36 | primary: { main: primary, footer: '#055da6' }, 37 | secondary: { main: secondary }, 38 | common: { 39 | black, 40 | darkBlack 41 | }, 42 | warning: { 43 | light: warningLight, 44 | main: warningMain, 45 | dark: warningDark 46 | }, 47 | tonalOffset: 0.2, 48 | background: { 49 | default: background, 50 | gray: '#f1f1f170' 51 | }, 52 | spacing 53 | }, 54 | // breakpoints: { 55 | // values: { 56 | // xl, 57 | // lg, 58 | // md, 59 | // sm, 60 | // xs 61 | // } 62 | // }, 63 | border: { 64 | borderColor: borderColor, 65 | borderWidth: borderWidth 66 | }, 67 | overrides: { 68 | 69 | }, 70 | typography: { 71 | useNextVariants: true 72 | } 73 | }, locale[DefaultLocale]); 74 | 75 | export default responsiveFontSizes(theme); 76 | -------------------------------------------------------------------------------- /src/components/Exchange/TokenList/TokenSearchBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { useState } from 'react' ; 6 | 7 | import SavedSearchOutlinedIcon from '@mui/icons-material/SavedSearchOutlined'; 8 | 9 | import { 10 | Box , 11 | FormControl, 12 | RadioGroup, 13 | FormControlLabel , 14 | Radio 15 | } from '@mui/material' ; 16 | 17 | import { makeStyles } from '@mui/styles'; 18 | 19 | const useStyles = makeStyles(() => ({ 20 | root : { 21 | boxSizing : "border-box" , 22 | padding : "5px", 23 | 24 | height : "30px", 25 | 26 | display : "flex" , 27 | justifyContent : "space-between" , 28 | alignItems : "center" , 29 | 30 | borderBottom : "1px solid gray" 31 | }, 32 | searchGp : { 33 | "& svg" : { 34 | fontSize : "20px" 35 | }, 36 | "& input" : { 37 | border : "none" , 38 | width : "70%" , 39 | fontSize : "12px" 40 | }, 41 | "& input:focus" : { 42 | outline : "none" 43 | } 44 | }, 45 | radioGp : { 46 | display : "flex" , 47 | alignItems : "center" , 48 | fontSize : "12px", 49 | "& input" :{ 50 | marginLeft : "15px", 51 | marginRight : "5px" 52 | } 53 | } 54 | })); 55 | 56 | const TokenSearchBox = () => { 57 | 58 | const classes = useStyles() ; 59 | 60 | return ( 61 | <Box component={"div"} className={classes.root}> 62 | <Box component={"div"} className={classes.searchGp}> 63 | <SavedSearchOutlinedIcon /> 64 | <Box component={"input"}/> 65 | </Box> 66 | <Box component={"div"} className={classes.radioGp}> 67 | <Box component={"input"} type="radio" name={"setting"} value={1} defaultChecked/>Volume 68 | <Box component={"input"} type="radio" name={"setting"} value={2} />Balance 69 | </Box> 70 | </Box> 71 | ) 72 | } 73 | 74 | export default TokenSearchBox ; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /src/components/Orders/OrdersHistory/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { useState , useEffect } from 'react' ; 4 | import { useWeb3React } from '@web3-react/core'; 5 | import { useNavigate } from 'react-router-dom'; 6 | 7 | import CurrentOrderList from '../CurrentOrderList'; 8 | import OrderHistoryList from '../OrderHistoryList' ; 9 | 10 | import {makeStyles} from '@mui/styles' ; 11 | 12 | import { 13 | Box , 14 | Tab , 15 | } from '@mui/material' ; 16 | 17 | import { 18 | TabContext , 19 | TabList , 20 | TabPanel 21 | } from '@mui/lab' ; 22 | 23 | const useStyles = makeStyles((theme) => ({ 24 | root : { 25 | border : "1px solid lightgray" 26 | } , 27 | tabLabel : { 28 | fontWeight : 'bold !important' , 29 | }, 30 | })); 31 | 32 | const OrdersHistory = () => { 33 | 34 | const classes = useStyles() ; 35 | 36 | const { active } = useWeb3React() ; 37 | const navigate = useNavigate() ; 38 | 39 | const [value, setValue] = useState('1'); 40 | 41 | const handleChange = (event, newValue) => { 42 | setValue(newValue); 43 | }; 44 | 45 | useEffect(() => { 46 | if(!active) { 47 | navigate('/') ; 48 | } 49 | } , [active]); 50 | 51 | return ( 52 | <div className={classes.root}> 53 | <Box sx={{ width: '100%', typography: 'body1' }}> 54 | <TabContext value={value}> 55 | <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> 56 | <TabList onChange={handleChange} aria-label="lab API tabs example"> 57 | <Tab className={classes.tabLabel} label="Current Order" value="1" /> 58 | <Tab className={classes.tabLabel} label="Order History" value="2" /> 59 | </TabList> 60 | </Box> 61 | <TabPanel value="1"> 62 | <CurrentOrderList /> 63 | </TabPanel> 64 | <TabPanel value="2"> 65 | <OrderHistoryList /> 66 | </TabPanel> 67 | </TabContext> 68 | </Box> 69 | </div> 70 | ); 71 | } 72 | 73 | export default OrdersHistory ; -------------------------------------------------------------------------------- /src/components/Exchange/RecentOrder/RecentSelectBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import { useNavigate } from 'react-router-dom' ; 7 | import { useWeb3React } from '@web3-react/core' ; 8 | 9 | import GridViewIcon from '@mui/icons-material/GridView'; 10 | 11 | import swal from 'sweetalert' ; 12 | import clsx from 'clsx'; 13 | 14 | import { 15 | Box, 16 | Grid , 17 | Stack 18 | } from '@mui/material' ; 19 | 20 | import { makeStyles } from '@mui/styles'; 21 | 22 | const useStyles = makeStyles(() => ({ 23 | root : { 24 | height : "30px" , 25 | display : "flex" , 26 | alignItems : "flex-end" , 27 | paddingLeft : "30px", 28 | paddingRight : "30px", 29 | borderBottom : "1px solid gray" 30 | }, 31 | tab : { 32 | paddingLeft : "10px" , 33 | paddingRight :"10px" , 34 | fontWeight : "bold" , 35 | cursor : "grab" 36 | }, 37 | active : { 38 | borderBottom : "1px solid blue" 39 | } , 40 | stack : { 41 | width : "100%" 42 | } 43 | })); 44 | 45 | const RecentSelectBox = () => { 46 | 47 | const { active } = useWeb3React() ; 48 | 49 | const classes = useStyles() ; 50 | 51 | const navigate = useNavigate() ; 52 | 53 | const goToMoreOrder = () => { 54 | if(!active){ 55 | swal({ 56 | title : "Warning" , 57 | text : "You have to connect to metamask." , 58 | icon : "warning" , 59 | timer : 2000 , 60 | button : false 61 | }) 62 | } else navigate("/orders") ; 63 | } 64 | 65 | return ( 66 | <Box component={"div"} className={classes.root}> 67 | <Stack flexDirection={"row"} justifyContent={"space-between"} className={classes.stack}> 68 | <Box component={"div"} className={ clsx(classes.tab , classes.active) }> 69 | Current Order 70 | </Box> 71 | {/* <Box component={"div"} onClick={() => goToMoreOrder()}> 72 | <GridViewIcon /> More 73 | </Box> */} 74 | </Stack> 75 | </Box> 76 | ) 77 | } 78 | 79 | export default RecentSelectBox ; -------------------------------------------------------------------------------- /src/static/tokensinfo/stakinginfo.js: -------------------------------------------------------------------------------- 1 | import CAX from '../../assets/avatar/CAX.png' ; 2 | import ADA from '../../assets/avatar/ADA.png' ; 3 | import BTC from '../../assets/avatar/BTC.png' ; 4 | import LTC from '../../assets/avatar/LTC.png' ; 5 | import NEM from '../../assets/avatar/NEM.png' ; 6 | import ETH from '../../assets/avatar/ETH.png' ; 7 | import EOS from '../../assets/avatar/EOS.png' ; 8 | import DASH from '../../assets/avatar/DASH.png' ; 9 | 10 | export const stakingInfo = [ 11 | { 12 | "Avatar" : CAX , 13 | "Coin" : "CAX" , 14 | "Product" : "DOT Slot Action" , 15 | "Est" : "--" , 16 | "Duration" : "Fixed" , 17 | "Action" : "Stake" 18 | }, 19 | { 20 | "Avatar" : ADA, 21 | "Coin" : "ADA" , 22 | "Product" : "Fixed Savings" , 23 | "Est" : "25.00%" , 24 | "Duration" : "7 Days" , 25 | "Action" : "Stake" 26 | }, 27 | { 28 | "Avatar" : BTC, 29 | "Coin" : "BTC" , 30 | "Product" : "LaunchPool-MC" , 31 | "Est" : "12.21%" , 32 | "Duration" : "Flexible" , 33 | "Action" : "Stake" 34 | }, 35 | { 36 | "Avatar" : LTC , 37 | "Coin" : "LTC" , 38 | "Product" : "Staking" , 39 | "Est" : "11.51%" , 40 | "Duration" : "30 Days" , 41 | "Action" : "Stake" 42 | }, 43 | { 44 | "Avatar" : NEM, 45 | "Coin" : "NEM" , 46 | "Product" : "Fixed Saving" , 47 | "Est" : "9.00%" , 48 | "Duration" : "60 Days" , 49 | "Action" : "Stake" 50 | }, 51 | { 52 | "Avatar" : ETH , 53 | "Coin" : "ETH" , 54 | "Product" : "Staking" , 55 | "Est" : "6.53%" , 56 | "Duration" : "Flexible" , 57 | "Action" : "Stake" 58 | }, 59 | { 60 | "Avatar" : EOS, 61 | "Coin" : "EOS" , 62 | "Product" : "LaunchPool-MC" , 63 | "Est" : "5.56%" , 64 | "Duration" : "60 Days" , 65 | "Action" : "Stake" 66 | }, 67 | { 68 | "Avatar" : DASH , 69 | "Coin" : "DASH" , 70 | "Product" : "Flexible Savings" , 71 | "Est" : "5.00%" , 72 | "Duration" : "Flexible" , 73 | "Action" : "Stake" 74 | } 75 | ] -------------------------------------------------------------------------------- /src/components/Exchange/Marketing/BuyAndSell/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import Options from './Options' ; 6 | import SelectPairToken from './SelectPairToken'; 7 | 8 | import clsx from 'clsx'; 9 | 10 | import { 11 | Box , 12 | Grid , 13 | } from '@mui/material' ; 14 | 15 | import { makeStyles } from '@mui/styles'; 16 | 17 | const useStyles = makeStyles((theme) => ({ 18 | root : { 19 | 20 | '&::-webkit-scrollbar': { 21 | width: '8px', 22 | backgroundColor : "lightgray", 23 | borderRadius : "5px" 24 | }, 25 | '&::-webkit-scrollbar-track': { 26 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 27 | }, 28 | '&::-webkit-scrollbar-thumb': { 29 | backgroundColor: 'gray', 30 | borderRadius : "5px" 31 | }, 32 | 33 | overflow :"hidden" , 34 | overflowY : "scroll" , 35 | height : "calc(100vh - 163px)" , 36 | borderBottom : "1px solid gray" , 37 | display : "flex " , 38 | } , 39 | btGp : { 40 | textAlign : "right" , 41 | marginBottom : "15px !important", 42 | marginRight : clsx( theme.spacing(7) , " !important" ) , 43 | "& .MuiButton-root" : { 44 | marginLeft : "25px" 45 | } 46 | } 47 | })); 48 | 49 | const BuyAndSell = (props) => { 50 | 51 | const { 52 | tradeToken , price , status , methodType , 53 | handleChangePrice 54 | } = props ; 55 | 56 | const classes = useStyles() ; 57 | 58 | return ( 59 | <Box component={"div"} className={classes.root}> 60 | <Grid container> 61 | <Grid item xs={12} className={classes.panel}> 62 | { 63 | tradeToken ? <Options 64 | tradeToken={tradeToken} 65 | methodType={methodType} 66 | price={price} 67 | status={status} 68 | handleChangePrice={handleChangePrice} 69 | /> :<SelectPairToken /> 70 | } 71 | 72 | </Grid> 73 | </Grid> 74 | </Box> 75 | ) 76 | } 77 | 78 | export default BuyAndSell ; -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="utf-8" /> 5 | <link rel="icon" href="%PUBLIC_URL%/favicon.gif" /> 6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 | <meta name="theme-color" content="#000000" /> 8 | <meta 9 | name="description" 10 | content="Web site created using create-react-app" 11 | /> 12 | <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 13 | <!-- 14 | manifest.json provides metadata used when your web app is installed on a 15 | user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 16 | --> 17 | <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 18 | 19 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 20 | <!-- 21 | Notice the use of %PUBLIC_URL% in the tags above. 22 | It will be replaced with the URL of the `public` folder during the build. 23 | Only files inside the `public` folder can be referenced from the HTML. 24 | 25 | Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will 26 | work correctly both with client-side routing and a non-root public URL. 27 | Learn how to configure a non-root public URL by running `npm run build`. 28 | --> 29 | <style> 30 | .swal-text { 31 | line-height: 25px; 32 | text-align: center; 33 | } 34 | </style> 35 | <title>CALADEX - Tokenize The World With Caladex 36 | 37 | 38 | 39 |
40 | 50 | 51 | 52 | 57 | 58 | -------------------------------------------------------------------------------- /src/components/Exchange/OrderBook/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | import React from 'react' ; 6 | 7 | import { useState } from 'react' ; 8 | 9 | import { 10 | Box 11 | } from '@mui/material' ; 12 | 13 | import OrderSelectBox from './OrderSelectBox'; 14 | import OrderLableBox from './OrderLableBox'; 15 | import OrderSellList from './OrderSellList'; 16 | import PriceMean from './PriceMean' ; 17 | import OrderBuyList from './OrderBuyList'; 18 | 19 | import { makeStyles } from '@mui/styles' ; 20 | 21 | const useStyles = makeStyles(() => ({ 22 | root : { 23 | paddingLeft : "5px" , 24 | paddingRight : "5px" , 25 | borderRight : "1px solid gray" , 26 | borderLeft : "1px solid lightgray" , 27 | borderBottom : "1px solid gray" , 28 | minHeight : "calc(100vh - 121px)" , 29 | } 30 | })); 31 | 32 | const OrderBook = (props) => { 33 | 34 | const { 35 | tradeToken , tokenId , 36 | handleChangePrice , handleChangeStatus , 37 | setMethodType 38 | } = props ; 39 | 40 | const [ decimal , handleChangeDecimal ] = useState(6) ; 41 | const [ orderType , handleChangeOrderType ] = useState(3) ; 42 | 43 | const classes = useStyles() ; 44 | 45 | return ( 46 | 47 | 48 | 52 | 53 | 56 | 57 | 65 | 66 | 67 | 68 | 76 | 77 | 78 | ) 79 | } 80 | 81 | 82 | export default OrderBook ; -------------------------------------------------------------------------------- /src/utils/helper.js: -------------------------------------------------------------------------------- 1 | import { ethers } from 'ethers'; 2 | 3 | export const setItem = (key, item) => { 4 | if(item) { 5 | window.localStorage.setItem(key, item); 6 | } else { 7 | window.localStorage.removeItem(key); 8 | } 9 | } 10 | 11 | export const removeItem = (key) => { 12 | if(key) return window.localStorage.removeItem(key) ; 13 | } 14 | export const getItem = (key) => { 15 | if(key) { 16 | return window.localStorage.getItem(key); 17 | } 18 | } 19 | 20 | export const isAuthenticated = () => { 21 | if(getItem('access_token')) { 22 | return true ; 23 | } 24 | return false ; 25 | } 26 | 27 | export const getLibrary = (provider) => { 28 | return new ethers.providers.Web3Provider(provider) ; 29 | } 30 | 31 | export const isMetaMaskInstalled = () => { 32 | return Boolean(window.ethereum && window.ethereum.isMetaMask) ; 33 | } 34 | export const sleep = (milliseconds) => { 35 | const date = Date.now(); 36 | let currentDate = null; 37 | do { 38 | currentDate = Date.now(); 39 | } while (currentDate - date < milliseconds); 40 | } 41 | 42 | export const convertBalance = (balanceBigInt , decimal) => { 43 | // console.log(Number(Number(balanceBigInt) / Math.pow(10 , Number(decimal)) ) ) ; 44 | return Number(Number(balanceBigInt) / Math.pow(10 , Number(decimal)) ) ; 45 | 46 | 47 | } 48 | 49 | export const json2array = (json) => { 50 | var result = []; 51 | var keys = Object.keys(json); 52 | 53 | keys.forEach( key => { 54 | result.push(json[key]); 55 | }); 56 | 57 | return result; 58 | } 59 | 60 | export const formatDBDate = (db_date) => { 61 | 62 | if(typeof db_date === "undefined") return ; 63 | 64 | let removeT_db_date = db_date.replace("T" , " ") ; 65 | 66 | let removeTail_db_date = removeT_db_date.replace(".000Z" , "") ; 67 | 68 | return removeTail_db_date.toString() ; 69 | } 70 | 71 | export const updateDepositTokensArray = async (token_id , value) => { 72 | 73 | let tmp = JSON.parse(getItem('depositArray')) ; 74 | 75 | tmp[token_id] = value ; 76 | 77 | await setItem('depositArray' , JSON.stringify(tmp)) ; 78 | } 79 | 80 | export const updateWithdrawTokensArray = async (token_id , value) => { 81 | 82 | let tmp = JSON.parse(getItem('withdrawArray')) ; 83 | 84 | tmp[token_id] = value ; 85 | 86 | await setItem('withdrawArray' , JSON.stringify(tmp)) ; 87 | } -------------------------------------------------------------------------------- /src/redux/actions/trade.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import * as config from "../../static/constants" ; 4 | // import ActionTypes from "./actionTypes"; 5 | import axios from 'axios' ; 6 | import ActionTypes from "./actionTypes"; 7 | 8 | export const GetTokenTradeHistory = async (token_id , pair_type) => { 9 | 10 | try { 11 | let res = await axios.post(`${config.PRIVATE_CALADEX_API}trade/get` , {token_id : token_id , pair_token : pair_type}) ; 12 | 13 | if(res.data.data.data.length === 0) { 14 | return [] ; 15 | } else { 16 | // console.log("adfafdads" , res.data.data.data) ; 17 | return res.data.data.data ; 18 | } 19 | } 20 | catch (err) { 21 | console.log(err) ; 22 | return [] ; 23 | } 24 | } 25 | 26 | export const GetTokenOrderList = ( token_id , pair_type , order_type=null) => async dispatch => { 27 | 28 | try { 29 | 30 | let jsonReqBody ; 31 | 32 | if(order_type === null) { 33 | jsonReqBody = { 34 | token_id : token_id , 35 | pair_token : pair_type 36 | } 37 | } else { 38 | jsonReqBody = { 39 | token_id : token_id , 40 | pair_token : pair_type , 41 | type : order_type 42 | } 43 | } 44 | 45 | 46 | // alert(JSON.stringify(jsonReqBody)); 47 | 48 | let res = await axios.post(`${config.PRIVATE_CALADEX_API}order/get` , jsonReqBody) ; 49 | 50 | if(order_type === "sell") { 51 | 52 | return dispatch({ 53 | type : ActionTypes.GetTokenOrderSellList , 54 | payload : res.data.data.data 55 | }) 56 | } 57 | if(order_type === "buy"){ 58 | 59 | return dispatch({ 60 | type : ActionTypes.GetTokenOrderBuyList , 61 | payload : res.data.data.data 62 | }) 63 | } 64 | 65 | } 66 | catch (err) { 67 | console.log(err) ; 68 | } 69 | } 70 | 71 | export const GetTokenTradeList = (token_id , pair_type) => async dispatch => { 72 | try { 73 | 74 | let res = await axios.post(`${config.PRIVATE_CALADEX_API}trade/get` , { 75 | token_id : token_id , 76 | pair_token : pair_type 77 | }); 78 | 79 | return dispatch({ 80 | type : ActionTypes.GetTokenTradeList , 81 | payload : res.data.data.data 82 | }) 83 | } 84 | catch (err) { 85 | console.log(err) ; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Caladex", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "", 6 | "dependencies": { 7 | "@chakra-ui/react": "^1.7.4", 8 | "@emotion/react": "^11.7.1", 9 | "@emotion/styled": "^11.6.0", 10 | "@ethersproject/providers": "^5.0.23", 11 | "@ethersproject/units": "^5.5.0", 12 | "@metamask/detect-provider": "^1.2.0", 13 | "@mui/icons-material": "^5.2.5", 14 | "@mui/lab": "^5.0.0-alpha.64", 15 | "@mui/material": "^5.2.8", 16 | "@mui/styles": "^5.2.3", 17 | "@mycrypto/eth-scan": "^3.5.3", 18 | "@testing-library/jest-dom": "^5.11.4", 19 | "@testing-library/react": "^11.1.0", 20 | "@testing-library/user-event": "^12.1.10", 21 | "@usedapp/core": "^0.9.1", 22 | "@walletconnect/client": "^1.7.1", 23 | "@walletconnect/qrcode-modal": "^1.7.1", 24 | "@walletconnect/web3-provider": "^1.7.1", 25 | "@web3-react/core": "^6.1.9", 26 | "@web3-react/injected-connector": "^6.0.7", 27 | "aos": "^2.3.4", 28 | "apexcharts": "^3.33.0", 29 | "axios": "^0.24.0", 30 | "bootstrap": "^4.6.1", 31 | "clsx": "^1.1.1", 32 | "enzyme": "^3.11.0", 33 | "enzyme-adapter-react-15": "^1.4.3", 34 | "enzyme-adapter-react-16": "^1.15.6", 35 | "eth-balance-checker": "^0.1.2", 36 | "ethers": "^5.1.3", 37 | "mdbreact": "^5.2.0", 38 | "prop-types": "^15.8.1", 39 | "react": "^17.0.1", 40 | "react-apexcharts": "^1.3.9", 41 | "react-beforeunload": "^2.5.2", 42 | "react-bootstrap": "^2.1.0", 43 | "react-device-detect": "^2.1.2", 44 | "react-dom": "^17.0.1", 45 | "react-moralis": "^1.1.0", 46 | "react-redux": "^7.2.2", 47 | "react-router-dom": "^6.2.1", 48 | "react-scripts": "4.0.2", 49 | "react-ts-tradingview-widgets": "^1.0.8", 50 | "redux": "^4.0.5", 51 | "redux-thunk": "^2.4.1", 52 | "sweetalert": "^2.1.2", 53 | "truffle": "5.1.39", 54 | "walletlink": "^2.4.5", 55 | "web-vitals": "^1.0.1", 56 | "web3": "1.2.11", 57 | "web3modal": "^1.9.5" 58 | }, 59 | "scripts": { 60 | "start": "react-scripts start", 61 | "build": "react-scripts build", 62 | "test": "react-scripts test", 63 | "eject": "react-scripts eject" 64 | }, 65 | "eslintConfig": { 66 | "extends": [ 67 | "react-app", 68 | "react-app/jest" 69 | ] 70 | }, 71 | "browserslist": { 72 | "production": [ 73 | ">0.2%", 74 | "not dead", 75 | "not op_mini all" 76 | ], 77 | "development": [ 78 | "last 1 chrome version", 79 | "last 1 firefox version", 80 | "last 1 safari version" 81 | ] 82 | }, 83 | "devDependencies": { 84 | "react-test-renderer": "^15.5.0" 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/static/tokensinfo/avatar/nem.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Exchange/Table1/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { 4 | Card , 5 | CardContent , 6 | } from '@mui/material' ; 7 | 8 | import { makeStyles } from '@mui/styles'; 9 | 10 | import quotesOne from '../../../static/tokensinfo/quotesOne.json' ; 11 | 12 | const useStyles = makeStyles((theme) => ({ 13 | root : { 14 | marginTop : theme.spacing(3) , 15 | boxShadow: "3px -4px 7px 0px lightblue !important", 16 | border : "1px solid lightblue", 17 | "& th" : { 18 | fontSize : ".625rem" , 19 | }, 20 | "& td" : { 21 | fontSize : "14px" , 22 | fontFamily : "Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif" , 23 | color : "#D63939" 24 | } 25 | } , 26 | })); 27 | 28 | 29 | const Table1 = () => { 30 | const classes = useStyles() ; 31 | 32 | return ( 33 | 34 | 35 |
36 | 37 | 38 | 39 | 42 | 45 | 48 | 49 | { 50 | quotesOne.map((element, index) => { 51 | return( 52 | 53 | 56 | 59 | 62 | 63 | ) 64 | }) 65 | } 66 | 67 |
40 | PRICE(ETH) 41 | 43 | AMOUNT(BZTC) 44 | 46 | TOTAL(ETH) 47 |
54 | {element.Price} 55 | 57 | {element.Amount} 58 | 60 | {element.Total} 61 |
68 |
69 | 70 | 71 | 72 | 73 | ); 74 | } 75 | 76 | export default Table1 ; -------------------------------------------------------------------------------- /src/components/Exchange/Table2/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { 4 | Card , 5 | CardContent , 6 | } from '@mui/material' ; 7 | 8 | import { makeStyles } from '@mui/styles'; 9 | 10 | import quotesOne from '../../../static/tokensinfo/quotesOne.json' ; 11 | 12 | const useStyles = makeStyles((theme) => ({ 13 | root : { 14 | marginTop : theme.spacing(3) , 15 | boxShadow: "3px -4px 7px 0px lightblue !important", 16 | border : "1px solid lightblue", 17 | "& th" : { 18 | fontSize : ".625rem" , 19 | }, 20 | "& td" : { 21 | fontSize : "14px" , 22 | fontFamily : "Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif" , 23 | color : "#D63939" 24 | } 25 | } , 26 | })); 27 | 28 | 29 | const Table1 = () => { 30 | const classes = useStyles() ; 31 | 32 | return ( 33 | 34 | 35 |
36 | 37 | 38 | 39 | 42 | 45 | 48 | 49 | { 50 | quotesOne.map((element, index) => { 51 | return( 52 | 53 | 56 | 59 | 62 | 63 | ) 64 | }) 65 | } 66 | 67 |
40 | PRICE(ETH) 41 | 43 | AMOUNT(BZTC) 44 | 46 | TOTAL(ETH) 47 |
54 | {element.Price} 55 | 57 | {element.Amount} 58 | 60 | {element.Total} 61 |
68 |
69 | 70 | 71 | 72 | 73 | ); 74 | } 75 | 76 | export default Table1 ; -------------------------------------------------------------------------------- /src/components/Exchange/TradeHistoryTable/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { 4 | Card , 5 | CardContent, 6 | CardHeader, 7 | Divider, 8 | } from '@mui/material' ; 9 | 10 | import { makeStyles } from '@mui/styles'; 11 | 12 | import tokenHistory from '../../../static/tokensinfo/history.json' ; 13 | 14 | const useStyles = makeStyles((theme) => ({ 15 | root : { 16 | marginTop : theme.spacing(5) , 17 | boxShadow: "3px -4px 7px 0px lightblue !important", 18 | border : "1px solid lightblue" , 19 | height : "430px" , 20 | "& .MuiCardHeader-title" : { 21 | fontSize : "16px !important" , 22 | color : "#206BC4 !important" 23 | }, 24 | "& th" : { 25 | fontSize : ".625rem" , 26 | } , 27 | "& td" : { 28 | fontSize : "14px" , 29 | fontFamily : "Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif" 30 | } 31 | } , 32 | })); 33 | 34 | const TradeHistoryTable = () => { 35 | const classes = useStyles() ; 36 | 37 | return ( 38 | 39 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 52 | 55 | 58 | 59 | { 60 | tokenHistory.map((element, index) => { 61 | return ( 62 | 63 | 66 | 69 | 72 | 73 | ) 74 | }) 75 | } 76 | 77 |
50 | TIME 51 | 53 | PRICE 54 | 56 | AMOUNT(BTZC) 57 |
64 | {element.Time} 65 | 67 | {element.Price} 68 | 70 | {element.Amount} 71 |
78 | 79 | 80 | 81 | ); 82 | } 83 | 84 | export default TradeHistoryTable ; -------------------------------------------------------------------------------- /src/components/Exchange/OrderCrypto/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { 4 | Card , 5 | CardContent, 6 | CardHeader, 7 | Divider 8 | } from '@mui/material' ; 9 | 10 | import { makeStyles } from '@mui/styles'; 11 | 12 | const useStyles = makeStyles((theme) => ({ 13 | root : { 14 | marginTop : theme.spacing(5) , 15 | boxShadow: "3px -4px 7px 0px lightblue !important", 16 | border : "1px solid lightblue" , 17 | "& .MuiCardHeader-title" : { 18 | fontSize : "14px !important" , 19 | color : "#232E3C" , 20 | width : "120px", 21 | height : "36px !important" , 22 | display : "flex" , 23 | alignItems : "center" , 24 | paddingLeft : theme.spacing(2), 25 | borderBottom : "1px solid #206bc4" , 26 | cursor : "pointer" 27 | } , 28 | "& .MuiCardHeader-action" : { 29 | fontSize : "14px !important" , 30 | color : "#232E3C" , 31 | margin : "0px" , 32 | display : "flex" , 33 | alignItems : "center" , 34 | height : "36px", 35 | paddingRight : theme.spacing(2) 36 | } , 37 | "& .MuiCardHeader-root" : { 38 | padding : "0px !important" , 39 | height : "36px" 40 | }, 41 | } , 42 | cardHeader : { 43 | color : theme.palette.primary.main , 44 | fontWeight : "bold" , 45 | } 46 | })); 47 | 48 | const OrderCrpyto = () => { 49 | const classes = useStyles() ; 50 | 51 | return ( 52 | 53 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |  More 66 |
67 | } 68 | > 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | ); 78 | } 79 | 80 | export default OrderCrpyto ; -------------------------------------------------------------------------------- /src/redux/actions/crypto.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import ActionTypes from "./actionTypes"; 5 | import * as config from "../../static/constants" ; 6 | import axios from 'axios' ; 7 | import Web3 from 'web3' ; 8 | import { getAddressBalances } from "eth-balance-checker/lib/web3"; 9 | 10 | // const web3 = new Web3('https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161') ; 11 | const web3 = new Web3('https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161') ; 12 | // const web3 = new Web3('http://localhost:8545') ; 13 | 14 | export const GetAllCryptoInfo = () => async dispatch => { 15 | try { 16 | let res = await axios.get(`${config.PUBLIC_API_URL}command=returnTicker`) ; 17 | 18 | let cryptoInfoList = [] ; 19 | 20 | for(let key in res.data) { 21 | if( key.slice(0 , 5) === "USDT_"){ 22 | cryptoInfoList.push({ 23 | name : key.slice(5 , key.length) , 24 | info : res.data[key] 25 | }); 26 | } 27 | } 28 | 29 | dispatch({ 30 | type : ActionTypes.GetAllCryptoInfo , 31 | payload : cryptoInfoList 32 | }) 33 | console.log(cryptoInfoList) ; 34 | } 35 | catch (err) { 36 | console.log(err) ; 37 | } 38 | } 39 | 40 | export const GetExchageRateToUSD = (walletInfo) => async dispatch => { 41 | try { 42 | let cryptoExchangeRateList = [] ; 43 | 44 | for(let element of walletInfo){ 45 | await axios.get(`${config.PUBULIC_EXCHANGE_RATE_API}${element.Token}`) 46 | .then(res => { 47 | cryptoExchangeRateList.push({ 48 | rate : res.data.data.rates.USD , 49 | }) 50 | }) 51 | .catch(err => { 52 | cryptoExchangeRateList.push({ 53 | rate : "Invalid" , 54 | }) 55 | 56 | // let jsonString = "{'" + element.Token + "':'Invalid Currency'}" ; 57 | // let jsonObj = await JSON.parse(jsonString) ; 58 | 59 | // cryptoExchangeRateList.push(jsonObj) ; 60 | }) 61 | 62 | } 63 | 64 | dispatch({ 65 | type : ActionTypes.GetExchageRateToUSD , 66 | payload : cryptoExchangeRateList , 67 | }) 68 | } 69 | catch(err) { 70 | 71 | } 72 | } 73 | 74 | export const GetAllTokenBalance = (address , tokensInfo) => async dispatch => { 75 | 76 | const tokensAddress = [] ; 77 | 78 | await tokensInfo.map((element) => { 79 | tokensAddress.push(element.Address) ; 80 | }); 81 | 82 | try{ 83 | await getAddressBalances( web3 , address , tokensAddress).then(balances => { 84 | dispatch({ 85 | type : ActionTypes.GetWalletBalance , 86 | payload : balances 87 | }) 88 | }); 89 | } 90 | catch (err) { 91 | console.log(err) ; 92 | } 93 | } -------------------------------------------------------------------------------- /src/pages/Landing/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { useState } from 'react'; 6 | 7 | import Title from '../../components/Common/Title' ; 8 | import FruitBar from '../../components/Common/FruitBar'; 9 | 10 | import GraphTape from '../../components/Landing/GraphTape' ; 11 | import TokenLiquidityTable from '../../components/Landing/TokenLiquidityTable'; 12 | 13 | import { makeStyles } from '@mui/styles'; 14 | 15 | const useStyles = makeStyles((theme) => ({ 16 | root : { 17 | minHeight : "calc(100vh - 60px - 64px)" 18 | } 19 | })); 20 | const Landing = () => { 21 | 22 | const classes = useStyles() ; 23 | 24 | const [isOffTimer , setOffTimer] = useState(false) ; 25 | 26 | const [firstTradingIndex , setFirstTradingIndex] = useState(0) ; 27 | const [firstTokenInfo , setFirstTokenInfo] = useState("") ; 28 | const [lastTokenInfo , setLastTokenInfo] = useState("") ; 29 | const [middleTokenInfo , setMiddleTokenInfo] = useState('') ; 30 | const [countTokens , setCountTokens] = useState(0) ; 31 | 32 | const handleCloseTimer = () => { 33 | setOffTimer(true) ; 34 | } 35 | 36 | const goToNext = () => { 37 | switch(countTokens) { 38 | case 1: 39 | return ; 40 | case 2 : 41 | return ; 42 | default : 43 | if(firstTradingIndex === countTokens-3) { 44 | return ; 45 | } 46 | setFirstTradingIndex(firstTradingIndex + 1) ; 47 | return; 48 | } 49 | } 50 | 51 | const goToPrevious = () => { 52 | 53 | if(firstTradingIndex === 0) { 54 | return ; 55 | } 56 | setFirstTradingIndex(firstTradingIndex - 1) ; 57 | } 58 | 59 | return ( 60 |
61 | 68 | 69 | <FruitBar 70 | goToPrevious={goToPrevious} 71 | goToNext={goToNext} 72 | firstTokenInfo={firstTokenInfo} 73 | lastTokenInfo={lastTokenInfo} 74 | middleTokenInfo={middleTokenInfo} 75 | countTokens={countTokens} 76 | firstTradingIndex={firstTradingIndex} 77 | /> 78 | 79 | <GraphTape 80 | setCountTokens={setCountTokens} 81 | setFirstTokenInfo={setFirstTokenInfo} 82 | setMiddleTokenInfo={setMiddleTokenInfo} 83 | setLastTokenInfo={setLastTokenInfo} 84 | firstTradingIndex={firstTradingIndex} 85 | /> 86 | 87 | <TokenLiquidityTable 88 | isOffTimer={isOffTimer} 89 | /> 90 | </div> 91 | ) 92 | } 93 | 94 | export default Landing ; -------------------------------------------------------------------------------- /src/components/Exchange/WalletConnect/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useEffect , useRef } from 'react' ; 4 | 5 | import { useWeb3React } from '@web3-react/core'; 6 | 7 | import { InjectedConnector } from "@web3-react/injected-connector"; 8 | import detectEthereumProvider from '@metamask/detect-provider' ; 9 | import { isMobile } from 'react-device-detect' ; 10 | 11 | import MetamaskImg from '../../../assets/metamask.jpg'; 12 | 13 | import { 14 | Box , 15 | Button, 16 | Grid 17 | } from '@mui/material' ; 18 | 19 | import { makeStyles } from '@mui/styles'; 20 | 21 | const useStyles = makeStyles(() => ({ 22 | root : { 23 | '&::-webkit-scrollbar': { 24 | width: '8px', 25 | backgroundColor : "lightgray", 26 | borderRadius : "5px" 27 | }, 28 | '&::-webkit-scrollbar-track': { 29 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 30 | }, 31 | '&::-webkit-scrollbar-thumb': { 32 | backgroundColor: 'gray', 33 | borderRadius : "5px" 34 | }, 35 | 36 | overflow : "hidden" , 37 | overflowY : "scroll" , 38 | boxSizing : "border-box" , 39 | backgroundColor : "white" , 40 | display : "flex" , 41 | flexDirection :"column" , 42 | justifyContent : "center" , 43 | alignItems : "center" , 44 | top : 0, 45 | width : '100%' , 46 | height : "calc(100vh - 122px)" , 47 | position : "absolute" , 48 | zIndex : 1000 49 | } 50 | })); 51 | 52 | const WalletConnect = () => { 53 | 54 | const classes = useStyles() ; 55 | 56 | const { library , account , active , activate } = useWeb3React() ; 57 | 58 | const connectToWallet = async () => { 59 | 60 | if(!isMobile) { 61 | const provider = await detectEthereumProvider() ; 62 | 63 | if(provider) { 64 | 65 | const chainId = await provider.request({ 66 | method : 'eth_chainId' 67 | }) ; 68 | 69 | const injected = new InjectedConnector({ supportedChainIds: [Number(chainId)] }); 70 | 71 | try { 72 | 73 | await activate(injected); 74 | 75 | } catch (exception) { 76 | // console.log(exception); 77 | } 78 | 79 | } else { 80 | alert("Please Install MetaMask.") ; 81 | } 82 | 83 | } else { 84 | window.location.href ="https://metamask.app.link/dapp/caladex.org"; 85 | } 86 | } 87 | 88 | return ( 89 | <Box component={"div"} className={classes.root} > 90 | <Box component={"div"} sx={{marginBottom : "15px"}}> 91 | <img src={MetamaskImg} width={70} height={70} /> 92 | </Box> 93 | <Box comonent={"div"}> 94 | <Button variant='contained' onClick={connectToWallet}>Connect Wallet</Button> 95 | </Box> 96 | </Box> 97 | ) 98 | } 99 | 100 | export default WalletConnect ; -------------------------------------------------------------------------------- /src/static/tokensinfo/walletinfo.js: -------------------------------------------------------------------------------- 1 | import CAX from '../../assets/avatar/CAX.png' ; 2 | import ADA from '../../assets/avatar/ADA.png' ; 3 | import BTC from '../../assets/avatar/BTC.png' ; 4 | import LTC from '../../assets/avatar/LTC.png' ; 5 | import NEM from '../../assets/avatar/NEM.png' ; 6 | import ETH from '../../assets/avatar/ETH.png' ; 7 | import EOS from '../../assets/avatar/EOS.png' ; 8 | import DASH from '../../assets/avatar/DASH.png' ; 9 | 10 | export const walletInfo = [ 11 | { 12 | "Avatar" : CAX , 13 | "Token" : "CAX" , 14 | "WalletBalance" : "0.000000" , 15 | "CaladexBalance" : "0.000000" , 16 | "Orders" : "0.000000" , 17 | "Eth" : "0.000000" , 18 | "Usd" : "0.00" , 19 | "Address" : "0x2546BcD3c84621e976D8185a91A922aE77ECEc30" 20 | }, 21 | { 22 | "Avatar" : ADA, 23 | "Token" : "ADA" , 24 | "WalletBalance" : "0.000000" , 25 | "CaladexBalance" : "0.000000" , 26 | "Orders" : "0.000000" , 27 | "Eth" : "0.000000" , 28 | "Usd" : "0.00" , 29 | "Address" : "0x3ee2200efb3400fabb9aacf31297cbdd1d435d47" 30 | }, 31 | { 32 | "Avatar" : BTC, 33 | "Token" : "BTC" , 34 | "WalletBalance" : "0.000000" , 35 | "CaladexBalance" : "0.000000" , 36 | "Orders" : "0.000000" , 37 | "Eth" : "0.000000" , 38 | "Usd" : "0.00" , 39 | "Address" : "0x321162Cd933E2Be498Cd2267a90534A804051b11" 40 | }, 41 | { 42 | "Avatar" : LTC , 43 | "Token" : "LTC" , 44 | "WalletBalance" : "0.000000" , 45 | "CaladexBalance" : "0.000000" , 46 | "Orders" : "0.000000" , 47 | "Eth" : "0.000000" , 48 | "Usd" : "0.00", 49 | "Address" : "0x169895d29282c29090783006f95ab2324c6b819f" 50 | }, 51 | { 52 | "Avatar" : NEM, 53 | "Token" : "XEM" , 54 | "WalletBalance" : "0.000000" , 55 | "CaladexBalance" : "0.000000" , 56 | "Orders" : "0.000000" , 57 | "Eth" : "0.000000" , 58 | "Usd" : "0.00" , 59 | "Address" : "0x0a1abedd1f62c495750f3190e2f7e1d6c0a67a14" 60 | }, 61 | { 62 | "Avatar" : ETH , 63 | "Token" : "ETH" , 64 | "WalletBalance" : "0.000000" , 65 | "CaladexBalance" : "0.000000" , 66 | "Orders" : "0.000000" , 67 | "Eth" : "0.000000" , 68 | "Usd" : "0.00" , 69 | "Address" : "0xD76b5c2A23ef78368d8E34288B5b65D616B746aE" 70 | }, 71 | { 72 | "Avatar" : EOS, 73 | "Token" : "EOS" , 74 | "WalletBalance" : "0.000000" , 75 | "CaladexBalance" : "0.000000" , 76 | "Orders" : "0.000000" , 77 | "Eth" : "0.000000" , 78 | "Usd" : "0.00" , 79 | "Address" : "0x86fa049857e0209aa7d9e616f7eb3b3b78ecfdb0" 80 | }, 81 | { 82 | "Avatar" : DASH , 83 | "Token" : "DASH" , 84 | "WalletBalance" : "0.000000" , 85 | "CaladexBalance" : "0.000000" , 86 | "Orders" : "0.000000" , 87 | "Eth" : "0.000000" , 88 | "Usd" : "0.00" , 89 | "Address" : "0xf04f22b39bf419fdec8eae7c69c5e89872915f53" 90 | } 91 | ] -------------------------------------------------------------------------------- /src/static/tokensinfo/tokens.js: -------------------------------------------------------------------------------- 1 | 2 | import CAX from '../../assets/avatar/CAX.png' ; 3 | import ADA from '../../assets/avatar/ADA.png' ; 4 | import BTC from '../../assets/avatar/BTC.png' ; 5 | import LTC from '../../assets/avatar/LTC.png' ; 6 | import NEM from '../../assets/avatar/NEM.png' ; 7 | import ETH from '../../assets/avatar/ETH.png' ; 8 | import EOS from '../../assets/avatar/EOS.png' ; 9 | import DASH from '../../assets/avatar/DASH.png' ; 10 | 11 | export const tokensInfo = [ 12 | { 13 | "Avatar" : CAX, 14 | "Pair" : "CAX/USDT" , 15 | "LastPrice" : "0.036400" , 16 | "State" : "Up" , 17 | "Change" : "2.54%" , 18 | "High" : "0.037000" , 19 | "Low" : "0.033300" , 20 | "Volume" : "2,577,464 TRX" , 21 | "Total" : "92,362 USDT" 22 | }, 23 | { 24 | "Avatar" : ADA, 25 | "Pair" : "ADA/USDT" , 26 | "LastPrice" : "0.036400" , 27 | "State" : "Up" , 28 | "Change" : "2.54%" , 29 | "High" : "0.037000" , 30 | "Low" : "0.033300" , 31 | "Volume" : "2,577,464 TRX" , 32 | "Total" : "92,362 USDT" 33 | }, 34 | { 35 | "Avatar" : BTC, 36 | "Pair" : "BTC/USDT" , 37 | "LastPrice" : "0.036400" , 38 | "State" : "Down" , 39 | "Change" : "2.54%" , 40 | "High" : "0.037000" , 41 | "Low" : "0.033300" , 42 | "Volume" : "2,577,464 TRX" , 43 | "Total" : "92,362 USDT" 44 | }, 45 | { 46 | "Avatar" : LTC , 47 | "Pair" : "LTC/USDT" , 48 | "LastPrice" : "0.036400" , 49 | "State" : "Down" , 50 | "Change" : "2.54%" , 51 | "High" : "0.037000" , 52 | "Low" : "0.033300" , 53 | "Volume" : "2,577,464 TRX" , 54 | "Total" : "92,362 USDT" 55 | }, 56 | { 57 | "Avatar" : NEM, 58 | "Pair" : "NEM/USDT" , 59 | "LastPrice" : "0.036400" , 60 | "State" : "Down" , 61 | "Change" : "2.54%" , 62 | "High" : "0.037000" , 63 | "Low" : "0.033300" , 64 | "Volume" : "2,577,464 TRX" , 65 | "Total" : "92,362 USDT" 66 | }, 67 | { 68 | "Avatar" : ETH , 69 | "Pair" : "ETH/USDT" , 70 | "LastPrice" : "0.036400" , 71 | "State" : "Down" , 72 | "Change" : "2.54%" , 73 | "High" : "0.037000" , 74 | "Low" : "0.033300" , 75 | "Volume" : "2,577,464 TRX" , 76 | "Total" : "92,362 USDT" 77 | }, 78 | { 79 | "Avatar" : EOS, 80 | "Pair" : "EOS/USDT" , 81 | "LastPrice" : "0.036400" , 82 | "State" : "Down" , 83 | "Change" : "2.54%" , 84 | "High" : "0.037000" , 85 | "Low" : "0.033300" , 86 | "Volume" : "2,577,464 TRX" , 87 | "Total" : "92,362 USDT" 88 | }, 89 | { 90 | "Avatar" : DASH , 91 | "Pair" : "DASH/USDT" , 92 | "LastPrice" : "0.036400" , 93 | "State" : "Up" , 94 | "Change" : "2.54%" , 95 | "High" : "0.037000" , 96 | "Low" : "0.033300" , 97 | "Volume" : "2,577,464 TRX" , 98 | "Total" : "92,362 USDT" 99 | } 100 | ] -------------------------------------------------------------------------------- /src/components/Common/Title/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { Link } from 'react-router-dom' ; 6 | 7 | import { 8 | Button, 9 | Container , 10 | Grid , 11 | Typography 12 | } from '@mui/material' ; 13 | 14 | 15 | import { makeStyles } from '@mui/styles'; 16 | 17 | const useStyles = makeStyles((theme) => ({ 18 | root : { 19 | marginTop : theme.spacing(5) , 20 | padding: "0px !important", 21 | "& .MuiTypography-root" :{ 22 | color : theme.palette.primary.main , 23 | fontWeight : "600 !important" , 24 | fontFamily : "Segoe UI !important", 25 | } , 26 | "& a:hover" : { 27 | textDecoration : "none !important" 28 | } 29 | } , 30 | title : { 31 | textAlign : "center" 32 | }, 33 | bigTitle : { 34 | fontSize : "60px !important" , 35 | [theme.breakpoints.down("md")] : { 36 | fontSize: "45px !important" 37 | }, 38 | [theme.breakpoints.down("sm")] : { 39 | fontSize: "30px !important" 40 | }, 41 | }, 42 | mediumTitle : { 43 | fontSize : "40px !important" , 44 | [theme.breakpoints.down("md")] : { 45 | fontSize: "30px !important" 46 | }, 47 | [theme.breakpoints.down("sm")] : { 48 | fontSize: "20px !important" 49 | }, 50 | } , 51 | smallTitle : { 52 | fontSize : "30px !important" , 53 | [theme.breakpoints.down("md")] : { 54 | fontSize: "20px !important" 55 | }, 56 | [theme.breakpoints.down("sm")] : { 57 | fontSize: "15px !important" 58 | }, 59 | }, 60 | titleFooter : { 61 | marginBottom : theme.spacing(3) , 62 | } 63 | })); 64 | const Title = (props) => { 65 | 66 | const classes = useStyles() ; 67 | 68 | const { 69 | bigTitle , 70 | smallTitle, 71 | mediumTitle , 72 | isVisibleTradeButton , 73 | handleCloseTimer 74 | } = props ; 75 | 76 | return ( 77 | <> 78 | <Container className={classes.root}> 79 | <Grid container spacing={2}> 80 | <Grid item xs={12} className={classes.title}> 81 | <Typography className={classes.bigTitle} >{bigTitle}</Typography> 82 | </Grid> 83 | <Grid item xs={12} className={classes.title}> 84 | <Typography className={classes.mediumTitle} >{mediumTitle}</Typography> 85 | </Grid> 86 | <Grid item xs={12} className={classes.title}> 87 | <Typography className={classes.smallTitle} >{smallTitle}</Typography> 88 | </Grid> 89 | 90 | <Grid item xs={12} className={classes.title} hidden={isVisibleTradeButton ? "" : "hidden"}> 91 | <Link to="/exchange"> 92 | <Button variant="contained" sx={{borderRadius:"20px"}} size='large' onMouseUp={handleCloseTimer}>Trade Now</Button> 93 | </Link> 94 | </Grid> 95 | </Grid> 96 | <div className={classes.titleFooter}></div> 97 | </Container> 98 | </> 99 | 100 | ) 101 | } 102 | 103 | export default Title ; -------------------------------------------------------------------------------- /src/utils/globalstyles.js: -------------------------------------------------------------------------------- 1 | import { withStyles } from "@mui/styles"; 2 | 3 | const styles = theme => ({ 4 | "@global": { 5 | "*:focus": { 6 | outline: 0 7 | }, 8 | ".text-white": { 9 | color: theme.palette.common.white 10 | }, 11 | ".listItemLeftPadding": { 12 | paddingTop: `${theme.spacing(1.75)}px !important`, 13 | paddingBottom: `${theme.spacing(1.75)}px !important`, 14 | paddingLeft: `${theme.spacing(4)}px !important`, 15 | [theme.breakpoints.down("sm")]: { 16 | paddingLeft: `${theme.spacing(4)}px !important` 17 | }, 18 | "@media (max-width: 420px)": { 19 | paddingLeft: `${theme.spacing(1)}px !important` 20 | } 21 | }, 22 | ".container": { 23 | width: "100%", 24 | paddingRight: theme.spacing(4), 25 | paddingLeft: theme.spacing(4), 26 | marginRight: "auto", 27 | marginLeft: "auto", 28 | [theme.breakpoints.up("sm")]: { 29 | maxWidth: 540 30 | }, 31 | [theme.breakpoints.up("md")]: { 32 | maxWidth: 720 33 | }, 34 | [theme.breakpoints.up("lg")]: { 35 | maxWidth: 1170 36 | } 37 | }, 38 | ".row": { 39 | display: "flex", 40 | flexWrap: "wrap", 41 | marginRight: -theme.spacing(2), 42 | marginLeft: -theme.spacing(2) 43 | }, 44 | ".container-fluid": { 45 | width: "100%", 46 | paddingRight: theme.spacing(2), 47 | paddingLeft: theme.spacing(2), 48 | marginRight: "auto", 49 | marginLeft: "auto", 50 | maxWidth: 1370 51 | }, 52 | ".lg-mg-top": { 53 | marginTop: `${theme.spacing(20)}px !important`, 54 | [theme.breakpoints.down("md")]: { 55 | marginTop: `${theme.spacing(18)}px !important` 56 | }, 57 | [theme.breakpoints.down("sm")]: { 58 | marginTop: `${theme.spacing(16)}px !important` 59 | }, 60 | [theme.breakpoints.down("xs")]: { 61 | marginTop: `${theme.spacing(14)}px !important` 62 | } 63 | }, 64 | ".lg-mg-bottom": { 65 | marginBottom: `${theme.spacing(20)}px !important`, 66 | [theme.breakpoints.down("md")]: { 67 | marginBottom: `${theme.spacing(18)}px !important` 68 | }, 69 | [theme.breakpoints.down("sm")]: { 70 | marginBottom: `${theme.spacing(16)}px !important` 71 | }, 72 | [theme.breakpoints.down("xs")]: { 73 | marginBottom: `${theme.spacing(14)}px !important` 74 | } 75 | }, 76 | ".lg-p-top": { 77 | paddingTop: `${theme.spacing(20)}px !important`, 78 | [theme.breakpoints.down("md")]: { 79 | paddingTop: `${theme.spacing(18)}px !important` 80 | }, 81 | [theme.breakpoints.down("sm")]: { 82 | paddingTop: `${theme.spacing(16)}px !important` 83 | }, 84 | [theme.breakpoints.down("xs")]: { 85 | paddingTop: `${theme.spacing(14)}px !important` 86 | } 87 | } 88 | } 89 | }); 90 | 91 | const GlobalStyles = () => { 92 | return null; 93 | } 94 | 95 | export default withStyles(styles, { withTheme: true })(GlobalStyles); 96 | -------------------------------------------------------------------------------- /src/static/tokensinfo/avatar/cardano.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2310" viewBox="0 0 2000 1848"><g fill="#3cc8c8"><path d="M975.46 5.46c43.59-22.73 96.8 30 73.64 73.55-13.45 35.5-64.45 44.94-90.5 17.88C931 70.92 940 19.59 975.46 5.46M506.61 56c26.48-10.9 60 13.36 57.3 42.22 2.81 31.33-35.5 54.39-62.49 39.5-35.76-13.85-31.67-71.9 5.19-81.72M1466.87 138.6c-41.38-5-47.93-70.06-8.09-83.16 30.9-15.07 59.25 13.19 63.77 42.48-6.48 25.01-27.42 47.91-55.68 40.68M613.29 255.55c44.27-28 107.44 13.7 100.63 65.12-2.3 51.92-71.26 82-110.17 46.9-37.62-27.57-31.92-90.82 9.54-112.02M1289.1 285.26c19.75-50.9 99.78-52.44 122.26-2.89 22.22 38.56-5.11 86.31-44.7 99.42-52.44 9.79-102.25-46.9-77.56-96.53M919 378.9c-.43-43.75 39.42-76.35 81-79.33 27.58 5.53 57.64 17.28 69.47 45.11 22.05 38.39 2.47 91.25-37.37 108.87-18.22 10.21-39.76 6.38-59.6 5.19-30.33-14.89-55.87-44.09-53.5-79.84M221.75 442.65c40.44-24.86 95 20.51 79.69 64.44-8.43 38-59.51 53.46-88.71 29.2-31.17-22.73-26.23-77.38 9.02-93.64M1719 442.57c34.31-26.64 90.93 3.92 86.84 47.24 2.3 39.5-46.65 69.29-80.71 48.95-37.51-16.86-41.34-74.57-6.13-96.19M1115.08 521.22c56.62-20.34 123.87 4 156.14 54.48 42.57 61.71 19.92 155.69-46.14 191.1-68.45 41.88-168.4 6.38-193.68-70.06-28.7-68.43 13.11-154.07 83.68-175.52M782.88 527.95c62.75-29.62 147.2-4.77 177.51 59.42 35.67 62.48 8.09 149.48-55.68 181.74-63.85 36.26-153.93 8.77-184.83-58.31-34.65-64.87-3.88-152.98 63-182.85M450.25 641.67c4.77-40.43 42.91-66.74 81.39-69.46 41.46 5 74.58 37.2 79.09 79.16-2.72 41.54-34.82 82.14-78.84 81.89-48.43 4.17-90.89-44.01-81.64-91.59M1432.73 581c49.72-28.94 118.76 13.19 116.55 70.31 3.41 60.52-73 103.17-122.51 67.67-51.43-29.56-47.42-112.81 5.96-137.98M647.69 794.3c58.15-16 124.64 11.41 153.16 64.86 31.24 53.8 18.47 128.54-30.05 168-62.23 57.88-177 34.64-210.12-44.35-38.06-72.41 8.17-169.45 87.01-188.51M1277.78 794c56.53-16.17 122.94 5.62 153.33 57.12 40.18 58.9 21 146.75-38.82 184.72-62.66 44.09-159.72 20.94-194.2-48-41.8-71.31.26-172.09 79.69-193.84M273.68 861.2c50.23-19 105.91 36.43 85.56 86.23-12.43 45.37-76.37 62.14-109.4 28.69-38.65-31.41-24.34-101.3 23.84-114.92M1635.18 933.47c-1.45-41.62 29-78.48 71.68-80.78 34.4 5.45 67.85 33.2 65.13 70.65 3.15 49.46-56.45 83.08-98.59 59.84-19.75-10.04-29.88-30.3-38.22-49.71M26.7 885.63c30.22-13.19 67.6 13 60.7 46.56-1.62 38-57.72 52.61-78.33 20.86C-9.14 931 1.76 897 26.7 885.63zM1932.13 884.87c21.28-15.15 55.42-4.26 63.85 20.6 14.3 27.15-11.92 64.35-42.48 59.76-42.9 3.91-56.78-61.47-21.37-80.36M811.83 1067.28c79.52-20.68 165 45.63 165.5 127.51 5.19 82.74-79 156.11-160.4 137-62.92-10.13-112.29-70.74-110.25-134.32-.17-60.81 45.72-117.33 105.15-130.19M1126.75 1067.11c80.71-22.56 168.74 44.94 167.46 128.71 4.26 81.21-77.3 152.11-157 136-75-9.7-130.34-92.1-109.4-164.88 10.57-48.5 51.09-87.94 98.94-99.83M519.56 1117.51c55.85-9.53 108.21 52.78 85.56 105.81-16.52 56.51-98.76 71.84-135.12 25.68-42.65-44.33-10.81-125.37 49.56-131.49M1443.11 1120c49.8-20.86 110.93 22.22 107.1 76.27 2 59.5-73.47 100.53-122.17 65.8-55.16-31.18-45.12-122.94 15.07-142.07M1701.25 1378.92c-19.5-36.35 15.92-84.53 56.28-77.8 20.09-.34 34.14 15.49 47 28.77 2.64 21.54 7.07 47.24-10.81 63.84-24.28 30.73-79.28 21.96-92.47-14.81M221.58 1311.24c37.72-25.11 92 12.34 83.52 56.44-4.51 39-53.64 61.29-86 39.16-34.73-20.09-33.45-77.29 2.48-95.6M966.78 1392.88c49.38-21.79 112.29 21.2 107.61 75.59 3.66 60.1-74.15 101.72-122.43 65.63-53.63-30.99-44.69-122.16 14.82-141.22M621.63 1473.4c42.06-22.13 98.5 16.09 94.67 63.16 1.28 38.65-36.44 71.59-74.58 65.88-31.59-.68-52.19-29-62.32-55.93.52-29.35 12.6-62.04 42.23-73.11M1320.77 1474.08c43.25-26.73 104.72 11.66 100.63 62 1.11 52.61-68.36 86.31-108.63 51.75-38.99-27.09-34.23-92.21 8-113.75M1442.35 1774.65c-19.24-29.11 3.41-64.18 34.65-70.82 25.12 5.11 51.68 24 46.4 53.12-3.66 39.41-61.3 51.5-81.05 17.7M477.24 1749.37c7.66-23.07 26.22-46 53.38-40 39.59 2.81 51.34 62.48 16.69 80.87-31.16 21.01-67.31-7.76-70.07-40.87M942.85 1775.84c7.58-34.13 51.76-50.73 80.88-32.6 19.24 8.26 24.86 29.79 29.8 48.09-2.64 9.53-5 19.07-7.32 28.6-11.92 14.13-27.24 28.26-47.08 27.75-36.87 4.32-70.13-37.36-56.28-71.84"/></g></svg> -------------------------------------------------------------------------------- /src/components/Exchange/OrderBook/OrderSelectBox/OrderTypeBt/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import { useState , useEffect } from 'react' ; 7 | 8 | import clsx from 'clsx'; 9 | 10 | import { 11 | Box , 12 | Stack , 13 | Tooltip 14 | } from '@mui/material' ; 15 | 16 | import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined'; 17 | 18 | import StyledBadge from './Badge.styled' ; 19 | import { makeStyles } from '@mui/styles' ; 20 | 21 | const useStyles = makeStyles(() => ({ 22 | root : { 23 | width : "20px" , 24 | marginLeft : "5px" , 25 | marginRight : "5px" , 26 | cursor : "pointer" 27 | }, 28 | sell : { 29 | backgroundColor : "#c74a4d", 30 | border : "1px solid #c74a4d" 31 | }, 32 | buy : { 33 | backgroundColor : "#3c868f" , 34 | border : "1px solid #3c868f" 35 | }, 36 | line : { 37 | marginTop : "2px" 38 | } 39 | })); 40 | 41 | 42 | const OrderTypeBt = (props) => { 43 | 44 | const classes = useStyles() ; 45 | 46 | const { 47 | orderType , isChecked , setOrderType , 48 | handleChangeOrderType , 49 | } = props ; 50 | 51 | const [sellCount , setSellCount] = useState(0) ; 52 | const [buyCount , setBuyCount] = useState(0) ; 53 | 54 | let title ; 55 | 56 | const emitOrderType = () => { 57 | if(handleChangeOrderType){ 58 | switch(orderType){ 59 | case "sell" : 60 | setOrderType(1) ; 61 | handleChangeOrderType(1) ; 62 | return ; 63 | case "buy" : 64 | setOrderType(2); 65 | handleChangeOrderType(2) ; 66 | return ; 67 | case "both" : 68 | setOrderType(3); 69 | handleChangeOrderType(3) ; 70 | return ; 71 | default : 72 | return ; 73 | } 74 | } 75 | return ; 76 | } 77 | 78 | useEffect(() => { 79 | switch(orderType){ 80 | case "sell" : 81 | setSellCount(4); 82 | return ; 83 | case "buy" : 84 | setBuyCount(4) 85 | return ; 86 | case "both" : 87 | setSellCount(2); 88 | setBuyCount(2) ; 89 | return ; 90 | default : 91 | return ; 92 | } 93 | } , [orderType]) ; 94 | 95 | return ( 96 | <Tooltip title={orderType === "sell" ? "Sell Orders" : (orderType === "buy" ? "Buy Orders" : "OrderBook")}> 97 | <StyledBadge color={"success"} badgeContent={ isChecked ? <CheckOutlinedIcon/> :"0"}> 98 | <Box component={"div"} className={classes.root} onClick={() => emitOrderType()}> 99 | <Stack display={"flex"} flexDirection={"column"}> 100 | { 101 | [...Array(sellCount)].map((item , index) => { 102 | return ( 103 | <Box component={"div"} className={clsx(classes.sell , classes.line)} key={index}> 104 | </Box> 105 | ) 106 | }) 107 | } 108 | { 109 | [...Array(buyCount)].map((item , index) => { 110 | return ( 111 | <Box component={"div"} className={clsx(classes.buy , classes.line)} key={index}> 112 | </Box> 113 | ) 114 | }) 115 | } 116 | </Stack> 117 | </Box> 118 | </StyledBadge> 119 | </Tooltip> 120 | ) 121 | } 122 | 123 | export default OrderTypeBt; -------------------------------------------------------------------------------- /src/components/Exchange/TokenList/TokenInfoList/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { useState } from 'react' ; 6 | 7 | import { connect } from 'react-redux'; 8 | 9 | import { 10 | Box , 11 | TableContainer , 12 | Table, 13 | TableHead, 14 | TableBody, 15 | TableCell, 16 | TableRow 17 | } from '@mui/material' ; 18 | 19 | import { makeStyles } from '@mui/styles'; 20 | 21 | const useStyles = makeStyles(() => ({ 22 | root : { 23 | '&::-webkit-scrollbar': { 24 | width: '8px', 25 | backgroundColor : "lightgray", 26 | borderRadius : "5px" 27 | }, 28 | '&::-webkit-scrollbar-track': { 29 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 30 | }, 31 | '&::-webkit-scrollbar-thumb': { 32 | backgroundColor: 'gray', 33 | borderRadius : "5px" 34 | }, 35 | 36 | overflow : "hidden" , 37 | overflowY : "scroll" , 38 | boxSizing : "border-box" , 39 | 40 | height : "calc(100vh - 192px)" , 41 | 42 | "& .MuiTableCell-root" :{ 43 | padding : "0px !important", 44 | textAlign : "center", 45 | fontSize : "11px" , 46 | fontWeight : "bold" , 47 | textAlign : "right" , 48 | cursor : "pointer" 49 | } 50 | } 51 | })); 52 | 53 | const TokenInfoList = (props) => { 54 | 55 | const classes = useStyles() ; 56 | 57 | const { 58 | tokenLiquidityList , 59 | handleChangeTokenId , handleChangeToken , handlePairInfoVisible 60 | } = props ; 61 | 62 | const headFields = [ 63 | "Pair" , 64 | "Price" , 65 | "Volume" , 66 | "24H" 67 | ]; 68 | 69 | const onSelectToken = (index , item) => { 70 | handleChangeToken(item) ; 71 | handleChangeTokenId(index) ; 72 | handlePairInfoVisible() ; 73 | 74 | return ; 75 | } 76 | 77 | return ( 78 | <Box component={"div"} className={classes.root} > 79 | <TableContainer sx={{paddingRight:"5px"}}> 80 | <Table> 81 | <TableHead> 82 | <TableRow> 83 | { 84 | headFields.map((field, index) => { 85 | return ( 86 | <TableCell key={index}>{ field }</TableCell> 87 | ) 88 | }) 89 | } 90 | </TableRow> 91 | </TableHead> 92 | <TableBody> 93 | { 94 | tokenLiquidityList.length !== 0 ? tokenLiquidityList.map((item , index) => { 95 | return ( 96 | <TableRow key={index} onClick={() => onSelectToken(index , item)}> 97 | <TableCell>{item.symbol} / {item.pair_type}</TableCell> 98 | <TableCell sx={{color : Number(item.percentChange) <= 0 ? "#c74a4d" : "#3c868f"}} >{Number(item.price).toFixed(5)}</TableCell> 99 | <TableCell>{Number(item.total24hr).toFixed(0)}</TableCell> 100 | <TableCell sx={{color : Number(item.percentChange) <= 0 ? "#c74a4d" : "#3c868f"}} >{item.percentChange}%</TableCell> 101 | </TableRow> 102 | ) 103 | }) : <> 104 | </> 105 | } 106 | </TableBody> 107 | </Table> 108 | </TableContainer> 109 | </Box> 110 | ) 111 | } 112 | 113 | 114 | const mapStateToProps = state => ({ 115 | tokenLiquidityList : state.token.tokenLiquidityList 116 | }) 117 | 118 | const mapDispatchToProps = { 119 | } 120 | 121 | export default connect(mapStateToProps, mapDispatchToProps)(TokenInfoList) ; -------------------------------------------------------------------------------- /src/components/Exchange/OrderBook/OrderSelectBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import { useState } from 'react' ; 7 | 8 | import OrderTypeBt from './OrderTypeBt'; 9 | 10 | import clsx from 'clsx'; 11 | 12 | import { 13 | Box , 14 | Grid , 15 | MenuItem , 16 | FormControl , 17 | Select 18 | } from '@mui/material' ; 19 | 20 | import { makeStyles } from '@mui/styles' ; 21 | 22 | const useStyles = makeStyles (() => ({ 23 | root : { 24 | borderBottom : "2px solid lightgray" , 25 | height : "43px" , 26 | display: "flex" , 27 | alignItems : "center" , 28 | "& .MuiSvgIcon-root" : { 29 | marginLeft : "5px" , 30 | marginRight : "5px" 31 | }, 32 | }, 33 | menuItem : { 34 | padding:"0px !important" , 35 | display:"flex !important" , 36 | justifyContent : "center !important" 37 | }, 38 | flexBox : { 39 | display : "flex" , 40 | alignItems : "center" 41 | }, 42 | orderLabel : { 43 | justifyContent : "center" , 44 | fontWeight : 'bold' 45 | }, 46 | orderType : { 47 | justifyContent : "flex-end" , 48 | } 49 | })); 50 | 51 | const OrderSelectBox = (props) => { 52 | 53 | const classes = useStyles() ; 54 | 55 | const { 56 | handleChangeDecimal, handleChangeOrderType 57 | } = props ; 58 | 59 | const [decimal, setDecimal] = useState(6); 60 | const [orderType , setOrderType] = useState(3) ; 61 | 62 | const handleChange = (event) => { 63 | 64 | setDecimal(event.target.value) ; 65 | handleChangeDecimal(event.target.value) ; 66 | 67 | return ; 68 | }; 69 | 70 | return ( 71 | <Box className={classes.root} component={"div"}> 72 | <Grid container > 73 | <Grid item xs={6} className={clsx(classes.flexBox , classes.orderLabel)}> 74 | Order Book 75 | </Grid> 76 | <Grid item xs={6}> 77 | <Box component={"div"} className={clsx( classes.flexBox , classes.orderType )}> 78 | <OrderTypeBt 79 | orderType={"sell"} 80 | handleChangeOrderType={handleChangeOrderType} 81 | isChecked={ orderType === 1 } 82 | setOrderType={setOrderType} 83 | /> 84 | <OrderTypeBt 85 | orderType={"buy"} 86 | handleChangeOrderType={handleChangeOrderType} 87 | isChecked={ orderType === 2 } 88 | setOrderType={setOrderType} 89 | /> 90 | <OrderTypeBt 91 | orderType={"both"} 92 | handleChangeOrderType={handleChangeOrderType} 93 | isChecked={ orderType === 3 } 94 | setOrderType={setOrderType} 95 | /> 96 | <FormControl variant="standard" sx={{marginLeft : "5px"}}> 97 | <Select 98 | value={decimal} 99 | onChange={handleChange} 100 | disableUnderline 101 | > 102 | <MenuItem value={0} className={classes.menuItem}>0</MenuItem> 103 | <MenuItem value={1} className={classes.menuItem}>1</MenuItem> 104 | <MenuItem value={2} className={classes.menuItem}>2</MenuItem> 105 | <MenuItem value={4} className={classes.menuItem}>4</MenuItem> 106 | <MenuItem value={6} className={classes.menuItem}>6</MenuItem> 107 | <MenuItem value={8} className={classes.menuItem}>8</MenuItem> 108 | </Select> 109 | </FormControl> 110 | </Box> 111 | </Grid> 112 | </Grid> 113 | </Box> 114 | ) 115 | } 116 | 117 | export default OrderSelectBox ; -------------------------------------------------------------------------------- /src/components/Balances/AddressWidget/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useEffect, useRef , useState } from 'react' ; 4 | 5 | import { useWeb3React } from "@web3-react/core"; 6 | 7 | import styled from '@emotion/styled'; 8 | 9 | import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; 10 | 11 | import ContentCopyIcon from '@mui/icons-material/ContentCopy'; 12 | 13 | import { 14 | Card , 15 | CardContent, 16 | Grid , 17 | FormLabel , 18 | useMediaQuery , 19 | Box 20 | } from '@mui/material'; 21 | 22 | import { 23 | MDBContainer , 24 | MDBInputGroup, 25 | } from "mdbreact"; 26 | 27 | import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined'; 28 | 29 | import { makeStyles } from '@mui/styles'; 30 | 31 | const BootstrapTooltip = styled( ({ className, ...props }) => ( 32 | 33 | <Tooltip {...props} arrow classes={{ popper: className }} /> 34 | ) ) ( ({ theme }) => ({ 35 | [`& .${tooltipClasses.arrow}`]: { 36 | color: theme.palette.common.black, 37 | }, 38 | [`& .${tooltipClasses.tooltip}`]: { 39 | backgroundColor: theme.palette.common.black, 40 | }, 41 | })); 42 | 43 | const useStyles = makeStyles(() => ({ 44 | root : { 45 | "& .MuiPaper-root" : { 46 | border : "1px solid lightgray" , 47 | } , 48 | "& .MuiGrid-root" :{ 49 | textAlign : "center" 50 | }, 51 | "& input" : { 52 | fontSize : "14px" 53 | } , 54 | }, 55 | sendBtn : { 56 | backgroundColor : "#206bc4 !important" , 57 | }, 58 | receiveBtn : { 59 | backgroundColor : "#f76707 !important" 60 | }, 61 | toolTip : { 62 | color : "white" , 63 | position : "absolute", 64 | right : "0px" , 65 | padding : "5px" , 66 | opacity : "0" 67 | }, 68 | })); 69 | 70 | 71 | const AddressWidget = () => { 72 | 73 | const { active, account, chainId, library, activate , deactivate} = useWeb3React(); 74 | 75 | const classes = useStyles() ; 76 | const addressCtrl = useRef(null) ; 77 | const [isCopied , setIsCopied] = useState(false) ; 78 | 79 | const isXs = useMediaQuery("(min-width : 645px)") ; 80 | 81 | useEffect(() =>{ 82 | if(active) { 83 | if(addressCtrl) { 84 | addressCtrl.current.value = account ; 85 | } 86 | } 87 | } , [active, account , library]) ; 88 | 89 | const emitCopyEvent = () => { 90 | setIsCopied(true) ; 91 | addressCtrl.current.select() ; 92 | document.execCommand("copy"); 93 | } 94 | return ( 95 | <div className={classes.root}> 96 | <Card> 97 | <CardContent> 98 | <Grid container> 99 | <Grid item xs={1}> 100 | <FormLabel> 101 | <AccountCircleOutlinedIcon /> 102 | </FormLabel> 103 | </Grid> 104 | <Grid item xs={isXs ? 10 : 11} > 105 | <MDBContainer> 106 | <MDBInputGroup 107 | containerClassName="mb-3" 108 | append={ 109 | <BootstrapTooltip title={isCopied ? "Copied" : "Copy"} placement="right" > 110 | <Box component={"span"} className='input-group-text' onClick={() => emitCopyEvent()} onMouseLeave={() => setIsCopied(false)}> 111 | <ContentCopyIcon fontSize={"small"} /> 112 | </Box> 113 | </BootstrapTooltip> 114 | } 115 | inputs={ 116 | <Box component={"input"} type="text" className="form-control" id="address" ref={addressCtrl} readOnly/> 117 | } 118 | /> 119 | </MDBContainer> 120 | </Grid> 121 | <Grid item xs={1}> 122 | </Grid> 123 | </Grid> 124 | </CardContent> 125 | </Card> 126 | </div> 127 | ) 128 | } 129 | 130 | export default AddressWidget ; -------------------------------------------------------------------------------- /src/redux/actions/stake.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import axios from 'axios' ; 4 | import { PRIVATE_CALADEX_API } from '../../static/constants'; 5 | import { json2array } from '../../utils/helper'; 6 | import ActionTypes from './actionTypes'; 7 | 8 | 9 | export const GetTokenStakeInfoList = (account ,method , token_symbol) => async dispatch => { 10 | 11 | try { 12 | let resStakeInfo = await axios.post(`${PRIVATE_CALADEX_API}stake/get` , {search_str : token_symbol}) ; 13 | 14 | if(resStakeInfo.data.data.data.length === 0) { 15 | return dispatch({ 16 | type : ActionTypes.GetTokenStakeInfoList , 17 | payload : "No Available Information." 18 | }) ; 19 | } 20 | 21 | let tokenStakeInfo = {} ; 22 | 23 | let resBalanceInfo = await axios.post(`${PRIVATE_CALADEX_API}balance/get/${account}`) ; 24 | 25 | let tokenBalanceInfo = {} ; 26 | 27 | for(let element of resBalanceInfo.data.data.doc) { 28 | tokenBalanceInfo[element.token_id.address] = element.caladex_balance ; 29 | } 30 | 31 | for(let element of resStakeInfo.data.data.data) { 32 | 33 | if(typeof tokenBalanceInfo[element.token_id.address] !== "undefined"){ 34 | tokenStakeInfo[element._id] = { 35 | ...element , 36 | is_stake : false , 37 | duration : '--' , 38 | balance : tokenBalanceInfo[element.token_id.address] 39 | } 40 | } else { 41 | tokenStakeInfo[element._id] = { 42 | ...element , 43 | is_stake : false , 44 | duration : '--' , 45 | balance : 0 46 | } 47 | } 48 | } 49 | 50 | let resStakeLogInfo = await axios.post(`${PRIVATE_CALADEX_API}stakelog/get/${account}`) ; 51 | 52 | for(let element of resStakeLogInfo.data.data.doc) { 53 | if(typeof tokenStakeInfo[element.stake_id._id] !== "undefined"){ 54 | tokenStakeInfo[element.stake_id._id].is_stake = true ; 55 | tokenStakeInfo[element.stake_id._id].duration = element.duration ; 56 | tokenStakeInfo[element.stake_id._id].stakelog_id = element.stakelog_id ; 57 | } 58 | } 59 | 60 | 61 | let tokenStakeInfoArray = json2array(tokenStakeInfo) ; 62 | 63 | return dispatch({ 64 | type : ActionTypes.GetTokenStakeInfoList , 65 | payload : tokenStakeInfoArray 66 | }) 67 | } 68 | catch(err) { 69 | console.log(err) ; 70 | } 71 | } 72 | 73 | export const AddTokenStakeLog = (account , stake_id , amount , duration) => async dispatch => { 74 | try{ 75 | let res = await axios.post(`${PRIVATE_CALADEX_API}stakelog/add` , { 76 | address : account , 77 | stake_id : stake_id , 78 | amount : amount , 79 | duration : duration , 80 | }); 81 | 82 | if(res.status === 201) { 83 | return "Error" ; 84 | } 85 | return "Ok" ; 86 | } 87 | catch (err) { 88 | console.log(err) ; 89 | return "Error" ; 90 | } 91 | } 92 | export const RemoveTokenStakeLog = async (account , stakelog_id) => { 93 | try { 94 | let res = await axios.post(`${PRIVATE_CALADEX_API}stakelog/unstake` , { 95 | address : account , 96 | stakelog_id : stakelog_id 97 | }) ; 98 | 99 | if(res.status === 201) { 100 | return "Error" ; 101 | } 102 | return "Ok" ; 103 | } 104 | catch (err) { 105 | console.log(err) ; 106 | return "Error" ; 107 | } 108 | } 109 | export const GetStakingInfo = async (stakelog_id ) => { 110 | try { 111 | let res = await axios.post(`${PRIVATE_CALADEX_API}stakelog/info` , { 112 | stakelog_id : stakelog_id 113 | }) ; 114 | 115 | if(res.status === 201) { 116 | return "Error" ; 117 | } 118 | 119 | return res.data.data.doc ; 120 | } 121 | catch (err) { 122 | console.log(err) ; 123 | return "Error" ; 124 | } 125 | } 126 | 127 | export const GetStakeDateTime = async () => { 128 | try { 129 | let resDateTime = await axios.post(`${PRIVATE_CALADEX_API}stake/time` , {}) ; 130 | 131 | return resDateTime.data.current_time ; 132 | } 133 | catch (err) { 134 | console.log(err) ; 135 | } 136 | } -------------------------------------------------------------------------------- /src/components/Exchange/CoinBanner/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React, { useEffect } from 'react' ; 5 | 6 | import { useState } from 'react' ; 7 | 8 | import { connect } from 'react-redux'; 9 | 10 | import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; 11 | import ExpandLessIcon from '@mui/icons-material/ExpandLess'; 12 | 13 | //_____________styles_______________ 14 | import { 15 | Box, 16 | Grid , 17 | } from '@mui/material' ; 18 | 19 | import { makeStyles } from '@mui/styles'; 20 | 21 | const useStyles = makeStyles((theme) => ({ 22 | root : { 23 | backgroundColor : theme.palette.primary.main , 24 | display : "flex", 25 | alignItems : "center" , 26 | 27 | "& .MuiGrid-item" : { 28 | display : "flex" , 29 | flexDirection : "column" , 30 | justifyContent : "center" , 31 | alignItems : "flex-end" , 32 | paddingLeft: "15px" , 33 | paddingRight : "15px", 34 | paddingTop : "5px" , 35 | paddingBottom : "5px" , 36 | } , 37 | "& .MuiInputBase-root" : { 38 | color : "white !important" , 39 | textAlign : "right" , 40 | fontSize : "14px" , 41 | }, 42 | "& .MuiSvgIcon-root" :{ 43 | color : "white !important" 44 | } 45 | } , 46 | label : { 47 | paddingBottom : "5px" , 48 | color : "#8fb5fc" , 49 | fontSize : "11px" , 50 | } , 51 | trade : { 52 | display : "flex" , 53 | alignItems : "center" , 54 | justifyContent : "flex-end" , 55 | fontSize : "14px" , 56 | color : "white" , 57 | } 58 | })) ; 59 | 60 | //___________component_________________ 61 | const CoinBanner = (props) => { 62 | 63 | const { 64 | tokenLiquidityList , 65 | tokenId , 66 | handlePairInfoVisible , 67 | } = props ; 68 | 69 | const classes = useStyles() ; 70 | 71 | const [ icon , setIcon ] = useState(0) ; 72 | 73 | const labelList = [ 74 | { 75 | index : "last" , 76 | label : "Last Price" 77 | } , 78 | { 79 | index : "percentChange" , 80 | label : "24h Change" 81 | }, 82 | { 83 | index : "low24hr" , 84 | label : "24h Low" 85 | }, 86 | { 87 | index : "high24hr" , 88 | label : "24h High" 89 | } , 90 | { 91 | index : "total24hr" , 92 | label : "Volume" 93 | } 94 | ] 95 | 96 | const handleChangeIcon = () => { 97 | setIcon(!icon) ; 98 | } 99 | 100 | const onClickToken = () => { 101 | handlePairInfoVisible() ; 102 | handleChangeIcon() ; 103 | } 104 | 105 | return ( 106 | <Box component={"div"} className={classes.root}> 107 | <Grid container> 108 | <Grid item xs={3} > 109 | <Box component={"div"} className={classes.trade} sx={{cursor : "pointer"}} onClick={onClickToken}> 110 | { 111 | tokenId !== null && tokenLiquidityList.length !== 0 ? <> 112 | { tokenLiquidityList[tokenId].symbol + " / " + tokenLiquidityList[tokenId].pair_type} 113 | { icon ? <ExpandMoreIcon /> : <ExpandLessIcon />} 114 | </> :<></> 115 | } 116 | </Box> 117 | <Box component={"div"} className={classes.label} sx={{marginRight : "24px"}}> 118 | Tether 119 | </Box> 120 | </Grid> 121 | { 122 | tokenId !== null && tokenLiquidityList.length !== 0 ? 123 | labelList.map(( item , index ) => { 124 | return ( 125 | <Grid item key={index}> 126 | <Box component={"div"} className={classes.label}> 127 | { item.label } 128 | </Box> 129 | <Box component={"div"} className={classes.trade}> 130 | { tokenLiquidityList[tokenId][item.index] } 131 | </Box> 132 | </Grid> 133 | ) 134 | }) 135 | : <> 136 | </> 137 | } 138 | </Grid> 139 | </Box> 140 | ) 141 | } 142 | 143 | const mapStateToProps = state => ({ 144 | tokenLiquidityList : state.token.tokenLiquidityList 145 | }) 146 | 147 | export default connect(mapStateToProps)(CoinBanner) ; -------------------------------------------------------------------------------- /src/components/Layouts/Header/DrawerNavbar.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import { makeStyles } from '@mui/styles'; 7 | 8 | import TokenListing from '../../Common/TokenListing'; 9 | 10 | import { 11 | Drawer , 12 | List, 13 | ListItem , 14 | IconButton, 15 | Divider , 16 | Button , 17 | Typography , 18 | Link , 19 | Box , 20 | useMediaQuery 21 | } from '@mui/material' ; 22 | 23 | import CloseIcon from '@mui/icons-material/Close' ; 24 | 25 | const useStyles = makeStyles(theme=> ({ 26 | root: { 27 | "& .MuiDrawer-paper": { 28 | width : "100% !important", 29 | marginTop: "60px !important" , 30 | backgroundColor : theme.palette.primary.main + " !important" 31 | } 32 | }, 33 | drawerItem: { 34 | color : "white !important", 35 | cursor : "pointer" , 36 | padding : "0px" , 37 | textDecoration : 'none' , 38 | fontWeight: 'bold' , 39 | fontSize : "20px" , 40 | height : "430px !important" , 41 | '&:hover' : { 42 | textDecoration : "none", 43 | color : "white", 44 | } , 45 | } 46 | })); 47 | const DrawerNavbar = (props) => { 48 | 49 | const { 50 | menuItems, 51 | handleMobileDrawerOpen, 52 | open, 53 | } = props ; 54 | 55 | const classes = useStyles() ; 56 | 57 | const isXs = useMediaQuery("(min-width : 1316px)") ; 58 | 59 | const linkClicked = (path) => { 60 | window.location.pathname = path ; 61 | } 62 | return ( 63 | <div className={classes.root}> 64 | <Drawer 65 | variant="persistent" 66 | anchor="right" 67 | open={open} 68 | classes={{ 69 | paper: classes.drawerPaper, 70 | }} 71 | > 72 | <List className={classes.drawer}> 73 | 74 | <ListItem sx={{display:"flex" , justifyContent: "flex-end" }}> 75 | <IconButton 76 | aria-label="open drawer" 77 | onClick={handleMobileDrawerOpen} 78 | > 79 | <CloseIcon sx={{color : "white"}}/> 80 | </IconButton> 81 | </ListItem> 82 | 83 | <Divider /> 84 | 85 | { !isXs ? menuItems.map( element => { 86 | if( element.name === "Token Listing" ) 87 | return ( 88 | <div key={element.index}> 89 | <ListItem button data-toggle="modal" data-target="#myModal"> 90 | <Box component="span" display="inline" color="white"> 91 | Token Listing 92 | </Box> 93 | <TokenListing /> 94 | </ListItem> 95 | <Divider /> 96 | </div> 97 | ) 98 | else 99 | return( 100 | <div key={element.index}> 101 | <Link className={classes.drawerItem} 102 | onClick={() => linkClicked(element.link)} 103 | > 104 | <ListItem button onClick={handleMobileDrawerOpen} sx={{height : "50px"}}> 105 | <Typography noWrap> 106 | 107 | {element.name} 108 | 109 | </Typography> 110 | </ListItem> 111 | </Link> 112 | <Divider /> 113 | </div> 114 | ) 115 | }) : ( 116 | <> 117 | </> 118 | ) 119 | } 120 | 121 | <ListItem onClick={handleMobileDrawerOpen}> 122 | <Button size="large" variant="contained" sx={{borderRadius : "30px"}} >Wallet Connect</Button> 123 | </ListItem> 124 | </List> 125 | </Drawer> 126 | </div> 127 | ) 128 | } 129 | 130 | export default DrawerNavbar ; -------------------------------------------------------------------------------- /src/components/Exchange/Trade/MarketTradeList/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useEffect } from 'react' ; 4 | 5 | import { connect } from 'react-redux'; 6 | import { GetTokenTradeList } from '../../../../redux/actions/trade' ; 7 | 8 | import { formatDBDate } from '../../../../utils/helper'; 9 | 10 | import { 11 | Box , 12 | TableContainer, 13 | Table, 14 | TableHead, 15 | TableBody, 16 | TableRow, 17 | TableCell 18 | } from '@mui/material' ; 19 | 20 | import { makeStyles } from '@mui/styles'; 21 | 22 | const useStyles = makeStyles((theme) => ({ 23 | root : { 24 | 25 | '&::-webkit-scrollbar': { 26 | width: '8px', 27 | backgroundColor : "lightgray", 28 | borderRadius : "5px" 29 | }, 30 | '&::-webkit-scrollbar-track': { 31 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 32 | }, 33 | '&::-webkit-scrollbar-thumb': { 34 | backgroundColor: 'gray', 35 | borderRadius : "5px" 36 | }, 37 | 38 | maxHeight : "calc(50vh - 88px)" , 39 | height : "calc(50vh - 88px)" , 40 | overflow : "hidden" , 41 | overflowY : "scroll" , 42 | borderBottom : "1px solid gray" , 43 | borderTop : "1px solid gray" , 44 | 45 | "& .MuiTableCell-root" : { 46 | padding : "5px" , 47 | fontSize : "10px", 48 | textAlign : "right" , 49 | }, 50 | "& .MuiTableHead-root" :{ 51 | "& .MuiTableCell-root" : { 52 | fontWeight : "bold" , 53 | color : theme.palette.primary.main , 54 | fontSize : "12px" 55 | }, 56 | } 57 | } 58 | })); 59 | 60 | let tradeListTimer ; 61 | 62 | const MarketTradeList = (props) => { 63 | 64 | const classes = useStyles() ; 65 | 66 | const { tradeToken , GetTokenTradeList , orderTradeList } = props ; 67 | 68 | const headFields = [ 69 | "Time" , 70 | "Price" , 71 | "Amount" , 72 | "Total" 73 | ] 74 | 75 | const setTradeListTimer = async (tradeToken) => { 76 | clearInterval(tradeListTimer) ; 77 | 78 | tradeListTimer = setInterval(async () => { 79 | await GetTokenTradeList(tradeToken._id , tradeToken.pair_type) ; 80 | } , 15000) 81 | } 82 | 83 | useEffect(() => { 84 | return () => { 85 | clearInterval(tradeListTimer) ; 86 | } 87 | } , []) ; 88 | 89 | useEffect(async () => { 90 | if(tradeToken) { 91 | await GetTokenTradeList(tradeToken._id , tradeToken.pair_type) ; 92 | 93 | await setTradeListTimer(tradeToken) ; 94 | } 95 | } , [tradeToken]) ; 96 | 97 | return ( 98 | <Box component={"div"} className={classes.root}> 99 | <TableContainer> 100 | <Table stickyHeader aria-label="sticky table"> 101 | <TableHead> 102 | <TableRow> 103 | { 104 | headFields.map(( field , index ) => { 105 | return ( 106 | <TableCell key={index}> 107 | { field } 108 | </TableCell> 109 | ) 110 | }) 111 | } 112 | </TableRow> 113 | </TableHead> 114 | <TableBody> 115 | { 116 | orderTradeList.length !== 0 ? orderTradeList.map((item , index) => { 117 | return ( 118 | <TableRow key={index} > 119 | <TableCell>{ formatDBDate(item.time).substr(11,8) }</TableCell> 120 | <TableCell sx={{ color : item.type === "sell" ? "#c74a4d" : "#3c868f"}}>{item.price}</TableCell> 121 | <TableCell>{item.amount}</TableCell> 122 | <TableCell>{ Number(Number(item.price) * Number(item.amount)).toFixed(4) }</TableCell> 123 | </TableRow> 124 | ) 125 | }) :<> 126 | </> 127 | } 128 | </TableBody> 129 | </Table> 130 | </TableContainer> 131 | </Box> 132 | ) 133 | } 134 | 135 | const mapStateTopProps = state => ({ 136 | orderTradeList : state.trade.orderTradeList 137 | }) 138 | 139 | const mapDispatchToProps = { 140 | GetTokenTradeList 141 | } 142 | 143 | export default connect(mapStateTopProps , mapDispatchToProps)(MarketTradeList) ; -------------------------------------------------------------------------------- /src/components/Common/FruitBar/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | import { 6 | Card , 7 | CardContent, 8 | CircularProgress, 9 | Grid, 10 | IconButton, 11 | useMediaQuery, 12 | } from '@mui/material' ; 13 | 14 | import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; 15 | import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; 16 | 17 | import { makeStyles } from '@mui/styles'; 18 | 19 | const useStyles = makeStyles((theme) => ({ 20 | fruit : { 21 | borderRadius : "0px !important", 22 | "& .MuiCardContent-root" :{ 23 | paddingTop : '1rem !important' , 24 | paddingBottom : '1rem !important' , 25 | } , 26 | "& .MuiButtonBase-root" : { 27 | height : "25px !important" , 28 | width : "25px !important" , 29 | }, 30 | "& svg" : { 31 | fontSize : "25px !important" , 32 | color : "white" , 33 | "&:hover" : { 34 | color : "#235580" 35 | } 36 | } 37 | } , 38 | fruitContent : { 39 | textAlign : "center" , 40 | borderRadius : "0px" , 41 | backgroundColor : theme.palette.primary.main , 42 | }, 43 | fruitItem : { 44 | fontSize : "16px" , 45 | fontFamily : "Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif" , 46 | fontWeight : "500" , 47 | color : "white" , 48 | cursor : "pointer" , 49 | display : "flex" , 50 | justifyContent : "center" , 51 | alignItems : "center" , 52 | }, 53 | loading : { 54 | color : "white !important" 55 | }, 56 | })); 57 | const FruitBar = (props) => { 58 | 59 | const { goToPrevious , goToNext , firstTokenInfo , lastTokenInfo , middleTokenInfo , countTokens , firstTradingIndex} = props; 60 | const isXs = useMediaQuery("(min-width : 599px)") ; 61 | const isXsItem = useMediaQuery("(min-width:930px)") ; 62 | 63 | const classes = useStyles() ; 64 | 65 | return ( 66 | <> 67 | <Card className={classes.fruit}> 68 | <CardContent className={classes.fruitContent}> 69 | <Grid container> 70 | <Grid item xs={1} className={classes.fruitItem}> 71 | <IconButton size='small' disabled={firstTradingIndex === 0 ? true : false} onClick={() => goToPrevious()}> 72 | <ArrowBackIosIcon /> 73 | </IconButton> 74 | </Grid> 75 | <Grid item xs={10}> 76 | <Grid container sx={isXsItem ? {display:"flex" , flexDirection:"row" } : {display:"flex" , flexDirection:"column"}}> 77 | { 78 | countTokens === 0 ? <> 79 | <Grid item xs={12} > 80 | <CircularProgress size={20} className={classes.loading}/> 81 | </Grid> 82 | </> :<> 83 | <Grid item xs={isXsItem ? (countTokens === 2 ? 6:4) : 12} className={classes.fruitItem} sx={{display: countTokens >=2 ? "flex" : "none"}}> 84 | {firstTokenInfo} 85 | </Grid> 86 | <Grid item xs={isXsItem ? (countTokens === 1 ? 12 : 4) : 12} className={classes.fruitItem} sx={{display: countTokens >=3 || countTokens === 1 ? "flex" : "none"}}> 87 | {middleTokenInfo} 88 | </Grid> 89 | <Grid item xs={isXsItem ? (countTokens === 2 ? 6:4) : 12} className={classes.fruitItem} sx={{display:countTokens >=2 ? "flex" : "none"}}> 90 | {lastTokenInfo} 91 | </Grid> 92 | 93 | </> 94 | } 95 | </Grid> 96 | 97 | </Grid> 98 | 99 | <Grid item xs={1} className={classes.fruitItem}> 100 | <IconButton size={"small"} disabled={firstTradingIndex < countTokens - 3 ? false : true} onClick={() => goToNext()}> 101 | <ArrowForwardIosIcon /> 102 | </IconButton> 103 | </Grid> 104 | </Grid> 105 | </CardContent> 106 | </Card> 107 | </> 108 | 109 | ) 110 | } 111 | 112 | export default FruitBar ; -------------------------------------------------------------------------------- /src/constants/abis/erc20.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "inputs": [ 4 | { 5 | "internalType": "uint256", 6 | "name": "amountToMint", 7 | "type": "uint256" 8 | } 9 | ], 10 | "stateMutability": "nonpayable", 11 | "type": "constructor" 12 | }, 13 | { 14 | "anonymous": false, 15 | "inputs": [ 16 | { 17 | "indexed": true, 18 | "internalType": "address", 19 | "name": "owner", 20 | "type": "address" 21 | }, 22 | { 23 | "indexed": true, 24 | "internalType": "address", 25 | "name": "spender", 26 | "type": "address" 27 | }, 28 | { 29 | "indexed": false, 30 | "internalType": "uint256", 31 | "name": "value", 32 | "type": "uint256" 33 | } 34 | ], 35 | "name": "Approval", 36 | "type": "event" 37 | }, 38 | { 39 | "anonymous": false, 40 | "inputs": [ 41 | { 42 | "indexed": true, 43 | "internalType": "address", 44 | "name": "from", 45 | "type": "address" 46 | }, 47 | { 48 | "indexed": true, 49 | "internalType": "address", 50 | "name": "to", 51 | "type": "address" 52 | }, 53 | { 54 | "indexed": false, 55 | "internalType": "uint256", 56 | "name": "value", 57 | "type": "uint256" 58 | } 59 | ], 60 | "name": "Transfer", 61 | "type": "event" 62 | }, 63 | { 64 | "inputs": [ 65 | { 66 | "internalType": "address", 67 | "name": "", 68 | "type": "address" 69 | }, 70 | { 71 | "internalType": "address", 72 | "name": "", 73 | "type": "address" 74 | } 75 | ], 76 | "name": "allowance", 77 | "outputs": [ 78 | { 79 | "internalType": "uint256", 80 | "name": "", 81 | "type": "uint256" 82 | } 83 | ], 84 | "stateMutability": "view", 85 | "type": "function" 86 | }, 87 | { 88 | "inputs": [ 89 | { 90 | "internalType": "address", 91 | "name": "spender", 92 | "type": "address" 93 | }, 94 | { 95 | "internalType": "uint256", 96 | "name": "amount", 97 | "type": "uint256" 98 | } 99 | ], 100 | "name": "approve", 101 | "outputs": [ 102 | { 103 | "internalType": "bool", 104 | "name": "", 105 | "type": "bool" 106 | } 107 | ], 108 | "stateMutability": "nonpayable", 109 | "type": "function" 110 | }, 111 | { 112 | "inputs": [ 113 | { 114 | "internalType": "address", 115 | "name": "", 116 | "type": "address" 117 | } 118 | ], 119 | "name": "balanceOf", 120 | "outputs": [ 121 | { 122 | "internalType": "uint256", 123 | "name": "", 124 | "type": "uint256" 125 | } 126 | ], 127 | "stateMutability": "view", 128 | "type": "function" 129 | }, 130 | { 131 | "inputs": [], 132 | "name": "getBalance", 133 | "outputs": [ 134 | { 135 | "internalType": "uint256", 136 | "name": "", 137 | "type": "uint256" 138 | } 139 | ], 140 | "stateMutability": "view", 141 | "type": "function" 142 | }, 143 | { 144 | "inputs": [ 145 | { 146 | "internalType": "address", 147 | "name": "to", 148 | "type": "address" 149 | }, 150 | { 151 | "internalType": "uint256", 152 | "name": "amount", 153 | "type": "uint256" 154 | } 155 | ], 156 | "name": "mint", 157 | "outputs": [], 158 | "stateMutability": "nonpayable", 159 | "type": "function" 160 | }, 161 | { 162 | "inputs": [ 163 | { 164 | "internalType": "address", 165 | "name": "recipient", 166 | "type": "address" 167 | }, 168 | { 169 | "internalType": "uint256", 170 | "name": "amount", 171 | "type": "uint256" 172 | } 173 | ], 174 | "name": "transfer", 175 | "outputs": [ 176 | { 177 | "internalType": "bool", 178 | "name": "", 179 | "type": "bool" 180 | } 181 | ], 182 | "stateMutability": "nonpayable", 183 | "type": "function" 184 | }, 185 | { 186 | "inputs": [ 187 | { 188 | "internalType": "address", 189 | "name": "sender", 190 | "type": "address" 191 | }, 192 | { 193 | "internalType": "address", 194 | "name": "recipient", 195 | "type": "address" 196 | }, 197 | { 198 | "internalType": "uint256", 199 | "name": "amount", 200 | "type": "uint256" 201 | } 202 | ], 203 | "name": "transferFrom", 204 | "outputs": [ 205 | { 206 | "internalType": "bool", 207 | "name": "", 208 | "type": "bool" 209 | } 210 | ], 211 | "stateMutability": "nonpayable", 212 | "type": "function" 213 | } 214 | ] -------------------------------------------------------------------------------- /src/components/Exchange/OrderBook/OrderBuyList/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useEffect } from 'react' ; 4 | 5 | import { connect } from 'react-redux' ; 6 | import { GetTokenOrderList } from '../../../../redux/actions/trade'; 7 | 8 | import { 9 | Box , 10 | TableContainer, 11 | Table, 12 | TableBody, 13 | TableRow , 14 | TableCell 15 | } from "@mui/material" ; 16 | 17 | 18 | import { makeStyles } from '@mui/styles' ; 19 | 20 | const useStyles = makeStyles((theme) => ({ 21 | root : { 22 | 23 | '&::-webkit-scrollbar': { 24 | width: '8px', 25 | backgroundColor : "lightgray", 26 | borderRadius : "5px" 27 | }, 28 | '&::-webkit-scrollbar-track': { 29 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 30 | }, 31 | '&::-webkit-scrollbar-thumb': { 32 | backgroundColor: 'gray', 33 | borderRadius : "5px" 34 | }, 35 | 36 | overflow : "hidden" , 37 | overflowY : "scroll" , 38 | height : props => { 39 | if(props.orderType === 3) return "calc(50vh - 113.815px)" ; 40 | if(props.orderType === 2) return "calc(100vh - 230px)" ; 41 | if(props.orderType === 1) return "0px" ; 42 | }, 43 | borderBottom : "1px solid gray" , 44 | borderTop : "1px solid gray" , 45 | 46 | "& .MuiTableBody-root" : { 47 | "& .MuiTableRow-root" : { 48 | position : "relative" , 49 | cursor : "pointer" 50 | }, 51 | "& .MuiTableCell-root" : { 52 | padding : "5px" , 53 | fontSize : "10px", 54 | textAlign : "right" , 55 | width : "33.33%" 56 | } 57 | }, 58 | }, 59 | progress : { 60 | position : "absolute" , 61 | backgroundColor : "#d7eaea" , 62 | left : 0 , 63 | top : 0, 64 | height : "100%" , 65 | width : props => `${props.total * 100 / props.max}%`, 66 | zIndex : "-1000" , 67 | }, 68 | price : { 69 | color : "#3c868f !important" 70 | } 71 | })); 72 | 73 | const ProgressBar = ( { children, ...props } ) => { 74 | 75 | const classes = useStyles(props) ; 76 | 77 | return ( 78 | <Box component={"td"} className={classes.progress} /> 79 | ) 80 | } 81 | 82 | let orderBuyListTimer ; 83 | 84 | const OrderBuyList = (props) => { 85 | 86 | const { 87 | tradeToken , decimal , orderType , 88 | handleChangePrice , handleChangeStatus , 89 | orderBuyList , GetTokenOrderList , 90 | setMethodType 91 | } = props ; 92 | 93 | const classes = useStyles({ 94 | orderType : orderType 95 | }) ; 96 | 97 | const emitEventToMarketing = (price) => { 98 | setMethodType(1); 99 | handleChangePrice(price) ; 100 | handleChangeStatus("sell") ; 101 | } 102 | 103 | const setOrderBuyListTimer = async (tradeToken) => { 104 | clearInterval(orderBuyListTimer) ; 105 | 106 | orderBuyListTimer = setInterval(async () => { 107 | await GetTokenOrderList(tradeToken._id , tradeToken.pair_type , "buy") ; 108 | } , 15000) ; 109 | } 110 | 111 | useEffect(async () => { 112 | if(tradeToken) { 113 | await GetTokenOrderList(tradeToken._id , tradeToken.pair_type , "buy") ; 114 | 115 | await setOrderBuyListTimer(tradeToken) ; 116 | } 117 | } , [tradeToken]) ; 118 | 119 | useEffect(() => { 120 | return () => { 121 | clearInterval(orderBuyListTimer) ; 122 | } 123 | } , []) ; 124 | 125 | return ( 126 | <Box component={"div"} className={classes.root}> 127 | <TableContainer> 128 | <Table stickyHeader aria-label="sticky table"> 129 | <TableBody> 130 | { 131 | orderBuyList.length !== 0 ? orderBuyList.map((item , index) => { 132 | return ( 133 | <TableRow key={index} onClick={ () => emitEventToMarketing(Number(item.price)) } > 134 | <ProgressBar total={Number(item.total)} max={Number(76548)} /> 135 | <TableCell className={classes.price}>{Number(item.price).toFixed(decimal)}</TableCell> 136 | <TableCell>{Number(item.amount).toFixed(6)}</TableCell> 137 | <TableCell>{Number(Number(item.price) * Number(item.amount)).toFixed(6)}</TableCell> 138 | </TableRow> 139 | ) 140 | }) :<> 141 | </> 142 | } 143 | </TableBody> 144 | </Table> 145 | </TableContainer> 146 | </Box> 147 | ) 148 | } 149 | 150 | const mapStateToProps = state => ({ 151 | orderBuyList : state.trade.orderBuyList 152 | }) 153 | 154 | const mapDispatchToProps = { 155 | GetTokenOrderList 156 | } 157 | 158 | export default connect( mapStateToProps , mapDispatchToProps )(OrderBuyList) ; -------------------------------------------------------------------------------- /src/components/Exchange/RecentOrder/RecentOrderList/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import React from 'react' ; 5 | 6 | import { useEffect } from 'react' ; 7 | 8 | import { connect } from 'react-redux'; 9 | import { GetExchangeOrderList } from '../../../../redux/actions/order'; 10 | 11 | import { formatDBDate } from '../../../../utils/helper' ; 12 | 13 | import { 14 | Box, 15 | TableContainer, 16 | Table , 17 | TableHead, 18 | TableBody, 19 | TableRow, 20 | TableCell, 21 | CircularProgress 22 | } from '@mui/material' ; 23 | 24 | import { makeStyles } from '@mui/styles'; 25 | 26 | const useStyles = makeStyles(() => ({ 27 | root : { 28 | '&::-webkit-scrollbar': { 29 | width: '8px', 30 | backgroundColor : "lightgray", 31 | borderRadius : "5px" 32 | }, 33 | '&::-webkit-scrollbar-track': { 34 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 35 | }, 36 | '&::-webkit-scrollbar-thumb': { 37 | backgroundColor: 'gray', 38 | borderRadius : "5px" 39 | }, 40 | 41 | overflow : "hidden" , 42 | overflowY : "scroll" , 43 | maxHeight : "calc(50vh - 145px)" , 44 | height : "calc(50vh - 145px)" , 45 | 46 | "& .MuiTableCell-root" :{ 47 | padding : "0px !important", 48 | textAlign : "center", 49 | fontSize : "11px" , 50 | fontWeight : "bold" 51 | } 52 | 53 | }, 54 | 55 | })); 56 | 57 | let currentOrderTimer ; 58 | 59 | const RecentSelectBox = (props) => { 60 | 61 | const classes = useStyles() ; 62 | 63 | const { 64 | tradeToken , 65 | exchangeOrderList , GetExchangeOrderList 66 | } = props ; 67 | 68 | const headFields = [ 69 | "DateTime", 70 | "Pair" , 71 | "Side" , 72 | "Price" , 73 | "Amount" , 74 | "Total" 75 | ] 76 | 77 | const setCurrentOrderTimer = () => { 78 | clearInterval(currentOrderTimer) ; 79 | 80 | const currentOrderTimer = setTimeout(async () => { 81 | // await GetOrderHistory() 82 | } , 15000) ; 83 | } 84 | 85 | useEffect(async () => { 86 | if(tradeToken) { 87 | await GetExchangeOrderList("2022-01-01" , new Date().toISOString().substring(0,10), tradeToken._id , tradeToken.pair_type ) ; 88 | // await GetOrderHistory 89 | 90 | // await setCurrentOrderTimer() 91 | } 92 | } , [tradeToken]) ; 93 | 94 | useEffect(() => { 95 | return () => { 96 | clearInterval(currentOrderTimer) ; 97 | } 98 | } , []) 99 | return ( 100 | <Box component={"div"} className={classes.root}> 101 | <TableContainer> 102 | <Table> 103 | <TableHead> 104 | <TableRow> 105 | { 106 | headFields.map((item , index) => { 107 | return ( 108 | <TableCell key={index}> 109 | { item } 110 | </TableCell> 111 | ) 112 | }) 113 | } 114 | </TableRow> 115 | </TableHead> 116 | <TableBody> 117 | { 118 | exchangeOrderList !== "No Available Informations." ? 119 | ( exchangeOrderList.length !== 0 ? exchangeOrderList.map( (row , index) => { 120 | return ( 121 | <TableRow key={index}> 122 | <TableCell sx={{textAlign : "center !important"}}>{formatDBDate(row.time)}</TableCell> 123 | <TableCell>{row.pair_token}</TableCell> 124 | <TableCell>{row.type}</TableCell> 125 | <TableCell sx={{color : row.type === "sell" ? "#c74a4d" : "#3c868f"}}>{row.price}</TableCell> 126 | <TableCell>{row.amount}</TableCell> 127 | <TableCell>{row.amount*row.price}</TableCell> 128 | </TableRow> 129 | ) 130 | }) : <TableRow> 131 | <TableCell colSpan={7} > 132 | <CircularProgress size={20}/> 133 | </TableCell> 134 | </TableRow> ) : <TableRow> 135 | <TableCell colSpan={7} sx={{ textAlign:"center !important"}}>No Available Information</TableCell> 136 | </TableRow> 137 | } 138 | </TableBody> 139 | </Table> 140 | </TableContainer> 141 | </Box> 142 | ) 143 | } 144 | 145 | const mapStateToProps = state => ({ 146 | exchangeOrderList : state.order.exchangeOrderList 147 | }) 148 | 149 | const mapDispatchToProps = { 150 | GetExchangeOrderList 151 | } 152 | 153 | export default connect(mapStateToProps , mapDispatchToProps)(RecentSelectBox) ; -------------------------------------------------------------------------------- /src/components/Exchange/OrderBook/OrderSellList/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' ; 4 | 5 | // ____________ hook ______________________ 6 | import { useState , useEffect } from 'react' ; 7 | 8 | // ____________ action and redux _____________ 9 | import { connect } from 'react-redux'; 10 | import { GetTokenOrderList } from '../../../../redux/actions/trade'; 11 | 12 | // ___________ style ___________________ 13 | import { 14 | Box , 15 | TableContainer, 16 | Table, 17 | TableBody, 18 | TableRow , 19 | TableCell 20 | } from "@mui/material" ; 21 | 22 | import { makeStyles } from '@mui/styles' ; 23 | 24 | const useStyles = makeStyles((theme) => ({ 25 | root : { 26 | 27 | '&::-webkit-scrollbar': { 28 | width: '8px', 29 | backgroundColor : "lightgray", 30 | borderRadius : "5px" 31 | }, 32 | '&::-webkit-scrollbar-track': { 33 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 34 | }, 35 | '&::-webkit-scrollbar-thumb': { 36 | backgroundColor: 'gray', 37 | borderRadius : "5px" 38 | }, 39 | 40 | overflow : "hidden" , 41 | overflowY : "scroll" , 42 | height : props => { 43 | if(props.orderType === 3) return "calc(50vh - 113.815px)" ; 44 | if(props.orderType === 2) return "0px" ; 45 | if(props.orderType === 1) return "calc(100vh - 230px)" ; 46 | }, 47 | borderBottom : "1px solid gray" , 48 | borderTop : "1px solid gray" , 49 | 50 | "& .MuiTableBody-root" : { 51 | "& .MuiTableRow-root" : { 52 | position : "relative" , 53 | }, 54 | "& .MuiTableCell-root" : { 55 | padding : "5px" , 56 | fontSize : "10px", 57 | textAlign : "right" , 58 | width : "33.33%" , 59 | cursor : "pointer" 60 | } 61 | }, 62 | }, 63 | progress : { 64 | position : "absolute" , 65 | backgroundColor : "#f9dadb" , 66 | left : 0 , 67 | top : 0, 68 | height : "100%" , 69 | width : props => `${props.total * 100 / props.max}%`, 70 | zIndex : "-1000" , 71 | }, 72 | price : { 73 | color : "#c74a4d !important" 74 | } 75 | })); 76 | 77 | const ProgressBar = ( { children, ...props } ) => { 78 | 79 | const classes = useStyles(props) ; 80 | 81 | return ( 82 | <Box component={"td"} className={classes.progress} /> 83 | ) 84 | } 85 | 86 | let orderSellListTimer ; 87 | 88 | const OrderSellList = (props) => { 89 | 90 | const { 91 | tradeToken , decimal , orderType , tokenId , 92 | handleChangePrice , handleChangeStatus , 93 | orderSellList , GetTokenOrderList , 94 | setMethodType 95 | } = props ; 96 | 97 | const classes = useStyles({ 98 | orderType : orderType 99 | }) ; 100 | 101 | const setOrderSellListTimer = async (tradeToken) => { 102 | clearInterval(orderSellListTimer) ; 103 | 104 | orderSellListTimer = setInterval(async () => { 105 | await GetTokenOrderList(tradeToken._id , tradeToken.pair_type , "sell") ; 106 | } , 15000) 107 | } 108 | useEffect(() => { 109 | } , [orderType]) ; 110 | 111 | const emitEventToMarketing = (price) => { 112 | setMethodType(1); 113 | handleChangePrice(price) ; 114 | handleChangeStatus("buy") ; 115 | } 116 | 117 | useEffect(async () => { 118 | if(tradeToken) { 119 | await GetTokenOrderList(tradeToken._id , tradeToken.pair_type , "sell") ; 120 | await setOrderSellListTimer(tradeToken) ; 121 | } 122 | } , [tradeToken]) ; 123 | 124 | useEffect(() => { 125 | return () => { 126 | clearInterval(orderSellListTimer) ; 127 | } 128 | } , []) 129 | 130 | return ( 131 | <Box component={"div"} className={classes.root}> 132 | <TableContainer> 133 | <Table stickyHeader aria-label="sticky table"> 134 | <TableBody> 135 | { 136 | orderSellList.length !== 0 ? orderSellList.map((item , index) => { 137 | return ( 138 | <TableRow key={index} onClick={ () => emitEventToMarketing(item.price) }> 139 | <ProgressBar total={Number(item.price)} max={Number(12312.2312)} /> 140 | <TableCell className={classes.price}>{Number(item.price).toFixed(decimal)}</TableCell> 141 | <TableCell>{Number(item.amount).toFixed(6)}</TableCell> 142 | <TableCell>{Number(Number(item.price) * Number(item.amount)).toFixed(6)}</TableCell> 143 | </TableRow> 144 | ) 145 | }) : <> 146 | </> 147 | } 148 | </TableBody> 149 | </Table> 150 | </TableContainer> 151 | </Box> 152 | ) 153 | } 154 | 155 | 156 | const mapStateToProps = state => ({ 157 | orderSellList : state.trade.orderSellList 158 | }); 159 | 160 | const mapDispatchToProps = { 161 | GetTokenOrderList 162 | } 163 | 164 | export default connect(mapStateToProps , mapDispatchToProps)(OrderSellList) ; -------------------------------------------------------------------------------- /src/redux/actions/order.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import axios from 'axios' ; 4 | import * as config from '../../static/constants' ; 5 | import ActionTypes from './actionTypes'; 6 | 7 | 8 | export const OrderMarket = async (account , token_id , pair_token , price , amount , type) => { 9 | try { 10 | let res = await axios.post(`${config.PRIVATE_CALADEX_API}order/market` , { 11 | orderer : account , 12 | token_id : token_id , 13 | pair_token : pair_token , 14 | price : price, 15 | amount : amount , 16 | type : type 17 | }) 18 | 19 | if(res.status === 201){ 20 | return false ; 21 | } 22 | 23 | if(res.status === 200){ 24 | return true ; 25 | } 26 | 27 | return true ; 28 | } 29 | catch (err) { 30 | console.log(err) ; 31 | return false ; 32 | } 33 | } 34 | 35 | export const OrderLimit = async (account , token_id , pair_token , price , amount , type) => { 36 | try { 37 | let res = await axios.post(`${config.PRIVATE_CALADEX_API}order/addlimit` , { 38 | orderer : account , 39 | token_id : token_id , 40 | pair_token : pair_token , 41 | price : price, 42 | amount : amount , 43 | type : type 44 | }) 45 | 46 | if(res.status === 201){ 47 | return false ; 48 | } 49 | 50 | if(res.status === 200){ 51 | return true ; 52 | } 53 | 54 | return true ; 55 | } 56 | catch (err) { 57 | console.log(err) ; 58 | return false ; 59 | } 60 | } 61 | 62 | export const GetOrderHistory = (orderer , start_time , end_time , token_id , pair_token , type , is_traded) => async dispatch => { 63 | try { 64 | 65 | let jsonReqBody = { 66 | orderer : orderer, 67 | start_time : start_time, 68 | end_time : end_time, 69 | token_id : token_id, 70 | pair_token : pair_token, 71 | is_traded : is_traded 72 | } 73 | 74 | if(type !== "all") { 75 | jsonReqBody = { 76 | ...jsonReqBody , 77 | type : type 78 | } 79 | } 80 | 81 | if(token_id === null) { 82 | jsonReqBody = { 83 | orderer : orderer, 84 | start_time : start_time, 85 | end_time : end_time, 86 | is_traded : is_traded 87 | } 88 | } 89 | let res = await axios.post(`${config.PRIVATE_CALADEX_API}order/search` , jsonReqBody) ; 90 | 91 | if(res.status === 201) { 92 | return "error" ; 93 | } 94 | 95 | if(res.data.data.data.length === 0) { 96 | return dispatch({ 97 | type : ActionTypes.GetOrderHistory , 98 | payload : "No Available Informations." 99 | }) 100 | } 101 | 102 | 103 | return dispatch({ 104 | type : ActionTypes.GetOrderHistory, 105 | payload : res.data.data.data 106 | }) 107 | 108 | } 109 | catch (err) { 110 | return "error" ; 111 | } 112 | } 113 | 114 | 115 | export const GetOrderTradeHistory = (orderer , start_time , end_time , token_id , pair_token , type ) => async dispatch => { 116 | try { 117 | 118 | let jsonReqBody = { 119 | orderer : orderer, 120 | start_time : start_time, 121 | end_time : end_time, 122 | token_id : token_id, 123 | pair_token : pair_token, 124 | } 125 | 126 | if(type !== "all") { 127 | jsonReqBody = { 128 | ...jsonReqBody , 129 | type : type 130 | } 131 | } 132 | 133 | let res = await axios.post(`${config.PRIVATE_CALADEX_API}order/search` , jsonReqBody) ; 134 | 135 | if(res.status === 201) { 136 | return "error" ; 137 | } 138 | if(res.data.data.data.length === 0) { 139 | return dispatch({ 140 | type : ActionTypes.GetOrderTradeHistory , 141 | payload : "No Available Informations." 142 | }) 143 | } 144 | 145 | return dispatch({ 146 | type : ActionTypes.GetOrderTradeHistory, 147 | payload : res.data.data.data 148 | }) 149 | 150 | } 151 | catch (err) { 152 | return "error" ; 153 | } 154 | } 155 | 156 | export const GetExchangeOrderList = (start_time , end_time , token_id , pair_token ) => async dispatch => { 157 | try { 158 | 159 | let jsonReqBody = { 160 | start_time : start_time, 161 | end_time : end_time, 162 | token_id : token_id, 163 | pair_token : pair_token, 164 | is_traded : false 165 | } 166 | 167 | let res = await axios.post(`${config.PRIVATE_CALADEX_API}order/search` , jsonReqBody) ; 168 | 169 | if(res.status === 201) { 170 | return "error" ; 171 | } 172 | if(res.data.data.data.length === 0) { 173 | return dispatch({ 174 | type : ActionTypes.GetExchangeOrderList , 175 | payload : "No Available Informations." 176 | }) 177 | } 178 | 179 | return dispatch({ 180 | type : ActionTypes.GetExchangeOrderList, 181 | payload : res.data.data.data 182 | }) 183 | 184 | } 185 | catch (err) { 186 | return "error" ; 187 | } 188 | } -------------------------------------------------------------------------------- /src/components/Layouts/Footer/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { useEffect, useRef } from 'react' ; 4 | 5 | import { makeStyles } from '@mui/styles'; 6 | 7 | import { 8 | AppBar , 9 | Toolbar , 10 | Typography, 11 | Box , 12 | IconButton, 13 | useMediaQuery , 14 | Grid 15 | } from '@mui/material' ; 16 | 17 | const useStyles = makeStyles((theme) => ({ 18 | root : { 19 | // flexGrow: 1, 20 | 21 | "& svg" : { 22 | color : "white !important" 23 | } , 24 | "& button" : { 25 | marginRight : "20px !important" 26 | }, 27 | "& .MuiToolbar-root" : { 28 | padding : "0px !important" , 29 | paddingTop : "10px !important" , 30 | paddingBottom : "15px !important" , 31 | }, 32 | "& .MuiGrid-item" : { 33 | display : "flex" , 34 | alignItems : "center", 35 | justifyContent : 'center' 36 | }, 37 | // marginTop : "66px" , 38 | padding:"0px" 39 | }, 40 | toolbar : { 41 | 42 | } , 43 | copyright : { 44 | fontSize : "15px" , 45 | } , 46 | iconGroup : { 47 | // marginRight : theme.spacing(2), 48 | } , 49 | 50 | })); 51 | 52 | const Footer = () => { 53 | 54 | const classes = useStyles() ; 55 | 56 | const isXs = useMediaQuery("(min-width : 700px)") ; 57 | 58 | return ( 59 | <div className={classes.root} > 60 | <AppBar position="static" color="primary"> 61 | <Toolbar className={classes.toolbar}> 62 | <Grid container> 63 | <Grid item xs={isXs ? 2 : 12}> 64 | <Box> 65 | <Typography color="inherit" className={classes.copyright} sx={{textAlign: isXs ? "left" : "center"}}> 66 | Copyright © 2022 67 | </Typography> 68 | </Box> 69 | </Grid> 70 | <Grid item xs={6} sx={{marginTop:isXs ? "0px" : "15px"}}> 71 | 72 | </Grid> 73 | <Grid item xs={isXs ? 4 : 12} sx={{textAlign: isXs ? "right" : "center"}}> 74 | <Box className={classes.iconGroup}> 75 | <IconButton sx={{backgroundColor : "#1da1f2"}}> 76 | <svg xmlns="http://www.w3.org/2000/svg" className="icon" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round"> 77 | <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> 78 | <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path> 79 | </svg> 80 | </IconButton> 81 | <IconButton sx={{backgroundColor:"#3b5998"}}> 82 | <svg xmlns="http://www.w3.org/2000/svg" className="icon" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round"> 83 | <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> 84 | <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path> 85 | </svg> 86 | </IconButton> 87 | <IconButton sx={{backgroundColor : "#e4405f"}}> 88 | <svg xmlns="http://www.w3.org/2000/svg" className="icon" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round"> 89 | <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> 90 | <rect x="4" y="4" width="16" height="16" rx="4"></rect> 91 | <circle cx="12" cy="12" r="3"></circle> 92 | <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line> 93 | </svg> 94 | </IconButton> 95 | <IconButton sx={{backgroundColor : "#181717"}}> 96 | <svg xmlns="http://www.w3.org/2000/svg" className="icon" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round"> 97 | <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> 98 | <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path> 99 | </svg> 100 | </IconButton> 101 | </Box> 102 | </Grid> 103 | </Grid> 104 | </Toolbar> 105 | </AppBar> 106 | </div> 107 | ) 108 | } 109 | export default Footer ; -------------------------------------------------------------------------------- /src/constants/abis/token.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "constant": true, 4 | "inputs": [], 5 | "name": "name", 6 | "outputs": [ 7 | { 8 | "name": "", 9 | "type": "string" 10 | } 11 | ], 12 | "payable": false, 13 | "stateMutability": "view", 14 | "type": "function" 15 | }, 16 | { 17 | "constant": false, 18 | "inputs": [ 19 | { 20 | "name": "_spender", 21 | "type": "address" 22 | }, 23 | { 24 | "name": "_value", 25 | "type": "uint256" 26 | } 27 | ], 28 | "name": "approve", 29 | "outputs": [ 30 | { 31 | "name": "", 32 | "type": "bool" 33 | } 34 | ], 35 | "payable": false, 36 | "stateMutability": "nonpayable", 37 | "type": "function" 38 | }, 39 | { 40 | "constant": true, 41 | "inputs": [], 42 | "name": "totalSupply", 43 | "outputs": [ 44 | { 45 | "name": "", 46 | "type": "uint256" 47 | } 48 | ], 49 | "payable": false, 50 | "stateMutability": "view", 51 | "type": "function" 52 | }, 53 | { 54 | "constant": false, 55 | "inputs": [ 56 | { 57 | "name": "_from", 58 | "type": "address" 59 | }, 60 | { 61 | "name": "_to", 62 | "type": "address" 63 | }, 64 | { 65 | "name": "_value", 66 | "type": "uint256" 67 | } 68 | ], 69 | "name": "transferFrom", 70 | "outputs": [ 71 | { 72 | "name": "", 73 | "type": "bool" 74 | } 75 | ], 76 | "payable": false, 77 | "stateMutability": "nonpayable", 78 | "type": "function" 79 | }, 80 | { 81 | "constant": true, 82 | "inputs": [], 83 | "name": "decimals", 84 | "outputs": [ 85 | { 86 | "name": "", 87 | "type": "uint8" 88 | } 89 | ], 90 | "payable": false, 91 | "stateMutability": "view", 92 | "type": "function" 93 | }, 94 | { 95 | "constant": true, 96 | "inputs": [ 97 | { 98 | "name": "_owner", 99 | "type": "address" 100 | } 101 | ], 102 | "name": "balanceOf", 103 | "outputs": [ 104 | { 105 | "name": "balance", 106 | "type": "uint256" 107 | } 108 | ], 109 | "payable": false, 110 | "stateMutability": "view", 111 | "type": "function" 112 | }, 113 | { 114 | "constant": true, 115 | "inputs": [], 116 | "name": "symbol", 117 | "outputs": [ 118 | { 119 | "name": "", 120 | "type": "string" 121 | } 122 | ], 123 | "payable": false, 124 | "stateMutability": "view", 125 | "type": "function" 126 | }, 127 | { 128 | "constant": false, 129 | "inputs": [ 130 | { 131 | "name": "_to", 132 | "type": "address" 133 | }, 134 | { 135 | "name": "_value", 136 | "type": "uint256" 137 | } 138 | ], 139 | "name": "transfer", 140 | "outputs": [ 141 | { 142 | "name": "", 143 | "type": "bool" 144 | } 145 | ], 146 | "payable": false, 147 | "stateMutability": "nonpayable", 148 | "type": "function" 149 | }, 150 | { 151 | "constant": true, 152 | "inputs": [ 153 | { 154 | "name": "_owner", 155 | "type": "address" 156 | }, 157 | { 158 | "name": "_spender", 159 | "type": "address" 160 | } 161 | ], 162 | "name": "allowance", 163 | "outputs": [ 164 | { 165 | "name": "", 166 | "type": "uint256" 167 | } 168 | ], 169 | "payable": false, 170 | "stateMutability": "view", 171 | "type": "function" 172 | }, 173 | { 174 | "payable": true, 175 | "stateMutability": "payable", 176 | "type": "fallback" 177 | }, 178 | { 179 | "anonymous": false, 180 | "inputs": [ 181 | { 182 | "indexed": true, 183 | "name": "owner", 184 | "type": "address" 185 | }, 186 | { 187 | "indexed": true, 188 | "name": "spender", 189 | "type": "address" 190 | }, 191 | { 192 | "indexed": false, 193 | "name": "value", 194 | "type": "uint256" 195 | } 196 | ], 197 | "name": "Approval", 198 | "type": "event" 199 | }, 200 | { 201 | "anonymous": false, 202 | "inputs": [ 203 | { 204 | "indexed": true, 205 | "name": "from", 206 | "type": "address" 207 | }, 208 | { 209 | "indexed": true, 210 | "name": "to", 211 | "type": "address" 212 | }, 213 | { 214 | "indexed": false, 215 | "name": "value", 216 | "type": "uint256" 217 | } 218 | ], 219 | "name": "Transfer", 220 | "type": "event" 221 | } 222 | ] --------------------------------------------------------------------------------