State.init({ documentCid: "", isUploading: false, expiration: "", quorum: 0, participants: [], }); const ProjectContainer = styled.div` width: 800px; display: flex; justify-content: space-between; align-items: center; padding-inline: 8px; color: #0095b6; border-style: solid; .cali-btn-primary { background-color: #0095b6; color: white; border: none; } `; const Button = styled.div` height: 60px; width: 100%; display: flex; justify-content: end; align-items: center; gap: 12px; font-weight: 500; a { color: #0095b6; font-size: 16px } `; const uploadFileUpdateState = (body) => { asyncFetch("https://ipfs.near.social/add", { method: "POST", headers: { Accept: "application/json" }, body, }).then((res) => { const cid = res.body.cid; console.log("DocumentCid: ", cid); State.update({ documentCid: cid, isUploading: false }); }); }; const filesOnChange = (files) => { if (files) { State.update({ isUploading: true, documentCid: "" }); uploadFileUpdateState(files[0]); } }; // Login Check const loggedIn = !!context.accountId; const Main = ( <ProjectContainer className="m-2 p-4"> <div className="row"> <div ClassName="center"> <h4 style={{ fontWeight: 1000 }}>Calimocho</h4> <h5 style={{ fontWeight: 200 }}>contract sign</h5> </div> <div> <Button className="p-2"> <a href="#" style={{ backgroundColor: "#83c77f", color: "#FFF", height: 40, display: "flex", justifyContent: "center", alignItems: "center", paddingInline: 24, border: "2px solid black", }} > new quorum </a> </Button> </div> <div> <div className="flex flex-wrap flex-1 text-center justify-center border rounded m-4" hidden={!loggedIn} ></div> <div class="p-4"> <h6 className="text-center p-2 pb-4" style={{ fontWeight: 600, fontSize: 25 }} > your contract: </h6> <div className="input-group pb-4" hidden={!loggedIn}> <input disabled placeholder="contract name" onChange={onInputChange} /> </div> <div className="input-group pb-4" hidden={!loggedIn}> <input disabled type="date" placeholder="date" onChange={onInputChange} /> </div> <div className="input-group pb-4" hidden={!loggedIn}> <input disabled placeholder="participants" onChange={onInputChange} /> </div> <div className="flex justify-center p-2 button-group text-center" hidden={!loggedIn} ></div> </div> <p class="text-center py-2" hidden={loggedIn}> Login to Sign the contract </p> </div> <div className=""> <Button className="p-2"> <a href="#" style={{ backgroundColor: "#83c77f", color: "#FFF", height: 40, display: "flex", justifyContent: "center", alignItems: "center", paddingInline: 24, border: "2px solid black", }} > new quorum </a> </Button> </div> </div> </ProjectContainer> ); return <div>{Main}</div>;