Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: UI ported to Biome #2203

Merged
merged 8 commits into from
Sep 25, 2024
Merged

refactor: UI ported to Biome #2203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d49edf2
UI ported to Biome
proletesseract Sep 23, 2024
7f5449d
whitespace
proletesseract Sep 23, 2024
12d1c6b
Merge branch 'main' into DVR-185-connect-biome
proletesseract Sep 23, 2024
48147d3
Merge branch 'main' into DVR-185-connect-biome
proletesseract Sep 24, 2024
4c99e5a
tests fixed
proletesseract Sep 24, 2024
6b51aef
ws removed
proletesseract Sep 24, 2024
dc4a7e1
layout fix
proletesseract Sep 24, 2024
ddfe071
Merge branch 'main' into DVR-185-connect-biome
proletesseract Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 38 additions & 25 deletions examples/passport/wallets-connect-with-nextjs/app/connect-with-eip1193/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
</>
);
}
62 changes: 38 additions & 24 deletions examples/passport/wallets-connect-with-nextjs/app/connect-with-etherjs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
</>
);
}
40 changes: 27 additions & 13 deletions examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 />
</>
);
}
14 changes: 7 additions & 7 deletions examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>
</>
);
}
18 changes: 13 additions & 5 deletions examples/passport/wallets-connect-with-nextjs/app/connect-with-wagmi/wallet-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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>
</>
)}
</>
);
}
21 changes: 18 additions & 3 deletions examples/passport/wallets-connect-with-nextjs/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 3 additions & 0 deletions examples/passport/wallets-connect-with-nextjs/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'] });

Expand All @@ -17,7 +18,9 @@ export default function RootLayout({
return (
<html lang="en">
<body className={inter.className}>
<AppWrapper>
{children}
</AppWrapper>
</body>
</html>
);
Expand Down
18 changes: 7 additions & 11 deletions examples/passport/wallets-connect-with-nextjs/app/logout/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
Loading
Loading