add new layout for app fullscreen mode

pages/apps/[id].tsx

@@ -6,6 +6,8 @@ import type { NextPageWithLayout } from 'nextjs/types';
 import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
 
+import LayoutApp from 'ui/shared/layout/LayoutApp';
+
 const MarketplaceApp = dynamic(() => import('ui/pages/MarketplaceApp'), { ssr: false });
 
 const Page: NextPageWithLayout<Props> = (props: Props) => {
@@ -16,6 +18,14 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
   );
 };
 
+Page.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <LayoutApp>
+      { page }
+    </LayoutApp>
+  );
+};
+
 export default Page;
 
 export { marketplace as getServerSideProps } from 'nextjs/getServerSideProps';

ui/pages/MarketplaceApp.tsx

@@ -9,12 +9,10 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import { useAppContext } from 'lib/contexts/app';
 import useApiFetch from 'lib/hooks/useFetch';
 import * as metadata from 'lib/metadata';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import ContentLoader from 'ui/shared/ContentLoader';
-import PageTitle from 'ui/shared/Page/PageTitle';
 
 const feature = config.features.marketplace;
 const configUrl = feature.isEnabled ? feature.configUrl : '';
@@ -30,7 +28,6 @@ const MarketplaceApp = () => {
   const ref = useRef<HTMLIFrameElement>(null);
 
   const apiFetch = useApiFetch();
-  const appProps = useAppContext();
   const router = useRouter();
   const id = getQueryParamString(router.query.id);
 
@@ -91,46 +88,30 @@ const MarketplaceApp = () => {
     throw new Error('Unable to load app', { cause: error });
   }
 
-  const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer.includes('/apps');
-
-    if (!hasGoBackLink) {
-      return;
-    }
-
-    return {
-      label: 'Back to marketplace',
-      url: appProps.referrer,
-    };
-  }, [ appProps.referrer ]);
-
   return (
-    <>
-      { !isLoading && <PageTitle title={ data.title } backLink={ backLink }/> }
-      <Center
-        h="100vh"
-        mx={{ base: -4, lg: -12 }}
-      >
-        { (isFrameLoading) && (
-          <ContentLoader/>
-        ) }
-
-        { data && (
-          <Box
-            allow={ IFRAME_ALLOW_ATTRIBUTE }
-            ref={ ref }
-            sandbox={ IFRAME_SANDBOX_ATTRIBUTE }
-            as="iframe"
-            h="100%"
-            w="100%"
-            display={ isFrameLoading ? 'none' : 'block' }
-            src={ data.url }
-            title={ data.title }
-            onLoad={ handleIframeLoad }
-          />
-        ) }
-      </Center>
-    </>
+    <Center
+      h="100vh"
+      mx={{ base: -4, lg: -6 }}
+    >
+      { (isFrameLoading) && (
+        <ContentLoader/>
+      ) }
+
+      { data && (
+        <Box
+          allow={ IFRAME_ALLOW_ATTRIBUTE }
+          ref={ ref }
+          sandbox={ IFRAME_SANDBOX_ATTRIBUTE }
+          as="iframe"
+          h="100%"
+          w="100%"
+          display={ isFrameLoading ? 'none' : 'block' }
+          src={ data.url }
+          title={ data.title }
+          onLoad={ handleIframeLoad }
+        />
+      ) }
+    </Center>
   );
 };
 

ui/shared/layout/LayoutApp.tsx

+import React from 'react';
+
+import type { Props } from './types';
+
+import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
+import Header from 'ui/snippets/header/Header';
+import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+
+import * as Layout from './components';
+
+const LayoutDefault = ({ children }: Props) => {
+  return (
+    <Layout.Container>
+      <Layout.MainArea>
+        <Layout.MainColumn
+          paddingTop={{ base: '138px', lg: 6 }}
+          paddingX={{ base: 4, lg: 6 }}
+        >
+          <HeaderAlert/>
+          <Header isAppPage/>
+          <AppErrorBoundary>
+            <Layout.Content pt={{ base: 0, lg: 6 }}>
+              { children }
+            </Layout.Content>
+          </AppErrorBoundary>
+        </Layout.MainColumn>
+      </Layout.MainArea>
+      <Layout.Footer/>
+    </Layout.Container>
+  );
+};
+
+export default LayoutDefault;

ui/shared/layout/components/Content.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
+  className?: string;
   children: React.ReactNode;
 }
 
-const Content = ({ children }: Props) => {
+const Content = ({ children, className }: Props) => {
   return (
-    <Box pt={{ base: 0, lg: '52px' }} as="main">
+    <Box pt={{ base: 0, lg: '52px' }} as="main" className={ className }>
       { children }
     </Box>
   );
 };
 
-export default React.memo(Content);
+export default React.memo(chakra(Content));

ui/snippets/header/Burger.tsx

@@ -26,7 +26,7 @@ const Burger = () => {
 
   return (
     <>
-      <Box padding={ 2 } onClick={ onOpen }>
+      <Box padding={ 2 } onClick={ onOpen } cursor="pointer">
         <Icon
           as={ burgerIcon }
           boxSize={ 6 }

ui/snippets/header/Header.tsx

@@ -14,10 +14,11 @@ import Burger from './Burger';
 
 type Props = {
   isHomePage?: boolean;
+  isAppPage?: boolean;
   renderSearchBar?: () => React.ReactNode;
 }
 
-const Header = ({ isHomePage, renderSearchBar }: Props) => {
+const Header = ({ isHomePage, isAppPage, renderSearchBar }: Props) => {
   const bgColor = useColorModeValue('white', 'black');
   const scrollDirection = useScrollDirection();
 
@@ -62,6 +63,12 @@ const Header = ({ isHomePage, renderSearchBar }: Props) => {
             justifyContent="center"
             gap={ 12 }
           >
+            { isAppPage && (
+              <Box display="flex" alignItems="center" gap={ 3 }>
+                <Burger/>
+                <NetworkLogo isCollapsed/>
+              </Box>
+            ) }
             <Box width="100%">
               { searchBar }
             </Box>