Fix deposit dialog for nonstandard coins

src/components/DepositDialog.jsx

@@ -5,31 +5,32 @@ import {
   useMarket,
   useSelectedQuoteCurrencyAccount,
 } from '../utils/markets';
-import { TOKEN_MINTS } from '@project-serum/serum';
 import { useWallet } from '../utils/wallet';
 import Link from './Link';
 
-export default function DepositDialog({ onClose, depositCoin }) {
-  let coinMint =
-    depositCoin &&
-    TOKEN_MINTS.find(({ name }) => name === depositCoin)?.address;
-  const { market } = useMarket();
+export default function DepositDialog({ onClose, baseOrQuote }) {
+  const { market, baseCurrency, quoteCurrency } = useMarket();
+
   const { providerName, providerUrl } = useWallet();
   const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
   const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
-  if (!coinMint) {
-    return null;
-  }
-
+  let coinMint;
   let account;
-  if (market?.baseMintAddress?.equals(coinMint)) {
+  let depositCoin;
+  if (baseOrQuote === 'base') {
+    coinMint = market?.baseMintAddress;
     account = baseCurrencyAccount;
-  } else if (market?.quoteMintAddress?.equals(coinMint)) {
+    depositCoin = baseCurrency;
+  } else if (baseOrQuote === 'quote') {
+    coinMint = market?.quoteMintAddress;
     account = quoteCurrencyAccount;
+    depositCoin = quoteCurrency;
   } else {
     account = null;
   }
-
+  if (!coinMint) {
+    return null;
+  }
   return (
     <Modal
       title={depositCoin}

src/components/StandaloneBalancesDisplay.jsx

@@ -36,7 +36,7 @@ export default function StandaloneBalancesDisplay() {
   const openOrdersAccount = useSelectedOpenOrdersAccount(true);
   const connection = useSendConnection();
   const { providerUrl, providerName, wallet } = useWallet();
-  const [depositCoin, setDepositCoin] = useState('');
+  const [baseOrQuote, setBaseOrQuote] = useState('');
   const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
   const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
   const baseCurrencyBalances =
@@ -58,9 +58,9 @@ export default function StandaloneBalancesDisplay() {
   return (
     <FloatingElement style={{ flex: 1, paddingTop: 10 }}>
       {[
-        [baseCurrency, baseCurrencyBalances],
-        [quoteCurrency, quoteCurrencyBalances],
-      ].map(([currency, balances], index) => (
+        [baseCurrency, baseCurrencyBalances, 'base'],
+        [quoteCurrency, quoteCurrencyBalances, 'quote'],
+      ].map(([currency, balances, baseOrQuote], index) => (
         <React.Fragment key={index}>
           <Divider style={{ borderColor: 'white' }}>{currency}</Divider>
           <RowBox
@@ -84,7 +84,7 @@ export default function StandaloneBalancesDisplay() {
               <ActionButton
                 block
                 size="large"
-                onClick={() => setDepositCoin(currency)}
+                onClick={() => setBaseOrQuote(baseOrQuote)}
               >
                 Deposit
               </ActionButton>
@@ -105,8 +105,8 @@ export default function StandaloneBalancesDisplay() {
         </React.Fragment>
       ))}
       <DepositDialog
-        depositCoin={depositCoin}
-        onClose={() => setDepositCoin('')}
+        baseOrQuote={baseOrQuote}
+        onClose={() => setBaseOrQuote('')}
       />
     </FloatingElement>
   );