Skip to main content

Transaction List

TransactionList represents a list of transactions to be displayed in your UI.

List of Accounts

AnchorProps

transactionsrequired ArrayTransaction[]
Array of transaction objects passed down to the component to be rendered.
as React.ReactNode | HTMLElement | string
HTML Element to use as wrapper for the component.
default value: ul
className string

AnchorExamples

AnchorBasic usage

import * as React from 'react'
import { gql, useQuery } from '@apollo/client'
import { TransactionList } from '@quiltt/components'
const Component = () => {
const GET_TRANSACTIONS = gql' \
{ \
accounts { \
name \
transactions(limit: 10) { \
id \
amount \
date \
description \
entryType \
status \
} \
} \
} \
'
const { loading, error, data } = useQuery(GET_TRANSACTIONS)
if (error) throw error
if (loading || (!data.accounts.length && !data.accounts[0].transactions.length)) {
return <p>Loading...</p>
}
const { transactions } = data.accounts[0]
return <TransactionList transactions={transactions} />
}
export default Component

AnchorAPI Reference

AnchorAccount

idrequired string
namerequired string
typerequired enum
options: "CHECKING", "CREDIT", "INVESTMENT", "LOAN", "SAVINGS", "OTHER"
lastFourDigits string
Must be a 4-digit string
state enum
options: "CLOSED", "OPEN", "PAUSED"
balancerequired ObjectLedgerBalance
transactions ArrayTransaction[]
metadata objectjson

AnchorLedgerBalance

id string
available float
current float
limit float

AnchorTransaction

id string
account ObjectAccount
amount float
date string
description string
entryType enum
options: "CREDIT", "DEBIT"
status enum
options: "PENDING", "POSTED", "PROJECTED"
metadata objectjson