const UserVerifyLevel = [1, 2, 3, 4]; const AssetType = ["token", "nft"]; const RewardToken = ["IPT", "BTC", "ETH"]; const RandomType = ["chainlink", "local"]; const updateState = (value, field) => { console.log("update state value", value); State.update({ ...state, [field]: value, }); }; const setDatePlusMinutes = (date, minutes) => { date.setMinutes(date.getMinutes() + minutes); return date; }; State.init({ name: "", startTime: setDatePlusMinutes(new Date(), 1), endTime: setDatePlusMinutes(new Date(), 3), delay: 0, userVerifyLevel: UserVerifyLevel[0], assetType: AssetType[0], rewardToken: RewardToken[0], rewardTokenAmount: 1, nftID: "", randomType: RandomType[0], fee: 0, payFee: false, userMustClaim: false, }); console.log("state", state); const formatToDatetimeInput = (date) => { if (!date) { return ""; } date.setSeconds(null); const utcString = date.toISOString().substring(0, 19), year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours(), minute = date.getMinutes(); const localDatetime = year + "-" + (month < 10 ? "0" + month.toString() : month) + "-" + (day < 10 ? "0" + day.toString() : day) + "T" + (hour < 10 ? "0" + hour.toString() : hour) + ":" + (minute < 10 ? "0" + minute.toString() : minute) + utcString.substring(16, 19); return localDatetime; }; const onSelectDatetime = (value, timeProp) => { updateState(!!value ? new Date(value) : "", timeProp); }; const renderTokenReward = () => { return ( <> <div class="col-xs-12 col-sm"> <div class="form-floating"> <select class="form-select text-uppercase" id="rewardToken" value={state.rewardToken} onChange={(e) => updateState(e.target.value, "rewardToken")} > {RewardToken.map((token) => ( <option value={token}>{token}</option> ))} </select> <label for="rewardToken">Select token</label> </div> </div> <div class="col-xs-12 col-sm"> <div class="form-floating"> <input class="form-control" id="rewardTokenAmount" placeholder="Token amount" value={state.rewardTokenAmount} onChange={(e) => updateState(e.target.value, "rewardTokenAmount")} /> <label for="rewardTokenAmount">Token amount *</label> </div> </div> </> ); }; const renderNftID = () => { return ( <div class="col-xs-12 col-sm"> <div class="form-floating"> <input class="form-control" id="nftID" placeholder="NFT id" value={state.nftID} onChange={(e) => updateState(e.target.value, "nftID")} /> <label for="nftID">NFT id *</label> </div> </div> ); }; return ( <div class="container-fluid mt-3"> <div class="row mb-3"> <label for="name" class="col-sm-2 col-form-label"> Name * </label> <div class="col-sm-10"> <input class="form-control" id="name" value={state.name} /> </div> </div> <div class="row mb-3"> <label for="startTime" class="col-sm-2 col-form-label"> Start time * </label> <div class="col-sm-10"> <input type="datetime-local" class="form-control" id="startTime" value={formatToDatetimeInput(state.startTime)} onChange={(e) => onSelectDatetime(e.target.value, "startTime")} /> </div> </div> <div class="row mb-3"> <label for="endTime" class="col-sm-2 col-form-label"> End time * </label> <div class="col-sm-10"> <input type="datetime-local" class="form-control" id="endTime" value={formatToDatetimeInput(state.endTime)} onChange={(e) => onSelectDatetime(e.target.value, "endTime")} /> </div> </div> <div class="row mb-3"> <label for="delay" class="col-sm-2 col-form-label"> Delay * </label> <div class="col-sm-10"> <input class="form-control" id="delay" value={state.delay} onChange={(e) => updateState(e.target.value, "delay")} /> </div> </div> <div class="row mb-3"> <label for="userVerifyLevel" class="col-sm-2 col-form-label"> User verify level </label> <div class="col-sm-10"> <select class="form-select" id="userVerifyLevel" value={state.userVerifyLevel} onChange={(e) => updateState(e.target.value, "userVerifyLevel")} > {UserVerifyLevel.map((level) => ( <option value={level}>Level {level}</option> ))} </select> </div> </div> <div class="row mb-3"> <label for="assetType" class="col-sm-2 col-form-label"> GA Reward Type </label> <div class="col-sm-10"> <div class="row"> <div class={`col-xs-12 ${ state.assetType === AssetType[0] ? "col-sm" : "col-sm-4" }`} > <select class="form-select text-capitalize" id="assetType" value={state.assetType} onChange={(e) => updateState(e.target.value, "assetType")} > {AssetType.map((type) => ( <option value={type}>{type}</option> ))} </select> </div> {state.assetType === AssetType[0] && renderTokenReward()} {state.assetType === AssetType[1] && renderNftID()} </div> </div> </div> <div class="row mb-3"> <label for="randomType" class="col-sm-2 col-form-label"> Random type </label> <div class="col-sm-10"> <select class="form-select text-capitalize" id="randomType" value={state.randomType} onChange={(e) => updateState(e.target.value, "randomType")} > {RandomType.map((type) => ( <option value={type}>{type}</option> ))} </select> </div> </div> <div class="row mb-3"> <div class="col-sm-2"> <Widget src="nearui.near/widget/Input.Checkbox" props={{ checked: state.payFee, onChange: (checked) => updateState(checked, "payFee"), label: "Pay Fee", id: "payFee", }} /> </div> <div class="col-sm-10"> <div class="form-floating"> <input class="form-control" id="fee" placeholder="Fee *" disabled={!state.payFee} value={state.fee} onChange={(e) => updateState(e.target.value, "fee")} /> <label for="fee">Fee *</label> </div> </div> </div> <div class="row mb-3"> <div class="col-sm-10 offset-sm-2"> <Widget src="nearui.near/widget/Input.Checkbox" props={{ checked: state.userMustClaim, onChange: (checked) => updateState(checked, "userMustClaim"), label: "User must claim reward manually", id: "userMustClaim", }} /> </div> </div> <div class="row mb-3"> <div class="col-sm-10 offset-sm-2"> <button type="submit" class="btn btn-primary"> Submit </button> </div> </div> </div> );