suiport-sdk 0.1.2 → 0.1.4
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 +116 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,29 +32,130 @@ function PaymentPage() {
|
|
|
32
32
|
}
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
##
|
|
35
|
+
## Components
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
-
|
|
40
|
-
|
|
37
|
+
### SuiportButton
|
|
38
|
+
|
|
39
|
+
Drop-in payment button that opens the payment modal. This is the recommended way to use Suiport in your app.
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
<SuiportButton
|
|
43
|
+
recipient="0x620cf72c..."
|
|
44
|
+
refundAddress="0x2527D02599Ba..."
|
|
45
|
+
destinationToken="suiUSDC"
|
|
46
|
+
amount="10"
|
|
47
|
+
label="Pay Now"
|
|
48
|
+
variant="default"
|
|
49
|
+
disabled={false}
|
|
50
|
+
className="my-custom-class"
|
|
51
|
+
onSuccess={(result) => console.log(result)}
|
|
52
|
+
onError={(error) => console.error(error)}
|
|
53
|
+
onOpenChange={(open) => console.log('Modal open:', open)}
|
|
54
|
+
/>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
#### Props
|
|
58
|
+
|
|
59
|
+
| Prop | Type | Required | Default | Description |
|
|
60
|
+
|------|------|----------|---------|-------------|
|
|
61
|
+
| `recipient` | `string` | ✅ | - | Sui wallet address to receive payment |
|
|
62
|
+
| `refundAddress` | `string` | ❌ | - | Address for refunds if payment fails |
|
|
63
|
+
| `destinationToken` | `'suiUSDC' \| 'suiSUI'` | ❌ | `'suiUSDC'` | Token to receive on Sui |
|
|
64
|
+
| `amount` | `string` | ❌ | - | Fixed amount to request (user can select if omitted) |
|
|
65
|
+
| `label` | `string` | ❌ | `'Pay with Crypto'` | Button text |
|
|
66
|
+
| `variant` | `'default' \| 'compact' \| 'outline'` | ❌ | `'default'` | Button style variant |
|
|
67
|
+
| `disabled` | `boolean` | ❌ | `false` | Disable the button |
|
|
68
|
+
| `className` | `string` | ❌ | - | Custom CSS class |
|
|
69
|
+
| `onSuccess` | `(result: { txHash: string, amount: string }) => void` | ❌ | - | Called when payment completes |
|
|
70
|
+
| `onError` | `(error: Error) => void` | ❌ | - | Called when payment fails |
|
|
71
|
+
| `onOpenChange` | `(open: boolean) => void` | ❌ | - | Called when modal opens/closes |
|
|
72
|
+
|
|
73
|
+
#### Button Variants
|
|
74
|
+
|
|
75
|
+
- **`default`** - Gradient purple button with shadow (recommended)
|
|
76
|
+
- **`compact`** - Smaller version for tight spaces
|
|
77
|
+
- **`outline`** - Transparent with purple border
|
|
78
|
+
|
|
79
|
+
### SuiportModal
|
|
80
|
+
|
|
81
|
+
For custom implementations, use the modal directly:
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
import { SuiportModal } from 'suiport-sdk'
|
|
85
|
+
|
|
86
|
+
<SuiportModal
|
|
87
|
+
open={isOpen}
|
|
88
|
+
onClose={() => setIsOpen(false)}
|
|
89
|
+
recipient="0x..."
|
|
90
|
+
destinationToken="suiUSDC"
|
|
91
|
+
onSuccess={handleSuccess}
|
|
92
|
+
/>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Hooks
|
|
41
96
|
|
|
42
|
-
|
|
97
|
+
### useSuiportPayment
|
|
43
98
|
|
|
44
|
-
|
|
99
|
+
Full control over the payment flow:
|
|
45
100
|
|
|
46
|
-
|
|
47
|
-
|
|
101
|
+
```tsx
|
|
102
|
+
import { useSuiportPayment } from 'suiport-sdk'
|
|
103
|
+
|
|
104
|
+
const payment = useSuiportPayment({
|
|
105
|
+
recipient: '0x...',
|
|
106
|
+
destinationToken: 'suiUSDC',
|
|
107
|
+
onSuccess: (result) => console.log('Done!', result),
|
|
108
|
+
})
|
|
109
|
+
|
|
110
|
+
// Access state
|
|
111
|
+
payment.paymentState // 'idle' | 'quoting' | 'awaiting_deposit' | 'processing' | 'success' | 'error'
|
|
112
|
+
payment.quote // Quote details with deposit address
|
|
113
|
+
payment.status // Execution status with tx hashes
|
|
114
|
+
payment.error // Error if payment failed
|
|
115
|
+
|
|
116
|
+
// Actions
|
|
117
|
+
payment.selectToken(token) // Select source token
|
|
118
|
+
payment.setAmount(amount) // Set amount
|
|
119
|
+
payment.getPreview() // Get quote preview
|
|
120
|
+
payment.execute() // Execute the payment
|
|
121
|
+
payment.reset() // Reset to initial state
|
|
122
|
+
```
|
|
48
123
|
|
|
49
|
-
|
|
124
|
+
## Core Functions
|
|
50
125
|
|
|
51
|
-
|
|
126
|
+
```tsx
|
|
127
|
+
import { initSuiport, getQuote, getExecutionStatus } from 'suiport-sdk'
|
|
128
|
+
|
|
129
|
+
// Initialize SDK (required once)
|
|
130
|
+
initSuiport({ apiKey: 'your-api-key' })
|
|
52
131
|
|
|
53
|
-
|
|
132
|
+
// Get a quote
|
|
133
|
+
const quote = await getQuote({
|
|
134
|
+
srcToken: 'base:usdc',
|
|
135
|
+
destToken: 'sui:usdc',
|
|
136
|
+
amount: '10000000', // 10 USDC (6 decimals)
|
|
137
|
+
recipient: '0x...',
|
|
138
|
+
})
|
|
139
|
+
|
|
140
|
+
// Check execution status
|
|
141
|
+
const status = await getExecutionStatus(quote.depositAddress, quote.memo)
|
|
142
|
+
```
|
|
54
143
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
144
|
+
## Supported Chains & Tokens
|
|
145
|
+
|
|
146
|
+
**Source Chains:** Ethereum, Base, Arbitrum, Optimism, Polygon, Avalanche, BSC, and more (22+ chains)
|
|
147
|
+
|
|
148
|
+
**Destination Tokens on Sui:**
|
|
149
|
+
- `suiUSDC` - USDC on Sui
|
|
150
|
+
- `suiSUI` - Native SUI token
|
|
151
|
+
|
|
152
|
+
## Features
|
|
153
|
+
|
|
154
|
+
- 🌐 Accept payments from 22+ blockchains
|
|
155
|
+
- ⚡ Powered by NEAR Intents (sub-minute settlement)
|
|
156
|
+
- 💎 Premium glassmorphism UI
|
|
157
|
+
- 🔧 Fully customizable via hooks
|
|
158
|
+
- 📱 Mobile-responsive modal
|
|
58
159
|
|
|
59
160
|
## License
|
|
60
161
|
|