@getpara/react-sdk 2.0.0-dev.1 → 2.0.0-dev.3

package/dist/modal/ParaModal.js

@@ -0,0 +1,301 @@
+"use client";
+import {
+  __async,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { CpslAuthModal, defineCustomElements, generateTheme } from "@getpara/react-components";
+import { ModalContent } from "./components/index.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { useModalStore } from "./stores/index.js";
+import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from "./utils/steps.js";
+import { AuthLayout } from "./types/modalProps.js";
+import { DEFAULTS } from "./constants/defaults.js";
+import { useGoBack } from "./hooks/useGoBack.js";
+import { safeStyled } from "@getpara/react-common";
+import { hasEmbeddedAuth, hasExternalWallet } from "./utils/authLayoutHelpers.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";
+import parsePhoneNumberFromString from "libphonenumber-js";
+import { useAuthActions } from "../provider/providers/AuthProvider.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);
+  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 goBack = useGoBack();
+  const setAuthLayout = useModalStore((state) => state.setAuthLayout);
+  const storedAuthLayout = useModalStore((state) => state.authLayout);
+  const resetModalState = useModalStore((state) => state.resetState);
+  const setRecoveryShare = useModalStore((state) => state.setRecoveryShare);
+  const { disconnectExternalWallet } = useExternalWallets();
+  const { isOpen: storedIsOpen, closeModal } = useModal();
+  const para = useInternalClient();
+  const { setSelectedWallet, updateSelectedWallet } = useWalletState();
+  const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
+  const { signUpOrLogIn, isCreateGuestWalletsPending } = useAuthActions();
+  const { isLoading: isAccountLoading, isConnected } = useAccount();
+  const [isModalMounted, setIsModalMounted] = useState(false);
+  const externalWallets = useStore((state) => state.externalWallets);
+  const providerProps = useStore((state) => state.providerProps);
+  const setAccountLinkOptions = useModalStore((state) => state.setAccountLinkOptions);
+  const isInitialized = useRef(false);
+  const _a = __spreadValues(__spreadValues({}, storedModalConfig), props), {
+    isOpen: configIsOpen,
+    theme,
+    disableEmailLogin = false,
+    disablePhoneLogin = false,
+    isGuestModeEnabled = false,
+    oAuthMethods = ["GOOGLE", "TWITTER"],
+    bareModal = false,
+    className,
+    currentStepOverride,
+    authLayout = [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL],
+    embeddedModal,
+    onModalStepChange,
+    onClose,
+    defaultAuthIdentifier,
+    supportedAccountLinks: propsSupportedAccountLinks
+  } = _a, rest = __objRest(_a, [
+    "isOpen",
+    "theme",
+    "disableEmailLogin",
+    "disablePhoneLogin",
+    "isGuestModeEnabled",
+    "oAuthMethods",
+    "bareModal",
+    "className",
+    "currentStepOverride",
+    "authLayout",
+    "embeddedModal",
+    "onModalStepChange",
+    "onClose",
+    "defaultAuthIdentifier",
+    "supportedAccountLinks"
+  ]);
+  useEffect(() => {
+    const trackAnalytics = () => __async(void 0, null, function* () {
+      try {
+        yield para.ctx.client.trackReactSdkAnalytics({
+          props: __spreadValues(__spreadProps(__spreadValues({}, providerProps), {
+            theme,
+            disableEmailLogin,
+            disablePhoneLogin,
+            isGuestModeEnabled,
+            oAuthMethods,
+            bareModal,
+            className,
+            currentStepOverride,
+            authLayout,
+            embeddedModal,
+            onModalStepChange,
+            onClose,
+            defaultAuthIdentifier
+          }), rest),
+          reactSdkVersion: SDK_VERSION
+        });
+      } catch (_) {
+      }
+    });
+    trackAnalytics();
+  }, []);
+  const isOpen = configIsOpen != null ? configIsOpen : storedIsOpen;
+  useImperativeHandle(ref, () => {
+    return {
+      goBack() {
+        goBack();
+      },
+      canGoBack() {
+        return hasPreviousStep;
+      },
+      currentStep() {
+        return currentStep;
+      },
+      handleModalClose() {
+        var _a2;
+        (_a2 = modalContentRef == null ? void 0 : modalContentRef.current) == null ? void 0 : _a2.handleModalClose();
+      }
+    };
+  }, [hasPreviousStep, currentStep]);
+  const initModal = (shouldAutoLogin) => __async(void 0, null, function* () {
+    var _a2;
+    if (!para.isReady) {
+      return;
+    }
+    const isAccount = isConnected, isGuest = isAccount && para.isGuestMode || isCreateGuestWalletsPending;
+    switch (true) {
+      case !!currentStepOverride:
+        setStep(ModalStep[currentStepOverride.toUpperCase()]);
+        break;
+      case isGuest:
+        setFlow("guest");
+        setStep(isCreateGuestWalletsPending ? ModalStep.AWAITING_GUEST_WALLET_CREATION : ModalStep.ACCOUNT_MAIN);
+        break;
+      case isAccount:
+        setFlow("account");
+        if (!openedToStep.current) {
+          setStep(ModalStep.ACCOUNT_MAIN);
+        }
+        break;
+      default:
+        if (currentStep !== ModalStep.AUTH_MAIN && currentStep !== ModalStep.SECRET) {
+          setFlow(void 0);
+          setStep(para.isTelegram ? ModalStep.TELEGRAM_OAUTH : ModalStep.AUTH_MAIN);
+          setAuthState();
+          setAuthStepRoute();
+        }
+        yield disconnectExternalWallet();
+        setSelectedWallet({ id: void 0, type: void 0 });
+        if (shouldAutoLogin) {
+          if (defaultAuthIdentifier && ((_a2 = para.authInfo) == null ? void 0 : _a2.identifier) !== defaultAuthIdentifier) {
+            const number = parsePhoneNumberFromString(defaultAuthIdentifier);
+            try {
+              const auth = validateInput(
+                number ? number.nationalNumber : defaultAuthIdentifier,
+                (number == null ? void 0 : number.countryCallingCode) ? `+${number == null ? void 0 : number.countryCallingCode}` : void 0,
+                number ? "phone" : "email"
+              );
+              para.setAuth(number ? { phone: defaultAuthIdentifier } : { email: defaultAuthIdentifier });
+              signUpOrLogIn(auth);
+            } catch (err) {
+              console.error("invalid user identifier:", err.message);
+            }
+          }
+        }
+        break;
+    }
+  });
+  useEffect(() => {
+    if ((para == null ? void 0 : para.isReady) && isOpen && !isAccountLoading && !isInitialized.current) {
+      initModal(isOpen);
+      isInitialized.current = true;
+    }
+    if ((para == null ? void 0 : para.isReady) && !isOpen && isInitialized.current) {
+      initModal();
+      isInitialized.current = false;
+    }
+  }, [para == null ? void 0 : para.isReady, isOpen, isAccountLoading]);
+  useEffect(() => {
+    let _authLayout = authLayout;
+    if (!(externalWallets == null ? void 0 : externalWallets.length) && hasExternalWallet(authLayout)) {
+      _authLayout = _authLayout.filter((l) => !l.includes("EXTERNAL"));
+    }
+    if (disableEmailLogin && disablePhoneLogin && !(oAuthMethods == null ? void 0 : oAuthMethods.length) && hasEmbeddedAuth(authLayout)) {
+      _authLayout = _authLayout.filter((l) => !l.includes("AUTH"));
+    }
+    if (JSON.stringify(storedAuthLayout) !== JSON.stringify(_authLayout)) {
+      setAuthLayout(_authLayout);
+    }
+  }, [disableEmailLogin, disablePhoneLogin, oAuthMethods, externalWallets, authLayout, storedAuthLayout]);
+  useEffect(() => {
+    if (theme) {
+      generateTheme(theme);
+    }
+  }, [theme]);
+  useEffect(() => {
+    setOnModalStepChange(onModalStepChange);
+  }, [onModalStepChange]);
+  useEffect(() => {
+    updateSelectedWallet();
+  }, [para]);
+  useEffect(() => {
+    if (bareModal && !isAccountLoading && !isConnected && !["signup", "login"].includes(flow != null ? flow : "") && refs.currentStep.current !== ModalStep.AUTH_MAIN) {
+      setStep(ModalStep.AUTH_MAIN);
+    }
+  }, [bareModal, flow, isConnected, isAccountLoading]);
+  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();
+  };
+  const handleModalEntering = () => {
+    setIsModalMounted(true);
+  };
+  const handleModalExited = () => __async(void 0, null, function* () {
+    openedToStep.current = null;
+    setIsModalMounted(false);
+    if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
+      resetModalState();
+      setRecoveryShare(null);
+    } else if (RESET_TO_ACCOUNT_STEPS.includes(currentStep)) {
+      setStep(ModalStep.LOGIN_DONE);
+    }
+  });
+  if (!para) {
+    console.error("A Para instance is required.");
+    return null;
+  }
+  if (!(storedAuthLayout == null ? void 0 : storedAuthLayout.length)) {
+    const hasExternalWalletError = !(externalWallets == null ? void 0 : externalWallets.length) && hasExternalWallet(authLayout);
+    const hasEmbeddedWalletError = disableEmailLogin && disablePhoneLogin && !(oAuthMethods == null ? void 0 : oAuthMethods.length) && hasEmbeddedAuth(authLayout);
+    if (hasExternalWalletError || hasEmbeddedWalletError) {
+      if (hasExternalWalletError) {
+        console.error("At least one external wallet must be provided if external wallet auth is enabled.");
+      }
+      if (hasEmbeddedWalletError) {
+        console.error(
+          "At least one login method (email, phone or OAuth) must be provided if embedded wallet auth is enabled."
+        );
+      }
+    } else {
+      console.error("At least one auth layout selection is required.");
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    StyledAuthModal,
+    {
+      enterTransitionDuration: DEFAULTS.ANIMATION_DURATION,
+      exitTransitionDuration: DEFAULTS.ANIMATION_DURATION,
+      open: isOpen,
+      onCpslModalExited: handleModalExited,
+      onCpslModalEntering: handleModalEntering,
+      onCpslModalRequestClose: handleClose,
+      noOverlay: bareModal,
+      className,
+      "data-testid": "modal",
+      $embeddedModal: !!embeddedModal,
+      children: isModalMounted && ((embeddedModal || bareModal) && isInitialized.current || !embeddedModal && !bareModal) && /* @__PURE__ */ jsx(
+        ModalContent,
+        __spreadValues({
+          oAuthMethods,
+          disableEmailLogin,
+          disablePhoneLogin,
+          isGuestModeEnabled,
+          onClose: handleClose
+        }, rest)
+      )
+    }
+  );
+});
+const StyledAuthModal = safeStyled(CpslAuthModal)`
+  ${({ $embeddedModal }) => $embeddedModal && `
+    &::part(modal-body-card) {
+    --card-box-shadow: none;
+    --card-border-width: 0px;
+  };
+
+  &::part(modal-footer) {
+    --card-box-shadow: none;
+    --card-border-width: 0px;
+  };`}
+`;
+export {
+  ParaModal
+};

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

@@ -0,0 +1,148 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled } from "@getpara/react-common";
+import { InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
+import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
+import { OnRampStep, useModalStore } from "../../stores/index.js";
+import { useEffect, useState } from "react";
+import { ModalStep } from "../../utils/steps.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+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);
+  const setFlow = useModalStore((state) => state.setFlow);
+  const setGuestAddFundsTab = useModalStore((state) => state.setGuestAddFundsTab);
+  const setOnRampStep = useModalStore((state) => state.setOnRampStep);
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
+  const { disconnectExternalWallet } = useExternalWallets();
+  const para = useInternalClient();
+  const { embedded } = useAccount();
+  const { data: balance, isLoading: isBalanceLoading } = useWalletBalance();
+  const { isEnabled } = useAccountLinking();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const isGuestMode = embedded.isConnected && embedded.isGuestMode;
+  const cantBuyAndWithdraw = (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") && !para.userId;
+  const isOnRampLoaded = !!onRampConfig;
+  const handleBuyClick = () => {
+    if (isGuestMode) {
+      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 handleSellClick = () => {
+    if (isGuestMode) {
+      setGuestAddFundsTab(EnabledFlow.WITHDRAW);
+      setStep(ModalStep.AUTH_GUEST_SIGNUP);
+    } else {
+      setOnRampStep(OnRampStep.SETTINGS);
+      setStep(ModalStep.ADD_FUNDS_WITHDRAW);
+    }
+  };
+  const handleProfileClick = () => {
+    setStep(ModalStep.ACCOUNT_PROFILE);
+  };
+  const handleDisconnectClick = () => __async(void 0, null, function* () {
+    setIsDisconnecting(true);
+    yield para.logout();
+    yield disconnectExternalWallet();
+    onClose();
+    setStep(ModalStep.AUTH_MAIN);
+    setFlow(void 0);
+    setIsDisconnecting(false);
+  });
+  useEffect(() => {
+    setGuestAddFundsTab();
+  }, []);
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+    isBalanceLoading ? /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 39 }) }) : balance !== void 0 && balance !== null && /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslText, { variant: "headingS", weight: "medium", children: formatBalanceString(balance) }) }),
+    isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+      balance && parseFloat(balance) > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
+        /* @__PURE__ */ jsx(CpslIcon, { icon: "alertTriangle", size: "24px", style: { color: "var(--cpsl-color-utility-yellow)" } }),
+        "You've funded this account - complete account setup to maintain access."
+      ] }),
+      /* @__PURE__ */ jsxs(
+        CpslButton,
+        {
+          fullWidth: true,
+          variant: "primary",
+          onClick: () => {
+            setStep(ModalStep.AUTH_GUEST_SIGNUP);
+          },
+          children: [
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "stars02" }),
+            "Complete Account Setup"
+          ]
+        }
+      )
+    ] }),
+    /* @__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: "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",
+      /* @__PURE__ */ jsx(CpslIcon, { icon: "logOut", slot: "end" })
+    ] }) })
+  ] }) });
+};
+const ButtonContainer = safeStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 88px;
+`;
+const OptionButton = safeStyled(StyledCpslTileButton)`
+  flex: 1;
+
+  --button-icon-color: var(--cpsl-color-text-primary);
+`;
+const DisconnectButton = safeStyled(CpslButton)`
+  --button-border-width: 0px;
+`;
+const BalanceContainer = safeStyled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 8px;
+  padding-bottom: 24px;
+`;
+const Alert = safeStyled.div`
+  --icon-color: var(--cpsl-color-utility-yellow);
+  --icon-stroke-color: var(--cpsl-color-utility-yellow);
+  --icon-fill-color: var(--cpsl-color-utility-yellow);
+
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: var(--cpsl-border-radius-alert);
+  border: 1px solid var(--cpsl-color-utility-yellow);
+  background: var(--cpsl-color-utility-yellow-light);
+  font-size: 14px;
+`;
+export {
+  Account
+};

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,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;