@getpara/react-sdk-lite 2.0.0-alpha.42 → 2.0.0-alpha.43

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

@@ -1,25 +1,27 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { safeStyled } from "@getpara/react-common";
+import { getExternalWalletIcon, safeStyled } from "@getpara/react-common";
 import { formatBalanceString } from "../../utils/stringFormatters.js";
 import { CpslIcon, CpslText } from "@getpara/react-components";
 import { useMemo } from "react";
 import { truncateAddress } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { getExternalWalletIcon } from "../../utils/icons.js";
-import { useWalletBalance } from "../../../provider/index.js";
+import { useAccount, useWallet, useWalletBalance } from "../../../provider/index.js";
+import { WalletSelect } from "../WalletSelect/WalletSelect.js";
 const Balance = () => {
   const { data: balance } = useWalletBalance();
   return /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: !!balance ? "visible" : "hidden" }, children: balance ? formatBalanceString(balance) : "0" });
 };
 const AccountHeader = ({ withBalance = false } = {}) => {
   const para = useInternalClient();
+  const { connectionType } = useAccount();
+  const { data: activeWallet } = useWallet();
   const { name, icon, src } = useMemo(() => {
     var _a;
     let name2, icon2, src2;
     switch (true) {
-      case Object.keys(para == null ? void 0 : para.externalWallets).length > 0:
+      case (activeWallet == null ? void 0 : activeWallet.isExternal):
         {
           const wallet = Object.values(para.externalWallets)[0];
           name2 = (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type, { prefix: para.cosmosPrefix });
@@ -34,7 +36,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         break;
     }
     return { name: name2, icon: icon2, src: src2 };
-  }, [para.partnerName, para.partnerLogo, para.externalWallets]);
+  }, [activeWallet, para.partnerName, para.partnerLogo, para.externalWallets]);
   return /* @__PURE__ */ jsxs(AccountContainer, { children: [
     /* @__PURE__ */ jsx(
       CpslIcon,
@@ -48,7 +50,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         src
       }
     ),
-    /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
+    connectionType === "both" ? /* @__PURE__ */ jsx(WalletSelect, {}) : /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
     withBalance && /* @__PURE__ */ jsx(Balance, {})
   ] });
 };

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

@@ -11,9 +11,8 @@ 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 { ACCOUNT_TYPES, safeStyled, useCopyToClipboard } from "@getpara/react-common";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
-import { ACCOUNT_TYPES } from "../../constants/oAuthLogos.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { AccountHeader } from "./AccountHeader.js";
 const Entry = ({
@@ -250,7 +249,7 @@ const ParaConnect = safeStyled.a`
 
 `;
 const ParaIcon = safeStyled(CpslIcon)`
-  --border-radius: 4px;
+  --icon-border-radius: 4px;
 `;
 const Dots = safeStyled.div`
   width: 75px;

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

@@ -4,12 +4,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AuthInput } from "../AuthInput/AuthInput.js";
 import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
 import { CpslButton, CpslDivider, CpslText } from "@getpara/react-components";
-import { getAccountTypeName } from "../../constants/oAuthLogos.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
 import { useEffect, useMemo } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { safeStyled } from "@getpara/react-common";
+import { getAccountTypeName, safeStyled } from "@getpara/react-common";
 function AccountProfileLinkOptions() {
   const para = useInternalClient();
   const { accountLinkOptions, linkAccount, isLinkAccountPending, linkAccountError, setLinkAccountError, resetMutations } = useAccountLinking();

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

@@ -4,9 +4,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslText } from "@getpara/react-components";
 import { useEffect, useState } from "react";
 import { AccountTypeIcon } from "../common.js";
-import { getAccountTypeName } from "../../constants/oAuthLogos.js";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
-import { safeStyled } from "@getpara/react-common";
+import { getAccountTypeName, safeStyled } from "@getpara/react-common";
 function AccountProfileUnlink() {
   var _a, _b;
   const { unlinkingAccount, unlinkAccountConfirm, isUnlinkAccountPending } = useAccountLinking(), [accountType, setAccountType] = useState((_b = (_a = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a.providerId) != null ? _b : unlinkingAccount == null ? void 0 : unlinkingAccount.type), [isUnlinkingExternalWallet, setIsUnlinkingExternalWallet] = useState(false);

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

@@ -15,7 +15,7 @@ import { AddFundsReceive } from "./AddFundsReceive.js";
 import { AddFundsContextProvider, TABS } from "./AddFundsContext.js";
 import { AnimatePresence } from "framer-motion";
 import { AddFundsSettings } from "./AddFundsSettings.js";
-import { WalletSelect } from "../WalletSelect/WalletSelect.js";
+import { WalletSelectOld } from "../WalletSelectOld/WalletSelectOld.js";
 const AddFunds = () => {
   const step = useModalStore((state) => state.step);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
@@ -56,13 +56,13 @@ const AddFunds = () => {
     return /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, {}) });
   }
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    isMultiFlow && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: TABS.filter(([enabledFlow]) => enabledFlow === EnabledFlow.BUY || enabledFlow === EnabledFlow.WITHDRAW).map(
+    isMultiFlow && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: TABS.filter(([enabledFlow]) => enabledFlow === EnabledFlow.BUY || enabledFlow === EnabledFlow.RECEIVE).map(
       ([tab2, _, icon, title]) => /* @__PURE__ */ jsxs(CpslTab, { tab: tab2, children: [
         /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon }),
         title
       ] }, tab2)
     ) }) }),
-    (step === ModalStep.ADD_FUNDS_RECEIVE || (embedded == null ? void 0 : embedded.wallets) && embedded.wallets.length > 1) && /* @__PURE__ */ jsx(WalletSelect, {}),
+    (step === ModalStep.ADD_FUNDS_RECEIVE || (embedded == null ? void 0 : embedded.wallets) && embedded.wallets.length > 1) && /* @__PURE__ */ jsx(WalletSelectOld, {}),
     /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AddFundsContextProvider, { "data-testid": "add-funds", tab, children: Content }) })
   ] });
 };

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -3,12 +3,11 @@ import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment2, useMemo } from "react";
 import { CpslButton, CpslDivider, CpslIcon, CpslIconGroup } from "@getpara/react-components";
-import { safeStyled } from "@getpara/react-common";
+import { ACCOUNT_TYPES, safeStyled } from "@getpara/react-common";
 import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { AuthLayout } from "../../types/modalProps.js";
-import { ACCOUNT_TYPES } from "../../constants/oAuthLogos.js";
 import { AuthOptions } from "../AuthOptions/AuthOptions.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";

package/dist/modal/components/ChainSwitch/config.d.ts

@@ -1,4 +1,4 @@
-import { Tab } from '../../types/commonTypes.js';
+import { Tab } from '@getpara/react-common';
 export declare enum TabValue {
     extension = "extension",
     mobile = "mobile",

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

@@ -11,9 +11,14 @@ import { useWallet } from "../../../provider/index.js";
 import { HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { getNetworkName } from "../../constants/constants.js";
-const Chain = ({ chainId, slot, isLarge = false }) => {
-  const network = getNetworkFromChainId(chainId);
-  const name = getNetworkName(network);
+const Chain = ({
+  chain: { id, name },
+  slot,
+  isLarge = false
+}) => {
+  var _a;
+  const network = getNetworkFromChainId(id.toString());
+  const networkName = (_a = name != null ? name : getNetworkName(id.toString())) != null ? _a : `Chain ID ${id.toString()}`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -21,13 +26,13 @@ const Chain = ({ chainId, slot, isLarge = false }) => {
       style: { display: "flex", alignItems: "center", gap: "4px", padding: isLarge ? "0px" : "4px 0 4px 8px" },
       children: [
         /* @__PURE__ */ jsx(NetworkIcon, { network, size: isLarge ? "24px" : "16px" }),
-        /* @__PURE__ */ jsx(ChainName, { variant: isLarge ? "bodyS" : "bodyXS", color: "contrast", children: name })
+        /* @__PURE__ */ jsx(ChainName, { variant: isLarge ? "bodyS" : "bodyXS", color: "contrast", children: networkName })
       ]
     }
   );
 };
 const ChainSelect = () => {
-  var _a;
+  var _a, _b;
   const containerRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
   const { data: activeWallet } = useWallet();
@@ -61,8 +66,14 @@ const ChainSelect = () => {
       alignCenter: true,
       selectedItemVariant: "bodyXS",
       children: [
-        chainIdToUse && /* @__PURE__ */ jsx(Chain, { slot: "selected-item", chainId: chainIdToUse }),
-        chains == null ? void 0 : chains.map((chain) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: chain.id.toString(), children: /* @__PURE__ */ jsx(Chain, { isLarge: true, chainId: chain.id.toString() }) }, chain.id))
+        chainIdToUse && /* @__PURE__ */ jsx(
+          Chain,
+          {
+            slot: "selected-item",
+            chain: { id: chainIdToUse, name: (_b = chains.find((c) => c.id.toString() === chainIdToUse)) == null ? void 0 : _b.name }
+          }
+        ),
+        chains == null ? void 0 : chains.map((chain) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: chain.id.toString(), children: /* @__PURE__ */ jsx(Chain, { isLarge: true, chain }) }, chain.id))
       ]
     }
   ) }) });

package/dist/modal/components/ExternalWalletStep/config.d.ts

@@ -1,4 +1,4 @@
-import { Tab } from '../../types/commonTypes.js';
+import { Tab } from '@getpara/react-common';
 export declare enum TabValue {
     extension = "extension",
     mobile = "mobile",

package/dist/modal/components/Header/hooks/useStepTitle.d.ts

@@ -3,5 +3,5 @@ export declare const connectWalletTitle = "Connect Wallet";
 export declare const useStepTitle: () => {
     title: any;
     isTitleDisplayed: boolean;
-    isControls: boolean;
+    isControls: boolean | undefined;
 };

package/dist/modal/components/Header/hooks/useStepTitle.js

@@ -6,7 +6,7 @@ import { ModalStep } from "../../../utils/steps.js";
 import { useExternalWallets } from "../../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../../provider/stores/useStore.js";
 import { useAccountLinking } from "../../../../provider/providers/AccountLinkProvider.js";
-import { useAccount } from "../../../../provider/index.js";
+import { useWallet } from "../../../../provider/index.js";
 const signUpOrLogInTitle = "Sign Up or Login";
 const connectWalletTitle = "Connect Wallet";
 const useStepTitle = () => {
@@ -22,7 +22,7 @@ const useStepTitle = () => {
   const isLogin = useModalStore((state) => state.isLogin());
   const currentStep = useModalStore((state) => state.step);
   const authLayout = useModalStore((state) => state.authLayout) || [];
-  const { connectionType } = useAccount();
+  const { data: activeWallet } = useWallet();
   const [isAuthFirst, isAuthCondensed, isExternalFirst, isExternalCondensed, isBothCondensed] = [
     (_a = authLayout[0]) == null ? void 0 : _a.includes("AUTH"),
     authLayout.includes("AUTH:CONDENSED"),
@@ -81,8 +81,8 @@ const useStepTitle = () => {
     return null;
   }, [currentStep, titles]);
   const isControls = useMemo(() => {
-    return connectionType === "external" && [ModalStep.ACCOUNT_MAIN, ModalStep.CHAIN_SWITCH].includes(currentStep);
-  }, [connectionType, currentStep]);
+    return (activeWallet == null ? void 0 : activeWallet.isExternal) && (activeWallet == null ? void 0 : activeWallet.type) === "EVM" && [ModalStep.ACCOUNT_MAIN, ModalStep.CHAIN_SWITCH].includes(currentStep);
+  }, [activeWallet, currentStep]);
   const isTitleDisplayed = useMemo(() => {
     return !isControls && (currentStep !== ModalStep.AUTH_MAIN || !logo);
   }, [isControls, currentStep, logo]);

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

@@ -3,12 +3,11 @@ import {
   __async
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { safeStyled } from "@getpara/react-common";
+import { ACCOUNT_TYPES, safeStyled } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { getTileButtonFlex } from "../../utils/getTileButtonFlex.js";
 import { StyledCpslTileButton } from "../common.js";
-import { ACCOUNT_TYPES } from "../../constants/oAuthLogos.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 const HAS_MORE_LENGTH = 3;

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

@@ -1,30 +1,51 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, 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 { getExternalWalletIcon, 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";
+import { truncateAddress } from "@getpara/web-sdk";
 const getValue = (id, type) => {
   return id && type ? `${id}~${type}` : void 0;
 };
-const Wallet = ({ wallet, withCopy, slot }) => {
+const Wallet = ({
+  wallet,
+  withCopy,
+  slot,
+  withIcon,
+  isMenu
+}) => {
   const para = useInternalClient();
   const [isCopied, copy] = useCopyToClipboard();
-  return /* @__PURE__ */ jsxs(WalletContainer, { slot, style: { flex: "1" }, children: [
+  const { name, icon, src } = useMemo(() => {
+    var _a;
+    let name2, icon2, src2;
+    if (wallet.isExternal) {
+      name2 = (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type, { prefix: para.cosmosPrefix });
+      src2 = wallet.ensAvatar;
+      icon2 = getExternalWalletIcon(wallet.externalProviderId);
+    } else {
+      name2 = `${para.partnerName} Wallet`;
+      src2 = para.partnerLogo;
+      icon2 = "wallet02";
+    }
+    return { name: name2, icon: icon2, src: src2 };
+  }, [wallet, para.partnerName, para.partnerLogo, para.externalWallets]);
+  return /* @__PURE__ */ jsxs(WalletContainer, { slot, style: isMenu ? void 0 : { flex: "0" }, children: [
+    withIcon && /* @__PURE__ */ jsx(WalletIcon, { icon, src, size: "32px", inset: "6px" }),
     /* @__PURE__ */ jsx(
-      WalletTypeIcon,
+      CpslText,
       {
-        externalWallet: wallet.isExternal ? wallet.externalProviderId : void 0,
-        walletType: wallet.type,
-        size: "32px",
-        inset: "6px"
+        variant: slot === "selected-item" ? "headingXS" : "bodyM",
+        weight: "semiBold",
+        color: "contrast",
+        style: { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", flex: isMenu ? "1" : void 0 },
+        children: name
       }
     ),
-    /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "contrast", style: { flex: "1" }, children: para.getDisplayAddress(wallet.id, { truncate: true, addressType: wallet.type }) }),
     withCopy && /* @__PURE__ */ jsx(
       CopyButton,
       {
@@ -42,48 +63,49 @@ const Wallet = ({ wallet, withCopy, slot }) => {
   ] });
 };
 const WalletSelect = () => {
+  var _a, _b, _c;
   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 firstEmbeddedWallet = (_b = (_a = embedded == null ? void 0 : embedded.wallets) == null ? void 0 : _a.filter((wallet) => !wallet.isExternal)) == null ? void 0 : _b[0];
+  const availableExternalWallets = ((_c = embedded == null ? void 0 : embedded.wallets) == null ? void 0 : _c.filter((wallet) => wallet.isExternal)) || [];
+  const availableWallets = [...firstEmbeddedWallet ? [firstEmbeddedWallet] : [], ...availableExternalWallets];
   const isMultiWallet = availableWallets && availableWallets.length > 1;
-  const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsx(Wallet, { withCopy: true, wallet: activeWallet, slot: "selected-item" }) : null;
+  const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsx(Wallet, { wallet: activeWallet, slot: "selected-item", withCopy: activeWallet.isExternal }) : 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);
-          })
-        ]
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsx(Container, { children: /* @__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,
+        firstEmbeddedWallet && /* @__PURE__ */ jsx(SelectItem, { slot: "items", value: getValue(firstEmbeddedWallet == null ? void 0 : firstEmbeddedWallet.id, firstEmbeddedWallet == null ? void 0 : firstEmbeddedWallet.type), children: /* @__PURE__ */ jsx(Wallet, { isMenu: true, wallet: firstEmbeddedWallet, withIcon: true }) }, "embedded"),
+        (availableExternalWallets || []).map((wallet) => {
+          const key = getValue(wallet.id, wallet.type);
+          return /* @__PURE__ */ jsx(SelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsx(Wallet, { isMenu: true, wallet, withIcon: true, withCopy: true }) }, key);
+        })
+      ]
+    }
+  ) }) });
 };
 const Container = safeStyled.div`
   display: flex;
@@ -95,12 +117,19 @@ const WalletContainer = safeStyled.div`
   display: flex;
   align-items: center;
   gap: 8px;
+  width: 100%;
 `;
 const Select = safeStyled(CpslSelect)`
   --icon-width: 32px;
   --icon-height: 32px;
-  --container-border-color: var(--cpsl-color-background-16);
+  --container-border-color: transparent;
+  --container-background-color: transparent;
+  --container-border-width: 0px;
   --container-background-color-disabled: var(--container-background-color);
+  --container-box-shadow: none !important;
+  --dropdown-border-width: 0px;
+  --dropdown-background-color: var(--cpsl-color-background-4);
+  
   width: 286px;
   position: relative;
 
@@ -108,6 +137,10 @@ const Select = safeStyled(CpslSelect)`
     white-space: nowrap;
   }
 
+  &::part(select-container) {
+    justify-content: center;
+  }
+
   &::part(dropdown) {
     min-width: ${({ $width }) => `${$width - 2}px`};
   }
@@ -125,6 +158,9 @@ const SelectItem = safeStyled(CpslSelectItem)`
   --container-padding-end: 12px;
   --container-padding-top: 8px;
   --container-padding-bottom: 8px;
+  --container-background-color: var(--cpsl-color-background-4);
+  --container-hover-background-color: var(--cpsl-color-background-8);
+  width: 100%;
 `;
 const SelectContainer = safeStyled.div`
   position: relative;
@@ -132,12 +168,11 @@ const SelectContainer = safeStyled.div`
   align-items: center;
   gap: 8px;
   border-radius: var(--cpsl-border-radius-tile-button);
-  background-color: var(--cpsl-color-background-4);
+  background-color: transparent;
 `;
-const WalletTypeIcon = safeStyled(common.WalletTypeIcon)`
-  --border: 1px solid var(--cpsl-color-background-8);
-  --background: var(--cpsl-color-background-0);
-  --border-radius: 4px;
+const WalletIcon = safeStyled(CpslIcon)`  --icon-border: 1px solid var(--cpsl-color-background-8);
+  --icon-background: var(--cpsl-color-background-0);
+  --icon-border-radius: 4px;
 `;
 const CopyButton = safeStyled(CpslButton)`
   cpsl-icon {

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

@@ -0,0 +1,11 @@
+export declare const WalletSelectOld: () => 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/WalletSelectOld/WalletSelectOld.js

@@ -0,0 +1,158 @@
+"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,
+  withIcon
+}) => {
+  const para = useInternalClient();
+  const [isCopied, copy] = useCopyToClipboard();
+  return /* @__PURE__ */ jsxs(WalletContainer, { slot, style: { flex: "1" }, children: [
+    withIcon && /* @__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 WalletSelectOld = () => {
+  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", withIcon: true }) : 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((wallet) => {
+            const key = getValue(wallet.id, wallet.type);
+            return /* @__PURE__ */ jsx(SelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsx(Wallet, { wallet, withIcon: true }) }, 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,
+  WalletSelectOld
+};

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

@@ -34,7 +34,7 @@ export declare function AssetIcon({ asset, size }: {
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function NetworkIcon({ network, size }: {
-    network: Network;
+    network?: Network;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function WalletTypeIcon({ className, walletType, externalWallet, ...props }: {

package/dist/modal/components/common.js

@@ -6,10 +6,9 @@ import {
 } 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 { ACCOUNT_TYPES, safeStyled } from "@getpara/react-common";
 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";
 const SpinnerContainer = safeStyled.div`
   display: flex;
@@ -148,12 +147,25 @@ function AssetIcon({ asset, size }) {
   return /* @__PURE__ */ jsx(StyledIcon, { size, icon: data.icon, inset: data.isCircular ? void 0 : "15%", invert: isDark && data.isDark });
 }
 function NetworkIcon({ network, size }) {
+  var _a;
   const isDark = useStore((state) => {
-    var _a, _b;
-    return ((_b = (_a = state.modalConfig) == null ? void 0 : _a.theme) == null ? void 0 : _b.mode) === "dark";
+    var _a2, _b;
+    return ((_b = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b.mode) === "dark";
   });
-  const data = NETWORKS[network];
-  return /* @__PURE__ */ jsx(StyledIcon, { size, icon: data.icon, inset: data.isCircular ? void 0 : "15%", invert: isDark && data.isDark });
+  const data = (_a = NETWORKS[network != null ? network : ""]) != null ? _a : {
+    icon: "globe",
+    isPlain: true
+  };
+  return /* @__PURE__ */ jsx(
+    StyledIcon,
+    {
+      size,
+      icon: data.icon,
+      inset: data.isCircular ? void 0 : "15%",
+      color: (data == null ? void 0 : data.isPlain) ? "var(--cpsl-color-text-contrast)" : void 0,
+      invert: isDark && data.isDark
+    }
+  );
 }
 function WalletTypeIcon(_c) {
   var _d = _c, {

package/dist/modal/constants/constants.d.ts

@@ -1,7 +1,7 @@
 import { Network, OnRampAsset, OnRampMethod, OnRampProvider, TWalletType } from '@getpara/core-sdk';
 import { IconType } from '@getpara/react-components';
 import { Transition, Variants } from 'framer-motion';
-import { DisplayMetadata } from '../types/commonTypes.js';
+import { DisplayMetadata } from '@getpara/react-common';
 export declare const PARA_CONNECT = "https://connect.getpara.com/";
 export declare const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
 export type OnRampProviderConfig = DisplayMetadata & {
@@ -25,7 +25,7 @@ export declare function getNetworkName(str: Network | string): string;
 export declare function getNetworkIcon(str: Network | string): IconType;
 export declare function getAssetCode(str: OnRampAsset | string): string;
 export declare function getAssetName(str: OnRampAsset | string): string;
-export declare function getAssetIcon(str: OnRampAsset | string): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "wallet" | "cosmos" | "solana" | "para" | "walletConnect" | "close" | "copy" | "safe" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowCircleDown" | "arrowNarrow" | "arrow" | "asterisk" | "backpack" | "backupKit" | "bank" | "baseBrand" | "beraBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "clubhouseBrand" | "clubhouse" | "code" | "coinbase" | "copy07" | "cosmosCircle" | "cosmostation" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dotsSquare" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "glow" | "googleBrand" | "google" | "gridDots" | "haha" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "keplr" | "laptop" | "leap" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "menu" | "metamask" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "okx" | "optimismBrand" | "paraArrow" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "passcode" | "phantom" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rabby" | "rainbow" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solanaCircle" | "solflare" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "user01" | "userCircle" | "userPlus" | "user" | "valora" | "wallet02" | "youtubeBrand" | "youtube" | "zerion" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
+export declare function getAssetIcon(str: OnRampAsset | string): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "wallet" | "cosmos" | "solana" | "para" | "walletConnect" | "close" | "copy" | "safe" | "stripeBrand" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowCircleDown" | "arrowNarrow" | "arrow" | "asterisk" | "backpack" | "backupKit" | "bank" | "baseBrand" | "beraBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "clubhouseBrand" | "clubhouse" | "code" | "coinbase" | "copy07" | "cosmosCircle" | "cosmostation" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dotsSquare" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "glow" | "googleBrand" | "google" | "gridDots" | "haha" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "keplr" | "laptop" | "leap" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "menu" | "metamask" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "okx" | "optimismBrand" | "paraArrow" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "passcode" | "phantom" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rabby" | "rainbow" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solanaCircle" | "solflare" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "user01" | "userCircle" | "userPlus" | "user" | "valora" | "wallet02" | "youtubeBrand" | "youtube" | "zerion" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
 export declare const MOBILE_SIZE = 480;
 export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
 export declare const EMAIL_REGEX: RegExp;

package/dist/modal/constants/constants.js

@@ -126,7 +126,7 @@ const BODY_MOTION_VARIANTS = {
 const BODY_TRANSITION = {
   duration: 0.2
 };
-const SDK_VERSION = "2.0.0-alpha.42";
+const SDK_VERSION = "2.0.0-alpha.43";
 export {
   BODY_MOTION_VARIANTS,
   BODY_TRANSITION,

package/dist/modal/utils/openPopup.js

@@ -14,7 +14,7 @@ function openPopup({
   let popUpHeight;
   switch (type) {
     case "LOGIN_PASSWORD": {
-      popUpHeight = 460;
+      popUpHeight = 798;
       break;
     }
     case "LOGIN_PASSKEY": {

package/dist/provider/hooks/queries/useAccount.js

@@ -33,7 +33,7 @@ function pickCosmosAccount(account) {
 const useAccount = ({ cosmos } = {}) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const client = useInternalClient();
-  const { data: isFullyLoggedIn, isSuccess } = useIsFullyLoggedIn();
+  const { data: isFullyLoggedIn, isSuccess, isLoading: isFullyLoggedInLoading } = useIsFullyLoggedIn();
   const evmContext = useStore((state) => state.evmContext);
   const { useAccount: useEvmAccount } = useContext(evmContext);
   const evmAccount = useEvmAccount();
@@ -56,6 +56,7 @@ const useAccount = ({ cosmos } = {}) => {
     queryKey: [
       ACCOUNT_BASE_KEY,
       isFullyLoggedIn != null ? isFullyLoggedIn : null,
+      isFullyLoggedInLoading,
       (_h = client == null ? void 0 : client.userId) != null ? _h : null,
       evmQueryKeys,
       cosmosQueryKeys,
@@ -133,7 +134,7 @@ const useAccount = ({ cosmos } = {}) => {
       solana: { isConnected: false }
     }
   };
-  return __spreadProps(__spreadValues({}, data != null ? data : defaultResp), { isLoading });
+  return __spreadProps(__spreadValues({}, data != null ? data : defaultResp), { isLoading: isFullyLoggedInLoading || isLoading });
 };
 export {
   ACCOUNT_BASE_KEY,

package/dist/provider/hooks/queries/useIsFullyLoggedIn.js

@@ -10,7 +10,6 @@ const useIsFullyLoggedIn = () => {
   const client = useInternalClient();
   return useQuery({
     enabled: !!(client == null ? void 0 : client.isReady),
-    staleTime: 5e3,
     queryKey: [IS_FULLY_LOGGED_IN_BASE_KEY, (_a = client == null ? void 0 : client.userId) != null ? _a : null],
     queryFn: () => __async(void 0, null, function* () {
       var _a2;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@getpara/react-sdk-lite",
-  "version": "2.0.0-alpha.42",
+  "version": "2.0.0-alpha.43",
   "bin": {
     "setup-para": "dist/cli/cli.mjs"
   },
   "dependencies": {
-    "@getpara/react-common": "2.0.0-alpha.42",
-    "@getpara/react-components": "2.0.0-alpha.42",
-    "@getpara/web-sdk": "2.0.0-alpha.42",
+    "@getpara/react-common": "2.0.0-alpha.43",
+    "@getpara/react-components": "2.0.0-alpha.43",
+    "@getpara/web-sdk": "2.0.0-alpha.43",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.31",
     "libphonenumber-js": "^1.11.7",
@@ -16,9 +16,9 @@
     "zustand-sync-tabs": "^0.2.2"
   },
   "devDependencies": {
-    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.42",
-    "@getpara/evm-wallet-connectors": "2.0.0-alpha.42",
-    "@getpara/solana-wallet-connectors": "2.0.0-alpha.42",
+    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.43",
+    "@getpara/evm-wallet-connectors": "2.0.0-alpha.43",
+    "@getpara/solana-wallet-connectors": "2.0.0-alpha.43",
     "@tanstack/react-query": "^5.74.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
@@ -38,7 +38,7 @@
     "package.json",
     "styles.css"
   ],
-  "gitHead": "6f44dc050550a1f567088c81b3ae06c7f1f8ebcb",
+  "gitHead": "6c4b7915c54f51ca0d4abb5c947e5997508669d1",
   "main": "dist/index.js",
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",

package/dist/modal/constants/oAuthLogos.d.ts

@@ -1,12 +0,0 @@
-import { IconType } from '@getpara/react-components';
-import { TLinkedAccountType } from '@getpara/web-sdk';
-import { DisplayMetadata } from '../types/commonTypes.js';
-export declare const ACCOUNT_TYPES: {
-    [key in TLinkedAccountType | string]: DisplayMetadata & {
-        isExternalWallet?: boolean;
-    };
-};
-export declare function getAccountTypeName(type: TLinkedAccountType | string | undefined, { inline }?: {
-    inline?: boolean;
-}): string | undefined;
-export declare function getAccountTypeLogo(type: TLinkedAccountType | undefined): IconType | undefined;

package/dist/modal/constants/oAuthLogos.js

@@ -1,160 +0,0 @@
-"use client";
-import "../../chunk-MMUBH76A.js";
-const ACCOUNT_TYPES = {
-  "EMAIL": {
-    icon: "mail",
-    name: "Email",
-    inlineText: "email address",
-    isPlain: true
-  },
-  "PHONE": {
-    icon: "phone",
-    name: "Phone",
-    inlineText: "phone number",
-    isPlain: true
-  },
-  "EXTERNAL_WALLET": {
-    icon: "wallet",
-    name: "External Wallet",
-    inlineText: "external wallet",
-    isPlain: true
-  },
-  "GOOGLE": {
-    icon: "google",
-    iconBranded: "googleBrand",
-    name: "Google"
-  },
-  "TWITTER": {
-    icon: "twitter",
-    // Not using branded here to ensure the icon looks correct in dark mode
-    iconBranded: "twitter",
-    name: "X / Twitter",
-    inlineText: "X account",
-    isDark: true
-  },
-  "APPLE": {
-    icon: "apple",
-    // Not using branded here to ensure the icon looks correct in dark mode
-    iconBranded: "apple",
-    name: "Apple",
-    isDark: true
-  },
-  "DISCORD": {
-    icon: "discord",
-    iconBranded: "discordBrand",
-    name: "Discord"
-  },
-  "FACEBOOK": {
-    icon: "facebook",
-    iconBranded: "facebookBrand",
-    name: "Facebook"
-  },
-  "FARCASTER": {
-    icon: "farcaster",
-    iconBranded: "farcasterBrand",
-    name: "Farcaster"
-  },
-  "TELEGRAM": {
-    icon: "telegram",
-    iconBranded: "telegramBrand",
-    name: "Telegram"
-  },
-  "MetaMask": {
-    icon: "metamask",
-    name: "MetaMask",
-    isExternalWallet: true
-  },
-  "Rainbow": {
-    icon: "rainbow",
-    name: "Rainbow",
-    isExternalWallet: true
-  },
-  "Coinbase Wallet": {
-    icon: "coinbase",
-    name: "Coinbase Wallet",
-    isExternalWallet: true
-  },
-  "WalletConnect": {
-    icon: "walletConnect",
-    name: "WalletConnect",
-    isExternalWallet: true
-  },
-  "Zerion": {
-    icon: "zerion",
-    name: "Zerion",
-    isExternalWallet: true
-  },
-  "Safe": {
-    icon: "safe",
-    name: "Safe",
-    isExternalWallet: true
-  },
-  "Rabby": {
-    icon: "rabby",
-    name: "Rabby",
-    isExternalWallet: true
-  },
-  "OKX Wallet": {
-    icon: "okx",
-    name: "OKX Wallet",
-    isExternalWallet: true
-  },
-  "Phantom": {
-    icon: "phantom",
-    name: "Phantom",
-    isExternalWallet: true
-  },
-  "Glow": {
-    icon: "glow",
-    name: "Glow",
-    isExternalWallet: true
-  },
-  "Backpack": {
-    icon: "backpack",
-    name: "Backpack",
-    isExternalWallet: true
-  },
-  "Keplr": {
-    icon: "keplr",
-    name: "Keplr",
-    isExternalWallet: true
-  },
-  "Leap": {
-    icon: "leap",
-    name: "Leap",
-    isExternalWallet: true
-  },
-  "HaHa": {
-    icon: "haha",
-    name: "HaHa",
-    isExternalWallet: true
-  },
-  "Cosmostation": {
-    icon: "cosmostation",
-    name: "Cosmostation",
-    isExternalWallet: true
-  },
-  "Solflare": {
-    icon: "solflare",
-    name: "Solflare",
-    isExternalWallet: true
-  },
-  "Valora": {
-    icon: "valora",
-    name: "Valora",
-    isExternalWallet: true
-  }
-};
-function getAccountTypeName(type, { inline = false } = {}) {
-  var _a;
-  const data = type ? ACCOUNT_TYPES[type] : void 0;
-  return data ? inline ? (_a = data.inlineText) != null ? _a : `${data.name} ${data.isExternalWallet ? "wallet" : "account"}` : data.name : void 0;
-}
-function getAccountTypeLogo(type) {
-  return type ? ACCOUNT_TYPES[type].iconBranded || ACCOUNT_TYPES[type].icon : void 0;
-}
-export {
-  ACCOUNT_TYPES,
-  getAccountTypeLogo,
-  getAccountTypeName
-};

package/dist/modal/types/commonTypes.d.ts

@@ -1,15 +0,0 @@
-import { IconType } from '@getpara/react-components';
-export type Tab<T> = {
-    label: string;
-    value: T;
-    icon: IconType;
-};
-export type DisplayMetadata = {
-    name: string;
-    inlineText?: string;
-    icon: IconType;
-    iconBranded?: IconType;
-    isDark?: boolean;
-    isCircular?: boolean;
-    isPlain?: boolean;
-};

package/dist/modal/types/commonTypes.js

@@ -1 +0,0 @@
-"use client";

package/dist/modal/utils/icons.d.ts

@@ -1,5 +0,0 @@
-import { TExternalWallet } from '@getpara/web-sdk';
-import { IconType } from '@getpara/react-components';
-export declare function getExternalWalletIcon(internalId: TExternalWallet | string | undefined, { branded }?: {
-    branded?: boolean;
-}): IconType | undefined;

package/dist/modal/utils/icons.js

@@ -1,17 +0,0 @@
-"use client";
-import "../../chunk-MMUBH76A.js";
-import { ACCOUNT_TYPES } from "../constants/oAuthLogos.js";
-function getExternalWalletIcon(internalId, { branded = false } = {}) {
-  var _a;
-  if (!internalId) {
-    return "wallet02";
-  }
-  const data = (_a = ACCOUNT_TYPES) == null ? void 0 : _a[internalId];
-  if (!data) {
-    return "wallet02";
-  }
-  return branded ? data.iconBranded || data.icon : data.icon;
-}
-export {
-  getExternalWalletIcon
-};