@pollar/react 0.7.0 → 0.8.0

package/README.md

@@ -3,8 +3,13 @@
 React bindings for [Pollar](https://pollar.xyz) — drop-in authentication UI, transaction modals, and hooks for
 Stellar-based applications.
 
-> **0.7.0 is a breaking change.** The context's session is now `PollarPersistedSession | null` and PII has moved to
-> `client.getUserProfile()`. Read the [CHANGELOG](../../CHANGELOG.md) before upgrading.
+> **0.8.0 reshapes `<PollarProvider>` props (breaking).** `config` → `client`
+> (now accepts a `PollarClient` instance or a `PollarClientConfig`); `styles`
+> moves under `appConfig.styles`; new `appConfig` prop is the opt-out switch
+> for the remote `/applications/config` fetch (pass it — even `{}` — to skip
+> the fetch); new `ui.renderWallets` slot replaces the default Freighter/Albedo
+> picker. Read the [CHANGELOG](../../CHANGELOG.md) and
+> [UPGRADE.md](../../UPGRADE.md) before upgrading.
 
 ## Installation
 
@@ -27,11 +32,7 @@ import { PollarProvider } from '@pollar/react';
 import '@pollar/react/styles.css';
 
 export default function App({ children }: { children: React.ReactNode }) {
-  return (
-    <PollarProvider config={{ apiKey: 'your-api-key' }}>
-      {children}
-    </PollarProvider>
-  );
+  return <PollarProvider client={{ apiKey: 'your-api-key' }}>{children}</PollarProvider>;
 }
 ```
 
@@ -42,11 +43,7 @@ export function Profile() {
   const { isAuthenticated, walletAddress, login, logout, getClient } = usePollar();
 
   if (!isAuthenticated) {
-    return (
-      <button onClick={() => login({ provider: 'google' })}>
-        Sign in with Google
-      </button>
-    );
+    return <button onClick={() => login({ provider: 'google' })}>Sign in with Google</button>;
   }
 
   // PII (email, name, avatar, providers) lives in memory only — fetch it from the client.
@@ -70,29 +67,50 @@ Context provider that initialises the Pollar client and makes it available to ch
 
 ```tsx
 <PollarProvider
-  config={{
+  client={{
     apiKey: 'your-api-key',
-    baseUrl: 'https://sdk.api.pollar.xyz',  // optional
-    stellarNetwork: 'testnet',              // optional, default: 'testnet'
-    // 0.7.0 options threaded straight through to PollarClient:
-    storage,                                // optional, RN apps inject this
-    keyManager,                             // optional, autodetects on web
-    walletAdapter,                          // optional, external wallet stack
-    deviceLabel: 'iPhone — Safari',         // optional, shown in SessionsModal
-    onStorageDegrade,                       // optional, telemetry hook
+    baseUrl: 'https://sdk.api.pollar.xyz', // optional
+    stellarNetwork: 'testnet', // optional, default: 'testnet'
+    storage, // optional, RN apps inject this
+    keyManager, // optional, autodetects on web
+    walletAdapter, // optional, external wallet stack
+    deviceLabel: 'iPhone — Safari', // optional, shown in SessionsModal
+    onStorageDegrade, // optional, telemetry hook
+  }}
+  // Optional: pass `appConfig` (even `{}`) to skip the remote
+  // `/applications/config` fetch and use local-only styles/branding.
+  appConfig={{
+    styles: {
+      /* optional style overrides */
+    },
+  }}
+  ui={{
+    // Optional: replace the default Freighter/Albedo wallet picker.
+    // See "External wallet stacks" below for a kit-powered example.
+    renderWallets: undefined,
   }}
-  styles={{ /* optional style overrides */ }}
-  adapters={{ /* optional named adapter set */ }}
+  adapters={
+    {
+      /* optional named adapter set */
+    }
+  }
 >
   {children}
 </PollarProvider>
 ```
 
-| Prop       | Type                | Required | Description                                                                |
-| ---------- | ------------------- | -------- | -------------------------------------------------------------------------- |
-| `config`   | `PollarClientConfig`| Yes      | Configuration passed verbatim to `PollarClient`                            |
-| `styles`   | `PollarStyles`      | No       | Per-app style overrides; merged on top of `appConfig.styles` from the API   |
-| `adapters` | `PollarAdapters`    | No       | Named set of `PollarAdapter` objects (e.g. Trustless Work). See below       |
+| Prop        | Type                                    | Required | Description                                                                                                                                                                                              |
+| ----------- | --------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `client`    | `PollarClient \| PollarClientConfig`    | Yes      | Either a pre-built `PollarClient` (testing, reuse outside React) or a `PollarClientConfig` the provider will construct one from. **Locked at first render** — swapping after mount is ignored            |
+| `appConfig` | `PollarConfig`                          | No       | Local override of `/applications/config`. **Presence is the opt-out switch**: pass it (even `{}`) and the remote fetch is skipped. Omit it to keep the existing remote-fetch-on-mount behaviour          |
+| `ui`        | `{ renderWallets?: RenderWalletsSlot }` | No       | UI customisation slots. `renderWallets` replaces the default Freighter/Albedo buttons in `LoginModal`'s wallet picker. Receives `{ onConnect, authState }` and is expected to call `onConnect(walletId)` |
+| `adapters`  | `PollarAdapters`                        | No       | Named set of `PollarAdapter` objects (e.g. Trustless Work). See below                                                                                                                                    |
+
+> **Renamed in 0.8.0** — `config` → `client`, `styles` → `appConfig.styles`.
+> If you were passing `styles={{ ... }}` directly, move it to
+> `appConfig={{ styles: { ... } }}` (which also opts you out of the remote
+> `/applications/config` fetch). See [UPGRADE.md](../../UPGRADE.md) for the
+> full migration matrix.
 
 ---
 
@@ -104,56 +122,56 @@ needed.
 ```ts
 const {
   // Session
-  isAuthenticated,        // boolean — true when a wallet public key is present
-  walletAddress,          // string — '' until authenticated
-  walletType,             // WalletId | null
+  isAuthenticated, // boolean — true when a wallet public key is present
+  walletAddress, // string — '' until authenticated
+  walletType, // WalletId | null
 
   // Client escape hatch
-  getClient,              // () => PollarClient — for getUserProfile(), listSessions(), …
+  getClient, // () => PollarClient — for getUserProfile(), listSessions(), …
 
   // Auth
-  login,                  // (options: PollarLoginOptions) => void
-  logout,                 // () => void  (fire-and-forget; await getClient().logout() if you need the promise)
-  openLoginModal,         // () => void
+  login, // (options: PollarLoginOptions) => void
+  logout, // () => void  (fire-and-forget; await getClient().logout() if you need the promise)
+  openLoginModal, // () => void
 
   // Sessions (new in 0.7.0)
-  openSessionsModal,      // () => void
+  openSessionsModal, // () => void
 
   // Transactions
-  tx,                     // TransactionState
-  buildTx,                // (operation, params, options?) => Promise<void>
-  signAndSubmitTx,        // (unsignedXdr: string) => Promise<void>
-  openTxModal,            // () => void
+  tx, // TransactionState
+  buildTx, // (operation, params, options?) => Promise<void>
+  signAndSubmitTx, // (unsignedXdr: string) => Promise<void>
+  openTxModal, // () => void
 
   // Transaction history
-  txHistory,              // TxHistoryState
-  openTxHistoryModal,     // () => void
+  txHistory, // TxHistoryState
+  openTxHistoryModal, // () => void
 
   // Wallet balance
-  walletBalance,          // WalletBalanceState
-  refreshWalletBalance,   // () => Promise<void>
+  walletBalance, // WalletBalanceState
+  refreshWalletBalance, // () => Promise<void>
   openWalletBalanceModal, // () => void
 
   // Send / Receive
-  openSendModal,          // () => void
-  openReceiveModal,       // () => void
+  openSendModal, // () => void
+  openReceiveModal, // () => void
 
   // Network
-  network,                // StellarNetwork — 'mainnet' | 'testnet'
-  setNetwork,             // (network: StellarNetwork) => void
+  network, // StellarNetwork — 'mainnet' | 'testnet'
+  setNetwork, // (network: StellarNetwork) => void
 
   // KYC (UI ready — backend coming soon)
-  openKycModal,           // (options?: { country?, level?, onApproved? }) => void
+  openKycModal, // (options?: { country?, level?, onApproved? }) => void
 
   // Ramp (UI ready — backend coming soon)
-  openRampModal,          // () => void
+  openRampModal, // () => void
 
   // App config / styles served by the Pollar API
-  appConfig,              // PollarConfig
-  styles,                 // PollarStyles
+  appConfig, // PollarConfig
+  styles, // PollarStyles
 
   // Adapters (from PollarProvider props)
-  adapters,               // PollarAdapters | undefined
+  adapters, // PollarAdapters | undefined
 } = usePollar();
 ```
 
@@ -187,16 +205,16 @@ login({ provider: 'wallet', type: 'lobstr' });
 Every modal mounts itself when its `openXModal()` action is called. You don't need to render these directly — they're
 already wired inside `<PollarProvider>` — but they're exported in case you want to mount them yourself.
 
-| Component                 | Purpose                                                                                                       |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `<WalletButton>`          | Drop-in button. Opens login when signed out; signed in, shows the wallet address with a dropdown (Send, Receive, balance, history, sign out). Inline arc spinner during in-progress transactions |
-| `<SendModal>`             | Full send flow: asset picker, amount, destination, inline build → sign → success/error                         |
-| `<ReceiveModal>`          | Wallet address as QR code with copy-to-clipboard (no external QR dependency required)                          |
-| `<TxHistoryModal>`        | Paginated transaction history with auto-fetch on open and stellar.expert explorer links                        |
-| `<WalletBalanceModal>`    | Stellar account balances with refresh button                                                                   |
-| `<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 |
-| `<KycModal>`              | Identity verification flow — provider selection + status polling *(UI preview — backend coming soon)*          |
-| `<RampWidget>`            | Buy/sell crypto — direction tabs, route comparison, payment instructions *(UI preview — backend coming soon)*  |
+| Component              | Purpose                                                                                                                                                                                          |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `<WalletButton>`       | Drop-in button. Opens login when signed out; signed in, shows the wallet address with a dropdown (Send, Receive, balance, history, sign out). Inline arc spinner during in-progress transactions |
+| `<SendModal>`          | Full send flow: asset picker, amount, destination, inline build → sign → success/error                                                                                                           |
+| `<ReceiveModal>`       | Wallet address as QR code with copy-to-clipboard (no external QR dependency required)                                                                                                            |
+| `<TxHistoryModal>`     | Paginated transaction history with auto-fetch on open and stellar.expert explorer links                                                                                                          |
+| `<WalletBalanceModal>` | Stellar account balances with refresh button                                                                                                                                                     |
+| `<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                 |
+| `<KycModal>`           | Identity verification flow — provider selection + status polling _(UI preview — backend coming soon)_                                                                                            |
+| `<RampWidget>`         | Buy/sell crypto — direction tabs, route comparison, payment instructions _(UI preview — backend coming soon)_                                                                                    |
 
 ```tsx
 import { WalletButton } from '@pollar/react';
@@ -213,18 +231,18 @@ export function Header() {
 Every modal ships a pure presentational "template" companion — same name with a `Template` suffix. Use these when you
 want to swap the chrome but keep the data wiring from `usePollar()`.
 
-| Wrapper                | Template                       |
-| ---------------------- | ------------------------------ |
-| `<WalletButton>`       | `<WalletButtonTemplate>`       |
-| *(internal LoginModal)*| `<LoginModalTemplate>`         |
-| `<SendModal>`          | `<SendModalTemplate>`          |
-| `<ReceiveModal>`       | `<ReceiveModalTemplate>`       |
-| `<TransactionModal>`   | `<TransactionModalTemplate>`   |
-| `<TxHistoryModal>`     | `<TxHistoryModalTemplate>`     |
-| `<WalletBalanceModal>` | `<WalletBalanceModalTemplate>` |
-| `<KycModal>`           | `<KycModalTemplate>`           |
-| `<RampWidget>`         | `<RampWidgetTemplate>`         |
-| `<SessionsModal>`      | `<SessionsModalTemplate>`      |
+| Wrapper                 | Template                       |
+| ----------------------- | ------------------------------ |
+| `<WalletButton>`        | `<WalletButtonTemplate>`       |
+| _(internal LoginModal)_ | `<LoginModalTemplate>`         |
+| `<SendModal>`           | `<SendModalTemplate>`          |
+| `<ReceiveModal>`        | `<ReceiveModalTemplate>`       |
+| `<TransactionModal>`    | `<TransactionModalTemplate>`   |
+| `<TxHistoryModal>`      | `<TxHistoryModalTemplate>`     |
+| `<WalletBalanceModal>`  | `<WalletBalanceModalTemplate>` |
+| `<KycModal>`            | `<KycModalTemplate>`           |
+| `<RampWidget>`          | `<RampWidgetTemplate>`         |
+| `<SessionsModal>`       | `<SessionsModalTemplate>`      |
 
 `<TxStatusView>` is the shared status component (build → sign → success/error) reused by `TransactionModal` and
 `SendModal`; it's exported on its own for consumers that want to embed the lifecycle elsewhere.
@@ -241,12 +259,12 @@ import type { PollarAdapter } from '@pollar/core';
 
 const trustlessWork: PollarAdapter = {
   initialize: async (params) => ({ unsignedTransaction: '…' }),
-  release:    async (params) => ({ unsignedTransaction: '…' }),
+  release: async (params) => ({ unsignedTransaction: '…' }),
 };
 
-<PollarProvider config={{ apiKey }} adapters={{ trustlessWork }}>
+<PollarProvider client={{ apiKey }} adapters={{ trustlessWork }}>
   …
-</PollarProvider>
+</PollarProvider>;
 ```
 
 > **Renamed in 0.7.0** — `EscrowFn` → `AdapterFn` and `EscrowAdapter` → `PollarAdapter`. Runtime contract is
@@ -263,7 +281,9 @@ const useTrustlessWork = createPollarAdapterHook<typeof trustlessWork>('trustles
 
 function MyComponent() {
   const tw = useTrustlessWork();
-  await tw.initialize({ /* … */ });  // unsigned XDR is built, signed, and submitted automatically
+  await tw.initialize({
+    /* … */
+  }); // unsigned XDR is built, signed, and submitted automatically
 }
 ```
 
@@ -271,7 +291,9 @@ function MyComponent() {
 
 ### External wallet stacks (Stellar Wallets Kit, …)
 
-Pass a `WalletAdapterResolver` to `config.walletAdapter` so Pollar can reach wallets that live outside `@pollar/core`:
+Pass a `WalletAdapterResolver` to `client.walletAdapter` so Pollar can reach
+wallets that live outside `@pollar/core`. The signing path alone (no UI
+changes):
 
 ```tsx
 import { PollarProvider } from '@pollar/react';
@@ -279,16 +301,58 @@ import { stellarWalletsKit } from '@pollar/stellar-wallets-kit-adapter';
 import { Networks } from '@creit.tech/stellar-wallets-kit';
 
 <PollarProvider
-  config={{
+  client={{
     apiKey: 'your-api-key',
     walletAdapter: stellarWalletsKit({ network: Networks.PUBLIC }),
   }}
 >
   {children}
-</PollarProvider>
+</PollarProvider>;
 ```
 
-Then any `login({ provider: 'wallet', type: '<kit wallet id>' })` is routed through the kit.
+Then any `login({ provider: 'wallet', type: '<kit wallet id>' })` is routed
+through the kit. The built-in `LoginModal` still shows only Freighter / Albedo
+unless you also wire `ui.renderWallets` (next section).
+
+#### Showing every kit wallet in `LoginModal`
+
+The `ui.renderWallets` slot replaces the hardcoded Freighter+Albedo buttons.
+`@pollar/stellar-wallets-kit-adapter/picker` ships a bundle that builds both
+halves (signing + picker UI) from a single options object — drop both into
+`<PollarProvider>` and the kit's full wallet list (xBull, Lobstr, Rabet, …)
+renders in `LoginModal`:
+
+```tsx
+import { PollarProvider } from '@pollar/react';
+import { createStellarWalletsKitBundle } from '@pollar/stellar-wallets-kit-adapter/picker';
+import { Networks } from '@creit.tech/stellar-wallets-kit';
+
+const bundle = createStellarWalletsKitBundle({
+  network: Networks.PUBLIC,
+  picker: { wallets: ['xbull', 'lobstr', 'freighter'] }, // subset, optional
+});
+
+<PollarProvider
+  client={{ apiKey: 'your-api-key', walletAdapter: bundle.walletAdapter }}
+  ui={{ renderWallets: bundle.renderWallets }}
+>
+  {children}
+</PollarProvider>;
+```
+
+If you only want a custom picker (no kit), `renderWallets` is just a function
+of `{ onConnect, authState }` — return whatever JSX you want and call
+`onConnect(walletId)` when the user picks a wallet:
+
+```tsx
+ui={{
+  renderWallets: ({ onConnect, authState }) => (
+    <button disabled={authState.step !== 'idle'} onClick={() => onConnect('xbull')}>
+      xBull
+    </button>
+  ),
+}}
+```
 
 ---
 
@@ -317,6 +381,10 @@ import type {
   PollarConfig,
   PollarStyles,
 
+  // 0.8.0 — wallet picker slot
+  RenderWalletsProps,
+  RenderWalletsSlot,
+
   // Template props
   SendModalTemplateProps,
   ReceiveModalTemplateProps,

package/dist/index.css

@@ -270,6 +270,97 @@
   animation: pollar-spin 1s linear infinite;
 }
 
+/* src/components/distribution-rules-modal/DistributionRulesModal.css */
+.pollar-dist-modal {
+  max-width: 460px;
+}
+.pollar-dist-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  max-height: 420px;
+  overflow-y: auto;
+  margin-bottom: 1rem;
+}
+.pollar-dist-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  background: var(--pollar-input-bg);
+  border: 1px solid var(--pollar-border);
+  border-radius: var(--pollar-card-border-radius, 10px);
+  padding: 0.875rem 1rem;
+}
+.pollar-dist-item[data-claimable=false] {
+  opacity: 0.7;
+}
+.pollar-dist-item-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.pollar-dist-item-name {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--pollar-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pollar-dist-item-amount {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--pollar-text);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.pollar-dist-item-asset {
+  font-size: 0.75rem;
+  color: var(--pollar-muted);
+  font-weight: 600;
+  margin-left: 2px;
+}
+.pollar-dist-item-meta {
+  font-size: 0.75rem;
+  color: var(--pollar-muted);
+  display: flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+.pollar-dist-item-action {
+  margin-top: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.pollar-dist-claim-btn {
+  flex: 0 0 auto;
+  height: 32px;
+  padding: 0 0.875rem;
+  font-size: 0.8125rem;
+}
+.pollar-dist-item-status {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.pollar-dist-item-status[data-kind=claimed] {
+  background: rgba(22, 163, 74, 0.12);
+  color: var(--pollar-success-text, #16a34a);
+}
+.pollar-dist-item-status[data-kind=unavailable] {
+  background: rgba(107, 114, 128, 0.12);
+  color: var(--pollar-muted);
+}
+.pollar-dist-item-error {
+  font-size: 0.75rem;
+  color: var(--pollar-error-text, #dc2626);
+}
+
 /* src/components/kyc-modal/KycModal.css */
 .pollar-kyc-badge {
   display: inline-flex;
@@ -491,8 +582,8 @@
   padding: 0 1rem;
   position: relative;
   text-align: center;
-  -webkit-transition: transform .15s, box-shadow .15s;
-  transition: transform .15s, box-shadow .15s;
+  -webkit-transition: transform 0.15s, box-shadow 0.15s;
+  transition: transform 0.15s, box-shadow 0.15s;
   vertical-align: middle;
   white-space: nowrap;
   width: 100%;
@@ -530,8 +621,8 @@
   flex-grow: 0;
 }
 .gsi-material-button .gsi-material-button-state {
-  -webkit-transition: opacity .218s;
-  transition: opacity .218s;
+  -webkit-transition: opacity 0.218s;
+  transition: opacity 0.218s;
   bottom: 0;
   left: 0;
   opacity: 0;
@@ -663,7 +754,7 @@
   background-color: var(--pollar-bg);
 }
 .pollar-social-list {
-  margin-bottom: .625rem;
+  margin-bottom: 0.625rem;
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
@@ -864,65 +955,6 @@
   cursor: not-allowed;
 }
 
-/* src/components/receive-modal/ReceiveModal.css */
-.pollar-receive-modal {
-  max-width: 380px;
-}
-.pollar-receive-qr {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.25rem;
-  margin-bottom: 1rem;
-  background: var(--pollar-input-bg);
-  border: 1px solid var(--pollar-border);
-  border-radius: var(--pollar-card-border-radius, 10px);
-}
-.pollar-receive-instructions {
-  font-size: 0.8125rem;
-  color: var(--pollar-muted);
-  text-align: center;
-  margin: 0 0 1rem;
-  line-height: 1.5;
-}
-.pollar-receive-address-row {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  background: var(--pollar-input-bg);
-  border: 1px solid var(--pollar-border);
-  border-radius: var(--pollar-card-border-radius, 10px);
-  padding: 0.625rem 0.875rem;
-  margin-bottom: 1rem;
-}
-.pollar-receive-address {
-  flex: 1;
-  font-size: 0.75rem;
-  font-family: monospace;
-  color: var(--pollar-text);
-  word-break: break-all;
-  line-height: 1.5;
-}
-.pollar-receive-copy-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-  padding: 0.375rem 0.75rem;
-  border-radius: var(--pollar-buttons-border-radius, 6px);
-  border: 1px solid var(--pollar-border);
-  background: none;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--pollar-muted);
-  cursor: pointer;
-  transition: color 150ms, background 150ms;
-}
-.pollar-receive-copy-btn:hover {
-  color: var(--pollar-text);
-  background: var(--pollar-border);
-}
-
 /* src/components/ramp-widget/RampWidget.css */
 .pollar-ramp-modal {
   max-width: 480px;
@@ -1154,6 +1186,65 @@
   margin: 0;
 }
 
+/* src/components/receive-modal/ReceiveModal.css */
+.pollar-receive-modal {
+  max-width: 380px;
+}
+.pollar-receive-qr {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  margin-bottom: 1rem;
+  background: var(--pollar-input-bg);
+  border: 1px solid var(--pollar-border);
+  border-radius: var(--pollar-card-border-radius, 10px);
+}
+.pollar-receive-instructions {
+  font-size: 0.8125rem;
+  color: var(--pollar-muted);
+  text-align: center;
+  margin: 0 0 1rem;
+  line-height: 1.5;
+}
+.pollar-receive-address-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  background: var(--pollar-input-bg);
+  border: 1px solid var(--pollar-border);
+  border-radius: var(--pollar-card-border-radius, 10px);
+  padding: 0.625rem 0.875rem;
+  margin-bottom: 1rem;
+}
+.pollar-receive-address {
+  flex: 1;
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: var(--pollar-text);
+  word-break: break-all;
+  line-height: 1.5;
+}
+.pollar-receive-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--pollar-buttons-border-radius, 6px);
+  border: 1px solid var(--pollar-border);
+  background: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--pollar-muted);
+  cursor: pointer;
+  transition: color 150ms, background 150ms;
+}
+.pollar-receive-copy-btn:hover {
+  color: var(--pollar-text);
+  background: var(--pollar-border);
+}
+
 /* src/components/transaction-modal/TransactionModal.css */
 .pollar-tx-modal {
   max-width: 420px;