Skip to main content

Accounts


AnchorAccount

Account represents a single account to be displayed in your UI.

Single Account

AnchorProps

accountrequired ObjectAccount
Account object passed to component to be rendered.
hideIcon boolean
Set to "true" to hide icons on the component.
default value: false
as React.ReactNode | HTMLElement | string
HTML Element to use as wrapper for the component.
default value: div
className string
children React.ReactNode

AnchorExamples

Basic usage

import * as React from 'react'
import { gql, useQuery } from '@apollo/client'
import { Account } 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 account = data.accounts[0]
return <Account account={account} />
}
export default Component

With children props

We can also pass down children props to the Account component in order to render any arbitrary element under the account. In this example, we’ll be rendering the transactions for a given account

Single Account with Children Props
import * as React from 'react'
import { gql, useQuery } from '@apollo/client'
import { Account, TransactionList } from '@quiltt/components'
const Component = () => {
const GET_ACCOUNTS = gql' \
query { \
accounts { \
name \
type \
lastFourDigits \
id \
metadata \
state \
transactions(limit: 5) { \
amount \
description \
date \
} \
} \
} \
'
const { loading, error, data } = useQuery(GET_ACCOUNTS)
if (error) throw error
if (loading || !data.accounts.length) {
return <p>Loading...</p>
}
const account = data.accounts[0]
return (
<Account account={account}>
<div className="p-4">
<TransactionList transactions={account.transactions} />
</div>
</Account>
)
}
export default Component

AnchorAccountList

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

Basic 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
amount float
date string
description string
entryType enum
options: "CREDIT", "DEBIT"
status enum
options: "PENDING", "POSTED", "PROJECTED"
metadata objectjson