@pollar/react 0.10.1-rc.3 → 0.10.1-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +27 -27
  2. package/dist/index.css +105 -10
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.d.mts +3 -1
  5. package/dist/index.d.ts +3 -1
  6. package/dist/index.js +433 -263
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +433 -263
  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
@@ -277,6 +277,31 @@
277
277
  .pollar-status[data-kind=LOADING] svg {
278
278
  animation: pollar-spin 1s linear infinite;
279
279
  }
280
+ .pollar-copy-btn {
281
+ display: inline-flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+ flex-shrink: 0;
285
+ width: 30px;
286
+ height: 30px;
287
+ padding: 0;
288
+ color: var(--pollar-muted);
289
+ background: var(--pollar-input-bg);
290
+ border: 1px solid var(--pollar-border);
291
+ border-radius: var(--pollar-buttons-border-radius, 6px);
292
+ cursor: pointer;
293
+ transition: color 0.15s, border-color 0.15s;
294
+ }
295
+ .pollar-copy-btn:hover {
296
+ color: var(--pollar-accent);
297
+ border-color: var(--pollar-accent);
298
+ }
299
+ .pollar-copy-btn-sm {
300
+ width: 20px;
301
+ height: 20px;
302
+ background: transparent;
303
+ border: none;
304
+ }
280
305
 
281
306
  /* src/components/distribution-rules-modal/DistributionRulesModal.css */
282
307
  .pollar-dist-modal {
@@ -1942,35 +1967,80 @@
1942
1967
  margin-bottom: 1rem;
1943
1968
  }
1944
1969
  .pollar-hist-item {
1945
- display: grid;
1946
- grid-template-columns: 1fr auto;
1947
- grid-template-rows: auto auto;
1948
- column-gap: 0.75rem;
1949
- row-gap: 0.125rem;
1970
+ display: flex;
1971
+ flex-direction: column;
1972
+ gap: 0.375rem;
1950
1973
  background: var(--pollar-input-bg);
1951
1974
  border: 1px solid var(--pollar-border);
1952
1975
  border-radius: var(--pollar-card-border-radius, 10px);
1953
- padding: 0.75rem 1rem;
1976
+ padding: 0.875rem 1rem;
1977
+ }
1978
+ .pollar-hist-item-top {
1979
+ display: flex;
1980
+ align-items: flex-start;
1981
+ justify-content: space-between;
1982
+ gap: 0.75rem;
1954
1983
  }
1955
1984
  .pollar-hist-item-summary {
1956
1985
  font-size: 0.875rem;
1957
1986
  font-weight: 500;
1958
1987
  color: var(--pollar-text);
1988
+ display: flex;
1989
+ align-items: center;
1990
+ flex-wrap: wrap;
1991
+ gap: 0.375rem;
1992
+ min-width: 0;
1993
+ }
1994
+ .pollar-hist-item-title {
1959
1995
  overflow: hidden;
1960
1996
  text-overflow: ellipsis;
1961
1997
  white-space: nowrap;
1962
1998
  }
1999
+ .pollar-hist-item-issuer {
2000
+ display: inline-flex;
2001
+ align-items: center;
2002
+ gap: 2px;
2003
+ font-family:
2004
+ ui-monospace,
2005
+ SFMono-Regular,
2006
+ Menlo,
2007
+ monospace;
2008
+ font-size: 0.75rem;
2009
+ font-weight: 400;
2010
+ color: var(--pollar-muted);
2011
+ background: var(--pollar-bg);
2012
+ border: 1px solid var(--pollar-border);
2013
+ border-radius: 6px;
2014
+ padding: 1px 3px 1px 7px;
2015
+ }
1963
2016
  .pollar-hist-item-meta {
1964
2017
  font-size: 0.75rem;
1965
2018
  color: var(--pollar-muted);
1966
2019
  display: flex;
1967
2020
  gap: 0.5rem;
1968
2021
  align-items: center;
2022
+ flex-wrap: wrap;
2023
+ }
2024
+ .pollar-hist-item-footer {
2025
+ display: flex;
2026
+ align-items: center;
2027
+ gap: 0.375rem;
2028
+ font-size: 0.75rem;
2029
+ color: var(--pollar-muted);
2030
+ }
2031
+ .pollar-hist-item-hash {
2032
+ font-family:
2033
+ ui-monospace,
2034
+ SFMono-Regular,
2035
+ Menlo,
2036
+ monospace;
2037
+ }
2038
+ .pollar-hist-item-dot {
2039
+ opacity: 0.6;
1969
2040
  }
1970
2041
  .pollar-hist-item-badge {
1971
- grid-row: 1 / 3;
1972
- grid-column: 2;
1973
- align-self: center;
2042
+ align-self: start;
2043
+ flex-shrink: 0;
1974
2044
  font-size: 0.6875rem;
1975
2045
  font-weight: 600;
1976
2046
  padding: 3px 8px;
@@ -2040,7 +2110,15 @@
2040
2110
  .pollar-bal-modal {
2041
2111
  max-width: 380px;
2042
2112
  }
2113
+ .pollar-bal-address-row {
2114
+ display: flex;
2115
+ align-items: center;
2116
+ gap: 0.5rem;
2117
+ margin-bottom: 1rem;
2118
+ }
2043
2119
  .pollar-bal-address {
2120
+ flex: 1;
2121
+ min-width: 0;
2044
2122
  font-size: 0.75rem;
2045
2123
  font-family: monospace;
2046
2124
  color: var(--pollar-muted);
@@ -2048,7 +2126,6 @@
2048
2126
  border: 1px solid var(--pollar-border);
2049
2127
  border-radius: var(--pollar-card-border-radius, 10px);
2050
2128
  padding: 0.375rem 0.75rem;
2051
- margin-bottom: 1rem;
2052
2129
  overflow: hidden;
2053
2130
  text-overflow: ellipsis;
2054
2131
  white-space: nowrap;
@@ -2068,11 +2145,27 @@
2068
2145
  border-radius: var(--pollar-card-border-radius, 10px);
2069
2146
  padding: 0.75rem 1rem;
2070
2147
  }
2148
+ .pollar-bal-asset-info {
2149
+ display: flex;
2150
+ flex-direction: column;
2151
+ gap: 0.1875rem;
2152
+ min-width: 0;
2153
+ }
2071
2154
  .pollar-bal-asset {
2072
2155
  font-size: 0.875rem;
2073
2156
  font-weight: 600;
2074
2157
  color: var(--pollar-text);
2075
2158
  }
2159
+ .pollar-bal-issuer {
2160
+ display: inline-flex;
2161
+ align-items: center;
2162
+ gap: 0.25rem;
2163
+ }
2164
+ .pollar-bal-issuer-addr {
2165
+ font-size: 0.6875rem;
2166
+ font-family: monospace;
2167
+ color: var(--pollar-muted);
2168
+ }
2076
2169
  .pollar-bal-amounts {
2077
2170
  display: flex;
2078
2171
  flex-direction: column;
@@ -2083,11 +2176,13 @@
2083
2176
  font-size: 0.9375rem;
2084
2177
  font-weight: 700;
2085
2178
  color: var(--pollar-text);
2179
+ font-family: monospace;
2086
2180
  font-variant-numeric: tabular-nums;
2087
2181
  }
2088
2182
  .pollar-bal-available {
2089
2183
  font-size: 0.6875rem;
2090
2184
  color: var(--pollar-muted);
2185
+ font-family: monospace;
2091
2186
  font-variant-numeric: tabular-nums;
2092
2187
  }
2093
2188