From 37f9c41355987fd00e34b68f1c5161029cff7833 Mon Sep 17 00:00:00 2001
From: Nishad <nishadsingh@gmail.com>
Date: Sun, 30 Aug 2020 02:50:11 +0800
Subject: [PATCH] Update columsn in balances table

---
 .../UserInfoTable/AccountsTable.jsx           | 11 ++++---
 .../UserInfoTable/WalletBalancesTable.jsx     |  5 ---
 src/pages/BalancesPage.jsx                    | 31 ++++++++++++++-----
 src/utils/markets.js                          |  4 +--
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/UserInfoTable/AccountsTable.jsx b/src/components/UserInfoTable/AccountsTable.jsx
index 905e3d6..7b25efd 100644
--- a/src/components/UserInfoTable/AccountsTable.jsx
+++ b/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}
     />
   );
diff --git a/src/components/UserInfoTable/WalletBalancesTable.jsx b/src/components/UserInfoTable/WalletBalancesTable.jsx
index 87a028d..a9063f2 100644
--- a/src/components/UserInfoTable/WalletBalancesTable.jsx
+++ b/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',
diff --git a/src/pages/BalancesPage.jsx b/src/pages/BalancesPage.jsx
index c186cf5..2ff3591 100644
--- a/src/pages/BalancesPage.jsx
+++ b/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>
diff --git a/src/utils/markets.js b/src/utils/markets.js
index 00b8d9f..e9b4cdf 100644
--- a/src/utils/markets.js
+++ b/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,