<TxHistory />

[talentlessguy]

Blocked by #6

Description

The <TxHistory /> is a component that will use a useTxHistory hook + <Tx /> component to list current user's trasnaction history by searching logs.

ref: https://docs.ethers.io/v4/api-providers.html?highlight=gethistory#contract-state

UI

Example

How it could be used:

const Profile = () => (
  <div>
    <TxHistory classNames={{ container: '...' }} txComponent={Tx} />
  </div>
)

Allowing a user to pass a custom txComponent makes sense IMO bc someone might be not satisfied with the default one.

Implementation

How it could look like in the code:

import { Tx } from '@rainbowkit/badge'
import { useTxHistory } from '@rainbowkit/utils'

const TxHistory = ({ txComponent: Tx, ...props }) => {
  const { data: txes } = useTxHistory()

  return  <div>{(txes) => txes.map(tx => <Tx {...tx} />)}</div>
}