# basedauth

A React/Next.js authentication and wallet connection kit for Ethereum (wagmi) and Solana, with hooks and context providers for seamless integration.

## Features

- Multi-chain wallet connection (Ethereum, Solana)
- Modal and context providers for easy integration
- Hooks for account, balance, contract interaction, and more
- Built-in support for wagmi, Solana wallet adapter, and NextAuth

## Installation

```bash
yarn add based-auth
```

> **Note:** You must also install the required peer dependencies in your app:
>
> - `react`, `react-dom`
> - `@tanstack/react-query`
> - `next-auth`
> - `sonner`
> - `wagmi`, `@wagmi/core`, `@wagmi/connectors`
> - `@solana/wallet-adapter-react`, `@solana/wallet-adapter-wallets`, `@solana/web3.js`
> - `based-shared`, `based-assets` (from your monorepo or npm if published)

## Usage

### 1. Wrap your app with the provider

```tsx
// _app.tsx or main entry
import { SimpleKitProvider } from "based-auth";
import { supportedChains } from "based-shared/chains";

export default function App({ Component, pageProps }) {
  return (
    <SimpleKitProvider
      chains={supportedChains}
      host={process.env.NEXT_PUBLIC_APP_URL}
      name="Your App Name"
      description="Your app description"
      icon="/images/your-app-icon.png" // must be a public URL
      projectId={process.env.NEXT_PUBLIC_PROJECT_ID}
    >
      <Component {...pageProps} />
    </SimpleKitProvider>
  );
}
```

**Required props for `SimpleKitProvider`:**

- `chains`: Array of supported chains (see `based-shared/chains`)
- `host`: Your app's public URL (e.g. `https://your-app.com`)
- `name`: App name (for wallet metadata)
- `description`: App description
- `icon`: App icon URL (for wallet metadata)
- `projectId`: WalletConnect project ID

### 2. Use hooks in your components

```tsx
import {
  useAccount,
  useAccountBalance,
  useTokenBalance,
  useSimpleKit,
  useDisconnectAccount,
} from "based-auth";

function WalletInfo() {
  const { address, network } = useAccount();
  const { balance, formatted } = useAccountBalance();
  const { disconnectAccount } = useDisconnectAccount();
  const { openModal } = useSimpleKit();

  return (
    <div>
      <div>Address: {address}</div>
      <div>Network: {network}</div>
      <div>Balance: {formatted}</div>
      <button onClick={openModal}>Connect Wallet</button>
      <button onClick={() => disconnectAccount()}>Disconnect</button>
    </div>
  );
}
```

### 3. Modal and UI

The modal for wallet connection is automatically provided by the `SimpleKitProvider`. Use the `useSimpleKit` hook to open/close the modal.

### 4. Contract interaction

```tsx
import { useWriteContractAsync } from "based-auth";

function MintButton() {
  const { writeContractAsync } = useWriteContractAsync();

  const handleMint = async () => {
    await writeContractAsync({
      address: "0xYourContract",
      abi: [...],
      functionName: "mint",
      args: [/* ... */],
      value: 0n, // always use bigint for value
    });
  };

  return <button onClick={handleMint}>Mint</button>;
}
```

> **Note:** `useReadContract` and `useWriteContract` are exported but currently not implemented. Use `useWriteContractAsync` for contract writes.

## Environment Variables

Set the following in your `.env`:

```
NEXT_PUBLIC_PROJECT_ID=your_walletconnect_project_id
NEXT_PUBLIC_APP_URL=https://your-app-url.com
AUTH_TRUST_HOST=https://your-app-url.com
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...
AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...
AUTH_TWITTER_ID=...
AUTH_TWITTER_SECRET=...
AUTH_SECRET=...
```

## API

### Providers

- `SimpleKitProvider` – Main context provider, wraps your app. **All props are required.**

### Hooks

- `useSimpleKit` – Modal controls and context
- `useAccount` – Current user/account info
- `useChainInfo` – Current chain info (logos, symbols, explorers)
- `useAccountBalance` – Native token balance
- `useTokenBalance` – ERC20/SPL token balance
- `useTokenBalanceAsync` – Async token balance fetch
- `useDisconnectAccount` – Disconnect wallet
- `useWriteContractAsync` – Write to contract (EVM/Solana/social)
- `useReadContract` – (stub, not implemented)
- `useWriteContract` – (stub, not implemented)

#### Advanced/Utility Hooks (not exported by default)

- `useConnectAccount`, `useSwitchChain`, `useSignAccount`, `useSwitchAccount`, `useBalanceAsync`, `useTransferAsync` (see source for details)

## Example

```tsx
import { useSimpleKit } from "based-auth";

function ConnectButton() {
  const { isOpen, openModal, closeModal } = useSimpleKit();
  return (
    <button onClick={openModal}>
      {isOpen ? "Modal Open" : "Connect Wallet"}
    </button>
  );
}
```

---

**For more advanced usage, see the source code and hooks in `src/hooks.tsx`.**
