@arthur2079/internal-profile 0.1.2-next.1

package/CHANGELOG.md

@@ -0,0 +1,32 @@
+## [0.1.1](https://github.com/rango-exchange/app-v2/compare/internal-profile@0.1.0...internal-profile@0.1.1) (2026-05-18)
+# 0.1.0 (2026-05-18)
+
+
+### Bug Fixes
+
+* adjust initial and detached modal styles ([c4d57b0](https://github.com/rango-exchange/app-v2/commit/c4d57b0c9be814d88eb31b7ad4da933eaa320141))
+* adjust wallet connect modal styles ([c90c2c9](https://github.com/rango-exchange/app-v2/commit/c90c2c97f0238abd1b63478b1426ec0e5158ee8c))
+* convert social wallet image URLs from relative to absolute paths ([f84d2d7](https://github.com/rango-exchange/app-v2/commit/f84d2d798c13151c24deae9e0cb231ceaca134dd))
+* disable partial state in wallet item on force connect to namespace ([32b4aba](https://github.com/rango-exchange/app-v2/commit/32b4abaf9eb0d93cd069ba04e09a1e1bc82a34a2))
+* fix bug in connecting wallet flow in profile wallets ([91ba63c](https://github.com/rango-exchange/app-v2/commit/91ba63c96bd43cf727a6e796e0f40908ad63b775))
+* fix widget height in small devices ([3221cf8](https://github.com/rango-exchange/app-v2/commit/3221cf84baad83daab6e74e3c769aa585a944d6a))
+* improve profile sign message callback ([77e2686](https://github.com/rango-exchange/app-v2/commit/77e268625d8f7999295b715f74326cd660754c37))
+* prevent scroll-to-top on connect wallet and keep modal fixed on scroll ([de6f068](https://github.com/rango-exchange/app-v2/commit/de6f068fdf71a0c0ab8462f1f14239e1e74e8d62))
+* remove tailwind classes from profile package components ([9281ab2](https://github.com/rango-exchange/app-v2/commit/9281ab237e219ee4228bbd45e17f6d996dfc9e44))
+* resolve connect wallet modal style issues ([746df42](https://github.com/rango-exchange/app-v2/commit/746df4204a898bbe1829903806fc7d3cd50a51c5))
+* resolve dependency cycle in http service ([7bfa0ef](https://github.com/rango-exchange/app-v2/commit/7bfa0ef35e71815922d463d6d7c8eb097736ad2a))
+* show social wallet intro modal only once ([23c728d](https://github.com/rango-exchange/app-v2/commit/23c728d1d7a116227221f84bf94d10c68d1060bf))
+
+
+### Features
+
+* add cosmos to profile as signer ([f26c504](https://github.com/rango-exchange/app-v2/commit/f26c5042c17457a120e6a81e7e2411f819b458f9))
+* add error handler to profile sign message ([5d9e13f](https://github.com/rango-exchange/app-v2/commit/5d9e13fd0318853a4c556f136130c7bdae1941ed))
+* add intro modal for social wallet ([4665fc6](https://github.com/rango-exchange/app-v2/commit/4665fc6d05a79db7a961ce99c2e5298403eaa347))
+* add providers config to Connect Wallets modal props to hide social wallet banners ([482bd82](https://github.com/rango-exchange/app-v2/commit/482bd82e88ccbaf86a14665d8d0f3fee32dfec79))
+* add zeta campaign banner and tag ([2189bb1](https://github.com/rango-exchange/app-v2/commit/2189bb130d0fd8f5259c2c8eac30d141153ac7bb))
+* enable force connect to namespaces and improve connect wallet modal ([58a76b5](https://github.com/rango-exchange/app-v2/commit/58a76b5e9648b51cdaf09589314c936bb348895f))
+* enable force connect to namespaces for social wallet ([2485855](https://github.com/rango-exchange/app-v2/commit/2485855b8650917e0b019d8b4439e688bff9b368))
+* enable terra to sign and be merged in profile ([900a898](https://github.com/rango-exchange/app-v2/commit/900a898d99989767f37e26cb056279c9b6b1159a))
+* improve social wallet user experience and design ([27e7287](https://github.com/rango-exchange/app-v2/commit/27e7287e768e2248b41ca34106e5ceafd5bb5290))
+* upgrade rango dependencies ([1e098cf](https://github.com/rango-exchange/app-v2/commit/1e098cf0abfcb4ab5ce00a3000c72e60a1298a70))

package/dist/api/errors.d.ts

@@ -0,0 +1,3 @@
+export declare class UserUnauthorizedError extends Error {
+    constructor();
+}

package/dist/api/errors.js

@@ -0,0 +1,9 @@
+export class UserUnauthorizedError extends Error {
+    constructor() {
+        super('User unauthorized.');
+        if (Error.captureStackTrace) {
+            Error.captureStackTrace(this, UserUnauthorizedError);
+        }
+        this.name = 'UserProfileUnauthorizedError';
+    }
+}

package/dist/api/mod.d.ts

@@ -0,0 +1,4 @@
+export type { LoginMessageRequest, PublicLeaderboardType, PublicLeaderboardRequest, MergeMessageRequest, LoginMessageResponse, MergeMessageResponse, ProfileDetailsResponse, ProfileDetails, Bridge, ChainDailyData, SwapperDailyData, Chain, ProfileSummaryResponse, ProfileLeaderboardResponse, ProfileSummary, ProfileLeaderboard, LoginRequest, MergeRequest, MergeResponse, LoginResponse, LogoutResponse, UpdateProfileDataResponse, ProfileAccount, ResponseWithError, } from './types';
+export { BASE_PROFILE_URL, getLoginMessage, logIn, logOut, getProfileSummary, getPublicProfileSummary, getProfileLeaderboard, getPublicLeaderboard, getPublicProfileLeaderboard, getProfileDetails, updateProfileData, getMergeAccountMessage, mergeAccount, setClaimWallet, getSetClaimMessage, } from './request';
+export type { UpdateProfileData } from './request';
+export { UserUnauthorizedError } from './errors';

package/dist/api/mod.js

@@ -0,0 +1,2 @@
+export { BASE_PROFILE_URL, getLoginMessage, logIn, logOut, getProfileSummary, getPublicProfileSummary, getProfileLeaderboard, getPublicLeaderboard, getPublicProfileLeaderboard, getProfileDetails, updateProfileData, getMergeAccountMessage, mergeAccount, setClaimWallet, getSetClaimMessage, } from './request';
+export { UserUnauthorizedError } from './errors';

package/dist/api/request.d.ts

@@ -0,0 +1,19 @@
+import type { LoginMessageRequest, LoginMessageResponse, LoginRequest, LoginResponse, LogoutResponse, MergeMessageRequest, MergeMessageResponse, MergeRequest, MergeResponse, ProfileDetailsResponse, ProfileLeaderboardResponse, ProfileSummaryResponse, PublicLeaderboardRequest, SetClaimMessageRequest, SetClaimMessageResponse, SetClaimRequest, SetClaimResponse, UpdateProfileDataResponse } from './types';
+export declare const BASE_PROFILE_URL = "profile";
+export declare function getLoginMessage(body: LoginMessageRequest, signal?: AbortSignal): Promise<LoginMessageResponse>;
+export declare function logIn(body: LoginRequest, signal?: AbortSignal): Promise<LoginResponse>;
+export declare function logOut(signal?: AbortSignal): Promise<LogoutResponse>;
+export declare function getProfileSummary(signal?: AbortSignal): Promise<ProfileSummaryResponse>;
+export declare function getPublicProfileSummary(username: string, signal?: AbortSignal): Promise<ProfileSummaryResponse>;
+export declare function getProfileLeaderboard(signal?: AbortSignal): Promise<ProfileLeaderboardResponse>;
+export declare function getPublicLeaderboard(params: PublicLeaderboardRequest, signal?: AbortSignal): Promise<ProfileLeaderboardResponse>;
+export declare function getPublicProfileLeaderboard(username: string, signal?: AbortSignal): Promise<ProfileLeaderboardResponse>;
+export declare function getProfileDetails(signal?: AbortSignal): Promise<ProfileDetailsResponse>;
+export type UpdateProfileData = {
+    userName: string;
+};
+export declare function updateProfileData(body: UpdateProfileData, signal?: AbortSignal): Promise<UpdateProfileDataResponse>;
+export declare function getMergeAccountMessage(body: MergeMessageRequest, signal?: AbortSignal): Promise<MergeMessageResponse>;
+export declare function mergeAccount(body: MergeRequest, signal?: AbortSignal): Promise<MergeResponse>;
+export declare function getSetClaimMessage(body: SetClaimMessageRequest, signal?: AbortSignal): Promise<SetClaimMessageResponse>;
+export declare function setClaimWallet(body: SetClaimRequest, signal?: AbortSignal): Promise<SetClaimResponse>;

package/dist/api/request.js

@@ -0,0 +1,96 @@
+import { fetcher } from '../fetcher';
+export const BASE_PROFILE_URL = 'profile';
+const requestConfig = { withCredentials: true };
+export async function getLoginMessage(body, signal) {
+    const { data } = await fetcher().post(`${BASE_PROFILE_URL}/login-message`, body, { ...requestConfig, signal });
+    return data;
+}
+export async function logIn(body, signal) {
+    const { data } = await fetcher().post(`${BASE_PROFILE_URL}/login`, body, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function logOut(signal) {
+    const { data } = await fetcher().get(`${BASE_PROFILE_URL}/logout`, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function getProfileSummary(signal) {
+    const { data } = await fetcher().get(`${BASE_PROFILE_URL}/summary`, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function getPublicProfileSummary(username, signal) {
+    const { data } = await fetcher().get(`${BASE_PROFILE_URL}/public/${username}/summary`, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function getProfileLeaderboard(signal) {
+    const { data } = await fetcher().get(`${BASE_PROFILE_URL}/user-leaderboard`, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function getPublicLeaderboard(params, signal) {
+    const { data } = await fetcher().get(`${BASE_PROFILE_URL}/public/leaderboard`, {
+        ...requestConfig,
+        signal,
+        params,
+    });
+    return data;
+}
+export async function getPublicProfileLeaderboard(username, signal) {
+    const { data } = await fetcher().get(`${BASE_PROFILE_URL}/public/${username}/user-leaderboard`, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function getProfileDetails(signal) {
+    const { data } = await fetcher().get(`${BASE_PROFILE_URL}/details`, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function updateProfileData(body, signal) {
+    const { data } = await fetcher().post(`${BASE_PROFILE_URL}/update`, body, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function getMergeAccountMessage(body, signal) {
+    const { data } = await fetcher().post(`${BASE_PROFILE_URL}/merge-request`, body, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function mergeAccount(body, signal) {
+    const { data } = await fetcher().post(`${BASE_PROFILE_URL}/merge`, body, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}
+export async function getSetClaimMessage(body, signal) {
+    const { data } = await fetcher().post(`${BASE_PROFILE_URL}/set-airdrop-wallet-request`, body, { ...requestConfig, signal });
+    return data;
+}
+export async function setClaimWallet(body, signal) {
+    const { data } = await fetcher().post(`${BASE_PROFILE_URL}/set-airdrop-wallet`, body, {
+        ...requestConfig,
+        signal,
+    });
+    return data;
+}

package/dist/api/types.d.ts

@@ -0,0 +1,193 @@
+import type { Asset } from 'rango-types';
+interface CosmosRequest {
+    pubKeyBase64?: string;
+}
+export interface LoginMessageRequest extends CosmosRequest {
+    address: string;
+    blockchain: string;
+}
+export type PublicLeaderboardType = 'SCORE' | 'REFERRAL';
+export interface PublicLeaderboardRequest {
+    page: number;
+    offset: number;
+    type?: PublicLeaderboardType;
+}
+export type MergeMessageRequest = LoginMessageRequest;
+export interface LoginMessageResponse {
+    messageId: number;
+    message: string;
+}
+export type MergeMessageResponse = LoginMessageResponse;
+export interface ProfileDetailsResponse {
+    profile: ProfileDetails;
+}
+export interface SetClaimMessageRequest {
+    address: string;
+    blockchain: string;
+}
+export type SetClaimRequest = LoginRequest;
+export type SetClaimMessageResponse = LoginMessageResponse;
+export type SetClaimResponse = LoginResponse;
+export interface ProfileDetails {
+    id: string;
+    wallets: string[];
+    chains: Chain[];
+    bridges: Bridge[];
+    dexes: Bridge[];
+    chainsDaily: ChainDailyData[];
+    bridgesDaily: SwapperDailyData[];
+    dexesDaily: SwapperDailyData[];
+    lastSwapUpdateDate: number;
+    updateDate: number;
+}
+export interface Bridge {
+    swapper: {
+        group: string;
+        title: string;
+        logo: string;
+    };
+    txCount: number;
+    txCountEffective: number;
+    volume: number;
+    volumeEffective: number;
+    favoriteToken: {
+        blockchain: string;
+        symbol: string;
+        address: string | null;
+        logo: string;
+    };
+}
+export interface ChainDailyData {
+    date: string;
+    bucket: string;
+    count: number;
+    volume: number;
+}
+export interface SwapperDailyData extends ChainDailyData {
+    countEffective: number;
+    volumeEffective: number;
+}
+export interface Chain {
+    blockchain: {
+        blockchain: string;
+        displayName: string;
+        shortName: string;
+        logo: string;
+    };
+    swapCount: number;
+    bridgeCount: number;
+    volume: number;
+    favoriteToken: {
+        blockchain: string;
+        symbol: string;
+        address: string | null;
+        logo: string;
+    } | null;
+    favoriteBridge: {
+        group: string;
+        title: string;
+        logo: string;
+    } | null;
+    favoriteDex: {
+        group: string;
+        title: string;
+        logo: string;
+    } | null;
+}
+export interface ProfileSummaryResponse {
+    profile: ProfileSummary | null;
+    error: null;
+    errorCode: null;
+    traceId: null;
+}
+export interface ProfileLeaderboardResponse {
+    data: ProfileLeaderboard[] | null;
+    totalPages: number;
+    error: null;
+    errorCode: null;
+    traceId: null;
+}
+interface Blockchain {
+    blockchain: string;
+    displayName: string;
+    logo: string;
+    shortName: string;
+}
+interface Swapper {
+    group: string;
+    logo: string;
+    title: string;
+}
+export interface ProfileSummary {
+    id: string;
+    avatar: string;
+    username: string;
+    airdropWallet: string;
+    wallets: {
+        address: string;
+        blockchain: string;
+    }[];
+    score: number;
+    rank: number;
+    txCount: number;
+    txCountEffective: number;
+    totalVolume: number;
+    totalVolumeEffective: number;
+    interactedBlockchains: number;
+    referralVolume: number;
+    referralIncome: number;
+    referralRank: number;
+    invitedFriends: number;
+    mostUsedToken: (Asset & {
+        logo: string;
+    }) | null;
+    mostUsedBridge: Swapper | null;
+    mostUsedDex: Swapper | null;
+    mostUsedBlockchain: Blockchain | null;
+    lastSwapUpdateDate: number;
+    primaryWallet: string;
+    updateDate: number;
+    level: {
+        tier: number;
+        level: number;
+        title: string;
+        from: number;
+        to: number;
+    };
+    levelProgress: number;
+}
+export interface ProfileLeaderboard {
+    avatar: string;
+    id: string;
+    rank: number;
+    score: number;
+    username: string;
+    level: number;
+    referralVolume: number;
+}
+export interface LoginRequest {
+    messageId: number;
+    signature: string;
+}
+export type MergeRequest = LoginRequest & CosmosRequest;
+export type MergeResponse = LoginResponse;
+export interface LoginResponse extends ProfileSummaryResponse {
+    status: string;
+}
+export interface LogoutResponse {
+    status: string;
+}
+export interface UpdateProfileDataResponse {
+    success: boolean;
+}
+export type ProfileAccount = {
+    address: string;
+    blockchain: string;
+    walletType: string;
+};
+export interface ResponseWithError {
+    error: string | null;
+    errorCode: number | null;
+    traceId: number | null;
+}
+export {};

package/dist/api/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ConnectWalletModal/ConnectWalletFooter.d.ts

@@ -0,0 +1,5 @@
+type PropTypes = {
+    isDarkMode: boolean;
+};
+declare const ConnectWalletFooter: (props: PropTypes) => import("react/jsx-runtime").JSX.Element;
+export default ConnectWalletFooter;

package/dist/components/ConnectWalletModal/ConnectWalletFooter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@rango-dev/ui';
+import { Trans } from 'react-i18next';
+import { PRIVACY_POLICY, TERMS_OF_SERVICE } from '../../constants/links';
+import { ConnectWalletFooterTypographyStyles, TextLink } from './ConnectWalletModal.styles';
+const ConnectWalletFooter = (props) => {
+    return (_jsx(Typography, { variant: "body", size: "small", color: props.isDarkMode ? '$colors$neutral900' : '$colors$neutral700', style: ConnectWalletFooterTypographyStyles, children: _jsxs(Trans, { i18nKey: "By connecting your wallet, you agree to Terms of Services and Privacy Policy", children: ["By connecting your wallet, you agree to our", _jsx(TextLink, { href: TERMS_OF_SERVICE, target: "_blank", children: "Terms of Services" }), "and", _jsx(TextLink, { href: PRIVACY_POLICY, target: "_blank", children: "Privacy Policy" })] }) }));
+};
+export default ConnectWalletFooter;

package/dist/components/ConnectWalletModal/ConnectWalletModal.constants.d.ts

@@ -0,0 +1,5 @@
+import type { SocialNetwork } from './ConnectWalletModal.types';
+export declare const PRIVY_COMPATIBLE_SOCIAL_NETWORK: SocialNetwork[];
+export declare const DEFAULT_SOCIAL_WALLET_IMAGE = "https://app.rango.exchange/imgs/wallets/social-wallet-email.svg";
+export declare const SOCIAL_WALLET_IMAGE_BY_SOCIAL_NETWORKS: Record<SocialNetwork, string>;
+export declare const SOCIAL_WALLET_INTRO_CONFIRMED = "social-wallet-intro-confirmed";

package/dist/components/ConnectWalletModal/ConnectWalletModal.constants.js

@@ -0,0 +1,8 @@
+export const PRIVY_COMPATIBLE_SOCIAL_NETWORK = ['google', 'twitter'];
+const SOCIAL_WALLET_IMAGE_BASE_URL = 'https://app.rango.exchange';
+export const DEFAULT_SOCIAL_WALLET_IMAGE = `${SOCIAL_WALLET_IMAGE_BASE_URL}/imgs/wallets/social-wallet-email.svg`;
+export const SOCIAL_WALLET_IMAGE_BY_SOCIAL_NETWORKS = {
+    google: `${SOCIAL_WALLET_IMAGE_BASE_URL}/imgs/wallets/social-wallet-google.svg`,
+    twitter: `${SOCIAL_WALLET_IMAGE_BASE_URL}/imgs/wallets/social-wallet-twitter.svg`,
+};
+export const SOCIAL_WALLET_INTRO_CONFIRMED = 'social-wallet-intro-confirmed';

package/dist/components/ConnectWalletModal/ConnectWalletModal.d.ts

@@ -0,0 +1,3 @@
+import { type ConnectWalletModalProps } from './ConnectWalletModal.types';
+declare const ConnectWalletModal: (props: ConnectWalletModalProps) => import("react/jsx-runtime").JSX.Element;
+export default ConnectWalletModal;

package/dist/components/ConnectWalletModal/ConnectWalletModal.helpers.d.ts

@@ -0,0 +1,2 @@
+import type { SocialUser } from './ConnectWalletModal.types';
+export declare function getSocialWalletImage(user: SocialUser): string;

package/dist/components/ConnectWalletModal/ConnectWalletModal.helpers.js

@@ -0,0 +1,9 @@
+import { DEFAULT_SOCIAL_WALLET_IMAGE, PRIVY_COMPATIBLE_SOCIAL_NETWORK, SOCIAL_WALLET_IMAGE_BY_SOCIAL_NETWORKS, } from './ConnectWalletModal.constants';
+export function getSocialWalletImage(user) {
+    for (const network of PRIVY_COMPATIBLE_SOCIAL_NETWORK) {
+        if (user?.[network]) {
+            return SOCIAL_WALLET_IMAGE_BY_SOCIAL_NETWORKS[network];
+        }
+    }
+    return DEFAULT_SOCIAL_WALLET_IMAGE;
+}

package/dist/components/ConnectWalletModal/ConnectWalletModal.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SOCIAL_WALLET_TYPE, useSocialWallet } from '@arthur2079/internal-social-wallet';
+import { Divider, SearchIcon, TextField, Typography, WalletState } from '@rango-dev/ui';
+import { useWalletList, useWallets, } from '@rango-dev/widget-embedded';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DEFAULT_WALLET_INJECTION_ERROR } from '../../constants/errors';
+import { GTMEvents } from '../../constants/events';
+import { STATEFUL_CONNECT_MODAL_ID } from '../../constants/modals';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { useStackModal } from '../../hooks/useStackModal';
+import { useStatefulConnect } from '../../hooks/useStatefulConnect';
+import { walletAndSupportedChainsNames } from '../../utils/wallets';
+import { SocialWalletIntroModal } from '../SocialWalletIntroModal';
+import { WalletItem } from '../WalletItem';
+import ConnectWalletFooter from './ConnectWalletFooter';
+import { SOCIAL_WALLET_INTRO_CONFIRMED } from './ConnectWalletModal.constants';
+import { getSocialWalletImage } from './ConnectWalletModal.helpers';
+import { FiltersContainer, ModalContent, SearchIconContainer, SearchWalletContainer, searchWalletTextFieldStyles, SocialWalletBanner, WalletListContainer, WalletListContent, } from './ConnectWalletModal.styles';
+import EmptyWalletList from './EmptyWalletList';
+import StatefulConnectContainer from './StatefulConnectContainer';
+import { WalletsChainSelect } from './WalletsChainSelect';
+const AUTO_HIDE_WALLET_ERROR_DURATION = 10_000;
+const ConnectWalletModal = (props) => {
+    const { pop, push, stack } = useStackModal();
+    const { t } = useTranslation();
+    const { getState, handleConnect, resetState } = useStatefulConnect();
+    const [socialWalletIntroConfirmed, setSocialWalletIntroConfirmed] = useLocalStorage(SOCIAL_WALLET_INTRO_CONFIRMED, false);
+    const [searchValue, setSearchValue] = useState('');
+    const [selectedChain, setSelectedChain] = useState(null);
+    const [isWalletChainSelectOpen, setIsWalletChainSelectOpen] = useState(false);
+    const [selectedWallet, setSelectedWallet] = useState(null);
+    const [errors, setErrors] = useState([]);
+    const { list } = useWalletList({});
+    const { getWalletInfo, state, disconnect } = useWallets();
+    const { getSocialUser } = useSocialWallet();
+    const [showSocialWalletIntroModal, setShowSocialWalletIntroModal] = useState(false);
+    const toggleSocialWalletIntroModal = () => setShowSocialWalletIntroModal((prevState) => !prevState);
+    const { indexInStack = 0, afterConnect, onDetachedConfirm, detachedConfirmText, forceConnectToNamespaces, renderNotification, renderHeader, isMobile, isDarkMode, allBlockchains, options, renderModal, shouldExcludeWallet, } = props;
+    const lastStackItemId = stack[stack.length - 1]?.id;
+    const showSocialWalletBanner = !options?.hideSocialWalletPromotionBanner &&
+        list.some((wallet) => wallet.type === SOCIAL_WALLET_TYPE && wallet.state === WalletState.DISCONNECTED);
+    const handleCloseMessages = (removeAll, message) => {
+        const updatedMessages = errors.map((error) => {
+            if (error.message === message || removeAll) {
+                return { ...error, open: false };
+            }
+            return error;
+        });
+        setErrors(updatedMessages);
+    };
+    const catchErrorsWhileConnect = (error, wallet) => {
+        let message = error instanceof Error ? error.message : error;
+        message ||= !!error ? error.toString() : error;
+        message ||= DEFAULT_WALLET_INJECTION_ERROR;
+        // Handling various wallet error events for Google Tag Manager
+        if (message && wallet) {
+            // TODO: Properly type window to have `data layer`
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            window.dataLayer = window.dataLayer || [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            window.dataLayer.push({
+                event: GTMEvents.WALLET_FAILED,
+                type: wallet.type,
+                message,
+            });
+        }
+        setErrors((prev) => [...prev, { open: true, message }]);
+    };
+    const displayedWallets = list
+        .filter((wallet) => {
+        const walletInfo = getWalletInfo(wallet.type);
+        const supportedChainNames = walletAndSupportedChainsNames(walletInfo.supportedChains);
+        // Drop wallet if it should be excluded
+        if (!!shouldExcludeWallet && shouldExcludeWallet(walletInfo)) {
+            return false;
+        }
+        // Drop wallet if its title does not contain the search value
+        const isWalletSearched = wallet.title.toLowerCase().includes(searchValue.toLowerCase());
+        if (!isWalletSearched) {
+            return false;
+        }
+        // Drop wallet if it does not support the selected blockchain
+        const walletSupportsSelectedBlockchain = !selectedChain || supportedChainNames?.includes(selectedChain);
+        if (!walletSupportsSelectedBlockchain) {
+            return false;
+        }
+        return true;
+    })
+        .map((wallet) => {
+        /**
+         * We want to display a different image for a social wallet
+         * based on which social network (google, twitter, …) the user connected with.
+         */
+        if (wallet.type !== SOCIAL_WALLET_TYPE) {
+            return wallet;
+        }
+        if (wallet.state !== WalletState.CONNECTED) {
+            return wallet;
+        }
+        return {
+            ...wallet,
+            image: getSocialWalletImage(getSocialUser()),
+        };
+    });
+    const handleSocialWalletConnect = () => {
+        const showSocialWalletIntroModal = !options?.skipSocialWalletIntroModal && !socialWalletIntroConfirmed;
+        if (showSocialWalletIntroModal) {
+            toggleSocialWalletIntroModal();
+            return;
+        }
+        connectToSocialWallet();
+    };
+    const handleWalletItemClick = (wallet) => {
+        if (wallet.type !== SOCIAL_WALLET_TYPE) {
+            setSelectedWallet(wallet);
+            return;
+        }
+        const isConnected = state(wallet.type).connected;
+        if (isConnected) {
+            void disconnect(wallet.type);
+            return;
+        }
+        handleSocialWalletConnect();
+    };
+    const connectToSocialWallet = () => {
+        const socialWalletInfo = displayedWallets.find((wallet) => wallet.type === SOCIAL_WALLET_TYPE);
+        if (socialWalletInfo) {
+            void handleConnect(socialWalletInfo, {
+                disconnectIfConnected: true,
+                forceConnectToNamespaces: ['EVM', 'Solana'],
+            });
+        }
+    };
+    const onConfirmSocialWalletIntroModal = () => {
+        setSocialWalletIntroConfirmed(true);
+        setShowSocialWalletIntroModal(false);
+        connectToSocialWallet();
+    };
+    useEffect(() => {
+        const state = getState();
+        if (state?.status !== 'init' &&
+            selectedWallet &&
+            lastStackItemId !== STATEFUL_CONNECT_MODAL_ID) {
+            push({
+                id: STATEFUL_CONNECT_MODAL_ID,
+                renderContent: (index) => (_jsx(StatefulConnectContainer, { selectedWallet: selectedWallet, catchErrorsWhileConnect: catchErrorsWhileConnect, indexInStack: index, onClose: () => {
+                        setSelectedWallet(null);
+                    }, detachedConfirmText: detachedConfirmText, onDetachedConfirm: () => {
+                        if (onDetachedConfirm) {
+                            onDetachedConfirm();
+                        }
+                        else {
+                            resetState();
+                            setSelectedWallet(null);
+                        }
+                    }, renderHeader: renderHeader, forceConnectToNamespaces: forceConnectToNamespaces })),
+            });
+        }
+    }, [getState()]);
+    useEffect(() => {
+        if (lastStackItemId === STATEFUL_CONNECT_MODAL_ID &&
+            (!selectedWallet || getState().status === 'init')) {
+            pop();
+        }
+    }, [getState(), selectedWallet, lastStackItemId]);
+    useEffect(() => {
+        if (selectedWallet) {
+            handleConnect(selectedWallet, {
+                disconnectIfConnected: true,
+                forceConnectToNamespaces,
+            })
+                .then((result) => {
+                if (result.status === 'connected') {
+                    afterConnect?.();
+                }
+            })
+                .catch((e) => {
+                catchErrorsWhileConnect(e, selectedWallet);
+            });
+        }
+    }, [selectedWallet]);
+    return (_jsxs(_Fragment, { children: [_jsx(SocialWalletIntroModal, { isDarkMode: isDarkMode, isMobile: isMobile, open: showSocialWalletIntroModal, onClose: toggleSocialWalletIntroModal, onConfirm: onConfirmSocialWalletIntroModal }), _jsxs(ModalContent, { children: [renderHeader({
+                        showBackButton: indexInStack > 0,
+                        handleClose: () => {
+                            pop();
+                        },
+                    }), showSocialWalletBanner ? (_jsxs(_Fragment, { children: [_jsx(Divider, { size: isMobile ? '20' : '4' }), _jsx(Typography, { className: "social-wallet-description", variant: "body", size: "medium", color: "neutral700", children: t('Create a wallet quickly and easily using your social media accounts for a fast and seamless experience.') }), _jsx(Divider, { size: "16" }), _jsx(SocialWalletBanner, { role: "button", tabIndex: "0", src: `/imgs/wallets/social-wallet-banner-${isDarkMode ? 'dark' : 'light'}.svg`, onClick: handleSocialWalletConnect }), _jsx(Divider, { size: "16" }), _jsxs("div", { className: "social-wallet-banner-separator", children: [_jsx(Typography, { variant: "body", size: "medium", color: "neutral700", children: t('All Wallets') }), _jsx(Divider, { size: "8", direction: "horizontal" }), _jsx("div", { className: "separator" })] })] })) : (_jsx(Divider, { size: isMobile ? '40' : '24' })), _jsxs(FiltersContainer, { children: [_jsx(SearchWalletContainer, { children: _jsx(TextField, { id: "app-connect-wallet-modal-search-wallet-input", variant: "ghost", value: searchValue, onChange: (e) => setSearchValue(e.target.value), placeholder: t('Search Wallet'), prefix: _jsx(SearchIconContainer, { children: _jsx(SearchIcon, { color: "black", size: 16 }) }), style: searchWalletTextFieldStyles }) }), !forceConnectToNamespaces?.length && (_jsx(WalletsChainSelect, { isOpen: isWalletChainSelectOpen, setIsOpen: setIsWalletChainSelectOpen, selectedChain: selectedChain, handleSelectedChainChange: (value) => setSelectedChain(value), shouldExcludeWallet: shouldExcludeWallet, isMobile: isMobile, renderModal: renderModal, renderHeader: renderHeader, allBlockchains: allBlockchains }))] }), errors.map((error) => renderNotification({
+                        message: error,
+                        setOpen: () => handleCloseMessages(false, error.message),
+                        autoHideDuration: AUTO_HIDE_WALLET_ERROR_DURATION,
+                    })), _jsx(Divider, { size: "8" }), _jsx(WalletListContainer, { children: displayedWallets.length > 0 ? (_jsx(WalletListContent, { isEmpty: displayedWallets.length === 0, children: displayedWallets.map((wallet) => (_jsx(WalletItem, { wallet: wallet, handleClick: handleWalletItemClick, disabled: false, disablePartialState: !!forceConnectToNamespaces?.length }, wallet.type))) })) : (_jsx(EmptyWalletList, {})) }), _jsx(Divider, { size: isMobile ? '16' : '24' }), _jsx(ConnectWalletFooter, { isDarkMode: isDarkMode })] })] }));
+};
+export default ConnectWalletModal;

package/dist/components/ConnectWalletModal/ConnectWalletModal.styles.d.ts

@@ -0,0 +1,19 @@
+export declare const TextLink: any;
+export declare const ModalContent: any;
+export declare const SocialWalletBanner: any;
+export declare const WalletListContainer: any;
+export declare const WalletListContent: any;
+export declare const SearchWalletContainer: any;
+export declare const searchWalletTextFieldStyles: {
+    height: string;
+    '& input': {
+        width: string;
+    };
+};
+export declare const NoWalletFoundContainer: any;
+export declare const NoResultImage: any;
+export declare const ConnectWalletFooterTypographyStyles: {
+    padding: string;
+};
+export declare const FiltersContainer: any;
+export declare const SearchIconContainer: any;