Transaction: D2dsbUD...RAjh

{ "data": { "jgodwill.near": { "widget": { "Common.Compose": { "": "const autocompleteEnabled = props.autocompleteEnabled ?? true;\n\nState.init({\n isChecked: false,\n chain: \"Near\",\n});\nif (state.image === undefined) {\n State.init({\n image: {},\n text: props.initialText || \"\",\n });\n\n if (props?.onHelper) {\n const extractMentions = (text) => {\n const mentionRegex =\n /@((?:(?:[a-z\\d]+[-_])*[a-z\\d]+\\.)*(?:[a-z\\d]+[-_])*[a-z\\d]+)/gi;\n mentionRegex.lastIndex = 0;\n const accountIds = new Set();\n for (const match of text.matchAll(mentionRegex)) {\n if (\n !/[\\w`]/.test(match.input.charAt(match.index - 1)) &&\n !/[/\\w`]/.test(match.input.charAt(match.index + match[0].length)) &&\n match[1].length >= 2 &&\n match[1].length <= 64\n ) {\n accountIds.add(match[1].toLowerCase());\n }\n }\n return [...accountIds];\n };\n\n const extractHashtags = (text) => {\n const hashtagRegex = /#(\\w+)/gi;\n hashtagRegex.lastIndex = 0;\n const hashtags = new Set();\n for (const match of text.matchAll(hashtagRegex)) {\n if (\n !/[\\w`]/.test(match.input.charAt(match.index - 1)) &&\n !/[/\\w`]/.test(match.input.charAt(match.index + match[0].length))\n ) {\n hashtags.add(match[1].toLowerCase());\n }\n }\n return [...hashtags];\n };\n\n const extractMentionNotifications = (text, item) =>\n extractMentions(text || \"\")\n .filter((accountId) => accountId !== context.accountId)\n .map((accountId) => ({\n key: accountId,\n value: {\n type: \"mention\",\n item,\n },\n }));\n\n props?.onHelper({\n extractHashtags,\n extractMentions,\n extractTagNotifications: extractMentionNotifications,\n extractMentionNotifications,\n });\n }\n}\n\nconst chains = [\n {\n id: \"137\",\n name: \"Polygon\",\n url: \"https://ipfs.near.social/ipfs/bafkreie5h5oq6suoingcwuzj32m3apv56rl56wpwpaxmevlk5vndlypxze\",\n },\n {\n id: \"1313161554\",\n name: \"Aurora\",\n url: \"https://ipfs.near.social/ipfs/bafkreiajqik4gjbmkh7z2gylpjzrsuht7simjecpxuoqn6icqfbioswzuy\",\n },\n {\n id: \"42220\",\n name: \"Celo\",\n url: \"https://ipfs.near.social/ipfs/bafkreifu6ufsdf2ivrs5febt7l25wdys6odzfelgjauzod7owrfug56cxe\",\n },\n {\n id: \"43114\",\n name: \"Avax\",\n url: \"https://ipfs.near.social/ipfs/bafkreifhu5fytsjcmjluarfnu6kcdhaqz4rgdrbbzf6dlsmggqb7oi3w4e\",\n },\n {\n id: \"42161\",\n name: \"Arbitrum\",\n url: \"https://ipfs.near.social/ipfs/bafkreiffax4lnya337rz5ph75faondeqmpy6xj37yprwvxbru4qc5emsiq\",\n },\n {\n id: \"0\",\n name: \"Near\",\n url: \"https://ipfs.near.social/ipfs/bafkreigv55ubnx3tfhbf56toihekuxvgzfqn5c3ndbfjcg3e4uvaeuy5cm\",\n },\n];\n\nconst updateChain = (chain) => {\n State.update({ chain });\n};\n\nconst content = (state.text || state.image.cid) && {\n type: \"md\",\n text: state.text,\n image: state.image.cid ? { ipfs_cid: state.image.cid } : undefined,\n};\n\nif (content && props.extraContent) {\n Object.assign(content, props.extraContent);\n}\n\nfunction autoCompleteAccountId(id) {\n let text = state.text.replace(/[\\s]{0,1}@[^\\s]*$/, \"\");\n text = `${text} @${id}`.trim() + \" \";\n State.update({ text, showAccountAutocomplete: false });\n}\n\nconst onChange = (text) => {\n const showAccountAutocomplete = /@[\\w][^\\s]*$/.test(text);\n State.update({ text, showAccountAutocomplete });\n};\n\nconst jContent = JSON.stringify(content);\nif (props.onChange && jContent !== state.jContent) {\n State.update({\n jContent,\n });\n props.onChange({ content });\n}\n\nconst onCompose = () => {\n State.update({\n image: {},\n text: \"\",\n });\n};\n\nconst TextareaWrapper = styled.div`\n display: grid;\n vertical-align: top;\n align-items: center;\n position: relative;\n align-items: stretch;\n\n &::after,\n textarea {\n width: 100%;\n min-width: 1em;\n height: unset;\n min-height: 5em;\n font: inherit;\n padding: var(--padding) var(--padding) calc(40px + (var(--padding) * 2)) calc(40px + (var(--padding) * 2));\n margin: 0;\n resize: none;\n background: none;\n appearance: none;\n border: none;\n grid-area: 1 / 1;\n overflow: hidden;\n outline: none;\n }\n\n &::after {\n content: attr(data-value) ' ';\n visibility: hidden;\n white-space: pre-wrap;\n }\n`;\nconst EmbedNFT = styled.div`\n margin: 10px;\n`;\n\n// Modal\n\nconst ModalOverlay = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n height: 100vh;\n`;\n\nconst ModalContent = styled.div`\n background-color: white;\n padding: 20px;\n border-radius: .5rem;\n border: 4px solid rgba(13, 154, 255, 0.317);\n`;\n\nconst ModalTitle = styled.h3`\n margin-bottom: 10px;\n`;\n\nconst Button = styled.div`\nbackground: transparent;\nfont-weight: 600;\ncursor: pointer;\n`;\n\nconst Input = styled.input`\n display: block;\n padding:.5em;\n width:100%;\n border: 1px solid #e5e8eb;\n border-radius: 10px;\n outline: none;\n background: #f4f5f6;\n color: #525c76;\n :focus{\n border:1px solid #0d99ff;\n }\n ::placeholder {\n color: palevioletred;\n }\n`;\n\nconst Card = styled.div`\npadding: 1em;\nborder: 1px solid #e5e8eb;\ngap: 2em;\nmargin: 10px auto;\nborder-radius: .7em;\n`;\n\nconst handleCheckboxChange = () => {\n State.update({ isChecked: !state.isChecked, isModalOpen: true });\n};\n\nconst onCloseModal = () => {\n State.update({\n isModalOpen: false,\n isChecked: false,\n chain: \"Near\",\n });\n};\n\nconst onChangeContractID = (contractId) => {\n State.update({\n contractId,\n });\n};\n\nconst onChangeTokenID = (tokenId) => {\n State.update({\n tokenId,\n });\n};\n// const onOpenModal = () =>{\n// State.update({\n// isModalOpen: true\n// })\n// }\n// console.log(state.isChecked);\nconsole.log(state.chain);\nreturn (\n <div className=\"text-bg-light rounded-4\">\n <TextareaWrapper className=\"p-3\" data-value={state.text || \"\"}>\n <textarea\n value={state.text || \"\"}\n onInput={(event) => onChange(event.target.value)}\n onKeyUp={(event) => {\n if (event.key === \"Escape\") {\n State.update({ showAccountAutocomplete: false });\n }\n }}\n placeholder={props.placeholder ?? \"What's happening?\"}\n />\n\n {autocompleteEnabled && state?.showAccountAutocomplete && (\n <div className=\"pt-1 w-100 overflow-hidden\">\n <Widget\n src=\"mob.near/widget/AccountAutocomplete\"\n props={{\n term: state.text.split(\"@\").pop(),\n onSelect: autoCompleteAccountId,\n onClose: () => State.update({ showAccountAutocomplete: false }),\n }}\n />\n </div>\n )}\n </TextareaWrapper>\n <div className=\"d-flex flex-row p-2 border-top\">\n <div className=\"flex-grow-1\">\n <IpfsImageUpload\n image={state.image}\n className=\"btn btn-outline-secondary border-0 rounded-3\"\n />\n {!state.text && !state.image.cid && (\n <EmbedNFT>\n <div className=\"form-check form-switch embed\">\n <input\n className=\"form-check-input\"\n type=\"checkbox\"\n role=\"switch\"\n id=\"embed\"\n checked={state.isChecked}\n onChange={handleCheckboxChange}\n />\n <label htmlFor=\"embed\">Embed an NFT</label>\n </div>\n {state.isChecked && (\n <div>\n <ModalOverlay>\n <ModalContent>\n <Button onClick={onCloseModal}>X</Button>\n <ModalTitle>Embed NFT</ModalTitle>\n <Widget\n src=\"jgodwill.near/widget/GenaDrop.ChainsDropdown\"\n props={{ chains: chains, updateChain }}\n />\n {state.sender ? (\n <div>\n <MyAcc>{state.sender ? getSender() : \"0x00...\"}</MyAcc>\n </div>\n ) : (\n state.chain !== \"Near\" && (\n <Web3Connect\n connectLabel={`Connect ${state.chain} Wallet`}\n className=\"w-50\"\n />\n )\n )}\n <Card>\n <h4>Enter the NFT details</h4>\n <Card>\n NFT Contract ID:\n <Input\n type=\"text\"\n onChange={(e) => onChangeContractID(e.target.value)}\n />\n </Card>\n <Card>\n NFT Token Id:\n <Input\n type=\"text\"\n onChange={(e) => onChangeTokenID(e.target.value)}\n />\n </Card>\n {state.contractId && state.tokenId && (\n <Widget\n src=\"agwaze.near/widget/GenaDrop.NFTDetails\"\n props={{\n contractId: state.contractId,\n tokenId: state.tokenId,\n chainState: state.chain.toLowerCase(),\n }}\n />\n )}\n </Card>\n </ModalContent>\n </ModalOverlay>\n </div>\n )}\n </EmbedNFT>\n )}\n </div>\n <div>{props.composeButton && props.composeButton(onCompose)}</div>\n </div>\n </div>\n);\n" } } } } }