@swype-org/react-sdk 0.1.36 → 0.1.38

package/dist/index.cjs

@@ -1783,10 +1783,12 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
 var containerStyle5 = {
   display: "flex",
   gap: 8,
-  justifyContent: "center"
+  justifyContent: "center",
+  width: "100%"
 };
 var inputStyle = (tokens, filled) => ({
   width: 44,
+  maxWidth: "calc((100% - 40px) / 6)",
   height: 52,
   borderRadius: 12,
   border: `1.5px solid ${filled ? tokens.borderFocus : tokens.border}`,
@@ -1798,7 +1800,8 @@ var inputStyle = (tokens, filled) => ({
   textAlign: "center",
   outline: "none",
   caretColor: tokens.borderFocus,
-  transition: "border-color 0.15s ease"
+  transition: "border-color 0.15s ease",
+  flexShrink: 0
 });
 function LimitSlider({
   value,
@@ -1917,11 +1920,61 @@ var sliderThumbCss = (accent) => `
     cursor: pointer;
   }
 `;
+
+// src/assets/logos.ts
+function svgToDataUri(svg) {
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+var BASE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111 111" fill="none">
+<path d="M54.921 110.034C85.359 110.034 110.034 85.402 110.034 55.017C110.034 24.6319 85.359 0 54.921 0C26.0432 0 2.35281 22.1714 0 50.3923H72.8467V59.6416H0C2.35281 87.8625 26.0432 110.034 54.921 110.034Z" fill="#0052FF"/>
+</svg>`;
+var METAMASK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 318.6 318.6">
+<polygon fill="#E2761B" stroke="#E2761B" stroke-linecap="round" stroke-linejoin="round" points="274.1,35.5 174.6,109.4 193,65.8"/>
+<polygon fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round" points="44.4,35.5 143.1,110.1 125.6,65.8"/>
+<polygon fill="#D7C1B3" stroke="#D7C1B3" stroke-linecap="round" stroke-linejoin="round" points="238.3,206.8 211.8,247.4 268.5,263.2 285.8,207.7"/>
+<polygon fill="#D7C1B3" stroke="#D7C1B3" stroke-linecap="round" stroke-linejoin="round" points="33.9,207.7 51.1,263.2 107.8,247.4 81.3,206.8"/>
+<polygon fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" points="103.6,138.2 87.8,162.1 143.1,164.6 141.1,104.1"/>
+<polygon fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" points="214.9,138.2 175.9,103.4 174.6,164.6 230.8,162.1"/>
+<polygon fill="#CD6116" stroke="#CD6116" stroke-linecap="round" stroke-linejoin="round" points="107.8,247.4 140.6,230.9 111.4,208.1"/>
+<polygon fill="#CD6116" stroke="#CD6116" stroke-linecap="round" stroke-linejoin="round" points="177.9,230.9 211.8,247.4 207.1,208.1"/>
+<polygon fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round" points="211.8,247.4 177.9,230.9 180.6,253 180.3,262.3"/>
+<polygon fill="#E4761B" stroke="#E4761B" stroke-linecap="round" stroke-linejoin="round" points="107.8,247.4 138.3,262.3 138.1,253 140.6,230.9"/>
+<polygon fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round" points="138.8,193.5 110.6,185.2 130.5,176.1"/>
+<polygon fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round" points="179.7,193.5 188,176.1 208,185.2"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="107.8,247.4 111.6,206.8 81.3,207.7"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="207,206.8 211.8,247.4 238.3,207.7"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="230.8,162.1 174.6,164.6 179.8,193.5 188.1,176.1 208.1,185.2"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="110.6,185.2 130.6,176.1 138.8,193.5 143.1,164.6 87.8,162.1"/>
+<polygon fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round" points="87.8,162.1 111.4,208.1 110.6,185.2"/>
+<polygon fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round" points="208.1,185.2 207.1,208.1 230.8,162.1"/>
+<polygon fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round" points="143.1,164.6 138.8,193.5 144.1,218.9 145.3,182.8"/>
+<polygon fill="#E4751F" stroke="#E4751F" stroke-linecap="round" stroke-linejoin="round" points="174.6,164.6 173.1,182.6 174.4,218.9 179.8,193.5"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="179.8,193.5 174.4,218.9 177.9,230.9 207.1,208.1 208.1,185.2"/>
+<polygon fill="#F6851B" stroke="#F6851B" stroke-linecap="round" stroke-linejoin="round" points="110.6,185.2 111.4,208.1 140.6,230.9 144.1,218.9 138.8,193.5"/>
+<polygon fill="#C0AD9E" stroke="#C0AD9E" stroke-linecap="round" stroke-linejoin="round" points="180.3,262.3 180.6,253 178.1,250.8 140.4,250.8 138.1,253 138.3,262.3 107.8,247.4 117.8,255.1 140.1,271.9 178.4,271.9 200.8,255.1 211.8,247.4"/>
+<polygon fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" points="177.9,230.9 174.4,218.9 178.1,250.8 180.6,253"/>
+<polygon fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" points="140.6,230.9 138.1,253 140.4,250.8 144.1,218.9"/>
+<polygon fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round" points="278.3,114.2 286.8,73.7 274.1,35.5 174.6,109.4 214.9,138.2 267.2,153.5 278.8,140 273.8,136.4 281.8,129.1 275.4,124.1 283.4,118"/>
+<polygon fill="#763D16" stroke="#763D16" stroke-linecap="round" stroke-linejoin="round" points="31.8,73.7 40.3,114.2 35.5,118 43.5,124.1 36.8,129.1 44.8,136.4 39.8,140 51.3,153.5 103.6,138.2 143.1,110.1 44.4,35.5"/>
+</svg>`;
+var BASE_LOGO = svgToDataUri(BASE_SVG);
+var METAMASK_LOGO = svgToDataUri(METAMASK_SVG);
+var KNOWN_LOGOS = {
+  metamask: METAMASK_LOGO,
+  base: BASE_LOGO
+};
 function SourceCard({ name, address, verified, onChangeSource }) {
   const { tokens } = useSwypeConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle6(tokens), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: leftStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle3(tokens.textMuted), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+      KNOWN_LOGOS[name.toLowerCase()] ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: KNOWN_LOGOS[name.toLowerCase()],
+          alt: name,
+          style: logoImgStyle
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle3(tokens.textMuted), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
           d: "M21 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 8H3V9h18v6z",
@@ -1953,6 +2006,12 @@ var leftStyle = {
   alignItems: "center",
   gap: 10
 };
+var logoImgStyle = {
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  objectFit: "contain"
+};
 var iconStyle3 = (color) => ({
   color,
   display: "flex",
@@ -2162,7 +2221,7 @@ function LoginScreen({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: walletSectionStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: walletLabelStyle(tokens.textMuted), children: "Works with" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, emoji }) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: walletEmojiStyle, children: emoji }, key)) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, emoji, logo }) => logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: key, style: walletLogoImgStyle }, key) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: walletEmojiStyle, children: emoji }, key)) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
@@ -2201,11 +2260,11 @@ function LoginScreen({
   );
 }
 var walletIcons = [
-  { key: "metamask", emoji: "\u{1F98A}" },
+  { key: "metamask", emoji: "\u{1F98A}", logo: KNOWN_LOGOS["metamask"] },
   { key: "rabby", emoji: "\u{1F430}" },
   { key: "phantom", emoji: "\u25C6" },
   { key: "rainbow", emoji: "\u{1F439}" },
-  { key: "coinbase", emoji: "\u{1F535}" }
+  { key: "coinbase", emoji: "\u{1F535}", logo: KNOWN_LOGOS["base"] }
 ];
 function socialLabel(provider) {
   switch (provider) {
@@ -2329,6 +2388,11 @@ var walletEmojiStyle = {
   fontSize: "1.4rem",
   lineHeight: 1
 };
+var walletLogoImgStyle = {
+  width: 24,
+  height: 24,
+  objectFit: "contain"
+};
 var avatarStyle = (tokens) => ({
   width: 28,
   height: 28,
@@ -2386,50 +2450,43 @@ function OtpVerifyScreen({
       });
     }, 1e3);
   }, [cooldown, onResend]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ScreenLayout,
-    {
-      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onVerify, disabled, loading: verifying, children: "Verify" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle(tokens.textMuted), children: "Didn't get the code? Check your spam folder" }),
-        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+  return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z",
+          fill: tokens.accent
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle2(tokens.text), children: "Check your email" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle2(tokens.textSecondary), children: [
+        "We sent a 6-digit code to",
+        "\n",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: maskedIdentifier })
       ] }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z",
-              fill: tokens.accent
-            }
-          ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle2(tokens.text), children: "Check your email" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle2(tokens.textSecondary), children: [
-            "We sent a 6-digit code to",
-            "\n",
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: maskedIdentifier })
-          ] }),
-          error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle(tokens), children: error }),
-          /* @__PURE__ */ jsxRuntime.jsx(OtpInput, { value: otpCode, onChange: onOtpChange, disabled: verifying }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleResend,
-              disabled: cooldown > 0,
-              style: resendStyle(tokens.textMuted, cooldown > 0),
-              children: cooldown > 0 ? `Resend code in ${cooldown}s` : "Resend code"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle(tokens), children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx(OtpInput, { value: otpCode, onChange: onOtpChange, disabled: verifying }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleResend,
+          disabled: cooldown > 0,
+          style: resendStyle(tokens.textMuted, cooldown > 0),
+          children: cooldown > 0 ? `Resend code in ${cooldown}s` : "Resend code"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: actionStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onVerify, disabled, loading: verifying, children: "Verify" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle(tokens.textMuted), children: "Didn't get the code? Check your spam folder" })
+      ] })
+    ] })
+  ] });
 }
 var contentStyle2 = {
   textAlign: "center",
-  flex: 1,
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -2472,6 +2529,10 @@ var resendStyle = (color, disabled) => ({
   padding: 0,
   opacity: disabled ? 0.6 : 1
 });
+var actionStyle = {
+  width: "100%",
+  marginTop: 32
+};
 var hintStyle = (color) => ({
   textAlign: "center",
   fontSize: "0.78rem",
@@ -2560,7 +2621,6 @@ var skipStyle = (color) => ({
   padding: "12px 0 0"
 });
 var WALLET_EMOJIS = {
-  metamask: "\u{1F98A}",
   rabby: "\u{1F430}",
   ora: "\u2666\uFE0F",
   phantom: "\u{1F47B}"
@@ -2610,7 +2670,14 @@ function WalletPickerScreen({
                 style: pendingCardStyle(tokens, isHovered),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pendingCardContentStyle, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: pendingIconStyle, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: emojiStyle, children: WALLET_EMOJIS[acct.name.toLowerCase()] ?? acct.name.charAt(0) }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: pendingIconStyle, children: KNOWN_LOGOS[acct.name.toLowerCase()] ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: KNOWN_LOGOS[acct.name.toLowerCase()],
+                        alt: acct.name,
+                        style: logoImgStyle2
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: emojiStyle, children: WALLET_EMOJIS[acct.name.toLowerCase()] ?? acct.name.charAt(0) }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pendingInfoStyle, children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { style: pendingNameStyle(tokens.text), children: acct.name }),
                       address && /* @__PURE__ */ jsxRuntime.jsx("span", { style: pendingAddressStyle(tokens.textMuted), children: address })
@@ -2634,6 +2701,7 @@ function WalletPickerScreen({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: gridStyle, children: [
           displayProviders.map((p) => {
+            const logoSrc = "logoURI" in p && p.logoURI || KNOWN_LOGOS[p.name.toLowerCase()];
             const emoji = WALLET_EMOJIS[p.name.toLowerCase()] ?? p.name.charAt(0);
             const isHovered = hoveredId === p.id;
             return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2644,12 +2712,12 @@ function WalletPickerScreen({
                 onMouseLeave: () => setHoveredId(null),
                 style: cardStyle(tokens, isHovered),
                 children: [
-                  "logoURI" in p && p.logoURI ? /* @__PURE__ */ jsxRuntime.jsx(
+                  logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
                     "img",
                     {
-                      src: p.logoURI,
+                      src: logoSrc,
                       alt: p.name,
-                      style: logoImgStyle
+                      style: logoImgStyle2
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: emojiStyle, children: emoji }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle2(tokens.text), children: p.name })
@@ -2718,7 +2786,7 @@ var emojiStyle = {
   fontSize: "1.75rem",
   lineHeight: 1
 };
-var logoImgStyle = {
+var logoImgStyle2 = {
   width: 32,
   height: 32,
   borderRadius: 8,
@@ -2861,7 +2929,7 @@ function SetupScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Swype Setup", badge: "Simple", onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Swype Setup", onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
         error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
@@ -3016,7 +3084,6 @@ function SetupStatusScreen({
   complete,
   limit,
   tokensApproved,
-  currentStepLabel,
   merchantName,
   onContinue,
   onLogout,
@@ -3032,7 +3099,7 @@ function SetupStatusScreen({
     { label: "Done", status: "complete" }
   ] : [
     {
-      label: currentStepLabel ?? "Approving tokens",
+      label: "Setting up Wallet",
       status: "active"
     },
     { label: "Done", status: "pending" }
@@ -3070,7 +3137,7 @@ var contentStyle4 = {
   alignItems: "center",
   justifyContent: "center",
   textAlign: "center",
-  padding: "0 24px"
+  padding: "0 24px 32px"
 };
 var headingStyle6 = (color) => ({
   fontSize: "1.45rem",
@@ -3210,7 +3277,7 @@ function DepositScreen({
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, badge: "Simple", onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           SourceCard,
           {
@@ -4647,7 +4714,6 @@ function SwypePayment({
         complete: setupComplete,
         limit: oneTapLimit,
         tokensApproved: tokenCount,
-        currentStepLabel: setupStepLabel,
         merchantName,
         onContinue: () => setStep("deposit"),
         onLogout: handleLogout,