use client reloadMangoAccount

2021-08-31 13:47:03 -04:00 · 2021-08-31 13:47:03 -04:00 · 4f20fc6542
parent 44ed905eb6
commit 4f20fc6542
9 changed files with 83 additions and 30 deletions
--- a/components/AlphaModal.tsx
+++ b/components/AlphaModal.tsx
@ -3,7 +3,7 @@ import Modal from './Modal'
 import Button from './Button'
 import useLocalStorageState from '../hooks/useLocalStorageState'

-export const ALPHA_MODAL_KEY = 'mangoAlphaAccepted-3.01'
+export const ALPHA_MODAL_KEY = 'mangoAlphaAccepted-3.03'

 const AlphaModal = ({
  isOpen,
@ -32,11 +32,11 @@ const AlphaModal = ({
        </div>
      </Modal.Header>
      <div className={`text-th-fgd-2 text-center text-xl text-strong`}>
-        Perps are now available!
+        Welcome to Mango V3
      </div>
      <div className="text-th-fgd-2 text-center my-4">
-        Welcome to V3. Mango Markets is unaudited software, use at your own
-        risk.
+        The v3 protocol is in public beta. This is unaudited software, use at
+        your own risk.
      </div>
      <div className="text-th-fgd-2 text-center my-2">
        &#x1F642; &#129389;&#129309;
--- a/components/BalancesTable.tsx
+++ b/components/BalancesTable.tsx
@ -5,13 +5,15 @@ import { notify } from '../utils/notifications'
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import { InformationCircleIcon } from '@heroicons/react/outline'
 import Tooltip from './Tooltip'
-import { sleep } from '../utils'
 import { Market } from '@project-serum/serum'
 import { ZERO_I80F48 } from '@blockworks-foundation/mango-client'
+import { useState } from 'react'
+import Loading from './Loading'

 const BalancesTable = () => {
  const balances = useBalances()
  const actions = useMangoStore((s) => s.actions)
+  const [submitting, setSubmitting] = useState(false)

  async function handleSettleAll() {
    const mangoAccount = useMangoStore.getState().selectedMangoAccount.current
@ -20,13 +22,13 @@ const BalancesTable = () => {
    const wallet = useMangoStore.getState().wallet.current

    try {
+      setSubmitting(true)
      const spotMarkets = Object.values(markets).filter(
        (mkt) => mkt instanceof Market
      ) as Market[]
      await mangoClient.settleAll(mangoGroup, mangoAccount, spotMarkets, wallet)
+
      notify({ title: 'Successfully settled funds' })
-      await sleep(250)
-      actions.fetchMangoAccounts()
    } catch (e) {
      console.warn('Error settling all:', e)
      if (e.message === 'No unsettled funds') {
@ -42,6 +44,9 @@ const BalancesTable = () => {
          type: 'error',
        })
      }
+    } finally {
+      await actions.reloadMangoAccount()
+      setSubmitting(false)
    }
  }

@ -76,7 +81,11 @@ const BalancesTable = () => {
                  </div>
                </Tooltip>
              </div>
-              <Button onClick={handleSettleAll}>Settle All</Button>
+              {submitting ? (
+                <Loading className="-ml-1 mr-3" />
+              ) : (
+                <Button onClick={handleSettleAll}>Settle All</Button>
+              )}
            </div>
          ) : null}
          {filteredBalances.length > 0 ? (
--- a/components/DepositModal.tsx
+++ b/components/DepositModal.tsx
@ -12,6 +12,7 @@ import Slider from './Slider'
 import InlineNotification from './InlineNotification'
 import { deposit } from '../utils/mango'
 import { notify } from '../utils/notifications'
+import { sleep } from '../utils'

 interface DepositModalProps {
  onClose: () => void
@ -80,7 +81,9 @@ const DepositModal: FunctionComponent<DepositModalProps> = ({
        })
        setSubmitting(false)
        onClose()
-        actions.fetchMangoAccounts()
+        sleep(500).then(() => {
+          actions.reloadMangoAccount()
+        })
      })
      .catch((err) => {
        notify({
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@ -42,13 +42,12 @@ const TopBar = () => {
                <MenuItem href="https://docs.mango.markets/" newWindow>
                  Learn
                </MenuItem>
-                {/* TODO: change v2 link before mainnet */}
                <NavDropMenu
                  menuTitle="More"
                  // linksArray: [name: string, href: string, isExternal: boolean]
                  linksArray={[
                    ['Mango v1', 'https://usdt.mango.markets', true],
-                    ['Mango v2', 'https://trade.mango.markets', true],
+                    ['Mango v2', 'https://v2.mango.markets', true],
                  ]}
                />
              </div>
--- a/components/TradeForm.tsx
+++ b/components/TradeForm.tsx
@ -18,6 +18,7 @@ import { Market } from '@project-serum/serum'
 import Big from 'big.js'
 import MarketFee from './MarketFee'
 import LeverageSlider from './LeverageSlider'
+import Loading from './Loading'

 const StyledRightInput = styled(Input)`
  border-left: 1px solid transparent;
@ -292,8 +293,8 @@ export default function TradeForm() {
        type: 'error',
      })
    } finally {
-      sleep(1000).then(() => {
-        actions.fetchMangoAccounts()
+      sleep(500).then(() => {
+        actions.reloadMangoAccount()
        actions.updateOpenOrders()
      })
      setSubmitting(false)
@ -427,11 +428,17 @@ export default function TradeForm() {
                    : 'border border-th-bkg-4'
                } text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark flex-grow`}
              >
-                {`${baseSize > 0 ? 'Buy ' + baseSize : 'Buy '} ${
-                  marketConfig.name.includes('PERP')
-                    ? marketConfig.name
-                    : marketConfig.baseSymbol
-                }`}
+                {submitting ? (
+                  <div className="w-full">
+                    <Loading className="mx-auto" />
+                  </div>
+                ) : (
+                  `${baseSize > 0 ? 'Buy ' + baseSize : 'Buy '} ${
+                    marketConfig.name.includes('PERP')
+                      ? marketConfig.name
+                      : marketConfig.baseSymbol
+                  }`
+                )}
              </Button>
            ) : (
              <Button
@ -443,11 +450,17 @@ export default function TradeForm() {
                    : 'border border-th-bkg-4'
                } text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
              >
-                {`${baseSize > 0 ? 'Sell ' + baseSize : 'Sell '} ${
-                  marketConfig.name.includes('PERP')
-                    ? marketConfig.name
-                    : marketConfig.baseSymbol
-                }`}
+                {submitting ? (
+                  <div className="w-full">
+                    <Loading className="mx-auto" />
+                  </div>
+                ) : (
+                  `${baseSize > 0 ? 'Sell ' + baseSize : 'Sell '} ${
+                    marketConfig.name.includes('PERP')
+                      ? marketConfig.name
+                      : marketConfig.baseSymbol
+                  }`
+                )}
              </Button>
            )
          ) : (
--- a/components/WithdrawModal.tsx
+++ b/components/WithdrawModal.tsx
@ -170,8 +170,7 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
    })
      .then((txid: string) => {
        setSubmitting(false)
-        actions.fetchMangoGroup()
-        actions.fetchMangoAccounts()
+        actions.reloadMangoAccount()
        actions.fetchWalletTokens()
        notify({
          title: 'Withdraw successful',
--- a/hooks/useWallet.tsx
+++ b/hooks/useWallet.tsx
@ -141,12 +141,13 @@ export default function useWallet() {
    if (connected && mangoAccount) {
      actions.fetchWalletTokens()
      actions.fetchTradeHistory()
+      actions.fetchMangoAccounts()
    }
  }, 60 * SECONDS)

  useInterval(() => {
    if (connected && mangoAccount) {
-      actions.fetchMangoAccounts()
+      actions.reloadMangoAccount()
    }
  }, 20 * SECONDS)

--- a/stores/useMangoStore.tsx
+++ b/stores/useMangoStore.tsx
@ -420,6 +420,22 @@ const useMangoStore = create<MangoStore>((set, get) => ({
        state.tradeHistory = [...serumHistory, ...parsedPerpHistory]
      })
    },
+    async reloadMangoAccount() {
+      const set = get().set
+      const mangoAccount = get().selectedMangoAccount.current
+      const [reloadedMangoAccount, reloadedOpenOrders] = await Promise.all([
+        mangoAccount.reload(DEFAULT_CONNECTION),
+        mangoAccount.loadOpenOrders(
+          DEFAULT_CONNECTION,
+          new PublicKey(serumProgramId)
+        ),
+      ])
+      reloadedMangoAccount.spotOpenOrdersAccounts = reloadedOpenOrders
+
+      set((state) => {
+        state.selectedMangoAccount.current = reloadedMangoAccount
+      })
+    },
    async updateOpenOrders() {
      const set = get().set
      const marketConfig = get().selectedMarket.config
--- a/yarn.lock
+++ b/yarn.lock
@ -990,12 +990,13 @@

 "@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git":
  version "3.0.12"
-  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#7da22b4c33c2d17938427fad1ba01cab3627bd52"
+  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#69e9a698cc080ec6ee2c8fa77a6e4d3b4a4d79f8"
  dependencies:
    "@project-serum/serum" "0.13.55"
    "@project-serum/sol-wallet-adapter" "^0.2.0"
    "@solana/spl-token" "^0.1.6"
    "@solana/web3.js" "1.21.0"
+    axios "^0.21.1"
    big.js "^6.1.1"
    bigint-buffer "^1.1.5"
    bn.js "^5.1.0"
@ -1874,9 +1875,9 @@
  integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==

 "@types/node@*":
-  version "16.7.6"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.6.tgz#8666478db8095aa66e25b7e469f3e7b53ea2855e"
-  integrity sha512-VESVNFoa/ahYA62xnLBjo5ur6gPsgEE5cNRy8SrdnkZ2nwJSW0kJ4ufbFr2zuU9ALtHM8juY53VcRoTA7htXSg==
+  version "16.7.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.8.tgz#2448be5f24fe6b77114632b6350fcd219334651e"
+  integrity sha512-8upnoQU0OPzbIkm+ZMM0zCeFCkw2s3mS0IWdx0+AAaWqm4fkBb0UJp8Edl7FVKRamYbpJC/aVsHpKWBIbiC7Zg==

 "@types/node@^12.12.54":
  version "12.20.21"
@ -2334,6 +2335,13 @@ available-typed-arrays@^1.0.2:
  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz#9e0ae84ecff20caae6a94a1c3bc39b955649b7a9"
  integrity sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==

+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-jest@^26.6.3:
  version "26.6.3"
  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
@ -4230,6 +4238,11 @@ flatten@^1.0.2:
  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==

+follow-redirects@^1.10.0:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.2.tgz#cecb825047c00f5e66b142f90fed4f515dec789b"
+  integrity sha512-yLR6WaE2lbF0x4K2qE2p9PEXKLDjUjnR/xmjS3wHAYxtlsI9MLLBJUZirAHKzUZDGLxje7w/cXR49WOUo4rbsA==
+
 for-in@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"