@getpara/react-sdk-lite 2.8.0 → 2.10.0

package/dist/modal/components/AddFunds/AddFundsProvider.js

@@ -7,73 +7,69 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
 import { contentMotionProps, Heading, InnerStepContainer } from "../common.js";
-import { CpslText } from "@getpara/react-components";
 import { useAddFunds } from "./AddFundsContext.js";
-import { useModalStore } from "../../stores/index.js";
-import { useStore } from "../../../provider/stores/useStore.js";
+import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { motion, AnimatePresence } from "framer-motion";
 import { OnRampProviderButton } from "../OnRampComponents/OnRampProviderButton.js";
 import { useWallet } from "../../../provider/index.js";
 import { EnabledFlow, OnRampPurchaseType } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useEffect } from "react";
 function AddFundsProvider() {
   const para = useInternalClient();
-  const hideWallets = useStore((state) => {
-    var _a;
-    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
-  });
+  const setOnRampStep = useModalStore((state) => state.setOnRampStep);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
-  const { asset, network, fiatQuantity, isProviderAllowed, tab } = useAddFunds();
+  const { asset, network, fiatQuantity, isProviderAllowed, tab, TestModeAlert, isTestMode } = useAddFunds();
   const { data: activeWallet } = useWallet();
+  useEffect(() => {
+    if (Object.values(isProviderAllowed).every((v) => !v)) {
+      setOnRampStep(OnRampStep.SETTINGS);
+    }
+  }, [isProviderAllowed]);
   return /* @__PURE__ */ jsxs(Container, __spreadProps(__spreadValues({}, contentMotionProps), { children: [
     /* @__PURE__ */ jsx(Heading, { children: "Choose Provider" }),
-    /* @__PURE__ */ jsxs($InnerStepContainer, { children: [
-      /* @__PURE__ */ jsxs(NoProviders, { isHidden: Object.values(isProviderAllowed).some((v) => !!v), variant: "bodyM", children: [
-        "No providers are available for this ",
-        hideWallets ? "account" : "wallet"
-      ] }),
-      /* @__PURE__ */ jsx(AnimatePresence, { children: onRampConfig ? onRampConfig.providers.map((id, index) => {
-        return isProviderAllowed[id] ? /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            style: { width: "100%" },
-            layout: true,
-            initial: { opacity: 0, transform: "translateX(25px)" },
-            animate: { opacity: 1, transform: "none" },
-            exit: { opacity: 0, transform: "translateX(-25px)" },
-            transition: { duration: 0.2 },
-            children: /* @__PURE__ */ jsx(
-              OnRampProviderButton,
-              {
-                config: onRampConfig,
-                index,
-                onClick: () => __async(this, null, function* () {
-                  if (!(activeWallet == null ? void 0 : activeWallet.type)) return;
-                  const { onRampPurchase: newOnRampPurchase } = yield para.initiateOnRampTransaction({
-                    walletId: activeWallet.isExternal ? void 0 : activeWallet.id,
-                    externalWalletAddress: activeWallet.isExternal ? activeWallet.id : void 0,
-                    shouldOpenPopup: true,
-                    params: {
-                      type: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL,
-                      walletType: activeWallet.type,
-                      provider: id,
-                      network,
-                      asset,
-                      fiatQuantity,
-                      testMode: onRampConfig == null ? void 0 : onRampConfig.testMode
-                    }
-                  });
-                  setOnRampPurchase(__spreadProps(__spreadValues({}, newOnRampPurchase), { fiat: "USD" }));
-                })
-              },
-              id
-            )
-          },
-          id
-        ) : null;
-      }) : null })
-    ] })
+    /* @__PURE__ */ jsx($InnerStepContainer, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: onRampConfig ? onRampConfig.providers.map((id, index) => {
+      return isProviderAllowed[id] ? /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          style: { width: "100%" },
+          layout: true,
+          initial: { opacity: 0, transform: "translateX(25px)" },
+          animate: { opacity: 1, transform: "none" },
+          exit: { opacity: 0, transform: "translateX(-25px)" },
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ jsx(
+            OnRampProviderButton,
+            {
+              config: onRampConfig,
+              index,
+              onClick: () => __async(this, null, function* () {
+                if (!(activeWallet == null ? void 0 : activeWallet.type)) return;
+                const { onRampPurchase: newOnRampPurchase } = yield para.initiateOnRampTransaction({
+                  walletId: activeWallet.isExternal ? void 0 : activeWallet.id,
+                  externalWalletAddress: activeWallet.isExternal ? activeWallet.id : void 0,
+                  shouldOpenPopup: true,
+                  params: {
+                    type: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL,
+                    walletType: activeWallet.type,
+                    provider: id,
+                    network,
+                    asset: asset || void 0,
+                    fiatQuantity,
+                    testMode: isTestMode
+                  }
+                });
+                setOnRampPurchase(__spreadProps(__spreadValues({}, newOnRampPurchase), { fiat: "USD" }));
+              })
+            },
+            id
+          )
+        },
+        id
+      ) : null;
+    }) : null }) }),
+    TestModeAlert
   ] }));
 }
 const Container = safeStyled(motion.div)`
@@ -84,21 +80,10 @@ const Container = safeStyled(motion.div)`
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  height: 320px;
 `;
 const $InnerStepContainer = safeStyled(InnerStepContainer)`
   position: relative;
 `;
-const NoProviders = safeStyled(CpslText)`
-  width: 100%;
-  text-align: center;
-  visibility: ${({ isHidden }) => isHidden ? "hidden" : "visible"};
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  transition: visibility 0.2s;
-`;
 export {
   AddFundsProvider
 };

package/dist/modal/components/AddFunds/AddFundsReceive.js

@@ -6,10 +6,11 @@ import { CenteredText, InnerStepContainer, QRContainer } from "../common.js";
 import { isMobile } from "@getpara/web-sdk";
 import { useModalStore } from "../../stores/index.js";
 import { useMemo } from "react";
-import { useWallet } from "../../../provider/hooks/index.js";
+import { useAccount, useWallet } from "../../../provider/hooks/index.js";
 import { useAddFunds } from "./AddFundsContext.js";
 import { formatNetworkList } from "../../utils/stringFormatters.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { WalletSelectOld } from "../WalletSelectOld/WalletSelectOld.js";
 const GENERIC_WALLET = {
   EVM: "Ethereum or EVM-based networks",
   SOLANA: "Solana or SVM-based networks",
@@ -20,11 +21,13 @@ function AddFundsReceive() {
   const para = useInternalClient();
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const { data: activeWallet } = useWallet();
+  const { embedded } = useAccount();
   const address = useMemo(
     () => activeWallet ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : "",
     [para, activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (embedded == null ? void 0 : embedded.wallets) && embedded.wallets.length > 1 && /* @__PURE__ */ jsx(WalletSelectOld, { noTitle: true, style: { width: "100%" } }),
     !isMobile() && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(QRContainer, { children: !address ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: address }, address) }) }) }),
     (activeWallet == null ? void 0 : activeWallet.type) && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsxs(CenteredText, { variant: "bodyS", weight: "semiBold", children: [
       "Only send funds on",

package/dist/modal/components/AddFunds/AddFundsSettings.js

@@ -4,163 +4,149 @@ import {
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";
 import { CpslButton, CpslIcon, CpslRow, CpslText } from "@getpara/react-components";
-import {
-  AssetIcon,
-  contentMotionProps,
-  HeaderSelect,
-  HeaderSelectContainer,
-  HeaderSelectItem,
-  NetworkIcon
-} from "../common.js";
+import { AssetIcon, contentMotionProps } from "../common.js";
 import { QuantityInput } from "../QuantityInput.js";
-import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
+import { formatAssetQuantity } from "@getpara/web-sdk";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
-import { useStore } from "../../../provider/stores/useStore.js";
 import { safeStyled, getAssetCode, getNetworkName } from "@getpara/react-common";
-import { NoProviders } from "./common.js";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import { AddFundsAsset } from "./AddFundsAsset.js";
-function NetworkPill({
-  network,
-  gap = "4px",
-  slot,
-  start,
-  fix = false
-}) {
-  return /* @__PURE__ */ jsxs(CpslRow, __spreadProps(__spreadValues({ gap }, slot ? { slot } : {}), { children: [
-    start,
-    /* @__PURE__ */ jsx(NetworkIcon, { network, size: "24px" }),
-    /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", style: fix ? { marginRight: "8px" } : void 0, children: getNetworkName(network) })
-  ] }));
-}
-function AssetPill({ asset, gap = "4px", slot, fix }) {
-  if (!asset) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(CpslRow, __spreadProps(__spreadValues({ gap }, slot ? { slot } : {}), { children: [
-    /* @__PURE__ */ jsx(AssetIcon, { asset, size: "24px" }),
-    /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", style: fix ? { marginRight: "8px" } : void 0, children: getAssetCode(asset) })
-  ] }));
-}
-const NetworkLabel = /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", style: { margin: "0 8px" }, children: "Network" });
+import { WalletSelectOld } from "../WalletSelectOld/WalletSelectOld.js";
+import { useAccount } from "../../../provider/index.js";
+import { useDebounce } from "../../hooks/useDebounce.js";
+import { useAssetInfo } from "../../../provider/hooks/utils/useAssetInfo.js";
+import { AddFundsNetwork } from "./AddFundsNetwork.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 function AddFundsSettings() {
-  const isPresent = useIsPresent();
   const hideWallets = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
   });
+  const assetInfo = useAssetInfo();
+  const isPresent = useIsPresent();
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
+  const { embedded } = useAccount();
   const {
     assets,
-    networks,
+    narrowedNetworks,
     asset,
     setAsset,
     network,
     setNetwork,
     fiatQuantity,
     setFiatQuantity,
-    onRampConfig,
-    activeWallet,
     isProviderAllowed,
-    tab
+    settingsStep,
+    TestModeAlert
   } = useAddFunds();
   const [value, setValue] = useState(parseFloat(fiatQuantity || "25.00").toFixed(2));
-  const narrowedNetworks = useMemo(() => {
-    return !asset ? networks : getOnRampNetworks(onRampConfig.assetInfo, {
-      walletType: activeWallet == null ? void 0 : activeWallet.type,
-      allowed: onRampConfig.allowedAssets ? Object.entries(onRampConfig.allowedAssets).filter(([_, value2]) => value2 === true || value2.includes(asset)).map(([key]) => key) : void 0,
-      assets: [asset],
-      providers: onRampConfig.providers,
-      action: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL
-    });
-  }, [networks, network, asset, activeWallet == null ? void 0 : activeWallet.type, onRampConfig.providers, tab]);
-  const content = useMemo(() => {
-    if (!!asset && Object.values(isProviderAllowed).every((v) => !v) || assets.length === 0) {
-      return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: /* @__PURE__ */ jsxs(NoProviders, { isHidden: Object.values(isProviderAllowed).some((v) => !!v), variant: "bodyM", children: [
-        "No providers are available for this ",
-        hideWallets ? "account" : "wallet"
-      ] }) }), "noProviders");
+  const dbValue = useDebounce(value, 200);
+  const assetQuantity = useMemo(() => {
+    var _a, _b, _c;
+    if (!asset) {
+      return -1;
     }
-    return !!asset ? /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: assets.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(CpslRow, { children: [
-        /* @__PURE__ */ jsx(HeaderSelectContainer, { children: assets.length > 1 ? /* @__PURE__ */ jsxs(
-          HeaderSelect,
-          {
-            selectedValue: asset,
-            onCpslSelectValueChange: (e) => {
-              setAsset(e.detail);
-            },
-            showFormattedSelectedItem: true,
-            placeholder: "Choose asset...",
-            anchorElId: "inputContainer",
-            $width: 160,
-            autoWidth: true,
-            selectedItemVariant: "bodyXS",
-            children: [
-              asset && /* @__PURE__ */ jsx(AssetPill, { asset, slot: "selected-item" }),
-              assets.map((a) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: a, children: /* @__PURE__ */ jsx(AssetPill, { gap: "8px", asset: a }) }, a))
-            ]
-          }
-        ) : /* @__PURE__ */ jsx(AssetPill, { asset, fix: true }) }),
-        /* @__PURE__ */ jsx(HeaderSelectContainer, { children: narrowedNetworks.length > 1 ? /* @__PURE__ */ jsxs(
-          HeaderSelect,
-          {
-            selectedValue: network,
-            onCpslSelectValueChange: (e) => {
-              setNetwork(e.detail);
-            },
-            showFormattedSelectedItem: true,
-            placeholder: "Choose network...",
-            $width: 160,
-            autoWidth: true,
-            selectedItemVariant: "bodyXS",
-            children: [
-              network && /* @__PURE__ */ jsx(NetworkPill, { network, start: NetworkLabel, slot: "selected-item" }),
-              narrowedNetworks.map((n) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: n, children: /* @__PURE__ */ jsx(NetworkPill, { gap: "8px", network: n }) }, n))
-            ]
-          }
-        ) : network ? /* @__PURE__ */ jsx(NetworkPill, { network, start: NetworkLabel, fix: true }) : null })
-      ] }),
-      /* @__PURE__ */ jsxs(CpslRow, { col: true, gap: "16px", children: [
-        /* @__PURE__ */ jsx(QuantityInput, { value, onChange: setValue, symbol: "$" }),
-        /* @__PURE__ */ jsx(CpslRow, { style: { width: "100%" }, children: ["25", "50", "100"].map((quantity) => {
-          return /* @__PURE__ */ jsxs(PresetButton, { fullWidth: true, variant: "secondary", onClick: () => setValue(`${quantity}.00`), children: [
-            "$",
-            quantity
-          ] }, quantity);
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        CpslButton,
-        {
-          fullWidth: true,
-          disabled: value === "",
-          onClick: () => {
-            setFiatQuantity(value != null ? value : void 0);
-            setOnRampStep(OnRampStep.PROVIDER);
-          },
-          children: [
-            "Continue",
-            /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
-          ]
-        }
-      )
-    ] }) }), "quantity") : /* @__PURE__ */ jsx(AssetContainer, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: /* @__PURE__ */ jsx(AddFundsAsset, {}) }), "asset");
-  }, [asset, network, assets, narrowedNetworks, isProviderAllowed, isPresent, value]);
-  useEffect(() => {
-    if (!network || !narrowedNetworks.includes(network)) {
-      setNetwork(narrowedNetworks[0]);
+    const assetValue = (_c = (_b = (_a = assetInfo.data) == null ? void 0 : _a[asset]) == null ? void 0 : _b.price) == null ? void 0 : _c.value;
+    const dbValueFloat = !dbValue || isNaN(parseFloat(dbValue)) ? null : parseFloat(dbValue);
+    if (!assetValue || !asset || !dbValueFloat) {
+      return -1;
     }
-  }, [narrowedNetworks, network, tab]);
-  useEffect(() => {
-    if (!!asset && !assets.includes(asset)) {
-      setAsset(assets[0]);
+    if (["TETHER", "USDC", "CUSD"].includes(asset)) {
+      return dbValueFloat;
     }
-  }, [assets, asset, tab]);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: content });
+    return dbValueFloat / assetValue;
+  }, [asset, assetInfo, dbValue]);
+  const { key, Content } = useMemo(() => {
+    switch (settingsStep) {
+      case "NO_PROVIDERS":
+        return {
+          key: "noProviders",
+          Content: /* @__PURE__ */ jsxs(CpslText, { variant: "bodyM", color: "contrast", align: "center", children: [
+            "No providers are available for this ",
+            hideWallets ? "account" : "wallet"
+          ] })
+        };
+      case "FORM": {
+        return {
+          key: "form",
+          Content: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(CpslRow, { col: true, gap: "8px", children: [
+              /* @__PURE__ */ jsx(QuantityInput, { value, onChange: setValue, symbol: "$" }),
+              /* @__PURE__ */ jsxs(
+                AssetButton,
+                {
+                  variant: "tertiary",
+                  onClick: network && (assets.length > 1 || narrowedNetworks.length > 1) ? () => {
+                    switch (true) {
+                      case assets.length === 1:
+                        setNetwork(null);
+                        break;
+                      default:
+                        setNetwork(null);
+                        setAsset(null);
+                    }
+                  } : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx(AssetIcon, { asset, size: "24px" }),
+                    /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "contrast", children: assetQuantity > 0 ? formatAssetQuantity({ quantity: assetQuantity, symbol: getAssetCode(asset) }) : getAssetCode(asset) }),
+                    /* @__PURE__ */ jsx(CpslIcon, { icon: "chevronRight", size: "24px", color: "var(--cpsl-color-text-contrast)" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(CpslText, { variant: "bodyXS", color: "secondary", children: [
+                "Network: ",
+                getNetworkName(network)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              CpslButton,
+              {
+                fullWidth: true,
+                disabled: value === "",
+                onClick: () => {
+                  setFiatQuantity(value != null ? value : void 0);
+                  setOnRampStep(OnRampStep.PROVIDER);
+                },
+                children: [
+                  "Continue",
+                  /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
+                ]
+              }
+            )
+          ] })
+        };
+      }
+      case "ASSETS":
+        return {
+          key: "assets",
+          Content: /* @__PURE__ */ jsx(AddFundsAsset, {})
+        };
+      case "NETWORKS":
+        return {
+          key: "networks",
+          Content: /* @__PURE__ */ jsx(AddFundsNetwork, {})
+        };
+      default: {
+        return {
+          key: "default",
+          Content: "empty"
+        };
+      }
+    }
+  }, [asset, network, assets, narrowedNetworks, isProviderAllowed, assetQuantity, isPresent, value, hideWallets]);
+  const isWalletSelectVisible = useMemo(() => {
+    return settingsStep && ["FORM", "NO_PROVIDERS"].includes(settingsStep) && (embedded == null ? void 0 : embedded.wallets) && embedded.wallets.length > 1;
+  }, [embedded, settingsStep]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      isWalletSelectVisible && /* @__PURE__ */ jsx(WalletSelectOld, { noTitle: true, style: { width: "100%" } }),
+      /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: Content }), key)
+    ] }) }),
+    TestModeAlert
+  ] });
 }
 const Container = safeStyled(motion.div)`
   width: 100%;
@@ -171,25 +157,22 @@ const Container = safeStyled(motion.div)`
   align-items: center;
   gap: 32px;
   position: relative;
-  height: 320px;
   ${({ isPresent }) => isPresent ? "transform: none !important;" : ""};
 
   & > * {
     width: 100%;
   }
 `;
-const AssetContainer = safeStyled(Container)`
-  gap: 8px;
-`;
-const PresetButton = safeStyled(CpslButton)`
-  --button-color: var(--cpsl-color-text-contrast);
-  --button-font-size: 24px;
-  --button-secondary-background-color: var(--cpsl-color-background-8);
-  --button-secondary-border-color: var(--cpsl-color-background-8);
-  --button-secondary-hover-color: var(--cpsl-color-text-contrast);
-  --button-secondary-hover-background-color: var(--cpsl-color-background-16);
-  --button-secondary-hover-border-color: var(--cpsl-color-background-16);
-  flex: 1;
+const AssetButton = safeStyled(CpslButton)`
+  --button-border-radius-top-start: 48px;
+  --button-border-radius-top-end: 48px;
+  --button-border-radius-bottom-start: 48px;
+  --button-border-radius-bottom-end: 48px;
+  --button-padding-top: 8px;
+  --button-padding-bottom: 8px;
+  --button-padding-start: 8px;
+  --button-padding-end: 8px;
+  --button-gap: 4px;
 `;
 export {
   AddFundsSettings

package/dist/modal/components/AuthInput/AuthInput.js

@@ -199,7 +199,18 @@ const AuthInput = ({
                   }
                 )
               ] }),
-              identifier && !disableSubmitButton && /* @__PURE__ */ jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isPending, onClick: onSubmit, children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowNarrow" }) })
+              identifier && !disableSubmitButton && /* @__PURE__ */ jsx(
+                CpslButton,
+                {
+                  slot: "end",
+                  size: "small",
+                  fullWidth: true,
+                  disabled: isPending,
+                  onClick: onSubmit,
+                  "data-testid": "para-auth-submit",
+                  children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowNarrow" })
+                }
+              )
             ]
           },
           "email"

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -44,7 +44,7 @@ const AuthMainStepContent = ({
     const methods = [];
     if (isFarcasterMiniApp) {
       methods.push([
-        /* @__PURE__ */ jsxs(FarcasterButton, { variant: "primary", fullWidth: true, onClick: connectFarcasterMiniApp, children: [
+        /* @__PURE__ */ jsxs(FarcasterButton, { variant: "primary", fullWidth: true, onClick: connectFarcasterMiniApp, "data-testid": "para-farcaster-connect", children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "farcaster" }),
           "Continue with Farcaster"
         ] }),
@@ -73,11 +73,21 @@ const AuthMainStepContent = ({
           const icons = [];
           oAuthMethods == null ? void 0 : oAuthMethods.forEach((method) => icons.push(ACCOUNT_TYPES[method][useBrandedLogos ? "iconBranded" : "icon"]));
           methods.push([
-            /* @__PURE__ */ jsxs(CondensedButton, { onClick: handleCondensedAuthClick, variant: "tertiary", fullWidth: true, children: [
-              /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),
-              signUpOrLogInTitle,
-              /* @__PURE__ */ jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), $isDark: useDarkLogos })
-            ] }, "authCondensed"),
+            /* @__PURE__ */ jsxs(
+              CondensedButton,
+              {
+                onClick: handleCondensedAuthClick,
+                variant: "tertiary",
+                fullWidth: true,
+                "data-testid": "para-auth-condensed",
+                children: [
+                  /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),
+                  signUpOrLogInTitle,
+                  /* @__PURE__ */ jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), $isDark: useDarkLogos })
+                ]
+              },
+              "authCondensed"
+            ),
             layout
           ]);
           break;
@@ -92,11 +102,21 @@ const AuthMainStepContent = ({
           const icons = [];
           wallets == null ? void 0 : wallets.forEach((wallet) => icons.push(wallet.iconUrl));
           methods.push([
-            /* @__PURE__ */ jsxs(CondensedButton, { onClick: handleCondensedExternalClick, variant: "tertiary", fullWidth: true, children: [
-              /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),
-              connectWalletTitle,
-              /* @__PURE__ */ jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), $isDark: useDarkLogos })
-            ] }, "authCondensed"),
+            /* @__PURE__ */ jsxs(
+              CondensedButton,
+              {
+                onClick: handleCondensedExternalClick,
+                variant: "tertiary",
+                fullWidth: true,
+                "data-testid": "para-wallet-condensed",
+                children: [
+                  /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),
+                  connectWalletTitle,
+                  /* @__PURE__ */ jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), $isDark: useDarkLogos })
+                ]
+              },
+              "authCondensed"
+            ),
             layout
           ]);
           break;
@@ -122,6 +142,7 @@ const AuthMainStepContent = ({
           e.preventDefault();
           createGuestWallets();
         },
+        "data-testid": "para-guest-continue",
         children: "Continue as Guest"
       }
     )

package/dist/modal/components/BiometricCreationStep/BiometricCreationStep.js

@@ -37,24 +37,33 @@ const BiometricCreationStep = () => {
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: isBoth ? `Choose a ${isPIN ? "PIN" : "password"} or set up a passkey` : "Your Passkey keeps your account safe." })
     ] }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      (signupState == null ? void 0 : signupState.isPasskeySupported) ? /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSKEY), children: [
+      (signupState == null ? void 0 : signupState.isPasskeySupported) ? /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSKEY), "data-testid": "para-create-passkey", children: [
         /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
         isBoth ? "Create Passkey" : "Create"
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }),
-        /* @__PURE__ */ jsx(QRContainer, { children: !(signupState == null ? void 0 : signupState.passkeyUrl) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: signupState.passkeyUrl }) }),
-        /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
+        /* @__PURE__ */ jsx(QRContainer, { children: !(signupState == null ? void 0 : signupState.passkeyUrl) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: signupState.passkeyUrl, "data-testid": "para-passkey-qr" }) }),
+        /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, "data-testid": "para-passkey-copy-link", children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
           isCopied ? "Copied" : "Copy Link"
         ] })
       ] }),
       isBoth && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
-        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD), disabled: !!authStepRoute, children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
-          "Choose ",
-          isPIN ? "PIN" : "Password"
-        ] })
+        /* @__PURE__ */ jsxs(
+          CpslButton,
+          {
+            fullWidth: true,
+            onClick: onClick(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD),
+            disabled: !!authStepRoute,
+            "data-testid": "para-choose-password",
+            children: [
+              /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
+              "Choose ",
+              isPIN ? "PIN" : "Password"
+            ]
+          }
+        )
       ] })
     ] })
   ] });