Transaction: 5fGxaDY...Lx2J

{ "data": { "events_v2.near": { "widget": { "app__frame": { "": "/* eslint no-magic-numbers: 0 */\n\nconst VERSION = '0.3.0';\n\n/**\n * NEAR Social App\n * Docs: https://github.com/NEARFoundation/events-platform\n *\n */\n\n/**\n * Adjust these:\n * */\n\nconst NEAR_STORAGE_BYTES_SAFTY_OFFSET = 42;\nconst PROP_IS_REQUIRED_MESSAGE = 'props.{prop} is required';\nconst PLEASE_CONNECT_WALLET_MESSAGE =\n 'Please connect your NEAR wallet to continue.';\n\nconst GRID_PAD_TINY = '4px';\nconst GRID_PAD_SMALL = '10px';\nconst GRID_PAD = '20px';\nconst GRID_PAD_BIG = '40px';\n\nconst FONT_SIZE_TINY = 'calc(max(13px, 0.85vw))';\nconst FONT_SIZE_SMALL = 'calc(max(16px, 0.95vw))';\nconst FONT_SIZE_DEFAULT = 'calc(max(18px, 1.0vw))';\nconst FONT_SIZE_BIG = 'calc(max(22px, 1.15vw))';\nconst FONT_SIZE_GIANT = 'calc(max(32px, 2.25vw))';\n\nconst TAG_PADDING = 'calc(max(4px, 0.25vw)) calc(max(8px, 0.5vw))';\n\nconst TEXT_COLOR = '#333333';\nconst TEXT_COLOR_LIGHT = '#666666';\n\nconst BORDER_RADIUS_DEFAULT = '4px';\nconst BORDER_COLOR = '#e6e6e6';\nconst BORDER_THICKNESS = '0.1vw';\nconst BORDER_DEFAULT = `${BORDER_THICKNESS} solid ${BORDER_COLOR}`;\n\nconst ERROR_COLOR = '#cc0000';\n\nconst BUTTON_BG_COLOR = '#4d2c91';\nconst BUTTON_BG_HOVER_COLOR = '#3c1f6f';\nconst BUTTON_COLOR = '#ffffff';\nconst BUTTON_PADDING = `${GRID_PAD_SMALL} ${GRID_PAD}`;\nconst BUTTON_BORDER_RADIUS = '8px';\n\nconst BOX_SHADOW_DEFAULT = '0 0 5px 0 rgba(0, 0, 0, 0.2)';\nconst BOX_SHADOW_HOVER = '5px 0 15px -2px rgba(0, 0, 0, 0.2)';\n\nconst EASE_DEFAULT = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\nconst Constants = {\n NEAR_STORAGE_BYTES_SAFTY_OFFSET,\n PROP_IS_REQUIRED_MESSAGE,\n PLEASE_CONNECT_WALLET_MESSAGE,\n GRID_PAD_TINY,\n GRID_PAD_SMALL,\n GRID_PAD,\n GRID_PAD_BIG,\n FONT_SIZE_TINY,\n FONT_SIZE_SMALL,\n FONT_SIZE_DEFAULT,\n FONT_SIZE_GIANT,\n TAG_PADDING,\n BORDER_RADIUS_DEFAULT,\n TEXT_COLOR,\n TEXT_COLOR_LIGHT,\n BORDER_COLOR,\n BORDER_THICKNESS,\n BORDER_DEFAULT,\n ERROR_COLOR,\n BUTTON_BG_COLOR,\n BUTTON_BG_HOVER_COLOR,\n BUTTON_COLOR,\n BUTTON_PADDING,\n BUTTON_BORDER_RADIUS,\n BOX_SHADOW_DEFAULT,\n BOX_SHADOW_HOVER,\n EASE_DEFAULT,\n};\n/**\n * Animation\n * */\nconst AnimationFadeIn = styled.keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\nconst AnimationSlideInLeft = styled.keyframes`\n 0% {\n opacity: 0;\n transform: translateX(-20px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\n/**\n * Components\n * */\n\nconst Components = {\n Select: styled.select`\n background-color: ${BUTTON_BG_COLOR}\n border: none;\n color: white;\n padding: ${GRID_PAD} ${GRID_PAD};\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: ${FONT_SIZE_DEFAULT};\n margin: 4px 2px;\n cursor: pointer;\n `,\n\n Button: styled.button`\n background-color: ${BUTTON_BG_COLOR};\n border: none;\n color: ${BUTTON_COLOR};\n padding: ${BUTTON_PADDING};\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: ${FONT_SIZE_DEFAULT};\n transition: all 0.5s ease;\n cursor: pointer;\n border-radius: ${BUTTON_BORDER_RADIUS};\n\n &:hover {\n background-color: ${BUTTON_BG_HOVER_COLOR};\n }\n `,\n\n TextButton: styled.button`\n background: transparent;\n border: none;\n color: #007bff;\n cursor: pointer;\n font-weight: 400;\n outline: none;\n padding: 0;\n text-decoration: underline;\n transition: color 0.15s ${EASE_DEFAULT};\n display: inline-block;\n width: fit-content;\n margin-top: ${GRID_PAD_SMALL};\n text-align: left;\n\n font-size: ${FONT_SIZE_DEFAULT};\n @media (max-width: 768px) {\n font-size: ${FONT_SIZE_SMALL};\n }\n\n &:hover {\n color: #0056b3;\n }\n\n &:focus {\n color: #0056b3;\n outline: none;\n }\n `,\n\n FullActionButton: styled.button`\n width: 100%;\n padding: ${BUTTON_PADDING};\n margin: 0;\n border: none;\n border-radius: ${BORDER_RADIUS_DEFAULT};\n box-sizing: border-box;\n background-color: ${BUTTON_BG_COLOR};\n color: ${BUTTON_COLOR};\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n transition: all 0.5s ease;\n\n &:hover {\n background-color: ${BUTTON_BG_HOVER_COLOR};\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);\n }\n `,\n\n Spacer: styled.div`\n height: ${(props) => props.height || GRID_PAD_BIG};\n\n @media (max-width: 768px) {\n height: ${(props) => props.heightMobile || props.height || GRID_PAD};\n }\n `,\n\n PageTitle: styled.h1`\n font-size: ${FONT_SIZE_GIANT};\n color: black;\n word-break: break-word;\n `,\n\n Container: styled.div`\n padding-left: ${GRID_PAD};\n padding-right: ${GRID_PAD};\n padding-top: ${GRID_PAD_SMALL};\n padding-bottom: ${GRID_PAD_SMALL};\n width: 100%;\n\n @media (max-width: 768px) {\n padding-left: ${GRID_PAD_SMALL};\n padding-right: ${GRID_PAD_SMALL};\n }\n `,\n\n ContainerHeader: styled.div`\n font-size: ${FONT_SIZE_BIG};\n color: ${TEXT_COLOR};\n padding: ${GRID_PAD_SMALL} 0;\n @media (max-width: 768px) {\n font-size: ${FONT_SIZE_SMALL};\n }\n `,\n\n Hr: styled.div`\n width: 100%;\n border-bottom: 1px solid ${BORDER_COLOR};\n `,\n\n InfoBar: styled.div`\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n padding: ${GRID_PAD_SMALL} ${GRID_PAD};\n border-bottom: 1px solid ${BORDER_COLOR};\n `,\n\n InfoBarItem: styled.div`\n display: flex;\n align-items: center;\n margin-right: ${GRID_PAD};\n `,\n\n InfoBarLink: styled.a`\n font-size: ${FONT_SIZE_SMALL};\n color: ${TEXT_COLOR};\n text-decoration: none;\n margin-right: ${GRID_PAD};\n\n &:hover {\n text-decoration: underline;\n }\n\n &:last-child {\n margin-right: 0;\n }\n\n &:visited {\n color: ${TEXT_COLOR};\n }\n\n &:active {\n color: ${TEXT_COLOR};\n }\n `,\n\n TextHeader: styled.div`\n font-size: ${FONT_SIZE_DEFAULT};\n color: ${TEXT_COLOR};\n `,\n\n InlineTag: styled.div`\n display: inline-block;\n background-color: ${BORDER_COLOR};\n padding: ${TAG_PADDING};\n border-radius: ${BORDER_RADIUS_DEFAULT};\n `,\n\n Text: styled.div`\n font-size: ${FONT_SIZE_SMALL};\n color: ${TEXT_COLOR};\n word-break: break-word;\n `,\n\n ValidationError: styled.div`\n color: ${ERROR_COLOR};\n font-size: ${FONT_SIZE_TINY};\n margin-top: ${GRID_PAD_SMALL};\n `,\n\n FormLabel: styled.label`\n width: 100%;\n color: ${TEXT_COLOR_LIGHT};\n padding: ${GRID_PAD_SMALL} 0;\n margin: 0;\n box-sizing: border-box;\n `,\n\n GridContainer: styled.div`\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n justify-content: flex-start;\n\n width: auto;\n height: auto;\n margin-left: -${GRID_PAD};\n margin-right: -${GRID_PAD};\n\n & > * {\n padding: ${GRID_PAD};\n min-width: ${({ itemWidth }) => itemWidth || '540px'};\n max-width: ${({ itemMaxWidth }) => itemMaxWidth || '540px'};\n width: 0;\n height: auto;\n flex-grow: 1;\n flex-shrink: 1;\n\n animation: ${AnimationFadeIn} 0.5s ${EASE_DEFAULT};\n }\n\n @media (max-width: 768px) {\n width: 100%;\n margin-left: -${GRID_PAD_SMALL};\n margin-right: -${GRID_PAD_SMALL};\n\n & > * {\n padding: ${GRID_PAD_SMALL};\n width: 50%;\n max-width: 50%;\n min-width: 0;\n }\n }\n `,\n\n GridItemWrapper: styled.div`\n height: auto;\n\n & > * {\n height: 100% !important;\n }\n `,\n\n HorizontalScroll: styled.div`\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n justify-content: flex-start;\n\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n\n & > * {\n margin-right: ${GRID_PAD};\n max-width: ${({ itemWidth }) => itemWidth || '540px'};\n width: 100%;\n flex-grow: 3;\n flex-shrink: 0;\n\n animation: ${AnimationSlideInLeft} 0.3s ${EASE_DEFAULT};\n }\n\n & > *:last-child {\n margin-right: 0;\n }\n\n @media (max-width: 768px) {\n & > * {\n width: 45%;\n max-width: 45%;\n\n margin-right: ${GRID_PAD_SMALL};\n }\n }\n `,\n\n Card: styled.div`\n display: flex;\n flex-direction: ${(args) => orientation2FlexDirection(args) || 'column'};\n flex-wrap: ${(args) => orientation2FlexWrap(args) || 'wrap'};\n align-items: stretch;\n justify-content: stretch;\n padding: 0;\n background-color: #ffffff;\n border-radius: ${BORDER_RADIUS_DEFAULT};\n\n box-shadow: ${(args) => (args.shadow ? BOX_SHADOW_DEFAULT : 'none')};\n border: ${(args) => (args.border ? BORDER_DEFAULT : 'none')};\n\n transition: all 0.5s ${EASE_DEFAULT};\n\n height: auto;\n position: relative;\n\n &:hover {\n box-shadow: ${(args) => (args.shadow ? BOX_SHADOW_HOVER : 'none')};\n }\n\n @media (max-width: 768px) {\n flex-direction: column !important;\n }\n `,\n\n CardHeaderImage: styled.div`\n height: auto;\n width: 100%;\n aspect-ratio: 1 / 1;\n overflow: hidden;\n border-radius: 2px 2px 0 0;\n border-bottom: ${BORDER_THICKNESS} solid ${BORDER_COLOR};\n flex-shrink: 0;\n flex-grow: 0;\n `,\n\n CardHeader: styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n width: 33%;\n min-width: 320px;\n border-right: ${BORDER_THICKNESS} solid ${BORDER_COLOR};\n min-height: 100px;\n flex-grow: 1;\n flex-shrink: 0;\n height: auto;\n\n padding: ${({ small }) => (small ? GRID_PAD_SMALL : GRID_PAD)};\n\n @media (max-width: 768px) {\n width: 100%;\n border-right: none;\n border-bottom: ${BORDER_THICKNESS} solid ${BORDER_COLOR};\n height: auto;\n min-height: 0px;\n\n padding: ${GRID_PAD_SMALL};\n }\n `,\n\n CardBody: styled.div`\n width: 100%;\n height: auto;\n flex-grow: 100;\n flex-shrink: 0;\n position: relative;\n padding: ${({ small }) => (small ? GRID_PAD_SMALL : GRID_PAD)};\n `,\n\n CardFooter: styled.div`\n font-size: ${({ small }) => (small ? FONT_SIZE_TINY : FONT_SIZE_SMALL)};\n font-weight: 400;\n margin: 0;\n padding: ${({ small }) => (small ? GRID_PAD_SMALL : GRID_PAD)};\n height: auto;\n flex-grow: 0;\n flex-shrink: 0;\n width: 100%;\n border-top: ${BORDER_THICKNESS} solid ${BORDER_COLOR};\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media (max-width: 768px) {\n font-size: ${({ small }) => (small ? FONT_SIZE_TINY : FONT_SIZE_SMALL)};\n }\n `,\n\n CardTitle: styled.div`\n font-size: ${({ small }) => (small ? FONT_SIZE_SMALL : FONT_SIZE_DEFAULT)};\n font-weight: 600;\n margin: 0;\n height: auto;\n flex-grow: 0;\n flex-shrink: 0;\n width: 100%;\n word-break: break-word;\n margin-bottom: ${({ small }) => (small ? GRID_PAD_TINY : GRID_PAD_SMALL)};\n\n @media (max-width: 768px) {\n font-size: ${({ small }) => (small ? FONT_SIZE_TINY : FONT_SIZE_SMALL)};\n }\n `,\n\n FadeIn: styled.div`\n opacity: 0;\n animation: ${AnimationFadeIn} 0.3s ${EASE_DEFAULT};\n animation-fill-mode: forwards;\n animation-delay: ${({ delay }) => delay || '0s'};\n animation-duration: ${({ duration }) => duration || '0.3s'};\n `,\n\n SlideInLeft: styled.div`\n opacity: 0;\n animation: ${AnimationSlideInLeft} 0.3s ${EASE_DEFAULT};\n animation-fill-mode: forwards;\n animation-delay: ${({ delay }) => delay || '0s'};\n animation-duration: ${({ duration }) => duration || '0.3s'};\n `,\n};\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\nconsole.log('propIsRequiredMessage');\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 DEBUG = props.DEBUG || false;\n\nconst entryProps = props.entryProps || {};\n\nconst rootRoute = {\n name: entryRoute,\n props: entryProps,\n};\n\nif (!state) {\n State.init({\n renderCycles: state ? state.renderCycles + 1 : 1,\n layers: [rootRoute],\n });\n return <></>;\n}\n\nconst ENV = { appOwner, appName, VERSION };\n\nconst COST_NEAR_PER_BYTE = Math.pow(10, 20);\nconst TGAS_300 = '300000000000000';\n\nconst SessionState = {\n _state: {},\n set: (prop, value) => {\n SessionState._state[prop] = value;\n return true;\n },\n get: (prop) => {\n return SessionState._state[prop];\n },\n};\n\nconsole.log('orientation2FlexDirection');\nfunction orientation2FlexDirection({ orientation }) {\n switch (orientation) {\n case 'horizontal':\n return 'row';\n case 'vertical':\n return 'column';\n default:\n return 'column';\n }\n}\n\nconsole.log('orientation2FlexWrap');\nfunction orientation2FlexWrap({ orientation }) {\n switch (orientation) {\n case 'horizontal':\n return 'nowrap';\n case 'vertical':\n return 'wrap';\n default:\n return 'nowrap';\n }\n}\n\nconsole.log('sessionGet');\nfunction sessionGet(env, prop, defaultValue) {\n return (\n SessionState.get(`${env.appOwner}.${env.appName}.${prop}`) || defaultValue\n );\n}\nconsole.log('sessionSet');\nfunction sessionSet(env, prop, value) {\n return SessionState.set(`${env.appOwner}.${env.appName}.${prop}`, value);\n}\n\nconsole.log('storageGet');\nfunction storageGet(env, prop, defaultValue) {\n return Storage.get(`${env.appOwner}.${env.appName}.${prop}`) || defaultValue;\n}\nconsole.log('storageSet');\nfunction storageSet(env, prop, value) {\n return Storage.set(`${env.appOwner}.${env.appName}.${prop}`, value);\n}\n\nconsole.log('restoreRoutes');\nfunction restoreRoutes() {\n const info = storageGet(ENV, 'routing', null);\n console.log('restoreRoutes', info, state.layers);\n if (info === null || info === undefined) {\n return;\n }\n\n const layers = state.layers;\n if (\n layers &&\n Array.isArray(info) &&\n JSON.stringify(info) !== JSON.stringify(layers)\n ) {\n State.update({\n layers: info,\n });\n }\n}\n\nrestoreRoutes();\n\nconsole.log('persistRoutingInformation');\nfunction persistRoutingInformation(newState) {\n storageSet(ENV, 'routing', newState);\n}\n\nconsole.log('slugFromName');\nfunction slugFromName(name) {\n return name.split('.').join('__').split('-').join('_');\n}\n\nconsole.log('fetchPathOptions');\nfunction fetchPathOptions(env, path) {\n const nameParts = path.split(':');\n if (nameParts.length === 1) {\n return {\n owner: env.appOwner,\n name: env.appName,\n slug: slugFromName(nameParts[0]),\n };\n }\n if (nameParts.length === 2) {\n return {\n owner: env.appOwner,\n name: nameParts[0],\n slug: slugFromName(nameParts[1]),\n };\n }\n if (nameParts.length === 3) {\n return {\n owner: nameParts[0],\n name: nameParts[1],\n slug: slugFromName(nameParts[2]),\n };\n }\n throw new Error(`Invalid path: ${path}`);\n}\n\nconsole.log('widgetPathFromName');\nfunction widgetPathFromName(env, widgetName) {\n const { owner, name, slug } = fetchPathOptions(env, widgetName);\n return `${owner}/widget/${name}__${slug}`;\n}\n\nconsole.log('layoutPathFromName');\nfunction layoutPathFromName(env, layoutName) {\n return widgetPathFromName(env, layoutName);\n}\n\nconsole.log('rerender');\nfunction rerender() {\n // HACK: force a re-render\n State.update({\n renderCycles: state.renderCycles + 1,\n });\n}\n\nconsole.log('push');\nfunction push(env, name, props) {\n const layer = {\n name,\n props: props || {},\n appOwner: env.appOwner,\n appName: env.appName,\n };\n const newLayers = [...state.layers, layer];\n\n persistRoutingInformation(newLayers);\n\n State.update({\n layers: newLayers,\n });\n}\n\nconsole.log('replace');\nfunction replace(env, name, props) {\n const layer = {\n name,\n props: props || {},\n appOwner: env.appOwner,\n appName: env.appName,\n };\n const newLayers = [...state.layers.slice(0, -1), layer];\n\n persistRoutingInformation(newLayers);\n\n State.update({\n layers: newLayers,\n });\n}\n\n// pop from the stack, ensure we always have at least one layer\nconsole.log('pop');\nfunction pop(/* env */) {\n const newLayers =\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\nconsole.log('dirtyEval');\nfunction dirtyEval(env, args) {\n const controlled = args[0];\n const method = controlled.method ? controlled.method : args[0];\n\n const customEnv = {\n appOwner: controlled.appOwner || env.appOwner,\n appName: controlled.appName || env.appName,\n };\n\n const mArgs = args.slice(1);\n const widgetEnv = mergeEnv(env, customEnv || {});\n\n switch (method) {\n case 'push':\n return push(widgetEnv, mArgs[0], mArgs[1]);\n case 'replace':\n return replace(widgetEnv, mArgs[0], mArgs[1]);\n case 'pop':\n return pop(widgetEnv);\n default:\n throw new Error(`Unknown method ${method}`);\n }\n}\n\nconsole.log('isDate');\nfunction isDate(value) {\n // we have no instanceof or typeof, so we check for the interface\n try {\n value.getFullYear();\n value.getMonth();\n value.getDate();\n value.getHours();\n value.getMinutes();\n value.getSeconds();\n return true;\n } catch (e) {\n return false;\n }\n}\n\nconsole.log('numberToMonth');\nfunction numberToMonth(number, format) {\n const month = parseInt(number, 10);\n const map = [\n ['Jan', 'January'],\n ['Feb', 'February'],\n ['Mar', 'March'],\n ['Apr', 'April'],\n ['May', 'May'],\n ['Jun', 'June'],\n ['Jul', 'July'],\n ['Aug', 'August'],\n ['Sep', 'September'],\n ['Okt', 'Oktober'],\n ['Nov', 'November'],\n ['Dec', 'December'],\n ];\n\n if (format === 'long') {\n return map[month - 1][1];\n }\n return map[month - 1][0];\n}\n\nconsole.log('dayWithSuffix');\nfunction dayWithSuffix(day) {\n const suffixes = ['th', 'st', 'nd', 'rd'];\n const value = parseInt(day, 10);\n const suffix = suffixes[value % 10 > 3 ? 0 : value % 10];\n return `${value}${suffix}`;\n}\n\nconsole.log('formatDate');\nfunction formatDate(date, format) {\n if (date === null || date === undefined) {\n console.error('formatDate', 'date is null or undefined', date, format);\n return '';\n }\n const properDate = isDate(date) ? date : new Date(date);\n const dateString = properDate.toISOString();\n\n const parts = {\n YYYY: dateString.substring(0, 4),\n YY: dateString.substring(2, 4),\n MM: dateString.substring(5, 7),\n DD: dateString.substring(8, 10),\n hh: dateString.substring(11, 13),\n mm: dateString.substring(14, 16),\n ss: dateString.substring(17, 19),\n Mshort: numberToMonth(dateString.substring(5, 7)),\n Mlong: numberToMonth(dateString.substring(5, 7), 'long'),\n Dst: dayWithSuffix(dateString.substring(8, 10)),\n };\n\n return format.replace(\n /\\{\\{\\s*(?<part>YYYY|YY|MM|DD|hh|mm|ss|Mshort|Mlong|Dst)\\s*\\}\\}/gu,\n (_match, part) => {\n return parts[part];\n }\n );\n}\n\n// https://stackoverflow.com/questions/5515869/string-length-in-bytes-in-javascript\nconsole.log('byteLength');\nfunction byteLength(str) {\n // returns the byte length of an utf8 string\n var s = str.length;\n for (let i = str.length - 1; i >= 0; i--) {\n let code = str.charCodeAt(i);\n if (code > 0x7f && code <= 0x7ff) {\n s++;\n } else if (code > 0x7ff && code <= 0xffff) {\n s += 2;\n }\n if (code >= 0xdc00 && code <= 0xdfff) {\n i--;\n } //trail surrogate\n }\n return s;\n}\n\nconsole.log('calculateStorageCost');\nfunction calculateStorageCost(value) {\n // get number of bytes without TextEncoder or Blob\n const bytes = byteLength(JSON.stringify(value));\n return COST_NEAR_PER_BYTE * (bytes + NEAR_STORAGE_BYTES_SAFTY_OFFSET);\n}\n\nconsole.log('contractCall');\nfunction contractCall(contractName, methodName, args) {\n const cost = calculateStorageCost(args);\n // console.log('contractCall', { contractName, methodName, args, cost });\n Near.call(contractName, methodName, args || {}, TGAS_300, cost);\n}\n\nconsole.log('contractView');\nfunction contractView(contractName, methodName, args) {\n // console.log('contractView', { contractName, methodName, args });\n return Near.view(contractName, methodName, args || {});\n}\n\nconsole.log('loading');\nfunction loading(displayText) {\n return <>{displayText || '...'}</>;\n}\n\nconsole.log('mergeEnv');\nfunction mergeEnv(env, newEnv) {\n return {\n ...env,\n // add all keys from env which are not null or undefined\n ...Object.entries(newEnv || {}).reduce((acc, [key, value]) => {\n if (value !== null && value !== undefined) {\n acc[key] = value;\n }\n return acc;\n }, {}),\n };\n}\n\nconsole.log('renderComponent');\nfunction renderComponent(name, props, env) {\n const widgetEnv = mergeEnv(ENV, env);\n console.log('renderComponent', { name, props, env, widgetEnv });\n\n const _sessionGet = (...args) => {\n return sessionGet(widgetEnv, ...args);\n };\n const _sessionSet = (...args) => {\n return sessionSet(widgetEnv, ...args);\n };\n const _storageGet = (...args) => {\n return storageGet(widgetEnv, ...args);\n };\n const _storageSet = (...args) => {\n return storageSet(widgetEnv, ...args);\n };\n\n const _layoutPathFromName = (path) => {\n return layoutPathFromName(widgetEnv, path);\n };\n const _widgetPathFromName = (path) => {\n return widgetPathFromName(widgetEnv, path);\n };\n\n const _push = (_name, _props) => {\n return push(widgetEnv, _name, _props);\n };\n const _pop = () => {\n return pop(widgetEnv);\n };\n const _replace = (_name, _props) => {\n return replace(widgetEnv, _name, _props);\n };\n\n const _renderComponent = (_name, _props, _env) => {\n return safeRender(_name, _props, mergeEnv(widgetEnv, _env));\n };\n\n const _dirtyEval = (args) => {\n return dirtyEval(widgetEnv, args);\n };\n\n const engine = {\n env: widgetEnv,\n accountId,\n\n loading,\n rerender,\n push: _push,\n pop: _pop,\n replace: _replace,\n sessionGet: _sessionGet,\n sessionSet: _sessionSet,\n storageGet: _storageGet,\n storageSet: _storageSet,\n layoutPathFromName: _layoutPathFromName,\n widgetPathFromName: _widgetPathFromName,\n\n renderComponent: _renderComponent,\n\n Components,\n Constants,\n\n helpers: {\n propIsRequiredMessage,\n calculateStorageCost,\n formatDate,\n },\n\n hacks: {\n dirtyEval: _dirtyEval,\n },\n\n TGAS_300,\n\n contract: {\n call: contractCall,\n view: contractView,\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\nconsole.log('safeRender');\nfunction safeRender(_name, _props, _customEnv) {\n console.log(\"safeRender\", { _name, _props, _customEnv }\")\n try {\n return renderComponent(_name, _props, _customEnv);\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\nconst AppLayer = styled.div`\n animation: ${AnimationFadeIn} 0.3s ${EASE_DEFAULT};\n animation-fill-mode: forwards;\n animation-delay: ${(props) => props.delay};\n animation-duration: ${(props) => props.duration};\n width: 100vw;\n min-height: 100vh;\n background-color: transparent;\n z-index: ${(props) => props.zIndex};\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n opacity: 0;\n\n backdrop-filter: ${(props) => {\n return props.backdropFilter;\n }};\n webkit-backdrop-filter: ${(props) => {\n return props.backdropFilter;\n }};\n\n transition: backdrop-filter ${(props) => props.transitionDuration}\n ${EASE_DEFAULT};\n transition-delay: ${(props) => props.transitionDelay};\n`;\n\n// have to deconstruct Components here because of a bug in the VM.\n// It cannot render <Components.Button /> :(\nconst { Button } = Components;\n\nreturn (\n <>\n <div id=\"app-state\" data-state={JSON.stringify(state)}></div>\n\n {/* state reset button */}\n {DEBUG ? (\n <div\n style={{\n position: 'fixed',\n bottom: 0,\n right: 0,\n zIndex: 9999,\n padding: 8,\n }}\n >\n <Button\n onClick={() => {\n storageSet(ENV, 'routing', [rootRoute]);\n State.update({\n layers: [rootRoute],\n });\n }}\n >\n Reset\n </Button>\n </div>\n ) : null}\n\n {state.layers.map((layer, index) => {\n const isLast = index === state.layers.length - 1;\n return <></>;\n // return (\n // <AppLayer\n // key={index}\n // delay={isLast ? '0s' : '0.8s'}\n // duration={isLast ? '0.66s' : '1s'}\n // transitionDuration={isLast ? '0.3s' : '1s'}\n // transitionDelay={isLast ? '0.2s' : '1s'}\n // backdropFilter={\n // isLast\n // ? 'blur(16px) saturate(140%) brightness(80%)'\n // : 'blur(0px) saturate(100%) brightness(100%)'\n // }\n // zIndex={index + 100}\n // >\n // {safeRender(layer.name, layer.props, {\n // appOwner: layer.appOwner,\n // appName: layer.appName,\n // })}\n // </AppLayer>\n // );\n })}\n </>\n);\n" } } } } }