@volr/react-ui 0.1.100 → 0.1.101

package/README.md

@@ -185,13 +185,13 @@ import { useVolrModal, useVolr } from '@volr/react-ui';
 
 function AuthButton() {
   const { open } = useVolrModal();
-  const { evmAddress, isLoggedIn, logout } = useVolr();
+  const { evm, isLoggedIn, logout } = useVolr();
 
   return (
     <div>
       {isLoggedIn ? (
         <>
-          <p>Wallet: {evmAddress}</p>
+          <p>Wallet: {evm.address}</p>
           <button onClick={() => open({ mode: 'account' })}>My Account</button>
           <button onClick={logout}>Logout</button>
         </>
@@ -315,7 +315,8 @@ Hook for wallet and user state.
 import { useVolr } from '@volr/react-ui';
 
 const {
-  evmAddress, // `0x${string}` | undefined
+  evm,        // EvmNamespace (see below)
+  evmAddress, // `0x${string}` | undefined (deprecated, use evm.address)
   email,      // string | undefined
   isLoggedIn, // boolean
   signerType, // 'passkey' | 'external_wallet' | 'mpc' | undefined
@@ -327,27 +328,61 @@ const {
 
 ---
 
+## Sign Request Confirmation
+
+When using `@volr/react-ui`, signing operations (`signMessage`, `signTypedData`) automatically show a confirmation modal before signing. This protects users from signing malicious messages without their knowledge.
+
+```tsx
+import { useVolr } from '@volr/react-ui';
+
+function SignButton() {
+  const { evm } = useVolr();
+
+  const handleSign = async () => {
+    // Modal automatically appears showing the message content
+    // User must click "Sign" to proceed
+    const signature = await evm.signMessage('Hello, World!');
+    console.log('Signed:', signature);
+  };
+
+  return <button onClick={handleSign}>Sign Message</button>;
+}
+```
+
+The modal displays:
+- **For `signMessage`**: The original message content (string or hex)
+- **For `signTypedData`**: Domain info and message fields in a readable format
+
+---
+
 ## Advanced: Web3 Transactions
 
 For advanced use cases beyond payments, you can send arbitrary transactions.
 
-### EvmClient
+### EvmNamespace & EvmChainClient
 
 ```tsx
 import { useVolr } from '@volr/react-ui';
 
 function SendToken() {
-  const { evm, evmAddress } = useVolr();
+  const { evm } = useVolr();
 
   const handleSend = async () => {
-    const client = evm(8453); // Base chain
+    // Chain-agnostic: Wallet address
+    const address = evm.address;
+
+    // Chain-agnostic: Sign a message (shows confirmation modal)
+    const signature = await evm.signMessage('Hello');
+
+    // Chain-specific: Get client for Base
+    const client = evm.client(8453);
 
     // Read contract
     const balance = await client.readContract({
       address: tokenAddress,
       abi: erc20Abi,
       functionName: 'balanceOf',
-      args: [evmAddress],
+      args: [address],
     });
 
     // Send transaction