chore: ID-2098 Improvements to RainbowKit + NextJS + Passport sample (#…

…1971)

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

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**

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',

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';