# @tokenizerwa/web3auth-algorand

Algorand + Web3Auth hook and provider that turns a Google login into an Algorand signer. Ships the Web3Auth wiring, Algorand account derivation, and signer utilities so you can drop it into any React app.

## What’s inside
- `AlgorandWeb3AuthProvider` – wraps your app and bootstraps Web3Auth + Algorand account derivation.
- `useWeb3Auth()` – access connection state, Google profile info, and the derived Algorand account.
- `createWeb3AuthSigner(...)` – get an AlgoKit-compatible `TransactionSigner`.
- Helper utilities for balance/amount formatting and account inspection.

## Install
```bash
npm install @tokenizerwa/web3auth-algorand
# peer deps you likely already have
npm install react @web3auth/modal
```

## Quick start
```tsx
import { AlgorandWeb3AuthProvider, useWeb3Auth, createWeb3AuthSigner } from '@tokenizerwa/web3auth-algorand'

const WEB3AUTH_CLIENT_ID = import.meta.env.VITE_WEB3AUTH_CLIENT_ID

function ConnectButton() {
  const { isConnected, algorandAccount, login, logout, isLoading } = useWeb3Auth()

  if (isConnected && algorandAccount) {
    const signer = createWeb3AuthSigner(algorandAccount)
    // use signer with AlgoKit / algosdk
  }

  return (
    <button onClick={isConnected ? logout : login} disabled={isLoading}>
      {isConnected ? 'Disconnect' : 'Sign in with Google'}
    </button>
  )
}

export function App() {
  return (
    <AlgorandWeb3AuthProvider
      config={{
        clientId: WEB3AUTH_CLIENT_ID,
        // optional overrides:
        // web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
        // chainConfig: { rpcTarget: 'https://mainnet-api.algonode.cloud', displayName: 'Algorand MainNet' },
      }}
    >
      <ConnectButton />
    </AlgorandWeb3AuthProvider>
  )
}
```

## UI add-on (optional)
If you want a plug-and-play Google button and dropdown, install the UI companion:
```bash
npm install @tokenizerwa/web3auth-algorand-ui
```
```tsx
import { AlgorandWeb3AuthProvider } from '@tokenizerwa/web3auth-algorand'
import { Web3AuthGoogleButton } from '@tokenizerwa/web3auth-algorand-ui'

<AlgorandWeb3AuthProvider config={{ clientId: WEB3AUTH_CLIENT_ID }}>
  <Web3AuthGoogleButton />
</AlgorandWeb3AuthProvider>
```

## Notes
- You need a Web3Auth client id from the Web3Auth dashboard.
- Default network is Sapphire Devnet + Algorand TestNet RPC; override via `config.chainConfig` and `config.web3AuthNetwork`.
- The provider must wrap any component that calls `useWeb3Auth`.