bringid-sdk 0.0.14 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +213 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -194,3 +194,216 @@ This initializes `postMessage` communication.
|
|
|
194
194
|
- Browser only — not available in Node.js
|
|
195
195
|
- `sdk.markDialogReady()` must be triggered **after iframe load**
|
|
196
196
|
- Optimized for Chrome
|
|
197
|
+
|
|
198
|
+
# BringID Modal SDK 0.0.14 – Next.js Integration Guide
|
|
199
|
+
|
|
200
|
+
This guide explains how to integrate **bringid-sdk** into a **Next.js App Router** application, including modal setup and requesting proofs.
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
## Installation
|
|
205
|
+
|
|
206
|
+
Install the SDK using Yarn:
|
|
207
|
+
|
|
208
|
+
+++bash
|
|
209
|
+
yarn add bringid-sdk@^0.0.14
|
|
210
|
+
+++
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
## Requirements
|
|
215
|
+
|
|
216
|
+
- Next.js 13+ (App Router)
|
|
217
|
+
- React 18+
|
|
218
|
+
- Client-side wallet integration (e.g. Wagmi, Ethers)
|
|
219
|
+
- App Router enabled (`app/` directory)
|
|
220
|
+
|
|
221
|
+
---
|
|
222
|
+
|
|
223
|
+
## Overview
|
|
224
|
+
|
|
225
|
+
The BringID SDK works by:
|
|
226
|
+
|
|
227
|
+
1. Rendering a global verification modal
|
|
228
|
+
2. Exposing SDK methods (`openModal`, `requestProofs`)
|
|
229
|
+
3. Allowing interaction from client components
|
|
230
|
+
|
|
231
|
+
To use it correctly, you must:
|
|
232
|
+
|
|
233
|
+
- Create a **Modal Provider**
|
|
234
|
+
- Wrap it in your **Root Layout**
|
|
235
|
+
- Call SDK methods from **Client Components only**
|
|
236
|
+
|
|
237
|
+
---
|
|
238
|
+
|
|
239
|
+
## 1. Create Modal Provider
|
|
240
|
+
|
|
241
|
+
Create a client-side provider that renders the verification dialog once.
|
|
242
|
+
|
|
243
|
+
**`components/ModalProvider.tsx`**
|
|
244
|
+
|
|
245
|
+
```tsx
|
|
246
|
+
"use client";
|
|
247
|
+
|
|
248
|
+
import { VerificationsDialog } from "bringid-sdk";
|
|
249
|
+
import React from "react";
|
|
250
|
+
|
|
251
|
+
type Props = {
|
|
252
|
+
children: React.ReactNode;
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
export default function ModalProvider({ children }: Props) {
|
|
256
|
+
// Replace with actual wallet data (wagmi, ethers, etc.)
|
|
257
|
+
const address: string | null = null;
|
|
258
|
+
const signer: any = null;
|
|
259
|
+
|
|
260
|
+
return (
|
|
261
|
+
<>
|
|
262
|
+
<VerificationsDialog
|
|
263
|
+
address={address || undefined}
|
|
264
|
+
generateSignature={
|
|
265
|
+
signer
|
|
266
|
+
? async (value: string) => await signer.signMessage(value)
|
|
267
|
+
: undefined
|
|
268
|
+
}
|
|
269
|
+
/>
|
|
270
|
+
{children}
|
|
271
|
+
</>
|
|
272
|
+
);
|
|
273
|
+
}
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
### Notes
|
|
277
|
+
|
|
278
|
+
- This component **must** be a Client Component
|
|
279
|
+
- Render `VerificationsDialog` only once in the app
|
|
280
|
+
- `address` and `signer` should come from your wallet provider
|
|
281
|
+
|
|
282
|
+
---
|
|
283
|
+
|
|
284
|
+
## 2. Wrap Root Layout
|
|
285
|
+
|
|
286
|
+
Wrap your app with the modal provider in `RootLayout`.
|
|
287
|
+
|
|
288
|
+
**`app/layout.tsx`**
|
|
289
|
+
|
|
290
|
+
```tsx
|
|
291
|
+
import ModalProvider from "@/components/ModalProvider";
|
|
292
|
+
import styles from "./page.module.css";
|
|
293
|
+
|
|
294
|
+
export default function RootLayout({
|
|
295
|
+
children,
|
|
296
|
+
}: {
|
|
297
|
+
children: React.ReactNode;
|
|
298
|
+
}) {
|
|
299
|
+
return (
|
|
300
|
+
<html lang="en">
|
|
301
|
+
<head>
|
|
302
|
+
<meta
|
|
303
|
+
name="viewport"
|
|
304
|
+
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
|
|
305
|
+
/>
|
|
306
|
+
</head>
|
|
307
|
+
<body className={styles.page}>
|
|
308
|
+
<WagmiProvider>
|
|
309
|
+
<ModalProvider>{children}</ModalProvider>
|
|
310
|
+
</WagmiProvider>
|
|
311
|
+
</body>
|
|
312
|
+
</html>
|
|
313
|
+
);
|
|
314
|
+
}
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
## 3. Using SDK Methods
|
|
320
|
+
|
|
321
|
+
The SDK exposes the following client-side methods:
|
|
322
|
+
|
|
323
|
+
- `openModal()` – opens the verification modal
|
|
324
|
+
- `requestProofs(address, chainId)` – requests verification proofs
|
|
325
|
+
|
|
326
|
+
These methods must be called from **Client Components**.
|
|
327
|
+
|
|
328
|
+
---
|
|
329
|
+
|
|
330
|
+
## Example: Open Modal and Request Proofs
|
|
331
|
+
|
|
332
|
+
**`components/CreateID.tsx`**
|
|
333
|
+
|
|
334
|
+
```tsx
|
|
335
|
+
"use client";
|
|
336
|
+
|
|
337
|
+
import { FC, useState } from "react";
|
|
338
|
+
import { openModal, requestProofs } from "bringid-sdk";
|
|
339
|
+
|
|
340
|
+
type Props = {
|
|
341
|
+
setStage?: (stage: string) => void;
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
const CreateID: FC<Props> = ({ setStage }) => {
|
|
345
|
+
const [proofs, setProofs] = useState<any>(null);
|
|
346
|
+
|
|
347
|
+
return (
|
|
348
|
+
<div>
|
|
349
|
+
{proofs && (
|
|
350
|
+
<pre style={{ whiteSpace: "pre-wrap" }}>
|
|
351
|
+
{JSON.stringify(proofs, null, 2)}
|
|
352
|
+
</pre>
|
|
353
|
+
)}
|
|
354
|
+
|
|
355
|
+
<button
|
|
356
|
+
onClick={() => {
|
|
357
|
+
openModal();
|
|
358
|
+
}}
|
|
359
|
+
>
|
|
360
|
+
Open popup
|
|
361
|
+
</button>
|
|
362
|
+
|
|
363
|
+
<button
|
|
364
|
+
onClick={async () => {
|
|
365
|
+
const result = await requestProofs(
|
|
366
|
+
"0xA5e1149A4AE284cd2651F6672Dfb174c788984bC",
|
|
367
|
+
10
|
|
368
|
+
);
|
|
369
|
+
setProofs(result);
|
|
370
|
+
}}
|
|
371
|
+
>
|
|
372
|
+
Ask proofs
|
|
373
|
+
</button>
|
|
374
|
+
</div>
|
|
375
|
+
);
|
|
376
|
+
};
|
|
377
|
+
|
|
378
|
+
export default CreateID;
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
---
|
|
382
|
+
|
|
383
|
+
## Best Practices
|
|
384
|
+
|
|
385
|
+
- Always call SDK methods from Client Components
|
|
386
|
+
- Ensure wallet is connected before requesting proofs
|
|
387
|
+
- Avoid rendering the modal multiple times
|
|
388
|
+
- For large proof objects, consider collapsing or lazy rendering
|
|
389
|
+
|
|
390
|
+
---
|
|
391
|
+
|
|
392
|
+
## Troubleshooting
|
|
393
|
+
|
|
394
|
+
### Modal does not open
|
|
395
|
+
|
|
396
|
+
- Ensure `ModalProvider` is rendered in `layout.tsx`
|
|
397
|
+
- Ensure `'use client'` is present
|
|
398
|
+
|
|
399
|
+
### Proof request fails
|
|
400
|
+
|
|
401
|
+
- Wallet must be connected
|
|
402
|
+
- Address must match signer
|
|
403
|
+
- Chain ID must be supported
|
|
404
|
+
|
|
405
|
+
---
|
|
406
|
+
|
|
407
|
+
## License
|
|
408
|
+
|
|
409
|
+
Refer to the BringID SDK license and documentation for details.
|