add redeem all mngo button

2021-08-04 14:31:32 -04:00 · 2021-08-04 14:31:32 -04:00 · 96b50431ca
parent 52d98d28c2
commit 96b50431ca
4 changed files with 82 additions and 17 deletions
--- a/components/MarginInfo.tsx
+++ b/components/MarginInfo.tsx
@ -1,8 +1,15 @@
-import { ZERO_I80F48 } from '@blockworks-foundation/mango-client'
+import {
+  nativeToUi,
+  ZERO_BN,
+  ZERO_I80F48,
+} from '@blockworks-foundation/mango-client'
 import { HeartIcon } from '@heroicons/react/outline'
-import useMangoStore from '../stores/useMangoStore'
+import { useMemo } from 'react'
+import useMangoStore, { mangoClient, MNGO_INDEX } from '../stores/useMangoStore'
+import { notify } from '../utils/notifications'
+import Button from './Button'
 import FloatingElement from './FloatingElement'
-import { ElementTitle } from './styles'
+// import { ElementTitle } from './styles'
 import Tooltip from './Tooltip'

 export default function MarginInfo() {
@ -10,6 +17,7 @@ export default function MarginInfo() {
  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
  const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const actions = useMangoStore((s) => s.actions)

  const maintHealth = mangoAccount
    ? mangoAccount.getHealthRatio(mangoGroup, mangoCache, 'Maint')
@ -19,15 +27,53 @@ export default function MarginInfo() {
    ? mangoAccount.computeValue(mangoGroup, mangoCache)
    : ZERO_I80F48

+  const mngoAccrued = useMemo(() => {
+    return mangoAccount
+      ? mangoAccount.perpAccounts.reduce((acc, perpAcct) => {
+          return perpAcct.mngoAccrued.add(acc)
+        }, ZERO_BN)
+      : ZERO_BN
+  }, [mangoAccount])
+
  // const leverage =
  //   mangoAccount && equity.gt(ZERO_I80F48)
  //     ? mangoAccount.getLiabsVal(mangoGroup, mangoCache).div(equity)
  //     : 0.0

+  const handleRedeemMngo = async () => {
+    const wallet = useMangoStore.getState().wallet.current
+    const mngoNodeBank =
+      mangoGroup.rootBankAccounts[MNGO_INDEX].nodeBankAccounts[0]
+
+    try {
+      const txid = await mangoClient.redeemAllMngo(
+        mangoGroup,
+        mangoAccount,
+        wallet,
+        mangoGroup.tokens[MNGO_INDEX].rootBank,
+        mngoNodeBank.publicKey,
+        mngoNodeBank.vault
+      )
+      actions.fetchMangoAccounts()
+      notify({
+        title: 'Successfully redeemed MNGO',
+        description: '',
+        txid,
+      })
+    } catch (e) {
+      notify({
+        title: 'Error redeeming MNGO',
+        description: e.message,
+        txid: e.txid,
+        type: 'error',
+      })
+    }
+  }
+
  return (
    <FloatingElement showConnect>
      <div className={!connected ? 'filter blur-sm' : undefined}>
-        <ElementTitle>Account</ElementTitle>
+        {/* <ElementTitle>Account</ElementTitle> */}
        <div>
          <div>
            <div className="flex justify-between pt-2 pb-2">
@ -90,6 +136,29 @@ export default function MarginInfo() {
                  : 0}
              </div>
            </div>
+            <div className={`flex justify-between pt-2 pb-2`}>
+              <div className="font-normal text-th-fgd-3 leading-4">
+                MNGO Accrued
+              </div>
+              <div className={`text-th-fgd-1`}>
+                {
+                  <Button
+                    onClick={handleRedeemMngo}
+                    className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
+                    disabled={mngoAccrued.eq(ZERO_BN)}
+                  >
+                    <span>
+                      Redeem{' '}
+                      {nativeToUi(
+                        mngoAccrued.toNumber(),
+                        mangoGroup.tokens[MNGO_INDEX].decimals
+                      )}{' '}
+                      MNGO
+                    </span>
+                  </Button>
+                }
+              </div>
+            </div>
            {/* <div className="flex justify-between pt-2 pb-2">
              <Tooltip content="Must be above 0% to borrow funds">
                <div className="cursor-help font-normal text-th-fgd-3 border-b border-th-fgd-3 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3">
--- a/components/PositionsTable.tsx
+++ b/components/PositionsTable.tsx
@ -246,11 +246,7 @@ const PositionsTable = () => {
                                  onClick={() => handleRedeemMngo(perpMarket)}
                                  className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
                                >
-                                  {settlingPerpAcc == perpAccount ? (
-                                    <Loading />
-                                  ) : (
-                                    <span>Redeem MNGO</span>
-                                  )}
+                                  <span>Redeem MNGO</span>
                                </Button>
                              ) : null}
                              <Button
--- a/components/TradePageGrid.tsx
+++ b/components/TradePageGrid.tsx
@ -28,13 +28,13 @@ export const defaultLayouts = {
    { i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
    { i: 'marketPosition', x: 9, y: 3, w: 3, h: 15 },
    { i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
-    { i: 'marginInfo', x: 9, y: 4, w: 3, h: 14 },
+    { i: 'marginInfo', x: 9, y: 4, w: 3, h: 16 },
  ],
  lg: [
    { i: 'tvChart', x: 0, y: 0, w: 8, h: 29, minW: 2 },
    { i: 'depositWithdraw', x: 8, y: 0, w: 4, h: 6 },
    { i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
-    { i: 'marginInfo', x: 8, y: 1, w: 4, h: 14, minW: 2 },
+    { i: 'marginInfo', x: 8, y: 1, w: 4, h: 16, minW: 2 },
    { i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
    { i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
    { i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
@ -44,7 +44,7 @@ export const defaultLayouts = {
    { i: 'tvChart', x: 0, y: 0, w: 8, h: 29, minW: 2 },
    { i: 'depositWithdraw', x: 8, y: 0, w: 4, h: 6 },
    { i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
-    { i: 'marginInfo', x: 8, y: 1, w: 4, h: 14, minW: 2 },
+    { i: 'marginInfo', x: 8, y: 1, w: 4, h: 16, minW: 2 },
    { i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
    { i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
    { i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
@ -54,7 +54,7 @@ export const defaultLayouts = {
    { i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 },
    { i: 'depositWithdraw', x: 0, y: 1, w: 6, h: 15 },
    { i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
-    { i: 'marginInfo', x: 6, y: 1, w: 6, h: 15, minW: 2 },
+    { i: 'marginInfo', x: 6, y: 1, w: 6, h: 16, minW: 2 },
    { i: 'tradeForm', x: 0, y: 2, w: 12, h: 13, minW: 3 },
    { i: 'orderbook', x: 0, y: 3, w: 6, h: 17, minW: 3 },
    { i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 },
@ -63,7 +63,7 @@ export const defaultLayouts = {
  xs: [
    { i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 },
    { i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
-    { i: 'marginInfo', x: 0, y: 2, w: 6, h: 14, minW: 2 },
+    { i: 'marginInfo', x: 0, y: 2, w: 6, h: 16, minW: 2 },
    { i: 'tradeForm', x: 0, y: 3, w: 12, h: 13, minW: 3 },
    { i: 'orderbook', x: 0, y: 4, w: 6, h: 17, minW: 3 },
    { i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 },
@ -71,7 +71,7 @@ export const defaultLayouts = {
  ],
 }

-export const GRID_LAYOUT_KEY = 'mangoSavedLayouts-3.0.2'
+export const GRID_LAYOUT_KEY = 'mangoSavedLayouts-3.0.3'

 const TradePageGrid = () => {
  const { uiLocked } = useMangoStore((s) => s.settings)
@ -93,7 +93,7 @@ const TradePageGrid = () => {
  return (
    <ResponsiveGridLayout
      className="layout"
-      layouts={defaultLayouts}
+      layouts={savedLayouts || defaultLayouts}
      breakpoints={{ xl: 1600, lg: 1200, md: 1110, sm: 768, xs: 0 }}
      cols={{ xl: 12, lg: 12, md: 12, sm: 12, xs: 1 }}
      rowHeight={15}
--- a/yarn.lock
+++ b/yarn.lock
@ -995,7 +995,7 @@

 "@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git":
  version "3.0.2"
-  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#aae162e490252bf3be853ecd029ea510a924e667"
+  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#68ca30c6838c2979eccd16bbac1018d9576888d7"
  dependencies:
    "@project-serum/serum" "^0.13.45"
    "@project-serum/sol-wallet-adapter" "^0.2.0"