# Browser Integration

```tsx
// App.tsx or App.jsx
import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import { AzothSDK } from '@azothpay/sdk';

function App() {
  const [azoth, setAzoth] = useState(null);
  const [account, setAccount] = useState('');
  const [balance, setBalance] = useState('0');
  const [loading, setLoading] = useState(true);
  
  // Initialize SDK when the component mounts
  useEffect(() => {
    async function initializeAzoth() {
      if (window.ethereum) {
        try {
          // Request account access
          await window.ethereum.request({ method: 'eth_requestAccounts' });
          
          const provider = new ethers.BrowserProvider(window.ethereum);
          const signer = await provider.getSigner();
          const userAddress = await signer.getAddress();
          
          // Create Azoth SDK instance
          const azothInstance = AzothSDK.create(signer, 'polygon', 'USDT');
          
          // Get user balance
          const userBalance = await azothInstance.balanceOf();
          
          setAzoth(azothInstance);
          setAccount(userAddress);
          setBalance(userBalance.toString());
          setLoading(false);
        } catch (error) {
          console.error('Error initializing Azoth SDK:', error);
          setLoading(false);
        }
      } else {
        console.log('Please install MetaMask!');
        setLoading(false);
      }
    }
    
    initializeAzoth();
  }, []);
  
  // Function to handle deposits
  async function handleDeposit() {
    if (!azoth) return;
    
    try {
      const tx = await azoth.deposit(100); // Deposit 100 USDT
      await tx.wait();
      
      // Update balance
      const newBalance = await azoth.balanceOf();
      setBalance(newBalance.toString());
      
      alert('Deposit successful!');
    } catch (error) {
      console.error('Error depositing funds:', error);
      alert('Error depositing funds. See console for details.');
    }
  }
  
  return (
    <div className="App">
      <h1>Azoth SDK Demo</h1>
      
      {loading ? (
        <p>Loading...</p>
      ) : (
        <>
          <p>Connected account: {account}</p>
          <p>Your balance: {balance} USDT</p>
          
          <button onClick={handleDeposit}>
            Deposit 100 USDT
          </button>
        </>
      )}
    </div>
  );
}

export default App;
```

#### Key Points <a href="#key-points" id="key-points"></a>

1. **Check for MetaMask**: Check for `window.ethereum` before initialization
2. **Request account access**: Use `eth_requestAccounts` to get permission
3. **Create provider**: Use `BrowserProvider` to connect to MetaMask
4. **Error handling**: Wrap all operations in try/catch blocks
5. **Update UI**: Update state after successful transactions


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.azothpay.com/sdk/examples/browser-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.