cilantro-react 0.1.0 → 0.1.1
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 +155 -2
- package/dist/index.d.mts +132 -15
- package/dist/index.d.ts +132 -15
- package/dist/index.js +604 -315
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +535 -253
- package/dist/index.mjs.map +1 -1
- package/dist/themes/default.css +43 -0
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -59,6 +59,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
59
59
|
- **CilantroProvider** – Root provider: initializes storage, auth, and wallet context. Requires `platformApiKey`; optional `apiUrl`, storage keys, and callbacks. Use this unless you only need auth.
|
|
60
60
|
- **CilantroAuthProvider** – Auth only (token, user, login, register, logout). Use when you don’t need the full provider stack (e.g. auth-only pages).
|
|
61
61
|
- **WalletProvider** – Wallet list and selection. Depends on auth; usually used inside `CilantroProvider`.
|
|
62
|
+
- **ThemeProvider** – Optional: sets `data-theme="light"` or `"dark"` on a wrapper and injects default CSS variables for light/dark. Props: `theme` (`"light"` | `"dark"` | `"system"`), `defaultTheme`, `storageKey`, `className`, `injectStyles`. See [Themes](#built-in-theme-themeprovider).
|
|
62
63
|
|
|
63
64
|
**CilantroAuthProvider props:** `platformApiKey` (required), `apiUrl`, `jwtStorageKey`, `onLoginSuccess`, `onLogout`, `onRegisterSuccess`.
|
|
64
65
|
|
|
@@ -106,6 +107,32 @@ Wallet list and selection. Use inside `CilantroProvider` (which includes `Wallet
|
|
|
106
107
|
|
|
107
108
|
---
|
|
108
109
|
|
|
110
|
+
#### useSelectedWallet
|
|
111
|
+
|
|
112
|
+
Convenience hook when you only need the currently selected wallet (and loading/refresh), not the full list. Use inside `CilantroProvider`.
|
|
113
|
+
|
|
114
|
+
**Returns:** `UseSelectedWalletResult`
|
|
115
|
+
|
|
116
|
+
| Property | Type | Description |
|
|
117
|
+
|----------|------|-------------|
|
|
118
|
+
| `selectedWallet` | `WalletData \| null` | Currently selected wallet. |
|
|
119
|
+
| `isLoading` | `boolean` | True while loading wallets. |
|
|
120
|
+
| `refreshWallets` | `() => Promise<void>` | Reload wallets from the API. |
|
|
121
|
+
|
|
122
|
+
**Use when:** You need the current wallet without the full wallet list or `selectWallet`.
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
#### useWalletAddress
|
|
127
|
+
|
|
128
|
+
Returns the address of the currently selected wallet (handles both `address` and `walletAddress` on WalletData). Use inside `CilantroProvider`.
|
|
129
|
+
|
|
130
|
+
**Returns:** `string | null`
|
|
131
|
+
|
|
132
|
+
**Use when:** You need the selected wallet's address for display or building transactions.
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
109
136
|
#### useSigners
|
|
110
137
|
|
|
111
138
|
Load signers for a wallet. Use inside `CilantroProvider` (auth required).
|
|
@@ -129,6 +156,22 @@ When `walletId` is null/undefined, `signers` is empty and `refresh` no-ops.
|
|
|
129
156
|
|
|
130
157
|
---
|
|
131
158
|
|
|
159
|
+
#### useSignersForSelectedWallet
|
|
160
|
+
|
|
161
|
+
Signers for the currently selected wallet (or a `walletId` override). Composes `useWallets` + `useSigners` so you don't pass `walletId` yourself. Use inside `CilantroProvider`.
|
|
162
|
+
|
|
163
|
+
**Options:** `UseSignersForSelectedWalletOptions`
|
|
164
|
+
|
|
165
|
+
| Option | Type | Description |
|
|
166
|
+
|--------|------|-------------|
|
|
167
|
+
| `walletId` | `string \| null \| undefined` | Override; when omitted, uses the selected wallet from context. |
|
|
168
|
+
|
|
169
|
+
**Returns:** Same as `useSigners` – `UseSignersResult` (`signers`, `isLoading`, `error`, `refresh`).
|
|
170
|
+
|
|
171
|
+
**Use when:** You need signers for the current wallet without calling `useWallets()` and `useSigners({ walletId })` in every component (e.g. SignerList-style UIs).
|
|
172
|
+
|
|
173
|
+
---
|
|
174
|
+
|
|
132
175
|
#### useSignerSelection
|
|
133
176
|
|
|
134
177
|
Wallet + signer selection state for signing flows. Uses `useWallets` and `useSigners` internally. Use inside `CilantroProvider`.
|
|
@@ -156,6 +199,56 @@ Wallet + signer selection state for signing flows. Uses `useWallets` and `useSig
|
|
|
156
199
|
|
|
157
200
|
---
|
|
158
201
|
|
|
202
|
+
#### useDelegatedKeys
|
|
203
|
+
|
|
204
|
+
Load delegated keys for a wallet (same data as DelegatedKeySelector). Use for custom delegated-key UI or logic. Use inside `CilantroProvider` (auth required).
|
|
205
|
+
|
|
206
|
+
**Options:** `UseDelegatedKeysOptions`
|
|
207
|
+
|
|
208
|
+
| Option | Type | Description |
|
|
209
|
+
|--------|------|-------------|
|
|
210
|
+
| `walletId` | `string \| null \| undefined` | Wallet ID to load delegated keys for. When null/undefined, keys are empty. |
|
|
211
|
+
| `filterActive` | `boolean` | When true (default), filter to active and non-expired keys only. |
|
|
212
|
+
|
|
213
|
+
**Returns:** `UseDelegatedKeysResult`
|
|
214
|
+
|
|
215
|
+
| Property | Type | Description |
|
|
216
|
+
|----------|------|-------------|
|
|
217
|
+
| `keys` | `DelegatedKeyData[]` | List of delegated keys. |
|
|
218
|
+
| `isLoading` | `boolean` | True while loading. |
|
|
219
|
+
| `error` | `string \| null` | Error message if load failed. |
|
|
220
|
+
| `refresh` | `() => Promise<void>` | Reload delegated keys. |
|
|
221
|
+
|
|
222
|
+
**Use when:** You need the list of delegated keys in custom UI or logic without using the DelegatedKeySelector component.
|
|
223
|
+
|
|
224
|
+
---
|
|
225
|
+
|
|
226
|
+
#### useCanSign
|
|
227
|
+
|
|
228
|
+
Derived "is the user ready to sign?" for disabling sign buttons or showing prompts. Use inside `CilantroProvider`.
|
|
229
|
+
|
|
230
|
+
**Options:** `UseCanSignOptions`
|
|
231
|
+
|
|
232
|
+
| Option | Type | Description |
|
|
233
|
+
|--------|------|-------------|
|
|
234
|
+
| `signingMethod` | `SigningMethod \| null` | Override; default `'sdk-signer'`. |
|
|
235
|
+
| `requireSigner` | `boolean` | When true (default), require a selected signer for sdk-signer. |
|
|
236
|
+
| `walletAdapterConnected` | `boolean` | When using wallet-adapter, pass true when the adapter is connected so `canSign*` reflects it. |
|
|
237
|
+
|
|
238
|
+
**Returns:** `UseCanSignResult`
|
|
239
|
+
|
|
240
|
+
| Property | Type | Description |
|
|
241
|
+
|----------|------|-------------|
|
|
242
|
+
| `hasToken` | `boolean` | True when the user has a valid token. |
|
|
243
|
+
| `hasWallet` | `boolean` | True when a wallet is selected. |
|
|
244
|
+
| `hasSigner` | `boolean` | True when a signer is selected (sdk-signer) or wallet-adapter is connected (when `walletAdapterConnected` is passed). |
|
|
245
|
+
| `canSignMessage` | `boolean` | True when ready to sign a message. |
|
|
246
|
+
| `canSignTransaction` | `boolean` | True when ready to sign/send a transaction (connection still required for send). |
|
|
247
|
+
|
|
248
|
+
**Use when:** You need to disable sign buttons or show "Select wallet" / "Select signer" prompts without reimplementing token/wallet/signer checks. For wallet-adapter, pass `walletAdapterConnected` from your adapter state.
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
159
252
|
#### useMessageSigning
|
|
160
253
|
|
|
161
254
|
Sign a message with the selected signer or wallet-adapter. Use inside `CilantroProvider`.
|
|
@@ -238,6 +331,11 @@ All components accept `className`. Many accept a `classNames` object (see TypeSc
|
|
|
238
331
|
| **AddSignerForm** | Add signer (email, phone, passkey, external wallet). | `walletId`, `open?`, `onOpenChange?`, `onSuccess?`, `onCancel?`, `onError?(error)`, `asDialog?` (default true), `className`, `classNames?`. |
|
|
239
332
|
| **DelegatedKeySelector** | Select delegated key for a wallet. | `walletId`, `value?`, `onChange?(keyId, key)`, `filterActive?` (default true), `placeholder`, `className`, `classNames?`. Headless: `children?` (keys, selectedKeyId, onSelect, isLoading, error, refresh). |
|
|
240
333
|
|
|
334
|
+
#### UI primitives
|
|
335
|
+
|
|
336
|
+
- **Skeleton** – Shadcn-style skeleton placeholder (`rounded-md bg-muted animate-pulse`). Use for loading states or custom UI. Exported for headless use.
|
|
337
|
+
- **ThemeProvider** – See [Themes](#built-in-theme-themeprovider).
|
|
338
|
+
|
|
241
339
|
#### Signing form components
|
|
242
340
|
|
|
243
341
|
| Component | Purpose | Key props |
|
|
@@ -636,9 +734,64 @@ See TypeScript types and [cilantro-sdk](https://www.npmjs.com/package/cilantro-s
|
|
|
636
734
|
|
|
637
735
|
## Theming
|
|
638
736
|
|
|
639
|
-
Components use Shadcn-style class names and CSS variables (e.g. `border-input`, `bg-primary`, `text-muted-foreground`). Ensure your app has Tailwind
|
|
737
|
+
Components use Shadcn-style class names and CSS variables (e.g. `border-input`, `bg-primary`, `text-muted-foreground`). Ensure your app has **Tailwind CSS** so utility classes work; the library does not bundle Tailwind.
|
|
738
|
+
|
|
739
|
+
### Built-in theme (ThemeProvider)
|
|
740
|
+
|
|
741
|
+
You can opt into a built-in light/dark theme without bringing your own Shadcn setup. Wrap your app (or just the Cilantro UI) with `ThemeProvider`:
|
|
742
|
+
|
|
743
|
+
```tsx
|
|
744
|
+
import { ThemeProvider } from 'cilantro-react'
|
|
745
|
+
|
|
746
|
+
<ThemeProvider theme="system" defaultTheme="dark" className="min-h-screen">
|
|
747
|
+
<CilantroProvider platformApiKey="...">
|
|
748
|
+
{children}
|
|
749
|
+
</CilantroProvider>
|
|
750
|
+
</ThemeProvider>
|
|
751
|
+
```
|
|
752
|
+
|
|
753
|
+
- **theme** – `"light"` | `"dark"` | `"system"`. `"system"` follows `prefers-color-scheme`.
|
|
754
|
+
- **defaultTheme** – Initial theme when using `"system"` (default: `"dark"`).
|
|
755
|
+
- **storageKey** – Optional localStorage key to persist the resolved theme when using `"system"`.
|
|
756
|
+
- **injectStyles** – When `true` (default), the provider injects a minimal set of CSS variables (`--background`, `--foreground`, `--primary`, `--muted`, `--border`, `--input`, `--ring`, etc.) for light and `[data-theme="dark"]`. You can set `injectStyles={false}` and import the theme file yourself: `import 'cilantro-react/themes/default.css'`.
|
|
757
|
+
|
|
758
|
+
Tailwind is still required so utility classes apply; ThemeProvider only sets the variables.
|
|
759
|
+
|
|
760
|
+
For full Shadcn theming, see [Theming - shadcn/ui](https://ui.shadcn.com/docs/theming).
|
|
761
|
+
|
|
762
|
+
---
|
|
763
|
+
|
|
764
|
+
## Accessibility
|
|
765
|
+
|
|
766
|
+
Components are built with screen readers and keyboard use in mind:
|
|
767
|
+
|
|
768
|
+
- **Live regions** – Signing result messages (MessageSigningForm, TransactionSigningForm) use `role="status"` and `aria-live="polite"` (or `assertive` for errors). Loading states use `aria-busy`.
|
|
769
|
+
- **Form labels** – Auth, login, register, message signing, and add-signer forms use visible labels with correct `id` / `htmlFor`. Error blocks use `role="alert"` so errors are announced immediately.
|
|
770
|
+
- **Selects and dialogs** – WalletSelector and DelegatedKeySelector triggers have `aria-label`. Radix Dialog handles focus trap and restore in AddSignerForm.
|
|
771
|
+
- **Loading** – WalletSelector, SignerSelector, SignerList, DelegatedKeySelector, and AuthGuard use `aria-busy` and `aria-live="polite"` when loading so screen readers announce loading state.
|
|
772
|
+
|
|
773
|
+
Buttons use `focus-visible:ring-2` for focus indication; icon-only or custom buttons can receive `aria-label` via standard HTML attributes.
|
|
774
|
+
|
|
775
|
+
---
|
|
776
|
+
|
|
777
|
+
## Mobile
|
|
778
|
+
|
|
779
|
+
Key actions use touch-friendly targets and dialogs are responsive:
|
|
780
|
+
|
|
781
|
+
- **Touch targets** – The Button component has a `touch` size (`min-h-[44px] min-w-[44px]`) used on primary actions: AuthForm/LoginForm/RegisterForm submit, MessageSigningForm sign button, and SignerList “Add signer”. Use `size="touch"` on your own primary buttons when needed.
|
|
782
|
+
- **Responsive layout** – Auth forms use `w-full max-w-sm`. MessageSigningForm and TransactionSigningForm use responsive button groups (`flex-col` on small screens). Result blocks use `overflow-auto` on `<pre>` so content doesn’t overflow.
|
|
783
|
+
- **Dialog** – DialogContent has `max-h-[100dvh] sm:max-h-[90vh]` and `overflow-y-auto` so dialogs (e.g. AddSignerForm) are scrollable on small screens. You can add `className="rounded-none sm:rounded-lg"` or full-height classes for a more mobile-friendly dialog.
|
|
784
|
+
|
|
785
|
+
---
|
|
786
|
+
|
|
787
|
+
## Loading states
|
|
788
|
+
|
|
789
|
+
Loading is shown with skeleton placeholders where it improves perceived performance:
|
|
640
790
|
|
|
641
|
-
|
|
791
|
+
- **Skeleton** – A `Skeleton` UI primitive is available (`import { Skeleton } from 'cilantro-react'`). Components use it when loading: WalletSelector and DelegatedKeySelector show a skeleton trigger; SignerSelector and SignerList show 2–3 skeleton rows.
|
|
792
|
+
- **useSkeleton** – WalletSelector, SignerSelector, SignerList, and DelegatedKeySelector accept an optional **useSkeleton** prop (default: `true`). Set `useSkeleton={false}` to show plain “Loading…” text instead.
|
|
793
|
+
- **classNames** – These components support `classNames.skeleton` and `classNames.loading` so you can style the skeleton or the loading container.
|
|
794
|
+
- **AuthGuard** – Optional skeleton while checking auth: set **useSkeleton={true}** to show a small skeleton card instead of “Loading…” text.
|
|
642
795
|
|
|
643
796
|
---
|
|
644
797
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
2
3
|
import { ReactNode } from 'react';
|
|
3
4
|
import { SignerInfo } from 'cilantro-sdk/helpers';
|
|
4
5
|
import { Transaction, PublicKey } from '@solana/web3.js';
|
|
@@ -67,6 +68,25 @@ interface WalletProviderProps {
|
|
|
67
68
|
declare function WalletProvider({ children, storageKey }: WalletProviderProps): react_jsx_runtime.JSX.Element;
|
|
68
69
|
declare function useWallets(): WalletContextType;
|
|
69
70
|
|
|
71
|
+
interface UseSelectedWalletResult {
|
|
72
|
+
selectedWallet: WalletData | null;
|
|
73
|
+
isLoading: boolean;
|
|
74
|
+
refreshWallets: () => Promise<void>;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Returns the currently selected wallet, loading state, and refresh.
|
|
78
|
+
* Use when you only need the current wallet, not the full wallet list.
|
|
79
|
+
* Must be used inside CilantroProvider (WalletProvider).
|
|
80
|
+
*/
|
|
81
|
+
declare function useSelectedWallet(): UseSelectedWalletResult;
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Returns the address of the currently selected wallet.
|
|
85
|
+
* Handles both `address` and `walletAddress` on WalletData.
|
|
86
|
+
* Must be used inside CilantroProvider (WalletProvider).
|
|
87
|
+
*/
|
|
88
|
+
declare function useWalletAddress(): string | null;
|
|
89
|
+
|
|
70
90
|
interface SignerData extends Omit<SignerInfo, "signerId"> {
|
|
71
91
|
id: string;
|
|
72
92
|
signerId: string;
|
|
@@ -96,6 +116,46 @@ interface UseSignersResult {
|
|
|
96
116
|
}
|
|
97
117
|
declare function useSigners(options?: UseSignersOptions): UseSignersResult;
|
|
98
118
|
|
|
119
|
+
interface UseSignersForSelectedWalletOptions {
|
|
120
|
+
/** Override wallet ID; when omitted, uses the selected wallet from context. */
|
|
121
|
+
walletId?: string | null;
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* Returns signers for the currently selected wallet (or the given walletId override).
|
|
125
|
+
* Composes useWallets + useSigners so you don't have to pass walletId yourself.
|
|
126
|
+
* Must be used inside CilantroProvider.
|
|
127
|
+
*/
|
|
128
|
+
declare function useSignersForSelectedWallet(options?: UseSignersForSelectedWalletOptions): UseSignersResult;
|
|
129
|
+
|
|
130
|
+
interface DelegatedKeyData {
|
|
131
|
+
id: string;
|
|
132
|
+
walletId: string;
|
|
133
|
+
name?: string;
|
|
134
|
+
publicKey: string;
|
|
135
|
+
permissions: Record<string, unknown>;
|
|
136
|
+
isActive?: boolean;
|
|
137
|
+
createdAt?: string;
|
|
138
|
+
expiresAt?: string;
|
|
139
|
+
[key: string]: unknown;
|
|
140
|
+
}
|
|
141
|
+
interface UseDelegatedKeysOptions {
|
|
142
|
+
/** Wallet ID to load delegated keys for. When null/undefined, keys are empty. */
|
|
143
|
+
walletId?: string | null;
|
|
144
|
+
/** When true (default), filter to active keys and non-expired only. */
|
|
145
|
+
filterActive?: boolean;
|
|
146
|
+
}
|
|
147
|
+
interface UseDelegatedKeysResult {
|
|
148
|
+
keys: DelegatedKeyData[];
|
|
149
|
+
isLoading: boolean;
|
|
150
|
+
error: string | null;
|
|
151
|
+
refresh: () => Promise<void>;
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* Load delegated keys for a wallet. Use for custom delegated-key UI or logic.
|
|
155
|
+
* Must be used inside CilantroProvider (auth required).
|
|
156
|
+
*/
|
|
157
|
+
declare function useDelegatedKeys(options?: UseDelegatedKeysOptions): UseDelegatedKeysResult;
|
|
158
|
+
|
|
99
159
|
type SigningMethod = "wallet-adapter" | "sdk-signer";
|
|
100
160
|
interface UseSignerSelectionOptions {
|
|
101
161
|
/** Override wallet ID; if not set, uses selected wallet from WalletProvider */
|
|
@@ -114,6 +174,33 @@ interface UseSignerSelectionResult {
|
|
|
114
174
|
}
|
|
115
175
|
declare function useSignerSelection(options?: UseSignerSelectionOptions): UseSignerSelectionResult;
|
|
116
176
|
|
|
177
|
+
interface UseCanSignOptions {
|
|
178
|
+
/** Override signing method; when omitted, uses default "sdk-signer". */
|
|
179
|
+
signingMethod?: SigningMethod | null;
|
|
180
|
+
/** When true (default for sdk-signer), require a selected signer. When false, only wallet is required. */
|
|
181
|
+
requireSigner?: boolean;
|
|
182
|
+
/** When using wallet-adapter, pass true when the adapter is connected. Omit if not using wallet-adapter. */
|
|
183
|
+
walletAdapterConnected?: boolean;
|
|
184
|
+
}
|
|
185
|
+
interface UseCanSignResult {
|
|
186
|
+
/** True when the user has a valid token. */
|
|
187
|
+
hasToken: boolean;
|
|
188
|
+
/** True when a wallet is selected. */
|
|
189
|
+
hasWallet: boolean;
|
|
190
|
+
/** True when a signer is selected (sdk-signer) or wallet-adapter is connected (when walletAdapterConnected is passed). */
|
|
191
|
+
hasSigner: boolean;
|
|
192
|
+
/** True when ready to sign a message (hasToken + hasWallet + hasSigner for current method). */
|
|
193
|
+
canSignMessage: boolean;
|
|
194
|
+
/** True when ready to sign/send a transaction (same as canSignMessage; connection is required for send). */
|
|
195
|
+
canSignTransaction: boolean;
|
|
196
|
+
}
|
|
197
|
+
/**
|
|
198
|
+
* Derived "is the user ready to sign?" for disabling sign buttons or showing prompts.
|
|
199
|
+
* For wallet-adapter, pass walletAdapterConnected when your adapter is connected so canSign reflects it.
|
|
200
|
+
* Must be used inside CilantroProvider.
|
|
201
|
+
*/
|
|
202
|
+
declare function useCanSign(options?: UseCanSignOptions): UseCanSignResult;
|
|
203
|
+
|
|
117
204
|
/**
|
|
118
205
|
* Type Utilities - common types and utilities for SDK interactions
|
|
119
206
|
*/
|
|
@@ -198,12 +285,16 @@ interface WalletSelectorClassNames {
|
|
|
198
285
|
trigger?: string;
|
|
199
286
|
content?: string;
|
|
200
287
|
item?: string;
|
|
288
|
+
skeleton?: string;
|
|
289
|
+
loading?: string;
|
|
201
290
|
}
|
|
202
291
|
interface WalletSelectorProps {
|
|
203
292
|
value?: string;
|
|
204
293
|
onWalletChange?: (walletId: string, wallet: WalletData | null) => void;
|
|
205
294
|
className?: string;
|
|
206
295
|
classNames?: WalletSelectorClassNames;
|
|
296
|
+
/** When true (default), show skeleton in trigger while loading; when false, show "Loading..." text. */
|
|
297
|
+
useSkeleton?: boolean;
|
|
207
298
|
placeholder?: string;
|
|
208
299
|
renderTrigger?: (props: {
|
|
209
300
|
selectedWallet: WalletData | null;
|
|
@@ -233,6 +324,8 @@ interface SignerSelectorClassNames {
|
|
|
233
324
|
list?: string;
|
|
234
325
|
item?: string;
|
|
235
326
|
message?: string;
|
|
327
|
+
skeleton?: string;
|
|
328
|
+
loading?: string;
|
|
236
329
|
}
|
|
237
330
|
interface SignerSelectorProps {
|
|
238
331
|
/** Wallet ID (signers are loaded for this wallet when used with useSigners) */
|
|
@@ -249,6 +342,8 @@ interface SignerSelectorProps {
|
|
|
249
342
|
className?: string;
|
|
250
343
|
/** Override class names for sub-elements */
|
|
251
344
|
classNames?: SignerSelectorClassNames;
|
|
345
|
+
/** When true (default), show skeleton rows while loading; when false, show "Loading signers..." text. */
|
|
346
|
+
useSkeleton?: boolean;
|
|
252
347
|
/** Custom list render (headless) */
|
|
253
348
|
renderList?: (props: {
|
|
254
349
|
signers: SignerData[];
|
|
@@ -267,25 +362,16 @@ interface SignerSelectorProps {
|
|
|
267
362
|
isLoading: boolean;
|
|
268
363
|
}) => React.ReactNode;
|
|
269
364
|
}
|
|
270
|
-
declare function SignerSelector({ selectedWalletId, availableSigners, selectedSigner, isLoadingSigners, onSignerSelect, className, classNames, renderList, children, }: SignerSelectorProps): react_jsx_runtime.JSX.Element | null;
|
|
365
|
+
declare function SignerSelector({ selectedWalletId, availableSigners, selectedSigner, isLoadingSigners, onSignerSelect, className, classNames, useSkeleton, renderList, children, }: SignerSelectorProps): react_jsx_runtime.JSX.Element | null;
|
|
271
366
|
|
|
272
|
-
interface DelegatedKeyData {
|
|
273
|
-
id: string;
|
|
274
|
-
walletId: string;
|
|
275
|
-
name?: string;
|
|
276
|
-
publicKey: string;
|
|
277
|
-
permissions: Record<string, unknown>;
|
|
278
|
-
isActive?: boolean;
|
|
279
|
-
createdAt?: string;
|
|
280
|
-
expiresAt?: string;
|
|
281
|
-
[key: string]: unknown;
|
|
282
|
-
}
|
|
283
367
|
interface DelegatedKeySelectorClassNames {
|
|
284
368
|
root?: string;
|
|
285
369
|
trigger?: string;
|
|
286
370
|
content?: string;
|
|
287
371
|
item?: string;
|
|
288
372
|
message?: string;
|
|
373
|
+
skeleton?: string;
|
|
374
|
+
loading?: string;
|
|
289
375
|
}
|
|
290
376
|
interface DelegatedKeySelectorProps {
|
|
291
377
|
walletId: string;
|
|
@@ -294,6 +380,8 @@ interface DelegatedKeySelectorProps {
|
|
|
294
380
|
filterActive?: boolean;
|
|
295
381
|
className?: string;
|
|
296
382
|
classNames?: DelegatedKeySelectorClassNames;
|
|
383
|
+
/** When true (default), show skeleton trigger while loading; when false, show "Loading delegated keys..." text. */
|
|
384
|
+
useSkeleton?: boolean;
|
|
297
385
|
placeholder?: string;
|
|
298
386
|
children?: (props: {
|
|
299
387
|
keys: DelegatedKeyData[];
|
|
@@ -500,6 +588,8 @@ declare function AuthForm({ defaultMode, className, classNames, onSuccess, onErr
|
|
|
500
588
|
interface AuthGuardClassNames {
|
|
501
589
|
root?: string;
|
|
502
590
|
fallback?: string;
|
|
591
|
+
skeleton?: string;
|
|
592
|
+
loading?: string;
|
|
503
593
|
}
|
|
504
594
|
interface AuthGuardProps {
|
|
505
595
|
children: ReactNode;
|
|
@@ -510,12 +600,14 @@ interface AuthGuardProps {
|
|
|
510
600
|
classNames?: AuthGuardClassNames;
|
|
511
601
|
/** When true, show fallback (login) instead of children when unauthenticated. When false, render null when unauthenticated. */
|
|
512
602
|
showFallback?: boolean;
|
|
603
|
+
/** When true, show a small skeleton card while loading; when false (default), show "Loading..." text. */
|
|
604
|
+
useSkeleton?: boolean;
|
|
513
605
|
}
|
|
514
606
|
/**
|
|
515
607
|
* Wraps content and shows fallback (e.g. LoginForm) when the user is not authenticated.
|
|
516
608
|
* Use inside CilantroAuthProvider.
|
|
517
609
|
*/
|
|
518
|
-
declare function AuthGuard({ children, fallback, className, classNames, showFallback, }: AuthGuardProps): react_jsx_runtime.JSX.Element | null;
|
|
610
|
+
declare function AuthGuard({ children, fallback, className, classNames, showFallback, useSkeleton, }: AuthGuardProps): react_jsx_runtime.JSX.Element | null;
|
|
519
611
|
|
|
520
612
|
type AddSignerType = "email" | "phone" | "passkey" | "external";
|
|
521
613
|
interface AddSignerFormClassNames {
|
|
@@ -549,6 +641,8 @@ interface SignerListClassNames {
|
|
|
549
641
|
item?: string;
|
|
550
642
|
addButton?: string;
|
|
551
643
|
message?: string;
|
|
644
|
+
skeleton?: string;
|
|
645
|
+
loading?: string;
|
|
552
646
|
}
|
|
553
647
|
interface SignerListProps {
|
|
554
648
|
walletId: string;
|
|
@@ -556,6 +650,8 @@ interface SignerListProps {
|
|
|
556
650
|
classNames?: SignerListClassNames;
|
|
557
651
|
/** Callback when a signer is added (e.g. to refresh parent state) */
|
|
558
652
|
onSignerAdded?: () => void;
|
|
653
|
+
/** When true (default), show skeleton rows while loading; when false, show "Loading signers..." text. */
|
|
654
|
+
useSkeleton?: boolean;
|
|
559
655
|
/** Custom render for the list of signers */
|
|
560
656
|
children?: (props: {
|
|
561
657
|
signers: SignerData[];
|
|
@@ -565,7 +661,28 @@ interface SignerListProps {
|
|
|
565
661
|
openAddSigner: () => void;
|
|
566
662
|
}) => React.ReactNode;
|
|
567
663
|
}
|
|
568
|
-
declare function SignerList({ walletId, className, classNames, onSignerAdded, children, }: SignerListProps): react_jsx_runtime.JSX.Element;
|
|
664
|
+
declare function SignerList({ walletId, className, classNames, onSignerAdded, useSkeleton, children, }: SignerListProps): react_jsx_runtime.JSX.Element;
|
|
665
|
+
|
|
666
|
+
interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
667
|
+
}
|
|
668
|
+
declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
669
|
+
|
|
670
|
+
type Theme = "light" | "dark" | "system";
|
|
671
|
+
type ResolvedTheme = "light" | "dark";
|
|
672
|
+
interface ThemeProviderProps {
|
|
673
|
+
/** Current theme: "light", "dark", or "system" (follows prefers-color-scheme). */
|
|
674
|
+
theme?: Theme;
|
|
675
|
+
/** Default theme when theme is "system" or for initial render. */
|
|
676
|
+
defaultTheme?: ResolvedTheme;
|
|
677
|
+
/** Optional localStorage key for persisting theme when using "system". */
|
|
678
|
+
storageKey?: string;
|
|
679
|
+
/** Optional class for the wrapper div. */
|
|
680
|
+
className?: string;
|
|
681
|
+
children: React$1.ReactNode;
|
|
682
|
+
/** When true, inject the default theme CSS variables (light/dark). Your app must still use Tailwind. */
|
|
683
|
+
injectStyles?: boolean;
|
|
684
|
+
}
|
|
685
|
+
declare function ThemeProvider({ theme, defaultTheme, storageKey, className, children, injectStyles, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
569
686
|
|
|
570
687
|
declare function extractErrorMessage(error: unknown): string;
|
|
571
688
|
|
|
@@ -613,4 +730,4 @@ declare const SIGNER_TYPES: {
|
|
|
613
730
|
};
|
|
614
731
|
type SignerType = (typeof SIGNER_TYPES)[keyof typeof SIGNER_TYPES];
|
|
615
732
|
|
|
616
|
-
export { type ActionState, AddSignerForm, type AddSignerFormClassNames, type AddSignerFormProps, type AddSignerType, type ApiResponse, AuthForm, type AuthFormClassNames, type AuthFormMode, type AuthFormProps, AuthGuard, type AuthGuardClassNames, type AuthGuardProps, type CilantroAuthContextType, CilantroAuthProvider, type CilantroAuthProviderProps, CilantroProvider, type DelegatedKeyData, DelegatedKeySelector, type DelegatedKeySelectorClassNames, type DelegatedKeySelectorProps, type ErrorResponse, LoginForm, type LoginFormClassNames, type LoginFormProps, MessageSigningForm, type MessageSigningFormClassNames, type MessageSigningFormProps, RegisterForm, type RegisterFormClassNames, type RegisterFormProps, SIGNER_TYPES, type SignAndSendConnection, type SignerData, SignerList, type SignerListClassNames, type SignerListProps, SignerSelector, type SignerSelectorClassNames, type SignerSelectorProps, type SignerType, type SigningMethod, TransactionSigningForm, type TransactionSigningFormClassNames, type TransactionSigningFormProps, type UseMessageSigningOptions, type UseMessageSigningResult, type UseSignerSelectionOptions, type UseSignerSelectionResult, type UseSignersOptions, type UseSignersResult, type UseTransactionSigningOptions, type UseTransactionSigningResult, type User, type WalletContextType, type WalletData, WalletProvider, type WalletProviderProps, WalletSelector, type WalletSelectorClassNames, type WalletSelectorProps, extractErrorMessage, extractResponseData, getSignerPublicKey, getWalletData, signAndSendTransactionWithSigner, signMessageWithSigner, signTransactionWithSigner, useCilantroAuth, useMessageSigning, useSignerSelection, useSigners, useTransactionSigning, useWallets };
|
|
733
|
+
export { type ActionState, AddSignerForm, type AddSignerFormClassNames, type AddSignerFormProps, type AddSignerType, type ApiResponse, AuthForm, type AuthFormClassNames, type AuthFormMode, type AuthFormProps, AuthGuard, type AuthGuardClassNames, type AuthGuardProps, type CilantroAuthContextType, CilantroAuthProvider, type CilantroAuthProviderProps, CilantroProvider, type DelegatedKeyData, DelegatedKeySelector, type DelegatedKeySelectorClassNames, type DelegatedKeySelectorProps, type ErrorResponse, LoginForm, type LoginFormClassNames, type LoginFormProps, MessageSigningForm, type MessageSigningFormClassNames, type MessageSigningFormProps, RegisterForm, type RegisterFormClassNames, type RegisterFormProps, type ResolvedTheme, SIGNER_TYPES, type SignAndSendConnection, type SignerData, SignerList, type SignerListClassNames, type SignerListProps, SignerSelector, type SignerSelectorClassNames, type SignerSelectorProps, type SignerType, type SigningMethod, Skeleton, type Theme, ThemeProvider, type ThemeProviderProps, TransactionSigningForm, type TransactionSigningFormClassNames, type TransactionSigningFormProps, type UseCanSignOptions, type UseCanSignResult, type UseDelegatedKeysOptions, type UseDelegatedKeysResult, type UseMessageSigningOptions, type UseMessageSigningResult, type UseSelectedWalletResult, type UseSignerSelectionOptions, type UseSignerSelectionResult, type UseSignersForSelectedWalletOptions, type UseSignersOptions, type UseSignersResult, type UseTransactionSigningOptions, type UseTransactionSigningResult, type User, type WalletContextType, type WalletData, WalletProvider, type WalletProviderProps, WalletSelector, type WalletSelectorClassNames, type WalletSelectorProps, extractErrorMessage, extractResponseData, getSignerPublicKey, getWalletData, signAndSendTransactionWithSigner, signMessageWithSigner, signTransactionWithSigner, useCanSign, useCilantroAuth, useDelegatedKeys, useMessageSigning, useSelectedWallet, useSignerSelection, useSigners, useSignersForSelectedWallet, useTransactionSigning, useWalletAddress, useWallets };
|