import { Transaction } from './Transaction'
import { TransactionWithType } from './TransactionWithType'

const getExplorerUrl = (params: {
  urlTemplate: string
  resourceId: string
}): string => {
  const { urlTemplate, resourceId } = params

  if (urlTemplate.includes('{resourceId}')) {
    return urlTemplate.replace('{resourceId}', resourceId)
  }

  return `${urlTemplate}/${resourceId}`
}

type Props = {
  transactions: { type?: string; hash: string }[]
  networkExplorerTxUrl?: string
}

export const Transactions = ({ transactions, networkExplorerTxUrl }: Props) => (
  <>
    {transactions.map(({ hash, type }) => {
      const txUrl = networkExplorerTxUrl
        ? getExplorerUrl({
            urlTemplate: networkExplorerTxUrl,
            resourceId: hash,
          })
        : ''

      return type ? (
        <TransactionWithType hash={hash} type={type} txUrl={txUrl} key={hash} />
      ) : (
        <Transaction hash={hash} txUrl={txUrl} key={hash} />
      )
    })}
  </>
)