@swype-org/react-sdk 0.2.359 → 0.2.360

package/dist/index.cjs

@@ -1055,6 +1055,7 @@ function BlinkProvider({
   privyAppId,
   minTransferAmountUsd,
   enableFullWidget = false,
+  promoTagText = null,
   isMobileApp = false,
   children
 }) {
@@ -1095,9 +1096,10 @@ function BlinkProvider({
       depositAmount,
       setDepositAmount,
       enableFullWidget,
+      promoTagText,
       isMobileApp
     }),
-    [apiBaseUrl, theme, resolvedMinTransferAmountUsd, depositAmount, setDepositAmount, enableFullWidget, isMobileApp]
+    [apiBaseUrl, theme, resolvedMinTransferAmountUsd, depositAmount, setDepositAmount, enableFullWidget, promoTagText, isMobileApp]
   );
   return (
     // Outermost wrapper: loads the Fingerprint browser agent once per
@@ -9184,7 +9186,40 @@ var CHAIN_LOGOS = {
   solana: SOLANA_CHAIN_LOGO,
   "solana mainnet": SOLANA_CHAIN_LOGO
 };
-function BlinkDepositButton({ onClick, disabled, loading }) {
+function PromoTagBadge({ text, background, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle2(background, color), children: text });
+}
+var badgeStyle2 = (background, color) => ({
+  position: "absolute",
+  left: "50%",
+  bottom: -9,
+  // Paint above the coin marks' isolated stack (zIndex 1) inside the button.
+  zIndex: 2,
+  display: "inline-block",
+  // The config API allows up to 50 chars; keep the sticker inside the button's
+  // edges and ellipsize anything that doesn't fit.
+  maxWidth: "calc(100% - 24px)",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  boxSizing: "border-box",
+  background,
+  color,
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1,
+  padding: "4px 8px",
+  borderRadius: 6,
+  whiteSpace: "nowrap",
+  transform: "translateX(-50%) rotate(-6.75deg)",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.16)",
+  pointerEvents: "none"
+});
+function BlinkDepositButton({
+  onClick,
+  disabled,
+  loading,
+  promoTagText
+}) {
   const config = useOptionalBlinkConfig();
   const tokens = config?.tokens ?? lightThemeNew;
   const [hovered, setHovered] = react.useState(false);
@@ -9220,12 +9255,15 @@ function BlinkDepositButton({ onClick, disabled, loading }) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("img", { src: TETHER_LOGO, alt: "", "aria-hidden": "true", style: coinStyle })
-        ] })
+        ] }),
+        promoTagText ? /* @__PURE__ */ jsxRuntime.jsx(PromoTagBadge, { text: promoTagText, background: tokens.highlight, color: tokens.text }) : null
       ]
     }
   );
 }
 var pillStyle = (tokens, state) => ({
+  // Anchor for the optional PromoTagBadge, which overflows the bottom edge.
+  position: "relative",
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -9648,7 +9686,7 @@ function StepList({
         showSpinner ? /* @__PURE__ */ jsxRuntime.jsx(StepSpinner, { size: dims.badge, color: tokens.accent }) : showRecessedPending ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: pendingDotStyle(tokens.bgRecessed, dims.badge) }) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: badgeStyle2(
+            style: badgeStyle3(
               isComplete || isActive ? tokens.accent : tokens.border,
               isComplete,
               dims.badge
@@ -9737,7 +9775,7 @@ var rowStyle2 = (gap) => ({
   alignItems: "center",
   gap
 });
-var badgeStyle2 = (color, filled, size) => ({
+var badgeStyle3 = (color, filled, size) => ({
   width: size,
   height: size,
   borderRadius: "50%",
@@ -11204,7 +11242,7 @@ function DepositOptionsScreen({
   onSignInWithBlink,
   onClose
 }) {
-  const { tokens } = useBlinkConfig();
+  const { tokens, promoTagText } = useBlinkConfig();
   const [manualHovered, setManualHovered] = react.useState(false);
   const [manualPressed, setManualPressed] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { hideScrollbar: true, children: [
@@ -11227,7 +11265,7 @@ function DepositOptionsScreen({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
       /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_PASSKEY_ILLUSTRATION, alt: "", "aria-hidden": "true", style: heroStyle }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stackStyle, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(BlinkDepositButton, { onClick: onSignInWithBlink }),
+        /* @__PURE__ */ jsxRuntime.jsx(BlinkDepositButton, { onClick: onSignInWithBlink, promoTagText }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dividerRowStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerRuleStyle(tokens.textTertiary) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerLabelStyle(tokens.textTertiary), children: "OR" }),
@@ -11357,7 +11395,7 @@ function WelcomeBackScreen({
   onComplete,
   onClose
 }) {
-  const { tokens } = useBlinkConfig();
+  const { tokens, promoTagText } = useBlinkConfig();
   const [depositHovered, setDepositHovered] = react.useState(false);
   const [depositPressed, setDepositPressed] = react.useState(false);
   const [manualHovered, setManualHovered] = react.useState(false);
@@ -11414,7 +11452,15 @@ function WelcomeBackScreen({
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("img", { src: TETHER_LOGO, alt: "", "aria-hidden": "true", style: coinStyle2 })
                 ] })
-              ] })
+              ] }),
+              promoTagText ? /* @__PURE__ */ jsxRuntime.jsx(
+                PromoTagBadge,
+                {
+                  text: promoTagText,
+                  background: tokens.highlight,
+                  color: tokens.text
+                }
+              ) : null
             ]
           }
         ),
@@ -11499,6 +11545,8 @@ var stackStyle2 = {
   width: "100%"
 };
 var depositFrameStyle = (bg, hovered, pressed) => ({
+  // Anchor for the optional PromoTagBadge, which overflows the frame's bottom edge.
+  position: "relative",
   display: "flex",
   flexDirection: "column",
   alignItems: "stretch",