Transactions
AnchorTransaction
Transaction
represents a single transaction to be displayed in your UI.
AnchorProps
- transactionrequired Object
Transaction
- 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
AnchorBasic 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.
AnchorProps
- transactionsrequired Array
Transaction[]
- 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
AnchorTransaction
- id string
- amount float
- date string
- description string
- entryType enum
- "CREDIT" | "DEBIT"
- status enum
- "PENDING" | "POSTED" | "PROJECTED"
- metadata object
json