@varity-labs/ui-kit 2.0.0-beta.5 → 2.0.0-beta.6
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/LICENSE +3 -3
- package/README.md +61 -28
- package/dist/components/Analytics/__tests__/DataTable.test.d.ts +2 -0
- package/dist/components/Analytics/__tests__/DataTable.test.d.ts.map +1 -0
- package/dist/components/Analytics/__tests__/DataTable.test.js +113 -0
- package/dist/components/Analytics/__tests__/DataTable.test.js.map +1 -0
- package/dist/components/Dashboard/__tests__/EmptyState.test.d.ts +2 -0
- package/dist/components/Dashboard/__tests__/EmptyState.test.d.ts.map +1 -0
- package/dist/components/Dashboard/__tests__/EmptyState.test.js +81 -0
- package/dist/components/Dashboard/__tests__/EmptyState.test.js.map +1 -0
- package/dist/components/Dashboard/__tests__/KPICard.test.d.ts +2 -0
- package/dist/components/Dashboard/__tests__/KPICard.test.d.ts.map +1 -0
- package/dist/components/Dashboard/__tests__/KPICard.test.js +78 -0
- package/dist/components/Dashboard/__tests__/KPICard.test.js.map +1 -0
- package/dist/components/Onramp/BuyUSDCButton.d.ts +4 -4
- package/dist/components/Onramp/BuyUSDCButton.d.ts.map +1 -1
- package/dist/components/Onramp/BuyUSDCButton.js +5 -5
- package/dist/components/Onramp/BuyUSDCButton.js.map +1 -1
- package/dist/components/Onramp/OnrampWidget.d.ts +4 -4
- package/dist/components/Onramp/OnrampWidget.d.ts.map +1 -1
- package/dist/components/Onramp/OnrampWidget.js +10 -11
- package/dist/components/Onramp/OnrampWidget.js.map +1 -1
- package/dist/components/Onramp/index.d.ts +3 -4
- package/dist/components/Onramp/index.d.ts.map +1 -1
- package/dist/components/Onramp/index.js +3 -4
- package/dist/components/Onramp/index.js.map +1 -1
- package/dist/components/PaymentWidget/PaymentWidget.d.ts +15 -6
- package/dist/components/PaymentWidget/PaymentWidget.d.ts.map +1 -1
- package/dist/components/PaymentWidget/PaymentWidget.js +79 -47
- package/dist/components/PaymentWidget/PaymentWidget.js.map +1 -1
- package/dist/components/PaymentWidget/useSeamlessPayment.d.ts +51 -0
- package/dist/components/PaymentWidget/useSeamlessPayment.d.ts.map +1 -0
- package/dist/components/PaymentWidget/useSeamlessPayment.js +167 -0
- package/dist/components/PaymentWidget/useSeamlessPayment.js.map +1 -0
- package/dist/components/PaymentWidget/useVarityPayment.js +1 -1
- package/dist/components/PaymentWidget/useVarityPayment.js.map +1 -1
- package/dist/components/Payments/CheckoutModal.d.ts.map +1 -1
- package/dist/components/Payments/CheckoutModal.js +16 -5
- package/dist/components/Payments/CheckoutModal.js.map +1 -1
- package/dist/components/Payments/constants.d.ts +1 -1
- package/dist/components/Payments/constants.d.ts.map +1 -1
- package/dist/components/Payments/constants.js +1 -1
- package/dist/components/Payments/constants.js.map +1 -1
- package/dist/components/Privy/PrivyProtectedRoute.d.ts +6 -8
- package/dist/components/Privy/PrivyProtectedRoute.d.ts.map +1 -1
- package/dist/components/Privy/PrivyProtectedRoute.js +5 -7
- package/dist/components/Privy/PrivyProtectedRoute.js.map +1 -1
- package/dist/components/Privy/__tests__/InitScreens.test.d.ts +2 -0
- package/dist/components/Privy/__tests__/InitScreens.test.d.ts.map +1 -0
- package/dist/components/Privy/__tests__/InitScreens.test.js +74 -0
- package/dist/components/Privy/__tests__/InitScreens.test.js.map +1 -0
- package/dist/components/Privy/index.d.ts +2 -1
- package/dist/components/Privy/index.d.ts.map +1 -1
- package/dist/components/Privy/index.js +1 -1
- package/dist/components/Privy/index.js.map +1 -1
- package/dist/index.d.ts +3 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -16
- package/dist/index.js.map +1 -1
- package/dist/modules/cache/CacheClient.d.ts +48 -0
- package/dist/modules/cache/CacheClient.d.ts.map +1 -0
- package/dist/modules/cache/CacheClient.js +59 -0
- package/dist/modules/cache/CacheClient.js.map +1 -0
- package/dist/providers/PrivyStack.d.ts +21 -23
- package/dist/providers/PrivyStack.d.ts.map +1 -1
- package/dist/providers/PrivyStack.js +20 -22
- package/dist/providers/PrivyStack.js.map +1 -1
- package/dist/providers/VarityDashboardProvider.js.map +1 -1
- package/dist/providers/index.d.ts +2 -2
- package/dist/providers/index.d.ts.map +1 -1
- package/dist/providers/index.js +4 -4
- package/dist/providers/index.js.map +1 -1
- package/dist/wallets/SmartWalletProvider.d.ts +10 -10
- package/dist/wallets/SmartWalletProvider.js +6 -6
- package/dist/wallets/SmartWalletProvider.js.map +1 -1
- package/dist/wallets/config.d.ts +30 -7
- package/dist/wallets/config.d.ts.map +1 -1
- package/dist/wallets/config.js +29 -6
- package/dist/wallets/config.js.map +1 -1
- package/dist/wallets/index.d.ts +1 -1
- package/dist/wallets/index.d.ts.map +1 -1
- package/dist/wallets/index.js +1 -1
- package/dist/wallets/index.js.map +1 -1
- package/package.json +7 -7
package/LICENSE
CHANGED
|
@@ -22,10 +22,10 @@ SOFTWARE.
|
|
|
22
22
|
|
|
23
23
|
---
|
|
24
24
|
|
|
25
|
-
Varity SDK -
|
|
25
|
+
Varity SDK - Web3 Operating System
|
|
26
26
|
|
|
27
|
-
Build
|
|
27
|
+
Build and deploy apps on Varity L3 with 70-85% cost savings vs traditional cloud.
|
|
28
28
|
|
|
29
|
-
For more information, visit https://varity.so
|
|
29
|
+
For more information, visit https://www.varity.so
|
|
30
30
|
|
|
31
31
|
"Powered by Varity" attribution is required when using this SDK.
|
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@varity-labs/ui-kit)
|
|
4
4
|
[](https://github.com/varity-labs/varity-sdk/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
Production-ready React component library for building applications on Varity.
|
|
6
|
+
Production-ready React component library for building applications on Varity. Dashboard layouts, analytics widgets, authentication, and payments -- everything you need to build a full SaaS app.
|
|
7
7
|
|
|
8
8
|
## Install
|
|
9
9
|
|
|
@@ -11,6 +11,8 @@ Production-ready React component library for building applications on Varity. 19
|
|
|
11
11
|
npm install @varity-labs/ui-kit @varity-labs/sdk @varity-labs/types
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
+
Peer dependencies: `react` and `react-dom` 18+.
|
|
15
|
+
|
|
14
16
|
## Quick Start
|
|
15
17
|
|
|
16
18
|
```tsx
|
|
@@ -25,7 +27,7 @@ function App() {
|
|
|
25
27
|
}
|
|
26
28
|
```
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
Authentication, theming, and providers are all configured automatically with zero setup.
|
|
29
31
|
|
|
30
32
|
## Components
|
|
31
33
|
|
|
@@ -63,7 +65,7 @@ That's it — authentication, theming, and providers are all configured automati
|
|
|
63
65
|
|-----------|-------------|
|
|
64
66
|
| `Badge` | Status badges (+ PriorityBadge, ProjectStatusBadge, TaskStatusBadge, RoleBadge) |
|
|
65
67
|
| `Avatar` + `AvatarGroup` | User avatars |
|
|
66
|
-
| `
|
|
68
|
+
| `ProgressBar` | Progress indicator bar |
|
|
67
69
|
|
|
68
70
|
### Navigation (2)
|
|
69
71
|
|
|
@@ -72,7 +74,7 @@ That's it — authentication, theming, and providers are all configured automati
|
|
|
72
74
|
| `CommandPalette` | Cmd+K command search and navigation |
|
|
73
75
|
| `Breadcrumb` | Navigation breadcrumbs |
|
|
74
76
|
|
|
75
|
-
### Dashboard
|
|
77
|
+
### Dashboard (7)
|
|
76
78
|
|
|
77
79
|
| Component | Description |
|
|
78
80
|
|-----------|-------------|
|
|
@@ -80,13 +82,16 @@ That's it — authentication, theming, and providers are all configured automati
|
|
|
80
82
|
| `DashboardHeader` | Top navigation bar |
|
|
81
83
|
| `DashboardSidebar` | Side navigation |
|
|
82
84
|
| `DashboardFooter` | Footer |
|
|
85
|
+
| `KPICard` | Key performance indicator card |
|
|
86
|
+
| `EmptyState` | Empty state placeholder with presets |
|
|
87
|
+
| `LoadingSkeleton` | Dashboard loading skeleton (+ SkeletonText, SkeletonCard, SkeletonTable, SkeletonList) |
|
|
83
88
|
|
|
84
89
|
### Analytics (6)
|
|
85
90
|
|
|
86
91
|
| Component | Description |
|
|
87
92
|
|-----------|-------------|
|
|
88
93
|
| `DataTable` | Sortable, filterable data table |
|
|
89
|
-
| `
|
|
94
|
+
| `EnhancedKPICard` | Enhanced KPI card with trends |
|
|
90
95
|
| `AnalyticsCard` | Analytics data card |
|
|
91
96
|
| `ChartContainer` | Chart wrapper with actions |
|
|
92
97
|
| `MetricDisplay` | Metric value display |
|
|
@@ -102,11 +107,11 @@ That's it — authentication, theming, and providers are all configured automati
|
|
|
102
107
|
|
|
103
108
|
## Authentication
|
|
104
109
|
|
|
105
|
-
Built-in authentication
|
|
110
|
+
Built-in authentication -- email, Google, and social login with zero configuration:
|
|
106
111
|
|
|
107
112
|
```tsx
|
|
108
|
-
import { PrivyStack } from '@varity-labs/ui-kit'
|
|
109
|
-
import {
|
|
113
|
+
import { PrivyStack, PrivyLoginButton } from '@varity-labs/ui-kit'
|
|
114
|
+
import { useAuth } from '@varity-labs/ui-kit'
|
|
110
115
|
|
|
111
116
|
function App() {
|
|
112
117
|
return (
|
|
@@ -117,7 +122,7 @@ function App() {
|
|
|
117
122
|
}
|
|
118
123
|
|
|
119
124
|
function Dashboard() {
|
|
120
|
-
const { login, logout, authenticated, user } =
|
|
125
|
+
const { login, logout, authenticated, user } = useAuth()
|
|
121
126
|
|
|
122
127
|
if (!authenticated) {
|
|
123
128
|
return <button onClick={login}>Sign In</button>
|
|
@@ -134,26 +139,44 @@ function Dashboard() {
|
|
|
134
139
|
|
|
135
140
|
### Auth Components
|
|
136
141
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
+
| Component | Description |
|
|
143
|
+
|-----------|-------------|
|
|
144
|
+
| `PrivyLoginButton` | Drop-in login button |
|
|
145
|
+
| `PrivyUserProfile` | User profile display |
|
|
146
|
+
| `PrivyProtectedRoute` | Route protection wrapper |
|
|
147
|
+
| `PrivyReadyGate` | Loading gate during initialization |
|
|
148
|
+
|
|
149
|
+
### Auth Hooks
|
|
150
|
+
|
|
151
|
+
| Hook | Description |
|
|
152
|
+
|------|-------------|
|
|
153
|
+
| `useAuth` | Authentication state and actions |
|
|
154
|
+
| `useSignIn` | Trigger sign-in flow |
|
|
155
|
+
| `useSignOut` | Trigger sign-out flow |
|
|
156
|
+
|
|
157
|
+
## Payments (Coming Soon)
|
|
142
158
|
|
|
143
|
-
|
|
159
|
+
Payment components for app monetization (90% to developer, 10% platform fee).
|
|
144
160
|
|
|
145
|
-
|
|
161
|
+
> **Note:** Payment components are exported but the underlying payment processing is not yet live. APIs will change before stable release.
|
|
146
162
|
|
|
147
163
|
```tsx
|
|
148
|
-
import { PaymentWidget, PaymentGate } from '@varity-labs/ui-kit'
|
|
164
|
+
import { PaymentWidget, PaymentGate, useVarityPayment } from '@varity-labs/ui-kit'
|
|
149
165
|
|
|
150
|
-
//
|
|
151
|
-
|
|
166
|
+
// Wrap a trigger element -- opens checkout on click
|
|
167
|
+
// appId is a number (from Varity App Registry)
|
|
168
|
+
// price is in cents (e.g., 9900 = $99.00)
|
|
169
|
+
<PaymentWidget appId={123} price={9900} onSuccess={(txHash) => console.log('Paid!', txHash)}>
|
|
170
|
+
<button>Buy Premium - $99</button>
|
|
171
|
+
</PaymentWidget>
|
|
152
172
|
|
|
153
|
-
// Paywall
|
|
154
|
-
<PaymentGate appId=
|
|
173
|
+
// Paywall -- shows fallback until purchased, then reveals children
|
|
174
|
+
<PaymentGate appId={123} price={9900} fallback={<LockedContent />}>
|
|
155
175
|
<PremiumContent />
|
|
156
176
|
</PaymentGate>
|
|
177
|
+
|
|
178
|
+
// Hook for custom payment flows
|
|
179
|
+
const { hasPurchased, purchase, isLoading } = useVarityPayment({ appId: 123 })
|
|
157
180
|
```
|
|
158
181
|
|
|
159
182
|
## Theming
|
|
@@ -213,28 +236,38 @@ function App() {
|
|
|
213
236
|
}
|
|
214
237
|
```
|
|
215
238
|
|
|
239
|
+
## Providers
|
|
240
|
+
|
|
241
|
+
| Provider | Description |
|
|
242
|
+
|----------|-------------|
|
|
243
|
+
| `PrivyStack` | All-in-one provider (auth + theme + query client) |
|
|
244
|
+
| `VarityPrivyProvider` | Auth provider (lower-level) |
|
|
245
|
+
| `ZeroDevProvider` | Gas sponsorship provider (automatic in PrivyStack) |
|
|
246
|
+
| `ThemeProvider` | Theme management |
|
|
247
|
+
| `ToastProvider` | Toast notifications |
|
|
248
|
+
| `VarityDashboardProvider` | Dashboard state management |
|
|
249
|
+
|
|
216
250
|
## Compatibility
|
|
217
251
|
|
|
218
252
|
- **React** 18+
|
|
219
253
|
- **Next.js** 13+ (App Router compatible)
|
|
220
254
|
- **Static export** safe (`output: 'export'`)
|
|
221
255
|
- All components have `'use client'` directives
|
|
222
|
-
- WCAG 2.1 Level A accessibility
|
|
223
256
|
|
|
224
257
|
---
|
|
225
258
|
|
|
226
259
|
## Related Packages
|
|
227
260
|
|
|
228
|
-
- **[@varity-labs/sdk](
|
|
229
|
-
- **[@varity-labs/types](
|
|
230
|
-
- **[@varity-labs/mcp](
|
|
231
|
-
- **[create-varity-app](
|
|
261
|
+
- **[@varity-labs/sdk](https://www.npmjs.com/package/@varity-labs/sdk)** -- Core SDK (database, credentials)
|
|
262
|
+
- **[@varity-labs/types](https://www.npmjs.com/package/@varity-labs/types)** -- Shared TypeScript types
|
|
263
|
+
- **[@varity-labs/mcp](https://www.npmjs.com/package/@varity-labs/mcp)** -- MCP server for AI editors (Cursor, Claude Code, VS Code)
|
|
264
|
+
- **[create-varity-app](https://www.npmjs.com/package/create-varity-app)** -- Project scaffolding
|
|
232
265
|
|
|
233
266
|
---
|
|
234
267
|
|
|
235
|
-
**Part of the [Varity SDK](https://github.com/varity-labs/varity-sdk)**
|
|
268
|
+
**Part of the [Varity SDK](https://github.com/varity-labs/varity-sdk)** -- Build, deploy, and monetize apps 70% cheaper than AWS.
|
|
236
269
|
|
|
237
|
-
[Documentation](https://docs.varity.so)
|
|
270
|
+
[Documentation](https://docs.varity.so) | [GitHub](https://github.com/varity-labs/varity-sdk) | [Discord](https://discord.gg/7vWsdwa2Bg)
|
|
238
271
|
|
|
239
272
|
## License
|
|
240
273
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable.test.d.ts","sourceRoot":"","sources":["../../../../src/components/Analytics/__tests__/DataTable.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
+
import '@testing-library/jest-dom';
|
|
4
|
+
import { DataTable } from '../DataTable';
|
|
5
|
+
const columns = [
|
|
6
|
+
{ key: 'name', header: 'Name', sortable: true },
|
|
7
|
+
{ key: 'value', header: 'Value', align: 'right' },
|
|
8
|
+
];
|
|
9
|
+
const data = [
|
|
10
|
+
{ name: 'Alpha', value: 100 },
|
|
11
|
+
{ name: 'Beta', value: 200 },
|
|
12
|
+
{ name: 'Charlie', value: 50 },
|
|
13
|
+
];
|
|
14
|
+
describe('DataTable', () => {
|
|
15
|
+
it('renders column headers', () => {
|
|
16
|
+
render(React.createElement(DataTable, { columns: columns, data: data }));
|
|
17
|
+
expect(screen.getByText('Name')).toBeInTheDocument();
|
|
18
|
+
expect(screen.getByText('Value')).toBeInTheDocument();
|
|
19
|
+
});
|
|
20
|
+
it('renders data rows', () => {
|
|
21
|
+
render(React.createElement(DataTable, { columns: columns, data: data }));
|
|
22
|
+
expect(screen.getByText('Alpha')).toBeInTheDocument();
|
|
23
|
+
expect(screen.getByText('Beta')).toBeInTheDocument();
|
|
24
|
+
expect(screen.getByText('Charlie')).toBeInTheDocument();
|
|
25
|
+
expect(screen.getByText('100')).toBeInTheDocument();
|
|
26
|
+
expect(screen.getByText('200')).toBeInTheDocument();
|
|
27
|
+
});
|
|
28
|
+
it('shows empty message when data is empty', () => {
|
|
29
|
+
render(React.createElement(DataTable, { columns: columns, data: [] }));
|
|
30
|
+
expect(screen.getByText('No data available')).toBeInTheDocument();
|
|
31
|
+
});
|
|
32
|
+
it('shows custom empty message', () => {
|
|
33
|
+
render(React.createElement(DataTable, { columns: columns, data: [], emptyMessage: "Nothing here" }));
|
|
34
|
+
expect(screen.getByText('Nothing here')).toBeInTheDocument();
|
|
35
|
+
});
|
|
36
|
+
it('shows loading spinner when loading=true', () => {
|
|
37
|
+
const { container } = render(React.createElement(DataTable, { columns: columns, data: data, loading: true }));
|
|
38
|
+
// When loading, data rows should not be visible
|
|
39
|
+
expect(screen.queryByText('Alpha')).toBeNull();
|
|
40
|
+
});
|
|
41
|
+
it('sorts data when clicking sortable column header', () => {
|
|
42
|
+
render(React.createElement(DataTable, { columns: columns, data: data }));
|
|
43
|
+
// Click the Name column header (sortable)
|
|
44
|
+
fireEvent.click(screen.getByText('Name'));
|
|
45
|
+
// Get all table cells
|
|
46
|
+
const cells = screen.getAllByRole('cell');
|
|
47
|
+
// First data cell should be Alpha (asc sort)
|
|
48
|
+
expect(cells[0]).toHaveTextContent('Alpha');
|
|
49
|
+
});
|
|
50
|
+
it('reverses sort direction on second click', () => {
|
|
51
|
+
render(React.createElement(DataTable, { columns: columns, data: data }));
|
|
52
|
+
const header = screen.getByText('Name');
|
|
53
|
+
// First click: ascending
|
|
54
|
+
fireEvent.click(header);
|
|
55
|
+
// Second click: descending
|
|
56
|
+
fireEvent.click(header);
|
|
57
|
+
const cells = screen.getAllByRole('cell');
|
|
58
|
+
// First data cell should be Charlie (desc sort)
|
|
59
|
+
expect(cells[0]).toHaveTextContent('Charlie');
|
|
60
|
+
});
|
|
61
|
+
it('handles row click events', () => {
|
|
62
|
+
const handleRowClick = jest.fn();
|
|
63
|
+
render(React.createElement(DataTable, { columns: columns, data: data, onRowClick: handleRowClick }));
|
|
64
|
+
fireEvent.click(screen.getByText('Alpha'));
|
|
65
|
+
expect(handleRowClick).toHaveBeenCalledWith(data[0]);
|
|
66
|
+
});
|
|
67
|
+
it('renders custom cell renderers', () => {
|
|
68
|
+
const customColumns = [
|
|
69
|
+
{ key: 'name', header: 'Name' },
|
|
70
|
+
{ key: 'value', header: 'Value', render: (val) => React.createElement("span", { "data-testid": "custom" },
|
|
71
|
+
"$",
|
|
72
|
+
val) },
|
|
73
|
+
];
|
|
74
|
+
render(React.createElement(DataTable, { columns: customColumns, data: data }));
|
|
75
|
+
const customCells = screen.getAllByTestId('custom');
|
|
76
|
+
expect(customCells[0]).toHaveTextContent('$100');
|
|
77
|
+
});
|
|
78
|
+
it('renders pagination controls when pagination=true', () => {
|
|
79
|
+
const largeData = Array.from({ length: 25 }, (_, i) => ({ name: `Item ${i}`, value: i }));
|
|
80
|
+
render(React.createElement(DataTable, { columns: columns, data: largeData, pagination: true, pageSize: 10 }));
|
|
81
|
+
expect(screen.getByText('Previous')).toBeInTheDocument();
|
|
82
|
+
expect(screen.getByText('Next')).toBeInTheDocument();
|
|
83
|
+
expect(screen.getByText(/Page 1 of 3/)).toBeInTheDocument();
|
|
84
|
+
});
|
|
85
|
+
it('navigates pages when clicking Next/Previous', () => {
|
|
86
|
+
const largeData = Array.from({ length: 25 }, (_, i) => ({ name: `Item ${i}`, value: i }));
|
|
87
|
+
render(React.createElement(DataTable, { columns: columns, data: largeData, pagination: true, pageSize: 10 }));
|
|
88
|
+
// Should show first 10 items
|
|
89
|
+
expect(screen.getByText('Item 0')).toBeInTheDocument();
|
|
90
|
+
expect(screen.queryByText('Item 10')).toBeNull();
|
|
91
|
+
// Click Next
|
|
92
|
+
fireEvent.click(screen.getByText('Next'));
|
|
93
|
+
expect(screen.getByText(/Page 2 of 3/)).toBeInTheDocument();
|
|
94
|
+
expect(screen.getByText('Item 10')).toBeInTheDocument();
|
|
95
|
+
expect(screen.queryByText('Item 0')).toBeNull();
|
|
96
|
+
// Click Previous
|
|
97
|
+
fireEvent.click(screen.getByText('Previous'));
|
|
98
|
+
expect(screen.getByText(/Page 1 of 3/)).toBeInTheDocument();
|
|
99
|
+
expect(screen.getByText('Item 0')).toBeInTheDocument();
|
|
100
|
+
});
|
|
101
|
+
it('disables Previous button on first page', () => {
|
|
102
|
+
const largeData = Array.from({ length: 25 }, (_, i) => ({ name: `Item ${i}`, value: i }));
|
|
103
|
+
render(React.createElement(DataTable, { columns: columns, data: largeData, pagination: true, pageSize: 10 }));
|
|
104
|
+
const prevButton = screen.getByText('Previous');
|
|
105
|
+
expect(prevButton).toBeDisabled();
|
|
106
|
+
});
|
|
107
|
+
it('does not show pagination when data fits in one page', () => {
|
|
108
|
+
render(React.createElement(DataTable, { columns: columns, data: data, pagination: true, pageSize: 10 }));
|
|
109
|
+
expect(screen.queryByText('Previous')).toBeNull();
|
|
110
|
+
expect(screen.queryByText('Next')).toBeNull();
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
//# sourceMappingURL=DataTable.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable.test.js","sourceRoot":"","sources":["../../../../src/components/Analytics/__tests__/DataTable.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyState.test.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/__tests__/EmptyState.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
+
import '@testing-library/jest-dom';
|
|
4
|
+
import { EmptyState, EmptyStatePresets } from '../EmptyState';
|
|
5
|
+
describe('EmptyState', () => {
|
|
6
|
+
it('renders title', () => {
|
|
7
|
+
render(React.createElement(EmptyState, { title: "No data found" }));
|
|
8
|
+
expect(screen.getByText('No data found')).toBeInTheDocument();
|
|
9
|
+
});
|
|
10
|
+
it('renders description when provided', () => {
|
|
11
|
+
render(React.createElement(EmptyState, { title: "No data", description: "Add some items to get started." }));
|
|
12
|
+
expect(screen.getByText('Add some items to get started.')).toBeInTheDocument();
|
|
13
|
+
});
|
|
14
|
+
it('does not render description when not provided', () => {
|
|
15
|
+
const { container } = render(React.createElement(EmptyState, { title: "No data" }));
|
|
16
|
+
expect(container.querySelectorAll('p').length).toBe(0);
|
|
17
|
+
});
|
|
18
|
+
it('renders icon when provided', () => {
|
|
19
|
+
render(React.createElement(EmptyState, { title: "No data", icon: React.createElement("span", { "data-testid": "icon" }, "\uD83D\uDCC1") }));
|
|
20
|
+
expect(screen.getByTestId('icon')).toBeInTheDocument();
|
|
21
|
+
});
|
|
22
|
+
it('renders primary action button', () => {
|
|
23
|
+
const handleClick = jest.fn();
|
|
24
|
+
render(React.createElement(EmptyState, { title: "No data", action: { label: 'Add Item', onClick: handleClick } }));
|
|
25
|
+
const button = screen.getByText('Add Item');
|
|
26
|
+
expect(button).toBeInTheDocument();
|
|
27
|
+
fireEvent.click(button);
|
|
28
|
+
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
29
|
+
});
|
|
30
|
+
it('renders secondary action button', () => {
|
|
31
|
+
const handlePrimary = jest.fn();
|
|
32
|
+
const handleSecondary = jest.fn();
|
|
33
|
+
render(React.createElement(EmptyState, { title: "No data", action: { label: 'Add', onClick: handlePrimary }, secondaryAction: { label: 'Learn More', onClick: handleSecondary } }));
|
|
34
|
+
fireEvent.click(screen.getByText('Learn More'));
|
|
35
|
+
expect(handleSecondary).toHaveBeenCalledTimes(1);
|
|
36
|
+
});
|
|
37
|
+
it('applies custom className', () => {
|
|
38
|
+
const { container } = render(React.createElement(EmptyState, { title: "No data", className: "my-class" }));
|
|
39
|
+
expect(container.firstChild).toHaveClass('my-class');
|
|
40
|
+
});
|
|
41
|
+
it('renders with sm size', () => {
|
|
42
|
+
const { container } = render(React.createElement(EmptyState, { title: "No data", size: "sm" }));
|
|
43
|
+
expect(container.firstChild).toHaveClass('py-6');
|
|
44
|
+
});
|
|
45
|
+
it('renders with lg size', () => {
|
|
46
|
+
const { container } = render(React.createElement(EmptyState, { title: "No data", size: "lg" }));
|
|
47
|
+
expect(container.firstChild).toHaveClass('py-16');
|
|
48
|
+
});
|
|
49
|
+
it('renders secondary variant action button', () => {
|
|
50
|
+
render(React.createElement(EmptyState, { title: "No data", action: { label: 'Add', onClick: () => { }, variant: 'secondary' } }));
|
|
51
|
+
const button = screen.getByText('Add');
|
|
52
|
+
expect(button).toHaveClass('bg-gray-100');
|
|
53
|
+
});
|
|
54
|
+
});
|
|
55
|
+
describe('EmptyStatePresets', () => {
|
|
56
|
+
it('renders NoResults preset', () => {
|
|
57
|
+
render(React.createElement(React.Fragment, null, EmptyStatePresets.NoResults({})));
|
|
58
|
+
expect(screen.getByText('No results found')).toBeInTheDocument();
|
|
59
|
+
});
|
|
60
|
+
it('renders NoData preset', () => {
|
|
61
|
+
render(React.createElement(React.Fragment, null, EmptyStatePresets.NoData({})));
|
|
62
|
+
expect(screen.getByText('No data yet')).toBeInTheDocument();
|
|
63
|
+
});
|
|
64
|
+
it('renders NoIntegrations preset', () => {
|
|
65
|
+
render(React.createElement(React.Fragment, null, EmptyStatePresets.NoIntegrations({})));
|
|
66
|
+
expect(screen.getByText('No integrations connected')).toBeInTheDocument();
|
|
67
|
+
});
|
|
68
|
+
it('renders ConnectionRequired preset', () => {
|
|
69
|
+
render(React.createElement(React.Fragment, null, EmptyStatePresets.ConnectionRequired({})));
|
|
70
|
+
expect(screen.getByText('Connection required')).toBeInTheDocument();
|
|
71
|
+
});
|
|
72
|
+
it('renders ComingSoon preset', () => {
|
|
73
|
+
render(React.createElement(React.Fragment, null, EmptyStatePresets.ComingSoon({})));
|
|
74
|
+
expect(screen.getByText('Coming Soon')).toBeInTheDocument();
|
|
75
|
+
});
|
|
76
|
+
it('allows preset overrides', () => {
|
|
77
|
+
render(React.createElement(React.Fragment, null, EmptyStatePresets.NoData({ title: 'Custom Title' })));
|
|
78
|
+
expect(screen.getByText('Custom Title')).toBeInTheDocument();
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
//# sourceMappingURL=EmptyState.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyState.test.js","sourceRoot":"","sources":["../../../../src/components/Dashboard/__tests__/EmptyState.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KPICard.test.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/__tests__/KPICard.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
+
import '@testing-library/jest-dom';
|
|
4
|
+
import { KPICard } from '../KPICard';
|
|
5
|
+
describe('KPICard', () => {
|
|
6
|
+
it('renders title and value', () => {
|
|
7
|
+
render(React.createElement(KPICard, { title: "Revenue", value: "$12,345" }));
|
|
8
|
+
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
|
9
|
+
expect(screen.getByText('$12,345')).toBeInTheDocument();
|
|
10
|
+
});
|
|
11
|
+
it('renders numeric value', () => {
|
|
12
|
+
render(React.createElement(KPICard, { title: "Users", value: 1234 }));
|
|
13
|
+
expect(screen.getByText('1234')).toBeInTheDocument();
|
|
14
|
+
});
|
|
15
|
+
it('renders subtitle when provided', () => {
|
|
16
|
+
render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", subtitle: "Monthly" }));
|
|
17
|
+
expect(screen.getByText('Monthly')).toBeInTheDocument();
|
|
18
|
+
});
|
|
19
|
+
it('does not render subtitle when not provided', () => {
|
|
20
|
+
const { container } = render(React.createElement(KPICard, { title: "Revenue", value: "$12,345" }));
|
|
21
|
+
expect(container.querySelector('p')).toBeNull();
|
|
22
|
+
});
|
|
23
|
+
it('renders trend indicator when trend and trendValue provided', () => {
|
|
24
|
+
render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", trend: "up", trendValue: "+12%" }));
|
|
25
|
+
expect(screen.getByText('+12%')).toBeInTheDocument();
|
|
26
|
+
expect(screen.getByText('↑')).toBeInTheDocument();
|
|
27
|
+
});
|
|
28
|
+
it('renders down trend icon', () => {
|
|
29
|
+
render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", trend: "down", trendValue: "-5%" }));
|
|
30
|
+
expect(screen.getByText('↓')).toBeInTheDocument();
|
|
31
|
+
expect(screen.getByText('-5%')).toBeInTheDocument();
|
|
32
|
+
});
|
|
33
|
+
it('renders neutral trend icon', () => {
|
|
34
|
+
render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", trend: "neutral", trendValue: "0%" }));
|
|
35
|
+
expect(screen.getByText('→')).toBeInTheDocument();
|
|
36
|
+
});
|
|
37
|
+
it('does not render trend when only trend is provided without trendValue', () => {
|
|
38
|
+
const { container } = render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", trend: "up" }));
|
|
39
|
+
expect(container.querySelector('.text-green-600')).toBeNull();
|
|
40
|
+
});
|
|
41
|
+
it('renders loading skeleton when loading=true', () => {
|
|
42
|
+
const { container } = render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", loading: true }));
|
|
43
|
+
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
|
|
44
|
+
// Should NOT show the actual value when loading
|
|
45
|
+
expect(screen.queryByText('$12,345')).toBeNull();
|
|
46
|
+
});
|
|
47
|
+
it('handles click events when onClick is provided', () => {
|
|
48
|
+
const handleClick = jest.fn();
|
|
49
|
+
render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", onClick: handleClick }));
|
|
50
|
+
fireEvent.click(screen.getByRole('button'));
|
|
51
|
+
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
52
|
+
});
|
|
53
|
+
it('does not have button role when onClick is not provided', () => {
|
|
54
|
+
render(React.createElement(KPICard, { title: "Revenue", value: "$12,345" }));
|
|
55
|
+
expect(screen.queryByRole('button')).toBeNull();
|
|
56
|
+
});
|
|
57
|
+
it('renders icon when provided', () => {
|
|
58
|
+
render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", icon: React.createElement("span", { "data-testid": "icon" }, "$") }));
|
|
59
|
+
expect(screen.getByTestId('icon')).toBeInTheDocument();
|
|
60
|
+
});
|
|
61
|
+
it('applies custom className', () => {
|
|
62
|
+
const { container } = render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", className: "custom-class" }));
|
|
63
|
+
expect(container.firstChild).toHaveClass('custom-class');
|
|
64
|
+
});
|
|
65
|
+
it('renders with outlined variant', () => {
|
|
66
|
+
const { container } = render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", variant: "outlined" }));
|
|
67
|
+
expect(container.firstChild).toHaveClass('border-2');
|
|
68
|
+
});
|
|
69
|
+
it('renders with sm size', () => {
|
|
70
|
+
const { container } = render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", size: "sm" }));
|
|
71
|
+
expect(container.firstChild).toHaveClass('p-3');
|
|
72
|
+
});
|
|
73
|
+
it('renders with lg size', () => {
|
|
74
|
+
const { container } = render(React.createElement(KPICard, { title: "Revenue", value: "$12,345", size: "lg" }));
|
|
75
|
+
expect(container.firstChild).toHaveClass('p-6');
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
//# sourceMappingURL=KPICard.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KPICard.test.js","sourceRoot":"","sources":["../../../../src/components/Dashboard/__tests__/KPICard.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* BuyUSDCButton -
|
|
2
|
+
* BuyUSDCButton - Add funds via credit card
|
|
3
3
|
*
|
|
4
|
-
* Opens
|
|
5
|
-
* Supports credit card, debit card, Apple Pay, Google Pay
|
|
6
|
-
*
|
|
4
|
+
* Opens a seamless credit card payment modal.
|
|
5
|
+
* Supports credit card, debit card, Apple Pay, Google Pay.
|
|
6
|
+
* No crypto terminology visible to end users.
|
|
7
7
|
*
|
|
8
8
|
* @example
|
|
9
9
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuyUSDCButton.d.ts","sourceRoot":"","sources":["../../../src/components/Onramp/BuyUSDCButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,MAAY,EACZ,SAAS,EACT,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"BuyUSDCButton.d.ts","sourceRoot":"","sources":["../../../src/components/Onramp/BuyUSDCButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,MAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAwB,EACxB,SAAS,GACV,EAAE,kBAAkB,qBAqDpB"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* BuyUSDCButton -
|
|
2
|
+
* BuyUSDCButton - Add funds via credit card
|
|
3
3
|
*
|
|
4
|
-
* Opens
|
|
5
|
-
* Supports credit card, debit card, Apple Pay, Google Pay
|
|
6
|
-
*
|
|
4
|
+
* Opens a seamless credit card payment modal.
|
|
5
|
+
* Supports credit card, debit card, Apple Pay, Google Pay.
|
|
6
|
+
* No crypto terminology visible to end users.
|
|
7
7
|
*
|
|
8
8
|
* @example
|
|
9
9
|
* ```tsx
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
import React, { useState, useCallback } from 'react';
|
|
18
18
|
import { useFundWallet } from '@privy-io/react-auth';
|
|
19
19
|
import { arbitrum } from 'viem/chains';
|
|
20
|
-
export function BuyUSDCButton({ walletAddress, amount = 100, onSuccess, onError, buttonText = '
|
|
20
|
+
export function BuyUSDCButton({ walletAddress, amount = 100, onSuccess, onError, buttonText = 'Add Funds', className, }) {
|
|
21
21
|
const [isLoading, setIsLoading] = useState(false);
|
|
22
22
|
const { fundWallet } = useFundWallet();
|
|
23
23
|
const defaultClassName = `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuyUSDCButton.js","sourceRoot":"","sources":["../../../src/components/Onramp/BuyUSDCButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAavC,MAAM,UAAU,aAAa,CAAC,EAC5B,aAAa,EACb,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,OAAO,EACP,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"BuyUSDCButton.js","sourceRoot":"","sources":["../../../src/components/Onramp/BuyUSDCButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAavC,MAAM,UAAU,aAAa,CAAC,EAC5B,aAAa,EACb,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,OAAO,EACP,UAAU,GAAG,WAAW,EACxB,SAAS,GACU;IACnB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IAEvC,MAAM,gBAAgB,GAAG;;;;;;;;;GASxB,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACzC,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC;YACH,MAAM,UAAU,CAAC,aAAa,EAAE;gBAC9B,KAAK,EAAE,QAAQ;gBACf,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE;aAC1B,CAAC,CAAC;YACH,SAAS,EAAE,EAAE,CAAC;QAChB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,MAAM,KAAK,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;YACvE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5D,OAAO,CACL,gCACE,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,CAAC,aAAa,IAAI,SAAS,EACrC,SAAS,EAAE,SAAS,IAAI,gBAAgB;QAEvC,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW;YACnE,gCAAQ,SAAS,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,GAAG;YAC9F,8BAAM,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,6CAA6C,GAAG,CAC/F,CACP,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;YAC5E,8BAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,wFAAwF,GAAG,CAC5J,CACP;QACA,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAC/B,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* OnrampWidget -
|
|
2
|
+
* OnrampWidget - Add funds to your account
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* Supports credit card, debit card, Apple Pay, Google Pay
|
|
4
|
+
* Seamless credit card payment widget for adding funds.
|
|
5
|
+
* Users see a familiar checkout experience — no crypto terminology.
|
|
6
|
+
* Supports credit card, debit card, Apple Pay, Google Pay.
|
|
7
7
|
*
|
|
8
8
|
* @example
|
|
9
9
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OnrampWidget.d.ts","sourceRoot":"","sources":["../../../src/components/Onramp/OnrampWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1D,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,aAAmB,EACnB,UAAU,EACV,OAAO,EACP,WAAkB,EAClB,KAAe,EAChB,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"OnrampWidget.d.ts","sourceRoot":"","sources":["../../../src/components/Onramp/OnrampWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1D,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,aAAmB,EACnB,UAAU,EACV,OAAO,EACP,WAAkB,EAClB,KAAe,EAChB,EAAE,iBAAiB,qBA4LnB"}
|