@phala/pay 0.10.0 → 0.10.2

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 (2) hide show
  1. package/README.md +20 -11
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -176,11 +176,14 @@ import { DepositAddress } from "@phala/pay-react";
176
176
  />;
177
177
  ```
178
178
 
179
- With `clientSecret` and `apiBase` it reads the address's public view about every three seconds and lists
180
- its payments of the last 24 hours: "1.5 PHA received on Sepolia, 1 confirmation" within about a
181
- block of the transfer, then "credited" (or rejected or reversed). Display only. It also states each
182
- network's typical credit time from the view's `typical_credit_seconds` ("usually in about 30 seconds
183
- on Sepolia and about 7 seconds on Base Sepolia"); until the view is loaded it names no time.
179
+ With `clientSecret` and `apiBase` it reads the address's public view about every three seconds and
180
+ lists its payments of the last 24 hours: "1.5 PHA received on Sepolia, 1 confirmation" once the
181
+ service sees the transfer (within about a block for a hinted payment, at the next discovery scan
182
+ otherwise), then "credited" (or rejected or reversed). Display only. It also states when each
183
+ network's payments are usually credited: `<DepositAddress>` submits no transaction-hash hint (the
184
+ payer's wallet or exchange gives it no hash), so the service's 5-minute discovery scan plus the
185
+ view's `typical_credit_seconds` ("usually within about 6 minutes on Sepolia and about 5 minutes on
186
+ Base Sepolia"); until the view is loaded it names no time.
184
187
 
185
188
  After ten minutes without a change in the public view, `<DepositAddress>` uses a base interval
186
189
  of `max(pollInterval, 15000)` milliseconds, with the same jitter and failure backoff, so a longer
@@ -220,8 +223,9 @@ the theme (or map the colors) that suits its background.
220
223
  | `--pp-color-text-muted` | `#52525b` | `#a1a1aa` | Labels, hints, in-progress status icon |
221
224
  | `--pp-color-border` | `#e4e4e7` | `#27272a` | Dividers and the QR code's frame |
222
225
  | `--pp-color-input` | `#8a8a93` | `#71717a` | Edges of the network and token choices |
223
- | `--pp-color-primary` | `#171717` | `#fafafa` | Pay button, selected tab and choice |
226
+ | `--pp-color-primary` | `#171717` | `#fafafa` | Pay button |
224
227
  | `--pp-color-primary-foreground` | `#fafafa` | `#18181b` | Text on the primary color |
228
+ | `--pp-color-selected` | primary | primary | Selected tab's underline, checked choice's border |
225
229
  | `--pp-color-focus` | `#2563eb` | `#60a5fa` | Keyboard focus ring |
226
230
  | `--pp-color-success` | `#15803d` | `#4ade80` | Credited icon |
227
231
  | `--pp-color-warning` | `#b45309` | `#fbbf24` | "Test mode" |
@@ -240,16 +244,21 @@ import "@phala/pay-react/styles.css";
240
244
 
241
245
  Set these CSS custom properties in your own stylesheet, after the SDK stylesheet, on
242
246
  `.pp-root[data-theme]`; they are the supported way to theme the components. Pair a light primary
243
- color with a dark `--pp-color-primary-foreground`. Set `--pp-font-size: 1em` to follow your
244
- page's text size. Keep `--pp-color-focus` distinct from `--pp-color-primary`, with at least 3:1
245
- contrast to the background: it is how a keyboard user tells the focused choice from the selected
246
- one. Keep `--pp-color-input` at 3:1 or more against the background too, as WCAG 1.4.11 asks of the
247
- edge that shows where a control is; `--pp-color-border` draws only dividers and may be fainter.
247
+ color with a dark `--pp-color-primary-foreground`. `--pp-color-selected` follows
248
+ `--pp-color-primary` unless you set it: with a light primary color on a light background, set it
249
+ to a color with 3:1 or more contrast against the background, as WCAG 1.4.11 asks of the selected
250
+ tab and choice, and keep the light primary color for the pay button. Set `--pp-font-size: 1em` to
251
+ follow your page's text size. Keep `--pp-color-focus` distinct from `--pp-color-selected`, with at
252
+ least 3:1 contrast to the background: it is how a keyboard user tells the focused choice from the
253
+ selected one. Keep `--pp-color-input` at 3:1 or more against the background too, as WCAG 1.4.11
254
+ asks of the edge that shows where a control is; `--pp-color-border` draws only dividers and may be
255
+ fainter.
248
256
 
249
257
  ```css
250
258
  .pp-root[data-theme] {
251
259
  --pp-color-primary: #cdfa50;
252
260
  --pp-color-primary-foreground: #161616;
261
+ --pp-color-selected: #4d7c0f;
253
262
  --pp-color-focus: #2563eb;
254
263
  --pp-radius: 12px;
255
264
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phala/pay",
3
- "version": "0.10.0",
3
+ "version": "0.10.2",
4
4
  "description": "Phala Pay framework-free browser client",
5
5
  "keywords": [
6
6
  "crypto",