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

refactor: Refactored to use Biome and separated apps #2342

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

refactor: Refactored to use Biome and separated apps #2342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5654bc3
Refactored to use Biome and separated apps
Calvin-Lieu Oct 22, 2024
1ac4ee6
Updated Readme
Calvin-Lieu Oct 29, 2024
1afddaf
Merge branch 'main' into DVR-196-update-identity-sampleapp
proletesseract Nov 1, 2024
a9a7a4a
updates
proletesseract Nov 1, 2024
30199f5
tests passing
proletesseract Nov 1, 2024
30293d2
Merge branch 'main' into DVR-196-update-identity-sampleapp
proletesseract Nov 1, 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
24 changes: 19 additions & 5 deletions examples/passport/identity-with-nextjs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,26 @@
## Passport Identity Sample App

This is an example of [Setup Passport Identity](https://docs.immutable.com/products/zkEVM/passport/setup).

This example app is designed to show you login/logout and identity functionality with Immutable passport.

## Getting Started

First, run the development server:
Install your dependencies:

```bash
yarn install
```

Copy over the `.env.example` file to `.env` and fill in the required environment variables.
```

## Required Environment Variables

- NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
- NEXT_PUBLIC_CLIENT_ID // replace with your client ID from Hub

Run the app locally

```bash
npm run dev
Expand All @@ -12,11 +30,7 @@ yarn dev
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Required Environment Variables

- NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
- NEXT_PUBLIC_CLIENT_ID // replace with your client ID from Hub
22 changes: 19 additions & 3 deletions examples/passport/identity-with-nextjs/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.mb-1 {
margin-bottom: 1rem;
}
8 changes: 7 additions & 1 deletion examples/passport/identity-with-nextjs/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { PassportProvider } from '@/context/passport';
import { ReactNode } from 'react';
import AppWrapper from './utils/wrapper';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });
Expand All @@ -19,7 +20,12 @@ export default function RootLayout({
return (
<html lang="en">
<body className={inter.className}>
<PassportProvider>{children}</PassportProvider>
<AppWrapper>
<PassportProvider>
{children}
</PassportProvider>
</AppWrapper>

</body>
</html>
);
Expand Down
46 changes: 46 additions & 0 deletions examples/passport/identity-with-nextjs/src/app/logged-in-user-with-nextjs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
'use client';

import { usePassport } from '@/context/passport';
import { Heading, Button, Link } from '@biom3/react';
import NextLink from 'next/link';

export default function PassportMethods() {
const {
getIdToken,
getAccessToken,
getLinkedAddresses,
getUserInfo,
} = usePassport();

return (
<div className="flex-container">
<Heading className="mb-1">Passport Methods</Heading>
<Button
className="mb-1"
size="medium"
onClick={getIdToken}>
Get ID Token
</Button>
<Button
className="mb-1"
size="medium"
onClick={getAccessToken}>
Get Access Token
</Button>
<Button
className="mb-1"
size="medium"
onClick={getLinkedAddresses}>
Get Linked Addresses
</Button>
<Button
className="mb-1"
size="medium"
onClick={getUserInfo}>
Get User Info
</Button>
<br />
<Link rc={<NextLink href="/" />}>Return to Examples</Link>
</div>
);
}
53 changes: 53 additions & 0 deletions examples/passport/identity-with-nextjs/src/app/login-with-nextjs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
'use client';

import { usePassport } from '@/context/passport';
import { Heading, Button, Link } from '@biom3/react';
import NextLink from 'next/link';

export default function LoginWithNextJS() {
const {
login,
logout,
logoutSilent,
loginWithoutWallet,
loginWithEthersjs,
} = usePassport();

return (
<div className="flex-container">
<Heading className="mb-1">Login with NextJS</Heading>
<Button
className="mb-1"
size="medium"
onClick={login}>
Login
</Button>
<Button
className="mb-1"
size="medium"
onClick={loginWithoutWallet}>
Login without Wallet
</Button>
<Button
className="mb-1"
size="medium"
onClick={loginWithEthersjs}>
Login with EthersJS
</Button>
<Button
className="mb-1"
size="medium"
onClick={logout}>
Logout
</Button>
<Button
className="mb-1"
size="medium"
onClick={logoutSilent}>
Logout in Silent Mode
</Button>
<br />
<Link rc={<NextLink href="/" />}>Return to Examples</Link>
</div>
);
}
96 changes: 16 additions & 80 deletions examples/passport/identity-with-nextjs/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,24 @@
'use client';

import { usePassport } from '@/context/passport';
import { Heading, Button } from '@biom3/react';
import NextLink from 'next/link';

export default function Home() {
const {
login,
logout,
logoutSilent,
loginWithoutWallet,
loginWithEthersjs,
getIdToken,
getAccessToken,
getLinkedAddresses,
getUserInfo,
} = usePassport();

return (
<div className="flex flex-col items-center justify-center min-h-screen p-8">
<h1 className="text-3xl font-bold mb-8">Passport Identity Examples</h1>
<div className="grid grid-cols-1 gap-4 text-center">
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={login}
type="button"
>
Login
</button>
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={loginWithoutWallet}
type="button"
>
Login Without Wallet
</button>
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={loginWithEthersjs}
type="button"
>
Login With EtherJS
</button>
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={logout}
type="button"
>
Logout in Redirect mode
</button>
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={logoutSilent}
type="button"
>
Logout in Silent mode
</button>
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={getIdToken}
type="button"
>
Get ID Token
</button>
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={getAccessToken}
type="button"
>
Get Access Token
</button>
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={getLinkedAddresses}
type="button"
>
Get Linked Addresses
</button>
<button
className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
onClick={getUserInfo}
type="button"
>
Get User Info
</button>
</div>
<div className="flex-container">
<Heading className="mb-1">Passport Identity Examples</Heading>
<Button
className="mb-1"
size="medium"
rc={<NextLink href="/login-with-nextjs" />}>
Login with NextJS
</Button>
<Button
className="mb-1"
size="medium"
rc={<NextLink href="/logged-in-user-with-nextjs" />}>
Passport Methods
</Button>
</div>
);
}
19 changes: 19 additions & 0 deletions examples/passport/identity-with-nextjs/src/app/utils/passport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { config, passport } from '@imtbl/sdk';

// create the Passport instance and export it so it can be used in the examples
export const passportInstance = new passport.Passport({
baseConfig: {
environment: config.Environment.SANDBOX,
publishableKey: process.env.NEXT_PUBLIC_PUBLISHABLE_KEY ?? '', // replace with your publishable API key from Hub
},
clientId: process.env.NEXT_PUBLIC_CLIENT_ID ?? 'CLIENT_ID', // replace with your client ID from Hub
redirectUri: 'http://localhost:3000/redirect', // replace with one of your redirect URIs from Hub
logoutRedirectUri: 'http://localhost:3000/logout', // replace with one of your logout URIs from Hub
audience: 'platform_api',
scope: 'openid offline_access email transact',
popupOverlayOptions: {
disableGenericPopupOverlay: false, // Set to true to disable the generic pop-up overlay
disableBlockedPopupOverlay: false, // Set to true to disable the blocked pop-up overlay
},
forceScwDeployBeforeMessageSignature: true,
});
18 changes: 18 additions & 0 deletions examples/passport/identity-with-nextjs/src/app/utils/wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use client';
import { BiomeCombinedProviders, Stack } from '@biom3/react';

export default function AppWrapper({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<div className="flex-container">
<BiomeCombinedProviders>
<Stack alignItems="center">
{ children }
</Stack>
</BiomeCombinedProviders>
</div>
);
}
27 changes: 27 additions & 0 deletions examples/passport/identity-with-nextjs/tests/base.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,32 @@ test.describe("home page", () => {
test("has title and heading", async ({ page }) => {
await expect(page).toHaveTitle("Passport Identity Examples");
await expect(page.getByRole("heading", { name: "Passport Identity Examples" })).toBeVisible();
await expect(page.getByRole("link", { name: "Login with NextJS" })).toBeVisible();
await expect(page.getByRole("link", { name: "Passport Methods" })).toBeVisible();
});
});

test.describe("Login with NextJS", () => {
test("has heading and correct buttons", async ({ page }) => {
await page.click("text=Login with NextJS");
await expect(page.getByRole("heading", { name: "Login with NextJS" })).toBeVisible();
await expect(page.getByRole("button", { name: "Login", exact: true })).toBeVisible();
await expect(page.getByRole("button", { name: "Login without Wallet" })).toBeVisible();
await expect(page.getByRole("button", { name: "Login with EthersJS" })).toBeVisible();
await expect(page.getByRole("button", { name: "Logout", exact: true })).toBeVisible();
await expect(page.getByRole("button", { name: "Logout in Silent Mode" })).toBeVisible();
await expect(page.getByRole("link", { name: "Return to Examples" })).toBeVisible();
});
});

test.describe("Passport Methods", () => {
test("has heading and correct buttons", async ({ page }) => {
await page.click("text=Passport Methods");
await expect(page.getByRole("heading", { name: "Passport Methods" })).toBeVisible();
await expect(page.getByRole("button", { name: "Get ID Token" })).toBeVisible();
await expect(page.getByRole("button", { name: "Get Access Token" })).toBeVisible();
await expect(page.getByRole("button", { name: "Get Linked Addresses" })).toBeVisible();
await expect(page.getByRole("button", { name: "Get User Info" })).toBeVisible();
await expect(page.getByRole("link", { name: "Return to Examples" })).toBeVisible();
});
});