Add Settle button to and refactor standalone balances display, lint

src/components/DepositDialog.jsx

@@ -41,9 +41,17 @@ export default function DepositDialog({ onClose, depositCoin }) {
         <div>
           <p style={{ color: 'white' }}>Deposit address:</p>
           <p style={{ color: 'rgba(255,255,255,0.5)' }}>
-            {account
-              ? account.pubkey.toBase58()
-              : <>Visit <Link external to={providerUrl}>{providerName}</Link> to create an account for this mint</>}
+            {account ? (
+              account.pubkey.toBase58()
+            ) : (
+              <>
+                Visit{' '}
+                <Link external to={providerUrl}>
+                  {providerName}
+                </Link>{' '}
+                to create an account for this mint
+              </>
+            )}
           </p>
         </div>
       </div>

src/components/StandaloneBalancesDisplay.jsx

@@ -2,10 +2,18 @@ import { Button, Col, Divider, Row } from 'antd';
 import React, { useState } from 'react';
 import FloatingElement from './layout/FloatingElement';
 import styled from 'styled-components';
-import { useBaseCurrencyBalances, useMarket, useQuoteCurrencyBalances } from '../utils/markets';
+import {
+  useBalances,
+  useMarket,
+  useSelectedBaseCurrencyAccount,
+  useSelectedOpenOrdersAccount,
+  useSelectedQuoteCurrencyAccount,
+} from '../utils/markets';
 import DepositDialog from './DepositDialog';
 import { useWallet } from '../utils/wallet';
 import Link from './Link';
+import { settleFunds } from '../utils/send';
+import { useSendConnection } from '../utils/connection';
 
 const RowBox = styled(Row)`
   padding-bottom: 20px;
@@ -23,66 +31,79 @@ const ActionButton = styled(Button)`
 `;
 
 export default function StandaloneBalancesDisplay() {
-  const { baseCurrency, quoteCurrency } = useMarket();
-
-  const [baseCurrencyBalances] = useBaseCurrencyBalances();
-  const [quoteCurrencyBalances] = useQuoteCurrencyBalances();
-  const { providerUrl, providerName } = useWallet();
+  const { baseCurrency, quoteCurrency, market } = useMarket();
+  const balances = useBalances();
+  const openOrdersAccount = useSelectedOpenOrdersAccount(true);
+  const connection = useSendConnection();
+  const { providerUrl, providerName, wallet } = useWallet();
   const [depositCoin, setDepositCoin] = useState('');
+  const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
+  const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
+  const baseCurrencyBalances =
+    balances && balances.find((b) => b.coin === baseCurrency);
+  const quoteCurrencyBalances =
+    balances && balances.find((b) => b.coin === quoteCurrency);
+
+  async function onSettleFunds() {
+    return await settleFunds({
+      market,
+      openOrders: openOrdersAccount,
+      connection,
+      wallet,
+      baseCurrencyAccount,
+      quoteCurrencyAccount,
+    });
+  }
+
   return (
     <FloatingElement style={{ flex: 1, paddingTop: 10 }}>
-      <Divider style={{ borderColor: 'white' }}>{baseCurrency}</Divider>
+      {[
+        [baseCurrency, baseCurrencyBalances],
+        [quoteCurrency, quoteCurrencyBalances],
+      ].map(([currency, balances]) => (
+        <React.Fragment>
+          <Divider style={{ borderColor: 'white' }}>{currency}</Divider>
           <RowBox
             align="middle"
             justify="space-between"
             style={{ paddingBottom: 12 }}
           >
-        <Col>{baseCurrency} wallet balance:</Col>
-        <Col>{baseCurrencyBalances}</Col>
+            <Col>Wallet balance:</Col>
+            <Col>{balances && balances.wallet}</Col>
+          </RowBox>
+          <RowBox
+            align="middle"
+            justify="space-between"
+            style={{ paddingBottom: 12 }}
+          >
+            <Col>Unsettled balance:</Col>
+            <Col>{balances && balances.unsettled}</Col>
           </RowBox>
           <RowBox align="middle" justify="space-around">
             <Col style={{ width: 150 }}>
               <ActionButton
                 block
                 size="large"
-            onClick={() => setDepositCoin(baseCurrency)}
+                onClick={() => setDepositCoin(currency)}
               >
                 Deposit
               </ActionButton>
             </Col>
-        {/*<Col style={{ width: 150 }}>*/}
-        {/*  <ActionButton block size="large">*/}
-        {/*    Send*/}
-        {/*  </ActionButton>*/}
-        {/*</Col>*/}
-      </RowBox>
-      <Tip>All deposits go to your <Link external to={providerUrl}>{providerName}</Link> wallet</Tip>
-      <Divider>{quoteCurrency}</Divider>
-      <RowBox
-        align="middle"
-        justify="space-between"
-        style={{ paddingBottom: 12 }}
-      >
-        <Col>{quoteCurrency} wallet balance:</Col>
-        <Col>{quoteCurrencyBalances}</Col>
-      </RowBox>
-      <RowBox align="middle" justify="space-around">
             <Col style={{ width: 150 }}>
-          <ActionButton
-            block
-            size="large"
-            onClick={() => setDepositCoin(quoteCurrency)}
-          >
-            Deposit
+              <ActionButton block size="large" onClick={onSettleFunds}>
+                Settle
               </ActionButton>
             </Col>
-        {/*<Col style={{ width: 150 }}>*/}
-        {/*  <ActionButton block size="large">*/}
-        {/*    Send*/}
-        {/*  </ActionButton>*/}
-        {/*</Col>*/}
           </RowBox>
-      <Tip>All deposits go to your <Link external to={providerUrl}>{providerName}</Link> wallet</Tip>
+          <Tip>
+            All deposits go to your{' '}
+            <Link external to={providerUrl}>
+              {providerName}
+            </Link>{' '}
+            wallet
+          </Tip>
+        </React.Fragment>
+      ))}
       <DepositDialog
         depositCoin={depositCoin}
         onClose={() => setDepositCoin('')}

src/components/TopBar.js

@@ -37,9 +37,12 @@ export default function TopBar() {
 
   const publicKey = wallet?.publicKey?.toBase58();
 
-  const handleClick = useCallback((e) => {
+  const handleClick = useCallback(
+    (e) => {
       history.push(e.key);
-  }, []);
+    },
+    [history],
+  );
 
   useEffect(() => {
     if (location.pathname.includes('/orders')) {

src/components/TradeForm.jsx

@@ -50,7 +50,7 @@ export default function TradeForm({ style, setChangeOrderRef }) {
   const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
   const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
   const openOrdersAccount = useSelectedOpenOrdersAccount(true);
-  const {wallet} = useWallet();
+  const { wallet } = useWallet();
   const sendConnection = useSendConnection();
   const markPrice = useMarkPrice();
 

src/components/UserInfoTable/AccountsTable.jsx

@@ -7,7 +7,7 @@ import { settleFunds } from '../../utils/send';
 
 export default function AccountsTable({ accountBalances }) {
   const connection = useConnection();
-  const {wallet} = useWallet();
+  const { wallet } = useWallet();
 
   async function onSettleFunds(account) {
     const {

src/pages/TradePage.jsx

@@ -60,10 +60,11 @@ export default function TradePage() {
 
   const width = dimensions?.width;
   const componentProps = {
-    onChangeOrderRef: ref => (changeOrderRef.current = ref),
-    onPrice: price =>
+    onChangeOrderRef: (ref) => (changeOrderRef.current = ref),
+    onPrice: (price) =>
       changeOrderRef.current && changeOrderRef.current({ price }),
-    onSize: size => changeOrderRef.current && changeOrderRef.current({ size }),
+    onSize: (size) =>
+      changeOrderRef.current && changeOrderRef.current({ size }),
   };
   const getComponent = useCallback(() => {
     if (width < 1000) {
@@ -81,7 +82,7 @@ export default function TradePage() {
         <Input.Password
           placeholder="Password"
           value={password}
-          onChange={e => setPassword(e.target.value)}
+          onChange={(e) => setPassword(e.target.value)}
         />
         <Button
           onClick={() => {