Transaction: EgwqfHe...5RYE

{ "data": { "bos.dapplets.near": { "widget": { "OnboardingTest.Main": { "": "const [show, setShow] = useState(false)\nconst [start, setStart] = useState(false)\nconst [showFrom, setShowFrom] = useState(0)\n\nconst response = Near.view('app.webguide.near', 'get_guide', { guide_id: props?.link?.id })\nconst data = response && JSON.parse(response)\nconst lastShowTimes = data && data?.map((chapter) => Storage.privateGet(props.link.id + '/' + chapter.id + '/lastShowTime'))\n\nconsole.log('data', data)\nconsole.log('props?.link?.id', props?.link?.id)\nconsole.log('props', props)\nconsole.log('lastShowTimes',lastShowTimes)\n\nuseEffect(() => {\n if (!start && lastShowTimes?.[0] === null) return\n setStart(true)\n const lastShowByIds = {}\n for (let i = 0; i < lastShowTimes.length; ++i) {\n const elapsed = Date.now() - (lastShowTimes[i] ?? 0)\n // if (elapsed > 1000 * 60 * 60 * 3) {\n // TESTING\n lastShowByIds[data[i].id] = elapsed > 1000 * 60 * 1 * 1 ? 1 : 0\n }\n console.log('lastShowByIds', lastShowByIds)\n if (Object.values(lastShowByIds).includes(1)) {\n data.sort((chapA, chapB) => lastShowByIds[chapA.id] - lastShowByIds[chapB.id])\n console.log('data after sort', data)\n setShowFrom(Object.values(lastShowByIds).filter(a => !a).length)\n setShow(true)\n }\n}, [start, lastShowTimes])\n\nsetTimeout(() => setStart(true), 10000)\n\nconst 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 Onboarding = styled.div`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n animation: falling-animation 0.3s linear forwards;\n\n @keyframes falling-animation {\n from {\n transform: translate(-50%, -200%);\n }\n\n to {\n transform: translate(-50%, -50%);\n }\n }\n`;\n\nconst handleClose = (doNotShowAgain) => {\n // const time = doNotShowAgain ? 30000000000000 : Date.now()\n const time = doNotShowAgain ? Date.now() + 1000 * 60 : Date.now() // TESTING\n data.forEach((chapter) => Storage.privateSet(props.link.id + '/' + chapter.id + '/lastShowTime', time))\n setShow(false)\n}\n\nconst saveData = (inputData) => {\n if (context?.accountId) {\n Near.call(\n 'app.webguide.near',\n 'set_guide',\n {\n guide_id: props.link.id,\n data: inputData,\n }\n )\n }\n}\n\nreturn (\n <OverlayTriggerWrapper>\n {show ? (\n <DappletOverlay>\n <Onboarding>\n <Widget\n props={{ handleClose, data, saveData, setShow, link: props.link, showFrom }}\n src=\"bos.dapplets.near/widget/OnboardingTest.SandboxOnboarding\"\n />\n </Onboarding>\n </DappletOverlay>\n ) : null}\n </OverlayTriggerWrapper>\n)\n" }, "OnboardingTest.SandboxOnboarding": { "": "const { handleClose, saveData, setShow, link, data, showFrom } = props\n\nconst [doNotShowAgain, setDoNotShowAgain] = useState(false)\nconst [activeChapterNumber, setActiveChapterNumber] = useState(data && showFrom)\nconst [newData, setNewData] = useState('')\nconst [isEditMode, setEditMode] = useState(false)\n\nconst Container = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n width: 630px;\n height: 690px;\n background: #FFFFFE;\n border: 1px solid #02193A;\n border-radius: 20px;\n padding: 20px;\n gap: 20px;\n z-index: 1000;\n box-shadow: none;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n align-items: center;\n justify-content: center;\n`\n\nconst Header = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n color: #02193A;\n\n h1 {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n padding: 0;\n margin: 0;\n font-size: 32px;\n font-weight: 600;\n line-height: 48px;\n }\n`\n\nconst TopLine = styled.div`\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 24px;\n margin: 0;\n padding: 0;\n`\n\nconst PagesIndicators = styled.div`\n position: relative;\n display: flex;\n flex-direction: row;\n gap: 6px;\n`\n\nconst PageIndicatorBtn = styled.button`\n position: relative;\n display: flex;\n border: none;\n border-radius: 9em;\n margin: 0;\n padding: 2px;\n background: none;\n cursor: pointer;\n transition-duration: .15s;\n\n &:not(:disabled, .active):hover {\n background: rgba(29,155,240,0.10);\n\n div {\n background: rgba(0, 0, 0, .2);\n }\n }\n\n &:not(:disabled, .active):active {\n background: rgba(29,155,240,0.20);\n\n div {\n background: rgba(0, 0, 0, .3);\n }\n }\n`\n\nconst PageIndicator = styled.div`\n position: relative;\n width: 10px;\n height: 10px;\n border: none;\n border-radius: 9em;\n background: rgba(0, 0, 0, .1);\n margin: 0;\n padding: 0;\n cursor: pointer;\n transition-duration: .15s;\n\n &.active {\n background: rgba(56, 75, 255, 1);\n cursor: default;\n }\n`\n\nconst EditButton = styled.button`\n position: absolute;\n left: 0;\n top: 0;\n margin: 0;\n padding: 0 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n border-radius: 24px;\n background: none;\n cursor: pointer;\n height: 24px;\n color: #222;\n transition-duration: .15s;\n \n :hover {\n color: #111;\n background: #eee;\n }\n \n :active {\n color: #000;\n background: #ddd;\n }\n`\n\nconst CloseButton = styled.button`\n position: absolute;\n right: 0;\n top: 0;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: none;\n cursor: pointer;\n\n svg {\n path {\n stroke: #838891;\n transition-duration: .2s;\n }\n }\n \n :hover {\n svg {\n path {\n stroke: #555555;\n }\n }\n }\n`\n\nconst closeIcon = (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <path d=\"M6 6.5L18 18.5\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n)\n\nconst WarningMessage = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 4px 10px;\n gap: 6px;\n align-items: center;\n background: rgba(56, 75, 255, 0.05);\n border-radius: 5px;\n flex: none;\n flex-grow: 0;\n position: relative;\n\n p {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 150%;\n color: #384BFF;\n flex: none;\n flex-grow: 0;\n }\n\n svg {\n padding: 0;\n margin: 0;\n }\n`\n\nconst AlertIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#384BFF\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <path d=\"M12.01 16L12.01 12\" stroke=\"#384BFF\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <path d=\"M12.01 8L12 8\" stroke=\"#384BFF\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n)\n\nconst CardContainer = styled.div`\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n gap: 10px;\n flex: 1;\n overflow: hidden;\n`\n\nconst ArrowButton = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 4px;\n width: 32px;\n height: 32px;\n background: #F5F6FE;\n border: none;\n border-radius: 40px;\n cursor: default;\n transform: ${(p) => (p.direction === 'left' ? 'rotate(0.5turn)' : '')};\n transition-duration: .15s;\n\n svg {\n path {\n stroke: rgba(153, 152, 154, 1);\n }\n }\n\n &:not(:disabled) {\n cursor: pointer;\n\n svg {\n path {\n stroke: rgba(56, 75, 255, 1);\n }\n }\n }\n\n &:not(:disabled):hover {\n background: rgba(56, 75, 255, 1);\n\n svg {\n path {\n stroke: white;\n }\n }\n }\n\n &:not(:disabled):active {\n background: rgba(26, 45, 225, 1);\n\n svg {\n path {\n stroke: white;\n }\n }\n }\n`\n\nconst arrowRight = (\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 12.5H19\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <path d=\"M12 5.5L19 12.5L12 19.5\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n </svg>\n)\n\nconst Card = styled.div`\n position: relative;\n overflow: auto;\n display: flex;\n flex 1;\n height: 100%;\n flex-direction: column;\n box-sizing: border-box;\n padding: 10px;\n gap: 10px;\n border: none;\n border-radius: 20px;\n background: rgba(248, 249, 255, 1);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n\n\n h3 {\n padding: 8px 0 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 19px;\n color: #121212;\n flex: none;\n align-self: stretch;\n flex-grow: 0;\n text-indent: 16px;\n }\n\n img {\n position: relative;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n height: auto !important;\n border-radius: 10px;\n flex: none;\n /* align-self: stretch; */\n flex-grow: 0;\n border: 1px solid rgb(207, 217, 222);\n /* object-fit: none; */\n /* object-position: top; */\n }\n\n p {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 149%;\n color: #777777;\n flex: none;\n align-self: stretch;\n flex-grow: 0;\n }\n\n a {\n padding: 0;\n margin: 0;\n /* align-self: flex-start; */\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 149%;\n text-decoration-line: underline !important;\n color: #384BFF;\n cursor: 'poiner';\n }\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 0px;\n margin: 0;\n gap: 20px;\n width: 100%;\n`\n\nconst Checkbox = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n cursor: pointer;\n\n label {\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 149%;\n text-align: center;\n color: #7A818B;\n\n input {\n padding: 0;\n margin: 0;\n margin-bottom: 1px;\n width: 16px;\n height: 16px;\n border-radius: 4px;\n border: 1px solid #384BFF\n cursor: pointer;\n }\n }\n`\n\nconst SuccessButton = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 20px;\n width: 180px;\n height: 42px;\n background: #02193A;\n border-radius: 50px;\n border: none;\n cursor: pointer;\n\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 149%;\n text-align: center;\n color: #FFFFFF;\n transition-duration: 0.2s;\n\n :hover {\n background-color: rgb(32 45 63);\n }\n`\n\nreturn (!data || isEditMode) ? (\n// <Container>\n// <Header>\n// <img src=\"https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e\"/>\n// </Header>\n// <CardContainer>\n// <ArrowButton\n// direction='left'\n// disabled={true}\n// >\n// {arrowRight}\n// </ArrowButton>\n// <Card>\n// <div style={{\n// width: '100%',\n// height: '100%',\n// display: 'flex',\n// justifyContent: 'center',\n// alignItems: 'center'\n// }}>\n// <img\n// src=\"https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e\"\n// style={{ border: 'none !important' }}\n// />\n// </div>\n// </Card>\n// <ArrowButton\n// direction='right'\n// disabled={true}\n// >\n// {arrowRight}\n// </ArrowButton>\n// </CardContainer>\n// <Footer>\n// <img src=\"https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e\"/>\n// <img src=\"https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e\"/>\n// </Footer>\n// </Container>\n// ) (!data || !data.length || activeChapterNumber === null) ? (\n<Container>\n <Header>\n <h1>Add data</h1>\n <CloseButton onClick={() => handleClose(false)}>\n {closeIcon}\n </CloseButton>\n </Header>\n <textarea\n autofocus\n style={{ width: '100%', height: '100%' }}\n onChange={(e) => setNewData(e.target.value)}\n value={newData}\n />\n <div style={{ display: 'flex', width: '80%', justifyContent: 'space-evenly' }}>\n {isEditMode ? (\n <SuccessButton onClick={() => setEditMode(false)}>\n Cancel\n </SuccessButton>\n ) : null}\n <SuccessButton onClick={() => {\n saveData(newData)\n setNewData('')\n setShow(false)\n }}>\n Save\n </SuccessButton>\n </div>\n</Container>\n) : (\n <Container>\n <Header>\n <TopLine>\n {context.accountId === link.authorId ? (\n <EditButton onClick={() => setEditMode(true)}>\n Edit data\n </EditButton>\n ) : null}\n <PagesIndicators>\n {data?.map((chapter, i) => (\n <PageIndicatorBtn\n key={chapter.id}\n disabled={i === activeChapterNumber}\n onClick={() => setActiveChapterNumber(i)}\n >\n <PageIndicator\n className={i === activeChapterNumber ? 'active' : '' }\n />\n </PageIndicatorBtn>\n ))}\n </PagesIndicators>\n <CloseButton onClick={() => handleClose(false)}>\n {closeIcon}\n </CloseButton>\n </TopLine>\n <h1>{data[activeChapterNumber].title}</h1>\n </Header>\n <CardContainer>\n <ArrowButton\n direction='left'\n disabled={activeChapterNumber - 1 < 0}\n onClick={() => setActiveChapterNumber(activeChapterNumber - 1 < 0 ? activeChapterNumber : activeChapterNumber - 1)}\n >\n {arrowRight}\n </ArrowButton>\n <Card>\n {context.accountId === null ? (<WarningMessage>\n <AlertIcon/>\n <p>You must be Logged In to start using this</p>\n </WarningMessage>) : null}\n <Markdown text={data[activeChapterNumber].content} />\n </Card>\n <ArrowButton\n direction='right'\n disabled={activeChapterNumber + 1 > data.length - 1}\n onClick={() => setActiveChapterNumber(activeChapterNumber + 1 > data.length - 1 ? activeChapterNumber : activeChapterNumber + 1)}\n >\n {arrowRight}\n </ArrowButton>\n </CardContainer>\n <Footer>\n <Checkbox>\n <label>\n <input type=\"checkbox\" checked={doNotShowAgain} onChange={(e) => setDoNotShowAgain(e.target.checked)} />\n Don't show it again\n </label>\n </Checkbox>\n <SuccessButton onClick={() => handleClose(doNotShowAgain)}>Got it</SuccessButton>\n </Footer>\n </Container>\n)" } } } } }