@getpara/react-sdk-lite 2.0.0-alpha.40 → 2.0.0-alpha.42

package/dist/modal/components/Account/AccountHeader.js

@@ -42,6 +42,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         size: "48px",
         inset: "8px",
         border: "1px solid var(--cpsl-color-background-8)",
+        color: "var(--cpsl-color-foreground-0)",
         radius: "theme",
         icon,
         src

package/dist/modal/components/Account/AccountProfile.js

@@ -6,7 +6,7 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AccountTypeIcon, GradientScroll, StepContainer, WalletTypeIcon } from "../common.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
-import { useClient } from "../../../provider/index.js";
+import { useAccount, useClient } from "../../../provider/index.js";
 import { useLinkedAccounts } from "../../../provider/hooks/index.js";
 import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
 import { truncateAddress } from "@getpara/web-sdk";
@@ -53,6 +53,7 @@ const AccountProfile = ({
 }) => {
   var _a, _b, _c, _d, _e, _f;
   const para = useClient();
+  const { connectionType, embedded } = useAccount();
   const { data: linkedAccounts } = useLinkedAccounts();
   const { wallets } = useExternalWallets();
   const { isEnabled, linkAccount, unlinkAccount } = useAccountLinking();
@@ -81,7 +82,7 @@ const AccountProfile = ({
     ] }),
     /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Connected Wallets" }),
-      /* @__PURE__ */ jsx(Content, { children: externalWallet ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Content, { children: externalWallet && connectionType === "external" ? /* @__PURE__ */ jsx(
         Entry,
         {
           icon: /* @__PURE__ */ jsx(
@@ -114,10 +115,9 @@ const AccountProfile = ({
     isEnabled && /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Linked Accounts" }),
       /* @__PURE__ */ jsxs(Content, { children: [
-        /* @__PURE__ */ jsx(GradientScroll, { gap: "12px", height: "360px", children: [
-          ...((linkedAccounts == null ? void 0 : linkedAccounts.primary) || []).map((p) => __spreadProps(__spreadValues({}, p), { isPrimary: true })),
-          ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []
-        ].map((linkedAccount) => {
+        /* @__PURE__ */ jsx(GradientScroll, { gap: "12px", height: "360px", children: [...((linkedAccounts == null ? void 0 : linkedAccounts.primary) || []).map((p) => __spreadProps(__spreadValues({}, p), { isPrimary: true })), ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []].filter(({ externalWallet: externalWallet2 }) => {
+          return !externalWallet2 || externalWallet2.address !== (embedded == null ? void 0 : embedded.externalWalletAddress);
+        }).map((linkedAccount) => {
           var _a2, _b2, _c2, _d2, _e2;
           const { identifier, displayName, type, isPrimary = false, externalWallet: externalWallet2 } = linkedAccount;
           const externalWalletConnector = wallets.find((wallet) => wallet.id === (externalWallet2 == null ? void 0 : externalWallet2.providerId));

package/dist/modal/components/Account/AccountProfileLink.js

@@ -37,7 +37,9 @@ function AccountProfileLink() {
   } = useTelegramLogin(
     isTelegram ? { isActive: isTelegram, status: linkAccountStatus, onSubmit: verifyTelegramLink } : { isActive: false }
   ), status = (accountLinkInProgress == null ? void 0 : accountLinkInProgress.isComplete) ? "success" : isTelegram ? telegramStatus : linkAccountStatus, commonWallet = useMemo(() => {
-    const wallet = wallets.find((w) => w.internalId === externalWalletProvider && w.type === externalWalletType);
+    const wallet = wallets.find(
+      (w) => [w.name, w.internalId, w.id].includes(externalWalletProvider != null ? externalWalletProvider : "") && w.type === externalWalletType
+    );
     return wallet;
   }, [wallets]), walletDisplayHelpers = useWalletDisplayHelpers(commonWallet);
   const { upper, lower } = useMemo(() => {

package/dist/modal/components/ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js

@@ -24,7 +24,7 @@ const ExternalWalletNetworkSelectStep = () => {
   const firstWallet = availableWallets[0];
   const handleWalletClick = (wallet) => () => {
     if (accountLinkInProgress) {
-      linkAccount({ externalWallet: { provider: wallet.id } });
+      linkAccount({ externalWallet: { provider: wallet.id, type: wallet.type } });
       return;
     }
     setSelectedExternalWallet({ id: wallet.id, type: wallet.type });

package/dist/modal/components/common.js

@@ -209,7 +209,17 @@ function AccountTypeIcon({
     return ((_b = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b.mode) === "dark";
   });
   const data = accountType ? ACCOUNT_TYPES[accountType] : null;
-  return data || src ? /* @__PURE__ */ jsx(CpslIcon, { size, inset, icon: (_a = data == null ? void 0 : data.iconBranded) != null ? _a : data == null ? void 0 : data.icon, src, invert: isDark && (data == null ? void 0 : data.isDark) }) : null;
+  return data || src ? /* @__PURE__ */ jsx(
+    CpslIcon,
+    {
+      size,
+      inset,
+      icon: (_a = data == null ? void 0 : data.iconBranded) != null ? _a : data == null ? void 0 : data.icon,
+      color: (data == null ? void 0 : data.isPlain) ? "var(--cpsl-color-text-contrast)" : void 0,
+      src,
+      invert: isDark && (data == null ? void 0 : data.isDark)
+    }
+  ) : null;
 }
 function HeroAccountTypeIcon({ accountType, src }) {
   if (accountType === "EMAIL" || accountType === "PHONE") {

package/dist/modal/constants/constants.js

@@ -126,7 +126,7 @@ const BODY_MOTION_VARIANTS = {
 const BODY_TRANSITION = {
   duration: 0.2
 };
-const SDK_VERSION = "2.0.0-alpha.40";
+const SDK_VERSION = "2.0.0-alpha.42";
 export {
   BODY_MOTION_VARIANTS,
   BODY_TRANSITION,

package/dist/modal/constants/oAuthLogos.js

@@ -5,19 +5,19 @@ const ACCOUNT_TYPES = {
     icon: "mail",
     name: "Email",
     inlineText: "email address",
-    isDark: true
+    isPlain: true
   },
   "PHONE": {
     icon: "phone",
     name: "Phone",
     inlineText: "phone number",
-    isDark: true
+    isPlain: true
   },
   "EXTERNAL_WALLET": {
     icon: "wallet",
     name: "External Wallet",
     inlineText: "external wallet",
-    isDark: true
+    isPlain: true
   },
   "GOOGLE": {
     icon: "google",

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

@@ -11,4 +11,5 @@ export type DisplayMetadata = {
     iconBranded?: IconType;
     isDark?: boolean;
     isCircular?: boolean;
+    isPlain?: boolean;
 };

package/dist/provider/hooks/mutations/useVerifyExternalWallet.d.ts

@@ -1,3 +1,4 @@
+import { Compute } from '../../types/utils.js';
 export declare const VERIFY_EXTERNAL_WALLET_KEY = "VERIFY_EXTERNAL_WALLET";
 /**
  * React hook for the `verifyExternalWallet` mutation.
@@ -15,22 +16,7 @@ export declare const VERIFY_EXTERNAL_WALLET_KEY = "VERIFY_EXTERNAL_WALLET";
  */
 export declare const useVerifyExternalWallet: () => {
     status: "error" | "idle" | "pending" | "success";
-    data: {
-        username?: string | undefined;
-        displayName?: string | undefined;
-        pfpUrl?: string | undefined;
-        externalWallet?: import("@getpara/web-sdk").ExternalWalletInfo | undefined;
-        auth: import("@getpara/user-management-client").PrimaryAuth;
-        userId: string;
-        stage: "signup";
-        isPasskeySupported: boolean;
-        passkeyUrl?: string | undefined;
-        passwordUrl?: string | undefined;
-        pinUrl?: string | undefined;
-        passkeyId?: string | undefined;
-        passwordId?: string | undefined;
-        pinId?: string | undefined;
-    } | undefined;
+    data: Compute<import("@getpara/web-sdk").AuthStateSignup | import("@getpara/web-sdk").AuthStateLogin> | undefined;
     isSuccess: boolean;
     variables: {
         portalTheme?: import("@getpara/web-sdk").Theme | undefined;
@@ -50,22 +36,7 @@ export declare const useVerifyExternalWallet: () => {
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    verifyExternalWallet: import("@tanstack/react-query").UseMutateFunction<{
-        username?: string | undefined;
-        displayName?: string | undefined;
-        pfpUrl?: string | undefined;
-        externalWallet?: import("@getpara/web-sdk").ExternalWalletInfo | undefined;
-        auth: import("@getpara/user-management-client").PrimaryAuth;
-        userId: string;
-        stage: "signup";
-        isPasskeySupported: boolean;
-        passkeyUrl?: string | undefined;
-        passwordUrl?: string | undefined;
-        pinUrl?: string | undefined;
-        passkeyId?: string | undefined;
-        passwordId?: string | undefined;
-        pinId?: string | undefined;
-    }, Error, {
+    verifyExternalWallet: import("@tanstack/react-query").UseMutateFunction<Compute<import("@getpara/web-sdk").AuthStateSignup | import("@getpara/web-sdk").AuthStateLogin>, Error, {
         portalTheme?: import("@getpara/web-sdk").Theme | undefined;
         useShortUrls?: boolean | undefined;
         externalWallet: import("@getpara/web-sdk").ExternalWalletInfo;
@@ -73,22 +44,7 @@ export declare const useVerifyExternalWallet: () => {
         cosmosPublicKeyHex?: string | undefined;
         cosmosSigner?: string | undefined;
     }, unknown>;
-    verifyExternalWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<{
-        username?: string | undefined;
-        displayName?: string | undefined;
-        pfpUrl?: string | undefined;
-        externalWallet?: import("@getpara/web-sdk").ExternalWalletInfo | undefined;
-        auth: import("@getpara/user-management-client").PrimaryAuth;
-        userId: string;
-        stage: "signup";
-        isPasskeySupported: boolean;
-        passkeyUrl?: string | undefined;
-        passwordUrl?: string | undefined;
-        pinUrl?: string | undefined;
-        passkeyId?: string | undefined;
-        passwordId?: string | undefined;
-        pinId?: string | undefined;
-    }, Error, {
+    verifyExternalWalletAsync: import("@tanstack/react-query").UseMutateAsyncFunction<Compute<import("@getpara/web-sdk").AuthStateSignup | import("@getpara/web-sdk").AuthStateLogin>, Error, {
         portalTheme?: import("@getpara/web-sdk").Theme | undefined;
         useShortUrls?: boolean | undefined;
         externalWallet: import("@getpara/web-sdk").ExternalWalletInfo;

package/dist/provider/providers/AccountLinkProvider.js

@@ -20,6 +20,7 @@ import { generateInternalMutation } from "../hooks/mutations/utils.js";
 import { validateAuth } from "../../modal/utils/authInputHelpers.js";
 import { EXTERNAL_WALLET_TYPES, extractAuthInfo } from "@getpara/user-management-client";
 import { useStore } from "../stores/useStore.js";
+import { LINKED_ACCOUNTS_BASE_KEY } from "../hooks/queries/useLinkedAccounts.js";
 const AccountLinkContext = createContext({
   isEnabled: false,
   accountLinkInProgress: void 0,
@@ -66,10 +67,10 @@ const useVerifyFarcasterLink = generateInternalMutation("verifyFarcasterLink", a
 const useVerifyTelegramLink = generateInternalMutation("verifyTelegramLink", actions.verifyTelegramLink);
 const useVerifyExternalWalletLink = generateInternalMutation("verifyExternalWalletLink", actions.verifyExternalWalletLink);
 const AccountLinkProvider = ({ children }) => {
-  var _a;
+  var _a, _b, _c;
   const para = useInternalClient();
   const queryClient = useQueryClient();
-  const { embedded } = useAccount();
+  const account = useAccount();
   const { data: coreAccountLinkInProgress } = useAccountLinkInProgress();
   const {
     wallet: connectedWallet,
@@ -87,6 +88,7 @@ const AccountLinkProvider = ({ children }) => {
   const externalWalletError = useModalStore((state) => state.externalWalletError);
   const accountLinkOptions = useModalStore((state) => state.accountLinkOptions) || [...LINKED_ACCOUNT_TYPES];
   const setAccountLinkOptions = useModalStore((state) => state.setAccountLinkOptions);
+  const externalWalletsWithFullAuth = useStore((state) => state.externalWalletsWithFullAuth);
   const goBack = useGoBack();
   const { mutateAsync: mutateLinkAccountAsync, isPending: isLinkAccountPending } = useLinkAccount();
   const { mutate: mutateUnlinkAccount, isPending: isUnlinkAccountPending } = useUnlinkAccount();
@@ -111,7 +113,8 @@ const AccountLinkProvider = ({ children }) => {
     status: statusVerifyExternalWalletLink,
     reset: resetVerifyExternalWalletLink
   } = useVerifyExternalWalletLink();
-  const isEnabled = !!(embedded == null ? void 0 : embedded.isConnected) && !(embedded == null ? void 0 : embedded.isGuestMode) && (!((_a = para.authInfo) == null ? void 0 : _a.externalWallet) || includeWalletVerification);
+  const { embedded } = account;
+  const isEnabled = (embedded == null ? void 0 : embedded.isConnected) || !(embedded == null ? void 0 : embedded.isGuestMode) && (!((_a = para.authInfo) == null ? void 0 : _a.externalWallet) || includeWalletVerification || externalWalletsWithFullAuth.includes((_c = (_b = para.authInfo) == null ? void 0 : _b.externalWallet) == null ? void 0 : _c.providerId));
   const [accountLinkInProgress, setAccountLinkInProgress] = useState(
     coreAccountLinkInProgress || void 0
   );
@@ -187,7 +190,7 @@ const AccountLinkProvider = ({ children }) => {
             yield onAccountLinkVerified(updatedAccounts);
           } catch (e) {
             console.error(e);
-            setLinkAccountError(`Error authenticating external wallet: ${e.message}`);
+            setLinkAccountError(e.message);
           } finally {
             if (linkWallet.type === "EVM" || linkWallet.type === "SOLANA") {
               yield disconnectBase(providerId, linkWallet.type);
@@ -314,6 +317,7 @@ const AccountLinkProvider = ({ children }) => {
     }
   };
   const onAccountLinkVerified = (updatedAccounts) => {
+    queryClient.invalidateQueries({ queryKey: [LINKED_ACCOUNTS_BASE_KEY] });
     queryClient.setQueryData(["getLinkedAccounts"], () => updatedAccounts);
     setTimeout(() => {
       setStep(ModalStep.ACCOUNT_PROFILE);

package/dist/provider/providers/AuthProvider.js

@@ -317,7 +317,11 @@ function AuthProvider({
         }
         break;
       case "login":
-        login(authState);
+        if (authState.pinUrl && authState.signatureVerificationMessage) {
+          setStep(ModalStep.EXTERNAL_WALLET_VERIFICATION);
+        } else {
+          login(authState);
+        }
         break;
       case "signup":
         {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@getpara/react-sdk-lite",
-  "version": "2.0.0-alpha.40",
+  "version": "2.0.0-alpha.42",
   "bin": {
     "setup-para": "dist/cli/cli.mjs"
   },
   "dependencies": {
-    "@getpara/react-common": "2.0.0-alpha.40",
-    "@getpara/react-components": "2.0.0-alpha.40",
-    "@getpara/web-sdk": "2.0.0-alpha.40",
+    "@getpara/react-common": "2.0.0-alpha.42",
+    "@getpara/react-components": "2.0.0-alpha.42",
+    "@getpara/web-sdk": "2.0.0-alpha.42",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.31",
     "libphonenumber-js": "^1.11.7",
@@ -16,9 +16,9 @@
     "zustand-sync-tabs": "^0.2.2"
   },
   "devDependencies": {
-    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.40",
-    "@getpara/evm-wallet-connectors": "2.0.0-alpha.40",
-    "@getpara/solana-wallet-connectors": "2.0.0-alpha.40",
+    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.42",
+    "@getpara/evm-wallet-connectors": "2.0.0-alpha.42",
+    "@getpara/solana-wallet-connectors": "2.0.0-alpha.42",
     "@tanstack/react-query": "^5.74.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
@@ -38,7 +38,7 @@
     "package.json",
     "styles.css"
   ],
-  "gitHead": "2506044cd3ed127774fb7d537ae850b43acfe8b7",
+  "gitHead": "6f44dc050550a1f567088c81b3ae06c7f1f8ebcb",
   "main": "dist/index.js",
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",