Merge branch 'main' into tradingview-order-lines

buffsamo · Oct 16, 2021 · 3b5c84b · 3b5c84b
2 parents 12e5578 + 3b65fed
commit 3b5c84b
Show file tree

Hide file tree

Showing 63 changed files with 3,685 additions and 1,735 deletions.
diff --git a/@types/types.tsx b/@types/types.tsx
@@ -122,3 +122,14 @@ export interface WalletAdapter {
   disconnect: () => any
   on(event: string, fn: () => void): this
 }
+
+export interface PerpTriggerOrder {
+  orderId: number
+  marketIndex: number
+  orderType: 'limit' | 'ioc' | 'postOnly' | 'market'
+  side: 'buy' | 'sell'
+  price: number
+  size: number
+  triggerCondition: 'above' | 'below'
+  triggerPrice: number
+}
diff --git a/components/AccountInfo.tsx b/components/AccountInfo.tsx
@@ -7,7 +7,7 @@ import {
   ZERO_I80F48,
 } from '@blockworks-foundation/mango-client'
 import { useCallback, useState } from 'react'
-import { HeartIcon } from '@heroicons/react/solid'
+import { ExclamationIcon, HeartIcon } from '@heroicons/react/solid'
 import useMangoStore, { MNGO_INDEX } from '../stores/useMangoStore'
 import { formatUsdValue, usdFormatter } from '../utils'
 import { notify } from '../utils/notifications'
@@ -70,7 +70,7 @@ export default function AccountInfo() {
         mngoNodeBank.publicKey,
         mngoNodeBank.vault
       )
-      actions.fetchMangoAccounts()
+      actions.reloadMangoAccount()
       notify({
         title: 'Successfully redeemed MNGO',
         description: '',
@@ -236,7 +236,8 @@ export default function AccountInfo() {
                 <Tooltip
                   content={
                     <div>
-                      Account will be liquidated if Health Ratio reaches 0%.{' '}
+                      Account will be liquidated if Health Ratio reaches 0% and
+                      will continue until Init Health is above 0.{' '}
                       <a
                         href="https://docs.mango.markets/mango-v3/overview#health"
                         target="_blank"
@@ -274,6 +275,12 @@ export default function AccountInfo() {
               %
             </div>
           </div>
+          {mangoAccount && mangoAccount.beingLiquidated ? (
+            <div className="pt-0.5 text-xs sm:text-sm flex items-center justify-center">
+              <ExclamationIcon className="flex-shrink-0 h-5 w-5 mr-1.5 text-th-red" />
+              <span className="text-th-red">You are being liquidated!</span>
+            </div>
+          ) : null}
           <div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-2 sm:pt-4`}>
             <Button
               onClick={() => setShowDepositModal(true)}

diff --git a/components/AccountNameModal.tsx b/components/AccountNameModal.tsx
@@ -39,7 +39,8 @@ const AccountNameModal: FunctionComponent<AccountNameModalProps> = ({
         wallet,
         name
       )
-      actions.fetchMangoAccounts()
+      actions.fetchAllMangoAccounts()
+      actions.reloadMangoAccount()
       onClose()
       notify({
         title: 'Account name updated',

diff --git a/components/BalancesTable.tsx b/components/BalancesTable.tsx
@@ -5,7 +5,10 @@ import Button, { LinkButton } from '../components/Button'
 import { notify } from '../utils/notifications'
 import { ArrowSmDownIcon, ExclamationIcon } from '@heroicons/react/outline'
 import { Market } from '@project-serum/serum'
-import { getTokenBySymbol } from '@blockworks-foundation/mango-client'
+import {
+  getMarketIndexBySymbol,
+  getTokenBySymbol,
+} from '@blockworks-foundation/mango-client'
 import { useState } from 'react'
 import Loading from './Loading'
 import { useViewport } from '../hooks/useViewport'
@@ -39,10 +42,42 @@ const BalancesTable = ({ showZeroBalances = false }) => {
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const mangoClient = useMangoStore((s) => s.connection.client)
+  const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
+  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
+  const setMangoStore = useMangoStore((s) => s.set)
+  const price = useMangoStore((s) => s.tradeForm.price)
+  const mangoGroupCache = useMangoStore((s) => s.selectedMangoGroup.cache)
   const { width } = useViewport()
   const [submitting, setSubmitting] = useState(false)
   const isMobile = width ? width < breakpoints.md : false
 
+  const handleSizeClick = (size, symbol) => {
+    const step = selectedMarket.minOrderSize
+    const marketIndex = getMarketIndexBySymbol(
+      mangoGroupConfig,
+      marketConfig.baseSymbol
+    )
+    const priceOrDefault = price
+      ? price
+      : mangoGroup.getPrice(marketIndex, mangoGroupCache).toNumber()
+    if (symbol === 'USDC') {
+      const baseSize = Math.floor(size / priceOrDefault / step) * step
+      setMangoStore((state) => {
+        state.tradeForm.baseSize = baseSize
+        state.tradeForm.quoteSize = (baseSize * priceOrDefault).toFixed(2)
+        state.tradeForm.side = 'buy'
+      })
+    } else {
+      const roundedSize = Math.round(size / step) * step
+      const quoteSize = roundedSize * priceOrDefault
+      setMangoStore((state) => {
+        state.tradeForm.baseSize = roundedSize
+        state.tradeForm.quoteSize = quoteSize.toFixed(2)
+        state.tradeForm.side = 'sell'
+      })
+    }
+  }
+
   const handleOpenDepositModal = useCallback((symbol) => {
     setActionSymbol(symbol)
     setShowDepositModal(true)
@@ -312,7 +347,26 @@ const BalancesTable = ({ showZeroBalances = false }) => {
                       <Td>{balance.borrows.toFixed()}</Td>
                       <Td>{balance.orders}</Td>
                       <Td>{balance.unsettled}</Td>
-                      <Td>{balance.net.toFixed()}</Td>
+                      <Td>
+                        {marketConfig.kind === 'spot' &&
+                        marketConfig.name.includes(balance.symbol) &&
+                        selectedMarket ? (
+                          <span
+                            className={
+                              balance.net.toNumber() > 0
+                                ? 'cursor-pointer underline hover:no-underline'
+                                : ''
+                            }
+                            onClick={() =>
+                              handleSizeClick(balance.net, balance.symbol)
+                            }
+                          >
+                            {balance.net.toFixed()}
+                          </span>
+                        ) : (
+                          balance.net.toFixed()
+                        )}
+                      </Td>
                       <Td>{formatUsdValue(balance.value)}</Td>
                       <Td>
                         <span className="text-th-green">
@@ -375,8 +429,8 @@ const BalancesTable = ({ showZeroBalances = false }) => {
                 {items.map((balance, index) => (
                   <ExpandableRow
                     buttonTemplate={
-                      <>
-                        <div className="col-span-7 flex items-center text-fgd-1">
+                      <div className="col-span-11 flex items-center justify-between text-fgd-1">
+                        <div className="flex items-center text-fgd-1">
                           <img
                             alt=""
                             width="20"
@@ -387,10 +441,10 @@ const BalancesTable = ({ showZeroBalances = false }) => {
 
                           {balance.symbol}
                         </div>
-                        <div className="col-span-4 text-fgd-1 text-right">
+                        <div className="mr-1.5 text-fgd-1 text-right">
                           {balance.net.toFixed()}
                         </div>
-                      </>
+                      </div>
                     }
                     key={`${balance.symbol}${index}`}
                     index={index}
@@ -456,6 +510,21 @@ const BalancesTable = ({ showZeroBalances = false }) => {
                     }
                   />
                 ))}
+
+                {showDepositModal && (
+                  <DepositModal
+                    isOpen={showDepositModal}
+                    onClose={() => setShowDepositModal(false)}
+                    tokenSymbol={actionSymbol}
+                  />
+                )}
+                {showWithdrawModal && (
+                  <WithdrawModal
+                    isOpen={showWithdrawModal}
+                    onClose={() => setShowWithdrawModal(false)}
+                    tokenSymbol={actionSymbol}
+                  />
+                )}
               </>
             )
           ) : (

diff --git a/components/ButtonGroup.tsx b/components/ButtonGroup.tsx
@@ -0,0 +1,56 @@
+import { FunctionComponent } from 'react'
+
+interface ButtonGroupProps {
+  activeValue: string
+  className?: string
+  onChange: (x) => void
+  unit?: string
+  values: Array<string>
+}
+
+const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
+  activeValue,
+  className,
+  unit,
+  values,
+  onChange,
+}) => {
+  return (
+    <div className="bg-th-bkg-3 rounded-md">
+      <div className="flex relative">
+        {activeValue ? (
+          <div
+            className={`absolute bg-th-bkg-4 default-transition h-full left-0 top-0 rounded-md transform`}
+            style={{
+              transform: `translateX(${
+                values.findIndex((v) => v === activeValue) * 100
+              }%)`,
+              width: `${100 / values.length}%`,
+            }}
+          />
+        ) : null}
+        {values.map((v, i) => (
+          <button
+            className={`${className} cursor-pointer default-transition font-normal px-2 py-1.5 relative rounded-md text-center text-xs w-1/2
+              ${
+                v === activeValue
+                  ? `text-th-primary`
+                  : `text-th-fgd-1 opacity-70 hover:opacity-100`
+              }
+            `}
+            key={`${v}${i}`}
+            onClick={() => onChange(v)}
+            style={{
+              width: `${100 / values.length}%`,
+            }}
+          >
+            {v}
+            {unit}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ButtonGroup