refactor: uniform layout (#509)

cypress/e2e/extension.spec.ts

@@ -9,6 +9,7 @@ describe('Signer extension flow on live networks', () => {
   before(() => {
     cy.visit(`/instantiate/?rpc=wss://rococo-contracts-rpc.polkadot.io`);
   });
+
   it('connects to Rococo', () => {
     cy.contains('Connecting to wss://rococo-contracts-rpc.polkadot.io').should('not.exist', {
       timeout: 25000,

icons/app.webmanifest

@@ -21,4 +21,4 @@
       "sizes": "512x512"
     }
   ]
-}
+}

src/ui/components/App.tsx

@@ -2,21 +2,23 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Outlet } from 'react-router';
-import { Sidebar, AwaitApis } from 'ui/components';
+import { AwaitApis } from 'ui/components';
 import {
   ApiContextProvider,
   DatabaseContextProvider,
   TransactionsContextProvider,
   ThemeContextProvider,
 } from 'ui/contexts';
+import { Sidebar } from 'ui/layout/sidebar';
 
-const App = (): JSX.Element => {
+export default function App() {
   return (
     <ThemeContextProvider>
       <ApiContextProvider>
         <DatabaseContextProvider>
           <TransactionsContextProvider>
-            <div className="relative inset-0 flex min-h-screen flex-col overflow-hidden text-black dark:bg-gray-900 dark:text-white md:fixed md:flex-row">
+            {/* we want the sidebar outside the outlet to prevent flickering in quicklinks */}
+            <div className="relative inset-0 flex min-h-screen overflow-hidden text-black dark:bg-gray-900 dark:text-white md:fixed md:flex-row">
               <Sidebar />
               <AwaitApis>
                 <Outlet />
@@ -27,6 +29,4 @@ const App = (): JSX.Element => {
       </ApiContextProvider>
     </ThemeContextProvider>
   );
-};
-
-export default App;
+}

src/ui/components/index.ts

@@ -8,5 +8,4 @@ export * from './form';
 export * from './homepage';
 export * from './instantiate';
 export * from './message';
-export * from './sidebar';
 export * from './AwaitApis';

src/ui/layout/RootLayout.tsx

@@ -0,0 +1,34 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { HTMLAttributes } from 'react';
+import { classes } from 'helpers/util';
+
+export function RootLayout({ accessory, heading, help, children, aside }: PageProps) {
+  return (
+    <section
+      className={classes(
+        'p-10 overflow-y-auto w-full',
+        aside && 'grid grid-cols-[1fr_400px] gap-10',
+      )}
+    >
+      <main>
+        <header className="pb-6 mb-10 space-y-1 border-b border-gray-200 dark:border-gray-800">
+          {accessory && <div className="float-right">{accessory}</div>}
+          <h1 className="capitalize">{heading}</h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400">{help}</p>
+        </header>
+
+        <div className="flex flex-col h-full">{children}</div>
+      </main>
+      {aside && <aside className="flex flex-col">{aside}</aside>}
+    </section>
+  );
+}
+
+interface PageProps extends HTMLAttributes<HTMLDivElement> {
+  accessory?: React.ReactNode;
+  heading: React.ReactNode;
+  help?: React.ReactNode;
+  aside?: React.ReactNode;
+}

src/ui/templates/index.tsx → src/ui/layout/index.ts

@@ -1,6 +1,4 @@
 // Copyright 2022 @paritytech/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-export * from './Page';
-export * from './PageHome';
-export * from './PageFull';
+export * from './RootLayout';

src/ui/components/sidebar/NetworkAndUser.tsx → src/ui/layout/sidebar/NetworkAndUser.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { useNavigate } from 'react-router';
-import { Dropdown } from '../common/Dropdown';
+
 import { MAINNETS, TESTNETS } from '../../../constants';
 import { useApi } from 'ui/contexts';
 import { classes } from 'helpers';
+import { Dropdown } from 'ui/components';
 
 const testnetOptions = TESTNETS.map(network => ({
   label: network.name,

src/ui/pages/AddContract.tsx

@@ -3,12 +3,12 @@
 
 import { Link } from 'react-router-dom';
 import { ChevronRightIcon, CodeIcon, UploadIcon, DocumentAddIcon } from '@heroicons/react/outline';
-import { Page } from 'ui/templates';
+import { RootLayout } from 'ui/layout';
 
 export function AddContract() {
   return (
-    <Page
-      header="Add New Contract"
+    <RootLayout
+      heading="Add New Contract"
       help={
         <>
           You can upload and instantiate new contract code, or use contract code that already exists
@@ -23,41 +23,41 @@ export function AddContract() {
               <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                 <div className="mt-4">
                   <Link
-                    className="mb-10 flex items-center justify-between rounded-md border border-gray-200 px-6 py-4 text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:bg-elevation-1 dark:hover:bg-elevation-2"
+                    className="flex items-center justify-between px-6 py-4 mb-10 text-gray-500 border border-gray-200 rounded-md hover:bg-gray-100 dark:border-gray-700 dark:bg-elevation-1 dark:hover:bg-elevation-2"
                     to="/instantiate"
                   >
                     <div className="flex items-center space-x-2 text-base text-gray-500 dark:text-gray-300">
-                      <UploadIcon className="h-8 w-8 text-gray-400 group-hover:text-gray-500 dark:text-gray-500" />
+                      <UploadIcon className="w-8 h-8 text-gray-400 group-hover:text-gray-500 dark:text-gray-500" />
                       <span>Upload New Contract Code</span>
                     </div>
-                    <ChevronRightIcon className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+                    <ChevronRightIcon className="w-6 h-6 text-gray-400 dark:text-gray-500" />
                   </Link>
                   <Link
-                    className="mb-10 flex items-center justify-between rounded-md border border-gray-200 px-6 py-4 text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:bg-elevation-1 dark:hover:bg-elevation-2"
+                    className="flex items-center justify-between px-6 py-4 mb-10 text-gray-500 border border-gray-200 rounded-md hover:bg-gray-100 dark:border-gray-700 dark:bg-elevation-1 dark:hover:bg-elevation-2"
                     to="/hash-lookup"
                   >
                     <div className="flex items-center space-x-2 text-base text-gray-500 dark:text-gray-300">
-                      <CodeIcon className="h-8 w-8 text-gray-400 group-hover:text-gray-500 dark:text-gray-500" />
+                      <CodeIcon className="w-8 h-8 text-gray-400 group-hover:text-gray-500 dark:text-gray-500" />
                       <span>Use On-Chain Contract Code</span>
                     </div>
-                    <ChevronRightIcon className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+                    <ChevronRightIcon className="w-6 h-6 text-gray-400 dark:text-gray-500" />
                   </Link>
                   <Link
-                    className="mb-10 flex items-center justify-between rounded-md border border-gray-200 px-6 py-4 text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:bg-elevation-1 dark:hover:bg-elevation-2"
+                    className="flex items-center justify-between px-6 py-4 mb-10 text-gray-500 border border-gray-200 rounded-md hover:bg-gray-100 dark:border-gray-700 dark:bg-elevation-1 dark:hover:bg-elevation-2"
                     to="/address-lookup"
                   >
                     <div className="flex items-center space-x-2 text-base text-gray-500 dark:text-gray-300">
-                      <DocumentAddIcon className="h-8 w-8 text-gray-400 group-hover:text-gray-500 dark:text-gray-500" />
+                      <DocumentAddIcon className="w-8 h-8 text-gray-400 group-hover:text-gray-500 dark:text-gray-500" />
                       <span>Use On-Chain Contract Address</span>
                     </div>
-                    <ChevronRightIcon className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+                    <ChevronRightIcon className="w-6 h-6 text-gray-400 dark:text-gray-500" />
                   </Link>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </Page>
+    </RootLayout>
   );
 }

src/ui/pages/AddressLookup.tsx

@@ -14,7 +14,7 @@ import {
   InputFile,
   useMetadataField,
 } from 'ui/components';
-import { Page } from 'ui/templates';
+import { RootLayout } from 'ui/layout';
 import { useApi, useDatabase } from 'ui/contexts';
 import { useNonEmptyString } from 'ui/hooks/useNonEmptyString';
 
@@ -57,8 +57,8 @@ export function AddressLookup() {
     validate().catch(e => console.error(e));
   }, [api, address, searchString, db.contracts, navigate]);
   return (
-    <Page
-      header="Add contract from address"
+    <RootLayout
+      heading="Add contract from address"
       help={<>Add metadata to an existing contract instance in order to interact with it.</>}
     >
       <FormField
@@ -77,13 +77,13 @@ export function AddressLookup() {
           value={searchString}
         >
           {address ? (
-            <div className="absolute right-2 flex items-center  text-green-500">
-              <span className="w-22 mr-1 text-xs">on-chain</span>
-              <CheckCircleIcon aria-hidden="true" className="h-4 w-4" />
+            <div className="absolute flex items-center text-green-500 right-2">
+              <span className="mr-1 text-xs w-22">on-chain</span>
+              <CheckCircleIcon aria-hidden="true" className="w-4 h-4" />
             </div>
           ) : (
             searchString && (
-              <XCircleIcon aria-hidden="true" className="-ml-8 h-5 w-5 text-red-500" />
+              <XCircleIcon aria-hidden="true" className="w-5 h-5 -ml-8 text-red-500" />
             )
           )}
         </Input>
@@ -144,6 +144,6 @@ export function AddressLookup() {
           </Buttons>
         </>
       )}
-    </Page>
+    </RootLayout>
   );
 }

src/ui/pages/Contract.tsx

@@ -10,7 +10,7 @@ import { MetadataTab } from 'ui/components/contract/MetadataTab';
 import { Loader } from 'ui/components/common/Loader';
 import { Tabs } from 'ui/components/common/Tabs';
 import { HeaderButtons } from 'ui/components/common/HeaderButtons';
-import { PageFull } from 'ui/templates';
+import { RootLayout } from 'ui/layout';
 import { useStoredContract } from 'ui/hooks';
 
 const TABS = [
@@ -43,16 +43,16 @@ export function Contract() {
   return (
     <Loader isLoading={!contract} message="Loading contract...">
       {contract && (
-        <PageFull
+        <RootLayout
           accessory={<HeaderButtons contract={contract} />}
-          header={contract.displayName || contract.name}
+          heading={contract.displayName || contract.name}
           help={<ContractHeader document={contract} />}
         >
           <Tabs index={tabIndex} setIndex={setTabIndex} tabs={TABS}>
             <MetadataTab abi={contract.abi} id={contract.id} />
             <InteractTab contract={contract} />
           </Tabs>
-        </PageFull>
+        </RootLayout>
       )}
     </Loader>
   );

src/ui/pages/Homepage.tsx

@@ -2,14 +2,20 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Contracts, HelpBox, Statistics } from '../components/homepage';
-import { PageHome } from 'ui/templates';
+import { RootLayout } from 'ui/layout';
 
 export function Homepage() {
   return (
-    <PageHome header="Contracts">
+    <RootLayout
+      aside={
+        <>
+          <HelpBox />
+          <Statistics />
+        </>
+      }
+      heading="Contracts"
+    >
       <Contracts />
-      <HelpBox />
-      <Statistics />
-    </PageHome>
+    </RootLayout>
   );
 }

src/ui/pages/SelectCodeHash.tsx

@@ -3,12 +3,12 @@
 
 import { Link } from 'react-router-dom';
 import { LookUpCodeHash, AvailableCodeBundles } from 'ui/components/instantiate';
-import { Page } from 'ui/templates';
+import { RootLayout } from 'ui/layout';
 
 export function SelectCodeHash() {
   return (
-    <Page
-      header="Instantiate Contract from Code Hash"
+    <RootLayout
+      heading="Instantiate Contract from Code Hash"
       help={
         <>
           You can upload and instantate new contract code{' '}
@@ -21,6 +21,6 @@ export function SelectCodeHash() {
     >
       <LookUpCodeHash />
       <AvailableCodeBundles />
-    </Page>
+    </RootLayout>
   );
 }