Show balances on pools page

src/pages/pools/NewPoolPage.tsx

@@ -11,6 +11,7 @@ import { PoolTransactions } from '@project-serum/pool';
 import { useTokenAccounts } from '../../utils/markets';
 import BN from 'bn.js';
 import { notify } from '../../utils/notifications';
+import Link from '../../components/Link';
 
 const { Text, Title } = Typography;
 
@@ -185,7 +186,12 @@ export default function NewPoolPage() {
       </FloatingElement>
       {newPoolAddress ? (
         <FloatingElement>
-          <Text>New pool address: {newPoolAddress.toBase58()}</Text>
+          <Text>
+            New pool address:{' '}
+            <Link to={`/pools/${newPoolAddress.toBase58()}`}>
+              {newPoolAddress.toBase58()}
+            </Link>
+          </Text>
         </FloatingElement>
       ) : null}
     </Wrapper>

src/pages/pools/PoolPage/PoolBalancesPanel.tsx

@@ -0,0 +1,96 @@
+import { PoolInfo } from '@project-serum/pool';
+import React from 'react';
+import { PublicKey } from '@solana/web3.js';
+import { useAccountInfo } from '../../../utils/connection';
+import {
+  parseTokenAccountData,
+  parseTokenMintData,
+} from '../../../utils/tokens';
+import { Spin, Tabs } from 'antd';
+import FloatingElement from '../../../components/layout/FloatingElement';
+import { useTokenAccounts } from '../../../utils/markets';
+
+const { TabPane } = Tabs;
+
+export default function PoolBalancesPanel({
+  poolInfo,
+}: {
+  poolInfo: PoolInfo;
+}) {
+  return (
+    <FloatingElement>
+      <Tabs>
+        <TabPane tab="Wallet Balances" key="wallet">
+          <WalletBalancesTab poolInfo={poolInfo} />
+        </TabPane>
+        <TabPane tab="Pool Balances" key="pool">
+          <PoolBalancesTab poolInfo={poolInfo} />
+        </TabPane>
+      </Tabs>
+    </FloatingElement>
+  );
+}
+
+function WalletBalancesTab({ poolInfo }: { poolInfo: PoolInfo }) {
+  const [tokenAccounts] = useTokenAccounts();
+  return (
+    <ul>
+      {[
+        poolInfo.state.poolTokenMint,
+        ...poolInfo.state.assets.map((asset) => asset.mint),
+      ].map((mint, index) => {
+        const tokenAccount = tokenAccounts?.find((account) =>
+          account.effectiveMint.equals(mint),
+        );
+        if (!tokenAccount) {
+          return null;
+        }
+        return (
+          <BalanceItem
+            key={index}
+            mint={mint}
+            publicKey={tokenAccount.pubkey}
+          />
+        );
+      })}
+    </ul>
+  );
+}
+
+function PoolBalancesTab({ poolInfo }: { poolInfo: PoolInfo }) {
+  return (
+    <ul>
+      {poolInfo.state.assets.map((asset, index) => {
+        return (
+          <BalanceItem
+            key={index}
+            mint={asset.mint}
+            publicKey={asset.vaultAddress}
+          />
+        );
+      })}
+    </ul>
+  );
+}
+
+interface BalanceItemProps {
+  mint: PublicKey;
+  publicKey: PublicKey;
+}
+
+function BalanceItem({ mint, publicKey }: BalanceItemProps) {
+  const [mintAccountInfo] = useAccountInfo(mint);
+  const [balanceAccountInfo] = useAccountInfo(publicKey);
+  let quantityDisplay = <Spin size="small" />;
+  if (mintAccountInfo && balanceAccountInfo) {
+    const mintInfo = parseTokenMintData(mintAccountInfo.data);
+    const accountInfo = parseTokenAccountData(balanceAccountInfo.data);
+    quantityDisplay = <>{accountInfo.amount / 10 ** mintInfo.decimals}</>;
+  }
+
+  return (
+    <li>
+      {quantityDisplay} {mint.toBase58()} {publicKey.toBase58()}
+    </li>
+  );
+}

src/pages/pools/PoolPage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import { Spin, Typography } from 'antd';
+import { Col, Row, Spin, Typography } from 'antd';
 import { PublicKey } from '@solana/web3.js';
 import { useAccountInfo } from '../../../utils/connection';
 import FloatingElement from '../../../components/layout/FloatingElement';
@@ -9,6 +9,7 @@ import { decodePoolState, PoolInfo } from '@project-serum/pool';
 import PoolInfoPanel from './PoolInfoPanel';
 import { parseTokenMintData } from '../../../utils/tokens';
 import PoolCreateRedeemPanel from './PoolCreateRedeemPanel';
+import PoolBalancesPanel from './PoolBalancesPanel';
 
 const { Text, Title } = Typography;
 
@@ -78,9 +79,18 @@ function isPublicKey(address) {
 
 function PoolPageInner({ poolInfo, mintInfo }) {
   return (
-    <Wrapper>
-      <PoolInfoPanel poolInfo={poolInfo} mintInfo={mintInfo} />
-      <PoolCreateRedeemPanel poolInfo={poolInfo} mintInfo={mintInfo} />
-    </Wrapper>
+    <>
+      <Row>
+        <Col xs={24} lg={14} xl={12}>
+          <PoolInfoPanel poolInfo={poolInfo} mintInfo={mintInfo} />
+        </Col>
+        <Col xs={24} lg={10} xl={12}>
+          <PoolCreateRedeemPanel poolInfo={poolInfo} mintInfo={mintInfo} />
+        </Col>
+        <Col xs={24}>
+          <PoolBalancesPanel poolInfo={poolInfo} />
+        </Col>
+      </Row>
+    </>
   );
 }

src/routes.tsx

@@ -1,4 +1,4 @@
-import { HashRouter, Route } from 'react-router-dom';
+import { HashRouter, Route, Switch } from 'react-router-dom';
 import TradePage from './pages/TradePage';
 import OpenOrdersPage from './pages/OpenOrdersPage';
 import React from 'react';
@@ -14,17 +14,23 @@ export function Routes() {
     <>
       <HashRouter basename={'/'}>
         <BasicLayout>
-          <Route exact path="/" component={TradePage} />
-          <Route exact path="/orders" component={OpenOrdersPage} />
-          <Route exact path="/balances" component={BalancesPage} />
-          <Route exact path="/convert" component={ConvertPage} />
-          <Route exact path="/list-new-market" component={ListNewMarketPage} />
-          <Route exact path="/pools/new">
-            <NewPoolPage />
-          </Route>
-          <Route exact path="/pools/:poolAddress">
-            <PoolPage />
-          </Route>
+          <Switch>
+            <Route exact path="/" component={TradePage} />
+            <Route exact path="/orders" component={OpenOrdersPage} />
+            <Route exact path="/balances" component={BalancesPage} />
+            <Route exact path="/convert" component={ConvertPage} />
+            <Route
+              exact
+              path="/list-new-market"
+              component={ListNewMarketPage}
+            />
+            <Route exact path="/pools/new">
+              <NewPoolPage />
+            </Route>
+            <Route exact path="/pools/:poolAddress">
+              <PoolPage />
+            </Route>
+          </Switch>
         </BasicLayout>
       </HashRouter>
     </>