@getpara/react-sdk-lite 2.0.0-alpha.39 → 2.0.0-alpha.40

package/dist/modal/components/LoginDoneStep/LoginDoneStep.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { Heading, HeroIcon, StepContainer } from "../common.js";
 import { ExternalWalletCard, WalletCard, WalletCards } from "../WalletCard/WalletCard.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
@@ -9,18 +9,26 @@ import { useStore } from "../../../provider/stores/useStore.js";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 const LoginDoneStep = ({ onClose }) => {
-  var _a, _b;
   const para = useInternalClient();
   const bareModal = useStore((state) => {
-    var _a2;
-    return (_a2 = state.modalConfig) == null ? void 0 : _a2.bareModal;
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
   });
   const setStep = useModalStore((state) => state.setStep);
   const setFlow = useModalStore((state) => state.setFlow);
   const hideWallets = useStore((state) => {
-    var _a2;
-    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
   });
+  const content = useMemo(() => {
+    var _a, _b;
+    if (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") {
+      return /* @__PURE__ */ jsx(ExternalWalletCard, { address: (_b = (_a = Object.values(para.externalWallets || {})[0]) == null ? void 0 : _a.address) != null ? _b : "", showAddFunds: false });
+    }
+    const { id, type } = Object.values(para.wallets || {})[0] || {};
+    if (!id || !type) return null;
+    return /* @__PURE__ */ jsx(WalletCard, { id, type, showAddFunds: false }, `${id}-${type}`);
+  }, [para.externalWalletConnectionType, para.externalWallets, para.wallets]);
   useEffect(() => {
     setTimeout(() => {
       if (bareModal) {
@@ -33,10 +41,8 @@ const LoginDoneStep = ({ onClose }) => {
   }, []);
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
-    /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Connected" }),
-    !hideWallets && /* @__PURE__ */ jsx(WalletCards, { children: para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION" ? /* @__PURE__ */ jsx(ExternalWalletCard, { address: (_b = (_a = Object.values(para.externalWallets || {})[0]) == null ? void 0 : _a.address) != null ? _b : "" }) : para.currentWalletIdsArray.map(([id, type]) => {
-      return /* @__PURE__ */ jsx(WalletCard, { id, type }, `${id}-${type}`);
-    }) })
+    /* @__PURE__ */ jsx(Heading, { children: "Connected" }),
+    !hideWallets && /* @__PURE__ */ jsx(WalletCards, { children: content })
   ] });
 };
 export {

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

@@ -1,10 +1,11 @@
 import { ParaModalProps } from '../../types/modalProps.js';
-type ModalContentProps = Omit<ParaModalProps, 'para' | 'isOpen' | 'theme' | 'branding' | 'onModalStepChange' | 'onExpandModalChange'>;
 export type ModalContentHandle = {
     /**
      * Trigger the modal close handler
      */
     handleModalClose: () => void;
 };
-export declare const ModalContent: import("react").ForwardRefExoticComponent<ModalContentProps & import("react").RefAttributes<ModalContentHandle>>;
-export {};
+export declare const ModalContent: import("react").ForwardRefExoticComponent<Omit<ParaModalProps, "onModalStepChange" | "isOpen" | "para" | "theme" | "branding" | "onExpandModalChange"> & {
+    onDisconnect: () => void;
+    isDisconnecting: boolean;
+} & import("react").RefAttributes<ModalContentHandle>>;

package/dist/modal/components/ModalContent/ModalContent.js

@@ -20,6 +20,8 @@ const ModalContent = forwardRef(
     disablePhoneLogin,
     isGuestModeEnabled = false,
     onClose,
+    onDisconnect,
+    isDisconnecting,
     onRampTestMode
   }, ref) => {
     const para = useInternalClient();
@@ -76,7 +78,9 @@ const ModalContent = forwardRef(
           disableEmailLogin: !!disableEmailLogin,
           disablePhoneLogin: !!disablePhoneLogin,
           isGuestModeEnabled,
-          onClose: handleClose
+          onClose: handleClose,
+          onDisconnect,
+          isDisconnecting
         }
       ),
       /* @__PURE__ */ jsx(Footer, {})

package/dist/modal/components/OAuth/FarcasterOAuthStep.js

@@ -14,7 +14,7 @@ function FarcasterConnectQR() {
       `Get Farcaster`
     ] })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Sign in using Farcaster" }),
+    /* @__PURE__ */ jsx(Heading, { children: "Sign in using Farcaster" }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }),
       /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })

package/dist/modal/components/OAuth/OAuth.js

@@ -44,7 +44,7 @@ const OAuth = ({ methods }) => {
       OAuthButton,
       {
         $isDark: useDarkLogos,
-        icon: ACCOUNT_TYPES[method][useBrandedLogos ? "logoBranded" : "logo"],
+        icon: ACCOUNT_TYPES[method][useBrandedLogos ? "iconBranded" : "icon"],
         onClick: handleMethodClick(method),
         $index: index,
         $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length

package/dist/modal/components/RecoverySecretStep/RecoverySecretStep.js

@@ -39,7 +39,7 @@ const SaveRecoverySecret = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingXS", weight: "semiBold", children: "Save your Recovery Secret" }),
+      /* @__PURE__ */ jsx(Heading, { children: "Save your Recovery Secret" }),
       /* @__PURE__ */ jsxs(ButtonContainer, { children: [
         /* @__PURE__ */ jsx(ActionButton, { icon: "download", onClick: onDownload, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Download" }) }),
         /* @__PURE__ */ jsx(ActionButton, { icon: isCopied ? "check" : "copy", onClick: onCopy, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isCopied ? "Copied!" : "Copy" }) }),
@@ -64,7 +64,7 @@ const RecoverySecretStep = () => {
   });
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: hideWallets ? "Don't lose access" : "Don't lose your wallet" }),
+      /* @__PURE__ */ jsx(Heading, { children: hideWallets ? "Don't lose access" : "Don't lose your wallet" }),
       /* @__PURE__ */ jsxs(InlineText, { variant: "bodyS", color: "secondary", weight: "medium", children: [
         "Your",
         " ",

package/dist/modal/components/Setup2FAStep/Setup2FAStep.js

@@ -82,8 +82,8 @@ const Setup2FAStep = ({ onClose }) => {
   };
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Turn on Two-Factor authentication" }),
-      isVerifying && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Please enter the code from your authenticator app." })
+      /* @__PURE__ */ jsx(Heading, { children: "Turn on two-factor authentication" }),
+      isVerifying && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Please enter the code from your authenticator app" })
     ] }),
     /* @__PURE__ */ jsx(InnerStepContainer, { children: isVerifying ? /* @__PURE__ */ jsx(Fragment, { children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsx(
       "form",
@@ -107,7 +107,7 @@ const Setup2FAStep = ({ onClose }) => {
         )
       }
     ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan with your preferred authenticator app." }),
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan with your preferred authenticator app" }),
       /* @__PURE__ */ jsx(QRContainer, { children: !(twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: twoFactorStatus.uri }) })
     ] }) }),
     !isVerifying && /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/modal/components/TwoFactorDoneStep/TwoFactorDoneStep.js

@@ -12,7 +12,7 @@ const TwoFactorDoneStep = ({ onClose }) => {
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingXS", weight: "semiBold", children: "Success" }),
+      /* @__PURE__ */ jsx(Heading, { variant: "headingXS", children: "Success" }),
       /* @__PURE__ */ jsxs(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: [
         "Your ",
         hideWallets ? "account" : "wallet",

package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js

@@ -73,7 +73,7 @@ const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
   }, [error]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsxs(Heading, { variant: "headingS", weight: "bold", children: [
+      /* @__PURE__ */ jsxs(Heading, { children: [
         "Verify ",
         isEmail ? "Email" : "Phone Number"
       ] }),

package/dist/modal/components/Waiting/Waiting.js

@@ -7,7 +7,7 @@ const Waiting = ({ heading, subheading }) => {
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: heading }),
+      /* @__PURE__ */ jsx(Heading, { children: heading }),
       subheading && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: subheading })
     ] })
   ] });

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

@@ -1,5 +1,8 @@
 import { TWalletType } from '@getpara/web-sdk';
-export declare const ExternalWalletCard: ({ address, showAddFunds }: Pick<SharedWalletCardProps, "address" | "showAddFunds">) => import("react/jsx-runtime").JSX.Element | null;
+import { ReactNode } from 'react';
+export declare const ExternalWalletCard: ({ address, showAddFunds, }: Pick<SharedWalletCardProps, "showAddFunds"> & {
+    address: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
 interface WalletCardProps {
     id: string;
     type: TWalletType;
@@ -7,12 +10,12 @@ interface WalletCardProps {
 }
 export declare const WalletCard: ({ id, type, showAddFunds }: WalletCardProps) => import("react/jsx-runtime").JSX.Element | null;
 interface SharedWalletCardProps {
-    address: string;
+    address?: string;
     id?: string;
     type?: TWalletType;
     name?: string;
-    identiconHash: string;
     showAddFunds?: boolean;
+    Icon: ReactNode;
 }
 export declare const WalletCards: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/dist/modal/components/WalletCard/WalletCard.js

@@ -3,14 +3,18 @@ import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
-import { CpslButton, CpslIdenticon, CpslText } from "@getpara/react-components";
+import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { truncateAddress } from "@getpara/web-sdk";
 import { ModalStep } from "../../utils/steps.js";
 import { useWalletState } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useStore } from "../../../provider/stores/useStore.js";
-const ExternalWalletCard = ({ address, showAddFunds }) => {
-  var _a, _b;
+import { WalletTypeIcon } from "../common.js";
+const ExternalWalletCard = ({
+  address,
+  showAddFunds
+}) => {
+  var _a;
   const para = useInternalClient();
   const wallet = para.externalWallets[address];
   if (!(wallet == null ? void 0 : wallet.address) || !(wallet == null ? void 0 : wallet.type)) {
@@ -19,34 +23,56 @@ const ExternalWalletCard = ({ address, showAddFunds }) => {
   return /* @__PURE__ */ jsx(
     SharedWalletCard,
     {
+      name: wallet.name,
       address: (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type),
-      identiconHash: (_b = para.getIdenticonHash(wallet.id, wallet.type)) != null ? _b : "",
-      showAddFunds
+      showAddFunds,
+      Icon: /* @__PURE__ */ jsx(
+        WalletTypeIcon,
+        {
+          externalWallet: wallet.externalProviderId,
+          walletType: wallet.type,
+          size: "48px",
+          inset: "6px",
+          radius: "theme",
+          background: "var(--cpsl-color-background-0)",
+          border: "1px solid var(--cpsl-color-background-16)"
+        }
+      )
     }
   );
 };
 const WalletCard = ({ id, type, showAddFunds }) => {
-  var _a, _b, _c;
+  var _a;
   const para = useInternalClient();
   const appName = useStore((state) => state.appName);
   const wallet = para.findWallet(id, type);
   if (!wallet) {
     return null;
   }
-  const address = para.getDisplayAddress(wallet.id, { addressType: type });
   return /* @__PURE__ */ jsx(
     SharedWalletCard,
     {
       id: wallet.id,
       type: wallet.type,
-      address: (_a = wallet.ensName) != null ? _a : truncateAddress(address, type, { prefix: para.cosmosPrefix }),
-      name: (_b = wallet.name) != null ? _b : `${appName ? `${appName} ` : ""}Wallet`,
-      identiconHash: (_c = para.getIdenticonHash(wallet.id, type)) != null ? _c : "",
-      showAddFunds
+      name: (_a = wallet.name) != null ? _a : `${appName ? `${appName} ` : ""}Wallet`,
+      showAddFunds,
+      Icon: /* @__PURE__ */ jsx(
+        CpslIcon,
+        {
+          icon: para.partnerLogo ? void 0 : "wallet02",
+          src: para.partnerLogo,
+          color: "var(--cpsl-color-text-contrast)",
+          radius: "theme",
+          background: "var(--cpsl-color-background-0)",
+          border: "1px solid var(--cpsl-color-background-16)",
+          size: "48px",
+          inset: para.partnerLogo ? "8px" : "12px"
+        }
+      )
     }
   );
 };
-const SharedWalletCard = ({ address, name, identiconHash, showAddFunds, id, type }) => {
+const SharedWalletCard = ({ address, name, showAddFunds, id, type, Icon }) => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const { setSelectedWallet } = useWalletState();
   const setStep = useModalStore((state) => state.setStep);
@@ -59,10 +85,10 @@ const SharedWalletCard = ({ address, name, identiconHash, showAddFunds, id, type
   };
   return /* @__PURE__ */ jsxs(Container, { children: [
     /* @__PURE__ */ jsxs(InnerContainer, { children: [
-      /* @__PURE__ */ jsx(CpslIdenticon, { size: "48px", hash: identiconHash }),
+      Icon,
       /* @__PURE__ */ jsxs(WalletNameContainer, { children: [
         !!name && /* @__PURE__ */ jsx(Name, { color: "contrast", variant: "bodyL", weight: "semiBold", children: name }),
-        /* @__PURE__ */ jsx(Name, { color: "secondary", variant: "bodyS", weight: "medium", children: address })
+        !!address && /* @__PURE__ */ jsx(Name, { color: "secondary", variant: "bodyS", weight: "medium", children: address })
       ] })
     ] }),
     showAddFunds && isAddFundsEnabled && /* @__PURE__ */ jsx(AddFundsButton, { onClick: handleAddFundsClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", weight: "medium", children: "Add Funds" }) })
@@ -76,7 +102,7 @@ const WalletCards = safeStyled.div`
 `;
 const Container = safeStyled.div`
   width: 100%;
-  padding: 24px;
+  padding: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;

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

@@ -0,0 +1,11 @@
+export declare const WalletSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const Select: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
+}, {
+    $width: number;
+    $top?: number;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectItem: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/modal/components/WalletSelect/WalletSelect.js

@@ -0,0 +1,153 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
+import { safeStyled, useCopyToClipboard } from "@getpara/react-common";
+import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
+import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
+import * as common from "../common.js";
+const getValue = (id, type) => {
+  return id && type ? `${id}~${type}` : void 0;
+};
+const Wallet = ({ wallet, withCopy, slot }) => {
+  const para = useInternalClient();
+  const [isCopied, copy] = useCopyToClipboard();
+  return /* @__PURE__ */ jsxs(WalletContainer, { slot, style: { flex: "1" }, children: [
+    /* @__PURE__ */ jsx(
+      WalletTypeIcon,
+      {
+        externalWallet: wallet.isExternal ? wallet.externalProviderId : void 0,
+        walletType: wallet.type,
+        size: "32px",
+        inset: "6px"
+      }
+    ),
+    /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "contrast", style: { flex: "1" }, children: para.getDisplayAddress(wallet.id, { truncate: true, addressType: wallet.type }) }),
+    withCopy && /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        id: "ignore-click",
+        size: "small",
+        variant: "ghost",
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          copy(para.getDisplayAddress(wallet.id, { addressType: wallet.type }));
+        },
+        children: /* @__PURE__ */ jsx(CpslIcon, { id: "ignore-click", slot: "start", icon: isCopied ? "check" : "copy" })
+      }
+    )
+  ] });
+};
+const WalletSelect = () => {
+  const containerRef = useRef(null);
+  const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
+  const { setSelectedWallet } = useWalletState();
+  const { data: activeWallet } = useWallet();
+  const { embedded } = useAccount();
+  const availableWallets = embedded == null ? void 0 : embedded.wallets;
+  const isMultiWallet = availableWallets && availableWallets.length > 1;
+  const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsx(Wallet, { withCopy: true, wallet: activeWallet, slot: "selected-item" }) : null;
+  useEffect(() => {
+    if (dropdownMaxHeight && (activeWallet == null ? void 0 : activeWallet.address)) {
+      resize();
+    }
+  }, [activeWallet, availableWallets, dropdownMaxHeight]);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    isMultiWallet && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: "Select Wallet" }),
+    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        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,
+        selectedItemVariant: "bodyXS",
+        icon: isMultiWallet ? "chevronUp" : null,
+        disabled: !isMultiWallet,
+        children: [
+          activeWallet && ActiveWalletNode,
+          (availableWallets || []).map(({ address, name: _name, id, type }) => {
+            const key = getValue(id, type);
+            return /* @__PURE__ */ jsx(SelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsx(Wallet, { wallet: { address, name: _name, id, type } }) }, key);
+          })
+        ]
+      }
+    ) })
+  ] });
+};
+const Container = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+`;
+const WalletContainer = safeStyled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const Select = safeStyled(CpslSelect)`
+  --icon-width: 32px;
+  --icon-height: 32px;
+  --container-border-color: var(--cpsl-color-background-16);
+  --container-background-color-disabled: var(--container-background-color);
+  width: 286px;
+  position: relative;
+
+  &::part(selected-text) {
+    white-space: nowrap;
+  }
+
+  &::part(dropdown) {
+    min-width: ${({ $width }) => `${$width - 2}px`};
+  }
+
+  &::part(icon) {
+    --icon-color: var(--cpsl-color-text-primary);
+  }
+`;
+const SelectItem = safeStyled(CpslSelectItem)`
+  --outer-container-padding-start: 0px;
+  --outer-container-padding-end: 0px;
+  --outer-container-padding-top: 0px;
+  --outer-container-padding-bottom: 0px;
+  --container-padding-start: 12px;
+  --container-padding-end: 12px;
+  --container-padding-top: 8px;
+  --container-padding-bottom: 8px;
+`;
+const SelectContainer = safeStyled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--cpsl-border-radius-tile-button);
+  background-color: var(--cpsl-color-background-4);
+`;
+const WalletTypeIcon = safeStyled(common.WalletTypeIcon)`
+  --border: 1px solid var(--cpsl-color-background-8);
+  --background: var(--cpsl-color-background-0);
+  --border-radius: 4px;
+`;
+const CopyButton = safeStyled(CpslButton)`
+  cpsl-icon {
+    --height: 24px;
+    --width: 24px;
+  }
+`;
+export {
+  Select,
+  SelectContainer,
+  SelectItem,
+  WalletSelect
+};

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

@@ -1,6 +1,6 @@
-import { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
-import { Network, OnRampAsset, TLinkedAccountType } from '@getpara/web-sdk';
-import { PropsWithChildren } from 'react';
+import { CpslIcon, CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
+import { Network, OnRampAsset, TExternalWallet, TLinkedAccountType, TWalletType } from '@getpara/web-sdk';
+import { ComponentProps, PropsWithChildren } from 'react';
 export declare const SpinnerContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const QRContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InfoBoxContent: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -14,7 +14,7 @@ export declare const StepContainer: import("styled-components/dist/types.js").IS
 }, {
     $wide?: boolean;
 }>> & string;
-export declare const Heading: typeof CpslText;
+export declare const Heading: ({ children, ...props }: PropsWithChildren & ComponentProps<typeof CpslText>) => import("react/jsx-runtime").JSX.Element;
 export declare const StyledCpslTileButton: typeof CpslTileButton;
 export declare const HeroIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
@@ -37,6 +37,11 @@ export declare function NetworkIcon({ network, size }: {
     network: Network;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function WalletTypeIcon({ className, walletType, externalWallet, ...props }: {
+    className?: string;
+    walletType: TWalletType;
+    externalWallet?: TExternalWallet | string;
+} & Parameters<typeof CpslIcon>[0]): import("react/jsx-runtime").JSX.Element;
 export declare const ErrorContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ErrorIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;

package/dist/modal/components/common.js

@@ -1,9 +1,13 @@
 "use client";
-import "../../chunk-MMUBH76A.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButton } from "@getpara/react-components";
 import { safeStyled } from "@getpara/react-common";
-import { MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS } from "../constants/constants.js";
+import { MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS, WALLET_TYPES_METADATA } from "../constants/constants.js";
 import { useStore } from "../../provider/stores/useStore.js";
 import { ACCOUNT_TYPES } from "../constants/oAuthLogos.js";
 import { useEffect, useRef, useState } from "react";
@@ -60,7 +64,10 @@ const InnerStepContainer = safeStyled.div`
 const StepContainer = safeStyled(InnerStepContainer)`
   gap: ${({ $wide }) => $wide ? "32px" : "24px"};
 `;
-const Heading = safeStyled(CenteredText)``;
+const Heading = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx(CpslText, __spreadProps(__spreadValues({ variant: "bodyL", weight: "semiBold" }, props), { style: __spreadProps(__spreadValues({}, props.style), { textAlign: "center", width: "100%" }), children }));
+};
 const StyledCpslTileButton = safeStyled(CpslTileButton)`
   --button-width: 100%;
   --button-height: 87px;
@@ -75,13 +82,14 @@ const HeroIcon = safeStyled(CpslIcon)`
 const HeaderSelect = safeStyled(CpslSelect)`
   --container-height: 26px;
   --container-border-width: 0px;
-  --container-padding-end: 0px;
+  --container-padding-end: 4px;
   --container-padding-start: 0px;
-  --container-background-color: transparent;
   --container-box-shadow: none;
   --container-gap: 2px;
   --icon-width: 16px;
   --icon-height: 16px;
+  --dropdown-inner-padding: 16px;
+  --dropdown-inner-gap: 10px;
   position: relative;
 
   &::part(selected-text) {
@@ -109,19 +117,23 @@ const HeaderSelect = safeStyled(CpslSelect)`
   }
 `;
 const HeaderSelectItem = safeStyled(CpslSelectItem)`
-  --outer-container-padding-start: 4px;
-  --outer-container-padding-end: 4px;
-  --outer-container-padding-top: 4px;
-  --outer-container-padding-bottom: 4px;
+  --outer-container-padding-start: 0px;
+  --outer-container-padding-end: 0px;
+  --outer-container-padding-top: 0px;
+  --outer-container-padding-bottom: 0px;
+  --container-padding-start: 0px;
+  --container-padding-end: 0px;
+  --container-padding-top: 0px;
+  --container-padding-bottom: 0px;
+  width: 236px;
 `;
 const HeaderSelectContainer = safeStyled.div`
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
-  border-radius: 1000px;
+  border-radius: var(--cpsl-border-radius-tile-button);
   background-color: var(--cpsl-color-background-8);
-  padding: 4px;
 `;
 const StyledIcon = safeStyled(CpslIcon)`
   background: var(--cpsl-color-background-0);
@@ -143,6 +155,37 @@ function NetworkIcon({ network, size }) {
   const data = NETWORKS[network];
   return /* @__PURE__ */ jsx(StyledIcon, { size, icon: data.icon, inset: data.isCircular ? void 0 : "15%", invert: isDark && data.isDark });
 }
+function WalletTypeIcon(_c) {
+  var _d = _c, {
+    className,
+    walletType,
+    externalWallet
+  } = _d, props = __objRest(_d, [
+    "className",
+    "walletType",
+    "externalWallet"
+  ]);
+  var _a;
+  const isDark = useStore((state) => {
+    var _a2, _b;
+    return ((_b = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b.mode) === "dark";
+  });
+  const data = (externalWallet ? ACCOUNT_TYPES[externalWallet] : WALLET_TYPES_METADATA[walletType]) || {
+    icon: "wallet02",
+    isDark: true
+  };
+  props.size;
+  return /* @__PURE__ */ jsx(
+    CpslIcon,
+    __spreadProps(__spreadValues({
+      className,
+      icon: data.icon,
+      invert: isDark && data.isDark
+    }, props), {
+      inset: (_a = props.inset) != null ? _a : "10%"
+    })
+  );
+}
 const ErrorContainer = safeStyled.div`
   display: flex;
   align-items: center;
@@ -166,7 +209,7 @@ function AccountTypeIcon({
     return ((_b = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b.mode) === "dark";
   });
   const data = accountType ? ACCOUNT_TYPES[accountType] : null;
-  return data || src ? /* @__PURE__ */ jsx(CpslIcon, { size, inset, icon: (_a = data == null ? void 0 : data.logoBranded) != null ? _a : data == null ? void 0 : data.logo, src, invert: isDark && (data == null ? void 0 : data.isDark) }) : null;
+  return data || src ? /* @__PURE__ */ jsx(CpslIcon, { size, inset, icon: (_a = data == null ? void 0 : data.iconBranded) != null ? _a : data == null ? void 0 : data.icon, src, invert: isDark && (data == null ? void 0 : data.isDark) }) : null;
 }
 function HeroAccountTypeIcon({ accountType, src }) {
   if (accountType === "EMAIL" || accountType === "PHONE") {
@@ -258,5 +301,6 @@ export {
   QRContainer,
   SpinnerContainer,
   StepContainer,
-  StyledCpslTileButton
+  StyledCpslTileButton,
+  WalletTypeIcon
 };