Update columsn in balances table

src/components/UserInfoTable/AccountsTable.jsx

@@ -32,9 +32,9 @@ export default function AccountsTable({ accountBalances }) {
 
   const columns = [
     {
-      title: 'Key',
-      dataIndex: 'key',
-      key: 'key',
+      title: 'Market',
+      dataIndex: 'market',
+      key: 'market',
     },
     {
       title: 'Coin',
@@ -66,7 +66,10 @@ export default function AccountsTable({ accountBalances }) {
     <DataTable
       emptyLabel="No balances"
       dataSource={accountBalances}
-      columns={columns}
+      columns={columns.map((data) => ({
+        ...data,
+        key: `${data.market}${data.coin}`,
+      }))}
       pagination={false}
     />
   );

src/components/UserInfoTable/WalletBalancesTable.jsx

@@ -6,11 +6,6 @@ export default function WalletBalancesTable({
   walletBalances,
 }) {
   const columns = [
-    {
-      title: 'Key',
-      dataIndex: 'key',
-      key: 'key',
-    },
     {
       title: 'Coin',
       dataIndex: 'coin',

src/pages/BalancesPage.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Tabs } from 'antd';
-import { useWalletBalancesForAllMarkets, useOpenOrderAccountBalancesForAllMarkets } from '../utils/markets';
+import {
+  useWalletBalancesForAllMarkets,
+  useOpenOrderAccountBalancesForAllMarkets,
+} from '../utils/markets';
 import FloatingElement from '../components/layout/FloatingElement';
 import WalletBalancesTable from '../components/UserInfoTable/WalletBalancesTable';
 import AccountsTable from '../components/UserInfoTable/AccountsTable';
@@ -8,17 +11,29 @@ import AccountsTable from '../components/UserInfoTable/AccountsTable';
 const { TabPane } = Tabs;
 
 export default function BalancesPage() {
-  const [walletBalances, loadedWalletBalances] = useWalletBalancesForAllMarkets();
-  const [accountBalances, accountBalancesLoaded] = useOpenOrderAccountBalancesForAllMarkets();
+  const [
+    walletBalances,
+    loadedWalletBalances,
+  ] = useWalletBalancesForAllMarkets();
+  const [
+    accountBalances,
+    accountBalancesLoaded,
+  ] = useOpenOrderAccountBalancesForAllMarkets();
 
   return (
     <FloatingElement style={{ flex: 1, paddingTop: 10 }}>
-      <Tabs defaultActiveKey="accounts">
-        <TabPane tab="Balances" key="balances">
-          <WalletBalancesTable loaded={loadedWalletBalances} walletBalances={walletBalances} />
+      <Tabs defaultActiveKey="walletBalances">
+        <TabPane tab="Wallet Balances" key="walletBalances">
+          <WalletBalancesTable
+            loaded={loadedWalletBalances}
+            walletBalances={walletBalances}
+          />
         </TabPane>
-        <TabPane tab="Accounts" key="accounts">
-          <AccountsTable loaded={accountBalancesLoaded} accountBalances={accountBalances} />
+        <TabPane tab="Market balances" key="marketBalances">
+          <AccountsTable
+            loaded={accountBalancesLoaded}
+            accountBalances={accountBalances}
+          />
         </TabPane>
       </Tabs>
     </FloatingElement>

src/utils/markets.js

@@ -722,13 +722,13 @@ export function useOpenOrderAccountBalancesForAllMarkets() {
           openOrdersAccount?.quoteTokenFree &&
           market.baseSplSizeToNumber(openOrdersAccount.quoteTokenFree);
         openOrderAccountBalances.push({
-          key: baseCurrency,
+          market: marketName,
           coin: baseCurrency,
           orders: inOrdersBase,
           unsettled: unsettledBase,
         });
         openOrderAccountBalances.push({
-          key: quoteCurrency,
+          market: marketName,
           coin: quoteCurrency,
           orders: inOrdersQuote,
           unsettled: unsettledQuote,