🛠️Advanced Usage

For developers needing more control over the wallet integration including theme customization and custom authentication flows.

Theme Customization

Use the ThemeProvider to customize the appearance of UI components:

import { ThemeProvider } from '@avalabs/avacloud-waas-react';

function App() {
  return (
    <ThemeProvider darkMode={true}>
      <YourApp />
    </ThemeProvider>
  );
}

Custom Authentication Flow

You can implement a custom authentication flow using the lower-level hooks:

import { usePostMessage } from '@avalabs/avacloud-waas-react';

function CustomAuth() {
  const { sendMessage, lastMessage } = usePostMessage();

  const handleCustomLogin = () => {
    sendMessage({
      type: 'login',
      payload: {
        // Custom payload
      }
    });
  };

  // Handle response in useEffect
  useEffect(() => {
    if (lastMessage?.type === 'login_success') {
      // Handle successful login
    }
  }, [lastMessage]);

  return (
    <button onClick={handleCustomLogin}>
      Custom Login
    </button>
  );
}