@getpara/react-sdk 2.0.0-alpha.3 → 2.0.0-alpha.6

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

@@ -0,0 +1,189 @@
+"use client";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslIdenticon, CpslText } from "@getpara/react-components";
+import styled from "styled-components";
+import { truncateAddress } from "@getpara/web-sdk";
+import { useEffect, useRef } from "react";
+import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
+import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
+import { HeaderSelect, HeaderSelectContainer, HeaderSelectItem } from "../common.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useCopyToClipboard } from "@getpara/react-common";
+const getValue = (id, type) => {
+  return id && type ? `${id}~${type}` : void 0;
+};
+const WALLET_TYPES = {
+  EVM: "EVM",
+  SOLANA: "Solana",
+  COSMOS: "Cosmos"
+};
+const ChainSelect = () => {
+  var _a, _b;
+  const containerRef = useRef(null);
+  const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
+  const { data: activeWallet } = useWallet();
+  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 === "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(HeaderSelectContainer, { ref: containerRef, id: "inputContainer", children: /* @__PURE__ */ jsxs(
+    HeaderSelect,
+    {
+      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 != null ? dropdownWidth : 0,
+      $top: (mobileAnchor != null ? mobileAnchor : 0) + 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(HeaderSelectItem, { 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 " : ""}${type ? WALLET_TYPES[type] : ""}${!hideWallets && (isMenu || isExternal) ? " Wallet" : ""}`;
+  }
+  return hideWallets ? "My Account" : name || "My Wallet";
+}
+const AccountSelect = () => {
+  var _a;
+  const hideWallets = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+  });
+  const para = useInternalClient();
+  const containerRef = useRef(null);
+  const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
+  const [isCopied, copy] = useCopyToClipboard();
+  const { setSelectedWallet } = useWalletState();
+  const { data: activeWallet } = useWallet();
+  const { data: account } = useAccount();
+  const availableWallets = account == null ? void 0 : account.wallets;
+  const isGuest = para.isGuestMode && (activeWallet == null ? void 0 : activeWallet.pregenIdentifierType) === "GUEST_ID";
+  const handleCopy = () => {
+    copy((activeWallet == null ? void 0 : activeWallet.address) ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : "");
+  };
+  const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsxs(FlexRow, { slot: "selected-item", style: { height: "24px" }, children: [
+    !isGuest && /* @__PURE__ */ jsx(CpslIdenticon, { variant: "avatar", size: "24px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }),
+    /* @__PURE__ */ jsx(WalletName, { variant: "bodyXS", color: "contrast", style: { marginLeft: isGuest ? "8px" : "0px" }, children: isGuest ? "Guest" : getName(para, __spreadProps(__spreadValues({}, activeWallet), { hideWallets })) }),
+    !hideWallets && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: (_a = activeWallet.ensName) != null ? _a : para.getDisplayAddress(activeWallet.id, { truncate: true, addressType: activeWallet.type }) }),
+      /* @__PURE__ */ jsx(
+        CpslButton,
+        {
+          id: "ignore-click",
+          size: "small",
+          variant: "ghost",
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            handleCopy();
+          },
+          children: /* @__PURE__ */ jsx(CpslIcon, { id: "ignore-click", slot: "start", icon: isCopied ? "check" : "copy" })
+        }
+      )
+    ] })
+  ] }) : null;
+  useEffect(() => {
+    if (dropdownMaxHeight && (activeWallet == null ? void 0 : activeWallet.address)) {
+      resize();
+    }
+  }, [activeWallet, availableWallets, dropdownMaxHeight]);
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, id: "addressInputContainer", children: availableWallets && availableWallets.length > 1 ? /* @__PURE__ */ jsxs(
+    HeaderSelect,
+    {
+      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 != null ? dropdownWidth : 0,
+      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+      autoWidth: true,
+      selectedItemVariant: "bodyXS",
+      children: [
+        activeWallet && ActiveWalletNode,
+        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(HeaderSelectItem, { 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 && address && type && /* @__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 ChainName = styled(CpslText)`
+  max-width: 150px;
+  text-transform: capitalize;
+
+  &::part(text-element) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+`;
+export {
+  AccountSelect,
+  ChainSelect
+};

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

@@ -0,0 +1,144 @@
+"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, ErrorContainer, ErrorIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
+import { useEffect, useMemo } from "react";
+import { useModalStore } from "../../stores/index.js";
+import styled from "styled-components";
+import { useCopyToClipboard } from "@getpara/react-common";
+import { ModalStep } from "../../utils/steps.js";
+import { isMobile, isTablet } from "@getpara/web-sdk";
+import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.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* () {
+    if (wallet) {
+      yield connectExternalWallet(wallet);
+    }
+  });
+  const handleCopy = () => {
+    if (qrUri) {
+      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 === "SOLANA" || isMobile() && !isTablet()) {
+        const isInstalled = wallet.type !== "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 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

@@ -0,0 +1,17 @@
+"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/ExternalWalletVerificationStep/ExternalWalletVerificationStep.js

@@ -0,0 +1,34 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslSpinner, CpslText } from "@getpara/react-components";
+import { useEffect } from "react";
+import { styled } from "styled-components";
+import { useModalStore } from "../../stores/index.js";
+import { ErrorContainer, ErrorIcon, Heading, InnerStepContainer, StepContainer } from "../common.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+const ExternalWalletVerificationStep = () => {
+  const { isExternalWalletVerifying, verifyWalletSignature } = useExternalWallets();
+  const externalWalletError = useModalStore((state) => state.externalWalletError);
+  useEffect(() => {
+    verifyWalletSignature();
+  }, []);
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Verify Your Wallet" }),
+      /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", color: "secondary", children: "Sign the message with your wallet to complete sign up." }),
+      !!(externalWalletError == null ? void 0 : externalWalletError[0]) && /* @__PURE__ */ jsxs(ErrorContainer, { children: [
+        /* @__PURE__ */ jsx(ErrorIcon, { icon: "alertCircle" }),
+        /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: externalWalletError == null ? void 0 : externalWalletError[0] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: isExternalWalletVerifying ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsx(CpslButton, { onClick: verifyWalletSignature, children: "Retry" }) })
+  ] });
+};
+const InlineText = styled(CpslText)`
+  text-align: center;
+  display: inline-block;
+`;
+export {
+  ExternalWalletVerificationStep
+};

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

@@ -0,0 +1,173 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { StyledCpslTileButton } from "../common.js";
+import { CpslButton, CpslIcon, CpslInput, CpslText } from "@getpara/react-components";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { useState } from "react";
+import { hasEmbeddedAuth } from "../../utils/authLayoutHelpers.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.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 = useModalStore((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* () {
+            var _a;
+            setSearch((_a = e.target.value) != null ? _a : "");
+          }),
+          value: search,
+          style: { width: "100%" },
+          children: /* @__PURE__ */ jsx(SearchIcon, { slot: "start", icon: "search" })
+        }
+      ) }),
+      hasEmbeddedAuth(authLayout != null ? 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/Footer/Footer.js

@@ -0,0 +1,95 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
+import { useModalStore } from "../../stores/index.js";
+import { PARA_CONNECT, PARA_TERMS_AND_CONDITIONS } from "../../constants/constants.js";
+import { useMemo } from "react";
+import { getStepHasFooter } from "../../utils/steps.js";
+import { useAccount } from "../../../provider/index.js";
+const Footer = () => {
+  const { data: account } = useAccount();
+  const currentStep = useModalStore((state) => state.step);
+  const accountFooter = (account == null ? void 0 : account.isConnected) && !account.isGuestMode;
+  const showFooter = accountFooter || getStepHasFooter(currentStep);
+  const Content = useMemo(() => {
+    if (accountFooter) {
+      return /* @__PURE__ */ jsxs(ConnectContainer, { children: [
+        /* @__PURE__ */ jsxs(ConnectText, { variant: "bodyS", color: "secondary", weight: "medium", children: [
+          "Access all your wallet\u2019s features at",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: PARA_CONNECT, target: "blank", children: /* @__PURE__ */ jsx(ClickableText, { variant: "bodyS", weight: "medium", children: "Para Connect" }) })
+        ] }),
+        /* @__PURE__ */ jsx(CpslButton, { as: "a", href: PARA_CONNECT, target: "blank", variant: "ghost", children: /* @__PURE__ */ jsx(RightChevron, { icon: "chevronUp" }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(InlineText, { variant: "body2XS", color: "secondary", weight: "medium", children: [
+        "By logging in you agree to our",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: PARA_TERMS_AND_CONDITIONS, target: "blank", children: /* @__PURE__ */ jsx(ClickableText, { variant: "body2XS", weight: "medium", children: "Terms & Conditions" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(PoweredByContainer, { children: [
+        /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Powered by" }),
+        /* @__PURE__ */ jsx(ParaLogo, { icon: "para" })
+      ] })
+    ] });
+  }, [account]);
+  if (!showFooter) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FooterContainer, { slot: "footer", children: /* @__PURE__ */ jsx(FooterContentContainer, { children: Content }) });
+};
+const FooterContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 0px;
+`;
+const FooterContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const PoweredByContainer = styled.div`
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+`;
+const ConnectContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+`;
+const RightChevron = styled(CpslIcon)`
+  transform: rotate(90deg);
+
+  /* --icon-color: var(--cpsl-color-text-tertiary); */
+  --height: 24px;
+  --width: 24px;
+`;
+const InlineText = styled(CpslText)`
+  text-align: center;
+  display: inline-block;
+`;
+const ConnectText = styled(InlineText)`
+  line-height: 20px;
+`;
+const ClickableText = styled(InlineText)`
+  cursor: pointer;
+  display: inline-block;
+`;
+const ParaLogo = styled(CpslIcon)`
+  display: inline-block;
+  --icon-color: var(--cpsl-color-text-secondary);
+  --width: 49px;
+  --height: auto;
+`;
+export {
+  Footer
+};