@zerohash-sdk/crypto-sell-react 0.2.1 → 1.1.0
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 +143 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,147 @@
|
|
|
1
1
|
# @zerohash-sdk/crypto-sell-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A React SDK that enables frontend React applications to seamlessly integrate with the Connect Crypto Sell product.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Connect Crypto Sell provides a secure, customizable flow for selling crypto assets directly within your application.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Requirements
|
|
8
|
+
|
|
9
|
+
- React 18.0.0 or higher
|
|
10
|
+
- React DOM 18.0.0 or higher
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @zerohash-sdk/crypto-sell-react
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Getting Started
|
|
19
|
+
|
|
20
|
+
Follow these simple steps to integrate Connect Crypto Sell into your React application:
|
|
21
|
+
|
|
22
|
+
### 1. Import the CryptoSell Component
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { CryptoSell } from '@zerohash-sdk/crypto-sell-react';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 2. Add the CryptoSell Component to Your App
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
function App() {
|
|
32
|
+
const jwt = 'your-jwt-token'; // Obtain this from your backend
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<CryptoSell
|
|
36
|
+
jwt={jwt}
|
|
37
|
+
env="prod" // or "cert" for testing
|
|
38
|
+
theme="auto" // 'auto' (default), 'light', or 'dark'
|
|
39
|
+
/>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 3. Configure Event Callbacks (Optional)
|
|
45
|
+
|
|
46
|
+
Listen to events from the Crypto Sell SDK to handle user interactions:
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
function App() {
|
|
50
|
+
const jwt = 'your-jwt-token';
|
|
51
|
+
|
|
52
|
+
const handleCompleted = ({ amountSold, assetSymbol }) => {
|
|
53
|
+
console.log('Sell completed:', amountSold, assetSymbol);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const handleError = ({ errorCode, reason }) => {
|
|
57
|
+
console.log('Crypto sell error:', errorCode, 'Reason:', reason);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const handleClose = () => {
|
|
61
|
+
console.log('Crypto sell widget closed');
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const handleEvent = ({ type, data }) => {
|
|
65
|
+
console.log('Crypto sell event:', type, 'Data:', data);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const handleLoaded = () => {
|
|
69
|
+
console.log('Crypto sell widget loaded and ready');
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<CryptoSell
|
|
74
|
+
jwt={jwt}
|
|
75
|
+
env="prod"
|
|
76
|
+
theme="auto"
|
|
77
|
+
onCompleted={handleCompleted}
|
|
78
|
+
onError={handleError}
|
|
79
|
+
onClose={handleClose}
|
|
80
|
+
onEvent={handleEvent}
|
|
81
|
+
onLoaded={handleLoaded}
|
|
82
|
+
/>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Complete Example
|
|
88
|
+
|
|
89
|
+
Here's a full example of integrating Connect Crypto Sell into your React application:
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import React from 'react';
|
|
93
|
+
import { CryptoSell } from '@zerohash-sdk/crypto-sell-react';
|
|
94
|
+
|
|
95
|
+
function App() {
|
|
96
|
+
// JWT token should be obtained from your backend
|
|
97
|
+
const jwt = 'your-jwt-token';
|
|
98
|
+
|
|
99
|
+
return (
|
|
100
|
+
<div className="App">
|
|
101
|
+
<h1>My Crypto App</h1>
|
|
102
|
+
|
|
103
|
+
<CryptoSell
|
|
104
|
+
jwt={jwt}
|
|
105
|
+
env="prod" // 'prod' (default), 'cert', 'dev', or 'local'
|
|
106
|
+
theme="auto" // 'auto' (default), 'light', or 'dark'
|
|
107
|
+
onCompleted={({ amountSold, assetSymbol }) => {
|
|
108
|
+
console.log('Sold:', amountSold, assetSymbol);
|
|
109
|
+
}}
|
|
110
|
+
onError={({ errorCode, reason }) => {
|
|
111
|
+
console.log('Error:', errorCode, 'Reason:', reason);
|
|
112
|
+
}}
|
|
113
|
+
onClose={() => {
|
|
114
|
+
console.log('Crypto sell widget closed');
|
|
115
|
+
}}
|
|
116
|
+
onEvent={({ type, data }) => {
|
|
117
|
+
console.log('Event type:', type, 'Event data:', data);
|
|
118
|
+
}}
|
|
119
|
+
onLoaded={() => {
|
|
120
|
+
console.log('Crypto sell widget loaded and ready');
|
|
121
|
+
}}
|
|
122
|
+
/>
|
|
123
|
+
</div>
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
export default App;
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## API Reference
|
|
131
|
+
|
|
132
|
+
### CryptoSell Component Props
|
|
133
|
+
|
|
134
|
+
| Prop | Type | Required | Default | Description |
|
|
135
|
+
| ------------- | --------------------------------------- | -------- | -------- | -------------------------------------------------- |
|
|
136
|
+
| `jwt` | `string` | Yes | - | JWT token for authentication with Connect |
|
|
137
|
+
| `env` | `"prod" \| "cert" \| "dev" \| "local"` | No | `"prod"` | Target environment |
|
|
138
|
+
| `theme` | `"auto" \| "light" \| "dark"` | No | `"auto"` | Theme mode for the interface |
|
|
139
|
+
| `onCompleted` | `({ amountSold, assetSymbol }) => void` | No | - | Callback when the sell flow completes successfully |
|
|
140
|
+
| `onError` | `({ errorCode, reason }) => void` | No | - | Callback for error events |
|
|
141
|
+
| `onClose` | `() => void` | No | - | Callback when the widget is closed |
|
|
142
|
+
| `onEvent` | `({ type, data }) => void` | No | - | Callback for general events |
|
|
143
|
+
| `onLoaded` | `() => void` | No | - | Callback when the widget is loaded and ready |
|
|
144
|
+
|
|
145
|
+
## More Information & Support
|
|
146
|
+
|
|
147
|
+
For comprehensive documentation or support about Connect, visit our [Documentation Page](https://docs.zerohash.com/).
|