├── .gitignore ├── public ├── robots.txt ├── favicon.ico ├── manifest.json └── index.html ├── src ├── assets │ ├── dao_icon.png │ ├── mainlogo.png │ ├── clock_icon.png │ ├── Inter-Light.ttf │ ├── airdrop_icon.png │ ├── confirm_check.png │ ├── confirm_cross.png │ ├── general_check.png │ ├── general_cross.png │ ├── genesis_icon.png │ ├── Inter-SemiBold.ttf │ ├── WalletConnectLogo.png │ ├── connected_status.png │ ├── menu_button.svg │ ├── vector_icon.svg │ ├── twitter_icon.svg │ └── telegram_icon.svg ├── env.js ├── index.js ├── components │ ├── index.js │ ├── collectemail │ │ ├── collectemail.css │ │ └── Collectemail.jsx │ ├── dashboard │ │ ├── Dashboard.jsx │ │ └── dashboard.css │ ├── criteria │ │ ├── criteria.css │ │ └── Criteria.jsx │ ├── principle │ │ ├── Principle.jsx │ │ └── principle.css │ └── result │ │ ├── Result.jsx │ │ └── result.css ├── App.js ├── core │ └── interact.js └── App.css ├── tailwind.config.js ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/dao_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/dao_icon.png -------------------------------------------------------------------------------- /src/assets/mainlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/mainlogo.png -------------------------------------------------------------------------------- /src/assets/clock_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/clock_icon.png -------------------------------------------------------------------------------- /src/assets/Inter-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/Inter-Light.ttf -------------------------------------------------------------------------------- /src/assets/airdrop_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/airdrop_icon.png -------------------------------------------------------------------------------- /src/assets/confirm_check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/confirm_check.png -------------------------------------------------------------------------------- /src/assets/confirm_cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/confirm_cross.png -------------------------------------------------------------------------------- /src/assets/general_check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/general_check.png -------------------------------------------------------------------------------- /src/assets/general_cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/general_cross.png -------------------------------------------------------------------------------- /src/assets/genesis_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/genesis_icon.png -------------------------------------------------------------------------------- /src/assets/Inter-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/Inter-SemiBold.ttf -------------------------------------------------------------------------------- /src/assets/WalletConnectLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/WalletConnectLogo.png -------------------------------------------------------------------------------- /src/assets/connected_status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Glory413/ReputationDAO_FrontEnd/main/src/assets/connected_status.png -------------------------------------------------------------------------------- /src/env.js: -------------------------------------------------------------------------------- 1 | export const API_URL = "http://65.108.142.188:3501/api"; 2 | export const RPC_URL = "https://goerli.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161" -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{js,jsx,ts,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### About App 2 | 3 | This app is an AI image redesign app that ai generating with original image. 4 | 5 | ### Configuring 6 | 7 | npm install 8 | 9 | ### Run Method 10 | 11 | npm start 12 | 13 | ### Build Method 14 | 15 | npm run build -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render( 7 | 8 | 9 | 10 | ); -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export {default as Dashboard} from './dashboard/Dashboard'; 2 | export {default as Collectemail} from './collectemail/Collectemail'; 3 | export {default as Principle} from './principle/Principle'; 4 | export {default as Criteria} from './criteria/Criteria'; 5 | export {default as Result} from './result/Result'; -------------------------------------------------------------------------------- /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 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/menu_button.svg: -------------------------------------------------------------------------------- 1 | 2 | img1 3 | 4 | 5 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/vector_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | img1 3 | 4 | 5 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/twitter_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | twitter_icon 3 | 4 | 5 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "magicai", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11", 7 | "axios": "^1.3.4", 8 | "ethers": "^6.7.1", 9 | "install": "^0.13.0", 10 | "npm": "^9.6.7", 11 | "react": "^18.2.0", 12 | "react-dom": "^18.2.0", 13 | "react-dropzone": "^14.2.3", 14 | "react-icons": "^4.6.0", 15 | "react-router-dom": "^6.11.2", 16 | "react-scripts": "5.0.1", 17 | "react-spinners": "^0.13.8", 18 | "react-toastify": "^9.1.3", 19 | "react-use": "^17.4.0", 20 | "web-vitals": "^2.1.4" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "devDependencies": { 46 | "tailwindcss": "^3.3.3" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, createContext } from 'react' 2 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 3 | import { Dashboard, Collectemail, Principle, Criteria, Result } from './components' 4 | import './App.css' 5 | import { ToastContainer } from 'react-toastify'; 6 | import 'react-toastify/dist/ReactToastify.css'; 7 | export const UserContext = createContext(null) 8 | const App = () => { 9 | const [walletAddress, SetWalletAddress] = useState(''); 10 | const [email, SetEmail] = useState(''); 11 | const [principle1, SetPrinciple1] = useState(''); 12 | const [principle2, SetPrinciple2] = useState(''); 13 | const [principle3, SetPrinciple3] = useState(''); 14 | const [principle4, SetPrinciple4] = useState(''); 15 | const [principle5, SetPrinciple5] = useState(''); 16 | return ( 17 | 18 | 19 | 20 | } /> 21 | } /> 22 | } /> 23 | } /> 24 | } /> 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | export default App -------------------------------------------------------------------------------- /src/components/collectemail/collectemail.css: -------------------------------------------------------------------------------- 1 | .mainsection .content .real-content { 2 | width: 100%; 3 | } 4 | 5 | .mainsection .content .real-content .email { 6 | display: flex; 7 | flex-direction: row; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | .mainsection .content .real-content .email input { 13 | margin-top: 30px; 14 | width: 548px; 15 | height: 51px; 16 | flex-shrink: 0; 17 | border-radius: 10px; 18 | font-size: 24px; 19 | text-align: center; 20 | border: 1px solid #000; 21 | background: #FFF; 22 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.50); 23 | } 24 | 25 | .mainsection .content .real-content .email input::placeholder { 26 | /* Center the placeholder text vertically and horizontally */ 27 | position: absolute; 28 | top: 50%; 29 | left: 50%; 30 | transform: translate(-50%, -50%); 31 | color: #aaa; /* Placeholder text color */ 32 | } 33 | 34 | 35 | 36 | 37 | 38 | .mainsection_mobile .content .real-content .email { 39 | display: flex; 40 | flex-direction: row; 41 | justify-content: center; 42 | align-items: center; 43 | } 44 | 45 | .mainsection_mobile .content .real-content .email input { 46 | width: 80%; 47 | height: 20px; 48 | margin-top: 15px; 49 | margin-bottom: 15px; 50 | flex-shrink: 0; 51 | border-radius: 5px; 52 | font-size: 15px; 53 | text-align: center; 54 | border: 1px solid #000; 55 | background: #FFF; 56 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.50); 57 | } 58 | 59 | .mainsection_mobile .content .real-content .email input::placeholder { 60 | /* Center the placeholder text vertically and horizontally */ 61 | position: absolute; 62 | top: 50%; 63 | left: 50%; 64 | transform: translate(-50%, -50%); 65 | color: #aaa; /* Placeholder text color */ 66 | } -------------------------------------------------------------------------------- /src/assets/telegram_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 27 | Reputation DAO 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/core/interact.js: -------------------------------------------------------------------------------- 1 | export const connectWallet = async () => { 2 | if (window.ethereum) { 3 | try { 4 | const addressArray = await window.ethereum.request({ 5 | method: "eth_requestAccounts", 6 | }); 7 | 8 | await window.ethereum.request({ 9 | method: 'wallet_switchEthereumChain', 10 | params: [{ chainId: '0x1' }], 11 | }) 12 | 13 | const obj = { 14 | status: "Metamask successfuly connected.", 15 | address: addressArray[0], 16 | }; 17 | return obj; 18 | } catch (err) { 19 | return { 20 | address: "", 21 | status: "Something went wrong: " + err.message, 22 | }; 23 | } 24 | } else { 25 | return { 26 | address: "", 27 | status: ( 28 | 29 |

30 | {" "} 31 | 🦊{" "} 32 | 33 | You must install Metamask, a virtual Ethereum wallet, in your 34 | browser. 35 | 36 |

37 | 38 | ), 39 | }; 40 | } 41 | }; 42 | 43 | export const getCurrentWalletConnected = async () => { 44 | if (window.ethereum) { 45 | try { 46 | const addressArray = await window.ethereum.request({ 47 | method: "eth_accounts", 48 | }); 49 | if (addressArray.length > 0) { 50 | return { 51 | address: addressArray[0], 52 | status: "Fill in the text-field above.", 53 | }; 54 | } else { 55 | return { 56 | address: "", 57 | status: "🦊 Connect to Metamask using the top right button.", 58 | }; 59 | } 60 | } catch (err) { 61 | return { 62 | address: "", 63 | status: "Something went wrong: " + err.message, 64 | }; 65 | } 66 | } else { 67 | return { 68 | address: "", 69 | status: ( 70 | 71 |

72 | {" "} 73 | 🦊{" "} 74 | 75 | You must install Metamask, a virtual Ethereum wallet, in your 76 | browser. 77 | 78 |

79 | 80 | ), 81 | }; 82 | } 83 | }; 84 | -------------------------------------------------------------------------------- /src/components/dashboard/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { useMedia } from 'react-use' 3 | import { useNavigate } from 'react-router-dom'; 4 | import './dashboard.css'; 5 | import WalletConnectLogo from '../../assets/WalletConnectLogo.png' 6 | import genesis_icon from '../../assets/genesis_icon.png' 7 | import airdrop_icon from '../../assets/airdrop_icon.png' 8 | import dao_icon from '../../assets/dao_icon.png' 9 | import { connectWallet } from '../../core/interact'; 10 | import { UserContext } from "../../App"; 11 | import { toast } from 'react-toastify'; 12 | 13 | export const Dashboard = () => { 14 | const navigate = useNavigate(); 15 | const { SetWalletAddress } = useContext(UserContext); 16 | const connectWalletPressed = async () => { 17 | const walletResponse = await connectWallet(); 18 | if(walletResponse.address === '') 19 | { 20 | SetWalletAddress(''); 21 | if(walletResponse.status.type === 'span') 22 | { 23 | toast.error('Not Connected. Please install Metamask.'); 24 | } 25 | else 26 | { 27 | toast.error('Not Connected.\n' + walletResponse.status); 28 | } 29 | } 30 | else 31 | { 32 | SetWalletAddress(walletResponse.address); 33 | navigate("/collectemail"); 34 | } 35 | }; 36 | const below600 = useMedia('(max-width: 600px)') 37 | return ( 38 |
39 | {!below600 && ( 40 |
41 | walletconnectlogo 42 | 43 |
44 | airdrop 45 | dao 46 | genesis 47 |
48 |
49 | )} 50 | {below600 && ( 51 |
52 | walletconnectlogo 53 | 54 |
55 | airdrop 56 | dao 57 | genesis 58 |
59 |
60 | )} 61 |
62 | ); 63 | }; 64 | export default Dashboard; -------------------------------------------------------------------------------- /src/components/criteria/criteria.css: -------------------------------------------------------------------------------- 1 | .mainsection .content .real-content .options { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: center; 5 | margin-bottom: 7px; 6 | } 7 | 8 | .mainsection .content .real-content .options .option { 9 | display: flex; 10 | flex-direction: row; 11 | justify-content: space-between; 12 | align-items: center; 13 | width: 400px; 14 | height: 35px; 15 | flex-shrink: 0; 16 | border-radius: 10px; 17 | border: 1px solid #68C0FF; 18 | background: #FFF; 19 | margin-right: 20px; 20 | } 21 | 22 | .mainsection .content .real-content .options .option h1 { 23 | margin-left: 10px; 24 | color: #000; 25 | font-family: Inter; 26 | font-size: 13px; 27 | font-style: normal; 28 | font-weight: 500; 29 | line-height: normal; 30 | } 31 | 32 | .mainsection .content .real-content .options .option .checkbuttons { 33 | margin-right: 5px; 34 | display: flex; 35 | flex-direction: row; 36 | justify-content: flex-end; 37 | align-items: center; 38 | } 39 | 40 | .mainsection .content .real-content .options .option .checkbuttons img { 41 | width: 24px; 42 | height: 24px; 43 | flex-shrink: 0; 44 | cursor: pointer; 45 | } 46 | 47 | 48 | 49 | 50 | 51 | 52 | .mainsection_mobile .content .real-content .options { 53 | display: flex; 54 | flex-direction: row; 55 | justify-content: center; 56 | margin-bottom: 7px; 57 | margin-left: 5px; 58 | width: 100%; 59 | } 60 | 61 | .mainsection_mobile .content .real-content .options .option { 62 | display: flex; 63 | flex-direction: row; 64 | justify-content: space-between; 65 | align-items: center; 66 | width: 100%; 67 | height: 24px; 68 | flex-shrink: 0; 69 | border-radius: 5px; 70 | border: 1px solid #68C0FF; 71 | background: #FFF; 72 | } 73 | 74 | .mainsection_mobile .content .real-content .options .option h1 { 75 | margin-left: 10px; 76 | color: #000; 77 | font-family: Inter; 78 | font-size: 10px; 79 | font-style: normal; 80 | font-weight: 500; 81 | line-height: normal; 82 | } 83 | 84 | .mainsection_mobile .content .real-content .options .option .checkbuttons { 85 | margin-right: 5px; 86 | display: flex; 87 | flex-direction: row; 88 | justify-content: flex-end; 89 | align-items: center; 90 | } 91 | 92 | .mainsection_mobile .content .real-content .options .option .checkbuttons img { 93 | width: 20px; 94 | height: 20px; 95 | flex-shrink: 0; 96 | cursor: pointer; 97 | } -------------------------------------------------------------------------------- /src/components/dashboard/dashboard.css: -------------------------------------------------------------------------------- 1 | .mainsection1 { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | min-height: 100vh; 7 | } 8 | 9 | .mainsection1 .walletconnect { 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | width: 600px; 14 | height: 600px; 15 | background: white; 16 | border-radius: 10px; 17 | } 18 | 19 | .mainsection1 .walletconnect img { 20 | margin-top: 30px; 21 | margin-left: 15%; 22 | width: 70%; 23 | border-radius: 7px; 24 | } 25 | 26 | .mainsection1 .walletconnect button { 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | align-items: center; 31 | width: 303.27px; 32 | height: 82px; 33 | border-radius: 13px; 34 | background: black; 35 | margin-top: 30px; 36 | margin-left: 25%; 37 | border: none; 38 | box-shadow: 0px 5.2063493728637695px 5.2063493728637695px 1.3015873432159424px rgba(0, 0, 0, 0.50); 39 | cursor: pointer; 40 | } 41 | 42 | .mainsection1 .walletconnect button h1 { 43 | flex-shrink: 0; 44 | color: #FFF; 45 | text-align: center; 46 | font-family: Inter; 47 | font-size: 36.444px; 48 | font-style: normal; 49 | font-weight: 600; 50 | line-height: 61.023%; 51 | } 52 | 53 | .mainsection1 .walletconnect .icons { 54 | display: flex; 55 | flex-direction: row; 56 | justify-content: center; 57 | margin-top: 15px; 58 | margin-bottom: 50px; 59 | margin-left: 33%; 60 | width: 30%; 61 | } 62 | 63 | .mainsection1 .walletconnect_mobile { 64 | display: flex; 65 | flex-direction: column; 66 | justify-content: center; 67 | width: 300px; 68 | height: 300px; 69 | background: white; 70 | border-radius: 10px; 71 | } 72 | 73 | .mainsection1 .walletconnect_mobile img { 74 | margin-top: 30px; 75 | margin-left: 15%; 76 | width: 70%; 77 | border-radius: 7px; 78 | } 79 | 80 | .mainsection1 .walletconnect_mobile button { 81 | display: flex; 82 | flex-direction: column; 83 | justify-content: center; 84 | align-items: center; 85 | width: 150px; 86 | height: 40px; 87 | border-radius: 7px; 88 | background: black; 89 | margin-top: 15px; 90 | margin-left: 25%; 91 | border: none; 92 | box-shadow: 0px 5.2063493728637695px 5.2063493728637695px 1.3015873432159424px rgba(0, 0, 0, 0.50); 93 | cursor: pointer; 94 | } 95 | 96 | .mainsection1 .walletconnect_mobile button h1 { 97 | flex-shrink: 0; 98 | color: #FFF; 99 | text-align: center; 100 | font-family: Inter; 101 | font-size: 18px; 102 | font-style: normal; 103 | font-weight: 600; 104 | line-height: 61.023%; 105 | } 106 | 107 | .mainsection1 .walletconnect_mobile .icons { 108 | display: flex; 109 | flex-direction: row; 110 | justify-content: center; 111 | margin-top: 8px; 112 | margin-bottom: 25px; 113 | margin-left: 33%; 114 | width: 30%; 115 | } -------------------------------------------------------------------------------- /src/components/collectemail/Collectemail.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from 'react'; 2 | import { useMedia } from 'react-use'; 3 | import './collectemail.css'; 4 | import { useNavigate } from 'react-router-dom'; 5 | import WalletConnectLogo from '../../assets/WalletConnectLogo.png' 6 | import mainlogo from '../../assets/mainlogo.png' 7 | import genesis_icon from '../../assets/genesis_icon.png' 8 | import airdrop_icon from '../../assets/airdrop_icon.png' 9 | import dao_icon from '../../assets/dao_icon.png' 10 | import vector_icon from '../../assets/vector_icon.svg' 11 | import twitter_icon from '../../assets/twitter_icon.svg' 12 | import telegram_icon from '../../assets/telegram_icon.svg' 13 | import menu_button from '../../assets/menu_button.svg' 14 | import connected_status_icon from '../../assets/connected_status.png' 15 | import { Link } from 'react-router-dom'; 16 | import { UserContext } from "../../App"; 17 | import { connectWallet } from '../../core/interact'; 18 | import { toast } from 'react-toastify'; 19 | 20 | export const Collectemail = () => { 21 | const navigate = useNavigate(); 22 | const { walletAddress, SetWalletAddress } = useContext(UserContext); 23 | const [isOpen, SetMenuButtonStatus] = useState(false); 24 | 25 | const handleKeyDown = (event) => {console.log ("FFFFFFFFFF") 26 | if (event.keyCode === 13) { 27 | // Enter key was pressed 28 | event.preventDefault(); // Prevent form submission 29 | // Call your submit function here 30 | onSavingEmail(); 31 | } 32 | }; 33 | 34 | useEffect(()=>{ 35 | const connectWalletPressed = async () => { 36 | const walletResponse = await connectWallet(); 37 | SetWalletAddress(walletResponse.address); 38 | }; 39 | connectWalletPressed(); 40 | }) 41 | 42 | const { email, SetEmail } = useContext(UserContext); 43 | const onEmailChange = (event) => { 44 | SetEmail(event.target.value); 45 | }; 46 | 47 | const onSavingEmail = () => { 48 | if(email === '') 49 | { 50 | toast.error('Please input email'); 51 | return; 52 | } 53 | 54 | const isValidEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g; 55 | if (email.trim().length === 0 || email.match(isValidEmail) === null) { 56 | toast.error("Email address value is invalid. Please try again") 57 | return; 58 | } 59 | else 60 | { 61 | navigate("/principle"); 62 | } 63 | } 64 | 65 | const onMenuButtonClick = () => { 66 | SetMenuButtonStatus(!isOpen); 67 | } 68 | 69 | const below600 = useMedia('(max-width: 1000px)') 70 | return ( 71 |
72 | {!below600 && ( 73 |
74 |
75 |
76 | walletconnectlogo 77 |
78 | 79 |
80 | genesis_icon 81 |

Genesis

82 |
83 | 84 |
85 | dao_icon 86 |

DAO

87 |
88 |
89 | airdrop_icon 90 |

Airdrop

91 |
92 |
93 |
94 |
95 | vector_icon 96 | twitter_icon 97 | telegram_icon 98 |
99 |
100 |
101 |
102 |
103 |
104 | connected_status_icon 105 |

{walletAddress.substring(0, 4) + "..." + walletAddress.substring(walletAddress.length-2, walletAddress.length)}

106 |
107 |
108 |
109 | mainlogo 110 |
111 |
112 |

Launch the Reputation DAO by participating in the genesis vote.

113 |
114 |
115 |

To begin, please enter your email address. This is used to keep you updated on important DAO activity only - we won’t spam!

116 |
117 |
118 | 124 |
125 |
126 |
127 | 128 |
129 |
130 |
131 | )} 132 | {below600 && ( 133 |
134 |
135 |
136 | menu_button 137 |
138 | mainlogo 139 |
140 |
141 |
142 | connected_status_icon 143 |

{walletAddress.substring(0, 4) + "..." + walletAddress.substring(walletAddress.length-2, walletAddress.length)}

144 |
145 |
146 |
147 | {isOpen && ( 148 |
149 |
150 | 151 |
152 | genesis_icon 153 |

Genesis

154 |
155 | 156 |
157 | dao_icon 158 |

DAO

159 |
160 |
161 | airdrop_icon 162 |

Airdrop

163 |
164 |
165 |
166 | vector_icon 167 | twitter_icon 168 | telegram_icon 169 |
170 |
171 | )} 172 |
173 |
174 |
175 |
176 |

Launch the Reputation DAO by participating in the genesis vote.

177 |
178 |
179 |

To begin, please enter your email address. This is used to keep you updated on important DAO activity only - we won’t spam!

180 |
181 |
182 | 188 |
189 |
190 |
191 | 192 |
193 |
194 |
195 | )} 196 |
197 | ); 198 | }; 199 | export default Collectemail; -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Inter"; 3 | src: url("./assets/Inter-SemiBold.ttf"); 4 | } 5 | 6 | @font-face { 7 | font-family: "Regular"; 8 | src: url("./assets/Inter-Light.ttf"); 9 | } 10 | 11 | body, html { 12 | background: linear-gradient(180deg, #FFB366 0%, #FFB8C5 100%); 13 | position: relative; 14 | margin: 0; 15 | } 16 | 17 | .mainsection { 18 | display: flex; 19 | flex-direction: row; 20 | justify-content: left; 21 | min-height: 100vh; 22 | } 23 | 24 | .mainsection .menu { 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: space-between; 28 | background: white; 29 | width: 20%; 30 | margin-left: 20px; 31 | margin-top: 20px; 32 | margin-bottom: 20px; 33 | border-radius: 5px; 34 | } 35 | 36 | .mainsection .menu a { 37 | text-decoration: none; 38 | } 39 | 40 | .mainsection .menu img { 41 | margin-top: 30px; 42 | margin-left: 10%; 43 | width: 80%; 44 | } 45 | 46 | .mainsection .menu .logoitem { 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: space-between; 50 | } 51 | 52 | .mainsection .menu .logoitem .menuitems { 53 | display: flex; 54 | flex-direction: column; 55 | justify-content: space-between; 56 | margin-top: 70px; 57 | } 58 | 59 | .mainsection .menu .logoitem .menuitems .genesis_icon { 60 | display: flex; 61 | flex-direction: row; 62 | width: 80%; 63 | margin-left: 10%; 64 | align-items: center; 65 | } 66 | 67 | .mainsection .menu .logoitem .menuitems .genesis_icon img { 68 | width: 20px; 69 | height: 20px; 70 | margin-left: 13px; 71 | margin-top: 0px; 72 | } 73 | 74 | .mainsection .menu .logoitem .menuitems .genesis_icon h1 { 75 | width: 150px; 76 | flex-shrink: 0; 77 | color: #000; 78 | font-family: Inter; 79 | font-size: 28px; 80 | font-style: normal; 81 | font-weight: 600; 82 | line-height: normal; 83 | margin-left: 20px; 84 | } 85 | 86 | .mainsection .menu .logoitem .menuitems .dao_icon { 87 | display: flex; 88 | flex-direction: row; 89 | width: 80%; 90 | margin-left: 10%; 91 | align-items: center; 92 | } 93 | 94 | .mainsection .menu .logoitem .menuitems .dao_icon h1 { 95 | width: 150px; 96 | flex-shrink: 0; 97 | color: #888; 98 | font-family: Inter; 99 | font-size: 28px; 100 | font-style: normal; 101 | font-weight: 600; 102 | line-height: normal; 103 | margin-left: 20px; 104 | } 105 | 106 | .mainsection .menu .logoitem .menuitems .dao_icon img { 107 | width: 20px; 108 | height: 20px; 109 | margin-left: 13px; 110 | margin-top: 0px; 111 | } 112 | 113 | .mainsection .menu .logoitem .menuitems .airdrop_icon { 114 | display: flex; 115 | flex-direction: row; 116 | width: 80%; 117 | margin-left: 10%; 118 | align-items: center; 119 | } 120 | 121 | .mainsection .menu .logoitem .menuitems .airdrop_icon img { 122 | width: 20px; 123 | height: 20px; 124 | margin-left: 13px; 125 | margin-top: 0px; 126 | } 127 | 128 | .mainsection .menu .logoitem .menuitems .airdrop_icon h1 { 129 | width: 150px; 130 | flex-shrink: 0; 131 | color: #888; 132 | font-family: Inter; 133 | font-size: 28px; 134 | font-style: normal; 135 | font-weight: 600; 136 | line-height: normal; 137 | margin-left: 20px; 138 | } 139 | 140 | .mainsection .menu .social_icon { 141 | display: flex; 142 | flex-direction: row; 143 | justify-content: center; 144 | margin-left: 37%; 145 | width: 30%; 146 | margin-bottom: 20px; 147 | } 148 | 149 | .mainsection .menu .social_icon a { 150 | margin-right: 30px; 151 | width: 20px; 152 | cursor: pointer; 153 | } 154 | 155 | .mainsection .menu .social_icon img { 156 | width: 28px; 157 | margin-right: 20px; 158 | cursor: pointer; 159 | } 160 | 161 | .mainsection .content { 162 | display: flex; 163 | flex-direction: column; 164 | justify-content: space-between; 165 | align-items: center; 166 | margin-top: 20px; 167 | width: 80%; 168 | position: relative; 169 | } 170 | 171 | .mainsection .content a { 172 | text-decoration: none; 173 | } 174 | 175 | .mainsection .content .real-content .walletinfo { 176 | display: flex; 177 | flex-direction: row; 178 | justify-content: flex-end; 179 | margin-right: 20px; 180 | } 181 | 182 | .mainsection .content .real-content .walletinfo .walletaddress { 183 | display: flex; 184 | flex-direction: row; 185 | justify-content: center; 186 | align-items: center; 187 | width: 143.27px; 188 | height: 38.738px; 189 | flex-shrink: 0; 190 | border-radius: 6.149px; 191 | background: #FFF; 192 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.50); 193 | } 194 | 195 | .mainsection .content .real-content .walletinfo .walletaddress img { 196 | width: 10px; 197 | height: 10px; 198 | } 199 | 200 | .walletaddress h1 { 201 | margin-left: 10px; 202 | color: #000; 203 | text-align: center; 204 | font-family: Inter; 205 | font-size: 24px; 206 | font-style: normal; 207 | font-weight: 600; 208 | line-height: normal; 209 | } 210 | 211 | .mainsection .content .mainlogo { 212 | display: flex; 213 | flex-direction: row; 214 | justify-content: center; 215 | flex-shrink: 0; 216 | margin-top: 20px; 217 | } 218 | 219 | .mainsection .content .mainlogo img { 220 | width: 120px; 221 | height: 100px; 222 | } 223 | 224 | .mainsection .content .title { 225 | display: flex; 226 | flex-direction: row; 227 | justify-content: center; 228 | } 229 | 230 | .mainsection .content .title h1 { 231 | margin-left: 20%; 232 | width: 50%; 233 | color: #000; 234 | font-family: Inter; 235 | font-size: 38px; 236 | font-style: normal; 237 | font-weight: 600; 238 | line-height: normal; 239 | margin-left: 0px; 240 | } 241 | 242 | .mainsection .content .description { 243 | display: flex; 244 | flex-direction: row; 245 | justify-content: center; 246 | margin-bottom: 10px; 247 | } 248 | 249 | .mainsection .content .description a { 250 | text-decoration: underline; 251 | } 252 | 253 | .mainsection .content .description h1 { 254 | margin-left: 20%; 255 | width: 50%; 256 | color: #000; 257 | font-family: Regular; 258 | font-size: 18px; 259 | font-style: normal; 260 | font-weight: 400; 261 | line-height: normal; 262 | margin-left: 0px; 263 | } 264 | 265 | .mainsection .content .buttoncontent { 266 | display: flex; 267 | flex-direction: row; 268 | justify-content: right; 269 | align-items: center; 270 | } 271 | 272 | .mainsection .content .buttoncontent button { 273 | display: flex; 274 | flex-direction: row; 275 | justify-content: center; 276 | align-items: center; 277 | border-radius: 13px; 278 | background: #222; 279 | width: 200px; 280 | height: 80px; 281 | flex-shrink: 0; 282 | border: none; 283 | box-shadow: 0px 5.2063493728637695px 5.2063493728637695px 1.3015873432159424px rgba(0, 0, 0, 0.50); 284 | margin-bottom: 40px; 285 | cursor: pointer; 286 | } 287 | 288 | .mainsection .content .buttoncontent button h1 { 289 | color: #FFF; 290 | text-align: center; 291 | font-family: Inter; 292 | font-size: 36.444px; 293 | font-style: normal; 294 | font-weight: 600; 295 | line-height: normal; 296 | } 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | .mainsection_mobile { 309 | display: flex; 310 | flex-direction: column; 311 | justify-content: flex-start; 312 | align-items: center; 313 | min-height: 100vh; 314 | } 315 | 316 | .mainsection_mobile .menu_mobile { 317 | display: flex; 318 | flex-direction: column; 319 | width: 100%; 320 | } 321 | 322 | .mainsection_mobile .menu_mobile a { 323 | text-decoration: none; 324 | } 325 | 326 | .mainsection_mobile .menu_mobile .menu_button { 327 | display: flex; 328 | flex-direction: row; 329 | justify-content: space-between; 330 | margin-left: 20px; 331 | margin-top: 15px; 332 | } 333 | 334 | .mainsection_mobile .menu_mobile .menu_button img { 335 | width: 30px; 336 | height: 30px; 337 | } 338 | 339 | .mainsection_mobile .menu_mobile .menu_button .logoitem { 340 | width: 30px; 341 | height: 30px; 342 | margin-left: 70px; 343 | } 344 | 345 | .mainsection_mobile .menu_mobile .menu_button .logoitem img { 346 | width: 30px; 347 | height: 30px; 348 | } 349 | 350 | .mainsection_mobile .menu_mobile .menu_button .walletinfo { 351 | display: flex; 352 | flex-direction: row; 353 | justify-content: flex-end; 354 | margin-right: 20px; 355 | } 356 | 357 | .mainsection_mobile .menu_mobile .menu_button .walletinfo .walletaddress { 358 | display: flex; 359 | flex-direction: row; 360 | justify-content: center; 361 | align-items: center; 362 | width: 100px; 363 | height: 30px; 364 | flex-shrink: 0; 365 | border-radius: 6.149px; 366 | background: #FFF; 367 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.50); 368 | } 369 | 370 | .mainsection_mobile .menu_mobile .menu_button .walletinfo .walletaddress img { 371 | width: 10px; 372 | height: 10px; 373 | } 374 | 375 | .mainsection_mobile .menu_mobile .menu_button .walletinfo .walletaddress h1 { 376 | margin-left: 10px; 377 | color: #000; 378 | text-align: center; 379 | font-family: Inter; 380 | font-size: 16px; 381 | font-style: normal; 382 | font-weight: 600; 383 | line-height: normal; 384 | } 385 | 386 | .mainsection_mobile .menu { 387 | display: flex; 388 | flex-direction: row; 389 | justify-content: space-between; 390 | background: white; 391 | margin-left: 20px; 392 | margin-right: 20px; 393 | margin-top: 20px; 394 | margin-bottom: 20px; 395 | border-radius: 5px; 396 | } 397 | 398 | .mainsection_mobile .menu_mobile .menu .menuitems { 399 | display: flex; 400 | flex-direction: row; 401 | justify-content: center; 402 | } 403 | 404 | .mainsection_mobile .menu_mobile .menu .menuitems .genesis_icon { 405 | display: flex; 406 | flex-direction: row; 407 | margin-left: 10px; 408 | align-items: center; 409 | } 410 | 411 | .mainsection_mobile .menu_mobile .menu .menuitems .genesis_icon img { 412 | width: 7px; 413 | height: 7px; 414 | margin-left: 5px; 415 | margin-top: 0px; 416 | } 417 | 418 | .mainsection_mobile .menu_mobile .menu .menuitems .genesis_icon h1 { 419 | flex-shrink: 0; 420 | color: #888; 421 | font-family: Inter; 422 | font-size: 12px; 423 | font-style: normal; 424 | font-weight: 600; 425 | line-height: normal; 426 | margin-left: 5px; 427 | } 428 | 429 | .mainsection_mobile .menu_mobile .menu .menuitems .dao_icon { 430 | display: flex; 431 | flex-direction: row; 432 | margin-left: 5px; 433 | align-items: center; 434 | } 435 | 436 | .mainsection_mobile .menu_mobile .menu .menuitems .dao_icon img { 437 | width: 7px; 438 | height: 7px; 439 | margin-left: 5px; 440 | margin-top: 0px; 441 | } 442 | 443 | .mainsection_mobile .menu_mobile .menu .menuitems .dao_icon h1 { 444 | flex-shrink: 0; 445 | color: #888; 446 | font-family: Inter; 447 | font-size: 12px; 448 | font-style: normal; 449 | font-weight: 600; 450 | line-height: normal; 451 | margin-left: 10px; 452 | } 453 | 454 | .mainsection_mobile .menu_mobile .menu .menuitems .airdrop_icon { 455 | display: flex; 456 | flex-direction: row; 457 | margin-left: 5px; 458 | align-items: center; 459 | } 460 | 461 | .mainsection_mobile .menu_mobile .menu .menuitems .airdrop_icon img { 462 | width: 7px; 463 | height: 7px; 464 | margin-left: 5px; 465 | margin-top: 0px; 466 | } 467 | 468 | .mainsection_mobile .menu_mobile .menu .menuitems .airdrop_icon h1 { 469 | flex-shrink: 0; 470 | color: #888; 471 | font-family: Inter; 472 | font-size: 12px; 473 | font-style: normal; 474 | font-weight: 600; 475 | line-height: normal; 476 | margin-left: 10px; 477 | } 478 | 479 | 480 | .mainsection_mobile .menu_mobile .menu .social_icon { 481 | display: flex; 482 | flex-direction: row; 483 | justify-content: center; 484 | align-items: center; 485 | width: 30%; 486 | } 487 | 488 | .mainsection_mobile .menu .social_icon a { 489 | margin-right: 20px; 490 | width: 20px; 491 | cursor: pointer; 492 | } 493 | 494 | .mainsection_mobile .menu .social_icon img { 495 | width: 20px; 496 | margin-right: 10px; 497 | cursor: pointer; 498 | } 499 | 500 | 501 | 502 | 503 | 504 | .mainsection_mobile .content { 505 | display: flex; 506 | flex-direction: column; 507 | width: 90%; 508 | position: relative; 509 | } 510 | 511 | .mainsection_mobile .content .title { 512 | display: flex; 513 | flex-direction: row; 514 | justify-content: center; 515 | } 516 | 517 | .mainsection_mobile .content .title h1 { 518 | margin-left: 10%; 519 | width: 80%; 520 | color: #000; 521 | font-family: Inter; 522 | font-size: 28px; 523 | font-style: normal; 524 | font-weight: 600; 525 | line-height: normal; 526 | margin-left: 0px; 527 | } 528 | 529 | .mainsection_mobile .content .description { 530 | display: flex; 531 | flex-direction: row; 532 | justify-content: center; 533 | } 534 | 535 | .mainsection_mobile .content .description h1 { 536 | margin-left: 10%; 537 | width: 80%; 538 | color: #000; 539 | font-family: Regular; 540 | font-size: 18px; 541 | font-style: normal; 542 | font-weight: 400; 543 | line-height: normal; 544 | margin-left: 0px; 545 | } 546 | 547 | .mainsection_mobile .content .description a { 548 | text-decoration: underline; 549 | } 550 | 551 | .mainsection_mobile .content .buttoncontent { 552 | display: flex; 553 | flex-direction: row; 554 | justify-content: center; 555 | align-items: center; 556 | } 557 | 558 | .mainsection_mobile .content .buttoncontent button { 559 | display: flex; 560 | flex-direction: row; 561 | justify-content: center; 562 | align-items: center; 563 | border-radius: 7px; 564 | background: #222; 565 | width: 100px; 566 | height: 40px; 567 | flex-shrink: 0; 568 | border: none; 569 | box-shadow: 0px 5.2063493728637695px 5.2063493728637695px 1.3015873432159424px rgba(0, 0, 0, 0.50); 570 | margin-top: 20px; 571 | margin-bottom: 20px; 572 | cursor: pointer; 573 | } 574 | 575 | .mainsection_mobile .content .buttoncontent button h1 { 576 | color: #FFF; 577 | text-align: center; 578 | font-family: Inter; 579 | font-size: 20px; 580 | font-style: normal; 581 | font-weight: 600; 582 | line-height: normal; 583 | } 584 | 585 | .scale-105:hover { 586 | transform: scale(1.05); 587 | } 588 | 589 | .scale-125:hover { 590 | transform: scale(1.25); 591 | } 592 | 593 | .inline { 594 | display: inline; 595 | } 596 | 597 | .w-4 { 598 | width: 16px; 599 | } 600 | 601 | .h-4 { 602 | height: 16px; 603 | } 604 | 605 | .w-8 { 606 | width: 32px; 607 | } 608 | 609 | .h-8 { 610 | height: 32px; 611 | } 612 | 613 | .mr-3 { 614 | margin-right: 12px; 615 | } 616 | 617 | .text-white { 618 | color: white; 619 | } 620 | 621 | .animate-spin { 622 | animation: spin 1s linear infinite; 623 | 624 | @keyframes spin { 625 | from { 626 | transform: rotate(0deg); 627 | } 628 | to { 629 | transform: rotate(360deg); 630 | } 631 | } 632 | } -------------------------------------------------------------------------------- /src/components/principle/Principle.jsx: -------------------------------------------------------------------------------- 1 | import React, {useContext, useEffect, useState } from 'react'; 2 | import { useMedia } from 'react-use'; 3 | import { useNavigate } from 'react-router-dom'; 4 | import './principle.css'; 5 | import WalletConnectLogo from '../../assets/WalletConnectLogo.png' 6 | import mainlogo from '../../assets/mainlogo.png' 7 | import genesis_icon from '../../assets/genesis_icon.png' 8 | import airdrop_icon from '../../assets/airdrop_icon.png' 9 | import dao_icon from '../../assets/dao_icon.png' 10 | import vector_icon from '../../assets/vector_icon.svg' 11 | import twitter_icon from '../../assets/twitter_icon.svg' 12 | import telegram_icon from '../../assets/telegram_icon.svg' 13 | import connected_status_icon from '../../assets/connected_status.png' 14 | import menu_button from '../../assets/menu_button.svg' 15 | import { Link } from 'react-router-dom'; 16 | import { UserContext } from "../../App"; 17 | import { connectWallet } from '../../core/interact'; 18 | import { toast } from 'react-toastify'; 19 | 20 | export const Principle = () => { 21 | const [isOpen, SetMenuButtonStatus] = useState(false); 22 | const navigate = useNavigate(); 23 | const { walletAddress, SetWalletAddress } = useContext(UserContext); 24 | const { SetPrinciple1 } = useContext(UserContext); 25 | const { SetPrinciple2 } = useContext(UserContext); 26 | const { SetPrinciple3 } = useContext(UserContext); 27 | const { SetPrinciple4 } = useContext(UserContext); 28 | const { SetPrinciple5 } = useContext(UserContext); 29 | useEffect(()=>{ 30 | const connectWalletPressed = async () => { 31 | const walletResponse = await connectWallet(); 32 | SetWalletAddress(walletResponse.address); 33 | }; 34 | connectWalletPressed(); 35 | }) 36 | 37 | const onClickItem = (event) => { 38 | for(let j=1;j<=5;j++) 39 | { 40 | if(document.getElementById(j).textContent === event.target.id) 41 | { 42 | return; 43 | } 44 | } 45 | 46 | for(let i=1;i<=5;i++) 47 | { 48 | if(document.getElementById(i).textContent === '') 49 | { 50 | document.getElementById(i).textContent = event.target.id; 51 | return; 52 | } 53 | } 54 | } 55 | 56 | const onClickFirst = () => { 57 | document.getElementById(1).textContent = ""; 58 | } 59 | 60 | const onClickSecond = () => { 61 | document.getElementById(2).textContent = ""; 62 | } 63 | 64 | const onClickThird = () => { 65 | document.getElementById(3).textContent = ""; 66 | } 67 | 68 | const onClickFourth = () => { 69 | document.getElementById(4).textContent = ""; 70 | } 71 | 72 | const onClickFifth = () => { 73 | document.getElementById(5).textContent = ""; 74 | } 75 | 76 | const onSavingPrinciple = () => { 77 | for(let i=1;i<=5;i++) 78 | { 79 | if(document.getElementById(i).textContent === '') 80 | { 81 | toast.error('Please select 5 items.'); 82 | return; 83 | } 84 | if(i === 1) 85 | { 86 | SetPrinciple1(document.getElementById(i).textContent); 87 | } 88 | if(i === 2) 89 | { 90 | SetPrinciple2(document.getElementById(i).textContent); 91 | } 92 | if(i === 3) 93 | { 94 | SetPrinciple3(document.getElementById(i).textContent); 95 | } 96 | if(i === 4) 97 | { 98 | SetPrinciple4(document.getElementById(i).textContent); 99 | } 100 | if(i === 5) 101 | { 102 | SetPrinciple5(document.getElementById(i).textContent); 103 | } 104 | } 105 | navigate("/criteria"); 106 | } 107 | 108 | const onMenuButtonClick = () => { 109 | SetMenuButtonStatus(!isOpen); 110 | } 111 | 112 | const below600 = useMedia('(max-width: 1000px)') 113 | return ( 114 |
115 | {!below600 && ( 116 |
117 |
118 |
119 | walletconnectlogo 120 |
121 | 122 |
123 | genesis_icon 124 |

Genesis

125 |
126 | 127 |
128 | dao_icon 129 |

DAO

130 |
131 |
132 | airdrop_icon 133 |

Airdrop

134 |
135 |
136 |
137 |
138 | vector_icon 139 | twitter_icon 140 | telegram_icon 141 |
142 |
143 |
144 |
145 |
146 |
147 | connected_status_icon 148 |

{walletAddress.substring(0, 4) + "..." + walletAddress.substring(walletAddress.length-2, walletAddress.length)}

149 |
150 |
151 |
152 | mainlogo 153 |
154 |
155 |

Next, pick your principles

156 |
157 |
158 |

Select the 5 principles that you think are the most important to the success of the DAO. When proposals are made, you will be asked to consider how much advantage the proposal will provide in the most important areas. Your top 5 are in no particular order. View the definitions of the principles here.

159 |
160 |
161 |
162 |
163 |

1.

164 | 165 |
166 |
167 |

2.

168 | 169 |
170 |
171 |

3.

172 | 173 |
174 |
175 |

4.

176 | 177 |
178 |
179 |

5.

180 | 181 |
182 |
183 |
184 |
185 |
Sustainability
186 |
Prosperity
187 |
Security
188 |
Collaboration
189 |
Growth
190 |
Improvement
191 |
192 |
193 |
Innovation
194 |
Community
195 |
Meaning
196 |
Reputation
197 |
Reliability
198 |
Value
199 |
200 |
201 |
202 | 203 |
204 |
205 |
206 | )} 207 | {below600 && ( 208 |
209 |
210 |
211 | menu_button 212 |
213 | mainlogo 214 |
215 |
216 |
217 | connected_status_icon 218 |

{walletAddress.substring(0, 4) + "..." + walletAddress.substring(walletAddress.length-2, walletAddress.length)}

219 |
220 |
221 |
222 | {isOpen && ( 223 |
224 |
225 | 226 |
227 | genesis_icon 228 |

Genesis

229 |
230 | 231 |
232 | dao_icon 233 |

DAO

234 |
235 |
236 | airdrop_icon 237 |

Airdrop

238 |
239 |
240 |
241 | vector_icon 242 | twitter_icon 243 | telegram_icon 244 |
245 |
246 | )} 247 |
248 |
249 |
250 |
251 |

Next, pick your principles

252 |
253 |
254 |

Select the 5 principles that you think are the most important to the success of the DAO. When proposals are made, you will be asked to consider how much advantage the proposal will provide in the most important areas. Your top 5 are in no particular order. View the definitions of the principles here.

255 |
256 |
257 |
258 |
259 |

1.

260 | 261 |
262 |
263 |

2.

264 | 265 |
266 |
267 |

3.

268 | 269 |
270 |
271 |

4.

272 | 273 |
274 |
275 |

5.

276 | 277 |
278 |
279 |
280 |
281 |
Sustainability
282 |
Prosperity
283 |
Security
284 |
285 |
286 |
Collaboration
287 |
Growth
288 |
Improvement
289 |
290 |
291 |
Innovation
292 |
Community
293 |
Meaning
294 |
295 |
296 |
Reputation
297 |
Reliability
298 |
Value
299 |
300 |
301 |
302 | 303 |
304 |
305 |
306 | )} 307 |
308 | ); 309 | }; 310 | export default Principle; -------------------------------------------------------------------------------- /src/components/result/Result.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from 'react'; 2 | import { useMedia } from 'react-use'; 3 | import './result.css'; 4 | import WalletConnectLogo from '../../assets/WalletConnectLogo.png' 5 | import mainlogo from '../../assets/mainlogo.png' 6 | import genesis_icon from '../../assets/genesis_icon.png' 7 | import airdrop_icon from '../../assets/airdrop_icon.png' 8 | import dao_icon from '../../assets/dao_icon.png' 9 | import vector_icon from '../../assets/vector_icon.svg' 10 | import twitter_icon from '../../assets/twitter_icon.svg' 11 | import telegram_icon from '../../assets/telegram_icon.svg' 12 | import connected_status_icon from '../../assets/connected_status.png' 13 | import confirm_check from '../../assets/confirm_check.png'; 14 | import confirm_cross from '../../assets/confirm_cross.png'; 15 | import clock_icon from '../../assets/clock_icon.png'; 16 | import menu_button from '../../assets/menu_button.svg' 17 | import { Link } from 'react-router-dom'; 18 | import { UserContext } from "../../App"; 19 | import { connectWallet } from '../../core/interact'; 20 | import * as env from "../../env"; 21 | import axios from 'axios'; 22 | import { toast } from 'react-toastify'; 23 | 24 | export const Result = () => { 25 | const { walletAddress, SetWalletAddress } = useContext(UserContext); 26 | const [isOpen, SetMenuButtonStatus] = useState(false); 27 | const [ seconds, setSeconds ] = useState(0); 28 | useEffect(()=>{ 29 | const connectWalletPressed = async () => { 30 | const walletResponse = await connectWallet(); 31 | SetWalletAddress(walletResponse.address); 32 | }; 33 | connectWalletPressed(); 34 | }) 35 | 36 | useEffect(()=>{ 37 | const getGensisTime = async () => { 38 | try { 39 | const response = await axios.get(`${env.API_URL}/genesis/get_selection_time`); 40 | if(response.status === 200) 41 | { 42 | const currentDate = new Date().getTime() / 1000; 43 | setSeconds(parseInt(response.data.data - currentDate)); 44 | } 45 | else 46 | { 47 | toast.error('Failed Getting Gensis Time'); 48 | } 49 | } catch (error) { 50 | toast.error('Error Getting Gensis Time:' + error); 51 | } 52 | }; 53 | getGensisTime(); 54 | }, []) 55 | 56 | useEffect(()=>{ 57 | const getResult = async () => { 58 | try { 59 | const response = await axios.get(`${env.API_URL}/genesis/get_result`); 60 | if(response.status === 200) 61 | { 62 | console.log(response.data.data[0].criteria); 63 | document.getElementById("1").textContent = response.data.data[0].principles[0]; 64 | document.getElementById("2").textContent = response.data.data[0].principles[1]; 65 | document.getElementById("3").textContent = response.data.data[0].principles[2]; 66 | document.getElementById("4").textContent = response.data.data[0].principles[3]; 67 | document.getElementById("5").textContent = response.data.data[0].principles[4]; 68 | 69 | Object.keys(response.data.data[0].criteria).forEach(key => { 70 | const value = response.data.data[0].criteria[key]; 71 | if(value[0] === "Yes") 72 | { 73 | document.getElementById(key).innerHTML = ""; 74 | document.getElementById(key).innerHTML += ''; 75 | document.getElementById(key).innerHTML += '

'+ (value[1]*100).toFixed(2) +'%

'; 76 | } 77 | else if(value[0] === "No") 78 | { 79 | document.getElementById(key).innerHTML = ""; 80 | document.getElementById(key).innerHTML += '

'+ (value[1]*100).toFixed(2) +'%

'; 81 | document.getElementById(key).innerHTML += ''; 82 | } 83 | }); 84 | } 85 | else 86 | { 87 | toast.error('Failed Getting Result'); 88 | } 89 | } catch (error) { 90 | toast.error('Error Getting Result:' + error); 91 | } 92 | }; 93 | getResult(); 94 | }, []) 95 | 96 | const getResult = async () => { 97 | try { 98 | const response = await axios.get(`${env.API_URL}/genesis/get_result`); 99 | if(response.status === 200) 100 | { 101 | console.log(response.data.data[0].criteria); 102 | document.getElementById("1").textContent = response.data.data[0].principles[0]; 103 | document.getElementById("2").textContent = response.data.data[0].principles[1]; 104 | document.getElementById("3").textContent = response.data.data[0].principles[2]; 105 | document.getElementById("4").textContent = response.data.data[0].principles[3]; 106 | document.getElementById("5").textContent = response.data.data[0].principles[4]; 107 | 108 | Object.keys(response.data.data[0].criteria).forEach(key => { 109 | const value = response.data.data[0].criteria[key]; 110 | if(value[0] === "Yes") 111 | { 112 | document.getElementById(key).innerHTML = ""; 113 | document.getElementById(key).innerHTML += ''; 114 | document.getElementById(key).innerHTML += '

'+ (value[1]*100).toFixed(2) +'%

'; 115 | } 116 | else if(value[0] === "No") 117 | { 118 | document.getElementById(key).innerHTML = ""; 119 | document.getElementById(key).innerHTML += '

'+ (value[1]*100).toFixed(2) +'%

'; 120 | document.getElementById(key).innerHTML += ''; 121 | } 122 | }); 123 | } 124 | else 125 | { 126 | toast.error('Failed Getting Result'); 127 | } 128 | } catch (error) { 129 | toast.error('Error Getting Result:' + error); 130 | } 131 | }; 132 | 133 | useEffect(() => { 134 | //Implementing the setInterval method 135 | const interval = setInterval(() => { 136 | if(seconds !== 0) 137 | { 138 | setSeconds(seconds - 1); 139 | getResult(); 140 | } 141 | }, 1000); 142 | 143 | //Clearing the interval 144 | return () => clearInterval(interval); 145 | }, [seconds]); 146 | 147 | const onMenuButtonClick = () => { 148 | SetMenuButtonStatus(!isOpen); 149 | } 150 | 151 | const below600 = useMedia('(max-width: 1000px)') 152 | return ( 153 |
154 | {!below600 && ( 155 |
156 |
157 |
158 | walletconnectlogo 159 |
160 | 161 |
162 | genesis_icon 163 |

Genesis

164 |
165 | 166 |
167 | dao_icon 168 |

DAO

169 |
170 |
171 | airdrop_icon 172 |

Airdrop

173 |
174 |
175 |
176 |
177 | vector_icon 178 | twitter_icon 179 | telegram_icon 180 |
181 |
182 |
183 |
184 |
185 |
186 | connected_status_icon 187 |

{walletAddress.substring(0, 4) + "..." + walletAddress.substring(walletAddress.length-2, walletAddress.length)}

188 |
189 |
190 |
191 | mainlogo 192 |
193 |
194 |

Results

195 |
196 |
197 |

Once votes have been collected, the DAO will be open for proposals and use these principles and criteria to evaluate proposals!

198 |
199 |
200 |

Genesis ends in:

201 |
202 |
203 |
204 | clock_icon 205 |

{parseInt(seconds/(24*60*60))}D, {parseInt((seconds - parseInt(seconds/(24*60*60))*(24*60*60))/(60*60))}h, {parseInt((seconds - parseInt(seconds/(24*60*60))*24*60*60 - parseInt((seconds - parseInt(seconds/(24*60*60))*(24*60*60))/(60*60))* 60*60)/60)}m, {seconds - parseInt(seconds/(24*60*60))*(24*60*60) - parseInt((seconds - parseInt(seconds/(24*60*60))*(24*60*60))/(60*60))*(60*60) - parseInt((seconds - parseInt(seconds/(24*60*60))*24*60*60 - parseInt((seconds - parseInt(seconds/(24*60*60))*(24*60*60))/(60*60))* 60*60)/60)*60}s

206 |
207 |
208 |
209 |
210 |
211 |

1.

212 | 213 |
214 |
215 |

2.

216 | 217 |
218 |
219 |

3.

220 | 221 |
222 |
223 |

4.

224 | 225 |
226 |
227 |

5.

228 | 229 |
230 |
231 |
232 |
233 |
234 |

Commercialise reputation and verification services.

235 |
236 |
237 |
238 |
239 |

Provide liquidity to other protocols.

240 |
241 |
242 |
243 |
244 |
245 |
246 |

Utilise treasury funds in yield and staking.

247 |
248 |
249 |
250 |
251 |

Fund bad actor detection and bounty hunting.

252 |
253 |
254 |
255 |
256 |
257 |
258 |

Fund development of RDAO ecosystem.

259 |
260 |
261 |
262 |
263 |

Actively manage DAO as an investment fund.

264 |
265 |
266 |
267 |
268 |
269 |
270 |

Invest in early stage protocols.

271 |
272 |
273 |
274 |
275 |

Invest in NFT’s.

276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 | )} 286 | {below600 && ( 287 |
288 |
289 |
290 | menu_button 291 |
292 | mainlogo 293 |
294 |
295 |
296 | connected_status_icon 297 |

{walletAddress.substring(0, 4) + "..." + walletAddress.substring(walletAddress.length-2, walletAddress.length)}

298 |
299 |
300 |
301 | {isOpen && ( 302 |
303 |
304 | 305 |
306 | genesis_icon 307 |

Genesis

308 |
309 | 310 |
311 | dao_icon 312 |

DAO

313 |
314 |
315 | airdrop_icon 316 |

Airdrop

317 |
318 |
319 |
320 | vector_icon 321 | twitter_icon 322 | telegram_icon 323 |
324 |
325 | )} 326 |
327 |
328 |
329 |
330 |

Results

331 |
332 |
333 |

Once votes have been collected, the DAO will be open for proposals and use these principles and criteria to evaluate proposals!

334 |
335 |
336 |

Genesis ends in:

337 |
338 |
339 |
340 | clock_icon 341 |

{parseInt(seconds/(24*60*60))}D, {parseInt((seconds - parseInt(seconds/(24*60*60))*(24*60*60))/(60*60))}h, {parseInt((seconds - parseInt(seconds/(24*60*60))*24*60*60 - parseInt((seconds - parseInt(seconds/(24*60*60))*(24*60*60))/(60*60))* 60*60)/60)}m, {seconds - parseInt(seconds/(24*60*60))*(24*60*60) - parseInt((seconds - parseInt(seconds/(24*60*60))*(24*60*60))/(60*60))*(60*60) - parseInt((seconds - parseInt(seconds/(24*60*60))*24*60*60 - parseInt((seconds - parseInt(seconds/(24*60*60))*(24*60*60))/(60*60))* 60*60)/60)*60}s

342 |
343 |
344 |
345 |
346 |
347 |

1.

348 | 349 |
350 |
351 |

2.

352 | 353 |
354 |
355 |

3.

356 | 357 |
358 |
359 |

4.

360 | 361 |
362 |
363 |

5.

364 | 365 |
366 |
367 |
368 |

369 |
370 |
371 |

Commercialise reputation and verification services.

372 |
373 |
374 |
375 |
376 |
377 |
378 |

Provide liquidity to other protocols.

379 |
380 |
381 |
382 |
383 |
384 |
385 |

Utilise treasury funds in yield and staking.

386 |
387 |
388 |
389 |
390 |
391 |
392 |

Fund bad actor detection and bounty hunting.

393 |
394 |
395 |
396 |
397 |
398 |
399 |

Fund development of RDAO ecosystem.

400 |
401 |
402 |
403 |
404 |
405 |
406 |

Actively manage DAO as an investment fund.

407 |
408 |
409 |
410 |
411 |
412 |
413 |

Invest in early stage protocols.

414 |
415 |
416 |
417 |
418 |
419 |
420 |

Invest in NFT’s.

421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 | )} 430 |
431 | ); 432 | }; 433 | export default Result; -------------------------------------------------------------------------------- /src/components/principle/principle.css: -------------------------------------------------------------------------------- 1 | .mainsection .content .real-content .userselect { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: center; 5 | } 6 | 7 | .mainsection .content .real-content .userselect .userselectboard { 8 | display: flex; 9 | flex-direction: row; 10 | justify-content: center; 11 | align-items: center; 12 | width: 870px; 13 | height: 88px; 14 | flex-shrink: 0; 15 | border-radius: 8.317px; 16 | background: linear-gradient(180deg, #8E66FF 0%, #FFB8C5 146.51%); 17 | } 18 | 19 | .mainsection .content .real-content .userselectboard .first { 20 | display: flex; 21 | flex-direction: row; 22 | justify-content: center; 23 | align-items: center; 24 | width: 150px; 25 | height: 43.247px; 26 | flex-shrink: 0; 27 | border-radius: 8.317px; 28 | background: #FFF; 29 | } 30 | 31 | .mainsection .content .real-content .userselectboard .first h1 { 32 | color: #000; 33 | font-family: Inter; 34 | font-size: 16.633px; 35 | font-style: normal; 36 | font-weight: 500; 37 | line-height: normal; 38 | } 39 | 40 | .mainsection .content .real-content .userselectboard .first label { 41 | width: 100px; 42 | margin-left: 7px; 43 | } 44 | 45 | .mainsection .content .real-content .userselectboard .second { 46 | display: flex; 47 | flex-direction: row; 48 | justify-content: center; 49 | align-items: center; 50 | margin-left: 20px; 51 | width: 150px; 52 | height: 43.247px; 53 | flex-shrink: 0; 54 | border-radius: 8.317px; 55 | background: #FFF; 56 | } 57 | 58 | .mainsection .content .real-content .userselectboard .second h1 { 59 | color: #000; 60 | font-family: Inter; 61 | font-size: 16.633px; 62 | font-style: normal; 63 | font-weight: 500; 64 | line-height: normal; 65 | } 66 | 67 | .mainsection .content .real-content .userselectboard .second label { 68 | width: 100px; 69 | margin-left: 7px; 70 | } 71 | 72 | .mainsection .content .real-content .userselectboard .third { 73 | display: flex; 74 | flex-direction: row; 75 | justify-content: center; 76 | align-items: center; 77 | margin-left: 20px; 78 | width: 150px; 79 | height: 43.247px; 80 | flex-shrink: 0; 81 | border-radius: 8.317px; 82 | background: #FFF; 83 | } 84 | 85 | .mainsection .content .real-content .userselectboard .third h1 { 86 | color: #000; 87 | font-family: Inter; 88 | font-size: 16.633px; 89 | font-style: normal; 90 | font-weight: 500; 91 | line-height: normal; 92 | } 93 | 94 | .mainsection .content .real-content .userselectboard .third label { 95 | width: 100px; 96 | margin-left: 7px; 97 | } 98 | 99 | .mainsection .content .real-content .userselectboard .fourth { 100 | display: flex; 101 | flex-direction: row; 102 | justify-content: center; 103 | align-items: center; 104 | margin-left: 20px; 105 | width: 150px; 106 | height: 43.247px; 107 | flex-shrink: 0; 108 | border-radius: 8.317px; 109 | background: #FFF; 110 | } 111 | 112 | .mainsection .content .real-content .userselectboard .fourth h1 { 113 | color: #000; 114 | font-family: Inter; 115 | font-size: 16.633px; 116 | font-style: normal; 117 | font-weight: 500; 118 | line-height: normal; 119 | } 120 | 121 | .mainsection .content .real-content .userselectboard .fourth label { 122 | width: 100px; 123 | margin-left: 7px; 124 | } 125 | 126 | .mainsection .content .real-content .userselectboard .fifth { 127 | display: flex; 128 | flex-direction: row; 129 | justify-content: center; 130 | align-items: center; 131 | margin-left: 20px; 132 | width: 150px; 133 | height: 43.247px; 134 | flex-shrink: 0; 135 | border-radius: 8.317px; 136 | background: #FFF; 137 | } 138 | 139 | .mainsection .content .real-content .userselectboard .fifth h1 { 140 | color: #000; 141 | font-family: Inter; 142 | font-size: 16.633px; 143 | font-style: normal; 144 | font-weight: 500; 145 | line-height: normal; 146 | } 147 | 148 | .mainsection .content .real-content .userselectboard .fifth label { 149 | width: 100px; 150 | margin-left: 7px; 151 | } 152 | 153 | .mainsection .content .real-content .items1 { 154 | margin-top: 20px; 155 | margin-left: 120px; 156 | margin-right: 100px; 157 | display: flex; 158 | flex-direction: row; 159 | justify-content: center; 160 | align-items: center; 161 | } 162 | 163 | .mainsection .content .real-content .items1 .item { 164 | display: flex; 165 | flex-direction: row; 166 | justify-content: center; 167 | align-items: center; 168 | margin-right: 20px; 169 | width: 120px; 170 | height: 32.429px; 171 | flex-shrink: 0; 172 | border-radius: 6.236px; 173 | border: 1.5px solid #8E66FF; 174 | background: #FFF; 175 | cursor: pointer; 176 | } 177 | 178 | .mainsection .content .real-content .items2 { 179 | margin-top: 10px; 180 | margin-left: 120px; 181 | margin-right: 100px; 182 | display: flex; 183 | flex-direction: row; 184 | justify-content: center; 185 | align-items: center; 186 | } 187 | 188 | .mainsection .content .real-content .items2 .item { 189 | display: flex; 190 | flex-direction: row; 191 | justify-content: center; 192 | align-items: center; 193 | margin-right: 20px; 194 | width: 120px; 195 | height: 32.429px; 196 | flex-shrink: 0; 197 | border-radius: 6.236px; 198 | border: 1.5px solid #8E66FF; 199 | background: #FFF; 200 | cursor: pointer; 201 | } 202 | 203 | 204 | 205 | 206 | .mainsection2_mobile { 207 | display: flex; 208 | flex-direction: column; 209 | justify-content: flex-start; 210 | align-items: center; 211 | 212 | } 213 | 214 | .mainsection2_mobile .content .real-content .userselect { 215 | display: flex; 216 | flex-direction: column; 217 | justify-content: flex-end; 218 | } 219 | 220 | .mainsection2_mobile .content .real-content .userselect .userselectboard { 221 | display: flex; 222 | flex-direction: column; 223 | justify-content: space-between; 224 | width: 100%; 225 | height: 200px; 226 | flex-shrink: 0; 227 | border-radius: 4px; 228 | background: linear-gradient(180deg, #8E66FF 0%, #FFB8C5 146.51%); 229 | } 230 | 231 | .mainsection2_mobile .content .real-content .userselect .userselectboard .first { 232 | margin-top: 20px; 233 | display: flex; 234 | flex-direction: row; 235 | align-items: center; 236 | margin-left: 5%; 237 | width: 90%; 238 | height: 20px; 239 | flex-shrink: 0; 240 | border-radius: 4px; 241 | background: #FFF; 242 | } 243 | 244 | .mainsection2_mobile .content .real-content .userselectboard .first h1 { 245 | margin-left: 5px; 246 | color: #000; 247 | font-family: Inter; 248 | font-size: 16px; 249 | font-style: normal; 250 | font-weight: 500; 251 | line-height: normal; 252 | } 253 | 254 | .mainsection2_mobile .content .real-content .userselectboard .first label { 255 | width: 80%; 256 | margin-left: 5px; 257 | color: #000; 258 | font-family: Inter; 259 | font-size: 16px; 260 | font-style: normal; 261 | font-weight: 500; 262 | line-height: normal; 263 | } 264 | 265 | .mainsection2_mobile .content .real-content .userselectboard .second { 266 | display: flex; 267 | flex-direction: row; 268 | align-items: center; 269 | margin-left: 5%; 270 | width: 90%; 271 | height: 20px; 272 | flex-shrink: 0; 273 | border-radius: 4px; 274 | background: #FFF; 275 | } 276 | 277 | .mainsection2_mobile .content .real-content .userselectboard .second h1 { 278 | margin-left: 5px; 279 | color: #000; 280 | font-family: Inter; 281 | font-size: 16px; 282 | font-style: normal; 283 | font-weight: 500; 284 | line-height: normal; 285 | } 286 | 287 | .mainsection2_mobile .content .real-content .userselectboard .second label { 288 | width: 80%; 289 | margin-left: 5px; 290 | color: #000; 291 | font-family: Inter; 292 | font-size: 16px; 293 | font-style: normal; 294 | font-weight: 500; 295 | line-height: normal; 296 | } 297 | 298 | .mainsection2_mobile .content .real-content .userselectboard .third { 299 | display: flex; 300 | flex-direction: row; 301 | align-items: center; 302 | margin-left: 5%; 303 | width: 90%; 304 | height: 20px; 305 | flex-shrink: 0; 306 | border-radius: 4px; 307 | background: #FFF; 308 | } 309 | 310 | .mainsection2_mobile .content .real-content .userselectboard .third h1 { 311 | margin-left: 5px; 312 | color: #000; 313 | font-family: Inter; 314 | font-size: 16px; 315 | font-style: normal; 316 | font-weight: 500; 317 | line-height: normal; 318 | } 319 | 320 | .mainsection2_mobile .content .real-content .userselectboard .third label { 321 | width: 80%; 322 | margin-left: 5px; 323 | color: #000; 324 | font-family: Inter; 325 | font-size: 16px; 326 | font-style: normal; 327 | font-weight: 500; 328 | line-height: normal; 329 | } 330 | 331 | .mainsection2_mobile .content .real-content .userselectboard .fourth { 332 | display: flex; 333 | flex-direction: row; 334 | align-items: center; 335 | margin-left: 5%; 336 | width: 90%; 337 | height: 20px; 338 | flex-shrink: 0; 339 | border-radius: 4px; 340 | background: #FFF; 341 | } 342 | 343 | .mainsection2_mobile .content .real-content .userselectboard .fourth h1 { 344 | margin-left: 5px; 345 | color: #000; 346 | font-family: Inter; 347 | font-size: 16px; 348 | font-style: normal; 349 | font-weight: 500; 350 | line-height: normal; 351 | } 352 | 353 | .mainsection2_mobile .content .real-content .userselectboard .fourth label { 354 | width: 80%; 355 | margin-left: 5px; 356 | color: #000; 357 | font-family: Inter; 358 | font-size: 16px; 359 | font-style: normal; 360 | font-weight: 500; 361 | line-height: normal; 362 | } 363 | 364 | .mainsection2_mobile .content .real-content .userselectboard .fifth { 365 | display: flex; 366 | flex-direction: row; 367 | align-items: center; 368 | margin-left: 5%; 369 | width: 90%; 370 | height: 20px; 371 | flex-shrink: 0; 372 | border-radius: 4px; 373 | background: #FFF; 374 | margin-bottom: 20px; 375 | } 376 | 377 | .mainsection2_mobile .content .real-content .userselectboard .fifth h1 { 378 | margin-left: 5px; 379 | color: #000; 380 | font-family: Inter; 381 | font-size: 16px; 382 | font-style: normal; 383 | font-weight: 500; 384 | line-height: normal; 385 | } 386 | 387 | .mainsection2_mobile .content .real-content .userselectboard .fifth label { 388 | width: 80%; 389 | margin-left: 5px; 390 | color: #000; 391 | font-family: Inter; 392 | font-size: 16px; 393 | font-style: normal; 394 | font-weight: 500; 395 | line-height: normal; 396 | } 397 | 398 | .mainsection2_mobile .content .real-content .items1 { 399 | margin-top: 30px; 400 | margin-left: 20px; 401 | margin-right: 20px; 402 | display: flex; 403 | flex-direction: row; 404 | justify-content: center; 405 | align-items: center; 406 | } 407 | 408 | .mainsection2_mobile .content .real-content .items1 .item { 409 | display: flex; 410 | flex-direction: row; 411 | justify-content: center; 412 | align-items: center; 413 | margin-right: 5px; 414 | width: 100px; 415 | height: 25px; 416 | flex-shrink: 0; 417 | border-radius: 6.236px; 418 | border: 1.5px solid #8E66FF; 419 | background: #FFF; 420 | cursor: pointer; 421 | } 422 | 423 | .mainsection2_mobile .content .real-content .items2 { 424 | margin-top: 5px; 425 | margin-left: 20px; 426 | margin-right: 20px; 427 | display: flex; 428 | flex-direction: row; 429 | justify-content: center; 430 | align-items: center; 431 | } 432 | 433 | .mainsection2_mobile .content .real-content .items2 .item { 434 | display: flex; 435 | flex-direction: row; 436 | justify-content: center; 437 | align-items: center; 438 | margin-right: 5px; 439 | width: 100px; 440 | height: 25px; 441 | flex-shrink: 0; 442 | border-radius: 6.236px; 443 | border: 1.5px solid #8E66FF; 444 | background: #FFF; 445 | cursor: pointer; 446 | } 447 | 448 | .mainsection2_mobile .content .real-content .items3 { 449 | margin-top: 5px; 450 | margin-left: 20px; 451 | margin-right: 20px; 452 | display: flex; 453 | flex-direction: row; 454 | justify-content: center; 455 | align-items: center; 456 | } 457 | 458 | .mainsection2_mobile .content .real-content .items3 .item { 459 | display: flex; 460 | flex-direction: row; 461 | justify-content: center; 462 | align-items: center; 463 | margin-right: 5px; 464 | width: 100px; 465 | height: 25px; 466 | flex-shrink: 0; 467 | border-radius: 6.236px; 468 | border: 1.5px solid #8E66FF; 469 | background: #FFF; 470 | cursor: pointer; 471 | } 472 | 473 | .mainsection2_mobile .content .real-content .items4 { 474 | margin-top: 5px; 475 | margin-left: 20px; 476 | margin-right: 20px; 477 | display: flex; 478 | flex-direction: row; 479 | justify-content: center; 480 | align-items: center; 481 | } 482 | 483 | .mainsection2_mobile .content .real-content .items4 .item { 484 | display: flex; 485 | flex-direction: row; 486 | justify-content: center; 487 | align-items: center; 488 | margin-right: 5px; 489 | width: 100px; 490 | height: 25px; 491 | flex-shrink: 0; 492 | border-radius: 6.236px; 493 | border: 1.5px solid #8E66FF; 494 | background: #FFF; 495 | cursor: pointer; 496 | } 497 | 498 | .selectedItem { 499 | display: flex; 500 | flex-direction: row; 501 | align-items: center; 502 | justify-content: center; 503 | margin-right: 5px; 504 | width: 100px; 505 | height: 25px; 506 | flex-shrink: 0; 507 | border-radius: 4px; 508 | border: 1.5px solid #8E66FF; 509 | cursor: pointer; 510 | background-color: white; 511 | } 512 | 513 | .selectedItem1 { 514 | display: flex; 515 | flex-direction: row; 516 | align-items: center; 517 | justify-content: center; 518 | margin-right: 5px; 519 | width: 120px; 520 | height: 35px; 521 | flex-shrink: 0; 522 | border-radius: 4px; 523 | border: 1.5px solid #8E66FF; 524 | cursor: pointer; 525 | background-color: white; 526 | } 527 | 528 | .selectedItem1:hover, .selectedItem:hover { 529 | transform: scale(1.05); 530 | color: rgb(34 197 94); 531 | font-weight: 600; 532 | } 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | .mainsection2_mobile { 542 | display: flex; 543 | flex-direction: column; 544 | justify-content: flex-start; 545 | align-items: center; 546 | } 547 | 548 | .mainsection2_mobile .menu_mobile { 549 | display: flex; 550 | flex-direction: column; 551 | width: 100%; 552 | } 553 | 554 | .mainsection2_mobile .menu_mobile a { 555 | text-decoration: none; 556 | } 557 | 558 | .mainsection2_mobile .menu_mobile .menu_button { 559 | display: flex; 560 | flex-direction: row; 561 | justify-content: space-between; 562 | margin-left: 20px; 563 | margin-top: 15px; 564 | } 565 | 566 | .mainsection2_mobile .menu_mobile .menu_button img { 567 | width: 30px; 568 | height: 30px; 569 | } 570 | 571 | .mainsection2_mobile .menu_mobile .menu_button .logoitem { 572 | width: 30px; 573 | height: 30px; 574 | margin-left: 70px; 575 | } 576 | 577 | .mainsection2_mobile .menu_mobile .menu_button .logoitem img { 578 | width: 30px; 579 | height: 30px; 580 | } 581 | 582 | .mainsection2_mobile .menu_mobile .menu_button .walletinfo { 583 | display: flex; 584 | flex-direction: row; 585 | justify-content: flex-end; 586 | margin-right: 20px; 587 | } 588 | 589 | .mainsection2_mobile .menu_mobile .menu_button .walletinfo .walletaddress { 590 | display: flex; 591 | flex-direction: row; 592 | justify-content: center; 593 | align-items: center; 594 | width: 100px; 595 | height: 30px; 596 | flex-shrink: 0; 597 | border-radius: 6.149px; 598 | background: #FFF; 599 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.50); 600 | } 601 | 602 | .mainsection2_mobile .menu_mobile .menu_button .walletinfo .walletaddress img { 603 | width: 10px; 604 | height: 10px; 605 | } 606 | 607 | .mainsection2_mobile .menu_mobile .menu_button .walletinfo .walletaddress h1 { 608 | margin-left: 10px; 609 | color: #000; 610 | text-align: center; 611 | font-family: Inter; 612 | font-size: 16px; 613 | font-style: normal; 614 | font-weight: 600; 615 | line-height: normal; 616 | } 617 | 618 | .mainsection2_mobile .menu { 619 | display: flex; 620 | flex-direction: row; 621 | justify-content: space-between; 622 | background: white; 623 | margin-left: 20px; 624 | margin-right: 20px; 625 | margin-top: 20px; 626 | margin-bottom: 20px; 627 | border-radius: 5px; 628 | } 629 | 630 | .mainsection2_mobile .menu_mobile .menu .menuitems { 631 | display: flex; 632 | flex-direction: row; 633 | justify-content: center; 634 | } 635 | 636 | .mainsection2_mobile .menu_mobile .menu .menuitems .genesis_icon { 637 | display: flex; 638 | flex-direction: row; 639 | margin-left: 10px; 640 | align-items: center; 641 | } 642 | 643 | .mainsection2_mobile .menu_mobile .menu .menuitems .genesis_icon img { 644 | width: 7px; 645 | height: 7px; 646 | margin-left: 5px; 647 | margin-top: 0px; 648 | } 649 | 650 | .mainsection2_mobile .menu_mobile .menu .menuitems .genesis_icon h1 { 651 | flex-shrink: 0; 652 | color: #888; 653 | font-family: Inter; 654 | font-size: 12px; 655 | font-style: normal; 656 | font-weight: 600; 657 | line-height: normal; 658 | margin-left: 5px; 659 | } 660 | 661 | .mainsection2_mobile .menu_mobile .menu .menuitems .dao_icon { 662 | display: flex; 663 | flex-direction: row; 664 | margin-left: 5px; 665 | align-items: center; 666 | } 667 | 668 | .mainsection2_mobile .menu_mobile .menu .menuitems .dao_icon img { 669 | width: 7px; 670 | height: 7px; 671 | margin-left: 5px; 672 | margin-top: 0px; 673 | } 674 | 675 | .mainsection2_mobile .menu_mobile .menu .menuitems .dao_icon h1 { 676 | flex-shrink: 0; 677 | color: #888; 678 | font-family: Inter; 679 | font-size: 12px; 680 | font-style: normal; 681 | font-weight: 600; 682 | line-height: normal; 683 | margin-left: 10px; 684 | } 685 | 686 | .mainsection2_mobile .menu_mobile .menu .menuitems .airdrop_icon { 687 | display: flex; 688 | flex-direction: row; 689 | margin-left: 5px; 690 | align-items: center; 691 | } 692 | 693 | .mainsection2_mobile .menu_mobile .menu .menuitems .airdrop_icon img { 694 | width: 7px; 695 | height: 7px; 696 | margin-left: 5px; 697 | margin-top: 0px; 698 | } 699 | 700 | .mainsection2_mobile .menu_mobile .menu .menuitems .airdrop_icon h1 { 701 | flex-shrink: 0; 702 | color: #888; 703 | font-family: Inter; 704 | font-size: 12px; 705 | font-style: normal; 706 | font-weight: 600; 707 | line-height: normal; 708 | margin-left: 10px; 709 | } 710 | 711 | 712 | .mainsection2_mobile .menu_mobile .menu .social_icon { 713 | display: flex; 714 | flex-direction: row; 715 | justify-content: center; 716 | align-items: center; 717 | width: 30%; 718 | } 719 | 720 | .mainsection2_mobile .menu .social_icon a { 721 | margin-right: 20px; 722 | width: 20px; 723 | cursor: pointer; 724 | } 725 | 726 | .mainsection2_mobile .menu .social_icon img { 727 | width: 20px; 728 | margin-right: 10px; 729 | cursor: pointer; 730 | } 731 | 732 | 733 | 734 | 735 | 736 | .mainsection2_mobile .content { 737 | display: flex; 738 | flex-direction: column; 739 | width: 90%; 740 | position: relative; 741 | } 742 | 743 | .mainsection2_mobile .content .title { 744 | display: flex; 745 | flex-direction: row; 746 | justify-content: center; 747 | } 748 | 749 | .mainsection2_mobile .content .title h1 { 750 | margin-left: 10%; 751 | width: 80%; 752 | color: #000; 753 | font-family: Inter; 754 | font-size: 28px; 755 | font-style: normal; 756 | font-weight: 600; 757 | line-height: normal; 758 | margin-left: 0px; 759 | } 760 | 761 | .mainsection2_mobile .content .description { 762 | display: flex; 763 | flex-direction: row; 764 | justify-content: center; 765 | } 766 | 767 | .mainsection2_mobile .content .description h1 { 768 | margin-left: 10%; 769 | width: 80%; 770 | color: #000; 771 | font-family: Regular; 772 | font-size: 18px; 773 | font-style: normal; 774 | font-weight: 400; 775 | line-height: normal; 776 | margin-left: 0px; 777 | } 778 | 779 | .mainsection2_mobile .content .description a { 780 | text-decoration: underline; 781 | } 782 | 783 | .mainsection2_mobile .content .buttoncontent { 784 | display: flex; 785 | flex-direction: row; 786 | justify-content: center; 787 | align-items: center; 788 | } 789 | 790 | .mainsection2_mobile .content .buttoncontent button { 791 | display: flex; 792 | flex-direction: row; 793 | justify-content: center; 794 | align-items: center; 795 | border-radius: 7px; 796 | background: #222; 797 | width: 100px; 798 | height: 40px; 799 | flex-shrink: 0; 800 | border: none; 801 | box-shadow: 0px 5.2063493728637695px 5.2063493728637695px 1.3015873432159424px rgba(0, 0, 0, 0.50); 802 | margin-top: 20px; 803 | margin-bottom: 20px; 804 | cursor: pointer; 805 | } 806 | 807 | .mainsection2_mobile .content .buttoncontent button h1 { 808 | color: #FFF; 809 | text-align: center; 810 | font-family: Inter; 811 | font-size: 20px; 812 | font-style: normal; 813 | font-weight: 600; 814 | line-height: normal; 815 | } -------------------------------------------------------------------------------- /src/components/result/result.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | background: linear-gradient(180deg, #FFB366 0%, #FFB8C5 100%); 3 | position: relative; 4 | margin: 0; 5 | } 6 | 7 | @font-face { 8 | font-family: "Inter"; 9 | src: url("../../assets/Inter-SemiBold.ttf"); 10 | } 11 | 12 | @font-face { 13 | font-family: "Regular"; 14 | src: url("../../assets/Inter-Light.ttf"); 15 | } 16 | 17 | .mainsection2 { 18 | display: flex; 19 | flex-direction: row; 20 | justify-content: left; 21 | min-height: 100vh; 22 | } 23 | 24 | .mainsection2 .menu { 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: space-between; 28 | background: white; 29 | width: 20%; 30 | margin-left: 20px; 31 | margin-top: 20px; 32 | margin-bottom: 20px; 33 | border-radius: 5px; 34 | } 35 | 36 | .mainsection2 .menu a { 37 | text-decoration: none; 38 | } 39 | 40 | .mainsection2 .menu img { 41 | margin-top: 30px; 42 | margin-left: 10%; 43 | width: 80%; 44 | } 45 | 46 | .mainsection2 .menu .logoitem { 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: space-between; 50 | } 51 | 52 | .mainsection2 .menu .logoitem .menuitems { 53 | display: flex; 54 | flex-direction: column; 55 | justify-content: space-between; 56 | margin-top: 70px; 57 | } 58 | 59 | .mainsection2 .menu .logoitem .menuitems .genesis_icon { 60 | display: flex; 61 | flex-direction: row; 62 | width: 80%; 63 | margin-left: 10%; 64 | align-items: center; 65 | } 66 | 67 | .mainsection2 .menu .logoitem .menuitems .genesis_icon img { 68 | width: 20px; 69 | height: 20px; 70 | margin-left: 13px; 71 | margin-top: 0px; 72 | } 73 | 74 | .mainsection2 .menu .logoitem .menuitems .genesis_icon h1 { 75 | width: 150px; 76 | flex-shrink: 0; 77 | color: #000; 78 | font-family: Inter; 79 | font-size: 28px; 80 | font-style: normal; 81 | font-weight: 600; 82 | line-height: normal; 83 | margin-left: 20px; 84 | } 85 | 86 | .mainsection2 .menu .logoitem .menuitems .dao_icon { 87 | display: flex; 88 | flex-direction: row; 89 | width: 80%; 90 | margin-left: 10%; 91 | align-items: center; 92 | } 93 | 94 | .mainsection2 .menu .logoitem .menuitems .dao_icon h1 { 95 | width: 150px; 96 | flex-shrink: 0; 97 | color: #888; 98 | font-family: Inter; 99 | font-size: 28px; 100 | font-style: normal; 101 | font-weight: 600; 102 | line-height: normal; 103 | margin-left: 20px; 104 | } 105 | 106 | .mainsection2 .menu .logoitem .menuitems .dao_icon img { 107 | width: 20px; 108 | height: 20px; 109 | margin-left: 13px; 110 | margin-top: 0px; 111 | } 112 | 113 | .mainsection2 .menu .logoitem .menuitems .airdrop_icon { 114 | display: flex; 115 | flex-direction: row; 116 | width: 80%; 117 | margin-left: 10%; 118 | align-items: center; 119 | } 120 | 121 | .mainsection2 .menu .logoitem .menuitems .airdrop_icon img { 122 | width: 20px; 123 | height: 20px; 124 | margin-left: 13px; 125 | margin-top: 0px; 126 | } 127 | 128 | .mainsection2 .menu .logoitem .menuitems .airdrop_icon h1 { 129 | width: 150px; 130 | flex-shrink: 0; 131 | color: #888; 132 | font-family: Inter; 133 | font-size: 28px; 134 | font-style: normal; 135 | font-weight: 600; 136 | line-height: normal; 137 | margin-left: 20px; 138 | } 139 | 140 | .mainsection2 .menu .social_icon { 141 | display: flex; 142 | flex-direction: row; 143 | justify-content: center; 144 | margin-left: 37%; 145 | width: 30%; 146 | margin-bottom: 20px; 147 | } 148 | 149 | .mainsection2 .menu .social_icon a { 150 | margin-right: 30px; 151 | width: 20px; 152 | cursor: pointer; 153 | } 154 | 155 | .mainsection2 .menu .social_icon img { 156 | width: 28px; 157 | margin-right: 20px; 158 | cursor: pointer; 159 | } 160 | 161 | .mainsection2 .content { 162 | display: flex; 163 | flex-direction: column; 164 | justify-content: space-between; 165 | margin-top: 20px; 166 | width: 80%; 167 | position: relative; 168 | } 169 | 170 | .mainsection2 .content .real-content .walletinfo { 171 | display: flex; 172 | flex-direction: row; 173 | justify-content: flex-end; 174 | margin-right: 20px; 175 | } 176 | 177 | .mainsection2 .content .real-content .walletinfo .walletaddress { 178 | display: flex; 179 | flex-direction: row; 180 | justify-content: center; 181 | align-items: center; 182 | width: 143.27px; 183 | height: 38.738px; 184 | flex-shrink: 0; 185 | border-radius: 6.149px; 186 | background: #FFF; 187 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.50); 188 | } 189 | 190 | .mainsection2 .content .real-content .walletinfo .walletaddress img { 191 | width: 10px; 192 | height: 10px; 193 | } 194 | 195 | .mainsection2 .content .real-content .walletinfo .walletaddress h1 { 196 | margin-left: 10px; 197 | color: #000; 198 | text-align: center; 199 | font-family: Inter; 200 | font-size: 24px; 201 | font-style: normal; 202 | font-weight: 600; 203 | line-height: normal; 204 | } 205 | 206 | .mainsection2 .content .real-content .mainlogo { 207 | display: flex; 208 | flex-direction: row; 209 | justify-content: center; 210 | flex-shrink: 0; 211 | margin-top: 20px; 212 | } 213 | 214 | .mainsection2 .content .mainlogo img { 215 | width: 100px; 216 | height: 80px; 217 | } 218 | 219 | .mainsection2 .content .title { 220 | display: flex; 221 | flex-direction: row; 222 | justify-content: center; 223 | align-items: center; 224 | } 225 | 226 | .mainsection2 .content .title h1 { 227 | display: flex; 228 | flex-direction: row; 229 | justify-content: center; 230 | color: #000; 231 | font-family: Inter; 232 | font-size: 38px; 233 | font-style: normal; 234 | font-weight: 600; 235 | line-height: normal; 236 | } 237 | 238 | .mainsection2 .content .description { 239 | display: flex; 240 | flex-direction: row; 241 | justify-content: center; 242 | } 243 | 244 | .description h1 { 245 | width: 793px; 246 | flex-shrink: 0; 247 | color: #000; 248 | font-family: Regular; 249 | font-size: 18px; 250 | font-style: normal; 251 | font-weight: 400; 252 | line-height: normal; 253 | } 254 | 255 | .mainsection2 .content .options { 256 | display: flex; 257 | flex-direction: row; 258 | justify-content: center; 259 | margin-bottom: 7px; 260 | } 261 | 262 | .options .option { 263 | display: flex; 264 | flex-direction: row; 265 | justify-content: space-between; 266 | align-items: center; 267 | width: 400px; 268 | height: 35px; 269 | flex-shrink: 0; 270 | border-radius: 10px; 271 | border: 1px solid #68C0FF; 272 | background: #FFF; 273 | margin-right: 10px; 274 | } 275 | 276 | .option h1 { 277 | margin-left: 10px; 278 | color: #000; 279 | font-family: Inter; 280 | font-size: 13px; 281 | font-style: normal; 282 | font-weight: 500; 283 | line-height: normal; 284 | } 285 | 286 | .option h2 { 287 | color: #000; 288 | font-family: Inter; 289 | font-size: 13px; 290 | font-style: normal; 291 | font-weight: 500; 292 | line-height: normal; 293 | } 294 | 295 | .option .checkbuttons { 296 | margin-right: 5px; 297 | display: flex; 298 | flex-direction: row; 299 | justify-content: flex-end; 300 | align-items: center; 301 | } 302 | 303 | .checkbuttons img { 304 | width: 24px; 305 | height: 24px; 306 | flex-shrink: 0; 307 | } 308 | 309 | .mainsection2 .content .timelabel { 310 | display: flex; 311 | flex-direction: row; 312 | justify-content: center; 313 | align-items: center; 314 | } 315 | 316 | .timelabel h1 { 317 | margin-top: 20px; 318 | display: flex; 319 | width: 172px; 320 | height: 30px; 321 | flex-direction: column; 322 | justify-content: center; 323 | flex-shrink: 0; 324 | color: #000; 325 | text-align: center; 326 | font-family: Regular; 327 | font-size: 20px; 328 | font-style: normal; 329 | font-weight: 500; 330 | line-height: normal; 331 | } 332 | 333 | .mainsection2 .content .timedialog { 334 | display: flex; 335 | flex-direction: row; 336 | justify-content: center; 337 | align-items: center; 338 | } 339 | 340 | .timedialog .timedialogdisplay { 341 | display: flex; 342 | flex-direction: row; 343 | justify-content: center; 344 | align-items: center; 345 | width: 270px; 346 | height: 60px; 347 | flex-shrink: 0; 348 | border-radius: 10px; 349 | background: #FFF; 350 | box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); 351 | margin-bottom: 20px; 352 | } 353 | 354 | .timedialogdisplay img { 355 | width: 30px; 356 | height: 30px; 357 | flex-shrink: 0; 358 | margin-right: 10px; 359 | } 360 | 361 | .timedialogdisplay h1 { 362 | display: flex; 363 | width: 200px; 364 | height: 30px; 365 | flex-direction: column; 366 | justify-content: center; 367 | flex-shrink: 0; 368 | color: #000; 369 | font-family: Inter; 370 | font-size: 20px; 371 | font-style: normal; 372 | font-weight: 400; 373 | line-height: normal; 374 | } 375 | 376 | .mainsection2 .content .real-content .userselect { 377 | display: flex; 378 | flex-direction: row; 379 | justify-content: center; 380 | margin-bottom: 20px; 381 | } 382 | 383 | .mainsection2 .content .real-content .userselect .userselectboard { 384 | display: flex; 385 | flex-direction: row; 386 | justify-content: center; 387 | align-items: center; 388 | width: 870px; 389 | height: 88px; 390 | flex-shrink: 0; 391 | border-radius: 8.317px; 392 | background: linear-gradient(180deg, #8E66FF 0%, #FFB8C5 146.51%); 393 | } 394 | 395 | .mainsection2 .content .real-content .userselectboard .first { 396 | display: flex; 397 | flex-direction: row; 398 | justify-content: center; 399 | align-items: center; 400 | width: 150px; 401 | height: 43.247px; 402 | flex-shrink: 0; 403 | border-radius: 8.317px; 404 | background: #FFF; 405 | } 406 | 407 | .mainsection2 .content .real-content .userselectboard .first h1 { 408 | color: #000; 409 | font-family: Inter; 410 | font-size: 16.633px; 411 | font-style: normal; 412 | font-weight: 500; 413 | line-height: normal; 414 | } 415 | 416 | .mainsection2 .content .real-content .userselectboard .first label { 417 | width: 100px; 418 | margin-left: 7px; 419 | } 420 | 421 | .mainsection2 .content .real-content .userselectboard .second { 422 | display: flex; 423 | flex-direction: row; 424 | justify-content: center; 425 | align-items: center; 426 | margin-left: 20px; 427 | width: 150px; 428 | height: 43.247px; 429 | flex-shrink: 0; 430 | border-radius: 8.317px; 431 | background: #FFF; 432 | } 433 | 434 | .mainsection2 .content .real-content .userselectboard .second h1 { 435 | color: #000; 436 | font-family: Inter; 437 | font-size: 16.633px; 438 | font-style: normal; 439 | font-weight: 500; 440 | line-height: normal; 441 | } 442 | 443 | .mainsection2 .content .real-content .userselectboard .second label { 444 | width: 100px; 445 | margin-left: 7px; 446 | } 447 | 448 | .mainsection2 .content .real-content .userselectboard .third { 449 | display: flex; 450 | flex-direction: row; 451 | justify-content: center; 452 | align-items: center; 453 | margin-left: 20px; 454 | width: 150px; 455 | height: 43.247px; 456 | flex-shrink: 0; 457 | border-radius: 8.317px; 458 | background: #FFF; 459 | } 460 | 461 | .mainsection2 .content .real-content .userselectboard .third h1 { 462 | color: #000; 463 | font-family: Inter; 464 | font-size: 16.633px; 465 | font-style: normal; 466 | font-weight: 500; 467 | line-height: normal; 468 | } 469 | 470 | .mainsection2 .content .real-content .userselectboard .third label { 471 | width: 100px; 472 | margin-left: 7px; 473 | } 474 | 475 | .mainsection2 .content .real-content .userselectboard .fourth { 476 | display: flex; 477 | flex-direction: row; 478 | justify-content: center; 479 | align-items: center; 480 | margin-left: 20px; 481 | width: 150px; 482 | height: 43.247px; 483 | flex-shrink: 0; 484 | border-radius: 8.317px; 485 | background: #FFF; 486 | } 487 | 488 | .mainsection2 .content .real-content .userselectboard .fourth h1 { 489 | color: #000; 490 | font-family: Inter; 491 | font-size: 16.633px; 492 | font-style: normal; 493 | font-weight: 500; 494 | line-height: normal; 495 | } 496 | 497 | .mainsection2 .content .real-content .userselectboard .fourth label { 498 | width: 100px; 499 | margin-left: 7px; 500 | } 501 | 502 | .mainsection2 .content .real-content .userselectboard .fifth { 503 | display: flex; 504 | flex-direction: row; 505 | justify-content: center; 506 | align-items: center; 507 | margin-left: 20px; 508 | width: 150px; 509 | height: 43.247px; 510 | flex-shrink: 0; 511 | border-radius: 8.317px; 512 | background: #FFF; 513 | } 514 | 515 | .mainsection2 .content .real-content .userselectboard .fifth h1 { 516 | color: #000; 517 | font-family: Inter; 518 | font-size: 16.633px; 519 | font-style: normal; 520 | font-weight: 500; 521 | line-height: normal; 522 | } 523 | 524 | .mainsection2 .content .real-content .userselectboard .fifth label { 525 | width: 100px; 526 | margin-left: 7px; 527 | } 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | .mainsection1_mobile { 538 | display: flex; 539 | flex-direction: column; 540 | justify-content: flex-start; 541 | align-items: center; 542 | } 543 | 544 | .mainsection1_mobile .menu_mobile { 545 | display: flex; 546 | flex-direction: column; 547 | width: 100%; 548 | } 549 | 550 | .mainsection1_mobile .menu_mobile a { 551 | text-decoration: none; 552 | } 553 | 554 | .mainsection1_mobile .menu_mobile .menu_button { 555 | display: flex; 556 | flex-direction: row; 557 | justify-content: space-between; 558 | margin-left: 20px; 559 | margin-top: 15px; 560 | } 561 | 562 | .mainsection1_mobile .menu_mobile .menu_button img { 563 | width: 30px; 564 | height: 30px; 565 | } 566 | 567 | .mainsection1_mobile .menu_mobile .menu_button .logoitem { 568 | width: 30px; 569 | height: 30px; 570 | margin-left: 70px; 571 | } 572 | 573 | .mainsection1_mobile .menu_mobile .menu_button .logoitem img { 574 | width: 30px; 575 | height: 30px; 576 | } 577 | 578 | .mainsection1_mobile .menu_mobile .menu_button .walletinfo { 579 | display: flex; 580 | flex-direction: row; 581 | justify-content: flex-end; 582 | margin-right: 20px; 583 | } 584 | 585 | .mainsection1_mobile .menu_mobile .menu_button .walletinfo .walletaddress { 586 | display: flex; 587 | flex-direction: row; 588 | justify-content: center; 589 | align-items: center; 590 | width: 100px; 591 | height: 30px; 592 | flex-shrink: 0; 593 | border-radius: 6.149px; 594 | background: #FFF; 595 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.50); 596 | } 597 | 598 | .mainsection1_mobile .menu_mobile .menu_button .walletinfo .walletaddress img { 599 | width: 10px; 600 | height: 10px; 601 | } 602 | 603 | .mainsection1_mobile .menu_mobile .menu_button .walletinfo .walletaddress h1 { 604 | margin-left: 10px; 605 | color: #000; 606 | text-align: center; 607 | font-family: Inter; 608 | font-size: 16px; 609 | font-style: normal; 610 | font-weight: 600; 611 | line-height: normal; 612 | } 613 | 614 | .mainsection1_mobile .menu { 615 | display: flex; 616 | flex-direction: row; 617 | justify-content: space-between; 618 | background: white; 619 | margin-left: 20px; 620 | margin-right: 20px; 621 | margin-top: 20px; 622 | margin-bottom: 20px; 623 | border-radius: 5px; 624 | } 625 | 626 | .mainsection1_mobile .menu_mobile .menu .menuitems { 627 | display: flex; 628 | flex-direction: row; 629 | justify-content: center; 630 | } 631 | 632 | .mainsection1_mobile .menu_mobile .menu .menuitems .genesis_icon { 633 | display: flex; 634 | flex-direction: row; 635 | margin-left: 10px; 636 | align-items: center; 637 | } 638 | 639 | .mainsection1_mobile .menu_mobile .menu .menuitems .genesis_icon img { 640 | width: 7px; 641 | height: 7px; 642 | margin-left: 5px; 643 | margin-top: 0px; 644 | } 645 | 646 | .mainsection1_mobile .menu_mobile .menu .menuitems .genesis_icon h1 { 647 | flex-shrink: 0; 648 | color: #888; 649 | font-family: Inter; 650 | font-size: 12px; 651 | font-style: normal; 652 | font-weight: 600; 653 | line-height: normal; 654 | margin-left: 5px; 655 | } 656 | 657 | .mainsection1_mobile .menu_mobile .menu .menuitems .dao_icon { 658 | display: flex; 659 | flex-direction: row; 660 | margin-left: 5px; 661 | align-items: center; 662 | } 663 | 664 | .mainsection1_mobile .menu_mobile .menu .menuitems .dao_icon img { 665 | width: 7px; 666 | height: 7px; 667 | margin-left: 5px; 668 | margin-top: 0px; 669 | } 670 | 671 | .mainsection1_mobile .menu_mobile .menu .menuitems .dao_icon h1 { 672 | flex-shrink: 0; 673 | color: #888; 674 | font-family: Inter; 675 | font-size: 12px; 676 | font-style: normal; 677 | font-weight: 600; 678 | line-height: normal; 679 | margin-left: 10px; 680 | } 681 | 682 | .mainsection1_mobile .menu_mobile .menu .menuitems .airdrop_icon { 683 | display: flex; 684 | flex-direction: row; 685 | margin-left: 5px; 686 | align-items: center; 687 | } 688 | 689 | .mainsection1_mobile .menu_mobile .menu .menuitems .airdrop_icon img { 690 | width: 7px; 691 | height: 7px; 692 | margin-left: 5px; 693 | margin-top: 0px; 694 | } 695 | 696 | .mainsection1_mobile .menu_mobile .menu .menuitems .airdrop_icon h1 { 697 | flex-shrink: 0; 698 | color: #888; 699 | font-family: Inter; 700 | font-size: 12px; 701 | font-style: normal; 702 | font-weight: 600; 703 | line-height: normal; 704 | margin-left: 10px; 705 | } 706 | 707 | 708 | .mainsection1_mobile .menu_mobile .menu .social_icon { 709 | display: flex; 710 | flex-direction: row; 711 | justify-content: center; 712 | align-items: center; 713 | width: 30%; 714 | } 715 | 716 | .mainsection1_mobile .menu .social_icon a { 717 | margin-right: 20px; 718 | width: 20px; 719 | cursor: pointer; 720 | } 721 | 722 | .mainsection1_mobile .menu .social_icon img { 723 | width: 20px; 724 | margin-right: 10px; 725 | cursor: pointer; 726 | } 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | .mainsection1_mobile .content .timelabel { 742 | display: flex; 743 | flex-direction: row; 744 | justify-content: center; 745 | align-items: center; 746 | } 747 | 748 | .mainsection1_mobile .content .timelabel h1 { 749 | margin-top: 20px; 750 | display: flex; 751 | width: 172px; 752 | height: 30px; 753 | flex-direction: column; 754 | justify-content: center; 755 | flex-shrink: 0; 756 | color: #000; 757 | text-align: center; 758 | font-family: Regular; 759 | font-size: 20px; 760 | font-style: normal; 761 | font-weight: 500; 762 | line-height: normal; 763 | } 764 | 765 | .mainsection1_mobile .content .timedialog { 766 | display: flex; 767 | flex-direction: row; 768 | justify-content: center; 769 | align-items: center; 770 | } 771 | 772 | .mainsection1_mobile .content .timedialog .timedialogdisplay { 773 | display: flex; 774 | flex-direction: row; 775 | justify-content: center; 776 | align-items: center; 777 | width: 270px; 778 | height: 60px; 779 | flex-shrink: 0; 780 | border-radius: 10px; 781 | background: #FFF; 782 | box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); 783 | margin-bottom: 20px; 784 | } 785 | 786 | .mainsection1_mobile .content .timedialogdisplay img { 787 | width: 30px; 788 | height: 30px; 789 | flex-shrink: 0; 790 | margin-right: 10px; 791 | } 792 | 793 | .mainsection1_mobile .content .timedialogdisplay h1 { 794 | display: flex; 795 | width: 200px; 796 | height: 30px; 797 | flex-direction: column; 798 | justify-content: center; 799 | flex-shrink: 0; 800 | color: #000; 801 | font-family: Inter; 802 | font-size: 20px; 803 | font-style: normal; 804 | font-weight: 400; 805 | line-height: normal; 806 | } 807 | 808 | 809 | .mainsection1_mobile .content { 810 | display: flex; 811 | flex-direction: column; 812 | width: 90%; 813 | position: relative; 814 | } 815 | 816 | .mainsection1_mobile .content .title { 817 | display: flex; 818 | flex-direction: row; 819 | justify-content: center; 820 | } 821 | 822 | .mainsection1_mobile .content .title h1 { 823 | margin-left: 10%; 824 | width: 80%; 825 | color: #000; 826 | font-family: Inter; 827 | font-size: 28px; 828 | font-style: normal; 829 | font-weight: 600; 830 | line-height: normal; 831 | margin-left: 0px; 832 | } 833 | 834 | .mainsection1_mobile .content .description { 835 | display: flex; 836 | flex-direction: row; 837 | justify-content: center; 838 | } 839 | 840 | .mainsection1_mobile .content .description h1 { 841 | margin-left: 10%; 842 | width: 80%; 843 | color: #000; 844 | font-family: Regular; 845 | font-size: 18px; 846 | font-style: normal; 847 | font-weight: 400; 848 | line-height: normal; 849 | margin-left: 0px; 850 | } 851 | 852 | .mainsection1_mobile .content .description a { 853 | text-decoration: underline; 854 | } 855 | 856 | .mainsection1_mobile .content .buttoncontent { 857 | display: flex; 858 | flex-direction: row; 859 | justify-content: center; 860 | align-items: center; 861 | } 862 | 863 | .mainsection1_mobile .content .buttoncontent button { 864 | display: flex; 865 | flex-direction: row; 866 | justify-content: center; 867 | align-items: center; 868 | border-radius: 7px; 869 | background: #222; 870 | width: 100px; 871 | height: 40px; 872 | flex-shrink: 0; 873 | border: none; 874 | box-shadow: 0px 5.2063493728637695px 5.2063493728637695px 1.3015873432159424px rgba(0, 0, 0, 0.50); 875 | margin-top: 20px; 876 | margin-bottom: 20px; 877 | cursor: pointer; 878 | } 879 | 880 | .mainsection1_mobile .content .buttoncontent button h1 { 881 | color: #FFF; 882 | text-align: center; 883 | font-family: Inter; 884 | font-size: 20px; 885 | font-style: normal; 886 | font-weight: 600; 887 | line-height: normal; 888 | } 889 | 890 | 891 | 892 | 893 | 894 | 895 | .mainsection1_mobile .content .real-content .userselect { 896 | display: flex; 897 | flex-direction: column; 898 | justify-content: flex-end; 899 | } 900 | 901 | .mainsection1_mobile .content .real-content .userselect .userselectboard { 902 | display: flex; 903 | flex-direction: column; 904 | justify-content: space-between; 905 | width: 100%; 906 | height: 200px; 907 | flex-shrink: 0; 908 | border-radius: 4px; 909 | background: linear-gradient(180deg, #8E66FF 0%, #FFB8C5 146.51%); 910 | } 911 | 912 | .mainsection1_mobile .content .real-content .userselect .userselectboard .first { 913 | margin-top: 20px; 914 | display: flex; 915 | flex-direction: row; 916 | align-items: center; 917 | margin-left: 5%; 918 | width: 90%; 919 | height: 20px; 920 | flex-shrink: 0; 921 | border-radius: 4px; 922 | background: #FFF; 923 | } 924 | 925 | .mainsection1_mobile .content .real-content .userselectboard .first h1 { 926 | margin-left: 5px; 927 | color: #000; 928 | font-family: Inter; 929 | font-size: 16px; 930 | font-style: normal; 931 | font-weight: 500; 932 | line-height: normal; 933 | } 934 | 935 | .mainsection1_mobile .content .real-content .userselectboard .first label { 936 | width: 80%; 937 | margin-left: 5px; 938 | color: #000; 939 | font-family: Inter; 940 | font-size: 16px; 941 | font-style: normal; 942 | font-weight: 500; 943 | line-height: normal; 944 | } 945 | 946 | .mainsection1_mobile .content .real-content .userselectboard .second { 947 | display: flex; 948 | flex-direction: row; 949 | align-items: center; 950 | margin-left: 5%; 951 | width: 90%; 952 | height: 20px; 953 | flex-shrink: 0; 954 | border-radius: 4px; 955 | background: #FFF; 956 | } 957 | 958 | .mainsection1_mobile .content .real-content .userselectboard .second h1 { 959 | margin-left: 5px; 960 | color: #000; 961 | font-family: Inter; 962 | font-size: 16px; 963 | font-style: normal; 964 | font-weight: 500; 965 | line-height: normal; 966 | } 967 | 968 | .mainsection1_mobile .content .real-content .userselectboard .second label { 969 | width: 80%; 970 | margin-left: 5px; 971 | color: #000; 972 | font-family: Inter; 973 | font-size: 16px; 974 | font-style: normal; 975 | font-weight: 500; 976 | line-height: normal; 977 | } 978 | 979 | .mainsection1_mobile .content .real-content .userselectboard .third { 980 | display: flex; 981 | flex-direction: row; 982 | align-items: center; 983 | margin-left: 5%; 984 | width: 90%; 985 | height: 20px; 986 | flex-shrink: 0; 987 | border-radius: 4px; 988 | background: #FFF; 989 | } 990 | 991 | .mainsection1_mobile .content .real-content .userselectboard .third h1 { 992 | margin-left: 5px; 993 | color: #000; 994 | font-family: Inter; 995 | font-size: 16px; 996 | font-style: normal; 997 | font-weight: 500; 998 | line-height: normal; 999 | } 1000 | 1001 | .mainsection1_mobile .content .real-content .userselectboard .third label { 1002 | width: 80%; 1003 | margin-left: 5px; 1004 | color: #000; 1005 | font-family: Inter; 1006 | font-size: 16px; 1007 | font-style: normal; 1008 | font-weight: 500; 1009 | line-height: normal; 1010 | } 1011 | 1012 | .mainsection1_mobile .content .real-content .userselectboard .fourth { 1013 | display: flex; 1014 | flex-direction: row; 1015 | align-items: center; 1016 | margin-left: 5%; 1017 | width: 90%; 1018 | height: 20px; 1019 | flex-shrink: 0; 1020 | border-radius: 4px; 1021 | background: #FFF; 1022 | } 1023 | 1024 | .mainsection1_mobile .content .real-content .userselectboard .fourth h1 { 1025 | margin-left: 5px; 1026 | color: #000; 1027 | font-family: Inter; 1028 | font-size: 16px; 1029 | font-style: normal; 1030 | font-weight: 500; 1031 | line-height: normal; 1032 | } 1033 | 1034 | .mainsection1_mobile .content .real-content .userselectboard .fourth label { 1035 | width: 80%; 1036 | margin-left: 5px; 1037 | color: #000; 1038 | font-family: Inter; 1039 | font-size: 16px; 1040 | font-style: normal; 1041 | font-weight: 500; 1042 | line-height: normal; 1043 | } 1044 | 1045 | .mainsection1_mobile .content .real-content .userselectboard .fifth { 1046 | display: flex; 1047 | flex-direction: row; 1048 | align-items: center; 1049 | margin-left: 5%; 1050 | width: 90%; 1051 | height: 20px; 1052 | flex-shrink: 0; 1053 | border-radius: 4px; 1054 | background: #FFF; 1055 | margin-bottom: 20px; 1056 | } 1057 | 1058 | .mainsection1_mobile .content .real-content .userselectboard .fifth h1 { 1059 | margin-left: 5px; 1060 | color: #000; 1061 | font-family: Inter; 1062 | font-size: 16px; 1063 | font-style: normal; 1064 | font-weight: 500; 1065 | line-height: normal; 1066 | } 1067 | 1068 | .mainsection1_mobile .content .real-content .userselectboard .fifth label { 1069 | width: 80%; 1070 | margin-left: 5px; 1071 | color: #000; 1072 | font-family: Inter; 1073 | font-size: 16px; 1074 | font-style: normal; 1075 | font-weight: 500; 1076 | line-height: normal; 1077 | } 1078 | 1079 | .mainsection1_mobile .content .real-content .options { 1080 | margin-left: 10px; 1081 | display: flex; 1082 | flex-direction: row; 1083 | justify-content: center; 1084 | margin-bottom: 7px; 1085 | } 1086 | 1087 | .mainsection1_mobile .content .real-content .options .option { 1088 | display: flex; 1089 | flex-direction: row; 1090 | justify-content: space-between; 1091 | align-items: center; 1092 | width: 100%; 1093 | height: 30px; 1094 | flex-shrink: 0; 1095 | border-radius: 5px; 1096 | border: 1px solid #68C0FF; 1097 | background: #FFF; 1098 | } 1099 | 1100 | .mainsection1_mobile .content .real-content .options .option h1 { 1101 | margin-left: 10px; 1102 | color: #000; 1103 | font-family: Inter; 1104 | font-size: 10px; 1105 | font-style: normal; 1106 | font-weight: 500; 1107 | line-height: normal; 1108 | } 1109 | 1110 | .mainsection1_mobile .content .real-content .options .option .checkbuttons { 1111 | margin-right: 5px; 1112 | display: flex; 1113 | flex-direction: row; 1114 | justify-content: flex-end; 1115 | align-items: center; 1116 | } 1117 | 1118 | .mainsection1_mobile .content .real-content .options .option .checkbuttons img { 1119 | width: 20px; 1120 | height: 20px; 1121 | flex-shrink: 0; 1122 | cursor: pointer; 1123 | } -------------------------------------------------------------------------------- /src/components/criteria/Criteria.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from "react"; 2 | import { useMedia } from "react-use"; 3 | import { useNavigate } from "react-router-dom"; 4 | import "./criteria.css"; 5 | import WalletConnectLogo from "../../assets/WalletConnectLogo.png"; 6 | import mainlogo from "../../assets/mainlogo.png"; 7 | import genesis_icon from "../../assets/genesis_icon.png"; 8 | import airdrop_icon from "../../assets/airdrop_icon.png"; 9 | import dao_icon from "../../assets/dao_icon.png"; 10 | import vector_icon from "../../assets/vector_icon.svg"; 11 | import twitter_icon from "../../assets/twitter_icon.svg"; 12 | import telegram_icon from "../../assets/telegram_icon.svg"; 13 | import connected_status_icon from "../../assets/connected_status.png"; 14 | import general_check from "../../assets/general_check.png"; 15 | import confirm_check from "../../assets/confirm_check.png"; 16 | import general_cross from "../../assets/general_cross.png"; 17 | import confirm_cross from "../../assets/confirm_cross.png"; 18 | import menu_button from "../../assets/menu_button.svg"; 19 | import { Link } from "react-router-dom"; 20 | import { UserContext } from "../../App"; 21 | import { connectWallet } from "../../core/interact"; 22 | import { toast } from "react-toastify"; 23 | import * as env from "../../env"; 24 | import axios from "axios"; 25 | 26 | export const Criteria = () => { 27 | const navigate = useNavigate(); 28 | const { walletAddress, SetWalletAddress } = useContext(UserContext); 29 | const { email } = useContext(UserContext); 30 | const { principle1 } = useContext(UserContext); 31 | const { principle2 } = useContext(UserContext); 32 | const { principle3 } = useContext(UserContext); 33 | const { principle4 } = useContext(UserContext); 34 | const { principle5 } = useContext(UserContext); 35 | const [item1Status, SetItem1Status] = useState(0); 36 | const [item2Status, SetItem2Status] = useState(0); 37 | const [item3Status, SetItem3Status] = useState(0); 38 | const [item4Status, SetItem4Status] = useState(0); 39 | const [item5Status, SetItem5Status] = useState(0); 40 | const [item6Status, SetItem6Status] = useState(0); 41 | const [item7Status, SetItem7Status] = useState(0); 42 | const [item8Status, SetItem8Status] = useState(0); 43 | const [isOpen, SetMenuButtonStatus] = useState(false); 44 | 45 | const [pending, setPending] = useState(false); 46 | 47 | useEffect(() => { 48 | const connectWalletPressed = async () => { 49 | const walletResponse = await connectWallet(); 50 | SetWalletAddress(walletResponse.address); 51 | }; 52 | connectWalletPressed(); 53 | }); 54 | 55 | const onCheckItem1 = () => { 56 | SetItem1Status(1); 57 | }; 58 | 59 | const onCrossItem1 = () => { 60 | SetItem1Status(2); 61 | }; 62 | 63 | const onCheckItem2 = () => { 64 | SetItem2Status(1); 65 | }; 66 | 67 | const onCrossItem2 = () => { 68 | SetItem2Status(2); 69 | }; 70 | 71 | const onCheckItem3 = () => { 72 | SetItem3Status(1); 73 | }; 74 | 75 | const onCrossItem3 = () => { 76 | SetItem3Status(2); 77 | }; 78 | 79 | const onCheckItem4 = () => { 80 | SetItem4Status(1); 81 | }; 82 | 83 | const onCrossItem4 = () => { 84 | SetItem4Status(2); 85 | }; 86 | 87 | const onCheckItem5 = () => { 88 | SetItem5Status(1); 89 | }; 90 | 91 | const onCrossItem5 = () => { 92 | SetItem5Status(2); 93 | }; 94 | 95 | const onCheckItem6 = () => { 96 | SetItem6Status(1); 97 | }; 98 | 99 | const onCrossItem6 = () => { 100 | SetItem6Status(2); 101 | }; 102 | 103 | const onCheckItem7 = () => { 104 | SetItem7Status(1); 105 | }; 106 | 107 | const onCrossItem7 = () => { 108 | SetItem7Status(2); 109 | }; 110 | 111 | const onCheckItem8 = () => { 112 | SetItem8Status(1); 113 | }; 114 | 115 | const onCrossItem8 = () => { 116 | SetItem8Status(2); 117 | }; 118 | 119 | const isVote = ["", "Yes", "No"]; 120 | 121 | const onSubmit = async () => { 122 | document.getElementById("submit").disabled = true; 123 | if ( 124 | !item1Status || 125 | !item2Status || 126 | !item3Status || 127 | !item4Status || 128 | !item5Status || 129 | !item6Status || 130 | !item7Status || 131 | !item8Status 132 | ) { 133 | toast.error("Please check all items."); 134 | return; 135 | } 136 | 137 | const data = { 138 | address: walletAddress, 139 | // email: email, 140 | principles: [principle1, principle2, principle3, principle4, principle5], 141 | criteria: { 142 | "Commercialise reputation and verification services.": 143 | isVote[item1Status], 144 | "Provide liquidity to other protocols.": isVote[item2Status], 145 | "Utilise treasury funds in yield and staking.": isVote[item3Status], 146 | "Fund bad actor detection and bounty hunting.": isVote[item4Status], 147 | "Fund development of RDAO ecosystem.": isVote[item5Status], 148 | "Actively manage DAO as an investment fund.": isVote[item6Status], 149 | "Invest in early stage protocols.": isVote[item7Status], 150 | "Invest in NFT’s.": isVote[item8Status], 151 | }, 152 | }; 153 | 154 | try { 155 | const accounts = await window.ethereum.request({ 156 | method: "eth_requestAccounts", 157 | }); 158 | 159 | setPending(true); 160 | 161 | const account = accounts[0]; 162 | 163 | const message = JSON.stringify(data); 164 | const signature = await window.ethereum.request({ 165 | method: "personal_sign", 166 | params: [message, account], 167 | }); 168 | 169 | const response = await axios.post( 170 | `${env.API_URL}/genesis/save_proposal`, 171 | { 172 | data: data, 173 | signData: signature, 174 | email: email 175 | }, 176 | { 177 | headers: { 178 | "Content-Type": "application/json", 179 | }, 180 | } 181 | ); 182 | setPending(false); 183 | if (response.status === 200) { 184 | const rlt = response.data; 185 | console.log(rlt); 186 | if (rlt.success) { 187 | toast.success("Sign success"); 188 | navigate("/result"); 189 | } else { 190 | toast.error(`Sign failed! ${rlt.msg ? rlt.msg: ''}`); 191 | } 192 | } else { 193 | toast.error("API ${env.API_URL} call failed"); 194 | } 195 | } catch (error) { 196 | setPending(false); 197 | toast.error("Error signing message:" + error.message); 198 | } 199 | document.getElementById("submit").disabled = false; 200 | }; 201 | 202 | const onMenuButtonClick = () => { 203 | SetMenuButtonStatus(!isOpen); 204 | }; 205 | 206 | const below600 = useMedia("(max-width: 1000px)"); 207 | return ( 208 |
209 | {!below600 && ( 210 |
211 |
212 |
213 | walletconnectlogo 214 |
215 | 216 |
217 | genesis_icon 218 |

Genesis

219 |
220 | 221 |
222 | dao_icon 223 |

DAO

224 |
225 |
226 | airdrop_icon 227 |

Airdrop

228 |
229 |
230 |
231 |
232 | 237 | vector_icon 238 | 239 | 244 | twitter_icon 245 | 246 | 251 | telegram_icon 252 | 253 |
254 |
255 |
256 |
257 |
258 |
259 | connected_status_icon 263 |

264 | {walletAddress.substring(0, 4) + 265 | "..." + 266 | walletAddress.substring( 267 | walletAddress.length - 2, 268 | walletAddress.length 269 | )} 270 |

271 |
272 |
273 |
274 | mainlogo 275 |
276 |
277 |

Lastly, pick your criteria

278 |
279 |
280 |

281 | The ReputationDAO has one objective: Generate returns for REPD 282 | holders by supporting the wider crypto ecosystem. Select the 283 | ways you think that the DAO should do in order to achieve 284 | this! View descriptions of these activities{" "} 285 | 290 | here 291 | 292 | . 293 |

294 |
295 |
296 |
297 |

Commercialise reputation and verification services.

298 |
299 | {item1Status === 1 && ( 300 | confirm_check 301 | )} 302 | {item1Status !== 1 && ( 303 | general_check 309 | )} 310 | {item1Status === 2 && ( 311 | confirm_cross 312 | )} 313 | {item1Status !== 2 && ( 314 | general_cross 320 | )} 321 |
322 |
323 |
324 |

Provide liquidity to other protocols.

325 |
326 | {item2Status === 1 && ( 327 | confirm_check 328 | )} 329 | {item2Status !== 1 && ( 330 | general_check 336 | )} 337 | {item2Status === 2 && ( 338 | confirm_cross 339 | )} 340 | {item2Status !== 2 && ( 341 | general_cross 347 | )} 348 |
349 |
350 |
351 |
352 |
353 |

Utilise treasury funds in yield and staking.

354 |
355 | {item3Status === 1 && ( 356 | confirm_check 357 | )} 358 | {item3Status !== 1 && ( 359 | general_check 365 | )} 366 | {item3Status === 2 && ( 367 | confirm_cross 368 | )} 369 | {item3Status !== 2 && ( 370 | general_cross 376 | )} 377 |
378 |
379 |
380 |

Fund bad actor detection and bounty hunting.

381 |
382 | {item4Status === 1 && ( 383 | confirm_check 384 | )} 385 | {item4Status !== 1 && ( 386 | general_check 392 | )} 393 | {item4Status === 2 && ( 394 | confirm_cross 395 | )} 396 | {item4Status !== 2 && ( 397 | general_cross 403 | )} 404 |
405 |
406 |
407 |
408 |
409 |

Fund development of RDAO ecosystem.

410 |
411 | {item5Status === 1 && ( 412 | confirm_check 413 | )} 414 | {item5Status !== 1 && ( 415 | general_check 421 | )} 422 | {item5Status === 2 && ( 423 | confirm_cross 424 | )} 425 | {item5Status !== 2 && ( 426 | general_cross 432 | )} 433 |
434 |
435 |
436 |

Actively manage DAO as an investment fund.

437 |
438 | {item6Status === 1 && ( 439 | confirm_check 440 | )} 441 | {item6Status !== 1 && ( 442 | general_check 448 | )} 449 | {item6Status === 2 && ( 450 | confirm_cross 451 | )} 452 | {item6Status !== 2 && ( 453 | general_cross 459 | )} 460 |
461 |
462 |
463 |
464 |
465 |

Invest in early stage protocols.

466 |
467 | {item7Status === 1 && ( 468 | confirm_check 469 | )} 470 | {item7Status !== 1 && ( 471 | general_check 477 | )} 478 | {item7Status === 2 && ( 479 | confirm_cross 480 | )} 481 | {item7Status !== 2 && ( 482 | general_cross 488 | )} 489 |
490 |
491 |
492 |

Invest in NFT’s.

493 |
494 | {item8Status === 1 && ( 495 | confirm_check 496 | )} 497 | {item8Status !== 1 && ( 498 | general_check 504 | )} 505 | {item8Status === 2 && ( 506 | confirm_cross 507 | )} 508 | {item8Status !== 2 && ( 509 | general_cross 515 | )} 516 |
517 |
518 |
519 |
520 |
521 | 563 |
564 |
565 |
566 | )} 567 | {below600 && ( 568 |
569 |
570 |
571 | menu_button 576 |
577 | mainlogo 578 |
579 |
580 |
581 | connected_status_icon 585 |

586 | {walletAddress.substring(0, 4) + 587 | "..." + 588 | walletAddress.substring( 589 | walletAddress.length - 2, 590 | walletAddress.length 591 | )} 592 |

593 |
594 |
595 |
596 | {isOpen && ( 597 |
598 |
599 | 600 |
601 | genesis_icon 602 |

Genesis

603 |
604 | 605 |
606 | dao_icon 607 |

DAO

608 |
609 |
610 | airdrop_icon 611 |

Airdrop

612 |
613 |
614 |
615 | 620 | vector_icon 621 | 622 | 627 | twitter_icon 628 | 629 | 634 | telegram_icon 635 | 636 |
637 |
638 | )} 639 |
640 |
641 |
642 |
643 |

Lastly, pick your criteria

644 |
645 |
646 |

647 | The ReputationDAO has one objective: Generate returns for REPD 648 | holders by supporting the wider crypto ecosystem. Select the 649 | ways you think that the DAO should do in order to achieve 650 | this! View descriptions of these activities{" "} 651 | 656 | here 657 | 658 | . 659 |

660 |
661 |
662 |
663 |

Commercialise reputation and verification services.

664 |
665 | {item1Status === 1 && ( 666 | confirm_check 667 | )} 668 | {item1Status !== 1 && ( 669 | general_check 675 | )} 676 | {item1Status === 2 && ( 677 | confirm_cross 678 | )} 679 | {item1Status !== 2 && ( 680 | general_cross 686 | )} 687 |
688 |
689 |
690 |
691 |
692 |

Provide liquidity to other protocols.

693 |
694 | {item2Status === 1 && ( 695 | confirm_check 696 | )} 697 | {item2Status !== 1 && ( 698 | general_check 704 | )} 705 | {item2Status === 2 && ( 706 | confirm_cross 707 | )} 708 | {item2Status !== 2 && ( 709 | general_cross 715 | )} 716 |
717 |
718 |
719 |
720 |
721 |

Utilise treasury funds in yield and staking.

722 |
723 | {item3Status === 1 && ( 724 | confirm_check 725 | )} 726 | {item3Status !== 1 && ( 727 | general_check 733 | )} 734 | {item3Status === 2 && ( 735 | confirm_cross 736 | )} 737 | {item3Status !== 2 && ( 738 | general_cross 744 | )} 745 |
746 |
747 |
748 |
749 |
750 |

Fund bad actor detection and bounty hunting.

751 |
752 | {item4Status === 1 && ( 753 | confirm_check 754 | )} 755 | {item4Status !== 1 && ( 756 | general_check 762 | )} 763 | {item4Status === 2 && ( 764 | confirm_cross 765 | )} 766 | {item4Status !== 2 && ( 767 | general_cross 773 | )} 774 |
775 |
776 |
777 |
778 |
779 |

Fund development of RDAO ecosystem.

780 |
781 | {item5Status === 1 && ( 782 | confirm_check 783 | )} 784 | {item5Status !== 1 && ( 785 | general_check 791 | )} 792 | {item5Status === 2 && ( 793 | confirm_cross 794 | )} 795 | {item5Status !== 2 && ( 796 | general_cross 802 | )} 803 |
804 |
805 |
806 |
807 |
808 |

Actively manage DAO as an investment fund.

809 |
810 | {item6Status === 1 && ( 811 | confirm_check 812 | )} 813 | {item6Status !== 1 && ( 814 | general_check 820 | )} 821 | {item6Status === 2 && ( 822 | confirm_cross 823 | )} 824 | {item6Status !== 2 && ( 825 | general_cross 831 | )} 832 |
833 |
834 |
835 |
836 |
837 |

Invest in early stage protocols.

838 |
839 | {item7Status === 1 && ( 840 | confirm_check 841 | )} 842 | {item7Status !== 1 && ( 843 | general_check 849 | )} 850 | {item7Status === 2 && ( 851 | confirm_cross 852 | )} 853 | {item7Status !== 2 && ( 854 | general_cross 860 | )} 861 |
862 |
863 |
864 |
865 |
866 |

Invest in NFT’s.

867 |
868 | {item8Status === 1 && ( 869 | confirm_check 870 | )} 871 | {item8Status !== 1 && ( 872 | general_check 878 | )} 879 | {item8Status === 2 && ( 880 | confirm_cross 881 | )} 882 | {item8Status !== 2 && ( 883 | general_cross 889 | )} 890 |
891 |
892 |
893 |
894 |
895 | 931 |
932 |
933 |
934 | )} 935 |
936 | ); 937 | }; 938 | export default Criteria; 939 | --------------------------------------------------------------------------------