From ec2166fbed411d32f981aae9d8f537496c7d986e Mon Sep 17 00:00:00 2001
From: Mikhala <122326421+imx-mikhala@users.noreply.github.com>
Date: Mon, 15 Jul 2024 14:02:35 +0800
Subject: [PATCH] chore: ID-2098 Improvements to RainbowKit + NextJS + Passport
 sample (#1971)

---
 samples/apps/passport/next-rainbow-kit/.env.example |  2 ++
 samples/apps/passport/next-rainbow-kit/README.md    | 13 +++++++------
 .../passport/next-rainbow-kit/src/app/passport.ts   |  7 ++-----
 .../next-rainbow-kit/src/components/Connect.tsx     |  1 +
 4 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 samples/apps/passport/next-rainbow-kit/.env.example

diff --git a/samples/apps/passport/next-rainbow-kit/.env.example b/samples/apps/passport/next-rainbow-kit/.env.example
new file mode 100644
index 0000000000..fc98bbc16e
--- /dev/null
+++ b/samples/apps/passport/next-rainbow-kit/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PASSPORT_CLIENT_ID=PASSPORT_CLIENT_ID
+NEXT_PUBLIC_IMMUTABLE_PUBLISHABLE_KEY=IMMUTABLE_PUBLISHABLE_KEY
\ No newline at end of file
diff --git a/samples/apps/passport/next-rainbow-kit/README.md b/samples/apps/passport/next-rainbow-kit/README.md
index 00fe2f49b6..06f51b3a1e 100644
--- a/samples/apps/passport/next-rainbow-kit/README.md
+++ b/samples/apps/passport/next-rainbow-kit/README.md
@@ -16,13 +16,14 @@ Create a Passport application on Immutable Hub by following [these simple steps]
 
 **Step 2**
 
-Update `PUBLISHABLE_KEY` and `CLIENT_ID` in `src/app/passport.ts`
+Copy `.env.example` to `.env` and set the `NEXT_PUBLIC_PASSPORT_CLIENT_ID` and `NEXT_PUBLIC_IMMUTABLE_PUBLISHABLE_KEY`
 
-```typescript
-// Immutable Publishable Key (you will find it in the Immutable Hub in the `API Keys` section)
-const PUBLISHABLE_KEY = 'PUBLISHABLE_KEY';
-// Hub Publishable Key (you will find it in the `Passport` section)
-const CLIENT_ID = 'CLIENT_ID'; 
+```sh
+# Passport Client ID (you will find it in the Immutable Hub in the `Passport` section of your project)
+NEXT_PUBLIC_PASSPORT_CLIENT_ID=PASSPORT_CLIENT_ID
+
+# Immutable Publishable Key (you will find it in the Immutable Hub in the `API Keys` section of your project)
+NEXT_PUBLIC_IMMUTABLE_PUBLISHABLE_KEY=IMMUTABLE_PUBLISHABLE_KEY
 ```
 
 **Step 3**
diff --git a/samples/apps/passport/next-rainbow-kit/src/app/passport.ts b/samples/apps/passport/next-rainbow-kit/src/app/passport.ts
index ad701662cb..1427cc9caa 100644
--- a/samples/apps/passport/next-rainbow-kit/src/app/passport.ts
+++ b/samples/apps/passport/next-rainbow-kit/src/app/passport.ts
@@ -1,14 +1,11 @@
 import { config, passport } from '@imtbl/sdk';
 
-const PUBLISHABLE_KEY = 'PUBLISHABLE_KEY';
-const CLIENT_ID = 'CLIENT_ID';
-
 export const passportInstance = new passport.Passport({
   baseConfig: {
     environment: config.Environment.PRODUCTION,
-    publishableKey: PUBLISHABLE_KEY,
+    publishableKey: process.env.NEXT_PUBLIC_IMMUTABLE_PUBLISHABLE_KEY,
   },
-  clientId: CLIENT_ID,
+  clientId: process.env.NEXT_PUBLIC_PASSPORT_CLIENT_ID ?? '',
   redirectUri: 'http://localhost:3000/redirect',
   logoutRedirectUri: 'http://localhost:3000/logout',
   audience: 'platform_api',
diff --git a/samples/apps/passport/next-rainbow-kit/src/components/Connect.tsx b/samples/apps/passport/next-rainbow-kit/src/components/Connect.tsx
index 429f4dc224..eac920e743 100644
--- a/samples/apps/passport/next-rainbow-kit/src/components/Connect.tsx
+++ b/samples/apps/passport/next-rainbow-kit/src/components/Connect.tsx
@@ -1,3 +1,4 @@
+import '@rainbow-me/rainbowkit/styles.css';
 import { passportInstance } from '@/app/passport';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { useState } from 'react';