diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx index cdb5c01..23a9a6d 100644 --- a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx +++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/Steps.jsx @@ -1,71 +1,110 @@ -// import StepOne from "./StepOne"; -// const { StepOne } = require("bos.questverse.near/newQuestComponents.StepOne"); - const { fetch_step_one_data } = VM.require( - "/*__@appAccount__*//widget/data.data_stepOne" + "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 {stepOneData, stepTwoData} = VM.require("bos.questverse.near/module/data_all"); I can do it like this -// const { StepOne } = require("./bos.questverse.near/newQuestComponents.StepTwo"); +const stepTwoData = fetch_step_two_data(); +const stepThreeData = fetch_step_three_data(); + +const totalSteps = 5; State.init({ step: 1, - formData: { - //STEP 1 - selectedCurrency: "", - selectedOption: "", - selectedFields: [], - //STEP 2 - // audienceGroups: [], - //STEP 3 + //STEP 1 + inputs: {}, + //STEP 2 + masterList: [], + allowedList: [], + excludedList: [], + + //STEP 3 + rewardNetwork: "", + rewardToken: "", + tokensAllocated: 0, + rewardAmount: "", + //STEP 4 + date_start: "", + date_end: "", - // - }, + //step5 }); -function handleNext(data) { +const handleNext = (data) => { State.update({ - formData: { ...state.formData, ...data }, + // update here step: state.step + 1, }); -} +}; -function handlePrevious() { +const handlePrevious = () => { State.update({ - step: state.step + 1, + step: state.step - 1, }); -} +}; -function renderStep() { - switch (step) { +const renderStep = () => { + switch (state.step) { case 1: return ( <Widget - src={"/*__@appAccount__*//widget/components.createQuestSteps.stepOne"} + src={"bos.questverse.near/widget/components.createQuestSteps.stepOne"} props={{ data: stepOneData, - onNext: handleNext, + onNext: (data) => handleNext(data), }} /> ); case 2: - return <StepTwo onNext={handleNext} />; - // case 3: - // return <StepThree data={} onNext={handleNext} onPrevious={handlePrevious} />; - default: return ( <Widget - src={"/*__@appAccount__*//widget/components.createQuestSteps.stepOne"} + src={"bos.questverse.near/widget/newQuestComponents.stepTwo"} props={{ - data: stepOneData, - onNext: handleNext, + 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), + }} + /> + ); + + 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"; } -} +}; return ( <div> @@ -78,25 +117,10 @@ return ( </button> )} + {state.step !== 5 && ( + <button onClick={() => handleNext(state.formData)}>Next</button> + )} + {state.step === totalSteps && <button type="submit">Submit</button>} </div> ); - -//I wanted to pass in all JSON configs here - - - -/** - * - * JSON -> Functions w req - * - * - */ - - - -/** - * - * - * CREATE QUEST - */ diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFive.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFive.jsx new file mode 100644 index 0000000..e46093b --- /dev/null +++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFive.jsx @@ -0,0 +1,30 @@ +// State.init({ +// isChecked: false, +// isSubmitEnabled: false, +// }); + +// const handleCheckboxChange = (event) => { +// console.log(event.target.checked); +// State.update({ +// isChecked: event.target.checked, +// isSubmitEnabled: true, +// }); +// }; + +// const handleSubmit = () => { +// if (state.isChecked) { +// console.log("Form submitted!"); +// } else { +// console.log("Checkbox must be checked to submit."); +// } +// }; + +const FORM_DATA = props.data; +console.log(FORM_DATA) +return ( + <div className="stepFive"> + <h2>Review</h2> + <small>Please review following Information</small> + + </div> +); diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFour.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFour.jsx new file mode 100644 index 0000000..4a2c24a --- /dev/null +++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepFour.jsx @@ -0,0 +1,56 @@ +function formatDate(date) { + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString().padStart(2, "0"); + const day = date.getDate().toString().padStart(2, "0"); + return [year, month, day].join("-"); +} + +const TODAY = formatDate(new Date()); +const DAY_IN_SECONDS = 24 * 60 * 60 * 1000; +const ONE_WEEK = DAY_IN_SECONDS * 7; + +const setStartDate = (e) => { + State.update({ + date_start: e.target.value, + }); +}; + +const setEndDate = (e) => { + State.update({ + date_end: e.target.value, + }); +}; + +State.init({ + date_start: formatDate(new Date(Date.now() + DAY_IN_SECONDS)), + date_end: formatDate(new Date(Date.now() + ONE_WEEK)), +}); + +return ( + <div className="stepFour"> + <div> + <h2>Quest Duration</h2> + <small>Please choose your quest start and end date.</small> + + <input + aria-label="Quest Start Date" + type="date" + value={state.date_start} + onChange={(e) => { + setStartDate(e); + }} + min={TODAY} + /> + + <input + aria-label="Quest End Date" + type="date" + value={state.date_end} + onChange={(e) => { + setEndDate(e); + }} + min={TODAY} + /> + </div> + </div> +); diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepOne.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepOne.jsx index 12046fc..91608de 100644 --- a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepOne.jsx +++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepOne.jsx @@ -1,95 +1,89 @@ -// import TYPES from "./types.json" -const TYPES = props.data; -console.log('types', TYPES); -// function formatDate(date) { -// const year = date.getFullYear(); -// const month = (date.getMonth() + 1).toString().padStart(2, "0"); -// const day = date.getDate().toString().padStart(2, "0"); -// return [year, month, day].join("-"); -// } - -// const TODAY = formatDate(new Date()); -// const DAY_IN_SECONDS = 24 * 60 * 60 * 1000; +const JSON = props.data; +const options = JSON.options; State.init({ - selectedCurrency: null, selectedOption: null, - selectedFields: [], + selectedAction: null, + formData: {}, }); -function handleCurrencyChange(e) { +const handleOptionChange = (e) => { State.update({ - selectedCurrency: e.target.value, - selectedOption: null, - selectedFields: [], + selectedOption: e.target.value, + selectedAction: null, + formData: {}, }); -} +}; -function handleOptionChange(e) { - console.log(e.target.value); - const currency = TYPES.project_types[0].crypto_currencies.find( - (crypto) => crypto.name === state.selectedCurrency - ); - const action = currency.actions[e.target.value]; +const handleActionChange = (e) => { State.update({ - selectedOption: e.target.value, - selectedFields: action.fields, + selectedAction: e.target.value, + formData: {}, }); -} +}; -return ( - <div> - <div className="stepOne"> - {/* <form action="123" onSubmit="..."> */} - <label htmlFor="currency">Select Currency:</label> - <select id="currency" onChange={handleCurrencyChange}> - <option value="">Select</option> - {TYPES.project_types[0].crypto_currencies.map((crypto) => ( - <option key={crypto.name} value={crypto.name}> - {crypto.name} - </option> - ))} - </select> +const handleInputChange = (e, fieldName) => { + const value = e.target.value; + State.update({ + formData: { ...state.formData, [fieldName]: value }, + }); +}; - {state.selectedCurrency && ( +const renderActionsDropdown = () => { + if (state.selectedOption !== null) { + const selectedOptionObj = options.find( + (option) => option.name === state.selectedOption + ); + if (selectedOptionObj && selectedOptionObj.actions) { + const actions = Object.keys(selectedOptionObj.actions); + return ( <div> - <label htmlFor="option">Select Option:</label> - <select id="option" onChange={handleOptionChange}> - <option value="">Select</option> - {TYPES.project_types[0].crypto_currencies - .find((crypto) => crypto.name === state.selectedCurrency) - .options.map((option) => ( - <option key={option} value={option}> - {option} - </option> - ))} + <label>Select Action:</label> + <select onChange={handleActionChange} value={state.selectedAction || ""}> + <option value="">Select Action</option> + {actions.map((action, index) => ( + <option key={index} value={action}> + {action} + </option> + ))} </select> + {state.selectedAction && + renderSubFields(selectedOptionObj.actions[state.selectedAction])} </div> - )} - {state.selectedFields.length > 0 && ( - <div> - {state.selectedFields.map((field, index) => ( - <div key={index}> - <label htmlFor={field.name}>{field.name}:</label> - <select id={field.name}> - <option value="">Select</option> - {field.options.map((opt) => ( - <option key={opt} value={opt}> - {opt} - </option> - ))} - </select> - </div> - ))} + ); + } + } + return null; +}; + +const renderSubFields = (fields) => { + return ( + <div> + {Object.keys(fields).map((field, index) => ( + <div key={index}> + <label>{field}</label> + <input + type="text" + placeholder={fields[field]} + onChange={(event) => handleInputChange(event, field)} + /> </div> - )} - {/* </form> */} - {/* <button type="submit"> Submit</button> */} + ))} </div> + ); +}; + +return ( + <div> + <label>Select Option:</label> + <select onChange={handleOptionChange} value={state.selectedOption || ""}> + <option value="">Select Option</option> + {options.map((option, index) => ( + <option key={index} value={option.name}> + {option.name} + </option> + ))} + </select> + {renderActionsDropdown()} </div> ); -//creation -> - -/** - Import components to turn it into a carosel - */ diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepThree.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepThree.jsx index e69de29..30b1402 100644 --- a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepThree.jsx +++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepThree.jsx @@ -0,0 +1,90 @@ +const REWARDS_JSON = props.data; //currently not used + +State.init({ + rewardNetwork: "", + rewardToken: "", + tokensAllocated: 0, + rewardAmount: "", +}); + +function handleRewardNetworkChange(e) { + State.update({ + rewardNetwork: e.target.value, + }); +} + +function handleRewardTokenChange(e) { + State.update({ + rewardToken: e.target.value, + }); +} + +function handleTokensAllocatedChange(e) { + State.update({ + tokensAllocated: e.target.value, + }); +} + +function handleRewardAmountChange(e) { + State.update({ + rewardAmount: e.target.value, + }); +} + +return ( + <div className="stepThree"> + <div> + <label htmlFor="rewardNetwork">Reward Network:</label> + <select + id="rewardNetwork" + value={rewardNetwork} + onChange={handleRewardNetworkChange} + > + <option value="">Select Reward Network</option> + + {["NEAR"].map((option) => ( + <option key={option} value={option}> + {option} + </option> + ))} + </select> + </div> + <div> + <label htmlFor="rewardToken">Reward Token:</label> + <select + id="rewardToken" + value={rewardToken} + onChange={handleRewardTokenChange} + > + <option value="">Select Reward Token</option> + {["NEAR"].map((option) => ( + <option key={option} value={option}> + {option} + </option> + ))} + </select> + </div> + <div> + <label htmlFor="tokensAllocated">Tokens Allocated to Quest:</label> + <input + type="number" + id="tokensAllocated" + value={tokensAllocated} + onChange={handleTokensAllocatedChange} + /> + </div> + <div> + <label htmlFor="rewardAmount">Reward Amount Per Participant:</label> + <select + id="rewardAmount" + value={rewardAmount} + onChange={handleRewardAmountChange} + > + <option value="">Select Reward Amount</option> + <option value="Gas Rebate">Gas Rebate</option> + <option value="Reccomended">Recommended</option> + {/* <option value="Custom">Custom</option> */} + </select> + </div> + </div> +); diff --git a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepTwo.jsx b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepTwo.jsx index e4d3f3c..b520c00 100644 --- a/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepTwo.jsx +++ b/questverse-widgets/apps/QuestVerse/widget/components/createQuestSteps/stepTwo.jsx @@ -1,65 +1,12 @@ -const AUDIENCES = { - public_audience: [ - { - id: "1", - name: "audienceMember1", - member_count: 123, - }, - { - id: "2", - name: "audienceMember2", - member_count: 123, - }, - { - id: "3", - name: "audienceMember3", - member_count: 123, - }, - { - id: "4", - name: "audienceMember4", - member_count: 123, - }, - { - id: "5", - name: "audienceMember5", - member_count: 123, - }, - { - id: "6", - name: "audienceMember6", - member_count: 123, - }, - { - id: "7", - name: "audienceMember7", - member_count: 123, - }, - { - id: "8", - name: "audienceMember8", - member_count: 123, - }, - { - id: "8", - name: "audienceMember9", - member_count: 123, - }, - { - id: "9", - name: "audienceMember10", - member_count: 123, - }, - ], -}; +const AUDIENCES_JSON = props.data; State.init({ - masterList: AUDIENCES.public_audience, + masterList: AUDIENCES_JSON.public_audience, allowedList: [], excludedList: [], }); -function handleRemoveItem(item, list) { +const handleRemoveItem = (item, list) => { if (list === "allowedList") { const updatedSubList = state.allowedList.filter((i) => i !== item); @@ -73,10 +20,8 @@ function handleRemoveItem(item, list) { excludedList: updatedSubList, }); } -} -//I hate this prettier - -function handleMoveItem(item, fromList, toList) { +}; +const handleMoveItem = (item, fromList, toList) => { if (fromList === "master" && toList === "allowedList") { State.update({ allowedList: [...state.allowedList, item], @@ -92,7 +37,9 @@ function handleMoveItem(item, fromList, toList) { toList === "master" ) { if (fromList === "allowedList") { - const updatedAllowedSubList = state.allowedList.filter((i) => i.id !== item.id); + const updatedAllowedSubList = state.allowedList.filter( + (i) => i.id !== item.id + ); State.update({ allowedList: updatedAllowedSubList, masterList: [...state.masterList, item], @@ -107,64 +54,62 @@ function handleMoveItem(item, fromList, toList) { }); } } -} +}; return ( - <div> - <div className="stepTwo"> - <div> - <h2>Audience</h2> - <small>Add or exclude audiences to refine quest eligibility.</small> + <div className="stepTwo"> + <div> + <h2>Audience</h2> + <small>Add or exclude audiences to refine quest eligibility.</small> - <ul> - {state.masterList.map((item, index) => ( - <li key={index}> - <div>Audience Name: {item.name}</div> - <small>Member Count: {item.member_count}</small> - <button - onClick={() => handleMoveItem(item, "master", "allowedList")} - > - Move to Allowed - </button> - <button - onClick={() => handleMoveItem(item, "master", "excludedList")} - > - Move to Excluded - </button> - </li> - ))} - </ul> + <ul> + {state.masterList.map((item, index) => ( + <li key={index}> + <div>Audience Name: {item.name}</div> + <small>Member Count: {item.member_count}</small> + <button + onClick={() => handleMoveItem(item, "master", "allowedList")} + > + Move to Allowed + </button> + <button + onClick={() => handleMoveItem(item, "master", "excludedList")} + > + Move to Excluded + </button> + </li> + ))} + </ul> - <h3>Allowed</h3> - <ul> - {state.allowedList.map((item, index) => ( - <li key={index}> - <div>Audience Name: {item.name}</div> - <small>Member Count: {item.member_count}</small> - <button - onClick={() => handleMoveItem(item, "allowedList", "master")} - > - Remove - </button> - </li> - ))} - </ul> + <h3>Allowed</h3> + <ul> + {state.allowedList.map((item, index) => ( + <li key={index}> + <div>Audience Name: {item.name}</div> + <small>Member Count: {item.member_count}</small> + <button + onClick={() => handleMoveItem(item, "allowedList", "master")} + > + Remove + </button> + </li> + ))} + </ul> - <h3>Excluded</h3> - <ul> - {state.excludedList.map((item, index) => ( - <li key={index}> - <div>Audience Name: {item.name}</div> - <small>Member Count: {item.member_count}</small> - <button - onClick={() => handleMoveItem(item, "excludedList", "master")} - > - Remove - </button> - </li> - ))} - </ul> - </div> + <h3>Excluded</h3> + <ul> + {state.excludedList.map((item, index) => ( + <li key={index}> + <div>Audience Name: {item.name}</div> + <small>Member Count: {item.member_count}</small> + <button + onClick={() => handleMoveItem(item, "excludedList", "master")} + > + Remove + </button> + </li> + ))} + </ul> </div> </div> ); diff --git a/questverse-widgets/apps/QuestVerse/widget/components/quest/create/form.jsx b/questverse-widgets/apps/QuestVerse/widget/components/quest/create/form.jsx index 891b001..708c9a7 100644 --- a/questverse-widgets/apps/QuestVerse/widget/components/quest/create/form.jsx +++ b/questverse-widgets/apps/QuestVerse/widget/components/quest/create/form.jsx @@ -134,7 +134,7 @@ return ( }} /> <Widget - src={`hack.near/widget/quest.create.step${state.step + 1}`} + src={`/*__@appAccount__*//widget/components.quest.create.step${state.step + 1}`} props={{ formState: state.form, onComplete: handleStepComplete, @@ -167,4 +167,4 @@ return ( }} /> </> -); \ No newline at end of file +); diff --git a/questverse-widgets/apps/QuestVerse/widget/components/quest/create/step1.jsx b/questverse-widgets/apps/QuestVerse/widget/components/quest/create/step1.jsx index 740c6a0..c75fc25 100644 --- a/questverse-widgets/apps/QuestVerse/widget/components/quest/create/step1.jsx +++ b/questverse-widgets/apps/QuestVerse/widget/components/quest/create/step1.jsx @@ -38,89 +38,6 @@ return ( </span> DAO Info & KYC </h2> - <Widget - src="nearui.near/widget/Input.ExperimentalText" - props={{ - label: "DAO Name", - placeholder: "Lorem Ipsum", - size: "md", - onChange: (v) => { - onValueChange("name", v); - // generate address - onValueChange( - "address", - `${v - .toLowerCase() - .replace(/\s/g, "-") - .replace(/[^a-zA-Z0-9-]/g, "")}.sputnik-dao.near`, - ); - }, - inputProps: { - name: "name", - defaultValue: state.answers.name, - }, - error: errors["name"], - }} - /> - <Widget - src="nearui.near/widget/Input.ExperimentalText" - props={{ - label: ( - <> - DAO Address{" "} - <span className="text-black-50 fw-light small"> - (auto-filled) - </span> - </> - ), - placeholder: "sample-dao-name.sputnik-dao.near", - value: - state.answers.address === "" ? undefined : state.answers.address, - size: "md", - disabled: true, - onChange: (v) => onValueChange("address", v), - inputProps: { - name: "address", - defaultValue: state.answers.address, - }, - error: errors["address"], - }} - /> - <Widget - src="nearui.near/widget/Input.ExperimentalText" - props={{ - label: ( - <> - Soul Bound Token Issuer{" "} - <span className="text-black-50 fw-light small">(optional)</span> - </> - ), - placeholder: "The address of the token issuer", - size: "md", - onChange: (v) => onValueChange("soulBoundTokenIssuer", v), - error: errors["soulBoundTokenIssuer"], - inputProps: { - name: "soulBoundTokenIssuer", - defaultValue: state.answers.soulBoundTokenIssuer, - }, - }} - /> - <Widget - src="nearui.near/widget/Input.ExperimentalText" - props={{ - label: "Purpose", - placeholder: "Please add the purpose of your DAO", - size: "md", - textarea: true, - inputProps: { - rows: 5, - name: "purpose", - defaultValue: state.answers.purpose, - }, - onChange: (v) => onValueChange("purpose", v), - error: errors["purpose"], - }} - /> <h3 className="h5 fw-bold"> KYC <span className="text-black-50 fw-light small">(optional)</span> </h3> @@ -166,4 +83,4 @@ return ( {renderFooter(state.answers)} </div> -); \ No newline at end of file +); diff --git a/questverse-widgets/apps/QuestVerse/widget/data/data_stepOne.jsx b/questverse-widgets/apps/QuestVerse/widget/data/data_stepOne.jsx index 31b0646..0a59d1a 100644 --- a/questverse-widgets/apps/QuestVerse/widget/data/data_stepOne.jsx +++ b/questverse-widgets/apps/QuestVerse/widget/data/data_stepOne.jsx @@ -1,78 +1,108 @@ function fetch_step_one_data({}) { return { - project_types: [ + options: [ { - name: "Crypto Currency", - crypto_currencies: [ - { - name: "Bitcoin", - options: ["Lend", "Bridge"], - actions: { - Lend: { - fields: [ - { - name: "network", - type: "dropdown", - options: ["Option 1", "Option 2", "Option 3"], - }, - ], - }, - Bridge: { - fields: [ - { - name: "from", - type: "dropdown", - options: ["Option A", "Option B", "Option C"], - }, - { - name: "to", - type: "dropdown", - options: ["Option X", "Option Y", "Option Z"], - }, - { - name: "dropdown_type", - type: "dropdown", - options: ["Type 1", "Type 2", "Type 3"], - }, - ], - }, - }, - }, - { - name: "NEAR", - options: ["Bridge"], - actions: { - Lend: { - fields: [ - { - name: "network", - type: "dropdown", - options: ["Option 50", "Option 500", "Option 500"], - }, - ], - }, - Bridge: { - fields: [ - { - name: "from", - type: "dropdown", - options: ["Option 0", "Option 00", "Option 000"], - }, - { - name: "to", - type: "dropdown", - options: ["Option XXX", "Option YYY", "Option ZZZ"], - }, - { - name: "dropdown_type", - type: "dropdown", - options: ["Type 111", "Type 222", "Type 333"], - }, - ], - }, - }, - }, - ], + name: "ALL", + actions: { + "interaction on contract": { + account_id: "<text_input>", + number_of_interactions: "<number_input>", + }, + "interaction for specific method on contract": { + account_id: "<text_input>", + method_name: "<text_input>", + number_of_interactions: "<number_input>", + }, + transfer: { + account_id: "<text_input>", + near_amount: "<number_input>", + }, + }, + }, + { + name: "social.near", + actions: { + "follow a user": { + user: "<text_input>", + }, + "like a post": { + post_id: "<number_input>", + }, + repost: { + post_id: "<number_input>", + }, + "use hash tag in post": { + hash_tag: "<text_input>", + }, + "comment on a post": { + post_id: "<number_input>", + }, + // "complete widget metadata information": {}, + }, + }, + { + name: "astrodao.near", + actions: { + "join a dao": { + dao_account_id: "<text_input>", + role: "<text_input>", + }, + "vote on proposal": { + dao_account_id: "<text_input>", + proposal_id: "<number_input>", + }, + }, + }, + { + name: "near horizon", + actions: { + "propose a contribution": { + project_name: "<input_text>", + }, + }, + }, + { + name: "devgogs.near", + actions: { + "post a solution": { + get_number_likes: "<number_input>", + }, + "reply to a post": { + id: "<number_input>", + }, + "interact with community": { + community_name: "<text_input>", + }, + "fund a project": { + "greater than": "<number_input>", + "less than": "<number_input>", + equal: "<number_input>", + }, + }, + }, + { + name: "Mintbase", + actions: { + "Buy NFT from Mintbase": { + // account_id: "<text_input>", + // number_of_interactions: "<number_input>", + }, + "List NFT on Mintbase": { + // account_id: "<text_input>", + // method_name: "<text_input>", + // number_of_interactions: "<number_input>", + }, + "Create a collection on Mintbase": { + // account_id: "<text_input>", + // near_amount: "<number_input>", + }, + }, + }, + { + name: "Paras", + actions: { + "Buy NFT from Paras": {}, + }, }, ], }; diff --git a/questverse-widgets/apps/QuestVerse/widget/data/data_stepThree.jsx b/questverse-widgets/apps/QuestVerse/widget/data/data_stepThree.jsx new file mode 100644 index 0000000..f8d454e --- /dev/null +++ b/questverse-widgets/apps/QuestVerse/widget/data/data_stepThree.jsx @@ -0,0 +1,6 @@ +function fetch_step_three_data({}) { + return { + reward_types: [{'not': 'used'}], + }; +} +return { fetch_step_three_data }; diff --git a/questverse-widgets/apps/QuestVerse/widget/data/data_stepTwo.jsx b/questverse-widgets/apps/QuestVerse/widget/data/data_stepTwo.jsx new file mode 100644 index 0000000..315cb1c --- /dev/null +++ b/questverse-widgets/apps/QuestVerse/widget/data/data_stepTwo.jsx @@ -0,0 +1,57 @@ +function fetch_step_two_data({}) { + return { + public_audience: [ + { + id: "1", + name: "audienceMember1", + member_count: 123, + }, + { + id: "2", + name: "audienceMember2", + member_count: 123, + }, + { + id: "3", + name: "audienceMember3", + member_count: 123, + }, + { + id: "4", + name: "audienceMember4", + member_count: 123, + }, + { + id: "5", + name: "audienceMember5", + member_count: 123, + }, + { + id: "6", + name: "audienceMember6", + member_count: 123, + }, + { + id: "7", + name: "audienceMember7", + member_count: 123, + }, + { + id: "8", + name: "audienceMember8", + member_count: 123, + }, + { + id: "8", + name: "audienceMember9", + member_count: 123, + }, + { + id: "9", + name: "audienceMember10", + member_count: 123, + }, + ], + }; +} +return { fetch_step_two_data }; diff --git a/questverse-widgets/apps/QuestVerse/widget/newQuestComponents/stepOne.jsx b/questverse-widgets/apps/QuestVerse/widget/newQuestComponents/stepOne.jsx new file mode 100644 index 0000000..997873b --- /dev/null +++ b/questverse-widgets/apps/QuestVerse/widget/newQuestComponents/stepOne.jsx @@ -0,0 +1,85 @@ + +const JSON = props.data; +const options = JSON.options; + +State.init({ + selectedOption: "", + inputs: {}, +}); + +const handleOptionChange = (e) => { + State.update({ + selectedOption: e.target.value, + inputs: {}, + }); +}; + +const handleInputChange = (e, field) => { + const { id, value } = e.target; + + State.update({ + inputs: { + ...state.inputs, + [field]: { ...state.inputs[field], [id]: value }, + }, + }); +}; + +const handleDisplay = () => { + console.log(state.inputs); //read +}; + +const renderInputs = () => { + if (!state.selectedOption) { + return null; + } + + const selected = options.find( + (option) => option.name === state.selectedOption + ); + if (!selected) { + return null; + } + + return Object.keys(selected.actions).map((action, index) => { + const fields = selected.actions[action]; + return ( + <div key={index}> + <h3>{action}</h3> + {Object.keys(fields).map((field, i) => ( + <div key={i}> + <label htmlFor={field}>{field}:</label> + <input + type="text" + id={field} + onChange={(e) => handleInputChange(e, action)} + /> + </div> + ))} + </div> + ); + }); +}; + +return ( + <div> + <label htmlFor="options">Choose an option:</label> + <select + id="options" + onChange={handleOptionChange} + value={state.selectedOption} + > + <option value="">Select</option> + {options.map((option) => ( + <option key={option.name} value={option.name}> + {option.name} + </option> + ))} + </select> + <div> + <h2>Inputs:</h2> + {renderInputs()} + </div> + <button onClick={handleDisplay}>console log</button> + </div> +); diff --git a/questverse-widgets/build/QuestVerse/src/newQuestComponents/stepOne.jsx b/questverse-widgets/build/QuestVerse/src/newQuestComponents/stepOne.jsx new file mode 100644 index 0000000..997873b --- /dev/null +++ b/questverse-widgets/build/QuestVerse/src/newQuestComponents/stepOne.jsx @@ -0,0 +1,85 @@ + +const JSON = props.data; +const options = JSON.options; + +State.init({ + selectedOption: "", + inputs: {}, +}); + +const handleOptionChange = (e) => { + State.update({ + selectedOption: e.target.value, + inputs: {}, + }); +}; + +const handleInputChange = (e, field) => { + const { id, value } = e.target; + + State.update({ + inputs: { + ...state.inputs, + [field]: { ...state.inputs[field], [id]: value }, + }, + }); +}; + +const handleDisplay = () => { + console.log(state.inputs); //read +}; + +const renderInputs = () => { + if (!state.selectedOption) { + return null; + } + + const selected = options.find( + (option) => option.name === state.selectedOption + ); + if (!selected) { + return null; + } + + return Object.keys(selected.actions).map((action, index) => { + const fields = selected.actions[action]; + return ( + <div key={index}> + <h3>{action}</h3> + {Object.keys(fields).map((field, i) => ( + <div key={i}> + <label htmlFor={field}>{field}:</label> + <input + type="text" + id={field} + onChange={(e) => handleInputChange(e, action)} + /> + </div> + ))} + </div> + ); + }); +}; + +return ( + <div> + <label htmlFor="options">Choose an option:</label> + <select + id="options" + onChange={handleOptionChange} + value={state.selectedOption} + > + <option value="">Select</option> + {options.map((option) => ( + <option key={option.name} value={option.name}> + {option.name} + </option> + ))} + </select> + <div> + <h2>Inputs:</h2> + {renderInputs()} + </div> + <button onClick={handleDisplay}>console log</button> + </div> +);