Examples
Real-world examples and pre-built theme configurations.
Vanilla JavaScript Example
Complete example with wallet connection and transaction signing:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XRPL-Connect Example</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 2rem;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.card {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
button {
padding: 0.75rem 1.5rem;
background: #3b99fc;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
button:hover {
background: #2a7fd8;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h1>XRPL-Connect Example</h1>
<xrpl-wallet-connector id="wallet-connector"></xrpl-wallet-connector>
</div>
<div class="card" id="account-info">
<p>No wallet connected</p>
</div>
<div class="card" id="transaction-section" style="display: none;">
<h2>Send Transaction</h2>
<form id="tx-form">
<div>
<label>Destination:</label>
<input type="text" id="destination" required>
</div>
<div>
<label>Amount (drops):</label>
<input type="number" id="amount" required>
</div>
<button type="submit">Send Transaction</button>
</form>
<div id="tx-result"></div>
</div>
</div>
<script type="module">
import { WalletManager,XamanAdapter,CrossmarkAdapter } from 'xrpl-connect';
const walletManager = new WalletManager({
adapters: [
new XamanAdapter({ apiKey: 'YOUR_API_KEY' }),
new CrossmarkAdapter(),
],
network: 'testnet',
autoConnect: true,
});
const connector = document.getElementById('wallet-connector');
connector.setWalletManager(walletManager);
const accountInfo = document.getElementById('account-info');
const txSection = document.getElementById('transaction-section');
const txForm = document.getElementById('tx-form');
const txResult = document.getElementById('tx-result');
function updateUI() {
if (walletManager.connected) {
const account = walletManager.account;
accountInfo.innerHTML = `
<h2>Connected Account</h2>
<p><strong>Address:</strong> ${account.address}</p>
<p><strong>Network:</strong> ${account.network.name}</p>
`;
txSection.style.display = 'block';
} else {
accountInfo.innerHTML = '<p>No wallet connected. Click the button above to connect.</p>';
txSection.style.display = 'none';
}
}
walletManager.on('connect', updateUI);
walletManager.on('disconnect', updateUI);
updateUI();
txForm.addEventListener('submit', async (e) => {
e.preventDefault();
const destination = document.getElementById('destination').value;
const amount = document.getElementById('amount').value;
try {
txResult.innerHTML = '<p>Signing transaction...</p>';
const result = await walletManager.signAndSubmit({
TransactionType: 'Payment',
Account: walletManager.account.address,
Destination: destination,
Amount: amount,
});
txResult.innerHTML = `
<div style="background: #d4edda; padding: 1rem; border-radius: 8px;">
<h3>Success!</h3>
<p><strong>Hash:</strong> ${result.hash || 'Pending'}</p>
</div>
`;
} catch (error) {
txResult.innerHTML = `
<div style="background: #f8d7da; padding: 1rem; border-radius: 8px;">
<h3>Error</h3>
<p>${error.message}</p>
</div>
`;
}
});
</script>
</body>
</html>React Example
jsx
import { useEffect, useRef, useState } from 'react';
import { WalletManager,XamanAdapter,CrossmarkAdapter} from 'xrpl-connect';
function App() {
const connectorRef = useRef(null);
const [account, setAccount] = useState(null);
const [walletManager, setWalletManager] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const manager = new WalletManager({
adapters: [
new XamanAdapter({ apiKey: 'YOUR_API_KEY' }),
new CrossmarkAdapter(),
],
network: 'testnet',
autoConnect: true,
});
manager.on('connect', (acc) => {
setAccount(acc);
});
manager.on('disconnect', () => {
setAccount(null);
});
manager.on('error', (error) => {
console.error('Error:', error);
});
setWalletManager(manager);
if (connectorRef.current) {
connectorRef.current.setWalletManager(manager);
}
}, []);
const handleSignTransaction = async () => {
if (!walletManager) return;
setIsLoading(true);
try {
const result = await walletManager.signAndSubmit({
TransactionType: 'Payment',
Account: walletManager.account.address,
Destination: 'rN7n7otQDd6FczFgLdlqtyMVrn3HMfXoQT',
Amount: '1000000',
});
console.log('Transaction submitted:', result.hash);
} catch (error) {
console.error('Failed to sign:', error);
} finally {
setIsLoading(false);
}
};
return (
<div style={{ padding: '2rem' }}>
<h1>XRPL-Connect React Example</h1>
<xrpl-wallet-connector ref={connectorRef} />
{account && (
<div style={{ marginTop: '2rem' }}>
<h2>Connected Account</h2>
<p>Address: {account.address}</p>
<p>Network: {account.network.name}</p>
<button
onClick={handleSignTransaction}
disabled={isLoading}
>
{isLoading ? 'Signing...' : 'Send Payment'}
</button>
</div>
)}
</div>
);
}
export default App;Vue 3 Example
vue
<template>
<div style="padding: 2rem">
<h1>XRPL-Connect Vue 3 Example</h1>
<xrpl-wallet-connector ref="connectorRef" />
<div v-if="account" style="marginTop: '2rem'">
<h2>Connected Account</h2>
<p>Address: {{ account.address }}</p>
<p>Network: {{ account.network.name }}</p>
<button
@click="handleSignTransaction"
:disabled="isLoading"
>
{{ isLoading ? 'Signing...' : 'Send Payment' }}
</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { WalletManager,XamanAdapter,CrossmarkAdapter } from 'xrpl-connect';
const connectorRef = ref(null);
const account = ref(null);
const isLoading = ref(false);
let walletManager;
onMounted(() => {
walletManager = new WalletManager({
adapters: [
new XamanAdapter({ apiKey: 'YOUR_API_KEY' }),
new CrossmarkAdapter(),
],
network: 'testnet',
autoConnect: true,
});
walletManager.on('connect', (acc) => {
account.value = acc;
});
walletManager.on('disconnect', () => {
account.value = null;
});
connectorRef.value?.setWalletManager(walletManager);
});
const handleSignTransaction = async () => {
if (!walletManager) return;
isLoading.value = true;
try {
const result = await walletManager.signAndSubmit({
TransactionType: 'Payment',
Account: walletManager.account.address,
Destination: 'rN7n7otQDd6FczFgLdlqtyMVrn3HMfXoQT',
Amount: '1000000',
});
console.log('Transaction submitted:', result.hash);
} catch (error) {
console.error('Failed to sign:', error);
} finally {
isLoading.value = false;
}
};
</script>Theme Switching Example
Dynamically switch themes based on user preference:
javascript
const themes = {
dark: {
'--xc-background-color': '#000637',
'--xc-primary-color': '#3b99fc',
'--xc-text-color': '#F5F4E7',
},
light: {
'--xc-background-color': '#ffffff',
'--xc-primary-color': '#2563eb',
'--xc-text-color': '#111111',
},
purple: {
'--xc-background-color': '#1e1b4b',
'--xc-primary-color': '#a78bfa',
'--xc-text-color': '#f3e8ff',
},
};
function applyTheme(themeName) {
const connector = document.getElementById('wallet-connector');
const theme = themes[themeName];
Object.entries(theme).forEach(([key, value]) => {
connector.style.setProperty(key, value);
});
localStorage.setItem('theme', themeName);
}
// Load saved theme or use system preference
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(saved || (prefersDark ? 'dark' : 'light'));Global CSS Theme Definition
Define themes globally for consistent application-wide styling:
css
:root {
color-scheme: light dark;
/* Light theme (default) */
--xc-primary-color: #2563eb;
--xc-background-color: #ffffff;
--xc-text-color: #111111;
}
@media (prefers-color-scheme: dark) {
:root {
--xc-primary-color: #3b99fc;
--xc-background-color: #000637;
--xc-text-color: #F5F4E7;
}
}
/* App-specific overrides */
.app-purple {
--xc-primary-color: #a78bfa;
--xc-background-color: #1e1b4b;
--xc-text-color: #f3e8ff;
}Common Use Cases
DeFi Application
For DeFi apps, use a dark professional theme with high contrast:
html
<xrpl-wallet-connector
style="
--xc-primary-color: #1f2937;
--xc-background-color: #0f172a;
--xc-text-color: #f1f5f9;
--xc-success-color: #10b981;
--xc-danger-color: #ef4444;
"
wallets="xaman,crossmark"
primary-wallet="xaman"
></xrpl-wallet-connector>Payment Application
For payment apps, use clean light theme with friendly colors:
html
<xrpl-wallet-connector
style="
--xc-primary-color: #ec4899;
--xc-background-color: #ffffff;
--xc-text-color: #374151;
--xc-border-radius: 12px;
"
wallets="xaman,crossmark,walletconnect"
primary-wallet="xaman"
></xrpl-wallet-connector>NFT Marketplace
For NFT apps, use creative dark theme with vibrant accents:
html
<xrpl-wallet-connector
style="
--xc-primary-color: #f59e0b;
--xc-background-color: #111827;
--xc-text-color: #f3f4f6;
--xc-border-radius: 16px;
"
wallets="xaman,crossmark,walletconnect"
></xrpl-wallet-connector>