├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.css
├── App.js
├── App.test.js
├── assets
│ └── img
│ │ ├── 1.png
│ │ ├── 123.png
│ │ ├── 4.png
│ │ ├── 6.png
│ │ ├── 7.png
│ │ ├── Dahboard page.jpg
│ │ ├── GM.png
│ │ ├── Home Page.jpg
│ │ ├── Home Page.png
│ │ ├── background.png
│ │ ├── bee-shape.png
│ │ ├── beehouse.png
│ │ ├── bg-wallet.png
│ │ ├── calculator.png
│ │ ├── cross-sign.png
│ │ ├── ethereum.png
│ │ ├── facebook.png
│ │ ├── guard.png
│ │ ├── handshake.png
│ │ ├── headerbackground.png
│ │ ├── linkedin.png
│ │ ├── logo.png
│ │ ├── metamask.png
│ │ ├── mobile.png
│ │ ├── monkey.png
│ │ ├── overlay.png
│ │ ├── ox.png
│ │ ├── pencil.png
│ │ ├── rabbit.png
│ │ ├── star.png
│ │ ├── tokensymbol.png
│ │ ├── twitter.png
│ │ ├── wallet-white.png
│ │ ├── wallet.png
│ │ ├── wallet1.png
│ │ ├── wallet2.png
│ │ ├── wallet3.png
│ │ ├── water.png
│ │ └── youtube.png
├── components
│ ├── customs
│ │ ├── Button
│ │ │ ├── button.style.js
│ │ │ └── index.js
│ │ ├── Input
│ │ │ └── Input.js
│ │ ├── Layout
│ │ │ ├── Col.js
│ │ │ ├── Row.js
│ │ │ └── index.js
│ │ ├── PrivateRoute
│ │ │ └── index.js
│ │ └── Text
│ │ │ ├── index.js
│ │ │ └── text.style.js
│ └── pages
│ │ ├── dashboard.style.js
│ │ └── home.style.js
├── index.css
├── index.js
├── layouts
│ ├── Footer.js
│ ├── Header.js
│ └── styles.js
├── logo.svg
├── pages
│ ├── Dashboard.js
│ └── Home.js
├── reportWebVitals.js
└── setupTests.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 |
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 |
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 |
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "anyprinter",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@styled-system/theme-get": "^5.1.2",
7 | "@testing-library/jest-dom": "^5.16.1",
8 | "@testing-library/react": "^12.1.2",
9 | "@testing-library/user-event": "^13.5.0",
10 | "bootstrap": "^5.1.3",
11 | "react": "^17.0.2",
12 | "react-dom": "^17.0.2",
13 | "react-router-dom": "^5.3.0",
14 | "react-scripts": "5.0.0",
15 | "react-select": "^5.2.1",
16 | "styled-components": "^5.3.3",
17 | "web-vitals": "^2.1.2"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
19 |
23 |
24 |
33 | React App
34 |
35 |
36 | You need to enable JavaScript to run this app.
37 |
38 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
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 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
40 | .css-1s2u09g-control {
41 | border-radius: 40px !important;
42 | background-color: #1a0a63 !important;
43 | height: 5.8vh;
44 | }
45 |
46 | .css-1pahdxg-control {
47 | border-radius: 40px !important;
48 | background-color: #1a0a63 !important;
49 | height: 5.8vh;
50 | }
51 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 | import React from "react";
3 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
4 | import Footer from "./layouts/Footer";
5 | import Home from "./pages/Home";
6 | import Dashboard from "./pages/Dashboard";
7 |
8 | function App() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
20 | export default App;
21 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render( );
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/src/assets/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/1.png
--------------------------------------------------------------------------------
/src/assets/img/123.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/123.png
--------------------------------------------------------------------------------
/src/assets/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/4.png
--------------------------------------------------------------------------------
/src/assets/img/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/6.png
--------------------------------------------------------------------------------
/src/assets/img/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/7.png
--------------------------------------------------------------------------------
/src/assets/img/Dahboard page.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/Dahboard page.jpg
--------------------------------------------------------------------------------
/src/assets/img/GM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/GM.png
--------------------------------------------------------------------------------
/src/assets/img/Home Page.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/Home Page.jpg
--------------------------------------------------------------------------------
/src/assets/img/Home Page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/Home Page.png
--------------------------------------------------------------------------------
/src/assets/img/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/background.png
--------------------------------------------------------------------------------
/src/assets/img/bee-shape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/bee-shape.png
--------------------------------------------------------------------------------
/src/assets/img/beehouse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/beehouse.png
--------------------------------------------------------------------------------
/src/assets/img/bg-wallet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/bg-wallet.png
--------------------------------------------------------------------------------
/src/assets/img/calculator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/calculator.png
--------------------------------------------------------------------------------
/src/assets/img/cross-sign.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/cross-sign.png
--------------------------------------------------------------------------------
/src/assets/img/ethereum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/ethereum.png
--------------------------------------------------------------------------------
/src/assets/img/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/facebook.png
--------------------------------------------------------------------------------
/src/assets/img/guard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/guard.png
--------------------------------------------------------------------------------
/src/assets/img/handshake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/handshake.png
--------------------------------------------------------------------------------
/src/assets/img/headerbackground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/headerbackground.png
--------------------------------------------------------------------------------
/src/assets/img/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/linkedin.png
--------------------------------------------------------------------------------
/src/assets/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/logo.png
--------------------------------------------------------------------------------
/src/assets/img/metamask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/metamask.png
--------------------------------------------------------------------------------
/src/assets/img/mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/mobile.png
--------------------------------------------------------------------------------
/src/assets/img/monkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/monkey.png
--------------------------------------------------------------------------------
/src/assets/img/overlay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/overlay.png
--------------------------------------------------------------------------------
/src/assets/img/ox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/ox.png
--------------------------------------------------------------------------------
/src/assets/img/pencil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/pencil.png
--------------------------------------------------------------------------------
/src/assets/img/rabbit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/rabbit.png
--------------------------------------------------------------------------------
/src/assets/img/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/star.png
--------------------------------------------------------------------------------
/src/assets/img/tokensymbol.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/tokensymbol.png
--------------------------------------------------------------------------------
/src/assets/img/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/twitter.png
--------------------------------------------------------------------------------
/src/assets/img/wallet-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/wallet-white.png
--------------------------------------------------------------------------------
/src/assets/img/wallet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/wallet.png
--------------------------------------------------------------------------------
/src/assets/img/wallet1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/wallet1.png
--------------------------------------------------------------------------------
/src/assets/img/wallet2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/wallet2.png
--------------------------------------------------------------------------------
/src/assets/img/wallet3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/wallet3.png
--------------------------------------------------------------------------------
/src/assets/img/water.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/water.png
--------------------------------------------------------------------------------
/src/assets/img/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krobinsmith/anyprinter-frontend/ecfad2f93229c88b3dc67df4a578c13894f3df27/src/assets/img/youtube.png
--------------------------------------------------------------------------------
/src/components/customs/Button/button.style.js:
--------------------------------------------------------------------------------
1 | // styled system
2 | import styled from "styled-components";
3 | // types
4 | import { themeGet } from "@styled-system/theme-get";
5 |
6 | // -------------------------------------------------------
7 | export const ButtonWrapper = styled.div`
8 | display: flex;
9 | ${({ fSize }) => (fSize ? `font-size: ${fSize}px` : "")};
10 | ${({ fWeight }) => (fWeight ? `font-weight: ${fWeight}` : "")};
11 | ${({ tAlign }) => (tAlign ? `text-align: ${tAlign}` : "")};
12 | ${({ padding }) => (padding ? `padding: ${padding}px` : "")};
13 | ${({ tTransForm }) => (tTransForm ? ` text-transform: ${tTransForm}` : "")};
14 | ${({ lHeight }) => (lHeight ? `line-height: ${lHeight}px` : "")};
15 | ${({ tSpacing }) => (tSpacing ? `letter-spacing: ${tSpacing}rem` : "")};
16 | ${({ jContent }) => (jContent ? `justify-content: ${jContent}` : "")};
17 | ${({ aItems }) => (aItems ? `align-items: ${aItems}` : "")};
18 | ${({ gGap }) => (gGap ? `grid-gap: ${gGap}px` : "")};
19 | ${({ mWidth }) => (mWidth ? `max-width: ${mWidth}%` : "")};
20 | ${({ cursor }) => (cursor ? `cursor: ${cursor}` : "")};
21 | ${({ bRadius }) => (bRadius ? `border-radius: ${bRadius}px` : "")};
22 | ${({ bgColor }) => (bgColor ? `background-color: ${bgColor}` : "")};
23 | color: ${({ fColor }) => fColor} !important;
24 | font-family: ${({ tFont }) => themeGet(`fonts.${tFont}`, "")};
25 | ${({ tDecorations }) =>
26 | tDecorations ? `text-decoration: ${tDecorations}` : ""};
27 | ${({ responsive }) => responsive && getResponsive(responsive)}
28 | &:hover {
29 | color: ${({ hoverStyle }) => themeGet(`colors.${hoverStyle?.fColor}`)};
30 | }
31 | `;
32 |
33 | // func getter for responsive
34 | const getResponsive = (responsive) => {
35 | let resStyle = "";
36 | const resData = Object.keys(responsive).sort(
37 | (a, b) => parseInt(b) - parseInt(a)
38 | );
39 | resData.forEach((itemSize) => {
40 | const item = responsive[itemSize];
41 | resStyle += `@media screen and (max-width:${itemSize}px){
42 | ${item.fSize ? `font-size: ${item.fSize}px;` : ""}
43 | ${item.fWeight ? `font-weight: ${item.fWeight};` : ""}
44 | ${item.tAlign ? `text-align: ${item.tAlign};` : ""}
45 | ${item.lHeight ? `line-height: ${item.lHeight}px;` : ""}
46 | ${item.tTransForm ? ` text-transform: ${item.tTransForm};` : ""}
47 | ${item.padding ? `padding: ${item.padding};` : ""}
48 | ${item.tSpacing ? `letter-spacing: ${item.tSpacing}px;` : ""}
49 | ${item.mWidth ? `max-width: ${item.mWidth}px;` : ""}
50 | ${item.tDecorations ? `text-decoration: ${item.tDecorations};` : ""}
51 | }`;
52 | });
53 | return resStyle;
54 | };
55 |
--------------------------------------------------------------------------------
/src/components/customs/Button/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { ButtonWrapper } from "./button.style";
3 |
4 | const Button = ({ children, ...props }) => {
5 | return {children} ;
6 | };
7 |
8 | export default Button;
9 |
--------------------------------------------------------------------------------
/src/components/customs/Input/Input.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import styled from "styled-components";
4 |
5 | const StyledInput = styled.input`
6 | font-family: "Montserrat", sans-serif;
7 | font-size: 15px;
8 | letter-spacing: 1px;
9 | color: #3b3f5c;
10 | padding: 12px 40px;
11 | outline: none;
12 | border: 1px solid #3b3f5c;
13 | border-radius: 30px;
14 | height: 5.8vh;
15 | width: 100%;
16 | `;
17 |
18 | const Input = ({ name, type, placeholder, value, onChange }) => {
19 | return (
20 |
27 | );
28 | };
29 |
30 | export default Input;
31 |
--------------------------------------------------------------------------------
/src/components/customs/Layout/Col.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // styled system
3 | import styled from "styled-components";
4 |
5 | // ----------------------------------------------------------
6 |
7 | // func item width
8 | const getItem = (witem) => {
9 | if (witem === -2) {
10 | return "0%";
11 | }
12 | if (witem < 0) {
13 | return "auto";
14 | }
15 | if (witem > 24) {
16 | witem = 24;
17 | }
18 | return (witem / 24) * 100 + "%";
19 | };
20 |
21 | const ColWrapper = styled.div`
22 | flex: ${({ flex }) => flex};
23 | width: ${({ item }) => getItem(item)};
24 | max-width: ${({ mWidth }) => (mWidth ? `${mWidth}px` : "none")};
25 | ${({ responsive }) => responsive && getResponsive(responsive)}
26 | `;
27 |
28 | // func getter for responsive
29 | const getResponsive = (responsive) => {
30 | let resStyle = "";
31 | const resData = Object.keys(responsive).sort(
32 | (a, b) => parseInt(b) - parseInt(a)
33 | );
34 | resData.forEach((itemSize) => {
35 | const pointitem = responsive[itemSize];
36 | resStyle += `@media screen and (max-width:${itemSize}px){
37 | ${pointitem.item ? `width: ${getItem(pointitem.item)};` : ""}
38 | ${pointitem.flex ? `flex: ${pointitem.flex};` : ""}
39 | ${
40 | pointitem.mWidth
41 | ? pointitem.mWidth == -1
42 | ? "max-width:none;"
43 | : `max-width: ${pointitem.mWidth}px;`
44 | : ""
45 | }
46 | }`;
47 | });
48 | return resStyle;
49 | };
50 |
51 | const Col = ({ children, item = -1, ...props }) => {
52 | return (
53 |
54 | {children}
55 |
56 | );
57 | };
58 | export default Col;
59 |
--------------------------------------------------------------------------------
/src/components/customs/Layout/Row.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // styled system
3 | import styled from "styled-components";
4 |
5 | // ----------------------------------------------------------
6 |
7 | // ********** flex-box 24 items ********** //
8 |
9 | const RowWrapper = styled.div`
10 | display: ${({ display }) => display};
11 | flex-wrap: ${({ flexWrap }) => flexWrap};
12 | flex-direction: ${({ flexDirection }) => flexDirection};
13 | justify-content: ${({ justifyContent }) => justifyContent};
14 | align-items: ${({ alignItems }) => alignItems};
15 | padding: ${({ padding }) => padding || "0"};
16 | width: 100%;
17 | grid-template-columns: ${({ templateCol }) => templateCol || "0"};
18 | grid-template-rows: ${({ templateRow }) => templateRow || "0"};
19 | max-width: ${({ mWidth }) => (mWidth ? `${mWidth}px` : "none")};
20 | ${({ zIndex }) => (zIndex ? `z-index: ${zIndex}` : "")};
21 | position: relative;
22 | ${({ flexDirection, gap, display }) => {
23 | return getGap(flexDirection, gap, display);
24 | }}
25 | ${({ responsive, flexDirection, display, gap }) =>
26 | responsive && getResponsive(responsive, flexDirection, display, gap)}
27 | `;
28 |
29 | // func getter for responsive
30 | const getResponsive = (responsive, flexDirection, display, gap) => {
31 | let resStyle = "";
32 | const resData = Object.keys(responsive).sort(
33 | (a, b) => parseInt(b) - parseInt(a)
34 | );
35 | let lastDirection = flexDirection;
36 | let lastDisplay = display;
37 | let lastGap = gap;
38 | resData.forEach((itemSize) => {
39 | const item = responsive[itemSize];
40 | if (Boolean(item.flexDirection)) {
41 | lastDirection = item.flexDirection;
42 | }
43 | if (Boolean(item.display)) {
44 | lastDirection = item.display;
45 | }
46 | if (Boolean(item.gap)) {
47 | lastGap = item.gap;
48 | }
49 | resStyle += `@media screen and (max-width:${itemSize}px){
50 | ${item.display ? `display: ${item.display};` : `display:${lastDisplay};`}
51 | ${item.flexWrap ? `flex-wrap: ${item.flexWrap};` : ""}
52 | ${
53 | item.flexDirection
54 | ? `flex-direction: ${item.flexDirection};`
55 | : `flex-direction:${lastDirection};`
56 | }
57 | ${item.justifyContent ? `justify-content: ${item.justifyContent};` : ""}
58 | ${item.alignItems ? `align-items: ${item.alignItems};` : ""}
59 | ${item.padding ? `padding: ${item.padding};` : ""}
60 | ${item.templateCol ? `grid-template-columns: ${item.templateCol};` : ""}
61 | ${item.templateRow ? `grid-template-rows: ${item.templateRow};` : ""}
62 | ${item.zIndex ? `z-index: ${item.zIndex};` : ""}
63 | ${item.mWidth ? `max-width: ${item.mWidth}px;` : ""}
64 | ${
65 | item.gap
66 | ? `
67 | & > *:not(:last-child) {
68 | margin-right: 0px;
69 | margin-bottom: 0px;
70 | }
71 | & > *:not(:first-child) {
72 | margin-right: 0px;
73 | margin-bottom: 0px;
74 | }
75 | `
76 | : ""
77 | }
78 | ${
79 | item.gap === 0
80 | ? "gap:0px;"
81 | : getGap(lastDirection, lastGap, lastDisplay)
82 | }
83 | }`;
84 | });
85 | return resStyle;
86 | };
87 |
88 | // func getter for gap
89 | const getGap = (flexDirection, gap, display) => {
90 | if (display === "grid") {
91 | return `
92 | gap: ${gap}px;
93 | `;
94 | } else if (flexDirection === "column") {
95 | return `
96 | height: 100%;
97 | & > *:not(:last-child) {
98 | margin-right: 0px;
99 | margin-bottom: ${gap}px;
100 | }
101 | `;
102 | } else if (flexDirection === "column-reverse") {
103 | return `
104 | height: 100%;
105 | & > *:not(:first-child) {
106 | margin-right: 0px;
107 | margin-bottom: ${gap}px;
108 | }
109 | `;
110 | } else if (flexDirection === "row") {
111 | return `
112 | & > *:not(:last-child) {
113 | margin-bottom: 0px;
114 | margin-right: ${gap}px;
115 | }
116 | `;
117 | } else if (flexDirection === "row-reverse") {
118 | return `
119 | & > *:not(:first-child) {
120 | margin-bottom: 0px;
121 | margin-right: ${gap}px;
122 | }
123 | `;
124 | }
125 | };
126 |
127 | const Row = ({
128 | children,
129 | padding,
130 | flexDirection = "row",
131 | alignItems = "initial",
132 | justifyContent = "initial",
133 | gap = 0,
134 | flexWrap = "nowrap",
135 | display = "flex",
136 | templateCol = "auto",
137 | templateRow = "auto",
138 | zIndex,
139 | responsive,
140 | className,
141 | mWidth,
142 | }) => {
143 | return (
144 |
159 | {children}
160 |
161 | );
162 | };
163 | export default Row;
164 |
--------------------------------------------------------------------------------
/src/components/customs/Layout/index.js:
--------------------------------------------------------------------------------
1 | export { default as Row } from "./Row";
2 | export { default as Col } from "./Col";
3 |
--------------------------------------------------------------------------------
/src/components/customs/PrivateRoute/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { Redirect, Route } from "react-router-dom";
3 | import { connect } from "react-redux";
4 | import { LOGOUT_USER } from "../../redux/actions";
5 |
6 | const PrivateRoute = ({
7 | component: Component,
8 | token,
9 | expiresAt,
10 | isAuthenticated,
11 | logout,
12 | ...rest
13 | }) => {
14 | const user = isAuthenticated;
15 | // console.log(user);
16 | useEffect(() => {
17 | if (!user) {
18 | // logout();
19 | }
20 | });
21 |
22 | return (
23 |
26 | token ? (
27 |
28 | ) : (
29 |
32 | )
33 | }
34 | />
35 | );
36 | };
37 |
38 | const mapStateToProps = ({ common }) => {
39 | return {
40 | token: common.token,
41 | expiresAt: common.expiresAt,
42 | isAuthenticated: common.isAuthenticated,
43 | };
44 | };
45 |
46 | const mapActionToProps = (dispatch) => {
47 | return {
48 | logout: () => dispatch({ type: LOGOUT_USER }),
49 | };
50 | };
51 |
52 | export default connect(mapStateToProps, mapActionToProps)(PrivateRoute);
53 |
--------------------------------------------------------------------------------
/src/components/customs/Text/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { TextWrapper, TextSpanWrapper } from "./text.style";
3 |
4 | const Text = ({ mode = "p", children, ...props }) => {
5 | const Wrapper = mode === "p" ? TextWrapper : TextSpanWrapper;
6 | return {children} ;
7 | };
8 |
9 | export default Text;
10 |
--------------------------------------------------------------------------------
/src/components/customs/Text/text.style.js:
--------------------------------------------------------------------------------
1 | // styled system
2 | import styled from "styled-components";
3 | // types
4 | import { themeGet } from "@styled-system/theme-get";
5 |
6 | // -------------------------------------------------------
7 | export const TextWrapper = styled.p`
8 | ${({ fSize }) => (fSize ? `font-size: ${fSize}px` : "")};
9 | ${({ fWeight }) => (fWeight ? `font-weight: ${fWeight}` : "")};
10 | ${({ tAlign }) => (tAlign ? `text-align: ${tAlign}` : "")};
11 | ${({ padding }) => (padding ? `padding: ${padding}` : "")};
12 | ${({ tTransForm }) => (tTransForm ? ` text-transform: ${tTransForm}` : "")};
13 | ${({ lHeight }) => (lHeight ? `line-height: ${lHeight}px` : "")};
14 | ${({ tSpacing }) => (tSpacing ? `letter-spacing: ${tSpacing}rem` : "")};
15 | ${({ mWidth }) => (mWidth ? `max-width: ${mWidth}px` : "")};
16 | ${({ cursor }) => (cursor ? `cursor: ${cursor}` : "")};
17 | color: ${({ fColor }) => fColor} !important;
18 | font-family: ${({ tFont }) => themeGet(`fonts.${tFont}`, "")};
19 | ${({ tDecorations }) =>
20 | tDecorations ? `text-decoration: ${tDecorations}` : ""};
21 | ${({ responsive }) => responsive && getResponsive(responsive)}
22 | &:hover {
23 | color: ${({ hoverStyle }) => themeGet(`colors.${hoverStyle?.fColor}`)};
24 | }
25 | `;
26 |
27 | export const TextSpanWrapper = styled.span`
28 | ${({ fSize }) => (fSize ? `font-size: ${fSize}px` : "")};
29 | ${({ fWeight }) => (fWeight ? `font-weight: ${fWeight}` : "")};
30 | ${({ tAlign }) => (tAlign ? `text-align: ${tAlign}` : "")};
31 | ${({ padding }) => (padding ? `padding: ${padding}` : "")};
32 | ${({ tTransForm }) => (tTransForm ? ` text-transform: ${tTransForm}` : "")};
33 | ${({ lHeight }) => (lHeight ? `line-height: ${lHeight}px` : "")};
34 | ${({ tSpacing }) => (tSpacing ? `letter-spacing: ${tSpacing}rem` : "")};
35 | ${({ mWidth }) => (mWidth ? `max-width: ${mWidth}px` : "")};
36 | ${({ cursor }) => (cursor ? `cursor: ${cursor}` : "")};
37 | ${({ tDecorations }) =>
38 | tDecorations ? `text-decoration: ${tDecorations}` : ""};
39 | color: ${({ fColor }) => fColor};
40 | font-family: ${({ tFont }) => themeGet(`fonts.${tFont}`, "")};
41 | ${({ responsive }) => responsive && getResponsive(responsive)}
42 | &:hover {
43 | color: ${({ hoverStyle }) => themeGet(`colors.${hoverStyle?.fColor}`)};
44 | }
45 | `;
46 |
47 | // func getter for responsive
48 | const getResponsive = (responsive) => {
49 | let resStyle = "";
50 | const resData = Object.keys(responsive).sort(
51 | (a, b) => parseInt(b) - parseInt(a)
52 | );
53 | resData.forEach((itemSize) => {
54 | const item = responsive[itemSize];
55 | resStyle += `@media screen and (max-width:${itemSize}px){
56 | ${item.fSize ? `font-size: ${item.fSize}px;` : ""}
57 | ${item.fWeight ? `font-weight: ${item.fWeight};` : ""}
58 | ${item.tAlign ? `text-align: ${item.tAlign};` : ""}
59 | ${item.lHeight ? `line-height: ${item.lHeight}px;` : ""}
60 | ${item.tTransForm ? ` text-transform: ${item.tTransForm};` : ""}
61 | ${item.padding ? `padding: ${item.padding};` : ""}
62 | ${item.tSpacing ? `letter-spacing: ${item.tSpacing}px;` : ""}
63 | ${item.mWidth ? `max-width: ${item.mWidth}px;` : ""}
64 | ${item.tDecorations ? `text-decoration: ${item.tDecorations};` : ""}
65 | }`;
66 | });
67 | return resStyle;
68 | };
69 |
--------------------------------------------------------------------------------
/src/components/pages/dashboard.style.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const Container = styled.div`
4 | width: 100%;
5 | display: flex;
6 | justify-content: center;
7 | position: relative;
8 | font-size: 20px !important;
9 | padding: 2vh 0 0;
10 | `;
11 |
12 | export const BeeLeft = styled.div`
13 | position: absolute;
14 | top: 32.5vh;
15 | left: -9.4vw;
16 | opacity: 0.5;
17 | @media only screen and (max-width: 768px) {
18 | display: none;
19 | }
20 | `;
21 |
22 | export const BeeRight = styled.div`
23 | position: absolute;
24 | bottom: 14.1vh;
25 | right: -9.4vw;
26 | opacity: 0.5;
27 | @media only screen and (max-width: 768px) {
28 | display: none;
29 | }
30 | `;
31 |
32 | // Description Section
33 |
34 | export const SectionDesc = styled.div`
35 | text-align: center;
36 | padding: 8vh 0;
37 | `;
38 |
39 | export const DescTitle = styled.div`
40 | padding: 0 0 4.9vh 0;
41 | `;
42 |
43 | // Network Card Section
44 |
45 | export const SectionNetworkCard = styled.div`
46 | padding: 0 0 8vh;
47 | width: 100%;
48 | `;
49 |
50 | export const BalanceStick = styled.div`
51 | width: 10px;
52 | background-color: #447cf5;
53 | `;
54 |
55 | export const NetworkSearch = styled.div`
56 | padding: 0 0 2.4vh;
57 | `;
58 |
59 | export const NetworkCards = styled.div`
60 | display: grid;
61 | grid-template-columns: 1fr 1fr 1fr;
62 | grid-gap: 25px;
63 |
64 | @media only screen and (max-width: 1180px) {
65 | grid-template-columns: 1fr 1fr;
66 | }
67 |
68 | @media only screen and (max-width: 778px) {
69 | grid-template-columns: 1fr;
70 | }
71 | `;
72 |
73 | export const SearchWrapper = styled.div`
74 | display: flex;
75 | align-items: center;
76 | border-radius: 50%;
77 | background-color: #447cf5;
78 | img {
79 | width: 21px;
80 | height: 21px;
81 | }
82 | padding: 0 5px;
83 | `;
84 |
85 | export const NetworkRewards = styled.div`
86 | padding: 15px;
87 | background-color: #1c1c3f;
88 | border-radius: 8px;
89 | `;
90 |
91 | export const RewardsBox = styled.div`
92 | background-color: #161637;
93 | width: 100%;
94 | padding: 0 15px;
95 | margin-top: 20px;
96 | border-radius: 8px;
97 | `;
98 |
99 | export const TokenWrapper = styled.div`
100 | border-radius: 50%;
101 | padding: 10px 20px;
102 | background-color: #35355b;
103 | `;
104 |
--------------------------------------------------------------------------------
/src/components/pages/home.style.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const Container = styled.div`
4 | width: 100%;
5 | display: flex;
6 | justify-content: center;
7 | position: relative;
8 | font-size: 20px !important;
9 | `;
10 |
11 | export const BeeShape = styled.div`
12 | position: absolute;
13 | bottom: -20px;
14 | left: -9.4vw;
15 | opacity: 0.5;
16 | @media only screen and (max-width: 768px) {
17 | display: none;
18 | }
19 | `;
20 |
21 | export const HomeAuth = styled.div`
22 | display: flex;
23 | flex-direction: column;
24 | padding: 2vh 0 0;
25 | `;
26 |
27 | export const SectionMain = styled.div`
28 | display: flex;
29 | justify-content: space-between;
30 | align-items: center;
31 | padding: 12vh 0 6.4vh;
32 | grid-gap: 3vw;
33 | @media only screen and (width: 320px) {
34 | display: flex;
35 | flex-direction: column;
36 | img {
37 | width: 250px;
38 | }
39 | }
40 | @media only screen and (width: 768px) {
41 | img {
42 | width: 290px;
43 | }
44 | }
45 | @media only screen and (width: 1024px) {
46 | img {
47 | width: 400px;
48 | }
49 | }
50 | @media only screen and (width: 1440px) {
51 | img {
52 | width: 540px;
53 | }
54 | }
55 | `;
56 |
57 | export const ItemDescPart = styled.div`
58 | display: flex;
59 | flex-direction: column;
60 | justify-content: center;
61 | align-items: flex-start;
62 | grid-gap: 30px;
63 | @media only screen and (width: 320px) {
64 | align-items: center;
65 | }
66 | `;
67 |
68 | export const MainTitle = styled.div`
69 | display: flex;
70 | grid-gap: 20px;
71 | `;
72 |
73 | export const MainTitleStick = styled.div`
74 | width: 10px;
75 | background-color: #447cf5;
76 | `;
77 |
78 | export const SectionFooter = styled.div`
79 | display: flex;
80 | justify-content: center;
81 | align-items: center;
82 | grid-gap: 2vw;
83 | margin-bottom: 9vh;
84 | @media only screen and (max-width: 768px) {
85 | flex-direction: column;
86 | grid-gap: none;
87 | }
88 | `;
89 |
90 | export const BalanceBox = styled.div`
91 | display: flex;
92 | justify-content: flex-start;
93 | background-color: #447cf5;
94 | border-radius: 8px;
95 | padding: 15px;
96 | grid-gap: 15px;
97 | width: 22vw;
98 | @media only screen and (width: 320px) {
99 | width: 75vw;
100 | grid-gap: none;
101 | }
102 | @media only screen and (width: 768px) {
103 | width: 50vw;
104 | grid-gap: none;
105 | }
106 | @media only screen and (width: 1024px) {
107 | width: 30vw;
108 | grid-gap: none;
109 | }
110 | `;
111 |
112 | export const BalanceSymbol = styled.div`
113 | display: flex;
114 | align-items: center;
115 | background-color: #212428;
116 | border-radius: 6px;
117 | padding: 15px;
118 | @media only screen and (width: 768px) {
119 | img {
120 | width: 50px;
121 | }
122 | }
123 | @media only screen and (width: 320px) {
124 | img {
125 | width: 50px;
126 | }
127 | }
128 | `;
129 |
130 | export const BalanceInfo = styled.div`
131 | display: flex;
132 | flex-direction: column;
133 | justify-content: center;
134 | align-items: flex-start;
135 | width: 100%;
136 | `;
137 |
138 | export const BalanceName = styled.div`
139 | display: flex;
140 | justify-content: flex-start;
141 | padding: 15px 15px 5px;
142 | @media only screen and (width: 768px) {
143 | padding: 10px 10px 5px;
144 | }
145 | `;
146 |
147 | export const BalanceAmount = styled.div`
148 | display: flex;
149 | justify-content: flex-start;
150 | padding: 5px;
151 | background-color: #1e51bf;
152 | border-radius: 6px;
153 | width: 90%;
154 | `;
155 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 |
9 | background: url("./assets/img/background.png") no-repeat;
10 | background-size: cover;
11 | }
12 |
13 | code {
14 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
15 | monospace;
16 | }
17 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 | import reportWebVitals from "./reportWebVitals";
6 | import "bootstrap/dist/css/bootstrap.css";
7 |
8 | ReactDOM.render(
9 |
10 |
11 | ,
12 | document.getElementById("root")
13 | );
14 |
15 | // If you want to start measuring performance in your app, pass a function
16 | // to log results (for example: reportWebVitals(console.log))
17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
18 | reportWebVitals();
19 |
--------------------------------------------------------------------------------
/src/layouts/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | TextWrapper,
4 | FooterContainer,
5 | FooterSection,
6 | FooterSocialLink,
7 | SocialLink,
8 | } from "./styles";
9 | import Text from "../components/customs/Text";
10 |
11 | import facebook from "../assets/img/facebook.png";
12 | import linkedin from "../assets/img/linkedin.png";
13 | import youtube from "../assets/img/youtube.png";
14 | import twitter from "../assets/img/twitter.png";
15 |
16 | const Footer = () => {
17 | return (
18 |
19 |
42 |
43 | );
44 | };
45 |
46 | export default Footer;
47 |
--------------------------------------------------------------------------------
/src/layouts/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
3 | import { HeaderSection, HeaderUtils, LogoBtn, TextWrapper } from "./styles";
4 | import Button from "../components/customs/Button";
5 | import Text from "../components/customs/Text";
6 |
7 | import logo from "../assets/img/logo.png";
8 | import crossSign from "../assets/img/cross-sign.png";
9 | import rabbit from "../assets/img/rabbit.png";
10 | import wallet from "../assets/img/wallet.png";
11 |
12 | const Header = () => {
13 | let history = useHistory();
14 |
15 | const toHome = () => {
16 | history.push("/");
17 | };
18 |
19 | return (
20 |
21 |
22 |
23 |
24 |
25 |
35 |
36 |
37 |
38 | Buy on Pancakeswap
39 |
40 |
41 |
42 |
51 |
52 |
53 |
54 | Add Anyp
55 |
56 |
57 |
58 |
68 |
69 |
70 |
71 | Connect Wallet
72 |
73 |
74 |
75 |
76 |
77 | );
78 | };
79 |
80 | export default Header;
81 |
--------------------------------------------------------------------------------
/src/layouts/styles.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import headerback from "../assets/img/headerbackground.png";
3 |
4 | /* Header Section */
5 |
6 | export const HeaderSection = styled.div`
7 | display: flex;
8 | justify-content: space-between;
9 | align-items: center;
10 | height: auto;
11 | padding: 10px 20px;
12 | background: url(${headerback});
13 | background-color: rgb(50 2 122);
14 | border-radius: 8px;
15 | `;
16 |
17 | export const LogoBtn = styled.div`
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | padding: 1px;
22 | cursor: pointer;
23 | `;
24 |
25 | export const HeaderUtils = styled.div`
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | grid-gap: 10px;
30 | `;
31 |
32 | /* Footer Section */
33 |
34 | export const FooterSection = styled.div`
35 | width: 100%;
36 | display: flex;
37 | justify-content: center;
38 | background-color: #120645aa;
39 | padding: 15px 0;
40 | `;
41 |
42 | export const FooterContainer = styled.div`
43 | display: flex;
44 | justify-content: space-between;
45 | align-items: center;
46 | `;
47 |
48 | export const FooterSocialLink = styled.div`
49 | display: flex;
50 | justify-content: center;
51 | align-items: center;
52 | grid-gap: 10px;
53 | `;
54 |
55 | export const SocialLink = styled.div`
56 | display: flex;
57 | justify-content: center;
58 | align-items: center;
59 | border-radius: 50px;
60 | cursor: pointer;
61 | `;
62 |
63 | export const TextWrapper = styled.div`
64 | @media only screen and (max-width: 425px) {
65 | display: none;
66 | }
67 | `;
68 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/Dashboard.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Select from "react-select";
3 |
4 | import {
5 | BalanceStick,
6 | BeeRight,
7 | BeeLeft,
8 | Container,
9 | DescTitle,
10 | NetworkCards,
11 | NetworkRewards,
12 | NetworkSearch,
13 | RewardsBox,
14 | SearchWrapper,
15 | SectionDesc,
16 | SectionNetworkCard,
17 | TokenWrapper,
18 | } from "../components/pages/dashboard.style";
19 | import Row from "../components/customs/Layout/Row";
20 | import Col from "../components/customs/Layout/Col";
21 | import Text from "../components/customs/Text";
22 | import Header from "../layouts/Header";
23 | import Button from "../components/customs/Button";
24 | import Input from "../components/customs/Input/Input";
25 |
26 | import beeshape from "../assets/img/bee-shape.png";
27 | import calculator from "../assets/img/calculator.png";
28 | import price from "../assets/img/pencil.png";
29 | import coin from "../assets/img/star.png";
30 | import ethereum from "../assets/img/ethereum.png";
31 | import overlay from "../assets/img/overlay.png";
32 | import ox from "../assets/img/ox.png";
33 | import fox from "../assets/img/metamask.png";
34 | import wallet1 from "../assets/img/wallet1.png";
35 | import wallet2 from "../assets/img/wallet2.png";
36 | import beehouse from "../assets/img/beehouse.png";
37 | import mobile from "../assets/img/mobile.png";
38 | import wallet3 from "../assets/img/wallet3.png";
39 | import monkey from "../assets/img/monkey.png";
40 | import water from "../assets/img/water.png";
41 | import GM from "../assets/img/GM.png";
42 |
43 | const options = [
44 | {
45 | value: "chocolate",
46 | label: (
47 |
48 |
49 |
50 |
51 | Tags
52 |
53 | ),
54 | },
55 | {
56 | value: "strawberry",
57 | label: (
58 |
59 |
60 |
61 |
62 | Tokens
63 |
64 | ),
65 | },
66 | ];
67 |
68 | const customStyles = {
69 | singleValue: (styles) => ({
70 | ...styles,
71 | color: "white",
72 | }),
73 | };
74 |
75 | const Dashboard = () => {
76 | return (
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
94 |
95 |
104 | DASHBOARD
105 |
106 |
107 |
108 |
109 |
117 | Auto-compounding is when your yield farming rewards are
118 | automatically sold and re-added to your pool to earn higher
119 | APY. ... If you're new to DeFi, and unsure how to Yield Farm,
120 | or what Yield Farming is, then first refer to this article
121 | before continuing
122 |
123 |
124 |
125 |
135 |
136 |
137 | Auto Compounding
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
156 |
164 |
173 |
174 |
196 | Your Balance
197 |
198 |
199 |
200 |
211 |
222 |
223 |
227 |
228 |
236 |
237 |
238 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
264 |
270 |
280 |
287 | Claim Rewards
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
303 | Your Balance
304 |
305 |
312 | $ 67,731
313 |
314 |
315 |
316 |
324 | Pendding Rewards
325 |
326 |
327 |
334 | $ 677
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
352 |
358 |
368 |
375 | Claim Rewards
376 |
377 |
378 |
379 |
380 |
381 |
382 |
383 |
391 | Your Balance
392 |
393 |
400 | $ 67,731
401 |
402 |
403 |
404 |
412 | Pendding Rewards
413 |
414 |
415 |
422 | $ 677
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
440 |
446 |
456 |
463 | Claim Rewards
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
479 | Your Balance
480 |
481 |
488 | $ 67,731
489 |
490 |
491 |
492 |
500 | Pendding Rewards
501 |
502 |
503 |
510 | $ 677
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
528 |
534 |
544 |
551 | Claim Rewards
552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 |
567 | Your Balance
568 |
569 |
576 | $ 67,731
577 |
578 |
579 |
580 |
588 | Pendding Rewards
589 |
590 |
591 |
598 | $ 677
599 |
600 |
601 |
602 |
603 |
604 |
605 |
606 |
607 |
608 |
609 |
610 |
611 |
616 |
622 |
632 |
639 | Claim Rewards
640 |
641 |
642 |
643 |
644 |
645 |
646 |
647 |
655 | Your Balance
656 |
657 |
664 | $ 67,731
665 |
666 |
667 |
668 |
676 | Pendding Rewards
677 |
678 |
679 |
686 | $ 677
687 |
688 |
689 |
690 |
691 |
692 |
693 |
694 |
695 |
696 |
697 |
698 |
699 |
704 |
710 |
720 |
727 | Claim Rewards
728 |
729 |
730 |
731 |
732 |
733 |
734 |
735 |
743 | Your Balance
744 |
745 |
752 | $ 67,731
753 |
754 |
755 |
756 |
764 | Pendding Rewards
765 |
766 |
767 |
774 | $ 677
775 |
776 |
777 |
778 |
779 |
780 |
781 |
782 |
783 |
784 |
785 |
786 |
787 |
792 |
798 |
808 |
815 | Claim Rewards
816 |
817 |
818 |
819 |
820 |
821 |
822 |
823 |
831 | Your Balance
832 |
833 |
840 | $ 67,731
841 |
842 |
843 |
844 |
852 | Pendding Rewards
853 |
854 |
855 |
862 | $ 677
863 |
864 |
865 |
866 |
867 |
868 |
869 |
870 |
871 |
872 |
873 |
874 |
875 |
880 |
886 |
896 |
903 | Claim Rewards
904 |
905 |
906 |
907 |
908 |
909 |
910 |
911 |
919 | Your Balance
920 |
921 |
928 | $ 67,731
929 |
930 |
931 |
932 |
940 | Pendding Rewards
941 |
942 |
943 |
950 | $ 677
951 |
952 |
953 |
954 |
955 |
956 |
957 |
958 |
959 |
960 |
961 |
962 |
963 |
968 |
974 |
984 |
991 | Claim Rewards
992 |
993 |
994 |
995 |
996 |
997 |
998 |
999 |
1007 | Your Balance
1008 |
1009 |
1016 | $ 67,731
1017 |
1018 |
1019 |
1020 |
1028 | Pendding Rewards
1029 |
1030 |
1031 |
1038 | $ 677
1039 |
1040 |
1041 |
1042 |
1043 |
1044 |
1045 |
1046 |
1047 |
1048 |
1049 |
1050 |
1051 |
1056 |
1062 |
1072 |
1079 | Claim Rewards
1080 |
1081 |
1082 |
1083 |
1084 |
1085 |
1086 |
1087 |
1095 | Your Balance
1096 |
1097 |
1104 | $ 67,731
1105 |
1106 |
1107 |
1108 |
1116 | Pendding Rewards
1117 |
1118 |
1119 |
1126 | $ 677
1127 |
1128 |
1129 |
1130 |
1131 |
1132 |
1133 |
1134 |
1135 |
1136 |
1137 |
1138 |
1139 |
1144 |
1150 |
1160 |
1167 | Claim Rewards
1168 |
1169 |
1170 |
1171 |
1172 |
1173 |
1174 |
1175 |
1183 | Your Balance
1184 |
1185 |
1192 | $ 67,731
1193 |
1194 |
1195 |
1196 |
1204 | Pendding Rewards
1205 |
1206 |
1207 |
1214 | $ 677
1215 |
1216 |
1217 |
1218 |
1219 |
1220 |
1221 |
1222 |
1223 |
1224 |
1225 |
1226 |
1227 | );
1228 | };
1229 |
1230 | export default Dashboard;
1231 |
--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
3 | import {
4 | BalanceInfo,
5 | BalanceName,
6 | BalanceAmount,
7 | BalanceBox,
8 | BalanceSymbol,
9 | Container,
10 | HomeAuth,
11 | ItemDescPart,
12 | MainTitle,
13 | MainTitleStick,
14 | SectionFooter,
15 | SectionMain,
16 | BeeShape,
17 | } from "../components/pages/home.style";
18 | import Header from "../layouts/Header";
19 | import Text from "../components/customs/Text";
20 | import Button from "../components/customs/Button";
21 |
22 | import handshake from "../assets/img/handshake.png";
23 | import tokensymbol from "../assets/img/tokensymbol.png";
24 | import beeshape from "../assets/img/bee-shape.png";
25 |
26 | const Home = () => {
27 | let history = useHistory();
28 |
29 | const toDashboard = () => {
30 | console.log("Here");
31 | history.push("/dashboard");
32 | };
33 |
34 | return (
35 |
36 |
166 |
167 | );
168 | };
169 |
170 | export default Home;
171 |
--------------------------------------------------------------------------------
/src/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/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 |
--------------------------------------------------------------------------------