@wallet-ui/react 4.1.1 → 4.2.0-canary-20260602204251

package/README.md

@@ -1,10 +1,6 @@
 [![npm][npm-image]][npm-url]
 [![npm-downloads][npm-downloads-image]][npm-url]
-<br />
-[![code-style-prettier][code-style-prettier-image]][code-style-prettier-url]
 
-[code-style-prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square
-[code-style-prettier-url]: https://github.com/prettier/prettier
 [npm-downloads-image]: https://img.shields.io/npm/dm/@wallet-ui/react/latest.svg?style=flat
 [npm-image]: https://img.shields.io/npm/v/@wallet-ui/react/latest.svg?style=flat
 [npm-url]: https://www.npmjs.com/package/@wallet-ui/react/v/latest

package/dist/index.browser.cjs

@@ -1045,6 +1045,92 @@ function WalletUiModal({ wallets, select, ...props }) {
 function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
   return /* @__PURE__ */ React19__default.default.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
 }
+var DEFAULT_QR_CODE_BACKGROUND_COLOR = "#fff";
+var DEFAULT_QR_CODE_FOREGROUND_COLOR = "#000";
+var DEFAULT_QR_CODE_LOGO_SIZE = 0.2;
+var LOGO_BACKGROUND_PADDING = 1;
+var MAX_QR_CODE_LOGO_SIZE = 0.25;
+function WalletUiQrCode({
+  backgroundColor = DEFAULT_QR_CODE_BACKGROUND_COLOR,
+  border,
+  errorCorrection,
+  foregroundColor = DEFAULT_QR_CODE_FOREGROUND_COLOR,
+  logo,
+  title,
+  value,
+  ...props
+}) {
+  const effectiveErrorCorrection = errorCorrection ?? (logo ? "high" : void 0);
+  const hasAccessibleName = Boolean(title || props["aria-label"] || props["aria-labelledby"]);
+  const titleId = React19__default.default.useId();
+  const qrCode = React19__default.default.useMemo(
+    () => core$1.createQrCode(value, {
+      border,
+      errorCorrection: effectiveErrorCorrection
+    }),
+    [border, effectiveErrorCorrection, value]
+  );
+  const path = React19__default.default.useMemo(() => createQrCodeSvgPath(qrCode.cells), [qrCode.cells]);
+  return /* @__PURE__ */ React19__default.default.createElement(
+    BaseSvg,
+    {
+      "aria-hidden": hasAccessibleName ? void 0 : true,
+      "aria-labelledby": props["aria-labelledby"] ?? (title ? titleId : void 0),
+      "data-wu": "wallet-ui-qr-code",
+      role: hasAccessibleName ? "img" : void 0,
+      shapeRendering: "crispEdges",
+      viewBox: `0 0 ${qrCode.size} ${qrCode.size}`,
+      ...props
+    },
+    title ? /* @__PURE__ */ React19__default.default.createElement("title", { id: titleId }, title) : null,
+    /* @__PURE__ */ React19__default.default.createElement("rect", { fill: backgroundColor, height: qrCode.size, width: qrCode.size, x: 0, y: 0 }),
+    /* @__PURE__ */ React19__default.default.createElement("path", { d: path, fill: foregroundColor }),
+    logo ? /* @__PURE__ */ React19__default.default.createElement(WalletUiQrCodeLogo, { backgroundColor, logo, size: qrCode.size }) : null
+  );
+}
+function WalletUiQrCodeLogo({
+  backgroundColor,
+  logo,
+  size
+}) {
+  const logoSize = size * getQrCodeLogoSize(logo.size);
+  const logoPosition = (size - logoSize) / 2;
+  const logoBackgroundPosition = Math.max(0, Math.floor(logoPosition) - LOGO_BACKGROUND_PADDING);
+  const logoBackgroundEnd = Math.min(size, Math.ceil(logoPosition + logoSize) + LOGO_BACKGROUND_PADDING);
+  const logoBackgroundSize = logoBackgroundEnd - logoBackgroundPosition;
+  const logoBackgroundColor = logo.backgroundColor ?? backgroundColor;
+  return /* @__PURE__ */ React19__default.default.createElement(React19__default.default.Fragment, null, /* @__PURE__ */ React19__default.default.createElement(
+    "rect",
+    {
+      fill: logoBackgroundColor,
+      height: formatSvgNumber(logoBackgroundSize),
+      width: formatSvgNumber(logoBackgroundSize),
+      x: formatSvgNumber(logoBackgroundPosition),
+      y: formatSvgNumber(logoBackgroundPosition)
+    }
+  ), /* @__PURE__ */ React19__default.default.createElement(
+    "image",
+    {
+      height: formatSvgNumber(logoSize),
+      href: logo.href,
+      preserveAspectRatio: "xMidYMid meet",
+      width: formatSvgNumber(logoSize),
+      x: formatSvgNumber(logoPosition),
+      y: formatSvgNumber(logoPosition)
+    }
+  ));
+}
+function createQrCodeSvgPath(cells) {
+  return cells.flatMap(
+    (row, rowIndex) => row.map((cell, columnIndex) => cell ? `M${columnIndex} ${rowIndex}h1v1H${columnIndex}z` : "")
+  ).join("");
+}
+function formatSvgNumber(value) {
+  return Number(value.toFixed(6));
+}
+function getQrCodeLogoSize(size = DEFAULT_QR_CODE_LOGO_SIZE) {
+  return Math.min(size, MAX_QR_CODE_LOGO_SIZE);
+}
 
 Object.defineProperty(exports, "getWalletAccountFeature", {
   enumerable: true,
@@ -1088,6 +1174,7 @@ exports.WalletUiList = WalletUiList;
 exports.WalletUiListButton = WalletUiListButton;
 exports.WalletUiModal = WalletUiModal;
 exports.WalletUiModalTrigger = WalletUiModalTrigger;
+exports.WalletUiQrCode = WalletUiQrCode;
 exports.createWalletUiConfig = createWalletUiConfig;
 exports.ellipsify = ellipsify;
 exports.useBaseDropdown = useBaseDropdown;