@rhinestone/deposit-modal 0.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 +159 -0
- package/dist/index.cjs +2590 -0
- package/dist/index.d.cts +162 -0
- package/dist/index.d.ts +162 -0
- package/dist/index.mjs +2565 -0
- package/dist/styles.css +1178 -0
- package/package.json +66 -0
package/README.md
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# @rhinestone/deposit-modal
|
|
2
|
+
|
|
3
|
+
React modal component for Rhinestone cross-chain deposits.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @rhinestone/deposit-modal viem
|
|
9
|
+
# or
|
|
10
|
+
bun add @rhinestone/deposit-modal viem
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { DepositModal } from "@rhinestone/deposit-modal";
|
|
17
|
+
import "@rhinestone/deposit-modal/styles.css";
|
|
18
|
+
|
|
19
|
+
function App() {
|
|
20
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
21
|
+
|
|
22
|
+
// Your wallet setup (wagmi, ethers, etc.)
|
|
23
|
+
const { walletClient, publicClient, address } = useYourWallet();
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<DepositModal
|
|
27
|
+
isOpen={isOpen}
|
|
28
|
+
onClose={() => setIsOpen(false)}
|
|
29
|
+
walletClient={walletClient}
|
|
30
|
+
publicClient={publicClient}
|
|
31
|
+
address={address}
|
|
32
|
+
targetChain={8453} // Base
|
|
33
|
+
targetToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" // USDC on Base
|
|
34
|
+
onDepositComplete={(data) => console.log("Done!", data)}
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## With wagmi
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { useAccount, useWalletClient, usePublicClient, useSwitchChain } from "wagmi";
|
|
44
|
+
import { DepositModal } from "@rhinestone/deposit-modal";
|
|
45
|
+
import "@rhinestone/deposit-modal/styles.css";
|
|
46
|
+
|
|
47
|
+
function DepositButton() {
|
|
48
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
49
|
+
const { address } = useAccount();
|
|
50
|
+
const { data: walletClient } = useWalletClient();
|
|
51
|
+
const publicClient = usePublicClient();
|
|
52
|
+
const { switchChainAsync } = useSwitchChain();
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<>
|
|
56
|
+
<button onClick={() => setIsOpen(true)}>Deposit</button>
|
|
57
|
+
<DepositModal
|
|
58
|
+
isOpen={isOpen}
|
|
59
|
+
onClose={() => setIsOpen(false)}
|
|
60
|
+
walletClient={walletClient}
|
|
61
|
+
publicClient={publicClient}
|
|
62
|
+
address={address}
|
|
63
|
+
switchChain={(chainId) => switchChainAsync({ chainId })}
|
|
64
|
+
targetChain={8453}
|
|
65
|
+
targetToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
|
|
66
|
+
onDepositComplete={(data) => {
|
|
67
|
+
console.log("Deposit complete!", data);
|
|
68
|
+
setIsOpen(false);
|
|
69
|
+
}}
|
|
70
|
+
/>
|
|
71
|
+
</>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Props
|
|
77
|
+
|
|
78
|
+
| Prop | Type | Required | Description |
|
|
79
|
+
|------|------|----------|-------------|
|
|
80
|
+
| `walletClient` | `WalletClient` | No | viem WalletClient from your app |
|
|
81
|
+
| `publicClient` | `PublicClient` | No | viem PublicClient for chain reads |
|
|
82
|
+
| `address` | `Address` | No | Connected wallet address |
|
|
83
|
+
| `targetChain` | `number` | Yes | Destination chain ID |
|
|
84
|
+
| `targetToken` | `Address` | Yes | Destination token address |
|
|
85
|
+
| `isOpen` | `boolean` | Yes | Modal open state |
|
|
86
|
+
| `onClose` | `() => void` | Yes | Close handler |
|
|
87
|
+
| `switchChain` | `(chainId: number) => Promise<void>` | No | Chain switch callback |
|
|
88
|
+
| `sourceChain` | `number` | No | Pre-selected source chain |
|
|
89
|
+
| `sourceToken` | `Address` | No | Pre-selected source token |
|
|
90
|
+
| `amount` | `string` | No | Pre-filled amount |
|
|
91
|
+
| `recipient` | `Address` | No | Custom recipient address |
|
|
92
|
+
| `backendUrl` | `string` | No | Backend URL (default: https://v1.orchestrator.rhinestone.dev/deposit-widget) |
|
|
93
|
+
| `signerAddress` | `Address` | No | Session signer address (default: `0xcc47aa2d96c35bc6aab12ffb0e2edab8042274bd`) |
|
|
94
|
+
| `waitForFinalTx` | `boolean` | No | Wait for destination tx (default: true) |
|
|
95
|
+
| `onRequestConnect` | `() => void` | No | Trigger wallet connect when modal is open without a wallet |
|
|
96
|
+
| `connectButtonLabel` | `string` | No | Custom label for the connect button |
|
|
97
|
+
| `theme` | `DepositModalTheme` | No | Theme customization |
|
|
98
|
+
| `branding` | `DepositModalBranding` | No | Logo and title |
|
|
99
|
+
| `className` | `string` | No | Additional CSS class |
|
|
100
|
+
|
|
101
|
+
### Event Callbacks
|
|
102
|
+
|
|
103
|
+
| Callback | Type | Description |
|
|
104
|
+
|----------|------|-------------|
|
|
105
|
+
| `onConnected` | `(data: { address, smartAccount }) => void` | Smart account created |
|
|
106
|
+
| `onDepositSubmitted` | `(data: { txHash, sourceChain, amount }) => void` | Transfer signed |
|
|
107
|
+
| `onDepositComplete` | `(data: { txHash, destinationTxHash? }) => void` | Deposit arrived |
|
|
108
|
+
| `onDepositFailed` | `(data: { txHash, error? }) => void` | Bridge failed |
|
|
109
|
+
| `onError` | `(data: { message, code? }) => void` | Any error |
|
|
110
|
+
|
|
111
|
+
## Theming
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
<DepositModal
|
|
115
|
+
theme={{
|
|
116
|
+
mode: "dark",
|
|
117
|
+
primary: "#8b5cf6", // Purple brand
|
|
118
|
+
radius: "lg",
|
|
119
|
+
}}
|
|
120
|
+
// ...
|
|
121
|
+
/>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Theme Options
|
|
125
|
+
|
|
126
|
+
| Option | Type | Description |
|
|
127
|
+
|--------|------|-------------|
|
|
128
|
+
| `mode` | `"light" \| "dark"` | Color mode |
|
|
129
|
+
| `primary` | `string` | Brand color for buttons, links |
|
|
130
|
+
| `primaryForeground` | `string` | Text on primary backgrounds |
|
|
131
|
+
| `background` | `string` | Modal background |
|
|
132
|
+
| `foreground` | `string` | Primary text color |
|
|
133
|
+
| `muted` | `string` | Secondary text, borders |
|
|
134
|
+
| `mutedForeground` | `string` | Text on muted backgrounds |
|
|
135
|
+
| `success` | `string` | Success state color |
|
|
136
|
+
| `error` | `string` | Error state color |
|
|
137
|
+
| `radius` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | Border radius |
|
|
138
|
+
|
|
139
|
+
## Supported Chains
|
|
140
|
+
|
|
141
|
+
- Base (8453)
|
|
142
|
+
- Optimism (10)
|
|
143
|
+
- Arbitrum (42161)
|
|
144
|
+
|
|
145
|
+
## USDC Addresses
|
|
146
|
+
|
|
147
|
+
```typescript
|
|
148
|
+
import { USDC_ADDRESSES } from "@rhinestone/deposit-modal";
|
|
149
|
+
|
|
150
|
+
// {
|
|
151
|
+
// 8453: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // Base
|
|
152
|
+
// 10: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // Optimism
|
|
153
|
+
// 42161: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // Arbitrum
|
|
154
|
+
// }
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
## License
|
|
158
|
+
|
|
159
|
+
MIT
|