From f8bac404126d3cd9859869fee83c93a6919ec05f Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 18 Jan 2024 23:58:18 +1100
Subject: [PATCH] add uninsured warning notification to trade

---
 components/DepositForm.tsx                   | 20 ++---------
 components/shared/Tooltip.tsx                |  6 +++-
 components/shared/UninsuredNotification.tsx  | 35 ++++++++++++++++++++
 components/swap/SwapReviewRouteInfo.tsx      | 20 ++---------
 components/trade/AdvancedTradeForm.tsx       | 35 ++++++++++++++++++--
 components/trade/SpotMarketOrderSwapForm.tsx | 12 +++++++
 public/locales/en/account.json               |  3 +-
 public/locales/es/account.json               |  3 +-
 public/locales/ru/account.json               |  3 +-
 public/locales/zh/account.json               |  3 +-
 public/locales/zh_tw/account.json            |  3 +-
 11 files changed, 99 insertions(+), 44 deletions(-)
 create mode 100644 components/shared/UninsuredNotification.tsx

diff --git a/components/DepositForm.tsx b/components/DepositForm.tsx
index 9949e0ae..2bb8384a 100644
--- a/components/DepositForm.tsx
+++ b/components/DepositForm.tsx
@@ -39,8 +39,8 @@ import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import useTokenPositionsFull from 'hooks/useAccountPositionsFull'
 import AccountSlotsFullNotification from './shared/AccountSlotsFullNotification'
 import { handleInputChange } from 'utils/account'
-import InlineNotification from './shared/InlineNotification'
 import { Bank, Group } from '@blockworks-foundation/mango-v4'
+import UninsuredNotification from './shared/UninsuredNotification'
 
 interface DepositFormProps {
   onSuccess: () => void
@@ -313,23 +313,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
                 </div>
               </div>
             ) : null}
-            {!isInsured ? (
-              <InlineNotification
-                type="info"
-                desc={
-                  <>
-                    {t('account:warning-uninsured', { token: bank?.name })}{' '}
-                    <a
-                      href="https://docs.mango.markets/mango-markets/socialized-losses"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {t('learn-more')}
-                    </a>
-                  </>
-                }
-              />
-            ) : null}
+            {!isInsured ? <UninsuredNotification name={bank?.name} /> : null}
           </div>
           {connected ? (
             <Button
diff --git a/components/shared/Tooltip.tsx b/components/shared/Tooltip.tsx
index 914a743d..b4293fd4 100644
--- a/components/shared/Tooltip.tsx
+++ b/components/shared/Tooltip.tsx
@@ -11,6 +11,7 @@ type TooltipProps = {
   delay?: number
   show?: boolean
   maxWidth?: string
+  wrapperClassName?: string
 }
 
 const Tooltip = ({
@@ -21,6 +22,7 @@ const Tooltip = ({
   delay = 0,
   show = true,
   maxWidth = '20rem',
+  wrapperClassName,
 }: TooltipProps) => {
   const themeData = mangoStore((s) => s.themeData)
   if (show) {
@@ -43,7 +45,9 @@ const Tooltip = ({
           ) : null
         }
       >
-        <div className="outline-none focus:outline-none">{children}</div>
+        <div className={`outline-none focus:outline-none ${wrapperClassName}`}>
+          {children}
+        </div>
       </Tippy>
     )
   } else {
diff --git a/components/shared/UninsuredNotification.tsx b/components/shared/UninsuredNotification.tsx
new file mode 100644
index 00000000..cca493c7
--- /dev/null
+++ b/components/shared/UninsuredNotification.tsx
@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next'
+import InlineNotification from './InlineNotification'
+import Tooltip from './Tooltip'
+
+const UninsuredNotification = ({ name }: { name: string | undefined }) => {
+  const { t } = useTranslation(['common', 'account'])
+  return (
+    <InlineNotification
+      type="info"
+      desc={
+        <>
+          <Tooltip
+            wrapperClassName="inline"
+            content={t('account:tooltip-warning-uninsured', { token: name })}
+          >
+            <span className="tooltip-underline">
+              {t('account:warning-uninsured', {
+                token: name,
+              })}
+            </span>
+          </Tooltip>{' '}
+          <a
+            href="https://docs.mango.markets/mango-markets/socialized-losses"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t('learn-more')}
+          </a>
+        </>
+      }
+    />
+  )
+}
+
+export default UninsuredNotification
diff --git a/components/swap/SwapReviewRouteInfo.tsx b/components/swap/SwapReviewRouteInfo.tsx
index 9796401a..b7a9ea55 100644
--- a/components/swap/SwapReviewRouteInfo.tsx
+++ b/components/swap/SwapReviewRouteInfo.tsx
@@ -63,7 +63,7 @@ import {
   RefetchQueryFilters,
 } from '@tanstack/react-query'
 import { isTokenInsured } from '@components/DepositForm'
-import InlineNotification from '@components/shared/InlineNotification'
+import UninsuredNotification from '@components/shared/UninsuredNotification'
 
 type JupiterRouteInfoProps = {
   amountIn: Decimal
@@ -934,23 +934,7 @@ const SwapReviewRouteInfo = ({
           </div>
           {!isInsured ? (
             <div className="mt-4 px-6">
-              <InlineNotification
-                type="info"
-                desc={
-                  <>
-                    {t('account:warning-uninsured', {
-                      token: outputBank?.name,
-                    })}{' '}
-                    <a
-                      href="https://docs.mango.markets/mango-markets/socialized-losses"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {t('learn-more')}
-                    </a>
-                  </>
-                }
-              />
+              <UninsuredNotification name={outputBank?.name} />
             </div>
           ) : null}
         </div>
diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx
index 0c065908..bb27e0d7 100644
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@@ -81,6 +81,8 @@ import CreateAccountModal from '@components/modals/CreateAccountModal'
 import TradeformSubmitButton from './TradeformSubmitButton'
 import useIpAddress from 'hooks/useIpAddress'
 import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
+import { isTokenInsured } from '@components/DepositForm'
+import UninsuredNotification from '@components/shared/UninsuredNotification'
 
 dayjs.extend(relativeTime)
 
@@ -113,7 +115,13 @@ type TradeForm = {
 type FormErrors = Partial<Record<keyof TradeForm, string>>
 
 const AdvancedTradeForm = () => {
-  const { t } = useTranslation(['common', 'settings', 'swap', 'trade'])
+  const { t } = useTranslation([
+    'common',
+    'account',
+    'settings',
+    'swap',
+    'trade',
+  ])
   const { poolIsPerpReadyForRefresh } = useOpenPerpPositions()
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
   const { usedSerum3, totalSerum3, usedPerps, totalPerps } =
@@ -160,6 +168,15 @@ const AdvancedTradeForm = () => {
     return bank
   }, [selectedMarket])
 
+  const isInsured = useMemo(() => {
+    if (selectedMarket instanceof Serum3Market) {
+      const group = mangoStore.getState().group
+      return isTokenInsured(baseBank, group)
+    } else {
+      return selectedMarket ? selectedMarket.groupInsuranceFund : true
+    }
+  }, [baseBank, selectedMarket])
+
   // check for available account token slots
   const tokenPositionsFull = useTokenPositionsFull([baseBank, quoteBank])
 
@@ -1074,7 +1091,7 @@ const AdvancedTradeForm = () => {
                     decimalScale={tickDecimals}
                     name="quote"
                     id="quote"
-                    className="-mt-[1px] flex w-full items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4 lg:text-base"
+                    className="mt-[-1px] flex w-full items-center rounded-md rounded-t-none border border-th-input-border bg-th-input-bkg p-2 pl-9 font-mono text-sm font-bold text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover md:hover:focus:border-th-fgd-4 lg:text-base"
                     placeholder="0.00"
                     value={tradeForm.quoteSize}
                     onValueChange={handleQuoteSizeChange}
@@ -1228,6 +1245,20 @@ const AdvancedTradeForm = () => {
               />
             </div>
           ) : null}
+          {!isInsured &&
+          ((selectedMarket instanceof Serum3Market &&
+            tradeForm.side === 'buy') ||
+            selectedMarket instanceof PerpMarket) ? (
+            <div className="mb-4 px-4">
+              <UninsuredNotification
+                name={
+                  selectedMarket instanceof Serum3Market
+                    ? baseBank?.name
+                    : selectedMarket.name
+                }
+              />
+            </div>
+          ) : null}
           {perpSlotsFull && mangoAccountAddress ? (
             <div className="mb-4 px-4">
               <AccountSlotsFullNotification
diff --git a/components/trade/SpotMarketOrderSwapForm.tsx b/components/trade/SpotMarketOrderSwapForm.tsx
index 5f09e2ae..b62b8b72 100644
--- a/components/trade/SpotMarketOrderSwapForm.tsx
+++ b/components/trade/SpotMarketOrderSwapForm.tsx
@@ -51,6 +51,8 @@ import MaxMarketTradeAmount from './MaxMarketTradeAmount'
 import useMangoAccount from 'hooks/useMangoAccount'
 import InlineNotification from '@components/shared/InlineNotification'
 import { debounce } from 'lodash'
+import { isTokenInsured } from '@components/DepositForm'
+import UninsuredNotification from '@components/shared/UninsuredNotification'
 
 const set = mangoStore.getState().set
 
@@ -113,6 +115,11 @@ export default function SpotMarketOrderSwapForm() {
     }
   }, [selectedMarket, side])
 
+  const isInsured = useMemo(() => {
+    const group = mangoStore.getState().group
+    return isTokenInsured(outputBank, group)
+  }, [outputBank])
+
   const handleBaseSizeChange = useCallback(
     debounce((e: NumberFormatValues, info: SourceInfo) => {
       if (info.source !== 'event') return
@@ -607,6 +614,11 @@ export default function SpotMarketOrderSwapForm() {
               />
             </div>
           ) : null}
+          {!isInsured ? (
+            <div className="mb-4">
+              <UninsuredNotification name={outputBank?.name} />
+            </div>
+          ) : null}
           <div className="space-y-2">
             <div className="flex justify-between text-xs">
               <p>{t('trade:order-value')}</p>
diff --git a/public/locales/en/account.json b/public/locales/en/account.json
index fe5cfcd8..f5c7362a 100644
--- a/public/locales/en/account.json
+++ b/public/locales/en/account.json
@@ -51,10 +51,11 @@
     "tooltip-total-funding": "The sum of perp position funding earned and paid",
     "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
     "tooltip-unfollow-account": "Unfollow account",
+    "tooltip-warning-uninsured": "In the event of a socialized loss involving {{token}} you could lose funds.",
     "total-funding-earned": "Total Funding Earned",
     "unfollow": "Unfollow",
     "volume-chart": "Volume Chart",
-    "warning-uninsured": "{{token}} is not insured. In the event of a socialized loss involving {{token}} you could lose funds.",
+    "warning-uninsured": "{{token}} is not insured.",
     "week-starting": "Week starting {{week}}",
     "zero-collateral": "Zero Collateral",
     "zero-balances": "Show Zero Balances"
diff --git a/public/locales/es/account.json b/public/locales/es/account.json
index fe5cfcd8..f5c7362a 100644
--- a/public/locales/es/account.json
+++ b/public/locales/es/account.json
@@ -51,10 +51,11 @@
     "tooltip-total-funding": "The sum of perp position funding earned and paid",
     "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
     "tooltip-unfollow-account": "Unfollow account",
+    "tooltip-warning-uninsured": "In the event of a socialized loss involving {{token}} you could lose funds.",
     "total-funding-earned": "Total Funding Earned",
     "unfollow": "Unfollow",
     "volume-chart": "Volume Chart",
-    "warning-uninsured": "{{token}} is not insured. In the event of a socialized loss involving {{token}} you could lose funds.",
+    "warning-uninsured": "{{token}} is not insured.",
     "week-starting": "Week starting {{week}}",
     "zero-collateral": "Zero Collateral",
     "zero-balances": "Show Zero Balances"
diff --git a/public/locales/ru/account.json b/public/locales/ru/account.json
index fe5cfcd8..f5c7362a 100644
--- a/public/locales/ru/account.json
+++ b/public/locales/ru/account.json
@@ -51,10 +51,11 @@
     "tooltip-total-funding": "The sum of perp position funding earned and paid",
     "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
     "tooltip-unfollow-account": "Unfollow account",
+    "tooltip-warning-uninsured": "In the event of a socialized loss involving {{token}} you could lose funds.",
     "total-funding-earned": "Total Funding Earned",
     "unfollow": "Unfollow",
     "volume-chart": "Volume Chart",
-    "warning-uninsured": "{{token}} is not insured. In the event of a socialized loss involving {{token}} you could lose funds.",
+    "warning-uninsured": "{{token}} is not insured.",
     "week-starting": "Week starting {{week}}",
     "zero-collateral": "Zero Collateral",
     "zero-balances": "Show Zero Balances"
diff --git a/public/locales/zh/account.json b/public/locales/zh/account.json
index 9cb6a7d1..4c301230 100644
--- a/public/locales/zh/account.json
+++ b/public/locales/zh/account.json
@@ -51,10 +51,11 @@
     "tooltip-total-funding": "赚取和支付的合约资金费总和",
     "tooltip-total-interest": "你获取的利息（存款）减你付出的利息（借贷）",
     "tooltip-unfollow-account": "取消帐户关注",
+    "tooltip-warning-uninsured": "In the event of a socialized loss involving {{token}} you could lose funds.",
     "total-funding-earned": "总资金费",
     "unfollow": "取消关注",
     "volume-chart": "交易量图表",
-    "warning-uninsured": "{{token}} is not insured. In the event of a socialized loss involving {{token}} you could lose funds.",
+    "warning-uninsured": "{{token}} is not insured.",
     "week-starting": "从{{week}}来算的一周",
     "zero-balances": "显示等于零的余额",
     "zero-collateral": "无质押品"
diff --git a/public/locales/zh_tw/account.json b/public/locales/zh_tw/account.json
index ff2b9672..e8b9570b 100644
--- a/public/locales/zh_tw/account.json
+++ b/public/locales/zh_tw/account.json
@@ -51,10 +51,11 @@
     "tooltip-total-funding": "賺取和支付的合約資金費總和",
     "tooltip-total-interest": "你獲取的利息（存款）減你付出的利息（借貸）",
     "tooltip-unfollow-account": "取消帳戶關注",
+    "tooltip-warning-uninsured": "In the event of a socialized loss involving {{token}} you could lose funds.",
     "total-funding-earned": "總資金費",
     "unfollow": "取消關注",
     "volume-chart": "交易量圖表",
-    "warning-uninsured": "{{token}} is not insured. In the event of a socialized loss involving {{token}} you could lose funds.",
+    "warning-uninsured": "{{token}} is not insured.",
     "week-starting": "從{{week}}來算的一周",
     "zero-balances": "顯示等於零的餘額",
     "zero-collateral": "無質押品"