@rhinestone/deposit-modal 0.1.1 → 0.1.3

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.
Files changed (8) hide show
  1. package/README.md +105 -111
  2. package/dist/index.cjs +2226 -755
  3. package/dist/index.d.cts +68 -92
  4. package/dist/index.d.ts +68 -92
  5. package/dist/index.mjs +2219 -744
  6. package/dist/styles.css +802 -16
  7. package/dist/styles.d.ts +3 -0
  8. package/package.json +7 -3
package/README.md CHANGED
@@ -1,159 +1,153 @@
1
1
  # @rhinestone/deposit-modal
2
2
 
3
- React modal component for Rhinestone cross-chain deposits.
3
+ React components for cross-chain deposits and withdrawals via Rhinestone smart accounts.
4
4
 
5
- ## Installation
5
+ ## Install
6
6
 
7
7
  ```bash
8
8
  npm install @rhinestone/deposit-modal viem
9
- # or
10
- bun add @rhinestone/deposit-modal viem
11
9
  ```
12
10
 
13
- ## Usage
11
+ ## DepositModal
14
12
 
15
- ```tsx
16
- import { DepositModal } from "@rhinestone/deposit-modal";
17
- import "@rhinestone/deposit-modal/styles.css";
13
+ Deposits tokens from any supported chain into a target chain/token via a Rhinestone smart account.
18
14
 
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
15
  ```
39
-
40
- ## With wagmi
16
+ User wallet → transfer → Rhinestone smart account → bridge → target chain/token
17
+ ```
41
18
 
42
19
  ```tsx
43
- import { useAccount, useWalletClient, usePublicClient, useSwitchChain } from "wagmi";
44
20
  import { DepositModal } from "@rhinestone/deposit-modal";
45
21
  import "@rhinestone/deposit-modal/styles.css";
46
22
 
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
- }
23
+ <DepositModal
24
+ isOpen={isOpen}
25
+ onClose={() => setIsOpen(false)}
26
+ walletClient={walletClient}
27
+ publicClient={publicClient}
28
+ address={address}
29
+ targetChain={8453}
30
+ targetToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
31
+ switchChain={(chainId) => switchChainAsync({ chainId })}
32
+ onDepositComplete={(data) => console.log("Done!", data)}
33
+ />
74
34
  ```
75
35
 
76
- ## Props
36
+ ### Props
77
37
 
78
38
  | Prop | Type | Required | Description |
79
39
  |------|------|----------|-------------|
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
40
  | `isOpen` | `boolean` | Yes | Modal open state |
86
41
  | `onClose` | `() => void` | Yes | Close handler |
87
- | `switchChain` | `(chainId: number) => Promise<void>` | No | Chain switch callback |
88
- | `sourceChain` | `number` | No | Pre-selected source chain |
42
+ | `targetChain` | `Chain \| number` | Yes | Destination chain |
43
+ | `targetToken` | `Address` | Yes | Destination token address |
44
+ | `walletClient` | `WalletClient \| null` | No | viem WalletClient |
45
+ | `publicClient` | `PublicClient \| null` | No | viem PublicClient |
46
+ | `address` | `Address \| null` | No | Connected wallet address |
47
+ | `switchChain` | `(chainId: number) => Promise<{id: number} \| void>` | No | Chain switch callback |
48
+ | `inline` | `boolean` | No | Render inline without overlay |
49
+ | `sourceChain` | `Chain \| number` | No | Pre-selected source chain |
89
50
  | `sourceToken` | `Address` | No | Pre-selected source token |
90
- | `amount` | `string` | No | Pre-filled amount |
51
+ | `defaultAmount` | `string` | No | Pre-filled amount |
91
52
  | `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`) |
53
+ | `backendUrl` | `string` | No | Backend URL |
54
+ | `signerAddress` | `Address` | No | Session signer address |
94
55
  | `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 |
56
+ | `onRequestConnect` | `() => void` | No | Called when wallet connection needed |
57
+ | `connectButtonLabel` | `string` | No | Custom connect button label |
97
58
  | `theme` | `DepositModalTheme` | No | Theme customization |
98
59
  | `branding` | `DepositModalBranding` | No | Logo and title |
60
+ | `uiConfig` | `DepositModalUIConfig` | No | UI display options |
99
61
  | `className` | `string` | No | Additional CSS class |
100
62
 
101
- ### Event Callbacks
63
+ ### Callbacks
102
64
 
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 |
65
+ | Callback | Description |
66
+ |----------|-------------|
67
+ | `onReady` | Modal initialized |
68
+ | `onConnected(address, smartAccount)` | Smart account created |
69
+ | `onDepositSubmitted(txHash, sourceChain, amount)` | Transfer signed |
70
+ | `onDepositComplete(txHash, destinationTxHash?)` | Deposit arrived on target chain |
71
+ | `onDepositFailed(txHash, error?)` | Bridge failed |
72
+ | `onError(message, code?)` | Error during flow |
73
+
74
+ ## WithdrawModal
75
+
76
+ Withdraws tokens from a 1/1 Safe to a target chain/token. The connected wallet must be the sole Safe owner. User signs an EIP-712 SafeTx authorizing the ERC20 transfer, then funds are bridged to the destination.
77
+
78
+ ```
79
+ Safe → ERC20 transfer → Rhinestone smart account → bridge → target chain/token
80
+ ```
81
+
82
+ ```tsx
83
+ import { WithdrawModal } from "@rhinestone/deposit-modal";
84
+ import "@rhinestone/deposit-modal/styles.css";
85
+
86
+ <WithdrawModal
87
+ isOpen={isOpen}
88
+ onClose={() => setIsOpen(false)}
89
+ walletClient={walletClient}
90
+ publicClient={publicClient}
91
+ address={address}
92
+ safeAddress="0x..."
93
+ sourceChain={8453}
94
+ sourceToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
95
+ targetChain={1}
96
+ targetToken="0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
97
+ switchChain={(chainId) => switchChainAsync({ chainId })}
98
+ onWithdrawComplete={(data) => console.log("Done!", data)}
99
+ />
100
+ ```
101
+
102
+ ### Additional Props (beyond shared DepositModal props)
103
+
104
+ | Prop | Type | Required | Description |
105
+ |------|------|----------|-------------|
106
+ | `safeAddress` | `Address` | Yes | Safe holding funds |
107
+ | `sourceChain` | `Chain \| number` | Yes | Chain where the Safe exists |
108
+ | `sourceToken` | `Address` | Yes | Token in the Safe |
109
+
110
+ ### Callbacks
111
+
112
+ | Callback | Description |
113
+ |----------|-------------|
114
+ | `onWithdrawSubmitted(txHash, sourceChain, amount, safeAddress)` | Safe transfer signed |
115
+ | `onWithdrawComplete(txHash, destinationTxHash?)` | Withdrawal arrived |
116
+ | `onWithdrawFailed(txHash, error?)` | Bridge failed |
117
+
118
+ Also supports `onReady`, `onConnected`, and `onError` (same as DepositModal).
110
119
 
111
120
  ## Theming
112
121
 
113
122
  ```tsx
114
123
  <DepositModal
115
- theme={{
116
- mode: "dark",
117
- primary: "#8b5cf6", // Purple brand
118
- radius: "lg",
119
- }}
120
- // ...
124
+ theme={{ mode: "dark", ctaColor: "#8b5cf6", radius: "lg" }}
125
+ branding={{ logoUrl: "https://example.com/logo.png", title: "Fund Account" }}
126
+ uiConfig={{ showLogo: true, showStepper: true, maxDepositUsd: 10000 }}
121
127
  />
122
128
  ```
123
129
 
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
130
+ **Theme**: `mode` (light/dark), `ctaColor`, `ctaHoverColor`, `fontColor`, `iconColor`, `borderColor`, `backgroundColor`, `radius` (none/sm/md/lg/full)
140
131
 
141
- - Base (8453)
142
- - Optimism (10)
143
- - Arbitrum (42161)
132
+ **Branding**: `logoUrl`, `title`
144
133
 
145
- ## USDC Addresses
134
+ **UI Config**: `showLogo`, `showStepper`, `showBackButton`, `balanceTitle`, `maxDepositUsd`
146
135
 
147
- ```typescript
148
- import { USDC_ADDRESSES } from "@rhinestone/deposit-modal";
136
+ ## Utility Exports
149
137
 
150
- // {
151
- // 8453: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // Base
152
- // 10: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // Optimism
153
- // 42161: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // Arbitrum
154
- // }
138
+ ```tsx
139
+ import {
140
+ SOURCE_CHAINS, SUPPORTED_CHAINS, chainRegistry,
141
+ getChainName, getChainIcon, getChainObject,
142
+ getUsdcAddress, getTokenAddress, getTokenDecimals, getTokenSymbol, getTokenIcon,
143
+ getExplorerTxUrl, DEFAULT_BACKEND_URL, NATIVE_TOKEN_ADDRESS,
144
+ } from "@rhinestone/deposit-modal";
155
145
  ```
156
146
 
147
+ ## Supported Chains
148
+
149
+ Base (8453), Optimism (10), Arbitrum (42161)
150
+
157
151
  ## License
158
152
 
159
153
  MIT