@swype-org/react-sdk 0.1.25 → 0.1.27

package/dist/index.cjs

@@ -77,6 +77,26 @@ var wagmiConfig = wagmi.createConfig({
     [chains.base.id]: wagmi.http()
   }
 });
+var PRIVY_MODAL_CENTER_CSS = `
+@media (max-width: 440px) {
+  #privy-dialog [data-headlessui-state] {
+    position: static !important;
+    bottom: auto !important;
+    margin: auto !important;
+    width: 360px !important;
+    max-width: calc(100vw - 32px) !important;
+    box-shadow: 0px 8px 36px rgba(55, 65, 81, 0.15) !important;
+    border-radius: var(--privy-border-radius-lg) !important;
+    transform: none !important;
+    transition: opacity 100ms ease-in !important;
+  }
+  #privy-dialog [data-headlessui-state].entering,
+  #privy-dialog [data-headlessui-state].leaving {
+    opacity: 0 !important;
+    transform: none !important;
+  }
+}
+`;
 var SwypeContext = react.createContext(null);
 function SwypeProvider({
   apiBaseUrl,
@@ -87,6 +107,15 @@ function SwypeProvider({
   if (!queryClientRef.current) {
     queryClientRef.current = new reactQuery.QueryClient();
   }
+  react.useEffect(() => {
+    const style = document.createElement("style");
+    style.setAttribute("data-swype", "privy-modal-center");
+    style.textContent = PRIVY_MODAL_CENTER_CSS;
+    document.head.appendChild(style);
+    return () => {
+      style.remove();
+    };
+  }, []);
   const [depositAmount, setDepositAmountRaw] = react.useState(null);
   const setDepositAmount = react.useCallback((amount) => {
     setDepositAmountRaw(amount);
@@ -799,7 +828,7 @@ async function deviceHasPasskey(credentialId) {
           type: "public-key",
           id: base64ToBytes(credentialId)
         }],
-        userVerification: "required",
+        userVerification: "discouraged",
         timeout: 3e4
       }
     });
@@ -2270,17 +2299,15 @@ function SwypePayment({
   const loadingDataRef = react.useRef(false);
   react.useEffect(() => {
     if (!authenticated) return;
+    if (step === "login") return;
     if (accounts.length > 0 || loadingDataRef.current) return;
+    if (!activeCredentialId) return;
     let cancelled = false;
     loadingDataRef.current = true;
     const load = async () => {
       setLoadingData(true);
       setError(null);
       try {
-        if (!activeCredentialId) {
-          setStep("register-passkey");
-          return;
-        }
         const token = await getAccessToken();
         if (!token) throw new Error("Not authenticated");
         const [prov, accts, chn] = await Promise.all([
@@ -2317,7 +2344,7 @@ function SwypePayment({
       cancelled = true;
       loadingDataRef.current = false;
     };
-  }, [authenticated, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId]);
+  }, [authenticated, step, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId]);
   react.useEffect(() => {
     if (!polling.transfer) return;
     if (polling.transfer.status === "COMPLETED") {
@@ -3027,7 +3054,7 @@ function SwypePayment({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
@@ -3040,74 +3067,39 @@ function SwypePayment({
               border: `1px solid ${tokens.border}`,
               lineHeight: 1.7
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  style: { display: "flex", justifyContent: "space-between" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "To" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontFamily: '"SF Mono", "Fira Code", monospace',
-                          fontSize: "0.8rem"
-                        },
-                        children: [
-                          destination.address.slice(0, 6),
-                          "...",
-                          destination.address.slice(-4)
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  style: { display: "flex", justifyContent: "space-between" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Token" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: destination.token.symbol })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "From" }),
-                    noAccounts ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: tokens.textMuted }, children: "New account" }) : /* @__PURE__ */ jsxRuntime.jsx(
-                      AccountDropdown,
-                      {
-                        accounts,
-                        selectedAccountId,
-                        selectedWalletId,
-                        onSelect: (id) => {
-                          setSelectedAccountId(id);
-                          setSelectedWalletId(null);
-                          setConnectingNewAccount(false);
-                          setSelectedProviderId(null);
-                        },
-                        onWalletSelect: (accountId, walletId) => {
-                          setSelectedAccountId(accountId);
-                          setSelectedWalletId(walletId);
-                          setConnectingNewAccount(false);
-                          setSelectedProviderId(null);
-                        }
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: noAccounts ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "From" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    AccountDropdown,
+                    {
+                      accounts,
+                      selectedAccountId,
+                      selectedWalletId,
+                      onSelect: (id) => {
+                        setSelectedAccountId(id);
+                        setSelectedWalletId(null);
+                        setConnectingNewAccount(false);
+                        setSelectedProviderId(null);
+                      },
+                      onWalletSelect: (accountId, walletId) => {
+                        setSelectedAccountId(accountId);
+                        setSelectedWalletId(walletId);
+                        setConnectingNewAccount(false);
+                        setSelectedProviderId(null);
                       }
-                    )
-                  ]
-                }
-              )
-            ]
+                    }
+                  )
+                ] })
+              }
+            )
           }
         ),
         noAccounts && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
@@ -3373,10 +3365,9 @@ function SwypePayment({
       }
     };
     const regMsg = getRegistrationMessage();
-    const transferStatus = getDisplayTransferStatus(polling.transfer, transfer);
-    const transferIdSuffix = getTransferIdSuffix(polling.transfer, transfer);
-    const statusLabel = creatingTransfer ? "Creating transfer..." : mobileFlow ? "Waiting for authorization..." : authExecutor.executing && regMsg.label ? regMsg.label : authExecutor.executing ? "Authorizing..." : transferSigning.signing ? "Preparing transfer..." : polling.isPolling ? "Processing payment..." : "Please wait...";
-    const statusDescription = creatingTransfer ? "Setting up your transfer..." : mobileFlow ? "Complete the authorization in your wallet app, then return here." : authExecutor.executing && regMsg.description ? regMsg.description : authExecutor.executing ? "Complete the wallet prompts to authorize this payment." : transferSigning.signing ? "Waiting for backend to prepare your transfer payload..." : polling.isPolling ? "Your payment is being processed. This usually takes a few moments." : "Hang tight...";
+    getDisplayTransferStatus(polling.transfer, transfer);
+    getTransferIdSuffix(polling.transfer, transfer);
+    const statusLabel = creatingTransfer ? "Creating Transfer" : mobileFlow ? "Waiting for Authorization" : authExecutor.executing && regMsg.label ? regMsg.label : authExecutor.executing ? "Authorizing" : transferSigning.signing ? "Sending transfer" : polling.isPolling ? "Transfer Sent" : "Please wait...";
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3390,36 +3381,6 @@ function SwypePayment({
           children: statusLabel
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "p",
-        {
-          style: {
-            fontSize: "0.85rem",
-            color: tokens.textSecondary,
-            margin: 0,
-            lineHeight: 1.5
-          },
-          children: statusDescription
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "p",
-        {
-          style: {
-            marginTop: "12px",
-            marginBottom: 0,
-            fontSize: "0.8rem",
-            color: tokens.textSecondary
-          },
-          children: [
-            "Current status: ",
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: tokens.text }, children: transferStatus }),
-            " \xB7 ",
-            "Transfer: ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: tokens.textMuted }, children: transferIdSuffix })
-          ]
-        }
-      ),
       polling.error && /* @__PURE__ */ jsxRuntime.jsxs(
         "p",
         {