feat: add bank balance to accounts chart table

packages/webapp/src/containers/Accounts/components.tsx

@@ -116,3 +116,16 @@ export function BalanceCell({ cell }) {
     <span class="placeholder">—</span>
   );
 }
+
+/**
+ * Balance cell.
+ */
+export function BankBalanceCell({ cell }) {
+  const account = cell.row.original;
+
+  return account.amount !== null ? (
+    <span>{account.bank_balance_formatted}</span>
+  ) : (
+    <span class="placeholder">—</span>
+  );
+}

packages/webapp/src/containers/Accounts/utils.tsx

@@ -4,7 +4,7 @@ import intl from 'react-intl-universal';
 import { Intent, Tag } from '@blueprintjs/core';
 
 import { If, AppToaster } from '@/components';
-import { NormalCell, BalanceCell } from './components';
+import { NormalCell, BalanceCell, BankBalanceCell } from './components';
 import { transformTableStateToQuery, isBlank } from '@/utils';
 
 /**
@@ -94,6 +94,15 @@ export const useAccountsTableColumns = () => {
         width: 75,
         clickable: true,
       },
+      {
+        id: 'bank_balance',
+        Header: 'Bank Balance',
+        accessor: 'bank_balance_formatted',
+        Cell: BankBalanceCell,
+        width: 150,
+        clickable: true,
+        align: 'right',
+      },
       {
         id: 'balance',
         Header: intl.get('balance'),
@@ -119,5 +128,5 @@ export const transformAccountsStateToQuery = (tableState) => {
   return {
     ...transformTableStateToQuery(tableState),
     inactive_mode: tableState.inactiveMode,
-  }
+  };
-}
+};

packages/webapp/src/containers/Banking/Plaid/PlaidLanchLink.tsx

@@ -9,7 +9,7 @@ import {
   PlaidLinkOnEventMetadata,
   PlaidLinkStableEvent,
 } from 'react-plaid-link';
-import { logEvent } from './_utils';
+import { logEvent, logExit, logSuccess } from './_utils';
 import { usePlaidExchangeToken } from '@/hooks/query';
 import { useResetBankingPlaidToken } from '@/hooks/state/banking';
 

packages/webapp/src/containers/Banking/Plaid/_utils.ts

@@ -28,3 +28,19 @@ export const logSuccess = async ({
     link_session_id,
   });
 };
+
+export const logExit = async (
+  error: PlaidLinkError | null,
+  { institution, status, link_session_id, request_id }: PlaidLinkOnExitMetadata,
+) => {
+  logEvent(
+    'onExit',
+    {
+      institution,
+      status,
+      link_session_id,
+      request_id,
+    },
+    error,
+  );
+};

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx

@@ -71,6 +71,19 @@ function AccountBalanceItem() {
   );
 }
 
+function AccountBankBalanceItem() {
+  const { currentAccount } = useAccountTransactionsContext();
+
+  return (
+    <AccountBalanceItemWrap>
+      Balance in Bank Account
+      <AccountBalanceAmount>
+        {currentAccount.bank_balance_formatted}
+      </AccountBalanceAmount>
+    </AccountBalanceItemWrap>
+  );
+}
+
 function AccountTransactionsDetailsBarSkeleton() {
   return (
     <React.Fragment>
@@ -89,6 +102,7 @@ function AccountTransactionsDetailsContent() {
     <React.Fragment>
       <AccountSwitchItem />
       <AccountBalanceItem />
+      <AccountBankBalanceItem />
     </React.Fragment>
   );
 }

packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsPlaidLink.tsx

@@ -4,5 +4,8 @@ import { useGetBankingPlaidToken } from '@/hooks/state/banking';
 export function CashflowAccountsPlaidLink() {
   const plaidToken = useGetBankingPlaidToken();
 
+  if (!plaidToken) {
+    return null;
+  }
   return <LaunchLink token={plaidToken} />;
 }