@oobit/react-native-sdk 2.0.2 → 3.0.1
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 +19 -341
- package/dist/WidgetSDK.d.ts +0 -2
- package/dist/WidgetSDK.d.ts.map +1 -1
- package/dist/WidgetSDK.js +25 -127
- package/dist/WidgetSDK.js.map +1 -1
- package/dist/index.d.ts +1 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -3
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +41 -148
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +3 -33
- package/dist/types.js.map +1 -1
- package/dist/walletUtils.d.ts.map +1 -1
- package/dist/walletUtils.js +16 -64
- package/dist/walletUtils.js.map +1 -1
- package/package.json +1 -10
- package/src/WidgetSDK.tsx +26 -153
- package/src/index.ts +7 -9
- package/src/types.ts +42 -207
- package/src/walletUtils.ts +27 -42
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @oobit/react-native-sdk
|
|
2
2
|
|
|
3
|
-
A React Native SDK that enables wallet apps to integrate Oobit's crypto payment services.
|
|
3
|
+
A React Native SDK that enables wallet apps to integrate Oobit's crypto-to-card payment services.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@oobit/react-native-sdk)
|
|
6
6
|
[](https://github.com/oobit-tech/react-native-SDK/blob/main/LICENSE)
|
|
@@ -8,361 +8,39 @@ A React Native SDK that enables wallet apps to integrate Oobit's crypto payment
|
|
|
8
8
|
## Installation
|
|
9
9
|
|
|
10
10
|
```bash
|
|
11
|
-
npm install @oobit/react-native-sdk
|
|
12
|
-
# or
|
|
13
|
-
yarn add @oobit/react-native-sdk
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
### Peer Dependencies
|
|
17
|
-
|
|
18
|
-
Make sure you have these installed:
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm install react-native-webview expo-linking expo-clipboard expo-intent-launcher expo-local-authentication
|
|
22
|
-
# or
|
|
23
|
-
yarn add react-native-webview expo-linking expo-clipboard expo-intent-launcher expo-local-authentication
|
|
11
|
+
npm install @oobit/react-native-sdk react-native-webview
|
|
24
12
|
```
|
|
25
13
|
|
|
26
14
|
## Quick Start
|
|
27
15
|
|
|
28
|
-
```
|
|
29
|
-
import { WidgetSDK } from
|
|
30
|
-
import { View, Alert } from 'react-native';
|
|
31
|
-
|
|
32
|
-
function MyApp() {
|
|
33
|
-
return (
|
|
34
|
-
<View style={{ flex: 1 }}>
|
|
35
|
-
<WidgetSDK
|
|
36
|
-
accessToken="your-jwt-token-from-backend"
|
|
37
|
-
userWalletAddress="0x1234...abcd"
|
|
38
|
-
environment="production"
|
|
39
|
-
onReady={() => {
|
|
40
|
-
console.log('Widget loaded successfully');
|
|
41
|
-
}}
|
|
42
|
-
onError={(code, message) => {
|
|
43
|
-
Alert.alert('Error', message);
|
|
44
|
-
}}
|
|
45
|
-
onClose={() => {
|
|
46
|
-
console.log('User closed the widget');
|
|
47
|
-
}}
|
|
48
|
-
onTransactionRequested={(token, amount, address, tag) => {
|
|
49
|
-
console.log(`Send ${amount} ${token.symbol} to ${address}`);
|
|
50
|
-
}}
|
|
51
|
-
/>
|
|
52
|
-
</View>
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Props
|
|
58
|
-
|
|
59
|
-
### Required Props
|
|
60
|
-
|
|
61
|
-
#### `accessToken: string`
|
|
62
|
-
JWT access token from your backend for authentication.
|
|
63
|
-
|
|
64
|
-
```typescript
|
|
65
|
-
<WidgetSDK accessToken="eyJhbGciOiJIUzI1NiIs..." />
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
#### `userWalletAddress: string`
|
|
69
|
-
The user's external wallet address for crypto deposits.
|
|
70
|
-
|
|
71
|
-
```typescript
|
|
72
|
-
<WidgetSDK userWalletAddress="0x1234567890abcdef..." />
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
### Optional Props
|
|
76
|
-
|
|
77
|
-
#### `environment?: 'development' | 'production'`
|
|
78
|
-
The environment to use. Defaults to `'production'`.
|
|
79
|
-
|
|
80
|
-
```typescript
|
|
81
|
-
<WidgetSDK environment="development" />
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
#### `debug?: boolean`
|
|
85
|
-
Enable debug logging to console. Defaults to `false`.
|
|
86
|
-
|
|
87
|
-
```typescript
|
|
88
|
-
<WidgetSDK debug={true} />
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
#### `loadingIndicatorColor?: string`
|
|
92
|
-
Custom color for the loading indicator. Defaults to `'#007AFF'`.
|
|
93
|
-
|
|
94
|
-
```typescript
|
|
95
|
-
<WidgetSDK loadingIndicatorColor="#6200EE" />
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
### Callback Props
|
|
99
|
-
|
|
100
|
-
#### `onReady?: () => void`
|
|
101
|
-
Called when the widget has finished loading and is ready for interaction.
|
|
102
|
-
|
|
103
|
-
```typescript
|
|
104
|
-
<WidgetSDK
|
|
105
|
-
onReady={() => {
|
|
106
|
-
console.log('Widget is ready!');
|
|
107
|
-
setIsLoading(false);
|
|
108
|
-
}}
|
|
109
|
-
/>
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
#### `onError?: (code: SDKErrorCode | string, message: string) => void`
|
|
113
|
-
Called when an error occurs in the widget.
|
|
114
|
-
|
|
115
|
-
**Error Codes:**
|
|
116
|
-
- `TOKEN_EXPIRED` - The access token has expired
|
|
117
|
-
- `PARSE_ERROR` - Failed to parse a message from the widget
|
|
118
|
-
- `WEBVIEW_ERROR` - The WebView failed to load
|
|
119
|
-
|
|
120
|
-
```typescript
|
|
121
|
-
<WidgetSDK
|
|
122
|
-
onError={(code, message) => {
|
|
123
|
-
console.error(`Widget error [${code}]: ${message}`);
|
|
124
|
-
|
|
125
|
-
if (code === 'TOKEN_EXPIRED') {
|
|
126
|
-
// Refresh token and reload
|
|
127
|
-
refreshAuth();
|
|
128
|
-
}
|
|
129
|
-
}}
|
|
130
|
-
/>
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
#### `onClose?: () => void`
|
|
134
|
-
Called when the user requests to close the widget.
|
|
135
|
-
|
|
136
|
-
```typescript
|
|
137
|
-
<WidgetSDK
|
|
138
|
-
onClose={() => {
|
|
139
|
-
navigation.goBack();
|
|
140
|
-
}}
|
|
141
|
-
/>
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
#### `onTransactionRequested?: (token, cryptoAmount, depositAddress, depositAddressTag) => void`
|
|
145
|
-
Called when a crypto transaction is requested.
|
|
146
|
-
|
|
147
|
-
```typescript
|
|
148
|
-
<WidgetSDK
|
|
149
|
-
onTransactionRequested={(token, cryptoAmount, depositAddress, depositAddressTag) => {
|
|
150
|
-
console.log(`Send ${cryptoAmount} ${token.symbol} to ${depositAddress}`);
|
|
151
|
-
// Navigate to your send crypto screen
|
|
152
|
-
navigation.navigate('SendCrypto', {
|
|
153
|
-
token,
|
|
154
|
-
amount: cryptoAmount,
|
|
155
|
-
address: depositAddress,
|
|
156
|
-
tag: depositAddressTag,
|
|
157
|
-
});
|
|
158
|
-
}}
|
|
159
|
-
/>
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
#### `onLoadingChange?: (isLoading: boolean) => void`
|
|
163
|
-
Called when the loading state changes.
|
|
164
|
-
|
|
165
|
-
```typescript
|
|
166
|
-
<WidgetSDK
|
|
167
|
-
onLoadingChange={(isLoading) => {
|
|
168
|
-
setShowCustomLoader(isLoading);
|
|
169
|
-
}}
|
|
170
|
-
/>
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
## Ref Methods
|
|
174
|
-
|
|
175
|
-
You can control the widget programmatically using a ref:
|
|
176
|
-
|
|
177
|
-
```typescript
|
|
178
|
-
import { useRef } from 'react';
|
|
179
|
-
import { WidgetSDK, WidgetSDKRef } from '@oobit/react-native-sdk';
|
|
180
|
-
|
|
181
|
-
function MyScreen() {
|
|
182
|
-
const widgetRef = useRef<WidgetSDKRef>(null);
|
|
183
|
-
|
|
184
|
-
const handleBackPress = () => {
|
|
185
|
-
widgetRef.current?.navigateBack();
|
|
186
|
-
};
|
|
187
|
-
|
|
188
|
-
const handleRetry = () => {
|
|
189
|
-
widgetRef.current?.reload();
|
|
190
|
-
};
|
|
16
|
+
```tsx
|
|
17
|
+
import { WidgetSDK } from "@oobit/react-native-sdk";
|
|
191
18
|
|
|
19
|
+
function PaymentScreen() {
|
|
192
20
|
return (
|
|
193
21
|
<WidgetSDK
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
22
|
+
accessToken="prod_your-jwt-token"
|
|
23
|
+
userWalletAddress="0x1234..."
|
|
24
|
+
onTransactionRequested={(transaction) => {
|
|
25
|
+
// Navigate to your transaction confirmation screen
|
|
26
|
+
navigation.navigate("ConfirmTransaction", { transaction });
|
|
27
|
+
}}
|
|
28
|
+
onClose={() => navigation.goBack()}
|
|
197
29
|
/>
|
|
198
30
|
);
|
|
199
31
|
}
|
|
200
32
|
```
|
|
201
33
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
| Method | Description |
|
|
205
|
-
|--------|-------------|
|
|
206
|
-
| `navigateBack()` | Navigate back within the widget |
|
|
207
|
-
| `reload()` | Reload the widget |
|
|
208
|
-
|
|
209
|
-
## TypeScript Support
|
|
210
|
-
|
|
211
|
-
The SDK is fully typed. Import types as needed:
|
|
212
|
-
|
|
213
|
-
```typescript
|
|
214
|
-
import type {
|
|
215
|
-
WidgetSDKConfig,
|
|
216
|
-
WidgetSDKRef,
|
|
217
|
-
SDKErrorCode,
|
|
218
|
-
DepositToken,
|
|
219
|
-
} from '@oobit/react-native-sdk';
|
|
220
|
-
```
|
|
221
|
-
|
|
222
|
-
### Message Type Constants
|
|
223
|
-
|
|
224
|
-
For advanced use cases where you need to handle messages directly:
|
|
225
|
-
|
|
226
|
-
```typescript
|
|
227
|
-
import { MessageTypes } from '@oobit/react-native-sdk';
|
|
228
|
-
|
|
229
|
-
// Use constants instead of strings
|
|
230
|
-
if (message.type === MessageTypes.ERROR) {
|
|
231
|
-
// Handle error
|
|
232
|
-
}
|
|
233
|
-
```
|
|
234
|
-
|
|
235
|
-
## Native Wallet Integration
|
|
236
|
-
|
|
237
|
-
The SDK automatically handles adding cards to Apple Wallet (iOS) and Google Pay (Android).
|
|
238
|
-
|
|
239
|
-
You can also manually open the wallet from your React Native app:
|
|
240
|
-
|
|
241
|
-
```typescript
|
|
242
|
-
import { openNativeWallet, isWalletAvailable } from '@oobit/react-native-sdk';
|
|
243
|
-
|
|
244
|
-
// Check if wallet is available
|
|
245
|
-
const available = await isWalletAvailable();
|
|
246
|
-
|
|
247
|
-
if (available) {
|
|
248
|
-
// Open native wallet
|
|
249
|
-
await openNativeWallet();
|
|
250
|
-
}
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
## Platform Support
|
|
254
|
-
|
|
255
|
-
| Platform | Supported | Notes |
|
|
256
|
-
|----------|-----------|-------|
|
|
257
|
-
| iOS | ✅ | Includes Apple Wallet integration |
|
|
258
|
-
| Android | ✅ | Includes Google Pay integration |
|
|
259
|
-
| Web | ❌ | React Native only |
|
|
260
|
-
|
|
261
|
-
## Complete Example
|
|
262
|
-
|
|
263
|
-
```typescript
|
|
264
|
-
import React, { useState, useRef } from 'react';
|
|
265
|
-
import { View, Button, StyleSheet, Alert } from 'react-native';
|
|
266
|
-
import { WidgetSDK, WidgetSDKRef } from '@oobit/react-native-sdk';
|
|
267
|
-
|
|
268
|
-
export default function PaymentScreen() {
|
|
269
|
-
const [showWidget, setShowWidget] = useState(false);
|
|
270
|
-
const widgetRef = useRef<WidgetSDKRef>(null);
|
|
271
|
-
|
|
272
|
-
if (showWidget) {
|
|
273
|
-
return (
|
|
274
|
-
<View style={styles.container}>
|
|
275
|
-
<WidgetSDK
|
|
276
|
-
ref={widgetRef}
|
|
277
|
-
accessToken="your-jwt-token"
|
|
278
|
-
userWalletAddress="0x1234..."
|
|
279
|
-
environment="production"
|
|
280
|
-
debug={__DEV__}
|
|
281
|
-
onReady={() => {
|
|
282
|
-
console.log('Widget ready');
|
|
283
|
-
}}
|
|
284
|
-
onError={(code, message) => {
|
|
285
|
-
Alert.alert('Error', `${code}: ${message}`);
|
|
286
|
-
if (code === 'WEBVIEW_ERROR') {
|
|
287
|
-
// Offer retry option
|
|
288
|
-
Alert.alert('Error', 'Failed to load. Retry?', [
|
|
289
|
-
{ text: 'Cancel', onPress: () => setShowWidget(false) },
|
|
290
|
-
{ text: 'Retry', onPress: () => widgetRef.current?.reload() },
|
|
291
|
-
]);
|
|
292
|
-
}
|
|
293
|
-
}}
|
|
294
|
-
onClose={() => {
|
|
295
|
-
setShowWidget(false);
|
|
296
|
-
}}
|
|
297
|
-
onTransactionRequested={(token, amount, address, tag) => {
|
|
298
|
-
Alert.alert(
|
|
299
|
-
'Transaction Requested',
|
|
300
|
-
`Send ${amount} ${token.symbol} to ${address}`,
|
|
301
|
-
);
|
|
302
|
-
}}
|
|
303
|
-
onLoadingChange={(isLoading) => {
|
|
304
|
-
console.log('Loading:', isLoading);
|
|
305
|
-
}}
|
|
306
|
-
/>
|
|
307
|
-
</View>
|
|
308
|
-
);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
return (
|
|
312
|
-
<View style={styles.container}>
|
|
313
|
-
<Button
|
|
314
|
-
title="Open Payment Widget"
|
|
315
|
-
onPress={() => setShowWidget(true)}
|
|
316
|
-
/>
|
|
317
|
-
</View>
|
|
318
|
-
);
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
const styles = StyleSheet.create({
|
|
322
|
-
container: {
|
|
323
|
-
flex: 1,
|
|
324
|
-
},
|
|
325
|
-
});
|
|
326
|
-
```
|
|
327
|
-
|
|
328
|
-
## Dependencies
|
|
329
|
-
|
|
330
|
-
### Required Peer Dependencies
|
|
331
|
-
|
|
332
|
-
```json
|
|
333
|
-
{
|
|
334
|
-
"react": ">=18.0.0",
|
|
335
|
-
"react-native": ">=0.70.0",
|
|
336
|
-
"react-native-webview": ">=13.0.0",
|
|
337
|
-
"expo-linking": ">=6.0.0",
|
|
338
|
-
"expo-clipboard": ">=5.0.0",
|
|
339
|
-
"expo-intent-launcher": ">=6.0.0",
|
|
340
|
-
"expo-local-authentication": ">=14.0.0"
|
|
341
|
-
}
|
|
342
|
-
```
|
|
343
|
-
|
|
344
|
-
## Troubleshooting
|
|
345
|
-
|
|
346
|
-
### Widget Not Loading
|
|
347
|
-
|
|
348
|
-
1. Verify `accessToken` is valid and not expired
|
|
349
|
-
2. Check that `userWalletAddress` is a valid address
|
|
350
|
-
3. Enable `debug={true}` to see console logs
|
|
351
|
-
4. Verify all peer dependencies are installed
|
|
352
|
-
|
|
353
|
-
### Callbacks Not Firing
|
|
354
|
-
|
|
355
|
-
1. Enable debug mode to see message logs
|
|
356
|
-
2. Check that your widget is sending proper postMessage events
|
|
357
|
-
3. Verify message format matches expected structure
|
|
358
|
-
|
|
359
|
-
### Error: TOKEN_EXPIRED
|
|
34
|
+
## Documentation
|
|
360
35
|
|
|
361
|
-
|
|
36
|
+
For complete documentation, guides, and API reference, visit:
|
|
362
37
|
|
|
363
|
-
|
|
38
|
+
**[Oobit Developer Docs](https://docs.oobit.com/docs/getting-started)**
|
|
364
39
|
|
|
365
|
-
|
|
40
|
+
- [Getting Started](https://docs.oobit.com/docs/getting-started) - Installation and setup
|
|
41
|
+
- [Component Reference](https://docs.oobit.com/docs/component) - Props and methods
|
|
42
|
+
- [Handling Transactions](https://docs.oobit.com/docs/transactions) - Transaction flow guide
|
|
43
|
+
- [TypeScript Types](https://docs.oobit.com/docs/types) - Type definitions
|
|
366
44
|
|
|
367
45
|
## License
|
|
368
46
|
|
package/dist/WidgetSDK.d.ts
CHANGED
|
@@ -5,9 +5,7 @@
|
|
|
5
5
|
import React from "react";
|
|
6
6
|
import { WidgetSDKConfig } from "./types";
|
|
7
7
|
export interface WidgetSDKRef {
|
|
8
|
-
/** Navigate back within the widget */
|
|
9
8
|
navigateBack: () => void;
|
|
10
|
-
/** Reload the widget */
|
|
11
9
|
reload: () => void;
|
|
12
10
|
}
|
|
13
11
|
export declare const WidgetSDK: React.ForwardRefExoticComponent<WidgetSDKConfig & React.RefAttributes<WidgetSDKRef>>;
|
package/dist/WidgetSDK.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WidgetSDK.d.ts","sourceRoot":"","sources":["../src/WidgetSDK.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAWf,OAAO,
|
|
1
|
+
{"version":3,"file":"WidgetSDK.d.ts","sourceRoot":"","sources":["../src/WidgetSDK.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAWf,OAAO,EAAiB,eAAe,EAAE,MAAM,SAAS,CAAC;AAGzD,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,sFA6HrB,CAAC"}
|
package/dist/WidgetSDK.js
CHANGED
|
@@ -43,153 +43,68 @@ const react_native_1 = require("react-native");
|
|
|
43
43
|
const react_native_webview_1 = require("react-native-webview");
|
|
44
44
|
const config_1 = require("./config");
|
|
45
45
|
const walletUtils_1 = require("./walletUtils");
|
|
46
|
-
|
|
47
|
-
exports.WidgetSDK = (0, react_1.forwardRef)(({ accessToken, userWalletAddress, onError, onClose, onTransactionRequested, }, ref) => {
|
|
46
|
+
exports.WidgetSDK = (0, react_1.forwardRef)(({ accessToken, userWalletAddress, onClose, onTransactionRequested }, ref) => {
|
|
48
47
|
const webViewRef = (0, react_1.useRef)(null);
|
|
49
48
|
const [walletAvailable, setWalletAvailable] = (0, react_1.useState)(false);
|
|
50
49
|
const [isLoading, setIsLoading] = (0, react_1.useState)(true);
|
|
51
50
|
const hasLoadedOnce = (0, react_1.useRef)(false);
|
|
52
|
-
// Check wallet availability on mount
|
|
53
51
|
(0, react_1.useEffect)(() => {
|
|
54
|
-
|
|
52
|
+
(0, walletUtils_1.isWalletAvailable)().then(setWalletAvailable);
|
|
55
53
|
}, []);
|
|
56
|
-
// Handle Android hardware back button
|
|
57
54
|
(0, react_1.useEffect)(() => {
|
|
58
55
|
const backHandler = react_native_1.BackHandler.addEventListener("hardwareBackPress", () => {
|
|
59
|
-
|
|
60
|
-
sendMessageToWidget({
|
|
61
|
-
type: "native:back-pressed",
|
|
62
|
-
timestamp: Date.now(),
|
|
63
|
-
});
|
|
64
|
-
// Return true to prevent default back behavior
|
|
56
|
+
sendMessageToWidget({ type: "native:back-pressed" });
|
|
65
57
|
return true;
|
|
66
58
|
});
|
|
67
59
|
return () => backHandler.remove();
|
|
68
60
|
}, []);
|
|
69
|
-
// Expose methods via ref
|
|
70
61
|
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
71
|
-
navigateBack: () => {
|
|
72
|
-
sendMessageToWidget({
|
|
73
|
-
type: "native:navigate-back",
|
|
74
|
-
timestamp: Date.now(),
|
|
75
|
-
});
|
|
76
|
-
},
|
|
62
|
+
navigateBack: () => sendMessageToWidget({ type: "native:navigate-back" }),
|
|
77
63
|
reload: () => {
|
|
78
64
|
setIsLoading(true);
|
|
79
65
|
hasLoadedOnce.current = false;
|
|
80
66
|
webViewRef.current?.reload();
|
|
81
67
|
},
|
|
82
68
|
}));
|
|
83
|
-
const checkWalletAvailability = async () => {
|
|
84
|
-
const available = await (0, walletUtils_1.isWalletAvailable)();
|
|
85
|
-
setWalletAvailable(available);
|
|
86
|
-
};
|
|
87
|
-
/**
|
|
88
|
-
* Handle messages from the web widget
|
|
89
|
-
*/
|
|
90
69
|
const handleMessage = (event) => {
|
|
91
70
|
try {
|
|
92
71
|
const message = JSON.parse(event.nativeEvent.data);
|
|
93
72
|
switch (message.type) {
|
|
94
73
|
case "widget:ready":
|
|
95
|
-
|
|
74
|
+
sendMessageToWidget({
|
|
75
|
+
type: "native:platform-info",
|
|
76
|
+
payload: { platform: react_native_1.Platform.OS, walletAvailable },
|
|
77
|
+
});
|
|
96
78
|
break;
|
|
97
79
|
case "widget:open-wallet":
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
80
|
+
(0, walletUtils_1.openNativeWallet)().then((success) => {
|
|
81
|
+
sendMessageToWidget({
|
|
82
|
+
type: "native:wallet-opened",
|
|
83
|
+
payload: { success },
|
|
84
|
+
});
|
|
85
|
+
});
|
|
102
86
|
break;
|
|
103
87
|
case "widget:close":
|
|
104
88
|
onClose?.();
|
|
105
89
|
break;
|
|
106
90
|
case "widget:transaction-requested":
|
|
107
|
-
|
|
108
|
-
break;
|
|
109
|
-
case "widget:token-expired":
|
|
110
|
-
onError?.("TOKEN_EXPIRED", "Access token has expired");
|
|
111
|
-
break;
|
|
112
|
-
case "widget:copy-to-clipboard":
|
|
113
|
-
handleCopyToClipboard(message);
|
|
91
|
+
onTransactionRequested(message.payload);
|
|
114
92
|
break;
|
|
115
93
|
}
|
|
116
94
|
}
|
|
117
95
|
catch {
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
const handleReady = () => {
|
|
122
|
-
// Send platform info to widget
|
|
123
|
-
sendMessageToWidget({
|
|
124
|
-
type: "native:platform-info",
|
|
125
|
-
payload: {
|
|
126
|
-
platform: react_native_1.Platform.OS,
|
|
127
|
-
walletAvailable,
|
|
128
|
-
},
|
|
129
|
-
});
|
|
130
|
-
};
|
|
131
|
-
const handleOpenWallet = async () => {
|
|
132
|
-
const success = await (0, walletUtils_1.openNativeWallet)();
|
|
133
|
-
// Notify widget of result
|
|
134
|
-
sendMessageToWidget({
|
|
135
|
-
type: "native:wallet-opened",
|
|
136
|
-
payload: { success },
|
|
137
|
-
});
|
|
138
|
-
};
|
|
139
|
-
const handleError = (message) => {
|
|
140
|
-
if (message.type !== "widget:error")
|
|
141
|
-
return;
|
|
142
|
-
const { code, message: errorMessage } = message.payload;
|
|
143
|
-
onError?.(code, errorMessage);
|
|
144
|
-
};
|
|
145
|
-
const handleTransactionRequested = (message) => {
|
|
146
|
-
if (message.type !== "widget:transaction-requested")
|
|
147
|
-
return;
|
|
148
|
-
const { token, cryptoAmount, depositAddress, depositAddressTag } = message.payload;
|
|
149
|
-
onTransactionRequested(token, cryptoAmount, depositAddress, depositAddressTag);
|
|
150
|
-
};
|
|
151
|
-
/**
|
|
152
|
-
* Handle clipboard copy request from widget
|
|
153
|
-
*/
|
|
154
|
-
const handleCopyToClipboard = async (message) => {
|
|
155
|
-
const { text, label } = message.payload;
|
|
156
|
-
try {
|
|
157
|
-
await Clipboard.setStringAsync(text);
|
|
158
|
-
sendMessageToWidget({
|
|
159
|
-
type: "native:clipboard-result",
|
|
160
|
-
payload: { success: true, label },
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
catch {
|
|
164
|
-
sendMessageToWidget({
|
|
165
|
-
type: "native:clipboard-result",
|
|
166
|
-
payload: {
|
|
167
|
-
success: false,
|
|
168
|
-
label,
|
|
169
|
-
error: "Clipboard operation failed",
|
|
170
|
-
},
|
|
171
|
-
});
|
|
96
|
+
// Ignore parse errors
|
|
172
97
|
}
|
|
173
98
|
};
|
|
174
|
-
/**
|
|
175
|
-
* Send message to the web widget
|
|
176
|
-
*/
|
|
177
99
|
const sendMessageToWidget = (message) => {
|
|
178
|
-
|
|
179
|
-
window.postMessage(${JSON.stringify(message)}, '*');
|
|
180
|
-
true;
|
|
181
|
-
`;
|
|
182
|
-
webViewRef.current?.injectJavaScript(js);
|
|
100
|
+
webViewRef.current?.injectJavaScript(`window.postMessage(${JSON.stringify(message)}, '*'); true;`);
|
|
183
101
|
};
|
|
184
|
-
/**
|
|
185
|
-
* Build the widget URL with query parameters
|
|
186
|
-
*/
|
|
187
102
|
const finalWidgetUrl = (0, react_1.useMemo)(() => {
|
|
188
103
|
const baseUrl = (0, config_1.getWidgetUrl)(accessToken);
|
|
189
104
|
const params = new URLSearchParams({
|
|
190
105
|
token: (0, config_1.stripTokenPrefix)(accessToken),
|
|
191
106
|
platform: react_native_1.Platform.OS,
|
|
192
|
-
userWalletAddress
|
|
107
|
+
userWalletAddress,
|
|
193
108
|
});
|
|
194
109
|
return `${baseUrl}?${params.toString()}`;
|
|
195
110
|
}, [accessToken, userWalletAddress]);
|
|
@@ -199,42 +114,25 @@ exports.WidgetSDK = (0, react_1.forwardRef)(({ accessToken, userWalletAddress, o
|
|
|
199
114
|
hasLoadedOnce.current = true;
|
|
200
115
|
setIsLoading(false);
|
|
201
116
|
}
|
|
202
|
-
}}
|
|
203
|
-
setIsLoading(false);
|
|
204
|
-
onError?.("WEBVIEW_ERROR", "Failed to load widget");
|
|
205
|
-
}}
|
|
206
|
-
// Allow external URLs to open in native apps
|
|
207
|
-
onShouldStartLoadWithRequest={(request) => {
|
|
117
|
+
}} onShouldStartLoadWithRequest={(request) => {
|
|
208
118
|
const { url } = request;
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
url.includes("pay.google.com") || // Google Wallet
|
|
119
|
+
if (url.startsWith("shoebox://") ||
|
|
120
|
+
url.includes("pay.google.com") ||
|
|
212
121
|
url.includes("wallet.google.com") ||
|
|
213
122
|
url.includes("wallet.apple.com")) {
|
|
214
123
|
react_native_1.Linking.openURL(url).catch(() => { });
|
|
215
|
-
return false;
|
|
124
|
+
return false;
|
|
216
125
|
}
|
|
217
|
-
// Allow normal widget navigation
|
|
218
126
|
return true;
|
|
219
|
-
}}
|
|
220
|
-
// Security settings
|
|
221
|
-
javaScriptEnabled={true} domStorageEnabled={true} allowsInlineMediaPlayback={true}
|
|
222
|
-
// iOS specific
|
|
223
|
-
bounces={false} allowsBackForwardNavigationGestures={true}
|
|
224
|
-
// Android specific
|
|
225
|
-
mixedContentMode="always"/>
|
|
127
|
+
}} javaScriptEnabled={true} domStorageEnabled={true} allowsInlineMediaPlayback={true} bounces={false} allowsBackForwardNavigationGestures={true} mixedContentMode="always"/>
|
|
226
128
|
{isLoading && (<react_native_1.View style={styles.loadingOverlay}>
|
|
227
129
|
<react_native_1.ActivityIndicator size="large" color="#007AFF"/>
|
|
228
130
|
</react_native_1.View>)}
|
|
229
131
|
</react_native_1.View>);
|
|
230
132
|
});
|
|
231
133
|
const styles = react_native_1.StyleSheet.create({
|
|
232
|
-
container: {
|
|
233
|
-
|
|
234
|
-
},
|
|
235
|
-
webview: {
|
|
236
|
-
flex: 1,
|
|
237
|
-
},
|
|
134
|
+
container: { flex: 1 },
|
|
135
|
+
webview: { flex: 1 },
|
|
238
136
|
loadingOverlay: {
|
|
239
137
|
...react_native_1.StyleSheet.absoluteFillObject,
|
|
240
138
|
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
package/dist/WidgetSDK.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WidgetSDK.js","sourceRoot":"","sources":["../src/WidgetSDK.tsx"],"names":[],"mappings":";AAAA;;;GAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,+CAOe;AACf,+CAOsB;AACtB,+DAAoE;AACpE,qCAA0D;AAE1D,+CAAoE;
|
|
1
|
+
{"version":3,"file":"WidgetSDK.js","sourceRoot":"","sources":["../src/WidgetSDK.tsx"],"names":[],"mappings":";AAAA;;;GAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,+CAOe;AACf,+CAOsB;AACtB,+DAAoE;AACpE,qCAA0D;AAE1D,+CAAoE;AAOvD,QAAA,SAAS,GAAG,IAAA,kBAAU,EACjC,CACE,EAAE,WAAW,EAAE,iBAAiB,EAAE,OAAO,EAAE,sBAAsB,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAA,cAAM,EAAU,IAAI,CAAC,CAAC;IACzC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAA,+BAAiB,GAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,0BAAW,CAAC,gBAAgB,CAC9C,mBAAmB,EACnB,GAAG,EAAE;YACH,mBAAmB,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAE,CAAC,CAAC;YACrD,OAAO,IAAI,CAAC;QACd,CAAC,CACF,CAAC;QACF,OAAO,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,YAAY,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,CAAC;QACzE,MAAM,EAAE,GAAG,EAAE;YACX,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;YAC9B,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAC/B,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAE,EAAE;QACnD,IAAI,CAAC;YACH,MAAM,OAAO,GAAkB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAElE,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;gBACrB,KAAK,cAAc;oBACjB,mBAAmB,CAAC;wBAClB,IAAI,EAAE,sBAAsB;wBAC5B,OAAO,EAAE,EAAE,QAAQ,EAAE,uBAAQ,CAAC,EAAE,EAAE,eAAe,EAAE;qBACpD,CAAC,CAAC;oBACH,MAAM;gBAER,KAAK,oBAAoB;oBACvB,IAAA,8BAAgB,GAAE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;wBAClC,mBAAmB,CAAC;4BAClB,IAAI,EAAE,sBAAsB;4BAC5B,OAAO,EAAE,EAAE,OAAO,EAAE;yBACrB,CAAC,CAAC;oBACL,CAAC,CAAC,CAAC;oBACH,MAAM;gBAER,KAAK,cAAc;oBACjB,OAAO,EAAE,EAAE,CAAC;oBACZ,MAAM;gBAER,KAAK,8BAA8B;oBACjC,sBAAsB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;oBACxC,MAAM;YACV,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,sBAAsB;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,OAAgB,EAAE,EAAE;QAC/C,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAClC,sBAAsB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,eAAe,CAC7D,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,MAAM,OAAO,GAAG,IAAA,qBAAY,EAAC,WAAW,CAAC,CAAC;QAC1C,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC;YACjC,KAAK,EAAE,IAAA,yBAAgB,EAAC,WAAW,CAAC;YACpC,QAAQ,EAAE,uBAAQ,CAAC,EAAE;YACrB,iBAAiB;SAClB,CAAC,CAAC;QACH,OAAO,GAAG,OAAO,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErC,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,8BAAO,CACN,GAAG,CAAC,CAAC,UAAU,CAAC,CAChB,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,cAAc,EAAE,CAAC,CAChC,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,SAAS,CAAC,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC3B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CACF,4BAA4B,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC;YACxB,IACE,GAAG,CAAC,UAAU,CAAC,YAAY,CAAC;gBAC5B,GAAG,CAAC,QAAQ,CAAC,gBAAgB,CAAC;gBAC9B,GAAG,CAAC,QAAQ,CAAC,mBAAmB,CAAC;gBACjC,GAAG,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAChC,CAAC;gBACD,sBAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;gBACrC,OAAO,KAAK,CAAC;YACf,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CACF,iBAAiB,CAAC,CAAC,IAAI,CAAC,CACxB,iBAAiB,CAAC,CAAC,IAAI,CAAC,CACxB,yBAAyB,CAAC,CAAC,IAAI,CAAC,CAChC,OAAO,CAAC,CAAC,KAAK,CAAC,CACf,mCAAmC,CAAC,CAAC,IAAI,CAAC,CAC1C,gBAAgB,CAAC,QAAQ,EAE3B;QAAA,CAAC,SAAS,IAAI,CACZ,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACjC;YAAA,CAAC,gCAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,EACjD;UAAA,EAAE,mBAAI,CAAC,CACR,CACH;MAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IACtB,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IACpB,cAAc,EAAE;QACd,GAAG,yBAAU,CAAC,kBAAkB;QAChC,eAAe,EAAE,0BAA0B;QAC3C,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* Widget SDK - Public API
|
|
3
|
-
*/
|
|
1
|
+
export type { EvmTransactionData, EvmTransactionRequest, SolanaTransactionRequest, TransactionRequest, TransactionTokenMetadata, WidgetSDKConfig, } from "./types";
|
|
4
2
|
export { WidgetSDK } from "./WidgetSDK";
|
|
5
3
|
export type { WidgetSDKRef } from "./WidgetSDK";
|
|
6
|
-
export type { DepositToken, SDKErrorCode, WidgetSDKConfig, } from "./types";
|
|
7
4
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAQA,yCAAwC;AAA/B,sGAAA,SAAS,OAAA"}
|