@volr/react-ui 0.1.49 → 0.1.53

package/README.md

@@ -62,25 +62,46 @@ function LoginButton() {
 }
 ```
 
-## Styling & Tailwind
-
-- **No Tailwind dependency for the host app**: `@volr/react-ui` ships with its own compiled CSS.  
-  You do **not** need to install Tailwind or import any extra CSS files in your project.
-- **Automatic style injection**: when `VolrUIProvider` is mounted, the SDK injects a single  
-  `<style id="volr-sdk-styles">…</style>` tag into `document.head` using the embedded `VOLR_SDK_CSS`.
-- **Scoped and namespaced styles**:
-  - All selectors are scoped under a root container marked with `data-volr-root="true"`.
-  - All utility classes are prefixed with `volr:` (e.g. `volr:px-4`, `volr:border-slate-200`).
-  - The compiled CSS is post-processed so that it only affects elements inside `[data-volr-root]`
-    and does not leak into the host UI.
-- **Safe with any host styling system**:
-  - Internally we use Tailwind v4, but the shipped CSS is fully self-contained.
-  - The SDK works the same whether the host uses Tailwind v2/v3/v4, another CSS framework,
-    or no global CSS system at all.
-
-If your app applies extremely aggressive global resets (for example `all: unset` on `button`/`input`
-at the top level), those rules can still affect the Volr UI. In such cases, consider scoping those
-resets so they do not apply under the `[data-volr-root]` subtree.
+### 3. Use Wallet
+
+After login, use `useVolr` to interact with the blockchain.
+
+```tsx
+import { useVolr } from '@volr/react-ui';
+
+function Example() {
+  const { evm, address, isLoggedIn, logout } = useVolr();
+
+  if (!isLoggedIn) {
+    return <LoginButton />;
+  }
+
+  const handleTransfer = async () => {
+    await evm(8453).sendBatch([
+      {
+        target: tokenAddress,
+        abi: erc20Abi,
+        functionName: 'transfer',
+        args: [recipient, amount],
+      },
+    ]);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-sm text-gray-600">Wallet: {address}</p>
+      <div className="flex gap-2">
+        <button onClick={handleTransfer} className="bg-blue-500 text-white rounded">
+          Transfer
+        </button>
+        <button onClick={logout} className="bg-gray-200 rounded">
+          Logout
+        </button>
+      </div>
+    </div>
+  );
+}
+```
 
 ## Configuration
 
@@ -107,6 +128,69 @@ resets so they do not apply under the `[data-volr-root]` subtree.
 | `onClose` | `() => void` | **Required** | Close callback |
 | `onError` | `(error: Error) => void` | `undefined` | Error callback |
 
+## API Reference
+
+### useVolr
+
+```tsx
+import { useVolr } from '@volr/react-ui';
+
+const {
+  evm,        // (chainId: number) => EvmClient
+  address,    // `0x${string}` | undefined
+  email,      // string | undefined
+  isLoggedIn, // boolean
+  signerType, // 'passkey' | 'external_wallet' | 'mpc' | undefined
+  logout,     // () => Promise<void>
+  isLoading,  // boolean
+  error,      // Error | null
+} = useVolr();
+```
+
+### EvmClient
+
+Returned by `evm(chainId)`.
+
+```tsx
+const client = evm(8453);
+
+// Read contract
+const balance = await client.readContract({
+  address: tokenAddress,
+  abi: erc20Abi,
+  functionName: 'balanceOf',
+  args: [userAddress],
+});
+
+// Send single transaction
+const result = await client.sendTransaction({
+  to: '0x...',
+  data: '0x...',
+  value: 0n,
+});
+
+// Send batch (with ABI)
+const result = await client.sendBatch([
+  {
+    target: tokenAddress,
+    abi: erc20Abi,
+    functionName: 'transfer',
+    args: [recipient, amount],
+    gasLimit: 100000n,
+  },
+]);
+
+// Send batch (raw calls)
+const result = await client.sendBatch([
+  {
+    target: '0x...',
+    data: '0x...',
+    value: 0n,
+    gasLimit: 100000n,
+  },
+]);
+```
+
 ## Features
 
 - **Email Login**: Email verification with 6-digit code
@@ -197,15 +281,9 @@ function App() {
   const [error, setError] = useState<string | null>(null);
 
   return (
-    <>
+    <div className="flex flex-col gap-4">
       {error && (
-        <div style={{ 
-          padding: '12px', 
-          backgroundColor: '#fef2f2', 
-          color: '#991b1b',
-          borderRadius: '8px',
-          marginBottom: '16px'
-        }}>
+        <div className="bg-red-50 text-red-800 rounded-lg">
           {error}
         </div>
       )}
@@ -223,75 +301,11 @@ function App() {
           setTimeout(() => setError(null), 3000);
         }}
       />
-    </>
+    </div>
   );
 }
 ```
 
-## Backend Requirements
-
-### Environment Variables
-
-```bash
-# Google OAuth
-GOOGLE_CLIENT_ID=your_google_client_id
-GOOGLE_CLIENT_SECRET=your_google_client_secret
-GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback
-
-# Twitter OAuth
-TWITTER_CLIENT_ID=your_twitter_client_id
-TWITTER_CLIENT_SECRET=your_twitter_client_secret
-TWITTER_REDIRECT_URI=http://localhost:3000/auth/twitter/callback
-
-# Apple OAuth
-APPLE_CLIENT_ID=your_apple_client_id
-APPLE_REDIRECT_URI=http://localhost:3000/auth/apple/callback
-
-# Frontend URL (OAuth callback redirect)
-FRONTEND_URL=http://localhost:5173
-
-# API Base URL
-API_BASE_URL=http://localhost:3000
-```
-
-### Required Endpoints
-
-**Email Login**
-- `POST /auth/email/send` - Send verification code
-- `POST /auth/email/verify` - Verify code and login
-
-**Social Login**
-- `GET /auth/google` - Start Google OAuth
-- `GET /auth/google/callback` - Google OAuth callback
-- `GET /auth/twitter` - Start Twitter OAuth
-- `GET /auth/twitter/callback` - Twitter OAuth callback
-- `GET /auth/apple` - Start Apple OAuth
-- `POST /auth/apple/callback` - Apple OAuth callback
-
-**SIWE**
-- `POST /auth/siwe/nonce` - Generate nonce
-- `POST /auth/siwe/verify` - Verify SIWE signature
-
-**Passkey**
-- `POST /blob/presign` - Generate S3 upload URL
-- `POST /wallet/provider/register` - Register provider
-
-## Troubleshooting
-
-### OAuth Redirect Failure
-- Verify OAuth Client ID and Secret
-- Check Redirect URI matches OAuth app settings
-- Verify CORS configuration
-
-### SIWE Signature Failure
-- Ensure MetaMask or wallet is installed
-- Check wallet is connected to correct network
-
-### Passkey Creation Failure
-- HTTPS or localhost required (HTTP not supported)
-- Verify browser supports WebAuthn
-- Check biometric authentication is enabled on device
-
 ## License
 
-MIT
+MIT

package/dist/index.cjs

@@ -294,7 +294,7 @@ var VolrModalProvider = ({
 }) => {
   const [isOpen, setIsOpen] = React5.useState(false);
   const [mode, setMode] = React5.useState("auth");
-  const { user } = react.useVolr();
+  const { user } = react.useVolrContext();
   const open = React5.useCallback(() => {
     setMode(user ? "deposit" : "auth");
     setIsOpen(true);
@@ -922,7 +922,7 @@ function PasskeyEnrollView({
   isOpen = true,
   wrapInModal = true
 }) {
-  const { user, logout, setUser } = react.useVolr();
+  const { user, logout, setUser } = react.useVolrContext();
   const { client } = react.useInternalAuth();
   const { t } = useI18n();
   const { accentColor } = useVolrUI();
@@ -2364,7 +2364,7 @@ function LoginSuccessScreen({
   ] });
 }
 function SigninModal({ isOpen, onClose, onError }) {
-  const { logout, user } = react.useVolr();
+  const { logout, user } = react.useVolrContext();
   const { appName, branding } = useVolrUI();
   const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
   const [currentScreen, setCurrentScreen] = React5.useState("method-select");
@@ -2974,7 +2974,7 @@ var DepositCompletedToast = ({
 };
 function DepositQRView(props) {
   const { t } = useI18n();
-  const { config } = react.useVolr();
+  const { config } = react.useVolrContext();
   const { client } = react.useInternalAuth();
   const [chainName, setChainName] = React5.useState(null);
   const [showOtherTokenModal, setShowOtherTokenModal] = React5.useState(false);
@@ -3107,7 +3107,7 @@ var DepositModal = ({
   open,
   onOpenChange
 }) => {
-  const { config, user } = react.useVolr();
+  const { config, user } = react.useVolrContext();
   const supportedAssets = config.deposit?.supportedAssets ?? [];
   const hasAssets = supportedAssets.length > 0;
   const [selectedIdx, setSelectedIdx] = React5.useState(
@@ -3187,7 +3187,7 @@ function OnboardingFlow({
   keyStorageType,
   onComplete
 }) {
-  const { logout } = react.useVolr();
+  const { logout } = react.useVolrContext();
   const handleEnrollComplete = () => {
     onComplete();
   };
@@ -3394,7 +3394,7 @@ function OnboardingChecker({
   onShowOnboarding,
   onHideOnboarding
 }) {
-  const { user, provider, isLoading } = react.useVolr();
+  const { user, provider, isLoading } = react.useVolrContext();
   const { isOpen: isLoginModalOpen } = useVolrModal();
   React5.useEffect(() => {
     if (isLoading) {
@@ -3521,10 +3521,6 @@ Object.defineProperty(exports, "useVolrLogin", {
   enumerable: true,
   get: function () { return react.useVolrLogin; }
 });
-Object.defineProperty(exports, "useVolrWallet", {
-  enumerable: true,
-  get: function () { return react.useVolrWallet; }
-});
 exports.I18nContext = I18nContext;
 exports.I18nProvider = I18nProvider;
 exports.MpcConnectView = MpcConnectView;