Transaction: FG9xkhv...p3WT

{ "data": { "events_v1.near": { "widget": { "app__frame": { "": "const VERSION = '0.2.0';\n\n/**\n * NEAR Social App\n *\n * This is the main app component that is used to render the app.\n *\n *\n * WHY?\n * - DRY: we don't want to have to copy/paste the same code into every app\n * - Speed: we want to be able to build apps quickly\n * - Functionality: we want to be able to add functionality to all apps at once\n *\n *\n * HOW?\n * this app provides common functionality often needed in apps\n * - routing\n\n * - layout management\n *\n * Requirements:\n * - Fork the following widgets into your account:\n * - app__layouts__default\n * - app__frame (this component)\n * - You should also take a look at: https://github.com/NEARFoundation/events-platform\n * as it provides a lot of the functionality you need to build an app, it provides:\n * - an opinionated way to build apps\n * - directory structure\n * - naming conventions\n * - a way to build apps quickly\n * - development tools (dev server, deploy script)\n * - env var injection\n * - a sample app\n *\n *\n * This component is responsible for:\n * - Loading the app's state/environment\n * - Rendering the app's layouts\n * - Rendering the app's components\n *\n * It follows conventions:\n * - The app's environment is loaded from the props\n * - props.appOwner\n * - props.appName\n * - An app is a collection of widgets\n * - each widget must be namespaced by the app's owner and name\n * Widgets are named as follows:\n * - you choose an app_name like 'my_app'\n * - you choose a widget like 'my_widget'\n * - app, widgets and subwidgets are separated by '__'\n * - In order to use the widget in your app, you must upload it to your account with the name: `my_app__my_widget`\n * - e.g. app_namecomponent1\n * - e.g. app_namecomponent1__subcomponent\n * - Each widget can have a layout\n * - layouts are also widgets\n * - layouts are named as follows:\n * - you choose a layout like 'my_layout'\n *\n *\n * Functions available to widgets:\n *\n *\n * @param {String} name - the name of the widget to render\n * @param {Object} props - the props to pass to the widget\n * available in: props.engine\n * renderComponent(name, props, layout, layoutProps)\n * renders a widget with the given name and props within the given layout,\n * use this instead of <Widget src=\"\" />\n *\n *\n * @param {String} name - the name of the widget to render\n * @param {Object} props - the props to pass to the widget\n * available in: props.routing\n * push(name, props, layout, layoutProps)\n * pushes a new layer onto the stack of layers to render\n * this will cause the app to render a new layer on top of the current layer\n *\n *\n * available in: props.routing\n * pop()\n * pops the current layer off the stack of layers to render.\n * Functions the same as the back button\n *\n */\n\n/**\n * Adjust these:\n * */\n\nconst PROP_IS_REQUIRED_MESSAGE = 'props.{prop} is required';\nconst PLEASE_CONNECT_WALLET_MESSAGE =\n 'Please connect your NEAR wallet to continue.';\n\nconst Select = styled.select`\n background-color: #4caf50;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n cursor: pointer;\n`;\n\nconst Button = styled.button`\n background-color: #4caf50;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n transition: all 0.5s ease;\n\n &:hover {\n background-color: #3e8e41;\n }\n`;\n\nconst Loading = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n`;\n\nconst PageTitle = styled.h1`\n font-size: 2em;\n text-align: center;\n color: palevioletred;\n`;\n/**\n * I suggest you don't edit anything below this line\n * */\n\nconst accountId = context.accountId;\nif (!accountId) {\n return PLEASE_CONNECT_WALLET_MESSAGE;\n}\n\nfunction propIsRequiredMessage(prop) {\n return PROP_IS_REQUIRED_MESSAGE.replace('{prop}', prop);\n}\n\nconst appOwner = props.appOwner;\nif (!appOwner) {\n return propIsRequiredMessage('appOwner');\n}\n\nconst appName = props.appName;\nif (!appName) {\n return propIsRequiredMessage('appName');\n}\n\nconst entryRoute = props.entryRoute;\nif (!entryRoute) {\n return propIsRequiredMessage('entryRoute');\n}\n\nconst entryProps = props.entryProps || {};\nconst entryLayout = props.entryLayout || null;\nconst entryLayoutProps = props.entryLayoutProps || {};\n\nconst rootRoute = {\n name: entryRoute,\n props: entryProps,\n layout: entryLayout,\n layoutProps: entryLayoutProps,\n};\n\nif (!state) {\n State.init({\n renderCycles: state ? state.renderCycles + 1 : 1,\n layers: [rootRoute],\n });\n return 'Loading...';\n}\n\nconst env = {\n app: {\n owner: appOwner,\n name: appName,\n },\n VERSION,\n};\n\nconst AppState = {\n _state: {},\n set: (prop, value) => {\n AppState._state[prop] = value;\n return true;\n },\n get: (prop) => {\n return AppState._state[prop];\n },\n};\n\nfunction appStateGet(prop, defaultValue) {\n return AppState.get(`${appOwner}.${appName}.${prop}`) || defaultValue;\n}\nfunction appStateSet(prop, value) {\n return AppState.set(`${appOwner}.${appName}.${prop}`, value);\n}\n\nfunction storageGet(prop, defaultValue) {\n return Storage.get(`${appOwner}.${appName}.${prop}`) || defaultValue;\n}\nfunction storageSet(prop, value) {\n return Storage.set(`${appOwner}.${appName}.${prop}`, value);\n}\n\nfunction restoreRoutes() {\n const info = storageGet('routing', null);\n if (info === null || info === undefined) {\n return;\n }\n\n const layers = state.layers;\n // console.log('checking if routing info has changed', layers);\n if (\n layers &&\n Array.isArray(info) &&\n JSON.stringify(info) !== JSON.stringify(layers)\n ) {\n // console.log('update route from storage');\n State.update({\n layers: info,\n });\n\n // console.log('rerendering', info);\n }\n}\n\nrestoreRoutes();\n\nfunction persistRoutingInformation(newState) {\n // console.log('persistRoutingInformation', newState);\n storageSet('routing', newState);\n}\n\nfunction slugFromName(name) {\n // console.log('slugFromName', name);\n return name.split('.').join('__').split('-').join('_');\n}\n\nfunction widgetPathFromName(name) {\n // console.log('widgetPathFromName', name);\n return `${appOwner}/widget/${appName}__${slugFromName(name)}`;\n}\n\nfunction layoutPathFromName(name) {\n return widgetPathFromName(`layouts.${name}`);\n}\n\nfunction rerender() {\n // HACK: force a re-render\n State.update({\n renderCycles: state.renderCycles + 1,\n });\n}\n\nfunction push(name, props) {\n // console.log('push', name, props);\n const layer = {\n name,\n props: props || {},\n };\n const newLayers = [...state.layers, layer];\n\n persistRoutingInformation(newLayers);\n\n State.update({\n layers: newLayers,\n });\n\n // rerender();\n}\n\nfunction replace(name, props) {\n console.log('replace', name, props);\n const layer = {\n name,\n props: props || {},\n };\n const newLayers = [...state.layers.slice(0, -1), layer];\n\n persistRoutingInformation(newLayers);\n\n State.update({\n layers: newLayers,\n });\n\n // rerender();\n}\n\n// pop from the stack, ensure we always have at least one layer\nfunction pop() {\n const newLayers =\n // eslint-disable-next-line no-magic-numbers\n state.layers.length > 1 ? state.layers.slice(0, -1) : state.layers;\n\n persistRoutingInformation(newLayers);\n\n State.update({\n layers: newLayers,\n });\n\n rerender();\n}\n\nfunction onTick(tick, callback) {\n console.log('onTick', tick, callback);\n const tickCallbacks = appStateGet('tickCallbacks', []);\n tickCallbacks.push({\n tick,\n callback,\n });\n appStateSet('tickCallbacks', tickCallbacks);\n}\n\nfunction renderComponent(name, props) {\n const engine = {\n env,\n accountId,\n\n push,\n pop,\n replace,\n rerender,\n appStateGet,\n appStateSet,\n storageGet,\n storageSet,\n layoutPathFromName,\n widgetPathFromName,\n\n onTick,\n\n renderComponent: safeRender,\n\n Components: {\n Select,\n Button,\n Loading,\n PageTitle,\n },\n\n helpers: {\n propIsRequiredMessage,\n },\n };\n\n const controllerProps = {\n __engine: engine,\n\n component: {\n name: name,\n props: props,\n },\n };\n\n return (\n <Widget\n src={`${appOwner}/widget/app__layout_controller`}\n key={props && props.key ? props.key : name}\n props={controllerProps}\n />\n );\n}\n\nfunction safeRender(_name, _props) {\n try {\n return renderComponent(_name, _props);\n } catch (err) {\n console.log(err);\n return (\n <div>\n Failed to render component <strong>{_name}</strong> with props:{' '}\n <pre>{JSON.stringify(_props, null, 4)}</pre>\n <br />\n <pre>{err.toString()}</pre>\n <br />\n </div>\n );\n }\n}\n\n// HACK: this is a hack to get regular update calls\nconst updateHackCode = `\nfetch('https://api.coingecko.com/api/v3/coins/near', {\n subscribe: true,\n method: 'GET',\n headers: {\n Accept: '*/*',\n },\n});\n\nconst index = Storage.get('index') || 0;\nif(Storage.get('index') < 2){\n // console.log(\"index\", index)\n Storage.set('index', Storage.get('index') + 1);\n return ''\n}\n\nprops.onUpdate()\nStorage.set('index', 0)\n\nreturn ''\n`;\n\nreturn (\n <>\n <div id=\"app-state\" data-state={JSON.stringify(state)}></div>\n <Widget\n code={updateHackCode}\n props={{\n onUpdate: () => {\n const v = appStateGet('renderCycles') || 0;\n appStateSet('renderCycles', (v + 1) % 100);\n console.log('update', v);\n },\n }}\n />\n {/* state reset button */}\n <div\n style={{\n position: 'fixed',\n bottom: 0,\n right: 0,\n zIndex: 9999,\n padding: 8,\n backgroundColor: 'transparent',\n }}\n >\n <Button\n onClick={() => {\n storageSet('routing', [rootRoute]);\n State.update({\n layers: [rootRoute],\n });\n }}\n >\n Reset\n </Button>\n </div>\n\n {state.layers.map((layer, index) => {\n return (\n <div\n key={index}\n style={{\n width: '100vw',\n minHeight: '100vh',\n backgroundColor: 'transparent',\n zIndex: index,\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n overflow: 'auto',\n }}\n >\n {safeRender(layer.name, layer.props)}\n </div>\n );\n })}\n </>\n);\n" } } } } }