useInvoices

useInvoices is a hook that fetches all invoices known to the connected yagna instance. It paginates data by default. Under the hood it uses SWR so you get all the benefits of caching and revalidation. It's also possible to configure that behavior by passing the swrConfig parameter. It returns an object with the following properties:

Name	Description
invoices	Array of Invoices (see below)
isLoading	Boolean indicating whether the invoices are being fetched.
error	Error object containing information about the error that occurred while fetching the invoices.
isValidating	Boolean indicating whether the invoices are being revalidated.
refetch	A function that can be used to manually trigger a refetch.

Invoice object type

Name	Type
invoiceId	String
issuerId	String
recipientId	String
payeeAddr	String
payerAddr	String
paymentPlatform	String
timestamp	String
agreementId	String
activityIds	Array of Strings
amount	String
paymentDueDate	String
status	One of `ISSUED` `RECEIVED` `ACCEPTED` `REJECTED` `FAILED` `SETTLED` `CANCELLED`

Parameters

This hook accepts a single configuration object with the following properties:

Name	Description
after (optional)	A string representing the timestamp to start fetching invoices from. If not provided, the hook will fetch invoices starting from the earliest invoice known to the connected yagna instance.
limit (optional)	The maximum number of invoices to fetch. Defaults to 10.
swrConfig (optional)	SWR configuration object

To achieve pagination, pass the timestamp of the last invoice in the after parameter of the next call.

Example

function MyComponent() {
  const { invoices, isLoading, error, refetch } = useInvoices()
  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>Error: {error.toString()}</div>
  }
  return (
    <div>
      <ul>
        {invoices.map((invoice) => (
          <li key={invoice.invoiceId}>
            {invoice.invoiceId} - {invoice.status}
          </li>
        ))}
      </ul>
      <button onClick={refetch}> Refresh </button>
    </div>
  )
}

With pagination:

function MyComponent() {
  const [after, setAfter] = useState()
  const { invoices, isLoading, error, refetch } = useInvoices({ after })
  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>Error: {error.toString()}</div>
  }
  return (
    <div>
      <ul>
        {invoices.map((invoice) => (
          <li key={invoice.invoiceId}>
            {invoice.invoiceId} - {invoice.status}
          </li>
        ))}
      </ul>
      <button onClick={() => setAfter(invoices[invoices.length - 1].timestamp)}>
        Next
      </button>
      <button onClick={refetch}> Refresh </button>
    </div>
  )
}