@swype-org/react-sdk 0.1.102 → 0.1.104

package/dist/index.cjs

@@ -223,6 +223,9 @@ async function createAccount(apiBaseUrl, token, params) {
     credentialId: params.credentialId,
     providerId: params.providerId
   };
+  if (params.nickname) {
+    body.nickname = params.nickname;
+  }
   const res = await fetch(`${apiBaseUrl}/v1/accounts`, {
     method: "POST",
     headers: {
@@ -2555,36 +2558,165 @@ var KNOWN_LOGOS = {
   base: BASE_LOGO,
   "trust wallet": TRUST_WALLET_LOGO
 };
-function SourceCard({ name, address, verified, onChangeSource }) {
+function hasActiveWallet2(account) {
+  return account.wallets.some((w) => w.status === "ACTIVE");
+}
+function SourceCard({
+  name,
+  address,
+  verified,
+  accounts,
+  selectedAccountId,
+  onSelectAccount,
+  onAuthorizeAccount,
+  onAddProvider
+}) {
   const { tokens } = useSwypeConfig();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle6(tokens), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: leftStyle, children: [
-      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",
+  const [open, setOpen] = react.useState(false);
+  const containerRef = react.useRef(null);
+  const hasDropdown = accounts != null && accounts.length > 0;
+  react.useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardContainerStyle(tokens), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: leftStyle, children: [
+        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",
+            fill: "currentColor"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: nameRowStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle(tokens.text), children: name }),
+            verified && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.accent }) })
+          ] }),
+          address && /* @__PURE__ */ jsxRuntime.jsx("span", { style: addressStyle(tokens.textMuted), children: address })
+        ] })
+      ] }),
+      hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
         {
-          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",
-          fill: "currentColor"
+          type: "button",
+          onClick: () => setOpen(!open),
+          style: changeStyle(tokens.accent),
+          children: [
+            "Change source",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "10",
+                height: "10",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                style: {
+                  marginLeft: 4,
+                  transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 0.15s ease"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M7 10l5 5 5-5",
+                    stroke: tokens.accent,
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          ]
         }
-      ) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: nameRowStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle(tokens.text), children: name }),
-          verified && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.accent }) })
-        ] }),
-        address && /* @__PURE__ */ jsxRuntime.jsx("span", { style: addressStyle(tokens.textMuted), children: address })
-      ] })
+      )
     ] }),
-    onChangeSource && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onChangeSource, style: changeStyle(tokens.accent), children: "Change source" })
+    open && hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownStyle(tokens), children: [
+      accounts.map((account) => {
+        const active = hasActiveWallet2(account);
+        const isSelected = account.id === selectedAccountId;
+        const displayName = account.nickname ?? account.name;
+        const walletAddress = account.wallets[0]?.name;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (active) {
+                onSelectAccount?.(account.id);
+              } else {
+                onAuthorizeAccount?.(account.id);
+              }
+              setOpen(false);
+            },
+            style: dropdownRowStyle(tokens, active, isSelected),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownRowLeftStyle, children: [
+                KNOWN_LOGOS[account.name.toLowerCase()] ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: KNOWN_LOGOS[account.name.toLowerCase()],
+                    alt: account.name,
+                    style: dropdownLogoStyle
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownFallbackIconStyle(active ? tokens.textMuted : tokens.border), children: account.name.charAt(0) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownNameColumnStyle, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownNameStyle(active ? tokens.text : tokens.textMuted), children: displayName }),
+                  walletAddress && /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownAddressStyle(active ? tokens.textMuted : tokens.border), children: walletAddress })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownRowRightStyle, children: [
+                active ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: activeBadgeStyle(tokens), children: "Active" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: inactiveBadgeStyle(tokens), children: "Setup incomplete" }),
+                isSelected && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+                    fill: tokens.accent
+                  }
+                ) })
+              ] })
+            ]
+          },
+          account.id
+        );
+      }),
+      onAddProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownDividerStyle(tokens.border) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onAddProvider();
+              setOpen(false);
+            },
+            style: addProviderStyle(tokens),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }),
+              "Add Account"
+            ]
+          }
+        )
+      ] })
+    ] })
   ] });
 }
-var containerStyle6 = (tokens) => ({
+var cardContainerStyle = (tokens) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -2625,6 +2757,8 @@ var addressStyle = (color) => ({
   fontFamily: '"SF Mono", "Fira Code", monospace'
 });
 var changeStyle = (color) => ({
+  display: "flex",
+  alignItems: "center",
   background: "transparent",
   border: "none",
   color,
@@ -2634,6 +2768,131 @@ var changeStyle = (color) => ({
   fontFamily: "inherit",
   padding: 0
 });
+var dropdownStyle = (tokens) => ({
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  right: 0,
+  marginTop: 4,
+  background: tokens.bgCard,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: tokens.radiusLg,
+  boxShadow: tokens.shadowLg,
+  zIndex: 50,
+  overflow: "hidden"
+});
+var dropdownRowStyle = (tokens, active, isSelected) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "10px 14px",
+  background: isSelected ? tokens.accent + "12" : "transparent",
+  border: "none",
+  borderBottom: `1px solid ${tokens.border}`,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  fontSize: "0.85rem",
+  textAlign: "left",
+  outline: "none",
+  opacity: active ? 1 : 0.55,
+  transition: "background 0.1s ease"
+});
+var dropdownRowLeftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  minWidth: 0,
+  flex: 1
+};
+var dropdownRowRightStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  flexShrink: 0
+};
+var dropdownLogoStyle = {
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  objectFit: "contain",
+  flexShrink: 0
+};
+var dropdownFallbackIconStyle = (color) => ({
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "0.72rem",
+  fontWeight: 700,
+  color,
+  flexShrink: 0
+});
+var dropdownNameColumnStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  minWidth: 0
+};
+var dropdownNameStyle = (color) => ({
+  fontWeight: 500,
+  color,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+});
+var dropdownAddressStyle = (color) => ({
+  fontSize: "0.72rem",
+  color,
+  fontFamily: '"SF Mono", "Fira Code", monospace',
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+});
+var activeBadgeStyle = (tokens) => ({
+  fontSize: "0.6rem",
+  fontWeight: 600,
+  color: tokens.success,
+  background: tokens.successBg,
+  padding: "2px 7px",
+  borderRadius: 999,
+  textTransform: "uppercase",
+  letterSpacing: "0.03em",
+  whiteSpace: "nowrap"
+});
+var inactiveBadgeStyle = (tokens) => ({
+  fontSize: "0.6rem",
+  fontWeight: 600,
+  color: tokens.warning,
+  background: tokens.warningBg ?? `${tokens.warning}1a`,
+  padding: "2px 7px",
+  borderRadius: 999,
+  textTransform: "uppercase",
+  letterSpacing: "0.03em",
+  whiteSpace: "nowrap"
+});
+var dropdownDividerStyle = (borderColor) => ({
+  height: 0,
+  borderTop: `1px solid ${borderColor}`
+});
+var addProviderStyle = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  padding: "10px 14px",
+  background: "transparent",
+  border: "none",
+  color: tokens.accent,
+  fontWeight: 600,
+  fontSize: "0.85rem",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  outline: "none"
+});
 function StepList({ steps }) {
   const { tokens } = useSwypeConfig();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: listStyle, children: steps.map((step, i) => {
@@ -2711,13 +2970,13 @@ function SettingsMenu({ onLogout }) {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style: containerStyle7, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style: containerStyle6, children: [
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: toggle, style: triggerStyle(tokens.text), "aria-label": "Settings", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "19", r: "2", fill: "currentColor" })
     ] }) }),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownStyle(tokens), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownStyle2(tokens), children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
@@ -2738,7 +2997,7 @@ function SettingsMenu({ onLogout }) {
     ) })
   ] });
 }
-var containerStyle7 = {
+var containerStyle6 = {
   position: "relative"
 };
 var triggerStyle = (color) => ({
@@ -2751,7 +3010,7 @@ var triggerStyle = (color) => ({
   alignItems: "center",
   justifyContent: "center"
 });
-var dropdownStyle = (tokens) => ({
+var dropdownStyle2 = (tokens) => ({
   position: "absolute",
   right: 0,
   top: "100%",
@@ -3713,12 +3972,16 @@ function DepositScreen({
   processing,
   error,
   onDeposit,
-  onChangeSource,
   onSwitchWallet,
   onBack,
   onLogout,
   onIncreaseLimit,
-  increasingLimit
+  increasingLimit,
+  accounts,
+  selectedAccountId,
+  onSelectAccount,
+  onAuthorizeAccount,
+  onAddProvider
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
@@ -3744,7 +4007,11 @@ function DepositScreen({
               name: sourceName,
               address: sourceAddress,
               verified: sourceVerified,
-              onChangeSource
+              accounts,
+              selectedAccountId,
+              onSelectAccount,
+              onAuthorizeAccount,
+              onAddProvider
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: amountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: amountStyle({ ...tokens, dimmed: true }), children: [
@@ -3814,7 +4081,11 @@ function DepositScreen({
             name: sourceName,
             address: sourceAddress,
             verified: sourceVerified,
-            onChangeSource
+            accounts,
+            selectedAccountId,
+            onSelectAccount,
+            onAuthorizeAccount,
+            onAddProvider
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: amountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: amountStyle(tokens), children: [
@@ -4947,12 +5218,16 @@ function StepRenderer({
         processing: state.creatingTransfer,
         error: state.error,
         onDeposit: handlers.onPay,
-        onChangeSource: () => handlers.onNavigate("wallet-picker"),
         onSwitchWallet: () => handlers.onNavigate("wallet-picker"),
         onBack: onBack ?? (() => handlers.onLogout()),
         onLogout: handlers.onLogout,
         onIncreaseLimit: handlers.onIncreaseLimit,
-        increasingLimit: state.increasingLimit
+        increasingLimit: state.increasingLimit,
+        accounts: state.accounts,
+        selectedAccountId: state.selectedAccountId,
+        onSelectAccount: handlers.onSelectAccount,
+        onAuthorizeAccount: handlers.onContinueConnection,
+        onAddProvider: () => handlers.onNavigate("wallet-picker")
       }
     );
   }
@@ -5021,10 +5296,14 @@ function StepRenderer({
         processing: false,
         error: state.error,
         onDeposit: handlers.onPay,
-        onChangeSource: () => handlers.onNavigate("wallet-picker"),
         onSwitchWallet: () => handlers.onNavigate("wallet-picker"),
         onBack: onBack ?? (() => handlers.onLogout()),
-        onLogout: handlers.onLogout
+        onLogout: handlers.onLogout,
+        accounts: state.accounts,
+        selectedAccountId: state.selectedAccountId,
+        onSelectAccount: handlers.onSelectAccount,
+        onAuthorizeAccount: handlers.onContinueConnection,
+        onAddProvider: () => handlers.onNavigate("wallet-picker")
       }
     );
   }
@@ -5049,7 +5328,7 @@ var PaymentErrorBoundary = class extends react.Component {
     if (!this.state.hasError) {
       return this.props.children;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle8, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle7, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
@@ -5061,7 +5340,7 @@ var PaymentErrorBoundary = class extends react.Component {
     ] });
   }
 };
-var containerStyle8 = {
+var containerStyle7 = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -5659,6 +5938,19 @@ function SwypePaymentInner({
     },
     [state.accounts, state.providers, handleSelectProvider]
   );
+  const handleSelectAccount = react.useCallback(
+    (accountId) => {
+      const acct = state.accounts.find((a) => a.id === accountId);
+      if (!acct) return;
+      const activeWallet = acct.wallets.find((w) => w.status === "ACTIVE") ?? null;
+      dispatch({
+        type: "SELECT_ACCOUNT",
+        accountId,
+        walletId: activeWallet?.id ?? null
+      });
+    },
+    [state.accounts]
+  );
   const handleNewPayment = react.useCallback(() => {
     clearMobileFlowState();
     processingStartedAtRef.current = null;
@@ -6126,6 +6418,7 @@ function SwypePaymentInner({
     onVerifyPasskeyViaPopup: handleVerifyPasskeyViaPopup,
     onSelectProvider: handleSelectProvider,
     onContinueConnection: handleContinueConnection,
+    onSelectAccount: handleSelectAccount,
     onPay: handlePay,
     onIncreaseLimit: handleIncreaseLimit,
     onConfirmSign: handleConfirmSign,
@@ -6150,6 +6443,7 @@ function SwypePaymentInner({
     handleVerifyPasskeyViaPopup,
     handleSelectProvider,
     handleContinueConnection,
+    handleSelectAccount,
     handlePay,
     handleIncreaseLimit,
     handleConfirmSign,