<History />

トークンの送付履歴や交換履歴を表示するコンポーネントです。

コンポーネントの利用方法

送付履歴を表示する

import { formatUnits, isAddressEqual } from "viem"
import {
  History,
  TransferHistory,
  TransferHistoryItemCustom,
  TransferHistoryItemCustomComponentReact
} from '@prex0/uikit/history';

const TransferHistoryView = () => {
  return (
    <History transferHistoryEnabled>
      <TransferHistory>
        <TransferHistoryItemCustom>
          <TransferHistoryItemContent/>
        </TransferHistoryItemCustom>
      </TransferHistory>
    </History>
  )
}

function getFormattedDate(timestamp: number): string {
  return new Date(timestamp * 1000).toLocaleString()
}

export const TransferHistoryItemContent = ({
  className,
  item,
  me,
  token
}: TransferHistoryItemCustomComponentReact) => {
  if (item === undefined || me === undefined || token === undefined) {
    return null
  }

  if (isAddressEqual(item.sender, me)) {
    return (
      <div className={className}>
        <div className="flex justify-between">
          <div>Send to {item.recipientDisplayName}</div>
          <div>{formatUnits(BigInt(item.amount), token.decimals)} {token.symbol}</div>
        </div>
        <div className="flex justify-start">
          <div>
            <div className="text-xs text-zinc-500">
              {getFormattedDate(item.createdAt)}
            </div>
          </div>
        </div>
      </div>
    )
  } else if (isAddressEqual(item.recipient, me)) {
    return (
      <div className={className}>
        <div className="flex justify-between">
          <div>Receive from {item.senderDisplayName}</div>
          <div>{formatUnits(BigInt(item.amount), token.decimals)} {token.symbol}</div>
        </div>
        <div className="flex justify-start">
          <div>
            <div className="text-xs text-zinc-500">
              {getFormattedDate(item.createdAt)}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

リンク送付履歴を表示する

import { formatUnits } from "viem"
import {
  History,
  LinkTransferHistory,
  LinkTransferHistoryItemCustom,
  LinkTransferHistoryItemCustomComponentReact
} from '@prex0/uikit/history';

export const LinkTransferHistoryView = () => {
  return (
    <History linkTransferHistoryEnabled >
      <LinkTransferHistory>
        <LinkTransferHistoryItemCustom>
          <LinkTransferHistoryItem />
        </LinkTransferHistoryItemCustom>
      </LinkTransferHistory>
    </History>
  )
}

function getFormattedDate(timestamp: number): string {
  return new Date(timestamp * 1000).toLocaleString()
}

const LinkTransferHistoryItem = (props: LinkTransferHistoryItemCustomComponentReact) =>  {
  const { item, token } = props
  
  if (item === undefined || token === undefined) {
    return null;
  }

  // 送付中の受け取りリンクを作成する
  const recipientLink =
    item.secret && item.messageId
      ? `${location.origin}/wallet/pending?id=${encodeURIComponent(
          item.messageId
        )}&s=${encodeURIComponent(item.secret)}`
      : undefined
  
  if (item.recipient && item.recipientDisplayName) {
    return (
      <div>
        <div className="flex justify-between">
          <div>Sent to {item.recipientDisplayName}</div>
          <div>{formatUnits(BigInt(item.amount), token.decimals)} {token.symbol}</div>
        </div>
        <div className="flex justify-start">
          <div>
            <div className="text-xs text-zinc-500">
              {getFormattedDate(item.createdAt)}
            </div>
          </div>
        </div>
      </div>
    )
  } else {
    return (
      <div>
        <div className="flex justify-between">
          <div>
            {recipientLink ? (
              <a
                href={recipientLink}
                className="text-blue-700 underline"
              >
                Sending...
              </a>
            ) : (
              'Sending...'
            )}
          </div>
          <div>{formatUnits(BigInt(item.amount), token.decimals)} {token.symbol}</div>
        </div>
        <div className="flex justify-start">
          <div>
            <div className="text-xs text-zinc-500">
              {getFormattedDate(item.createdAt)}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

スワップ履歴を表示する

import { formatUnits } from "viem"
import {
  History,
  SwapHistory,
  SwapHistoryItemCustom,
  SwapHistoryItemCustomComponentReact
} from '@prex0/uikit/history';

export const SwapHistoryView = () => {
  return (
    <History swapHistoryEnabled>
      <SwapHistory>
        <SwapHistoryItemCustom>
          <SwapHistoryItem />
        </SwapHistoryItemCustom>
      </SwapHistory>
    </History>
  )
}

function getFormattedDate(timestamp: number): string {
  return new Date(timestamp * 1000).toLocaleString()
}

const SwapHistoryItem = ({
  className,
  item,
  inputToken,
  outputToken
}: SwapHistoryItemCustomComponentReact) => {
  if(item === undefined || inputToken === undefined || outputToken === undefined) {
    return null;
  }

  return (
    <div className={className}>
      <div className="flex justify-between">
        <div className="flex items-center gap-2">
          <div>{inputToken.symbol}</div>
          <div>-&gt;</div>
          <div>{outputToken.symbol}</div>
        </div>
        <div>{formatUnits(roundBigInt(BigInt(item.amount), inputToken.precision || 0, true), inputToken.decimals)} {inputToken.symbol}</div>
      </div>
      <div className="flex justify-start">
        <div>
          <div className="text-xs text-zinc-500">
            {getFormattedDate(item.createdAt)}
          </div>
        </div>
      </div>
    </div>
  )
}

function roundBigInt(amount: bigint, precision: number, isRoundUp: boolean): bigint {
  const factor = BigInt(10) ** BigInt(precision);
  const remainder = amount % factor;
  const base = amount - remainder;

  if (isRoundUp && remainder > 0n) {
    return base + factor;
  } else {
    return base;
  }
}