├── src ├── components │ ├── button │ │ ├── connectButton.module.scss │ │ └── connectButton.tsx │ ├── Wallet │ │ ├── index.ts │ │ ├── connect.tsx │ │ └── disconnect.tsx │ ├── saleInfo │ │ ├── saleInfo.tsx │ │ └── saleInfo.module.scss │ ├── footer │ │ ├── footer.tsx │ │ └── footer.module.scss │ ├── progressCard │ │ ├── progressBar.module.scss │ │ ├── progressBar.tsx │ │ ├── progressCard.module.scss │ │ └── progressCard.tsx │ ├── navigation │ │ ├── navigation.module.scss │ │ └── navigation.tsx │ ├── popup │ │ ├── thankyouPopup.tsx │ │ ├── thankyouPopup.module.scss │ │ ├── contributePopup.module.scss │ │ └── contributePopup.tsx │ └── counter │ │ ├── counter.module.scss │ │ └── counter.tsx ├── vite-env.d.ts ├── assets │ ├── logo.png │ ├── bal-logo.png │ ├── counter-bg.png │ ├── logo-small.png │ ├── footer-logo.png │ ├── paper-image.png │ ├── sale-hero-image.png │ ├── fonts │ │ ├── Rye-Regular.woff2 │ │ └── VastShadow-Regular.woff2 │ ├── round-section-image.png │ ├── round-background-image.png │ ├── cross.svg │ ├── x-logo.svg │ └── react.svg ├── web3 │ ├── index.ts │ ├── MyWallet.tsx │ ├── presale.json │ ├── PersonalInfo.tsx │ └── utils.ts ├── main.tsx ├── fonts.scss ├── reset.scss ├── index.scss ├── App.module.scss └── App.tsx ├── types └── index.d.ts ├── public ├── favicon.ico └── meta-image.jpg ├── .env ├── tsconfig.node.json ├── .gitignore ├── .eslintrc.cjs ├── vite.config.ts ├── tsconfig.json ├── index.html ├── README.md └── package.json /src/components/button/connectButton.module.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.jpg"; 2 | declare module "*.png"; 3 | declare module "*.svg"; 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /public/meta-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/public/meta-image.jpg -------------------------------------------------------------------------------- /src/assets/bal-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/bal-logo.png -------------------------------------------------------------------------------- /src/web3/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | PersonalInfoContext, 3 | PersonalInfoContextProvider, 4 | } from "./PersonalInfo"; 5 | -------------------------------------------------------------------------------- /src/assets/counter-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/counter-bg.png -------------------------------------------------------------------------------- /src/assets/logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/logo-small.png -------------------------------------------------------------------------------- /src/assets/footer-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/footer-logo.png -------------------------------------------------------------------------------- /src/assets/paper-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/paper-image.png -------------------------------------------------------------------------------- /src/assets/sale-hero-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/sale-hero-image.png -------------------------------------------------------------------------------- /src/assets/fonts/Rye-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/fonts/Rye-Regular.woff2 -------------------------------------------------------------------------------- /src/assets/round-section-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/round-section-image.png -------------------------------------------------------------------------------- /src/assets/round-background-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/round-background-image.png -------------------------------------------------------------------------------- /src/components/Wallet/index.ts: -------------------------------------------------------------------------------- 1 | export { default as WalletConnect } from "./connect"; 2 | export { default as WalletDisconnect } from "./disconnect"; 3 | -------------------------------------------------------------------------------- /src/assets/fonts/VastShadow-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mickey9315/Jarvis-Solana-Presale-Frontend/HEAD/src/assets/fonts/VastShadow-Regular.woff2 -------------------------------------------------------------------------------- /src/components/Wallet/connect.tsx: -------------------------------------------------------------------------------- 1 | import { WalletMultiButton } from "@solana/wallet-adapter-react-ui"; 2 | 3 | export default function WalletConnect(): JSX.Element { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Wallet/disconnect.tsx: -------------------------------------------------------------------------------- 1 | import { WalletDisconnectButton } from "@solana/wallet-adapter-react-ui"; 2 | 3 | export default function WalletConnect(): JSX.Element { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | VITE_APP_SOLANA_RPC_HOST=https://api.devnet.solana.com 2 | VITE_APP_PROGRAM_KEY=presniX9hhdaCKFXD6fkmEs5cNuL6GWmtjAz6u87NMz 3 | VITE_APP_POOL_ADDRESS=BXWMXXbxtN5aNZAYH4QsYBGt8XNzQGLRioffctZcVoMn 4 | VITE_APP_JUGE_RATE=10000 5 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | import "./index.scss"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /src/assets/cross.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Rye-Regular"; 3 | src: url('./assets/fonts/Rye-Regular.woff2') format('woff2'); 4 | font-style: normal; 5 | } 6 | 7 | @font-face { 8 | font-family: "VastShadow-Regular"; 9 | src: url('./assets/fonts/VastShadow-Regular.woff2') format('woff2'); 10 | font-style: normal; 11 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | dist 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /src/assets/x-logo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /src/components/button/connectButton.tsx: -------------------------------------------------------------------------------- 1 | import classes from "./connectButton.module.scss"; 2 | import React from "react"; 3 | 4 | type ConnectButtonProps = { 5 | children: React.ReactNode; 6 | className?: string; 7 | handleClick?: () => void; 8 | }; 9 | 10 | export default function ConnectButton({ 11 | children, 12 | className = "", 13 | handleClick, 14 | }: ConnectButtonProps) { 15 | 16 | return ( 17 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react()], 8 | build: { 9 | commonjsOptions: { transformMixedEsModules: true }, // Change 10 | chunkSizeWarningLimit: 800, // Set the limit to 800kb 11 | }, 12 | define: { 13 | 'process.env': {} 14 | }, 15 | optimizeDeps:{ 16 | esbuildOptions:{ 17 | plugins:[ 18 | esbuildCommonjs(['utils']) 19 | ] 20 | } 21 | } 22 | }) 23 | -------------------------------------------------------------------------------- /src/web3/MyWallet.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | PublicKey, 3 | Keypair, 4 | Transaction 5 | } from "@solana/web3.js"; 6 | import {Wallet} from "@project-serum/anchor"; 7 | 8 | export default class MyWallet implements Wallet { 9 | 10 | constructor(readonly payer: Keypair) { 11 | this.payer = payer 12 | } 13 | 14 | async signTransaction(tx: Transaction): Promise { 15 | tx.partialSign(this.payer); 16 | return tx; 17 | } 18 | 19 | async signAllTransactions(txs: Transaction[]): Promise { 20 | return txs.map((t) => { 21 | t.partialSign(this.payer); 22 | return t; 23 | }); 24 | } 25 | 26 | get publicKey(): PublicKey { 27 | return this.payer.publicKey; 28 | } 29 | } -------------------------------------------------------------------------------- /src/components/saleInfo/saleInfo.tsx: -------------------------------------------------------------------------------- 1 | import classes from "./saleInfo.module.scss"; 2 | 3 | type SaleInfoProps = { 4 | leftText: string; 5 | rightText: string; 6 | }; 7 | 8 | // sale info page image 9 | import saleInfoBackgroundImage from "../../assets/paper-image.png"; 10 | 11 | export default function SaleInfo({ leftText, rightText }: SaleInfoProps) { 12 | return ( 13 |

14 |

19 |

20 |

{leftText}

21 |

22 |

23 |

{rightText}

24 |

25 |

26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /src/components/footer/footer.tsx: -------------------------------------------------------------------------------- 1 | import classes from "./footer.module.scss"; 2 | 3 | import footerLogo from "../../assets/footer-logo.png"; 4 | import xLogo from "../../assets/x-logo.svg"; 5 | 6 | export default function Footer(): JSX.Element { 7 | return ( 8 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /src/components/saleInfo/saleInfo.module.scss: -------------------------------------------------------------------------------- 1 | .sale__info { 2 | position: relative; 3 | width: 68.4rem; 4 | height: 12.7rem; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding-left: 8.6rem; 9 | padding-right: 2.8rem; 10 | 11 | @media screen and (max-width: 768px) { 12 | padding-left: 4rem; 13 | padding-right: 2rem; 14 | width: 34rem; 15 | height: 6.2rem; 16 | } 17 | 18 | p { 19 | color: var(--black); 20 | } 21 | } 22 | 23 | .sale__info__bg__image { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | z-index: -1; 30 | } 31 | 32 | .sale__info__left, 33 | .sale__info__right { 34 | p { 35 | @media screen and (max-width: 768px) { 36 | font-size: 1rem; 37 | line-height: 1.2rem; 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | "paths": { 17 | "@solana/wallet-adapter-wallets": ["./node_modules/@solana/wallet-adapter-wallets/lib/types"], 18 | "@solana-mobile/wallet-adapter-mobile": [ 19 | "./node_modules/@solana-mobile/wallet-adapter-mobile/lib/types" 20 | ] 21 | }, 22 | /* Linting */ 23 | "strict": true, 24 | "noUnusedLocals": true, 25 | "noUnusedParameters": true, 26 | "noFallthroughCasesInSwitch": true 27 | }, 28 | "include": ["src", "./types/index.d.ts"], 29 | "references": [{ "path": "./tsconfig.node.json" }] 30 | } 31 | -------------------------------------------------------------------------------- /src/components/progressCard/progressBar.module.scss: -------------------------------------------------------------------------------- 1 | .progress__bar__wrapper { 2 | padding-top: 3rem; 3 | padding-left: 4.6rem; 4 | padding-right: 4.6rem; 5 | 6 | @media screen and (max-width: 768px) { 7 | padding-left: 2.2rem; 8 | padding-right: 2.2rem; 9 | padding-top: 1.7rem; 10 | } 11 | } 12 | 13 | .progress__bar__text__wrapper { 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-between; 17 | } 18 | 19 | .progress__bar__text { 20 | font-size: 2.2rem; 21 | line-height: 1; 22 | 23 | @media screen and (max-width: 768px) { 24 | font-size: 1rem; 25 | } 26 | } 27 | 28 | .progress__bar__container { 29 | margin-top: 1.6rem; 30 | } 31 | 32 | .progress__bar { 33 | width: 100%; 34 | height: 1.8rem; 35 | background: rgba($color: #707070, $alpha: 0.3); 36 | border-radius: 0.4rem; 37 | overflow: hidden; 38 | position: relative; 39 | } 40 | 41 | .progress__bar__inner { 42 | width: 80%; 43 | height: 1.8rem; 44 | position: absolute; 45 | background: linear-gradient(to right, #655744, #E0C195); 46 | border-radius: 0.4rem; 47 | } -------------------------------------------------------------------------------- /src/components/progressCard/progressBar.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import classes from "./progressBar.module.scss"; 3 | 4 | import { PersonalInfoContext } from "../../web3/PersonalInfo"; 5 | 6 | export default function ProgressBar() { 7 | const { poolState } = useContext(PersonalInfoContext); 8 | const getProgressPercent = () => { 9 | let num = poolState.raised / poolState.hardcap * 100; 10 | return num.toFixed(2); 11 | } 12 | return ( 13 |

14 |

15 |

{poolState.raised} / {poolState.hardcap} SOL

16 |

Progress {getProgressPercent()}%

17 |

18 |

19 |

20 |

24 |

25 |

26 |

27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Judgement 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default { 18 | // other rules... 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | sourceType: 'module', 22 | project: ['./tsconfig.json', './tsconfig.node.json'], 23 | tsconfigRootDir: __dirname, 24 | }, 25 | } 26 | ``` 27 | 28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "private-sale-react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@originjs/vite-plugin-commonjs": "^1.0.3", 14 | "@project-serum/anchor": "^0.25.0", 15 | "@solana-mobile/wallet-adapter-mobile": "^0.0.1-alpha.0", 16 | "@solana/spl-token": "^0.1.8", 17 | "@solana/wallet-adapter-base": "^0.9.9", 18 | "@solana/wallet-adapter-react": "^0.15.8", 19 | "@solana/wallet-adapter-react-ui": "^0.9.10", 20 | "@solana/wallet-adapter-wallets": "^0.16.10", 21 | "@solana/web3.js": "^1.47.3", 22 | "react": "^18.2.0", 23 | "react-dom": "^18.2.0", 24 | "react-router-dom": "^6.22.3", 25 | "react-toastify": "^9.0.7" 26 | }, 27 | "devDependencies": { 28 | "@types/node": "^20.12.2", 29 | "@types/react": "^18.2.37", 30 | "@types/react-dom": "^18.2.15", 31 | "@typescript-eslint/eslint-plugin": "^6.10.0", 32 | "@typescript-eslint/parser": "^6.10.0", 33 | "@vitejs/plugin-react": "^4.2.0", 34 | "eslint": "^8.53.0", 35 | "eslint-plugin-react-hooks": "^4.6.0", 36 | "eslint-plugin-react-refresh": "^0.4.4", 37 | "sass": "^1.72.0", 38 | "typescript": "^5.2.2", 39 | "vite": "^5.0.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/navigation/navigation.module.scss: -------------------------------------------------------------------------------- 1 | .nav { 2 | width: 100%; 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | z-index: 10; 7 | 8 | .nav__container { 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | max-width: 144.5rem; 13 | margin: 0 auto; 14 | padding-top: 2.3rem; 15 | 16 | @media screen and (max-width: 768px) { 17 | padding-top: 1.3rem; 18 | padding-left: 2rem; 19 | padding-right: 2rem; 20 | } 21 | } 22 | 23 | .nav__logo { 24 | width: 12.5rem; 25 | height: 12.5rem; 26 | 27 | @media screen and (max-width: 768px) { 28 | width: 4.6rem; 29 | height: 4.6rem; 30 | 31 | } 32 | } 33 | 34 | .nav__x__logo { 35 | width: 2.4rem; 36 | height: 2.5rem; 37 | 38 | @media screen and (max-width: 768px) { 39 | width: 1.2rem; 40 | height: 1.2rem; 41 | 42 | } 43 | } 44 | 45 | .nav__links__wrapper { 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | gap: 3rem; 50 | 51 | @media screen and (max-width: 768px) { 52 | gap: 1rem; 53 | } 54 | } 55 | 56 | .nav__connect__button { 57 | font-size: 2rem; 58 | line-height: 1; 59 | 60 | @media screen and (max-width: 768px) { 61 | font-size: 1.3rem; 62 | } 63 | } 64 | } 65 | 66 | .menu__text { 67 | @media screen and (max-width: 768px) { 68 | font-size: 1.3rem; 69 | } 70 | } -------------------------------------------------------------------------------- /src/components/popup/thankyouPopup.tsx: -------------------------------------------------------------------------------- 1 | import { forwardRef } from "react"; 2 | 3 | import classes from "./thankyouPopup.module.scss"; 4 | import logo from "../../assets/logo.png"; 5 | 6 | // import { PersonalInfoContext } from "../../web3/PersonalInfo"; 7 | 8 | const judge_rate = import.meta.env.VITE_APP_JUGE_RATE; 9 | 10 | export interface ThankyouPopupProps { 11 | // ref?: RefObject, 12 | purchase_amount: number, 13 | closeThankyouPopupChild: () => void, 14 | } 15 | 16 | const ThankyouPopup = forwardRef(function ThankyouPopup( 17 | props, 18 | ref 19 | ) { 20 | // const { depositSol } = useContext(PersonalInfoContext); 21 | 22 | const closeButtonClick = () => { 23 | props.closeThankyouPopupChild(); 24 | } 25 | 26 | console.log(props.purchase_amount) 27 | return ( 28 | 43 | ); 44 | }); 45 | 46 | export default ThankyouPopup; 47 | -------------------------------------------------------------------------------- /src/components/navigation/navigation.tsx: -------------------------------------------------------------------------------- 1 | // import { useEffect } from "react"; 2 | import classes from "./navigation.module.scss"; 3 | // import ConnectButton from "../button/connectButton"; 4 | import logo from "../../assets/logo.png"; 5 | import xLogo from "../../assets/x-logo.svg"; 6 | 7 | import WalletConnect from "../Wallet/connect"; 8 | 9 | export default function Navigation() { 10 | 11 | // const { connected } = useWallet(); 12 | // const { connected, select, wallets, wallet, publicKey, disconnect } = useWallet(); 13 | // const { setVisible } = useWalletModal(); 14 | 15 | // useEffect(() => { 16 | // console.log("wallet selected"); 17 | // if(wallet) { 18 | // console.log("wallet select"); 19 | // if(wallet.readyState == "NotDetected") { 20 | 21 | // // select(wallet.adapter.name); 22 | // // navigate(wallet.adapter.url); 23 | // openInNewTab(wallet.adapter.url); 24 | // } 25 | // } 26 | // }, [wallet]) 27 | 28 | // useEffect(() => { 29 | // }, []) 30 | 31 | 32 | return ( 33 | 53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /src/reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | //prettier-ignore 7 | html, 8 | body, 9 | div, 10 | span, 11 | applet, 12 | object, 13 | iframe, 14 | h1, 15 | h2, 16 | h3, 17 | h4, 18 | h5, 19 | h6, 20 | p, 21 | blockquote, 22 | pre, 23 | a, 24 | abbr, 25 | acronym, 26 | address, 27 | big, 28 | cite, 29 | code, 30 | del, 31 | dfn, 32 | em, 33 | img, 34 | ins, 35 | kbd, 36 | q, 37 | s, 38 | samp, 39 | small, 40 | strike, 41 | strong, 42 | sub, 43 | sup, 44 | tt, 45 | var, 46 | b, 47 | u, 48 | i, 49 | center, 50 | dl, 51 | dt, 52 | dd, 53 | ol, 54 | ul, 55 | li, 56 | fieldset, 57 | form, 58 | label, 59 | legend, 60 | table, 61 | caption, 62 | tbody, 63 | tfoot, 64 | thead, 65 | tr, 66 | th, 67 | td, 68 | article, 69 | aside, 70 | canvas, 71 | details, 72 | embed, 73 | figure, 74 | figcaption, 75 | footer, 76 | header, 77 | hgroup, 78 | menu, 79 | nav, 80 | output, 81 | ruby, 82 | section, 83 | summary, 84 | time, 85 | mark, 86 | audio, 87 | video { 88 | margin: 0; 89 | padding: 0; 90 | border: 0; 91 | font-size: 100%; 92 | font: inherit; 93 | vertical-align: baseline; 94 | } 95 | 96 | /* HTML5 display-role reset for older browsers */ 97 | article, 98 | aside, 99 | details, 100 | figcaption, 101 | figure, 102 | footer, 103 | header, 104 | hgroup, 105 | menu, 106 | nav, 107 | section { 108 | display: block; 109 | } 110 | 111 | body { 112 | line-height: 1; 113 | } 114 | 115 | ol, 116 | ul { 117 | list-style: none; 118 | } 119 | 120 | blockquote, 121 | q { 122 | quotes: none; 123 | } 124 | 125 | blockquote:before, 126 | blockquote:after, 127 | q:before, 128 | q:after { 129 | content: ''; 130 | content: none; 131 | } 132 | 133 | table { 134 | border-collapse: collapse; 135 | border-spacing: 0; 136 | } -------------------------------------------------------------------------------- /src/components/footer/footer.module.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 5rem 0rem; 3 | width: 100%; 4 | 5 | @media screen and (max-width: 768px) { 6 | padding-top: 6rem; 7 | padding-bottom: 6rem; 8 | } 9 | } 10 | 11 | .footer__container { 12 | width: 100%; 13 | display: flex; 14 | align-items: center; 15 | justify-content: space-between; 16 | padding: 0rem 5rem; 17 | 18 | @media screen and (max-width: 768px) { 19 | flex-direction: column; 20 | } 21 | } 22 | 23 | .footer__logo__wrapper { 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | gap: 1.3rem; 28 | margin-right: 18rem; 29 | 30 | @media screen and (max-width: 768px) { 31 | margin-right: 0; 32 | margin-bottom: 5rem; 33 | flex-direction: column; 34 | } 35 | } 36 | 37 | .footer__logo__title { 38 | font-size: 3rem; 39 | font-family: var(--font-rye); 40 | } 41 | 42 | .footer__logo { 43 | width: 11.8rem; 44 | height: 11.8rem; 45 | } 46 | 47 | .footer__links { 48 | display: flex; 49 | align-items: flex-start; 50 | justify-content: flex-start; 51 | gap: 6rem; 52 | 53 | @media screen and (max-width: 768px) { 54 | flex-direction: column; 55 | gap: 2rem; 56 | } 57 | } 58 | 59 | .footer__links__wrapper { 60 | display: flex; 61 | flex-direction: column; 62 | align-items: flex-start; 63 | justify-content: flex-start; 64 | gap: 2.4rem; 65 | 66 | @media screen and (max-width: 768px) { 67 | align-items: center; 68 | gap: 2rem; 69 | } 70 | } 71 | 72 | .footer__link { 73 | font-size: 1.4rem; 74 | font-family: var(--font-rye); 75 | text-transform: uppercase; 76 | } 77 | 78 | .footer__x__logo { 79 | width: 7rem; 80 | height: 7rem; 81 | margin-left: 19rem; 82 | 83 | @media screen and (max-width: 768px) { 84 | margin-top: 2rem; 85 | margin-left: 0; 86 | height: 2.6rem; 87 | width: 2.6rem; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/components/counter/counter.module.scss: -------------------------------------------------------------------------------- 1 | .counter { 2 | padding: 0.3rem; 3 | background: linear-gradient(to bottom, rgba(108, 82, 67, 1), rgba(108, 82, 67, 0)); 4 | width: 46.4rem; 5 | height: 42.5rem; 6 | border-radius: 1rem; 7 | 8 | @media screen and (max-width: 768px) { 9 | width: 33rem; 10 | height: 23rem; 11 | } 12 | } 13 | 14 | .counter__wrapper { 15 | background: #0e0e0e; 16 | width: 100%; 17 | height: 100%; 18 | border-radius: 0.7rem; 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | flex-direction: column; 23 | } 24 | 25 | .counter__title__wrapper { 26 | p { 27 | text-align: center; 28 | line-height: 1; 29 | 30 | @media screen and (max-width: 768px) { 31 | font-size: 1.1rem; 32 | } 33 | } 34 | 35 | .counter__title { 36 | color: #958883; 37 | margin-bottom: 0.5rem; 38 | 39 | @media screen and (max-width: 768px) { 40 | margin-bottom: 1rem; 41 | } 42 | } 43 | } 44 | 45 | .counter__digit__wrapper { 46 | display: flex; 47 | flex-direction: column; 48 | justify-content: center; 49 | align-items: center; 50 | gap: 1.5rem; 51 | border: 0.1rem solid #6B5242; 52 | border-radius: 0.3rem; 53 | padding: 1.4rem; 54 | 55 | @media screen and (max-width: 768px) { 56 | padding: 1rem; 57 | } 58 | } 59 | 60 | .counter__time__wrapper { 61 | display: flex; 62 | align-items: center; 63 | justify-content: center; 64 | gap: 1.3rem; 65 | margin-top: 3rem; 66 | 67 | .counter__text { 68 | font-size: 1.3rem; 69 | line-height: 1rem; 70 | color: #958883; 71 | 72 | @media screen and (max-width: 768px) { 73 | font-size: 0.9rem; 74 | } 75 | } 76 | 77 | .counter__data { 78 | font-size: 3.5rem; 79 | line-height: 3rem; 80 | box-shadow: 0 -1 5 #fff; 81 | 82 | @media screen and (max-width: 768px) { 83 | font-size: 2.5rem; 84 | } 85 | } 86 | } -------------------------------------------------------------------------------- /src/components/popup/thankyouPopup.module.scss: -------------------------------------------------------------------------------- 1 | .thank__you__popup { 2 | padding: 4.5rem 5.5rem; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | border: 0.3rem solid #6C5243; 8 | background: rgba($color: #0E0E0E9C, $alpha: 0.6); 9 | backdrop-filter: blur(1rem); 10 | padding: 9rem 6.5rem; 11 | color: var(--white); 12 | position: fixed; 13 | border-radius: 1rem; 14 | 15 | @media screen and (max-width: 768px) { 16 | width: 32.8rem; 17 | padding: 3rem 2.2rem; 18 | } 19 | } 20 | 21 | .thankyou__logo { 22 | width: 15.4rem; 23 | height: 15.2rem; 24 | margin-bottom: 4.5rem; 25 | 26 | @media screen and (max-width: 768px) { 27 | width: 7rem; 28 | height: 7rem; 29 | margin-bottom: 1.5rem; 30 | } 31 | } 32 | 33 | .popup__form { 34 | width: 100%; 35 | } 36 | 37 | .thankyou__close__button { 38 | width: 100%; 39 | } 40 | 41 | .thankyou__text, 42 | .thankyou__text__white { 43 | font-size: 2.8rem; 44 | text-transform: uppercase; 45 | color: var(--brown); 46 | 47 | @media screen and (max-width: 768px) { 48 | font-size: 1.5rem; 49 | line-height: 2rem; 50 | text-align: center; 51 | } 52 | } 53 | 54 | .thankyou__text__white { 55 | color: var(--white); 56 | margin-bottom: 6.7rem; 57 | 58 | @media screen and (max-width: 768px) { 59 | margin-bottom: 3rem; 60 | } 61 | } 62 | 63 | .thankyou__divider { 64 | height: 0.15rem; 65 | width: 100%; 66 | background: rgb(128, 148, 125); 67 | background: -moz-linear-gradient(90deg, rgba(128, 148, 125, 0) 0%, rgba(108, 82, 67, 1) 53%, rgba(224, 220, 210, 0) 100%); 68 | background: -webkit-linear-gradient(90deg, rgba(128, 148, 125, 0) 0%, rgba(108, 82, 67, 1) 53%, rgba(224, 220, 210, 0) 100%); 69 | background: linear-gradient(90deg, rgba(128, 148, 125, 0) 0%, rgba(108, 82, 67, 1) 53%, rgba(224, 220, 210, 0) 100%); 70 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#80947d", endColorstr="#e0dcd2", GradientType=1); 71 | margin: 5rem 0rem; 72 | 73 | @media screen and (max-width: 768px) { 74 | margin: 2.3rem 0rem; 75 | } 76 | } -------------------------------------------------------------------------------- /src/components/progressCard/progressCard.module.scss: -------------------------------------------------------------------------------- 1 | .progress__meter__outer__wrapper { 2 | background: linear-gradient(to bottom, rgba(108, 82, 67, 1), rgba(108, 82, 67, 0)); 3 | border-radius: 1rem; 4 | padding: 0.3rem; 5 | margin-right: 1.7rem; 6 | 7 | @media screen and (max-width: 768px) { 8 | margin-right: 0; 9 | margin-bottom: 1.7rem; 10 | } 11 | } 12 | 13 | .progress__meter { 14 | background: #0e0e0e; 15 | border-radius: 0.7rem; 16 | width: 97.7rem; 17 | 18 | @media screen and (max-width: 768px) { 19 | width: 33rem; 20 | } 21 | } 22 | 23 | .progress__total__wrapper { 24 | padding: 4.2rem 4.6rem; 25 | border-bottom: 0.15rem solid rgba($color: #515151, $alpha: 0.5); 26 | 27 | @media screen and (max-width: 768px) { 28 | padding: 2.2rem 1.7rem; 29 | } 30 | } 31 | 32 | .progress__total__title { 33 | color: var(--dark-brown); 34 | 35 | @media screen and (max-width: 768px) { 36 | font-size: 1.5rem; 37 | } 38 | } 39 | 40 | 41 | .progress__total__sol { 42 | display: flex; 43 | align-items: center; 44 | justify-content: flex-start; 45 | gap: 1.6rem; 46 | margin-top: 2.1rem; 47 | 48 | @media screen and (max-width: 768px) { 49 | margin-top: 1rem; 50 | } 51 | } 52 | 53 | .progress__total__logo__image { 54 | width: 4.9rem; 55 | height: 4.9rem; 56 | 57 | @media screen and (max-width: 768px) { 58 | width: 2.5rem; 59 | height: 2.5rem; 60 | } 61 | } 62 | 63 | .progress__total__amount { 64 | font-size: 4rem; 65 | line-height: 3rem; 66 | color: var(--brown); 67 | 68 | @media screen and (max-width: 768px) { 69 | font-size: 2.3rem; 70 | } 71 | } 72 | 73 | .progress__card__connect__button { 74 | padding: 1.4rem 10rem; 75 | background: #3E3027; 76 | margin-left: 4.6rem; 77 | margin-top: 3.4rem; 78 | margin-bottom: 7.6rem; 79 | border: 0.2rem solid #3E3027; 80 | transition: all 0.3s ease; 81 | 82 | 83 | &:hover { 84 | background: none; 85 | border: 0.2rem solid var(--white); 86 | } 87 | 88 | @media screen and (max-width: 768px) { 89 | padding: 1.4rem 5rem; 90 | margin-left: 0; 91 | margin-bottom: 3rem; 92 | margin-left: 2.2rem; 93 | width: 28.2rem; 94 | } 95 | } -------------------------------------------------------------------------------- /src/components/counter/counter.tsx: -------------------------------------------------------------------------------- 1 | import classes from "./counter.module.scss"; 2 | import { useState, useEffect } from "react"; 3 | 4 | type TimeLeft = { 5 | days?: number; 6 | hours?: number; 7 | minutes?: number; 8 | seconds?: number; 9 | }; 10 | 11 | type CounterProps = { 12 | targetDate: string; 13 | }; 14 | 15 | export default function Counter({ targetDate }: CounterProps): JSX.Element { 16 | const calculateTimeLeft = (): TimeLeft => { 17 | const difference = +new Date(targetDate) - +new Date(); 18 | let timeLeft: TimeLeft = {}; 19 | 20 | if (difference > 0) { 21 | timeLeft = { 22 | days: Math.floor(difference / (1000 * 60 * 60 * 24)), 23 | hours: Math.floor((difference / (1000 * 60 * 60)) % 24), 24 | minutes: Math.floor((difference / 1000 / 60) % 60), 25 | seconds: Math.floor((difference / 1000) % 60), 26 | }; 27 | } 28 | 29 | return timeLeft; 30 | }; 31 | 32 | const [time, setTime] = useState({}); 33 | 34 | useEffect(() => { 35 | setTime(calculateTimeLeft()); 36 | 37 | const timer = setInterval(() => { 38 | setTime(calculateTimeLeft()); 39 | }, 1000); 40 | 41 | return () => clearInterval(timer); 42 | }, []); 43 | 44 | return ( 45 |

46 |

47 |

48 |

REGISTRATION STARTS IN

49 |

14 Apr 2024, 1PM UTC

50 |

51 |

52 |

53 |

{time.days}

54 |

Days

55 |

56 |

57 |

{time.hours}

58 |

Hours

59 |

60 |

61 |

{time.minutes}

62 |

Minutes

63 |

64 |

65 |

{time.seconds}

66 |

Seconds

67 |

68 |

69 |

70 |

71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /src/components/progressCard/progressCard.tsx: -------------------------------------------------------------------------------- 1 | import { useRef, useContext } from "react"; 2 | import { useWallet } from "@solana/wallet-adapter-react"; 3 | // import { useWalletModal } from "@solana/wallet-adapter-react-ui"; 4 | 5 | import { toast } from "react-toastify"; 6 | 7 | import classes from "./progressCard.module.scss"; 8 | 9 | import logoImage from "../../assets/logo-small.png"; 10 | 11 | import ConnectButton from "../button/connectButton"; 12 | import ProgressBar from "./progressBar"; 13 | import ContributePopup from "../popup/contributePopup"; 14 | 15 | import { PersonalInfoContext } from "../../web3/PersonalInfo"; 16 | 17 | // import WalletConnect from "../Wallet/connect"; 18 | 19 | export default function ProgressCard(): JSX.Element { 20 | const { poolState, getUserInfo } = useContext(PersonalInfoContext); 21 | const { connected } = useWallet(); 22 | // const { connected, select, wallets, wallet, publicKey, disconnect } = useWallet(); 23 | // const { setVisible } = useWalletModal(); 24 | 25 | const dialogRef = useRef(null); 26 | 27 | const closeContributePopupParent = () => { 28 | console.log("Close Dialog"); 29 | 30 | dialogRef.current?.close(); 31 | } 32 | 33 | const handleClick = async () => { 34 | if(connected) { 35 | await getUserInfo(); 36 | dialogRef.current?.showModal(); 37 | } else { 38 | // setVisible(true); 39 | toast.warn(`You should connect your wallet first!`, { 40 | position: "bottom-right", 41 | autoClose: 2000, 42 | hideProgressBar: false, 43 | closeOnClick: true, 44 | pauseOnHover: true, 45 | draggable: true, 46 | progress: undefined, 47 | theme: "dark", 48 | }); 49 | } 50 | } 51 | 52 | return ( 53 | <> 54 | 55 |

56 |

57 |

58 |

TOTAL RAISED

59 |

60 |

65 | {poolState.raised} SOL 66 |

67 |

68 | 69 | 73 | Deposit 74 | 75 | {/* */} 76 |

77 |

78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | @import './fonts.scss'; 2 | @import './reset.scss'; 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #121212; 7 | --brown: #E0C195; 8 | --dark-brown: #958883; 9 | } 10 | 11 | * { 12 | box-sizing: border-box; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | // variables 18 | $font-vast-shadow: "VastShadow-Regular"; 19 | $font-rye: "Rye-Regular"; 20 | $white: #fff; 21 | $black: #121212; 22 | $brown: #E0C195; 23 | 24 | html { 25 | font-size: calc(100vw / 1792px * 10px); 26 | 27 | @media screen and (max-width: 1540px) and (min-width: 980px) { 28 | font-size: calc(100vw / 1540px * 10px); 29 | } 30 | 31 | @media screen and (max-width: 768px) { 32 | font-size: calc(100vw / 375px * 10px); 33 | } 34 | } 35 | 36 | body { 37 | font-family: $font-vast-shadow; 38 | background-color: $black; 39 | color: $white; 40 | font-weight: 400; 41 | } 42 | 43 | h1, 44 | h2, 45 | h3, 46 | h4 { 47 | font-family: var(--font-rye); 48 | } 49 | 50 | h2 { 51 | font-size: 7rem; 52 | line-height: 8.4rem; 53 | 54 | @media screen and (max-width: 768px) { 55 | font-size: 3rem; 56 | line-height: 4.2rem; 57 | } 58 | } 59 | 60 | a { 61 | text-decoration: none; 62 | color: $white; 63 | } 64 | 65 | p { 66 | font-size: 2rem; 67 | line-height: 3rem; 68 | font-family: var(--font-vast-shadow); 69 | 70 | @media screen and (max-width: 768px) { 71 | font-size: 1rem; 72 | line-height: 2rem; 73 | } 74 | } 75 | 76 | button { 77 | border: none; 78 | outline: none; 79 | background: none; 80 | color: $white; 81 | font-family: $font-rye; 82 | cursor: pointer; 83 | font-size: 2rem; 84 | line-height: 1; 85 | } 86 | 87 | img { 88 | width: 100%; 89 | height: 100%; 90 | object-fit: cover; 91 | } 92 | 93 | dialog { 94 | padding: 0; 95 | border: none; 96 | background-color: transparent; 97 | margin: auto; 98 | 99 | &::backdrop { 100 | background-color: rgba(0, 0, 0, 0.7); 101 | } 102 | } 103 | 104 | dialog[open] { 105 | animation: fadein 0.7s ease forwards; 106 | } 107 | 108 | @keyframes fadein { 109 | 0% { 110 | opacity: 0; 111 | } 112 | 113 | 100% { 114 | opacity: 1; 115 | } 116 | } 117 | 118 | .inline__light__text { 119 | color: var(--brown); 120 | } 121 | 122 | .button { 123 | padding-top: 1.7rem; 124 | padding-bottom: 1.7rem; 125 | width: 100%; 126 | background: #3E3027; 127 | border: 0.2rem solid #3E3027; 128 | transition: all 0.3s ease; 129 | 130 | &:hover { 131 | background: none; 132 | border: 0.2rem solid var(--white); 133 | } 134 | } 135 | 136 | .wallet-adapter-button-trigger { 137 | background-color: transparent !important; 138 | font-size: 28px; 139 | } 140 | 141 | .wallet-adapter-button { 142 | background-color: transparent !important; 143 | font-size: 28px; 144 | } -------------------------------------------------------------------------------- /src/components/popup/contributePopup.module.scss: -------------------------------------------------------------------------------- 1 | .popup { 2 | width: 88.2rem; 3 | height: fit-content; 4 | border-radius: 1rem; 5 | border: 0.3rem solid #6C5243; 6 | background: rgba($color: #0E0E0E9C, $alpha: 0.6); 7 | backdrop-filter: blur(1rem); 8 | padding: 9rem 6.5rem; 9 | color: var(--white); 10 | position: fixed; 11 | 12 | @media screen and (max-width: 768px) { 13 | width: 32.8rem; 14 | padding: 2rem; 15 | } 16 | } 17 | 18 | .balance__heading__wrapper { 19 | display: flex; 20 | justify-content: flex-start; 21 | align-items: center; 22 | gap: 1.5rem; 23 | margin-bottom: 3rem; 24 | 25 | @media screen and (max-width: 768px) { 26 | gap: 1rem; 27 | } 28 | } 29 | 30 | .popup__logo { 31 | width: 5rem; 32 | height: 5rem; 33 | 34 | @media screen and (max-width: 768px) { 35 | width: 3rem; 36 | height: 3rem; 37 | } 38 | } 39 | 40 | .balance__wrapper { 41 | padding-bottom: 4rem; 42 | border-bottom: 0.15rem solid #6C5243; 43 | 44 | @media screen and (max-width: 768px) { 45 | padding-bottom: 2.2rem; 46 | } 47 | } 48 | 49 | .balance { 50 | width: 100%; 51 | position: relative; 52 | height: 13.5rem; 53 | display: flex; 54 | align-items: center; 55 | justify-content: space-between; 56 | padding-left: 9.3rem; 57 | padding-right: 5.5rem; 58 | color: var(--black); 59 | 60 | @media screen and (max-width: 768px) { 61 | padding-left: 2rem; 62 | padding-right: 1rem; 63 | height: 5.5rem; 64 | } 65 | } 66 | 67 | .balance__paper__image { 68 | position: absolute; 69 | top: 0; 70 | left: 0; 71 | width: 100%; 72 | height: 100%; 73 | z-index: -1; 74 | } 75 | 76 | .balance__amount { 77 | font-size: 3.5rem; 78 | 79 | @media screen and (max-width: 768px) { 80 | font-size: 1.5rem; 81 | } 82 | } 83 | 84 | .contribute__wrapper { 85 | padding-top: 5rem; 86 | 87 | @media screen and (max-width: 768px) { 88 | padding-top: 2.2rem; 89 | } 90 | } 91 | 92 | .contribute__input { 93 | width: 100%; 94 | box-sizing: border-box; 95 | outline: none; 96 | border: 0.15rem solid var(--brown); 97 | border-radius: 0.5rem; 98 | padding: 2.4rem 3.5rem; 99 | background: var(--black); 100 | color: var(--white); 101 | font-size: 3rem; 102 | font-family: var(--font-vash-shadow); 103 | 104 | @media screen and (max-width: 768px) { 105 | padding: 1rem 1.5rem; 106 | font-size: 1.5rem; 107 | } 108 | } 109 | 110 | .no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button { 111 | -webkit-appearance: none !important; 112 | margin: 0 !important; 113 | } 114 | 115 | .no-spin { 116 | -moz-appearance:textfield !important; 117 | } 118 | 119 | .contribute__button { 120 | margin-top: 3rem; 121 | } 122 | 123 | .close__button { 124 | position: absolute; 125 | top: 3rem; 126 | right: 3rem; 127 | width: 2.5rem; 128 | height: 2.5rem; 129 | 130 | @media screen and (max-width: 768px) { 131 | top: 1.5rem; 132 | right: 1.5rem; 133 | width: 1.2rem; 134 | height: 1.2rem; 135 | } 136 | } -------------------------------------------------------------------------------- /src/App.module.scss: -------------------------------------------------------------------------------- 1 | // ----------------- 2 | // HERO SECTION 3 | // ----------------- 4 | .home__hero__section { 5 | height: 100vh; 6 | position: relative; 7 | } 8 | 9 | .home__hero__image__wrapper { 10 | width: 100%; 11 | height: 100vh; 12 | } 13 | 14 | .home__hero__heading { 15 | font-size: 10rem; 16 | line-height: 1; 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | text-wrap: nowrap; 22 | 23 | @media screen and (max-width: 768px) { 24 | font-size: 3rem; 25 | line-height: 4.2rem; 26 | margin-top: -20rem; 27 | } 28 | } 29 | 30 | .home__round__heading__2 { 31 | @media screen and (max-width: 768px) { 32 | font-size: 2.5rem; 33 | line-height: 4.2rem; 34 | } 35 | } 36 | 37 | // ----------------- 38 | // ROUND SECTION 39 | // ----------------- 40 | 41 | .home__round__section { 42 | position: relative; 43 | padding-top: 6.7rem; 44 | padding-bottom: 13.7rem; 45 | } 46 | 47 | .round__section__sale__wrapper { 48 | margin-top: 8rem; 49 | display: flex; 50 | align-items: center; 51 | justify-content: center; 52 | gap: 19.3rem; 53 | } 54 | 55 | .round__section__sale__image { 56 | width: 51.1rem; 57 | height: 66.4rem; 58 | 59 | @media screen and (max-width: 768px) { 60 | display: none; 61 | } 62 | 63 | &.mobile { 64 | display: none; 65 | 66 | @media screen and (max-width: 768px) { 67 | display: block; 68 | width: 26.5rem; 69 | height: 35rem; 70 | margin-bottom: 6rem; 71 | } 72 | } 73 | } 74 | 75 | .round__section__background__image { 76 | position: absolute; 77 | top: 0; 78 | left: 0; 79 | height: 100%; 80 | width: 100%; 81 | } 82 | 83 | .home__round__heading { 84 | color: var(--brown); 85 | } 86 | 87 | .home__round__section__content__wrapper { 88 | position: relative; 89 | z-index: 2; 90 | display: flex; 91 | align-items: center; 92 | justify-content: flex-start; 93 | flex-direction: column; 94 | 95 | @media screen and (max-width: 768px) { 96 | padding: 0 2rem; 97 | } 98 | } 99 | 100 | .round__section__sale__info__wrapper { 101 | display: flex; 102 | align-items: center; 103 | justify-content: center; 104 | gap: 2.4rem; 105 | flex-direction: column; 106 | } 107 | 108 | .sale__info__para { 109 | max-width: 70rem; 110 | margin-left: 4rem; 111 | margin-top: 2.7rem; 112 | 113 | @media screen and (max-width: 768px) { 114 | margin-left: 0; 115 | margin-top: 1.5rem; 116 | text-align: center; 117 | } 118 | } 119 | 120 | // ----------------- 121 | // COUNTER SECTION 122 | // ----------------- 123 | .home__counter__section { 124 | display: flex; 125 | align-items: center; 126 | justify-content: center; 127 | padding-top: 5rem; 128 | padding-bottom: 16.5rem; 129 | position: relative; 130 | 131 | @media screen and (max-width: 768px) { 132 | flex-direction: column; 133 | } 134 | } 135 | 136 | .counter__section__background__image { 137 | position: absolute; 138 | top: 0; 139 | left: 0; 140 | height: 100%; 141 | width: 100%; 142 | z-index: -1; 143 | } -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import classes from "./App.module.scss"; 2 | import { useMemo, useContext } from "react"; 3 | 4 | import { 5 | ConnectionProvider, 6 | WalletProvider, 7 | } from "@solana/wallet-adapter-react"; 8 | import { WalletModalProvider } from "@solana/wallet-adapter-react-ui"; 9 | import { WalletAdapterNetwork } from "@solana/wallet-adapter-base"; 10 | import { 11 | GlowWalletAdapter, 12 | PhantomWalletAdapter, 13 | SlopeWalletAdapter, 14 | SolflareWalletAdapter, 15 | SolletExtensionWalletAdapter, 16 | SolletWalletAdapter, 17 | TorusWalletAdapter, 18 | } from "@solana/wallet-adapter-wallets"; 19 | 20 | import { 21 | createDefaultAuthorizationResultCache, 22 | SolanaMobileWalletAdapter, 23 | } from "@solana-mobile/wallet-adapter-mobile"; 24 | 25 | import { clusterApiUrl } from "@solana/web3.js"; 26 | import "@solana/wallet-adapter-react-ui/styles.css"; 27 | import { ToastContainer } from "react-toastify"; 28 | import "react-toastify/dist/ReactToastify.css"; 29 | 30 | import { PersonalInfoContextProvider } from "./web3/PersonalInfo"; 31 | import { PersonalInfoContext } from "./web3/PersonalInfo"; 32 | 33 | // components 34 | import SaleInfo from "./components/saleInfo/saleInfo"; 35 | import Counter from "./components/counter/counter"; 36 | import ProgressCard from "./components/progressCard/progressCard"; 37 | 38 | // images 39 | import heroImage from "./assets/sale-hero-image.png"; 40 | import roundImage from "./assets/round-section-image.png"; 41 | import roundBackgroundImage from "./assets/round-background-image.png"; 42 | import counterBg from "./assets/counter-bg.png"; 43 | import Navigation from "./components/navigation/navigation"; 44 | import Footer from "./components/footer/footer"; 45 | 46 | // home page hero section 47 | function HeroSection() { 48 | return ( 49 |

50 |

51 |

52 |

53 |

PRIVATE SALE

54 |

55 | ); 56 | } 57 | 58 | // home page round sale section 59 | function RoundSection() { 60 | const { poolState } = useContext(PersonalInfoContext); 61 | return ( 62 |

63 |

68 |

69 |

74 |

$JUDGE

75 |

Private Sale Round

76 |

77 |

82 |

83 | 84 | 85 | 86 | 92 |

93 | Claiming of $JUDGE{" "} 94 | tokens will be available after completion of the public sale and 95 | liquidity event. 96 |

97 |

98 |

99 |

100 |

101 | ); 102 | } 103 | 104 | // counter section 105 | function CounterSection() { 106 | return ( 107 |

108 |

113 | 114 | 115 |

116 | ); 117 | } 118 | 119 | // home page 120 | export default function App() { 121 | 122 | const network = WalletAdapterNetwork.Devnet; 123 | const endpoint = useMemo(() => clusterApiUrl(network), [network]); 124 | 125 | const wallets = useMemo( 126 | () => [ 127 | new SolanaMobileWalletAdapter({ 128 | cluster: WalletAdapterNetwork.Devnet, 129 | appIdentity: { name: "Solana Wallet Adapter App" }, 130 | authorizationResultCache: createDefaultAuthorizationResultCache(), 131 | }), 132 | new PhantomWalletAdapter(), 133 | new GlowWalletAdapter(), 134 | new SlopeWalletAdapter(), 135 | new SolflareWalletAdapter({ network }), 136 | new SolletWalletAdapter({ network }), 137 | new SolletExtensionWalletAdapter({ network }), 138 | new TorusWalletAdapter(), 139 | ], 140 | [network] 141 | ); 142 | 143 | return ( 144 | <> 145 | 146 | 147 | 148 | 149 | 150 |

151 | 152 | 153 | 154 |

155 | 156 |