+
+
+ {/* Tab navigation */}
+ + Connected Wallet +
+
+
+
+
+ Address
++ {wallet.address} +
+
+
+ Provider
++ {wallet.provider} +
+
+
+ Network
++ {wallet.supportedChains[wallet.chainId || '0x1']?.chainName || + wallet.chainId} +
+
+ {demos.map((demo) => (
+
+ ))}
+
+
+ {/* Tab content */}
+
+ {/* Wallet tab */}
+ {activeTab === 'wallet' && (
+
+
+ ) : (
+ // Not connected state
+
+
+ )}
+
+ {/* Transactions tab */}
+ {activeTab === 'transactions' && (
+ + Wallet Connection +
++ Supports multiple wallet providers with seamless connection experience: +
+-
+
- ✓ MetaMask - EVM chains (Ethereum, Polygon, etc.) +
- ✓ Starknet - ArgentX, Braavos wallets +
- ✓ WalletConnect - Protocol v2 +
- ✓ Coinbase Wallet - EVM compatible +
+
+
+
+ {
+ console.log('Transaction sent:', txHash);
+ }}
+ />
+
+ )}
+
+ {/* NFTs tab */}
+ {activeTab === 'nfts' && (
+ + Transaction Manager +
+
+ {
+ console.log('Selected NFT:', nft);
+ }}
+ />
+
+ )}
+
+ {/* DeFi tab */}
+ {activeTab === 'defi' && (
+ + NFT Gallery +
+
+ {
+ console.log(`Staked ${amount} in ${protocol} for ${duration} days`);
+ }}
+ />
+
+ )}
+
+ {/* Code tab */}
+ {activeTab === 'code' && (
+ + DeFi Interface +
+
+
+ )}
+ + Integration Examples +
+ + {/* Hook usage */} +
+
+ {showCode && (
+
+
+ {/* Component usage */}
+
+ {`import { useWeb3Wallet } from '@/hooks/useWeb3Wallet';
+
+export function MyComponent() {
+ const wallet = useWeb3Wallet();
+
+ return (
+
+ {wallet.isConnected ? (
+ <>
+ Address: {wallet.address}
+
+
+ ) : (
+
+ )}
+
+ );
+}`}
+
+ )}
+
+
+ {showCode && (
+
+
+ {/* Security checks */}
+
+ {`import {
+ WalletConnector,
+ TransactionManager,
+ NFTGallery,
+ DeFiInterface,
+} from '@/components/web3';
+
+export default function Page() {
+ return (
+
+
+ )}
+
+
+ {showCode && (
+
+
+
+ {`import { performSecurityChecks } from '@/utils/web3';
+
+const result = performSecurityChecks(
+ toAddress,
+ value,
+ userAddress,
+ chainId
+);
+
+if (!result.isSecure) {
+ console.error('Warnings:', result.warnings);
+ console.error('Errors:', result.errors);
+} else {
+ console.log('Transaction is safe to proceed');
+}`}
+
+ )}
+
+
+
+ 📖 For complete documentation, see{' '}
+ WEB3_INTEGRATION_GUIDE.md
+
+
+ )}
+ + Connect Your Wallet +
++ Connect a wallet to explore the Web3 integration features including transaction + management, NFT gallery, and DeFi protocols. +
+
+
+