@swype-org/react-sdk 0.1.105 → 0.1.107

package/dist/index.cjs

@@ -160,6 +160,7 @@ function useSwypeDepositAmount() {
 var api_exports = {};
 __export(api_exports, {
   createAccount: () => createAccount,
+  createAccountAuthorizationSession: () => createAccountAuthorizationSession,
   createTransfer: () => createTransfer,
   fetchAccount: () => fetchAccount,
   fetchAccounts: () => fetchAccounts,
@@ -237,6 +238,21 @@ async function createAccount(apiBaseUrl, token, params) {
   if (!res.ok) await throwApiError(res);
   return await res.json();
 }
+async function createAccountAuthorizationSession(apiBaseUrl, token, accountId, credentialId) {
+  const res = await fetch(
+    `${apiBaseUrl}/v1/accounts/${accountId}/authorization-sessions`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`
+      },
+      body: JSON.stringify({ credentialId })
+    }
+  );
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
 async function createTransfer(apiBaseUrl, token, params) {
   if (!params.merchantAuthorization) {
     throw new Error("merchantAuthorization is required for transfer creation.");
@@ -2567,6 +2583,7 @@ function SourceCard({
   verified,
   accounts,
   selectedAccountId,
+  depositAmount,
   onSelectAccount,
   onAuthorizeAccount,
   onAddProvider
@@ -2652,6 +2669,8 @@ function SourceCard({
         const isSelected = account.id === selectedAccountId;
         const displayName = account.nickname ?? account.name;
         const walletAddress = account.wallets[0]?.name;
+        const hasAllowance = active && account.remainingAllowance != null;
+        const exceedsLimit = hasAllowance && depositAmount != null && depositAmount > account.remainingAllowance;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -2677,10 +2696,15 @@ function SourceCard({
                 ) : /* @__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 })
+                  walletAddress && /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownAddressStyle(active ? tokens.textMuted : tokens.border), children: walletAddress }),
+                  hasAllowance && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: remainingAllowanceStyle(exceedsLimit ? tokens.warning : tokens.textMuted), children: [
+                    "$",
+                    account.remainingAllowance.toFixed(2),
+                    " remaining"
+                  ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownRowRightStyle, children: active ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: activeBadgeStyle(tokens), children: "Active" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: inactiveBadgeStyle(tokens), children: "Setup incomplete" }) })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownRowRightStyle, children: active ? exceedsLimit ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: exceedsLimitBadgeStyle(tokens), children: "Exceeds limit" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: activeBadgeStyle(tokens), children: "Active" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: inactiveBadgeStyle(tokens), children: "Setup incomplete" }) })
             ]
           },
           account.id
@@ -2868,6 +2892,25 @@ var dropdownDividerStyle = (borderColor) => ({
   height: 0,
   borderTop: `1px solid ${borderColor}`
 });
+var remainingAllowanceStyle = (color) => ({
+  fontSize: "0.68rem",
+  color,
+  fontWeight: 500,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+});
+var exceedsLimitBadgeStyle = (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 addProviderStyle = (tokens) => ({
   display: "flex",
   alignItems: "center",
@@ -4000,6 +4043,7 @@ function DepositScreen({
               verified: sourceVerified,
               accounts,
               selectedAccountId,
+              depositAmount: amount,
               onSelectAccount,
               onAuthorizeAccount,
               onAddProvider
@@ -4074,6 +4118,7 @@ function DepositScreen({
             verified: sourceVerified,
             accounts,
             selectedAccountId,
+            depositAmount: amount,
             onSelectAccount,
             onAuthorizeAccount,
             onAddProvider
@@ -5773,9 +5818,8 @@ function SwypePaymentInner({
     merchantAuthorization
   ]);
   const handleIncreaseLimit = react.useCallback(async () => {
-    const parsedAmount = depositAmount ?? 5;
-    if (!sourceId) {
-      dispatch({ type: "SET_ERROR", error: "No account or provider selected." });
+    if (!state.selectedAccountId) {
+      dispatch({ type: "SET_ERROR", error: "No account selected." });
       return;
     }
     if (!state.activeCredentialId) {
@@ -5783,30 +5827,44 @@ function SwypePaymentInner({
       dispatch({ type: "NAVIGATE", step: "create-passkey" });
       return;
     }
+    const acct = state.accounts.find((a) => a.id === state.selectedAccountId);
+    const matchedProvider = acct ? state.providers.find((p) => p.name === acct.name) : void 0;
+    if (matchedProvider) {
+      dispatch({ type: "SELECT_PROVIDER", providerId: matchedProvider.id });
+    }
     dispatch({ type: "SET_ERROR", error: null });
     dispatch({ type: "SET_INCREASING_LIMIT", value: true });
     try {
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
-      let effectiveSourceType = sourceType;
-      let effectiveSourceId = sourceId;
-      if (effectiveSourceType === "accountId") {
-        const acct = state.accounts.find((a) => a.id === effectiveSourceId);
-        const activeWallet = acct?.wallets.find((w) => w.status === "ACTIVE");
-        if (activeWallet) {
-          effectiveSourceType = "walletId";
-          effectiveSourceId = activeWallet.id;
-        }
-      }
-      const t = await createTransfer(apiBaseUrl, token, {
-        credentialId: state.activeCredentialId,
-        merchantAuthorization,
-        sourceType: effectiveSourceType,
-        sourceId: effectiveSourceId,
-        destination,
-        amount: parsedAmount
+      const session = await createAccountAuthorizationSession(
+        apiBaseUrl,
+        token,
+        state.selectedAccountId,
+        state.activeCredentialId
+      );
+      const isMobile = !shouldUseWalletConnector({
+        useWalletConnector: useWalletConnectorProp,
+        userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
       });
-      dispatch({ type: "TRANSFER_CREATED", transfer: t });
+      if (isMobile) {
+        handlingMobileReturnRef.current = false;
+        mobileSetupFlowRef.current = true;
+        setupAccountIdRef.current = state.selectedAccountId;
+        persistMobileFlowState({
+          accountId: state.selectedAccountId,
+          sessionId: session.id,
+          deeplinkUri: session.uri,
+          providerId: matchedProvider?.id ?? null,
+          isSetup: true
+        });
+        dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
+        triggerDeeplink(session.uri);
+      } else {
+        await authExecutor.executeSessionById(session.id);
+        await reloadAccounts();
+        dispatch({ type: "NAVIGATE", step: "deposit" });
+      }
     } catch (err) {
       captureException(err);
       const msg = err instanceof Error ? err.message : "Failed to increase limit";
@@ -5816,17 +5874,16 @@ function SwypePaymentInner({
       dispatch({ type: "SET_INCREASING_LIMIT", value: false });
     }
   }, [
-    depositAmount,
-    sourceId,
-    sourceType,
+    state.selectedAccountId,
     state.activeCredentialId,
     state.accounts,
+    state.providers,
     apiBaseUrl,
     getAccessToken,
-    polling,
-    onError,
-    merchantAuthorization,
-    destination
+    authExecutor,
+    useWalletConnectorProp,
+    reloadAccounts,
+    onError
   ]);
   const handleConfirmSign = react.useCallback(async () => {
     const t = state.transfer ?? polling.transfer;
@@ -6388,7 +6445,7 @@ function SwypePaymentInner({
     initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
   }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
   react.useEffect(() => {
-    if (pendingSelectSourceAction && state.step === "processing") {
+    if (pendingSelectSourceAction && (state.step === "processing" || state.step === "open-wallet")) {
       preSelectSourceStepRef.current = state.step;
       dispatch({ type: "NAVIGATE", step: "select-source" });
     } else if (!pendingSelectSourceAction && state.step === "select-source") {