add the launchpad page

main
wholespace214 1 year ago
parent cafacc0e44
commit 979c3a432f
  1. 4
      src/app/create-locks/page.js
  2. 8
      src/app/create-token/page.js
  3. 52
      src/app/globals.css
  4. 322
      src/app/launchpad/page.js
  5. 2
      src/app/multi-sender/page.js
  6. 15
      src/components/Form/Input/index.js

@ -44,8 +44,8 @@ const CreateLocks = () => {
</Success>
<div className="mt-11 flex flex-col gap-8">
<Input placeholder="Token or LP Token Address" />
<Input label="Amount" placeholder="0" />
<Input label="Lock until" placeholder="09/09/2023 03:57 pm" />
<Input label="AMOUNT" placeholder="0" />
<Input label="LOCK UNTIL" placeholder="09/09/2023 03:57 pm" />
<Warning>
<>
<p className="text-[14px] text-[#FFF7CD]">

@ -48,13 +48,13 @@ const CreateToken = () => {
</div>
<div className="flex flex-row gap-8">
<Input label="token name" placeholder="Ex: Ethereum" />
<Input label="Token Symbol" placeholder="Ex: ETH" />
<Input label="TOKEN NAME" placeholder="Ex: Ethereum" />
<Input label="TOKEN SYMBOL" placeholder="Ex: ETH" />
</div>
<div className="flex flex-row gap-8">
<Input label="Token Decimals" placeholder="18" />
<Input label="Total Supply" placeholder="Ex: 1000000000" />
<Input label="TOKEN DECIMALS" placeholder="18" />
<Input label="TOTAL SUPPLY" placeholder="Ex: 1000000000" />
</div>
</div>
</div>

@ -2,26 +2,40 @@
@tailwind components;
@tailwind utilities;
/* :root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
input[type="radio"] {
/* Add if not using autoprefixer */
-webkit-appearance: none;
/* Remove most all native input styles */
appearance: none;
/* For iOS < 15 */
background-color: var(#fcbf07);
/* Not removed via appearance */
margin: 0;
font: inherit;
color: #fcbf07;
width: 1.15em;
height: 1.15em;
border: 0.1em solid #fcbf07;
border-radius: 50%;
transform: translateY(-0.075em);
display: grid;
place-content: center;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
input[type="radio"]::before {
content: "";
width: 0.5em;
height: 0.5em;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(rgb(190, 21, 21));
/* Windows High Contrast Mode */
background-color: #fcbf07;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
} */
input[type="radio"]:checked::before {
transform: scale(1);
}

@ -0,0 +1,322 @@
"use client";
import React, { useState, useEffect } from "react";
//! import components
import Input from "@/components/Form/Input";
const Launchpad = () => {
const [step, setStep] = useState(1);
return (
<div className="min-h-[1300px]">
<div className="bg-[#1B1B1B] rounded-2xl p-8 flex flex-row">
<div className="flex flex-col min-w-[328px] relative">
<p className="text-sm text-[#FCBF07]">Step 1</p>
<p className="text-lg text-white font-semibold mt-5">Approve Token</p>
<p className="text-sm text-[#86888C] mt-4">
Enter the token address <br /> and approve
</p>
{step === 1 && (
<hr className="h-0.5 border-0 bg-[#FCBF07] w-[328px] absolute -top-8 left-0"></hr>
)}
</div>
<div className="flex flex-col min-w-[328px] relative">
<p className="text-sm text-[#FCBF07]">Step 2</p>
<p className="text-lg text-white font-semibold mt-5">
Launchpad Information
</p>
<p className="text-sm text-[#86888C] mt-4">
Enter the Fair Launch information, in <br /> case of trouble check
our <span className="text-[#FCBF07]">Docs</span>
</p>
{step === 2 && (
<hr className="h-0.5 border-0 bg-[#FCBF07] w-[328px] absolute -top-8 left-0"></hr>
)}
</div>
<div className="flex flex-col min-w-[328px] relative">
<p className="text-sm text-[#FCBF07]">Step 3</p>
<p className="text-lg text-white font-semibold mt-5">
Project Information
</p>
<p className="text-sm text-[#86888C] mt-4">
Add project links, <br /> description and select tier
</p>
{step === 3 && (
<hr className="h-0.5 border-0 bg-[#FCBF07] w-[328px] absolute -top-8 left-0"></hr>
)}
</div>
<div className="flex flex-col min-w-[328px] relative">
<p className="text-sm text-[#FCBF07]">Step 4</p>
<p className="text-lg text-white font-semibold mt-5">Submit</p>
<p className="text-sm text-[#86888C] mt-4">Submit your presale</p>
{step === 4 && (
<hr className="h-0.5 border-0 bg-[#FCBF07] w-[328px] absolute -top-8 left-0"></hr>
)}
</div>
</div>
<div className="bg-[#1B1B1B] rounded-2xl p-8 mt-6">
{step === 1 && (
<div className="flex flex-col gap-8">
<div className="flex flex-row justify-between">
<p className="text-xs text-[#FBBF04]">(*) is required field.</p>
<button className="py-[10px] px-[61px] bg-[#FBBF04] rounded-[10px] text-sm text-[#151103] font-semibold">
Create Token
</button>
</div>
<Input
label="Token Address"
required={true}
placeholder="Token Address"
/>
<div className="flex flex-col gap-5">
<p className="text-sm text-[#FBBF04]">Pool Creation fee: 1 BNB</p>
<div className="flex flex-col gap-3">
<p className="text-sm text-white">Currency</p>
<div className="flex flex-col gap-2">
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">BNB</p>
</div>
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">USDT</p>
</div>
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">USDC</p>
</div>
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">DAI</p>
</div>
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">FLOKI</p>
</div>
<p className="text-sm text-[#FBBF04]">
Users will pay with BNB for your token
</p>
</div>
</div>
<div className="flex flex-col gap-3">
<p className="text-sm text-white">Fee options</p>
<div className="flex flex-col gap-2">
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">
3.5% BNB raised only{" "}
<span className="text-[#FCBF07]">(Recommended)</span>
</p>
</div>
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">Other</p>
</div>
</div>
</div>
<div className="flex flex-col gap-3">
<p className="text-sm text-white">Listing Options</p>
<div className="flex flex-col gap-2">
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">Auto Listing</p>
</div>
</div>
</div>
<div className="flex flex-col gap-3">
<p className="text-sm text-white">Affiliate Program</p>
<div className="flex flex-col gap-2">
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">Disable Affiliate</p>
</div>
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="currency" />
<p className="text-sm text-[#BCBBB9]">Enable Affiliate</p>
</div>
</div>
</div>
</div>
</div>
)}
{step === 2 && (
<div className="flex flex-col gap-7">
<p className="text-xs text-[#FBBF04]">(*) is required field.</p>
<div className="flex flex-col gap-2">
<Input label="Presale rate" placeholder="0" required={true} />
<p className="text-xs text-[#FCBF07]">
If I spend 1 how many tokens will I receive?
</p>
</div>
<div className="flex flex-col gap-2">
<p className="text-sm text-white">Whitelist</p>
<div className="flex flex-row gap-4 text-sm text-white">
<div className="flex flex-row gap-2 items-center">
<input
type="radio"
name="whitelist"
id=""
checked
onChange={""}
/>
<p>Disable</p>
</div>
<div className="flex flex-row gap-2 items-center">
<input type="radio" name="whitelist" id="" />
<p>Enable</p>
</div>
</div>
<p className="text-xs text-[#FCBF07]">
You can enable/disable whitelist anytime
</p>
</div>
<div className="flex flex-row gap-6">
<div className="flex flex-col gap-2 w-[100%]">
<Input label="SoftCap (BNB)" placeholder="0" required={true} />
<p className="text-xs text-[#FCBF07]">
Softcap must be 25% of Hardcap!
</p>
</div>
<div className="flex flex-col gap-2 w-[100%]">
<Input label="HardCap (BNB)" placeholder="0" required={true} />
<p className="text-xs text-[#FCBF07]">
HardCap must be positive number
</p>
</div>
</div>
<div className="flex flex-row gap-6">
<div className="flex flex-col gap-2 w-[100%]">
<Input
label="Minimum buy (BNB)"
placeholder="0"
required={true}
/>
<p className="text-xs text-[#FCBF07]">
Minimum buy must be positive number
</p>
</div>
<div className="flex flex-col gap-2 w-[100%]">
<Input
label="Maximum buy (BNB)"
placeholder="0"
required={true}
/>
<p className="text-xs text-[#FCBF07]">
Maximum buy must be positive number
</p>
</div>
</div>
<div className="flex flex-row gap-6">
<div className="flex flex-col gap-2 w-[100%]">
<Input label="Refund type" placeholder="0" required={true} />
</div>
<div className="flex flex-col gap-2 w-[100%]">
<Input label="Router" placeholder="0" required={true} />
</div>
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-row gap-6">
<div className="flex flex-col gap-2 w-[100%]">
<Input
label="Minimum buy (BNB)"
placeholder="0"
required={true}
/>
<p className="text-xs text-[#FCBF07]">
Liquidity must be greater than 50%
</p>
</div>
<div className="flex flex-col gap-2 w-[100%]">
<Input
label="Maximum buy (BNB)"
placeholder="0"
required={true}
/>
<p className="text-xs text-[#FCBF07]">1 BNB = 0 FLASH</p>
</div>
</div>
<p className="text-xs text-[#FCBF07]">
Enter the percentage of raised funds that should be allocated to
Liquidity on (Min 51%, Max 100%) <br />
If I spend 1 on how many tokens will I receive? Usually this
amount is lower than presale rate to allow for a higher listing
price on
</p>
</div>
<div className="flex flex-col gap-2">
<p className="text-sm text-white">
Select start time & end time (UTC)
</p>
<div className="flex flex-row gap-6">
<div className="flex flex-col gap-2 w-[100%]">
<Input label="Start time (UTC)" placeholder="0" />
<p className="text-xs text-[#FCBF07]">
The duration between start time and end time must be less
than 10080 minutes
</p>
</div>
<div className="flex flex-col gap-2 w-[100%]">
<Input label="End time (UTC)" placeholder="0" />
</div>
</div>
</div>
<div className="flex flex-col gap-2 w-[100%]">
<Input
label="Liquidity lockup (days)"
placeholder="0"
required={true}
/>
<p className="text-xs text-[#FCBF07]">
liquidityLockTime must be greater than or equal to 30
</p>
</div>
<div className="flex flex-col gap-6">
<p className="text-right text-sm text-[#FCBF07]">
Need 0 FLASH to create launchpad.
</p>
<div className="flex flex-row justify-end gap-5">
<button className="px-12 py-[10px] text-sm text-[#FBBF04] rounded-[10px] font-semibold border border-[#FBBF04]">
Previous
</button>
<button className="px-12 py-[10px] text-sm text-[#151103] font-semibold rounded-[10px] bg-[#FBBF04]">
Next
</button>
</div>
</div>
</div>
)}
</div>
</div>
);
};
export default Launchpad;

@ -39,7 +39,7 @@ const MultiSender = () => {
</div>
<div className="mt-4 p-8 rounded-2xl bg-[#1B1B1B] flex flex-col gap-8">
<div>
<Input label="Token address" />
<Input label="TOKEN ADDRESS" />
<p className="text-[#86888C] text-base mt-2">
Flash Multi-sender allows you to send ERC20 token in batch by
easiest way. You can enter token address to send specific token or

@ -1,7 +1,18 @@
const Input = ({ label = "", value = "", onChange = "", placeholder = "" }) => {
const Input = ({
label = "",
value = "",
onChange = "",
placeholder = "",
required = false,
}) => {
return (
<div className="flex flex-col gap-2 w-[100%]">
{label && <p className="text-white text-[14px] uppercase"> {label} </p>}
{label && (
<p className="text-white text-[14px]">
{label}
{required && <span className="text-[#FCBF07]">*</span>}
</p>
)}
<input
type="text"
placeholder={placeholder}

Loading…
Cancel
Save