React-based user interface for cross-chain atomic swap operations
Modern React application with comprehensive swap functionality
Seamless integration with MetaMask for Ethereum and Internet Identity for ICP.
Intuitive interface for creating and managing cross-chain atomic swaps.
Live updates on swap status, exchange rates, and transaction progress.
Built-in security validation and transaction confirmation dialogs.
Mobile-friendly interface that works on all devices and screen sizes.
Complete history of all swaps with detailed status tracking.
Modern web technologies for optimal user experience
Component-based UI library
Type-safe JavaScript
Modern styling
Blockchain integration
Modular React components for different aspects of the swap interface.
Handles wallet connections for both Ethereum and ICP
Main swap execution component
Input component for swap amounts
Currency selection dropdown
Real-time exchange rate display
Network status and information
// useExchange.ts - Main swap logic
export const useExchange = () => {
const [swapState, setSwapState] = useState();
const [loading, setLoading] = useState(false);
const createSwap = async (params: SwapParams) => {
// Swap creation logic
};
return { swapState, loading, createSwap };
};
// useMetaMask.ts - Ethereum wallet integration
export const useMetaMask = () => {
const [account, setAccount] = useState();
const [chainId, setChainId] = useState();
const connect = async () => {
// MetaMask connection logic
};
return { account, chainId, connect };
}; Get the frontend running in minutes
cd frontend
npm install
cp env.example .env
# Configure environment variables
npm start
# Start development server
npm run build
# Build for production
npm run build
dfx deploy
# Deploy to Internet Computer
npm run deploy:ic
# Deploy to IC mainnet
Common frontend integration patterns
import { useMetaMask } from './hooks/useMetaMask';
import { useInternetIdentity } from './hooks/useInternetIdentity';
const App = () => {
const { account, connect: connectEth } = useMetaMask();
const { identity, login: loginICP } = useInternetIdentity();
return (
);
};import { useExchange } from './hooks/useExchange';
const SwapComponent = () => {
const { createSwap, loading, swapState } = useExchange();
const handleSwap = async () => {
await createSwap({
fromCurrency: 'ETH',
toCurrency: 'ICP',
amount: '1.0',
recipient: 'user-address'
});
};
return (
);
};