fix: use AccountAddress and AccountBalance component

apps/mobile/src/features/approver/components/approver-account-card.tsx

@@ -1,5 +1,8 @@
 import { AvatarIcon } from '@/components/avatar-icon';
 import { AccountListItem } from '@/features/account-list/account-list-item';
+import { AccountAddress } from '@/features/account-list/components/account-address';
+import { AccountBalance } from '@/features/account-list/components/account-balance';
+import { useAccountsByFingerprint } from '@/store/accounts/accounts.read';
 import { useWallets } from '@/store/wallets/wallets.read';
 import { t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
@@ -10,17 +13,27 @@ export function ApproverAccountCard() {
   const theme = useTheme<Theme>();
   const { list: walletsList } = useWallets();
   const wallet = walletsList[0];
-  /* eslint-disable-next-line lingui/no-unlocalized-strings  */
-  const testAccountName = 'testName';
+
+  if (!wallet) throw new Error('no wallet present in approver');
+
+  const { list: accountList } = useAccountsByFingerprint(wallet.fingerprint);
+  const account = accountList[0];
+
+  if (!account) throw new Error('no account present in approver');
+
   return (
     <>
       <Text variant="label01">{t`With account`}</Text>
       <AccountListItem
-        accountName={testAccountName}
-        address={t`Address`}
-        balance={t`$1234`}
-        icon={<AvatarIcon color={theme.colors['ink.background-primary']} icon="code" />}
-        walletName={wallet?.name}
+        accountName={account.name}
+        address={
+          <AccountAddress accountIndex={account.accountIndex} fingerprint={account.fingerprint} />
+        }
+        balance={
+          <AccountBalance accountIndex={account.accountIndex} fingerprint={account.fingerprint} />
+        }
+        icon={<AvatarIcon color={theme.colors['ink.background-primary']} icon={account.icon} />}
+        walletName={wallet.name}
       />
     </>
   );