Skip to content

Commit

Permalink
quest-creation-progress (#35)
Browse files Browse the repository at this point in the history
  • Loading branch information
@roshaans
roshaans authored Dec 9, 2023
1 parent 42ed74a commit 8970c0a
Show file tree
Hide file tree
Showing 21 changed files with 915 additions and 652 deletions.
280 changes: 194 additions & 86 deletions questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,79 @@
const { fetch_step_one_data } = VM.require(
"bos.questverse.near/widget/data.data_stepOne"
);
const { fetch_step_two_data } = VM.require(
"bos.questverse.near/widget/data.data_stepTwo"
);
const { fetch_step_three_data } = VM.require(
"bos.questverse.near/widget/data.data_stepThree"
);
const stepOneData = fetch_step_one_data();
const stepTwoData = fetch_step_two_data();
const stepThreeData = fetch_step_three_data();
function handleFormComplete(value) {
const questArgs = {
args: {
quest_id: value.id,
title: value.form.title,
name: context.accountId,
starts_at: value.starts_at,
expires_at: value.expires_at,
total_participants_allowed: value.numberOfParticipants,
indexer_name: value.total_participants_allowed,
description: value.description,
img_url: value.img_url,
tags: value.tags,
humans_only: value.humans_only,
},
};

const totalSteps = 5;
Near.call([
{
contractName: "v0.questverse.near",
methodName: "create_quest",
args: questArgs.args,
deposit: (value.tokensAllocated + 0.02)*10^24,
},
]);
}

State.init({
step: 1,
const steps = [
{
title: "Select Quest Template",
active: state.step === 0,
icon: state.step > 0 ? <i className="bi bi-check2"></i> : undefined,
className: state.step > 0 ? "active-outline" : undefined,
},
{
title: "Allowlist",
active: state.step === 1,
icon: state.step > 1 ? <i className="bi bi-check2"></i> : undefined,
className: state.step > 1 ? "active-outline" : undefined,
},
{
title: "Allocate Rewards",
active: state.step === 2,
icon: state.step > 2 ? <i className="bi bi-check2"></i> : undefined,
className: state.step > 2 ? "active-outline" : undefined,
},
{
title: "Timing",
active: state.step === 3,
icon: state.step > 3 ? <i className="bi bi-check2"></i> : undefined,
className: state.step > 3 ? "active-outline" : undefined,
},
{
title: "Finalize",
active: state.step === 4,
icon: state.step > 4 ? <i className="bi bi-check2"></i> : undefined,
className: state.step > 5 ? "active-outline" : undefined,
},
];

//STEP 1
const totalSteps = 4;

let initialFormState = {
quest_id: value.id,
title: "",
name: context.accountId,
starts_at: null,
expires_at: null,
total_participants_allowed: 10,
indexer_name: "",
description: "",
img_url: "",
tags: ["quest"],
humans_only: False,

//STEP
inputs: {},
//STEP 2
masterList: [],
Expand All @@ -32,8 +89,27 @@ State.init({
//STEP 4
date_start: "",
date_end: "",
indexerConfig: {
selectedOption: "astrodao.near",
selectedAction: "join a dao",
formData: {},
contractID: "",
inputs: {
account_id: "",
amount: "",
post_id: "",
count: "",
tags: "",
role: "",
},
indexerId: "",
},
};

//step5
State.init({
step: 0,
form: initialFormState,
errors: null,
});

const handleNext = (data) => {
Expand All @@ -49,78 +125,110 @@ const handlePrevious = () => {
});
};

const renderStep = () => {
switch (state.step) {
case 1:
return (
<Widget
src={"bos.questverse.near/widget/components.createQuestSteps.stepOne"}
props={{
data: stepOneData,
onNext: (data) => handleNext(data),
}}
/>
);
case 2:
return (
<Widget
src={"bos.questverse.near/widget/newQuestComponents.stepTwo"}
props={{
data: stepTwoData,
onNext: (data) => handleNext(data),
}}
/>
);
case 3:
return (
<Widget
src={"bos.questverse.near/widget/components.createQuestSteps.stepThree"}
props={{
data: stepThreeData,
onNext: (data) => handleNext(data),
}}
/>
);
const handleStepComplete = (value) => {
// const stepValid = true;
// Object.keys(value).forEach((key) => {
// const properties = types["hack.near/type/quest"].properties.find(
// (p) => p.name === key
// );
// const validation = validateType(properties.type, value[key], properties);
// if (validation) {
// State.update({
// errors: {
// ...state.errors,
// [key]: validation,
// },
// });
// stepValid = false;
// } else {
// State.update({
// errors: {
// ...state.errors,
// [key]: null,
// },
// });
// }
// });
//
// if (!stepValid) return;
//
if (state.step === 4) {
console.log("FINAL FORM", value);
const finalAnswers = {
...state.form,
...value,
};

case 4:
return (
<Widget
src={"bos.questverse.near/widget/components.createQuestSteps.stepFour"}
props={{
onNext: (data) => handleNext(data),
}}
/>
);
case 5:
return (
<Widget
src={"bos.questverse.near/widget/components.createQuestSteps.stepFive"}
props={{
data: state.formData,
onNext: (data) => handleNext(data),
}}
/>
);
default:
return "Error In Form";
State.update({
step: state.step,
form: finalAnswers,
});
console.log("FINAL ANSWERS", finalAnswers);
handleFormComplete(finalAnswers);
return;
}
State.update({
step: state.step + 1,
form: {
...state.form,
...value,
},
});
};

const FormContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;
return (
<div>
<h1>Create Quest</h1>
{renderStep()}

{state.step !== 1 && (
<button type="button" onClick={handlePrevious}>
Previous
</button>
)}

{state.step !== 5 && (
<button onClick={() => handleNext(state.formData)}>Next</button>
)}

{state.step === totalSteps && <button type="submit">Submit</button>}
</div>
<FormContainer>
<h1 className="h3 fw-bold mb-4">Create a Quest</h1>
<Widget
src={`nearui.near/widget/Navigation.Steps`}
props={{
steps: steps,
onClick: (i) => {
if (i > state.step) return;
State.update({
step: i,
});
},
}}
/>
<Widget
src={`/*__@appAccount__*//widget/components.createQuestSteps.step${state.step + 1
}`}
props={{
formState: state.form,
onComplete: handleStepComplete,
errors: state.errors,
renderFooter: (stepState, otherProps) => (
<Widget
src={`/*__@appAccount__*//widget/components.quest.create.footer`}
props={{
isLast: state.step >= steps.length - 1,
hasPrevious: state.step > 0,
onNext: () => {
handleStepComplete(stepState);
},
onPrevious: () => {
State.update({
step: state.step - 1,
});
},
onReset: () => {
State.update({
step: 0,
form: initialFormState,
errors: null,
});
},
...otherProps,
}}
/>
),
}}
/>
</FormContainer>
);
Loading

0 comments on commit 8970c0a

Please sign in to comment.