Transaction: 9AP29tZ...FoVH

{ "data": { "events_v1.near": { "widget": { "app__frame": { "": "const VERSION = '0.1.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_name__component1\n * - e.g. app_name__component1__subcomponent\n * - Each widget can have a layout\n * - lyouts can be passed to the renderComponent function\n * - calling `renderComponent('parent.subcomponent', {}, 'my_layout', { someLayoutProp: 'someValue' })`\n * - will render the widget 'parent' using the layout 'my_layout'\n * - the layout will be passed the props: { someLayoutProp: 'someValue' }\n * - the corresponding layout widget must be uploaded to your account with the name: `app__layouts__my_layout`\n * - NOTE: the layouts can be shared across apps, so they are namespaced within 'app' **not** the app's name\n * - the corresponding widget must be uploaded to your account with the name: `my_app__my_widget__subcomponent`\n * - layouts are also rendered as widgets and get passed the same props as the widget they are rendering\n *\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 * @param {String} layout - the name of the layout to use\n * @param {Object} layoutProps - the props to pass to the layout\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 * @param {String} layout - the name of the layout to use\n * @param {Object} layoutProps - the props to pass to the layout\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 || 'default';\nconst entryLayoutProps = props.entryLayoutProps || {};\n\nconst env = {\n app: {\n owner: appOwner,\n name: appName,\n },\n VERSION,\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\nconst rootRoute = {\n name: entryRoute,\n props: entryProps,\n layout: entryLayout,\n layoutProps: entryLayoutProps,\n};\n\n// TODO: get layers from URL\nState.init({\n env,\n renderCycles: state ? state.renderCycles + 1 : 1,\n layers: [rootRoute],\n});\n\nif (!state) {\n return 'Loading...';\n}\n\nfunction restoreRoutes() {\n const info = storageGet('routing', null);\n console.log('restoreRoutes', info);\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 (layers && JSON.stringify(info) === JSON.stringify(layers)) {\n console.log('no change in routing info');\n return;\n }\n\n console.log('change detected in routing info');\n State.update({\n layers: [],\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('__');\n}\n\nfunction layoutFromName(name) {\n // console.log('layoutFromName', name);\n return `${appOwner}/widget/app__layouts__${slugFromName(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, layout, layoutProps) {\n console.log('push', name, props, layout, layoutProps);\n const layer = {\n name,\n props: props || {},\n layout: layout || 'default',\n layoutProps: layoutProps || {},\n };\n const newLayers = [...state.layers, 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 renderComponent(name, props, layout, layoutProps) {\n // console.log('renderComponent', name, props, layout, layoutProps);\n const _layoutName = layout || 'default';\n const componentProps = {\n ...(props || {}),\n routing: {\n push,\n pop,\n },\n engine: {\n renderComponent,\n rerender,\n storageGet,\n storageSet,\n },\n Components: {\n Select,\n Button,\n Loading,\n PageTitle,\n },\n helpers: {\n propIsRequiredMessage,\n },\n accountId,\n VERSION,\n layout: _layoutName,\n layoutProps: layoutProps || {},\n };\n const layoutKey = layoutProps && layoutProps.key ? layoutProps.key : null;\n const widgetKey = props && props.key ? props.key : name;\n const key = layoutKey || widgetKey;\n\n return (\n <Widget\n src={layoutFromName(_layoutName)}\n key={key}\n props={{\n ...componentProps,\n component: {\n src: `${appOwner}/widget/${appName}__${slugFromName(name)}`,\n props: componentProps,\n },\n }}\n />\n );\n}\n\nreturn (\n <>\n <div\n style={{\n width: '100vw',\n height: '100%',\n backgroundColor: 'white',\n padding: 0,\n zIndex: 10000,\n overflow: 'auto',\n }}\n >\n <div id=\"app-state\" data-state={JSON.stringify(state)}></div>\n\n {renderComponent(\n state.layers[state.layers.length - 1].name,\n state.layers[state.layers.length - 1].props,\n state.layers[state.layers.length - 1].layout,\n state.layers[state.layers.length - 1].layoutProps\n )}\n </div>\n </>\n);\n" } } } } }