Skip to content

Commit

Permalink
feat: added step 6 to configure reward transfer ammounts
Browse files Browse the repository at this point in the history
  • Loading branch information
Markkos89 committed Aug 6, 2024
1 parent c51c6d8 commit aee26c1
Show file tree
Hide file tree
Showing 8 changed files with 168 additions and 43 deletions.
5 changes: 1 addition & 4 deletions packages/nextjs/app/distribute/_components/NavItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,7 @@ export const NavItem = ({ step, type, on }: NavItemType) => {
return (
<motion.div variants={navItemVariant} className="flex md:p-10 md:items-center md:py-0 md:space-x-5">
<div
className={
"h-11 w-11 border font-bold border-white grid place-items-center rounded-full transition duration-500 ease-in-out " +
(on && "bg-Light-blue border-Light-blue text-Marine-blue")
}
className={`h-8 w-8 border font-bold border-white grid place-items-center rounded-full transition duration-500 ease-in-out ${on ? "bg-green-300 border-green-400 text-blue-700" : ""}`}
>
{step}
</div>
Expand Down
3 changes: 2 additions & 1 deletion packages/nextjs/app/distribute/_components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@ export default function Navbar({ 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-5 md:h-[580px] md:w-[290px] md:justify-start md:rounded-xl text-white"
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"
>
<NavItem step="1" type="ATTEST NETWORK" on={step === 1} />
<NavItem step="2" type="SCHEMA ID" on={step === 2} />
<NavItem step="3" type="ATTESTER ADDRESS" on={step === 3} />
<NavItem step="4" type="DESTINATION NETWORK" on={step === 4} />
<NavItem step="5" type="REWARD TOKEN" on={step === 5} />
<NavItem step="6" type="CONFIGURE TRANSFER" on={step === 6} />
</motion.nav>
);
}
2 changes: 1 addition & 1 deletion packages/nextjs/app/distribute/_components/Step5.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const pageVariant: Variants = {
},
};

export default function Step4({ handleNext, handleBack }: { handleNext: any; handleBack: any }) {
export default function Step5({ handleNext, handleBack }: { handleNext: any; handleBack: any }) {
const [goback, setGoBack] = useState<boolean>(false);

const { disperseFormData, setDisperseFormData } = useGlobalState();
Expand Down
128 changes: 128 additions & 0 deletions packages/nextjs/app/distribute/_components/Step6.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
"use client";

import React, { SyntheticEvent, useState } from "react";
import Next from "./Next";
import { Title } from "./Title";
import { gql, useQuery } from "@apollo/client";
import { Variants, motion } from "framer-motion";
import { useGlobalState } from "~~/services/store/store";

const pageVariant: Variants = {
initial: {
x: "60%",
opacity: 0,
},
animate: {
x: "0%",
opacity: 1,
transition: {
type: "tween",
duration: 0.4,
ease: "easeInOut",
},
},
exit: {
x: "-60%",
opacity: 0,
transition: {
duration: 0.4,
ease: "easeInOut",
},
},
exit2: {
x: "60%",
opacity: 0,
transition: {
duration: 0.4,
ease: "easeInOut",
},
},
};

export default function Step6({ handleNext, handleBack }: { handleNext: any; handleBack: any }) {
const [goback, setGoBack] = useState<boolean>(false);
const { disperseFormData } = useGlobalState();

const GET_ATTESTERS = gql`
query Attestations($schemaID: String!, $attesterAddress: String!) {
attestations(where: { schemaId: { equals: $schemaID }, attester: { equals: $attesterAddress } }) {
id
attester
recipient
schemaId
}
}
`;

const { data } = useQuery(GET_ATTESTERS, {
variables: {
schemaID: disperseFormData.schemaID, // 0xddc12d29e4863e857d1b6429f2afd4bf3d687110bbb425e730b87d5f1efcda5a
attesterAddress: disperseFormData.attesterAddress, // 0xe2A45CA9Ec5780FC389FBD8991980397b8B470AF
},
});

const catchSubmit = (e: SyntheticEvent) => {
e.preventDefault();

const typebtn = ((e.nativeEvent as SubmitEvent).submitter as HTMLInputElement).name;
if (disperseFormData.typeOfReward !== "") {
if (disperseFormData.typeOfReward === "custom" && disperseFormData.erc20address !== "") {
if (typebtn === "back") {
setGoBack(true);
handleBack();
} else if (typebtn === "next") {
setGoBack(false);
handleNext();
}
} else if (disperseFormData.typeOfReward === "ETH") {
if (typebtn === "back") {
setGoBack(true);
handleBack();
} else if (typebtn === "next") {
setGoBack(false);
handleNext();
}
}
}
};

return (
<form onSubmit={catchSubmit} className=" w-full flex flex-col items-center md:h-[580px] md:justify-between">
<motion.section
variants={pageVariant}
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 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
>
<Title title="Configure transfer">Transfer funds to multiple receivers.</Title>
<div className="w-full flex flex-col space-y-4 md:space-y-3 bg-Alabaster p-6 rounded-xl md:p-8 overflow-y-auto">
<table className="table">
<thead>
<tr>
<th></th>
<th>Recipient Address</th>
<th>Reward ammount</th>
</tr>
</thead>
<tbody>
{data?.attestations?.map((attestation: any, idx: number) => (
<tr key={idx}>
<th>{idx + 1}</th>
<td>{attestation.recipient}</td>
<td>
<input
type="text"
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"
/>
</td>
</tr>
))}
</tbody>
</table>
</div>
</motion.section>
<Next goBack={true} next={false} />
</form>
);
}
63 changes: 31 additions & 32 deletions packages/nextjs/app/distribute/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,20 @@ import Step2 from "./_components/Step2";
import Step3 from "./_components/Step3";
import Step4 from "./_components/Step4";
import Step5 from "./_components/Step5";
import Step6 from "./_components/Step6";
import { AnimatePresence } from "framer-motion";
import type { NextPage } from "next";
import { useGlobalState } from "~~/services/store/store";

const Distribute: NextPage = () => {
const [currentStep, setCurrentStep] = useState(1);
const { disperseFormData } = useGlobalState();

const steps = [
{ index: 1, label: "Step 1", content: "Select a network" },
{ index: 2, label: "Step 2", content: "Enter the schema ID" },
{ index: 3, label: "Step 3", content: "Enter the attester address" },
{ index: 4, label: "Step 4", content: "Select a destination network" },
{ index: 5, label: "Step 5", content: "Type of rewards" },
{ index: 6, label: "Success", content: "Form submitted successfully!" },
{ index: 6, label: "Step 6", content: "Configure transfer" },
];
const isLastStep = currentStep === steps.length;
const isFirstStep = currentStep === 1;
Expand All @@ -43,19 +42,18 @@ const Distribute: NextPage = () => {
className="bg-Light-gray grid place-items-center w-screen md:min-h-full box-border overflow-x-hidden"
style={{ fontFamily: "Ubuntu" }}
>
<main className=" flex flex-col items-center min-h-full md:min-h-full w-screen md:max-w-[940px] md:flex-row md:bg-white md:rounded-xl md:p-5 relative md:h-fit md:overflow-x-hidden">
<main className=" flex flex-col items-center min-h-full md:min-h-full w-screen md:max-w-[1280px] md:flex-row md:bg-white md:rounded-xl md:p-5 relative md:h-fit md:overflow-x-hidden md:overflow-hidden">
<Navbar step={currentStep} />
<section className="w-full flex flex-1 flex-col items-center md:h-full md:justify-between md:mb-0">
<section className="w-full flex flex-1 gap-4 flex-col items-center md:h-full md:justify-between md:mb-0">
<AnimatePresence mode="wait">
{steps.map(step => (
<div
key={step.index}
data-hs-stepper-content-item={`{ "index": ${step.index} }`}
className={`${currentStep === step.index ? "active" : ""}`}
className={`${currentStep === step.index ? "active w-full p-4" : ""}`}
style={{ display: currentStep === step.index ? "block" : "none" }}
>
<div className="p-4 bg-gray-50 flex justify-center items-center border border-dashed text-gray-500 dark:text-neutral-500 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
{/* Campos del Formulario */}
<div className="w-full p-4 bg-gray-50 flex justify-center items-center border border-dashed text-gray-500 dark:text-neutral-500 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
{step.index === 1 && <Step1 handleNext={handleNext} />}

{step.index === 2 && <Step2 handleNext={handleNext} handleBack={handleBack} />}
Expand All @@ -66,30 +64,7 @@ const Distribute: NextPage = () => {

{step.index === 5 && <Step5 handleNext={handleNext} handleBack={handleBack} />}

{step.index === 6 && (
<div className="mt-4 gap-8">
<h4 className="text-sm font-medium text-gray-800 dark:text-neutral-200 ">
Please confirm your selections:
</h4>
<hr />
<ul className="mt-2 text-sm text-gray-600 dark:text-neutral-400">
<li>Network: {disperseFormData.baseNetwork}</li>
<li>Schema ID: {disperseFormData.schemaID}</li>
<li>Attester Address: {disperseFormData.attesterAddress}</li>
<li>Destination Network: {disperseFormData.destinationNetwork}</li>
<li>Type of Reward: {disperseFormData.typeOfReward}</li>
{disperseFormData.typeOfReward === "custom" ? (
<li>Custom ERC20 contract address: {disperseFormData.erc20address}</li>
) : null}
</ul>
<button
className="btn btn-primary mt-4 mx-14"
onClick={() => alert("Your rewards will be distributed.")}
>
Disperse
</button>
</div>
)}
{step.index === 6 && <Step6 handleNext={handleNext} handleBack={handleBack} />}
</div>
</div>
))}
Expand All @@ -101,3 +76,27 @@ const Distribute: NextPage = () => {
};

export default Distribute;

// <div className="mt-4 gap-8">
// <h4 className="text-sm font-medium text-gray-800 dark:text-neutral-200 ">
// Please confirm your selections:
// </h4>
// <hr />
// <ul className="mt-2 text-sm text-gray-600 dark:text-neutral-400">
// <li>Network: {disperseFormData.baseNetwork}</li>
// <li>Schema ID: {disperseFormData.schemaID}</li>
// <li>Attester Address: {disperseFormData.attesterAddress}</li>
// <li>Destination Network: {disperseFormData.destinationNetwork}</li>
// <li>Type of Reward: {disperseFormData.typeOfReward}</li>
// {disperseFormData.typeOfReward === "custom" ? (
// <li>Custom ERC20 contract address: {disperseFormData.erc20address}</li>
// ) : null}
// </ul>
// <button
// className="btn btn-primary mt-4 mx-14"
// onClick={() => alert("Your rewards will be distributed.")}
// >
// Disperse
// </button>
// </div>
// )}
4 changes: 2 additions & 2 deletions packages/nextjs/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import "~~/styles/globals.css";
import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";

export const metadata = getMetadata({
title: "Scaffold-ETH 2 App",
description: "Built with 🏗 Scaffold-ETH 2",
title: "AttestDeFi",
description: "Distribute rewards based on attestation with ease",
});

const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
<>
<div className="flex flex-col min-h-screen">
<Header />
<main className="relative flex flex-col flex-1">{children}</main>
<main className="relative flex flex-col flex-1 w-full">{children}</main>
<Footer />
</div>
<Toaster />
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/services/store/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export const useGlobalState = create<GlobalState>(set => ({
},
disperseFormData: {
baseNetwork: "",
schemaID: "",
attesterAddress: "",
schemaID: "0xddc12d29e4863e857d1b6429f2afd4bf3d687110bbb425e730b87d5f1efcda5a",
attesterAddress: "0xe2A45CA9Ec5780FC389FBD8991980397b8B470AF",
destinationNetwork: "",
typeOfReward: "",
erc20address: "",
Expand Down

0 comments on commit aee26c1

Please sign in to comment.