@swype-org/react-sdk 0.1.34 → 0.1.36

package/dist/index.cjs

@@ -4,6 +4,7 @@ var react = require('react');
 var reactAuth = require('@privy-io/react-auth');
 var wagmi = require('wagmi');
 var chains = require('wagmi/chains');
+var connectors = require('wagmi/connectors');
 var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
 var viem = require('viem');
@@ -77,6 +78,7 @@ function getTheme(mode) {
 var SWYPE_PRIVY_APP_ID = "cmlil87uv004n0ck0blwumwek";
 var wagmiConfig = wagmi.createConfig({
   chains: [chains.mainnet, chains.arbitrum, chains.base],
+  connectors: [connectors.injected()],
   transports: {
     [chains.mainnet.id]: wagmi.http(),
     [chains.arbitrum.id]: wagmi.http(),
@@ -2563,13 +2565,20 @@ var WALLET_EMOJIS = {
   ora: "\u2666\uFE0F",
   phantom: "\u{1F47B}"
 };
+function truncateAddress(address) {
+  if (address.length <= 10) return address;
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
 function WalletPickerScreen({
   providers,
+  pendingConnections,
   onSelectProvider,
+  onContinueConnection,
   onBack
 }) {
   const { tokens } = useSwypeConfig();
   const [hoveredId, setHoveredId] = react.useState(null);
+  const hasPending = pendingConnections != null && pendingConnections.length > 0;
   const displayProviders = providers.length > 0 ? providers : [
     { id: "metamask", name: "MetaMask" },
     { id: "rabby", name: "Rabby" },
@@ -2585,8 +2594,44 @@ function WalletPickerScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack }),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" }),
+        hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
+            const wallet = acct.wallets[0];
+            const address = wallet ? truncateAddress(wallet.name) : void 0;
+            const isHovered = hoveredId === `pending-${acct.id}`;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => onContinueConnection?.(acct.id),
+                onMouseEnter: () => setHoveredId(`pending-${acct.id}`),
+                onMouseLeave: () => setHoveredId(null),
+                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.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 })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: pendingBadgeStyle(tokens), children: "Setup incomplete" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: continueRowStyle(tokens), children: [
+                    "Continue setup",
+                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z", fill: "currentColor" }) })
+                  ] })
+                ]
+              },
+              acct.id
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
+        ] }),
+        !hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: gridStyle, children: [
           displayProviders.map((p) => {
             const emoji = WALLET_EMOJIS[p.name.toLowerCase()] ?? p.name.charAt(0);
@@ -2690,6 +2735,86 @@ var hintStyle2 = (color) => ({
   color,
   margin: "0 0 4px"
 });
+var pendingListStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 10,
+  marginBottom: 20
+};
+var pendingCardStyle = (tokens, hovered) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: 0,
+  padding: 0,
+  background: hovered ? tokens.bgHover : tokens.bgInput,
+  border: `1.5px solid ${tokens.warning}44`,
+  borderRadius: 16,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  transition: "background 0.15s ease",
+  outline: "none",
+  overflow: "hidden",
+  textAlign: "left"
+});
+var pendingCardContentStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "14px 16px"
+};
+var pendingIconStyle = {
+  flexShrink: 0
+};
+var pendingInfoStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  flex: 1,
+  minWidth: 0
+};
+var pendingNameStyle = (color) => ({
+  fontSize: "0.92rem",
+  fontWeight: 600,
+  color
+});
+var pendingAddressStyle = (color) => ({
+  fontSize: "0.78rem",
+  color,
+  fontFamily: "monospace"
+});
+var pendingBadgeStyle = (tokens) => ({
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  color: tokens.warningText ?? tokens.warning,
+  background: tokens.warningBg ?? `${tokens.warning}1a`,
+  padding: "3px 8px",
+  borderRadius: 6,
+  whiteSpace: "nowrap",
+  flexShrink: 0
+});
+var continueRowStyle = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 4,
+  padding: "10px 16px",
+  fontSize: "0.84rem",
+  fontWeight: 600,
+  color: tokens.accent,
+  background: `${tokens.accent}0d`,
+  borderTop: `1px solid ${tokens.accent}22`
+});
+var dividerStyle2 = (borderColor) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  margin: "4px 0 16px"
+});
+var dividerTextStyle = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  whiteSpace: "nowrap"
+});
 var DEFAULT_MAX = 500;
 var ABSOLUTE_MIN = 1;
 function buildTicks(min, max) {
@@ -3777,17 +3902,36 @@ function SwypePayment({
   const [setupComplete, setSetupComplete] = react.useState(false);
   const [setupStepLabel, setSetupStepLabel] = react.useState(void 0);
   const [mobileFlow, setMobileFlow] = react.useState(false);
+  const [mobileSetupFlow, setMobileSetupFlow] = react.useState(false);
   const pollingTransferIdRef = react.useRef(null);
   const mobileSigningTransferIdRef = react.useRef(null);
   const processingStartedAtRef = react.useRef(null);
   const [selectSourceChainName, setSelectSourceChainName] = react.useState("");
   const [selectSourceTokenSymbol, setSelectSourceTokenSymbol] = react.useState("");
   const initializedSelectSourceActionRef = react.useRef(null);
+  const preSelectSourceStepRef = react.useRef(null);
   const authExecutor = useAuthorizationExecutor();
   const polling = useTransferPolling();
   const transferSigning = useTransferSigning();
   const sourceType = connectingNewAccount ? "providerId" : selectedWalletId ? "walletId" : selectedAccountId ? "accountId" : "providerId";
   const sourceId = connectingNewAccount ? selectedProviderId ?? "" : selectedWalletId ? selectedWalletId : selectedAccountId ? selectedAccountId : selectedProviderId ?? "";
+  const reloadAccounts = react.useCallback(async () => {
+    const token = await getAccessToken();
+    if (!token || !activeCredentialId) return;
+    const [accts, prov] = await Promise.all([
+      fetchAccounts(apiBaseUrl, token, activeCredentialId),
+      fetchProviders(apiBaseUrl, token)
+    ]);
+    setAccounts(accts);
+    setProviders(prov);
+    const parsedAmt = depositAmount != null ? depositAmount : 0;
+    const defaults = computeSmartDefaults(accts, parsedAmt);
+    if (defaults) {
+      setSelectedAccountId(defaults.accountId);
+      setSelectedWalletId(defaults.walletId);
+      setConnectingNewAccount(false);
+    }
+  }, [getAccessToken, activeCredentialId, apiBaseUrl, depositAmount]);
   react.useEffect(() => {
     if (depositAmount != null) {
       setAmount(depositAmount.toString());
@@ -3798,7 +3942,7 @@ function SwypePayment({
     setVerificationTarget(null);
     setOtpCode("");
   }, []);
-  const handleSocialLogin = react.useCallback(async (provider) => {
+  react.useCallback(async (provider) => {
     setError(null);
     try {
       await initOAuth({ provider });
@@ -3937,7 +4081,10 @@ function SwypePayment({
         } else if (prov.length > 0) {
           setSelectedProviderId(prov[0].id);
         }
-        if (accts.length === 0 && step === "deposit") {
+        const hasActiveWallet = accts.some(
+          (a) => a.wallets.some((w) => w.status === "ACTIVE")
+        );
+        if ((accts.length === 0 || !hasActiveWallet) && step === "deposit") {
           setStep("wallet-picker");
         }
       } catch (err) {
@@ -3996,7 +4143,24 @@ function SwypePayment({
     return () => window.clearTimeout(timeoutId);
   }, [step, polling.transfer, transfer, polling.stopPolling, onError]);
   react.useEffect(() => {
-    if (!mobileFlow) return;
+    if (!mobileSetupFlow) return;
+    const polledTransfer = polling.transfer;
+    if (!polledTransfer) return;
+    if (polledTransfer.status !== "AUTHORIZED" && polledTransfer.status !== "COMPLETED") return;
+    polling.stopPolling();
+    setMobileFlow(false);
+    setMobileSetupFlow(false);
+    const finishSetup = async () => {
+      try {
+        await reloadAccounts();
+      } catch {
+      }
+      setStep("deposit");
+    };
+    void finishSetup();
+  }, [mobileSetupFlow, polling, reloadAccounts]);
+  react.useEffect(() => {
+    if (!mobileFlow || mobileSetupFlow) return;
     const polledTransfer = polling.transfer;
     if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
     if (transferSigning.signing) return;
@@ -4014,7 +4178,7 @@ function SwypePayment({
       }
     };
     void sign();
-  }, [mobileFlow, polling.transfer, transferSigning, onError]);
+  }, [mobileFlow, mobileSetupFlow, polling.transfer, transferSigning, onError]);
   react.useEffect(() => {
     if (!mobileFlow) return;
     const transferIdToResume = pollingTransferIdRef.current ?? transfer?.id;
@@ -4062,12 +4226,30 @@ function SwypePayment({
     initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
   }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
   react.useEffect(() => {
-    if (pendingSelectSourceAction && step === "processing") {
+    if (pendingSelectSourceAction && (step === "processing" || step === "setup-status")) {
+      preSelectSourceStepRef.current = step;
       setStep("select-source");
     } else if (!pendingSelectSourceAction && step === "select-source") {
-      setStep("processing");
+      setStep(preSelectSourceStepRef.current ?? "processing");
+      preSelectSourceStepRef.current = null;
     }
   }, [pendingSelectSourceAction, step]);
+  const SETUP_ACTION_LABELS = react.useMemo(() => ({
+    OPEN_PROVIDER: "Connecting wallet",
+    SELECT_SOURCE: "Selecting source",
+    SWITCH_CHAIN: "Switching network",
+    APPROVE_PERMIT2: "Approving tokens",
+    SIGN_PERMIT2: "Signing permit",
+    DEPLOY_SMART_ACCOUNT: "Setting up account",
+    CREATE_SMART_ACCOUNT: "Creating account"
+  }), []);
+  react.useEffect(() => {
+    if (step !== "setup-status") return;
+    const actionType = authExecutor.currentAction?.type;
+    if (!actionType) return;
+    const label = SETUP_ACTION_LABELS[actionType];
+    if (label) setSetupStepLabel(label);
+  }, [step, authExecutor.currentAction, SETUP_ACTION_LABELS]);
   const handleSelectSourceChainChange = react.useCallback(
     (chainName) => {
       setSelectSourceChainName(chainName);
@@ -4081,6 +4263,12 @@ function SwypePayment({
     },
     [selectSourceChoices, selectSourceRecommended]
   );
+  const pendingConnections = react.useMemo(
+    () => accounts.filter(
+      (a) => a.wallets.length > 0 && !a.wallets.some((w) => w.status === "ACTIVE")
+    ),
+    [accounts]
+  );
   const selectedAccount = accounts.find((a) => a.id === selectedAccountId);
   const selectedWallet = selectedAccount?.wallets.find((w) => w.id === selectedWalletId);
   const sourceName = selectedAccount?.name ?? selectedWallet?.chain.name ?? "Wallet";
@@ -4224,7 +4412,10 @@ function SwypePayment({
       await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
       setActiveCredentialId(credentialId);
       window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
-      if (accounts.length === 0) {
+      const hasActiveWallet = accounts.some(
+        (a) => a.wallets.some((w) => w.status === "ACTIVE")
+      );
+      if (accounts.length === 0 || !hasActiveWallet) {
         setStep("wallet-picker");
       } else {
         setStep("deposit");
@@ -4234,19 +4425,22 @@ function SwypePayment({
     } finally {
       setRegisteringPasskey(false);
     }
-  }, [getAccessToken, user, apiBaseUrl, accounts.length]);
+  }, [getAccessToken, user, apiBaseUrl, accounts]);
   const handleSkipPasskey = react.useCallback(() => {
-    if (accounts.length === 0) {
+    const hasActiveWallet = accounts.some(
+      (a) => a.wallets.some((w) => w.status === "ACTIVE")
+    );
+    if (accounts.length === 0 || !hasActiveWallet) {
       setStep("wallet-picker");
     } else {
       setStep("deposit");
     }
-  }, [accounts.length]);
+  }, [accounts]);
   const handleSetupOneTap = react.useCallback(async (limit) => {
     setOneTapLimit(limit);
     setStep("setup-status");
     setSetupComplete(false);
-    setSetupStepLabel("Approving tokens");
+    setSetupStepLabel("Preparing");
     setError(null);
     try {
       const token = await getAccessToken();
@@ -4254,6 +4448,7 @@ function SwypePayment({
       if (!sourceId) {
         throw new Error("No wallet selected for setup.");
       }
+      await updateUserConfig(apiBaseUrl, token, { defaultAllowance: limit });
       const setupAmount = depositAmount ?? MIN_SEND_AMOUNT_USD;
       const t = await createTransfer(apiBaseUrl, token, {
         id: idempotencyKey,
@@ -4271,11 +4466,16 @@ function SwypePayment({
         });
         if (!shouldUseConnector) {
           setMobileFlow(true);
+          setMobileSetupFlow(true);
+          pollingTransferIdRef.current = t.id;
+          polling.startPolling(t.id);
           window.location.href = t.authorizationSessions[0].uri;
+          return;
         } else {
           await authExecutor.executeSession(t);
         }
       }
+      await reloadAccounts();
       setSetupStepLabel(void 0);
       setSetupComplete(true);
     } catch (err) {
@@ -4294,8 +4494,10 @@ function SwypePayment({
     merchantAuthorization,
     useWalletConnector,
     authExecutor,
+    polling,
     onError,
-    depositAmount
+    depositAmount,
+    reloadAccounts
   ]);
   const handleSelectProvider = react.useCallback((providerId) => {
     setSelectedProviderId(providerId);
@@ -4303,12 +4505,23 @@ function SwypePayment({
     setConnectingNewAccount(true);
     setStep("setup");
   }, []);
+  const handleContinueConnection = react.useCallback(
+    (accountId) => {
+      const acct = accounts.find((a) => a.id === accountId);
+      setSelectedAccountId(accountId);
+      setSelectedWalletId(acct?.wallets[0]?.id ?? null);
+      setConnectingNewAccount(false);
+      setStep("setup");
+    },
+    [accounts]
+  );
   const handleNewPayment = react.useCallback(() => {
     setStep("deposit");
     setTransfer(null);
     setError(null);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setMobileSetupFlow(false);
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
@@ -4341,6 +4554,7 @@ function SwypePayment({
     setConnectingNewAccount(false);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setMobileSetupFlow(false);
     setSetupComplete(false);
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
@@ -4357,8 +4571,7 @@ function SwypePayment({
         sending: activeOtpStatus === "sending-code",
         error,
         onBack,
-        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0,
-        onSocialLogin: handleSocialLogin
+        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0
       }
     );
   }
@@ -4405,7 +4618,9 @@ function SwypePayment({
       WalletPickerScreen,
       {
         providers,
+        pendingConnections,
         onSelectProvider: handleSelectProvider,
+        onContinueConnection: handleContinueConnection,
         onBack: () => setStep("create-passkey")
       }
     );
@@ -4544,6 +4759,16 @@ function SwypePayment({
   return null;
 }
 
+exports.IconCircle = IconCircle;
+exports.OutlineButton = OutlineButton;
+exports.PoweredByFooter = PoweredByFooter;
+exports.PrimaryButton = PrimaryButton;
+exports.ScreenHeader = ScreenHeader;
+exports.ScreenLayout = ScreenLayout;
+exports.SelectSourceScreen = SelectSourceScreen;
+exports.SettingsMenu = SettingsMenu;
+exports.Spinner = Spinner;
+exports.StepList = StepList;
 exports.SwypePayment = SwypePayment;
 exports.SwypeProvider = SwypeProvider;
 exports.createPasskeyCredential = createPasskeyCredential;