> ## Documentation Index
> Fetch the complete documentation index at: https://docs.startale.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect a wallet

> Open the Startale App popup, request accounts, and react to the connection state.

Connecting a user opens a popup to `app.startale.com`. The user signs in with Google, LINE, or Apple, or links an existing wallet (MetaMask, Rabby, or WalletConnect), and approves the connection. After approval, your app receives the address of their smart account.

## With wagmi

```tsx theme={null}
import { useAccount, useConnect, useDisconnect } from 'wagmi'

export function ConnectButton() {
  const { address, status } = useAccount()
  const { connect, connectors } = useConnect()
  const { disconnect } = useDisconnect()
  const startale = connectors[0]

  if (status === 'connected') {
    return (
      <button onClick={() => disconnect()}>
        Disconnect {address}
      </button>
    )
  }

  return (
    <button onClick={() => connect({ connector: startale })}>
      Connect Startale
    </button>
  )
}
```

## With the raw provider

```ts theme={null}
const provider = sdk.getProvider()
const [address] = await provider.request({ method: 'eth_requestAccounts' })
```

The first call to `eth_requestAccounts` opens the popup. Subsequent calls return the cached address without re-prompting.

## Reading connection state

```ts theme={null}
const accounts = await provider.request({ method: 'eth_accounts' })
```

`eth_accounts` returns an array. It is empty when disconnected and contains a single element, the smart-account address, when connected.

## Listening to connection events

```ts theme={null}
provider.on('connect', ({ chainId }) => {
  // Connected; chainId is hex
})

provider.on('disconnect', () => {
  // User or app called disconnect
})

provider.on('accountsChanged', (accounts: string[]) => {
  // Switched user or fully disconnected (accounts is [])
})

provider.on('chainChanged', (chainId: string) => {
  // Active chain switched
})
```

See [Events](/app-sdk/events) for the complete list.

## Disconnecting

```ts theme={null}
await provider.disconnect()
```

In wagmi, call `disconnect()` from `useDisconnect()`. Both clear local connection state. The user's Startale account is unchanged.

## Popup blockers

The popup is opened in a direct response to a user gesture (a button click). Triggering connection from outside a click handler, for example, on page load, will be blocked by most browsers. Always tie connection to a user-initiated action.