const image = props.image; const onChange = props.onChange; const Tab = { Upload: "Upload", NFT: "NFT", URL: "URL", }; const origTab = image.nft.contractId || image.nft.tokenId ? Tab.NFT : !image.ipfs_cid && image.url ? Tab.URL : Tab.Upload; State.init({ origImage: image, tab: origTab, }); const setTab = (tab) => State.update({ tab }); if (JSON.stringify(image) !== JSON.stringify(state.image)) { State.update({ image, url: image.url, nft: image.nft ?? {}, img: { cid: image.ipfs_cid }, }); } let localImage = {}; if (state.origImage.nft.contractId || state.origImage.nft.tokenId) { localImage.nft = {}; if (state.origImage.nft.contractId) { localImage.nft.contractId = null; } if (state.origImage.nft.tokenId) { localImage.nft.tokenId = null; } } if (state.origImage.ipfs_cid) { localImage.ipfs_cid = null; } if (state.origImage.url) { localImage.url = null; } if (state.tab === Tab.NFT && (state.nft.contractId || state.nft.tokenId)) { localImage.nft = { contractId: state.nft.contractId || "", tokenId: state.nft.tokenId || "", }; } else if (state.tab === Tab.Upload && state.img.cid) { localImage.ipfs_cid = state.img.cid; } if (state.tab === Tab.URL && state.url) { localImage.url = state.url; } if (onChange && JSON.stringify(image) !== JSON.stringify(localImage)) { onChange(localImage); } return ( <div> <ul className={`nav nav-tabs mb-2`}> <li className="nav-item"> <button className={`nav-link ${state.tab === Tab.Upload ? "active" : ""}`} aria-current="page" onClick={() => setTab(Tab.Upload)} > Upload </button> </li> <li className="nav-item"> <button className={`nav-link ${state.tab === Tab.NFT ? "active" : ""}`} aria-current="page" onClick={() => setTab(Tab.NFT)} > NFT </button> </li> <li className="nav-item"> <button className={`nav-link ${state.tab === Tab.URL ? "active" : ""}`} aria-current="page" onClick={() => setTab(Tab.URL)} > URL </button> </li> </ul> <div className={`${state.tab === Tab.Upload ? "" : "visually-hidden"}`}> <IpfsImageUpload image={state.img} /> </div> <div className={`${state.tab === Tab.NFT ? "" : "visually-hidden"}`}> NFT contract <input type="text" value={state.nft.contractId} /> NFT token id <input type="text" value={state.nft.tokenId} /> </div> <div className={`${state.tab === Tab.URL ? "" : "visually-hidden"}`}> Image URL <input type="text" value={state.url} /> </div> </div> );