@getpara/react-sdk 2.0.0-alpha.18 → 2.0.0-alpha.19

package/dist/modal/components/common.js

@@ -2,27 +2,27 @@
 import "../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButton } from "@getpara/react-components";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS } from "../constants/constants.js";
 import { useStore } from "../../provider/stores/useStore.js";
-const SpinnerContainer = styled.div`
+const SpinnerContainer = safeStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-const QRContainer = styled.div`
+const QRContainer = safeStyled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 286px;
   height: 286px;
 `;
-const InfoBoxContent = styled.div`
+const InfoBoxContent = safeStyled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
-const InfoBoxHeader = styled.div`
+const InfoBoxHeader = safeStyled.div`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -32,21 +32,21 @@ const InfoBoxHeader = styled.div`
     --width: 20px;
   }
 `;
-const FilledDisabledInput = styled(CpslInput)`
+const FilledDisabledInput = safeStyled(CpslInput)`
   --container-border-color: var(--cpsl-color-input-border-placeholder);
   --container-background-color: var(--cpsl-color-background-0);
   --input-background-color: transparent;
   --input-font-weight: 500;
   --input-color: var(--cpsl-color-text-secondary);
 `;
-const FullWidthFilledDisabledInput = styled(FilledDisabledInput)`
+const FullWidthFilledDisabledInput = safeStyled(FilledDisabledInput)`
   width: 100%;
 `;
-const CenteredText = styled(CpslText)`
+const CenteredText = safeStyled(CpslText)`
   width: 100%;
   text-align: center;
 `;
-const InnerStepContainer = styled.div`
+const InnerStepContainer = safeStyled.div`
   width: 100%;
   height: 100%;
   align-self: center;
@@ -55,22 +55,22 @@ const InnerStepContainer = styled.div`
   align-items: center;
   gap: 8px;
 `;
-const StepContainer = styled(InnerStepContainer)`
+const StepContainer = safeStyled(InnerStepContainer)`
   gap: ${({ $wide }) => $wide ? "32px" : "24px"};
 `;
-const Heading = styled(CenteredText)``;
-const StyledCpslTileButton = styled(CpslTileButton)`
+const Heading = safeStyled(CenteredText)``;
+const StyledCpslTileButton = safeStyled(CpslTileButton)`
   --button-width: 100%;
   --button-height: 87px;
   --button-icon-height: 32px;
   --button-icon-width: 32px;
 `;
-const HeroIcon = styled(CpslIcon)`
+const HeroIcon = safeStyled(CpslIcon)`
   --height: 80px;
   --width: 80px;
   --icon-color: var(--cpsl-color-text-primary);
 `;
-const HeaderSelect = styled(CpslSelect)`
+const HeaderSelect = safeStyled(CpslSelect)`
   --container-height: 26px;
   --container-border-width: 0px;
   --container-padding-end: 0px;
@@ -106,13 +106,13 @@ const HeaderSelect = styled(CpslSelect)`
     --icon-color: var(--cpsl-color-contrast);
   }
 `;
-const HeaderSelectItem = styled(CpslSelectItem)`
+const HeaderSelectItem = safeStyled(CpslSelectItem)`
   --outer-container-padding-start: 4px;
   --outer-container-padding-end: 4px;
   --outer-container-padding-top: 4px;
   --outer-container-padding-bottom: 4px;
 `;
-const HeaderSelectContainer = styled.div`
+const HeaderSelectContainer = safeStyled.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -121,7 +121,7 @@ const HeaderSelectContainer = styled.div`
   background-color: var(--cpsl-color-background-8);
   padding: 4px;
 `;
-const StyledIcon = styled(CpslIcon)`
+const StyledIcon = safeStyled(CpslIcon)`
   background: var(--cpsl-color-background-0);
   border-radius: 100%;
 `;
@@ -141,13 +141,13 @@ function NetworkIcon({ network, size }) {
   const data = NETWORKS[network];
   return /* @__PURE__ */ jsx(StyledIcon, { size, icon: data.icon, inset: data.isCircular ? void 0 : "15%", invert: isDark && data.isDark });
 }
-const ErrorContainer = styled.div`
+const ErrorContainer = safeStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
 `;
-const ErrorIcon = styled(CpslIcon)`
+const ErrorIcon = safeStyled(CpslIcon)`
   --height: 16px;
   --width: 16px;
   --icon-color: var(--cpsl-color-text-error);

package/dist/modal/constants/constants.js

@@ -119,7 +119,7 @@ const BODY_MOTION_VARIANTS = {
 const BODY_TRANSITION = {
   duration: 0.2
 };
-const SDK_VERSION = "2.0.0-alpha.18";
+const SDK_VERSION = "2.0.0-alpha.19";
 export {
   BODY_MOTION_VARIANTS,
   BODY_TRANSITION,

package/dist/modal/utils/steps.d.ts

@@ -19,6 +19,7 @@ export declare enum ModalStep {
     WALLET_CREATION_DONE = "WALLET_CREATION_DONE",
     SECRET = "SECRET",
     BIOMETRIC_LOGIN = "BIOMETRIC_LOGIN",
+    EMBEDDED_PASSWORD_LOGIN = "EMBEDDED_PASSWORD_LOGIN",
     AWAITING_BIOMETRIC_LOGIN = "AWAITING_BIOMETRIC_LOGIN",
     AWAITING_PASSWORD_LOGIN = "AWAITING_PASSWORD_LOGIN",
     LOGIN_DONE = "LOGIN_DONE",
@@ -95,6 +96,7 @@ declare enum LoginModalStep {
     FARCASTER_OAUTH = "FARCASTER_OAUTH",
     TELEGRAM_OAUTH = "TELEGRAM_OAUTH",
     BIOMETRIC_LOGIN = "BIOMETRIC_LOGIN",
+    EMBEDDED_PASSWORD_LOGIN = "EMBEDDED_PASSWORD_LOGIN",
     AWAITING_BIOMETRIC_LOGIN = "AWAITING_BIOMETRIC_LOGIN",
     AWAITING_PASSWORD_LOGIN = "AWAITING_PASSWORD_LOGIN",
     AWAITING_WALLET_CREATION = "AWAITING_WALLET_CREATION",

package/dist/modal/utils/steps.js

@@ -20,6 +20,7 @@ var ModalStep = /* @__PURE__ */ ((ModalStep2) => {
   ModalStep2["WALLET_CREATION_DONE"] = "WALLET_CREATION_DONE";
   ModalStep2["SECRET"] = "SECRET";
   ModalStep2["BIOMETRIC_LOGIN"] = "BIOMETRIC_LOGIN";
+  ModalStep2["EMBEDDED_PASSWORD_LOGIN"] = "EMBEDDED_PASSWORD_LOGIN";
   ModalStep2["AWAITING_BIOMETRIC_LOGIN"] = "AWAITING_BIOMETRIC_LOGIN";
   ModalStep2["AWAITING_PASSWORD_LOGIN"] = "AWAITING_PASSWORD_LOGIN";
   ModalStep2["LOGIN_DONE"] = "LOGIN_DONE";
@@ -61,6 +62,7 @@ const RESET_TO_AUTH_STEPS = [
   "PASSWORD_CREATION" /* PASSWORD_CREATION */,
   "AWAITING_PASSWORD_CREATION" /* AWAITING_PASSWORD_CREATION */,
   "BIOMETRIC_LOGIN" /* BIOMETRIC_LOGIN */,
+  "EMBEDDED_PASSWORD_LOGIN" /* EMBEDDED_PASSWORD_LOGIN */,
   "AWAITING_BIOMETRIC_LOGIN" /* AWAITING_BIOMETRIC_LOGIN */,
   "AWAITING_PASSWORD_LOGIN" /* AWAITING_PASSWORD_LOGIN */,
   "AWAITING_WALLET_CREATION" /* AWAITING_WALLET_CREATION */,
@@ -165,6 +167,7 @@ var LoginModalStep = /* @__PURE__ */ ((LoginModalStep2) => {
   LoginModalStep2["FARCASTER_OAUTH"] = "FARCASTER_OAUTH";
   LoginModalStep2["TELEGRAM_OAUTH"] = "TELEGRAM_OAUTH";
   LoginModalStep2["BIOMETRIC_LOGIN"] = "BIOMETRIC_LOGIN";
+  LoginModalStep2["EMBEDDED_PASSWORD_LOGIN"] = "EMBEDDED_PASSWORD_LOGIN";
   LoginModalStep2["AWAITING_BIOMETRIC_LOGIN"] = "AWAITING_BIOMETRIC_LOGIN";
   LoginModalStep2["AWAITING_PASSWORD_LOGIN"] = "AWAITING_PASSWORD_LOGIN";
   LoginModalStep2["AWAITING_WALLET_CREATION"] = "AWAITING_WALLET_CREATION";
@@ -191,6 +194,7 @@ const LoginPreviousStep = {
   ["AWAITING_OAUTH" /* AWAITING_OAUTH */]: "AUTH_MAIN" /* AUTH_MAIN */,
   ["FARCASTER_OAUTH" /* FARCASTER_OAUTH */]: "AUTH_MAIN" /* AUTH_MAIN */,
   ["BIOMETRIC_LOGIN" /* BIOMETRIC_LOGIN */]: "AUTH_MAIN" /* AUTH_MAIN */,
+  ["EMBEDDED_PASSWORD_LOGIN" /* EMBEDDED_PASSWORD_LOGIN */]: "AUTH_MAIN" /* AUTH_MAIN */,
   ["AWAITING_BIOMETRIC_LOGIN" /* AWAITING_BIOMETRIC_LOGIN */]: "BIOMETRIC_LOGIN" /* BIOMETRIC_LOGIN */,
   ["AWAITING_PASSWORD_LOGIN" /* AWAITING_PASSWORD_LOGIN */]: "BIOMETRIC_LOGIN" /* BIOMETRIC_LOGIN */,
   ["AWAITING_WALLET_CREATION" /* AWAITING_WALLET_CREATION */]: void 0,
@@ -232,7 +236,7 @@ function getAddFundsStep(currentTab) {
       return "ADD_FUNDS_WITHDRAW" /* ADD_FUNDS_WITHDRAW */;
   }
 }
-const IFrameSteps = ["PASSWORD_CREATION" /* PASSWORD_CREATION */];
+const IFrameSteps = ["PASSWORD_CREATION" /* PASSWORD_CREATION */, "EMBEDDED_PASSWORD_LOGIN" /* EMBEDDED_PASSWORD_LOGIN */];
 export {
   AccountPreviousStep,
   GuestPreviousStep,

package/dist/provider/index.d.ts

@@ -2,3 +2,5 @@ export { ParaProvider } from './ParaProvider.js';
 export * from './hooks/index.js';
 export * from './stores/getters.js';
 export * from './stores/setters.js';
+export * from './types/externalWalletProviders.js';
+export * from './types/provider.js';

package/dist/provider/index.js

@@ -4,6 +4,8 @@ import { ParaProvider } from "./ParaProvider.js";
 export * from "./hooks/index.js";
 export * from "./stores/getters.js";
 export * from "./stores/setters.js";
+export * from "./types/externalWalletProviders.js";
+export * from "./types/provider.js";
 export {
   ParaProvider
 };

package/dist/provider/providers/AuthProvider.js

@@ -188,8 +188,13 @@ function AuthProvider({
     },
     [isIFrameReady]
   );
-  const login = () => {
-    setStep(ModalStep.BIOMETRIC_LOGIN);
+  const login = (authState) => {
+    if (authState.isWalletSelectionNeeded || authState.passkeyUrl) {
+      setStep(ModalStep.BIOMETRIC_LOGIN);
+    } else {
+      setIFrameUrl(authState.passwordUrl);
+      setStep(ModalStep.EMBEDDED_PASSWORD_LOGIN);
+    }
     refs.poll.current = {
       action: "login",
       timeout: window == null ? void 0 : window.setTimeout(() => __async(this, null, function* () {
@@ -197,11 +202,16 @@ function AuthProvider({
           {
             isCanceled: () => cancelIfExitedSteps([
               ModalStep.BIOMETRIC_LOGIN,
+              ModalStep.EMBEDDED_PASSWORD_LOGIN,
               ModalStep.AWAITING_BIOMETRIC_LOGIN,
               ModalStep.AWAITING_PASSWORD_LOGIN
             ]),
             onPoll: () => {
-              goBackIfPopupClosedOnSteps([ModalStep.AWAITING_BIOMETRIC_LOGIN, ModalStep.AWAITING_PASSWORD_LOGIN]);
+              goBackIfPopupClosedOnSteps([
+                ModalStep.AWAITING_BIOMETRIC_LOGIN,
+                ModalStep.AWAITING_PASSWORD_LOGIN,
+                ModalStep.EMBEDDED_PASSWORD_LOGIN
+              ]);
             }
           },
           {
@@ -262,7 +272,7 @@ function AuthProvider({
         }
         break;
       case "login":
-        login();
+        login(authState);
         break;
       case "signup":
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-sdk",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.19",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,9 +15,9 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-common": "2.0.0-alpha.18",
-    "@getpara/react-components": "2.0.0-alpha.18",
-    "@getpara/web-sdk": "2.0.0-alpha.18",
+    "@getpara/react-common": "2.0.0-alpha.19",
+    "@getpara/react-components": "2.0.0-alpha.19",
+    "@getpara/web-sdk": "2.0.0-alpha.19",
     "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.18",
-    "@getpara/evm-wallet-connectors": "2.0.0-alpha.18",
-    "@getpara/solana-wallet-connectors": "2.0.0-alpha.18",
+    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.19",
+    "@getpara/evm-wallet-connectors": "2.0.0-alpha.19",
+    "@getpara/solana-wallet-connectors": "2.0.0-alpha.19",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -63,5 +63,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "2333bc727fe61593821d448ee12facaee230c4b0"
+  "gitHead": "80d2c5d7e1203fb12378aa29bfd4d7003c7d7075"
 }

package/dist/modal/types/externalWallets.d.ts

@@ -1,37 +0,0 @@
-export declare enum EvmWallet {
-    METAMASK = "METAMASK",
-    RAINBOW = "RAINBOW",
-    COINBASE = "COINBASE",
-    WALLETCONNECT = "WALLETCONNECT",
-    ZERION = "ZERION",
-    SAFE = "SAFE",
-    RABBY = "RABBY",
-    OKX = "OKX"
-}
-export declare enum SolanaWallet {
-    PHANTOM = "PHANTOM",
-    GLOW = "GLOW",
-    BACKPACK = "BACKPACK",
-    SOLFLARE = "SOLFLARE"
-}
-export declare enum CosmosWallet {
-    KEPLR = "KEPLR",
-    LEAP = "LEAP"
-}
-export declare const ExternalWallet: {
-    KEPLR: CosmosWallet.KEPLR;
-    LEAP: CosmosWallet.LEAP;
-    PHANTOM: SolanaWallet.PHANTOM;
-    GLOW: SolanaWallet.GLOW;
-    BACKPACK: SolanaWallet.BACKPACK;
-    SOLFLARE: SolanaWallet.SOLFLARE;
-    METAMASK: EvmWallet.METAMASK;
-    RAINBOW: EvmWallet.RAINBOW;
-    COINBASE: EvmWallet.COINBASE;
-    WALLETCONNECT: EvmWallet.WALLETCONNECT;
-    ZERION: EvmWallet.ZERION;
-    SAFE: EvmWallet.SAFE;
-    RABBY: EvmWallet.RABBY;
-    OKX: EvmWallet.OKX;
-};
-export type TExternalWallet = keyof typeof ExternalWallet;

package/dist/modal/types/externalWallets.js

@@ -1,34 +0,0 @@
-"use client";
-import {
-  __spreadValues
-} from "../../chunk-MMUBH76A.js";
-var EvmWallet = /* @__PURE__ */ ((EvmWallet2) => {
-  EvmWallet2["METAMASK"] = "METAMASK";
-  EvmWallet2["RAINBOW"] = "RAINBOW";
-  EvmWallet2["COINBASE"] = "COINBASE";
-  EvmWallet2["WALLETCONNECT"] = "WALLETCONNECT";
-  EvmWallet2["ZERION"] = "ZERION";
-  EvmWallet2["SAFE"] = "SAFE";
-  EvmWallet2["RABBY"] = "RABBY";
-  EvmWallet2["OKX"] = "OKX";
-  return EvmWallet2;
-})(EvmWallet || {});
-var SolanaWallet = /* @__PURE__ */ ((SolanaWallet2) => {
-  SolanaWallet2["PHANTOM"] = "PHANTOM";
-  SolanaWallet2["GLOW"] = "GLOW";
-  SolanaWallet2["BACKPACK"] = "BACKPACK";
-  SolanaWallet2["SOLFLARE"] = "SOLFLARE";
-  return SolanaWallet2;
-})(SolanaWallet || {});
-var CosmosWallet = /* @__PURE__ */ ((CosmosWallet2) => {
-  CosmosWallet2["KEPLR"] = "KEPLR";
-  CosmosWallet2["LEAP"] = "LEAP";
-  return CosmosWallet2;
-})(CosmosWallet || {});
-const ExternalWallet = __spreadValues(__spreadValues(__spreadValues({}, EvmWallet), SolanaWallet), CosmosWallet);
-export {
-  CosmosWallet,
-  EvmWallet,
-  ExternalWallet,
-  SolanaWallet
-};