From b475a9ad280458bbfdfcf906b53017cffa436e16 Mon Sep 17 00:00:00 2001 From: "Craig M." Date: Wed, 25 Sep 2024 13:18:05 +1200 Subject: [PATCH] refactor: UI ported to Biome (#2203) --- .../app/connect-with-eip1193/page.tsx | 63 +++++++++++-------- .../app/connect-with-etherjs/page.tsx | 62 +++++++++++------- .../app/connect-with-wagmi/account.tsx | 40 ++++++++---- .../app/connect-with-wagmi/page.tsx | 14 ++--- .../app/connect-with-wagmi/wallet-options.tsx | 18 ++++-- .../app/globals.css | 21 ++++++- .../app/layout.tsx | 3 + .../app/logout/page.tsx | 18 +++--- .../wallets-connect-with-nextjs/app/page.tsx | 54 ++++++++-------- .../app/redirect/page.tsx | 7 +-- .../app/{utils.ts => utils/passport.ts} | 0 .../app/utils/wrapper.tsx | 18 ++++++ .../wallets-connect-with-nextjs/package.json | 1 + .../tests/base.spec.ts | 15 ++--- yarn.lock | 3 +- 15 files changed, 209 insertions(+), 128 deletions(-) rename examples/passport/wallets-connect-with-nextjs/app/{utils.ts => utils/passport.ts} (100%) create mode 100644 examples/passport/wallets-connect-with-nextjs/app/utils/wrapper.tsx diff --git a/examples/passport/wallets-connect-with-nextjs/app/connect-with-eip1193/page.tsx b/examples/passport/wallets-connect-with-nextjs/app/connect-with-eip1193/page.tsx index 60dc8df591..3741a3b536 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/connect-with-eip1193/page.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/connect-with-eip1193/page.tsx @@ -2,7 +2,9 @@ import { useState } from 'react'; import { ProviderEvent } from '@imtbl/sdk/passport'; -import { passportInstance } from '../utils'; +import { passportInstance } from '../utils/passport'; +import { Button, Heading, Link, Table } from '@biom3/react'; +import NextLink from 'next/link'; export default function ConnectWithEtherJS() { // setup the accounts state @@ -48,39 +50,50 @@ export default function ConnectWithEtherJS() { // render the view to login/logout and show the connected accounts return ( -
-

Passport Connect with EIP-1193

+ <> + Passport Connect with EIP-1193 {accountsState.length === 0 && ( - + )} {accountsState.length >= 1 && ( - + )} -
- {loading - ?

Loading...

- : ( -

- Connected Account: - {accountsState.length >= 1 ? accountsState : '(not connected)'} -

- )} -
- Return to Examples -
+ + + + Item + Value + + + + + Connected Account + + {accountsState.length === 0 && ( + (not connected) + ) + } + {accountsState.length > 0 && accountsState[0]} + + + +
+
+ }>Return to Examples + ); } diff --git a/examples/passport/wallets-connect-with-nextjs/app/connect-with-etherjs/page.tsx b/examples/passport/wallets-connect-with-nextjs/app/connect-with-etherjs/page.tsx index a3e63b693e..981a36241c 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/connect-with-etherjs/page.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/connect-with-etherjs/page.tsx @@ -3,7 +3,9 @@ import { useState } from 'react'; import { ethers } from 'ethers'; import { ProviderEvent } from '@imtbl/sdk/passport'; -import { passportInstance } from '../utils'; +import { passportInstance } from '../utils/passport'; +import { Button, Heading, Link, Table } from '@biom3/react'; +import NextLink from 'next/link'; export default function ConnectWithEtherJS() { // setup the accounts state @@ -53,39 +55,51 @@ export default function ConnectWithEtherJS() { // render the view to login/logout and show the connected accounts return ( -
-

Passport Connect with EtherJS

+ <> + Passport Connect with EtherJS {accountsState.length === 0 && ( - + )} {accountsState.length >= 1 && ( - + )}
- {loading - ?

Loading...

- : ( -

- Connected Account: - {accountsState.length >= 1 ? accountsState : '(not connected)'} -

- )} -
- Return to Examples -
+ + + + Item + Value + + + + + Connected Account + + {accountsState.length === 0 && ( + (not connected) + ) + } + {accountsState.length > 0 && accountsState[0]} + + + +
+
+ }>Return to Examples + ); } diff --git a/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/account.tsx b/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/account.tsx index bfb63fb24e..3d4a012561 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/account.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/account.tsx @@ -2,7 +2,8 @@ import { useAccount, useDisconnect, useEnsName, } from 'wagmi'; import { useState } from 'react'; -import { passportInstance } from '../utils'; +import { passportInstance } from '../utils/passport'; +import { Button, Table } from '@biom3/react'; export function Account() { const { address } = useAccount(); @@ -24,23 +25,36 @@ export function Account() { // render the view to show the connected accounts and logout return ( <> - -
- {loading - ?

Loading...

- : ( -

- Connected Account: - {address && {ensName ? `${ensName} (${address})` : address}} -

- )} + + + + + Item + Value + + + + + Connected Account + + {!address && ( + (not connected) + ) + } + {address && ( + {ensName ? `${ensName} (${address})` : address} + )} + + + +
+
); } diff --git a/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/page.tsx b/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/page.tsx index 085dd0f62a..50bb420d40 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/page.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/page.tsx @@ -2,9 +2,11 @@ import { WagmiProvider } from 'wagmi'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { passportInstance } from '../utils'; +import { passportInstance } from '../utils/passport'; import { config } from './config'; import { ConnectWallet } from './connect'; +import { Heading, Link } from '@biom3/react'; +import NextLink from 'next/link'; // initialise the QueryClient for the Provider const queryClient = new QueryClient(); @@ -16,16 +18,14 @@ export default function ConnectWithWagmi() { // render the ConnectWallet component // wrapping it in the Wagami and QueryClient Providers return ( -
- -

Passport Connect with Wagmi

+ <> + Passport Connect with Wagmi -
- Return to Examples -
+ }>Return to Examples + ); } diff --git a/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/wallet-options.tsx b/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/wallet-options.tsx index 9578bd9b15..06a229ab88 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/wallet-options.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/wallet-options.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react'; import { Connector, useConnect } from 'wagmi'; +import { Button } from '@biom3/react'; export function WalletOptions() { // get the available connectors and the connect function from Wagmi @@ -30,18 +31,25 @@ export function WalletOptions() { return ( <> {filteredConnectors.map((connector) => ( - + + ))} -
- {loading &&

Loading...

} + + {loading && ( + <> +

Loading...

+ + )} ); } diff --git a/examples/passport/wallets-connect-with-nextjs/app/globals.css b/examples/passport/wallets-connect-with-nextjs/app/globals.css index b5c61c9567..cd0bc82b29 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/globals.css +++ b/examples/passport/wallets-connect-with-nextjs/app/globals.css @@ -1,3 +1,18 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +html, body { + height: 100%; +} +body { + margin: 0; +} +.flex-container { + height: 100%; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.mb-1 { + margin-bottom: 1rem; +} \ No newline at end of file diff --git a/examples/passport/wallets-connect-with-nextjs/app/layout.tsx b/examples/passport/wallets-connect-with-nextjs/app/layout.tsx index 883283b6e3..6cc4b8846c 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/layout.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; +import AppWrapper from './utils/wrapper'; const inter = Inter({ subsets: ['latin'] }); @@ -17,7 +18,9 @@ export default function RootLayout({ return ( + {children} + ); diff --git a/examples/passport/wallets-connect-with-nextjs/app/logout/page.tsx b/examples/passport/wallets-connect-with-nextjs/app/logout/page.tsx index 47163946b1..65a71f6d19 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/logout/page.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/logout/page.tsx @@ -1,18 +1,14 @@ 'use client'; +import { Heading, Link } from '@biom3/react'; +import NextLink from 'next/link'; + export default function Logout() { // render the view for after the logout is complete return ( -
-

Logged Out

-
- - Return to examples - -
-
+ <> + Logged Out + }>Return to Examples + ); } diff --git a/examples/passport/wallets-connect-with-nextjs/app/page.tsx b/examples/passport/wallets-connect-with-nextjs/app/page.tsx index 8ff6bf3e1c..495318ba2c 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/page.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/page.tsx @@ -1,27 +1,31 @@ +'use client'; +import { Button, Heading } from '@biom3/react'; +import NextLink from 'next/link'; + export default function Home() { - return ( -
-

Passport Connect Examples

-
- - Connect with EIP-1193 - - - Connect with EtherJS - - - Connect with Wagmi - -
-
- ); + return (<> + + Passport Connect Examples + + + + + ); } diff --git a/examples/passport/wallets-connect-with-nextjs/app/redirect/page.tsx b/examples/passport/wallets-connect-with-nextjs/app/redirect/page.tsx index 5ba3432c0d..a48fb92f49 100644 --- a/examples/passport/wallets-connect-with-nextjs/app/redirect/page.tsx +++ b/examples/passport/wallets-connect-with-nextjs/app/redirect/page.tsx @@ -1,7 +1,8 @@ 'use client'; import { useEffect } from 'react'; -import { passportInstance } from '../utils'; +import { passportInstance } from '../utils/passport'; +import { Heading } from '@biom3/react'; export default function Redirect() { useEffect(() => { @@ -11,8 +12,6 @@ export default function Redirect() { // render the view for the login popup after the login is complete return ( -
-

Logged in

-
+ Logged in ); } diff --git a/examples/passport/wallets-connect-with-nextjs/app/utils.ts b/examples/passport/wallets-connect-with-nextjs/app/utils/passport.ts similarity index 100% rename from examples/passport/wallets-connect-with-nextjs/app/utils.ts rename to examples/passport/wallets-connect-with-nextjs/app/utils/passport.ts diff --git a/examples/passport/wallets-connect-with-nextjs/app/utils/wrapper.tsx b/examples/passport/wallets-connect-with-nextjs/app/utils/wrapper.tsx new file mode 100644 index 0000000000..b31df440dc --- /dev/null +++ b/examples/passport/wallets-connect-with-nextjs/app/utils/wrapper.tsx @@ -0,0 +1,18 @@ +'use client'; +import { BiomeCombinedProviders, Stack } from '@biom3/react'; + +export default function AppWrapper({ + children, + }: Readonly<{ + children: React.ReactNode; + }>) { + return ( +
+ + + { children } + + +
+ ); +} \ No newline at end of file diff --git a/examples/passport/wallets-connect-with-nextjs/package.json b/examples/passport/wallets-connect-with-nextjs/package.json index 903b946c50..3047661b3e 100644 --- a/examples/passport/wallets-connect-with-nextjs/package.json +++ b/examples/passport/wallets-connect-with-nextjs/package.json @@ -2,6 +2,7 @@ "name": "@examples/wallets-connect-with-nextjs", "version": "0.1.0", "dependencies": { + "@biom3/react": "^0.26.2", "@ethersproject/providers": "^5.7.2", "@imtbl/sdk": "latest", "@tanstack/react-query": "^5.51.11", diff --git a/examples/passport/wallets-connect-with-nextjs/tests/base.spec.ts b/examples/passport/wallets-connect-with-nextjs/tests/base.spec.ts index c677fa39f9..eb32ecdcaa 100644 --- a/examples/passport/wallets-connect-with-nextjs/tests/base.spec.ts +++ b/examples/passport/wallets-connect-with-nextjs/tests/base.spec.ts @@ -7,9 +7,7 @@ test.beforeEach(async ({ page }) => { test.describe("home page", () => { test("has title, heading and link", async ({ page }) => { await expect(page).toHaveTitle("Passport Connect Examples"); - await expect(page.getByRole("heading", { name: "Passport Connect Examples" })).toBeVisible(); - await expect(page.getByRole("link", { name: "Connect with EtherJS" })).toBeVisible(); await expect(page.getByRole("link", { name: "Connect with EIP-1193" })).toBeVisible(); await expect(page.getByRole("link", { name: "Connect with Wagmi" })).toBeVisible(); @@ -19,11 +17,10 @@ test.describe("home page", () => { test.describe("connect wallet with etherjs", () => { test("has heading, login button and initial account status set correctly", async ({ page }) => { await page.click("text=Connect with EtherJS"); - await expect(page.getByRole("heading", { name: "Passport Connect with EtherJS" })).toBeVisible(); - await expect(page.getByRole("button", { name: "Passport Login" })).toBeVisible(); - await expect(page.getByText("Connected Account:")).toBeVisible(); + await expect(page.getByText("Connected Account")).toBeVisible(); + await expect(page.getByText("(not connected)")).toBeVisible(); await expect(page.getByRole("link", { name: "Return to Examples" })).toBeVisible(); }); }); @@ -31,11 +28,10 @@ test.describe("connect wallet with etherjs", () => { test.describe("connect wallet with eip1193", () => { test("has heading, login button and initial account status set correctly", async ({ page }) => { await page.click("text=Connect with EIP-1193"); - await expect(page.getByRole("heading", { name: "Passport Connect with EIP-1193" })).toBeVisible(); - await expect(page.getByRole("button", { name: "Passport Login" })).toBeVisible(); - await expect(page.getByText("Connected Account:")).toBeVisible(); + await expect(page.getByText("Connected Account")).toBeVisible(); + await expect(page.getByText("(not connected)")).toBeVisible(); await expect(page.getByRole("link", { name: "Return to Examples" })).toBeVisible(); }); }); @@ -43,9 +39,8 @@ test.describe("connect wallet with eip1193", () => { test.describe("connect wallet with wagmi", () => { test("has heading and login button set correctly", async ({ page }) => { await page.click("text=Connect with Wagmi"); - await expect(page.getByRole("heading", { name: "Passport Connect with Wagmi" })).toBeVisible(); - + await expect(page.getByText("Connect with:")).toBeVisible(); await expect(page.getByRole("button", { name: "Immutable Passport" })).toBeVisible(); await expect(page.getByRole("link", { name: "Return to Examples" })).toBeVisible(); }); diff --git a/yarn.lock b/yarn.lock index df5736c16f..c0df17f3d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2617,7 +2617,7 @@ __metadata: languageName: node linkType: hard -"@biom3/react@npm:^0.26.1": +"@biom3/react@npm:^0.26.1, @biom3/react@npm:^0.26.2": version: 0.26.2 resolution: "@biom3/react@npm:0.26.2" dependencies: @@ -4047,6 +4047,7 @@ __metadata: version: 0.0.0-use.local resolution: "@examples/wallets-connect-with-nextjs@workspace:examples/passport/wallets-connect-with-nextjs" dependencies: + "@biom3/react": ^0.26.2 "@ethersproject/providers": ^5.7.2 "@imtbl/sdk": latest "@playwright/test": ^1.45.2