Open targeted modals
The hooks provide tools for managing various modals in the VeChain application:
Account Related Modals
useAccountModal
: Core account modal managementuseProfileModal
: Show the user only his profile, with customize and logout optionuseAccountCustomizationModal
: Account customization settingsuseAccessAndSecurityModal
: Security settings and access managementuseChooseNameModal
: Account name selectionuseUpgradeSmartAccountModal
: Smart account upgrade management
Wallet & Connection Modals
useConnectModal
: Wallet connection modaluseWalletModal
: Combined wallet management modaluseLoginModalContent
: Login modal content configuration
Transaction Modals
useTransactionModal
: Transaction confirmation and statususeTransactionToast
: Transaction notificationsuseSendTokenModal
: Token transfer interfaceuseReceiveModal
: Token receiving interface
Additional Feature Modals
useExploreEcosystemModal
: VeChain ecosystem exploreruseNotificationsModal
: Notification centeruseFAQModal
: Frequently asked questions
Types
// Modal Types
interface ModalHookReturn {
open: () => void;
close: () => void;
isOpen: boolean;
}
type LoginMethod = 'ecosystem' | 'vechain' | 'dappkit' | 'passkey' | 'email' | 'google' | 'more';
interface LoginModalContentConfig {
showGoogleLogin: boolean;
showEmailLogin: boolean;
showPasskey: boolean;
showVeChainLogin: boolean;
showDappKit: boolean;
showEcosystem: boolean;
showMoreLogin: boolean;
isOfficialVeChainApp: boolean;
}
interface AccountModalContent {
type: string;
props?: Record<string, any>;
}
Usage example
// Example usage of Modal hooks
import {
useWalletModal,
useAccountModal,
useSendTokenModal,
useTransactionModal,
useLoginModalContent
} from '@modals';
const ExampleComponent = () => {
// Wallet modal management
const {
open: openWallet,
close: closeWallet,
isOpen: isWalletOpen
} = useWalletModal();
// Account modal management
const {
open: openAccount,
close: closeAccount,
isOpen: isAccountOpen
} = useAccountModal();
// Send token modal
const {
open: openSendToken,
close: closeSendToken,
isOpen: isSendTokenOpen
} = useSendTokenModal();
// Transaction modal
const {
open: openTransaction,
close: closeTransaction,
isOpen: isTransactionOpen
} = useTransactionModal();
// Login modal content configuration
const loginConfig = useLoginModalContent();
// Example handlers
const handleWalletClick = () => {
openWallet();
};
const handleSendToken = () => {
openSendToken();
};
const handleAccountSettings = () => {
openAccount();
};
return (
<div>
<button
onClick={handleWalletClick}
disabled={isWalletOpen}
>
Open Wallet
</button>
<button
onClick={handleSendToken}
disabled={isSendTokenOpen}
>
Send Tokens
</button>
<button
onClick={handleAccountSettings}
disabled={isAccountOpen}
>
Account Settings
</button>
{/* Login configuration display */}
{loginConfig.showGoogleLogin && (
<button>Login with Google</button>
)}
{loginConfig.showVeChainLogin && (
<button>Login with VeChain</button>
)}
{loginConfig.showPasskey && (
<button>Login with Passkey</button>
)}
{/* Transaction modal state */}
{isTransactionOpen && (
<div>Transaction in Progress...</div>
)}
</div>
);
};
export default ExampleComponent;
/*
Note: These hooks require:
- ModalProvider context
- Valid wallet connection for some features
- Proper configuration for login methods
- Each modal manages its own state and content
*/
Last updated
Was this helpful?