@swype-org/react-sdk 0.2.359 → 0.2.361

package/dist/index.d.cts

@@ -432,6 +432,12 @@ interface BlinkConfig {
      * `useBlinkConfig().enableFullWidget ?? false`.
      */
     enableFullWidget?: boolean;
+    /**
+     * Promotional sticker copy rendered on the deposit CTA buttons (e.g.
+     * "2x Your Profits"). Sourced from the merchant's backend config; null or
+     * undefined hides the tag.
+     */
+    promoTagText?: string | null;
     /**
      * When true, the SDK is being rendered inside a native mobile app's in-app
      * browser (e.g. via `deposit-mobile-sdk` opening an SFSafariViewController
@@ -465,6 +471,12 @@ interface BlinkProviderProps {
      * before login for unauthenticated users. Defaults to `false`.
      */
     enableFullWidget?: boolean;
+    /**
+     * Promotional sticker copy rendered on the deposit CTA buttons (e.g.
+     * "2x Your Profits"). Sourced from the merchant's backend config; null or
+     * undefined (the default) hides the tag.
+     */
+    promoTagText?: string | null;
     /**
      * When true, the widget is hosted inside a native mobile app's in-app browser.
      * Hides the in-screen (X) close buttons and removes rounded screen corners so
@@ -487,7 +499,7 @@ interface BlinkProviderProps {
  * </BlinkProvider>
  * ```
  */
-declare function BlinkProvider({ apiBaseUrl, theme, privyAppId, minTransferAmountUsd, enableFullWidget, isMobileApp, children, }: BlinkProviderProps): react_jsx_runtime.JSX.Element;
+declare function BlinkProvider({ apiBaseUrl, theme, privyAppId, minTransferAmountUsd, enableFullWidget, promoTagText, isMobileApp, children, }: BlinkProviderProps): react_jsx_runtime.JSX.Element;
 /** Access the Blink SDK configuration. Throws if used outside BlinkProvider. */
 declare function useBlinkConfig(): BlinkConfig;
 /**
@@ -1993,6 +2005,11 @@ interface BlinkDepositButtonProps {
     disabled?: boolean;
     /** Non-interactive waiting state (e.g. while preparing a deposit session). Dims like disabled. */
     loading?: boolean;
+    /**
+     * Promotional sticker copy (e.g. "2x Your Profits") rendered as a tilted
+     * badge straddling the button's bottom edge. Omit/null to hide it.
+     */
+    promoTagText?: string | null;
 }
 /**
  * Blink-branded deposit CTA matching the Figma "Payment method" redesign
@@ -2005,7 +2022,7 @@ interface BlinkDepositButtonProps {
  * the default lightThemeNew palette; inside the widget it follows the
  * configured theme tokens.
  */
-declare function BlinkDepositButton({ onClick, disabled, loading }: BlinkDepositButtonProps): react_jsx_runtime.JSX.Element;
+declare function BlinkDepositButton({ onClick, disabled, loading, promoTagText, }: BlinkDepositButtonProps): react_jsx_runtime.JSX.Element;
 
 interface OutlineButtonProps {
     children: ReactNode;

package/dist/index.d.ts

@@ -432,6 +432,12 @@ interface BlinkConfig {
      * `useBlinkConfig().enableFullWidget ?? false`.
      */
     enableFullWidget?: boolean;
+    /**
+     * Promotional sticker copy rendered on the deposit CTA buttons (e.g.
+     * "2x Your Profits"). Sourced from the merchant's backend config; null or
+     * undefined hides the tag.
+     */
+    promoTagText?: string | null;
     /**
      * When true, the SDK is being rendered inside a native mobile app's in-app
      * browser (e.g. via `deposit-mobile-sdk` opening an SFSafariViewController
@@ -465,6 +471,12 @@ interface BlinkProviderProps {
      * before login for unauthenticated users. Defaults to `false`.
      */
     enableFullWidget?: boolean;
+    /**
+     * Promotional sticker copy rendered on the deposit CTA buttons (e.g.
+     * "2x Your Profits"). Sourced from the merchant's backend config; null or
+     * undefined (the default) hides the tag.
+     */
+    promoTagText?: string | null;
     /**
      * When true, the widget is hosted inside a native mobile app's in-app browser.
      * Hides the in-screen (X) close buttons and removes rounded screen corners so
@@ -487,7 +499,7 @@ interface BlinkProviderProps {
  * </BlinkProvider>
  * ```
  */
-declare function BlinkProvider({ apiBaseUrl, theme, privyAppId, minTransferAmountUsd, enableFullWidget, isMobileApp, children, }: BlinkProviderProps): react_jsx_runtime.JSX.Element;
+declare function BlinkProvider({ apiBaseUrl, theme, privyAppId, minTransferAmountUsd, enableFullWidget, promoTagText, isMobileApp, children, }: BlinkProviderProps): react_jsx_runtime.JSX.Element;
 /** Access the Blink SDK configuration. Throws if used outside BlinkProvider. */
 declare function useBlinkConfig(): BlinkConfig;
 /**
@@ -1993,6 +2005,11 @@ interface BlinkDepositButtonProps {
     disabled?: boolean;
     /** Non-interactive waiting state (e.g. while preparing a deposit session). Dims like disabled. */
     loading?: boolean;
+    /**
+     * Promotional sticker copy (e.g. "2x Your Profits") rendered as a tilted
+     * badge straddling the button's bottom edge. Omit/null to hide it.
+     */
+    promoTagText?: string | null;
 }
 /**
  * Blink-branded deposit CTA matching the Figma "Payment method" redesign
@@ -2005,7 +2022,7 @@ interface BlinkDepositButtonProps {
  * the default lightThemeNew palette; inside the widget it follows the
  * configured theme tokens.
  */
-declare function BlinkDepositButton({ onClick, disabled, loading }: BlinkDepositButtonProps): react_jsx_runtime.JSX.Element;
+declare function BlinkDepositButton({ onClick, disabled, loading, promoTagText, }: BlinkDepositButtonProps): react_jsx_runtime.JSX.Element;
 
 interface OutlineButtonProps {
     children: ReactNode;

package/dist/index.js

@@ -1031,6 +1031,7 @@ function BlinkProvider({
   privyAppId,
   minTransferAmountUsd,
   enableFullWidget = false,
+  promoTagText = null,
   isMobileApp = false,
   children
 }) {
@@ -1071,9 +1072,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
@@ -9142,8 +9144,11 @@ var TOKEN_LOGOS = {
 };
 var CHAIN_LOGOS = {
   base: BASE_CHAIN_LOGO,
+  // Testnets use the parent chain's logo (sandbox/smokebox environments).
+  "base sepolia": BASE_CHAIN_LOGO,
   ethereum: ETHEREUM_CHAIN_LOGO,
   "ethereum mainnet": ETHEREUM_CHAIN_LOGO,
+  sepolia: ETHEREUM_CHAIN_LOGO,
   polygon: POLYGON_CHAIN_LOGO,
   "polygon mainnet": POLYGON_CHAIN_LOGO,
   arbitrum: ARBITRUM_CHAIN_LOGO,
@@ -9160,7 +9165,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__ */ 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] = useState(false);
@@ -9196,12 +9234,15 @@ function BlinkDepositButton({ onClick, disabled, loading }) {
             }
           ),
           /* @__PURE__ */ jsx("img", { src: TETHER_LOGO, alt: "", "aria-hidden": "true", style: coinStyle })
-        ] })
+        ] }),
+        promoTagText ? /* @__PURE__ */ 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",
@@ -9624,7 +9665,7 @@ function StepList({
         showSpinner ? /* @__PURE__ */ jsx(StepSpinner, { size: dims.badge, color: tokens.accent }) : showRecessedPending ? /* @__PURE__ */ jsx("div", { style: pendingDotStyle(tokens.bgRecessed, dims.badge) }) : /* @__PURE__ */ jsx(
           "div",
           {
-            style: badgeStyle2(
+            style: badgeStyle3(
               isComplete || isActive ? tokens.accent : tokens.border,
               isComplete,
               dims.badge
@@ -9713,7 +9754,7 @@ var rowStyle2 = (gap) => ({
   alignItems: "center",
   gap
 });
-var badgeStyle2 = (color, filled, size) => ({
+var badgeStyle3 = (color, filled, size) => ({
   width: size,
   height: size,
   borderRadius: "50%",
@@ -11180,7 +11221,7 @@ function DepositOptionsScreen({
   onSignInWithBlink,
   onClose
 }) {
-  const { tokens } = useBlinkConfig();
+  const { tokens, promoTagText } = useBlinkConfig();
   const [manualHovered, setManualHovered] = useState(false);
   const [manualPressed, setManualPressed] = useState(false);
   return /* @__PURE__ */ jsxs(ScreenLayout, { hideScrollbar: true, children: [
@@ -11203,7 +11244,7 @@ function DepositOptionsScreen({
     /* @__PURE__ */ jsxs("div", { style: contentStyle2, children: [
       /* @__PURE__ */ jsx("img", { src: BLINK_PASSKEY_ILLUSTRATION, alt: "", "aria-hidden": "true", style: heroStyle }),
       /* @__PURE__ */ jsxs("div", { style: stackStyle, children: [
-        /* @__PURE__ */ jsx(BlinkDepositButton, { onClick: onSignInWithBlink }),
+        /* @__PURE__ */ jsx(BlinkDepositButton, { onClick: onSignInWithBlink, promoTagText }),
         /* @__PURE__ */ jsxs("div", { style: dividerRowStyle, children: [
           /* @__PURE__ */ jsx("span", { style: dividerRuleStyle(tokens.textTertiary) }),
           /* @__PURE__ */ jsx("span", { style: dividerLabelStyle(tokens.textTertiary), children: "OR" }),
@@ -11333,7 +11374,7 @@ function WelcomeBackScreen({
   onComplete,
   onClose
 }) {
-  const { tokens } = useBlinkConfig();
+  const { tokens, promoTagText } = useBlinkConfig();
   const [depositHovered, setDepositHovered] = useState(false);
   const [depositPressed, setDepositPressed] = useState(false);
   const [manualHovered, setManualHovered] = useState(false);
@@ -11390,7 +11431,15 @@ function WelcomeBackScreen({
                   ),
                   /* @__PURE__ */ jsx("img", { src: TETHER_LOGO, alt: "", "aria-hidden": "true", style: coinStyle2 })
                 ] })
-              ] })
+              ] }),
+              promoTagText ? /* @__PURE__ */ jsx(
+                PromoTagBadge,
+                {
+                  text: promoTagText,
+                  background: tokens.highlight,
+                  color: tokens.text
+                }
+              ) : null
             ]
           }
         ),
@@ -11475,6 +11524,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",