@getpara/react-sdk-lite 2.0.0-dev.7 → 2.0.0

package/dist/modal/components/Account/AccountSend/context.js

@@ -0,0 +1,418 @@
+"use client";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useInternalClient } from "../../../../provider/hooks/utils/useInternalClient.js";
+import { useProfileBalance, useSignMessage, useSignTransaction, useWalletState } from "../../../../provider/index.js";
+import { hexStringToBase64 } from "@getpara/web-sdk";
+import { useModalStore } from "../../../stores/index.js";
+import { ModalStep } from "../../../utils/steps.js";
+import { useStore } from "../../../../provider/stores/useStore.js";
+const getDefaultSendMetadata = (balances, wallet) => {
+  if (!balances || !(wallet == null ? void 0 : wallet.type) || !(wallet == null ? void 0 : wallet.address) || (wallet == null ? void 0 : wallet.type) === "COSMOS") {
+    return { asset: null, network: null };
+  }
+  const walletBalance = balances.wallets.find(({ address }) => address === (wallet == null ? void 0 : wallet.address));
+  if (!walletBalance) {
+    return { asset: null, network: null };
+  }
+  const defaultAsset = walletBalance.assets.find(
+    ({ metadata }) => (metadata == null ? void 0 : metadata.symbol) === ((wallet == null ? void 0 : wallet.type) === "EVM" ? "ETH" : "SOL")
+  );
+  if (!defaultAsset) {
+    return { asset: null, network: null };
+  }
+  const defaultNetwork = defaultAsset.networks[0] || null;
+  return { asset: defaultAsset, network: defaultNetwork };
+};
+const getTransferAmount = (sendMetadata, transferValue) => {
+  var _a, _b, _c, _d, _e;
+  const isPriced = ((_b = (_a = sendMetadata == null ? void 0 : sendMetadata.asset) == null ? void 0 : _a.metadata) == null ? void 0 : _b.price) !== void 0 && ((_e = (_d = (_c = sendMetadata == null ? void 0 : sendMetadata.asset) == null ? void 0 : _c.metadata) == null ? void 0 : _d.price) == null ? void 0 : _e.value) > 0;
+  if (isPriced) {
+    return transferValue / sendMetadata.asset.metadata.price.value;
+  }
+  return 0;
+};
+const getTransferValue = (sendMetadata, transferAmount) => {
+  var _a, _b, _c, _d, _e;
+  const isPriced = ((_b = (_a = sendMetadata == null ? void 0 : sendMetadata.asset) == null ? void 0 : _a.metadata) == null ? void 0 : _b.price) !== void 0 && ((_e = (_d = (_c = sendMetadata == null ? void 0 : sendMetadata.asset) == null ? void 0 : _c.metadata) == null ? void 0 : _d.price) == null ? void 0 : _e.value) > 0;
+  if (isPriced) {
+    return transferAmount * sendMetadata.asset.metadata.price.value;
+  }
+  return 0;
+};
+const AccountSendContext = createContext({});
+function AccountSendProvider({ children, step }) {
+  var _a, _b, _c, _d, _e, _f;
+  const para = useInternalClient();
+  const setStep = useModalStore((state) => state.setStep);
+  const setSendTx = useModalStore((state) => state.setSendTx);
+  const { data: balances } = useProfileBalance({ isComprehensive: true });
+  const { signTransactionAsync } = useSignTransaction();
+  const { signMessageAsync } = useSignMessage();
+  const { selectedWallet, setSelectedWallet } = useWalletState();
+  const [estimate, setEstimate] = useState(null);
+  const [broadcast, setBroadcast] = useState(null);
+  const [sendMetadata, setSendMetadata] = useState(() => getDefaultSendMetadata(balances, selectedWallet));
+  const [destinationAddress, setDestinationAddress] = useState("");
+  const [transferValue, setTransferValue] = useState(0);
+  const [transferAmount, setTransferAmount] = useState(getTransferAmount(sendMetadata, transferValue));
+  const [isMax, setIsMax] = useState(false);
+  const optionsType = useMemo(() => {
+    const walletBalance = balances == null ? void 0 : balances.wallets.find(({ address }) => address === (selectedWallet == null ? void 0 : selectedWallet.address));
+    if (!walletBalance || walletBalance.assets.length === 0) {
+      return "NONE";
+    }
+    if ((walletBalance == null ? void 0 : walletBalance.assets.length) === 1) {
+      return walletBalance.assets[0].networks.length === 1 ? "SINGLE_NETWORK" : "SINGLE_ASSET";
+    }
+    return "MULTIPLE";
+  }, [balances, selectedWallet == null ? void 0 : selectedWallet.address]);
+  const {
+    mutate: estimateMutate,
+    isPending: estimateIsPending,
+    isError: estimateIsError
+  } = useMutation({
+    mutationKey: ["estimate-tx"],
+    mutationFn: (_0) => __async(this, [_0], function* ({ userId, walletId, opts }) {
+      if (!para.userId || !selectedWallet.id) {
+        return null;
+      }
+      const result = yield para.ctx.client.estimateSendTransaction({
+        userId,
+        walletId,
+        opts
+      });
+      return result;
+    }),
+    onSuccess: (data) => {
+      setEstimate(data);
+    },
+    onError: (error) => {
+      console.error(error);
+    }
+  });
+  const queryClient = useQueryClient();
+  const refs = useStore((state) => state.refs);
+  const {
+    mutate: broadcastMutate,
+    isPending: broadcastIsPending,
+    isError: broadcastIsError
+  } = useMutation({
+    mutationKey: ["broadcast-tx"],
+    mutationFn: (_0) => __async(this, [_0], function* ({
+      userId,
+      walletId,
+      walletAddress,
+      walletType,
+      txSerialized,
+      message,
+      evmChainId,
+      isDevnet
+    }) {
+      var _a2, _b2, _c2, _d2, _e2;
+      if (!para.userId || !selectedWallet.id) {
+        return null;
+      }
+      let signature;
+      switch (walletType) {
+        case "SOLANA":
+          signature = (_a2 = yield signMessageAsync({
+            walletId,
+            messageBase64: message
+          })) == null ? void 0 : _a2.signature;
+          break;
+        case "EVM":
+        default:
+          signature = (_b2 = yield signTransactionAsync({
+            walletId,
+            rlpEncodedTxBase64: hexStringToBase64(txSerialized),
+            chainId: evmChainId
+          })) == null ? void 0 : _b2.signature;
+          if (!!signature) {
+            signature = `0x${signature}`;
+          }
+          break;
+      }
+      const result = yield para.ctx.client.broadcastSendTransaction({
+        userId,
+        walletId,
+        opts: {
+          type: walletType,
+          evmChainId,
+          isDevnet,
+          tx: txSerialized,
+          signature,
+          sourceAddress: walletAddress,
+          txUrlFormat: (_e2 = (_d2 = (_c2 = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _c2.metadata) == null ? void 0 : _d2.explorer) == null ? void 0 : _e2.txUrlFormat
+        }
+      });
+      return result;
+    }),
+    onSuccess: (data) => {
+      if (!!(data == null ? void 0 : data.error)) {
+        setBroadcast(data);
+      } else if (!!data) {
+        setSendTx(data);
+        setStep(ModalStep.ACCOUNT_MAIN);
+        refs.balancesInvalidationTime.current = Date.now();
+        queryClient.invalidateQueries({
+          queryKey: ["useProfileBalance"],
+          refetchType: "active"
+        });
+      }
+    },
+    onError: (error) => {
+      console.error(error);
+    }
+  });
+  const onSubmit = useCallback(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    broadcastMutate({
+      userId: para.userId,
+      walletId: selectedWallet.id,
+      walletAddress: selectedWallet.address,
+      walletType: selectedWallet.type,
+      txSerialized: (_a2 = estimate == null ? void 0 : estimate.result) == null ? void 0 : _a2.txSerialized,
+      message: (_b2 = estimate == null ? void 0 : estimate.result) == null ? void 0 : _b2.message,
+      evmChainId: (_d2 = (_c2 = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _c2.metadata) == null ? void 0 : _d2.evmChainId,
+      isDevnet: ((_f2 = (_e2 = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _e2.metadata) == null ? void 0 : _f2.internalId) === "SOLANA_DEVNET"
+    });
+  }, [
+    para.userId,
+    selectedWallet.id,
+    selectedWallet.address,
+    selectedWallet.type,
+    (_a = estimate == null ? void 0 : estimate.result) == null ? void 0 : _a.txSerialized,
+    (_b = estimate == null ? void 0 : estimate.result) == null ? void 0 : _b.message,
+    (_d = (_c = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _c.metadata) == null ? void 0 : _d.evmChainId,
+    (_f = (_e = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _e.metadata) == null ? void 0 : _f.internalId
+  ]);
+  const availableWallets = useMemo(() => {
+    return para.availableWallets.filter(({ type }) => type !== "COSMOS");
+  }, [para.availableWallets]);
+  const { assetPrice, assetValueOnNetwork, assetAmountOnNetwork } = useMemo(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g;
+    const assetAmountOnNetwork2 = ((_a2 = sendMetadata.network) == null ? void 0 : _a2.quantity) || 0;
+    if (((_c2 = (_b2 = sendMetadata.asset) == null ? void 0 : _b2.metadata) == null ? void 0 : _c2.price) && ((_f2 = (_e2 = (_d2 = sendMetadata.asset) == null ? void 0 : _d2.metadata) == null ? void 0 : _e2.price) == null ? void 0 : _f2.value) > 0) {
+      return {
+        assetPrice: sendMetadata.asset.metadata.price,
+        assetValueOnNetwork: ((_g = sendMetadata.network) == null ? void 0 : _g.value) || null,
+        assetAmountOnNetwork: assetAmountOnNetwork2
+      };
+    }
+    return {
+      assetPrice: null,
+      assetValueOnNetwork: null,
+      assetAmountOnNetwork: assetAmountOnNetwork2
+    };
+  }, [sendMetadata.asset, sendMetadata.network]);
+  useEffect(() => {
+    if (availableWallets.length > 0 && selectedWallet.type === "COSMOS") {
+      const defaultWallet = availableWallets.find((wallet) => wallet.type !== "EVM");
+      (defaultWallet == null ? void 0 : defaultWallet.id) && (defaultWallet == null ? void 0 : defaultWallet.type) && setSelectedWallet(defaultWallet);
+    }
+  }, [availableWallets, selectedWallet.type, setSelectedWallet]);
+  const updateSourceRef = useRef(null);
+  const prevSendMetadataRef = useRef(sendMetadata);
+  const prevWalletAddressRef = useRef(selectedWallet == null ? void 0 : selectedWallet.address);
+  const isSettingMaxRef = useRef(false);
+  const isResettingRef = useRef(false);
+  const resetState = useCallback(() => {
+    if (isResettingRef.current) {
+      return;
+    }
+    isResettingRef.current = true;
+    updateSourceRef.current = "value";
+    setDestinationAddress("");
+    setTransferValue(0);
+    setTransferAmount(0);
+    setIsMax(false);
+    setEstimate(null);
+    setTimeout(() => {
+      isResettingRef.current = false;
+      updateSourceRef.current = null;
+    }, 0);
+  }, []);
+  useEffect(() => {
+    const walletAddressChanged = prevWalletAddressRef.current !== (selectedWallet == null ? void 0 : selectedWallet.address);
+    if (walletAddressChanged) {
+      prevWalletAddressRef.current = selectedWallet == null ? void 0 : selectedWallet.address;
+      const newSendMetadata = getDefaultSendMetadata(
+        balances || null,
+        selectedWallet ? { type: selectedWallet.type, address: selectedWallet.address } : null
+      );
+      setSendMetadata(newSendMetadata);
+      resetState();
+    }
+  }, [selectedWallet == null ? void 0 : selectedWallet.address, balances, resetState]);
+  useEffect(() => {
+    var _a2, _b2;
+    const sendMetadataChanged = ((_a2 = prevSendMetadataRef.current) == null ? void 0 : _a2.asset) !== (sendMetadata == null ? void 0 : sendMetadata.asset) || ((_b2 = prevSendMetadataRef.current) == null ? void 0 : _b2.network) !== (sendMetadata == null ? void 0 : sendMetadata.network);
+    const walletAddressChanged = prevWalletAddressRef.current !== (selectedWallet == null ? void 0 : selectedWallet.address);
+    if (sendMetadataChanged && !walletAddressChanged && !isResettingRef.current) {
+      prevSendMetadataRef.current = sendMetadata;
+      resetState();
+    } else if (sendMetadataChanged) {
+      prevSendMetadataRef.current = sendMetadata;
+    }
+  }, [sendMetadata, selectedWallet == null ? void 0 : selectedWallet.address, resetState]);
+  useEffect(() => {
+    if (step !== "SEND_FORM" || sendMetadata.network) {
+      return;
+    }
+    if (sendMetadata.asset && sendMetadata.asset.networks.length > 0) {
+      setSendMetadata((prev) => __spreadProps(__spreadValues({}, prev), {
+        network: prev.asset.networks[0]
+      }));
+      return;
+    }
+    const defaultMetadata = getDefaultSendMetadata(balances, selectedWallet);
+    if (defaultMetadata.asset !== sendMetadata.asset || defaultMetadata.network !== sendMetadata.network) {
+      setSendMetadata(defaultMetadata);
+    }
+  }, [step, sendMetadata.asset, sendMetadata.network, balances, selectedWallet]);
+  useEffect(() => {
+    if (isResettingRef.current || isSettingMaxRef.current) {
+      return;
+    }
+    if (updateSourceRef.current !== "amount") {
+      updateSourceRef.current = "value";
+      setTransferAmount(getTransferAmount(sendMetadata, transferValue));
+      setTimeout(() => {
+        updateSourceRef.current = null;
+      }, 0);
+    }
+  }, [transferValue, sendMetadata]);
+  useEffect(() => {
+    if (isResettingRef.current || isSettingMaxRef.current) {
+      return;
+    }
+    if (updateSourceRef.current !== "value") {
+      updateSourceRef.current = "amount";
+      const newValue = getTransferValue(sendMetadata, transferAmount);
+      setTransferValue((prevValue) => {
+        if (newValue !== prevValue) {
+          return newValue;
+        }
+        return prevValue;
+      });
+      setTimeout(() => {
+        updateSourceRef.current = null;
+      }, 0);
+    }
+  }, [transferAmount, sendMetadata]);
+  useEffect(() => {
+    if (isResettingRef.current) {
+      return;
+    }
+    if (!isSettingMaxRef.current && transferAmount !== assetAmountOnNetwork) {
+      setIsMax(false);
+    }
+  }, [transferAmount, assetAmountOnNetwork]);
+  useEffect(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g;
+    if (isResettingRef.current) {
+      return;
+    }
+    const isSendMax = isMax && assetAmountOnNetwork > 0;
+    if (!destinationAddress || destinationAddress.length === 0 || !isSendMax && transferAmount <= 0) {
+      setEstimate(null);
+      return;
+    }
+    estimateMutate({
+      walletId: selectedWallet.id,
+      userId: para.userId,
+      opts: {
+        type: selectedWallet.type === "COSMOS" ? "EVM" : selectedWallet.type,
+        sourceAddress: selectedWallet.address,
+        destinationAddress,
+        contractAddress: (_a2 = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _a2.contractAddress,
+        transferAmount: isMax && assetAmountOnNetwork ? assetAmountOnNetwork : transferAmount,
+        evmChainId: (_c2 = (_b2 = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _b2.metadata) == null ? void 0 : _c2.evmChainId,
+        isDevnet: selectedWallet.type === "SOLANA" && ((_e2 = (_d2 = sendMetadata == null ? void 0 : sendMetadata.network) == null ? void 0 : _d2.metadata) == null ? void 0 : _e2.internalId) === "SOLANA_DEVNET",
+        tokenSymbol: (_g = (_f2 = sendMetadata == null ? void 0 : sendMetadata.asset) == null ? void 0 : _f2.metadata) == null ? void 0 : _g.symbol
+      }
+    });
+  }, [
+    transferAmount,
+    destinationAddress,
+    selectedWallet.address,
+    selectedWallet.type,
+    selectedWallet.id,
+    sendMetadata == null ? void 0 : sendMetadata.asset,
+    sendMetadata == null ? void 0 : sendMetadata.network,
+    para.userId,
+    assetAmountOnNetwork,
+    isMax
+  ]);
+  const value = useMemo(() => {
+    return {
+      step,
+      sendMetadata,
+      setSendMetadata,
+      destinationAddress,
+      setDestinationAddress,
+      transferValue,
+      setTransferValue,
+      transferAmount,
+      setTransferAmount,
+      assetPrice,
+      assetValueOnNetwork,
+      assetAmountOnNetwork,
+      estimate,
+      isMax,
+      setIsMax,
+      onSubmit,
+      estimateIsPending,
+      estimateIsError,
+      broadcast,
+      broadcastIsPending,
+      broadcastIsError,
+      optionsType
+    };
+  }, [
+    step,
+    sendMetadata,
+    setSendMetadata,
+    destinationAddress,
+    setDestinationAddress,
+    transferValue,
+    setTransferValue,
+    transferAmount,
+    setTransferAmount,
+    assetPrice,
+    assetValueOnNetwork,
+    assetAmountOnNetwork,
+    estimate,
+    isMax,
+    setIsMax,
+    onSubmit,
+    estimateIsPending,
+    estimateIsError,
+    broadcast,
+    broadcastIsPending,
+    broadcastIsError,
+    optionsType
+  ]);
+  return /* @__PURE__ */ jsx(AccountSendContext.Provider, { value, children });
+}
+const useSend = () => useContext(AccountSendContext);
+export {
+  AccountSendContext,
+  AccountSendProvider,
+  useSend
+};

package/dist/modal/components/Account/AccountSend/index.d.ts

@@ -0,0 +1,4 @@
+import { SendStep } from './context.js';
+export declare function AccountSend({ step }: {
+    step: SendStep;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/Account/AccountSend/index.js

@@ -0,0 +1,67 @@
+"use client";
+import "../../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StepContainer } from "../../common.js";
+import { useMemo, useRef, useEffect, useState } from "react";
+import { AccountSendForm } from "./AccountSendForm.js";
+import { AccountSendProvider, useSend } from "./context.js";
+import { AccountSendAsset } from "./AccountSendAsset.js";
+import { AccountSendNetwork } from "./AccountSendNetwork.js";
+import { AnimatePresence, motion } from "framer-motion";
+import { BODY_MOTION_VARIANTS, BODY_TRANSITION, safeStyled } from "@getpara/react-common";
+import { WalletSelectOld } from "../../WalletSelectOld/WalletSelectOld.js";
+import { AccountSendNoAssets } from "./AccountSendNoAssets.js";
+const STEP_ORDER = ["SEND_FORM", "SEND_ASSET", "SEND_NETWORK"];
+function AccountSendIndex() {
+  const { step, optionsType } = useSend();
+  const prevStepRef = useRef(step);
+  const [direction, setDirection] = useState(1);
+  useEffect(() => {
+    const prevIndex = STEP_ORDER.indexOf(prevStepRef.current);
+    const currentIndex = STEP_ORDER.indexOf(step);
+    setDirection(currentIndex > prevIndex ? 1 : -1);
+    prevStepRef.current = step;
+  }, [step]);
+  const Content = useMemo(() => {
+    if (optionsType === "NONE") {
+      return /* @__PURE__ */ jsx(AccountSendNoAssets, {});
+    }
+    switch (step) {
+      case "SEND_FORM":
+        return /* @__PURE__ */ jsx(AccountSendForm, {});
+      case "SEND_ASSET":
+        return /* @__PURE__ */ jsx(AccountSendAsset, {});
+      case "SEND_NETWORK":
+        return /* @__PURE__ */ jsx(AccountSendNetwork, {});
+    }
+  }, [step, optionsType]);
+  return /* @__PURE__ */ jsxs(StepContainer, { style: { gap: "16px" }, children: [
+    step === "SEND_FORM" && /* @__PURE__ */ jsx(WalletSelectOld, { noTitle: true, types: ["EVM", "SOLANA"], isEmbeddedOnly: true, style: { width: "100%" } }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: /* @__PURE__ */ jsx(
+      AnimatedContainer,
+      {
+        custom: direction,
+        variants: BODY_MOTION_VARIANTS,
+        initial: "enter",
+        animate: "center",
+        exit: "exit",
+        transition: BODY_TRANSITION,
+        children: Content
+      },
+      step
+    ) })
+  ] });
+}
+const AnimatedContainer = safeStyled(motion.div)`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+`;
+function AccountSend({ step }) {
+  return /* @__PURE__ */ jsx(AccountSendProvider, { step, children: /* @__PURE__ */ jsx(AccountSendIndex, {}) });
+}
+export {
+  AccountSend
+};

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/{WalletSelect/WalletSelect.d.ts → Account/AccountWalletSelect.d.ts}

@@ -1,4 +1,4 @@
-export declare const WalletSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountWalletSelect: () => 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;
 }, {