@getpara/react-sdk-lite 2.0.0-alpha.33

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

@@ -0,0 +1,168 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
+import { CpslButton, CpslIcon, CpslIdenticon, CpslText } from "@getpara/react-components";
+import { 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, _f;
+  const para = useClient();
+  const { data: linkedAccounts } = useLinkedAccounts();
+  const { isEnabled, linkAccount, unlinkAccount } = useAccountLinking();
+  if (!para) {
+    return null;
+  }
+  const externalWallet = (_a = para.authInfo) == null ? void 0 : _a.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: (_c = (_b = externalWallet.ensName) != null ? _b : getAccountTypeName(externalWallet.providerId)) != null ? _c : "",
+          address: (_d = externalWallet.addressBech32) != null ? _d : externalWallet.address,
+          addressShort: truncateAddress((_e = externalWallet.addressBech32) != null ? _e : externalWallet.address, externalWallet.type, {
+            prefix: para.cosmosPrefix
+          })
+        },
+        externalWallet.address
+      ) : (_f = para == null ? void 0 : para.availableWallets) == null ? void 0 : _f.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 = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+`;
+const Content = safeStyled(Section)``;
+const Title = safeStyled(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 = safeStyled.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 { 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";
+import { safeStyled } from "@getpara/react-common";
+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 = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+`;
+const Option = safeStyled(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;

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

@@ -0,0 +1,47 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslText } from "@getpara/react-components";
+import { useEffect, useState } from "react";
+import { AccountTypeIcon } from "../common.js";
+import { getAccountTypeName } from "../../constants/oAuthLogos.js";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { safeStyled } from "@getpara/react-common";
+function AccountProfileUnlink() {
+  var _a, _b;
+  const { unlinkingAccount, unlinkAccountConfirm, isUnlinkAccountPending } = useAccountLinking(), [accountType, setAccountType] = useState((_b = (_a = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a.providerId) != null ? _b : unlinkingAccount == null ? void 0 : unlinkingAccount.type);
+  useEffect(() => {
+    var _a2, _b2;
+    if (unlinkingAccount) {
+      setAccountType((_b2 = (_a2 = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a2.providerId) != null ? _b2 : unlinkingAccount == null ? void 0 : unlinkingAccount.type);
+    }
+  }, [unlinkingAccount]);
+  return /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsxs(Upper, { children: [
+      /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, size: "80px", inset: "5px" }),
+      /* @__PURE__ */ jsxs(Message, { variant: "bodyM", weight: "semiBold", color: "contrast", children: [
+        "Are you sure you want to unlink your ",
+        getAccountTypeName(accountType, { inline: true }),
+        "?"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CpslButton, { variant: "destructive", fullWidth: true, onClick: unlinkAccountConfirm, disabled: isUnlinkAccountPending, children: "Confirm" })
+  ] });
+}
+const Content = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 32px;
+`;
+const Upper = safeStyled(Content)`
+  gap: 8px;
+`;
+const Message = safeStyled(CpslText)`
+  text-align: center;
+  max-width: 342px;
+`;
+export {
+  AccountProfileUnlink
+};

package/dist/modal/components/AddFunds/AddFunds.d.ts

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

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

@@ -0,0 +1,69 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EnabledFlow } from "@getpara/web-sdk";
+import { InnerStepContainer, StepContainer } from "../common.js";
+import { CpslIcon, CpslSpinner, CpslTab, CpslTabs } from "@getpara/react-components";
+import { OnRampStep } from "../../stores/index.js";
+import { useModalStore } from "../../stores/modal/useModalStore.js";
+import { useEffect, useMemo } from "react";
+import { getAddFundsStep } from "../../utils/steps.js";
+import { safeStyled } from "@getpara/react-common";
+import { useAccount, useWallet } from "../../../provider/index.js";
+import { AddFundsProvider } from "./AddFundsProvider.js";
+import { AddFundsReceive } from "./AddFundsReceive.js";
+import { AddFundsContextProvider, TABS } from "./AddFundsContext.js";
+import { AnimatePresence } from "framer-motion";
+import { AddFundsSettings } from "./AddFundsSettings.js";
+const AddFunds = () => {
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const onRampStep = useModalStore((state) => state.onRampStep);
+  const storedTab = useModalStore((state) => state.accountAddFundTab);
+  const setModalStep = useModalStore((state) => state.setStep);
+  const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
+  const { data: activeWallet } = useWallet();
+  const { embedded } = useAccount();
+  const isGuestMode = (embedded == null ? void 0 : embedded.isConnected) && embedded.isGuestMode;
+  const tabs = TABS.filter(
+    ([enabledFlow, key]) => !!(onRampConfig == null ? void 0 : onRampConfig[key]) && (!isGuestMode || enabledFlow === EnabledFlow.RECEIVE)
+  );
+  const tab = storedTab != null ? storedTab : tabs[0][0];
+  const isMultiFlow = tabs.length > 1;
+  const onSetTab = (event) => {
+    setModalStep(getAddFundsStep(event.detail.tab));
+  };
+  const Content = useMemo(() => {
+    switch (tab) {
+      case EnabledFlow.BUY:
+      case EnabledFlow.WITHDRAW: {
+        switch (onRampStep) {
+          case OnRampStep.SETTINGS:
+            return /* @__PURE__ */ jsx(AddFundsSettings, {});
+          case OnRampStep.PROVIDER:
+            return /* @__PURE__ */ jsx(AddFundsProvider, {});
+        }
+      }
+      default:
+        return /* @__PURE__ */ jsx(AddFundsReceive, {});
+    }
+  }, [onRampStep, tab]);
+  useEffect(() => {
+    setOnRampPurchase(void 0);
+  }, []);
+  if (!onRampConfig || !activeWallet) {
+    return /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, {}) });
+  }
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    isMultiFlow && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: TABS.map(([tab2, _, icon, title]) => /* @__PURE__ */ jsxs(CpslTab, { tab: tab2, children: [
+      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon }),
+      title
+    ] }, tab2)) }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AddFundsContextProvider, { "data-testid": "add-funds", tab, children: Content }) })
+  ] });
+};
+const SpinnerContainer = safeStyled(StepContainer)`
+  margin: 50% 0;
+`;
+export {
+  AddFunds
+};

package/dist/modal/components/AddFunds/AddFundsAsset.d.ts

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