{
"data": {
"bos.dapplets.near": {
"widget": {
"WebGuide.Main": {
"": "const OverlayTriggerWrapper = styled.div`\n display: flex;\n z-index: 500;\n\n .OverlayTrigger {\n position: absolute;\n background: #db504a;\n border: 1px solid #db504a;\n width: 6px;\n height: 49px;\n right: -6px;\n top: 10px;\n border-radius: 0px 4px 4px 0px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n z-index: 79;\n }\n`\n\nconst guideConfig = {\n chapters: [\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtension\",\n type: 'infobox',\n if: { id: \"1694995344461894022\" }, // ToDo: should be another trigger\n // showChecked: true,\n pages: [\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtension/Welcome\",\n title: \"You’re entering Mutable Web\",\n status: [{ info: 'You must be logged in to make all features available' }],\n content: \"\\nMutable Web is a new web3 paradigm that allows anyone to add custom functionality to existing websites and share them within your community— no matter who owns the website.\\n\\nBecome the co-owner of any website you are using!\\n\\n### Mutation switch\\n\\n![](https://raw.githubusercontent.com/dapplets/bos-components/main/assets/onboarding-video-001.webp)\\n\\nYou can switch between website mutations created by different communities.\\n\\n[See more examples on our playground](https://twitter.com/MrConCreator)\\n\",\n },\n ]\n },\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionNotch\",\n type: 'callout',\n placement: 'right',\n strategy: 'fixed',\n namespace: \"mweb\",\n contextType: \"notch\",\n injectTo: \"hidden\",\n if: { id: { eq: \"notch\" } },\n arrowTo: \"context\",\n pages: [\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionNotch/Notch\",\n title: \"Mutation switch\",\n status: [{ info: 'Click on the dropdown box' }],\n content: \"Mutation switch allows user to choose between applications’ sets.\",\n },\n ]\n },\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionDropdown/1\",\n type: 'callout',\n placement: 'right',\n strategy: 'fixed',\n namespace: \"mweb\",\n contextType: \"notch\",\n injectTo: \"recently-used-mutations\",\n if: { id: { eq: \"recently-used-mutations\" } },\n arrowTo: \"context\",\n pages: [\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionDropdown/1/1\",\n title: \"The list of recently used mutations (1/2)\",\n status: [],\n content: \"The current mutation is highlighted with a “star” symbol. To add “favorite” status to a mutation on the current page, just click on the star. Now this mutation is active even if a new tab with the current site is open.\",\n },\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionDropdown/1/2\",\n title: \"The list of recently used mutations (2/2)\",\n status: [{ info: 'Click on the dropdown box below' }],\n content: \"The “trash” removes the mutation from the “recently used” list.\",\n },\n ]\n },\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionDropdown/2\",\n type: 'callout',\n strategy: 'fixed',\n placement: 'right',\n namespace: \"mweb\",\n contextType: \"notch\",\n injectTo: \"hidden\",\n if: { id: { eq: \"unused-mutations-title\" } },\n arrowTo: \"context\",\n pages: [\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionDropdown/2/1\",\n title: \"All mutations\",\n status: [],\n content: \"This is the list of all available, previously unused mutations.\",\n },\n ]\n },\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionDropdown/3\",\n type: 'callout',\n strategy: 'fixed',\n namespace: \"mweb\",\n contextType: \"notch\",\n injectTo: \"hidden\",\n if: { id: { eq: \"mutate-button\" } },\n arrowTo: \"context\",\n pages: [\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtensionDropdown/3/1\",\n title: '\"Mutate\" button',\n status: [],\n content: 'The \"Mutate\" button allows users to create, fork, and edit mutations.',\n },\n ]\n },\n {\n id: \"bos.dapplets.near/app/Tipping/1\",\n type: 'callout',\n namespace: \"bos.dapplets.near/parser/twitter\",\n contextType: \"post\",\n injectTo: \"avatar\",\n if: { id: { eq: \"1694995344461894022\" } },\n arrowTo: \"insPoint\",\n pages: [\n {\n id: \"bos.dapplets.near/app/Tipping/1/1\",\n status: [],\n title: \"Tipping app\",\n content: \"If you want to modestly thank the author of the tweet you like...\",\n },\n ],\n },\n {\n id: \"bos.dapplets.near/app/Tipping/2\",\n type: \"callout\",\n namespace: \"mweb\",\n contextType: \"injected-widget\",\n injectTo: \"hidden\",\n if: {\n parentContextId: { eq: \"1694995344461894022\" },\n widgetSrc: { eq: \"bos.dapplets.near/widget/Tipping.Main\" },\n },\n arrowTo: \"context\",\n pages: [\n {\n id: \"bos.dapplets.near/app/Tipping/2/1\",\n status: [],\n title: \"Tipping app\",\n content: \"... you can send them a tip through our application.\",\n },\n ],\n },\n {\n id: \"bos.dapplets.near/mutation/EarTrigger\",\n type: 'callout',\n namespace: \"mweb\",\n contextType: \"ear-trigger\",\n injectTo: \"hidden\",\n if: { id: { eq: \"1694995344461894022\" } },\n arrowTo: \"context\",\n pages: [\n {\n id: \"bos.dapplets.near/mutation/EarTrigger/1\",\n status: [],\n title: \"Apps control panel\",\n content: 'We add the App control panel to every post. By using it the user can add to the right-on post or inside the panel widgets, which expands the browser workflow possibilities.',\n },\n ],\n },\n ],\n}\n\nconst [showApp, setShowApp] = useState(true)\nconst [chapterCounter, setChapterCounter] = useState(0)\nconst [pageCounter, setPageCounter] = useState(0)\n\nif (\n !guideConfig\n || !guideConfig.chapters?.length\n || !guideConfig.chapters[0].pages?.length\n) return <></>\n\nconst handleClose = () => {\n setShowApp(false)\n}\n\nconst handleChapterDecrement = () => {\n if (chapterCounter !== 0) {\n setChapterCounter((val) => val - 1)\n setPageCounter(\n guideConfig.chapters[chapterCounter - 1]?.pages?.length\n ? guideConfig.chapters[chapterCounter - 1]?.pages?.length - 1\n : 0\n )\n }\n}\n\nconst handleChapterIncrement = () => {\n setChapterCounter((val) => Math.min(val + 1, guideConfig.chapters.length - 1))\n setPageCounter(0)\n}\n\nconst handleClickPrev = () => {\n if (!pageCounter) {\n handleChapterDecrement()\n } else {\n setPageCounter((val) => val - 1)\n }\n}\n\nconst handleClickNext = () => {\n if (pageCounter === guideConfig.chapters[chapterCounter]?.pages?.length - 1) {\n handleChapterIncrement()\n } else {\n setPageCounter((val) => val + 1)\n }\n}\n\nconst ChapterWrapper = (props) => {\n console.log(props)\n const currentChapter = guideConfig.chapters[chapterCounter]\n if (!currentChapter) return <></>\n const pages = currentChapter.pages\n if (!pages) return <></>\n const currentPage = pages[pageCounter]\n if (!currentPage) return <></>\n\n const status = currentPage.status.length&& Object.entries(currentPage.status[0])[0] // ToDo: mocked!!!\n\n const buttons = []\n if (chapterCounter || pageCounter) {\n buttons.push({\n variant: \"secondary\",\n disabled: false,\n onClick: handleClickPrev,\n label: \"Prev\",\n })\n }\n if (chapterCounter === guideConfig.chapters.length - 1 && pageCounter === pages.length - 1) {\n buttons.push({\n variant: \"primary\",\n disabled: false,\n onClick: handleClose,\n label: \"Finish\",\n })\n } else (\n buttons.push({\n variant: \"primary\",\n disabled: false,\n onClick: handleClickNext,\n label: \"Next\",\n })\n )\n\n return (\n <Widget\n src='bos.dapplets.near/widget/WebGuide.OverlayTrigger'\n loading={props?.children}\n props={{\n type: currentChapter.type,\n placement: currentChapter.placement,\n strategy: currentChapter.strategy,\n navi: {\n currentChapterIndex: chapterCounter,\n totalChapters: guideConfig.chapters.length,\n currentPageIndex: pageCounter,\n totalPages: pages.length,\n },\n onClose: handleClose,\n buttons,\n status: status && {\n type: status[0],\n text: status[1],\n },\n title: currentPage.title,\n content: currentPage.content,\n showChecked: currentChapter.showChecked,\n children: currentChapter.type === 'callout'\n && currentChapter.arrowTo === \"context\"\n ? ({ ref }) => {\n props.attachContextRef(ref);\n return props.children;\n }\n : currentChapter.arrowTo === \"insPoint\"\n ? ({ ref }) => {\n props.attachInsPointRef(ref);\n return props.children;\n }\n : props.children,\n }}\n />\n )\n}\n\n\nreturn showApp ? (guideConfig.chapters[chapterCounter]?.type === 'infobox' ? (\n <OverlayTriggerWrapper>\n <DappletOverlay>\n <ChapterWrapper/>\n </DappletOverlay>\n </OverlayTriggerWrapper>\n) : (\n <MuWebWrapperPortal\n target={{\n namespace: guideConfig.chapters[chapterCounter]?.namespace,\n contextType: guideConfig.chapters[chapterCounter]?.contextType,\n injectTo: guideConfig.chapters[chapterCounter]?.injectTo,\n if: guideConfig.chapters[chapterCounter]?.if,\n insteadOf: guideConfig.chapters[chapterCounter]?.insteadOf,\n }}\n component={ChapterWrapper}\n />\n)) : <></>\n"
},
"WebGuideTest.Main": {
"": "const OverlayTriggerWrapper = styled.div`\n display: flex;\n z-index: 500;\n\n .OverlayTrigger {\n position: absolute;\n background: #db504a;\n border: 1px solid #db504a;\n width: 6px;\n height: 49px;\n right: -6px;\n top: 10px;\n border-radius: 0px 4px 4px 0px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n z-index: 79;\n }\n`\n\nconst nearSocialConfig = {\n chapters: [\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtension\",\n type: 'infobox',\n if: { id: \"1694995344461894022\" }, // ToDo: should be another trigger\n // showChecked: true,\n pages: [\n {\n id: \"bos.dapplets.near/gateway/MutableWebExtension/Welcome\",\n title: \"You’re entering Mutable Web\",\n status: [{ info: 'You must be logged in to make all features available' }],\n content: \"\\nMutable Web is a new web3 paradigm that allows anyone to add custom functionality to existing websites and share them within your community— no matter who owns the website.\\n\\nBecome the co-owner of any website you are using!\\n\\n### Mutation switch\\n\\n![](https://raw.githubusercontent.com/dapplets/bos-components/main/assets/onboarding-video-001.webp)\\n\\nYou can switch between website mutations created by different communities.\\n\\n[See more examples on our playground](https://twitter.com/MrConCreator)\\n\",\n },\n ]\n },\n {\n id: \"bos.dapplets.near/app/Tipping/2\",\n type: \"callout\",\n namespace: \"mweb\",\n contextType: \"injected-widget\",\n injectTo: \"hidden\",\n if: {\n parentContextId: { eq: \"dapplets.near/104755842\" },\n widgetSrc: { eq: \"bos.dapplets.near/widget/Tipping.Main\" },\n },\n arrowTo: \"context\",\n pages: [\n {\n id: \"bos.dapplets.near/app/Tipping/2/1\",\n status: [],\n title: \"Tipping app\",\n content: \"... you can send them a tip through our application.\",\n },\n ],\n },\n {\n id: \"bos.dapplets.near/mutation/EarTrigger\",\n type: 'callout',\n namespace: \"mweb\",\n contextType: \"ear-trigger\",\n injectTo: \"hidden\",\n if: { id: { eq: \"dapplets.near/104755842\" } },\n arrowTo: \"context\",\n pages: [\n {\n id: \"bos.dapplets.near/mutation/EarTrigger/1\",\n status: [],\n title: \"Apps control panel\",\n content: 'We add the App control panel to every post. By using it the user can add to the right-on post or inside the panel widgets, which expands the browser workflow possibilities.',\n },\n ],\n },\n ],\n}\n\nconst nestedCalloutConfig = {\n chapters: [{\n id: \"CalloutInCallout\",\n type: 'callout',\n namespace: \"mweb\",\n contextType: \"wg-chapter\",\n injectTo: \"hidden\",\n if: { id: { eq: \"bos.dapplets.near/app/Tipping/2\" } }, // ID of the last chapter\n arrowTo: \"context\",\n pages: [\n {\n id: \"CalloutInCallout/1\",\n status: [],\n title: \"CalloutInCallout\",\n content: 'CalloutInCallout',\n },\n ],\n }]\n}\n\n// ToDo: move to a smart contract\nconst guideConfigByLinkId = {\n '3f969452807cb9f0ccc4809e679b861b': nearSocialConfig,\n '11700d19b9540c6539acc24e5aaf3bb8': nestedCalloutConfig\n}\n\nconst guideConfig = guideConfigByLinkId[props.link.id]\n\nconst [showApp, setShowApp] = useState(true)\nconst [chapterCounter, setChapterCounter] = useState(0)\nconst [pageCounter, setPageCounter] = useState(0)\n\nif (\n !guideConfig\n || !guideConfig.chapters?.length\n || !guideConfig.chapters[0].pages?.length\n) return <></>\n\nconst handleClose = () => {\n setShowApp(false)\n}\n\nconst handleChapterDecrement = () => {\n if (chapterCounter !== 0) {\n setChapterCounter((val) => val - 1)\n setPageCounter(\n guideConfig.chapters[chapterCounter - 1]?.pages?.length\n ? guideConfig.chapters[chapterCounter - 1]?.pages?.length - 1\n : 0\n )\n }\n}\n\nconst handleChapterIncrement = () => {\n setChapterCounter((val) => Math.min(val + 1, guideConfig.chapters.length - 1))\n setPageCounter(0)\n}\n\nconst handleClickPrev = () => {\n if (!pageCounter) {\n handleChapterDecrement()\n } else {\n setPageCounter((val) => val - 1)\n }\n}\n\nconst handleClickNext = () => {\n if (pageCounter === guideConfig.chapters[chapterCounter]?.pages?.length - 1) {\n handleChapterIncrement()\n } else {\n setPageCounter((val) => val + 1)\n }\n}\n\nconst ChapterWrapper = (props) => {\n const currentChapter = guideConfig.chapters[chapterCounter]\n if (!currentChapter) return <></>\n const pages = currentChapter.pages\n if (!pages) return <></>\n const currentPage = pages[pageCounter]\n if (!currentPage) return <></>\n\n const status = currentPage.status.length&& Object.entries(currentPage.status[0])[0] // ToDo: mocked!!!\n\n const buttons = []\n if (chapterCounter || pageCounter) {\n buttons.push({\n variant: \"secondary\",\n disabled: false,\n onClick: handleClickPrev,\n label: \"Prev\",\n })\n }\n if (chapterCounter === guideConfig.chapters.length - 1 && pageCounter === pages.length - 1) {\n buttons.push({\n variant: \"primary\",\n disabled: false,\n onClick: handleClose,\n label: \"Finish\",\n })\n } else (\n buttons.push({\n variant: \"primary\",\n disabled: false,\n onClick: handleClickNext,\n label: \"Next\",\n })\n )\n\n return (\n <Widget\n src='bos.dapplets.near/widget/WebGuideTest.OverlayTrigger'\n loading={props?.children}\n props={{\n id: currentChapter.id,\n type: currentChapter.type,\n placement: currentChapter.placement,\n strategy: currentChapter.strategy,\n navi: {\n currentChapterIndex: chapterCounter,\n totalChapters: guideConfig.chapters.length,\n currentPageIndex: pageCounter,\n totalPages: pages.length,\n },\n onClose: handleClose,\n buttons,\n status: status && {\n type: status[0],\n text: status[1],\n },\n title: currentPage.title,\n content: currentPage.content,\n showChecked: currentChapter.showChecked,\n children: currentChapter.type === 'callout'\n && currentChapter.arrowTo === \"context\"\n ? ({ ref }) => {\n props.attachContextRef(ref);\n return props.children;\n }\n : currentChapter.arrowTo === \"insPoint\"\n ? ({ ref }) => {\n props.attachInsPointRef(ref);\n return props.children;\n }\n : props.children,\n }}\n />\n )\n}\n\n\nreturn showApp ? (guideConfig.chapters[chapterCounter]?.type === 'infobox' ? (\n <OverlayTriggerWrapper>\n <DappletOverlay>\n <ChapterWrapper/>\n </DappletOverlay>\n </OverlayTriggerWrapper>\n) : (\n <DappletPortal\n target={{\n namespace: guideConfig.chapters[chapterCounter]?.namespace,\n contextType: guideConfig.chapters[chapterCounter]?.contextType,\n injectTo: guideConfig.chapters[chapterCounter]?.injectTo,\n if: guideConfig.chapters[chapterCounter]?.if,\n insteadOf: guideConfig.chapters[chapterCounter]?.insteadOf,\n }}\n component={ChapterWrapper}\n />\n)) : <></>\n"
}
}
}
}
}