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

package/dist/css/modal.css

@@ -5,9 +5,22 @@
   src: url('../public/Inter-VariableFont_slnt,wght.ttf') format('truetype');
 }
 
+@font-face {
+  font-family: 'PP Mori';
+  src: url('../public/PPMori-Regular.woff2') format('woff2');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'PP Mori';
+  src: url('../public/PPMori-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+}
+
 html {
   --cpsl-default-font: 'Inter', sans-serif;
   -webkit-overflow-scrolling: touch;
 
-  --wcm-z-index: 11000 !important;
+  --wcm-z-index: 99999 !important;
+  --w3m-z-index: 99999 !important;
 }

package/dist/modal/ParaModal.js

@@ -49,10 +49,11 @@ const ParaModal = forwardRef((props, ref) => {
   const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
   const { signUpOrLogIn, isCreateGuestWalletsPending } = useAuthActions();
   const { isReady, isFarcasterMiniApp } = useParaStatus();
-  const { isLoading: isAccountLoading, isConnected } = useAccount();
+  const { isLoading: isAccountLoading, isConnected, embedded } = useAccount();
   const setIFrameUrl = useModalStore((state) => state.setIFrameUrl);
   const setIsIFrameReady = useModalStore((state) => state.setIsIFrameReady);
   const [isModalMounted, setIsModalMounted] = useState(false);
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
   const externalWallets = useStore((state) => state.externalWallets);
   const providerProps = useStore((state) => state.providerProps);
   const setAccountLinkOptions = useModalStore((state) => state.setAccountLinkOptions);
@@ -191,11 +192,13 @@ const ParaModal = forwardRef((props, ref) => {
       initModal(isOpen);
       isInitialized.current = true;
     }
-    if (isReady && !isOpen && isInitialized.current) {
-      initModal();
-      isInitialized.current = false;
+    if (!bareModal && isReady && !isOpen && isInitialized.current) {
+      setTimeout(() => {
+        initModal();
+        isInitialized.current = false;
+      }, 250);
     }
-  }, [isReady, isOpen, isAccountLoading]);
+  }, [bareModal, isReady, isOpen, isAccountLoading]);
   useEffect(() => {
     let _authLayout = authLayout;
     if (!(externalWallets == null ? void 0 : externalWallets.length) && hasExternalWallet(authLayout)) {
@@ -231,6 +234,24 @@ const ParaModal = forwardRef((props, ref) => {
     closeModal();
     onClose == null ? void 0 : onClose();
   };
+  const handleDisconnect = () => __async(void 0, null, function* () {
+    setIsDisconnecting(true);
+    handleClose();
+    const reset = () => __async(void 0, null, function* () {
+      yield para.logout({ clearPregenWallets: embedded == null ? void 0 : embedded.isGuestMode });
+      yield disconnectExternalWallet();
+      setStep(ModalStep.AUTH_MAIN);
+      setFlow(void 0);
+      setIsDisconnecting(false);
+    });
+    if (bareModal) {
+      reset();
+      return;
+    }
+    setTimeout(() => {
+      reset();
+    }, 250);
+  });
   const handleModalEntering = () => {
     setIsModalMounted(true);
   };
@@ -285,7 +306,9 @@ const ParaModal = forwardRef((props, ref) => {
           disableEmailLogin,
           disablePhoneLogin,
           isGuestModeEnabled,
-          onClose: handleClose
+          onClose: handleClose,
+          onDisconnect: handleDisconnect,
+          isDisconnecting
         }, rest)
       )
     }

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

@@ -1,5 +1 @@
-interface AccountProps {
-    onClose: () => void;
-}
-export declare const Account: ({ onClose }: AccountProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Account: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,37 +1,26 @@
 "use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
+import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
-import { InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
-import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
+import { InnerStepContainer, StepContainer } from "../common.js";
+import { CpslButton, CpslIcon, CpslSpinner, CpslText, CpslTileButton } from "@getpara/react-components";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { ModalStep } from "../../utils/steps.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { formatBalanceString } from "../../utils/stringFormatters.js";
 import { useAccount, useWalletBalance } from "../../../provider/index.js";
 import { EnabledFlow } from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
-const Account = ({ onClose }) => {
+import { AccountHeader } from "./AccountHeader.js";
+const Account = () => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const setStep = useModalStore((state) => state.setStep);
-  const setFlow = useModalStore((state) => state.setFlow);
   const setGuestAddFundsTab = useModalStore((state) => state.setGuestAddFundsTab);
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
-  const hideWallets = useStore((state) => {
-    var _a;
-    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
-  });
-  const { disconnectExternalWallet } = useExternalWallets();
   const para = useInternalClient();
   const { embedded } = useAccount();
-  const { data: balance, isLoading: isBalanceLoading } = useWalletBalance();
+  const { data: balance } = useWalletBalance();
   const { isEnabled } = useAccountLinking();
-  const [isDisconnecting, setIsDisconnecting] = useState(false);
   const isGuestMode = embedded.isConnected && embedded.isGuestMode;
   const cantBuyAndWithdraw = (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") && !para.userId;
   const isOnRampLoaded = !!onRampConfig;
@@ -60,49 +49,38 @@ const Account = ({ onClose }) => {
   const handleProfileClick = () => {
     setStep(ModalStep.ACCOUNT_PROFILE);
   };
-  const handleDisconnectClick = () => __async(void 0, null, function* () {
-    setIsDisconnecting(true);
-    yield para.logout();
-    yield disconnectExternalWallet();
-    onClose();
-    setStep(ModalStep.AUTH_MAIN);
-    setFlow(void 0);
-    setIsDisconnecting(false);
-  });
   useEffect(() => {
     setGuestAddFundsTab();
   }, []);
-  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-    isBalanceLoading ? /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 39 }) }) : balance !== void 0 && balance !== null && /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslText, { variant: "headingS", weight: "medium", children: formatBalanceString(balance) }) }),
-    isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
-      balance && parseFloat(balance) > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
-        /* @__PURE__ */ jsx(CpslIcon, { icon: "alertTriangle", size: "24px", style: { color: "var(--cpsl-color-utility-yellow)" } }),
-        "You've funded this account - complete account setup to maintain access."
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsxs($InnerStepContainer, { children: [
+    /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
+    /* @__PURE__ */ jsxs(LowerContainer, { children: [
+      isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+        balance && parseFloat(balance) > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
+          /* @__PURE__ */ jsx(CpslIcon, { icon: "alertTriangle", size: "24px", style: { color: "var(--cpsl-color-utility-yellow)" } }),
+          "You've funded this account - complete account setup to maintain access."
+        ] }),
+        /* @__PURE__ */ jsxs(
+          CpslButton,
+          {
+            fullWidth: true,
+            variant: "primary",
+            onClick: () => {
+              setStep(ModalStep.AUTH_GUEST_SIGNUP);
+            },
+            children: [
+              /* @__PURE__ */ jsx(CpslIcon, { icon: "stars02" }),
+              "Complete Account Setup"
+            ]
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxs(
-        CpslButton,
-        {
-          fullWidth: true,
-          variant: "primary",
-          onClick: () => {
-            setStep(ModalStep.AUTH_GUEST_SIGNUP);
-          },
-          children: [
-            /* @__PURE__ */ jsx(CpslIcon, { icon: "stars02" }),
-            "Complete Account Setup"
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      onRampConfig.isBuyEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "creditCard", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Receive" }) }),
-      onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleBrokenDownLeft", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) }),
-      /* @__PURE__ */ jsx(OptionButton, { icon: "user", onClick: handleProfileClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isEnabled ? "Profile" : "Settings" }) })
-    ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) }),
-    !isGuestMode && /* @__PURE__ */ jsx(DisconnectButton, { variant: "destructive", fullWidth: true, onClick: handleDisconnectClick, disabled: isDisconnecting, children: isDisconnecting ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      hideWallets ? "Logout" : "Disconnect Wallet",
-      /* @__PURE__ */ jsx(CpslIcon, { icon: "logOut", slot: "end" })
-    ] }) })
+      /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        onRampConfig.isBuyEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "plusCircle", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Add Funds" }) }),
+        onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleDown", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) }),
+        /* @__PURE__ */ jsx(OptionButton, { icon: "user01", onClick: handleProfileClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isEnabled ? "Profile" : "Settings" }) })
+      ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) })
+    ] })
   ] }) });
 };
 const ButtonContainer = safeStyled.div`
@@ -111,23 +89,21 @@ const ButtonContainer = safeStyled.div`
   justify-content: center;
   gap: 8px;
   width: 100%;
-  height: 88px;
 `;
-const OptionButton = safeStyled(StyledCpslTileButton)`
+const OptionButton = safeStyled(CpslTileButton)`
+  --button-gap: 4px;
+  --button-width: 100%;
+  --button-icon-height: 24px;
+  --button-icon-width: 24px;
+  --button-padding-top: 12px;
+  --button-padding-bottom: 12px;
+  --button-icon-color: var(--cpsl-color-text-contrast);
+  --button-height: auto;
   flex: 1;
-
-  --button-icon-color: var(--cpsl-color-text-primary);
-`;
-const DisconnectButton = safeStyled(CpslButton)`
-  --button-border-width: 0px;
-`;
-const BalanceContainer = safeStyled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 8px;
-  padding-bottom: 24px;
 `;
+const $InnerStepContainer = safeStyled(InnerStepContainer)`
+  gap: 24px;
+  `;
 const Alert = safeStyled.div`
   --icon-color: var(--cpsl-color-utility-yellow);
   --icon-stroke-color: var(--cpsl-color-utility-yellow);
@@ -143,6 +119,12 @@ const Alert = safeStyled.div`
   background: var(--cpsl-color-utility-yellow-light);
   font-size: 14px;
 `;
+const LowerContainer = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`;
 export {
   Account
 };

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

@@ -0,0 +1,3 @@
+export declare const AccountHeader: ({ withBalance }?: {
+    withBalance?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,63 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { 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";
+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 { name, icon, src } = useMemo(() => {
+    var _a;
+    let name2, icon2, src2;
+    switch (true) {
+      case Object.keys(para == null ? void 0 : para.externalWallets).length > 0:
+        {
+          const wallet = Object.values(para.externalWallets)[0];
+          name2 = (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type, { prefix: para.cosmosPrefix });
+          src2 = wallet.ensAvatar;
+          icon2 = getExternalWalletIcon(wallet.externalProviderId);
+        }
+        break;
+      default:
+        name2 = `${para.partnerName} Wallet`;
+        src2 = para.partnerLogo;
+        icon2 = "wallet02";
+        break;
+    }
+    return { name: name2, icon: icon2, src: src2 };
+  }, [para.partnerName, para.partnerLogo, para.externalWallets]);
+  return /* @__PURE__ */ jsxs(AccountContainer, { children: [
+    /* @__PURE__ */ jsx(
+      CpslIcon,
+      {
+        size: "48px",
+        inset: "8px",
+        border: "1px solid var(--cpsl-color-background-8)",
+        radius: "theme",
+        icon,
+        src
+      }
+    ),
+    /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
+    withBalance && /* @__PURE__ */ jsx(Balance, {})
+  ] });
+};
+const AccountContainer = safeStyled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+`;
+export {
+  AccountHeader
+};

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

@@ -1 +1,4 @@
-export declare const AccountProfile: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const AccountProfile: ({ isDisconnecting, onDisconnect, }: {
+    isDisconnecting: boolean;
+    onDisconnect: () => void;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -4,8 +4,8 @@ import {
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
-import { CpslButton, CpslIcon, CpslIdenticon, CpslText } from "@getpara/react-components";
+import { AccountTypeIcon, GradientScroll, StepContainer, WalletTypeIcon } from "../common.js";
+import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { useClient } from "../../../provider/index.js";
 import { useLinkedAccounts } from "../../../provider/hooks/index.js";
 import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
@@ -14,6 +14,8 @@ import { useAccountLinking } from "../../../provider/providers/AccountLinkProvid
 import { 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 = ({
   identifier,
   icon,
@@ -45,23 +47,52 @@ const Entry = ({
     onUnlink && /* @__PURE__ */ jsx(EntryUnlink, { href: "#", onClick: onUnlink, children: "Unlink" })
   ] }, address != null ? address : identifier);
 };
-const AccountProfile = () => {
+const AccountProfile = ({
+  isDisconnecting,
+  onDisconnect
+}) => {
   var _a, _b, _c, _d, _e, _f;
   const para = useClient();
   const { data: linkedAccounts } = useLinkedAccounts();
   const { wallets } = useExternalWallets();
   const { isEnabled, linkAccount, unlinkAccount } = useAccountLinking();
+  const hideWallets = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+  });
   if (!para) {
     return null;
   }
   const externalWallet = (_a = para.authInfo) == null ? void 0 : _a.externalWallet;
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    /* @__PURE__ */ jsx(AccountHeader, {}),
+    /* @__PURE__ */ jsxs(ParaConnect, { target: "_blank", href: "https://connect.getpara.com", rel: "noreferrer noopener", children: [
+      /* @__PURE__ */ jsx(ParaIcon, { icon: "paraIconBrand", size: "40px", inset: "8px", background: "white" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        "Do even more with your wallet",
+        /* @__PURE__ */ jsx("br", {}),
+        "at ",
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: "600" }, children: "Para Connect" })
+      ] }),
+      /* @__PURE__ */ jsxs(Dots, { children: [
+        new Array(6).fill(0).map((_, index) => /* @__PURE__ */ jsx(DotsIcon, { index, icon: "dotsSquare", size: "27.5px" }, index)),
+        /* @__PURE__ */ jsx(ParaArrow, { icon: "paraArrow", size: "31px", color: "white" })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Connected Wallets" }),
       /* @__PURE__ */ jsx(Content, { children: externalWallet ? /* @__PURE__ */ jsx(
         Entry,
         {
-          icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: externalWallet.providerId, size: "24px" }),
+          icon: /* @__PURE__ */ jsx(
+            WalletTypeIcon,
+            {
+              walletType: externalWallet.type,
+              externalWallet: externalWallet.providerId,
+              size: "24px",
+              inset: "0"
+            }
+          ),
           name: (_c = (_b = externalWallet.ensName) != null ? _b : externalWallet.provider) != null ? _c : "",
           address: (_d = externalWallet.addressBech32) != null ? _d : externalWallet.address,
           addressShort: truncateAddress((_e = externalWallet.addressBech32) != null ? _e : externalWallet.address, externalWallet.type, {
@@ -69,19 +100,16 @@ const AccountProfile = () => {
           })
         },
         externalWallet.address
-      ) : (_f = para == null ? void 0 : para.availableWallets) == null ? void 0 : _f.map((wallet) => {
-        var _a2;
-        return /* @__PURE__ */ jsx(
-          Entry,
-          {
-            icon: wallet.isExternal ? /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: (_a2 = wallet.externalProviderId) != null ? _a2 : "EXTERNAL_WALLET", size: "24px" }) : /* @__PURE__ */ jsx(CpslIdenticon, { hash: para.getIdenticonHash(wallet.id, wallet.type), size: "24px", arcWidth: "40%" }),
-            name: getWalletDisplayName(para, wallet),
-            address: wallet.address,
-            addressShort: truncateAddress(wallet.address, wallet.type)
-          },
-          wallet.address
-        );
-      }) })
+      ) : (_f = para == null ? void 0 : para.availableWallets) == null ? void 0 : _f.map((wallet) => /* @__PURE__ */ jsx(
+        Entry,
+        {
+          icon: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: wallet.type, externalWallet: wallet.externalProviderId, size: "24px" }),
+          name: getWalletDisplayName(para, wallet),
+          address: wallet.address,
+          addressShort: truncateAddress(wallet.address, wallet.type)
+        },
+        wallet.address
+      )) })
     ] }),
     isEnabled && /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Linked Accounts" }),
@@ -129,6 +157,10 @@ const AccountProfile = () => {
           "Link an account"
         ] })
       ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DisconnectButton, { variant: "destructive", fullWidth: true, onClick: onDisconnect, disabled: isDisconnecting, children: [
+      hideWallets ? "Logout" : "Disconnect Wallet",
+      /* @__PURE__ */ jsx(CpslIcon, { icon: "logOut", slot: "end" })
     ] })
   ] });
 };
@@ -137,11 +169,15 @@ const Section = safeStyled.div`
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  gap: 16px;
+  gap: 8px;
   width: 100%;
 `;
-const Content = safeStyled(Section)``;
-const Title = safeStyled(CpslText)``;
+const Content = safeStyled(Section)`
+  gap: 12px;
+`;
+const Title = safeStyled(CpslText)`
+  font-weight: 600;
+`;
 const EntryContainer = safeStyled.div`
   overflow: hidden;
   position: relative;
@@ -181,6 +217,57 @@ const EntryUnlink = safeStyled.a`
     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);
+
+`;
+const ParaConnect = safeStyled.a`
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  text-decoration: none;
+  color: white !important;
+  font-family: 'PP Mori', sans-serif;
+  font-weight: 500;
+  font-size: 15px;
+  padding: 16px;
+  height: 69px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  border-radius: 8px;
+  border: 1px solid #FF4E00;
+  background: #FF4E00;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 0 20px 8px rgba(251, 188, 4, 0.20) inset;
+
+  &:hover, &:active {
+    background: #FF6A2B;
+    border: 1px solid #FF6A2B;
+  }
+
+`;
+const ParaIcon = safeStyled(CpslIcon)`
+  --border-radius: 4px;
+`;
+const Dots = safeStyled.div`
+  width: 75px;
+  position: absolute;
+  right: 14px;
+  top: 7px;
+`;
+const DotsIcon = safeStyled(CpslIcon)`
+  position: absolute;
+  left: ${({ index }) => `${index % 3 * 27.5}px`};
+  top: ${({ index }) => `${Math.floor(index / 3) * 27.5}px`};
+`;
+const ParaArrow = safeStyled(CpslIcon)`
+  position: absolute;
+  top: 12px;
+  right: 4px;
+`;
 export {
   AccountProfile
 };

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

@@ -7,7 +7,7 @@ import { CpslIcon, CpslSpinner, CpslTab, CpslTabs } from "@getpara/react-compone
 import { OnRampStep } from "../../stores/index.js";
 import { useModalStore } from "../../stores/modal/useModalStore.js";
 import { useEffect, useMemo } from "react";
-import { getAddFundsStep } from "../../utils/steps.js";
+import { getAddFundsStep, ModalStep } from "../../utils/steps.js";
 import { safeStyled } from "@getpara/react-common";
 import { useAccount, useWallet } from "../../../provider/index.js";
 import { AddFundsProvider } from "./AddFundsProvider.js";
@@ -15,7 +15,9 @@ 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";
 const AddFunds = () => {
+  const step = useModalStore((state) => state.step);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const onRampStep = useModalStore((state) => state.onRampStep);
   const storedTab = useModalStore((state) => state.accountAddFundTab);
@@ -28,7 +30,7 @@ const AddFunds = () => {
     ([enabledFlow, key]) => !!(onRampConfig == null ? void 0 : onRampConfig[key]) && (!isGuestMode || enabledFlow === EnabledFlow.RECEIVE)
   );
   const tab = storedTab != null ? storedTab : tabs[0][0];
-  const isMultiFlow = tabs.length > 1;
+  const isMultiFlow = (tab === EnabledFlow.BUY || tab === EnabledFlow.RECEIVE) && tabs.length > 1;
   const onSetTab = (event) => {
     setModalStep(getAddFundsStep(event.detail.tab));
   };
@@ -54,10 +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.map(([tab2, _, icon, title]) => /* @__PURE__ */ jsxs(CpslTab, { tab: tab2, children: [
-      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon }),
-      title
-    ] }, tab2)) }) }),
+    isMultiFlow && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: TABS.filter(([enabledFlow]) => enabledFlow === EnabledFlow.BUY || enabledFlow === EnabledFlow.WITHDRAW).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, {}),
     /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AddFundsContextProvider, { "data-testid": "add-funds", tab, children: Content }) })
   ] });
 };