Skip to main content

Account List

AccountList represents a list of accounts to be displayed in your UI.

List of Accounts

AnchorProps

accountsrequired ArrayAccount[]
Array of account objects passed down to the component to be rendered.
hideIcons boolean
Set to "true" to hide icons on all accounts.
default value: false
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 { AccountList } from '@quiltt/components'
const Component = () => {
const GET_ACCOUNTS = gql' \
query { \
accounts { \
name \
type \
lastFourDigits \
id \
metadata \
state \
} \
} \
'
const { loading, error, data } = useQuery(GET_ACCOUNTS)
if (error) throw error
if (loading || !data.accounts.length) {
return <p>Loading...</p>
}
const { accounts } = data
return <AccountList account={account} />
}
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