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