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

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.

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

AnchorTransaction

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