import { useFetchDao } from '@daobox/use-aragon'

function Page() {
  const { data, isLoading, isError } = useFetchDao({
    // required
    daoAddressOrEns: 'box.dao.eth',
  })

  if (isLoading) return <div>Loading...</div>
  if (isError) return <div>Error!!!</div>

  return (
    <div className="flex flex-col">
      <pre style={{ whiteSpace: 'pre-wrap' }}>
        {JSON.stringify(data, null, 2)}
      </pre>
    </div>
  )
}

export default Page

{
  address: "0x1234567890123456789012345678901234567890",
  ensDomain: "test.dao.eth",
  metadata: {
    name: "test",
    description: "this is a description",
    avatar?: "https://wbsite.com/image.jpeg",
    links: [
      {
        name: "Website",
        url: "https://website..."
      },
      {
        name: "Discord",
        url: "https://discord.com/..."
      }
    ]
  },
  creationDate: <Date>,
  plugins: [
    {
      id: token-voting.plugin.dao.eth,
      instanceAddress: "0x12345..."
    }
  ]
}

{
  data: DaoDetails | null,
  error: Error | null,
  isSuccess: boolean,
  isError: boolean,
  isLoading: boolean,
  isRefetching: boolean,
  refetch: ({ throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>,
  remove: () => void
}