@getpara/react-sdk 2.0.0-alpha.10 → 2.0.0-alpha.12

package/dist/modal/ParaModal.js

@@ -15,7 +15,7 @@ import { DEFAULTS } from "./constants/defaults.js";
 import { useGoBack } from "./hooks/useGoBack.js";
 import styled from "styled-components";
 import { hasEmbeddedAuth, hasExternalWallet } from "./utils/authLayoutHelpers.js";
-import { useModal, useWalletState } from "../provider/index.js";
+import { useAccount, useModal, useWalletState } from "../provider/index.js";
 import { useInternalClient } from "../provider/hooks/utils/useInternalClient.js";
 import { useExternalWallets } from "../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../provider/stores/useStore.js";
@@ -26,13 +26,14 @@ defineCustomElements();
 const ParaModal = forwardRef((props, ref) => {
   const storedModalConfig = useStore((state) => state.modalConfig);
   const modalContentRef = useRef(null);
+  const refs = useModalStore((state) => state.refs);
+  const flow = useModalStore((state) => state.flow);
   const currentStep = useModalStore((state) => state.step);
   const setAuthState = useModalStore((state) => state.setAuthState);
   const setOnModalStepChange = useModalStore((state) => state.setOnModalStepChange);
   const setStep = useModalStore((state) => state.setStep);
   const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
   const setFlow = useModalStore((state) => state.setFlow);
-  const setIsFullyLoggedIn = useModalStore((state) => state.setIsFullyLoggedIn);
   const goBack = useGoBack();
   const setAuthLayout = useModalStore((state) => state.setAuthLayout);
   const storedAuthLayout = useModalStore((state) => state.authLayout);
@@ -44,6 +45,7 @@ const ParaModal = forwardRef((props, ref) => {
   const { setSelectedWallet, updateSelectedWallet } = useWalletState();
   const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
   const { signUpOrLogIn, isCreateGuestWalletsPending } = useAuthActions();
+  const { data: account } = useAccount();
   const [isModalMounted, setIsModalMounted] = useState(false);
   const [isInit, setIsInit] = useState(false);
   const externalWallets = useStore((state) => state.externalWallets);
@@ -106,12 +108,10 @@ const ParaModal = forwardRef((props, ref) => {
       case isGuest:
         setFlow("guest");
         setStep(isCreateGuestWalletsPending ? ModalStep.AWAITING_GUEST_WALLET_CREATION : ModalStep.ACCOUNT_MAIN);
-        setIsFullyLoggedIn(true);
         break;
       case isAccount:
         setFlow("account");
         setStep(ModalStep.ACCOUNT_MAIN);
-        setIsFullyLoggedIn(true);
         break;
       default:
         if (currentStep !== ModalStep.AUTH_MAIN && currentStep !== ModalStep.SECRET) {
@@ -122,7 +122,6 @@ const ParaModal = forwardRef((props, ref) => {
         }
         yield disconnectExternalWallet();
         setSelectedWallet({ id: void 0, type: void 0 });
-        setIsFullyLoggedIn(false);
         if (shouldAutoLogin) {
           if (defaultAuthIdentifier && ((_a2 = para.authInfo) == null ? void 0 : _a2.identifier) !== defaultAuthIdentifier) {
             const number = parsePhoneNumberFromString(defaultAuthIdentifier);
@@ -178,6 +177,11 @@ const ParaModal = forwardRef((props, ref) => {
   useEffect(() => {
     updateSelectedWallet();
   }, [para]);
+  useEffect(() => {
+    if (bareModal && account && !account.isConnected && !["signup", "login"].includes(flow != null ? flow : "") && refs.currentStep.current !== ModalStep.AUTH_MAIN) {
+      setStep(ModalStep.AUTH_MAIN);
+    }
+  }, [bareModal, flow, account]);
   const handleClose = () => {
     closeModal();
     onClose == null ? void 0 : onClose();

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

@@ -144,9 +144,10 @@ const GuestMode = styled.a`
   width: 100%;
   height: 50px;
   color: ${({ isDark }) => isDark ? "white" : "black"};
-  text-decoration: underline;
+  text-decoration: none;
   font-size: 16px;
   font-weight: 500;
+  font-family: var(--cpsl-font-family);
 
   &:hover {
     text-decoration: underline;

package/dist/modal/components/AuthOptions/AuthOptions.js

@@ -7,8 +7,7 @@ import { OAuth } from "../OAuth/OAuth.js";
 import { AuthInput } from "../AuthInput/AuthInput.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useModalStore } from "../../stores/index.js";
-import { CpslIcon } from "@getpara/react-components";
-import { useStore } from "../../../provider/stores/useStore.js";
+import { CpslIcon, CpslText } from "@getpara/react-components";
 const AuthOptions = ({
   oAuthMethods,
   disableEmailLogin,
@@ -16,10 +15,6 @@ const AuthOptions = ({
   isGuestModeEnabled = false
 }) => {
   const { wallets } = useExternalWallets();
-  const isDark = useStore((state) => {
-    var _a, _b;
-    return ((_b = (_a = state.modalConfig) == null ? void 0 : _a.theme) == null ? void 0 : _b.mode) === "dark";
-  });
   const guestAddFundsTab = useModalStore((state) => state.guestAddFundsTab);
   const Content = useMemo(() => {
     const Methods = [];
@@ -32,12 +27,14 @@ const AuthOptions = ({
     return /* @__PURE__ */ jsx(Fragment, { children: Methods });
   }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets]);
   return /* @__PURE__ */ jsxs(Container, { children: [
-    guestAddFundsTab && /* @__PURE__ */ jsxs(CompleteAccountSetup, { isDark, children: [
-      /* @__PURE__ */ jsx(CpslIcon, { icon: "stars02", size: "16px" }),
-      "Complete account setup to",
-      " ",
-      guestAddFundsTab === "BUY" ? "buy assets" : guestAddFundsTab === "WITHDRAW" ? "sell assets" : "continue",
-      "."
+    guestAddFundsTab && /* @__PURE__ */ jsxs(CompleteAccountSetup, { children: [
+      /* @__PURE__ */ jsx(CompleteAccountIcon, { icon: "stars02", size: "16px" }),
+      /* @__PURE__ */ jsxs(CpslText, { variant: "bodyS", weight: "bold", children: [
+        "Complete account setup to",
+        " ",
+        guestAddFundsTab === "BUY" ? "buy assets" : guestAddFundsTab === "WITHDRAW" ? "sell assets" : "continue",
+        "."
+      ] })
     ] }),
     Content
   ] });
@@ -52,9 +49,11 @@ const CompleteAccountSetup = styled.div`
   align-items: center;
   justify-content: center;
   gap: 4px;
-  color: ${({ isDark }) => isDark ? "white" : "black"};
-  font-weight: 500;
-  font-size: 14px;
+  color: var(--cpsl-color-text-primary);
+  margin-bottom: 8px;
+`;
+const CompleteAccountIcon = styled(CpslIcon)`
+  --icon-color: var(--cpsl-color-text-primary);
 `;
 export {
   AuthOptions

package/dist/modal/components/Controls/Controls.js

@@ -9,6 +9,7 @@ import { AccountSelect, ChainSelect } from "./Selects.js";
 import { ModalStep } from "../../utils/steps.js";
 import { HeaderButton } from "@getpara/react-common";
 import { useStore } from "../../../provider/stores/useStore.js";
+import { useAccount } from "../../../provider/index.js";
 const Controls = ({ onClose }) => {
   const bareModal = useStore((state) => {
     var _a;
@@ -16,8 +17,8 @@ const Controls = ({ onClose }) => {
   });
   const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
   const step = useModalStore((state) => state.step);
-  const isFullyLoggedIn = useModalStore((state) => state.isFullyLoggedIn);
   const goBack = useGoBack();
+  const { data: account } = useAccount();
   const shouldShowSelects = [
     ModalStep.ACCOUNT_MAIN,
     ModalStep.CHAIN_SWITCH,
@@ -40,7 +41,7 @@ const Controls = ({ onClose }) => {
         children: /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
       }
     ),
-    /* @__PURE__ */ jsx(MiddleContainer, { children: shouldShowSelects && isFullyLoggedIn && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MiddleContainer, { children: shouldShowSelects && (account == null ? void 0 : account.isConnected) && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ChainSelect, {}),
       /* @__PURE__ */ jsx(AccountSelect, {})
     ] }) }),

package/dist/modal/components/LoginDoneStep/LoginDoneStep.js

@@ -6,16 +6,29 @@ import { Heading, HeroIcon, StepContainer } from "../common.js";
 import { ExternalWalletCard, WalletCard, WalletCards } from "../WalletCard/WalletCard.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useStore } from "../../../provider/stores/useStore.js";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
 const LoginDoneStep = ({ onClose }) => {
   var _a, _b;
   const para = useInternalClient();
+  const bareModal = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.bareModal;
+  });
+  const setStep = useModalStore((state) => state.setStep);
+  const setFlow = useModalStore((state) => state.setFlow);
   const hideWallets = useStore((state) => {
     var _a2;
     return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
   });
   useEffect(() => {
     setTimeout(() => {
-      onClose();
+      if (bareModal) {
+        setFlow("account");
+        setStep(ModalStep.ACCOUNT_MAIN);
+      } else {
+        onClose();
+      }
     }, 1600);
   }, []);
   return /* @__PURE__ */ jsxs(StepContainer, { children: [

package/dist/modal/components/WalletCreationDoneStep/WalletCreationDoneStep.js

@@ -19,7 +19,12 @@ const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
   });
+  const bareModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
+  });
   const setStep = useModalStore((state) => state.setStep);
+  const setFlow = useModalStore((state) => state.setFlow);
   const isLogin = useModalStore((state) => state.isLogin());
   const twoFactorStatus = useModalStore((state) => state.twoFactorStatus);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
@@ -30,7 +35,12 @@ const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
     if (isLogin) {
       setStep(ModalStep.LOGIN_DONE);
     } else {
-      onClose();
+      if (bareModal) {
+        setFlow("account");
+        setStep(ModalStep.ACCOUNT_MAIN);
+      } else {
+        onClose();
+      }
     }
   };
   const handleNext = () => __async(void 0, null, function* () {

package/dist/modal/stores/modal/actions.js

@@ -64,7 +64,7 @@ const getActions = (set, get) => ({
     if ([ModalStep.ADD_FUNDS_BUY, ModalStep.ADD_FUNDS_WITHDRAW].includes(currentStep) && onRampStep > 0) {
       return true;
     }
-    return !!flow && !!getPreviousStep(flow, currentStep);
+    return !!getPreviousStep(flow, currentStep);
   },
   setFlow: (flow) => set({ flow }),
   isLogin: () => get().flow === "login",

package/dist/provider/hooks/utils/useEventListeners.js

@@ -103,7 +103,7 @@ const useEventListeners = ({
       updateSelectedWallet();
       onGuestWalletsCreated == null ? void 0 : onGuestWalletsCreated(event);
     },
-    [onGuestWalletsCreated]
+    [queryClient, updateSelectedWallet, onGuestWalletsCreated]
   );
   useEffect(() => {
     window.addEventListener(ParaEvent.LOGIN_EVENT, loginListener);

package/dist/provider/providers/AuthProvider.js

@@ -69,7 +69,12 @@ function AuthProvider({
   const para = useInternalClient();
   const onLoginRef = useStore((state) => state.onLoginRef);
   const setIsOpen = useStore((state) => state.setIsOpen);
+  const bareModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
+  });
   const refs = useModalStore((state) => state.refs);
+  const setFlow = useModalStore((state) => state.setFlow);
   const currentStep = useModalStore((state) => state.step);
   const setStep = useModalStore((state) => state.setStep);
   const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
@@ -416,7 +421,12 @@ function AuthProvider({
     }
   }), [para, isRecoverySecretStepEnabled, overrides == null ? void 0 : overrides.createWallets]);
   const createGuestWallets = () => {
-    setIsOpen(false);
+    if (bareModal) {
+      setFlow("guest");
+      setStep(ModalStep.AWAITING_GUEST_WALLET_CREATION);
+    } else {
+      setIsOpen(false);
+    }
     mutateCreateGuestWallets(void 0, {
       onSuccess: () => {
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-sdk",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,9 +15,9 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-common": "2.0.0-alpha.10",
-    "@getpara/react-components": "2.0.0-alpha.10",
-    "@getpara/web-sdk": "2.0.0-alpha.10",
+    "@getpara/react-common": "2.0.0-alpha.12",
+    "@getpara/react-components": "2.0.0-alpha.12",
+    "@getpara/web-sdk": "2.0.0-alpha.12",
     "date-fns": "^3.6.0",
     "framer-motion": "11.3.28",
     "libphonenumber-js": "^1.11.1",
@@ -33,9 +33,9 @@
     "cli": "node ./dist/cli/cli.mjs"
   },
   "devDependencies": {
-    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.10",
-    "@getpara/evm-wallet-connectors": "2.0.0-alpha.10",
-    "@getpara/solana-wallet-connectors": "2.0.0-alpha.10",
+    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.12",
+    "@getpara/evm-wallet-connectors": "2.0.0-alpha.12",
+    "@getpara/solana-wallet-connectors": "2.0.0-alpha.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -48,9 +48,9 @@
     "wagmi": "^2.14.16"
   },
   "peerDependencies": {
-    "@getpara/cosmos-wallet-connectors": "^2.0.0-alpha.10",
-    "@getpara/evm-wallet-connectors": "^2.0.0-alpha.10",
-    "@getpara/solana-wallet-connectors": "^2.0.0-alpha.10",
+    "@getpara/cosmos-wallet-connectors": "^2.0.0-alpha.12",
+    "@getpara/evm-wallet-connectors": "^2.0.0-alpha.12",
+    "@getpara/solana-wallet-connectors": "^2.0.0-alpha.12",
     "@tanstack/react-query": ">=5.0.0",
     "react": "*",
     "react-dom": "*"
@@ -63,5 +63,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "92904c321f1dd8101046d8d2d70aa341bac99842"
+  "gitHead": "3a1284d5bb57c48fe53f651872da9a6e6903400a"
 }