@getpara/react-sdk 1.6.1-dev.0 → 1.7.0

package/dist/modal/components/Controls/Selects.js

@@ -1,213 +0,0 @@
-"use client";
-import {
-  __async,
-  __spreadProps,
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CpslIdenticon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import styled from "styled-components";
-import { useThemeStore } from "../../stores/index.js";
-import { truncateAddress, WalletType } from "@getpara/web-sdk";
-import { useEffect, useRef } from "react";
-import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
-import { MOBILE_SIZE } from "../../constants/constants.js";
-import { useActiveWallet } from "../../hooks/useActiveWallet.js";
-import { useWalletState } from "../../../provider/index.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-const getValue = (id, type) => {
-  return id && type ? `${id}~${type}` : void 0;
-};
-const WALLET_TYPES = {
-  [WalletType.EVM]: "EVM",
-  [WalletType.SOLANA]: "Solana",
-  [WalletType.COSMOS]: "Cosmos"
-};
-const ChainSelect = () => {
-  var _a, _b;
-  const containerRef = useRef(null);
-  const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
-  const activeWallet = useActiveWallet();
-  const { switchChain, chainId, chains, chainIdSwitchingTo } = useExternalWallets();
-  useEffect(() => {
-    if (dropdownMaxHeight && chainId) {
-      resize();
-    }
-  }, [chainId, chainIdSwitchingTo, dropdownMaxHeight]);
-  const handleChainChange = (chainId2) => __async(void 0, null, function* () {
-    yield switchChain(chainId2);
-  });
-  if (!activeWallet || !activeWallet.isExternal || activeWallet.type === WalletType.SOLANA) {
-    return null;
-  }
-  const chainIdToUse = chainIdSwitchingTo != null ? chainIdSwitchingTo : chainId;
-  const selectedChainName = (_a = chains.find((c) => c.id.toString() === chainIdToUse)) == null ? void 0 : _a.name;
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "inputContainer", children: /* @__PURE__ */ jsxs(
-    StyledSelect,
-    {
-      selectedValue: (_b = chainIdToUse == null ? void 0 : chainIdToUse.toString()) != null ? _b : "",
-      onCpslSelectValueChange: (e) => {
-        handleChainChange(e.detail);
-      },
-      showFormattedSelectedItem: true,
-      placeholder: "Choose chain...",
-      anchorElId: "inputContainer",
-      dropdownMaxHeight,
-      $width: dropdownWidth,
-      $top: mobileAnchor + 16 + 1,
-      autoWidth: true,
-      selectedItemVariant: "bodyXS",
-      children: [
-        chainIdToUse && /* @__PURE__ */ jsx(ChainName, { variant: "bodyXS", color: "contrast", slot: "selected-item", children: selectedChainName }),
-        chains == null ? void 0 : chains.map((chain) => /* @__PURE__ */ jsx(StyledSelectItem, { slot: "items", value: chain.id.toString(), children: /* @__PURE__ */ jsx(ChainName, { variant: "bodyXS", color: "contrast", children: chain.name }) }, chain.id))
-      ]
-    }
-  ) }) });
-};
-function getName(para, {
-  type,
-  isExternal,
-  name,
-  isMenu = false,
-  hideWallets = false
-}) {
-  if (para.isMultiWallet) {
-    return name != null ? name : `${isExternal ? "External " : ""}${WALLET_TYPES[type]}${!hideWallets && (isMenu || isExternal) ? " Wallet" : ""}`;
-  }
-  return hideWallets ? "My Account" : name || "My Wallet";
-}
-const AccountSelect = () => {
-  var _a;
-  const hideWallets = useThemeStore((state) => state.hideWallets);
-  const para = useInternalClient();
-  const containerRef = useRef(null);
-  const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
-  const { setSelectedWallet } = useWalletState();
-  const activeWallet = useActiveWallet();
-  const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsxs(FlexRow, { slot: "selected-item", children: [
-    /* @__PURE__ */ jsx(CpslIdenticon, { variant: "avatar", size: "14px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }),
-    /* @__PURE__ */ jsx(WalletName, { variant: "bodyXS", color: "contrast", children: getName(para, __spreadProps(__spreadValues({}, activeWallet), { hideWallets })) }),
-    !hideWallets && /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: (_a = activeWallet.ensName) != null ? _a : para.getDisplayAddress(activeWallet.id, { truncate: true, addressType: activeWallet.type }) })
-  ] }) : null;
-  useEffect(() => {
-    if (dropdownMaxHeight && (activeWallet == null ? void 0 : activeWallet.address)) {
-      resize();
-    }
-  }, [activeWallet, para.availableWallets, dropdownMaxHeight]);
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: para.availableWallets.length > 1 ? /* @__PURE__ */ jsxs(
-    StyledSelect,
-    {
-      selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
-      onCpslSelectValueChange: (e) => {
-        const [id, type] = e.detail.split("~");
-        setSelectedWallet({ id, type });
-      },
-      showFormattedSelectedItem: true,
-      placeholder: "Choose wallet...",
-      anchorElId: "addressInputContainer",
-      dropdownMaxHeight,
-      $width: dropdownWidth,
-      $top: mobileAnchor + 16 + 1,
-      autoWidth: true,
-      selectedItemVariant: "bodyXS",
-      children: [
-        activeWallet && ActiveWalletNode,
-        para.availableWallets.map(({ address, name: _name, id, type, isExternal }) => {
-          const key = getValue(id, type);
-          const name = _name != null ? _name : getName(para, { type, isExternal, isMenu: true, hideWallets });
-          return /* @__PURE__ */ jsx(StyledSelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsxs(FlexRow, { children: [
-            /* @__PURE__ */ jsx(CpslIdenticon, { size: "40px", hash: para.getIdenticonHash(id, type) }),
-            /* @__PURE__ */ jsxs(FlexCol, { children: [
-              name && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "contrast", children: name }),
-              !hideWallets && /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: truncateAddress(address, type, { prefix: para.cosmosPrefix }) })
-            ] })
-          ] }) }, key);
-        })
-      ]
-    }
-  ) : ActiveWalletNode }) });
-};
-const Container = styled.div`
-  flex: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-`;
-const FlexRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const FlexCol = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`;
-const WalletName = styled(CpslText)`
-  white-space: nowrap;
-`;
-const SelectContainer = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-radius: 1000px;
-  background-color: var(--cpsl-color-background-8);
-  padding: 8px;
-`;
-const ChainName = styled(CpslText)`
-  max-width: 150px;
-  text-transform: capitalize;
-
-  &::part(text-element) {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-`;
-const StyledSelect = styled(CpslSelect)`
-  --container-height: auto;
-  --container-border-width: 0px;
-  --container-padding-end: 0px;
-  --container-padding-start: 0px;
-  --container-background-color: transparent;
-  --container-box-shadow: none;
-  --container-gap: 2px;
-  --icon-width: 16px;
-  --icon-height: 16px;
-
-  &::part(selected-text) {
-    white-space: nowrap;
-  }
-
-  &::part(dropdown) {
-    min-width: ${({ $width }) => `${$width - 2}px`};
-  }
-
-  &::part(popover) {
-    /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
-    @media (max-width: ${MOBILE_SIZE}px) {
-      top: ${({ $top }) => $top ? `${$top}px` : "0px"};
-      bottom: 16px;
-    }
-    cpsl-auth-modal.force-mobile-media & {
-      top: ${({ $top }) => $top ? `${$top}px` : "0px"};
-      bottom: 16px;
-    }
-  }
-
-  &::part(icon) {
-    --icon-color: var(--cpsl-color-contrast);
-  }
-`;
-const StyledSelectItem = styled(CpslSelectItem)`
-  --outer-container-padding-start: 4px;
-  --outer-container-padding-end: 4px;
-  --outer-container-padding-top: 4px;
-  --outer-container-padding-bottom: 4px;
-`;
-export {
-  AccountSelect,
-  ChainSelect
-};

package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.js

@@ -1,151 +0,0 @@
-"use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { CenteredText, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useEffect, useMemo } from "react";
-import { useModalStore } from "../../stores/index.js";
-import styled from "styled-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import { useCopyToClipboard } from "@getpara/react-common";
-import { ModalStep } from "../../utils/steps.js";
-import { isMobile, isTablet, WalletType } from "@getpara/web-sdk";
-import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
-const ExternalWalletStep = () => {
-  const [isCopied, copy] = useCopyToClipboard();
-  const externalWalletError = useModalStore((state) => state.externalWalletError);
-  const setStep = useModalStore((state) => state.setStep);
-  const { connectExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
-  useEffect(() => {
-    routeMobileExternalWallet(qrUri);
-  }, [qrUri]);
-  const handleTryAgainClick = () => __async(void 0, null, function* () {
-    yield connectExternalWallet(wallet);
-  });
-  const handleCopy = () => {
-    copy(qrUri);
-  };
-  const Content = useMemo(() => {
-    var _a, _b, _c;
-    if (!wallet) {
-      return null;
-    }
-    const isWalletConnect = wallet.id === "walletConnect";
-    const isMobileWalletConnect = isMobile() && isWalletConnect;
-    if (isMobileWalletConnect) {
-      /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: "Continue in the WalletConnect modal." }) });
-    }
-    const { showExtension, showMobile, isSolanaMobileIOS } = walletDisplayHelpers;
-    if (!showMobile && !showExtension || isSolanaMobileIOS && !wallet.installed) {
-      const text = isSolanaMobileIOS ? "Solana wallets aren't available on mobile IOS browsers.\n\nPlease continue in the wallet app." : `${wallet.name} isn't supported on mobile devices.
-
-Please choose another wallet or continue on desktop.`;
-      return /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: text }) });
-    }
-    if (showExtension) {
-      const isInstalled = wallet.installed;
-      return /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-        isInstalled && !(externalWalletError == null ? void 0 : externalWalletError.length) ? /* @__PURE__ */ jsx(CenteredText, { color: "contrast", weight: "semiBold", children: `Confirm connection request in the ${wallet.name} browser extension.` }) : /* @__PURE__ */ jsxs(ErrorContainer, { children: [
-          /* @__PURE__ */ jsx(ErrorIcon, { icon: "alertCircle" }),
-          /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: isInstalled ? externalWalletError == null ? void 0 : externalWalletError[0] : `${wallet.name} not detected` })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          CpslButton,
-          {
-            as: isInstalled ? "button" : "a",
-            href: (_a = wallet.downloadUrl) != null ? _a : "",
-            target: "_blank",
-            variant: "secondary",
-            onClick: handleTryAgainClick,
-            children: [
-              /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isInstalled ? "refresh" : "linkExternal" }),
-              isInstalled ? "Try Again" : `Get ${wallet.name}`
-            ]
-          }
-        )
-      ] });
-    }
-    if (showMobile) {
-      if (wallet.type === WalletType.SOLANA || isMobile() && !isTablet()) {
-        const isInstalled = wallet.type !== WalletType.SOLANA || wallet.installed;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(InnerStepContainer, { children: !isInstalled && /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: `${wallet.name} not detected` }) }),
-          wallet.id !== "walletConnect" && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-            /* @__PURE__ */ jsx(CpslButton, { onClick: () => routeMobileExternalWallet(qrUri), fullWidth: true, children: "Connect Wallet" }),
-            /* @__PURE__ */ jsx(Link, { href: (_b = wallet.downloadUrl) != null ? _b : "", target: "_blank", children: /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", children: [
-              `Get ${wallet.name}`,
-              /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
-            ] }) })
-          ] })
-        ] });
-      }
-      const openWCModal = () => __async(void 0, null, function* () {
-        yield connectExternalWallet(wallet, true, true);
-      });
-      const GetWalletButton = /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", onClick: isWalletConnect ? openWCModal : void 0, children: [
-        `${isWalletConnect ? "Open" : "Get"} ${wallet.name}`,
-        /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
-      ] });
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-          /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }),
-          /* @__PURE__ */ jsx(QRContainer, { children: !qrUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }),
-          /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
-            /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
-            isCopied ? "Copied" : "Copy Link"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(InnerStepContainer, { children: isWalletConnect ? /* @__PURE__ */ jsx(Fragment, { children: GetWalletButton }) : /* @__PURE__ */ jsx(Link, { href: (_c = wallet.downloadUrl) != null ? _c : "", target: "_blank", children: GetWalletButton }) })
-      ] });
-    }
-  }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
-  useEffect(() => {
-    if (!wallet) {
-      setStep(ModalStep.AUTH_MAIN);
-    }
-  }, [wallet]);
-  if (!wallet) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Container, { children: Content });
-};
-const Container = styled(StepContainer)`
-  flex: 1;
-  justify-content: space-between;
-`;
-const ErrorContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-`;
-const ErrorIcon = styled(CpslIcon)`
-  --height: 16px;
-  --width: 16px;
-  --icon-color: var(--cpsl-color-text-error);
-`;
-const Text = styled(CenteredText)`
-  white-space: pre-line;
-`;
-const ExternalButton = styled(CpslButton)`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  cursor: pointer;
-  margin-top: 8px;
-  text-decoration: none;
-`;
-const ExternalIcon = styled(CpslIcon)`
-  --height: 20px;
-  --width: 20px;
-`;
-const Link = styled.a`
-  text-decoration: none;
-`;
-export {
-  ExternalWalletStep
-};

package/dist/modal/components/ExternalWalletStep/config.js

@@ -1,17 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-var TabValue = /* @__PURE__ */ ((TabValue2) => {
-  TabValue2["extension"] = "extension";
-  TabValue2["mobile"] = "mobile";
-  TabValue2["web"] = "web";
-  return TabValue2;
-})(TabValue || {});
-const TABS = {
-  extension: { label: "Extension", value: "extension" /* extension */, icon: "puzzlePiece" },
-  mobile: { label: "Mobile", value: "mobile" /* mobile */, icon: "phone" },
-  web: { label: "Web", value: "web" /* web */, icon: "globe" }
-};
-export {
-  TABS,
-  TabValue
-};

package/dist/modal/components/ExternalWallets/ExternalWallets.js

@@ -1,172 +0,0 @@
-"use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import { StyledCpslTileButton } from "../common.js";
-import { CpslButton, CpslIcon, CpslInput, CpslText } from "@getpara/react-components";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { useState } from "react";
-import { hasEmbeddedAuth } from "../../utils/authLayoutHelpers.js";
-const HAS_MORE_LENGTH = 3;
-const ExternalWallets = () => {
-  const { wallets, connectExternalWallet } = useExternalWallets();
-  const setSelectedExternalWalletId = useModalStore((state) => state.setSelectedExternalWalletId);
-  const setStep = useModalStore((state) => state.setStep);
-  const showAll = useModalStore((state) => state.step === ModalStep.EX_WALLET_MORE);
-  const authLayout = useThemeStore((state) => state.authLayout);
-  const [search, setSearch] = useState("");
-  const hasMore = wallets.length > HAS_MORE_LENGTH;
-  const walletsToShow = showAll || !hasMore ? search ? wallets.filter((w) => w.name.toLowerCase().includes(search.toLowerCase())) : wallets : wallets.slice(0, HAS_MORE_LENGTH);
-  const showMoreButton = !showAll && hasMore;
-  const handleShowAll = () => {
-    setStep(ModalStep.EX_WALLET_MORE);
-  };
-  const handleParaClick = () => {
-    setStep(ModalStep.AUTH_MORE);
-  };
-  const handleWalletClick = (wallet) => () => {
-    setSelectedExternalWalletId(wallet.id);
-    setStep(ModalStep.EX_WALLET_SELECTED);
-    if (wallet.installed) {
-      connectExternalWallet(wallet);
-    } else if (wallet.isMobile) {
-      connectExternalWallet(wallet, true);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Container, { $maxHeight: showAll, children: [
-    showAll && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SearchInputWrapper, { children: /* @__PURE__ */ jsx(
-        SearchInput,
-        {
-          placeholder: "Search for your wallet",
-          onCpslInput: (e) => __async(void 0, null, function* () {
-            setSearch(e.target.value);
-          }),
-          value: search,
-          style: { width: "100%" },
-          children: /* @__PURE__ */ jsx(SearchIcon, { slot: "start", icon: "search" })
-        }
-      ) }),
-      hasEmbeddedAuth(authLayout) && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
-        /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "paraIcon" }),
-          /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: "Para" })
-        ] }),
-        /* @__PURE__ */ jsx(Badge, { $show: true, $variant: "installed", children: /* @__PURE__ */ jsx(CpslText, { variant: "body2XS", weight: "medium", children: "Available" }) })
-      ] }) })
-    ] }),
-    walletsToShow.map(
-      (wallet) => showAll ? /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleWalletClick(wallet), children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
-        /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", src: wallet.iconUrl }),
-          /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: wallet.name })
-        ] }),
-        /* @__PURE__ */ jsx(Badge, { $show: wallet.isMobile || wallet.installed, $variant: wallet.installed ? "installed" : "mobile", children: /* @__PURE__ */ jsx(CpslText, { variant: "body2XS", weight: "medium", children: wallet.installed ? "Installed" : "Mobile" }) })
-      ] }) }, wallet.id) : /* @__PURE__ */ jsx(WalletTileButton, { src: wallet.iconUrl, onClick: handleWalletClick(wallet), children: /* @__PURE__ */ jsxs(TileButtonInnerContainer, { children: [
-        wallet.installed && /* @__PURE__ */ jsx(InstalledIndicator, {}),
-        /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: wallet.name })
-      ] }) }, wallet.id)
-    ),
-    showMoreButton && /* @__PURE__ */ jsxs(CpslButton, { variant: "tertiary", fullWidth: true, onClick: handleShowAll, children: [
-      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "wallet" }),
-      "More Wallets"
-    ] }),
-    showAll && /* @__PURE__ */ jsx(BlurContainer, {})
-  ] });
-};
-const Container = styled.div`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  flex-wrap: wrap;
-
-  max-height: ${({ $maxHeight }) => $maxHeight ? "348px" : "none"};
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-`;
-const WalletTileButton = styled(StyledCpslTileButton)`
-  flex: 1;
-`;
-const WalletButtonOuterContainer = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: space-between;
-`;
-const WalletButtonInnerContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  cpsl-icon {
-    --icon-color: var(--cpsl-color-contrast);
-  }
-  cpsl-text {
-    &::part(text-element) {
-      color: var(--cpsl-color-contrast);
-    }
-  }
-`;
-const Badge = styled.div`
-  visibility: ${({ $show }) => $show ? "visible" : "hidden"};
-  padding: 2px 4px;
-  border-radius: 4px;
-  border: 1px solid;
-  border-color: ${({ $variant }) => $variant === "installed" ? "var(--cpsl-color-utility-green)" : "var(--cpsl-color-text-primary)"};
-  cpsl-text {
-    &::part(text-element) {
-      color: ${({ $variant }) => $variant === "installed" ? "var(--cpsl-color-utility-green)" : "var(--cpsl-color-text-primary)"};
-    }
-  }
-`;
-const InstalledIndicator = styled.span`
-  width: 8px;
-  height: 8px;
-  border-radius: 100%;
-  background-color: var(--cpsl-color-utility-green);
-`;
-const TileButtonInnerContainer = styled.div`
-  display: flex;
-  gap: 4px;
-  align-items: center;
-`;
-const SearchIcon = styled(CpslIcon)`
-  --icon-color: var(--cpsl-color-contrast);
-`;
-const SearchInputWrapper = styled.div`
-  width: 100%;
-  background-color: var(--cpsl-color-background-0);
-
-  position: sticky;
-  top: 0;
-  padding-bottom: 4px;
-  margin-bottom: -4px;
-`;
-const SearchInput = styled(CpslInput)`
-  width: 100%;
-  --container-background-color: var(--cpsl-color-background-8);
-  --input-background-color: var(--cpsl-color-background-8);
-`;
-const BlurContainer = styled.div`
-  position: sticky;
-  height: 56px;
-  width: 100%;
-  bottom: 0;
-
-  background: linear-gradient(0deg, var(--cpsl-color-background-0) 0%, rgba(234, 239, 211, 0) 100%);
-  pointer-events: none;
-`;
-export {
-  ExternalWallets
-};

package/dist/modal/components/ExternalWalletsWrapper/ExternalWalletsWrapper.js

@@ -1,123 +0,0 @@
-"use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { ExternalWalletProvider } from "../../providers/ExternalWalletContext.js";
-import {
-  EvmExternalWalletContext,
-  EvmExternalWalletProvider
-} from "../../providers/EvmExternalWalletContextStub.js";
-import { CosmosWallet, EvmWallet, SolanaWallet } from "../../types/externalWallets.js";
-import {
-  SolanaExternalWalletContext,
-  SolanaExternalWalletProvider
-} from "../../providers/SolanaExternalWalletContextStub.js";
-import {
-  CosmosExternalWalletContext,
-  CosmosExternalWalletProvider
-} from "../../providers/CosmosExternalWalletContextStub.js";
-import { useModalStore, useUserInfoStore } from "../../stores/index.js";
-import { useExternalWalletProviderStore } from "../../stores/externalWalletProvider/useExternalWalletProviderStore.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-const ExternalWalletsWrapper = ({ children, wallets }) => {
-  const para = useInternalClient();
-  const resetModalState = useModalStore((state) => state.resetState);
-  const resetUserInfoState = useUserInfoStore((state) => state.resetState);
-  const StoredEvmProvider = useExternalWalletProviderStore((state) => state.EvmProvider);
-  const storedEvmContext = useExternalWalletProviderStore((state) => state.evmContext);
-  const StoredSolanaProvider = useExternalWalletProviderStore((state) => state.SolanaProvider);
-  const storedSolanaContext = useExternalWalletProviderStore((state) => state.solanaContext);
-  const StoredCosmosProvider = useExternalWalletProviderStore((state) => state.CosmosProvider);
-  const storedCosmosContext = useExternalWalletProviderStore((state) => state.cosmosContext);
-  const [EvmProvider, setEvmProvider] = useState(null);
-  const [evmContext, setEvmContext] = useState(null);
-  const [SolanaProvider, setSolanaProvider] = useState(null);
-  const [solanaContext, setSolanaContext] = useState(null);
-  const [CosmosProvider, setCosmosProvider] = useState(null);
-  const [cosmosContext, setCosmosContext] = useState(null);
-  useEffect(() => {
-    const loadProviders = () => __async(void 0, null, function* () {
-      let newEvmContext = EvmExternalWalletContext;
-      let newEvmProvider = EvmExternalWalletProvider;
-      let newSolanaContext = SolanaExternalWalletContext;
-      let newSolanaProvider = SolanaExternalWalletProvider;
-      let newCosmosContext = CosmosExternalWalletContext;
-      let newCosmosProvider = CosmosExternalWalletProvider;
-      if (!(wallets == null ? void 0 : wallets.length)) {
-        newEvmContext = EvmExternalWalletContext;
-        newEvmProvider = EvmExternalWalletProvider;
-        newSolanaContext = SolanaExternalWalletContext;
-        newSolanaProvider = SolanaExternalWalletProvider;
-        newCosmosContext = CosmosExternalWalletContext;
-        newCosmosProvider = CosmosExternalWalletProvider;
-      } else {
-        for (let i = 0; i < wallets.length; i++) {
-          const wallet = wallets[i];
-          if (wallet in EvmWallet) {
-            if (!StoredEvmProvider || !storedEvmContext) {
-              throw new Error("@getpara/evm-wallet-connectors is required to use an external EVM wallet.");
-            } else {
-              newEvmContext = storedEvmContext;
-              newEvmProvider = StoredEvmProvider;
-            }
-          }
-          if (wallet in SolanaWallet) {
-            if (!StoredSolanaProvider || !storedSolanaContext) {
-              throw new Error("@getpara/solana-wallet-connectors is required to use an external Solana wallet.");
-            } else {
-              newSolanaContext = storedSolanaContext;
-              newSolanaProvider = StoredSolanaProvider;
-            }
-          }
-          if (wallet in CosmosWallet) {
-            if (!StoredCosmosProvider || !storedCosmosContext) {
-              throw new Error("@getpara/cosmos-wallet-connectors is required to use an external Cosmos wallet.");
-            } else {
-              newCosmosContext = storedCosmosContext;
-              newCosmosProvider = StoredCosmosProvider;
-            }
-          }
-        }
-      }
-      setEvmContext(newEvmContext);
-      setEvmProvider(() => newEvmProvider);
-      setSolanaContext(newSolanaContext);
-      setSolanaProvider(() => newSolanaProvider);
-      setCosmosContext(newCosmosContext);
-      setCosmosProvider(() => newCosmosProvider);
-    });
-    loadProviders();
-  }, [
-    wallets,
-    storedEvmContext,
-    StoredEvmProvider,
-    storedSolanaContext,
-    StoredSolanaProvider,
-    storedCosmosContext,
-    StoredCosmosProvider
-  ]);
-  const handleSwitchWallet = ({ address, error }) => {
-    if (error || !address) {
-      resetModalState();
-      resetUserInfoState();
-    }
-  };
-  if (!para || !EvmProvider || !SolanaProvider || !CosmosProvider) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(EvmProvider, { para, onSwitchWallet: handleSwitchWallet, children: /* @__PURE__ */ jsx(SolanaProvider, { para, onSwitchWallet: handleSwitchWallet, children: /* @__PURE__ */ jsx(CosmosProvider, { para, onSwitchWallet: handleSwitchWallet, children: /* @__PURE__ */ jsx(
-    ExternalWalletProvider,
-    {
-      evmContext,
-      solanaContext,
-      cosmosContext,
-      walletSort: wallets,
-      children
-    }
-  ) }) }) });
-};
-export {
-  ExternalWalletsWrapper
-};