Skip to main content

Transactions


AnchorTransaction

Transaction represents a single transaction to be displayed in your UI.

List of Accounts

AnchorProps

transactionrequired ObjectTransaction
Transaction object passed to component to be rendered.
as React.ReactNode | HTMLElement | string
HTML Element to use as wrapper for the component.
default value: div
className string

AnchorExamples

Basic usage

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

AnchorTransactionList

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

Basic 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

AnchorTransaction

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