Transaction: 3DJmvxx...s4h5

{ "data": { "bos.dapplets.near": { "widget": { "PickerExample.Main": { "": "const NAMESPACE = 'bos.dapplets.near/parser/twitter'\nconst CONTEXT_TYPE = 'post'\n\nconst SKIN = 'META_GUIDE'\n\nconst [isRunnigApp, toggleIsRunningApp] = useState(false)\nconst [context, setContext] = useState(null)\nconst [focusedContext, setFocusedContext] = useState(null);\n\nconst handleClose = () => {\n setContext(null)\n toggleIsRunningApp(false)\n}\n\nconst ChapterWrapper = (props) => {\n const widgetProps = {\n id: context.id,\n type: 'callout',\n onClose: handleClose,\n content:`\n**ID:** ${context.id}\n\n**Context type:** ${context.type}\n\n**Namespace:** ${context.namespace}\n\n**Parsed context:**\n\n\\`\\`\\`js\n${JSON.stringify(context.parsed, null, 2)}\n\\`\\`\\`\n`,\n skin: SKIN,\n children: ({ ref }) => {\n props.attachContextRef(ref);\n return props.children;\n }\n }\n return (\n <Widget\n src='bos.dapplets.near/widget/WebGuide.OverlayTrigger'\n loading={props?.children}\n props={widgetProps}\n />\n )\n}\n\nconst iconQuestionMark = (isActive) => (\n <svg\n width=\"512\"\n height=\"512\"\n viewBox=\"0 0 512 512\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n width=\"512\"\n height=\"512\"\n fill={isActive ? \"white\" : \"#384BFF\"}\n />\n <path\n d=\"M274.175 72.1535C274.547 69.181 270.812 67.5595 268.894 69.8608L85.1005 290.413C83.4721 292.367 84.8616 295.333 87.4051 295.333H252.602C254.406 295.333 255.802 296.915 255.578 298.705L237.825 440.735C237.453 443.708 241.188 445.329 243.106 443.028L426.9 222.476C428.528 220.522 427.138 217.556 424.595 217.556H259.398C257.594 217.556 256.198 215.974 256.422 214.183L274.175 72.1535Z\"\n fill={isActive ? \"#384BFF\" : \"white\"}\n stroke={isActive ? \"#384BFF\" : \"white\"}\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconsole.log('##### context', context)\n\nconst Latch = styled.div`\n background-color: #384bff;\n height: 20px;\n width: 300px;\n border-radius: 6px 6px 0 0;\n color: #fff;\n text-align: center;\n position: absolute;\n top: -20px;\n left: 0;\n transform: translateX(+50%);\n`\n\nconst ContextTypeLatch = ({ context }) => {\n if (context.type === 'timeline') {\n return <Latch>Latch over the timeline</Latch>\n } else if (context.type === 'postSouthButton' && context.id === 'like') {\n return <button>Like Latch</button>\n } else {\n return null\n }\n}\n\nreturn (\n <>\n {isRunnigApp ? (\n <DappletContextPicker\n // target={}\n onClick={ctx => setContext(ctx)}\n LatchComponent={ContextTypeLatch}\n highlightChildren\n />\n ) : null}\n \n <DappletPortal\n target={{\n namespace: \"mweb\",\n contextType: \"mweb-overlay\",\n injectTo: \"mweb-actions-panel\",\n if: { id: { eq: \"mweb-overlay\" } },\n arrowTo: \"context\",\n }}\n component={() => <Widget\n src='bos.dapplets.near/widget/WebGuide.Action'\n props={{\n appId: 'picker-example',\n tooltip: isRunnigApp ? 'Stop Picker' : 'Run Picker',\n isActive: isRunnigApp,\n children: iconQuestionMark(isRunnigApp),\n handleAction: () => {\n if (isRunnigApp) {\n handleClose()\n } else {\n toggleIsRunningApp(true)\n }\n },\n }}\n />}\n />\n {isRunnigApp && context ? (\n <DappletPortal\n target={{\n namespace: context.namespace,\n contextType: context.type,\n if: { id: { eq: context.id } },\n parent: context.type === 'postSouthButton' && {\n namespace: context.namespace,\n contextType: context.parent.type,\n if: {\n id: { eq: context.parent.id }\n }\n }\n }}\n component={ChapterWrapper}\n />\n ) : null}\n </>\n)\n" } } } } }