The /components/BalancesBar folder contains two component files: BalanceCard.js and BalancesBar.js. The BalancesBar component persists across the TRANSACTIONS and CHARTS tabs and is located directly under the tab control. It contains four of the BalanceCard components, one for each balance type: initial raw, current raw, initial cooked, and current cooked. The first and third cards representing the initial balances contain inputs so the balance can be changed. The second and fourth cards representing the current balances are calculated dynamically in the Wasm module (using the getFinalBalanceForType() function). The following snippet, taken from the BalancesBar component, demonstrates Vue's binding syntax:

<balance-card
  title="Initial Raw Balance"
  :value="balances.initialRaw"
  :onChange="amount => onBalanceChange(amount, 'initialRaw')">
</balance-card>

The : preceding the value and onChange attributes indicate that these properties are bound to the Vue component. If the value of balances.initialRaw changes, the value displayed in the BalanceCard will update as well. The onBalanceChange() function for this card updates the value of balances.initialRaw in global state.