refactor: UI ported to Biome (#2203)

immutable · Sep 25, 2024 · b475a9a · b475a9a
1 parent 8b1ceba
commit b475a9a
Show file tree

Hide file tree

Showing 15 changed files with 209 additions and 128 deletions.
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
@@ -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 (
- <div className="flex flex-col items-center justify-center min-h-screen p-8">
- <h1 className="text-3xl font-bold mb-8">Passport Connect with EIP-1193</h1>
+ <>
+ <Heading className="mb-1">Passport Connect with EIP-1193</Heading>
  {accountsState.length === 0
  && (
- <button
- className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+ <Button 
+ className="mb-1"
+ size="medium" 
  onClick={passportLogin}
- disabled={loading}
- >
+ disabled={loading}>
  Passport Login
- </button>
+ </Button> 
  )}
  {accountsState.length >= 1
  && (
- <button
- className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+ <Button 
+ className="mb-1"
+ size="medium" 
  onClick={passportLogout}
- disabled={loading}
- >
+ disabled={loading}>
  Passport Logout
- </button>
+ </Button> 
  )}
- <br />
- {loading
- ? <p>Loading...</p>
- : (
- <p>
- Connected Account:
- {accountsState.length >= 1 ? accountsState : '(not connected)'}
- </p>
- )}
- <br />
- <a href="/" className="underline">Return to Examples</a>
- </div>
+ <Table>
+ <Table.Head>
+ <Table.Row>
+ <Table.Cell>Item</Table.Cell>
+ <Table.Cell>Value</Table.Cell>
+ </Table.Row>
+ </Table.Head>
+ <Table.Body>
+ <Table.Row>
+ <Table.Cell><b>Connected Account</b></Table.Cell>
+ <Table.Cell>
+ {accountsState.length === 0 && (
+ <span>(not&nbsp;connected)</span>
+ )
+ }
+ {accountsState.length > 0 && accountsState[0]}
+ </Table.Cell>
+ </Table.Row>
+ </Table.Body>
+ </Table>
+ <br />
+ <Link rc={<NextLink href="/" />}>Return to Examples</Link>
+ </>
  );
 }
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
@@ -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 (
- <div className="flex flex-col items-center justify-center min-h-screen p-8">
- <h1 className="text-3xl font-bold mb-8">Passport Connect with EtherJS</h1>
+ <>
+ <Heading className="mb-1">Passport Connect with EtherJS</Heading>
  {accountsState.length === 0
  && (
- <button
- className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+ <Button 
+ className="mb-1"
+ size="medium" 
  onClick={passportLogin}
- disabled={loading}
- >
+ disabled={loading}>
  Passport Login
- </button>
+ </Button>
  )}
  {accountsState.length >= 1
  && (
- <button
- className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+ <Button 
+ className="mb-1"
+ size="medium" 
  onClick={passportLogout}
- disabled={loading}
- >
+ disabled={loading}>
  Passport Logout
- </button>
+ </Button> 
  )}
  <br />
- {loading
- ? <p>Loading...</p>
- : (
- <p>
- Connected Account:
- {accountsState.length >= 1 ? accountsState : '(not connected)'}
- </p>
- )}
- <br />
- <a href="/" className="underline">Return to Examples</a>
- </div>
+ <Table>
+ <Table.Head>
+ <Table.Row>
+ <Table.Cell>Item</Table.Cell>
+ <Table.Cell>Value</Table.Cell>
+ </Table.Row>
+ </Table.Head>
+ <Table.Body>
+ <Table.Row>
+ <Table.Cell><b>Connected Account</b></Table.Cell>
+ <Table.Cell>
+ {accountsState.length === 0 && (
+ <span>(not&nbsp;connected)</span>
+ )
+ }
+ {accountsState.length > 0 && accountsState[0]}
+ </Table.Cell>
+ </Table.Row>
+ </Table.Body>
+ </Table>
+ <br />
+ <Link rc={<NextLink href="/" />}>Return to Examples</Link>
+ </>
  );
 }
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
@@ -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 (
  <>
- <button
- className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+ <Button
  onClick={() => passportLogout()}
  disabled={loading}
  type="button"
  >
  Passport Logout
- </button>
- <br />
- {loading
- ? <p>Loading...</p>
- : (
- <p>
- Connected Account:
- {address && <span>{ensName ? `${ensName} (${address})` : address}</span>}
- </p>
- )}
+ </Button>
+ <Table>
+ <Table.Head>
+ <Table.Row>
+ <Table.Cell>Item</Table.Cell>
+ <Table.Cell>Value</Table.Cell>
+ </Table.Row>
+ </Table.Head>
+ <Table.Body>
+ <Table.Row>
+ <Table.Cell><b>Connected Account</b></Table.Cell>
+ <Table.Cell>
+ {!address && (
+ <span>(not&nbsp;connected)</span>
+ )
+ }
+ {address && (
+ <span>{ensName ? `${ensName} (${address})` : address}</span>
+ )}
+ </Table.Cell>
+ </Table.Row>
+ </Table.Body>
+ </Table>
+ <br />
  </>
  );
 }
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
@@ -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 (
- <div className="flex flex-col items-center justify-center min-h-screen p-8">
-
- <h1 className="text-3xl font-bold mb-8">Passport Connect with Wagmi</h1>
+ <>
+ <Heading className="mb-1">Passport Connect with Wagmi</Heading>
  <WagmiProvider config={config}>
  <QueryClientProvider client={queryClient}>
  <ConnectWallet />
  </QueryClientProvider>
  </WagmiProvider>
- <br />
- <a href="/" className="underline">Return to Examples</a>
- </div>
+ <Link rc={<NextLink href="/" />}>Return to Examples</Link>
+ </>
  );
 }
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
@@ -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) => (
- <button
- className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+ <>
+ <p>Connect with:</p>
+ <Button
+ className="mb-1"
  key={connector.uid}
  type="button"
  onClick={() => passportLogin(connector)}
  disabled={loading}
  >
  {connector.name}
- </button>
+ </Button>
+ </>
  ))}
- <br />
- {loading && <p>Loading...</p>}
+
+ {loading && (
+ <>
+ <p>Loading...</p>
+ </>
+ )}
  </>
  );
 }
diff --git 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;
+}
diff --git 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 (
  <html lang="en">
  <body className={inter.className}>
+ <AppWrapper>
  {children}
+ </AppWrapper>
  </body>
  </html>
  );

diff --git 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 (
- <div className="flex flex-col items-center justify-center min-h-screen p-8">
- <h1 className="text-3xl font-bold mb-8">Logged Out</h1>
- <div className="grid grid-cols-1 gap-4 text-center">
- <a
- className="underline"
- href="/"
- >
- Return to examples
- </a>
- </div>
- </div>
+ <>
+ <Heading className="mb-1">Logged Out</Heading>
+ <Link rc={<NextLink href="/" />}>Return to Examples</Link>
+ </>
  );
 }