Auto create token account on order sending

src/components/StandaloneBalancesDisplay.tsx

@@ -1,4 +1,4 @@
-import { Button, Col, Divider, Row } from 'antd';
+import {Button, Col, Divider, Popover, Row } from 'antd';
 import React, { useState } from 'react';
 import FloatingElement from './layout/FloatingElement';
 import styled from 'styled-components';
@@ -18,6 +18,8 @@ import { useSendConnection } from '../utils/connection';
 import { notify } from '../utils/notifications';
 import { Balances } from '../utils/types';
 import StandaloneTokenAccountsSelect from './StandaloneTokenAccountSelect';
+import LinkAddress from "./LinkAddress";
+import {InfoCircleOutlined} from "@ant-design/icons";
 
 const RowBox = styled(Row)`
   padding-bottom: 20px;
@@ -126,7 +128,19 @@ export default function StandaloneBalancesDisplay() {
       {formattedBalances.map(
         ([currency, balances, baseOrQuote, mint], index) => (
           <React.Fragment key={index}>
-            <Divider style={{ borderColor: 'white' }}>{currency}</Divider>
+            <Divider style={{ borderColor: 'white' }}>
+              {currency}{" "}
+              {mint && (
+                <Popover
+                  content={<LinkAddress address={mint} />}
+                  placement="bottomRight"
+                  title="Token mint"
+                  trigger="hover"
+                >
+                  <InfoCircleOutlined style={{ color: '#2abdd2' }} />
+                </Popover>
+              )}
+            </Divider>
             {connected && (
               <RowBox align="middle" style={{ paddingBottom: 10 }}>
                 <StandaloneTokenAccountsSelect

src/components/TradeForm.tsx

@@ -21,6 +21,8 @@ import { useSendConnection } from '../utils/connection';
 import FloatingElement from './layout/FloatingElement';
 import { placeOrder } from '../utils/send';
 import { SwitchChangeEventHandler } from 'antd/es/switch';
+import {refreshCache} from "../utils/fetch-loop";
+import tuple from 'immutable-tuple';
 
 const SellButton = styled(Button)`
   margin: 20px 0px 0px 0px;
@@ -58,7 +60,7 @@ export default function TradeForm({
   const baseCurrencyAccount = useSelectedBaseCurrencyAccount();
   const quoteCurrencyAccount = useSelectedQuoteCurrencyAccount();
   const openOrdersAccount = useSelectedOpenOrdersAccount(true);
-  const { wallet } = useWallet();
+  const { wallet, connected } = useWallet();
   const sendConnection = useSendConnection();
   const markPrice = useMarkPrice();
 
@@ -220,6 +222,7 @@ export default function TradeForm({
         baseCurrencyAccount: baseCurrencyAccount?.pubkey,
         quoteCurrencyAccount: quoteCurrencyAccount?.pubkey,
       });
+      refreshCache(tuple('getTokenAccounts', wallet, connected))
       setPrice(undefined);
       onSetBaseSize(undefined);
     } catch (e) {

src/components/UserInfoTable/WalletBalancesTable.tsx

@@ -12,6 +12,8 @@ import {
   useTokenAccounts,
 } from '../../utils/markets';
 import StandaloneTokenAccountsSelect from '../StandaloneTokenAccountSelect';
+import {abbreviateAddress} from "../../utils/utils";
+import {PublicKey} from "@solana/web3.js";
 
 export default function WalletBalancesTable({
   walletBalances,
@@ -72,9 +74,19 @@ export default function WalletBalancesTable({
   const columns = [
     {
       title: 'Coin',
-      dataIndex: 'coin',
       key: 'coin',
       width: '20%',
+      render: (walletBalance) => (
+        <Row align="middle">
+          <a
+            href={`https://explorer.solana.com/address/${walletBalance.mint}`}
+            target={"_blank"}
+            rel="noopener noreferrer"
+          >
+            {walletBalance.coin || abbreviateAddress(new PublicKey(walletBalance.mint))}
+          </a>
+        </Row>
+      )
     },
     {
       title: 'Wallet Balance',

src/utils/send.tsx

@@ -388,6 +388,37 @@ export async function placeOrder({
     return;
   }
   const owner = wallet.publicKey;
+  const transaction = new Transaction();
+  const signers: Account[] = [];
+
+  if (!baseCurrencyAccount) {
+    const {
+      transaction: createAccountTransaction,
+      signer: createAccountSigners,
+      newAccountPubkey
+    } = await createTokenAccountTransaction({
+      connection,
+      wallet,
+      mintPublicKey: market.baseMintAddress
+    });
+    transaction.add(createAccountTransaction);
+    signers.push(createAccountSigners);
+    baseCurrencyAccount = newAccountPubkey;
+  }
+  if (!quoteCurrencyAccount) {
+    const {
+      transaction: createAccountTransaction,
+      signer: createAccountSigners,
+      newAccountPubkey
+    } = await createTokenAccountTransaction({
+      connection,
+      wallet,
+      mintPublicKey: market.quoteMintAddress
+    });
+    transaction.add(createAccountTransaction);
+    signers.push(createAccountSigners);
+    quoteCurrencyAccount = newAccountPubkey;
+  }
 
   const payer = side === 'sell' ? baseCurrencyAccount : quoteCurrencyAccount;
   if (!payer) {
@@ -407,10 +438,11 @@ export async function placeOrder({
   };
   console.log(params);
 
-  const transaction = market.makeMatchOrdersTransaction(5);
+  const matchOrderstransaction = market.makeMatchOrdersTransaction(5);
+  transaction.add(matchOrderstransaction)
   let {
     transaction: placeOrderTx,
-    signers,
+    signers: placeOrderSigners,
   } = await market.makePlaceOrderTransaction(
     connection,
     params,
@@ -419,6 +451,7 @@ export async function placeOrder({
   );
   transaction.add(placeOrderTx);
   transaction.add(market.makeMatchOrdersTransaction(5));
+  signers.push(...placeOrderSigners);
 
   return await sendTransaction({
     transaction,