From 53572e8824f0ad16197bab65e41ce9ee67808e07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Wed, 11 Jan 2023 18:38:51 +0100
Subject: [PATCH 01/36] wip

---
 components/modals/CloseAccountModal.tsx | 48 ++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index 1d9341f5..b1ed66d1 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -4,21 +4,35 @@ import mangoStore from '@store/mangoStore'
 import { notify } from '../../utils/notifications'
 import Button from '../shared/Button'
 import { useTranslation } from 'next-i18next'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import BounceLoader from '../shared/BounceLoader'
 import { MangoAccount } from '@blockworks-foundation/mango-v4'
 import { TrashIcon } from '@heroicons/react/20/solid'
+import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
 
 const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation('common')
   const [loading, setLoading] = useState(false)
   const set = mangoStore((s) => s.set)
+  const openOrders = Object.values(mangoStore((s) => s.mangoAccount.openOrders))
+  const mangoAccount = mangoStore((s) => s.mangoAccount)
+  const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
+  const openPerpPositions = Object.values(perpPositions).filter((p) =>
+    p.basePositionLots.toNumber()
+  )
+  const unsettledBalances = Object.values(mangoAccount.spotBalances).filter(
+    (x) => x.unsettled && x.unsettled > 0
+  )
+  const unsettledPerpPositions = useUnsettledPerpPositions()
+  const [hasBorrows] = useState(false)
+  const [hasOpenPositions, setHasOpenPositions] = useState(false)
 
   const handleCloseMangoAccount = async () => {
     const client = mangoStore.getState().client
     const mangoAccount = mangoStore.getState().mangoAccount.current
     const mangoAccounts = mangoStore.getState().mangoAccounts
     const group = mangoStore.getState().group
+
     if (!mangoAccount || !group) return
     setLoading(true)
     try {
@@ -50,16 +64,42 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
     }
   }
 
+  useEffect(() => {
+    if (mangoAccount) {
+      //   if (mangoAccount.borrows.some((b) => b.gt(ZERO_I80F48))) {
+      //     setHasBorrows(true)
+      //   }
+      if (openPerpPositions.length || unsettledPerpPositions.length) {
+        setHasOpenPositions(true)
+      }
+    }
+  }, [mangoAccount])
+
+  const isDisabled =
+    (openOrders && openOrders.length > 0) ||
+    hasBorrows ||
+    hasOpenPositions ||
+    !!unsettledBalances.length
+  console.log(isDisabled)
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="h-56">
+      <div className="h-[300px]">
         {loading ? (
           <BounceLoader loadingMessage={t('closing-account')} />
         ) : (
           <div className="flex h-full flex-col justify-between">
-            <div className="pb-6">
+            <div className="space-y-4 pb-6">
               <h2 className="mb-1">{t('close-account')}</h2>
-              <p>{t('close-account-desc')}</p>
+              <p>
+                You can close your Mango account and recover the small amount
+                amount of SOL used to cover rent exemption.{' '}
+              </p>
+              <p>To close account you must:</p>
+              <ul>
+                <li>Close all borrows</li>
+                <li>Close and settle all Perp positions </li>
+                <li>Close all open orders</li>
+              </ul>
             </div>
             <Button
               className="w-full"

From 4627c0e0705857a2bf8235df50331a6201adfeff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Wed, 11 Jan 2023 23:37:58 +0100
Subject: [PATCH 02/36] fix

---
 components/RepayForm.tsx                |  8 +++--
 components/modals/CloseAccountModal.tsx | 45 ++++++++++++++++++++-----
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/components/RepayForm.tsx b/components/RepayForm.tsx
index bc0c19bd..c342082e 100644
--- a/components/RepayForm.tsx
+++ b/components/RepayForm.tsx
@@ -119,13 +119,16 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
 
   const handleDeposit = useCallback(
     async (amount: string) => {
+      //to not leave some dust on account we round amount by this number
+      //with reduce only set to true we take only what is needed to be
+      //deposited in need to repay borrow
+      const roundUpBy = 1.01
       const client = mangoStore.getState().client
       const group = mangoStore.getState().group
       const actions = mangoStore.getState().actions
       const mangoAccount = mangoStore.getState().mangoAccount.current
 
       if (!mangoAccount || !group || !bank || !wallet) return
-      console.log('inputAmount: ', amount)
 
       setSubmitting(true)
       try {
@@ -133,7 +136,8 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
           group,
           mangoAccount,
           bank.mint,
-          parseFloat(amount)
+          parseFloat(amount) * roundUpBy,
+          true
         )
         notify({
           title: 'Transaction confirmed',
diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index b1ed66d1..808e7d96 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -15,23 +15,25 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
   const [loading, setLoading] = useState(false)
   const set = mangoStore((s) => s.set)
   const openOrders = Object.values(mangoStore((s) => s.mangoAccount.openOrders))
+  const hasOpenOrders =
+    openOrders.length && openOrders.filter((x) => x.length).length > 0
   const mangoAccount = mangoStore((s) => s.mangoAccount)
   const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
   const openPerpPositions = Object.values(perpPositions).filter((p) =>
     p.basePositionLots.toNumber()
   )
+  const group = mangoStore.getState().group
   const unsettledBalances = Object.values(mangoAccount.spotBalances).filter(
     (x) => x.unsettled && x.unsettled > 0
   )
   const unsettledPerpPositions = useUnsettledPerpPositions()
-  const [hasBorrows] = useState(false)
+  const [hasBorrows, setHasBorrows] = useState(false)
   const [hasOpenPositions, setHasOpenPositions] = useState(false)
 
   const handleCloseMangoAccount = async () => {
     const client = mangoStore.getState().client
     const mangoAccount = mangoStore.getState().mangoAccount.current
     const mangoAccounts = mangoStore.getState().mangoAccounts
-    const group = mangoStore.getState().group
 
     if (!mangoAccount || !group) return
     setLoading(true)
@@ -65,22 +67,46 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
   }
 
   useEffect(() => {
-    if (mangoAccount) {
-      //   if (mangoAccount.borrows.some((b) => b.gt(ZERO_I80F48))) {
-      //     setHasBorrows(true)
-      //   }
+    if (mangoAccount && group) {
+      if (
+        mangoAccount.current
+          ?.tokensActive()
+          .filter(
+            (token) =>
+              token.balanceUi(
+                group.getFirstBankByTokenIndex(token.tokenIndex)
+              ) < 0
+          ).length
+      ) {
+        console.log(
+          mangoAccount.current
+            ?.tokensActive()
+            .map((token) => ({
+              ...token,
+              balance: token.balanceUi(
+                group.getFirstBankByTokenIndex(token.tokenIndex)
+              ),
+            }))
+        )
+        setHasBorrows(true)
+      }
       if (openPerpPositions.length || unsettledPerpPositions.length) {
         setHasOpenPositions(true)
       }
     }
-  }, [mangoAccount])
+  }, [mangoAccount, group])
 
   const isDisabled =
-    (openOrders && openOrders.length > 0) ||
+    hasOpenOrders ||
     hasBorrows ||
     hasOpenPositions ||
     !!unsettledBalances.length
-  console.log(isDisabled)
+  console.log({
+    hasOpenOrders,
+    hasBorrows,
+    hasOpenPositions,
+    unsettle: !!unsettledBalances.length,
+  })
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <div className="h-[300px]">
@@ -103,6 +129,7 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
             </div>
             <Button
               className="w-full"
+              disabled={isDisabled}
               onClick={handleCloseMangoAccount}
               size="large"
             >

From 5f1a52ea7eb3e104c9058d7d78b32cf43e7bf22b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Wed, 11 Jan 2023 23:42:42 +0100
Subject: [PATCH 03/36] wip

---
 components/modals/CloseAccountModal.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index 808e7d96..af297679 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -6,7 +6,7 @@ import Button from '../shared/Button'
 import { useTranslation } from 'next-i18next'
 import { useEffect, useState } from 'react'
 import BounceLoader from '../shared/BounceLoader'
-import { MangoAccount } from '@blockworks-foundation/mango-v4'
+import { MangoAccount, TokenPosition } from '@blockworks-foundation/mango-v4'
 import { TrashIcon } from '@heroicons/react/20/solid'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
 
@@ -72,22 +72,12 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
         mangoAccount.current
           ?.tokensActive()
           .filter(
-            (token) =>
+            (token: TokenPosition) =>
               token.balanceUi(
                 group.getFirstBankByTokenIndex(token.tokenIndex)
               ) < 0
           ).length
       ) {
-        console.log(
-          mangoAccount.current
-            ?.tokensActive()
-            .map((token) => ({
-              ...token,
-              balance: token.balanceUi(
-                group.getFirstBankByTokenIndex(token.tokenIndex)
-              ),
-            }))
-        )
         setHasBorrows(true)
       }
       if (openPerpPositions.length || unsettledPerpPositions.length) {

From 509e486a5516ff5ae0253ee10e0bda7f95005151 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Thu, 12 Jan 2023 14:23:16 +0100
Subject: [PATCH 04/36] transalations

---
 components/modals/CloseAccountModal.tsx | 123 +++++++++++++++++++-----
 pages/index.tsx                         |   1 +
 pages/swap.tsx                          |   1 +
 pages/trade.tsx                         |   1 +
 public/locales/en/close-account.json    |  19 ++++
 public/locales/es/close-account.json    |  19 ++++
 public/locales/ru/close-account.json    |  19 ++++
 public/locales/zh/close-account.json    |  19 ++++
 public/locales/zh_tw/close-account.json |  19 ++++
 9 files changed, 199 insertions(+), 22 deletions(-)
 create mode 100644 public/locales/en/close-account.json
 create mode 100644 public/locales/es/close-account.json
 create mode 100644 public/locales/ru/close-account.json
 create mode 100644 public/locales/zh/close-account.json
 create mode 100644 public/locales/zh_tw/close-account.json

diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index af297679..70a6fa8f 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -4,17 +4,28 @@ import mangoStore from '@store/mangoStore'
 import { notify } from '../../utils/notifications'
 import Button from '../shared/Button'
 import { useTranslation } from 'next-i18next'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import BounceLoader from '../shared/BounceLoader'
-import { MangoAccount, TokenPosition } from '@blockworks-foundation/mango-v4'
-import { TrashIcon } from '@heroicons/react/20/solid'
+import {
+  MangoAccount,
+  TokenPosition,
+  toUiDecimalsForQuote,
+} from '@blockworks-foundation/mango-v4'
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  TrashIcon,
+} from '@heroicons/react/20/solid'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
+import { getMultipleAccounts } from '@project-serum/anchor/dist/cjs/utils/rpc'
+import { formatFixedDecimals } from 'utils/numbers'
 
 const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
-  const { t } = useTranslation('common')
+  const { t } = useTranslation(['close-account'])
   const [loading, setLoading] = useState(false)
   const set = mangoStore((s) => s.set)
   const openOrders = Object.values(mangoStore((s) => s.mangoAccount.openOrders))
+  const connection = mangoStore.getState().connection
   const hasOpenOrders =
     openOrders.length && openOrders.filter((x) => x.length).length > 0
   const mangoAccount = mangoStore((s) => s.mangoAccount)
@@ -29,6 +40,7 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
   const unsettledPerpPositions = useUnsettledPerpPositions()
   const [hasBorrows, setHasBorrows] = useState(false)
   const [hasOpenPositions, setHasOpenPositions] = useState(false)
+  const [totalAccountSOL, setTotalAccountSOL] = useState(0)
 
   const handleCloseMangoAccount = async () => {
     const client = mangoStore.getState().client
@@ -66,6 +78,23 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
     }
   }
 
+  const fetchTotalAccountSOL = useCallback(async () => {
+    if (!mangoAccount) {
+      return
+    }
+    const accountKeys = [
+      mangoAccount.current!.publicKey,
+      ...mangoAccount.openOrderAccounts.map((x) => x.address),
+    ]
+    const accounts = await getMultipleAccounts(connection, accountKeys)
+    const lamports =
+      accounts.reduce((total, account) => {
+        return total + account!.account.lamports
+      }, 0) * 0.000000001
+
+    setTotalAccountSOL(lamports)
+  }, [mangoAccount])
+
   useEffect(() => {
     if (mangoAccount && group) {
       if (
@@ -83,6 +112,7 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
       if (openPerpPositions.length || unsettledPerpPositions.length) {
         setHasOpenPositions(true)
       }
+      fetchTotalAccountSOL()
     }
   }, [mangoAccount, group])
 
@@ -91,32 +121,81 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
     hasBorrows ||
     hasOpenPositions ||
     !!unsettledBalances.length
-  console.log({
-    hasOpenOrders,
-    hasBorrows,
-    hasOpenPositions,
-    unsettle: !!unsettledBalances.length,
-  })
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="h-[300px]">
+      <div className="h-[550px]">
         {loading ? (
           <BounceLoader loadingMessage={t('closing-account')} />
         ) : (
           <div className="flex h-full flex-col justify-between">
-            <div className="space-y-4 pb-6">
+            <div className="space-y-4">
               <h2 className="mb-1">{t('close-account')}</h2>
-              <p>
-                You can close your Mango account and recover the small amount
-                amount of SOL used to cover rent exemption.{' '}
-              </p>
-              <p>To close account you must:</p>
-              <ul>
-                <li>Close all borrows</li>
-                <li>Close and settle all Perp positions </li>
-                <li>Close all open orders</li>
-              </ul>
+              <p>{t('description')}</p>
+              <p>{t('youMust')}:</p>
+              <div className="overflow-none space-y-2 rounded-md bg-th-bkg-4 p-2 sm:p-4">
+                <div className="flex items-center text-th-fgd-2">
+                  {hasBorrows ? (
+                    <ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-down" />
+                  ) : (
+                    <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
+                  )}
+                  {t('close-all-borrows')}
+                </div>
+                <div className="flex items-center text-th-fgd-2">
+                  {hasOpenPositions ? (
+                    <ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-down" />
+                  ) : (
+                    <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
+                  )}
+                  {t('close-perp-positions')}
+                </div>
+                <div className="flex items-center text-th-fgd-2">
+                  {hasOpenOrders ? (
+                    <ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-down" />
+                  ) : (
+                    <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
+                  )}
+                  {t('close-open-orders')}
+                </div>
+                <div className="flex items-center text-th-fgd-2">
+                  {unsettledBalances.length ? (
+                    <ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-down" />
+                  ) : (
+                    <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
+                  )}
+                  {t('settle-balances')}
+                </div>
+              </div>
+              <p>By closing your account you will:</p>
+              <div className="overflow-none space-y-2 rounded-md bg-th-bkg-4 p-2 sm:p-4">
+                <div className="flex items-center text-th-fgd-2">
+                  <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
+                  {t('delete-your-mango-account')}
+                </div>
+                <div className="flex items-center text-th-fgd-2">
+                  <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
+                  {t('withdraw-assets-worth', {
+                    value:
+                      mangoAccount && group
+                        ? formatFixedDecimals(
+                            toUiDecimalsForQuote(
+                              mangoAccount!.current!.getEquity(group).toNumber()
+                            ),
+                            false,
+                            true
+                          )
+                        : 0,
+                  })}
+                </div>
+                <div className="flex items-center text-th-fgd-2">
+                  <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
+                  {t('recover-x-sol', {
+                    amount: totalAccountSOL.toFixed(3),
+                  })}
+                </div>
+              </div>
             </div>
+
             <Button
               className="w-full"
               disabled={isDisabled}
diff --git a/pages/index.tsx b/pages/index.tsx
index c1871627..9f1444c8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -14,6 +14,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
         'swap',
         'trade',
         'activity',
+        'close-account'
       ])),
     },
   }
diff --git a/pages/swap.tsx b/pages/swap.tsx
index ce461e5b..e12f7fc4 100644
--- a/pages/swap.tsx
+++ b/pages/swap.tsx
@@ -14,6 +14,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
         'swap',
         'settings',
         'trade',
+        'close-account'
       ])),
     },
   }
diff --git a/pages/trade.tsx b/pages/trade.tsx
index 6082bdc5..e64892d3 100644
--- a/pages/trade.tsx
+++ b/pages/trade.tsx
@@ -22,6 +22,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
         'profile',
         'settings',
         'trade',
+        'close-account',
       ])),
     },
   }
diff --git a/public/locales/en/close-account.json b/public/locales/en/close-account.json
new file mode 100644
index 00000000..4071d0f6
--- /dev/null
+++ b/public/locales/en/close-account.json
@@ -0,0 +1,19 @@
+{
+    "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
+    "youMust": "To close account you must",
+    "are-you-sure": "Are you sure?",
+    "before-you-continue": "Before you can continue",
+    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
+    "close-account": "Close Account",
+    "close-all-borrows": "Close all borrows",
+    "close-open-orders": "Close all open orders",
+    "close-perp-positions": "Close and settle all futures positons",
+    "closing-account-will": "Closing your Mango Account will:",
+    "delete-your-account": "Delete your Mango Account",
+    "error-deleting-account": "Error deleting your Mango Account",
+    "goodbye": "Until next time 👋",
+    "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
+    "settle-balances": "Settle all balances",
+    "transaction-confirmed": "Transaction Confirmed",
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}
\ No newline at end of file
diff --git a/public/locales/es/close-account.json b/public/locales/es/close-account.json
new file mode 100644
index 00000000..4071d0f6
--- /dev/null
+++ b/public/locales/es/close-account.json
@@ -0,0 +1,19 @@
+{
+    "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
+    "youMust": "To close account you must",
+    "are-you-sure": "Are you sure?",
+    "before-you-continue": "Before you can continue",
+    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
+    "close-account": "Close Account",
+    "close-all-borrows": "Close all borrows",
+    "close-open-orders": "Close all open orders",
+    "close-perp-positions": "Close and settle all futures positons",
+    "closing-account-will": "Closing your Mango Account will:",
+    "delete-your-account": "Delete your Mango Account",
+    "error-deleting-account": "Error deleting your Mango Account",
+    "goodbye": "Until next time 👋",
+    "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
+    "settle-balances": "Settle all balances",
+    "transaction-confirmed": "Transaction Confirmed",
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}
\ No newline at end of file
diff --git a/public/locales/ru/close-account.json b/public/locales/ru/close-account.json
new file mode 100644
index 00000000..4071d0f6
--- /dev/null
+++ b/public/locales/ru/close-account.json
@@ -0,0 +1,19 @@
+{
+    "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
+    "youMust": "To close account you must",
+    "are-you-sure": "Are you sure?",
+    "before-you-continue": "Before you can continue",
+    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
+    "close-account": "Close Account",
+    "close-all-borrows": "Close all borrows",
+    "close-open-orders": "Close all open orders",
+    "close-perp-positions": "Close and settle all futures positons",
+    "closing-account-will": "Closing your Mango Account will:",
+    "delete-your-account": "Delete your Mango Account",
+    "error-deleting-account": "Error deleting your Mango Account",
+    "goodbye": "Until next time 👋",
+    "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
+    "settle-balances": "Settle all balances",
+    "transaction-confirmed": "Transaction Confirmed",
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}
\ No newline at end of file
diff --git a/public/locales/zh/close-account.json b/public/locales/zh/close-account.json
new file mode 100644
index 00000000..4071d0f6
--- /dev/null
+++ b/public/locales/zh/close-account.json
@@ -0,0 +1,19 @@
+{
+    "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
+    "youMust": "To close account you must",
+    "are-you-sure": "Are you sure?",
+    "before-you-continue": "Before you can continue",
+    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
+    "close-account": "Close Account",
+    "close-all-borrows": "Close all borrows",
+    "close-open-orders": "Close all open orders",
+    "close-perp-positions": "Close and settle all futures positons",
+    "closing-account-will": "Closing your Mango Account will:",
+    "delete-your-account": "Delete your Mango Account",
+    "error-deleting-account": "Error deleting your Mango Account",
+    "goodbye": "Until next time 👋",
+    "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
+    "settle-balances": "Settle all balances",
+    "transaction-confirmed": "Transaction Confirmed",
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}
\ No newline at end of file
diff --git a/public/locales/zh_tw/close-account.json b/public/locales/zh_tw/close-account.json
new file mode 100644
index 00000000..4071d0f6
--- /dev/null
+++ b/public/locales/zh_tw/close-account.json
@@ -0,0 +1,19 @@
+{
+    "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
+    "youMust": "To close account you must",
+    "are-you-sure": "Are you sure?",
+    "before-you-continue": "Before you can continue",
+    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
+    "close-account": "Close Account",
+    "close-all-borrows": "Close all borrows",
+    "close-open-orders": "Close all open orders",
+    "close-perp-positions": "Close and settle all futures positons",
+    "closing-account-will": "Closing your Mango Account will:",
+    "delete-your-account": "Delete your Mango Account",
+    "error-deleting-account": "Error deleting your Mango Account",
+    "goodbye": "Until next time 👋",
+    "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
+    "settle-balances": "Settle all balances",
+    "transaction-confirmed": "Transaction Confirmed",
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+}
\ No newline at end of file

From 99553974ed318798703e36cbc0987e6278a6b6fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Thu, 12 Jan 2023 14:34:12 +0100
Subject: [PATCH 05/36] fix

---
 components/modals/CloseAccountModal.tsx | 4 ++--
 public/locales/en/close-account.json    | 7 +++----
 public/locales/es/close-account.json    | 7 +++----
 public/locales/ru/close-account.json    | 7 +++----
 public/locales/zh/close-account.json    | 7 +++----
 public/locales/zh_tw/close-account.json | 7 +++----
 6 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index 70a6fa8f..33d6338f 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -131,7 +131,7 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
             <div className="space-y-4">
               <h2 className="mb-1">{t('close-account')}</h2>
               <p>{t('description')}</p>
-              <p>{t('youMust')}:</p>
+              <p>{t('you-must')}:</p>
               <div className="overflow-none space-y-2 rounded-md bg-th-bkg-4 p-2 sm:p-4">
                 <div className="flex items-center text-th-fgd-2">
                   {hasBorrows ? (
@@ -170,7 +170,7 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
               <div className="overflow-none space-y-2 rounded-md bg-th-bkg-4 p-2 sm:p-4">
                 <div className="flex items-center text-th-fgd-2">
                   <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
-                  {t('delete-your-mango-account')}
+                  {t('delete-your-account')}
                 </div>
                 <div className="flex items-center text-th-fgd-2">
                   <CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
diff --git a/public/locales/en/close-account.json b/public/locales/en/close-account.json
index 4071d0f6..e091ad14 100644
--- a/public/locales/en/close-account.json
+++ b/public/locales/en/close-account.json
@@ -1,10 +1,8 @@
 {
     "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
-    "youMust": "To close account you must",
+    "you-must": "To close account you must",
     "are-you-sure": "Are you sure?",
     "before-you-continue": "Before you can continue",
-    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
-    "close-account": "Close Account",
     "close-all-borrows": "Close all borrows",
     "close-open-orders": "Close all open orders",
     "close-perp-positions": "Close and settle all futures positons",
@@ -15,5 +13,6 @@
     "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
-    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}",
+    "close-account": "Close Account"
 }
\ No newline at end of file
diff --git a/public/locales/es/close-account.json b/public/locales/es/close-account.json
index 4071d0f6..e091ad14 100644
--- a/public/locales/es/close-account.json
+++ b/public/locales/es/close-account.json
@@ -1,10 +1,8 @@
 {
     "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
-    "youMust": "To close account you must",
+    "you-must": "To close account you must",
     "are-you-sure": "Are you sure?",
     "before-you-continue": "Before you can continue",
-    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
-    "close-account": "Close Account",
     "close-all-borrows": "Close all borrows",
     "close-open-orders": "Close all open orders",
     "close-perp-positions": "Close and settle all futures positons",
@@ -15,5 +13,6 @@
     "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
-    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}",
+    "close-account": "Close Account"
 }
\ No newline at end of file
diff --git a/public/locales/ru/close-account.json b/public/locales/ru/close-account.json
index 4071d0f6..e091ad14 100644
--- a/public/locales/ru/close-account.json
+++ b/public/locales/ru/close-account.json
@@ -1,10 +1,8 @@
 {
     "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
-    "youMust": "To close account you must",
+    "you-must": "To close account you must",
     "are-you-sure": "Are you sure?",
     "before-you-continue": "Before you can continue",
-    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
-    "close-account": "Close Account",
     "close-all-borrows": "Close all borrows",
     "close-open-orders": "Close all open orders",
     "close-perp-positions": "Close and settle all futures positons",
@@ -15,5 +13,6 @@
     "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
-    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}",
+    "close-account": "Close Account"
 }
\ No newline at end of file
diff --git a/public/locales/zh/close-account.json b/public/locales/zh/close-account.json
index 4071d0f6..e091ad14 100644
--- a/public/locales/zh/close-account.json
+++ b/public/locales/zh/close-account.json
@@ -1,10 +1,8 @@
 {
     "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
-    "youMust": "To close account you must",
+    "you-must": "To close account you must",
     "are-you-sure": "Are you sure?",
     "before-you-continue": "Before you can continue",
-    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
-    "close-account": "Close Account",
     "close-all-borrows": "Close all borrows",
     "close-open-orders": "Close all open orders",
     "close-perp-positions": "Close and settle all futures positons",
@@ -15,5 +13,6 @@
     "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
-    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}",
+    "close-account": "Close Account"
 }
\ No newline at end of file
diff --git a/public/locales/zh_tw/close-account.json b/public/locales/zh_tw/close-account.json
index 4071d0f6..e091ad14 100644
--- a/public/locales/zh_tw/close-account.json
+++ b/public/locales/zh_tw/close-account.json
@@ -1,10 +1,8 @@
 {
     "description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
-    "youMust": "To close account you must",
+    "you-must": "To close account you must",
     "are-you-sure": "Are you sure?",
     "before-you-continue": "Before you can continue",
-    "claim-x-mngo-rewards": "Claim {{amount}} MNGO rewards",
-    "close-account": "Close Account",
     "close-all-borrows": "Close all borrows",
     "close-open-orders": "Close all open orders",
     "close-perp-positions": "Close and settle all futures positons",
@@ -15,5 +13,6 @@
     "recover-x-sol": "Recover {{amount}} SOL (rent for your account)",
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
-    "withdraw-assets-worth": "Withdraw assets worth {{value}}"
+    "withdraw-assets-worth": "Withdraw assets worth {{value}}",
+    "close-account": "Close Account"
 }
\ No newline at end of file

From c661326641542bd63974e5652f43d49cc1d98f8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Thu, 12 Jan 2023 22:22:46 +0100
Subject: [PATCH 06/36] Revert "Revert "Merge pull request #56 from
 blockworks-foundation/feature/mango-router""

This reverts commit 774219cadd43ab69e76c573db1eae97dacc19107.
---
 components/swap/SwapForm.tsx        |   7 +-
 components/swap/useJupiterRoutes.ts |  95 --------------
 components/swap/useQuoteRoutes.ts   | 196 ++++++++++++++++++++++++++++
 types/jupiter.ts                    |   5 +-
 utils/constants.ts                  |   2 +
 5 files changed, 205 insertions(+), 100 deletions(-)
 delete mode 100644 components/swap/useJupiterRoutes.ts
 create mode 100644 components/swap/useQuoteRoutes.ts

diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 91e6b507..2fa8b8ed 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -23,7 +23,7 @@ import { Transition } from '@headlessui/react'
 import Button, { IconButton } from '../shared/Button'
 import Loading from '../shared/Loading'
 import { EnterBottomExitBottom } from '../shared/Transitions'
-import useJupiterRoutes from './useJupiterRoutes'
+import useQuoteRoutes from './useQuoteRoutes'
 import SheenLoader from '../shared/SheenLoader'
 import { HealthType } from '@blockworks-foundation/mango-v4'
 import {
@@ -80,7 +80,7 @@ const SwapForm = () => {
   const [debouncedAmountIn] = useDebounce(amountInFormValue, 300)
   const [debouncedAmountOut] = useDebounce(amountOutFormValue, 300)
   const { mangoAccount } = useMangoAccount()
-  const { connected } = useWallet()
+  const { connected, publicKey } = useWallet()
 
   const amountInAsDecimal: Decimal | null = useMemo(() => {
     return Number(debouncedAmountIn)
@@ -94,12 +94,13 @@ const SwapForm = () => {
       : new Decimal(0)
   }, [debouncedAmountOut])
 
-  const { bestRoute, routes } = useJupiterRoutes({
+  const { bestRoute, routes } = useQuoteRoutes({
     inputMint: inputBank?.mint.toString() || USDC_MINT,
     outputMint: outputBank?.mint.toString() || MANGO_MINT,
     amount: swapMode === 'ExactIn' ? debouncedAmountIn : debouncedAmountOut,
     slippage,
     swapMode,
+    wallet: publicKey?.toBase58(),
   })
 
   const setAmountInFormValue = useCallback(
diff --git a/components/swap/useJupiterRoutes.ts b/components/swap/useJupiterRoutes.ts
deleted file mode 100644
index 5a28743c..00000000
--- a/components/swap/useJupiterRoutes.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import Decimal from 'decimal.js'
-import { RouteInfo } from 'types/jupiter'
-import useJupiterSwapData from './useJupiterSwapData'
-
-type useJupiterPropTypes = {
-  inputMint: string
-  outputMint: string
-  amount: string
-  slippage: number
-  swapMode: string
-}
-
-const fetchJupiterRoutes = async (
-  inputMint = 'So11111111111111111111111111111111111111112',
-  outputMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
-  amount = 0,
-  slippage = 50,
-  swapMode = 'ExactIn',
-  feeBps = 0
-) => {
-  {
-    const paramsString = new URLSearchParams({
-      inputMint: inputMint.toString(),
-      outputMint: outputMint.toString(),
-      amount: amount.toString(),
-      slippageBps: Math.ceil(slippage * 100).toString(),
-      feeBps: feeBps.toString(),
-      swapMode,
-    }).toString()
-
-    const response = await fetch(
-      `https://quote-api.jup.ag/v4/quote?${paramsString}`
-    )
-
-    const res = await response.json()
-    const data = res.data
-
-    return {
-      routes: res.data,
-      bestRoute: data[0],
-    }
-  }
-}
-
-const useJupiterRoutes = ({
-  inputMint,
-  outputMint,
-  amount,
-  slippage,
-  swapMode,
-}: useJupiterPropTypes) => {
-  const { inputTokenInfo, outputTokenInfo } = useJupiterSwapData()
-
-  const decimals =
-    swapMode === 'ExactIn'
-      ? inputTokenInfo?.decimals || 6
-      : outputTokenInfo?.decimals || 6
-
-  const nativeAmount =
-    amount && !Number.isNaN(+amount)
-      ? new Decimal(amount).mul(10 ** decimals)
-      : new Decimal(0)
-
-  const res = useQuery<{ routes: RouteInfo[]; bestRoute: RouteInfo }, Error>(
-    ['swap-routes', inputMint, outputMint, amount, slippage, swapMode],
-    async () =>
-      fetchJupiterRoutes(
-        inputMint,
-        outputMint,
-        nativeAmount.toNumber(),
-        slippage,
-        swapMode
-      ),
-    {
-      enabled: amount ? true : false,
-    }
-  )
-
-  return amount
-    ? {
-        ...(res.data ?? {
-          routes: [],
-          bestRoute: undefined,
-        }),
-        isLoading: res.isLoading,
-      }
-    : {
-        routes: [],
-        bestRoute: undefined,
-        isLoading: false,
-      }
-}
-
-export default useJupiterRoutes
diff --git a/components/swap/useQuoteRoutes.ts b/components/swap/useQuoteRoutes.ts
new file mode 100644
index 00000000..121db766
--- /dev/null
+++ b/components/swap/useQuoteRoutes.ts
@@ -0,0 +1,196 @@
+import { PublicKey } from '@solana/web3.js'
+import { useQuery } from '@tanstack/react-query'
+import Decimal from 'decimal.js'
+import { RouteInfo } from 'types/jupiter'
+import { MANGO_ROUTER_API_URL } from 'utils/constants'
+import useJupiterSwapData from './useJupiterSwapData'
+
+type useQuoteRoutesPropTypes = {
+  inputMint: string
+  outputMint: string
+  amount: string
+  slippage: number
+  swapMode: string
+  wallet: string | undefined | null
+}
+
+const fetchJupiterRoutes = async (
+  inputMint = 'So11111111111111111111111111111111111111112',
+  outputMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+  amount = 0,
+  slippage = 50,
+  swapMode = 'ExactIn',
+  feeBps = 0
+) => {
+  {
+    const paramsString = new URLSearchParams({
+      inputMint: inputMint.toString(),
+      outputMint: outputMint.toString(),
+      amount: amount.toString(),
+      slippageBps: Math.ceil(slippage * 100).toString(),
+      feeBps: feeBps.toString(),
+      swapMode,
+    }).toString()
+
+    const response = await fetch(
+      `https://quote-api.jup.ag/v4/quote?${paramsString}`
+    )
+
+    const res = await response.json()
+    const data = res.data
+
+    return {
+      routes: res.data as RouteInfo[],
+      bestRoute: (data.length ? data[0] : null) as RouteInfo | null,
+    }
+  }
+}
+
+const fetchMangoRoutes = async (
+  inputMint = 'So11111111111111111111111111111111111111112',
+  outputMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+  amount = 0,
+  slippage = 50,
+  swapMode = 'ExactIn',
+  feeBps = 0,
+  wallet = PublicKey.default.toBase58()
+) => {
+  {
+    const defaultOtherAmount =
+      swapMode === 'ExactIn' ? 0 : Number.MAX_SAFE_INTEGER
+
+    const paramsString = new URLSearchParams({
+      inputMint: inputMint.toString(),
+      outputMint: outputMint.toString(),
+      amount: amount.toString(),
+      slippage: ((slippage * 1) / 100).toString(),
+      feeBps: feeBps.toString(),
+      mode: swapMode,
+      wallet: wallet,
+      otherAmountThreshold: defaultOtherAmount.toString(),
+    }).toString()
+
+    const response = await fetch(`${MANGO_ROUTER_API_URL}/swap?${paramsString}`)
+
+    const res = await response.json()
+    const data: RouteInfo[] = res.map((route: any) => ({
+      ...route,
+      priceImpactPct: route.priceImpact,
+      slippageBps: slippage,
+      marketInfos: route.marketInfos.map((mInfo: any) => ({
+        ...mInfo,
+        lpFee: {
+          ...mInfo.fee,
+          pct: mInfo.fee.rate,
+        },
+      })),
+    }))
+    return {
+      routes: data,
+      bestRoute: (data.length ? data[0] : null) as RouteInfo | null,
+    }
+  }
+}
+
+const handleGetRoutes = async (
+  inputMint = 'So11111111111111111111111111111111111111112',
+  outputMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+  amount = 0,
+  slippage = 50,
+  swapMode = 'ExactIn',
+  feeBps = 0,
+  wallet: string | undefined | null
+) => {
+  wallet ||= PublicKey.default.toBase58()
+
+  const results = await Promise.allSettled([
+    fetchMangoRoutes(
+      inputMint,
+      outputMint,
+      amount,
+      slippage,
+      swapMode,
+      feeBps,
+      wallet
+    ),
+    fetchJupiterRoutes(
+      inputMint,
+      outputMint,
+      amount,
+      slippage,
+      swapMode,
+      feeBps
+    ),
+  ])
+  const responses = results
+    .filter((x) => x.status === 'fulfilled' && x.value.bestRoute !== null)
+    .map((x) => (x as any).value)
+
+  const sortedByBiggestOutAmount = (
+    responses as {
+      routes: RouteInfo[]
+      bestRoute: RouteInfo
+    }[]
+  ).sort(
+    (a, b) => Number(b.bestRoute.outAmount) - Number(a.bestRoute.outAmount)
+  )
+
+  return {
+    routes: sortedByBiggestOutAmount[0].routes,
+    bestRoute: sortedByBiggestOutAmount[0].bestRoute,
+  }
+}
+
+const useQuoteRoutes = ({
+  inputMint,
+  outputMint,
+  amount,
+  slippage,
+  swapMode,
+  wallet,
+}: useQuoteRoutesPropTypes) => {
+  const { inputTokenInfo, outputTokenInfo } = useJupiterSwapData()
+
+  const decimals =
+    swapMode === 'ExactIn'
+      ? inputTokenInfo?.decimals || 6
+      : outputTokenInfo?.decimals || 6
+
+  const nativeAmount =
+    amount && !Number.isNaN(+amount)
+      ? new Decimal(amount).mul(10 ** decimals)
+      : new Decimal(0)
+
+  const res = useQuery<{ routes: RouteInfo[]; bestRoute: RouteInfo }, Error>(
+    ['swap-routes', inputMint, outputMint, amount, slippage, swapMode, wallet],
+    async () =>
+      handleGetRoutes(
+        inputMint,
+        outputMint,
+        nativeAmount.toNumber(),
+        slippage,
+        swapMode,
+        0,
+        wallet
+      ),
+    {
+      enabled: amount ? true : false,
+    }
+  )
+
+  return amount
+    ? {
+        ...(res.data ?? {
+          routes: [],
+          bestRoute: undefined,
+        }),
+        isLoading: res.isLoading,
+      }
+    : {
+        routes: [],
+        bestRoute: undefined,
+        isLoading: false,
+      }
+}
+
+export default useQuoteRoutes
diff --git a/types/jupiter.ts b/types/jupiter.ts
index 1de80bfe..1d5bd8b4 100644
--- a/types/jupiter.ts
+++ b/types/jupiter.ts
@@ -1,13 +1,14 @@
-import { AccountMeta } from '@solana/web3.js'
 import { AccountInfo } from '@solana/web3.js'
 import Decimal from 'decimal.js'
 
 export declare type SideType = typeof Side.Ask | typeof Side.Bid
 export declare const Side: {
   Bid: {
+    // eslint-disable-next-line @typescript-eslint/ban-types
     bid: {}
   }
   Ask: {
+    // eslint-disable-next-line @typescript-eslint/ban-types
     ask: {}
   }
 }
@@ -57,7 +58,7 @@ export interface ExactOutSwapParams extends SwapParams {
 }
 export declare type AccountInfoMap = Map<string, AccountInfo<Buffer> | null>
 
-declare type AmmLabel =
+export declare type AmmLabel =
   | 'Aldrin'
   | 'Crema'
   | 'Cropper'
diff --git a/utils/constants.ts b/utils/constants.ts
index 36bf95da..1a19ddab 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -58,6 +58,8 @@ export const PROFILE_CATEGORIES = [
 
 export const CHART_DATA_FEED = `https://dry-ravine-67635.herokuapp.com/tv`
 
+export const MANGO_ROUTER_API_URL = 'https://api.mngo.cloud/router/v1'
+
 export const DEFAULT_MARKET_NAME = 'SOL/USDC'
 
 export const MIN_SOL_BALANCE = 0.001

From 9d94828aace704fdbcefcf4baaf2ea4651a66a5f Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 13 Jan 2023 11:16:10 +1100
Subject: [PATCH 07/36] paginate trade history

---
 components/account/ActivityFeedTable.tsx |  13 +-
 components/trade/TradeHistory.tsx        | 254 ++++++++++++++---------
 store/mangoStore.ts                      |  48 ++---
 utils/constants.ts                       |   2 +
 4 files changed, 185 insertions(+), 132 deletions(-)

diff --git a/components/account/ActivityFeedTable.tsx b/components/account/ActivityFeedTable.tsx
index 34d3a5b7..4b07283d 100644
--- a/components/account/ActivityFeedTable.tsx
+++ b/components/account/ActivityFeedTable.tsx
@@ -17,7 +17,7 @@ import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
 import { Fragment, useCallback, useState } from 'react'
-import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
+import { PAGINATION_PAGE_LENGTH, PREFERRED_EXPLORER_KEY } from 'utils/constants'
 import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
 import { breakpoints } from 'utils/theme'
 
@@ -55,8 +55,12 @@ const ActivityFeedTable = ({
       s.activityFeed.loading = true
     })
     if (!mangoAccountAddress) return
-    setOffset(offset + 25)
-    actions.fetchActivityFeed(mangoAccountAddress, offset + 25, params)
+    setOffset(offset + PAGINATION_PAGE_LENGTH)
+    actions.fetchActivityFeed(
+      mangoAccountAddress,
+      offset + PAGINATION_PAGE_LENGTH,
+      params
+    )
   }, [actions, offset, params, mangoAccountAddress])
 
   const getCreditAndDebit = (activity: any) => {
@@ -316,7 +320,8 @@ const ActivityFeedTable = ({
           ))}
         </div>
       ) : null}
-      {activityFeed.length && activityFeed.length % 25 === 0 ? (
+      {activityFeed.length &&
+      activityFeed.length % PAGINATION_PAGE_LENGTH === 0 ? (
         <div className="flex justify-center py-6">
           <LinkButton onClick={handleShowMore}>Show More</LinkButton>
         </div>
diff --git a/components/trade/TradeHistory.tsx b/components/trade/TradeHistory.tsx
index 8262dd7c..9f01a0c6 100644
--- a/components/trade/TradeHistory.tsx
+++ b/components/trade/TradeHistory.tsx
@@ -1,4 +1,6 @@
 import { I80F48, PerpMarket } from '@blockworks-foundation/mango-v4'
+import { LinkButton } from '@components/shared/Button'
+import SheenLoader from '@components/shared/SheenLoader'
 import SideBadge from '@components/shared/SideBadge'
 import {
   Table,
@@ -14,7 +16,9 @@ import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useViewport } from 'hooks/useViewport'
-import { useMemo } from 'react'
+import { useTranslation } from 'next-i18next'
+import { useCallback, useMemo, useState } from 'react'
+import { PAGINATION_PAGE_LENGTH } from 'utils/constants'
 import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
 import { breakpoints } from 'utils/theme'
 import TableMarketName from './TableMarketName'
@@ -86,11 +90,17 @@ const formatTradeHistory = (
 }
 
 const TradeHistory = () => {
+  const { t } = useTranslation(['common', 'trade'])
   const group = mangoStore.getState().group
   const { selectedMarket } = useSelectedMarket()
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
+  const actions = mangoStore((s) => s.actions)
   const fills = mangoStore((s) => s.selectedMarket.fills)
-  const tradeHistory = mangoStore((s) => s.mangoAccount.tradeHistory)
+  const tradeHistory = mangoStore((s) => s.mangoAccount.tradeHistory.data)
+  const loadingTradeHistory = mangoStore(
+    (s) => s.mangoAccount.tradeHistory.loading
+  )
+  const [offset, setOffset] = useState(0)
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
 
@@ -151,81 +161,129 @@ const TradeHistory = () => {
     return [...newFills, ...tradeHistory]
   }, [eventQueueFillsForAccount, tradeHistory])
 
-  console.log('trade history', tradeHistory)
+  const handleShowMore = useCallback(() => {
+    const set = mangoStore.getState().set
+    set((s) => {
+      s.mangoAccount.tradeHistory.loading = true
+    })
+    setOffset(offset + PAGINATION_PAGE_LENGTH)
+    actions.fetchTradeHistory(offset + PAGINATION_PAGE_LENGTH)
+  }, [actions, offset])
 
   if (!selectedMarket || !group) return null
 
-  return mangoAccount && combinedTradeHistory.length ? (
-    showTableView ? (
-      <div>
-        <Table>
-          <thead>
-            <TrHead>
-              <Th className="text-left">Market</Th>
-              <Th className="text-right">Side</Th>
-              <Th className="text-right">Size</Th>
-              <Th className="text-right">Price</Th>
-              <Th className="text-right">Value</Th>
-              <Th className="text-right">Fee</Th>
-              <Th className="text-right">Time</Th>
-            </TrHead>
-          </thead>
-          <tbody>
-            {combinedTradeHistory.map((trade: any) => {
-              let market
-              if ('market' in trade) {
-                market = group.getSerum3MarketByExternalMarket(
-                  new PublicKey(trade.market)
-                )
-              } else if ('perp_market' in trade) {
-                market = group.getPerpMarketByName(trade.perp_market)
-              } else {
-                market = selectedMarket
-              }
-              let makerTaker = trade.liquidity
-              if ('maker' in trade) {
-                makerTaker = trade.maker ? 'Maker' : 'Taker'
-                if (trade.taker === mangoAccount.publicKey.toString()) {
-                  makerTaker = 'Taker'
+  return mangoAccount &&
+    (combinedTradeHistory.length || loadingTradeHistory) ? (
+    <>
+      {showTableView ? (
+        <div className="thin-scroll overflow-x-auto">
+          <Table>
+            <thead>
+              <TrHead>
+                <Th className="text-left">{t('market')}</Th>
+                <Th className="text-right">{t('trade:side')}</Th>
+                <Th className="text-right">{t('trade:size')}</Th>
+                <Th className="text-right">{t('price')}</Th>
+                <Th className="text-right">{t('value')}</Th>
+                <Th className="text-right">{t('fee')}</Th>
+                <Th className="text-right">{t('date')}</Th>
+              </TrHead>
+            </thead>
+            <tbody>
+              {combinedTradeHistory.map((trade: any, index: number) => {
+                let market
+                if ('market' in trade) {
+                  market = group.getSerum3MarketByExternalMarket(
+                    new PublicKey(trade.market)
+                  )
+                } else if ('perp_market' in trade) {
+                  market = group.getPerpMarketByName(trade.perp_market)
+                } else {
+                  market = selectedMarket
+                }
+                let makerTaker = trade.liquidity
+                if ('maker' in trade) {
+                  makerTaker = trade.maker ? 'Maker' : 'Taker'
+                  if (trade.taker === mangoAccount.publicKey.toString()) {
+                    makerTaker = 'Taker'
+                  }
+                }
+                const size = trade.size || trade.quantity
+                let fee
+                if (trade.fee_cost || trade.feeCost) {
+                  fee = trade.fee_cost || trade.feeCost
+                } else {
+                  fee =
+                    trade.maker === mangoAccount.publicKey.toString()
+                      ? trade.maker_fee
+                      : trade.taker_fee
                 }
-              }
-              const size = trade.size || trade.quantity
-              let fee
-              if (trade.fee_cost || trade.feeCost) {
-                fee = trade.fee_cost || trade.feeCost
-              } else {
-                fee =
-                  trade.maker === mangoAccount.publicKey.toString()
-                    ? trade.maker_fee
-                    : trade.taker_fee
-              }
 
-              return (
-                <TrBody
-                  key={`${trade.signature || trade.marketIndex}${size}`}
-                  className="my-1 p-2"
-                >
-                  <Td className="">
-                    <TableMarketName market={market} />
-                  </Td>
-                  <Td className="text-right">
+                return (
+                  <TrBody
+                    key={`${trade.signature || trade.marketIndex}${index}`}
+                    className="my-1 p-2"
+                  >
+                    <Td className="">
+                      <TableMarketName market={market} />
+                    </Td>
+                    <Td className="text-right">
+                      <SideBadge side={trade.side} />
+                    </Td>
+                    <Td className="text-right font-mono">{size}</Td>
+                    <Td className="text-right font-mono">
+                      {formatDecimal(trade.price)}
+                    </Td>
+                    <Td className="text-right font-mono">
+                      {formatFixedDecimals(trade.price * size, true, true)}
+                    </Td>
+                    <Td className="text-right">
+                      <span className="font-mono">{formatDecimal(fee)}</span>
+                      <p className="font-body text-xs text-th-fgd-4">
+                        {makerTaker}
+                      </p>
+                    </Td>
+
+                    <Td className="whitespace-nowrap text-right">
+                      {trade.block_datetime ? (
+                        <TableDateDisplay
+                          date={trade.block_datetime}
+                          showSeconds
+                        />
+                      ) : (
+                        'Recent'
+                      )}
+                    </Td>
+                  </TrBody>
+                )
+              })}
+            </tbody>
+          </Table>
+        </div>
+      ) : (
+        <div>
+          {combinedTradeHistory.map((trade: any, index: number) => {
+            const size = trade.size || trade.quantity
+            return (
+              <div
+                className="flex items-center justify-between border-b border-th-bkg-3 p-4"
+                key={`${trade.marketIndex}${index}`}
+              >
+                <div>
+                  <TableMarketName market={selectedMarket} />
+                  <div className="mt-1 flex items-center space-x-1">
                     <SideBadge side={trade.side} />
-                  </Td>
-                  <Td className="text-right font-mono">{size}</Td>
-                  <Td className="text-right font-mono">
-                    {formatDecimal(trade.price)}
-                  </Td>
-                  <Td className="text-right font-mono">
-                    {formatFixedDecimals(trade.price * size)}
-                  </Td>
-                  <Td className="text-right">
-                    <span className="font-mono">{formatDecimal(fee)}</span>
-                    <p className="font-body text-xs text-th-fgd-4">
-                      {makerTaker}
+                    <p className="text-th-fgd-4">
+                      <span className="font-mono text-th-fgd-2">{size}</span>
+                      {' for '}
+                      <span className="font-mono text-th-fgd-2">
+                        {formatDecimal(trade.price)}
+                      </span>
                     </p>
-                  </Td>
-
-                  <Td className="whitespace-nowrap text-right">
+                  </div>
+                </div>
+                <div className="flex flex-col items-end">
+                  <span className="mb-0.5 flex items-center space-x-1.5">
                     {trade.block_datetime ? (
                       <TableDateDisplay
                         date={trade.block_datetime}
@@ -234,42 +292,32 @@ const TradeHistory = () => {
                     ) : (
                       'Recent'
                     )}
-                  </Td>
-                </TrBody>
-              )
-            })}
-          </tbody>
-        </Table>
-      </div>
-    ) : (
-      <div>
-        {eventQueueFillsForAccount.map((trade: any) => {
-          return (
-            <div
-              className="flex items-center justify-between border-b border-th-bkg-3 p-4"
-              key={`${trade.marketIndex}`}
-            >
-              <div>
-                <TableMarketName market={selectedMarket} />
-                <div className="mt-1 flex items-center space-x-1">
-                  <SideBadge side={trade.side} />
-                  <p className="text-th-fgd-4">
-                    <span className="font-mono text-th-fgd-3">
-                      {trade.size}
-                    </span>
-                    {' for '}
-                    <span className="font-mono text-th-fgd-3">
-                      {formatDecimal(trade.price)}
-                    </span>
+                  </span>
+                  <p className="font-mono text-th-fgd-2">
+                    {formatFixedDecimals(trade.price * size, true, true)}
                   </p>
                 </div>
               </div>
-              <p className="font-mono">${trade.value.toFixed(2)}</p>
-            </div>
-          )
-        })}
-      </div>
-    )
+            )
+          })}
+        </div>
+      )}
+      {loadingTradeHistory ? (
+        <div className="mt-4 space-y-1.5">
+          {[...Array(4)].map((x, i) => (
+            <SheenLoader className="mx-4 flex flex-1 md:mx-6" key={i}>
+              <div className="h-16 w-full bg-th-bkg-2" />
+            </SheenLoader>
+          ))}
+        </div>
+      ) : null}
+      {combinedTradeHistory.length &&
+      combinedTradeHistory.length % PAGINATION_PAGE_LENGTH === 0 ? (
+        <div className="flex justify-center py-6">
+          <LinkButton onClick={handleShowMore}>Show More</LinkButton>
+        </div>
+      ) : null}
+    </>
   ) : (
     <div className="flex flex-col items-center justify-center px-6 pb-8 pt-4">
       <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
diff --git a/store/mangoStore.ts b/store/mangoStore.ts
index e9e2f0bb..9bd61c9c 100644
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@@ -34,6 +34,7 @@ import {
   INPUT_TOKEN_DEFAULT,
   LAST_ACCOUNT_KEY,
   OUTPUT_TOKEN_DEFAULT,
+  PAGINATION_PAGE_LENGTH,
   RPC_PROVIDER_KEY,
 } from '../utils/constants'
 import { OrderbookL2, SpotBalances, SpotTradeHistory } from 'types'
@@ -246,7 +247,7 @@ export type MangoStore = {
         initialLoad: boolean
       }
     }
-    tradeHistory: SpotTradeHistory[]
+    tradeHistory: { data: SpotTradeHistory[]; loading: boolean }
   }
   mangoAccounts: MangoAccount[]
   markets: Serum3Market[] | undefined
@@ -330,7 +331,7 @@ export type MangoStore = {
     ) => Promise<void>
     fetchTokenStats: () => void
     fetchTourSettings: (walletPk: string) => void
-    fetchTradeHistory: () => Promise<void>
+    fetchTradeHistory: (offset?: number) => Promise<void>
     fetchWalletTokens: (wallet: Wallet) => Promise<void>
     connectMangoClientWithWallet: (wallet: WalletAdapter) => Promise<void>
     loadMarketFills: () => Promise<void>
@@ -383,7 +384,7 @@ const mangoStore = create<MangoStore>()(
           performance: { data: [], loading: false },
           swapHistory: { data: [], initialLoad: false },
         },
-        tradeHistory: [],
+        tradeHistory: { data: [], loading: true },
       },
       mangoAccounts: [],
       markets: undefined,
@@ -539,7 +540,7 @@ const mangoStore = create<MangoStore>()(
 
           try {
             const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=25${
+              `https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=${PAGINATION_PAGE_LENGTH}${
                 params ? params : ''
               }`
             )
@@ -1007,36 +1008,33 @@ const mangoStore = create<MangoStore>()(
             console.log('Error fetching fills:', err)
           }
         },
-        async fetchTradeHistory() {
+        async fetchTradeHistory(offset = 0) {
           const set = get().set
-          const mangoAccount = get().mangoAccount.current
+          const mangoAccountPk =
+            get().mangoAccount?.current?.publicKey.toString()
+          const loadedHistory =
+            mangoStore.getState().mangoAccount.tradeHistory.data
           try {
-            const [spotRes, perpRes] = await Promise.all([
-              fetch(
-                `https://mango-transaction-log.herokuapp.com/v4/stats/openbook-trades?address=${mangoAccount?.publicKey.toString()}&address-type=mango-account`
-              ),
-              fetch(
-                `https://mango-transaction-log.herokuapp.com/v4/stats/perp-trade-history?mango-account=${mangoAccount?.publicKey.toString()}&limit=1000`
-              ),
-            ])
-            const spotHistory = await spotRes.json()
-            const perpHistory = await perpRes.json()
-            console.log('th', spotHistory, perpHistory)
-            let tradeHistory: any[] = []
-            if (spotHistory?.length) {
-              tradeHistory = tradeHistory.concat(spotHistory)
-            }
-            if (perpHistory?.length) {
-              tradeHistory = tradeHistory.concat(perpHistory)
-            }
+            const response = await fetch(
+              `https://mango-transaction-log.herokuapp.com/v4/stats/trade-history?mango-account=${mangoAccountPk}&limit=${PAGINATION_PAGE_LENGTH}&offset=${offset}`
+            )
+            const parsedHistory = await response.json()
+            const newHistory = parsedHistory.map((h: any) => h.activity_details)
+
+            const history =
+              offset !== 0 ? loadedHistory.concat(newHistory) : newHistory
 
             set((s) => {
-              s.mangoAccount.tradeHistory = tradeHistory.sort(
+              s.mangoAccount.tradeHistory.data = history?.sort(
                 (x: any) => x.block_datetime
               )
             })
           } catch (e) {
             console.error('Unable to fetch trade history', e)
+          } finally {
+            set((s) => {
+              s.mangoAccount.tradeHistory.loading = false
+            })
           }
         },
         updateConnection(endpointUrl) {
diff --git a/utils/constants.ts b/utils/constants.ts
index 36bf95da..53af4d46 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -65,3 +65,5 @@ export const MIN_SOL_BALANCE = 0.001
 export const ACCOUNT_ACTION_MODAL_HEIGHT = '506px'
 
 export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '444px'
+
+export const PAGINATION_PAGE_LENGTH = 25

From 297f653e0fcf3e254678ec622f2ab5f5d4897413 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 13 Jan 2023 12:34:21 +1100
Subject: [PATCH 08/36] add trade history to account tabs

---
 components/account/AccountTabs.tsx | 16 ++++++++++------
 components/trade/TradeHistory.tsx  |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/account/AccountTabs.tsx b/components/account/AccountTabs.tsx
index 595bc979..345f161d 100644
--- a/components/account/AccountTabs.tsx
+++ b/components/account/AccountTabs.tsx
@@ -8,6 +8,7 @@ import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
+import TradeHistory from '@components/trade/TradeHistory'
 
 const AccountTabs = () => {
   const [activeTab, setActiveTab] = useState('balances')
@@ -23,15 +24,16 @@ const AccountTabs = () => {
 
     return [
       ['balances', 0],
+      ['trade:unsettled', unsettledTradeCount],
       ['activity:activity', 0],
       ['swap:swap-history', 0],
-      ['trade:unsettled', unsettledTradeCount],
+      ['trade-history', 0],
     ]
   }, [unsettledPerpPositions, unsettledSpotBalances])
 
   return (
     <>
-      <div className="border-b border-th-bkg-3">
+      <div className="hide-scroll overflow-x-auto border-b border-th-bkg-3">
         <TabButtons
           activeValue={activeTab}
           onChange={(v) => setActiveTab(v)}
@@ -51,10 +53,6 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
   switch (activeTab) {
     case 'balances':
       return <TokenList />
-    case 'activity:activity':
-      return <ActivityFeed />
-    case 'swap:swap-history':
-      return <SwapHistoryTable />
     case 'trade:unsettled':
       return (
         <UnsettledTrades
@@ -62,6 +60,12 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
           unsettledPerpPositions={unsettledPerpPositions}
         />
       )
+    case 'activity:activity':
+      return <ActivityFeed />
+    case 'swap:swap-history':
+      return <SwapHistoryTable />
+    case 'trade-history':
+      return <TradeHistory />
     default:
       return <TokenList />
   }
diff --git a/components/trade/TradeHistory.tsx b/components/trade/TradeHistory.tsx
index 9f01a0c6..9d6065e2 100644
--- a/components/trade/TradeHistory.tsx
+++ b/components/trade/TradeHistory.tsx
@@ -319,7 +319,7 @@ const TradeHistory = () => {
       ) : null}
     </>
   ) : (
-    <div className="flex flex-col items-center justify-center px-6 pb-8 pt-4">
+    <div className="flex flex-col items-center justify-center p-8 px-6">
       <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
       <p>No trade history</p>
     </div>

From cb96bb1823a25d7c68b1c09d94cdef01cedf67b6 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 13 Jan 2023 12:43:20 +1100
Subject: [PATCH 09/36] allow tables to scroll horizontally

---
 components/shared/TableElements.tsx |   6 +-
 components/trade/TradeHistory.tsx   | 164 ++++++++++++++--------------
 2 files changed, 86 insertions(+), 84 deletions(-)

diff --git a/components/shared/TableElements.tsx b/components/shared/TableElements.tsx
index f4856774..b10b91d7 100644
--- a/components/shared/TableElements.tsx
+++ b/components/shared/TableElements.tsx
@@ -7,7 +7,11 @@ export const Table = ({
 }: {
   children: ReactNode
   className?: string
-}) => <table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
+}) => (
+  <div className="thin-scroll overflow-x-auto">
+    <table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
+  </div>
+)
 
 export const TrHead = ({
   children,
diff --git a/components/trade/TradeHistory.tsx b/components/trade/TradeHistory.tsx
index 9d6065e2..2e69833f 100644
--- a/components/trade/TradeHistory.tsx
+++ b/components/trade/TradeHistory.tsx
@@ -176,90 +176,88 @@ const TradeHistory = () => {
     (combinedTradeHistory.length || loadingTradeHistory) ? (
     <>
       {showTableView ? (
-        <div className="thin-scroll overflow-x-auto">
-          <Table>
-            <thead>
-              <TrHead>
-                <Th className="text-left">{t('market')}</Th>
-                <Th className="text-right">{t('trade:side')}</Th>
-                <Th className="text-right">{t('trade:size')}</Th>
-                <Th className="text-right">{t('price')}</Th>
-                <Th className="text-right">{t('value')}</Th>
-                <Th className="text-right">{t('fee')}</Th>
-                <Th className="text-right">{t('date')}</Th>
-              </TrHead>
-            </thead>
-            <tbody>
-              {combinedTradeHistory.map((trade: any, index: number) => {
-                let market
-                if ('market' in trade) {
-                  market = group.getSerum3MarketByExternalMarket(
-                    new PublicKey(trade.market)
-                  )
-                } else if ('perp_market' in trade) {
-                  market = group.getPerpMarketByName(trade.perp_market)
-                } else {
-                  market = selectedMarket
-                }
-                let makerTaker = trade.liquidity
-                if ('maker' in trade) {
-                  makerTaker = trade.maker ? 'Maker' : 'Taker'
-                  if (trade.taker === mangoAccount.publicKey.toString()) {
-                    makerTaker = 'Taker'
-                  }
-                }
-                const size = trade.size || trade.quantity
-                let fee
-                if (trade.fee_cost || trade.feeCost) {
-                  fee = trade.fee_cost || trade.feeCost
-                } else {
-                  fee =
-                    trade.maker === mangoAccount.publicKey.toString()
-                      ? trade.maker_fee
-                      : trade.taker_fee
-                }
-
-                return (
-                  <TrBody
-                    key={`${trade.signature || trade.marketIndex}${index}`}
-                    className="my-1 p-2"
-                  >
-                    <Td className="">
-                      <TableMarketName market={market} />
-                    </Td>
-                    <Td className="text-right">
-                      <SideBadge side={trade.side} />
-                    </Td>
-                    <Td className="text-right font-mono">{size}</Td>
-                    <Td className="text-right font-mono">
-                      {formatDecimal(trade.price)}
-                    </Td>
-                    <Td className="text-right font-mono">
-                      {formatFixedDecimals(trade.price * size, true, true)}
-                    </Td>
-                    <Td className="text-right">
-                      <span className="font-mono">{formatDecimal(fee)}</span>
-                      <p className="font-body text-xs text-th-fgd-4">
-                        {makerTaker}
-                      </p>
-                    </Td>
-
-                    <Td className="whitespace-nowrap text-right">
-                      {trade.block_datetime ? (
-                        <TableDateDisplay
-                          date={trade.block_datetime}
-                          showSeconds
-                        />
-                      ) : (
-                        'Recent'
-                      )}
-                    </Td>
-                  </TrBody>
+        <Table>
+          <thead>
+            <TrHead>
+              <Th className="text-left">{t('market')}</Th>
+              <Th className="text-right">{t('trade:side')}</Th>
+              <Th className="text-right">{t('trade:size')}</Th>
+              <Th className="text-right">{t('price')}</Th>
+              <Th className="text-right">{t('value')}</Th>
+              <Th className="text-right">{t('fee')}</Th>
+              <Th className="text-right">{t('date')}</Th>
+            </TrHead>
+          </thead>
+          <tbody>
+            {combinedTradeHistory.map((trade: any, index: number) => {
+              let market
+              if ('market' in trade) {
+                market = group.getSerum3MarketByExternalMarket(
+                  new PublicKey(trade.market)
                 )
-              })}
-            </tbody>
-          </Table>
-        </div>
+              } else if ('perp_market' in trade) {
+                market = group.getPerpMarketByName(trade.perp_market)
+              } else {
+                market = selectedMarket
+              }
+              let makerTaker = trade.liquidity
+              if ('maker' in trade) {
+                makerTaker = trade.maker ? 'Maker' : 'Taker'
+                if (trade.taker === mangoAccount.publicKey.toString()) {
+                  makerTaker = 'Taker'
+                }
+              }
+              const size = trade.size || trade.quantity
+              let fee
+              if (trade.fee_cost || trade.feeCost) {
+                fee = trade.fee_cost || trade.feeCost
+              } else {
+                fee =
+                  trade.maker === mangoAccount.publicKey.toString()
+                    ? trade.maker_fee
+                    : trade.taker_fee
+              }
+
+              return (
+                <TrBody
+                  key={`${trade.signature || trade.marketIndex}${index}`}
+                  className="my-1 p-2"
+                >
+                  <Td className="">
+                    <TableMarketName market={market} />
+                  </Td>
+                  <Td className="text-right">
+                    <SideBadge side={trade.side} />
+                  </Td>
+                  <Td className="text-right font-mono">{size}</Td>
+                  <Td className="text-right font-mono">
+                    {formatDecimal(trade.price)}
+                  </Td>
+                  <Td className="text-right font-mono">
+                    {formatFixedDecimals(trade.price * size, true, true)}
+                  </Td>
+                  <Td className="text-right">
+                    <span className="font-mono">{formatDecimal(fee)}</span>
+                    <p className="font-body text-xs text-th-fgd-4">
+                      {makerTaker}
+                    </p>
+                  </Td>
+
+                  <Td className="whitespace-nowrap text-right">
+                    {trade.block_datetime ? (
+                      <TableDateDisplay
+                        date={trade.block_datetime}
+                        showSeconds
+                      />
+                    ) : (
+                      'Recent'
+                    )}
+                  </Td>
+                </TrBody>
+              )
+            })}
+          </tbody>
+        </Table>
       ) : (
         <div>
           {combinedTradeHistory.map((trade: any, index: number) => {

From 08a59ae4ecff8bf19d9d19953215099e9e06612d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Fri, 13 Jan 2023 18:07:18 +0100
Subject: [PATCH 10/36] fixes

---
 components/modals/CloseAccountModal.tsx | 12 +++++++++++-
 public/locales/en/close-account.json    |  3 ++-
 public/locales/es/close-account.json    |  3 ++-
 public/locales/ru/close-account.json    |  3 ++-
 public/locales/zh/close-account.json    |  3 ++-
 public/locales/zh_tw/close-account.json |  3 ++-
 6 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index 33d6338f..0766a879 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -50,7 +50,7 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
     if (!mangoAccount || !group) return
     setLoading(true)
     try {
-      const tx = await client.closeMangoAccount(group, mangoAccount)
+      const tx = await client.emptyAndCloseMangoAccount(group, mangoAccount)
       if (tx) {
         const newMangoAccounts = mangoAccounts.filter(
           (ma) => !ma.publicKey.equals(mangoAccount.publicKey)
@@ -97,6 +97,16 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
 
   useEffect(() => {
     if (mangoAccount && group) {
+      console.log(
+        mangoAccount.current
+          ?.tokensActive()
+          .filter(
+            (token: TokenPosition) =>
+              token.balanceUi(
+                group.getFirstBankByTokenIndex(token.tokenIndex)
+              ) < 0
+          )
+      )
       if (
         mangoAccount.current
           ?.tokensActive()
diff --git a/public/locales/en/close-account.json b/public/locales/en/close-account.json
index e091ad14..4a220910 100644
--- a/public/locales/en/close-account.json
+++ b/public/locales/en/close-account.json
@@ -14,5 +14,6 @@
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
     "withdraw-assets-worth": "Withdraw assets worth {{value}}",
-    "close-account": "Close Account"
+    "close-account": "Close Account",
+    "closing-account": "Closing your account..."
 }
\ No newline at end of file
diff --git a/public/locales/es/close-account.json b/public/locales/es/close-account.json
index e091ad14..4a220910 100644
--- a/public/locales/es/close-account.json
+++ b/public/locales/es/close-account.json
@@ -14,5 +14,6 @@
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
     "withdraw-assets-worth": "Withdraw assets worth {{value}}",
-    "close-account": "Close Account"
+    "close-account": "Close Account",
+    "closing-account": "Closing your account..."
 }
\ No newline at end of file
diff --git a/public/locales/ru/close-account.json b/public/locales/ru/close-account.json
index e091ad14..4a220910 100644
--- a/public/locales/ru/close-account.json
+++ b/public/locales/ru/close-account.json
@@ -14,5 +14,6 @@
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
     "withdraw-assets-worth": "Withdraw assets worth {{value}}",
-    "close-account": "Close Account"
+    "close-account": "Close Account",
+    "closing-account": "Closing your account..."
 }
\ No newline at end of file
diff --git a/public/locales/zh/close-account.json b/public/locales/zh/close-account.json
index e091ad14..4a220910 100644
--- a/public/locales/zh/close-account.json
+++ b/public/locales/zh/close-account.json
@@ -14,5 +14,6 @@
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
     "withdraw-assets-worth": "Withdraw assets worth {{value}}",
-    "close-account": "Close Account"
+    "close-account": "Close Account",
+    "closing-account": "Closing your account..."
 }
\ No newline at end of file
diff --git a/public/locales/zh_tw/close-account.json b/public/locales/zh_tw/close-account.json
index e091ad14..4a220910 100644
--- a/public/locales/zh_tw/close-account.json
+++ b/public/locales/zh_tw/close-account.json
@@ -14,5 +14,6 @@
     "settle-balances": "Settle all balances",
     "transaction-confirmed": "Transaction Confirmed",
     "withdraw-assets-worth": "Withdraw assets worth {{value}}",
-    "close-account": "Close Account"
+    "close-account": "Close Account",
+    "closing-account": "Closing your account..."
 }
\ No newline at end of file

From 8c575056b8c8cbc52b649a1e2e2a1c755696a3ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Sat, 14 Jan 2023 01:02:11 +0100
Subject: [PATCH 11/36] fix

---
 components/RepayForm.tsx                |  2 +-
 components/modals/CloseAccountModal.tsx | 10 ----------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/components/RepayForm.tsx b/components/RepayForm.tsx
index c342082e..5fd8f217 100644
--- a/components/RepayForm.tsx
+++ b/components/RepayForm.tsx
@@ -122,7 +122,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
       //to not leave some dust on account we round amount by this number
       //with reduce only set to true we take only what is needed to be
       //deposited in need to repay borrow
-      const roundUpBy = 1.01
+      const roundUpBy = 1.05
       const client = mangoStore.getState().client
       const group = mangoStore.getState().group
       const actions = mangoStore.getState().actions
diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index 0766a879..87ae112f 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -97,16 +97,6 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
 
   useEffect(() => {
     if (mangoAccount && group) {
-      console.log(
-        mangoAccount.current
-          ?.tokensActive()
-          .filter(
-            (token: TokenPosition) =>
-              token.balanceUi(
-                group.getFirstBankByTokenIndex(token.tokenIndex)
-              ) < 0
-          )
-      )
       if (
         mangoAccount.current
           ?.tokensActive()

From 781bab12fe664dd54395ccf1dab83e4541edd71d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Sat, 14 Jan 2023 01:02:52 +0100
Subject: [PATCH 12/36] fix

---
 components/RepayForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/RepayForm.tsx b/components/RepayForm.tsx
index 5fd8f217..c161666b 100644
--- a/components/RepayForm.tsx
+++ b/components/RepayForm.tsx
@@ -122,7 +122,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
       //to not leave some dust on account we round amount by this number
       //with reduce only set to true we take only what is needed to be
       //deposited in need to repay borrow
-      const roundUpBy = 1.05
+      const roundUpBy = 1.03
       const client = mangoStore.getState().client
       const group = mangoStore.getState().group
       const actions = mangoStore.getState().actions

From ccd8391a759e912eb417df54a05860d59940addc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Sat, 14 Jan 2023 01:04:59 +0100
Subject: [PATCH 13/36] fix

---
 components/modals/CloseAccountModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index 87ae112f..4bdc003f 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -89,7 +89,7 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
     const accounts = await getMultipleAccounts(connection, accountKeys)
     const lamports =
       accounts.reduce((total, account) => {
-        return total + account!.account.lamports
+        return total + (account?.account.lamports || 0)
       }, 0) * 0.000000001
 
     setTotalAccountSOL(lamports)

From 28e47eb6a9cd2b676e3b848c5b0c8fdf2d84f898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Sat, 14 Jan 2023 01:58:07 +0100
Subject: [PATCH 14/36] fix full repay

---
 components/RepayForm.tsx                | 11 +++++++----
 components/modals/CloseAccountModal.tsx |  9 ++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/components/RepayForm.tsx b/components/RepayForm.tsx
index c161666b..e0bcd8c4 100644
--- a/components/RepayForm.tsx
+++ b/components/RepayForm.tsx
@@ -122,13 +122,16 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
       //to not leave some dust on account we round amount by this number
       //with reduce only set to true we take only what is needed to be
       //deposited in need to repay borrow
-      const roundUpBy = 1.03
+      const mangoAccount = mangoStore.getState().mangoAccount.current
       const client = mangoStore.getState().client
       const group = mangoStore.getState().group
       const actions = mangoStore.getState().actions
-      const mangoAccount = mangoStore.getState().mangoAccount.current
 
       if (!mangoAccount || !group || !bank || !wallet) return
+      const actualAmount =
+        sizePercentage === '100'
+          ? mangoAccount.getTokenBorrowsUi(bank)
+          : parseFloat(amount)
 
       setSubmitting(true)
       try {
@@ -136,7 +139,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
           group,
           mangoAccount,
           bank.mint,
-          parseFloat(amount) * roundUpBy,
+          actualAmount,
           true
         )
         notify({
@@ -160,7 +163,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
         setSubmitting(false)
       }
     },
-    [bank, wallet]
+    [bank, wallet, sizePercentage]
   )
 
   const banks = useMemo(() => {
diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx
index 4bdc003f..eb58e7ce 100644
--- a/components/modals/CloseAccountModal.tsx
+++ b/components/modals/CloseAccountModal.tsx
@@ -100,11 +100,10 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
       if (
         mangoAccount.current
           ?.tokensActive()
-          .filter(
-            (token: TokenPosition) =>
-              token.balanceUi(
-                group.getFirstBankByTokenIndex(token.tokenIndex)
-              ) < 0
+          .filter((token: TokenPosition) =>
+            token
+              .balance(group.getFirstBankByTokenIndex(token.tokenIndex))
+              .isNeg()
           ).length
       ) {
         setHasBorrows(true)

From d22392be6c546635883d687f5bd1a0705903a0df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Sat, 14 Jan 2023 02:03:53 +0100
Subject: [PATCH 15/36] fix

---
 components/RepayForm.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/RepayForm.tsx b/components/RepayForm.tsx
index e0bcd8c4..2239d34a 100644
--- a/components/RepayForm.tsx
+++ b/components/RepayForm.tsx
@@ -130,7 +130,9 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
       if (!mangoAccount || !group || !bank || !wallet) return
       const actualAmount =
         sizePercentage === '100'
-          ? mangoAccount.getTokenBorrowsUi(bank)
+          ? mangoAccount.getTokenBorrowsUi(bank) < parseFloat(amount)
+            ? parseFloat(amount)
+            : mangoAccount.getTokenBorrowsUi(bank)
           : parseFloat(amount)
 
       setSubmitting(true)

From e5988cb6319307df66833a03e624e73a0822b158 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Sat, 14 Jan 2023 02:05:02 +0100
Subject: [PATCH 16/36] comment

---
 components/RepayForm.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/RepayForm.tsx b/components/RepayForm.tsx
index 2239d34a..f562d87d 100644
--- a/components/RepayForm.tsx
+++ b/components/RepayForm.tsx
@@ -128,6 +128,8 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
       const actions = mangoStore.getState().actions
 
       if (!mangoAccount || !group || !bank || !wallet) return
+
+      //we don't want to left negative dust in account if someone wants to repay full amount
       const actualAmount =
         sizePercentage === '100'
           ? mangoAccount.getTokenBorrowsUi(bank) < parseFloat(amount)

From c96fe8a73908e7ffccefd7d6736894075b82f938 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Thu, 12 Jan 2023 22:22:46 +0100
Subject: [PATCH 17/36] Revert "Revert "Merge pull request #56 from
 blockworks-foundation/feature/mango-router""

This reverts commit 774219cadd43ab69e76c573db1eae97dacc19107.
---
 components/swap/SwapForm.tsx        |   7 +-
 components/swap/useJupiterRoutes.ts |  95 --------------
 components/swap/useQuoteRoutes.ts   | 196 ++++++++++++++++++++++++++++
 types/jupiter.ts                    |   5 +-
 utils/constants.ts                  |   2 +
 5 files changed, 205 insertions(+), 100 deletions(-)
 delete mode 100644 components/swap/useJupiterRoutes.ts
 create mode 100644 components/swap/useQuoteRoutes.ts

diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 91e6b507..2fa8b8ed 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -23,7 +23,7 @@ import { Transition } from '@headlessui/react'
 import Button, { IconButton } from '../shared/Button'
 import Loading from '../shared/Loading'
 import { EnterBottomExitBottom } from '../shared/Transitions'
-import useJupiterRoutes from './useJupiterRoutes'
+import useQuoteRoutes from './useQuoteRoutes'
 import SheenLoader from '../shared/SheenLoader'
 import { HealthType } from '@blockworks-foundation/mango-v4'
 import {
@@ -80,7 +80,7 @@ const SwapForm = () => {
   const [debouncedAmountIn] = useDebounce(amountInFormValue, 300)
   const [debouncedAmountOut] = useDebounce(amountOutFormValue, 300)
   const { mangoAccount } = useMangoAccount()
-  const { connected } = useWallet()
+  const { connected, publicKey } = useWallet()
 
   const amountInAsDecimal: Decimal | null = useMemo(() => {
     return Number(debouncedAmountIn)
@@ -94,12 +94,13 @@ const SwapForm = () => {
       : new Decimal(0)
   }, [debouncedAmountOut])
 
-  const { bestRoute, routes } = useJupiterRoutes({
+  const { bestRoute, routes } = useQuoteRoutes({
     inputMint: inputBank?.mint.toString() || USDC_MINT,
     outputMint: outputBank?.mint.toString() || MANGO_MINT,
     amount: swapMode === 'ExactIn' ? debouncedAmountIn : debouncedAmountOut,
     slippage,
     swapMode,
+    wallet: publicKey?.toBase58(),
   })
 
   const setAmountInFormValue = useCallback(
diff --git a/components/swap/useJupiterRoutes.ts b/components/swap/useJupiterRoutes.ts
deleted file mode 100644
index 5a28743c..00000000
--- a/components/swap/useJupiterRoutes.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import Decimal from 'decimal.js'
-import { RouteInfo } from 'types/jupiter'
-import useJupiterSwapData from './useJupiterSwapData'
-
-type useJupiterPropTypes = {
-  inputMint: string
-  outputMint: string
-  amount: string
-  slippage: number
-  swapMode: string
-}
-
-const fetchJupiterRoutes = async (
-  inputMint = 'So11111111111111111111111111111111111111112',
-  outputMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
-  amount = 0,
-  slippage = 50,
-  swapMode = 'ExactIn',
-  feeBps = 0
-) => {
-  {
-    const paramsString = new URLSearchParams({
-      inputMint: inputMint.toString(),
-      outputMint: outputMint.toString(),
-      amount: amount.toString(),
-      slippageBps: Math.ceil(slippage * 100).toString(),
-      feeBps: feeBps.toString(),
-      swapMode,
-    }).toString()
-
-    const response = await fetch(
-      `https://quote-api.jup.ag/v4/quote?${paramsString}`
-    )
-
-    const res = await response.json()
-    const data = res.data
-
-    return {
-      routes: res.data,
-      bestRoute: data[0],
-    }
-  }
-}
-
-const useJupiterRoutes = ({
-  inputMint,
-  outputMint,
-  amount,
-  slippage,
-  swapMode,
-}: useJupiterPropTypes) => {
-  const { inputTokenInfo, outputTokenInfo } = useJupiterSwapData()
-
-  const decimals =
-    swapMode === 'ExactIn'
-      ? inputTokenInfo?.decimals || 6
-      : outputTokenInfo?.decimals || 6
-
-  const nativeAmount =
-    amount && !Number.isNaN(+amount)
-      ? new Decimal(amount).mul(10 ** decimals)
-      : new Decimal(0)
-
-  const res = useQuery<{ routes: RouteInfo[]; bestRoute: RouteInfo }, Error>(
-    ['swap-routes', inputMint, outputMint, amount, slippage, swapMode],
-    async () =>
-      fetchJupiterRoutes(
-        inputMint,
-        outputMint,
-        nativeAmount.toNumber(),
-        slippage,
-        swapMode
-      ),
-    {
-      enabled: amount ? true : false,
-    }
-  )
-
-  return amount
-    ? {
-        ...(res.data ?? {
-          routes: [],
-          bestRoute: undefined,
-        }),
-        isLoading: res.isLoading,
-      }
-    : {
-        routes: [],
-        bestRoute: undefined,
-        isLoading: false,
-      }
-}
-
-export default useJupiterRoutes
diff --git a/components/swap/useQuoteRoutes.ts b/components/swap/useQuoteRoutes.ts
new file mode 100644
index 00000000..121db766
--- /dev/null
+++ b/components/swap/useQuoteRoutes.ts
@@ -0,0 +1,196 @@
+import { PublicKey } from '@solana/web3.js'
+import { useQuery } from '@tanstack/react-query'
+import Decimal from 'decimal.js'
+import { RouteInfo } from 'types/jupiter'
+import { MANGO_ROUTER_API_URL } from 'utils/constants'
+import useJupiterSwapData from './useJupiterSwapData'
+
+type useQuoteRoutesPropTypes = {
+  inputMint: string
+  outputMint: string
+  amount: string
+  slippage: number
+  swapMode: string
+  wallet: string | undefined | null
+}
+
+const fetchJupiterRoutes = async (
+  inputMint = 'So11111111111111111111111111111111111111112',
+  outputMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+  amount = 0,
+  slippage = 50,
+  swapMode = 'ExactIn',
+  feeBps = 0
+) => {
+  {
+    const paramsString = new URLSearchParams({
+      inputMint: inputMint.toString(),
+      outputMint: outputMint.toString(),
+      amount: amount.toString(),
+      slippageBps: Math.ceil(slippage * 100).toString(),
+      feeBps: feeBps.toString(),
+      swapMode,
+    }).toString()
+
+    const response = await fetch(
+      `https://quote-api.jup.ag/v4/quote?${paramsString}`
+    )
+
+    const res = await response.json()
+    const data = res.data
+
+    return {
+      routes: res.data as RouteInfo[],
+      bestRoute: (data.length ? data[0] : null) as RouteInfo | null,
+    }
+  }
+}
+
+const fetchMangoRoutes = async (
+  inputMint = 'So11111111111111111111111111111111111111112',
+  outputMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+  amount = 0,
+  slippage = 50,
+  swapMode = 'ExactIn',
+  feeBps = 0,
+  wallet = PublicKey.default.toBase58()
+) => {
+  {
+    const defaultOtherAmount =
+      swapMode === 'ExactIn' ? 0 : Number.MAX_SAFE_INTEGER
+
+    const paramsString = new URLSearchParams({
+      inputMint: inputMint.toString(),
+      outputMint: outputMint.toString(),
+      amount: amount.toString(),
+      slippage: ((slippage * 1) / 100).toString(),
+      feeBps: feeBps.toString(),
+      mode: swapMode,
+      wallet: wallet,
+      otherAmountThreshold: defaultOtherAmount.toString(),
+    }).toString()
+
+    const response = await fetch(`${MANGO_ROUTER_API_URL}/swap?${paramsString}`)
+
+    const res = await response.json()
+    const data: RouteInfo[] = res.map((route: any) => ({
+      ...route,
+      priceImpactPct: route.priceImpact,
+      slippageBps: slippage,
+      marketInfos: route.marketInfos.map((mInfo: any) => ({
+        ...mInfo,
+        lpFee: {
+          ...mInfo.fee,
+          pct: mInfo.fee.rate,
+        },
+      })),
+    }))
+    return {
+      routes: data,
+      bestRoute: (data.length ? data[0] : null) as RouteInfo | null,
+    }
+  }
+}
+
+const handleGetRoutes = async (
+  inputMint = 'So11111111111111111111111111111111111111112',
+  outputMint = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+  amount = 0,
+  slippage = 50,
+  swapMode = 'ExactIn',
+  feeBps = 0,
+  wallet: string | undefined | null
+) => {
+  wallet ||= PublicKey.default.toBase58()
+
+  const results = await Promise.allSettled([
+    fetchMangoRoutes(
+      inputMint,
+      outputMint,
+      amount,
+      slippage,
+      swapMode,
+      feeBps,
+      wallet
+    ),
+    fetchJupiterRoutes(
+      inputMint,
+      outputMint,
+      amount,
+      slippage,
+      swapMode,
+      feeBps
+    ),
+  ])
+  const responses = results
+    .filter((x) => x.status === 'fulfilled' && x.value.bestRoute !== null)
+    .map((x) => (x as any).value)
+
+  const sortedByBiggestOutAmount = (
+    responses as {
+      routes: RouteInfo[]
+      bestRoute: RouteInfo
+    }[]
+  ).sort(
+    (a, b) => Number(b.bestRoute.outAmount) - Number(a.bestRoute.outAmount)
+  )
+
+  return {
+    routes: sortedByBiggestOutAmount[0].routes,
+    bestRoute: sortedByBiggestOutAmount[0].bestRoute,
+  }
+}
+
+const useQuoteRoutes = ({
+  inputMint,
+  outputMint,
+  amount,
+  slippage,
+  swapMode,
+  wallet,
+}: useQuoteRoutesPropTypes) => {
+  const { inputTokenInfo, outputTokenInfo } = useJupiterSwapData()
+
+  const decimals =
+    swapMode === 'ExactIn'
+      ? inputTokenInfo?.decimals || 6
+      : outputTokenInfo?.decimals || 6
+
+  const nativeAmount =
+    amount && !Number.isNaN(+amount)
+      ? new Decimal(amount).mul(10 ** decimals)
+      : new Decimal(0)
+
+  const res = useQuery<{ routes: RouteInfo[]; bestRoute: RouteInfo }, Error>(
+    ['swap-routes', inputMint, outputMint, amount, slippage, swapMode, wallet],
+    async () =>
+      handleGetRoutes(
+        inputMint,
+        outputMint,
+        nativeAmount.toNumber(),
+        slippage,
+        swapMode,
+        0,
+        wallet
+      ),
+    {
+      enabled: amount ? true : false,
+    }
+  )
+
+  return amount
+    ? {
+        ...(res.data ?? {
+          routes: [],
+          bestRoute: undefined,
+        }),
+        isLoading: res.isLoading,
+      }
+    : {
+        routes: [],
+        bestRoute: undefined,
+        isLoading: false,
+      }
+}
+
+export default useQuoteRoutes
diff --git a/types/jupiter.ts b/types/jupiter.ts
index 1de80bfe..1d5bd8b4 100644
--- a/types/jupiter.ts
+++ b/types/jupiter.ts
@@ -1,13 +1,14 @@
-import { AccountMeta } from '@solana/web3.js'
 import { AccountInfo } from '@solana/web3.js'
 import Decimal from 'decimal.js'
 
 export declare type SideType = typeof Side.Ask | typeof Side.Bid
 export declare const Side: {
   Bid: {
+    // eslint-disable-next-line @typescript-eslint/ban-types
     bid: {}
   }
   Ask: {
+    // eslint-disable-next-line @typescript-eslint/ban-types
     ask: {}
   }
 }
@@ -57,7 +58,7 @@ export interface ExactOutSwapParams extends SwapParams {
 }
 export declare type AccountInfoMap = Map<string, AccountInfo<Buffer> | null>
 
-declare type AmmLabel =
+export declare type AmmLabel =
   | 'Aldrin'
   | 'Crema'
   | 'Cropper'
diff --git a/utils/constants.ts b/utils/constants.ts
index 36bf95da..1a19ddab 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -58,6 +58,8 @@ export const PROFILE_CATEGORIES = [
 
 export const CHART_DATA_FEED = `https://dry-ravine-67635.herokuapp.com/tv`
 
+export const MANGO_ROUTER_API_URL = 'https://api.mngo.cloud/router/v1'
+
 export const DEFAULT_MARKET_NAME = 'SOL/USDC'
 
 export const MIN_SOL_BALANCE = 0.001

From db8f1bcc77a19d488a837e5736c80e2d054b8059 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Sun, 15 Jan 2023 02:05:45 +0100
Subject: [PATCH 18/36] review fixes

---
 components/swap/SwapReviewRouteInfo.tsx | 18 ++++++++++--------
 components/swap/useQuoteRoutes.ts       |  9 +++++++++
 types/jupiter.ts                        |  3 ++-
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/components/swap/SwapReviewRouteInfo.tsx b/components/swap/SwapReviewRouteInfo.tsx
index f1287e17..0ef905f1 100644
--- a/components/swap/SwapReviewRouteInfo.tsx
+++ b/components/swap/SwapReviewRouteInfo.tsx
@@ -217,14 +217,16 @@ const SwapReviewRouteInfo = ({
 
       if (!mangoAccount || !group || !inputBank || !outputBank) return
       setSubmitting(true)
-      const [ixs, alts] = await fetchJupiterTransaction(
-        connection,
-        selectedRoute,
-        mangoAccount.owner,
-        slippage,
-        inputBank.mint,
-        outputBank.mint
-      )
+      const [ixs, alts] = selectedRoute.instructions
+        ? [selectedRoute.instructions, []]
+        : await fetchJupiterTransaction(
+            connection,
+            selectedRoute,
+            mangoAccount.owner,
+            slippage,
+            inputBank.mint,
+            outputBank.mint
+          )
 
       try {
         const tx = await client.marginTrade({
diff --git a/components/swap/useQuoteRoutes.ts b/components/swap/useQuoteRoutes.ts
index 121db766..7d5f6e67 100644
--- a/components/swap/useQuoteRoutes.ts
+++ b/components/swap/useQuoteRoutes.ts
@@ -84,6 +84,15 @@ const fetchMangoRoutes = async (
           pct: mInfo.fee.rate,
         },
       })),
+      instructions: route.instructions.map((ix: any) => ({
+        ...ix,
+        programId: new PublicKey(ix.programId),
+        data: Buffer.from(ix.data, 'base64'),
+        keys: ix.keys.map((key: any) => ({
+          ...key,
+          pubkey: new PublicKey(key.pubkey),
+        })),
+      })),
     }))
     return {
       routes: data,
diff --git a/types/jupiter.ts b/types/jupiter.ts
index 1d5bd8b4..db549224 100644
--- a/types/jupiter.ts
+++ b/types/jupiter.ts
@@ -1,4 +1,4 @@
-import { AccountInfo } from '@solana/web3.js'
+import { AccountInfo, TransactionInstruction } from '@solana/web3.js'
 import Decimal from 'decimal.js'
 
 export declare type SideType = typeof Side.Ask | typeof Side.Bid
@@ -128,6 +128,7 @@ export interface RouteInfo {
   priceImpactPct: number
   slippageBps: number
   swapMode: SwapMode
+  instructions?: TransactionInstruction[]
 }
 
 export type Routes = {

From 5f6bdf0948b449b047612a7e4a8c7e413905e38a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Sun, 15 Jan 2023 14:15:35 +0100
Subject: [PATCH 19/36] fix ata creation for middle mints

---
 components/swap/SwapReviewRouteInfo.tsx | 61 +++++++++++++++++++++----
 components/swap/useQuoteRoutes.ts       |  2 +
 types/jupiter.ts                        |  4 +-
 3 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/components/swap/SwapReviewRouteInfo.tsx b/components/swap/SwapReviewRouteInfo.tsx
index 0ef905f1..02ab9141 100644
--- a/components/swap/SwapReviewRouteInfo.tsx
+++ b/components/swap/SwapReviewRouteInfo.tsx
@@ -42,6 +42,7 @@ import Tooltip from '@components/shared/Tooltip'
 import { Disclosure } from '@headlessui/react'
 import RoutesModal from './RoutesModal'
 import useMangoAccount from 'hooks/useMangoAccount'
+import { createAssociatedTokenAccountIdempotentInstruction } from '@blockworks-foundation/mango-v4'
 
 type JupiterRouteInfoProps = {
   amountIn: Decimal
@@ -78,6 +79,40 @@ const deserializeJupiterIxAndAlt = async (
   return [decompiledMessage.instructions, addressLookupTables]
 }
 
+const prepareMangoRouterInstructions = async (
+  selectedRoute: RouteInfo,
+  inputMint: PublicKey,
+  outputMint: PublicKey,
+  userPublicKey: PublicKey
+): Promise<[TransactionInstruction[], AddressLookupTableAccount[]]> => {
+  if (!selectedRoute || !selectedRoute.mints || !selectedRoute.instructions) {
+    return [[], []]
+  }
+  const mintsToFilterOut = [inputMint, outputMint]
+  const filteredOutMints = [
+    ...selectedRoute.mints.filter(
+      (routeMint) =>
+        !mintsToFilterOut.find((filterOutMint) =>
+          filterOutMint.equals(routeMint)
+        )
+    ),
+  ]
+  const additionalInstructions = []
+  for (const mint of filteredOutMints) {
+    const ix = await createAssociatedTokenAccountIdempotentInstruction(
+      userPublicKey,
+      userPublicKey,
+      mint
+    )
+    additionalInstructions.push(ix)
+  }
+  const instructions = [
+    ...additionalInstructions,
+    ...selectedRoute.instructions,
+  ]
+  return [instructions, []]
+}
+
 const fetchJupiterTransaction = async (
   connection: Connection,
   selectedRoute: RouteInfo,
@@ -217,16 +252,22 @@ const SwapReviewRouteInfo = ({
 
       if (!mangoAccount || !group || !inputBank || !outputBank) return
       setSubmitting(true)
-      const [ixs, alts] = selectedRoute.instructions
-        ? [selectedRoute.instructions, []]
-        : await fetchJupiterTransaction(
-            connection,
-            selectedRoute,
-            mangoAccount.owner,
-            slippage,
-            inputBank.mint,
-            outputBank.mint
-          )
+      const [ixs, alts] =
+        selectedRoute.routerName === 'Mango'
+          ? await prepareMangoRouterInstructions(
+              selectedRoute,
+              inputBank.mint,
+              outputBank.mint,
+              mangoAccount.owner
+            )
+          : await fetchJupiterTransaction(
+              connection,
+              selectedRoute,
+              mangoAccount.owner,
+              slippage,
+              inputBank.mint,
+              outputBank.mint
+            )
 
       try {
         const tx = await client.marginTrade({
diff --git a/components/swap/useQuoteRoutes.ts b/components/swap/useQuoteRoutes.ts
index 7d5f6e67..f96f3d24 100644
--- a/components/swap/useQuoteRoutes.ts
+++ b/components/swap/useQuoteRoutes.ts
@@ -84,6 +84,7 @@ const fetchMangoRoutes = async (
           pct: mInfo.fee.rate,
         },
       })),
+      mints: route.mints.map((x: string) => new PublicKey(x)),
       instructions: route.instructions.map((ix: any) => ({
         ...ix,
         programId: new PublicKey(ix.programId),
@@ -93,6 +94,7 @@ const fetchMangoRoutes = async (
           pubkey: new PublicKey(key.pubkey),
         })),
       })),
+      routerName: 'Mango',
     }))
     return {
       routes: data,
diff --git a/types/jupiter.ts b/types/jupiter.ts
index db549224..e18b1d9c 100644
--- a/types/jupiter.ts
+++ b/types/jupiter.ts
@@ -1,4 +1,4 @@
-import { AccountInfo, TransactionInstruction } from '@solana/web3.js'
+import { AccountInfo, PublicKey, TransactionInstruction } from '@solana/web3.js'
 import Decimal from 'decimal.js'
 
 export declare type SideType = typeof Side.Ask | typeof Side.Bid
@@ -129,6 +129,8 @@ export interface RouteInfo {
   slippageBps: number
   swapMode: SwapMode
   instructions?: TransactionInstruction[]
+  mints?: PublicKey[]
+  routerName?: 'Mango'
 }
 
 export type Routes = {

From 2c12f5c5ea71f777a72dcd5570a49035892b8277 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Mon, 16 Jan 2023 16:13:34 +1100
Subject: [PATCH 20/36] add daily pnl history

---
 components/TokenList.tsx                 |  4 +-
 components/account/AccountChart.tsx      | 27 ++++++-
 components/account/AccountPage.tsx       | 99 +++++++++++++++---------
 components/modals/PnlHistoryModal.tsx    | 93 ++++++++++++++++++++++
 components/shared/DirectionTriangles.tsx |  4 +-
 components/swap/SwapHistoryTable.tsx     |  6 +-
 components/wallet/ConnectedMenu.tsx      |  8 +-
 store/mangoStore.ts                      | 59 +++++++-------
 8 files changed, 220 insertions(+), 80 deletions(-)
 create mode 100644 components/modals/PnlHistoryModal.tsx

diff --git a/components/TokenList.tsx b/components/TokenList.tsx
index 257baadc..cbf36ef3 100644
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@@ -46,7 +46,7 @@ const TokenList = () => {
   const { group } = useMangoGroup()
   const { mangoTokens } = useJupiterMints()
   const totalInterestData = mangoStore(
-    (s) => s.mangoAccount.stats.interestTotals.data
+    (s) => s.mangoAccount.interestTotals.data
   )
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
@@ -304,7 +304,7 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
   const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
   const { mangoAccount } = useMangoAccount()
   const totalInterestData = mangoStore(
-    (s) => s.mangoAccount.stats.interestTotals.data
+    (s) => s.mangoAccount.interestTotals.data
   )
   const symbol = bank.name
   const oraclePrice = bank.uiPrice
diff --git a/components/account/AccountChart.tsx b/components/account/AccountChart.tsx
index e2aee2e3..1e370efc 100644
--- a/components/account/AccountChart.tsx
+++ b/components/account/AccountChart.tsx
@@ -1,6 +1,6 @@
 import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
 import { useTranslation } from 'next-i18next'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import mangoStore from '@store/mangoStore'
 import dynamic from 'next/dynamic'
 import { numberCompacter } from 'utils/numbers'
@@ -11,19 +11,38 @@ const DetailedAreaChart = dynamic(
 
 const AccountChart = ({
   chartToShow,
-  data,
   hideChart,
+  mangoAccountAddress,
   yKey,
 }: {
   chartToShow: string
-  data: Array<any>
   hideChart: () => void
+  mangoAccountAddress: string
   yKey: string
 }) => {
   const { t } = useTranslation('common')
   const actions = mangoStore.getState().actions
   const [daysToShow, setDaysToShow] = useState<string>('1')
-  const loading = mangoStore((s) => s.mangoAccount.stats.performance.loading)
+  const loading = mangoStore((s) => s.mangoAccount.performance.loading)
+  const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
+
+  useEffect(() => {
+    if (mangoAccountAddress) {
+      actions.fetchAccountPerformance(mangoAccountAddress, 1)
+    }
+  }, [actions, mangoAccountAddress])
+
+  const data: any = useMemo(() => {
+    if (!performanceData.length) return []
+    if (chartToShow === 'cumulative-interest-value') {
+      performanceData.map((d) => ({
+        interest_value:
+          d.borrow_interest_cumulative_usd + d.deposit_interest_cumulative_usd,
+        time: d.time,
+      }))
+    }
+    return performanceData
+  }, [performanceData])
 
   const handleDaysToShow = async (days: string) => {
     const mangoAccount = mangoStore.getState().mangoAccount.current
diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index 5962c765..c8041d5d 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -19,7 +19,9 @@ import { useTheme } from 'next-themes'
 import { IconButton } from '../shared/Button'
 import {
   ArrowsPointingOutIcon,
+  ChartBarIcon,
   ChevronRightIcon,
+  ClockIcon,
 } from '@heroicons/react/20/solid'
 import { Transition } from '@headlessui/react'
 import AccountTabs from './AccountTabs'
@@ -40,6 +42,7 @@ import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettin
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import useMangoGroup from 'hooks/useMangoGroup'
+import PnlHistoryModal from '@components/modals/PnlHistoryModal'
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -60,13 +63,14 @@ const AccountPage = () => {
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
   const actions = mangoStore.getState().actions
   const loadPerformanceData = mangoStore(
-    (s) => s.mangoAccount.stats.performance.loading
+    (s) => s.mangoAccount.performance.loading
   )
-  const performanceData = mangoStore(
-    (s) => s.mangoAccount.stats.performance.data
+  const performanceInitialLoad = mangoStore(
+    (s) => s.mangoAccount.performance.initialLoad
   )
+  const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
   const totalInterestData = mangoStore(
-    (s) => s.mangoAccount.stats.interestTotals.data
+    (s) => s.mangoAccount.interestTotals.data
   )
   const [chartToShow, setChartToShow] = useState<
     'account-value' | 'cumulative-interest-value' | 'pnl' | ''
@@ -75,6 +79,7 @@ const AccountPage = () => {
     PerformanceDataItem[]
   >([])
   const [showExpandChart, setShowExpandChart] = useState<boolean>(false)
+  const [showPnlHistory, setShowPnlHistory] = useState<boolean>(false)
   const { theme } = useTheme()
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints.md : false
@@ -93,10 +98,10 @@ const AccountPage = () => {
   }, [actions, mangoAccountAddress])
 
   useEffect(() => {
-    if (mangoAccount && performanceData.length && !chartToShow) {
+    if (performanceInitialLoad) {
       setOneDayPerformanceData(performanceData)
     }
-  }, [mangoAccount, performanceData, chartToShow])
+  }, [performanceInitialLoad])
 
   const onHoverMenu = (open: boolean, action: string) => {
     if (
@@ -115,7 +120,7 @@ const AccountPage = () => {
   const handleHideChart = () => {
     const set = mangoStore.getState().set
     set((s) => {
-      s.mangoAccount.stats.performance.data = oneDayPerformanceData
+      s.mangoAccount.performance.data = oneDayPerformanceData
     })
     setChartToShow('')
   }
@@ -151,7 +156,9 @@ const AccountPage = () => {
   const oneDayPnlChange = useMemo(() => {
     if (accountPnl && oneDayPerformanceData.length) {
       const startDayPnl = oneDayPerformanceData[0].pnl
-      return accountPnl - startDayPnl
+      const endDayPnl =
+        oneDayPerformanceData[oneDayPerformanceData.length - 1].pnl
+      return endDayPnl - startDayPnl
     }
     return 0.0
   }, [accountPnl, oneDayPerformanceData])
@@ -431,24 +438,43 @@ const AccountPage = () => {
             </p>
           </div>
         </div>
-        <button
-          className={`col-span-5 flex items-center justify-between border-t border-th-bkg-3 py-3 pl-6 pr-4 lg:col-span-1 lg:border-l lg:border-t-0 ${
-            performanceData.length > 4
-              ? 'default-transition cursor-pointer md:hover:bg-th-bkg-2'
-              : 'cursor-default'
-          }`}
-          onClick={() => handleChartToShow('pnl')}
-        >
+        <div className="col-span-5 border-t border-th-bkg-3 py-3 pl-6 pr-4 lg:col-span-1 lg:border-l lg:border-t-0">
           <div id="account-step-seven" className="flex flex-col items-start">
-            <Tooltip
-              content="The amount your account has made or lost."
-              placement="bottom"
-              delay={250}
-            >
-              <p className="tooltip-underline inline text-sm text-th-fgd-3 xl:text-base">
-                {t('pnl')}
-              </p>
-            </Tooltip>
+            <div className="flex w-full items-center justify-between">
+              <Tooltip
+                content="The amount your account has made or lost."
+                placement="bottom"
+                delay={250}
+              >
+                <p className="tooltip-underline inline text-sm text-th-fgd-3 xl:text-base">
+                  {t('pnl')}
+                </p>
+              </Tooltip>
+              {mangoAccountAddress ? (
+                <div className="flex items-center space-x-3">
+                  {performanceData.length > 4 ? (
+                    <Tooltip content="Show PnL Chart" delay={250}>
+                      <IconButton
+                        className="text-th-fgd-3"
+                        hideBg
+                        onClick={() => handleChartToShow('pnl')}
+                      >
+                        <ChartBarIcon className="h-5 w-5" />
+                      </IconButton>
+                    </Tooltip>
+                  ) : null}
+                  <Tooltip content="Show Daily PnL History" delay={250}>
+                    <IconButton
+                      className="text-th-fgd-3"
+                      hideBg
+                      onClick={() => setShowPnlHistory(true)}
+                    >
+                      <ClockIcon className="h-5 w-5" />
+                    </IconButton>
+                  </Tooltip>
+                </div>
+              ) : null}
+            </div>
             <p className="mt-1 mb-0.5 text-left text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
               {formatFixedDecimals(accountPnl, true, true)}
             </p>
@@ -457,10 +483,7 @@ const AccountPage = () => {
               <p className="text-xs text-th-fgd-4">{t('today')}</p>
             </div>
           </div>
-          {performanceData.length > 4 ? (
-            <ChevronRightIcon className="h-6 w-6" />
-          ) : null}
-        </button>
+        </div>
         <button
           className={`col-span-5 flex items-center justify-between border-t border-th-bkg-3 py-3 pl-6 pr-4 text-left lg:col-span-1 lg:border-l lg:border-t-0 ${
             interestTotalValue > 1 || interestTotalValue < -1
@@ -497,33 +520,35 @@ const AccountPage = () => {
       {/* {!tourSettings?.account_tour_seen && isOnBoarded && connected ? (
         <AccountOnboardingTour />
       ) : null} */}
+      {showPnlHistory ? (
+        <PnlHistoryModal
+          pnlChangeToday={oneDayPnlChange}
+          isOpen={showPnlHistory}
+          onClose={() => setShowPnlHistory(false)}
+        />
+      ) : null}
     </>
   ) : (
     <div className="p-6 pb-0">
       {chartToShow === 'account-value' ? (
         <AccountChart
           chartToShow="account-value"
-          data={performanceData}
           hideChart={handleHideChart}
+          mangoAccountAddress={mangoAccountAddress}
           yKey="account_equity"
         />
       ) : chartToShow === 'pnl' ? (
         <AccountChart
           chartToShow="pnl"
-          data={performanceData}
           hideChart={handleHideChart}
+          mangoAccountAddress={mangoAccountAddress}
           yKey="pnl"
         />
       ) : (
         <AccountChart
           chartToShow="cumulative-interest-value"
-          data={performanceData.map((d) => ({
-            interest_value:
-              d.borrow_interest_cumulative_usd +
-              d.deposit_interest_cumulative_usd,
-            time: d.time,
-          }))}
           hideChart={handleHideChart}
+          mangoAccountAddress={mangoAccountAddress}
           yKey="interest_value"
         />
       )}
diff --git a/components/modals/PnlHistoryModal.tsx b/components/modals/PnlHistoryModal.tsx
new file mode 100644
index 00000000..3016052e
--- /dev/null
+++ b/components/modals/PnlHistoryModal.tsx
@@ -0,0 +1,93 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
+// import { useTranslation } from 'next-i18next'
+import { useEffect, useMemo } from 'react'
+import BounceLoader from '../shared/BounceLoader'
+import useMangoAccount from 'hooks/useMangoAccount'
+import dayjs from 'dayjs'
+import Change from '@components/shared/Change'
+
+interface PnlHistoryModalProps {
+  pnlChangeToday: number
+}
+
+type ModalCombinedProps = PnlHistoryModalProps & ModalProps
+
+const PnlHistoryModal = ({
+  isOpen,
+  onClose,
+  pnlChangeToday,
+}: ModalCombinedProps) => {
+  //   const { t } = useTranslation('common')
+  const { mangoAccountAddress } = useMangoAccount()
+  const actions = mangoStore.getState().actions
+  const loading = mangoStore((s) => s.mangoAccount.performance.loading)
+  const performanceData = mangoStore((s) => s.mangoAccount.performance.data)
+
+  useEffect(() => {
+    if (mangoAccountAddress) {
+      actions.fetchAccountPerformance(mangoAccountAddress, 30)
+    }
+  }, [actions, mangoAccountAddress])
+
+  const dailyValues = useMemo(() => {
+    if (!performanceData.length) return []
+
+    const dailyPnl = performanceData.filter((d: PerformanceDataItem) => {
+      const date = new Date(d.time)
+      return date.getHours() === 0
+    })
+
+    return dailyPnl.length
+      ? dailyPnl
+          .map((d: PerformanceDataItem, index: number) => {
+            if (index < dailyPnl.length - 1) {
+              return {
+                time: d.time,
+                pnlChange: dailyPnl[index + 1].pnl - d.pnl,
+              }
+            }
+          })
+          .slice(0, -1)
+          .concat({
+            time: performanceData[performanceData.length - 1].time,
+            pnlChange: pnlChangeToday,
+          })
+          .reverse()
+      : []
+  }, [performanceData])
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="h-96">
+        {loading ? (
+          <BounceLoader />
+        ) : (
+          <div className="flex h-full flex-col justify-between">
+            <h2 className="mb-4">Daily PnL</h2>
+            {dailyValues?.length ? (
+              <div className="thin-scroll overflow-auto pr-1">
+                <div className="border-b border-th-bkg-3">
+                  {dailyValues.map((v: any) => (
+                    <div
+                      className="flex items-center justify-between border-t border-th-bkg-3 px-2 py-3"
+                      key={v.time + v.pnlChange}
+                    >
+                      <p>{dayjs(v.time).format('YYYY-MM-DD')}</p>
+                      <Change change={v.pnlChange} prefix="$" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <p>No daily history</p>
+            )}
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+export default PnlHistoryModal
diff --git a/components/shared/DirectionTriangles.tsx b/components/shared/DirectionTriangles.tsx
index 2488b9ec..f6f58cc0 100644
--- a/components/shared/DirectionTriangles.tsx
+++ b/components/shared/DirectionTriangles.tsx
@@ -3,7 +3,7 @@ export const UpTriangle = ({ size }: { size?: 'small' }) => (
     className={`h-0 w-0 ${
       size === 'small'
         ? 'border-l-[4px] border-r-[4px] border-b-[6.92px]'
-        : 'border-l-[6px] border-r-[6px] border-b-[10.39px]'
+        : 'border-l-[5px] border-r-[5px] border-b-[8.65px]'
     } border-b-th-up border-l-transparent border-r-transparent`}
   />
 )
@@ -13,7 +13,7 @@ export const DownTriangle = ({ size }: { size?: 'small' }) => (
     className={`h-0 w-0 ${
       size === 'small'
         ? 'border-l-[4px] border-r-[4px] border-t-[6.92px]'
-        : 'border-l-[6px] border-r-[6px] border-t-[10.39px]'
+        : 'border-l-[5px] border-r-[5px] border-t-[8.65px]'
     } border-l-transparent border-r-transparent border-t-th-down`}
   />
 )
diff --git a/components/swap/SwapHistoryTable.tsx b/components/swap/SwapHistoryTable.tsx
index 18f17534..6a5c6813 100644
--- a/components/swap/SwapHistoryTable.tsx
+++ b/components/swap/SwapHistoryTable.tsx
@@ -31,10 +31,8 @@ import { useWallet } from '@solana/wallet-adapter-react'
 
 const SwapHistoryTable = () => {
   const { t } = useTranslation(['common', 'settings', 'swap'])
-  const swapHistory = mangoStore((s) => s.mangoAccount.stats.swapHistory.data)
-  const initialLoad = mangoStore(
-    (s) => s.mangoAccount.stats.swapHistory.initialLoad
-  )
+  const swapHistory = mangoStore((s) => s.mangoAccount.swapHistory.data)
+  const initialLoad = mangoStore((s) => s.mangoAccount.swapHistory.initialLoad)
   const { connected } = useWallet()
   const { mangoTokens } = useJupiterMints()
   const [showSwapDetails, setSwapDetails] = useState('')
diff --git a/components/wallet/ConnectedMenu.tsx b/components/wallet/ConnectedMenu.tsx
index 0d7b3413..a471c9fa 100644
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@@ -46,8 +46,12 @@ const ConnectedMenu = () => {
       state.mangoAccount.current = undefined
       state.mangoAccounts = []
       state.mangoAccount.openOrders = {}
-      state.mangoAccount.stats.interestTotals = { data: [], loading: false }
-      state.mangoAccount.stats.performance = { data: [], loading: false }
+      state.mangoAccount.interestTotals = { data: [], loading: false }
+      state.mangoAccount.performance = {
+        data: [],
+        loading: false,
+        initialLoad: false,
+      }
     })
     disconnect()
     wallet?.adapter.disconnect()
diff --git a/store/mangoStore.ts b/store/mangoStore.ts
index 6a2e7f56..44b64cfd 100644
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@@ -238,13 +238,15 @@ export type MangoStore = {
     openOrders: Record<string, Order[] | PerpOrder[]>
     perpPositions: PerpPosition[]
     spotBalances: SpotBalances
-    stats: {
-      interestTotals: { data: TotalInterestDataItem[]; loading: boolean }
-      performance: { data: PerformanceDataItem[]; loading: boolean }
-      swapHistory: {
-        data: SwapHistoryItem[]
-        initialLoad: boolean
-      }
+    interestTotals: { data: TotalInterestDataItem[]; loading: boolean }
+    performance: {
+      data: PerformanceDataItem[]
+      loading: boolean
+      initialLoad: boolean
+    }
+    swapHistory: {
+      data: SwapHistoryItem[]
+      initialLoad: boolean
     }
     tradeHistory: SpotTradeHistory[]
   }
@@ -378,11 +380,9 @@ const mangoStore = create<MangoStore>()(
         openOrders: {},
         perpPositions: [],
         spotBalances: {},
-        stats: {
-          interestTotals: { data: [], loading: false },
-          performance: { data: [], loading: false },
-          swapHistory: { data: [], initialLoad: false },
-        },
+        interestTotals: { data: [], loading: false },
+        performance: { data: [], loading: false, initialLoad: false },
+        swapHistory: { data: [], initialLoad: false },
         tradeHistory: [],
       },
       mangoAccounts: [],
@@ -455,7 +455,7 @@ const mangoStore = create<MangoStore>()(
         fetchAccountInterestTotals: async (mangoAccountPk: string) => {
           const set = get().set
           set((state) => {
-            state.mangoAccount.stats.interestTotals.loading = true
+            state.mangoAccount.interestTotals.loading = true
           })
           try {
             const response = await fetch(
@@ -473,12 +473,12 @@ const mangoStore = create<MangoStore>()(
               .filter((x: string) => x)
 
             set((state) => {
-              state.mangoAccount.stats.interestTotals.data = stats
-              state.mangoAccount.stats.interestTotals.loading = false
+              state.mangoAccount.interestTotals.data = stats
+              state.mangoAccount.interestTotals.loading = false
             })
           } catch {
             set((state) => {
-              state.mangoAccount.stats.interestTotals.loading = false
+              state.mangoAccount.interestTotals.loading = false
             })
             console.error({
               title: 'Failed to load account interest totals',
@@ -492,7 +492,7 @@ const mangoStore = create<MangoStore>()(
         ) => {
           const set = get().set
           set((state) => {
-            state.mangoAccount.stats.performance.loading = true
+            state.mangoAccount.performance.loading = true
           })
           try {
             const response = await fetch(
@@ -512,18 +512,19 @@ const mangoStore = create<MangoStore>()(
               .filter((x: string) => x)
 
             set((state) => {
-              state.mangoAccount.stats.performance.data = stats.reverse()
-              state.mangoAccount.stats.performance.loading = false
+              state.mangoAccount.performance.data = stats.reverse()
             })
           } catch (e) {
-            set((state) => {
-              state.mangoAccount.stats.performance.loading = false
-            })
             console.error('Failed to load account performance data', e)
-            // notify({
-            //   title: 'Failed to load account performance data',
-            //   type: 'error',
-            // })
+          } finally {
+            const hasLoaded =
+              mangoStore.getState().mangoAccount.performance.initialLoad
+            set((state) => {
+              state.mangoAccount.performance.loading = false
+              if (!hasLoaded) {
+                state.mangoAccount.performance.initialLoad = true
+              }
+            })
           }
         },
         fetchActivityFeed: async (
@@ -847,12 +848,12 @@ const mangoStore = create<MangoStore>()(
                   : []
 
               set((state) => {
-                state.mangoAccount.stats.swapHistory.data = sortedHistory
-                state.mangoAccount.stats.swapHistory.initialLoad = true
+                state.mangoAccount.swapHistory.data = sortedHistory
+                state.mangoAccount.swapHistory.initialLoad = true
               })
             } catch {
               set((state) => {
-                state.mangoAccount.stats.swapHistory.initialLoad = true
+                state.mangoAccount.swapHistory.initialLoad = true
               })
               notify({
                 title: 'Failed to load account swap history data',

From bc48b5a740ba9b20ebd12d155ee6e9a945bc735e Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Mon, 16 Jan 2023 21:07:46 +1100
Subject: [PATCH 21/36] fixes

---
 components/account/AccountPage.tsx    | 94 +++++++++++++++------------
 components/modals/PnlHistoryModal.tsx | 56 +++++++++-------
 2 files changed, 86 insertions(+), 64 deletions(-)

diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index c8041d5d..d92b75d8 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -20,7 +20,6 @@ import { IconButton } from '../shared/Button'
 import {
   ArrowsPointingOutIcon,
   ChartBarIcon,
-  ChevronRightIcon,
   ClockIcon,
 } from '@heroicons/react/20/solid'
 import { Transition } from '@headlessui/react'
@@ -62,9 +61,6 @@ const AccountPage = () => {
   const { group } = useMangoGroup()
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
   const actions = mangoStore.getState().actions
-  const loadPerformanceData = mangoStore(
-    (s) => s.mangoAccount.performance.loading
-  )
   const performanceInitialLoad = mangoStore(
     (s) => s.mangoAccount.performance.initialLoad
   )
@@ -98,10 +94,10 @@ const AccountPage = () => {
   }, [actions, mangoAccountAddress])
 
   useEffect(() => {
-    if (performanceInitialLoad) {
+    if (performanceInitialLoad && !oneDayPerformanceData.length) {
       setOneDayPerformanceData(performanceData)
     }
-  }, [performanceInitialLoad])
+  }, [performanceInitialLoad, oneDayPerformanceData])
 
   const onHoverMenu = (open: boolean, action: string) => {
     if (
@@ -125,6 +121,14 @@ const AccountPage = () => {
     setChartToShow('')
   }
 
+  const handleCloseDailyPnlModal = () => {
+    const set = mangoStore.getState().set
+    set((s) => {
+      s.mangoAccount.performance.data = oneDayPerformanceData
+    })
+    setShowPnlHistory(false)
+  }
+
   const accountValue = useMemo(() => {
     if (!group || !mangoAccount) return 0.0
     return toUiDecimalsForQuote(mangoAccount.getEquity(group).toNumber())
@@ -144,14 +148,19 @@ const AccountPage = () => {
   }, [mangoAccount, group, accountValue])
 
   const { accountPnl, accountValueChange } = useMemo(() => {
-    if (accountValue && performanceData.length) {
+    if (
+      accountValue &&
+      oneDayPerformanceData.length &&
+      performanceData.length
+    ) {
       return {
         accountPnl: performanceData[performanceData.length - 1].pnl,
-        accountValueChange: accountValue - performanceData[0].account_equity,
+        accountValueChange:
+          accountValue - oneDayPerformanceData[0].account_equity,
       }
     }
     return { accountPnl: 0, accountValueChange: 0 }
-  }, [accountValue, performanceData])
+  }, [accountValue, oneDayPerformanceData, performanceData])
 
   const oneDayPnlChange = useMemo(() => {
     if (accountPnl && oneDayPerformanceData.length) {
@@ -273,8 +282,8 @@ const AccountPage = () => {
               <p className="text-th-fgd-4">{t('today')}</p>
             </div>
           </div>
-          {!loadPerformanceData ? (
-            mangoAccount && performanceData.length ? (
+          {performanceInitialLoad ? (
+            oneDayPerformanceData.length ? (
               <div
                 className="relative mt-4 flex h-44 items-end md:mt-0 md:h-24 md:w-48"
                 onMouseEnter={() =>
@@ -290,7 +299,7 @@ const AccountPage = () => {
                       ? COLORS.UP[theme]
                       : COLORS.DOWN[theme]
                   }
-                  data={performanceData.concat(latestAccountData)}
+                  data={oneDayPerformanceData.concat(latestAccountData)}
                   name="accountValue"
                   xKey="time"
                   yKey="account_equity"
@@ -316,11 +325,11 @@ const AccountPage = () => {
                 </Transition>
               </div>
             ) : null
-          ) : (
+          ) : mangoAccountAddress ? (
             <SheenLoader className="mt-4 flex flex-1 md:mt-0">
               <div className="h-40 w-full rounded-md bg-th-bkg-2 md:h-24 md:w-48" />
             </SheenLoader>
-          )}
+          ) : null}
         </div>
         <div className="mt-6 mb-1 lg:mt-0 lg:mb-0">
           <AccountActions />
@@ -442,7 +451,7 @@ const AccountPage = () => {
           <div id="account-step-seven" className="flex flex-col items-start">
             <div className="flex w-full items-center justify-between">
               <Tooltip
-                content="The amount your account has made or lost."
+                content="The amount your account has profited or lost."
                 placement="bottom"
                 delay={250}
               >
@@ -453,7 +462,7 @@ const AccountPage = () => {
               {mangoAccountAddress ? (
                 <div className="flex items-center space-x-3">
                   {performanceData.length > 4 ? (
-                    <Tooltip content="Show PnL Chart" delay={250}>
+                    <Tooltip content="PnL Chart" delay={250}>
                       <IconButton
                         className="text-th-fgd-3"
                         hideBg
@@ -463,7 +472,7 @@ const AccountPage = () => {
                       </IconButton>
                     </Tooltip>
                   ) : null}
-                  <Tooltip content="Show Daily PnL History" delay={250}>
+                  <Tooltip content="Daily PnL History" delay={250}>
                     <IconButton
                       className="text-th-fgd-3"
                       hideBg
@@ -484,25 +493,33 @@ const AccountPage = () => {
             </div>
           </div>
         </div>
-        <button
-          className={`col-span-5 flex items-center justify-between border-t border-th-bkg-3 py-3 pl-6 pr-4 text-left lg:col-span-1 lg:border-l lg:border-t-0 ${
-            interestTotalValue > 1 || interestTotalValue < -1
-              ? 'default-transition cursor-pointer md:hover:bg-th-bkg-2'
-              : 'cursor-default'
-          }`}
-          onClick={() => handleChartToShow('cumulative-interest-value')}
-        >
+        <div className="col-span-5 border-t border-th-bkg-3 py-3 pl-6 pr-4 text-left lg:col-span-1 lg:border-l lg:border-t-0">
           <div id="account-step-eight">
-            <Tooltip
-              content="The value of interest earned (deposits) minus interest paid (borrows)."
-              maxWidth="20rem"
-              placement="bottom-end"
-              delay={250}
-            >
-              <p className="tooltip-underline text-sm text-th-fgd-3 xl:text-base">
-                {t('total-interest-earned')}
-              </p>
-            </Tooltip>
+            <div className="flex w-full items-center justify-between">
+              <Tooltip
+                content="The value of interest earned (deposits) minus interest paid (borrows)."
+                maxWidth="20rem"
+                placement="bottom-end"
+                delay={250}
+              >
+                <p className="tooltip-underline text-sm text-th-fgd-3 xl:text-base">
+                  {t('total-interest-earned')}
+                </p>
+              </Tooltip>
+              {interestTotalValue > 1 || interestTotalValue < -1 ? (
+                <Tooltip content="Cumulative Interest Chart" delay={250}>
+                  <IconButton
+                    className="text-th-fgd-3"
+                    hideBg
+                    onClick={() =>
+                      handleChartToShow('cumulative-interest-value')
+                    }
+                  >
+                    <ChartBarIcon className="h-5 w-5" />
+                  </IconButton>
+                </Tooltip>
+              ) : null}
+            </div>
             <p className="mt-1 mb-0.5 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
               {formatFixedDecimals(interestTotalValue, true, true)}
             </p>
@@ -511,10 +528,7 @@ const AccountPage = () => {
               <p className="text-xs text-th-fgd-4">{t('today')}</p>
             </div>
           </div>
-          {interestTotalValue > 1 || interestTotalValue < -1 ? (
-            <ChevronRightIcon className="-mt-0.5 h-6 w-6" />
-          ) : null}
-        </button>
+        </div>
       </div>
       <AccountTabs />
       {/* {!tourSettings?.account_tour_seen && isOnBoarded && connected ? (
@@ -524,7 +538,7 @@ const AccountPage = () => {
         <PnlHistoryModal
           pnlChangeToday={oneDayPnlChange}
           isOpen={showPnlHistory}
-          onClose={() => setShowPnlHistory(false)}
+          onClose={handleCloseDailyPnlModal}
         />
       ) : null}
     </>
diff --git a/components/modals/PnlHistoryModal.tsx b/components/modals/PnlHistoryModal.tsx
index 3016052e..b5cae654 100644
--- a/components/modals/PnlHistoryModal.tsx
+++ b/components/modals/PnlHistoryModal.tsx
@@ -3,10 +3,11 @@ import Modal from '../shared/Modal'
 import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
 // import { useTranslation } from 'next-i18next'
 import { useEffect, useMemo } from 'react'
-import BounceLoader from '../shared/BounceLoader'
 import useMangoAccount from 'hooks/useMangoAccount'
 import dayjs from 'dayjs'
 import Change from '@components/shared/Change'
+import SheenLoader from '@components/shared/SheenLoader'
+import { NoSymbolIcon } from '@heroicons/react/20/solid'
 
 interface PnlHistoryModalProps {
   pnlChangeToday: number
@@ -61,30 +62,37 @@ const PnlHistoryModal = ({
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <div className="h-96">
-        {loading ? (
-          <BounceLoader />
-        ) : (
-          <div className="flex h-full flex-col justify-between">
-            <h2 className="mb-4">Daily PnL</h2>
-            {dailyValues?.length ? (
-              <div className="thin-scroll overflow-auto pr-1">
-                <div className="border-b border-th-bkg-3">
-                  {dailyValues.map((v: any) => (
-                    <div
-                      className="flex items-center justify-between border-t border-th-bkg-3 px-2 py-3"
-                      key={v.time + v.pnlChange}
-                    >
-                      <p>{dayjs(v.time).format('YYYY-MM-DD')}</p>
-                      <Change change={v.pnlChange} prefix="$" />
-                    </div>
-                  ))}
-                </div>
+        <div className="flex h-full flex-col">
+          <h2 className="mb-4">Daily PnL</h2>
+          {loading ? (
+            <div className="space-y-1.5">
+              {[...Array(4)].map((x, i) => (
+                <SheenLoader className="flex flex-1" key={i}>
+                  <div className="h-12 w-full bg-th-bkg-2" />
+                </SheenLoader>
+              ))}
+            </div>
+          ) : dailyValues?.length ? (
+            <div className="thin-scroll overflow-auto pr-1">
+              <div className="border-b border-th-bkg-3">
+                {dailyValues.map((v: any) => (
+                  <div
+                    className="flex items-center justify-between border-t border-th-bkg-3 px-2 py-3"
+                    key={v.time + v.pnlChange}
+                  >
+                    <p>{dayjs(v.time).format('YYYY-MM-DD')}</p>
+                    <Change change={v.pnlChange} prefix="$" />
+                  </div>
+                ))}
               </div>
-            ) : (
-              <p>No daily history</p>
-            )}
-          </div>
-        )}
+            </div>
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center pb-12">
+              <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-3" />
+              <p>No PnL History</p>
+            </div>
+          )}
+        </div>
       </div>
     </Modal>
   )

From 9716c5f7755acf9c8a956b9515c5d3b1cfa77927 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Tue, 17 Jan 2023 12:26:31 +1100
Subject: [PATCH 22/36] add pnl for current week

---
 components/account/AccountPage.tsx    |  2 +-
 components/modals/PnlHistoryModal.tsx | 73 ++++++++++++++++++++-------
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index d92b75d8..8a9a7752 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -472,7 +472,7 @@ const AccountPage = () => {
                       </IconButton>
                     </Tooltip>
                   ) : null}
-                  <Tooltip content="Daily PnL History" delay={250}>
+                  <Tooltip content="PnL History" delay={250}>
                     <IconButton
                       className="text-th-fgd-3"
                       hideBg
diff --git a/components/modals/PnlHistoryModal.tsx b/components/modals/PnlHistoryModal.tsx
index b5cae654..bb83fe2b 100644
--- a/components/modals/PnlHistoryModal.tsx
+++ b/components/modals/PnlHistoryModal.tsx
@@ -9,6 +9,11 @@ import Change from '@components/shared/Change'
 import SheenLoader from '@components/shared/SheenLoader'
 import { NoSymbolIcon } from '@heroicons/react/20/solid'
 
+interface PnlChange {
+  time: string
+  pnlChange: number
+}
+
 interface PnlHistoryModalProps {
   pnlChangeToday: number
 }
@@ -32,7 +37,7 @@ const PnlHistoryModal = ({
     }
   }, [actions, mangoAccountAddress])
 
-  const dailyValues = useMemo(() => {
+  const dailyValues: PnlChange[] = useMemo(() => {
     if (!performanceData.length) return []
 
     const dailyPnl = performanceData.filter((d: PerformanceDataItem) => {
@@ -48,22 +53,43 @@ const PnlHistoryModal = ({
                 time: d.time,
                 pnlChange: dailyPnl[index + 1].pnl - d.pnl,
               }
+            } else {
+              return {
+                time: performanceData[performanceData.length - 1].time,
+                pnlChange: pnlChangeToday,
+              }
             }
           })
-          .slice(0, -1)
-          .concat({
-            time: performanceData[performanceData.length - 1].time,
-            pnlChange: pnlChangeToday,
-          })
           .reverse()
       : []
   }, [performanceData])
 
+  const pnlThisWeek = useMemo(() => {
+    if (dailyValues.length) {
+      const saturdayIndex = dailyValues.findIndex((d) => {
+        const day = new Date(d.time).getDay()
+        return day === 6
+      })
+      if (saturdayIndex !== -1) {
+        return dailyValues
+          .slice(0, saturdayIndex)
+          .reduce((a, c) => a + c.pnlChange, 0)
+      } else {
+        return dailyValues.reduce((a, c) => a + c.pnlChange, 0)
+      }
+    }
+    return 0
+  }, [dailyValues])
+
+  const getLastSunday = (d: Date) => {
+    return d.setDate(d.getDate() - d.getDay())
+  }
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <div className="h-96">
         <div className="flex h-full flex-col">
-          <h2 className="mb-4">Daily PnL</h2>
+          <h2 className="mb-4">PnL History</h2>
           {loading ? (
             <div className="space-y-1.5">
               {[...Array(4)].map((x, i) => (
@@ -73,19 +99,28 @@ const PnlHistoryModal = ({
               ))}
             </div>
           ) : dailyValues?.length ? (
-            <div className="thin-scroll overflow-auto pr-1">
-              <div className="border-b border-th-bkg-3">
-                {dailyValues.map((v: any) => (
-                  <div
-                    className="flex items-center justify-between border-t border-th-bkg-3 px-2 py-3"
-                    key={v.time + v.pnlChange}
-                  >
-                    <p>{dayjs(v.time).format('YYYY-MM-DD')}</p>
-                    <Change change={v.pnlChange} prefix="$" />
-                  </div>
-                ))}
+            <>
+              <div className="thin-scroll overflow-auto pr-1">
+                <div className="border-b border-th-bkg-3">
+                  {dailyValues.map((v: any) => (
+                    <div
+                      className="flex items-center justify-between border-t border-th-bkg-3 p-3"
+                      key={v.time + v.pnlChange}
+                    >
+                      <p>{dayjs(v.time).format('YYYY-MM-DD')}</p>
+                      <Change change={v.pnlChange} prefix="$" />
+                    </div>
+                  ))}
+                </div>
               </div>
-            </div>
+
+              <div className="mt-4 flex justify-between rounded-md bg-th-bkg-2 p-3">
+                <p>{`Week starting ${dayjs(getLastSunday(new Date())).format(
+                  'MM-DD'
+                )}`}</p>
+                <Change change={pnlThisWeek} prefix="$" />
+              </div>
+            </>
           ) : (
             <div className="flex h-full flex-col items-center justify-center pb-12">
               <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-3" />

From 46d9c54ef3dec3492719b72bf9440f5c1df4e862 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Tue, 17 Jan 2023 15:59:51 +1100
Subject: [PATCH 23/36] add translation vars

---
 components/account/AccountPage.tsx    | 31 ++++++++-------------------
 components/modals/PnlHistoryModal.tsx | 16 ++++++++------
 pages/index.tsx                       |  1 +
 public/locales/en/account.json        | 11 ++++++++++
 public/locales/en/common.json         |  1 +
 public/locales/es/account.json        | 11 ++++++++++
 public/locales/es/common.json         |  1 +
 public/locales/ru/account.json        | 11 ++++++++++
 public/locales/ru/common.json         |  1 +
 public/locales/zh/account.json        | 11 ++++++++++
 public/locales/zh/common.json         |  1 +
 public/locales/zh_tw/account.json     | 11 ++++++++++
 public/locales/zh_tw/common.json      |  1 +
 13 files changed, 79 insertions(+), 29 deletions(-)
 create mode 100644 public/locales/en/account.json
 create mode 100644 public/locales/es/account.json
 create mode 100644 public/locales/ru/account.json
 create mode 100644 public/locales/zh/account.json
 create mode 100644 public/locales/zh_tw/account.json

diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index 8a9a7752..2d749f66 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -3,7 +3,6 @@ import {
   toUiDecimalsForQuote,
 } from '@blockworks-foundation/mango-v4'
 import { useTranslation } from 'next-i18next'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useEffect, useMemo, useState } from 'react'
 import AccountActions from './AccountActions'
 import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
@@ -43,20 +42,8 @@ import { breakpoints } from 'utils/theme'
 import useMangoGroup from 'hooks/useMangoGroup'
 import PnlHistoryModal from '@components/modals/PnlHistoryModal'
 
-export async function getStaticProps({ locale }: { locale: string }) {
-  return {
-    props: {
-      ...(await serverSideTranslations(locale, [
-        'common',
-        'close-account',
-        'trade',
-      ])),
-    },
-  }
-}
-
 const AccountPage = () => {
-  const { t } = useTranslation('common')
+  const { t } = useTranslation(['common', 'account'])
   // const { connected } = useWallet()
   const { group } = useMangoGroup()
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
@@ -385,7 +372,7 @@ const AccountPage = () => {
         <div className="col-span-5 flex border-t border-th-bkg-3 py-3 pl-6 lg:col-span-1 lg:border-l lg:border-t-0">
           <div id="account-step-five">
             <Tooltip
-              content="The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw."
+              content={t('account:tooltip-free-collateral')}
               maxWidth="20rem"
               placement="bottom"
               delay={250}
@@ -407,12 +394,12 @@ const AccountPage = () => {
             </p>
             <span className="text-xs font-normal text-th-fgd-4">
               <Tooltip
-                content="Total value of collateral for trading and borrowing (including unsettled PnL)."
+                content={t('account:tooltip-total-collateral')}
                 maxWidth="20rem"
                 placement="bottom"
                 delay={250}
               >
-                <span className="tooltip-underline">Total</span>:
+                <span className="tooltip-underline">{t('total')}</span>:
                 <span className="ml-1 font-mono text-th-fgd-2">
                   {group && mangoAccount
                     ? formatFixedDecimals(
@@ -433,7 +420,7 @@ const AccountPage = () => {
         <div className="col-span-5 flex border-t border-th-bkg-3 py-3 pl-6 lg:col-span-1 lg:border-l lg:border-t-0">
           <div id="account-step-six">
             <Tooltip
-              content="Total assets value divided by account equity value."
+              content={t('account:tooltip-leverage')}
               maxWidth="20rem"
               placement="bottom"
               delay={250}
@@ -451,7 +438,7 @@ const AccountPage = () => {
           <div id="account-step-seven" className="flex flex-col items-start">
             <div className="flex w-full items-center justify-between">
               <Tooltip
-                content="The amount your account has profited or lost."
+                content={t('account:tooltip-pnl')}
                 placement="bottom"
                 delay={250}
               >
@@ -462,7 +449,7 @@ const AccountPage = () => {
               {mangoAccountAddress ? (
                 <div className="flex items-center space-x-3">
                   {performanceData.length > 4 ? (
-                    <Tooltip content="PnL Chart" delay={250}>
+                    <Tooltip content={t('account:pnl-chart')} delay={250}>
                       <IconButton
                         className="text-th-fgd-3"
                         hideBg
@@ -472,7 +459,7 @@ const AccountPage = () => {
                       </IconButton>
                     </Tooltip>
                   ) : null}
-                  <Tooltip content="PnL History" delay={250}>
+                  <Tooltip content={t('account:pnl-history')} delay={250}>
                     <IconButton
                       className="text-th-fgd-3"
                       hideBg
@@ -497,7 +484,7 @@ const AccountPage = () => {
           <div id="account-step-eight">
             <div className="flex w-full items-center justify-between">
               <Tooltip
-                content="The value of interest earned (deposits) minus interest paid (borrows)."
+                content={t('account:tooltip-total-interest')}
                 maxWidth="20rem"
                 placement="bottom-end"
                 delay={250}
diff --git a/components/modals/PnlHistoryModal.tsx b/components/modals/PnlHistoryModal.tsx
index bb83fe2b..272b201d 100644
--- a/components/modals/PnlHistoryModal.tsx
+++ b/components/modals/PnlHistoryModal.tsx
@@ -1,7 +1,7 @@
 import { ModalProps } from '../../types/modal'
 import Modal from '../shared/Modal'
 import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
-// import { useTranslation } from 'next-i18next'
+import { useTranslation } from 'next-i18next'
 import { useEffect, useMemo } from 'react'
 import useMangoAccount from 'hooks/useMangoAccount'
 import dayjs from 'dayjs'
@@ -25,7 +25,7 @@ const PnlHistoryModal = ({
   onClose,
   pnlChangeToday,
 }: ModalCombinedProps) => {
-  //   const { t } = useTranslation('common')
+  const { t } = useTranslation('account')
   const { mangoAccountAddress } = useMangoAccount()
   const actions = mangoStore.getState().actions
   const loading = mangoStore((s) => s.mangoAccount.performance.loading)
@@ -89,7 +89,7 @@ const PnlHistoryModal = ({
     <Modal isOpen={isOpen} onClose={onClose}>
       <div className="h-96">
         <div className="flex h-full flex-col">
-          <h2 className="mb-4">PnL History</h2>
+          <h2 className="mb-4">{t('pnl-history')}</h2>
           {loading ? (
             <div className="space-y-1.5">
               {[...Array(4)].map((x, i) => (
@@ -115,16 +115,18 @@ const PnlHistoryModal = ({
               </div>
 
               <div className="mt-4 flex justify-between rounded-md bg-th-bkg-2 p-3">
-                <p>{`Week starting ${dayjs(getLastSunday(new Date())).format(
-                  'MM-DD'
-                )}`}</p>
+                <p>
+                  {t('week-starting', {
+                    week: dayjs(getLastSunday(new Date())).format('MM-DD'),
+                  })}
+                </p>
                 <Change change={pnlThisWeek} prefix="$" />
               </div>
             </>
           ) : (
             <div className="flex h-full flex-col items-center justify-center pb-12">
               <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-3" />
-              <p>No PnL History</p>
+              <p>{t('no-pnl-history')}</p>
             </div>
           )}
         </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index b216e035..ead15c41 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,6 +6,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, [
+        'account',
         'activity',
         'common',
         'onboarding',
diff --git a/public/locales/en/account.json b/public/locales/en/account.json
new file mode 100644
index 00000000..28d4646c
--- /dev/null
+++ b/public/locales/en/account.json
@@ -0,0 +1,11 @@
+{
+    "no-pnl-history": "No PnL History",
+    "pnl-chart": "PnL Chart",
+    "pnl-history": "PnL History",
+    "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
+    "tooltip-leverage": "Total assets value divided by account equity value",
+    "tooltip-pnl": "The amount your account has profited or lost",
+    "tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
+    "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
+    "week-starting": "Week starting {{week}}"
+}
\ No newline at end of file
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 3f6b6386..ddd3cedd 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -121,6 +121,7 @@
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
   "tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
   "tooltip-collateral-value": "The USD amount you can trade or borrow against",
+  "total": "Total",
   "total-borrows": "Total Borrows",
   "total-borrow-value": "Total Borrow Value",
   "total-collateral": "Total Collateral",
diff --git a/public/locales/es/account.json b/public/locales/es/account.json
new file mode 100644
index 00000000..28d4646c
--- /dev/null
+++ b/public/locales/es/account.json
@@ -0,0 +1,11 @@
+{
+    "no-pnl-history": "No PnL History",
+    "pnl-chart": "PnL Chart",
+    "pnl-history": "PnL History",
+    "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
+    "tooltip-leverage": "Total assets value divided by account equity value",
+    "tooltip-pnl": "The amount your account has profited or lost",
+    "tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
+    "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
+    "week-starting": "Week starting {{week}}"
+}
\ No newline at end of file
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 3f6b6386..ddd3cedd 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -121,6 +121,7 @@
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
   "tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
   "tooltip-collateral-value": "The USD amount you can trade or borrow against",
+  "total": "Total",
   "total-borrows": "Total Borrows",
   "total-borrow-value": "Total Borrow Value",
   "total-collateral": "Total Collateral",
diff --git a/public/locales/ru/account.json b/public/locales/ru/account.json
new file mode 100644
index 00000000..28d4646c
--- /dev/null
+++ b/public/locales/ru/account.json
@@ -0,0 +1,11 @@
+{
+    "no-pnl-history": "No PnL History",
+    "pnl-chart": "PnL Chart",
+    "pnl-history": "PnL History",
+    "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
+    "tooltip-leverage": "Total assets value divided by account equity value",
+    "tooltip-pnl": "The amount your account has profited or lost",
+    "tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
+    "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
+    "week-starting": "Week starting {{week}}"
+}
\ No newline at end of file
diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json
index 3f6b6386..ddd3cedd 100644
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@@ -121,6 +121,7 @@
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
   "tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
   "tooltip-collateral-value": "The USD amount you can trade or borrow against",
+  "total": "Total",
   "total-borrows": "Total Borrows",
   "total-borrow-value": "Total Borrow Value",
   "total-collateral": "Total Collateral",
diff --git a/public/locales/zh/account.json b/public/locales/zh/account.json
new file mode 100644
index 00000000..28d4646c
--- /dev/null
+++ b/public/locales/zh/account.json
@@ -0,0 +1,11 @@
+{
+    "no-pnl-history": "No PnL History",
+    "pnl-chart": "PnL Chart",
+    "pnl-history": "PnL History",
+    "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
+    "tooltip-leverage": "Total assets value divided by account equity value",
+    "tooltip-pnl": "The amount your account has profited or lost",
+    "tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
+    "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
+    "week-starting": "Week starting {{week}}"
+}
\ No newline at end of file
diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json
index 3f6b6386..ddd3cedd 100644
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@@ -121,6 +121,7 @@
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
   "tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
   "tooltip-collateral-value": "The USD amount you can trade or borrow against",
+  "total": "Total",
   "total-borrows": "Total Borrows",
   "total-borrow-value": "Total Borrow Value",
   "total-collateral": "Total Collateral",
diff --git a/public/locales/zh_tw/account.json b/public/locales/zh_tw/account.json
new file mode 100644
index 00000000..28d4646c
--- /dev/null
+++ b/public/locales/zh_tw/account.json
@@ -0,0 +1,11 @@
+{
+    "no-pnl-history": "No PnL History",
+    "pnl-chart": "PnL Chart",
+    "pnl-history": "PnL History",
+    "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
+    "tooltip-leverage": "Total assets value divided by account equity value",
+    "tooltip-pnl": "The amount your account has profited or lost",
+    "tooltip-total-collateral": "Total value of collateral for trading and borrowing (including unsettled PnL)",
+    "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
+    "week-starting": "Week starting {{week}}"
+}
\ No newline at end of file
diff --git a/public/locales/zh_tw/common.json b/public/locales/zh_tw/common.json
index 3f6b6386..ddd3cedd 100644
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@@ -121,6 +121,7 @@
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",
   "tooltip-borrow-rate": "The variable interest rate you'll pay on your borrowed balance",
   "tooltip-collateral-value": "The USD amount you can trade or borrow against",
+  "total": "Total",
   "total-borrows": "Total Borrows",
   "total-borrow-value": "Total Borrow Value",
   "total-collateral": "Total Collateral",

From ad473e9807068e77a979502db74d112c692b2ca4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Brzezin=CC=81ski?= <a.brzezinski94@gmail.com>
Date: Wed, 18 Jan 2023 02:04:50 +0100
Subject: [PATCH 24/36] upgrade mango v4

---
 yarn.lock | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f27ae11c..624ae37c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -52,7 +52,7 @@
 
 "@blockworks-foundation/mango-v4@https://github.com/blockworks-foundation/mango-v4.git#ts-client":
   version "0.0.1-beta.6"
-  resolved "https://github.com/blockworks-foundation/mango-v4.git#59ef05ebe95ed5ca947ab5cfecf97c4c9fc99740"
+  resolved "https://github.com/blockworks-foundation/mango-v4.git#adc9140ad2a3c2e9c3b425b8804d9415f2a05067"
   dependencies:
     "@project-serum/anchor" "^0.25.0"
     "@project-serum/serum" "^0.13.65"
@@ -4844,7 +4844,14 @@ node-addon-api@^2.0.0:
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-2.0.2.tgz#432cfa82962ce494b132e9d72a15b29f71ff5d32"
   integrity sha512-Ntyt4AIXyaLIuMHF6IOoTakB3K+RWxwtsHNRxllEoA6vPwP9o4866g6YWDLUdnucilZhmkxiHwHr11gAENw+QA==
 
-node-fetch@2, node-fetch@2.6.7, node-fetch@^2.6.1:
+node-fetch@2, node-fetch@^2.6.1:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.8.tgz#a68d30b162bc1d8fd71a367e81b997e1f4d4937e"
+  integrity sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+node-fetch@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==

From 9d8f804b75a2b8d3f099bdca7331d993698ff2dc Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Wed, 18 Jan 2023 22:18:57 +1100
Subject: [PATCH 25/36] fix token logo symbol matching

---
 components/swap/SwapHistoryTable.tsx | 8 ++++----
 components/trade/MarketLogos.tsx     | 8 ++++++--
 hooks/useSelectedMarket.ts           | 8 +++++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/components/swap/SwapHistoryTable.tsx b/components/swap/SwapHistoryTable.tsx
index 18f17534..04fe735e 100644
--- a/components/swap/SwapHistoryTable.tsx
+++ b/components/swap/SwapHistoryTable.tsx
@@ -105,10 +105,10 @@ const SwapHistoryTable = () => {
 
             if (mangoTokens.length) {
               baseLogoURI = mangoTokens.find(
-                (t) => t.symbol === inSymbol
+                (t) => t.symbol.toUpperCase() === inSymbol.toUpperCase()
               )?.logoURI
               quoteLogoURI = mangoTokens.find(
-                (t) => t.symbol === outSymbol
+                (t) => t.symbol.toUpperCase() === outSymbol.toUpperCase()
               )?.logoURI
             }
 
@@ -268,10 +268,10 @@ const SwapHistoryTable = () => {
 
           if (mangoTokens.length) {
             baseLogoURI = mangoTokens.find(
-              (t) => t.symbol === inSymbol
+              (t) => t.symbol.toUpperCase() === inSymbol.toUpperCase()
             )?.logoURI
             quoteLogoURI = mangoTokens.find(
-              (t) => t.symbol === outSymbol
+              (t) => t.symbol.toUpperCase() === outSymbol.toUpperCase()
             )?.logoURI
           }
 
diff --git a/components/trade/MarketLogos.tsx b/components/trade/MarketLogos.tsx
index bf394db2..02d6fb8f 100644
--- a/components/trade/MarketLogos.tsx
+++ b/components/trade/MarketLogos.tsx
@@ -33,8 +33,12 @@ const MarketLogos = ({
       )
     } else {
       jupiterBaseToken =
-        mangoTokens.find((t) => t.symbol === market.name.split('-')[0]) ||
-        mangoTokens.find((t) => t.symbol.includes(market.name.split('-')[0]))
+        mangoTokens.find(
+          (t) => t.symbol.toUpperCase() === market.name.split('-')[0]
+        ) ||
+        mangoTokens.find((t) =>
+          t.symbol.toUpperCase()?.includes(market.name.split('-')[0])
+        )
     }
     const baseLogoURI = jupiterBaseToken ? jupiterBaseToken.logoURI : ''
     const quoteLogoURI = jupiterQuoteToken ? jupiterQuoteToken.logoURI : ''
diff --git a/hooks/useSelectedMarket.ts b/hooks/useSelectedMarket.ts
index 775c9755..8cd268f8 100644
--- a/hooks/useSelectedMarket.ts
+++ b/hooks/useSelectedMarket.ts
@@ -40,8 +40,8 @@ export default function useSelectedMarket() {
   const baseLogoURI = useMemo(() => {
     if (!baseSymbol || !mangoTokens.length) return ''
     const token =
-      mangoTokens.find((t) => t.symbol === baseSymbol) ||
-      mangoTokens.find((t) => t.symbol?.includes(baseSymbol))
+      mangoTokens.find((t) => t.symbol.toUpperCase() === baseSymbol) ||
+      mangoTokens.find((t) => t.symbol.toUpperCase()?.includes(baseSymbol))
     if (token) {
       return token.logoURI
     }
@@ -64,7 +64,9 @@ export default function useSelectedMarket() {
 
   const quoteLogoURI = useMemo(() => {
     if (!quoteSymbol || !mangoTokens.length) return ''
-    const token = mangoTokens.find((t) => t.symbol === quoteSymbol)
+    const token = mangoTokens.find(
+      (t) => t.symbol.toUpperCase() === quoteSymbol
+    )
     if (token) {
       return token.logoURI
     }

From 7107b91ad17637e276d1a0592130efadf1578c9d Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Wed, 18 Jan 2023 22:34:25 +1100
Subject: [PATCH 26/36] fix swap history amounts and improve columns

---
 components/swap/SwapHistoryTable.tsx | 110 ++++++++++++++-------------
 public/locales/en/swap.json          |   2 +
 public/locales/es/swap.json          |   6 +-
 public/locales/ru/swap.json          |   6 +-
 public/locales/zh/swap.json          |   6 +-
 public/locales/zh_tw/swap.json       |   6 +-
 6 files changed, 76 insertions(+), 60 deletions(-)

diff --git a/components/swap/SwapHistoryTable.tsx b/components/swap/SwapHistoryTable.tsx
index 04fe735e..29038dbf 100644
--- a/components/swap/SwapHistoryTable.tsx
+++ b/components/swap/SwapHistoryTable.tsx
@@ -63,7 +63,8 @@ const SwapHistoryTable = () => {
         <thead>
           <TrHead>
             <Th className="text-left">{t('date')}</Th>
-            <Th className="w-1/3 text-left">{t('swap')}</Th>
+            <Th className="text-left">{t('swap:paid')}</Th>
+            <Th className="text-left">{t('swap:received')}</Th>
             <Th className="text-right">{t('value')}</Th>
             <Th className="text-right">{t('borrow')}</Th>
             <Th className="text-right">{t('borrow-fee')}</Th>
@@ -112,7 +113,7 @@ const SwapHistoryTable = () => {
               )?.logoURI
             }
 
-            const inDecimals = countLeadingZeros(swap_in_amount)
+            const inDecimals = countLeadingZeros(swap_in_amount) + 2
             const outDecimals = countLeadingZeros(swap_out_amount) + 2
             return (
               <TrBody key={signature}>
@@ -124,54 +125,53 @@ const SwapHistoryTable = () => {
                     {dayjs(block_datetime).format('h:mma')}
                   </p>
                 </Td>
-                <Td className="w-1/3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex w-1/2 items-center">
-                      <div className="mr-2 flex flex-shrink-0 items-center">
-                        <Image
-                          alt=""
-                          width="24"
-                          height="24"
-                          src={baseLogoURI || ''}
-                        />
-                      </div>
-                      <div>
-                        <p className="whitespace-nowrap">
-                          {`${formatDecimal(swap_in_amount, inDecimals)}`}
-                          <span className="ml-1 font-body text-th-fgd-3">
-                            {inSymbol}
-                          </span>
-                        </p>
-                        <p className="text-xs text-th-fgd-3">
-                          <span className="font-body text-th-fgd-4">
-                            {t('price')}:
-                          </span>{' '}
-                          {formatFixedDecimals(swap_in_price_usd, true)}
-                        </p>
-                      </div>
+                <Td>
+                  <div className="flex items-center">
+                    <div className="mr-2.5 flex flex-shrink-0 items-center">
+                      <Image
+                        alt=""
+                        width="24"
+                        height="24"
+                        src={baseLogoURI || ''}
+                      />
                     </div>
-                    <ArrowRightIcon className="mx-4 h-4 w-4 flex-shrink-0 text-th-fgd-4" />
-                    <div className="flex w-1/2 items-center">
-                      <div className="mr-2 flex flex-shrink-0 items-center">
-                        <Image
-                          alt=""
-                          width="24"
-                          height="24"
-                          src={quoteLogoURI || ''}
-                        />
-                      </div>
-                      <div>
-                        <p className="whitespace-nowrap">
-                          {`${formatDecimal(swap_out_amount, outDecimals)}`}
-                          <span className="ml-1 font-body text-th-fgd-3">
-                            {outSymbol}
-                          </span>
-                        </p>
-                        <p className="text-xs text-th-fgd-4">
-                          <span className="font-body">{t('price')}:</span>{' '}
-                          {formatFixedDecimals(swap_out_price_usd, true)}
-                        </p>
-                      </div>
+                    <div>
+                      <p className="whitespace-nowrap">
+                        {`${formatDecimal(swap_in_amount, inDecimals)}`}
+                        <span className="ml-1 font-body text-th-fgd-3">
+                          {inSymbol}
+                        </span>
+                      </p>
+                      <p className="text-xs text-th-fgd-3">
+                        <span className="font-body text-th-fgd-4">
+                          {t('price')}:
+                        </span>{' '}
+                        {formatFixedDecimals(swap_in_price_usd, true)}
+                      </p>
+                    </div>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex items-center">
+                    <div className="mr-2.5 flex flex-shrink-0 items-center">
+                      <Image
+                        alt=""
+                        width="24"
+                        height="24"
+                        src={quoteLogoURI || ''}
+                      />
+                    </div>
+                    <div>
+                      <p className="whitespace-nowrap">
+                        {`${formatDecimal(swap_out_amount, outDecimals)}`}
+                        <span className="ml-1 font-body text-th-fgd-3">
+                          {outSymbol}
+                        </span>
+                      </p>
+                      <p className="text-xs text-th-fgd-4">
+                        <span className="font-body">{t('price')}:</span>{' '}
+                        {formatFixedDecimals(swap_out_price_usd, true)}
+                      </p>
                     </div>
                   </div>
                 </Td>
@@ -275,6 +275,9 @@ const SwapHistoryTable = () => {
             )?.logoURI
           }
 
+          const inDecimals = countLeadingZeros(swap_in_amount) + 2
+          const outDecimals = countLeadingZeros(swap_out_amount) + 2
+
           return (
             <div key={signature} className="border-b border-th-bkg-3 p-4">
               <div className="flex items-center justify-between">
@@ -290,7 +293,7 @@ const SwapHistoryTable = () => {
                     </div>
                     <div>
                       <p className="whitespace-nowrap font-mono text-th-fgd-1">
-                        {swap_in_amount.toFixed(2)}{' '}
+                        {formatDecimal(swap_in_amount, inDecimals)}{' '}
                         <span className="font-body text-th-fgd-3">
                           {inSymbol}
                         </span>
@@ -315,7 +318,7 @@ const SwapHistoryTable = () => {
                     </div>
                     <div>
                       <p className="whitespace-nowrap font-mono text-th-fgd-1">
-                        {swap_out_amount.toFixed(2)}{' '}
+                        {formatDecimal(swap_out_amount, outDecimals)}{' '}
                         <span className="font-body text-th-fgd-3">
                           {outSymbol}
                         </span>
@@ -329,7 +332,10 @@ const SwapHistoryTable = () => {
                     </div>
                   </div>
                 </div>
-                <IconButton onClick={() => handleShowSwapDetails(signature)}>
+                <IconButton
+                  onClick={() => handleShowSwapDetails(signature)}
+                  size="medium"
+                >
                   <ChevronDownIcon
                     className={`${
                       showSwapDetails === signature
diff --git a/public/locales/en/swap.json b/public/locales/en/swap.json
index 98531531..cc9c0b5f 100644
--- a/public/locales/en/swap.json
+++ b/public/locales/en/swap.json
@@ -11,11 +11,13 @@
     "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
+    "paid": "Paid",
     "pay": "You Pay",
     "preset": "Preset",
     "price-impact": "Price Impact",
     "rate": "Rate",
     "receive": "You Receive",
+    "received": "Received",
     "review-swap": "Review Swap",
     "show-fees": "Show Fees",
     "slippage": "Slippage",
diff --git a/public/locales/es/swap.json b/public/locales/es/swap.json
index 2649da20..cc9c0b5f 100644
--- a/public/locales/es/swap.json
+++ b/public/locales/es/swap.json
@@ -11,18 +11,20 @@
     "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
+    "paid": "Paid",
     "pay": "You Pay",
     "preset": "Preset",
     "price-impact": "Price Impact",
     "rate": "Rate",
     "receive": "You Receive",
+    "received": "Received",
     "review-swap": "Review Swap",
     "show-fees": "Show Fees",
     "slippage": "Slippage",
     "swap-history": "Swap History",
     "swap-route": "Swap Route",
-    "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap",
-    "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap",
+    "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
+    "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
     "use-margin": "Allow Margin"
 }
\ No newline at end of file
diff --git a/public/locales/ru/swap.json b/public/locales/ru/swap.json
index 2649da20..cc9c0b5f 100644
--- a/public/locales/ru/swap.json
+++ b/public/locales/ru/swap.json
@@ -11,18 +11,20 @@
     "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
+    "paid": "Paid",
     "pay": "You Pay",
     "preset": "Preset",
     "price-impact": "Price Impact",
     "rate": "Rate",
     "receive": "You Receive",
+    "received": "Received",
     "review-swap": "Review Swap",
     "show-fees": "Show Fees",
     "slippage": "Slippage",
     "swap-history": "Swap History",
     "swap-route": "Swap Route",
-    "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap",
-    "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap",
+    "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
+    "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
     "use-margin": "Allow Margin"
 }
\ No newline at end of file
diff --git a/public/locales/zh/swap.json b/public/locales/zh/swap.json
index 2649da20..cc9c0b5f 100644
--- a/public/locales/zh/swap.json
+++ b/public/locales/zh/swap.json
@@ -11,18 +11,20 @@
     "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
+    "paid": "Paid",
     "pay": "You Pay",
     "preset": "Preset",
     "price-impact": "Price Impact",
     "rate": "Rate",
     "receive": "You Receive",
+    "received": "Received",
     "review-swap": "Review Swap",
     "show-fees": "Show Fees",
     "slippage": "Slippage",
     "swap-history": "Swap History",
     "swap-route": "Swap Route",
-    "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap",
-    "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap",
+    "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
+    "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
     "use-margin": "Allow Margin"
 }
\ No newline at end of file
diff --git a/public/locales/zh_tw/swap.json b/public/locales/zh_tw/swap.json
index 2649da20..cc9c0b5f 100644
--- a/public/locales/zh_tw/swap.json
+++ b/public/locales/zh_tw/swap.json
@@ -11,18 +11,20 @@
     "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
+    "paid": "Paid",
     "pay": "You Pay",
     "preset": "Preset",
     "price-impact": "Price Impact",
     "rate": "Rate",
     "receive": "You Receive",
+    "received": "Received",
     "review-swap": "Review Swap",
     "show-fees": "Show Fees",
     "slippage": "Slippage",
     "swap-history": "Swap History",
     "swap-route": "Swap Route",
-    "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap",
-    "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap",
+    "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
+    "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
     "use-margin": "Allow Margin"
 }
\ No newline at end of file

From 4d5230cf05b98ccbf649bc7c6cb7c592b99fedd9 Mon Sep 17 00:00:00 2001
From: Riordan Panayides <riordan@panayid.es>
Date: Wed, 18 Jan 2023 13:13:29 +0000
Subject: [PATCH 27/36] Replace references to mango-transaction-log

---
 components/profile/EditNftProfilePic.tsx |  5 +++--
 components/profile/EditProfileForm.tsx   |  5 +++--
 components/tours/CustomTooltip.tsx       |  3 ++-
 components/trade/PerpFundingRate.tsx     |  3 ++-
 store/mangoStore.ts                      | 21 +++++++++++----------
 utils/constants.ts                       |  2 ++
 6 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/profile/EditNftProfilePic.tsx b/components/profile/EditNftProfilePic.tsx
index b711d950..0a11b390 100644
--- a/components/profile/EditNftProfilePic.tsx
+++ b/components/profile/EditNftProfilePic.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'next-i18next'
 import Button, { LinkButton } from '../shared/Button'
 import { bs58 } from '@project-serum/anchor/dist/cjs/utils/bytes'
 import { notify } from 'utils/notifications'
+import { MANGO_DATA_API_URL } from 'utils/constants'
 
 const ImgWithLoader = (props: any) => {
   const [isLoading, setIsLoading] = useState(true)
@@ -67,7 +68,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
         }),
       }
       const response = await fetch(
-        'https://mango-transaction-log.herokuapp.com/v4/user-data/profile-details',
+        `${MANGO_DATA_API_URL}/user-data/profile-details`,
         requestOptions
       )
       if (response.status === 200) {
@@ -113,7 +114,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
         }),
       }
       const response = await fetch(
-        'https://mango-transaction-log.herokuapp.com/v4/user-data/profile-details',
+        `${MANGO_DATA_API_URL}/user-data/profile-details`,
         requestOptions
       )
       if (response.status === 200) {
diff --git a/components/profile/EditProfileForm.tsx b/components/profile/EditProfileForm.tsx
index 6d238d91..5d268824 100644
--- a/components/profile/EditProfileForm.tsx
+++ b/components/profile/EditProfileForm.tsx
@@ -14,6 +14,7 @@ import mangoStore from '@store/mangoStore'
 import startCase from 'lodash/startCase'
 import { useTranslation } from 'next-i18next'
 import { ChangeEvent, useState } from 'react'
+import { MANGO_DATA_API_URL } from 'utils/constants'
 import { notify } from 'utils/notifications'
 import ProfileImage from './ProfileImage'
 
@@ -42,7 +43,7 @@ const EditProfileForm = ({
     try {
       setLoadUniquenessCheck(true)
       const response = await fetch(
-        `https://mango-transaction-log.herokuapp.com/v4/user-data/check-profile-name-unique?profile-name=${name}`
+        `${MANGO_DATA_API_URL}/user-data/check-profile-name-unique?profile-name=${name}`
       )
       const uniquenessCheck = await response.json()
 
@@ -103,7 +104,7 @@ const EditProfileForm = ({
           }),
         }
         const response = await fetch(
-          'https://mango-transaction-log.herokuapp.com/v4/user-data/profile-details',
+          `${MANGO_DATA_API_URL}/user-data/profile-details`,
           requestOptions
         )
         if (response.status === 200) {
diff --git a/components/tours/CustomTooltip.tsx b/components/tours/CustomTooltip.tsx
index cf5313f0..d35b433a 100644
--- a/components/tours/CustomTooltip.tsx
+++ b/components/tours/CustomTooltip.tsx
@@ -3,6 +3,7 @@ import { XMarkIcon } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import { useState } from 'react'
+import { MANGO_DATA_API_URL } from 'utils/constants'
 import { WalktourLogic } from 'walktour'
 
 const CustomTooltip = ({
@@ -37,7 +38,7 @@ const CustomTooltip = ({
           body: message,
         }
         const response = await fetch(
-          'https://mango-transaction-log.herokuapp.com/v4/user-data/settings-unsigned',
+          `${MANGO_DATA_API_URL}/user-data/settings-unsigned`,
           requestOptions
         )
         if (response.status === 200) {
diff --git a/components/trade/PerpFundingRate.tsx b/components/trade/PerpFundingRate.tsx
index 13a8fb5e..4cf18363 100644
--- a/components/trade/PerpFundingRate.tsx
+++ b/components/trade/PerpFundingRate.tsx
@@ -5,10 +5,11 @@ import { useQuery } from '@tanstack/react-query'
 import useMangoGroup from 'hooks/useMangoGroup'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useMemo } from 'react'
+import { MANGO_DATA_API_URL } from 'utils/constants'
 
 const fetchFundingRate = async (groupPk: string | undefined) => {
   const res = await fetch(
-    `https://mango-transaction-log.herokuapp.com/v4/one-hour-funding-rate?mango-group=${groupPk}`
+    `${MANGO_DATA_API_URL}/one-hour-funding-rate?mango-group=${groupPk}`
   )
   return await res.json()
 }
diff --git a/store/mangoStore.ts b/store/mangoStore.ts
index f8c13c4a..22bfc3d8 100644
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@@ -33,6 +33,7 @@ import {
   DEFAULT_MARKET_NAME,
   INPUT_TOKEN_DEFAULT,
   LAST_ACCOUNT_KEY,
+  MANGO_DATA_API_URL,
   OUTPUT_TOKEN_DEFAULT,
   RPC_PROVIDER_KEY,
 } from '../utils/constants'
@@ -461,7 +462,7 @@ const mangoStore = create<MangoStore>()(
           })
           try {
             const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/stats/interest-account-total?mango-account=${mangoAccountPk}`
+              `${MANGO_DATA_API_URL}/stats/interest-account-total?mango-account=${mangoAccountPk}`
             )
             const parsedResponse = await response.json()
             const entries: any = Object.entries(parsedResponse).sort((a, b) =>
@@ -498,7 +499,7 @@ const mangoStore = create<MangoStore>()(
           })
           try {
             const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/stats/performance_account?mango-account=${mangoAccountPk}&start-date=${dayjs()
+              `${MANGO_DATA_API_URL}/stats/performance_account?mango-account=${mangoAccountPk}&start-date=${dayjs()
                 .subtract(range, 'day')
                 .format('YYYY-MM-DD')}`
             )
@@ -541,7 +542,7 @@ const mangoStore = create<MangoStore>()(
 
           try {
             const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=25${
+              `${MANGO_DATA_API_URL}/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=25${
                 params ? params : ''
               }`
             )
@@ -817,7 +818,7 @@ const mangoStore = create<MangoStore>()(
           })
           try {
             const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/perp-historical-stats?mango-group=${group?.publicKey.toString()}`
+              `${MANGO_DATA_API_URL}/perp-historical-stats?mango-group=${group?.publicKey.toString()}`
             )
             const data = await response.json()
 
@@ -840,7 +841,7 @@ const mangoStore = create<MangoStore>()(
           setTimeout(async () => {
             try {
               const history = await fetch(
-                `https://mango-transaction-log.herokuapp.com/v4/stats/swap-history?mango-account=${mangoAccountPk}`
+                `${MANGO_DATA_API_URL}/stats/swap-history?mango-account=${mangoAccountPk}`
               )
               const parsedHistory = await history.json()
               const sortedHistory =
@@ -876,7 +877,7 @@ const mangoStore = create<MangoStore>()(
           })
           try {
             const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/token-historical-stats?mango-group=${group?.publicKey.toString()}`
+              `${MANGO_DATA_API_URL}/token-historical-stats?mango-group=${group?.publicKey.toString()}`
             )
             const data = await response.json()
 
@@ -945,7 +946,7 @@ const mangoStore = create<MangoStore>()(
           })
           try {
             const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/user-data/profile-details?wallet-pk=${walletPk}`
+              `${MANGO_DATA_API_URL}/user-data/profile-details?wallet-pk=${walletPk}`
             )
             const data = await response.json()
             set((state) => {
@@ -967,7 +968,7 @@ const mangoStore = create<MangoStore>()(
           })
           try {
             const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/user-data/settings-unsigned?wallet-pk=${walletPk}`
+              `${MANGO_DATA_API_URL}/user-data/settings-unsigned?wallet-pk=${walletPk}`
             )
             const data = await response.json()
             set((state) => {
@@ -1021,10 +1022,10 @@ const mangoStore = create<MangoStore>()(
           try {
             const [spotRes, perpRes] = await Promise.all([
               fetch(
-                `https://mango-transaction-log.herokuapp.com/v4/stats/openbook-trades?address=${mangoAccount?.publicKey.toString()}&address-type=mango-account`
+                `${MANGO_DATA_API_URL}/stats/openbook-trades?address=${mangoAccount?.publicKey.toString()}&address-type=mango-account`
               ),
               fetch(
-                `https://mango-transaction-log.herokuapp.com/v4/stats/perp-trade-history?mango-account=${mangoAccount?.publicKey.toString()}&limit=1000`
+                `${MANGO_DATA_API_URL}/stats/perp-trade-history?mango-account=${mangoAccount?.publicKey.toString()}&limit=1000`
               ),
             ])
             const spotHistory = await spotRes.json()
diff --git a/utils/constants.ts b/utils/constants.ts
index 1a19ddab..13421363 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -60,6 +60,8 @@ export const CHART_DATA_FEED = `https://dry-ravine-67635.herokuapp.com/tv`
 
 export const MANGO_ROUTER_API_URL = 'https://api.mngo.cloud/router/v1'
 
+export const MANGO_DATA_API_URL = 'https://api.mngo.cloud/data/v4'
+
 export const DEFAULT_MARKET_NAME = 'SOL/USDC'
 
 export const MIN_SOL_BALANCE = 0.001

From b470d03adf2ba30802991f883d9bf38384210ba9 Mon Sep 17 00:00:00 2001
From: Riordan Panayides <riordan@panayid.es>
Date: Wed, 18 Jan 2023 18:00:27 +0000
Subject: [PATCH 28/36] Fix mango-v4 dependency

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 624ae37c..95df898e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -52,7 +52,7 @@
 
 "@blockworks-foundation/mango-v4@https://github.com/blockworks-foundation/mango-v4.git#ts-client":
   version "0.0.1-beta.6"
-  resolved "https://github.com/blockworks-foundation/mango-v4.git#adc9140ad2a3c2e9c3b425b8804d9415f2a05067"
+  resolved "https://github.com/blockworks-foundation/mango-v4.git#1ca560c007081127ac31486a96a3729da22f99fb"
   dependencies:
     "@project-serum/anchor" "^0.25.0"
     "@project-serum/serum" "^0.13.65"

From 79821f52165b33884793a4d579c0e0d8ce2776e7 Mon Sep 17 00:00:00 2001
From: Riordan Panayides <riordan@panayid.es>
Date: Wed, 18 Jan 2023 18:41:42 +0000
Subject: [PATCH 29/36] Fix side badge for combinedTradeHistory trades

---
 components/trade/TradeHistory.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/trade/TradeHistory.tsx b/components/trade/TradeHistory.tsx
index aeccc5b4..91f207bf 100644
--- a/components/trade/TradeHistory.tsx
+++ b/components/trade/TradeHistory.tsx
@@ -189,6 +189,17 @@ const TradeHistory = () => {
                   makerTaker = 'Taker'
                 }
               }
+              let side = trade.side
+              if ('perp_market' in trade) {
+                const sideObj: any = {}
+                if (makerTaker == 'Taker') {
+                  sideObj[trade.taker_side] = 1
+                } else {
+                  sideObj[trade.taker_side == 'bid' ? 'ask' : 'bid'] = 1
+                }
+                side = sideObj
+              }
+
               const size = trade.size || trade.quantity
               let fee
               if (trade.fee_cost || trade.feeCost) {
@@ -209,14 +220,14 @@ const TradeHistory = () => {
                     <TableMarketName market={market} />
                   </Td>
                   <Td className="text-right">
-                    <SideBadge side={trade.side} />
+                    <SideBadge side={side} />
                   </Td>
                   <Td className="text-right font-mono">{size}</Td>
                   <Td className="text-right font-mono">
                     {formatDecimal(trade.price)}
                   </Td>
                   <Td className="text-right font-mono">
-                    {formatFixedDecimals(trade.price * size)}
+                    ${formatFixedDecimals(trade.price * size)}
                   </Td>
                   <Td className="text-right">
                     <span className="font-mono">{formatDecimal(fee)}</span>

From 193d2a16fe5ab894525be10dfc4d4e5cc7f25000 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 19 Jan 2023 10:50:55 +1100
Subject: [PATCH 30/36] fix connect wallet button for long wallet names

---
 components/wallet/ConnectWalletButton.tsx | 38 +++++++++++++----------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/components/wallet/ConnectWalletButton.tsx b/components/wallet/ConnectWalletButton.tsx
index 0c49a624..bbc15b80 100644
--- a/components/wallet/ConnectWalletButton.tsx
+++ b/components/wallet/ConnectWalletButton.tsx
@@ -29,24 +29,28 @@ export const ConnectWalletButton: React.FC = () => {
       >
         <div className="relative flex h-16 w-44 bg-th-bkg-2 py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
           <div className="default-transition relative z-10 flex h-full items-center justify-center space-x-3 px-4">
-            <div
-              className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
-                wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
-              }`}
-            >
-              <img
-                src={wallet?.adapter.icon || selectedWallet?.adapter.icon}
-                className={
-                  wallet?.adapter.name === 'Solflare'
-                    ? 'h-auto w-[20px]'
-                    : 'h-auto w-[28px]'
-                }
-                alt={`${wallet?.adapter.name} icon`}
-              />
-            </div>
+            {connecting ? (
+              <Loading className="h-[28px] w-[28px]" />
+            ) : (
+              <div
+                className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
+                  wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
+                }`}
+              >
+                <img
+                  src={wallet?.adapter.icon || selectedWallet?.adapter.icon}
+                  className={
+                    wallet?.adapter.name === 'Solflare'
+                      ? 'h-auto w-[20px]'
+                      : 'h-auto w-[28px]'
+                  }
+                  alt={`${wallet?.adapter.name} icon`}
+                />
+              </div>
+            )}
             <div className="text-left">
-              <div className="mb-1.5 flex justify-center font-display text-base leading-none text-th-fgd-1">
-                {connecting ? <Loading className="h-4 w-4" /> : t('connect')}
+              <div className="mb-1.5 flex font-display text-base leading-none text-th-fgd-1">
+                {t('connect')}
               </div>
 
               <div className="text-xxs font-normal leading-3 text-th-fgd-3">

From b8ca0a40c73aa2fbc6f0d3e7278629dd3fd16abc Mon Sep 17 00:00:00 2001
From: tjs <tjshipe@gmail.com>
Date: Wed, 18 Jan 2023 19:19:46 -0500
Subject: [PATCH 31/36] fix type error from merge

---
 store/mangoStore.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/store/mangoStore.ts b/store/mangoStore.ts
index d38444bb..a781ffb0 100644
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@@ -384,11 +384,9 @@ const mangoStore = create<MangoStore>()(
         openOrders: {},
         perpPositions: [],
         spotBalances: {},
-        stats: {
-          interestTotals: { data: [], loading: false },
-          performance: { data: [], loading: false },
-          swapHistory: { data: [], initialLoad: false },
-        },
+        interestTotals: { data: [], loading: false },
+        performance: { data: [], loading: false, initialLoad: false },
+        swapHistory: { data: [], initialLoad: false },
         tradeHistory: { data: [], loading: true },
       },
       mangoAccounts: [],

From 8ffe2eb19540e949e52de8eedd1ad6e386b71a8c Mon Sep 17 00:00:00 2001
From: tjs <tjshipe@gmail.com>
Date: Wed, 18 Jan 2023 19:21:02 -0500
Subject: [PATCH 32/36] add quiet flag to husky check

---
 .husky/pre-commit | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index f3a559de..c8cc17a7 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn typecheck && yarn lint
+yarn typecheck && yarn lint --quiet

From 270c74b9db35c1556f71908f18686c6cae1b8d26 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 19 Jan 2023 13:42:29 +1100
Subject: [PATCH 33/36] toggle tradingview on mobile

---
 components/trade/AdvancedMarketHeader.tsx    | 71 +++++++++++++-------
 components/trade/MobileTradeAdvancedPage.tsx | 15 +++--
 components/trade/TradingChartContainer.tsx   |  4 +-
 components/trade/TradingViewChartKline.tsx   |  4 +-
 4 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx
index 81220542..825c7c74 100644
--- a/components/trade/AdvancedMarketHeader.tsx
+++ b/components/trade/AdvancedMarketHeader.tsx
@@ -1,5 +1,7 @@
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
+import { IconButton } from '@components/shared/Button'
 import Change from '@components/shared/Change'
+import { ChartBarIcon } from '@heroicons/react/20/solid'
 import { useCoingecko } from 'hooks/useCoingecko'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useTranslation } from 'next-i18next'
@@ -8,7 +10,13 @@ import { getDecimalCount } from 'utils/numbers'
 import MarketSelectDropdown from './MarketSelectDropdown'
 import PerpFundingRate from './PerpFundingRate'
 
-const AdvancedMarketHeader = () => {
+const AdvancedMarketHeader = ({
+  showChart,
+  setShowChart,
+}: {
+  showChart?: boolean
+  setShowChart?: (x: boolean) => void
+}) => {
   const { t } = useTranslation(['common', 'trade'])
   const { serumOrPerpMarket, baseSymbol, price } = useSelectedMarket()
   const { data: tokenPrices } = useCoingecko()
@@ -35,31 +43,46 @@ const AdvancedMarketHeader = () => {
       <div className=" w-full px-5 md:w-auto md:py-0 md:pr-6 lg:pb-0">
         <MarketSelectDropdown />
       </div>
-      <div className="flex items-center border-t border-th-bkg-3 py-2 px-5 md:border-t-0 md:py-0 md:px-0">
-        <div id="trade-step-two" className="flex-col md:ml-6">
-          <div className="text-xs text-th-fgd-4">{t('trade:oracle-price')}</div>
-          <div className="font-mono text-xs text-th-fgd-2">
-            {price ? (
-              `$${price.toFixed(
-                getDecimalCount(serumOrPerpMarket?.tickSize || 0.01)
-              )}`
-            ) : (
-              <span className="text-th-fgd-4">–</span>
-            )}
-          </div>
-        </div>
-        <div className="ml-6 flex-col">
-          <div className="text-xs text-th-fgd-4">{t('rolling-change')}</div>
-          <Change change={change} size="small" suffix="%" />
-        </div>
-        {serumOrPerpMarket instanceof PerpMarket ? (
-          <div className="ml-6 flex-col">
-            <div className="text-xs text-th-fgd-4">
-              {t('trade:funding-rate')}
+      <div className="border-t border-th-bkg-3 py-2 px-5 md:border-t-0 md:py-0 md:px-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <div id="trade-step-two" className="flex-col md:ml-6">
+              <div className="text-xs text-th-fgd-4">
+                {t('trade:oracle-price')}
+              </div>
+              <div className="font-mono text-xs text-th-fgd-2">
+                {price ? (
+                  `$${price.toFixed(
+                    getDecimalCount(serumOrPerpMarket?.tickSize || 0.01)
+                  )}`
+                ) : (
+                  <span className="text-th-fgd-4">–</span>
+                )}
+              </div>
             </div>
-            <PerpFundingRate />
+            <div className="ml-6 flex-col">
+              <div className="text-xs text-th-fgd-4">{t('rolling-change')}</div>
+              <Change change={change} size="small" suffix="%" />
+            </div>
+            {serumOrPerpMarket instanceof PerpMarket ? (
+              <div className="ml-6 flex-col">
+                <div className="text-xs text-th-fgd-4">
+                  {t('trade:funding-rate')}
+                </div>
+                <PerpFundingRate />
+              </div>
+            ) : null}
           </div>
-        ) : null}
+          {setShowChart ? (
+            <IconButton
+              className={showChart ? 'text-th-active' : 'text-th-fgd-2'}
+              onClick={() => setShowChart(!showChart)}
+              hideBg
+            >
+              <ChartBarIcon className="h-5 w-5" />
+            </IconButton>
+          ) : null}
+        </div>
       </div>
     </div>
   )
diff --git a/components/trade/MobileTradeAdvancedPage.tsx b/components/trade/MobileTradeAdvancedPage.tsx
index d22bce4d..2eb744e5 100644
--- a/components/trade/MobileTradeAdvancedPage.tsx
+++ b/components/trade/MobileTradeAdvancedPage.tsx
@@ -6,17 +6,24 @@ import TradeInfoTabs from './TradeInfoTabs'
 import TabButtons from '@components/shared/TabButtons'
 import { TABS } from './OrderbookAndTrades'
 import RecentTrades from './RecentTrades'
+import TradingChartContainer from './TradingChartContainer'
 
 const MobileTradeAdvancedPage = () => {
   const [activeTab, setActiveTab] = useState('trade:book')
+  const [showChart, setShowChart] = useState(false)
   return (
     <div className="grid grid-cols-2 sm:grid-cols-3">
       <div className="col-span-2 border-b border-th-bkg-3 sm:col-span-3">
-        <AdvancedMarketHeader />
+        <AdvancedMarketHeader
+          showChart={showChart}
+          setShowChart={setShowChart}
+        />
       </div>
-      {/* <div className="col-span-2 h-72 overflow-auto border-b border-th-bkg-3 sm:col-span-3 sm:h-96">
-        <TradingViewChart />
-      </div> */}
+      {showChart ? (
+        <div className="col-span-2 h-80 border-b border-th-bkg-3 sm:col-span-3">
+          <TradingChartContainer />
+        </div>
+      ) : null}
       <div className="col-span-1 pb-6 sm:col-span-2">
         <AdvancedTradeForm />
       </div>
diff --git a/components/trade/TradingChartContainer.tsx b/components/trade/TradingChartContainer.tsx
index 2776e877..7392fd8a 100644
--- a/components/trade/TradingChartContainer.tsx
+++ b/components/trade/TradingChartContainer.tsx
@@ -17,9 +17,9 @@ const TradingChartContainer = () => {
   const [tradingChart] = useLocalStorageState(TRADE_CHART_UI_KEY)
   const isTradingChart = tradingChart === 'custom'
   return !isTradingChart ? (
-    <TradingViewChart></TradingViewChart>
+    <TradingViewChart />
   ) : (
-    <TradingViewChartKlineContainer></TradingViewChartKlineContainer>
+    <TradingViewChartKlineContainer />
   )
 }
 
diff --git a/components/trade/TradingViewChartKline.tsx b/components/trade/TradingViewChartKline.tsx
index 8c90ec64..0241e279 100644
--- a/components/trade/TradingViewChartKline.tsx
+++ b/components/trade/TradingViewChartKline.tsx
@@ -405,9 +405,9 @@ const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
   return (
     <div
       className={clsx(
-        'fixed h-full w-full',
+        'h-full w-full',
         isFullView
-          ? 'left-0 top-0 right-0 bottom-0 z-40 bg-th-bkg-1 text-th-fgd-1'
+          ? 'fixed left-0 top-0 right-0 bottom-0 z-40 bg-th-bkg-1 text-th-fgd-1'
           : ''
       )}
     >

From 4ce190161d4098165b53562905bdf46d52218cbe Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 19 Jan 2023 14:38:06 +1100
Subject: [PATCH 34/36] round pnl history

---
 components/modals/PnlHistoryModal.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/modals/PnlHistoryModal.tsx b/components/modals/PnlHistoryModal.tsx
index 272b201d..4638603a 100644
--- a/components/modals/PnlHistoryModal.tsx
+++ b/components/modals/PnlHistoryModal.tsx
@@ -8,6 +8,7 @@ import dayjs from 'dayjs'
 import Change from '@components/shared/Change'
 import SheenLoader from '@components/shared/SheenLoader'
 import { NoSymbolIcon } from '@heroicons/react/20/solid'
+import { formatDecimal } from 'utils/numbers'
 
 interface PnlChange {
   time: string
@@ -49,9 +50,10 @@ const PnlHistoryModal = ({
       ? dailyPnl
           .map((d: PerformanceDataItem, index: number) => {
             if (index < dailyPnl.length - 1) {
+              const change = dailyPnl[index + 1].pnl - d.pnl
               return {
                 time: d.time,
-                pnlChange: dailyPnl[index + 1].pnl - d.pnl,
+                pnlChange: change,
               }
             } else {
               return {
@@ -108,7 +110,10 @@ const PnlHistoryModal = ({
                       key={v.time + v.pnlChange}
                     >
                       <p>{dayjs(v.time).format('YYYY-MM-DD')}</p>
-                      <Change change={v.pnlChange} prefix="$" />
+                      <Change
+                        change={Number(formatDecimal(v.pnlChange, 2))}
+                        prefix="$"
+                      />
                     </div>
                   ))}
                 </div>

From 235f3cde9d06fbc3b73f68a53b67da984f8350bb Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 19 Jan 2023 15:16:43 +1100
Subject: [PATCH 35/36] fix account performance data when changing accounts

---
 components/account/AccountPage.tsx | 41 ++++++++++++++++--------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index 2d749f66..dc7c74dc 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -75,16 +75,25 @@ const AccountPage = () => {
 
   useEffect(() => {
     if (mangoAccountAddress) {
+      const set = mangoStore.getState().set
+      set((s) => {
+        s.mangoAccount.performance.initialLoad = false
+      })
+      setOneDayPerformanceData([])
       actions.fetchAccountPerformance(mangoAccountAddress, 1)
       actions.fetchAccountInterestTotals(mangoAccountAddress)
     }
   }, [actions, mangoAccountAddress])
 
   useEffect(() => {
-    if (performanceInitialLoad && !oneDayPerformanceData.length) {
+    if (
+      performanceData.length &&
+      performanceInitialLoad &&
+      !oneDayPerformanceData.length
+    ) {
       setOneDayPerformanceData(performanceData)
     }
-  }, [performanceInitialLoad, oneDayPerformanceData])
+  }, [performanceInitialLoad, oneDayPerformanceData, performanceData])
 
   const onHoverMenu = (open: boolean, action: string) => {
     if (
@@ -134,30 +143,24 @@ const AccountPage = () => {
     }
   }, [mangoAccount, group, accountValue])
 
-  const { accountPnl, accountValueChange } = useMemo(() => {
+  const [accountPnl, accountValueChange, oneDayPnlChange] = useMemo(() => {
     if (
       accountValue &&
       oneDayPerformanceData.length &&
       performanceData.length
     ) {
-      return {
-        accountPnl: performanceData[performanceData.length - 1].pnl,
-        accountValueChange:
-          accountValue - oneDayPerformanceData[0].account_equity,
-      }
-    }
-    return { accountPnl: 0, accountValueChange: 0 }
-  }, [accountValue, oneDayPerformanceData, performanceData])
-
-  const oneDayPnlChange = useMemo(() => {
-    if (accountPnl && oneDayPerformanceData.length) {
+      const accountPnl = performanceData[performanceData.length - 1].pnl
+      const accountValueChange =
+        accountValue - oneDayPerformanceData[0].account_equity
       const startDayPnl = oneDayPerformanceData[0].pnl
       const endDayPnl =
         oneDayPerformanceData[oneDayPerformanceData.length - 1].pnl
-      return endDayPnl - startDayPnl
+      const oneDayPnlChange = endDayPnl - startDayPnl
+
+      return [accountPnl, accountValueChange, oneDayPnlChange]
     }
-    return 0.0
-  }, [accountPnl, oneDayPerformanceData])
+    return [0, 0, 0]
+  }, [accountValue, oneDayPerformanceData, performanceData])
 
   const interestTotalValue = useMemo(() => {
     if (totalInterestData.length) {
@@ -170,7 +173,7 @@ const AccountPage = () => {
   }, [totalInterestData])
 
   const oneDayInterestChange = useMemo(() => {
-    if (oneDayPerformanceData.length && mangoAccount) {
+    if (oneDayPerformanceData.length) {
       const startDayInterest =
         oneDayPerformanceData[0].borrow_interest_cumulative_usd +
         oneDayPerformanceData[0].deposit_interest_cumulative_usd
@@ -184,7 +187,7 @@ const AccountPage = () => {
       return endDayInterest - startDayInterest
     }
     return 0.0
-  }, [oneDayPerformanceData, mangoAccount])
+  }, [oneDayPerformanceData])
 
   const maintHealth = useMemo(() => {
     return group && mangoAccount

From cf7cf1c037eba01a84b1dedf5e4e00722292781f Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 19 Jan 2023 15:22:16 +1100
Subject: [PATCH 36/36] round account page change components

---
 components/account/AccountPage.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index dc7c74dc..99a06c4e 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
 import { useEffect, useMemo, useState } from 'react'
 import AccountActions from './AccountActions'
 import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
-import { formatFixedDecimals } from '../../utils/numbers'
+import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
 import FlipNumbers from 'react-flip-numbers'
 import dynamic from 'next/dynamic'
 const SimpleAreaChart = dynamic(
@@ -268,7 +268,10 @@ const AccountPage = () => {
               )}
             </div>
             <div className="flex items-center space-x-1.5">
-              <Change change={accountValueChange} prefix="$" />
+              <Change
+                change={Number(formatDecimal(accountValueChange, 2))}
+                prefix="$"
+              />
               <p className="text-th-fgd-4">{t('today')}</p>
             </div>
           </div>
@@ -478,7 +481,11 @@ const AccountPage = () => {
               {formatFixedDecimals(accountPnl, true, true)}
             </p>
             <div className="flex space-x-1">
-              <Change change={oneDayPnlChange} prefix="$" size="small" />
+              <Change
+                change={Number(formatDecimal(oneDayPnlChange, 2))}
+                prefix="$"
+                size="small"
+              />
               <p className="text-xs text-th-fgd-4">{t('today')}</p>
             </div>
           </div>
@@ -514,7 +521,11 @@ const AccountPage = () => {
               {formatFixedDecimals(interestTotalValue, true, true)}
             </p>
             <div className="flex space-x-1">
-              <Change change={oneDayInterestChange} prefix="$" size="small" />
+              <Change
+                change={Number(formatDecimal(oneDayInterestChange, 2))}
+                prefix="$"
+                size="small"
+              />
               <p className="text-xs text-th-fgd-4">{t('today')}</p>
             </div>
           </div>