Merge branch 'master' into generate-and-transfer

package.json

@@ -28,7 +28,7 @@
     "styled-components": "^5.1.1"
   },
   "scripts": {
-    "predeploy": "yarn build",
+    "predeploy": "git pull --ff-only && yarn build",
     "deploy": "gh-pages -d build",
     "start": "craco start",
     "build": "craco build",

src/components/DepositDialog.jsx

@@ -73,7 +73,7 @@ export default function DepositDialog({ onClose, baseOrQuote }) {
       onCancel={onClose}
     >
       <div>
-        <p style={{ color: 'white' }}>Deposit address:</p>
+        <p style={{ color: 'white' }}>SPL Deposit address:</p>
         <p style={{ color: 'rgba(255,255,255,0.5)' }}>
           {account ? (
             account.pubkey.toBase58()

src/pages/ListNewMarketPage.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Form, Input, Typography } from 'antd';
+import { Button, Form, Input, Tooltip, Typography } from 'antd';
 import { notify } from '../utils/notifications';
 import { isValidPublicKey } from '../utils/utils';
 import { PublicKey } from '@solana/web3.js';
@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import { parseTokenMintData } from '../utils/tokens';
 import { useWallet } from '../utils/wallet';
 import { listMarket } from '../utils/send';
+import Link from '../components/Link';
 
 const { Text, Title } = Typography;
 
@@ -26,11 +27,35 @@ export default function ListNewMarketPage() {
   const { wallet, connected } = useWallet();
   const [baseMintInput, baseMintInfo] = useMintInput(
     'baseMint',
-    'Base Mint Address',
+    <Text>
+      Base Token Mint Address{' '}
+      <Text type="secondary">
+        (e.g. BTC solana address:{' '}
+        {
+          <Text type="secondary" code>
+            9n4nbM75f5Ui33ZbPYXn59EwSgE8CGsHtAeTH5YFeJ9E
+          </Text>
+        }
+        )
+      </Text>
+    </Text>,
+    'The base token is the token being traded. For example, the base token of a BTC/USDT market is BTC.',
   );
   const [quoteMintInput, quoteMintInfo] = useMintInput(
     'quoteMint',
-    'Quote Mint Address',
+    <Text>
+      Quote Token Mint Address{' '}
+      <Text type="secondary">
+        (e.g. USDT solana address:{' '}
+        {
+          <Text type="secondary" code>
+            BQcdHdAQW1hczDbBi9hiegXAR7A98Q9jx3X3iBBBDiq4
+          </Text>
+        }
+        )
+      </Text>
+    </Text>,
+    'The quote token is the token used to price trades. For example, the quote token of a BTC/USDT market is USDT.',
   );
   const [lotSize, setLotSize] = useState('1');
   const [tickSize, setTickSize] = useState('0.01');
@@ -91,14 +116,20 @@ export default function ListNewMarketPage() {
       <FloatingElement>
         <Title level={4}>List New Market</Title>
         <Form
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 16 }}
+          labelCol={{ span: 24 }}
+          wrapperCol={{ span: 24 }}
+          layout={'vertical'}
           onFinish={onSubmit}
         >
           {baseMintInput}
           {quoteMintInput}
           <Form.Item
-            label="Min Order Size (Lot Size)"
+            label={
+              <Tooltip title="Smallest allowed order size. For a BTC/USDT market, this would be in units of BTC.">
+                Minimum Order Size{' '}
+                <Text type="secondary">(Lot size in e.g. BTC)</Text>
+              </Tooltip>
+            }
             name="lotSize"
             initialValue="1"
             validateStatus={
@@ -119,7 +150,12 @@ export default function ListNewMarketPage() {
             />
           </Form.Item>
           <Form.Item
-            label="Tick Size (Price Increment)"
+            label={
+              <Tooltip title="Smallest amount by which prices can move. For a BTC/USDT market, this would be in units of USDT.">
+                Tick Size{' '}
+                <Text type="secondary">(Price increment in e.g. USDT)</Text>
+              </Tooltip>
+            }
             name="tickSize"
             initialValue="0.01"
             validateStatus={
@@ -139,7 +175,7 @@ export default function ListNewMarketPage() {
               step="any"
             />
           </Form.Item>
-          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+          <Form.Item label=" " colon={false}>
             <Button
               type="primary"
               htmlType="submit"
@@ -160,7 +196,7 @@ export default function ListNewMarketPage() {
   );
 }
 
-function useMintInput(name, label) {
+function useMintInput(name, label, tooltip) {
   const [address, setAddress] = useState('');
   const [accountInfo, loaded] = useAccountInfo(
     isValidPublicKey(address) ? new PublicKey(address) : null,
@@ -202,7 +238,21 @@ function useMintInput(name, label) {
 
   const input = (
     <Form.Item
-      label={label}
+      label={
+        <Tooltip
+          title={
+            <>
+              {tooltip} You can look up token mint addresses on{' '}
+              <Link external to="https://sollet.io">
+                sollet.io
+              </Link>
+              .
+            </>
+          }
+        >
+          {label}
+        </Tooltip>
+      }
       name={name}
       validateStatus={validateStatus}
       hasFeedback={hasFeedback}

src/utils/send.js

@@ -430,20 +430,26 @@ export async function listMarket({
     }),
   );
 
-  await Promise.all([
-    sendTransaction({
+  const signedTransactions = await Promise.all([
+    signTransaction({
       transaction: tx1,
       wallet,
       connection,
       signers: [wallet.publicKey, baseVault, quoteVault],
     }),
-    sendTransaction({
+    signTransaction({
       transaction: tx2,
       wallet,
       connection,
       signers: [wallet.publicKey, market, requestQueue, eventQueue, bids, asks],
     }),
   ]);
+  for (let signedTransaction of signedTransactions) {
+    await sendSignedTransaction({
+      signedTransaction,
+      connection,
+    });
+  }
 
   return market.publicKey;
 }
@@ -463,14 +469,45 @@ async function sendTransaction({
   sentMessage = 'Transaction sent',
   successMessage = 'Transaction confirmed',
   timeout = DEFAULT_TIMEOUT,
+}) {
+  const signedTransaction = await signTransaction({
+    transaction,
+    wallet,
+    signers,
+    connection,
+  });
+  return await sendSignedTransaction({
+    signedTransaction,
+    connection,
+    sendingMessage,
+    sentMessage,
+    successMessage,
+    timeout,
+  });
+}
+
+async function signTransaction({
+  transaction,
+  wallet,
+  signers = [wallet.publicKey],
+  connection,
 }) {
   transaction.recentBlockhash = (
     await connection.getRecentBlockhash('max')
   ).blockhash;
   transaction.signPartial(...signers);
-  const rawTransaction = (
-    await wallet.signTransaction(transaction)
-  ).serialize();
+  return await wallet.signTransaction(transaction);
+}
+
+async function sendSignedTransaction({
+  signedTransaction,
+  connection,
+  sendingMessage = 'Sending transaction...',
+  sentMessage = 'Transaction sent',
+  successMessage = 'Transaction confirmed',
+  timeout = DEFAULT_TIMEOUT,
+}) {
+  const rawTransaction = signedTransaction.serialize();
   const startTime = getUnixTs();
   notify({ message: sendingMessage });
   const txid = await connection.sendRawTransaction(rawTransaction, {