Transaction: 6EXUprH...nJFV

{ "data": { "wendersonpires.near": { "widget": { "NearSocialBridge_Demo": { "": "// Load React, React Dom and the Core Bridge library\nconst code = `\n<script src=\"https://unpkg.com/react@18/umd/react.development.js\" crossorigin></script>\n<script src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\" crossorigin></script>\n<div id=\"bridge-root\"></div>\n\n<script>\n// Viewer port\nlet viewerPort\n\n// Outside of the component state controller\nlet state = {\n externalAppUrl: '',\n initialPath: null,\n iframeHeight: 480,\n userInfo: null,\n sessionStorageClone: {},\n connectMessageSent: false,\n}\n\n// Core Component\nfunction NearSocialBridgeCore(props) {\n const [externalAppUrl, setExternalAppUrl] = React.useState(state.externalAppUrl)\n const [connectMessageSent, setConnectMessageSent] = React.useState(state.connectMessageSent)\n const [iframeHeight, setIframeHeight] = React.useState(state.iframeHeight)\n const [sessionStorageClone, setSessionStorageClone] = React.useState(state.sessionStorageClone)\n const [userInfo, setUserInfo] = React.useState(state.userInfo)\n\n React.useEffect(() => {\n const handler = (e) => {\n // Set the Viewer port\n console.log('PONTE', e.data.type, e.data.userInfo)\n if (!viewerPort && e.data.type === 'connect-view') {\n viewerPort = e.source\n setExternalAppUrl(e.data.externalAppUrl)\n setIframeHeight(e.data.initialIframeHeight || 480)\n state.externalAppUrl = e.data.externalAppUrl\n state.initialPath = e.data.initialPath\n state.userInfo = e.data.userInfo\n setUserInfo(e.data.userInfo)\n state.iframeHeight = e.data.initialIframeHeight || 480\n }\n\n if (e.data.type === 'update-initial-payload') {\n // state.userInfo = e.data.userInfo\n console.log('Mandou atualizar o user info:', e.data.userInfo)\n }\n\n // When get a message from the View\n if (viewerPort && e.data.from === 'view') {\n // Is it message to the core?\n if (e.data.type.includes('core:')) {\n // process eventual message to core here\n return\n }\n\n // Send to external app\n sendMessage(e.data)\n }\n }\n\n window.addEventListener('message', handler)\n\n return () => {\n window.removeEventListener('message', handler)\n }\n }, [])\n\n const sendMessage = (message) => {\n var iframe = document.getElementById('myIframe')\n iframe.contentWindow.postMessage(message, '*')\n }\n\n const sendMessageToView = (message) => {\n viewerPort.postMessage(message, '*')\n }\n\n // Answer Factory\n const buildAnswer = (requestType, payload) => {\n return {\n from: 'core',\n type: 'answer',\n requestType,\n payload,\n }\n }\n\n // Create connection payload\n const createConnectionPayload = () => {\n // Return the connect payload\n return {\n type: 'connect',\n payload: {\n initialPath: state.initialPath,\n userInfo: state.userInfo,\n },\n created_at: Date.now(),\n }\n }\n\n const onMessageHandler = (message) => {\n // Internal Request Handler\n if (message.data.from === 'external-app') {\n // Is to the Core\n if (message.data.type.includes('nsb:')) {\n internalRequestHandler(message.data)\n } else {\n // Is to the View\n sendMessageToView(message.data)\n }\n }\n }\n\n // Internal Request handlers\n const internalRequestHandler = (message) => {\n switch (message.type) {\n case 'nsb:session-storage:hydrate-viewer':\n sessionStorageHydrateViewer(message.type, message.payload)\n break\n case 'nsb:session-storage:hydrate-app':\n sessionStorageHydrateApp(message.type, message.payload)\n break\n case 'nsb:navigation:sync-content-height':\n syncContentHeight(message.type, message.payload)\n sendMessageToView(message)\n break\n }\n }\n\n const sessionStorageHydrateViewer = (requestType, payload) => {\n if (payload) {\n setSessionStorageClone(payload)\n state.sessionStorageClone = payload\n }\n\n const responseBody = buildAnswer(requestType, payload)\n sendMessage(responseBody)\n }\n\n const sessionStorageHydrateApp = (requestType, payload) => {\n const responseBody = buildAnswer(requestType, state.sessionStorageClone)\n sendMessage(responseBody)\n }\n\n const syncContentHeight = (requestType, payload) => {\n if (payload.height) {\n setIframeHeight(payload.height)\n state.iframeHeight = payload.height\n }\n\n const responseBody = buildAnswer(requestType)\n sendMessage(responseBody)\n }\n\n function onLoadHandler(e) {\n // On load iframe\n // On get msg from External App\n if (!connectMessageSent) {\n setConnectMessageSent(true)\n state.connectMessageSent = true\n window.addEventListener('message', onMessageHandler, false)\n }\n\n // Send the welcome message (connects with the external app)\n const welcomePayload = createConnectionPayload()\n console.log('Send A', welcomePayload)\n sendMessage(welcomePayload)\n\n // Wait a bit and send the message again to ensure the app and scripts are loaded and ready\n setTimeout(() => {\n console.log('Send B', welcomePayload)\n const welcomePayload2 = createConnectionPayload()\n sendMessage(welcomePayload2)\n }, 2000)\n }\n\n // Wait for the external app url to render the iframe\n if (!state.externalAppUrl) return null\n\n return React.createElement('iframe', {\n sandbox: 'allow-scripts',\n id: 'myIframe',\n src: externalAppUrl,\n style: { border: 'none', width: '100%', height: iframeHeight + 'px', margin: 0, padding: 0 },\n onLoad: onLoadHandler,\n })\n}\n\nconst domContainer = document.querySelector('#bridge-root')\nconst root = ReactDOM.createRoot(domContainer)\nroot.render(React.createElement(NearSocialBridgeCore, {}))\n\n</script>\n`;\n\n// NEW - Utils\n// (i) Discovery API uses cached data structure\nconst Utils = {\n /**\n * Send message\n */\n sendMessage: (message) => {\n State.update({\n currentMessage: message,\n });\n },\n /**\n * Call resolve or reject for a given caller\n * E.g:\n * Utils.promisify(() => getCachedObject(), (res) => console.log(res), (err) => console.log(err))\n */\n promisify: (caller, resolve, reject) => {\n const timer = 1000;\n const timeout = timer * 10;\n let timeoutCheck = 0;\n\n const find = () => {\n const response = caller();\n if (response) {\n resolve(response);\n } else {\n if (timeoutCheck < timeout) {\n // try again\n console.log(timeoutCheck);\n setTimeout(find, 1000);\n timeoutCheck += timer;\n } else {\n reject(null);\n }\n }\n };\n\n // Fist attempt\n find();\n },\n};\n// NEW\n\n// External App Url\n// const externalAppUrl = \"https://near-test-app.firebaseapp.com/\";\nconst externalAppUrl = \"https://12236538a88c.ngrok.app\";\n\n// User Info\nconst accountId = context.accountId ?? \"*\";\nconst profileInfo = Social.getr(`${accountId}/profile`);\nconst userInfo = { accountId, profileInfo };\n\n// Initial Path\nconst initialPath = props.path;\n\n// Initial iframe height\nconst initialIframeHeight = 500;\n\n// Initial State\nState.init({\n // profileInfoReSent: false,\n iframeHeight: initialIframeHeight,\n currentMessage: {\n type: \"connect-view\",\n externalAppUrl,\n userInfo,\n initialPath,\n initialIframeHeight,\n },\n});\n\n// NEW\n// Resend the profile info (wait data to come)\n// const foo = () => {\n// setTimeout(() => {\n// if (!state.profileInfoReSent && context.accountId) {\n// console.log(\"ABCD Foo:\", profileInfo);\n// State.update({ profileInfoReSent: true });\n// }\n// }, 3000);\n// };\n\n// foo();\n\n// Message sender\n// const sendMessage = (message) => {\n// State.update({\n// currentMessage: message,\n// });\n// };\n\n// Force fetch all the user info\nif (!profileInfo) {\n console.log(\"USANDO PROMISIFY\");\n Utils.promisify(\n () => Social.getr(`${accountId}/profile`), // profile info\n (res) => {\n console.log(\"RES:\", res);\n const updatedUserInfo = { accountId, res };\n const updatedInitialPayload = {\n type: \"update-initial-payload\",\n userInfo: updatedUserInfo,\n };\n Utils.sendMessage(updatedInitialPayload);\n },\n (err) => {\n console.log(\"ERR:\", err);\n }\n );\n}\n\n// Answer Factory\nconst buildAnswer = (requestType, payload) => {\n return {\n from: \"view\",\n type: \"answer\",\n requestType,\n payload,\n created_at: Date.now(),\n };\n};\n\nconst onMessageHandler = (message) => {\n requestsHandler(message);\n};\n\n// REQUEST HANDLERS BELOW\nconst requestsHandler = (message) => {\n switch (message.type) {\n case \"nsb:navigation:sync-content-height\":\n setIframeHeight(message.type, message.payload);\n break;\n case \"get-room-data\":\n getRoomDataHandler(message.type, message.payload);\n break;\n case \"subscribe-get-room-data\":\n getRoomDataHandler(message.type, message.payload, true);\n break;\n case \"send-message\":\n sendMessageHandler(message.type, message.payload);\n break;\n }\n};\n\nconsole.log(\n \"sua\"\n // Social.getr(payload.roomId, \"data\", {\n // subscribe: subscribe || false,\n // limit: 100,\n // order: \"desc\",\n // }),\n\n // Near.view(\"social.near\", \"get\", {\n // keys: [\"wendersonpires.near/index/2feb2f51-dfa3-4f9d-86a7-8f20377da539\"],\n // })\n);\n\n// [DON'T REMOVE]: Set thew new iFrame height based on the new screen/route\nconst setIframeHeight = (requestType, payload) => {\n State.update({ iframeHeight: payload.height + 20 });\n};\n\n// Get room data handler\nconst getRoomDataHandler = (requestType, payload, subscribe) => {\n // TODO: as vezes demora para pegar os dados\n console.log(subscribe || false);\n const roomData = Social.index(payload.roomId, \"data\", {\n subscribe: subscribe || false,\n limit: 100,\n order: \"desc\",\n });\n\n // Wait data to come\n setTimeout(() => {\n const roomExists = roomData && roomData.length > 0;\n\n if (!roomExists) {\n const responseBody = buildAnswer(requestType, {\n error: \"room not found\",\n });\n Utils.sendMessage(responseBody);\n return;\n }\n\n const responseBody = buildAnswer(requestType, {\n messages: roomData,\n });\n Utils.sendMessage(responseBody);\n }, payload.wait || 3000);\n};\n\n// Send message handler\nconst sendMessageHandler = (requestType, payload) => {\n console.log(payload);\n if (payload.roomId && payload.message) {\n // Store message\n Social.set(\n {\n index: {\n [payload.roomId]: JSON.stringify(\n {\n key: \"data\",\n value: payload.message,\n },\n undefined,\n 0\n ),\n },\n },\n {\n force: true,\n onCommit: () => {\n const responseBody = buildAnswer(requestType);\n Utils.sendMessage(responseBody);\n },\n onCancel: () => {\n const responseBody = buildAnswer(requestType, {\n error: \"the action was canceled\",\n });\n Utils.sendMessage(responseBody);\n },\n }\n );\n return;\n }\n\n // Error\n const responseBody = buildAnswer(requestType, {\n error: \"you must provide the roomId and a message prop\",\n });\n Utils.sendMessage(responseBody);\n};\n// REQUEST HANDLERS ABOVE\n\nreturn (\n <div>\n <iframe\n className=\"w-100\"\n style={{ height: `${state.iframeHeight}px` }}\n srcDoc={code}\n message={state.currentMessage}\n onMessage={onMessageHandler}\n />\n </div>\n);\n" } } } } }