diff --git a/README.md b/README.md index f9abe0b..4870b23 100644 --- a/README.md +++ b/README.md @@ -1 +1,5 @@ -# AttestDeFi \ No newline at end of file +# AttestDeFi + +AttestDeFi is a dapp designed to simplify how EAS users distribute ERC 20 tokens or ether within the Superchain ecosystem based on the attestations granted in a Schema by a specific attestor. + +## How it's made \ No newline at end of file diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 1e53439..f3e614c 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -10,6 +10,7 @@ import Step4 from "~~/components/Step4"; import Step5 from "~~/components/Step5"; import Step6 from "~~/components/Step6"; import Navbar from "~~/components/StepperPanel"; +import { SwitchTheme } from "~~/components/SwitchTheme"; const Home: NextPage = () => { const [currentStep, setCurrentStep] = useState(1); @@ -39,38 +40,37 @@ const Home: NextPage = () => { return (
-
- -
- - {steps.map(step => ( -
-
- {step.index === 1 && } + +
+ + {steps.map(step => ( +
+
+ {step.index === 1 && } - {step.index === 2 && } + {step.index === 2 && } - {step.index === 3 && } + {step.index === 3 && } - {step.index === 4 && } + {step.index === 4 && } - {step.index === 5 && } + {step.index === 5 && } - {step.index === 6 && } -
+ {step.index === 6 && }
- ))} - -
+ + ))} +
+
); }; diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 8025050..7650f66 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -59,15 +59,11 @@ export const HeaderMenuLinks = () => { */ export const Header = () => { return ( -
+
-
- SE2 logo -
-
- AttestDeFi - Distribute rewards with ease +
+ SE2 logo
diff --git a/packages/nextjs/components/Next.tsx b/packages/nextjs/components/Next.tsx index 5215daa..8587430 100644 --- a/packages/nextjs/components/Next.tsx +++ b/packages/nextjs/components/Next.tsx @@ -7,30 +7,18 @@ export default function Next({ goBack, next }: backType) { return (
{goBack && ( - )}
{next && ( - )} {!next && ( - )} diff --git a/packages/nextjs/components/Step1.tsx b/packages/nextjs/components/Step1.tsx index 370e8c2..53b812e 100644 --- a/packages/nextjs/components/Step1.tsx +++ b/packages/nextjs/components/Step1.tsx @@ -45,34 +45,29 @@ function Step1({ handleNext }: { handleNext: any }) { return (
- - Please, select the network you want to validate the attestations from. - - -
- -
+ In which network the attestations were granted? + diff --git a/packages/nextjs/components/Step2.tsx b/packages/nextjs/components/Step2.tsx index 75089a9..a97020a 100644 --- a/packages/nextjs/components/Step2.tsx +++ b/packages/nextjs/components/Step2.tsx @@ -69,9 +69,9 @@ function Step2({ handleNext, handleBack }: { handleNext: any; handleBack: any }) // initial={location.state.name === "step1" ? "initial" : "initial2"} animate="animate" exit={goback ? "exit2" : "exit"} - className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl p-10 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full" + className="flex flex-col mb-8 md:mb-0 rounded-2xl p-10 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full" > - Enter the Schema ID that granted the attestations. + Enter the Schema ID from which the attestations were granted.
setDisperseFormData("schemaID", event.target.value)} placeholder="Enter schema ID" - className="mt-4 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" + className="bg-zen/50 text-gray-600 dark:text-white text-base" />
diff --git a/packages/nextjs/components/Step3.tsx b/packages/nextjs/components/Step3.tsx index f7fec30..81c70ae 100644 --- a/packages/nextjs/components/Step3.tsx +++ b/packages/nextjs/components/Step3.tsx @@ -97,11 +97,9 @@ export default function Step3({ handleNext, handleBack }: { handleNext: any; han // initial={location.state.name === "step2" ? "initial" : "initial2"} animate="animate" exit={goback ? "exit2" : "exit"} - className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full" + className="flex flex-col mb-8 md:mb-0 rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full" > - - Enter the attester address or ENS you want to validate the attestations from. - + Which address granted the attestations?
diff --git a/packages/nextjs/components/Step4.tsx b/packages/nextjs/components/Step4.tsx index 3e5972a..902d8ae 100644 --- a/packages/nextjs/components/Step4.tsx +++ b/packages/nextjs/components/Step4.tsx @@ -63,23 +63,21 @@ export default function Step4({ handleNext, handleBack }: { handleNext: any; han initial="initial" animate="animate" exit={goback ? "exit2" : "exit"} - className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full" + className="flex flex-col mb-8 md:mb-0 rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full" > - - Select the network where you want to disperse your rewards on. - -
+ In which network do you want to distribute funds? +
diff --git a/packages/nextjs/components/Step5.tsx b/packages/nextjs/components/Step5.tsx index b10163f..8b497f2 100644 --- a/packages/nextjs/components/Step5.tsx +++ b/packages/nextjs/components/Step5.tsx @@ -73,21 +73,19 @@ export default function Step5({ handleNext, handleBack }: { handleNext: any; han initial="initial" animate="animate" exit={goback ? "exit2" : "exit"} - className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full" + className="flex flex-col mb-8 md:mb-0 rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full" > - - Select the type of rewards you want to disperse, it can be any ERC20 token. - -
+ Select the type of rewards you want to disperse. +
{disperseFormData.typeOfReward === "custom" ? ( setDisperseFormData("erc20address", event.target.value)} - className="mt-4 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" + className="placeholder:text-white/60" /> ) : null}
diff --git a/packages/nextjs/components/Step6.tsx b/packages/nextjs/components/Step6.tsx index 78144b6..85d8192 100644 --- a/packages/nextjs/components/Step6.tsx +++ b/packages/nextjs/components/Step6.tsx @@ -46,7 +46,7 @@ export default function Step6() { const [sum, setSum] = useState(0); //suma total const [inputs, setInputs] = useState({}); // valores de los inputs const [attestations, setAttestations] = useState([]); // manejo atestaciones - const [distributionAmount, setDistributionAmount] = useState(0); // impresion cantidad distrib + // const [distributionAmount] = useState(0); // impresion cantidad distrib const GET_ATTESTERS = gql` query Attestations($schemaID: String!, $attesterAddress: String!) { @@ -87,15 +87,15 @@ export default function Step6() { } // Cantidad impresa imput - function applyAmmout() { - const updatedInputs = Object.keys(inputs).reduce((acc: { [key: string]: number }, key) => { - acc[key] = distributionAmount; // asigno valor a cada imput + // function applyAmmout() { + // const updatedInputs = Object.keys(inputs).reduce((acc: { [key: string]: number }, key) => { + // acc[key] = distributionAmount; // asigno valor a cada imput - return acc; - }, {}); + // return acc; + // }, {}); - setInputs(updatedInputs); - } + // setInputs(updatedInputs); + // } // cambio del imput function handleInput(e: any) { @@ -155,41 +155,19 @@ export default function Step6() { }; return ( -
+ -
- Transfer funds to multiple receivers. - -
- setDistributionAmount(+e.target.value)} - placeholder="Distribution amount" - className=" px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm w-full md:w-32" - /> - -
-
- -
+ Check the addresses and define the reward amount before send it. +
- + @@ -198,7 +176,7 @@ export default function Step6() { {attestations.map((attestation: any, idx: number) => ( - +
Recipient Address Reward Amount
{idx + 1}
@@ -210,14 +188,14 @@ export default function Step6() { name={`ammount-${idx + 1}`} // id input value={inputs[`ammount-${idx + 1}`] || ""} // valor del input onChange={handleInput} // funciรณn de cambio - className="mt-4 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" + className="" />
-
Total tokens: {sum}
-
diff --git a/packages/nextjs/components/StepperPanel.tsx b/packages/nextjs/components/StepperPanel.tsx index 7ed6e2e..19f8c2e 100644 --- a/packages/nextjs/components/StepperPanel.tsx +++ b/packages/nextjs/components/StepperPanel.tsx @@ -19,14 +19,17 @@ export default function StepperPanel({ step }: { step: number }) { variants={navVariant} initial="initial" animate="animate" - className="flex w-full pt-5 h-[170px] md:z-50 space-x-[17px] text-[16px] justify-center md:flex-col md:space-x-0 md:space-y-8 md:h-[720px] md:w-[290px] md:justify-start md:rounded-xl text-white" + className="bg-gradient-to-t from-bit to-zen fixed left-48 top-1/2 -translate-y-1/2 font-oxy flex w-full md:z-50 justify-center + md:flex-col px-2 py-16 md:space-x-0 md:space-y-11 md:w-[290px] md:justify-start rounded-md text-white" > - - - - - - + + + + + + + + ); } diff --git a/packages/nextjs/components/StepperPaneltem.tsx b/packages/nextjs/components/StepperPaneltem.tsx index 9910824..1cf7d8a 100644 --- a/packages/nextjs/components/StepperPaneltem.tsx +++ b/packages/nextjs/components/StepperPaneltem.tsx @@ -19,16 +19,13 @@ const navItemVariant: Variants = { export const StepperPaneltem = ({ step, type, on }: NavItemType) => { return ( - +
{step}
-
-

STEP {step}

-

{type}

-
+ {type} ); }; diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx index 4dc20af..f2b5372 100644 --- a/packages/nextjs/components/SwitchTheme.tsx +++ b/packages/nextjs/components/SwitchTheme.tsx @@ -25,7 +25,7 @@ export const SwitchTheme = ({ className }: { className?: string }) => { if (!mounted) return null; return ( -
+
{ return (
-

{title}

-

{children}

+

{title}

+

{children}

); }; diff --git a/packages/nextjs/public/logo.svg b/packages/nextjs/public/logo.svg index 93e4b40..833caff 100644 --- a/packages/nextjs/public/logo.svg +++ b/packages/nextjs/public/logo.svg @@ -1,10 +1,43 @@ - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css index 8d0e00c..4c693a1 100644 --- a/packages/nextjs/styles/globals.css +++ b/packages/nextjs/styles/globals.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); + @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; @@ -7,6 +9,19 @@ background: oklch(var(--b2)); } +input, select { + @apply font-oxy text-lg placeholder:italic px-6 py-3 w-full border-zen mx-auto rounded-md bg-bit/80 text-white; +} + +Title { + @apply font-oxy +} + +button { + @apply + border-bit border-2 dark:text-white text-black hover:text-white hover:bg-bit px-6 py-1 rounded-md font-ral xl:text-lg +} + body { min-height: 100vh; } @@ -31,17 +46,4 @@ p { @apply shadow-none; } -nav { - background-image: url(/zenbaner-mobile.png); - background-size: cover; - background-repeat: no-repeat; -} - -@media (min-width: 768px) { - nav { - background-image: url(/zenbaner-vertical.png); - background-size: contain; - background-repeat: no-repeat; - } -} diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js index ea11b08..60304bd 100644 --- a/packages/nextjs/tailwind.config.js +++ b/packages/nextjs/tailwind.config.js @@ -55,7 +55,7 @@ module.exports = { neutral: "#F9FBFF", "neutral-content": "#385183", "base-100": "#385183", - "base-200": "#2A3655", + "base-200": "#263238", "base-300": "#212638", "base-content": "#F9FBFF", info: "#385183", @@ -81,11 +81,47 @@ module.exports = { }, theme: { extend: { + colors: { + display: ["group-hover"], + zen: "#F3A754", + bit: "#4682B4", + }, + fontFamily: { + ral: ["Raleway"], + oxy: ["Oxygen"], + rob: ["Roboto"], + }, + screens: { + "2xl": "1601px", + "h-sm": { raw: "(min-height: 500px)" }, + "h-md": { raw: "(min-height: 850px)" }, + "h-lg": { raw: "(min-height: 1000px)" }, + }, + borderRadius: { + md: "32px", + in: "20px", + }, boxShadow: { center: "0 0 12px -2px rgb(0 0 0 / 0.05)", }, + keyframes: { + grow: { + "0%": { + width: "0%", + }, + "100%": { + width: "100%", + }, + }, + zoom: { + "0%, 100%": { transform: "scale(1, 1)" }, + "50%": { transform: "scale(1.1, 1.1)" }, + }, + }, animation: { + grow: "grow 5s linear infinite", "pulse-fast": "pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite", + zoom: "zoom 1s ease infinite", }, }, },