@pollar/react 0.10.1-rc.4 → 0.10.1-rc.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.
Files changed (10) hide show
  1. package/README.md +27 -27
  2. package/dist/index.css +100 -7
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.d.mts +42 -4
  5. package/dist/index.d.ts +42 -4
  6. package/dist/index.js +802 -283
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +802 -284
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -244,19 +244,19 @@ provider:
244
244
  Every modal mounts itself when its `openXModal()` action is called. You don't need to render these directly — they're
245
245
  already wired inside `<PollarProvider>` — but they're exported in case you want to mount them yourself.
246
246
 
247
- | Component | Purpose |
248
- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
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`) |
247
+ | Component | Purpose |
248
+ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
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`) |
260
260
 
261
261
  ```tsx
262
262
  import { WalletButton } from '@pollar/react';
@@ -273,21 +273,21 @@ export function Header() {
273
273
  Every modal ships a pure presentational "template" companion — same name with a `Template` suffix. Use these when you
274
274
  want to swap the chrome but keep the data wiring from `usePollar()`.
275
275
 
276
- | Wrapper | Template |
277
- | ----------------------- | ------------------------------ |
278
- | `<WalletButton>` | `<WalletButtonTemplate>` |
279
- | _(internal LoginModal)_ | `<LoginModalTemplate>` |
280
- | `<SendModal>` | `<SendModalTemplate>` |
281
- | `<SwapModal>` | `<SwapModalTemplate>` |
282
- | `<ReceiveModal>` | `<ReceiveModalTemplate>` |
283
- | `<TransactionModal>` | `<TransactionModalTemplate>` |
284
- | `<TxHistoryModal>` | `<TxHistoryModalTemplate>` |
285
- | `<WalletBalanceModal>` | `<WalletBalanceModalTemplate>` |
286
- | `<EnabledAssetsModal>` | `<EnabledAssetsModalTemplate>` |
276
+ | Wrapper | Template |
277
+ | -------------------------- | ---------------------------------- |
278
+ | `<WalletButton>` | `<WalletButtonTemplate>` |
279
+ | _(internal LoginModal)_ | `<LoginModalTemplate>` |
280
+ | `<SendModal>` | `<SendModalTemplate>` |
281
+ | `<SwapModal>` | `<SwapModalTemplate>` |
282
+ | `<ReceiveModal>` | `<ReceiveModalTemplate>` |
283
+ | `<TransactionModal>` | `<TransactionModalTemplate>` |
284
+ | `<TxHistoryModal>` | `<TxHistoryModalTemplate>` |
285
+ | `<WalletBalanceModal>` | `<WalletBalanceModalTemplate>` |
286
+ | `<EnabledAssetsModal>` | `<EnabledAssetsModalTemplate>` |
287
287
  | `<DistributionRulesModal>` | `<DistributionRulesModalTemplate>` |
288
- | `<KycModal>` | `<KycModalTemplate>` |
289
- | `<RampWidget>` | `<RampWidgetTemplate>` |
290
- | `<SessionsModal>` | `<SessionsModalTemplate>` |
288
+ | `<KycModal>` | `<KycModalTemplate>` |
289
+ | `<RampWidget>` | `<RampWidgetTemplate>` |
290
+ | `<SessionsModal>` | `<SessionsModalTemplate>` |
291
291
 
292
292
  `<TxStatusView>` is the shared status component (build → sign → success/error) reused by `TransactionModal` and
293
293
  `SendModal`; it's exported on its own for consumers that want to embed the lifecycle elsewhere.
package/dist/index.css CHANGED
@@ -1847,6 +1847,54 @@
1847
1847
  line-height: 1.4;
1848
1848
  }
1849
1849
 
1850
+ /* src/components/earn-modal/EarnModal.css */
1851
+ .pollar-earn-tabs {
1852
+ display: flex;
1853
+ gap: 4px;
1854
+ margin-bottom: 12px;
1855
+ padding: 4px;
1856
+ border: 1px solid var(--pollar-border);
1857
+ border-radius: var(--pollar-card-border-radius);
1858
+ background: var(--pollar-input-bg);
1859
+ }
1860
+ .pollar-earn-tab {
1861
+ flex: 1;
1862
+ height: 36px;
1863
+ border: none;
1864
+ border-radius: 6px;
1865
+ background: transparent;
1866
+ color: var(--pollar-muted);
1867
+ font-size: 14px;
1868
+ font-weight: 600;
1869
+ cursor: pointer;
1870
+ }
1871
+ .pollar-earn-tab-active {
1872
+ background: var(--pollar-bg);
1873
+ color: var(--pollar-accent);
1874
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
1875
+ }
1876
+ .pollar-earn-amount {
1877
+ position: relative;
1878
+ display: flex;
1879
+ align-items: center;
1880
+ }
1881
+ .pollar-earn-amount .pollar-input {
1882
+ width: 100%;
1883
+ padding-right: 64px;
1884
+ }
1885
+ .pollar-earn-amount-unit {
1886
+ position: absolute;
1887
+ right: 12px;
1888
+ color: var(--pollar-muted);
1889
+ font-size: 13px;
1890
+ font-weight: 600;
1891
+ pointer-events: none;
1892
+ }
1893
+ .pollar-earn-live {
1894
+ color: var(--pollar-accent);
1895
+ font-weight: 600;
1896
+ }
1897
+
1850
1898
  /* src/components/sessions-modal/SessionsModal.css */
1851
1899
  .pollar-sessions-modal {
1852
1900
  max-width: 480px;
@@ -1967,35 +2015,80 @@
1967
2015
  margin-bottom: 1rem;
1968
2016
  }
1969
2017
  .pollar-hist-item {
1970
- display: grid;
1971
- grid-template-columns: 1fr auto;
1972
- grid-template-rows: auto auto;
1973
- column-gap: 0.75rem;
1974
- row-gap: 0.375rem;
2018
+ display: flex;
2019
+ flex-direction: column;
2020
+ gap: 0.375rem;
1975
2021
  background: var(--pollar-input-bg);
1976
2022
  border: 1px solid var(--pollar-border);
1977
2023
  border-radius: var(--pollar-card-border-radius, 10px);
1978
2024
  padding: 0.875rem 1rem;
1979
2025
  }
2026
+ .pollar-hist-item-top {
2027
+ display: flex;
2028
+ align-items: flex-start;
2029
+ justify-content: space-between;
2030
+ gap: 0.75rem;
2031
+ }
1980
2032
  .pollar-hist-item-summary {
1981
2033
  font-size: 0.875rem;
1982
2034
  font-weight: 500;
1983
2035
  color: var(--pollar-text);
2036
+ display: flex;
2037
+ align-items: center;
2038
+ flex-wrap: wrap;
2039
+ gap: 0.375rem;
2040
+ min-width: 0;
2041
+ }
2042
+ .pollar-hist-item-title {
1984
2043
  overflow: hidden;
1985
2044
  text-overflow: ellipsis;
1986
2045
  white-space: nowrap;
1987
2046
  }
2047
+ .pollar-hist-item-issuer {
2048
+ display: inline-flex;
2049
+ align-items: center;
2050
+ gap: 2px;
2051
+ font-family:
2052
+ ui-monospace,
2053
+ SFMono-Regular,
2054
+ Menlo,
2055
+ monospace;
2056
+ font-size: 0.75rem;
2057
+ font-weight: 400;
2058
+ color: var(--pollar-muted);
2059
+ background: var(--pollar-bg);
2060
+ border: 1px solid var(--pollar-border);
2061
+ border-radius: 6px;
2062
+ padding: 1px 3px 1px 7px;
2063
+ }
1988
2064
  .pollar-hist-item-meta {
1989
2065
  font-size: 0.75rem;
1990
2066
  color: var(--pollar-muted);
1991
2067
  display: flex;
1992
2068
  gap: 0.5rem;
1993
2069
  align-items: center;
2070
+ flex-wrap: wrap;
2071
+ }
2072
+ .pollar-hist-item-footer {
2073
+ display: flex;
2074
+ align-items: center;
2075
+ gap: 0.375rem;
2076
+ font-size: 0.75rem;
2077
+ color: var(--pollar-muted);
2078
+ }
2079
+ .pollar-hist-item-hash {
2080
+ font-family:
2081
+ ui-monospace,
2082
+ SFMono-Regular,
2083
+ Menlo,
2084
+ monospace;
2085
+ }
2086
+ .pollar-hist-item-dot {
2087
+ opacity: 0.6;
1994
2088
  }
1995
2089
  .pollar-hist-item-badge {
1996
- grid-row: 1 / 3;
1997
- grid-column: 2;
1998
2090
  align-self: start;
2091
+ flex-shrink: 0;
1999
2092
  font-size: 0.6875rem;
2000
2093
  font-weight: 600;
2001
2094
  padding: 3px 8px;