Example index.ts with table format for Unchain readme

index.tsx

import type { NextPage } from "next";
import { MetaHeader } from "~~/components/MetaHeader";

import { gql } from "@apollo/client";
import { useQuery } from "@apollo/client";
import { Address } from "~~/components/scaffold-eth";

export const GET_MESSAGES = gql`
{
  sendMessages(first: 5) {
    id
    _from
    _to
    message
  }
}
`;

const Home: NextPage = () => {

  const { loading, error, data: messagesData } = useQuery(GET_MESSAGES);

  const messages = messagesData?.sendMessages || []; 

  return (
    <>
      <MetaHeader />
      <h1>Messages</h1>
        <table className="min-w-[70%]">
          <thead>
            <tr>
              <th>From</th>
              <th>To</th>
              <th>Message</th>
            </tr>
          </thead>
          <tbody>
            {messages.map((message) => (
              <tr key={message.id}>
                <td><Address address={message._from}/></td>
                <td><Address address={message._to}/></td>
                <td>{message.message}</td>
              </tr>
            ))}
          </tbody>
        </table>
    </>
  );
};

export default Home;