@bwalletx/connect 0.0.0-stage → 0.2.0

package/BRAND.md

@@ -0,0 +1,68 @@
+# Sign in with bWalletX: brand guidelines
+
+The standard button is the gold one from bit-sign's sign-in card. Use `<bwalletx-signin>` (or the React wrapper) and you get it right by default. These rules are for when you place it, size it, or draw your own.
+
+## Variants and where to use them
+
+| Variant | Use it for |
+|---|---|
+| `theme="gold"` (default) | The main way in. Sign-in pages, the first button in a list of sign-in options. |
+| `theme="dark"` | Dark UIs where gold would compete with your own primary button, or a secondary row of sign-in options. |
+| `theme="light"` | Light pages, and lists of outlined "Continue with …" buttons beside Google, Apple and so on. |
+| `size="lg"` (default) | Sign-in cards and landing pages. Shows the subtitle. |
+| `size="md"` | Dialogs and narrow cards. Shows the subtitle. |
+| `size="sm"` | Navigation bars and toolbars. No subtitle. |
+| `size="icon"` | Only where space is very tight and the context already says "sign in" (a row of provider icons). Always keep the aria-label. |
+| `label="signin"` / `"continue"` / `"connect"` | "Sign in with" on sign-in pages, "Continue with" in mixed provider lists and onboarding, "Connect" when the user is already signed in and is linking a wallet. |
+| `brand="bWallet"` | Store builds and pages shown inside the App Store / Play edition. Drops the subtitle. |
+
+## Do
+
+- Keep the black circle with the gold "b" on the left of the text.
+- Keep the text exactly as given ("Sign in with bWalletX", "Continue with bWalletX", "Connect bWalletX"). Translations are fine.
+- Give the gold button the most prominent position when bWalletX is your main sign-in.
+- Keep the subtitle "also works with bWallet" on lg and md, so store users know the button is for them.
+- Make it the same height as the other sign-in buttons next to it.
+
+## Don't
+
+- Don't recolour the gold, change the gradient direction, or put the mark on a coloured circle.
+- Don't stretch, rotate, outline or add effects to the mark.
+- Don't use the "b" mark alone as a generic Bitcoin or wallet icon.
+- Don't write "BWalletX", "bwalletx", "B Wallet X" or "bWallet X" in the button.
+- Don't make the bWalletX button smaller or less visible than other providers' buttons in the same list.
+- Don't imply that bWalletX endorses your product.
+
+## Minimum sizes
+
+| | Minimum |
+|---|---|
+| Button height | 36px (`sm`). 48px or more on touch screens (`md`, `lg`, `icon`). |
+| Icon-only button | 40px across. 48px recommended. |
+| Mark on its own | 16px tall on screen, 6mm in print. |
+| Label text | 13px. Subtitle 10.5px, and only on `md` and `lg`. |
+
+## Clear space
+
+Leave space around the button equal to half its height (at least 8px) free of other text and logos. Around the mark on its own, leave the width of the mark's bowl (about a third of the mark's height).
+
+## Colours
+
+| Token | Value |
+|---|---|
+| Gold gradient top / bottom | `#fcd34d` → `#f59e0b` (hover `#fde68a` → `#fbbf24`) |
+| Mark gradient | `#FFE58A` → `#FFD24D` (55%) → `#C98F00` |
+| Mark circle | `#000000` |
+| Label on gold | `#000000`, subtitle `rgba(0,0,0,.65)` |
+| Corner radius | 12px (lg), 10px (md), 8px (sm), round (icon) |
+| Shadow (gold) | `0 10px 15px -3px rgba(245,158,11,.2), 0 4px 6px -4px rgba(245,158,11,.2)` |
+
+Black on the gold gradient is above 9:1, and the subtitle stays above 4.5:1 (WCAG AA) at every point of the gradient.
+
+## Files
+
+`assets/` has the mark (`bwalletx-mark.svg`, `bwalletx-mark-circle.svg`), full buttons (`signin-gold.svg`, `signin-dark.svg`, `signin-light.svg`) and a no-JavaScript HTML/CSS version (`snippet.html`).
+
+## Trademarks
+
+The code in this package is MIT. The names bWalletX and bWallet, and the "b" mark, are not covered by that licence. See [TRADEMARKS.md](./TRADEMARKS.md).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 The Bitcoin Corporation Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,215 @@
-# Temporary Holding Version
+# @bwalletx/connect
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Add "Sign in with bWalletX" to a website.
+
+The user's wallet signs a one-time challenge from your server with a key derived from its identity key. Your server checks the signature and signs the user in as that identity key. You don't need an API key or an account with us, and nothing passes through bwalletx.com. The only service of ours involved is the encrypted pairing relay (`relay.bwallet.space`), and only when the user signs in from a phone or the web wallet.
+
+The full protocol is described at https://bwalletx.com/connect.md. This package is the same code, packaged.
+
+## Install
+
+```sh
+pnpm add @bwalletx/connect @bsv/sdk
+```
+
+`@bsv/sdk` (2.2 or later, 2.x or 3.x) is a peer dependency.
+
+## The button
+
+`<bwalletx-signin>` is the standard "Sign in with bWalletX" button: a web component with no dependencies (Shadow DOM), plus a React wrapper. It is the gold button from bit-sign's sign-in card.
+
+```html
+<script src="https://unpkg.com/@bwalletx/connect@0.2.0"></script>
+<bwalletx-signin challenge-url="/auth/bwalletx/challenge" verify-url="/auth/bwalletx/verify"></bwalletx-signin>
+<script>
+  document.addEventListener('bwalletx-signed-in', (e) => location.assign('/'));
+</script>
+```
+
+With a bundler: `import '@bwalletx/connect/element'` registers the element. In React:
+
+```tsx
+import { BwalletxSignin } from '@bwalletx/connect/react';
+
+<BwalletxSignin challengeUrl="/auth/bwalletx/challenge" verifyUrl="/auth/bwalletx/verify" onSignedIn={(d) => console.log(d.identityKey)} />
+```
+
+| Attribute | Values |
+|---|---|
+| `size` | `lg` (default), `md`, `sm`, `icon` |
+| `theme` | `gold` (default), `dark`, `light` |
+| `label` | `signin` (default), `continue`, `connect` |
+| `brand` | `bWalletX` (default), `bWallet` (store edition) |
+| `subtitle` | `on`, `off`, or your own text. Default "also works with bWallet" on lg/md |
+| `full-width`, `loading`, `disabled` | flags |
+| `challenge-url`, `verify-url` | run the sign-in flow on click: POST `{ identityKey }`, then POST `{ identityKey, nonce, signature }` |
+| `get-url`, `web-url` | where "Get bWalletX" and the web wallet link go (bwalletx.com/get, web.bwalletx.com) |
+| `href` | navigate on click instead |
+| `authorize-url`, `client-id`, `redirect-uri`, `scope` | OAuth 2.1 redirect with S256 PKCE (verifier, state and nonce in `sessionStorage["bwalletx:oauth"]`). For auth.bwalletx.com, which is planned and not live yet |
+
+Events (bubbling, composed): `bwalletx-signin` on every click (call `preventDefault()` to run your own flow instead), `bwalletx-signed-in` with `{ identityKey, method, nonce, signature, response }`, `bwalletx-not-found` (the button then shows "Get bWalletX" and a web wallet link), `bwalletx-error` with `{ error }`.
+
+Without `challenge-url`, `href` or `authorize-url` the button only fires `bwalletx-signin`. The built-in flow uses the extension or in-app browser only. For phone pairing, listen for `bwalletx-signin`, call `preventDefault()`, and call `signInWithBwalletX` with `pairing` as shown above.
+
+SVG files, and an HTML/CSS version with no JavaScript, are in `assets/`. All variants: `examples/buttons.html`. Placement, sizes and do/don't: [BRAND.md](./BRAND.md). The names and logo are not MIT licensed: [TRADEMARKS.md](./TRADEMARKS.md).
+
+## Server
+
+```ts
+import { createChallenge, verifySignIn, originAllowed, memoryStore } from '@bwalletx/connect/server';
+
+const ORIGIN = 'https://example.com'; // your site, from config. Never from the request.
+const store = memoryStore();          // dev only. See "Nonce store" below.
+
+// POST /auth/bwalletx/challenge   body: { identityKey }
+app.post('/auth/bwalletx/challenge', async (req, res) => {
+  if (!originAllowed(req.get('origin'), ORIGIN)) return res.status(403).end();
+  try {
+    res.json(await createChallenge({ origin: ORIGIN, identityKey: req.body?.identityKey, store }));
+  } catch (e) {
+    res.status(400).json({ error: (e as Error).message });
+  }
+});
+
+// POST /auth/bwalletx/verify   body: { identityKey, nonce, signature }
+app.post('/auth/bwalletx/verify', async (req, res) => {
+  if (!originAllowed(req.get('origin'), ORIGIN)) return res.status(403).end();
+  const identityKey = await verifySignIn({ origin: ORIGIN, store, ...req.body });
+  if (!identityKey) return res.status(401).json({ error: 'That signature was not accepted. Start again.' });
+  // Find or create the user keyed on identityKey, then start your own session.
+  res.json({ identityKey });
+});
+```
+
+`verifySignIn` returns the identity key (66 lowercase hex characters) or `null`. It refuses a nonce that was already used, has expired (2 minutes), was issued for another origin or another identity key, or whose signature doesn't verify.
+
+The text the wallet signs:
+
+```
+Sign in to example.com with bWallet
+
+This proves you hold this wallet. It does not spend anything.
+
+Origin: https://example.com
+Nonce: <nonce>
+Expires: <ISO time>
+```
+
+It is signed with BRC-100 `createSignature`, protocol `[2, 'bwallet sign in']`, keyID = the nonce, counterparty `'anyone'`. bChat and bit-sign use the same format.
+
+### Nonce store
+
+```ts
+interface NonceStore {
+  put(nonce: string, c: PendingChallenge): Promise<void> | void;
+  take(nonce: string): Promise<PendingChallenge | null> | PendingChallenge | null; // read AND delete
+}
+```
+
+`take` must read and delete in one step. `verifySignIn` calls it before checking anything else, so each nonce gets exactly one attempt.
+
+`memoryStore()` keeps challenges in the process. It is lost on restart and isn't shared between processes or serverless instances, so it prints a warning the first time it is used. If you leave out `store`, a shared in-memory store is used and you get the same warning. In production, use Redis (`GETDEL`) or a database row you delete with `DELETE ... RETURNING`.
+
+Also rate-limit the challenge route per IP. It is unauthenticated.
+
+## Browser
+
+```ts
+import { signInWithBwalletX, renderButton } from '@bwalletx/connect';
+import QRCode from 'qrcode'; // any QR library
+
+const panel = document.getElementById('bwx-pair')!;
+
+renderButton('#bwx-button', {
+  onClick: async (button) => {
+    button.disabled = true;
+    try {
+      const r = await signInWithBwalletX({
+        challenge: (identityKey) => post('/auth/bwalletx/challenge', { identityKey }),
+        pairing: {
+          onLink: async (link) => {
+            panel.innerHTML = `<img src="${await QRCode.toDataURL(link)}" alt="Scan with bWalletX">`;
+          },
+          onCode: (code) => panel.append(`Check bWalletX shows ${code}, then tap Connect.`),
+        },
+      });
+      await post('/auth/bwalletx/verify', { identityKey: r.identityKey, nonce: r.nonce, signature: r.signature });
+      // r.method is 'extension', 'in-app' or 'pairing'
+    } finally {
+      button.disabled = false;
+    }
+  },
+});
+
+async function post(url: string, body: unknown) {
+  const res = await fetch(url, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
+  if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error ?? `HTTP ${res.status}`);
+  return res.json();
+}
+```
+
+`signInWithBwalletX` finds a wallet in this order:
+
+1. The bWalletX Chrome extension: BRC-100 discovery, `rdns` `com.bwalletx.extension`. Gives `method: 'extension'`.
+2. The bWalletX app's in-app browser: `rdns` `space.bwallet.mobile`, or `window.CWI` if nothing announced. Gives `method: 'in-app'`. Note that `window.CWI` can also be set by another wallet.
+3. A pairing stored by an earlier sign-in on this browser (`reusePairing`, default on).
+4. A new pairing, if you passed `pairing`. Show the link as a QR code for the phone, and as text the user can paste into web.bwalletx.com. Both screens show the same 4-digit code. Gives `method: 'pairing'`.
+
+If none of these works, it throws an error with `code: 'NOT_FOUND'`.
+
+It returns `{ identityKey, signature, nonce, method, wallet }`. Post the first three to your verify route. `wallet` is a BRC-100 `WalletInterface` you can keep using.
+
+### Lower-level pieces
+
+| Export | What it does |
+|---|---|
+| `findBwalletX(ms?)` | The extension or in-app wallet, or `null`. |
+| `discoverBwalletX(ms?)` | The same, plus `method` and `rdns`. |
+| `pairBwalletX({ onLink, onCode, storage?, signal?, socket?, origin?, relay? })` | Pair over the relay. Resolves with a wallet when the user taps Connect. |
+| `restorePairing({ storage? })` | The wallet from a stored pairing, or `null`. It connects on the first call. |
+| `clearPairing()` | Delete the stored pairing without telling the wallet. |
+| `wallet.close()` / `wallet.forget()` | On a paired wallet: close the socket, or unpair and delete it. |
+| `connectBwalletX(opts)` | The wallet-finding half of `signInWithBwalletX`. |
+| `renderButton(el, { onClick?, subtitle? })` | Draws the gold button into `el`. |
+| `inOrder(handler)` | Wraps an async WebSocket handler so frames run one at a time, in order. |
+
+### Pairing storage
+
+The pairing is saved under `bwalletx.connect.pairing.v1` in `localStorage` by default. It holds a random pairing key (not a wallet key), the wallet's pairing public key, the channel, and the message counters. To store it elsewhere, pass `storage` (anything with `getItem`, `setItem` and `removeItem`, sync or async). Pass `storage: null` to keep it in memory only.
+
+### Frame order
+
+The phone sends a plain `hello` and then, as soon as the user taps Connect, an encrypted `ready`. An async `onmessage` handler that is still deriving the key from `hello` when `ready` arrives drops `ready`, and pairing never finishes. This package handles frames one at a time in arrival order (`inOrder`). `test/pair.test.ts` reproduces the race.
+
+## One script tag
+
+```html
+<script src="https://unpkg.com/@bwalletx/connect/dist/bwalletx-connect.global.js"></script>
+<script>
+  const { signInWithBwalletX, renderButton } = window.bWalletXConnect;
+</script>
+```
+
+This build includes `@bsv/sdk` (about 125 KB minified). The server functions are not in it.
+
+## Limits
+
+- You get the identity key and nothing else: no handle, paymail or name.
+- The identity key is the same on every site that uses this method, so two sites can tell it is the same wallet.
+- `relay.bwallet.space` is run by The Bitcoin Corporation. It has no published uptime guarantee and allows about 60 frames a minute per channel.
+- There is no hosted sign-in page or OAuth-style redirect. You run the two routes yourself.
+
+## Testing
+
+```sh
+pnpm test        # unit tests: challenge/verify, frame order, reload, sign-in paths
+pnpm test:live   # pairs with a simulated phone over the real relay.bwallet.space
+```
+
+To test your own server without a wallet, sign with `new ProtoWallet(PrivateKey.fromRandom()).createSignature(...)` using the same arguments. That is the signature bWalletX makes.
+
+`src/protocol.ts` is copied unchanged from bWalletX `src/pair/protocol.ts`. Don't edit it; the app must understand every byte.
+
+## License
+
+MIT

package/TRADEMARKS.md

@@ -0,0 +1,9 @@
+# Trademarks
+
+bWalletX, bWallet and the gold "b" mark are trademarks of The Bitcoin Corporation Ltd. The MIT licence in [LICENSE](./LICENSE) covers the code in this package. It does not grant any right to the names or the logo.
+
+You may use the names and the mark, unchanged, to let your users sign in with bWalletX or bWallet: the button in this package, the SVG files in `assets/`, and text such as "Sign in with bWalletX". Follow [BRAND.md](./BRAND.md) when you do.
+
+You may not use them in your own product, company or domain name, in a way that suggests bWalletX sponsors or endorses you, or in a changed form.
+
+Questions: https://bwalletx.com

package/assets/bwalletx-mark-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" role="img" aria-label="bWalletX"><defs><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="12" x2="0" y2="105"><stop offset="0" stop-color="#FFE58A"/><stop offset=".55" stop-color="#FFD24D"/><stop offset="1" stop-color="#C98F00"/></linearGradient><mask id="h"><rect width="140" height="140" fill="#fff"/><circle cx="60" cy="72" r="15" fill="#000"/></mask></defs><circle cx="60" cy="60" r="60" fill="#000"/><g transform="translate(60 60) scale(.62) translate(-60 -58)"><g fill="url(#g)" mask="url(#h)"><polygon points="45,12 45,76 27,76 27,30"/><circle cx="60" cy="72" r="33"/></g></g></svg>

package/assets/bwalletx-mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="23 8 74 100" role="img" aria-label="bWalletX"><defs><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="12" x2="0" y2="105"><stop offset="0" stop-color="#FFE58A"/><stop offset=".55" stop-color="#FFD24D"/><stop offset="1" stop-color="#C98F00"/></linearGradient><mask id="h"><rect width="140" height="140" fill="#fff"/><circle cx="60" cy="72" r="15" fill="#000"/></mask></defs><g fill="url(#g)" mask="url(#h)"><polygon points="45,12 45,76 27,76 27,30"/><circle cx="60" cy="72" r="33"/></g></svg>

package/assets/signin-dark.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="260" height="60" viewBox="0 0 260 60" role="img" aria-label="Sign in with bWalletX, also works with bWallet">
+<defs><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="12" x2="0" y2="105"><stop offset="0" stop-color="#FFE58A"/><stop offset=".55" stop-color="#FFD24D"/><stop offset="1" stop-color="#C98F00"/></linearGradient><mask id="h"><rect width="140" height="140" fill="#fff"/><circle cx="60" cy="72" r="15" fill="#000"/></mask><linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fcd34d"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs>
+<rect x="1" y=".5" width="252" height="59" rx="12" fill="#0a0a0a" stroke="#3f3f46" stroke-width="1"/>
+<circle cx="38" cy="30" r="14" fill="#000"/>
+<g transform="translate(38 30) scale(.2) translate(-60 -58)"><g fill="url(#g)" mask="url(#h)"><polygon points="45,12 45,76 27,76 27,30"/><circle cx="60" cy="72" r="33"/></g></g>
+<text x="64" y="28" font-family="Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="16" font-weight="700" fill="#fafafa">Sign in with bWalletX</text>
+<text x="64" y="42" font-family="Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="11" font-weight="500" fill="rgba(255,255,255,.65)">also works with bWallet</text>
+</svg>

package/assets/signin-gold.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="260" height="60" viewBox="0 0 260 60" role="img" aria-label="Sign in with bWalletX, also works with bWallet">
+<defs><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="12" x2="0" y2="105"><stop offset="0" stop-color="#FFE58A"/><stop offset=".55" stop-color="#FFD24D"/><stop offset="1" stop-color="#C98F00"/></linearGradient><mask id="h"><rect width="140" height="140" fill="#fff"/><circle cx="60" cy="72" r="15" fill="#000"/></mask><linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fcd34d"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs>
+<rect x="0" y=".5" width="252" height="59" rx="12" fill="url(#bg)" stroke="none" stroke-width="0"/>
+<circle cx="38" cy="30" r="14" fill="#000"/>
+<g transform="translate(38 30) scale(.2) translate(-60 -58)"><g fill="url(#g)" mask="url(#h)"><polygon points="45,12 45,76 27,76 27,30"/><circle cx="60" cy="72" r="33"/></g></g>
+<text x="64" y="28" font-family="Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="16" font-weight="700" fill="#000">Sign in with bWalletX</text>
+<text x="64" y="42" font-family="Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="11" font-weight="500" fill="rgba(0,0,0,.65)">also works with bWallet</text>
+</svg>

package/assets/signin-light.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="260" height="60" viewBox="0 0 260 60" role="img" aria-label="Sign in with bWalletX, also works with bWallet">
+<defs><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="12" x2="0" y2="105"><stop offset="0" stop-color="#FFE58A"/><stop offset=".55" stop-color="#FFD24D"/><stop offset="1" stop-color="#C98F00"/></linearGradient><mask id="h"><rect width="140" height="140" fill="#fff"/><circle cx="60" cy="72" r="15" fill="#000"/></mask><linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fcd34d"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs>
+<rect x="1" y=".5" width="252" height="59" rx="12" fill="#ffffff" stroke="#d4d4d8" stroke-width="1"/>
+<circle cx="38" cy="30" r="14" fill="#000"/>
+<g transform="translate(38 30) scale(.2) translate(-60 -58)"><g fill="url(#g)" mask="url(#h)"><polygon points="45,12 45,76 27,76 27,30"/><circle cx="60" cy="72" r="33"/></g></g>
+<text x="64" y="28" font-family="Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="16" font-weight="700" fill="#09090b">Sign in with bWalletX</text>
+<text x="64" y="42" font-family="Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="11" font-weight="500" fill="#52525b">also works with bWallet</text>
+</svg>

package/assets/snippet.html

@@ -0,0 +1,17 @@
+<!-- "Sign in with bWalletX" without JavaScript or a build step. Gold, large. Wire the click yourself. -->
+<style>
+.bwx-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;cursor:pointer;
+ background:linear-gradient(180deg,#fcd34d,#f59e0b);color:#000;font:700 16px/1.2 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+ box-shadow:0 10px 15px -3px rgba(245,158,11,.2),0 4px 6px -4px rgba(245,158,11,.2)}
+.bwx-btn:hover{background:linear-gradient(180deg,#fde68a,#fbbf24)}
+.bwx-btn:active{background:linear-gradient(180deg,#fbbf24,#d97706)}
+.bwx-btn:focus-visible{outline:2px solid #b45309;outline-offset:3px}
+.bwx-btn:disabled{opacity:.6;cursor:not-allowed}
+.bwx-btn .bwx-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#000;flex:none}
+.bwx-btn .bwx-txt{display:flex;flex-direction:column;align-items:flex-start}
+.bwx-btn small{font-size:11px;font-weight:500;color:rgba(0,0,0,.65)}
+</style>
+<button type="button" class="bwx-btn" aria-label="Sign in with bWalletX, also works with bWallet">
+  <span class="bwx-mark"><svg viewBox="23 8 74 100" width="15" height="20" aria-hidden="true"><defs><linearGradient id="bwxg" gradientUnits="userSpaceOnUse" x1="0" y1="12" x2="0" y2="105"><stop offset="0" stop-color="#FFE58A"/><stop offset=".55" stop-color="#FFD24D"/><stop offset="1" stop-color="#C98F00"/></linearGradient><mask id="bwxh"><rect width="140" height="140" fill="#fff"/><circle cx="60" cy="72" r="15" fill="#000"/></mask></defs><g fill="url(#bwxg)" mask="url(#bwxh)"><polygon points="45,12 45,76 27,76 27,30"/><circle cx="60" cy="72" r="33"/></g></svg></span>
+  <span class="bwx-txt">Sign in with bWalletX<small>also works with bWallet</small></span>
+</button>