Transaction: CUt3mwR...GbUY

{ "data": { "vfdao.near": { "widget": { "Mintbase.Mini.Index": { "": "const data = fetch(`https://httpbin.org/headers`);\nconst gatewayURL = data?.body?.headers?.Origin ?? \"\";\nconst currentMode = Storage.get(\"mode\");\nconst LOCALSTORAGE_KEY = \"connectedDao\";\nconst localStorageData = Storage.get(LOCALSTORAGE_KEY);\nconst setLocalStorageData = (data) => {\n try {\n Storage.set(LOCALSTORAGE_KEY, data);\n console.log(\"successfully written to BOS local storage\", data);\n } catch (error) {\n console.error(\"Error writing to Storage:\", error);\n }\n};\n\nconst [mode, setMode] = useState(currentMode || \"light\");\nconst [showOwnedFilters, setShowOwnedFilters] = useState(false);\nconst [storeAddress, setStoreAddress] = useState(\"veganfriends.mintbase1.near\");\nconst isDarkModeOn = mode === \"dark\";\nconst connectedDao = localStorageData || {\n address: \"vegan-friends.sputnik-dao.near\",\n};\nconst Root =\n gatewayURL.includes(\"near.social\") || gatewayURL.includes(\"app.vfdao.org\")\n ? styled.div`\n position: fixed;\n inset: var(--body-top-padding) 0px 0px;\n width: 100%;\n overflow-y: scroll;\n font-family: 'Open Sans', sans-serif;\n padding-top: 30px; /* Added top padding */\n `\n : styled.div`\n width: 100%;\n padding-top: 30px; /* Added top padding */\n `;\nconst accountId = context.accountId || \"veganfriends.mintbase1.near\";\nconst { getInputLabelFontType } = VM.require(\n \"bos.genadrop.near/widget/Mintbase.components\"\n);\nconst { MbInputField } = VM.require(\n \"bos.genadrop.near/widget/Mintbase.MbInput\"\n) || {\n MbInputField: () => <></>,\n};\nconst tabs = {\n labels: [\n { title: \"Mint NFT\" },\n { title: \"My Owned NFTs\" },\n { title: \"My Minted NFTs\" },\n { title: \"My Stores\" },\n { title: \"All Donations\" },\n { title: \"My Activity\" },\n {\n title: \"_DAO NFTs\",\n hidden: !connectedDao?.address && !context?.accountId,\n },\n ],\n};\nconst hiddenTabs = tabs.labels\n .filter((tab) => !tab.hidden)\n .map((tab) => tab.title);\nconst tabProps = { tabLabels: hiddenTabs };\nconst [selectedTab, setSelectedTab] = useState(props.tab ?? \"my-owned-nfts\");\nconst switchChangeHandler = () => {\n if (!isDarkModeOn) {\n setMode(\"dark\");\n Storage.set(\"mode\", \"dark\");\n } else {\n setMode(\"light\");\n Storage.set(\"mode\", \"light\");\n }\n};\nconst Toggle = styled.div`\nfont-family: 'Open Sans', sans-serif;\n padding: 0.5rem;\n background-color: ${!isDarkModeOn ? \"#1f2937\" : \"#D2D4DA\"};\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 2rem;\n height: 2rem;\n`;\nconst AppContent = styled.div`\nfont-family: 'Open Sans', sans-serif;\nbody {\n font-family: 'Open Sans', sans-serif;\n}\n\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n margin-top: 15px;\n .head {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 48px;\n justify-content: center;\n ${getInputLabelFontType(\"big\")}\n h2 {\n color: #8c4fe5;\n font-size: 16px;\n font-weight: bold;\n }\n h1 {\n font-weight: bold;\n font-size: 29px;\n color: ${isDarkModeOn ? \"#fff\" : \"#000\"};\n }\n p {\n font-size: 18px;\n color: ${isDarkModeOn ? \"#8a8c96\" : \"#000\"};\n font-weight: 600;\n }\n }\n .audit {\n p {\n color: ${isDarkModeOn ? \"#fff\" : \"#000\"};\n }\n }\n .templateButton {\n display: flex;\n align-items: center;\n justify-content: center;\n button {\n border-radius: 0;\n padding: 6px 40px;\n border-color: ${isDarkModeOn ? \"#fff\" : \"#000\"};\n background: transparent;\n color: ${isDarkModeOn ? \"#8a8c96\" : \"#000\"};\n transition: 0.5s ease-in-out;\n &:hover {\n opacity: 0.5;\n }\n }\n }\n @media (max-width: 500px) {\n margin: 0 10px;\n .head {\n h2 {\n font-size: 14px;\n }\n h1 {\n font-size: 24px;\n text-align: center;\n }\n p {\n font-size: 16px;\n }\n }\n }\n`;\nconst ContractSection = styled.div`\nfont-family: 'Open Sans', sans-serif;\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n width: 100%;\n justify-content: space-evenly;\n ${getInputLabelFontType(\"big\")}\n a {\n color: var(--blue-300, #4f5fa3);\n text-decoration: none;\n svg {\n color: var(--blue-300, #4f5fa3);\n }\n }\n svg {\n color: #8c4fe5;\n }\n .leftText {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 50%;\n .sec {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-bottom: 20px;\n p {\n font-size: 16px;\n margin-top: 15px;\n color: ${isDarkModeOn ? \"#8a8c96\" : \"#000\"};\n }\n div {\n ${getInputLabelFontType(\"big\")}\n display: flex;\n align-items: center;\n h1 {\n font-size: 20px;\n font-weight: bold;\n color: ${isDarkModeOn ? \"#fff\" : \"#000\"};\n margin-left: 12px;\n margin-bottom: 0;\n }\n }\n }\n }\n button {\n background: black;\n color: ${isDarkModeOn ? \"#fff\" : \"#000\"};\n align-self: center;\n border: 1px solid #000;\n transition: 0.5s ease-in-out;\n &:hover {\n opacity: 0.8;\n }\n &:disabled {\n background: ${isDarkModeOn ? \"#3e4253\" : \"#d1d4d9\"};\n cursor: not-allowed;\n color: ${isDarkModeOn ? \"#fff\" : \"#000\"};\n font-weight: 600;\n border: none;\n font-family: 'Open Sans', sans-serif;\n }\n }\n @media (max-width: 600px) {\n .leftText {\n max-width: 100%;\n .sec {\n p {\n font-size: 14px;\n }\n div {\n h1 {\n font-size: 17px;\n }\n }\n }\n }\n }\n`;\nconst FormSection = styled.div`\nfont-family: 'Open Sans', sans-serif;\n width: 50%;\n display: flex;\n position: relative;\n flex-direction: column;\n height: fit-content;\n & > p > .down-arr {\n padding: 0;\n margin: 0;\n transform: rotateY(180deg);\n }\n & > p {\n display: flex;\n align-items: center;\n gap: 5px;\n color: ${\n isDarkModeOn ? \"var(--gray-300, #B3B5BD)\" : \"var(--gray-700, #404252)\"\n };\n }\n .form-main {\n background-color: ${isDarkModeOn ? \"#1e2030\" : \"#fff\"};\n border-radius: 4px;\n height: 340px;\n overflow: hidden;\n .top {\n color: ${isDarkModeOn ? \"#fff\" : \"#000\"};\n border-bottom: 1px solid\n ${isDarkModeOn ? \"rgba(40, 42, 58, 1)\" : \"rgba(210, 212, 218, 1)\"};\n padding: 24px;\n p {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n }\n }\n .form-content {\n padding: 24px;\n height: 230px;\n background-color: ${isDarkModeOn ? \"#1e2030\" : \"#fff\"};\n }\n }\n @media (max-width: 500px) {\n width: 100%;\n margin-top: 60px;\n }\n`;\nconst handleTabClick = (tab) => {\n setSelectedTab(tab);\n};\nconst PageContent = () => {\n switch (selectedTab) {\n case \"my-stores\":\n return (\n <Widget\n src={`vfdao.near/widget/Mintbase.App.Store.Cards`}\n props={{\n isDarkModeOn,\n accountId,\n }}\n />\n );\n case \"mint-nft\":\n return (\n <Widget\n src=\"vfdao.near/widget/Mintbase.App.ContractProfilePage.Mint.Index\"\n props={{\n contractId: \"veganfriends.mintbase1.near\",\n isDarkModeOn,\n connectedDao,\n }}\n />\n );\n case \"deploy-store\":\n return (\n <AppContent>\n <div className=\"head\">\n <h2>SMART CONTRACT</h2>\n <h1>Deploy your Own Smart Contract with a few clicks</h1>\n <p>Assets Can be Worth $0.0001 or $10M</p>\n </div>\n <ContractSection>\n <div className=\"leftText\">\n <div className=\"sec\">\n <div>\n {mintSvg}\n <h1>Mint NFTs Collection</h1>\n </div>\n <p>\n Easily Mint, Sell, Transfer and Burn NFTs on your contract\n </p>\n </div>\n <div className=\"sec\">\n <div>\n {addMinterSvg}\n <h1>Add Minters</h1>\n </div>\n <p>Your Contract is your own DAO</p>\n </div>\n <div className=\"sec\">\n <div>\n {badgeSvg}\n <h1>Safe and Audited</h1>\n </div>\n <p>\n Enjoy the safety of your contracts with a stamp of approval\n from credible auditors\n </p>\n </div>\n <div className=\"audit\">\n <p>\n AUDITED BY\n <img\n src=\"https://www.mintbase.xyz/images/ottersec.svg\"\n alt=\"\"\n />\n </p>\n </div>\n <a\n target=\"_blank\"\n href=\"https://llyh4t73eduhn2i3j4gs523hnndpb24ynlrnsglgque46drcisxa.arweave.net/WvB-T_sg6HbpG08NLutna0bw65hq4tkZZoUJzw4iRK4\"\n >\n View Report {upArrow}\n </a>\n </div>\n <FormSection>\n <p>\n <span>Try it out, it's that simple</span>\n <p className=\"down-arr\">\n <i class=\"bi bi-arrow-90deg-down\"></i>\n </p>\n </p>\n <div className=\"form-main\">\n <div className=\"top\">\n <p>New Contract</p>\n </div>\n <div className=\"form-content\">\n <Widget\n src={`bos.genadrop.near/widget/Mintbase.App.Store.CreateForm`}\n props={{\n isDarkModeOn,\n isInModal: false,\n accountId,\n }}\n />\n </div>\n </div>\n </FormSection>\n </ContractSection>\n </AppContent>\n );\n case \"my-owned-nfts\":\n return (\n <Widget\n src={`vfdao.near/widget/Mintbase.App.Tokens.Owned`}\n props={{\n isDarkModeOn,\n ownerId: accountId,\n\n isConnected,\n showFilters: showOwnedFilters,\n onCreateStore,\n }}\n />\n );\n case \"my-minted-nfts\":\n return (\n <Widget\n src={`vfdao.near/widget/Mintbase.App.Tokens.Minted`}\n props={{\n isDarkModeOn,\n minterId: accountId,\n isConnected,\n showFilters: showOwnedFilters,\n onCreateStore,\n }}\n />\n );\n case \"dao-nfts\":\n return (\n <Widget\n src=\"vfdao.near/widget/Mintbase.App.Tokens.Owned\"\n props={{\n isDarkModeOn,\n ownerId: connectedDao?.address,\n isConnected,\n showFilters: showOwnedFilters,\n }}\n />\n );\n case \"all-donations\":\n return (\n <Widget\n src=\"vfdao.near/widget/Mintbase.App.ContractProfilePage.ContractNFTs\"\n props={{\n contractId: \"veganfriends.mintbase1.near\",\n isDarkModeOn,\n connectedDao: connectedDao,\n showFilters: showListedFilters,\n }}\n />\n );\n case \"my-activity\":\n return (\n <Widget\n src={`bos.genadrop.near/widget/Mintbase.App.Profile.Activity`}\n props={{ isDarkModeOn, accountId }}\n />\n );\n default:\n return null;\n }\n};\nconst [count, setCount] = useState(0);\nconst Card = styled.div`\nfont-family: 'Open Sans', sans-serif;\n /* vars start */\n --mb-blackblue: #070c2b;\n --mb-tab-bg-dark: #3b82f659;\n --mb-tab-bg-light: #4299e126;\n --mb-tab-hover-dark: #3b82f67f;\n --mb-tab-hover-light: #4299e17f;\n --mb-green-shade-dark: #9fed8f33;\n --mb-green-shade-light: #0a7d6c1a;\n --mb-black: #000000;\n --mb-white: #ffffff;\n --mb-red: #ff2424;\n --mb-red-35: #3a1c2a;\n --mb-red-15: #ffdede;\n --gray-900: #101223;\n --gray-850: #1e2030;\n --gray-800: #282a3a;\n --gray-700: #404252;\n --gray-600: #5b5d6b;\n --gray-500: #777986;\n --gray-400: #9496a1;\n --gray-300: #b3b5bd;\n --gray-200: #d2d4da;\n --gray-150: #e8eaf0;\n --gray-100: #f3f4f8;\n --gray-50: #f9f9f9;\n --blue-300: #4f58a3;\n --blue-300-35: #c2c5dd;\n --blue-300-15: #ebedfb;\n --blue-100: #c5d0ff;\n --blue-100-35: #3f4254;\n --blue-100-15: #2b2e42;\n --purple-300: #8c4fe5;\n --purple-100: #e087ff;\n --orange-300: #ff6c3b;\n --orange-100: #ff9470;\n --success-300: #0a7d6c;\n --success-100: #9fed8f;\n --warning-300: #f2d413;\n --warning-100: #ffe855;\n --error-300: #c74c4c;\n --error-100: #ed5a5a;\n /* vars end */\n width: 100%;\n border-radius: 0;\n background-color: var(--gray-50, #f9f9f9);\n color: black;\n margin: 0;\n padding: 12px 0;\n .floating-btns {\n position: fixed;\n bottom: 1rem;\n right: 1rem;\n display: flex;\n gap: 0.5rem;\n flex-flow: column nowrap;\n justify-content: flex-end;\n align-items: flex-end;\n z-index: 100000;\n }\n .top-desc {\n padding: 20px 0;\n }\n .input {\n display: flex;\n gap: 10px;\n justify-content: space-between;\n width: 100%;\n align-items: flex-end;\n .input-field {\n width: 100%;\n }\n }\n .connected_as {\n font-size: 12px;\n margin-bottom: 0rem;\n &.connected-dark {\n color: #fff;\n }\n }\n .status_indicator {\n width: 10px;\n height: 10px;\n border-radius: 50px;\n margin: 0px;\n margin-right: 5px;\n }\n .green {\n background: green;\n }\n .red {\n background: red;\n }\n .error {\n color: red;\n font-size: 12px;\n }\n .input-top {\n margin: 0 auto;\n width: 70%;\n padding: 20px 0;\n }\n pre {\n margin: 0;\n padding: 0;\n }\n &.dark {\n background-color: var(--gray-900, #101223);\n color: white;\n }\n .content_main {\n margin: 48px 44px;\n /* tablets and mobile */\n @media (max-width: 768px) {\n margin: 18px 10px;\n }\n }\n .stripe-data {\n display: flex;\n flex-direction: row;\n gap: 32px;\n img {\n max-width: 500px;\n width: 100%;\n height: auto;\n }\n .stripe-image {\n width: 45%;\n }\n padding: 32px;\n .stripe-text {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin-top: 32px;\n width: 45%;\n max-width: 500px;\n .paras {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n }\n @media only screen and (max-width: full) {\n flex-direction: column;\n .stripe-text {\n margin-top: 0;\n padding: 0;\n text-align: center;\n width: 100%;\n .paras {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n }\n .stripe-image {\n width: 100%;\n }\n }\n }\n`;\nconst queryInOwnedToggleHandler = () => {\n setShowOwnedFilters((prev) => !prev);\n};\nconst onStoreAddressChange = (e) => {\n setStoreAddress(e.target.value);\n};\nconst Index = ({}) => (\n <Root>\n <Card className={isDarkModeOn ? \"dark\" : \"\"}>\n <div\n className=\"top-desc\"\n style={{ background: isDarkModeOn ? \"#1e2030\" : \"#fff\" }}\n >\n <h5 className=\"text-center\">\n {context.accountId\n ? `Hello ${accountId}`\n : \"Hi, Please Sign In To Start\"}\n </h5>\n <h6 className=\"text-center\">\n Mint, buy, sell or donate your art here.\n </h6>\n {context.accountId && (\n <Widget\n src={`bos.genadrop.near/widget/Mintbase.App.DAOs.Connection`}\n props={{\n isDarkModeOn,\n accountId,\n localStorageData: connectedDao,\n setLocalStorageData,\n }}\n />\n )}\n <Widget\n src={`bos.genadrop.near/widget/Mintbase.MbTabs`}\n props={{\n ...tabProps,\n activeTab: selectedTab,\n onTabChange: handleTabClick,\n isDarkModeOn,\n hasQueryToggle:\n selectedTab === \"my-owned-nfts\" ||\n selectedTab === \"my-minted-nfts\" ||\n selectedTab === \"store-nfts\",\n onQueryToggle: queryInOwnedToggleHandler,\n }}\n />\n </div>\n <div className=\"d-flex flex-column align-items-center content_main\">\n <PageContent />\n </div>\n <div className=\"floating-btns\">\n <Toggle onClick={switchChangeHandler} title=\"Toggle Theme\">\n <Widget\n src={\"bos.genadrop.near/widget/Mintbase.MbIcon\"}\n props={{\n name: !isDarkModeOn ? \"moon\" : \"sun\",\n size: \"22px\",\n isDarkModeOn,\n color: !isDarkModeOn ? \"mb-white\" : \"mb-black\",\n }}\n />\n </Toggle>\n </div>\n </Card>\n </Root>\n);\nreturn <Index {...props} />;\n" } } } } }