25 | {matches ? null : (
26 |
27 |
28 |
29 | )}
30 |
39 | {matches ?
:
Home
}
40 |
41 |
50 | {matches ?
:
Prices
}
51 |
52 |
{
55 | setTradeModal(!tradeModal);
56 | }}
57 | className="tradeIcon"
58 | >
59 | {matches ? null :
Trade
}
60 | {matches &&
}
61 |
62 |
71 | {matches ?
:
Wallet
}
72 |
73 |
82 | {matches ?
:
Account
}
83 |
84 |
85 |
86 |
setTradeModal(!tradeModal)}
89 | />
90 |
91 | );
92 | };
93 |
94 | export default BottomNav;
95 |
--------------------------------------------------------------------------------
/src/pages/LandingPage/SectionThree/SectionThree.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 |
10 | .sectionThree {
11 | min-height: 100vh;
12 | margin: 3rem 3rem;
13 | width: 100%;
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 |
18 | .container {
19 | padding: 1rem;
20 | display: flex;
21 | align-items: center;
22 | max-width: 1200px;
23 | width: 100%;
24 | justify-content: space-around;
25 | @media (max-width: 768px) {
26 | flex-direction: column;
27 | }
28 |
29 | .listAndGetStarted {
30 | display: flex;
31 | flex-direction: column;
32 | align-items: flex-start;
33 | justify-content: center;
34 | width: 80%;
35 | // background: #000;
36 | @media (max-width: 768px) {
37 | align-items: center;
38 | justify-content: center;
39 | width: 100%;
40 | }
41 |
42 | .header {
43 | font-size: 2.25rem;
44 | font-weight: bold;
45 | color: $textColor;
46 | @media (max-width: 768px) {
47 | font-size: 1.75rem;
48 | }
49 | }
50 |
51 | ul {
52 | list-style-type: none;
53 | margin: 0;
54 | padding: 0;
55 | margin-top: -2rem;
56 | @media (max-width: 768px) {
57 | margin-top: -1rem;
58 | margin-left: 1rem;
59 | }
60 |
61 | li {
62 | display: flex;
63 | align-items: flex-start;
64 |
65 | .header {
66 | display: flex;
67 | flex-direction: column;
68 | justify-content: flex-start;
69 | width: 100%;
70 | @media (max-width: 768px) {
71 | justify-content: center;
72 | }
73 |
74 | p {
75 | font-size: 1.25rem;
76 | @media (max-width: 768px) {
77 | font-size: 1.35rem;
78 | }
79 | text-align: left;
80 | font-weight: bold;
81 | color: $textColor;
82 | margin-bottom: .5rem;
83 | }
84 |
85 | span {
86 | font-size: 1.15rem;
87 | @media (max-width: 768px) {
88 | font-size: 1.15rem;
89 | }
90 | color: $subColor;
91 | font-weight: normal;
92 | }
93 | }
94 |
95 | .imgDiv {
96 | // width: 30%;
97 | display: flex;
98 | }
99 |
100 | img {
101 | height: 2rem;
102 | width: 2rem;
103 | margin-left: auto;
104 | margin-right: 1rem;
105 | margin-top: 1rem;
106 | }
107 |
108 | a {
109 | color: $blue;
110 | text-decoration: none;
111 | font-weight: bold;
112 | }
113 | }
114 | }
115 | }
116 |
117 | img {
118 | position: relative;
119 | height: 40rem;
120 | @media (max-width: 768px) {
121 | height: 30rem;
122 | }
123 | transition: all 0.5s ease;
124 | }
125 |
126 | .images {
127 | display: flex;
128 | align-items: center;
129 | justify-content: center;
130 | position: relative;
131 | width: 50%;
132 | z-index: 4;
133 | }
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Account/PasswordModal/PasswordModal.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 | $borderColor: rgb(158, 158, 158);
10 |
11 | .passwordModalContainer {
12 | position: absolute;
13 | top: 50%;
14 | left: 50%;
15 | transform: translate(-45%, -50%);
16 | width: 100%;
17 | max-width: 20rem;
18 | outline: none;
19 | border: none;
20 |
21 | @media (max-width: 480px) {
22 | top: 50%;
23 | transform: translate(-50%, -50%);
24 | }
25 |
26 | .passwordModalSubContainer {
27 | background: rgba($mainColor, 1);
28 | flex-direction: column;
29 | height: 20rem;
30 | border-radius: 10px;
31 | padding: 1rem;
32 | display: flex;
33 | justify-content: center;
34 | align-items: center;
35 | position: relative;
36 |
37 | p {
38 | font-size: 1.15rem;
39 | // font-weight: bold;
40 | color: $textColor;
41 | }
42 |
43 | .closePasswordModal {
44 | position: absolute;
45 | top: 1%;
46 | right: 3%;
47 | border-radius: 5px;
48 | color: $textColor;
49 | border: none;
50 | outline: none;
51 | background: none;
52 | padding: 0.5rem 0;
53 | width: 2rem;
54 | font-weight: 900;
55 | font-size: 2rem;
56 | transition: all 0.2s ease-in-out;
57 | }
58 | .closePasswordModal:hover {
59 | cursor: pointer;
60 | transform: scale(1.2);
61 | }
62 |
63 | form {
64 | display: flex;
65 | flex-direction: column;
66 | align-items: flex-start;
67 | width: 100%;
68 |
69 | .currentPasswordInput,
70 | .confirmCurrentPasswordInput,
71 | .newPasswordInput {
72 | display: flex;
73 | flex-direction: column;
74 | width: 100%;
75 |
76 | input {
77 | font-size: 1.15rem;
78 | outline: none;
79 | border-radius: 5px;
80 | border: 1px solid $borderColor;
81 | padding: 0.75rem;
82 | background: transparent;
83 | color: $textColor;
84 | transition: all 0.2s ease-in;
85 | height: 1rem;
86 | margin-bottom: 1.5rem;
87 | }
88 |
89 | input::placeholder {
90 | color: $subColor;
91 | font-size: 1rem;
92 | }
93 |
94 | input:focus {
95 | border-radius: 5px;
96 | outline: none;
97 | border: 1px solid $lightBlue;
98 | }
99 |
100 | input:hover {
101 | border: 1px solid $lightBlue;
102 | }
103 | }
104 |
105 | .submitBtn {
106 | border: none;
107 | outline: none;
108 | font-size: 1.15rem;
109 | width: 100%;
110 | height: 2.75rem;
111 | border-radius: 5px;
112 | background: $lightBlue;
113 | font-weight: bold;
114 | transition: 0.5s;
115 | color: $mainColor;
116 | display: flex;
117 | align-items: center;
118 | justify-content: center;
119 | }
120 |
121 | .submitBtn:hover {
122 | color: #fff;
123 | background: $blue;
124 | text-decoration: none;
125 | }
126 | }
127 | }
128 | }
129 |
--------------------------------------------------------------------------------
/src/pages/LandingPage/SectionFour/SectionFour.jsx:
--------------------------------------------------------------------------------
1 | import bitcoin from '../../../assets/landingLogos/bitcoin.png';
2 | import ethereum from '../../../assets/landingLogos/ethereum.png';
3 | import tether from '../../../assets/landingLogos/tether.png';
4 | import dogecoin from '../../../assets/landingLogos/dogecoin.png';
5 | import binanceCoin from '../../../assets/landingLogos/binance-coin.png';
6 | import cardano from '../../../assets/landingLogos/cardano.png';
7 | import usdCoin from '../../../assets/landingLogos/usd-coin.png';
8 | import uniswap from '../../../assets/landingLogos/uniswap.png';
9 | import bitcoinCash from '../../../assets/landingLogos/bitcoin-cash.png';
10 | import xrp from '../../../assets/landingLogos/xrp.png';
11 | import tron from '../../../assets/landingLogos/tron.png';
12 | import ethereumClassic from '../../../assets/landingLogos/ethereum-classic.png';
13 | import litecoin from '../../../assets/landingLogos/litecoin.png';
14 | import dash from '../../../assets/landingLogos/dash.png';
15 | import polkadot from '../../../assets/landingLogos/polkadot-new.png';
16 | import './SectionFour.scss'
17 |
18 | const SectionFour = () => {
19 | return (
20 |
21 |
22 |
Starting with 15 cryptocurrencies
23 | {/* All the logos go here */}
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
More would be added based on popularity and demand.
72 |
73 |
74 | );
75 | };
76 |
77 | export default SectionFour;
78 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Wallet/Transactions/TransactionModal.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 | $borderColor: rgb(170, 170, 170);
10 |
11 | .transactionModal {
12 | position: fixed;
13 | bottom: -150vh;
14 | background-color: $mainColor;
15 | width: 100%;
16 | box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.15);
17 | left: 0;
18 | padding: 1rem 0;
19 | z-index: 10;
20 | display: none;
21 | font-size: 1.15rem;
22 | animation: transactionModalAnim 0.3s ease-in-out forwards;
23 | border-top-left-radius: 20px;
24 | border-top-right-radius: 20px;
25 | height: 45%;
26 | @media (min-width: 768px) {
27 | display: none;
28 | width: 25rem;
29 | height: 20rem;
30 | border-top-left-radius: 20px;
31 | border-top-right-radius: 20px;
32 | border-bottom-left-radius: 20px;
33 | border-bottom-right-radius: 20px;
34 | }
35 | @media (max-width: 1024px) and (orientation: landscape) {
36 | height: 70%;
37 | }
38 | }
39 |
40 | @keyframes transactionModalAnim {
41 | from {
42 | bottom: -150vh;
43 | }
44 |
45 | to {
46 | bottom: 0;
47 | }
48 | }
49 |
50 | .transactionModal.Show {
51 | bottom: 0;
52 | display: flex;
53 | align-items: center;
54 | flex-direction: column;
55 | justify-content: space-around;
56 | transition: all 0.8s ease-in;
57 | @media (min-width: 768px) {
58 | display: flex;
59 | top: 50%;
60 | left: 50%;
61 | transform: translate(-50%, -50%);
62 | }
63 |
64 | .amountAndDate {
65 | display: flex;
66 | flex-direction: column;
67 | align-items: center;
68 | justify-content: center;
69 | width: 80%;
70 |
71 | .amount {
72 | font-size: 2.5rem;
73 | text-align: center;
74 | }
75 |
76 | .memo {
77 | margin-top: -2.25rem;
78 | margin-bottom: .5rem;
79 | font-size: 1rem;
80 | color: $subColor;
81 | text-align: center;
82 | }
83 | }
84 |
85 | hr {
86 | border-top: 2px dashed #000;
87 | width: 75%;
88 | }
89 |
90 | .status {
91 | margin-bottom: 2rem;
92 | .completeCheck {
93 | display: flex;
94 | align-items: center;
95 | justify-content: center;
96 |
97 | .icon {
98 | height: 1.25rem;
99 | width: 1.25rem;
100 | display: flex;
101 | align-items: center;
102 | border-radius: 100%;
103 | font-size: 5rem;
104 | margin-right: .25rem;
105 | background: #C2FEDB;
106 | color: #12A550;
107 | }
108 | }
109 | }
110 |
111 | .date,
112 | .name {
113 | margin-bottom: -1rem;
114 | }
115 |
116 | .date,
117 | .name,
118 | .status {
119 | display: flex;
120 | width: 80%;
121 | align-items: center;
122 | justify-content: space-around;
123 |
124 | p:nth-child(1) {
125 | margin-right: auto;
126 | text-align: left;
127 | }
128 |
129 | p:nth-child(2) {
130 | font-size: 0.95rem;
131 | text-align: right;
132 | color: $subColor;
133 | text-transform: capitalize;
134 | }
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Account/source/source.jsx:
--------------------------------------------------------------------------------
1 | import './source.scss';
2 | import { useState } from 'react';
3 | import Backdrop from '@material-ui/core/Backdrop';
4 | import Modal from '@material-ui/core/Modal';
5 | import Fade from '@material-ui/core/Fade';
6 | import { RiFileCodeFill } from "react-icons/ri";
7 | import { FiChevronRight } from 'react-icons/fi';
8 | import 'react-toastify/dist/ReactToastify.css';
9 |
10 | export default function Source() {
11 | const [openModal, setOpenModal] = useState(false);
12 | const handleOpenModal = () => setOpenModal(true);
13 | const handleCloseModal = () => {
14 | setOpenModal(false);
15 | setCount(0);
16 | };
17 | const [ count, setCount ] = useState(0);
18 |
19 | const increaseCount = () => {
20 | setCount(count + 1);
21 | }
22 |
23 | return (
24 |
25 |
26 |
27 |
29 |
Source Codes
30 |
31 |
33 |
34 |
43 |
44 |
45 |
46 |
47 |
51 | This project was created out of curiosity and as a way to
52 | learn more about React and Node.js as a beginner.
53 |
54 |
55 |
59 | Tech stack is React, Node.js with Express, MongoDB, AWS (S3)
60 | and hosted on Netlify (frontend), Digital Ocean (backend).
61 |
62 |
63 |
70 | Lastly, I won't put more efforts on this project, but I'm open
71 | to reviews and suggestions, thanks.
72 | Kayode.
73 |
74 |
75 | {count < 2 ? (
76 |
Next
77 | ) : (
78 |
83 | GitHub
84 |
85 | )}
86 |
87 |
88 |
90 |
91 |
92 | );
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/TopNav/Nav.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 |
10 | nav {
11 | position: absolute;
12 | top: 0%;
13 | height: 8vh;
14 | z-index: 10;
15 | @media (max-width: 768px) and (orientation: landscape) {
16 | height: 15vh;
17 | }
18 | @media (max-width: 812px) and (orientation: landscape) {
19 | height: 20vh;
20 | }
21 | display: flex;
22 | align-items: center;
23 | width: 95%;
24 | justify-content: space-between;
25 |
26 | .logo {
27 | font-size: 21px;
28 | font-weight: bold;
29 | text-decoration: none;
30 | color: $textColor;
31 | }
32 |
33 | .desktop {
34 | width: 50%;
35 | max-width: 30rem;
36 | display: flex;
37 | align-items: center;
38 | justify-content: space-between;
39 |
40 | a {
41 | text-decoration: none;
42 | color: $textColor;
43 | font-size: 17px;
44 | transition: all 0.3s ease-in-out;
45 | border-bottom: 2px solid transparent;
46 | }
47 |
48 | a.active {
49 | color: $blue;
50 | border-bottom: 2px solid $blue;
51 | }
52 |
53 | a:hover {
54 | color: $blue;
55 | border-bottom: 2px solid $blue;
56 | }
57 |
58 | .signupBtn {
59 | height: 3rem;
60 | width: 8rem;
61 | background: $blue;
62 | display: flex;
63 | align-items: center;
64 | justify-content: center;
65 | text-decoration: none;
66 | color: $mainColor;
67 | font-weight: bold;
68 | border-radius: 5px;
69 | font-size: 1.05rem;
70 | transition: all 0.2s ease;
71 | border: 1px solid $blue;
72 | }
73 |
74 | .signupBtn:hover {
75 | background: $mainColor;
76 | color: $blue;
77 | border: 1px solid $blue;
78 | }
79 |
80 | @media (max-width: 767px) {
81 | display: none;
82 | }
83 | }
84 |
85 | .mobile {
86 | margin-right: -0.5rem;
87 | @media (min-width: 768px) {
88 | display: none;
89 | }
90 | }
91 | }
92 |
93 | .mobileNav {
94 | @media (min-width: 768px) {
95 | display: none;
96 | }
97 | position: absolute;
98 | display: flex;
99 | flex-direction: column;
100 | align-items: center;
101 | transition: all 0.3s ease-in;
102 | background: $mainColor;
103 | height: 92vh;
104 | @media (max-width: 812px) and (orientation: landscape) {
105 | height: 85vh;
106 | }
107 | width: 100vw;
108 | bottom: 0;
109 | left: 0;
110 | opacity: 0;
111 | z-index: 4;
112 | animation: navIn 0.3s ease-in forwards;
113 |
114 | a {
115 | text-decoration: none;
116 | color: $textColor;
117 | font-size: 1.15rem;
118 | margin-top: 5rem;
119 | @media (max-width: 823px) and (orientation: landscape) {
120 | margin-top: 2rem;
121 | }
122 | }
123 |
124 | .signupBtn {
125 | height: 3rem;
126 | width: 8rem;
127 | background: $blue;
128 | display: flex;
129 | align-items: center;
130 | justify-content: center;
131 | text-decoration: none;
132 | color: $mainColor;
133 | font-weight: bold;
134 | border-radius: 5px;
135 | font-size: 1.05rem;
136 | transition: all 0.2s ease;
137 | border: 1px solid $blue;
138 | }
139 | }
140 | @keyframes navIn {
141 | from {
142 | left: 20vh;
143 | opacity: 0;
144 | }
145 |
146 | to {
147 | opacity: 1;
148 | left: 0;
149 | }
150 | }
151 |
--------------------------------------------------------------------------------
/src/assets/debit-cards/complete-card.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
15 |
16 |
17 |
18 | 4756 9018
21 |
24 |
25 |
26 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/assets/logo/coinsSVG.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
8 |
11 |
14 |
17 |
20 |
23 |
26 |
29 |
32 |
35 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/src/components/Coin/Graph/Graph.jsx:
--------------------------------------------------------------------------------
1 | import { AreaChart, Tooltip, Area, ResponsiveContainer } from 'recharts';
2 | import moment from 'moment';
3 |
4 | const Graph = ({ graphData, days, coinInfoId }) => {
5 |
6 | const pickColor = (coinInfoId) => {
7 | switch (coinInfoId) {
8 | case 'bitcoin':
9 | return '#fb8c00';
10 | case 'ethereum':
11 | return '#424242';
12 | case 'litecoin':
13 | return '#3c3c3d';
14 | case 'dash':
15 | return '#42a5f5';
16 | case 'tron':
17 | return '#b71c1c';
18 | case 'ethereum-classic':
19 | return '#1b5e20';
20 | case 'uniswap':
21 | return '#d81b60';
22 | case 'bitcoin-cash':
23 | return '#00897b';
24 | case 'tether':
25 | return '#00897b';
26 | case 'usd-coin':
27 | return '#0277bd';
28 | case 'polkadot':
29 | return '#3c3c3d';
30 | case 'ripple':
31 | return '#3c3c3d';
32 | case 'dogecoin':
33 | return '#fbc02d';
34 | case 'cardano':
35 | return '#1976d2';
36 | case 'binancecoin':
37 | return '#ffc107';
38 | case 'decentraland':
39 | return '#e64a19';
40 | case 'shia-inu':
41 | return '#f90201';
42 | case 'solana':
43 | return '#7b1fa2';
44 | case 'stellar':
45 | return '#212121';
46 | case 'chainlink':
47 | return '#315acb';
48 | default:
49 | return '#424242';
50 | }
51 | };
52 |
53 | const pickSubColor = (coinInfoId) => {
54 | switch (coinInfoId) {
55 | case 'bitcoin':
56 | return '#FEF4D8';
57 | case 'ethereum':
58 | return '#e0e0e0';
59 | case 'litecoin':
60 | return '#d3d3d3';
61 | case 'dash':
62 | return '#bbdefb';
63 | case 'tron':
64 | return '#ffcdd2';
65 | case 'ethereum-classic':
66 | return '#c8e6c9';
67 | case 'uniswap':
68 | return '#f8bbd0';
69 | case 'bitcoin-cash':
70 | return '#b2dfdb';
71 | case 'tether':
72 | return '#b2dfdb';
73 | case 'usd-coin':
74 | return '#b3e5fc';
75 | case 'polkadot':
76 | return '#d3d3d3';
77 | case 'ripple':
78 | return '#d3d3d3';
79 | case 'dogecoin':
80 | return '#fff9c4';
81 | case 'cardano':
82 | return '#bbdefb';
83 | case 'binancecoin':
84 | return '#ffecb3';
85 | case 'decentraland':
86 | return '#ffccbc';
87 | case 'shia-inu':
88 | return '#fca501';
89 | case 'solana':
90 | return '#e1bee7';
91 | case 'stellar':
92 | return '#bdbdbd';
93 | case 'chainlink':
94 | return '#bbdefb';
95 | default:
96 | return '#e0e0e0';
97 | }
98 | };
99 |
100 | const CustomTooltip = ({ active, payload }) => {
101 | if (active && payload && payload.length) {
102 | return (
103 |
104 | {days === 1 ? (
105 |
{moment(payload[0].payload.date).format('ddd, hA')}
106 | ) : (
107 |
{moment(payload[0].payload.date).format('MMMM Do, YYYY')}
108 | )}
109 |
{`$ ${payload[0].value}`}
110 |
111 | );
112 | }
113 |
114 | return null;
115 | };
116 |
117 | return (
118 |
119 |
129 |
139 |
140 | );
141 | };
142 |
143 | export default Graph;
144 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Wallet/CompleteWallet/CardDesign.jsx:
--------------------------------------------------------------------------------
1 | import './CardDesign.scss';
2 | import { useState } from 'react';
3 | import Backdrop from '@material-ui/core/Backdrop';
4 | import Modal from '@material-ui/core/Modal';
5 | import Fade from '@material-ui/core/Fade';
6 | import axios from 'axios';
7 | import { RotateSpinner } from 'react-spinners-kit';
8 | import { ToastContainer, toast } from 'react-toastify';
9 | import 'react-toastify/dist/ReactToastify.css';
10 | import type1 from '../../../../assets/debit-cards/complete-card.png';
11 | import type2 from '../../../../assets/debit-cards/complete-card2.png';
12 | import type3 from '../../../../assets/debit-cards/complete-card3.png';
13 | import type4 from '../../../../assets/debit-cards/complete-card4.png';
14 |
15 | export default function CardDesign({ user, BsThreeDotsVertical }) {
16 | const [openModal, setOpenModal] = useState(false);
17 | const handleOpenModal = () => setOpenModal(true);
18 | const handleCloseModal = () => {
19 | setOpenModal(false);
20 | };
21 | const [changing, setChanging] = useState(false);
22 |
23 | const cardDesignEndpoint = 'https://api.apexwallet.app/v1/user/card-design';
24 |
25 | //change the user's password
26 | const handleCardDesignChange = async (cardDesign) => {
27 | setChanging(true);
28 |
29 | const newCardDesign = { cardDesign };
30 |
31 | try {
32 | await axios
33 | .put(cardDesignEndpoint, newCardDesign)
34 | .then(async (res) => {
35 | await toast.success(res.data, {});
36 | setChanging(false);
37 | setOpenModal(false);
38 | })
39 | .catch(async (err) => {
40 | await toast.error(err.response.data, {});
41 | setChanging(false);
42 | });
43 | } catch (err) {
44 | console.log('ERROR: ', err);
45 | setChanging(false);
46 | }
47 | };
48 |
49 | return (
50 |
51 |
52 |
54 |
63 |
64 |
65 |
69 | {changing ? (
70 |
71 |
73 | ) : (
74 | <>
75 |
Select A New Card Design
76 |
{
78 | handleCardDesignChange('type-1');
79 | }}
80 | className="alienSVG"
81 | >
82 |
83 |
84 |
{
86 | handleCardDesignChange('type-2');
87 | }}
88 | className="astronautSVG"
89 | >
90 |
91 |
92 |
{
94 | handleCardDesignChange('type-3');
95 | }}
96 | className="saturnSVG"
97 | >
98 |
99 |
100 |
{
102 | handleCardDesignChange('type-4');
103 | }}
104 | className="sunSVG"
105 | >
106 |
107 |
108 |
109 | )}
110 |
111 |
113 |
114 |
115 |
116 | );
117 | }
118 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Account/NameModal/NameModal.jsx:
--------------------------------------------------------------------------------
1 | import './NameModal.scss';
2 | import { useState } from 'react';
3 | import Backdrop from '@material-ui/core/Backdrop';
4 | import Modal from '@material-ui/core/Modal';
5 | import Fade from '@material-ui/core/Fade';
6 | import axios from 'axios';
7 | import { RotateSpinner } from 'react-spinners-kit';
8 | import { ToastContainer, toast } from 'react-toastify';
9 | import 'react-toastify/dist/ReactToastify.css';
10 | import { IoClose } from 'react-icons/io5';
11 | import { FiChevronRight } from 'react-icons/fi';
12 |
13 | export default function NameModal({ user }) {
14 | const [openModal, setOpenModal] = useState(false);
15 | const handleOpenModal = () => setOpenModal(true);
16 | const handleCloseModal = () => {
17 | setOpenModal(false);
18 | setName('');
19 | };
20 | const [name, setName] = useState('');
21 | const [changingName, setChangingName] = useState(false);
22 |
23 | const nameChangeEndpoint = 'https://api.apexwallet.app/v1/user/change-name';
24 |
25 | //change the user's password
26 | const handleNameChange = async (e) => {
27 | e.preventDefault();
28 | setChangingName(true);
29 | const displayName = { name };
30 | try {
31 | if (name === '' || name.length === 0 || name.trim().length === 0) {
32 | toast.error('Name can not be blank', {});
33 | setChangingName(false);
34 | } else if (name.length > 20) {
35 | toast.error('Name can not be more than 20 characters', {});
36 | setChangingName(false);
37 | } else {
38 | name.trim();
39 | await axios
40 | .put(nameChangeEndpoint, displayName)
41 | .then((res) => {
42 | if (res.status === 200) {
43 | toast.success(`${res.data}`, {});
44 | handleCloseModal();
45 | setChangingName(false);
46 | }
47 | })
48 | .catch(async (err) => {
49 | toast.error(`${err.response.data}`, {});
50 | setChangingName(false);
51 | });
52 | }
53 | } catch (error) {
54 | console.log('Error: ' + error);
55 | setChangingName(false);
56 | }
57 | };
58 |
59 | return (
60 |
61 |
62 |
63 |
Display Name
64 |
{user.name ? user.name : 'No name yet'}
65 |
66 |
67 |
69 |
70 |
78 |
79 |
80 |
81 |
86 |
88 |
Edit Display Name
89 |
107 |
108 |
110 |
111 |
112 |
113 | );
114 | }
115 |
--------------------------------------------------------------------------------
/src/components/TradeModal/SendxReceive/Receive.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 | $borderColor: rgb(170, 170, 170);
10 |
11 | .receive {
12 | height: 100%;
13 | position: fixed;
14 | top: 150vh;
15 | background: $mainColor;
16 | width: 100%;
17 | @media (min-width: 768px) {
18 | max-width: 30rem;
19 | display: none;
20 | }
21 | }
22 |
23 | .receive.Show {
24 | top: 0;
25 | left: 0;
26 | display: flex;
27 | flex-direction: column;
28 | align-items: center;
29 | transition: all 0.7s ease-in;
30 |
31 | @media (min-width: 768px) {
32 | top: 50%;
33 | left: 50%;
34 | transform: translate(-50%, -50%);
35 | border-radius: 10px;
36 | }
37 |
38 | .closeIcon {
39 | font-size: 1.5rem;
40 | top: 2%;
41 | right: 3%;
42 | position: absolute;
43 | z-index: 4;
44 | cursor: pointer;
45 | }
46 | .receiveDiv {
47 | width: 100%;
48 | display: flex;
49 | flex-direction: column;
50 | align-items: center;
51 | height: 100%;
52 | overflow: auto;
53 | position: relative;
54 |
55 | .header {
56 | @media (min-width: 768px) {
57 | margin-top: 1rem;
58 | }
59 | @media (max-width: 1024px) and (orientation: landscape) {
60 | margin-bottom: 10%;
61 | }
62 | }
63 |
64 | .selectBalanceAndBTN {
65 | width: 90%;
66 | display: flex;
67 | flex-direction: column;
68 | @media (max-width: 767px) and (orientation: portrait) {
69 | position: absolute;
70 | bottom: 5%;
71 | }
72 |
73 | @media (min-width: 768px) {
74 | margin-top: 2rem;
75 | }
76 |
77 | .selectCoin {
78 | height: 4rem;
79 | width: 100%;
80 | display: flex;
81 | align-items: center;
82 | font-size: 1.15rem;
83 | }
84 |
85 | .usernameAndAddress {
86 | width: 100%;
87 | display: flex;
88 | align-items: center;
89 | flex-direction: column;
90 | justify-content: center;
91 | margin-bottom: 1rem;
92 |
93 | .qrContainer {
94 | padding: 1rem;
95 | width: 90%;
96 | display: flex;
97 | flex-direction: column;
98 | align-items: center;
99 | margin-top: 0rem;
100 | justify-content: center;
101 | border: 1px solid $borderColor;
102 | border-radius: 5px;
103 |
104 | .qrCode {
105 | padding: 1rem 3rem;
106 | }
107 | }
108 |
109 | .iconAndName {
110 | display: flex;
111 | align-self: flex-start;
112 |
113 | .icon {
114 | transition: all 0.2s ease-in;
115 | }
116 |
117 | .icon:hover {
118 | cursor: pointer;
119 | color: $lightBlue;
120 | }
121 | }
122 |
123 | p {
124 | display: flex;
125 | align-self: flex-start;
126 | font-size: 0.95rem;
127 | color: $subColor;
128 | margin-bottom: 0rem;
129 | }
130 |
131 | span {
132 | font-size: 1.15rem;
133 | margin-right: 0.5rem;
134 | }
135 | }
136 |
137 | button {
138 | display: flex;
139 | align-items: center;
140 | justify-content: center;
141 | height: 4rem;
142 | width: 100%;
143 | font-size: 1.15rem;
144 | padding: 1rem;
145 | border-radius: 5px;
146 | outline: none;
147 | border: none;
148 | color: $mainColor;
149 | font-weight: bold;
150 | background: $blue;
151 | transition: 0.5s;
152 | margin-top: 1rem;
153 | @media (min-width: 768px){
154 | margin-bottom: 1.5rem;
155 | }
156 | }
157 |
158 | button:hover {
159 | cursor: pointer;
160 | background: $lightBlue;
161 | }
162 |
163 | button[disabled] {
164 | background: $borderColor;
165 | }
166 |
167 | button[disabled]:hover {
168 | cursor: not-allowed;
169 | }
170 | }
171 | }
172 | }
173 |
174 | .loading {
175 | position: absolute;
176 | top: 45%;
177 | left: 50%;
178 | transform: translate(-50%, -50%);
179 | }
180 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
16 |
20 |
24 |
25 |
30 |
35 |
36 |
40 |
41 |
42 |
43 |
44 |
45 |
50 |
55 |
60 |
65 |
70 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
Apexwallet
85 |
86 |
87 |
91 |
100 |
101 |
102 |
You need to enable JavaScript to run this app.
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/src/assets/debit-cards/complete-card2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | 4756 9018
27 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/components/BottomNav/BottomNav.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 | $borderColor: rgb(170, 170, 170);
10 |
11 | .navbar {
12 | position: fixed;
13 | bottom: 0;
14 | height: 4rem;
15 | width: 100%;
16 | display: flex;
17 | align-items: center;
18 | justify-content: space-around;
19 | font-size: 1.35rem;
20 | background: $mainColor;
21 | z-index: 5;
22 |
23 | @media (min-width: 768px) {
24 | position: sticky;
25 | width: 100%;
26 | max-width: 1000px;
27 | display: flex;
28 | align-items: center;
29 | justify-content: center;
30 | }
31 |
32 | a {
33 | text-decoration: none;
34 | color: $textColor;
35 | opacity: 0.5;
36 | }
37 |
38 | a.active {
39 | color: $textColor;
40 | opacity: 1;
41 | }
42 |
43 | .tradeIcon {
44 | display: flex;
45 | align-items: center;
46 | justify-content: center;
47 |
48 | @media (max-width: 767px) {
49 | height: 3.5rem;
50 | border-radius: 50%;
51 | font-size: 1.5rem;
52 | font-weight: bold;
53 | color: $mainColor;
54 | opacity: 1;
55 | background: $textColor;
56 | width: 3.5rem;
57 | margin-top: -2rem;
58 | transform: rotate(45deg);
59 | }
60 | }
61 |
62 | @media (max-width: 767px) {
63 | @keyframes navIconAnim {
64 | 0% {
65 | transform: scale(1);
66 | }
67 |
68 | 50% {
69 | transform: scale(1.3);
70 | }
71 |
72 | 100% {
73 | transform: scale(1);
74 | }
75 | }
76 | }
77 |
78 | .tradeModal {
79 | position: fixed;
80 | bottom: -150vh;
81 | background-color: $mainColor;
82 | width: 100%;
83 | box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.15);
84 | left: 0;
85 | padding: 1rem 0;
86 | z-index: 10;
87 | display: none;
88 | font-size: 1.15rem;
89 | border-top-left-radius: 10px;
90 | border-top-right-radius: 10px;
91 | height: 40%;
92 | @media (min-width: 768px) {
93 | display: none;
94 | width: 30rem;
95 | height: 28rem;
96 | border-bottom-left-radius: 10px;
97 | border-bottom-right-radius: 10px;
98 | }
99 | @media (max-width: 812px) and (orientation: landscape) {
100 | height: 90%;
101 | }
102 | }
103 |
104 | .tradeModal.Show {
105 | bottom: 0;
106 | display: flex;
107 | flex-direction: column;
108 | justify-content: space-around;
109 | transition: all 0.8s ease-in;
110 | @media (min-width: 768px) {
111 | display: flex;
112 | top: 50%;
113 | left: 50%;
114 | transform: translate(-50%, -50%);
115 | }
116 |
117 | .noWallet {
118 | display: flex;
119 | align-self: center;
120 | }
121 |
122 | .tradeModalIcon {
123 | font-size: 1.5rem;
124 | margin-right: 1rem;
125 | }
126 |
127 | .sendCrypto,
128 | .receiveCrypto,
129 | .convertCrypto,
130 | .buyCrypto,
131 | .sellCrypto {
132 | cursor: pointer;
133 | display: flex;
134 | margin-left: 1rem;
135 | width: 90%;
136 | }
137 | }
138 |
139 | .Overlay {
140 | background-color: rgba(0, 0, 0, 0.55);
141 | top: 0;
142 | bottom: 0;
143 | left: 0;
144 | right: 0;
145 | position: fixed;
146 | display: none;
147 | z-index: 5;
148 | }
149 |
150 | .Overlay.Show {
151 | display: block;
152 | }
153 |
154 | .homeIcon,
155 | .pricesIcon,
156 | .walletIcon,
157 | .accountIcon,
158 | .tradeIcon,
159 | .logoApex {
160 | display: flex;
161 | flex-direction: column;
162 | align-items: center;
163 | font-size: 1.35rem;
164 | font-weight: bold;
165 |
166 | @media (min-width: 768px) {
167 | flex-direction: row;
168 | font-size: 1.35rem;
169 | font-weight: normal;
170 | align-items: center;
171 | justify-content: center;
172 | margin-left: 2rem;
173 | margin-top: .5rem;
174 | }
175 |
176 | p {
177 | font-size: 0.9rem;
178 | margin-top: -0.05rem;
179 | margin-bottom: -0.05rem;
180 |
181 | @media (min-width: 768px) {
182 | font-size: 1.15rem;
183 | margin-top: 0;
184 | margin-bottom: -0.25rem;
185 | }
186 | }
187 | }
188 |
189 | .logoApex {
190 | height: 3.5rem;
191 | margin-right: -.75rem;
192 | opacity: 1;
193 |
194 | img {
195 | max-height: 100%;
196 | }
197 | }
198 | }
199 |
--------------------------------------------------------------------------------
/src/assets/debit-cards/complete-card4.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
15 |
16 |
17 |
18 | 4756 9018
21 |
24 |
25 |
26 |
27 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Dashboard/Messages/Messages.jsx:
--------------------------------------------------------------------------------
1 | import { IoClose } from 'react-icons/io5';
2 | import { BsArrowLeft } from 'react-icons/bs'
3 | import './Messages.scss';
4 | import moment from 'moment';
5 | import axios from 'axios';
6 | import { toast } from 'react-toastify';
7 | import 'react-toastify/dist/ReactToastify.css';
8 | import { useHistory } from 'react-router-dom';
9 | import { useState } from 'react';
10 |
11 | const Messages = ({ user, modalUpMessages, setModalUpMessages, messageModal, setMessageModal }) => {
12 | const history = useHistory();
13 | const [singleMessageModal, setSingleMessage] = useState('');
14 |
15 | const handleRedirect = (message) => {
16 | if (message.redirect) history.push(message.redirect);
17 | if (message.hasModal === true) {
18 | setMessageModal(true);
19 | setSingleMessage(message);
20 | }
21 | };
22 |
23 | const openMessageModal = (message) => {
24 | return (
25 |
26 |
27 |
setMessageModal(false)}>
28 |
30 |
{message.title}
31 | {message.image &&
}
32 |
33 | {message.from && (
34 |
35 | {message.from}
36 | •
37 |
38 | )}
39 |
{moment(message.date).startOf('hour').fromNow()}
40 |
41 |
{message.text}
42 |
43 |
44 | );
45 | };
46 |
47 | //set the message to unread after opening it.
48 | const handleOpenMessage = async (messageId) => {
49 | const apiURL = 'https://api.apexwallet.app/v1';
50 | const message = { messageId };
51 | try {
52 | await axios.put(`${apiURL}/message/open-message`, message, { withCredentials: true }).catch(async (err) => {
53 | await toast.error(err.response.data, {});
54 | });
55 | } catch (error) {
56 | console.log('ERROR: ', error);
57 | }
58 | };
59 |
60 | return (
61 | <>
62 |
63 |
{
66 | setModalUpMessages(false);
67 | setMessageModal(false);
68 | }}
69 | >
70 |
72 |
{
75 | setModalUpMessages(false);
76 | setMessageModal(false);
77 | }}
78 | >
79 |
81 |
Notifications
82 |
83 | {/* sort each message by date */}
84 | {user.messages.length > 0 ? (
85 | user.messages
86 | .sort(function (a, b) {
87 | if (a.date < b.date) {
88 | return 1;
89 | }
90 | if (a.date > b.date) {
91 | return -1;
92 | }
93 | return 0;
94 | })
95 | .map((message) => (
96 |
{
99 | handleOpenMessage(message._id);
100 | handleRedirect(message);
101 | }}
102 | className="messagesDiv"
103 | >
104 |
111 | {message.title}
112 |
113 |
{message.text}
114 |
115 |
{moment(message.date).startOf('hour').fromNow()}
116 | {message.from && (
117 |
118 | •
119 | {message.from}
120 |
121 | )}
122 |
123 |
124 | ))
125 | ) : (
126 |
Nothing to see here yet
127 | )}
128 |
129 | {messageModal && openMessageModal(singleMessageModal)}
130 |
131 | );
132 | };
133 |
134 | export default Messages;
135 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Dashboard/Messages/Messages.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 | $borderColor: rgb(170, 170, 170);
10 |
11 | .messages,
12 | .messageModal {
13 | height: 100%;
14 | position: fixed;
15 | top: 0;
16 | left: 150vw;
17 | background: $mainColor;
18 | width: 100%;
19 | @media (min-width: 768px) {
20 | max-width: 30rem;
21 | height: 50%;
22 | }
23 | }
24 |
25 | .messages.Show,
26 | .messageModal.Show {
27 | top: 0;
28 | left: 0;
29 | display: flex;
30 | flex-direction: column;
31 | align-items: center;
32 | overflow: scroll;
33 | @media (max-width: 767px) {
34 | transition: all 0.7s ease-in;
35 | }
36 | z-index: 6;
37 |
38 | @media (min-width: 768px) {
39 | top: 50%;
40 | left: 50%;
41 | transform: translate(-50%, -50%);
42 | border-radius: 10px;
43 | }
44 |
45 | .closeIcon {
46 | font-size: 1.5rem;
47 | top: 2%;
48 | right: 3%;
49 | position: absolute;
50 | @media (max-width: 767px) {
51 | display: none;
52 | }
53 | }
54 | .closeIconMobile {
55 | font-size: 2rem;
56 | top: 5%;
57 | @media (max-width: 767px) {
58 | top: 2%;
59 | }
60 | left: 4%;
61 | position: absolute;
62 | @media (min-width: 768px) {
63 | display: none;
64 | }
65 | }
66 | .messagesHeader {
67 | font-size: 1.35rem;
68 | margin-top: 1rem;
69 | margin-bottom: 1rem;
70 | @media (min-width: 768px) {
71 | margin-top: 2rem;
72 | font-size: 1.75rem;
73 | }
74 | color: $textColor;
75 | }
76 |
77 | .noMessages {
78 | font-size: 1rem;
79 | margin-top: -0.5rem;
80 | color: $subColor;
81 | }
82 |
83 | .messagesDiv {
84 | width: 90%;
85 | height: fit-content;
86 | padding: 1rem;
87 |
88 | .messageTitle {
89 | font-size: 1.05rem;
90 | margin-top: -1rem;
91 | }
92 |
93 | .messageText {
94 | font-size: 1rem;
95 | margin-top: -0.75rem;
96 | color: $subColor;
97 | overflow: hidden;
98 | text-overflow: ellipsis;
99 | display: -webkit-box;
100 | -webkit-line-clamp: 3; /* number of lines to show */
101 | -webkit-box-orient: vertical;
102 | }
103 |
104 | .fromAndDate {
105 | display: flex;
106 | align-items: center;
107 | font-size: 0.9rem;
108 | color: $subColor;
109 | margin-top: -1.45rem;
110 |
111 | .messageFrom {
112 | // background: #000;
113 | margin-left: 0.25rem;
114 |
115 | .fromSpan {
116 | height: 1rem;
117 | width: 1rem;
118 | font-size: 1rem;
119 | margin-right: 0.25rem;
120 | }
121 | }
122 | }
123 | }
124 | }
125 |
126 | .messageModal.Show {
127 | .closeIcon {
128 | font-size: 2rem;
129 | top: 5%;
130 | @media (max-width: 767px) {
131 | top: 2%;
132 | }
133 | left: 4%;
134 | position: absolute;
135 | display: block;
136 | }
137 | @media (max-width: 767px) {
138 | animation: messageSlideIn 0.7s ease-in forwards;
139 | }
140 |
141 | .container {
142 | width: 90%;
143 | height: fit-content;
144 | padding: 1rem;
145 | display: flex;
146 | align-items: center;
147 | }
148 |
149 | .messageTitle {
150 | display: flex;
151 | font-size: 1.35rem;
152 | @media (max-width: 767px) {
153 | margin-top: 3rem;
154 | align-self: flex-start;
155 | }
156 | }
157 |
158 | img {
159 | height: 50%;
160 | width: 100%;
161 | border-radius: 10px;
162 | margin-bottom: 1.5rem;
163 | margin-top: -.5rem;
164 | }
165 |
166 | .messageText {
167 | font-size: 1.15rem;
168 | color: $subColor;
169 | margin-top: -0.5rem;
170 | line-height: 1.95;
171 | }
172 |
173 | .fromAndDate {
174 | align-self: flex-start;
175 | display: flex;
176 | align-items: center;
177 | font-size: 0.9rem;
178 | color: $subColor;
179 | margin-top: -1.75rem;
180 |
181 | .messageFrom {
182 | font-weight: bold;
183 |
184 | .fromSpan {
185 | height: 1rem;
186 | width: 1rem;
187 | font-size: 1rem;
188 | margin-left: 0.25rem;
189 |
190 | margin-right: 0.25rem;
191 | }
192 | }
193 | }
194 | }
195 |
196 | @keyframes messageSlideIn {
197 | from {
198 | left: 150vw;
199 | }
200 |
201 | to {
202 | left: 0;
203 | }
204 | }
205 |
206 | .loading {
207 | position: absolute;
208 | top: 45%;
209 | left: 50%;
210 | transform: translate(-50%, -50%);
211 | }
212 |
--------------------------------------------------------------------------------
/src/pages/Login/Login.jsx:
--------------------------------------------------------------------------------
1 | import './Login.scss';
2 | // import astronaut from '../../assets/logo/astronaut-ingravity.svg';
3 | import { useState, useContext } from 'react';
4 | import { useHistory } from 'react-router-dom';
5 | import { RotateSpinner } from 'react-spinners-kit';
6 | import { BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
7 | import { Link } from 'react-router-dom';
8 | import useTitle from '../../utils/useTitle';
9 | import AuthContext from '../../components/Auth/AuthContext';
10 | import axios from 'axios';
11 | import { ToastContainer, toast } from 'react-toastify';
12 | import 'react-toastify/dist/ReactToastify.css';
13 |
14 | const Login = () => {
15 | const history = useHistory();
16 | const { getLoggedIn } = useContext(AuthContext);
17 | const [username, setUsername] = useState('');
18 | const [password, setPassword] = useState('');
19 | const [passwordVisible, setPasswordVisible] = useState(false);
20 | const [loggingIn, setLoggingIn] = useState(false);
21 | const apiURL = 'https://api.apexwallet.app/v1';
22 |
23 | useTitle('Login | Apexwallet');
24 |
25 | //handle the form submit
26 | const handleLogin = async (e) => {
27 | e.preventDefault();
28 |
29 | //start animating the button
30 | setLoggingIn(true);
31 |
32 | //use try catch to prevent open hole
33 | try {
34 | const user = { username, password };
35 | await axios
36 | .post(`${apiURL}/auth/login`, user, { withCredentials: true })
37 | .then((res) => {
38 | async function getStatus() {
39 | //wait to see if the status exists
40 | await res.status;
41 | //if the status is 201 (created), then refresh the getLoggedIn()
42 | //so the loggedIn value can change from false to true in the AuthContext
43 | if (res.status === 200) {
44 | await getLoggedIn();
45 | await history.push('/dashboard');
46 | }
47 | }
48 | //call the function.
49 | getStatus();
50 | })
51 | .catch(async (err) => {
52 | //if error, display the custom error message from the server with toastify.
53 | await toast.error(`${err.response.data}`, {});
54 | });
55 |
56 | //after the try operation, stop the button animation
57 | setLoggingIn(false);
58 | } catch (error) {
59 | console.log('ERROR' + error);
60 | setLoggingIn(false);
61 | }
62 | };
63 |
64 | //toggle the password visibility
65 | const togglePassword = () => {
66 | setPasswordVisible(!passwordVisible);
67 | };
68 |
69 | return (
70 | <>
71 |
72 |
73 |
74 |
Welcome Back!
75 |
Sign in to continue
76 |
77 |
78 | {/*
79 |
80 |
81 |
*/}
82 |
83 |
125 |
126 | Don't have an account? -
Sign Up
127 |
128 |
129 |
130 |
131 |
132 |
133 | );
134 | };
135 |
136 | export default Login;
137 |
--------------------------------------------------------------------------------
/src/pages/LandingPage/SectionOne/SectionOne.jsx:
--------------------------------------------------------------------------------
1 | import "./SectionOne.scss";
2 | import { Link } from "react-router-dom";
3 | import BitcoinSVG from "../../../assets/mockups/Bitcoin.svg";
4 | import bitcoin from "../../../assets/landingLogos/bitcoin.png";
5 | import ethereum from "../../../assets/landingLogos/ethereum.png";
6 | import tether from "../../../assets/landingLogos/tether.png";
7 | import dogecoin from "../../../assets/landingLogos/dogecoin.png";
8 | import binanceCoin from "../../../assets/landingLogos/binance-coin.png";
9 | import cardano from "../../../assets/landingLogos/cardano.png";
10 | import usdCoin from "../../../assets/landingLogos/usd-coin.png";
11 | import uniswap from "../../../assets/landingLogos/uniswap.png";
12 | import bitcoinCash from "../../../assets/landingLogos/bitcoin-cash.png";
13 | import xrp from "../../../assets/landingLogos/xrp.png";
14 | import tron from "../../../assets/landingLogos/tron.png";
15 | import ethereumClassic from "../../../assets/landingLogos/ethereum-classic.png";
16 | import litecoin from "../../../assets/landingLogos/litecoin.png";
17 | import dash from "../../../assets/landingLogos/dash.png";
18 | import polkadot from "../../../assets/landingLogos/polkadot-new.png";
19 | import Nav from "../../../components/TopNav/Nav";
20 |
21 | const SectionOne = () => {
22 | return (
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | Learn how cryptocurrencies works by
74 | simulating basically anything you can do with a real
75 | crypto wallet
76 |
77 |
78 |
85 |
86 |
87 |
88 |
89 |
95 |
96 |
97 |
98 | );
99 | };
100 |
101 | export default SectionOne;
102 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Wallet/Transactions/Transactions.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $borderColor: rgb(158, 158, 158);
8 | $orange: #ef5116;
9 | $navyBlue: #262946;
10 |
11 | .transactionsComponent {
12 | display: flex;
13 | justify-content: center;
14 | min-height: 100vh;
15 | @media (max-width: 768px) {
16 | margin-bottom: 10rem;
17 | }
18 |
19 | @media (min-width: 768px) {
20 | height: 95vh;
21 | width: 100%;
22 | display: flex;
23 | align-items: center;
24 | justify-content: flex-start;
25 | flex-direction: column;
26 | position: relative;
27 | }
28 |
29 | .container {
30 | display: flex;
31 | width: 100%;
32 | flex-direction: column;
33 | align-items: center;
34 | padding: 0 1rem;
35 |
36 | @media (min-width: 768px) {
37 | max-width: 900px;
38 | width: 100%;
39 | padding: 2rem;
40 | align-items: center;
41 | @media (min-width: 1024px) {
42 | align-items: flex-start;
43 | }
44 | justify-content: center;
45 | }
46 |
47 | .loading {
48 | position: absolute;
49 | top: 45%;
50 | left: 50%;
51 | transform: translate(-50%, -50%);
52 | }
53 |
54 | .header {
55 | color: $textColor;
56 | display: flex;
57 | text-align: left;
58 | align-items: center;
59 | justify-content: space-between;
60 | font-size: 1.25rem;
61 | width: 100%;
62 | @media (min-width: 768px) and (max-width: 1023px) {
63 | width: 90%;
64 | }
65 | margin-bottom: -1rem;
66 |
67 | .backEmoji {
68 | display: flex;
69 | align-items: center;
70 | justify-content: center;
71 | margin-right: 1rem;
72 | }
73 |
74 | p {
75 | display: flex;
76 | align-self: center;
77 | justify-content: center;
78 | justify-self: center;
79 | width: 100%;
80 | margin-left: -1rem;
81 | }
82 | }
83 |
84 | .transactionsContainer {
85 | width: 100%;
86 | @media (min-width: 768px) and (max-width: 1023px) {
87 | width: 90%;
88 | }
89 | padding: 1rem;
90 | }
91 |
92 | .noWalletTransaction {
93 | display: flex;
94 | align-self: center;
95 | text-align: center;
96 | justify-content: center;
97 | }
98 |
99 | .transactionsHeader {
100 | color: $textColor;
101 | display: flex;
102 | align-self: flex-start;
103 | @media (min-width: 481px) {
104 | align-self: center;
105 | }
106 | margin-top: 2rem;
107 | font-size: 1.15rem;
108 | margin-bottom: 0.5rem;
109 | }
110 |
111 | .walletTransaction {
112 | display: flex;
113 | align-items: center;
114 | justify-content: space-between;
115 | width: 100%;
116 | margin-top: -0.5rem;
117 | transition: all 0.2s ease-in;
118 |
119 | .transactionIcon {
120 | padding: 0.55rem;
121 | border-radius: 5px;
122 | font-weight: bold;
123 | font-size: 1rem;
124 | display: flex;
125 | align-items: center;
126 | justify-content: center;
127 | }
128 |
129 | .memoAndDate {
130 | margin-left: 1rem;
131 | display: flex;
132 | flex-direction: column;
133 | text-transform: capitalize;
134 | margin-right: auto;
135 |
136 | p:nth-child(1) {
137 | font-size: 1rem;
138 | color: $textColor;
139 | }
140 |
141 | p:nth-child(2) {
142 | font-size: 0.9rem;
143 | @media (min-width: 768px) {
144 | font-size: 0.95rem;
145 | }
146 | margin-top: -0.75rem;
147 | color: $subColor;
148 | width: 150px;
149 | white-space: nowrap;
150 | overflow: hidden;
151 | text-overflow: ellipsis;
152 | }
153 | }
154 |
155 | .value {
156 | min-width: 4rem;
157 | color: $textColor;
158 | font-size: 1rem;
159 | margin-left: auto;
160 | text-align: right;
161 | }
162 | }
163 |
164 | .walletTransaction:hover {
165 | cursor: pointer;
166 | transform: translateY(-5%);
167 | }
168 |
169 | .sortTransactions {
170 | display: flex;
171 | width: 100%;
172 | align-items: center;
173 | justify-content: center;
174 | margin-bottom: 1rem;
175 |
176 | .allTransactions,
177 | .incomeTransactions,
178 | .allTransactionsAmount {
179 | margin-right: 0.5rem;
180 | border-radius: 5px;
181 | padding: 0 0.5rem;
182 | color: $subColor;
183 | }
184 |
185 | .expenseTransactions {
186 | border-radius: 5px;
187 | padding: 0 0.5rem;
188 | color: $subColor;
189 | }
190 |
191 | .active {
192 | color: $textColor;
193 | font-weight: bold;
194 | }
195 | }
196 | }
197 | }
198 |
--------------------------------------------------------------------------------
/src/pages/ResetPassword/Reset.jsx:
--------------------------------------------------------------------------------
1 | import './Reset.scss';
2 | // import astronaut from '../../assets/logo/astronaut-ingravity.svg';
3 | import { useState } from 'react';
4 | import { RotateSpinner } from 'react-spinners-kit';
5 | import { BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
6 | import { useHistory } from 'react-router-dom';
7 | import useTitle from '../../utils/useTitle'
8 | import axios from 'axios';
9 | import { ToastContainer, toast } from 'react-toastify';
10 | import 'react-toastify/dist/ReactToastify.css';
11 |
12 | const Reset = () => {
13 | const history = useHistory();
14 | const [password, setPassword] = useState('');
15 | const [confirmPassword, setConfirmPassword] = useState('');
16 | const [passwordVisible, setPasswordVisible] = useState(false);
17 | const [passwordConfirmVisible, setPasswordConfirmVisible] = useState(false);
18 | const [resetting, setResetting] = useState(false);
19 | const apiURL = 'https://api.apexwallet.app/v1';
20 | const queryString = window.location.search;
21 | const urlParams = new URLSearchParams(queryString);
22 | const token = urlParams.get('token');
23 |
24 | if (token === null) {
25 | history.push('/forgot-password');
26 | }
27 |
28 | useTitle('Reset Password | Apexwallet');
29 |
30 | const handleReset = async (e) => {
31 | e.preventDefault();
32 |
33 | if (password !== confirmPassword) {
34 | toast.error('Passwords do not match', {});
35 | } else {
36 | setResetting(true);
37 | const user = { password, confirmPassword, token };
38 |
39 | try {
40 | await axios
41 | .put(`${apiURL}/auth/reset-password/`, user, { withCredentials: true })
42 | .then(async (res) => {
43 | if (res.status === 200) {
44 | await toast.success(`${res.data}`, {});
45 | history.push('/login');
46 | }
47 | })
48 | .catch(async (err) => {
49 | //if error, display the custom error message from the server with toastify.
50 | await toast.error(`${err.response.data}`, {});
51 | });
52 |
53 | setResetting(false);
54 | } catch (error) {
55 | await toast.error(`${error}`, {});
56 |
57 | setResetting(false);
58 | }
59 | }
60 | };
61 |
62 | const togglePassword = () => {
63 | setPasswordVisible(!passwordVisible);
64 | };
65 |
66 | const togglePasswordConfirm = () => {
67 | setPasswordConfirmVisible(!passwordConfirmVisible);
68 | };
69 |
70 | return (
71 | <>
72 |
73 |
74 |
75 |
Reset Password
76 |
77 | Please enter your new password
78 |
79 |
80 |
81 | {/*
82 |
83 |
84 |
*/}
85 |
86 |
133 |
134 |
135 |
136 |
137 |
138 | );
139 | };
140 |
141 | export default Reset;
142 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Account/StatusModal/Modal.jsx:
--------------------------------------------------------------------------------
1 | import './Modal.scss';
2 | import { useState } from 'react';
3 | import Backdrop from '@material-ui/core/Backdrop';
4 | import Modal from '@material-ui/core/Modal';
5 | import Fade from '@material-ui/core/Fade';
6 | import { GoUnverified, GoVerified } from 'react-icons/go';
7 | import notAllowedIcon from '../../../../assets/logo/appl-274c-160.png';
8 | import allowedIcon from '../../../../assets/logo/appl-2705-160.png';
9 | import moneyMouth from '../../../../assets/logo/moneyMouth.png';
10 | import { FiChevronRight } from 'react-icons/fi';
11 | import axios from 'axios';
12 | import { toast } from 'react-toastify';
13 | import 'react-toastify/dist/ReactToastify.css';
14 |
15 | export default function StatusModal({ user }) {
16 | const [openModal, setOpenModal] = useState(false);
17 | const handleOpenModal = () => setOpenModal(true);
18 | const handleCloseModal = () => setOpenModal(false);
19 | const [sending, setSending] = useState(false);
20 | const apiURL = 'https://api.apexwallet.app/v1';
21 |
22 | const handleNewVerification = async () => {
23 | setSending(true);
24 | try {
25 | await axios
26 | .post(`${apiURL}/auth/resend-verification-link`)
27 | .then((res) => {
28 | if (res.status === 200) {
29 | toast.success(`${res.data}`, {
30 | hideProgressBar: true,
31 | });
32 | handleCloseModal();
33 | setSending(false);
34 | }
35 | })
36 | .catch(async (err) => {
37 | await toast.error(`${err.response.data}`, {});
38 | setSending(false);
39 | });
40 | } catch (error) {
41 | console.log('Error: ' + error);
42 | setSending(false);
43 | }
44 | };
45 |
46 | return (
47 |
48 |
49 |
{user.isActive === true ?
50 |
Status
51 |
52 | {user.isActive === true ? 'Verified' : 'Unverified'}
53 |
54 |
55 |
57 |
58 |
67 |
68 |
69 |
70 |
71 | {user.isActive === true ?
73 |
74 |
75 |
79 |
Open a wallet
80 |
81 |
82 |
86 |
Buy and Sell crypto
87 |
88 |
89 |
93 |
Send and Receive crypto
94 |
95 |
96 |
100 |
Coin Conversion
101 |
102 |
103 |
104 |
Track assets
105 |
106 |
107 |
111 |
Coin Locking (TBA)
112 |
113 |
114 |
user.isActive === false && handleNewVerification()}
116 | className="privilegesNote"
117 | >
118 | {user.isActive === true ? (
119 | <>
120 |
121 | Account verified! You can do as much as you like
122 |
124 |
125 | ) : (
126 | <>
127 |
128 | {sending
129 | ? 'Sending...'
130 | : 'Account unverified! Click here to resend a verification email'}
131 |
132 |
133 | )}
134 |
135 |
136 |
137 |
139 |
140 |
141 | );
142 | }
143 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Account/PasswordModal/PasswordModal.jsx:
--------------------------------------------------------------------------------
1 | import './PasswordModal.scss';
2 | import { useState } from 'react';
3 | import Backdrop from '@material-ui/core/Backdrop';
4 | import Modal from '@material-ui/core/Modal';
5 | import Fade from '@material-ui/core/Fade';
6 | import axios from 'axios';
7 | import { RotateSpinner } from 'react-spinners-kit';
8 | import { ToastContainer, toast } from 'react-toastify';
9 | import 'react-toastify/dist/ReactToastify.css';
10 | import { IoClose } from 'react-icons/io5';
11 | import { FiChevronRight } from 'react-icons/fi';
12 |
13 | export default function PasswordModal({ user }) {
14 | const [openModal, setOpenModal] = useState(false);
15 | const handleOpenModal = () => setOpenModal(true);
16 | const handleCloseModal = () => {
17 | setOpenModal(false);
18 | setCurrentPassword('');
19 | setConfirmCurrentPassword('');
20 | setNewPassword('');
21 | };
22 | const [currentPassword, setCurrentPassword] = useState('');
23 | const [confirmCurrentPassword, setConfirmCurrentPassword] = useState('');
24 | const [newPassword, setNewPassword] = useState('');
25 | const [changingPassword, setChangingPassword] = useState(false);
26 |
27 | const passwordChangeEndpoint = 'https://api.apexwallet.app/v1/user/change-password';
28 |
29 | //change the user's password
30 | const handlePasswordChange = async (e) => {
31 | e.preventDefault();
32 | setChangingPassword(true);
33 | const userPassword = { currentPassword, confirmCurrentPassword, newPassword };
34 | try {
35 | if (currentPassword !== confirmCurrentPassword) {
36 | toast.error('Passwords do not match', {
37 |
38 | });
39 | setChangingPassword(false);
40 | } else {
41 | await axios
42 | .put(passwordChangeEndpoint, userPassword)
43 | .then((res) => {
44 | if (res.status === 200) {
45 | toast.success(`${res.data}`, {
46 |
47 | });
48 | handleCloseModal();
49 | setChangingPassword(false);
50 | }
51 | })
52 | .catch(async (err) => {
53 | toast.error(`${err.response.data}`, {
54 |
55 | });
56 | setChangingPassword(false);
57 | });
58 | }
59 | } catch (error) {
60 | console.log('Error: ' + error);
61 | setChangingPassword(false);
62 | }
63 | };
64 |
65 | return (
66 |
67 |
68 |
69 |
Password
70 |
**********
71 |
72 |
73 |
75 |
76 |
84 |
85 |
86 |
87 |
92 |
94 |
Change Password
95 |
139 |
140 |
142 |
143 |
144 |
145 | );
146 | }
147 |
--------------------------------------------------------------------------------
/src/pages/SignUp/SignUp.jsx:
--------------------------------------------------------------------------------
1 | import './SignUp.scss';
2 | // import astronaut from '../../assets/logo/astronaut-ingravity.svg';
3 | import { useState, useContext } from 'react';
4 | import { RotateSpinner } from 'react-spinners-kit';
5 | import { BsEyeFill, BsEyeSlashFill } from 'react-icons/bs';
6 | import { Link } from 'react-router-dom';
7 | import { useHistory } from 'react-router-dom';
8 | import useTitle from '../../utils/useTitle';
9 | import AuthContext from '../../components/Auth/AuthContext';
10 | import axios from 'axios';
11 | import { ToastContainer, toast } from 'react-toastify';
12 | import 'react-toastify/dist/ReactToastify.css';
13 |
14 | const SignUp = () => {
15 | const history = useHistory();
16 | const { getLoggedIn } = useContext(AuthContext);
17 | const [email, setEmail] = useState('');
18 | const [username, seUserName] = useState('');
19 | const [password, setPassword] = useState('');
20 | const [passwordVisible, setPasswordVisible] = useState(false);
21 | const [signingIn, setSigningIn] = useState(false);
22 | const apiURL = 'https://api.apexwallet.app/v1';
23 | useTitle('SignUp | Apexwallet');
24 |
25 | //handle the signup request from the form
26 | const handleSignUp = async (e) => {
27 | e.preventDefault();
28 |
29 | //animate the button with this state
30 | setSigningIn(true);
31 |
32 | //send a post request to the server
33 | try {
34 | const user = { username, email, password };
35 |
36 | //honestly, axios makes life easier.
37 | await axios
38 | .post(`${apiURL}/auth/signup`, user, { withCredentials: true })
39 | // OKAY THIS SH*T WORKS 🚀
40 | .then(
41 | //Using axios, check the res response and look for the status
42 | (res) => {
43 | async function getStatus() {
44 | //wait to see if the status exists
45 | await res.status;
46 | //if the status is 201 (created), then refresh the getLoggedIn()
47 | //so the loggedIn value can change from false to true in the AuthContext
48 | if (res.status === 201) {
49 | await getLoggedIn();
50 | await history.push('/dashboard');
51 | }
52 | }
53 | //call the function.
54 | getStatus();
55 | }
56 | )
57 | //if there is an error from the server, display it
58 | .catch(async (err) => {
59 | //toastify ROCKS!!
60 | await toast.error(`${err.response.data}`, {});
61 | });
62 | setSigningIn(false);
63 | } catch (error) {
64 | console.log('ERROR: ' + error.response);
65 | setSigningIn(false);
66 | }
67 | };
68 |
69 | //toggle the password visibility
70 | const togglePassword = () => {
71 | setPasswordVisible(!passwordVisible);
72 | };
73 |
74 | return (
75 | <>
76 |
77 |
78 |
79 |
Welcome
80 |
Sign up to start simulating!
81 |
82 |
83 | {/*
84 |
85 |
86 |
*/}
87 |
88 |
141 |
142 | Already have an account? -
Sign In
143 |
144 |
145 |
146 |
147 |
148 |
149 | );
150 | };
151 |
152 | export default SignUp;
153 |
--------------------------------------------------------------------------------
/src/components/TradeModal/SendxReceive/Receive.jsx:
--------------------------------------------------------------------------------
1 | import { IoClose } from 'react-icons/io5';
2 | import './Receive.scss';
3 | import { RotateSpinner } from 'react-spinners-kit';
4 | import { toast } from 'react-toastify';
5 | import 'react-toastify/dist/ReactToastify.css';
6 | import MenuItem from '@material-ui/core/MenuItem';
7 | import Select from '@material-ui/core/Select';
8 | import { MdContentCopy } from 'react-icons/md';
9 | import QRCode from 'qrcode.react';
10 | import { useState, useEffect } from 'react';
11 |
12 | const ReceiveCoins = ({ modalUpReceive, setModalUpReceive, coin, setCoin, coinInfo, user, wallet, address }) => {
13 | const handleChange = (event) => {
14 | setCoin(event.target.value);
15 | };
16 |
17 | const [userCoins, setUserCoins] = useState(null);
18 |
19 | useEffect(() => {
20 | if (wallet !== null) {
21 | let coinArr = [];
22 |
23 | wallet.coins.forEach((wallet) => {
24 | coinArr.push(wallet.coin);
25 | });
26 |
27 | setUserCoins(coinArr);
28 | }
29 | }, [wallet]);
30 |
31 | const receiveFunction = () => {
32 | if (coinInfo !== null && user !== null && wallet !== null && address !== null) {
33 | return (
34 | <>
35 |
36 | Receive{' '}
37 | {coinInfo.name ? coinInfo.name : coin}
38 |
39 |
40 |
41 |
42 | {userCoins.includes(coinInfo.id) ? (
43 |
51 | ) : null}
52 |
53 | {userCoins.includes(coinInfo.id) &&
{coinInfo.symbol.toUpperCase()} Address
}
54 |
55 |
56 | {userCoins.includes(coinInfo.id)
57 | ? address
58 | : `You don't have ${coinInfo.name} yet.`}
59 |
60 |
{
62 | navigator.clipboard.writeText(address);
63 | toast.success(`Copied ${coinInfo.symbol.toUpperCase()} Address`, {
64 | hideProgressBar: true,
65 | });
66 | }}
67 | className="icon"
68 | >
69 | {userCoins.includes(coinInfo.id) &&
71 |
72 |
73 |
74 |
75 | Bitcoin
76 | Ethereum
77 | Ethereum Classic
78 | Litecoin
79 | Dogecoin
80 | Ripple
81 | Tether
82 | Binance Coin
83 | Cardano
84 | USD Coin
85 | Tron
86 | Bitcoin Cash
87 | Polkadot
88 | Uniswap
89 | Dash
90 | Decentraland
91 | Shiba Inu
92 | Stellar
93 | Chainlink
94 | Solana
95 |
96 |
{
98 | if (userCoins.includes(coinInfo.id)) {
99 | if (navigator.share) {
100 | navigator
101 | .share({
102 | text: address,
103 | })
104 | .then(() => {
105 | navigator.vibrate(200);
106 | })
107 | .catch(console.error);
108 | } else {
109 | navigator.clipboard.writeText(address);
110 | toast.success(`Copied ${coinInfo.symbol.toUpperCase()} Address`, {
111 | hideProgressBar: true,
112 | });
113 | }
114 | } else {
115 | setModalUpReceive(!modalUpReceive);
116 | }
117 | }}
118 | >
119 | {userCoins.includes(coinInfo.id) ? 'Share Address' : 'Close'}
120 |
121 |
122 |
123 | );
124 | } else {
125 | return (
126 |
127 |
129 | );
130 | }
131 | };
132 |
133 | return (
134 |
135 |
setModalUpReceive(!modalUpReceive)}>
136 |
138 |
139 | {/* Receive Functions */}
140 |
{receiveFunction()}
141 |
142 | );
143 | };
144 |
145 | export default ReceiveCoins;
146 |
--------------------------------------------------------------------------------
/src/pages/Login/Login.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 |
10 | .login {
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | margin-bottom: 3rem;
15 | @media (max-width: 768px) and (orientation: landscape) {
16 | margin-bottom: 5rem;
17 | }
18 |
19 | @media (min-width: 768px) {
20 | height: 95vh;
21 | display: flex;
22 | align-items: center;
23 | justify-content: center;
24 | }
25 |
26 | .assets {
27 | position: absolute;
28 | z-index: -2;
29 | top: -10%;
30 | left: -15%;
31 | @media (max-width: 481px) {
32 | top: -20%;
33 | left: -20%;
34 | }
35 | @media (min-width: 768px) and (max-width: 1024px) {
36 | top: -10%;
37 | left: -20%;
38 | }
39 |
40 | img {
41 | position: absolute;
42 | height: 4rem;
43 | top: 50%;
44 | left: 100%;
45 | transform: rotate(-20deg) scaleX(-1);
46 | color: $textColor;
47 | animation: astronautAnim 5s ease-in-out infinite forwards;
48 | @media (max-width: 481px) {
49 | height: 3rem;
50 | }
51 | @media (max-width: 768px) and (orientation: landscape) {
52 | top: 30%;
53 | }
54 |
55 | @keyframes astronautAnim {
56 | 0% {
57 | transform: translateY(0%) rotate(-20deg) scaleX(-1);
58 | }
59 |
60 | 25% {
61 | transform: translateY(10%) rotate(-20deg) scaleX(-1);
62 | }
63 |
64 | 50% {
65 | transform: translateY(-10%) rotate(-20deg) scaleX(-1);
66 | }
67 |
68 | 75% {
69 | transform: translateY(10%) rotate(-20deg) scaleX(-1);
70 | }
71 |
72 | 100% {
73 | transform: translateY(0%) rotate(-20deg) scaleX(-1);
74 | }
75 | }
76 | }
77 |
78 | .circle {
79 | height: 30rem;
80 | width: 30rem;
81 | opacity: 1;
82 | border-radius: 100%;
83 | background: linear-gradient(to left, $blue, #b8c4f4);
84 | animation: circleAnim 5s ease-in-out infinite forwards;
85 | @keyframes circleAnim {
86 | from {
87 | transform: rotate(0deg);
88 | }
89 | to {
90 | transform: rotate(360deg);
91 | }
92 | }
93 | @media (max-width: 768px) {
94 | height: 20rem;
95 | width: 20rem;
96 | }
97 | @media (max-width: 481px) {
98 | height: 16rem;
99 | width: 16rem;
100 | }
101 | }
102 | }
103 |
104 | .container {
105 | display: flex;
106 | flex-direction: column;
107 | align-items: center;
108 | max-width: 30rem;
109 | width: 100%;
110 | margin-top: 2rem;
111 | @media (min-width: 768px){
112 | margin-top: -2rem;
113 | }
114 |
115 | .header {
116 | color: $textColor;
117 | display: flex;
118 | flex-direction: column;
119 |
120 | p {
121 | text-align: center;
122 | font-size: 1.75rem;
123 | font-weight: bold;
124 | }
125 |
126 | span {
127 | text-align: center;
128 | opacity: 0.8;
129 | margin-top: -1rem;
130 | }
131 | }
132 |
133 | form {
134 | width: 100%;
135 | display: flex;
136 | flex-direction: column;
137 | align-items: center;
138 |
139 | .username,
140 | .password {
141 | display: flex;
142 | flex-direction: column;
143 | color: $textColor;
144 | width: 90%;
145 | max-width: 20rem;
146 | position: relative;
147 |
148 | label {
149 | margin-top: 1.5rem;
150 | margin-bottom: 0.5rem;
151 | color: $textColor;
152 | }
153 |
154 | input {
155 | font-size: 1.15rem;
156 | outline: none;
157 | border-radius: 5px;
158 | border: 1px solid $subColor;
159 | padding: 0.75rem;
160 | background: transparent;
161 | color: $textColor;
162 | transition: all 0.2s ease-in;
163 | }
164 | @media (min-width: 768px) {
165 | input:hover {
166 | border: 1px solid $blue;
167 | }
168 | }
169 | input:focus {
170 | border: 1px solid $lightBlue;
171 | }
172 |
173 | .eyeIcons {
174 | position: absolute;
175 | top: 52%;
176 | right: 5%;
177 | cursor: pointer;
178 | font-size: 1.15rem;
179 | }
180 | }
181 |
182 | button {
183 | margin-top: 1.5rem;
184 | width: 85%;
185 | max-width: 20rem;
186 | height: 3rem;
187 | border: none;
188 | border-radius: 5px;
189 | background: $blue;
190 | font-size: 1.15rem;
191 | font-weight: bold;
192 | color: $mainColor;
193 | transition: all 0.2s ease-in;
194 | display: flex;
195 | align-items: center;
196 | justify-content: center;
197 | }
198 | button:hover {
199 | cursor: pointer;
200 | transform: translateY(-10%);
201 | }
202 | }
203 | .forgotPass {
204 | text-decoration: none;
205 | color: $subColor;
206 | margin-top: 0.5rem;
207 | font-size: 0.95rem;
208 | margin-left: auto;
209 | transition: all 0.3s ease-in;
210 | }
211 |
212 | .forgotPass:hover {
213 | text-decoration: underline;
214 | color: $textColor;
215 | }
216 |
217 | .newUser {
218 | text-decoration: none;
219 | color: $subColor;
220 | margin-top: 1.5rem;
221 | font-size: 1.05rem;
222 |
223 | span {
224 | transition: all 0.3s ease-in;
225 | font-weight: bold;
226 | }
227 | span:hover {
228 | text-decoration: underline;
229 | color: $textColor;
230 | }
231 | }
232 | }
233 | }
234 |
--------------------------------------------------------------------------------
/src/components/Coin/TradeTab/TradeTab.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 | $borderColor: rgb(170, 170, 170);
10 |
11 | .tradeTab {
12 | top: 0;
13 | left: 0;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | transition: all 0.7s ease-in;
18 |
19 | .nav {
20 | display: flex;
21 | width: 100%;
22 | justify-content: space-evenly;
23 | font-size: 1.25rem;
24 |
25 | div {
26 | border: 1px solid $borderColor;
27 | padding: 1rem;
28 | width: 100%;
29 | display: flex;
30 | align-items: center;
31 | justify-content: center;
32 | background: rgb(230, 230, 230);
33 | font-weight: bold;
34 | }
35 |
36 | div.active {
37 | color: $blue;
38 | border-bottom: none;
39 | background: $mainColor;
40 | }
41 | }
42 |
43 | .form {
44 | width: 100%;
45 | display: flex;
46 | flex-direction: column;
47 | align-items: center;
48 | height: 100%;
49 | overflow: auto;
50 | position: relative;
51 |
52 | .input {
53 | width: 90%;
54 | display: flex;
55 | align-items: center;
56 | justify-content: center;
57 | color: $textColor;
58 | height: 3rem;
59 | position: relative;
60 | top: 10%;
61 | @media (max-width: 767px) and (orientation: portrait) {
62 | top: 25%;
63 | }
64 |
65 | @media (max-width: 812px) and (orientation: landscape) {
66 | top: -5%;
67 | }
68 |
69 | @keyframes vibrateInput {
70 | 0% {
71 | transform: translateX(-10%);
72 | }
73 | 20% {
74 | transform: translateX(10%);
75 | }
76 | 40% {
77 | transform: translateX(-10%);
78 | }
79 | 60% {
80 | transform: translateX(10%);
81 | }
82 | 80% {
83 | transform: translateX(-10%);
84 | }
85 | 100% {
86 | transform: translateX(0%);
87 | }
88 | }
89 |
90 | input {
91 | height: 2rem;
92 | background: none;
93 | border: none;
94 | outline: none;
95 | font-size: 3rem;
96 | color: $textColor;
97 | background: transparent;
98 | width: 100%;
99 | padding: 1rem;
100 | text-align: center;
101 | transition: 0.5s;
102 | }
103 | input::-webkit-outer-spin-button,
104 | input::-webkit-inner-spin-button {
105 | /* display: none; <- Crashes Chrome on hover */
106 | -webkit-appearance: none;
107 | margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
108 | }
109 |
110 | input[type='number'] {
111 | -moz-appearance: textfield; /* Firefox */
112 | }
113 | span {
114 | position: absolute;
115 | left: 0;
116 | font-size: 1.35rem;
117 | color: $subColor;
118 | background: $mainColor;
119 | }
120 |
121 | div {
122 | font-size: 1.75rem;
123 | color: $textColor;
124 | cursor: pointer;
125 | margin-left: 1rem;
126 | position: absolute;
127 | right: 0;
128 | }
129 | }
130 |
131 | .amountYouGet {
132 | position: absolute;
133 | font-size: 1rem;
134 | bottom: 63%;
135 | }
136 |
137 | @keyframes slideUp {
138 | from {
139 | opacity: 0;
140 | transform: translateY(20%);
141 | }
142 |
143 | to {
144 | opacity: 1;
145 | transform: translateY(0);
146 | }
147 | }
148 |
149 | .selectBalanceAndBTN {
150 | width: 90%;
151 | display: flex;
152 | flex-direction: column;
153 | position: absolute;
154 | bottom: 5%;
155 | @media (max-width: 812px) and (orientation: landscape) {
156 | bottom: -12%;
157 | }
158 |
159 | .selectCoin {
160 | height: 4rem;
161 | width: 100%;
162 | display: flex;
163 | align-items: center;
164 | font-size: 1.33rem;
165 | margin-bottom: 1rem;
166 | }
167 |
168 | .coinAndWalletTab {
169 | width: 100%;
170 | display: flex;
171 | align-items: center;
172 | flex-direction: column;
173 |
174 | div:nth-child(1) {
175 | border: 1px solid $borderColor;
176 | border-radius: 5px;
177 | width: 100%;
178 | display: flex;
179 | justify-content: space-between;
180 | align-items: center;
181 |
182 | p {
183 | margin-left: 1rem;
184 | font-size: 1.25rem;
185 | }
186 |
187 | span:nth-child(2) {
188 | margin-right: 1rem;
189 | font-size: 1.33rem;
190 | }
191 | }
192 |
193 | button {
194 | display: flex;
195 | align-items: center;
196 | justify-content: center;
197 | height: 4rem;
198 | width: 100%;
199 | font-size: 1.35rem;
200 | padding: 1rem;
201 | border-radius: 5px;
202 | outline: none;
203 | border: none;
204 | color: $mainColor;
205 | font-weight: bold;
206 | background: $blue;
207 | transition: 0.5s;
208 | margin-top: 1rem;
209 | }
210 |
211 | button:hover {
212 | cursor: pointer;
213 | background: $lightBlue;
214 | }
215 |
216 | button[disabled] {
217 | background: $borderColor;
218 | }
219 |
220 | button[disabled]:hover {
221 | cursor: not-allowed;
222 | }
223 |
224 | div:nth-child(3) {
225 | margin-top: 1rem;
226 | width: 90%;
227 | transition: 0.5s;
228 | padding: 1rem;
229 | color: $textColor;
230 | height: 1.35rem;
231 | border-radius: 5px;
232 | margin-bottom: 1rem;
233 | display: flex;
234 | align-items: center;
235 | justify-content: space-between;
236 | font-size: 1rem;
237 | }
238 | }
239 | }
240 | }
241 | }
242 |
243 | .loading {
244 | position: absolute;
245 | top: 45%;
246 | left: 50%;
247 | transform: translate(-50%, -50%);
248 | }
249 |
--------------------------------------------------------------------------------
/src/pages/Portfolio/Dashboard/CompleteDashboard/CompleteDashboard.jsx:
--------------------------------------------------------------------------------
1 | import { RotateSpinner } from 'react-spinners-kit';
2 | import { RiNotification4Fill } from 'react-icons/ri';
3 | import coinsSVG from '../../../../assets/logo/coinsSVG.svg';
4 | import { Link } from 'react-router-dom';
5 | import moment from 'moment';
6 | import { useState, useEffect } from 'react';
7 | import Messages from '../Messages/Messages';
8 |
9 | const CompleteDashboard = (user, wallet, watchList, news) => {
10 | const [hasNotifications, setHasNotifications] = useState(undefined);
11 | const [modalUpMessages, setModalUpMessages] = useState(false);
12 | const [messageModal, setMessageModal] = useState(false);
13 |
14 | useEffect(() => {
15 | const checkNotifications = () => {
16 | if (user !== null) {
17 | const hasMessagesCheck = user.messages.filter((message) => message.isRead === false);
18 | if (hasMessagesCheck.length > 0) {
19 | setHasNotifications(true);
20 | } else setHasNotifications(false);
21 | }
22 | };
23 |
24 | checkNotifications();
25 | }, [user]);
26 |
27 | const watchListFunction = () => {
28 | let length = watchList.length;
29 | if (length === 0) {
30 | return (
31 |
32 |
33 |
34 |
Find an assortment of highlights and get a touch of each crypto to go for yourself.
35 |
36 | See all assets
37 |
38 |
39 |
40 | );
41 | } else if (length > 0) {
42 | return (
43 |
44 | {watchList.map((watchList, index) => (
45 |
46 |
47 |
48 |
{watchList.name}
49 |
{watchList.symbol.toUpperCase()}
50 |
51 |
52 |
${watchList.price}
53 |
58 | {watchList.percentChange < 0 ? '' : '+'}
59 | {Math.round((watchList.percentChange + Number.EPSILON) * 100) / 100}%
60 |
61 |
62 |
63 | ))}
64 |
65 | );
66 | }
67 | };
68 |
69 | const newsFunction = () => {
70 | let newsLength = 10;
71 | return news.slice(0, newsLength).map((news) => (
72 |
73 |
74 |
{news.title}
75 |
76 | {news.source_info.name} • {' '}
77 | {moment.unix(news.published_on).startOf('hour').fromNow()}
78 |
79 |
82 | ));
83 | };
84 |
85 | if (news !== null && watchList !== null && user !== null && user.isActive === false) {
86 | return (
87 | <>
88 |
89 |
90 |
Welcome to Apex!
91 |
92 | Hey {user.name ? user.name : user.username} 🙌 ,
93 | thanks for signing up! We're glad you made it here.
94 |
95 |
96 |
97 |
98 |
Get started!
99 |
100 | Right now you can only check live prices and watch you favorite coins. To get full access,
101 | please verify your account with the email we sent you.
102 |
103 |
104 |
105 |
106 |
Watchlist
107 | {watchListFunction()}
108 |
News
109 | {newsFunction()}
110 |
111 | );
112 | } else if (
113 | news !== null &&
114 | watchList !== null &&
115 | user !== null &&
116 | wallet !== null &&
117 | user.isActive === true
118 | ) {
119 | return (
120 | <>
121 |
122 |
123 |
Available Balance
124 |
125 | ${parseFloat(wallet.balance).toFixed(2)}
126 |
127 |
128 |
129 |
130 | {hasNotifications && setModalUpMessages(true)} />
132 |
140 |
{
143 | setModalUpMessages(false);
144 | setMessageModal(false);
145 | }}
146 | />
147 |
148 |
149 |
Watchlist
150 | {watchListFunction()}
151 |
News
152 | {newsFunction()}
153 |
154 | );
155 | } else {
156 | return (
157 |
158 |
160 | );
161 | }
162 | };
163 |
164 | export default CompleteDashboard;
165 |
--------------------------------------------------------------------------------
/src/components/TradeModal/BuyCoins/BuyCoins.scss:
--------------------------------------------------------------------------------
1 | $mainColor: #f1f2f4;
2 | $subColor: #5d5c5f;
3 | $textColor: #080809;
4 | $subTextColor: #cbbaba;
5 | $blue: #0066ff;
6 | $lightBlue: #64b5f6;
7 | $orange: #ef5116;
8 | $navyBlue: #262946;
9 | $borderColor: rgb(170, 170, 170);
10 |
11 | .buyCoins {
12 | height: 100%;
13 | position: fixed;
14 | top: 150vh;
15 | background: $mainColor;
16 | width: 100%;
17 | @media (min-width: 768px) {
18 | max-width: 30rem;
19 | display: none;
20 | }
21 | }
22 |
23 | .buyCoins.Show {
24 | top: 0;
25 | left: 0;
26 | display: flex;
27 | flex-direction: column;
28 | align-items: center;
29 | transition: all 0.7s ease-in;
30 |
31 | @media (min-width: 768px) {
32 | top: 50%;
33 | left: 50%;
34 | transform: translate(-50%, -50%);
35 | border-radius: 10px;
36 | }
37 |
38 | .closeIcon {
39 | font-size: 1.5rem;
40 | top: 2%;
41 | right: 3%;
42 | position: absolute;
43 | z-index: 4;
44 | cursor: pointer;
45 | }
46 | .buyCoinsForm {
47 | width: 100%;
48 | display: flex;
49 | flex-direction: column;
50 | align-items: center;
51 | height: 100%;
52 | overflow: auto;
53 | position: relative;
54 |
55 | .header {
56 | @media (min-width: 768px) {
57 | margin-top: 1rem;
58 | }
59 | @media (max-width: 1024px) and (orientation: landscape) {
60 | margin-bottom: 10%;
61 | }
62 | }
63 |
64 | .input {
65 | width: 90%;
66 | display: flex;
67 | align-items: center;
68 | justify-content: center;
69 | color: $textColor;
70 | height: 3rem;
71 | position: relative;
72 | top: 10%;
73 | @media (max-width: 767px) and (orientation: portrait) {
74 | top: 25%;
75 | }
76 |
77 | @media (max-width: 812px) and (orientation: landscape) {
78 | top: -5%;
79 | }
80 |
81 | @keyframes vibrateInput {
82 | 0% {
83 | transform: translateX(-10%);
84 | }
85 | 20% {
86 | transform: translateX(10%);
87 | }
88 | 40% {
89 | transform: translateX(-10%);
90 | }
91 | 60% {
92 | transform: translateX(10%);
93 | }
94 | 80% {
95 | transform: translateX(-10%);
96 | }
97 | 100% {
98 | transform: translateX(0%);
99 | }
100 | }
101 |
102 | input {
103 | height: 2rem;
104 | background: none;
105 | border: none;
106 | outline: none;
107 | font-size: 3rem;
108 | color: $textColor;
109 | background: transparent;
110 | width: 100%;
111 | padding: 1rem;
112 | text-align: center;
113 | transition: 0.5s;
114 | }
115 | input::-webkit-outer-spin-button,
116 | input::-webkit-inner-spin-button {
117 | /* display: none; <- Crashes Chrome on hover */
118 | -webkit-appearance: none;
119 | margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
120 | }
121 |
122 | input[type='number'] {
123 | -moz-appearance: textfield; /* Firefox */
124 | }
125 | span {
126 | position: absolute;
127 | left: 0;
128 | font-size: 1.25rem;
129 | color: $subColor;
130 | background: $mainColor;
131 | }
132 |
133 | div {
134 | font-size: 1.75rem;
135 | color: $textColor;
136 | cursor: pointer;
137 | margin-left: 1rem;
138 | position: absolute;
139 | right: 0;
140 | }
141 | }
142 |
143 | .amountYouGet {
144 | position: absolute;
145 | font-size: 1rem;
146 | bottom: 55%;
147 | @media (max-width: 812px) and (orientation: landscape) {
148 | bottom: 50%;
149 | }
150 | @media (max-width: 767px) and (orientation: portrait) {
151 | bottom: 52%;
152 | }
153 | }
154 |
155 | .selectBalanceAndBTN {
156 | width: 90%;
157 | display: flex;
158 | flex-direction: column;
159 | position: absolute;
160 | bottom: 5%;
161 | @media (max-width: 812px) and (orientation: landscape) {
162 | bottom: -12%;
163 | }
164 |
165 | .selectCoin {
166 | height: 4rem;
167 | width: 100%;
168 | display: flex;
169 | align-items: center;
170 | font-size: 1.15rem;
171 | margin-bottom: 1rem;
172 | }
173 |
174 | .coinAndWalletTab {
175 | width: 100%;
176 | display: flex;
177 | align-items: center;
178 | flex-direction: column;
179 |
180 | div:nth-child(1) {
181 | border: 1px solid $borderColor;
182 | border-radius: 5px;
183 | width: 100%;
184 | display: flex;
185 | justify-content: space-between;
186 | align-items: center;
187 |
188 | p {
189 | margin-left: 1rem;
190 | }
191 |
192 | span:nth-child(2) {
193 | margin-right: 1rem;
194 | }
195 | }
196 |
197 | button {
198 | display: flex;
199 | align-items: center;
200 | justify-content: center;
201 | height: 4rem;
202 | width: 100%;
203 | font-size: 1.15rem;
204 | padding: 1rem;
205 | border-radius: 5px;
206 | outline: none;
207 | border: none;
208 | color: $mainColor;
209 | font-weight: bold;
210 | background: $blue;
211 | transition: 0.5s;
212 | margin-top: 1rem;
213 | }
214 |
215 | button:hover {
216 | cursor: pointer;
217 | background: $lightBlue;
218 | }
219 |
220 | button[disabled] {
221 | background: $borderColor;
222 | }
223 |
224 | button[disabled]:hover {
225 | cursor: not-allowed;
226 | }
227 |
228 | div:nth-child(3) {
229 | margin-top: 1rem;
230 | width: 90%;
231 | transition: 0.5s;
232 | padding: 1rem;
233 | color: $textColor;
234 | height: 1.35rem;
235 | border-radius: 5px;
236 | margin-bottom: 1rem;
237 | display: flex;
238 | align-items: center;
239 | justify-content: space-between;
240 | font-size: 1rem;
241 | }
242 | }
243 | }
244 | }
245 | }
246 |
247 | .loading {
248 | position: absolute;
249 | top: 45%;
250 | left: 50%;
251 | transform: translate(-50%, -50%);
252 | }
253 |
--------------------------------------------------------------------------------