@swype-org/react-sdk 0.1.100 → 0.1.103

package/dist/index.cjs

@@ -161,6 +161,7 @@ var api_exports = {};
 __export(api_exports, {
   createAccount: () => createAccount,
   createTransfer: () => createTransfer,
+  fetchAccount: () => fetchAccount,
   fetchAccounts: () => fetchAccounts,
   fetchAuthorizationSession: () => fetchAuthorizationSession,
   fetchChains: () => fetchChains,
@@ -207,14 +208,28 @@ async function fetchAccounts(apiBaseUrl, token, credentialId) {
   const data = await res.json();
   return data.items;
 }
+async function fetchAccount(apiBaseUrl, token, accountId, credentialId) {
+  const params = new URLSearchParams({ credentialId });
+  const res = await fetch(`${apiBaseUrl}/v1/accounts/${accountId}?${params.toString()}`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
 async function createAccount(apiBaseUrl, token, params) {
+  const body = {
+    id: params.id ?? crypto.randomUUID(),
+    name: params.name,
+    credentialId: params.credentialId,
+    providerId: params.providerId
+  };
   const res = await fetch(`${apiBaseUrl}/v1/accounts`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${token}`
     },
-    body: JSON.stringify(params)
+    body: JSON.stringify(body)
   });
   if (!res.ok) await throwApiError(res);
   return await res.json();
@@ -1864,6 +1879,7 @@ function createInitialState(config) {
     accounts: [],
     chains: [],
     loadingData: false,
+    selectedProviderId: null,
     selectedAccountId: null,
     selectedWalletId: null,
     amount: config.depositAmount != null ? config.depositAmount.toString() : "",
@@ -1958,7 +1974,9 @@ function paymentReducer(state, action) {
     case "SELECT_PROVIDER":
       return {
         ...state,
-        selectedAccountId: null
+        selectedProviderId: action.providerId,
+        selectedAccountId: null,
+        selectedWalletId: null
       };
     case "SELECT_ACCOUNT":
       return {
@@ -2027,7 +2045,7 @@ function paymentReducer(state, action) {
     case "MOBILE_SETUP_COMPLETE":
       return {
         ...state,
-        transfer: action.transfer,
+        transfer: action.transfer ?? state.transfer,
         error: null,
         mobileFlow: false,
         deeplinkUri: null,
@@ -2049,6 +2067,7 @@ function paymentReducer(state, action) {
         ...state,
         mobileFlow: true,
         deeplinkUri: action.deeplinkUri,
+        selectedProviderId: action.providerId ?? state.selectedProviderId,
         error: action.error ?? null,
         step: "open-wallet"
       };
@@ -2104,6 +2123,7 @@ function paymentReducer(state, action) {
         amount: action.depositAmount != null ? action.depositAmount.toString() : "",
         mobileFlow: false,
         deeplinkUri: null,
+        selectedProviderId: null,
         selectedWalletId: null,
         selectedAccountId: action.firstAccountId
       };
@@ -2535,36 +2555,160 @@ 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;
+        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.jsx("span", { style: dropdownNameStyle(active ? tokens.text : tokens.textMuted), children: account.name })
+              ] }),
+              /* @__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 Provider"
+            ]
+          }
+        )
+      ] })
+    ] })
   ] });
 }
-var containerStyle6 = (tokens) => ({
+var cardContainerStyle = (tokens) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -2605,6 +2749,8 @@ var addressStyle = (color) => ({
   fontFamily: '"SF Mono", "Fira Code", monospace'
 });
 var changeStyle = (color) => ({
+  display: "flex",
+  alignItems: "center",
   background: "transparent",
   border: "none",
   color,
@@ -2614,6 +2760,117 @@ 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 dropdownNameStyle = (color) => ({
+  fontWeight: 500,
+  color,
+  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) => {
@@ -2691,13 +2948,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",
@@ -2718,7 +2975,7 @@ function SettingsMenu({ onLogout }) {
     ) })
   ] });
 }
-var containerStyle7 = {
+var containerStyle6 = {
   position: "relative"
 };
 var triggerStyle = (color) => ({
@@ -2731,7 +2988,7 @@ var triggerStyle = (color) => ({
   alignItems: "center",
   justifyContent: "center"
 });
-var dropdownStyle = (tokens) => ({
+var dropdownStyle2 = (tokens) => ({
   position: "absolute",
   right: 0,
   top: "100%",
@@ -3693,12 +3950,16 @@ function DepositScreen({
   processing,
   error,
   onDeposit,
-  onChangeSource,
   onSwitchWallet,
   onBack,
   onLogout,
   onIncreaseLimit,
-  increasingLimit
+  increasingLimit,
+  accounts,
+  selectedAccountId,
+  onSelectAccount,
+  onAuthorizeAccount,
+  onAddProvider
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
@@ -3724,7 +3985,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: [
@@ -3794,7 +4059,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: [
@@ -4927,12 +5196,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")
       }
     );
   }
@@ -5001,10 +5274,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")
       }
     );
   }
@@ -5029,7 +5306,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" }),
@@ -5041,7 +5318,7 @@ var PaymentErrorBoundary = class extends react.Component {
     ] });
   }
 };
-var containerStyle8 = {
+var containerStyle7 = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -5121,6 +5398,7 @@ function SwypePaymentInner({
   );
   const loadingDataRef = react.useRef(false);
   const pollingTransferIdRef = react.useRef(null);
+  const setupAccountIdRef = react.useRef(null);
   const mobileSetupFlowRef = react.useRef(false);
   const handlingMobileReturnRef = react.useRef(false);
   const processingStartedAtRef = react.useRef(null);
@@ -5441,6 +5719,15 @@ function SwypePaymentInner({
         amount: payAmount
       });
       dispatch({ type: "TRANSFER_CREATED", transfer: t });
+      if (t.status === "COMPLETED") {
+        dispatch({ type: "TRANSFER_COMPLETED", transfer: t });
+        onComplete?.(t);
+        return;
+      }
+      if (t.status === "FAILED") {
+        dispatch({ type: "TRANSFER_FAILED", transfer: t, error: "Transfer failed." });
+        return;
+      }
       const signedTransfer = await transferSigning.signTransfer(t.id);
       dispatch({ type: "TRANSFER_SIGNED", transfer: signedTransfer });
       polling.startPolling(t.id);
@@ -5468,6 +5755,7 @@ function SwypePaymentInner({
     transferSigning,
     polling,
     onError,
+    onComplete,
     idempotencyKey,
     merchantAuthorization
   ]);
@@ -5498,7 +5786,6 @@ function SwypePaymentInner({
         }
       }
       const t = await createTransfer(apiBaseUrl, token, {
-        id: idempotencyKey,
         credentialId: state.activeCredentialId,
         merchantAuthorization,
         sourceType: effectiveSourceType,
@@ -5525,7 +5812,6 @@ function SwypePaymentInner({
     getAccessToken,
     polling,
     onError,
-    idempotencyKey,
     merchantAuthorization,
     destination
   ]);
@@ -5570,7 +5856,9 @@ function SwypePaymentInner({
     try {
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
+      const accountId = crypto.randomUUID();
       const account = await createAccount(apiBaseUrl, token, {
+        id: accountId,
         name: providerName,
         credentialId: state.activeCredentialId,
         providerId
@@ -5584,6 +5872,7 @@ function SwypePaymentInner({
       if (isMobile) {
         handlingMobileReturnRef.current = false;
         mobileSetupFlowRef.current = true;
+        setupAccountIdRef.current = account.id;
         persistMobileFlowState({
           accountId: account.id,
           sessionId: session.id,
@@ -5619,10 +5908,23 @@ function SwypePaymentInner({
   const handleContinueConnection = react.useCallback(
     (accountId) => {
       const acct = state.accounts.find((a) => a.id === accountId);
+      if (!acct) return;
+      const matchedProvider = state.providers.find((p) => p.name === acct.name);
+      if (matchedProvider) {
+        handleSelectProvider(matchedProvider.id);
+      }
+    },
+    [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: acct?.wallets[0]?.id ?? null
+        walletId: activeWallet?.id ?? null
       });
     },
     [state.accounts]
@@ -5995,6 +6297,46 @@ function SwypePaymentInner({
     if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
     void handleAuthorizedMobileReturn(polledTransfer, mobileSetupFlowRef.current);
   }, [state.mobileFlow, polling.transfer, handleAuthorizedMobileReturn]);
+  react.useEffect(() => {
+    if (!state.mobileFlow || !mobileSetupFlowRef.current) return;
+    if (state.step !== "open-wallet") return;
+    if (!state.activeCredentialId || !setupAccountIdRef.current) return;
+    const accountId = setupAccountIdRef.current;
+    const credentialId = state.activeCredentialId;
+    let cancelled = false;
+    const POLL_INTERVAL_MS = 3e3;
+    const poll = async () => {
+      try {
+        const token = await getAccessTokenRef.current();
+        if (!token || cancelled) return;
+        const acct = await fetchAccount(apiBaseUrl, token, accountId, credentialId);
+        if (cancelled) return;
+        const hasActive = acct.wallets.some((w) => w.status === "ACTIVE");
+        if (hasActive) {
+          cancelled = true;
+          mobileSetupFlowRef.current = false;
+          setupAccountIdRef.current = null;
+          clearMobileFlowState();
+          await reloadAccounts();
+          dispatch({ type: "MOBILE_SETUP_COMPLETE" });
+        }
+      } catch {
+      }
+    };
+    poll();
+    const intervalId = window.setInterval(poll, POLL_INTERVAL_MS);
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible" && !cancelled) {
+        poll();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      cancelled = true;
+      window.clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [state.mobileFlow, state.step, state.activeCredentialId, apiBaseUrl, reloadAccounts]);
   react.useEffect(() => {
     if (!state.mobileFlow) return;
     if (handlingMobileReturnRef.current) return;
@@ -6054,6 +6396,7 @@ function SwypePaymentInner({
     onVerifyPasskeyViaPopup: handleVerifyPasskeyViaPopup,
     onSelectProvider: handleSelectProvider,
     onContinueConnection: handleContinueConnection,
+    onSelectAccount: handleSelectAccount,
     onPay: handlePay,
     onIncreaseLimit: handleIncreaseLimit,
     onConfirmSign: handleConfirmSign,
@@ -6078,6 +6421,7 @@ function SwypePaymentInner({
     handleVerifyPasskeyViaPopup,
     handleSelectProvider,
     handleContinueConnection,
+    handleSelectAccount,
     handlePay,
     handleIncreaseLimit,
     handleConfirmSign,