zopassport 0.1.0 → 0.1.2
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 +64 -37
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Zo Passport SDK
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
>
|
|
3
|
+
**A trans-dimensional reputation system**
|
|
4
|
+
|
|
5
|
+
> One line reputation to rule the world
|
|
6
|
+
|
|
7
|
+
**Flow:** Phone OTP → Avatar → Passport → Wallet
|
|
6
8
|
|
|
7
9
|
Complete authentication, onboarding, and passport experience for Zo World applications.
|
|
8
10
|
|
|
@@ -26,11 +28,9 @@ cp .env.example .env
|
|
|
26
28
|
npm install && npm run dev
|
|
27
29
|
```
|
|
28
30
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
🔑 Get your client key at: **[https://zo.xyz/developers](https://zo.xyz/developers)**
|
|
31
|
+
That's it! 🎉 Your full Zo Passport app is running at http://localhost:5173
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
🔑 **Repository:** https://github.com/ZoHouse/zopassport
|
|
34
34
|
|
|
35
35
|
---
|
|
36
36
|
|
|
@@ -38,10 +38,10 @@ npm install && npm run dev
|
|
|
38
38
|
|
|
39
39
|
After `npm install zopassport`, you get:
|
|
40
40
|
|
|
41
|
-
✅ **Complete Demo App** - Full working phone → passport → wallet flow
|
|
42
|
-
✅ **All Dependencies** - React, Vite, TypeScript pre-configured
|
|
43
|
-
✅ **All Assets** - Images, videos, icons bundled
|
|
44
|
-
✅ **Environment Template** - Just add your client key
|
|
41
|
+
- ✅ **Complete Demo App** - Full working phone → passport → wallet flow
|
|
42
|
+
- ✅ **All Dependencies** - React, Vite, TypeScript pre-configured
|
|
43
|
+
- ✅ **All Assets** - Images, videos, icons bundled
|
|
44
|
+
- ✅ **Environment Template** - Just add your client key
|
|
45
45
|
|
|
46
46
|
---
|
|
47
47
|
|
|
@@ -51,7 +51,7 @@ Want to integrate into your existing app? Use it as a library:
|
|
|
51
51
|
|
|
52
52
|
### 1. Initialize the SDK
|
|
53
53
|
|
|
54
|
-
```
|
|
54
|
+
```javascript
|
|
55
55
|
import { ZoPassportSDK } from 'zopassport';
|
|
56
56
|
|
|
57
57
|
const sdk = new ZoPassportSDK({
|
|
@@ -62,8 +62,14 @@ const sdk = new ZoPassportSDK({
|
|
|
62
62
|
|
|
63
63
|
### 2. React Integration
|
|
64
64
|
|
|
65
|
-
```
|
|
66
|
-
import {
|
|
65
|
+
```jsx
|
|
66
|
+
import {
|
|
67
|
+
ZoPassportProvider,
|
|
68
|
+
useZoPassport,
|
|
69
|
+
ZoLanding,
|
|
70
|
+
ZoOnboarding,
|
|
71
|
+
ZoPassportCard
|
|
72
|
+
} from 'zopassport/react';
|
|
67
73
|
|
|
68
74
|
function App() {
|
|
69
75
|
return (
|
|
@@ -101,6 +107,8 @@ function YourApp() {
|
|
|
101
107
|
}
|
|
102
108
|
```
|
|
103
109
|
|
|
110
|
+
---
|
|
111
|
+
|
|
104
112
|
## Features
|
|
105
113
|
|
|
106
114
|
### ✅ Authentication
|
|
@@ -123,12 +131,14 @@ function YourApp() {
|
|
|
123
131
|
- Location detection
|
|
124
132
|
- Avatar preview
|
|
125
133
|
|
|
134
|
+
---
|
|
135
|
+
|
|
126
136
|
## Components
|
|
127
137
|
|
|
128
138
|
### `<ZoLanding />`
|
|
129
139
|
Full-screen landing page with video background and auth modal.
|
|
130
140
|
|
|
131
|
-
```
|
|
141
|
+
```jsx
|
|
132
142
|
<ZoLanding
|
|
133
143
|
onAuthSuccess={(userId, user) => {}}
|
|
134
144
|
sendOTP={async (code, phone) => sdk.auth.sendOTP(code, phone)}
|
|
@@ -142,7 +152,7 @@ Full-screen landing page with video background and auth modal.
|
|
|
142
152
|
### `<ZoOnboarding />`
|
|
143
153
|
Complete onboarding flow component.
|
|
144
154
|
|
|
145
|
-
```
|
|
155
|
+
```jsx
|
|
146
156
|
<ZoOnboarding
|
|
147
157
|
onComplete={(data) => console.log(data)}
|
|
148
158
|
updateProfile={(updates) => sdk.updateProfile(updates)}
|
|
@@ -153,7 +163,7 @@ Complete onboarding flow component.
|
|
|
153
163
|
### `<ZoPassportCard />`
|
|
154
164
|
Passport card display component.
|
|
155
165
|
|
|
156
|
-
```
|
|
166
|
+
```jsx
|
|
157
167
|
<ZoPassportCard
|
|
158
168
|
profile={{
|
|
159
169
|
avatar: 'https://...',
|
|
@@ -167,7 +177,7 @@ Passport card display component.
|
|
|
167
177
|
### `<ZoAuth />`
|
|
168
178
|
Standalone phone OTP authentication component.
|
|
169
179
|
|
|
170
|
-
```
|
|
180
|
+
```jsx
|
|
171
181
|
<ZoAuth
|
|
172
182
|
onSuccess={(userId, user) => {}}
|
|
173
183
|
onClose={() => {}}
|
|
@@ -179,12 +189,14 @@ Standalone phone OTP authentication component.
|
|
|
179
189
|
### `<PhoneInput />` & `<OTPInput />`
|
|
180
190
|
Low-level input components for custom auth flows.
|
|
181
191
|
|
|
192
|
+
---
|
|
193
|
+
|
|
182
194
|
## Hooks
|
|
183
195
|
|
|
184
196
|
### `useZoPassport()`
|
|
185
197
|
Main hook for authentication state and operations.
|
|
186
198
|
|
|
187
|
-
```
|
|
199
|
+
```javascript
|
|
188
200
|
const {
|
|
189
201
|
sdk,
|
|
190
202
|
user,
|
|
@@ -200,7 +212,7 @@ const {
|
|
|
200
212
|
### `useProfile()`
|
|
201
213
|
Profile operations and completion tracking.
|
|
202
214
|
|
|
203
|
-
```
|
|
215
|
+
```javascript
|
|
204
216
|
const {
|
|
205
217
|
user,
|
|
206
218
|
completion,
|
|
@@ -213,7 +225,7 @@ const {
|
|
|
213
225
|
### `useAvatar()`
|
|
214
226
|
Avatar generation operations.
|
|
215
227
|
|
|
216
|
-
```
|
|
228
|
+
```javascript
|
|
217
229
|
const {
|
|
218
230
|
avatarUrl,
|
|
219
231
|
isGenerating,
|
|
@@ -221,6 +233,8 @@ const {
|
|
|
221
233
|
} = useAvatar();
|
|
222
234
|
```
|
|
223
235
|
|
|
236
|
+
---
|
|
237
|
+
|
|
224
238
|
## Assets Required
|
|
225
239
|
|
|
226
240
|
Include these assets in your `public/` folder:
|
|
@@ -255,22 +269,27 @@ public/
|
|
|
255
269
|
└── rank1.jpeg # Fallback avatar
|
|
256
270
|
```
|
|
257
271
|
|
|
272
|
+
---
|
|
273
|
+
|
|
258
274
|
## CDN Assets
|
|
259
275
|
|
|
260
276
|
The SDK uses these CDN URLs for passport backgrounds:
|
|
261
277
|
|
|
262
|
-
- **Founder Background
|
|
263
|
-
- **Citizen Background
|
|
278
|
+
- **Founder Background:** `https://proxy.cdn.zo.xyz/gallery/media/images/a1659b07-94f0-4490-9b3c-3366715d9717_20250515053726.png`
|
|
279
|
+
- **Citizen Background:** `https://proxy.cdn.zo.xyz/gallery/media/images/bda9da5a-eefe-411d-8d90-667c80024463_20250515053805.png`
|
|
264
280
|
|
|
265
281
|
You can override these via props.
|
|
266
282
|
|
|
283
|
+
---
|
|
284
|
+
|
|
267
285
|
## Storage Adapters
|
|
268
286
|
|
|
269
287
|
### Web (Default)
|
|
270
288
|
Uses `localStorage` automatically.
|
|
271
289
|
|
|
272
290
|
### React Native
|
|
273
|
-
|
|
291
|
+
|
|
292
|
+
```javascript
|
|
274
293
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
275
294
|
import { ZoPassportSDK, AsyncStorageAdapter } from 'zopassport';
|
|
276
295
|
|
|
@@ -281,7 +300,8 @@ const sdk = new ZoPassportSDK({
|
|
|
281
300
|
```
|
|
282
301
|
|
|
283
302
|
### Server-Side / Testing
|
|
284
|
-
|
|
303
|
+
|
|
304
|
+
```javascript
|
|
285
305
|
import { ZoPassportSDK, MemoryStorageAdapter } from 'zopassport';
|
|
286
306
|
|
|
287
307
|
const sdk = new ZoPassportSDK({
|
|
@@ -290,6 +310,8 @@ const sdk = new ZoPassportSDK({
|
|
|
290
310
|
});
|
|
291
311
|
```
|
|
292
312
|
|
|
313
|
+
---
|
|
314
|
+
|
|
293
315
|
## TypeScript
|
|
294
316
|
|
|
295
317
|
Full TypeScript support with exported types:
|
|
@@ -303,9 +325,7 @@ import type {
|
|
|
303
325
|
} from 'zopassport';
|
|
304
326
|
```
|
|
305
327
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
MIT © Zo World Team
|
|
328
|
+
---
|
|
309
329
|
|
|
310
330
|
## Wallet Integration
|
|
311
331
|
|
|
@@ -313,7 +333,7 @@ The SDK includes a built-in wallet system for managing Zo World assets.
|
|
|
313
333
|
|
|
314
334
|
### Framework-Agnostic Usage
|
|
315
335
|
|
|
316
|
-
```
|
|
336
|
+
```javascript
|
|
317
337
|
// Get wallet balance
|
|
318
338
|
const balance = await sdk.wallet.getBalance();
|
|
319
339
|
console.log('Balance:', balance.total_amount);
|
|
@@ -327,24 +347,24 @@ console.log('Transactions:', transactions);
|
|
|
327
347
|
|
|
328
348
|
The SDK provides ready-to-use wallet components:
|
|
329
349
|
|
|
330
|
-
```
|
|
350
|
+
```jsx
|
|
331
351
|
import { WalletScreen, WalletCard } from 'zopassport/react';
|
|
332
352
|
|
|
333
353
|
// Full wallet screen
|
|
334
354
|
<WalletScreen onBack={() => console.log('Back')} />
|
|
335
355
|
|
|
336
356
|
// Wallet card widget
|
|
337
|
-
<WalletCard
|
|
338
|
-
balance={100}
|
|
339
|
-
user={user}
|
|
340
|
-
isOpen={isOpen}
|
|
341
|
-
onToggle={() => setIsOpen(!isOpen)}
|
|
357
|
+
<WalletCard
|
|
358
|
+
balance={100}
|
|
359
|
+
user={user}
|
|
360
|
+
isOpen={isOpen}
|
|
361
|
+
onToggle={() => setIsOpen(!isOpen)}
|
|
342
362
|
/>
|
|
343
363
|
```
|
|
344
364
|
|
|
345
365
|
### React Hooks
|
|
346
366
|
|
|
347
|
-
```
|
|
367
|
+
```jsx
|
|
348
368
|
import { useWalletBalance, useTransactions } from 'zopassport/react';
|
|
349
369
|
|
|
350
370
|
const MyWallet = () => {
|
|
@@ -355,6 +375,8 @@ const MyWallet = () => {
|
|
|
355
375
|
};
|
|
356
376
|
```
|
|
357
377
|
|
|
378
|
+
---
|
|
379
|
+
|
|
358
380
|
## Universal UI Support (Web + Mobile)
|
|
359
381
|
|
|
360
382
|
The SDK's UI components are built with React Native but can run on the web using `react-native-web`.
|
|
@@ -405,3 +427,8 @@ module.exports = withTM({
|
|
|
405
427
|
});
|
|
406
428
|
```
|
|
407
429
|
|
|
430
|
+
---
|
|
431
|
+
|
|
432
|
+
## License
|
|
433
|
+
|
|
434
|
+
MIT © Zo World Team
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zopassport",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Zo Passport SDK - Phone to Avatar to Passport. Complete authentication and onboarding flow for Zo World.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
],
|
|
48
48
|
"repository": {
|
|
49
49
|
"type": "git",
|
|
50
|
-
"url": "https://github.com/
|
|
50
|
+
"url": "https://github.com/ZoHouse/zopassport.git"
|
|
51
51
|
},
|
|
52
52
|
"homepage": "https://zo.xyz",
|
|
53
53
|
"bugs": {
|