Appearance
🎨 Custom modal
Here you can find how to make custom modal
Prepare
Add injectWindowObjects to your setup
html
<head>
...
<script>
window.setup = {
injectWindowObjects: true
}
</script>
</head>Interface
ts
type OnPressWallet = (code: string) => void;
declare global {
interface Window {
onPressWallet?: OnPressWallet;
}
}Handler
Use handler to call wallet connection
js
if (window.onPressWallet) window.onPressWallet("phantom");Errors
json
{
"Wallet not found": "Unknown wallet code",
"Wallet not installed": "User not has wallet",
"Wallet not supported": "Wallet found, but not supported now",
}Wrapper
js
function connect_wrapper (wallet_code) {
if (!window.onPressWallet) { // Handle provider not ready here
alert("Please insure you add setup object!");
return;
}
try {
window.onPressWallet(wallet_code);
} catch (e) {
const message = e instanceof Error ? e.message.toLowerCase() : "unknown";
if (message === "wallet not found") {
alert("Please insure you correctly provide wallet_code!");
return;
}
if (message === "wallet not installed") { // Handle not installed here
alert("Please install wallet!");
return;
}
if (message === "wallet not supported") {
alert("We not support this wallet now!");
return;
}
alert("Something went wrong...");
}
}Usage
html
<button onclick="connect_wrapper("phantom")">Continue with Phantom</button>Available wallets
| Code | Wallet name |
|---|---|
phantom | Phantom |
coinbase | Base |
backpack | Backpack |
solflare | Solflare |
bitkeep | Bitget |
trust | Trust Wallet |
bybit | Bybit Wallet |
ctrl | Ctrl |
magiceden | Magic Eden |
mathwallet | Math Wallet |
tokenpocket | Token Pocket |
hotwallet | Hot Wallet |
exodus | Exodus |
glow | Glow |
okx | OKX Wallet |
metamask | Metamask |
jupiter | Jupiter |