@surf_liquid/surf-widget 0.1.5
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 +230 -0
- package/dist/Base.svg +10 -0
- package/dist/Polygon.png +0 -0
- package/dist/SurfToken.png +0 -0
- package/dist/USDC.svg +23 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +431 -0
- package/dist/index.esm.js +2443 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/package.json +57 -0
package/README.md
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
# @aanchal16/surf-widget-sdk
|
|
2
|
+
|
|
3
|
+
Embeddable React widget for [Surf Liquid](https://surfliquid.io) — drop DeFi yield into any app in minutes.
|
|
4
|
+
|
|
5
|
+
The widget handles vault creation, deposits, withdrawals, and activity history out of the box. Everything is themeable and fully typed.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @aanchal16/surf-widget-sdk
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
**Peer dependencies** (install if not already in your project):
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install react react-dom
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
**Surf SDK** (required for client instantiation):
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install surfliquid@0.1.1
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
> `surfliquid@0.1.1` is the current latest version of the Surf SDK.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Wallet Login — Best Practice
|
|
32
|
+
|
|
33
|
+
> **It is strongly recommended to use the `surfliquid` SDK's built-in login flow (`connectWallet` → `authenticate`) to handle wallet login.** This ensures the wallet is correctly connected, the chain is switched automatically, and a JWT token is obtained before passing the `client` to the widget.
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import { SurfClient } from 'surfliquid';
|
|
37
|
+
|
|
38
|
+
const client = SurfClient.create({ appId: 'YOUR_APP_ID', chainId: 8453 });
|
|
39
|
+
|
|
40
|
+
// Step 1 — Connect wallet (supports 'metamask' | 'trust' | 'coinbase' | 'rabby' | 'phantom' | 'walletconnect' | 'injected')
|
|
41
|
+
const state = await client.connectWallet('metamask');
|
|
42
|
+
|
|
43
|
+
// Step 2 — Authenticate (signs a nonce, returns a JWT)
|
|
44
|
+
const auth = await client.authenticate();
|
|
45
|
+
console.log(auth.authenticated); // true
|
|
46
|
+
|
|
47
|
+
// Step 3 — (Optional) Deploy vault if one doesn't exist yet
|
|
48
|
+
const vault = await client.getVault();
|
|
49
|
+
if (!vault.exists) await client.deployVault();
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Using the SDK login flow guarantees the `walletAddress` and `chainId` are in sync with the widget and prevents auth-related errors.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Quick Start
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { SurfClient } from 'surfliquid';
|
|
60
|
+
import { SurfWidget } from '@aanchal16/surf-widget-sdk';
|
|
61
|
+
import '@aanchal16/surf-widget-sdk/dist/index.css';
|
|
62
|
+
|
|
63
|
+
// Use the SDK login flow (best practice — see section above)
|
|
64
|
+
const client = SurfClient.create({ appId: 'YOUR_APP_ID', chainId: 8453 });
|
|
65
|
+
await client.connectWallet('metamask');
|
|
66
|
+
await client.authenticate();
|
|
67
|
+
|
|
68
|
+
function App() {
|
|
69
|
+
return (
|
|
70
|
+
<SurfWidget
|
|
71
|
+
client={client}
|
|
72
|
+
walletAddress="0xYourWalletAddress"
|
|
73
|
+
chainId={8453}
|
|
74
|
+
/>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
That's it. The widget renders a vault card with deposit, withdraw, and activity modals fully wired up.
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## SurfWidget Props
|
|
84
|
+
|
|
85
|
+
| Prop | Type | Default | Description |
|
|
86
|
+
| --------------- | ------------------------------------------------- | -------- | -------------------------------------------- |
|
|
87
|
+
| `client` | `ISurfClient` | required | Surf client instance from `surfliquid` |
|
|
88
|
+
| `walletAddress` | `string` | required | Connected wallet address |
|
|
89
|
+
| `chainId` | `number` | `8453` | Chain ID — `8453` (Base) or `137` (Polygon) |
|
|
90
|
+
| `theme` | `SurfTheme` | `{}` | Custom colors, border radius, font |
|
|
91
|
+
| `className` | `string` | — | Extra CSS class on the root element |
|
|
92
|
+
| `onSuccess` | `(action: 'deposit' \| 'withdraw', txHash: string) => void` | — | Called after a successful transaction |
|
|
93
|
+
| `onError` | `(action: 'deposit' \| 'withdraw', error: Error) => void` | — | Called on transaction failure |
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Theming
|
|
98
|
+
|
|
99
|
+
Pass a `theme` object to customise colors, border radius, and font:
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
<SurfWidget
|
|
103
|
+
client={client}
|
|
104
|
+
walletAddress={address}
|
|
105
|
+
theme={{
|
|
106
|
+
colors: {
|
|
107
|
+
primary: '#6366f1',
|
|
108
|
+
primaryText: '#ffffff',
|
|
109
|
+
background: '#0f0f0f',
|
|
110
|
+
cardBackground: '#1a1a1a',
|
|
111
|
+
text: '#f5f5f5',
|
|
112
|
+
textSecondary: '#a1a1aa',
|
|
113
|
+
apy: '#22c55e',
|
|
114
|
+
border: '#27272a',
|
|
115
|
+
success: '#22c55e',
|
|
116
|
+
},
|
|
117
|
+
borderRadius: '12px',
|
|
118
|
+
fontFamily: 'Inter, sans-serif',
|
|
119
|
+
}}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Colors are applied as CSS custom properties on the widget root — they don't leak into the rest of your app.
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
## Headless Usage
|
|
128
|
+
|
|
129
|
+
If you want to build your own UI, use the individual components and hooks directly.
|
|
130
|
+
|
|
131
|
+
### Provider
|
|
132
|
+
|
|
133
|
+
Wrap your custom UI in `SurfProvider`:
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
import { SurfProvider } from '@aanchal16/surf-widget-sdk';
|
|
137
|
+
|
|
138
|
+
<SurfProvider config={{ client, walletAddress, chainId: 8453 }} containerRef={ref}>
|
|
139
|
+
{/* your custom UI */}
|
|
140
|
+
</SurfProvider>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Hooks
|
|
144
|
+
|
|
145
|
+
| Hook | Returns |
|
|
146
|
+
| ----------------------- | -------------------------------------------------------- |
|
|
147
|
+
| `useVault()` | `{ vault, isLoading, refetch }` — vault state |
|
|
148
|
+
| `useDeposit()` | Deposit flow state machine + `execute()` action |
|
|
149
|
+
| `useWithdraw()` | Withdraw flow state machine + `execute()` action |
|
|
150
|
+
| `useDepositBalance()` | Wallet token balance as a human-readable string |
|
|
151
|
+
| `useWithdrawableBalance()` | Max withdrawable amount from the vault |
|
|
152
|
+
| `useAgentMessages()` | Paginated AI agent activity messages |
|
|
153
|
+
| `useSurf()` | Access `walletAddress`, `chainId`, `surfClient`, `theme` |
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { useVault, useDeposit } from '@aanchal16/surf-widget-sdk';
|
|
157
|
+
|
|
158
|
+
function MyVaultUI() {
|
|
159
|
+
const { vault, isLoading } = useVault();
|
|
160
|
+
const { step, execute } = useDeposit();
|
|
161
|
+
|
|
162
|
+
if (isLoading) return <p>Loading...</p>;
|
|
163
|
+
|
|
164
|
+
return (
|
|
165
|
+
<div>
|
|
166
|
+
<p>Balance: {vault?.balance} {vault?.token.symbol}</p>
|
|
167
|
+
<p>APY: {vault?.apy}%</p>
|
|
168
|
+
<p>Earnings: ${vault?.earnings}</p>
|
|
169
|
+
<button onClick={() => execute({ asset: '0xUSDC...', amount: '100' })}>
|
|
170
|
+
Deposit
|
|
171
|
+
</button>
|
|
172
|
+
</div>
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Individual Components
|
|
178
|
+
|
|
179
|
+
```tsx
|
|
180
|
+
import {
|
|
181
|
+
VaultCard,
|
|
182
|
+
DepositModal,
|
|
183
|
+
WithdrawModal,
|
|
184
|
+
VaultActivityModal,
|
|
185
|
+
} from '@aanchal16/surf-widget-sdk';
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### UI Primitives
|
|
189
|
+
|
|
190
|
+
```tsx
|
|
191
|
+
import { Button, Modal, Tabs, StepProgress, TokenIcon } from '@aanchal16/surf-widget-sdk';
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## Supported Chains
|
|
197
|
+
|
|
198
|
+
| Chain | Chain ID |
|
|
199
|
+
| ------- | -------- |
|
|
200
|
+
| Base | `8453` |
|
|
201
|
+
| Polygon | `137` |
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
## TypeScript
|
|
206
|
+
|
|
207
|
+
All props and return types are exported:
|
|
208
|
+
|
|
209
|
+
```ts
|
|
210
|
+
import type {
|
|
211
|
+
SurfWidgetProps,
|
|
212
|
+
SurfConfig,
|
|
213
|
+
SurfTheme,
|
|
214
|
+
ISurfClient,
|
|
215
|
+
VaultInfo,
|
|
216
|
+
VaultActivity,
|
|
217
|
+
VaultDeposit,
|
|
218
|
+
AgentMessage,
|
|
219
|
+
DepositStep,
|
|
220
|
+
WithdrawStep,
|
|
221
|
+
TokenInfo,
|
|
222
|
+
ChainInfo,
|
|
223
|
+
} from '@aanchal16/surf-widget-sdk';
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
## License
|
|
229
|
+
|
|
230
|
+
MIT
|
package/dist/Base.svg
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_2569_35658)">
|
|
3
|
+
<path d="M8.984 18C13.964 18 18 13.97 18 9C18 4.03 13.964 0 8.984 0C4.26 0 0.384 3.627 0 8.244H11.917V9.757H0C0.385 14.373 4.26 18 8.984 18Z" fill="#0052FF"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<clipPath id="clip0_2569_35658">
|
|
7
|
+
<rect width="18" height="18" fill="white"/>
|
|
8
|
+
</clipPath>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
package/dist/Polygon.png
ADDED
|
Binary file
|
|
Binary file
|
package/dist/USDC.svg
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_2672_15292)">
|
|
3
|
+
<path d="M36 20C36 15.7565 34.3143 11.6869 31.3137 8.68629C28.3131 5.68571 24.2435 4 20 4C15.7565 4 11.6869 5.68571 8.68629 8.68629C5.68571 11.6869 4 15.7565 4 20C4 24.2435 5.68571 28.3131 8.68629 31.3137C11.6869 34.3143 15.7565 36 20 36C24.2435 36 28.3131 34.3143 31.3137 31.3137C34.3143 28.3131 36 24.2435 36 20ZM40 20C40 31.046 31.046 40 20 40C8.954 40 0 31.046 0 20C0 8.954 8.954 0 20 0C31.046 0 40 8.954 40 20ZM29.412 17.128C29.064 19.234 27.962 20.262 26.47 20.626C28.454 21.736 29.41 23.422 28.388 26.38C27.118 30.088 24.274 30.424 20.508 29.706L19.536 33.62L17.348 33.078L18.318 29.164C17.722 29.004 17.114 28.888 16.52 28.718L15.55 32.632L13.366 32.092L14.336 28.176L9.984 26.992L11.064 24.224C11.064 24.224 12.708 24.676 12.684 24.648C13.292 24.796 13.59 24.368 13.712 24.072L15.264 17.798L16.396 13.338C16.444 12.856 16.292 12.224 15.402 11.984C15.462 11.95 13.802 11.588 13.802 11.588L14.448 8.964L18.934 10.076L19.884 6.242L22.144 6.802L21.194 10.636C21.776 10.764 22.342 10.916 22.926 11.066L23.874 7.232L26.074 7.776L25.098 11.71C27.872 12.73 29.87 14.236 29.412 17.128ZM19.212 17.908C20.526 18.304 24.422 19.474 25.078 16.868C25.69 14.388 22.314 13.632 20.746 13.28C20.5593 13.24 20.4027 13.2033 20.276 13.17L19.102 17.876L19.212 17.908ZM17.184 25.548L17.374 25.606C18.994 26.086 23.586 27.452 24.21 24.866C24.85 22.374 20.722 21.404 18.872 20.968C18.668 20.9213 18.496 20.88 18.356 20.844L17.184 25.548Z" fill="#0A49EC"/>
|
|
4
|
+
</g>
|
|
5
|
+
<g clip-path="url(#clip1_2672_15292)">
|
|
6
|
+
<g clip-path="url(#clip2_2672_15292)">
|
|
7
|
+
<path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#3E73C4"/>
|
|
8
|
+
<path d="M25.0279 22.6553C25.0279 20.0003 23.4279 19.0903 20.2279 18.7103C17.9429 18.4066 17.4867 17.8003 17.4867 16.7378C17.4867 15.6753 18.2492 14.9928 19.7717 14.9928C21.1429 14.9928 21.9054 15.4478 22.2854 16.5866C22.3253 16.6965 22.3978 16.7916 22.4932 16.8593C22.5885 16.927 22.7023 16.9639 22.8192 16.9653H24.0379C24.1083 16.9672 24.1784 16.9548 24.2438 16.9288C24.3093 16.9028 24.3687 16.8637 24.4186 16.8141C24.4686 16.7644 24.5079 16.7051 24.5342 16.6398C24.5605 16.5744 24.5732 16.5045 24.5717 16.4341V16.3591C24.4227 15.5352 24.0059 14.7836 23.3859 14.221C22.7658 13.6583 21.9774 13.3163 21.1429 13.2478V11.4278C21.1429 11.1241 20.9142 10.8966 20.5342 10.8203H19.3904C19.0867 10.8203 18.8579 11.0478 18.7817 11.4278V13.1728C16.4954 13.4753 15.0492 14.9928 15.0492 16.8903C15.0492 19.3928 16.5717 20.3791 19.7717 20.7591C21.9054 21.1378 22.5904 21.5941 22.5904 22.8078C22.5904 24.0203 21.5242 24.8553 20.0767 24.8553C18.0954 24.8553 17.4104 24.0216 17.1817 22.8828C17.1067 22.5803 16.8767 22.4278 16.6479 22.4278H15.3529C15.2826 22.4261 15.2127 22.4387 15.1474 22.4647C15.0822 22.4908 15.0228 22.5299 14.973 22.5795C14.9233 22.6292 14.8841 22.6884 14.8579 22.7537C14.8316 22.8189 14.8189 22.8888 14.8204 22.9591V23.0341C15.1242 24.9316 16.3442 26.2966 18.8579 26.6766V28.4978C18.8579 28.8003 19.0867 29.0291 19.4667 29.1041H20.6104C20.9142 29.1041 21.1429 28.8766 21.2192 28.4978V26.6753C23.5054 26.2966 25.0279 24.7028 25.0279 22.6541V22.6553Z" fill="white"/>
|
|
9
|
+
<path d="M16.1151 30.6213C10.1726 28.4963 7.12511 21.8962 9.33511 16.055C10.4776 12.8675 12.9914 10.4412 16.1151 9.3025C16.4201 9.15125 16.5714 8.92375 16.5714 8.54375V7.48125C16.5714 7.17875 16.4201 6.95125 16.1151 6.875C16.0389 6.875 15.8864 6.875 15.8101 6.95C14.0957 7.48541 12.504 8.35466 11.1269 9.50772C9.74975 10.6608 8.6143 12.0749 7.78592 13.6685C6.95754 15.2622 6.45258 17.004 6.30012 18.7937C6.14767 20.5833 6.35073 22.3854 6.89761 24.0963C8.26761 28.3463 11.5439 31.6087 15.8101 32.9737C16.1151 33.125 16.4201 32.9737 16.4951 32.67C16.5714 32.595 16.5714 32.5175 16.5714 32.3662V31.3037C16.5714 31.0762 16.3439 30.7738 16.1151 30.6213ZM24.1901 6.95125C23.8851 6.79875 23.5801 6.95125 23.5051 7.25375C23.4289 7.33 23.4289 7.40625 23.4289 7.5575V8.62C23.4289 8.92375 23.6564 9.22625 23.8851 9.37875C29.8276 11.5037 32.8751 18.1038 30.6651 23.945C29.5226 27.1325 27.0089 29.5588 23.8851 30.6975C23.5801 30.8488 23.4289 31.0763 23.4289 31.4563V32.5187C23.4289 32.8212 23.5801 33.0487 23.8851 33.125C23.9614 33.125 24.1139 33.125 24.1901 33.05C25.9046 32.5146 27.4962 31.6453 28.8733 30.4923C30.2505 29.3392 31.3859 27.9251 32.2143 26.3315C33.0427 24.7378 33.5476 22.996 33.7001 21.2063C33.8526 19.4167 33.6495 17.6146 33.1026 15.9037C31.7326 11.5787 28.3801 8.31625 24.1901 6.95125Z" fill="white"/>
|
|
10
|
+
</g>
|
|
11
|
+
</g>
|
|
12
|
+
<defs>
|
|
13
|
+
<clipPath id="clip0_2672_15292">
|
|
14
|
+
<rect width="40" height="40" fill="white"/>
|
|
15
|
+
</clipPath>
|
|
16
|
+
<clipPath id="clip1_2672_15292">
|
|
17
|
+
<rect width="40" height="40" rx="20" fill="white"/>
|
|
18
|
+
</clipPath>
|
|
19
|
+
<clipPath id="clip2_2672_15292">
|
|
20
|
+
<rect width="40" height="40" fill="white"/>
|
|
21
|
+
</clipPath>
|
|
22
|
+
</defs>
|
|
23
|
+
</svg>
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[data-surf-widget]{--surf-primary: #3b82f6;--surf-primary-hover: #2563eb;--surf-primary-text: #ffffff;--surf-background: #f3f4f6;--surf-card-background: #ffffff;--surf-text: #111827;--surf-text-secondary: #6b7280;--surf-apy: #3b82f6;--surf-border: #e5e7eb;--surf-border-hover: #bfdbfe;--surf-success: #10b981;--surf-border-radius: 20px;--surf-radius-sm: 8px;--surf-radius-md: 10px;--surf-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .04);--surf-shadow-md: 0 4px 12px 0 rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--surf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-family:var(--surf-font-family);box-sizing:border-box;-webkit-font-smoothing:antialiased}[data-surf-widget] *,[data-surf-widget] *:before,[data-surf-widget] *:after{box-sizing:inherit}[data-surf-widget] .surf-widget-shell{background:var(--surf-background);border-radius:28px;padding:14px;width:100%}[data-surf-widget] .surf-card{background:var(--surf-card-background);border-radius:20px;border:1.5px solid var(--surf-border);padding:20px;box-shadow:0 2px 16px #3b64dc12,0 1px 3px #0000000a;transition:box-shadow .2s ease,border-color .2s ease;width:100%}[data-surf-widget] .surf-card:hover{box-shadow:0 4px 24px #3b64dc1c,0 1px 4px #0000000d;border-color:var(--surf-border-hover)}[data-surf-widget] .surf-card--selected{border-color:var(--surf-primary);box-shadow:0 0 0 3px #3b82f61a,0 4px 20px #3b64dc1f;background:var(--surf-card-background)}[data-surf-widget] .surf-token-icon{border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surf-primary);color:var(--surf-primary-text);font-weight:700;font-size:13px;flex-shrink:0;overflow:hidden}[data-surf-widget] .surf-token-icon img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}[data-surf-widget] .surf-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:54px}[data-surf-widget] .surf-token-meta{display:flex;align-items:center;gap:11px}[data-surf-widget] .surf-token-name{font-size:15px;font-weight:700;color:var(--surf-text);line-height:1.25}[data-surf-widget] .surf-token-symbol{color:var(--surf-text-secondary);font-weight:400;font-size:13px}[data-surf-widget] .surf-chain-badge{display:flex;align-items:center;gap:4px;margin-top:3px}[data-surf-widget] .surf-chain-icon{width:14px;height:14px;flex-shrink:0}[data-surf-widget] .surf-chain-name{font-size:11px;color:var(--surf-text-secondary);font-weight:500}[data-surf-widget] .surf-balance-amount{font-size:26px;font-weight:700;color:var(--surf-text);line-height:1;letter-spacing:-.5px}[data-surf-widget] .surf-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}[data-surf-widget] .surf-stats-row{display:flex;align-items:center;gap:0;flex-shrink:0}[data-surf-widget] .surf-stat{display:flex;flex-direction:column;gap:3px;padding-right:16px}[data-surf-widget] .surf-stat-divider{width:1px;height:28px;background:var(--surf-border);margin-right:16px;flex-shrink:0}[data-surf-widget] .surf-stat-label{font-size:10.5px;color:var(--surf-text-secondary);font-weight:400}[data-surf-widget] .surf-stat-value{font-size:13px;font-weight:700;color:var(--surf-text)}[data-surf-widget] .surf-stat-value--apy{color:var(--surf-apy)}[data-surf-widget] .surf-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}[data-surf-widget] .surf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;font-family:var(--surf-font-family);font-weight:600;transition:background .15s ease,border-color .15s ease,opacity .15s ease,box-shadow .15s ease;white-space:nowrap;text-decoration:none;outline:none;padding:0;background:none}[data-surf-widget] .surf-btn:disabled{opacity:.45;cursor:not-allowed}[data-surf-widget] .surf-btn:focus-visible{box-shadow:0 0 0 3px #3b82f659}[data-surf-widget] .surf-btn--sm{font-size:11.5px;padding:5px 13px;border-radius:20px}[data-surf-widget] .surf-btn--md{font-size:13px;padding:8px 18px;border-radius:22px}[data-surf-widget] .surf-btn--lg{font-size:15px;font-weight:600;padding:16px 24px;border-radius:50px;width:100%}[data-surf-widget] .surf-btn--primary{background:linear-gradient(180deg,#5ba3f9,#2d7cf4);color:var(--surf-primary-text);border:none}[data-surf-widget] .surf-btn--primary:hover:not(:disabled){background:linear-gradient(180deg,#4a95f5,#1e6fe8)}[data-surf-widget] .surf-btn--outline{background:transparent;color:var(--surf-primary);border:1.5px solid var(--surf-border)}[data-surf-widget] .surf-btn--outline:hover:not(:disabled){border-color:var(--surf-primary);background:#3b82f60a}[data-surf-widget] .surf-btn--soft{background:#3b82f614;color:var(--surf-primary);border:1.5px solid rgba(59,130,246,.15)}[data-surf-widget] .surf-btn--soft:hover:not(:disabled){background:#3b82f621;border-color:#3b82f640}[data-surf-widget] .surf-btn--ghost{background:transparent;color:var(--surf-text-secondary);border:1.5px solid transparent}[data-surf-widget] .surf-btn--ghost:hover:not(:disabled){color:var(--surf-text);background:#0000000a}[data-surf-widget] .surf-btn--full{width:100%}[data-surf-widget] .surf-btn-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:surf-spin .65s linear infinite}[data-surf-widget] .surf-dropdown-wrap{position:relative}[data-surf-widget] .surf-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surf-card-background);border-radius:var(--surf-radius-md);box-shadow:0 8px 24px #0000001f,0 2px 6px #0000000f;overflow:hidden;z-index:50;border:1px solid var(--surf-border);min-width:160px}[data-surf-widget] .surf-dropdown-item{display:block;width:100%;padding:12px 16px;font-size:13px;font-weight:500;color:var(--surf-text);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--surf-font-family);transition:background .1s}[data-surf-widget] .surf-dropdown-item:hover{background:var(--surf-border);color:var(--surf-primary)}[data-surf-widget] .surf-dropdown-item+.surf-dropdown-item{border-top:1px solid var(--surf-border)}[data-surf-widget] .surf-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000061;display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}[data-surf-widget] .surf-modal{background:var(--surf-card-background);border-radius:24px;box-shadow:0 24px 64px #00000024,0 4px 16px #0000000f;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;position:relative}[data-surf-widget] .surf-modal--wide{max-width:640px}[data-surf-widget] .surf-modal-close{position:absolute;top:18px;right:20px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--surf-text-secondary);transition:background .15s,color .15s;z-index:1}[data-surf-widget] .surf-modal-close:hover{background:var(--surf-border);color:var(--surf-text)}[data-surf-widget] .surf-tabs{display:flex;gap:2px;margin-top:24px}[data-surf-widget] .surf-tabs--pill{background:var(--surf-border);border-radius:50px;padding:4px;max-width:320px;width:100%;margin:0 auto}[data-surf-widget] .surf-tab{flex:1;padding:9px 20px;font-size:15px;font-weight:500;color:var(--surf-text-secondary);background:none;border:none;cursor:pointer;border-radius:50px;font-family:var(--surf-font-family);transition:background .15s,color .15s,box-shadow .15s;text-align:center}[data-surf-widget] .surf-tabs--pill .surf-tab--active{background:var(--surf-card-background);color:var(--surf-text);font-weight:700;box-shadow:0 1px 4px #0000001f,0 1px 2px #00000012}[data-surf-widget] .surf-tabs--underline{border-bottom:1.5px solid var(--surf-border);padding:0;gap:0;background:none;border-radius:0}[data-surf-widget] .surf-tabs--underline .surf-tab{border-radius:0;padding:10px 20px;border-bottom:2px solid transparent;margin-bottom:-1.5px}[data-surf-widget] .surf-tabs--underline .surf-tab--active{color:var(--surf-text);font-weight:600;border-bottom-color:var(--surf-primary);background:none;box-shadow:none}[data-surf-widget] .surf-steps{display:flex;flex-direction:column;margin-top:4px}[data-surf-widget] .surf-step{display:flex;align-items:flex-start;gap:12px}[data-surf-widget] .surf-step-icon-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:28px}[data-surf-widget] .surf-step-icon{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}[data-surf-widget] .surf-step-icon--pending{background:var(--surf-card-background);border:2px solid var(--surf-border)}[data-surf-widget] .surf-step-icon--active{background:var(--surf-card-background);border:2.5px solid var(--surf-primary);box-shadow:0 0 0 3px #3b82f61f}[data-surf-widget] .surf-step-active-dot{display:block;width:10px;height:10px;border-radius:50%;background:var(--surf-primary)}[data-surf-widget] .surf-step-icon--completed{background:var(--surf-primary);border:2px solid var(--surf-primary)}[data-surf-widget] .surf-step-icon--error{background:#fef2f2;border:2px solid #fca5a5}[data-surf-widget] .surf-step--active{background:#3b82f60d;border-radius:10px;margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}[data-surf-widget] .surf-step-spinner{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:surf-spin .65s linear infinite}[data-surf-widget] .surf-step-line--active{background:transparent!important;border-left:1.5px dashed var(--surf-border-hover);width:0}[data-surf-widget] .surf-step-line{width:1.5px;flex:1;min-height:16px;margin:3px 0;background:var(--surf-border)}[data-surf-widget] .surf-step-line--done{background:var(--surf-primary)}[data-surf-widget] .surf-step-body{flex:1;padding-bottom:28px;min-width:0}[data-surf-widget] .surf-step:last-child .surf-step-body{padding-bottom:0}[data-surf-widget] .surf-step-title{font-size:13px;font-weight:600;color:var(--surf-text);line-height:1.3;padding-top:4px}[data-surf-widget] .surf-step--pending .surf-step-title{color:var(--surf-text-secondary);font-weight:500}[data-surf-widget] .surf-step-desc{font-size:11.5px;color:var(--surf-text-secondary);margin-top:2px;line-height:1.45}[data-surf-widget] .surf-step-explore{flex-shrink:0;padding-top:4px}[data-surf-widget] .surf-step-link{font-size:11.5px;color:var(--surf-primary);text-decoration:none;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}[data-surf-widget] .surf-step-link:hover{text-decoration:underline}[data-surf-widget] .surf-step-link--ghost{color:var(--surf-border-hover);cursor:default;pointer-events:none}[data-surf-widget] .surf-modal-body{padding:22px 24px 28px;background:var(--surf-card-background)}[data-surf-widget] .surf-modal-subtitle{font-size:14px;color:var(--surf-text-secondary);margin-bottom:20px;line-height:1.5}[data-surf-widget] .surf-field{margin-bottom:14px;display:flex;flex-direction:column}[data-surf-widget] .surf-field .surf-select-box{flex:1}[data-surf-widget] .surf-label{font-size:13px;font-weight:400;color:var(--surf-text-secondary);margin-bottom:7px;display:block}[data-surf-widget] .surf-select-box{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:12px;border:1.5px solid var(--surf-border);background:var(--surf-background);font-size:14px;font-weight:600;color:var(--surf-text)}[data-surf-widget] .surf-select-box--apy{font-size:11px;font-weight:600;color:var(--surf-primary);white-space:nowrap;flex-shrink:0}[data-surf-widget] .surf-input-wrap{position:relative}[data-surf-widget] .surf-input{width:100%;padding:11px 50px 11px 12px;border-radius:var(--surf-radius-md);border:1.5px solid var(--surf-border);background:var(--surf-background);font-size:15px;font-weight:500;color:var(--surf-text);font-family:var(--surf-font-family);outline:none;transition:border-color .15s,box-shadow .15s;-moz-appearance:textfield}[data-surf-widget] .surf-input::-webkit-outer-spin-button,[data-surf-widget] .surf-input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}[data-surf-widget] .surf-input:focus{border-color:var(--surf-primary);box-shadow:0 0 0 3px #3b82f61f}[data-surf-widget] .surf-input-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:var(--surf-text-secondary);pointer-events:none}[data-surf-widget] .surf-pct-row{display:flex;gap:6px;margin-top:8px}[data-surf-widget] .surf-pct-btn{flex:1;padding:5px 0;font-size:11px;font-weight:600;color:var(--surf-primary);border:1.5px solid rgba(59,130,246,.25);border-radius:6px;background:none;cursor:pointer;font-family:var(--surf-font-family);transition:background .15s,border-color .15s}[data-surf-widget] .surf-pct-btn:hover{background:#3b82f612;border-color:var(--surf-primary)}[data-surf-widget] .surf-available{font-size:11px;color:var(--surf-text-secondary);margin-top:6px}[data-surf-widget] .surf-available strong{color:var(--surf-text);font-weight:600}[data-surf-widget] .surf-amount-box{background:var(--surf-background);border:1.5px solid var(--surf-border);border-radius:12px;padding:14px 16px;margin-bottom:0}[data-surf-widget] .surf-amount-input{width:100%;border:none;background:transparent;font-size:28px;font-weight:600;color:var(--surf-text);font-family:var(--surf-font-family);outline:none;padding:4px 0;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}[data-surf-widget] .surf-amount-input::-webkit-outer-spin-button,[data-surf-widget] .surf-amount-input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}[data-surf-widget] .surf-amount-input::-moz-placeholder{color:var(--surf-text)}[data-surf-widget] .surf-amount-input::placeholder{color:var(--surf-text)}[data-surf-widget] .surf-amount-hint{font-size:13px;color:var(--surf-text-secondary);display:inline-flex;align-items:center;gap:4px}[data-surf-widget] .surf-pct-link{background:none;border:none;padding:0;font-size:13px;font-weight:600;color:var(--surf-primary);cursor:pointer;font-family:var(--surf-font-family);transition:opacity .15s}[data-surf-widget] .surf-pct-link:hover{opacity:.7}[data-surf-widget] .surf-refresh-btn{background:none;border:none;padding:0;cursor:pointer;color:var(--surf-text-secondary);display:inline-flex;align-items:center;transition:color .15s}[data-surf-widget] .surf-refresh-btn:hover{color:var(--surf-primary)}[data-surf-widget] .surf-disclaimer{font-size:10px;color:var(--surf-text-secondary);text-align:center;line-height:1.65;margin-top:14px}[data-surf-widget] .surf-disclaimer a{color:var(--surf-primary);text-decoration:none}[data-surf-widget] .surf-disclaimer a:hover{text-decoration:underline}[data-surf-widget] .surf-error-box{margin-top:12px;padding:10px 14px;border-radius:var(--surf-radius-sm);background:#fef2f2;border:1px solid #fca5a5;font-size:12.5px;color:#dc2626;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-surf-widget] .surf-processing-sub{font-size:12px;color:var(--surf-text-secondary)}[data-surf-widget] .surf-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 24px 24px}[data-surf-widget] .surf-success-icon{width:64px;height:64px;border-radius:50%;background:#10b9811f;display:flex;align-items:center;justify-content:center;margin-bottom:16px}[data-surf-widget] .surf-success-icon-inner{width:48px;height:48px;border-radius:50%;background:var(--surf-success);display:flex;align-items:center;justify-content:center}[data-surf-widget] .surf-success-title{font-size:20px;font-weight:700;color:var(--surf-text);margin-bottom:8px}[data-surf-widget] .surf-success-desc{font-size:13px;color:var(--surf-text-secondary);line-height:1.6;margin-bottom:24px;max-width:280px}[data-surf-widget] .surf-success-desc strong{color:var(--surf-text);font-weight:600}[data-surf-widget] .surf-success-actions{display:flex;gap:10px;width:100%}[data-surf-widget] .surf-activity-list{display:flex;flex-direction:column;gap:10px}[data-surf-widget] .surf-activity-item{display:flex;align-items:flex-start;background:var(--surf-card-background);border:1px solid var(--surf-border);border-radius:14px;padding:12px 14px;gap:12px}[data-surf-widget] .surf-activity-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}[data-surf-widget] .surf-activity-icon--in{background:#10b9811a}[data-surf-widget] .surf-activity-icon--out{background:#ef44441a}[data-surf-widget] .surf-activity-desc{font-size:13px;color:var(--surf-text);line-height:1.4;flex:1}[data-surf-widget] .surf-activity-meta{display:flex;align-items:center;justify-content:space-between;margin-top:4px}[data-surf-widget] .surf-activity-protocol{font-size:11px;color:var(--surf-text-secondary);display:flex;align-items:center;gap:4px}[data-surf-widget] .surf-activity-link{font-size:11px;color:var(--surf-primary);text-decoration:none;display:inline-flex;align-items:center;gap:2px}[data-surf-widget] .surf-activity-link:hover{text-decoration:underline}[data-surf-widget] .surf-deposits-table{width:100%;border-collapse:collapse}[data-surf-widget] .surf-deposits-th{font-size:11px;font-weight:500;color:var(--surf-text-secondary);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--surf-border)}[data-surf-widget] .surf-deposits-th:last-child{text-align:right}[data-surf-widget] .surf-deposits-td{font-size:13px;color:var(--surf-text);padding:14px 0;border-bottom:1px solid var(--surf-border);vertical-align:middle}[data-surf-widget] .surf-deposits-tr:last-child .surf-deposits-td{border-bottom:none}[data-surf-widget] .surf-deposits-token{display:flex;align-items:center;gap:8px;font-weight:600}[data-surf-widget] .surf-deposits-chain{display:flex;align-items:center;gap:5px}[data-surf-widget] .surf-deposits-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end}[data-surf-widget] .surf-link-btn{background:none;border:none;color:var(--surf-primary);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--surf-font-family);padding:0;text-decoration:none}[data-surf-widget] .surf-link-btn:hover{text-decoration:underline}[data-surf-widget] .surf-ext-link{font-size:13px;color:var(--surf-text-secondary);text-decoration:none;display:inline-flex;align-items:center;gap:3px}[data-surf-widget] .surf-ext-link:hover{color:var(--surf-text)}[data-surf-widget] .surf-skeleton{background:linear-gradient(90deg,var(--surf-border) 25%,var(--surf-background) 50%,var(--surf-border) 75%);background-size:200% 100%;animation:surf-shimmer 1.4s ease-in-out infinite;border-radius:6px}[data-surf-widget] .surf-skeleton-card{background:var(--surf-card-background);border-radius:var(--surf-border-radius);border:1.5px solid var(--surf-border);padding:20px}[data-surf-widget] .surf-empty{text-align:center;padding:32px 16px;color:var(--surf-text-secondary);font-size:13px}[data-surf-widget] .surf-flex{display:flex}[data-surf-widget] .surf-flex-col{flex-direction:column}[data-surf-widget] .surf-items-center{align-items:center}[data-surf-widget] .surf-justify-between{justify-content:space-between}[data-surf-widget] .surf-gap-2{gap:8px}[data-surf-widget] .surf-flex-1{flex:1}[data-surf-widget] .surf-w-full{width:100%}@keyframes surf-spin{to{transform:rotate(360deg)}}@keyframes surf-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes surf-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}[data-surf-widget] .surf-fade-in{animation:surf-fade-in .2s ease-out}
|