Skip to main content
Hook for managing the connection to the sync agent

​
Imports

import { useAgentConnection } from '@towns-protocol/react-sdk'

​
Examples

You can connect the Sync Agent to Towns Protocol using a Bearer Token or using a Signer.

​
Bearer Token

import { useAgentConnection } from '@towns-protocol/react-sdk'
import { townsEnv } from '@towns-protocol/sdk'
import { useState } from 'react'

const townsConfig = townsEnv().makeTownsConfig('gamma')

const Login = () => {
  const { connectUsingBearerToken, isAgentConnecting, isAgentConnected } = useAgentConnection()
  const [bearerToken, setBearerToken] = useState('')

  return (
    <>
      <input value={bearerToken} onChange={(e) => setBearerToken(e.target.value)} />
      <button onClick={() => connectUsingBearerToken(bearerToken, { townsConfig })}>
        Login
      </button>
      {isAgentConnecting && <span>Connecting... ⏳</span>}
      {isAgentConnected && <span>Connected ✅</span>}
    </>
  )
}

​
Signer

If you’re using Wagmi and Viem, you can use the useEthersSigner hook to get an ethers.js v5 Signer from a Viem Wallet Client. 
import { useAgentConnection } from '@towns-protocol/react-sdk'
import { townsEnv } from '@towns-protocol/sdk'
import { useEthersSigner } from './utils/viem-to-ethers'

const townsConfig = townsEnv().makeTownsConfig('gamma')

const Login = () => {
  const { connect, isAgentConnecting, isAgentConnected } = useAgentConnection()
  const signer = useEthersSigner()

  return (
    <>
      <button onClick={async () => {
        if (!signer) {
          return
        }
        connect(signer, { townsConfig })
      }}>
        Login
      </button>
      {isAgentConnecting && <span>Connecting... ⏳</span>}
      {isAgentConnected && <span>Connected ✅</span>}
    </>
  )
}

​
Definition

function useAgentConnection(): {
    connect: (signer: ethers.Signer, config: AgentConnectConfig) => Promise<SyncAgent | undefined>;
    connectUsingBearerToken: (bearerToken: string, config: AgentConnectConfig) => Promise<SyncAgent | undefined>;
    disconnect: () => void | undefined;
    isAgentConnecting: boolean;
    isAgentConnected: boolean;
    env: string | undefined;
}
Source: useAgentConnection

​
Return Type

The connection state and methods (connect, connectUsingBearerToken, disconnect) 
{
    connect: (signer: ethers.Signer, config: AgentConnectConfig) => Promise<SyncAgent | undefined>;
    connectUsingBearerToken: (bearerToken: string, config: AgentConnectConfig) => Promise<SyncAgent | undefined>;
    disconnect: () => void | undefined;
    isAgentConnecting: boolean;
    isAgentConnected: boolean;
    env: string | undefined;
}
⌘I