@getpara/react-sdk 2.0.0-alpha.20 → 2.0.0-alpha.22

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export * from './modal/index.js';
 export * from './provider/index.js';
 export * from '@getpara/web-sdk';
-export { ExternalWallet, EvmWallet, SolanaWallet, CosmosWallet } from '@getpara/react-common';
 export type { Theme } from '@getpara/react-components';
 import ParaWeb from '@getpara/web-sdk';
 export default ParaWeb;

package/dist/index.js

@@ -3,13 +3,8 @@ import "./chunk-MMUBH76A.js";
 export * from "./modal/index.js";
 export * from "./provider/index.js";
 export * from "@getpara/web-sdk";
-import { ExternalWallet, EvmWallet, SolanaWallet, CosmosWallet } from "@getpara/react-common";
 import ParaWeb from "@getpara/web-sdk";
 var src_default = ParaWeb;
 export {
-  CosmosWallet,
-  EvmWallet,
-  ExternalWallet,
-  SolanaWallet,
   src_default as default
 };

package/dist/modal/ParaModal.js

@@ -22,11 +22,12 @@ import { useExternalWallets } from "../provider/providers/ExternalWalletProvider
 import { useStore } from "../provider/stores/useStore.js";
 import parsePhoneNumberFromString from "libphonenumber-js";
 import { useAuthActions } from "../provider/providers/AuthProvider.js";
-import { validateAuth } from "./utils/authInputHelpers.js";
+import { validateInput } from "./utils/authInputHelpers.js";
 import { SDK_VERSION } from "./constants/constants.js";
 defineCustomElements();
 const ParaModal = forwardRef((props, ref) => {
   const storedModalConfig = useStore((state) => state.modalConfig);
+  const openedToStep = useStore((state) => state.openedToStep);
   const modalContentRef = useRef(null);
   const refs = useModalStore((state) => state.refs);
   const flow = useModalStore((state) => state.flow);
@@ -52,6 +53,7 @@ const ParaModal = forwardRef((props, ref) => {
   const [isInit, setIsInit] = useState(false);
   const externalWallets = useStore((state) => state.externalWallets);
   const providerProps = useStore((state) => state.providerProps);
+  const setAccountLinkOptions = useModalStore((state) => state.setAccountLinkOptions);
   const _a = __spreadValues(__spreadValues({}, storedModalConfig), props), {
     isOpen: configIsOpen,
     theme,
@@ -66,7 +68,8 @@ const ParaModal = forwardRef((props, ref) => {
     embeddedModal,
     onModalStepChange,
     onClose,
-    defaultAuthIdentifier
+    defaultAuthIdentifier,
+    supportedAccountLinks: propsSupportedAccountLinks
   } = _a, rest = __objRest(_a, [
     "isOpen",
     "theme",
@@ -81,7 +84,8 @@ const ParaModal = forwardRef((props, ref) => {
     "embeddedModal",
     "onModalStepChange",
     "onClose",
-    "defaultAuthIdentifier"
+    "defaultAuthIdentifier",
+    "supportedAccountLinks"
   ]);
   useEffect(() => {
     const trackAnalytics = () => __async(void 0, null, function* () {
@@ -140,7 +144,9 @@ const ParaModal = forwardRef((props, ref) => {
         break;
       case isAccount:
         setFlow("account");
-        setStep(ModalStep.ACCOUNT_MAIN);
+        if (!openedToStep.current) {
+          setStep(ModalStep.ACCOUNT_MAIN);
+        }
         break;
       default:
         if (currentStep !== ModalStep.AUTH_MAIN && currentStep !== ModalStep.SECRET) {
@@ -155,7 +161,7 @@ const ParaModal = forwardRef((props, ref) => {
           if (defaultAuthIdentifier && ((_a2 = para.authInfo) == null ? void 0 : _a2.identifier) !== defaultAuthIdentifier) {
             const number = parsePhoneNumberFromString(defaultAuthIdentifier);
             try {
-              const auth = validateAuth(
+              const auth = validateInput(
                 number ? number.nationalNumber : defaultAuthIdentifier,
                 (number == null ? void 0 : number.countryCallingCode) ? `+${number == null ? void 0 : number.countryCallingCode}` : void 0,
                 number ? "phone" : "email"
@@ -211,6 +217,9 @@ const ParaModal = forwardRef((props, ref) => {
       setStep(ModalStep.AUTH_MAIN);
     }
   }, [bareModal, flow, account]);
+  useEffect(() => {
+    setAccountLinkOptions(propsSupportedAccountLinks != null ? propsSupportedAccountLinks : para == null ? void 0 : para.supportedAccountLinks);
+  }, [propsSupportedAccountLinks, para == null ? void 0 : para.supportedAccountLinks]);
   const handleClose = () => {
     closeModal();
     onClose == null ? void 0 : onClose();
@@ -219,6 +228,7 @@ const ParaModal = forwardRef((props, ref) => {
     setIsModalMounted(true);
   };
   const handleModalExited = () => __async(void 0, null, function* () {
+    openedToStep.current = null;
     setIsModalMounted(false);
     if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
       resetModalState();

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

@@ -15,6 +15,7 @@ import { useStore } from "../../../provider/stores/useStore.js";
 import { formatBalanceString } from "../../utils/stringFormatters.js";
 import { useAccount, useWalletBalance } from "../../../provider/index.js";
 import { EnabledFlow } from "@getpara/web-sdk";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
 const Account = ({ onClose }) => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const setStep = useModalStore((state) => state.setStep);
@@ -29,22 +30,24 @@ const Account = ({ onClose }) => {
   const para = useInternalClient();
   const { data: account } = useAccount();
   const { data: balance, isLoading: isBalanceLoading } = useWalletBalance();
+  const { isEnabled } = useAccountLinking();
   const [isDisconnecting, setIsDisconnecting] = useState(false);
   const isGuestMode = (account == null ? void 0 : account.isConnected) && account.isGuestMode;
   const cantBuyAndWithdraw = (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") && !para.userId;
   const isOnRampLoaded = !!onRampConfig;
   const handleBuyClick = () => {
     if (isGuestMode) {
-      setGuestAddFundsTab(EnabledFlow.BUY);
-      setStep(ModalStep.AUTH_GUEST_SIGNUP);
+      if (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled) {
+        setStep(ModalStep.ADD_FUNDS_RECEIVE);
+      } else {
+        setGuestAddFundsTab(EnabledFlow.BUY);
+        setStep(ModalStep.AUTH_GUEST_SIGNUP);
+      }
     } else {
       setOnRampStep(OnRampStep.SETTINGS);
       setStep(ModalStep.ADD_FUNDS_BUY);
     }
   };
-  const handleReceiveClick = () => {
-    setStep(ModalStep.ADD_FUNDS_RECEIVE);
-  };
   const handleSellClick = () => {
     if (isGuestMode) {
       setGuestAddFundsTab(EnabledFlow.WITHDRAW);
@@ -54,6 +57,9 @@ const Account = ({ onClose }) => {
       setStep(ModalStep.ADD_FUNDS_WITHDRAW);
     }
   };
+  const handleProfileClick = () => {
+    setStep(ModalStep.ACCOUNT_PROFILE);
+  };
   const handleDisconnectClick = () => __async(void 0, null, function* () {
     setIsDisconnecting(true);
     yield para.logout();
@@ -89,9 +95,9 @@ const Account = ({ onClose }) => {
       )
     ] }),
     /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      onRampConfig.isBuyEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "creditCard", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Buy Crypto" }) }),
-      onRampConfig.isReceiveEnabled && /* @__PURE__ */ jsx(OptionButton, { icon: "qrCode02", onClick: handleReceiveClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Receive" }) }),
-      onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleBrokenDownLeft", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) })
+      onRampConfig.isBuyEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "creditCard", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Receive" }) }),
+      onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleBrokenDownLeft", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) }),
+      /* @__PURE__ */ jsx(OptionButton, { icon: "user", onClick: handleProfileClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isEnabled ? "Profile" : "Settings" }) })
     ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) }),
     !isGuestMode && /* @__PURE__ */ jsx(DisconnectButton, { variant: "destructive", fullWidth: true, onClick: handleDisconnectClick, disabled: isDisconnecting, children: isDisconnecting ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       hideWallets ? "Logout" : "Disconnect Wallet",

package/dist/modal/components/Account/AccountProfile.d.ts

@@ -0,0 +1 @@
+export declare const AccountProfile: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,170 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
+import { CpslButton, CpslIcon, CpslIdenticon, CpslText } from "@getpara/react-components";
+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";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { safeStyled, useCopyToClipboard } from "@getpara/react-common";
+import { getAccountTypeName } from "../../constants/oAuthLogos.js";
+const Entry = ({
+  identifier,
+  icon,
+  name,
+  address,
+  addressShort,
+  onUnlink
+}) => {
+  const [isCopied, copy] = useCopyToClipboard();
+  return /* @__PURE__ */ jsxs(EntryContainer, { children: [
+    icon,
+    /* @__PURE__ */ jsx(EntryDisplayName, { variant: "bodyM", color: "contrast", children: name }),
+    /* @__PURE__ */ jsx(EntryFlex, { children: address ? /* @__PURE__ */ jsxs(EntryAddress, { children: [
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", children: addressShort != null ? addressShort : address }),
+      /* @__PURE__ */ jsx(
+        CpslButton,
+        {
+          size: "small",
+          variant: "ghost",
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            copy(address);
+          },
+          children: /* @__PURE__ */ jsx(CopyIcon, { id: "ignore-click", slot: "start", isCopied, icon: isCopied ? "check" : "copy" })
+        }
+      )
+    ] }) : null }),
+    onUnlink && /* @__PURE__ */ jsx(EntryUnlink, { href: "#", onClick: onUnlink, children: "Unlink" })
+  ] }, address != null ? address : identifier);
+};
+const AccountProfile = () => {
+  var _a, _b, _c, _d, _e;
+  const para = useClient();
+  const { data: account } = useAccount();
+  const { data: linkedAccounts } = useLinkedAccounts();
+  const { isEnabled, linkAccount, unlinkAccount } = useAccountLinking();
+  if (!para) {
+    return null;
+  }
+  const externalWallet = account == null ? void 0 : account.externalWallet;
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsxs(Section, { children: [
+      /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Connected Wallets" }),
+      /* @__PURE__ */ jsx(Content, { children: externalWallet ? /* @__PURE__ */ jsx(
+        Entry,
+        {
+          icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: externalWallet.providerId, size: "24px" }),
+          name: (_b = (_a = externalWallet.ensName) != null ? _a : getAccountTypeName(externalWallet.providerId)) != null ? _b : "",
+          address: (_c = externalWallet.addressBech32) != null ? _c : externalWallet.address,
+          addressShort: truncateAddress((_d = externalWallet.addressBech32) != null ? _d : externalWallet.address, externalWallet.type, {
+            prefix: para.cosmosPrefix
+          })
+        },
+        externalWallet.address
+      ) : (_e = account == null ? void 0 : account.wallets) == null ? void 0 : _e.map((wallet) => {
+        var _a2;
+        return /* @__PURE__ */ jsx(
+          Entry,
+          {
+            icon: wallet.isExternal ? /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: (_a2 = wallet.externalProviderId) != null ? _a2 : "EXTERNAL_WALLET", size: "24px" }) : /* @__PURE__ */ jsx(CpslIdenticon, { hash: para.getIdenticonHash(wallet.id, wallet.type), size: "24px", arcWidth: "40%" }),
+            name: getWalletDisplayName(para, wallet),
+            address: wallet.address,
+            addressShort: truncateAddress(wallet.address, wallet.type)
+          },
+          wallet.address
+        );
+      }) })
+    ] }),
+    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) => {
+          var _a2, _b2, _c2, _d2, _e2;
+          const { identifier, displayName, type, isPrimary = false, externalWallet: externalWallet2 } = linkedAccount;
+          return /* @__PURE__ */ jsx(
+            Entry,
+            {
+              icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: (_a2 = externalWallet2 == null ? void 0 : externalWallet2.providerId) != null ? _a2 : type, size: "24px" }),
+              name: externalWallet2 ? (_c2 = (_b2 = externalWallet2.ensName) != null ? _b2 : getAccountTypeName(externalWallet2.providerId)) != null ? _c2 : "" : displayName != null ? displayName : identifier,
+              address: (_d2 = externalWallet2 == null ? void 0 : externalWallet2.addressBech32) != null ? _d2 : externalWallet2 == null ? void 0 : externalWallet2.address,
+              addressShort: externalWallet2 ? truncateAddress((_e2 = externalWallet2.addressBech32) != null ? _e2 : externalWallet2.address, externalWallet2.type, {
+                prefix: para.cosmosPrefix
+              }) : void 0,
+              onUnlink: isPrimary ? void 0 : (e) => {
+                e.preventDefault();
+                unlinkAccount(linkedAccount);
+              }
+            },
+            identifier
+          );
+        }) }),
+        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, variant: "tertiary", onClick: () => linkAccount(void 0), children: [
+          /* @__PURE__ */ jsx(CpslIcon, { icon: "userPlus", slot: "start" }),
+          "Link an account"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+`;
+const Content = styled(Section)``;
+const Title = styled(CpslText)``;
+const EntryContainer = safeStyled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+const EntryDisplayName = safeStyled(CpslText)``;
+const EntryFlex = safeStyled.div`
+  flex: 1;
+`;
+const EntryAddress = safeStyled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+const CopyIcon = safeStyled(CpslIcon)`
+  --width: 16px;
+  --height: 16px;
+  --icon-color: ${({ isCopied }) => isCopied ? "var(--cpsl-color-utility-green) !important" : "var(--cpsl-color-text-secondary)"};
+
+  &:hover {
+    --icon-color: var(--cpsl-color-text-contrast);
+  }
+`;
+const EntryUnlink = styled.a`
+  color: var(--cpsl-color-utility-red);
+  position: absolute;
+  right: 0;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--cpsl-font-family);
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+export {
+  AccountProfile
+};

package/dist/modal/components/Account/AccountProfileLink.d.ts

@@ -0,0 +1 @@
+export declare function AccountProfileLink(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,206 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { HeroSpinner } from "@getpara/react-common";
+import { CpslButton, CpslIcon } from "@getpara/react-components";
+import { useEffect, useMemo } from "react";
+import { HeroAccountTypeIcon, HeroSuccessIcon } from "../common.js";
+import { VerificationCode } from "../VerificationCodeStep/VerificationCodeStep.js";
+import { extractAuthInfo } from "@getpara/user-management-client";
+import { FarcasterConnectQR } from "../OAuth/FarcasterOAuthStep.js";
+import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
+import { TelegramIFrame } from "../OAuth/TelegramOAuthStep.js";
+import { AuthInput } from "../AuthInput/AuthInput.js";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useWalletDisplayHelpers, useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { ExternalWalletMobileConnect } from "../ExternalWalletStep/ExternalWalletStep.js";
+import { useResendVerificationCode } from "../../../provider/index.js";
+import { AccountLinkError } from "@getpara/web-sdk";
+function AccountProfileLink() {
+  var _a, _b, _c, _d;
+  const {
+    accountLinkInProgress,
+    verifyEmailOrPhoneLink,
+    linkAccountStatus,
+    linkAccountError,
+    verifyTelegramLink,
+    linkAccount,
+    isLinkAccountPending,
+    resetMutations
+  } = useAccountLinking(), { wallets } = useExternalWallets(), { mutate: resendVerificationCode } = useResendVerificationCode(), accountLinkType = accountLinkInProgress == null ? void 0 : accountLinkInProgress.type, externalWalletProvider = (_b = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletProvider) != null ? _b : (_a = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a.providerId, externalWalletType = (_d = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletType) != null ? _d : (_c = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _c.type, accountLinkIcon = externalWalletProvider != null ? externalWalletProvider : accountLinkType, isTelegram = accountLinkType === "TELEGRAM", {
+    url,
+    status: telegramStatus,
+    isLoaded,
+    setIsLoaded
+  } = 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);
+    return wallet;
+  }, [wallets]), walletDisplayHelpers = useWalletDisplayHelpers(commonWallet);
+  const { upper, lower } = useMemo(() => {
+    let upper2 = null, lower2 = null;
+    let message;
+    switch (status) {
+      case "pending":
+        message = externalWalletType ? "Confirm wallet connection" : "Confirm login request";
+        break;
+      case "success":
+        message = "Account linked";
+        break;
+      case "error":
+        switch (linkAccountError) {
+          case AccountLinkError.Conflict:
+            message = "Account already linked";
+            break;
+          default:
+            message = (accountLinkInProgress == null ? void 0 : accountLinkInProgress.type) === "EXTERNAL_WALLET" ? "Connection failed" : "Login failed";
+            break;
+        }
+        break;
+      default:
+        message = null;
+    }
+    const heroSpinner = /* @__PURE__ */ jsx(
+      HeroSpinner,
+      {
+        status,
+        icon: status === "success" ? /* @__PURE__ */ jsx(HeroSuccessIcon, {}) : /* @__PURE__ */ jsx(HeroAccountTypeIcon, { accountType: accountLinkIcon }),
+        text: message
+      }
+    );
+    ``;
+    const onTryAgain = externalWalletProvider && externalWalletType ? () => linkAccount({ externalWallet: { internalId: externalWalletProvider, type: externalWalletType } }) : accountLinkType && accountLinkType !== "EXTERNAL_WALLET" ? () => linkAccount({ type: accountLinkType }) : void 0;
+    const tryAgain = onTryAgain ? /* @__PURE__ */ jsxs(CpslButton, { variant: "secondary", fullWidth: true, onClick: onTryAgain, children: [
+      /* @__PURE__ */ jsx(CpslIcon, { icon: "refresh", slot: "start" }),
+      "Try Again"
+    ] }) : null;
+    if (!accountLinkInProgress) {
+      return { upper: upper2, lower: lower2 };
+    }
+    switch (true) {
+      // Email or phone input
+      case (!accountLinkInProgress.identifier && (accountLinkInProgress.type === "EMAIL" || accountLinkInProgress.type === "PHONE")):
+        upper2 = heroSpinner;
+        lower2 = /* @__PURE__ */ jsx(
+          AuthInput,
+          {
+            disableEmailLogin: accountLinkInProgress.type !== "EMAIL",
+            disablePhoneLogin: accountLinkInProgress.type !== "PHONE",
+            onSubmit: (auth) => {
+              try {
+                linkAccount({
+                  auth
+                });
+              } catch (e) {
+                throw e;
+              }
+            },
+            error: linkAccountError === "CONFLICT" ? "Account already linked" : void 0,
+            isSubmitting: isLinkAccountPending,
+            disableSubmitButton: true,
+            children: ({ isSubmitting, onSubmit, isPending }) => {
+              return /* @__PURE__ */ jsxs(CpslButton, { variant: "primary", onClick: onSubmit, disabled: isPending || isSubmitting, fullWidth: true, children: [
+                "Link ",
+                accountLinkType === "EMAIL" ? "Email Address" : "Phone Number"
+              ] });
+            }
+          }
+        );
+        break;
+      // Verify email or phone code
+      case ((accountLinkType === "EMAIL" || accountLinkType === "PHONE") && (accountLinkInProgress == null ? void 0 : accountLinkInProgress.identifier) && status !== "success"):
+        {
+          const authInfo = extractAuthInfo(
+            accountLinkType === "EMAIL" ? { email: accountLinkInProgress.identifier } : { phone: accountLinkInProgress.identifier },
+            { isRequired: true }
+          );
+          lower2 = /* @__PURE__ */ jsx(
+            VerificationCode,
+            {
+              authInfo,
+              onSubmit: verifyEmailOrPhoneLink,
+              onResend: () => {
+                resendVerificationCode({ type: "LINK_ACCOUNT" });
+              },
+              status: linkAccountStatus,
+              error: linkAccountError
+            }
+          );
+        }
+        break;
+      // Farcaster Connect QR
+      case (accountLinkType === "FARCASTER" && status !== "success"):
+        lower2 = /* @__PURE__ */ jsx(FarcasterConnectQR, {});
+        break;
+      // OAuth, External Wallet, Telegram
+      default:
+        upper2 = heroSpinner;
+        switch (true) {
+          case accountLinkType === "EXTERNAL_WALLET":
+            {
+              if (commonWallet && walletDisplayHelpers.showMobile) {
+                upper2 = status === "success" || status === "error" ? heroSpinner : /* @__PURE__ */ jsx(
+                  ExternalWalletMobileConnect,
+                  {
+                    wallet: commonWallet,
+                    isSelfFetching: true,
+                    onConnectWc: (w) => __async(this, null, function* () {
+                      yield linkAccount({ externalWallet: { internalId: w.internalId, type: w.type } });
+                    })
+                  }
+                );
+              }
+              lower2 = linkAccountError ? tryAgain : null;
+            }
+            break;
+          case accountLinkType === "TELEGRAM":
+            lower2 = /* @__PURE__ */ jsx(
+              TelegramIFrame,
+              {
+                url,
+                isLoaded,
+                setIsLoaded,
+                isVisible: status === "error" || status === "idle"
+              }
+            );
+            break;
+          case (status === "error" && !!accountLinkInProgress):
+            lower2 = tryAgain;
+            break;
+        }
+        break;
+    }
+    return {
+      upper: upper2,
+      lower: lower2
+    };
+  }, [
+    linkAccountError,
+    accountLinkType,
+    accountLinkInProgress,
+    telegramStatus,
+    url,
+    isLoaded,
+    linkAccount,
+    status,
+    isTelegram,
+    externalWalletType,
+    commonWallet,
+    walletDisplayHelpers.showMobile
+  ]);
+  useEffect(() => {
+    return () => {
+      resetMutations();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    upper,
+    lower
+  ] });
+}
+export {
+  AccountProfileLink
+};

package/dist/modal/components/Account/AccountProfileLinkOptions.d.ts

@@ -0,0 +1 @@
+export declare function AccountProfileLinkOptions(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,111 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AuthInput } from "../AuthInput/AuthInput.js";
+import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
+import styled from "styled-components";
+import { CpslButton, CpslDivider, CpslText } from "@getpara/react-components";
+import { getAccountTypeName } from "../../constants/oAuthLogos.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useEffect, useMemo } from "react";
+import { EXTERNAL_WALLET_TYPES } from "@getpara/web-sdk";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+function isExternalWallet(str) {
+  return EXTERNAL_WALLET_TYPES.includes(str);
+}
+function AccountProfileLinkOptions() {
+  const para = useInternalClient();
+  const { accountLinkOptions, linkAccount, isLinkAccountPending, linkAccountError, setLinkAccountError, resetMutations } = useAccountLinking();
+  const { wallet: connectedWallet, wallets } = useExternalWallets();
+  const [isEmail, isPhone, externalWalletIndex, isOptions] = [
+    accountLinkOptions.includes("EMAIL"),
+    accountLinkOptions.includes("PHONE"),
+    accountLinkOptions.indexOf("EXTERNAL_WALLET"),
+    (accountLinkOptions || []).filter((o) => o !== "EMAIL" && o !== "PHONE").length > 0
+  ];
+  const options = useMemo(() => {
+    const baseOptions = externalWalletIndex >= 0 ? [
+      ...accountLinkOptions.slice(0, externalWalletIndex),
+      ...EXTERNAL_WALLET_TYPES,
+      ...accountLinkOptions.slice(externalWalletIndex + 1)
+    ] : accountLinkOptions;
+    return Array.from(
+      new Set(
+        baseOptions.filter((option) => {
+          if (!isExternalWallet(option) || (connectedWallet == null ? void 0 : connectedWallet.internalId) !== option && wallets.some(({ type, internalId, installed, isMobile }) => {
+            return (installed || isMobile) && (para == null ? void 0 : para.supportedWalletTypes.some((obj) => obj.type === type)) && internalId === option;
+          })) {
+            return true;
+          }
+          return false;
+        })
+      )
+    );
+  }, [accountLinkOptions, externalWalletIndex, wallets]);
+  useEffect(() => {
+    resetMutations();
+    setLinkAccountError(null);
+  }, []);
+  const getExternalWalletType = (internalId) => {
+    const allWallets = wallets.filter((wallet) => wallet.internalId === internalId);
+    if (allWallets.length === 1) {
+      return allWallets[0].type;
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsxs(Content, { children: [
+    (isEmail || isPhone) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        AuthInput,
+        {
+          disableEmailLogin: !isEmail,
+          disablePhoneLogin: !isPhone,
+          onSubmit: (auth) => {
+            linkAccount({
+              auth
+            });
+          },
+          error: linkAccountError ? linkAccountError === "CONFLICT" ? "Account already linked" : "An unknown error occurred" : void 0,
+          isSubmitting: isLinkAccountPending
+        }
+      ),
+      isOptions && /* @__PURE__ */ jsx(CpslDivider, { children: "or" })
+    ] }),
+    isOptions && /* @__PURE__ */ jsx(GradientScroll, { height: "320px", children: options.filter((option) => option !== "EMAIL" && option !== "PHONE").map((option) => {
+      const isWallet = isExternalWallet(option);
+      return /* @__PURE__ */ jsxs(
+        Option,
+        {
+          fullWidth: true,
+          variant: "tertiary",
+          onClick: () => linkAccount(
+            isWallet ? { externalWallet: { internalId: option, type: getExternalWalletType(option) } } : { type: option }
+          ),
+          children: [
+            /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: option, size: "24px" }),
+            /* @__PURE__ */ jsx(CpslText, { color: "contrast", variant: "bodyM", children: getAccountTypeName(option) })
+          ]
+        },
+        option
+      );
+    }) })
+  ] }) });
+}
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+`;
+const Option = styled(CpslButton)`
+  --button-justify-content: flex-start;
+
+  height: 48px;
+  display: flex;
+  align-items: flex-start;
+`;
+export {
+  AccountProfileLinkOptions
+};

package/dist/modal/components/Account/AccountProfileUnlink.d.ts

@@ -0,0 +1 @@
+export declare function AccountProfileUnlink(): import("react/jsx-runtime").JSX.Element;