Skip to main content

Account

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

AnchorBasic 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

AnchorWith 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

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