@swype-org/react-sdk 0.1.25 → 0.1.27

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect } from 'react';
+import { createContext, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { PrivyProvider, usePrivy } from '@privy-io/react-auth';
 import { createConfig, http, WagmiProvider, useConfig, useConnect, useSwitchChain } from 'wagmi';
 import { mainnet, arbitrum, base } from 'wagmi/chains';
@@ -74,6 +74,26 @@ var wagmiConfig = createConfig({
     [base.id]: 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 = createContext(null);
 function SwypeProvider({
   apiBaseUrl,
@@ -84,6 +104,15 @@ function SwypeProvider({
   if (!queryClientRef.current) {
     queryClientRef.current = new QueryClient();
   }
+  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] = useState(null);
   const setDepositAmount = useCallback((amount) => {
     setDepositAmountRaw(amount);
@@ -796,7 +825,7 @@ async function deviceHasPasskey(credentialId) {
           type: "public-key",
           id: base64ToBytes(credentialId)
         }],
-        userVerification: "required",
+        userVerification: "discouraged",
         timeout: 3e4
       }
     });
@@ -2267,17 +2296,15 @@ function SwypePayment({
   const loadingDataRef = useRef(false);
   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([
@@ -2314,7 +2341,7 @@ function SwypePayment({
       cancelled = true;
       loadingDataRef.current = false;
     };
-  }, [authenticated, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId]);
+  }, [authenticated, step, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId]);
   useEffect(() => {
     if (!polling.transfer) return;
     if (polling.transfer.status === "COMPLETED") {
@@ -3024,7 +3051,7 @@ function SwypePayment({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -3037,74 +3064,39 @@ function SwypePayment({
               border: `1px solid ${tokens.border}`,
               lineHeight: 1.7
             },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: { display: "flex", justifyContent: "space-between" },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "To" }),
-                    /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontFamily: '"SF Mono", "Fira Code", monospace',
-                          fontSize: "0.8rem"
-                        },
-                        children: [
-                          destination.address.slice(0, 6),
-                          "...",
-                          destination.address.slice(-4)
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: { display: "flex", justifyContent: "space-between" },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "Token" }),
-                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: destination.token.symbol })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "From" }),
-                    noAccounts ? /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, color: tokens.textMuted }, children: "New account" }) : /* @__PURE__ */ 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__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: noAccounts ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { children: "From" }),
+                  /* @__PURE__ */ 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__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
@@ -3370,10 +3362,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__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsx(
@@ -3387,36 +3378,6 @@ function SwypePayment({
           children: statusLabel
         }
       ),
-      /* @__PURE__ */ jsx(
-        "p",
-        {
-          style: {
-            fontSize: "0.85rem",
-            color: tokens.textSecondary,
-            margin: 0,
-            lineHeight: 1.5
-          },
-          children: statusDescription
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "p",
-        {
-          style: {
-            marginTop: "12px",
-            marginBottom: 0,
-            fontSize: "0.8rem",
-            color: tokens.textSecondary
-          },
-          children: [
-            "Current status: ",
-            /* @__PURE__ */ jsx("strong", { style: { color: tokens.text }, children: transferStatus }),
-            " \xB7 ",
-            "Transfer: ",
-            /* @__PURE__ */ jsx("span", { style: { color: tokens.textMuted }, children: transferIdSuffix })
-          ]
-        }
-      ),
       polling.error && /* @__PURE__ */ jsxs(
         "p",
         {