@getpara/react-sdk-lite 2.0.0-alpha.66 → 2.0.0-alpha.68

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

@@ -4,78 +4,20 @@ import {
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
+import { GradientScroll, StepContainer } from "../common.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { useAccount } from "../../../provider/index.js";
 import { useLinkedAccounts } from "../../../provider/hooks/index.js";
-import {
-  formatAssetQuantity,
-  formatCurrency,
-  truncateAddress
-} from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
 import { useEffect, useMemo } from "react";
-import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard, WalletTypeIcon } from "@getpara/react-common";
-import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { safeStyled } from "@getpara/react-common";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { Waiting } from "../Waiting/Waiting.js";
-const Entry = ({
-  identifier,
-  icon,
-  name,
-  address,
-  addressShort,
-  balance: walletBalance,
-  onUnlink
-}) => {
-  const balancesConfig = useStore((state) => {
-    var _a;
-    return (_a = state.modalConfig) == null ? void 0 : _a.balances;
-  });
-  const [isCopied, copy] = useCopyToClipboard();
-  const balance = useMemo(() => {
-    var _a;
-    switch (true) {
-      case !balancesConfig:
-      case (balancesConfig == null ? void 0 : balancesConfig.displayType) === "AGGREGATED":
-        return formatCurrency(walletBalance == null ? void 0 : walletBalance.value);
-      default:
-        return formatAssetQuantity({
-          quantity: (_a = walletBalance == null ? void 0 : walletBalance.assets.find(
-            ({ metadata }) => !!metadata && metadata.symbol === balancesConfig.asset.symbol
-          )) == null ? void 0 : _a.quantity,
-          symbol: balancesConfig.asset.symbol
-        });
-    }
-  }, [balancesConfig, walletBalance]);
-  return /* @__PURE__ */ jsxs(EntryContainer, { children: [
-    icon,
-    /* @__PURE__ */ jsx(EntryDisplayName, { variant: "bodyM", color: "contrast", children: name }),
-    /* @__PURE__ */ jsx(EntryFlex, { children: address ? /* @__PURE__ */ jsxs(EntryAddress, { children: [
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", children: addressShort != null ? addressShort : address }),
-      /* @__PURE__ */ jsx(
-        CpslButton,
-        {
-          size: "small",
-          variant: "ghost",
-          onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            copy(address);
-          },
-          children: /* @__PURE__ */ jsx(CopyIcon, { id: "ignore-click", slot: "start", isCopied, icon: isCopied ? "check" : "copy" })
-        }
-      )
-    ] }) : null }),
-    typeof balance === "string" && balance !== "" && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "contrast", children: balance }),
-    onUnlink && /* @__PURE__ */ jsx(EntryUnlink, { href: "#", onClick: onUnlink, children: "Unlink" })
-  ] }, address != null ? address : identifier);
-};
+import { AccountLinkEntry, WalletEntry } from "./AccountProfileEntry.js";
 const AccountProfile = ({
   isDisconnecting,
   onDisconnect
@@ -83,13 +25,11 @@ const AccountProfile = ({
   const para = useInternalClient();
   const { embedded } = useAccount();
   const { data: linkedAccounts } = useLinkedAccounts();
-  const { wallets } = useExternalWallets();
-  const { isEnabled: isAccountLinkingEnabled, linkAccount, unlinkAccount } = useAccountLinking();
+  const { isEnabled: isAccountLinkingEnabled, linkAccount } = useAccountLinking();
   const hideWallets = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
   });
-  const { profileBalance } = useAssets();
   const { switchWallets, switchWalletsUrl, setSwitchWalletsUrl, isSwitchWalletsPending } = useAuthActions();
   const setStep = useModalStore((state) => state.setStep);
   const partnerGroups = useMemo(() => {
@@ -117,21 +57,13 @@ const AccountProfile = ({
   }
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     partnerGroups && partnerGroups.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
-      partnerGroups.map(({ partner, wallets: wallets2 }) => {
+      partnerGroups.map(({ partner, wallets }) => {
         return /* @__PURE__ */ jsxs(Section, { children: [
           /* @__PURE__ */ jsxs(Title, { variant: "bodyS", color: "secondary", children: [
             partner.displayName,
             " Wallets"
           ] }),
-          /* @__PURE__ */ jsx(Content, { children: wallets2.map((wallet) => /* @__PURE__ */ jsx(
-            Entry,
-            {
-              icon: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: wallet.type, externalWallet: wallet.externalProviderId, size: "24px" }),
-              name: truncateAddress(wallet.address, wallet.type),
-              balance: profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address)
-            },
-            `${wallet.address}-${wallet.type}`
-          )) })
+          /* @__PURE__ */ jsx(Content, { children: wallets.map((wallet) => /* @__PURE__ */ jsx(WalletEntry, { wallet, isSelectable: true }, `${wallet.address}-${wallet.type}`)) })
         ] }, partner.id);
       }),
       !embedded.isGuestMode && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: switchWallets, disabled: isSwitchWalletsPending, children: isSwitchWalletsPending ? "Please Wait..." : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -142,30 +74,8 @@ const AccountProfile = ({
     !embedded.isGuestMode && /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Connected Wallets" }),
       /* @__PURE__ */ jsxs(Content, { children: [
-        Object.values((para == null ? void 0 : para.externalWallets) || {}).map((wallet) => {
-          var _a, _b;
-          const externalWallet = wallets.find((w) => w.name === wallet.name);
-          return /* @__PURE__ */ jsx(
-            Entry,
-            {
-              icon: /* @__PURE__ */ jsx(
-                WalletTypeIcon,
-                {
-                  walletType: wallet.type,
-                  externalWallet: externalWallet != null ? externalWallet : wallet.externalProviderId,
-                  size: "24px",
-                  inset: "0"
-                }
-              ),
-              name: (_b = (_a = wallet.ensName) != null ? _a : wallet.name) != null ? _b : "",
-              address: wallet.address,
-              addressShort: wallet.address ? truncateAddress(wallet.address, wallet.type, {
-                prefix: para.cosmosPrefix
-              }) : "",
-              balance: profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address)
-            },
-            wallet.address
-          );
+        para.availableWallets.filter(({ isExternal }) => isExternal).map((wallet) => {
+          return /* @__PURE__ */ jsx(WalletEntry, { wallet, isSelectable: true }, wallet.address);
         }),
         /* @__PURE__ */ jsxs(
           CpslButton,
@@ -189,43 +99,13 @@ const AccountProfile = ({
         /* @__PURE__ */ jsx(GradientScroll, { gap: "12px", height: "360px", children: [...((linkedAccounts == null ? void 0 : linkedAccounts.primary) || []).map((p) => __spreadProps(__spreadValues({}, p), { isPrimary: true })), ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []].filter(({ externalWallet }) => {
           return !externalWallet || externalWallet.address !== (embedded == null ? void 0 : embedded.externalWalletAddress);
         }).map((linkedAccount) => {
-          var _a, _b, _c, _d, _e;
-          const { identifier, displayName, type, isPrimary = false, externalWallet } = linkedAccount;
-          const externalWalletConnector = wallets.find(
-            (wallet) => {
-              var _a2, _b2;
-              return wallet.id === (externalWallet == null ? void 0 : externalWallet.providerId) || wallet.id.toLowerCase() === ((_a2 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _a2.toLowerCase()) || wallet.name.toLowerCase() === ((_b2 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _b2.toLowerCase());
-            }
-          );
-          let accountType = type;
-          let src = void 0;
-          if (externalWallet) {
-            if (externalWalletConnector) {
-              accountType = void 0;
-              src = externalWalletConnector.iconUrl;
-            } else if (externalWallet.providerId && ACCOUNT_TYPES[externalWallet.providerId]) {
-              accountType = externalWallet.providerId;
-              src = void 0;
-            } else {
-              accountType = "EXTERNAL_WALLET";
-              src = void 0;
-            }
-          }
           return /* @__PURE__ */ jsx(
-            Entry,
+            AccountLinkEntry,
             {
-              icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, src, size: "24px" }),
-              name: externalWallet ? (_c = (_b = (_a = externalWallet.ensName) != null ? _a : externalWalletConnector == null ? void 0 : externalWalletConnector.name) != null ? _b : externalWallet.provider) != null ? _c : "" : displayName != null ? displayName : identifier,
-              address: (_d = externalWallet == null ? void 0 : externalWallet.addressBech32) != null ? _d : externalWallet == null ? void 0 : externalWallet.address,
-              addressShort: externalWallet ? truncateAddress((_e = externalWallet.addressBech32) != null ? _e : externalWallet.address, externalWallet.type, {
-                prefix: para.cosmosPrefix
-              }) : void 0,
-              onUnlink: isPrimary ? void 0 : (e) => {
-                e.preventDefault();
-                unlinkAccount(linkedAccount);
-              }
+              accountLink: linkedAccount,
+              isPrimary: linkedAccount.isPrimary
             },
-            identifier
+            linkedAccount.id
           );
         }) }),
         /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, variant: "tertiary", onClick: () => linkAccount(void 0), children: [
@@ -254,50 +134,10 @@ const Content = safeStyled(Section)`
 const Title = safeStyled(CpslText)`
   font-weight: 600;
 `;
-const EntryContainer = safeStyled.div`
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-const EntryDisplayName = safeStyled(CpslText)``;
-const EntryFlex = safeStyled.div`
-  flex: 1;
-`;
-const EntryAddress = safeStyled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-const CopyIcon = safeStyled(CpslIcon)`
-  --width: 16px;
-  --height: 16px;
-  --icon-color: ${({ isCopied }) => isCopied ? "var(--cpsl-color-utility-green) !important" : "var(--cpsl-color-text-secondary)"};
-
-  &:hover {
-    --icon-color: var(--cpsl-color-text-contrast);
-  }
-`;
-const EntryUnlink = safeStyled.a`
-  color: var(--cpsl-color-utility-red);
-  position: absolute;
-  right: 0;
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: var(--cpsl-font-family);
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
 const DisconnectButton = safeStyled(CpslButton)`
   --button-border-width: 0px;
   --button-destructive-hover-background-color: rgba(255, 0, 0, 0.2);
   --button-destructive-active-background-color: rgba(255, 0, 0, 0.1);
-
 `;
 export {
   AccountProfile

package/dist/modal/components/Account/AccountProfileEntry.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { AvailableWallet, LinkedAccount } from '@getpara/web-sdk';
+export declare const WalletEntry: ({ wallet, isSelectable, style, className, }: {
+    wallet: AvailableWallet;
+    isSelectable?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountLinkEntry: ({ accountLink, isPrimary, }: {
+    accountLink: LinkedAccount;
+    isPrimary?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,220 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard, WalletTypeIcon } from "@getpara/react-common";
+import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
+import {
+  formatAssetQuantity,
+  formatCurrency,
+  truncateAddress
+} from "@getpara/web-sdk";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useModalStore } from "../../stores/index.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
+import { ModalStep } from "../../utils/steps.js";
+import { AccountTypeIcon } from "../common.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const AccountProfileEntry = ({
+  icon,
+  key,
+  text,
+  textSecondary,
+  textTertiary,
+  copyString,
+  accessory,
+  style,
+  className,
+  onSelect
+}) => {
+  const [isCopied, copy] = useCopyToClipboard();
+  const Copy = copyString ? /* @__PURE__ */ jsx(
+    CpslButton,
+    {
+      size: "small",
+      variant: "ghost",
+      onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        copy(copyString);
+      },
+      children: /* @__PURE__ */ jsx(CopyIcon, { id: "ignore-click", slot: "start", isCopied, icon: isCopied ? "check" : "copy" })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(EntryContainer, { onClick: onSelect, className, style, children: [
+    icon,
+    /* @__PURE__ */ jsx(EntryDisplayName, { variant: "bodyM", color: "contrast", children: text }),
+    /* @__PURE__ */ jsx(EntryFlex, { children: textSecondary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", children: textSecondary }),
+      Copy
+    ] }) : Copy }),
+    textTertiary && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "contrast", children: textTertiary }),
+    accessory,
+    onSelect && /* @__PURE__ */ jsx(CpslIcon, { color: "var(--cpsl-color-foreground-32)", icon: "chevronRight", size: "16px" })
+  ] }, key);
+};
+const WalletEntry = ({
+  wallet,
+  isSelectable = false,
+  style,
+  className
+}) => {
+  var _a, _b;
+  const { wallets } = useExternalWallets();
+  const { profileBalance } = useAssets();
+  const balancesConfig = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.balances;
+  });
+  const setProfileWallet = useModalStore((state) => state.setProfileWallet);
+  const setStep = useModalStore((state) => state.setStep);
+  const walletBalance = useMemo(() => {
+    return profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address);
+  }, [profileBalance, wallet.address]);
+  const externalWallet = useMemo(
+    () => wallets.find((w) => w.id === wallet.externalProviderId),
+    [wallets, wallet.externalProviderId]
+  );
+  const withAddressShort = wallet.ensName || !!wallet.externalProviderId;
+  const balance = useMemo(() => {
+    var _a2;
+    switch (true) {
+      case !balancesConfig:
+      case (balancesConfig == null ? void 0 : balancesConfig.displayType) === "AGGREGATED":
+        return formatCurrency(walletBalance == null ? void 0 : walletBalance.value);
+      default:
+        return formatAssetQuantity({
+          quantity: (_a2 = walletBalance == null ? void 0 : walletBalance.assets.find(
+            ({ metadata }) => !!metadata && metadata.symbol === balancesConfig.asset.symbol
+          )) == null ? void 0 : _a2.quantity,
+          symbol: balancesConfig.asset.symbol
+        });
+    }
+  }, [balancesConfig, walletBalance]);
+  return /* @__PURE__ */ jsx(
+    AccountProfileEntry,
+    {
+      icon: /* @__PURE__ */ jsx(
+        WalletTypeIcon,
+        {
+          walletType: wallet.type,
+          externalWallet: externalWallet != null ? externalWallet : wallet.externalProviderId,
+          size: "24px",
+          inset: "0"
+        }
+      ),
+      text: (_b = (_a = wallet.ensName) != null ? _a : wallet.externalProviderId) != null ? _b : wallet.addressShort,
+      textSecondary: withAddressShort ? wallet.addressShort : void 0,
+      textTertiary: balance,
+      copyString: wallet.address,
+      style,
+      className,
+      onSelect: isSelectable ? () => {
+        setProfileWallet(wallet);
+        setStep(ModalStep.ACCOUNT_WALLET);
+      } : void 0
+    },
+    wallet.address
+  );
+};
+const AccountLinkEntry = ({
+  accountLink,
+  isPrimary = false
+}) => {
+  var _a, _b, _c, _d;
+  const para = useInternalClient();
+  const { wallets } = useExternalWallets();
+  const { unlinkAccount } = useAccountLinking();
+  const { identifier, displayName, type, externalWallet } = accountLink;
+  const externalWalletConnector = wallets.find(
+    (wallet) => {
+      var _a2, _b2;
+      return wallet.id === (externalWallet == null ? void 0 : externalWallet.providerId) || wallet.id.toLowerCase() === ((_a2 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _a2.toLowerCase()) || wallet.name.toLowerCase() === ((_b2 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _b2.toLowerCase());
+    }
+  );
+  let accountType = type;
+  let src = void 0;
+  let address = void 0;
+  let addressShort = void 0;
+  if (externalWallet) {
+    address = (_a = externalWallet.addressBech32) != null ? _a : externalWallet.address;
+    addressShort = truncateAddress(address, externalWallet.type, {
+      prefix: para.cosmosPrefix
+    });
+    if (externalWalletConnector) {
+      accountType = void 0;
+      src = externalWalletConnector.iconUrl;
+    } else if (externalWallet.providerId && ACCOUNT_TYPES[externalWallet.providerId]) {
+      accountType = externalWallet.providerId;
+      src = void 0;
+    } else {
+      accountType = "EXTERNAL_WALLET";
+      src = void 0;
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    AccountProfileEntry,
+    {
+      icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, src, size: "24px" }),
+      text: externalWallet ? (_d = (_c = (_b = externalWallet.ensName) != null ? _b : externalWalletConnector == null ? void 0 : externalWalletConnector.name) != null ? _c : externalWallet.provider) != null ? _d : "" : displayName != null ? displayName : identifier,
+      textSecondary: addressShort,
+      copyString: address,
+      accessory: isPrimary ? void 0 : /* @__PURE__ */ jsx(
+        EntryUnlink,
+        {
+          href: "#",
+          onClick: isPrimary ? void 0 : (e) => {
+            e.preventDefault();
+            unlinkAccount(accountLink);
+          },
+          children: "Unlink"
+        }
+      )
+    },
+    identifier
+  );
+};
+const EntryContainer = safeStyled.div`
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  ${({ onClick }) => onClick ? "cursor: pointer;" : ""}
+`;
+const EntryDisplayName = safeStyled(CpslText)``;
+const EntryFlex = safeStyled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex: 1;
+`;
+const CopyIcon = safeStyled(CpslIcon)`
+  --width: 16px;
+  --height: 16px;
+  --icon-color: ${({ isCopied }) => isCopied ? "var(--cpsl-color-utility-green) !important" : "var(--cpsl-color-text-secondary)"};
+
+  &:hover {
+    --icon-color: var(--cpsl-color-text-contrast);
+  }
+`;
+const EntryUnlink = safeStyled.a`
+  color: var(--cpsl-color-utility-red);
+  position: absolute;
+  right: 0;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--cpsl-font-family);
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+export {
+  AccountLinkEntry,
+  WalletEntry
+};

package/dist/modal/components/Account/AccountWallet.d.ts

@@ -0,0 +1 @@
+export declare const AccountWallet: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,133 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled, SpinnerContainer } from "@getpara/react-common";
+import { CpslButton, CpslIcon, CpslSpinner } from "@getpara/react-components";
+import { useModalStore } from "../../stores/modal/useModalStore.js";
+import { WalletEntry } from "./AccountProfileEntry.js";
+import { useEffect, useMemo } from "react";
+import { useAccount, useExportPrivateKey } from "../../../provider/index.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { ModalStep } from "../../utils/steps.js";
+const EXPLORERS = {
+  EVM: {
+    name: "Etherscan",
+    url: (address) => `https://etherscan.io/address/${address}`
+  },
+  SOLANA: {
+    name: "Solana Explorer",
+    url: (address) => `https://explorer.solana.com/address/${address}`
+  },
+  COSMOS: {
+    name: "Atomscan",
+    url: (address) => `https://atomscan.com/accounts/${address}`
+  }
+};
+const AccountWallet = () => {
+  const profileWallet = useModalStore((state) => state.profileWallet);
+  const setProfileWallet = useModalStore((state) => state.setProfileWallet);
+  const setStep = useModalStore((state) => state.setStep);
+  const { connectionType } = useAccount();
+  const { mutate: exportPrivateKey } = useExportPrivateKey();
+  const { disconnectBase, evmDisconnectStatus, solanaDisconnectStatus, cosmosDisconnectStatus } = useExternalWallets();
+  const disconnectStatus = useMemo(() => {
+    if (!(profileWallet == null ? void 0 : profileWallet.isExternal)) {
+      return "idle";
+    }
+    switch (profileWallet.type) {
+      case "EVM":
+        return evmDisconnectStatus;
+      case "SOLANA":
+        return solanaDisconnectStatus;
+      case "COSMOS":
+      default:
+        return cosmosDisconnectStatus;
+    }
+  }, [profileWallet == null ? void 0 : profileWallet.isExternal, profileWallet == null ? void 0 : profileWallet.type, evmDisconnectStatus, solanaDisconnectStatus, cosmosDisconnectStatus]);
+  const Content = useMemo(() => {
+    if (!profileWallet) {
+      return null;
+    }
+    if (disconnectStatus === "pending") {
+      return /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, {}) });
+    }
+    const { name, url } = EXPLORERS[profileWallet.type];
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        WalletEntry,
+        {
+          wallet: profileWallet,
+          style: { marginBottom: "16px" }
+        },
+        `${profileWallet.address}-${profileWallet.type}`
+      ),
+      typeof window !== "undefined" && /* @__PURE__ */ jsxs(
+        CpslButton,
+        {
+          variant: "tertiary",
+          fullWidth: true,
+          onClick: () => {
+            window.open(url(profileWallet.address), "_blank");
+          },
+          children: [
+            "View wallet on ",
+            name,
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "linkExternal", slot: "end" })
+          ]
+        }
+      ),
+      !profileWallet.isExternal && ["EVM", "COSMOS"].includes(profileWallet.type) && /* @__PURE__ */ jsxs(
+        DestructiveButton,
+        {
+          variant: "destructive",
+          fullWidth: true,
+          onClick: () => exportPrivateKey({ walletId: profileWallet.id, shouldOpenPopup: true }),
+          children: [
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "key", slot: "start" }),
+            "Export private key"
+          ]
+        }
+      ),
+      profileWallet.isExternal && connectionType === "both" && /* @__PURE__ */ jsxs(
+        DestructiveButton,
+        {
+          variant: "destructive",
+          fullWidth: true,
+          onClick: () => __async(void 0, null, function* () {
+            yield disconnectBase(profileWallet.externalProviderId, profileWallet.type, {
+              disconnectType: "ACCOUNT_WIDGET"
+            });
+            setProfileWallet(void 0);
+            setStep(ModalStep.ACCOUNT_PROFILE);
+          }),
+          children: [
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "key", slot: "start" }),
+            "Disconnect"
+          ]
+        }
+      )
+    ] });
+  }, [profileWallet, connectionType, disconnectStatus]);
+  useEffect(() => {
+    return () => {
+      setProfileWallet(void 0);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Container, { children: Content });
+};
+const Container = safeStyled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+`;
+const DestructiveButton = safeStyled(CpslButton)`
+  --button-destructive-hover-background-color: rgba(255, 0, 0, 0.2);
+  --button-destructive-active-background-color: rgba(255, 0, 0, 0.1);
+`;
+export {
+  AccountWallet
+};

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

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
-import { getExternalWalletIcon, safeStyled, useCopyToClipboard } from "@getpara/react-common";
+import { getExternalWalletIcon, MOBILE_SIZE, 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 { truncateAddress } from "@getpara/web-sdk";
@@ -92,7 +92,7 @@ const AccountWalletSelect = () => {
       anchorElId: "addressInputContainer",
       dropdownMaxHeight,
       $width: dropdownWidth != null ? dropdownWidth : 0,
-      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+      $top: (mobileAnchor != null ? mobileAnchor : 0) + 184 + 1,
       selectedItemVariant: "bodyXS",
       icon: isMultiWallet ? "chevronUp" : null,
       disabled: !isMultiWallet,
@@ -108,6 +108,7 @@ const AccountWalletSelect = () => {
   ) }) });
 };
 const Container = safeStyled.div`
+  flex: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -145,6 +146,18 @@ const Select = safeStyled(CpslSelect)`
     min-width: ${({ $width }) => `${$width - 2}px`};
   }
 
+  &::part(popover) {
+      /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
+      @media (max-width: ${MOBILE_SIZE}px) {
+        top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+        bottom: 16px;
+      }
+      cpsl-auth-modal.force-mobile-media & {
+        top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+        bottom: 16px;
+      }
+    }
+
   &::part(icon) {
     --icon-color: var(--cpsl-color-text-primary);
   }

package/dist/modal/components/Body/Body.js

@@ -45,6 +45,7 @@ import { AwaitingAccountStep } from "../AwaitingAccountStep/AwaitingAccountStep.
 import { SwitchWalletsStep } from "../SwitchWalletsStep/SwitchWalletsStep.js";
 import { Footer } from "../Footer/Footer.js";
 import { renderTextWithLinks } from "../../utils/renderTextWithLinks.js";
+import { AccountWallet } from "../Account/AccountWallet.js";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
@@ -183,6 +184,9 @@ const Body = ({
       case ModalStep.ACCOUNT_PROFILE_REMOVE: {
         return /* @__PURE__ */ jsx(AccountProfileUnlink, {});
       }
+      case ModalStep.ACCOUNT_WALLET: {
+        return /* @__PURE__ */ jsx(AccountWallet, {});
+      }
       case ModalStep.EX_WALLET_SELECTED: {
         return /* @__PURE__ */ jsx(ExternalWalletStep, {});
       }