Transaction: 7yr2wud...GHBE

{ "data": { "baam25.near": { "widget": { "linktree": { "": "const { theme } = props;\r\nconst [page, setPage] = useState(0);\r\nconst loggedIn = context.accountId ? props.loggedIn ?? false : false;\r\nconst accountId = loggedIn\r\n ? context.accountId ?? \"baam25.near\"\r\n : props.accountId ?? \"baam25.near\";\r\nconst viewingOwnAccount = accountId === context.accountId;\r\nconst showNFTs = props.showNFTs\r\n ? typeof props.showNFTs === \"string\"\r\n ? JSON.parse(props.showNFTs)\r\n : props.showNFTs\r\n : true;\r\nconst isLink = props.isLink\r\n ? typeof props.isLink === \"string\"\r\n ? JSON.parse(props.isLink)\r\n : props.isLink\r\n : true;\r\nconst showTags = props.showTags\r\n ? typeof props.showTags === \"string\"\r\n ? JSON.parse(props.showTags)\r\n : props.showTags\r\n : true;\r\n\r\nconst customExternalLinks = props.customExternalLinks || [\r\n \"website\",\r\n \"github\",\r\n \"twitter\",\r\n \"telegram\",\r\n]; // ex: [\"telegram\"] only shows telegram\r\n\r\nconst AVAILABLE_THEMES = {\r\n default: \"Default\",\r\n dark: \"Dark\",\r\n gold: \"Gold\",\r\n blossom: \"Blossom\",\r\n vibrant: \"Vibrant\",\r\n aqua: \"Aqua\",\r\n neon: \"Neon\",\r\n vintage: \"Vintage\",\r\n eclectic: \"Eclectic\",\r\n};\r\nconst themeName =\r\n theme in AVAILABLE_THEMES\r\n ? AVAILABLE_THEMES[theme]\r\n : AVAILABLE_THEMES[\"default\"];\r\n\r\nconst Theme = VM.require(`mattb.near/widget/Linktree.Themes.${themeName}`);\r\n\r\nconst LinktreeSDK = VM.require(\"mattb.near/widget/Linktree.Utils.SDK\");\r\nif (!LinktreeSDK) return \"Loading...\";\r\n// Load profile data\r\nLinktreeSDK.load(accountId);\r\n\r\n// Load NFTs\r\nconst data = fetch(\"https://graph.mintbase.xyz\", {\r\n method: \"POST\",\r\n headers: {\r\n \"mb-api-key\": \"omni-site\",\r\n \"Content-Type\": \"application/json\",\r\n \"x-hasura-role\": \"anonymous\",\r\n },\r\n body: JSON.stringify({\r\n query: `\r\n query v2_omnisite_GetOwnedTokens{\r\n tokens: mb_views_nft_owned_tokens(\r\n where: {\r\n owner: { _eq: \"${accountId}\" }\r\n }\r\n ) {\r\n tokenId: token_id\r\n contractId: nft_contract_id\r\n media\r\n metadata_id\r\n }}\r\n`,\r\n }),\r\n});\r\nconst nfts = data.body?.data?.tokens;\r\nconsole.log(nfts);\r\nconst Gallery = styled.div`\r\n max-width: 1000px;\r\n display: flex;\r\n margin: 3rem auto;\r\n align-items: center;\r\n .arrow-r {\r\n rotate: 180deg;\r\n }\r\n .arrow-r,\r\n .arrow-l {\r\n width: 2rem;\r\n cursor: pointer;\r\n border-radius: 50%;\r\n border: 1px solid black;\r\n }\r\n .slider-display {\r\n position: relative;\r\n width: 49rem;\r\n height: 15rem;\r\n overflow: hidden;\r\n @media only screen and (max-width: 927px) {\r\n width: 32rem;\r\n }\r\n @media only screen and (max-width: 627px) {\r\n width: 15rem;\r\n }\r\n }\r\n .slider-track {\r\n transition: all 300ms ease;\r\n position: absolute;\r\n display: flex;\r\n gap: 2rem;\r\n justify-content: center;\r\n .nft-card {\r\n width: 15rem;\r\n height: 15rem;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n img {\r\n transition: all 300ms ease-in-out;\r\n }\r\n :hover img {\r\n scale: 1.1;\r\n }\r\n }\r\n }\r\n`;\r\nconst size = \"100%\";\r\n\r\nconst HandleUpSlide = () => {\r\n if (page < nfts.length - 1) {\r\n setPage(page + 1);\r\n } else {\r\n setPage(0);\r\n }\r\n};\r\nconst HandleDownSlide = () => {\r\n if (page > 0) {\r\n setPage(page - 1);\r\n } else {\r\n setPage(nfts.length - 1);\r\n }\r\n};\r\n\r\nconst externalLinks = {\r\n website: {\r\n icon: <i className=\"bi bi-globe\"></i>,\r\n label: \"Website\",\r\n url: `https://${LinktreeSDK.account.data.linktree.website}`,\r\n },\r\n twitter: {\r\n icon: <i className=\"bi bi-twitter\"></i>,\r\n label: \"Twitter\",\r\n url: `https://twitter.com/${LinktreeSDK.account.data.linktree.twitter}`,\r\n },\r\n telegram: {\r\n icon: <i className=\"bi bi-telegram\"></i>,\r\n label: \"Telegram\",\r\n url: `https://t.me/${LinktreeSDK.account.data.linktree.telegram}`,\r\n },\r\n github: {\r\n icon: <i className=\"bi bi-github\"></i>,\r\n label: \"Github\",\r\n url: `https://github.com/${LinktreeSDK.account.data.linktree.github}`,\r\n },\r\n};\r\nreturn (\r\n <>\r\n <Theme.Linktree>\r\n <a href={LinktreeSDK.getShareUrl(accountId)} target=\"_blank\">\r\n <Widget\r\n src=\"mob.near/widget/Image\"\r\n props={{\r\n image: LinktreeSDK.account.data.image,\r\n alt: LinktreeSDK.account.data.name,\r\n fallbackUrl:\r\n \"https://ipfs.near.social/ipfs/bafkreibiyqabm3kl24gcb2oegb7pmwdi6wwrpui62iwb44l7uomnn3lhbi\",\r\n style: {\r\n height: \"100%\",\r\n maxHeight: 150,\r\n borderRadius: \"50%\",\r\n aspectRatio: 1 / 1,\r\n objectFit: \"cover\",\r\n },\r\n }}\r\n />\r\n </a>\r\n <Theme.Details>\r\n <h2>{LinktreeSDK.account.data.name || accountId}</h2>\r\n\r\n <h5>@{accountId}</h5>\r\n {LinktreeSDK.account.tags.length > 0 && showTags && (\r\n <Theme.TagsSection>\r\n <Widget\r\n src=\"near/widget/Tags\"\r\n props={{\r\n tags: LinktreeSDK.account.tags,\r\n data: nfts,\r\n }}\r\n />\r\n </Theme.TagsSection>\r\n )}\r\n </Theme.Details>\r\n {LinktreeSDK.account.data.linktree && (\r\n <Theme.LinktreeLinks>\r\n {customExternalLinks.map((link) => {\r\n const linkObj = externalLinks[link];\r\n if (LinktreeSDK.account.data.linktree[link]) {\r\n return (\r\n <a href={linkObj.url} target=\"_blank\">\r\n <button style={{ width: \"100%\" }}>\r\n {\" \"}\r\n {linkObj.icon} {linkObj.label}\r\n </button>\r\n </a>\r\n );\r\n }\r\n })}\r\n </Theme.LinktreeLinks>\r\n )}\r\n {nfts?.length > 0 && showNFTs && (\r\n <Gallery>\r\n <img\r\n src=\"https://ipfs.near.social/ipfs/bafkreiayzzl6o7cgvrv6dvlwi4kahvjojbldljs24ktw7jmidwlpxjziym\"\r\n className=\"arrow-l\"\r\n onClick={HandleDownSlide}\r\n alt=\"angle left\"\r\n />\r\n <div className=\"slider-display\">\r\n <div\r\n className=\"slider-track\"\r\n style={{\r\n transform: `translateX(-${17 * page}rem)`,\r\n }}\r\n >\r\n {nfts.map((nft) => (\r\n <a\r\n key={nft.tokenId}\r\n onClick={(event) => (!isLink ? event.preventDefault() : \"\")}\r\n href={\r\n isLink\r\n ? `https://mintbase.xyz/meta/${nft.metadata_id.replace(\r\n \":\",\r\n \"%3A\"\r\n )}`\r\n : \"\"\r\n }\r\n target=\"_blank\"\r\n className=\"nft-card\"\r\n >\r\n <Widget\r\n src=\"mob.near/widget/NftImage\"\r\n props={{\r\n nft: { tokenId: nft.tokenId, contractId: nft.contractId },\r\n style: {\r\n width: size,\r\n height: size,\r\n objectFit: \"cover\",\r\n minWidth: size,\r\n minHeight: size,\r\n maxWidth: size,\r\n maxHeight: size,\r\n overflowWrap: \"break-word\",\r\n borderRadius: \"inherit\",\r\n },\r\n className: \"\",\r\n fallbackUrl:\r\n \"https://ipfs.near.social/ipfs/bafkreihdiy3ec4epkkx7wc4wevssruen6b7f3oep5ylicnpnyyqzayvcry\",\r\n alt: `NFT ${nft.contractId} ${nft.tokenId}`,\r\n }}\r\n />\r\n </a>\r\n ))}\r\n </div>\r\n </div>\r\n <img\r\n className=\"arrow-r\"\r\n onClick={HandleUpSlide}\r\n src=\"https://ipfs.near.social/ipfs/bafkreiayzzl6o7cgvrv6dvlwi4kahvjojbldljs24ktw7jmidwlpxjziym\"\r\n alt=\"angle left\"\r\n />\r\n </Gallery>\r\n )}\r\n </Theme.Linktree>\r\n </>\r\n);\r\n", "metadata": { "fork_of": "baam25.near/widget/linktree@112244342" } } } } } }