@pollar/react 0.10.0-rc.10 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -64
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -3,15 +3,18 @@
|
|
|
3
3
|
React bindings for [Pollar](https://pollar.xyz) — drop-in authentication UI, transaction modals, and hooks for
|
|
4
4
|
Stellar-based applications.
|
|
5
5
|
|
|
6
|
-
> **0.
|
|
7
|
-
>
|
|
8
|
-
>
|
|
9
|
-
> `
|
|
6
|
+
> **0.10.0** requires `@pollar/core@^0.10.0`. Headline features: on-chain swaps
|
|
7
|
+
> via `<SwapModal>` + `usePollar().swap` / `getSwapQuote` / `openSwapModal`;
|
|
8
|
+
> live SEP-24 on/off-ramps through `<RampWidget>` (now wired to
|
|
9
|
+
> `client.createOnRamp` / `client.createOffRamp`); and a self-driving Privy
|
|
10
|
+
> adapter (registered interactive adapters are auto-driven to completion before
|
|
11
|
+
> `login({ provider })`). Read the [CHANGELOG](../../CHANGELOG.md) before
|
|
12
|
+
> upgrading.
|
|
10
13
|
>
|
|
11
|
-
> **0.8.0 reshapes `<PollarProvider>` props (breaking).** `config`
|
|
14
|
+
> **0.8.0 reshapes `<PollarProvider>` props (breaking).** `config` > `client`
|
|
12
15
|
> (now accepts a `PollarClient` instance or a `PollarClientConfig`); `styles`
|
|
13
16
|
> moves under `appConfig.styles`; new `appConfig` prop is the opt-out switch
|
|
14
|
-
> for the remote `/applications/config` fetch (pass it
|
|
17
|
+
> for the remote `/applications/config` fetch (pass it - even `{}` - to skip
|
|
15
18
|
> the fetch). Read the [CHANGELOG](../../CHANGELOG.md) and
|
|
16
19
|
> [UPGRADE.md](../../UPGRADE.md) before upgrading.
|
|
17
20
|
|
|
@@ -44,18 +47,18 @@ export default function App({ children }: { children: React.ReactNode }) {
|
|
|
44
47
|
import { usePollar } from '@pollar/react';
|
|
45
48
|
|
|
46
49
|
export function Profile() {
|
|
47
|
-
const { isAuthenticated,
|
|
50
|
+
const { isAuthenticated, wallet, login, logout, getClient } = usePollar();
|
|
48
51
|
|
|
49
52
|
if (!isAuthenticated) {
|
|
50
53
|
return <button onClick={() => login({ provider: 'google' })}>Sign in with Google</button>;
|
|
51
54
|
}
|
|
52
55
|
|
|
53
|
-
// PII (email, name, avatar, providers) lives in memory only
|
|
56
|
+
// PII (email, name, avatar, providers) lives in memory only - fetch it from the client.
|
|
54
57
|
const profile = getClient().getUserProfile();
|
|
55
58
|
|
|
56
59
|
return (
|
|
57
60
|
<div>
|
|
58
|
-
<p>Wallet: {
|
|
61
|
+
<p>Wallet: {wallet?.address}</p>
|
|
59
62
|
<p>Email: {profile?.mail}</p>
|
|
60
63
|
<button onClick={logout}>Sign out</button>
|
|
61
64
|
</div>
|
|
@@ -120,25 +123,30 @@ needed.
|
|
|
120
123
|
```ts
|
|
121
124
|
const {
|
|
122
125
|
// Session
|
|
123
|
-
isAuthenticated, // boolean
|
|
124
|
-
|
|
125
|
-
|
|
126
|
+
isAuthenticated, // boolean - true when a wallet address is present
|
|
127
|
+
wallet, // WalletInfo | null - read wallet?.address for the on-chain address
|
|
128
|
+
verified, // boolean - true once the server has confirmed the session
|
|
126
129
|
|
|
127
130
|
// Client escape hatch
|
|
128
|
-
getClient, // () => PollarClient
|
|
131
|
+
getClient, // () => PollarClient - for getUserProfile(), listSessions(), …
|
|
129
132
|
|
|
130
133
|
// Auth
|
|
131
134
|
login, // (options: PollarLoginOptions) => void
|
|
132
135
|
logout, // () => void (fire-and-forget; await getClient().logout() if you need the promise)
|
|
133
136
|
openLoginModal, // () => void
|
|
134
137
|
|
|
135
|
-
// Sessions
|
|
138
|
+
// Sessions
|
|
139
|
+
sessions, // SessionsState
|
|
136
140
|
openSessionsModal, // () => void
|
|
137
141
|
|
|
138
142
|
// Transactions
|
|
139
143
|
tx, // TransactionState
|
|
140
|
-
buildTx, // (operation, params, options?) => Promise<
|
|
141
|
-
signAndSubmitTx, // (unsignedXdr
|
|
144
|
+
buildTx, // (operation, params, options?) => Promise<BuildOutcome>
|
|
145
|
+
signAndSubmitTx, // (unsignedXdr?: string) => Promise<SubmitOutcome> (custodial; XDR optional)
|
|
146
|
+
signTx, // (unsignedXdr: string) => Promise<SignOutcome> (external-wallet only)
|
|
147
|
+
submitTx, // (signedXdr: string) => Promise<SubmitOutcome>
|
|
148
|
+
buildAndSignAndSubmitTx, // (operation, params, options?) => Promise<SubmitOutcome> (one-shot)
|
|
149
|
+
runTx, // alias of buildAndSignAndSubmitTx
|
|
142
150
|
openTxModal, // () => void
|
|
143
151
|
|
|
144
152
|
// Transaction history
|
|
@@ -150,18 +158,32 @@ const {
|
|
|
150
158
|
refreshWalletBalance, // () => Promise<void>
|
|
151
159
|
openWalletBalanceModal, // () => void
|
|
152
160
|
|
|
161
|
+
// Enabled assets / trustlines
|
|
162
|
+
enabledAssets, // EnabledAssetsState
|
|
163
|
+
refreshAssets, // () => Promise<void>
|
|
164
|
+
setTrustline, // (asset, opts?) => Promise<TrustlineOutcome>
|
|
165
|
+
openEnabledAssetsModal, // () => void
|
|
166
|
+
|
|
167
|
+
// Swap (DEX/AMM)
|
|
168
|
+
getSwapQuote, // (params: SwapQuoteParams) => Promise<SwapQuote[]>
|
|
169
|
+
swap, // (quote: SwapQuote, opts?) => Promise<SubmitOutcome>
|
|
170
|
+
openSwapModal, // () => void
|
|
171
|
+
|
|
172
|
+
// Distribution rules
|
|
173
|
+
openDistributionRulesModal, // () => void
|
|
174
|
+
|
|
153
175
|
// Send / Receive
|
|
154
176
|
openSendModal, // () => void
|
|
155
177
|
openReceiveModal, // () => void
|
|
156
178
|
|
|
157
179
|
// Network
|
|
158
|
-
network, // StellarNetwork
|
|
180
|
+
network, // StellarNetwork - 'mainnet' | 'testnet'
|
|
159
181
|
setNetwork, // (network: StellarNetwork) => void
|
|
160
182
|
|
|
161
|
-
// KYC (UI ready
|
|
183
|
+
// KYC (UI ready - backend coming soon)
|
|
162
184
|
openKycModal, // (options?: { country?, level?, onApproved? }) => void
|
|
163
185
|
|
|
164
|
-
// Ramp (
|
|
186
|
+
// Ramp (SEP-24 on/off-ramps, wired through core)
|
|
165
187
|
openRampModal, // () => void
|
|
166
188
|
|
|
167
189
|
// App config / styles served by the Pollar API
|
|
@@ -173,8 +195,11 @@ const {
|
|
|
173
195
|
} = usePollar();
|
|
174
196
|
```
|
|
175
197
|
|
|
176
|
-
|
|
177
|
-
|
|
198
|
+
Custody is derived from `wallet`, not a separate field - e.g.
|
|
199
|
+
`wallet?.custody === 'external' ? wallet.provider : null`.
|
|
200
|
+
|
|
201
|
+
> **0.6.0 renames** - `transaction` > `tx`, `openTransactionModal` > `openTxModal`, `config` > `appConfig`,
|
|
202
|
+
> `openRampWidget` > `openRampModal`, `refreshBalance` > `refreshWalletBalance`. Existing code on 0.5.x must update.
|
|
178
203
|
|
|
179
204
|
#### Login options
|
|
180
205
|
|
|
@@ -186,16 +211,32 @@ login({ provider: 'github' });
|
|
|
186
211
|
// Email OTP
|
|
187
212
|
login({ provider: 'email', email: 'user@example.com' });
|
|
188
213
|
|
|
189
|
-
// Built-in Stellar wallet adapters
|
|
214
|
+
// Built-in Stellar wallet adapters (the adapter's `type` IS the provider)
|
|
190
215
|
import { WalletType } from '@pollar/core';
|
|
191
|
-
login({ provider:
|
|
192
|
-
login({ provider:
|
|
216
|
+
login({ provider: WalletType.FREIGHTER }); // 'freighter-native'
|
|
217
|
+
login({ provider: WalletType.ALBEDO }); // 'albedo-native'
|
|
193
218
|
|
|
194
|
-
// Any external adapter (e.g. Stellar Wallets Kit)
|
|
195
|
-
login({ provider: '
|
|
196
|
-
login({ provider: '
|
|
219
|
+
// Any external adapter (e.g. Stellar Wallets Kit) registered via `walletAdapters`
|
|
220
|
+
login({ provider: 'xbull' });
|
|
221
|
+
login({ provider: 'lobstr' });
|
|
197
222
|
```
|
|
198
223
|
|
|
224
|
+
#### Self-driving interactive adapters (Privy, …)
|
|
225
|
+
|
|
226
|
+
Registered adapters that opt into the interactive-auth contract
|
|
227
|
+
(`isInteractiveAuthAdapter` + `onProviderAuthChange`) are auto-driven by the
|
|
228
|
+
provider:
|
|
229
|
+
|
|
230
|
+
- `LoginModal` renders a login entry per registered wallet adapter, so each
|
|
231
|
+
interactive provider gets its own button.
|
|
232
|
+
- Picking one opens `PrivyLoginSubmodal`, which drives the adapter's own login
|
|
233
|
+
(email code / OAuth) to completion, then hands off to `login({ provider })`
|
|
234
|
+
(which runs `connect()` + SEP-10).
|
|
235
|
+
- If the provider authenticates outside the sub-modal - after an OAuth redirect
|
|
236
|
+
that reloaded the page, or a persisted provider session on load - the
|
|
237
|
+
provider's `onProviderAuthChange` subscription fires `login({ provider })`
|
|
238
|
+
automatically when Pollar has no session yet.
|
|
239
|
+
|
|
199
240
|
---
|
|
200
241
|
|
|
201
242
|
### Components
|
|
@@ -205,14 +246,17 @@ already wired inside `<PollarProvider>` — but they're exported in case you wan
|
|
|
205
246
|
|
|
206
247
|
| Component | Purpose |
|
|
207
248
|
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
208
|
-
| `<WalletButton>`
|
|
209
|
-
| `<SendModal>`
|
|
210
|
-
| `<
|
|
211
|
-
| `<
|
|
212
|
-
| `<
|
|
213
|
-
| `<
|
|
214
|
-
| `<
|
|
215
|
-
| `<
|
|
249
|
+
| `<WalletButton>` | Drop-in button. Opens login when signed out; signed in, shows the wallet address with a dropdown (Send, Receive, copy address, balance, history, ramp, KYC, distribution rules, sessions, sign out). Inline arc spinner during in-progress transactions |
|
|
250
|
+
| `<SendModal>` | Full send flow: asset picker, amount, destination, inline build > sign > success/error |
|
|
251
|
+
| `<SwapModal>` | On-chain asset-to-asset swap: pick from/to assets and amount, quote across venues, execute (auto-trustline on the buy asset when needed) |
|
|
252
|
+
| `<ReceiveModal>` | Wallet address as QR code with copy-to-clipboard (no external QR dependency required) |
|
|
253
|
+
| `<TxHistoryModal>` | Paginated transaction history with auto-fetch on open and stellar.expert explorer links |
|
|
254
|
+
| `<WalletBalanceModal>` | Stellar account balances with refresh button |
|
|
255
|
+
| `<EnabledAssetsModal>` | The application's dashboard-enabled assets with per-asset trustline state; establish/remove trustlines |
|
|
256
|
+
| `<DistributionRulesModal>` | Manage the wallet's distribution rules |
|
|
257
|
+
| `<SessionsModal>` | **New in 0.7.0.** Lists every active refresh-token family for the current user with device metadata, marks the local session, per-row revoke, and a "Sign out everywhere" button |
|
|
258
|
+
| `<KycModal>` | Identity verification flow - provider selection + status polling _(UI preview - backend coming soon)_ |
|
|
259
|
+
| `<RampWidget>` | Buy/sell crypto via SEP-24 - direction tabs, route comparison, payment instructions (wired to `client.createOnRamp` / `client.createOffRamp`) |
|
|
216
260
|
|
|
217
261
|
```tsx
|
|
218
262
|
import { WalletButton } from '@pollar/react';
|
|
@@ -234,10 +278,13 @@ want to swap the chrome but keep the data wiring from `usePollar()`.
|
|
|
234
278
|
| `<WalletButton>` | `<WalletButtonTemplate>` |
|
|
235
279
|
| _(internal LoginModal)_ | `<LoginModalTemplate>` |
|
|
236
280
|
| `<SendModal>` | `<SendModalTemplate>` |
|
|
281
|
+
| `<SwapModal>` | `<SwapModalTemplate>` |
|
|
237
282
|
| `<ReceiveModal>` | `<ReceiveModalTemplate>` |
|
|
238
283
|
| `<TransactionModal>` | `<TransactionModalTemplate>` |
|
|
239
284
|
| `<TxHistoryModal>` | `<TxHistoryModalTemplate>` |
|
|
240
285
|
| `<WalletBalanceModal>` | `<WalletBalanceModalTemplate>` |
|
|
286
|
+
| `<EnabledAssetsModal>` | `<EnabledAssetsModalTemplate>` |
|
|
287
|
+
| `<DistributionRulesModal>` | `<DistributionRulesModalTemplate>` |
|
|
241
288
|
| `<KycModal>` | `<KycModalTemplate>` |
|
|
242
289
|
| `<RampWidget>` | `<RampWidgetTemplate>` |
|
|
243
290
|
| `<SessionsModal>` | `<SessionsModalTemplate>` |
|
|
@@ -291,33 +338,10 @@ function MyComponent() {
|
|
|
291
338
|
|
|
292
339
|
### External wallet stacks (Stellar Wallets Kit, …)
|
|
293
340
|
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
```tsx
|
|
299
|
-
import { PollarProvider } from '@pollar/react';
|
|
300
|
-
import { stellarWalletsKit } from '@pollar/stellar-wallets-kit-adapter';
|
|
301
|
-
import { Networks } from '@creit.tech/stellar-wallets-kit';
|
|
302
|
-
|
|
303
|
-
<PollarProvider
|
|
304
|
-
client={{
|
|
305
|
-
apiKey: 'your-api-key',
|
|
306
|
-
walletAdapter: stellarWalletsKit({ network: Networks.PUBLIC }),
|
|
307
|
-
}}
|
|
308
|
-
>
|
|
309
|
-
{children}
|
|
310
|
-
</PollarProvider>;
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
Then any `login({ provider: 'wallet', type: '<kit wallet id>' })` is routed
|
|
314
|
-
through the kit.
|
|
315
|
-
|
|
316
|
-
#### Showing every kit wallet in `LoginModal`
|
|
317
|
-
|
|
318
|
-
Register the kit wallets with `walletAdapters` (plural) instead of the
|
|
319
|
-
signing-only resolver, and `LoginModal` auto-renders one button per wallet —
|
|
320
|
-
collapsed behind a single "Wallet" gateway button (their shared `meta.group`):
|
|
341
|
+
Register adapters for wallets that live outside `@pollar/core` by passing a
|
|
342
|
+
`walletAdapters: WalletAdapter[]` array. `LoginModal` auto-renders one button per
|
|
343
|
+
registered adapter, and each is reachable via `login({ provider: adapter.type })`.
|
|
344
|
+
`stellarWalletsKitAdapters()` returns that array (one adapter per kit module):
|
|
321
345
|
|
|
322
346
|
```tsx
|
|
323
347
|
import { PollarProvider } from '@pollar/react';
|
|
@@ -362,19 +386,25 @@ All class names are prefixed with `pollar-` to avoid conflicts.
|
|
|
362
386
|
|
|
363
387
|
```ts
|
|
364
388
|
import type {
|
|
365
|
-
AuthProviderProps,
|
|
366
|
-
AuthContextValue,
|
|
367
389
|
LoginButtonProps,
|
|
368
390
|
AuthModalProps,
|
|
369
391
|
PollarConfig,
|
|
370
392
|
PollarStyles,
|
|
371
393
|
|
|
394
|
+
// Custom-provider contracts (re-exported from @pollar/core)
|
|
395
|
+
PollarAuthProvider,
|
|
396
|
+
AuthProviderContext,
|
|
397
|
+
|
|
372
398
|
// Template props
|
|
399
|
+
WalletButtonTemplateProps,
|
|
373
400
|
SendModalTemplateProps,
|
|
401
|
+
SwapModalTemplateProps,
|
|
402
|
+
SwapAssetOption,
|
|
374
403
|
ReceiveModalTemplateProps,
|
|
375
404
|
TransactionModalTemplateProps,
|
|
376
405
|
TxStatusViewProps,
|
|
377
406
|
WalletBalanceModalTemplateProps,
|
|
407
|
+
EnabledAssetsModalTemplateProps,
|
|
378
408
|
SessionsModalTemplateProps,
|
|
379
409
|
SessionsState,
|
|
380
410
|
|
package/dist/index.js
CHANGED
|
@@ -1035,7 +1035,7 @@ var PollarModalFooter = () => {
|
|
|
1035
1035
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
|
|
1036
1036
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
|
|
1037
1037
|
"v",
|
|
1038
|
-
"0.10.0
|
|
1038
|
+
"0.10.0"
|
|
1039
1039
|
] })
|
|
1040
1040
|
] })
|
|
1041
1041
|
] });
|
package/dist/index.mjs
CHANGED
|
@@ -1033,7 +1033,7 @@ var PollarModalFooter = () => {
|
|
|
1033
1033
|
/* @__PURE__ */ jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
|
|
1034
1034
|
/* @__PURE__ */ jsxs("span", { className: "pollar-footer-version", children: [
|
|
1035
1035
|
"v",
|
|
1036
|
-
"0.10.0
|
|
1036
|
+
"0.10.0"
|
|
1037
1037
|
] })
|
|
1038
1038
|
] })
|
|
1039
1039
|
] });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pollar/react",
|
|
3
|
-
"version": "0.10.0
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "React components for Pollar authentication",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
"node": ">=20"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"@pollar/core": "^0.10.0
|
|
37
|
+
"@pollar/core": "^0.10.0",
|
|
38
38
|
"react": ">=18",
|
|
39
39
|
"react-dom": ">=18"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@pollar/core": "^0.10.0
|
|
42
|
+
"@pollar/core": "^0.10.0",
|
|
43
43
|
"@simplewebauthn/browser": "^13.3.0",
|
|
44
44
|
"qr.js": "^0.0.0"
|
|
45
45
|
},
|