From 979a655209ae1e76962056a5d1071ea6a15e2609 Mon Sep 17 00:00:00 2001 From: Gabo Esquivel Date: Mon, 4 Sep 2023 07:43:03 -0600 Subject: [PATCH] refactor: uniform layout (#509) --- cypress/e2e/extension.spec.ts | 1 + icons/app.webmanifest | 2 +- src/ui/components/App.tsx | 12 +++--- src/ui/components/index.ts | 1 - src/ui/layout/RootLayout.tsx | 34 ++++++++++++++++ .../{templates/index.tsx => layout/index.ts} | 4 +- .../{components => layout}/sidebar/Footer.tsx | 0 .../sidebar/MobileMenu.tsx | 0 .../sidebar/NavLink.tsx | 0 .../sidebar/Navigation.tsx | 0 .../sidebar/NetworkAndUser.tsx | 3 +- .../sidebar/QuickLinks.tsx | 0 .../{components => layout}/sidebar/index.tsx | 0 src/ui/pages/AddContract.tsx | 26 ++++++------ src/ui/pages/AddressLookup.tsx | 16 ++++---- src/ui/pages/Contract.tsx | 8 ++-- src/ui/pages/Homepage.tsx | 16 +++++--- src/ui/pages/SelectCodeHash.tsx | 8 ++-- src/ui/templates/Page.tsx | 33 --------------- src/ui/templates/PageFull.tsx | 40 ------------------- src/ui/templates/PageHome.tsx | 36 ----------------- 21 files changed, 85 insertions(+), 155 deletions(-) create mode 100644 src/ui/layout/RootLayout.tsx rename src/ui/{templates/index.tsx => layout/index.ts} (57%) rename src/ui/{components => layout}/sidebar/Footer.tsx (100%) rename src/ui/{components => layout}/sidebar/MobileMenu.tsx (100%) rename src/ui/{components => layout}/sidebar/NavLink.tsx (100%) rename src/ui/{components => layout}/sidebar/Navigation.tsx (100%) rename src/ui/{components => layout}/sidebar/NetworkAndUser.tsx (96%) rename src/ui/{components => layout}/sidebar/QuickLinks.tsx (100%) rename src/ui/{components => layout}/sidebar/index.tsx (100%) delete mode 100644 src/ui/templates/Page.tsx delete mode 100644 src/ui/templates/PageFull.tsx delete mode 100644 src/ui/templates/PageHome.tsx diff --git a/cypress/e2e/extension.spec.ts b/cypress/e2e/extension.spec.ts index 15443b66..03dbfa78 100644 --- a/cypress/e2e/extension.spec.ts +++ b/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, diff --git a/icons/app.webmanifest b/icons/app.webmanifest index be7dfd86..db448f49 100644 --- a/icons/app.webmanifest +++ b/icons/app.webmanifest @@ -21,4 +21,4 @@ "sizes": "512x512" } ] -} \ No newline at end of file +} diff --git a/src/ui/components/App.tsx b/src/ui/components/App.tsx index 19db5e6d..1e1b0938 100644 --- a/src/ui/components/App.tsx +++ b/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 ( -
+ {/* we want the sidebar outside the outlet to prevent flickering in quicklinks */} +
@@ -27,6 +29,4 @@ const App = (): JSX.Element => { ); -}; - -export default App; +} diff --git a/src/ui/components/index.ts b/src/ui/components/index.ts index 28631eb8..c17686d3 100644 --- a/src/ui/components/index.ts +++ b/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'; diff --git a/src/ui/layout/RootLayout.tsx b/src/ui/layout/RootLayout.tsx new file mode 100644 index 00000000..3344a2d7 --- /dev/null +++ b/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 ( +
+
+
+ {accessory &&
{accessory}
} +

{heading}

+

{help}

+
+ +
{children}
+
+ {aside && } +
+ ); +} + +interface PageProps extends HTMLAttributes { + accessory?: React.ReactNode; + heading: React.ReactNode; + help?: React.ReactNode; + aside?: React.ReactNode; +} diff --git a/src/ui/templates/index.tsx b/src/ui/layout/index.ts similarity index 57% rename from src/ui/templates/index.tsx rename to src/ui/layout/index.ts index 4ef07d44..06398b55 100644 --- a/src/ui/templates/index.tsx +++ b/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'; diff --git a/src/ui/components/sidebar/Footer.tsx b/src/ui/layout/sidebar/Footer.tsx similarity index 100% rename from src/ui/components/sidebar/Footer.tsx rename to src/ui/layout/sidebar/Footer.tsx diff --git a/src/ui/components/sidebar/MobileMenu.tsx b/src/ui/layout/sidebar/MobileMenu.tsx similarity index 100% rename from src/ui/components/sidebar/MobileMenu.tsx rename to src/ui/layout/sidebar/MobileMenu.tsx diff --git a/src/ui/components/sidebar/NavLink.tsx b/src/ui/layout/sidebar/NavLink.tsx similarity index 100% rename from src/ui/components/sidebar/NavLink.tsx rename to src/ui/layout/sidebar/NavLink.tsx diff --git a/src/ui/components/sidebar/Navigation.tsx b/src/ui/layout/sidebar/Navigation.tsx similarity index 100% rename from src/ui/components/sidebar/Navigation.tsx rename to src/ui/layout/sidebar/Navigation.tsx diff --git a/src/ui/components/sidebar/NetworkAndUser.tsx b/src/ui/layout/sidebar/NetworkAndUser.tsx similarity index 96% rename from src/ui/components/sidebar/NetworkAndUser.tsx rename to src/ui/layout/sidebar/NetworkAndUser.tsx index 548da96c..d0f57e97 100644 --- a/src/ui/components/sidebar/NetworkAndUser.tsx +++ b/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, diff --git a/src/ui/components/sidebar/QuickLinks.tsx b/src/ui/layout/sidebar/QuickLinks.tsx similarity index 100% rename from src/ui/components/sidebar/QuickLinks.tsx rename to src/ui/layout/sidebar/QuickLinks.tsx diff --git a/src/ui/components/sidebar/index.tsx b/src/ui/layout/sidebar/index.tsx similarity index 100% rename from src/ui/components/sidebar/index.tsx rename to src/ui/layout/sidebar/index.tsx diff --git a/src/ui/pages/AddContract.tsx b/src/ui/pages/AddContract.tsx index 61829606..4f2acad0 100644 --- a/src/ui/pages/AddContract.tsx +++ b/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 ( - You can upload and instantiate new contract code, or use contract code that already exists @@ -23,34 +23,34 @@ export function AddContract() {
- + Upload New Contract Code
- +
- + Use On-Chain Contract Code
- +
- + Use On-Chain Contract Address
- +
@@ -58,6 +58,6 @@ export function AddContract() {
- + ); } diff --git a/src/ui/pages/AddressLookup.tsx b/src/ui/pages/AddressLookup.tsx index dbdd2883..0ceba453 100644 --- a/src/ui/pages/AddressLookup.tsx +++ b/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 ( - Add metadata to an existing contract instance in order to interact with it.} > {address ? ( -
- on-chain -