add modal for spot market details

components/modals/PerpMarketDetailsModal.tsx

@@ -1,75 +1,79 @@
 import { ModalProps } from '../../types/modal'
 import Modal from '../shared/Modal'
 import { useTranslation } from 'next-i18next'
-import useSelectedMarket from 'hooks/useSelectedMarket'
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
 import Button from '@components/shared/Button'
-// import Tooltip from '@components/shared/Tooltip'
+import Tooltip from '@components/shared/Tooltip'
 
-const PerpMarketDetailsModal = ({ isOpen, onClose }: ModalProps) => {
+interface PerpMarketDetailsModalProps {
+  market: PerpMarket | undefined
+}
+
+type ModalCombinedProps = PerpMarketDetailsModalProps & ModalProps
+
+const PerpMarketDetailsModal = ({
+  isOpen,
+  onClose,
+  market,
+}: ModalCombinedProps) => {
   const { t } = useTranslation(['common', 'trade'])
-  const { selectedMarket } = useSelectedMarket()
 
-  return selectedMarket instanceof PerpMarket ? (
+  return market ? (
     <Modal isOpen={isOpen} onClose={onClose}>
       <h2 className="text-center text-lg">
-        {t('trade:market-details', { market: selectedMarket.name })}
+        {t('trade:market-details', { market: market.name })}
       </h2>
       <div className="mt-4 space-y-2.5">
         <div className="flex justify-between">
           <p>{t('trade:min-order-size')}</p>
-          <p className="font-mono text-th-fgd-2">
-            {selectedMarket.minOrderSize}
-          </p>
+          <p className="font-mono text-th-fgd-2">{market.minOrderSize}</p>
         </div>
         <div className="flex justify-between">
           <p>{t('trade:tick-size')}</p>
-          <p className="font-mono text-th-fgd-2">{selectedMarket.tickSize}</p>
+          <p className="font-mono text-th-fgd-2">{market.tickSize}</p>
         </div>
         <div className="flex justify-between">
           <p>{t('trade:init-leverage')}</p>
           <p className="font-mono text-th-fgd-2">
-            {(1 / (selectedMarket.initBaseLiabWeight.toNumber() - 1)).toFixed(
-              2
-            )}
-            x
+            {(1 / (market.initBaseLiabWeight.toNumber() - 1)).toFixed(2)}x
           </p>
         </div>
         <div className="flex justify-between">
           <p>{t('trade:max-leverage')}</p>
           <p className="font-mono text-th-fgd-2">
-            {(1 / (selectedMarket.maintBaseLiabWeight.toNumber() - 1)).toFixed(
-              2
-            )}
-            x
+            {(1 / (market.maintBaseLiabWeight.toNumber() - 1)).toFixed(2)}x
           </p>
         </div>
         <div className="flex justify-between">
           <p>{t('fees')}</p>
           <p className="font-mono text-th-fgd-2">
-            {(100 * selectedMarket.makerFee.toNumber()).toFixed(2)}%{' '}
+            {(100 * market.makerFee.toNumber()).toFixed(2)}%{' '}
             <span className="font-body text-th-fgd-3">{t('trade:maker')}</span>
             <span className="mx-1">|</span>
-            {(100 * selectedMarket.takerFee.toNumber()).toFixed(2)}%{' '}
+            {(100 * market.takerFee.toNumber()).toFixed(2)}%{' '}
             <span className="font-body text-th-fgd-3">{t('trade:taker')}</span>
           </p>
         </div>
         <div className="flex justify-between">
           <p>{t('trade:funding-limits')}</p>
           <p className="font-mono text-th-fgd-2">
-            {(100 * selectedMarket.minFunding.toNumber()).toFixed(2)}%{' '}
+            {(100 * market.minFunding.toNumber()).toFixed(2)}%{' '}
             <span className="font-body text-th-fgd-3">to</span>{' '}
-            {(100 * selectedMarket.maxFunding.toNumber()).toFixed(2)}%
+            {(100 * market.maxFunding.toNumber()).toFixed(2)}%
           </p>
         </div>
-        {/* <div className="flex justify-between">
-          <Tooltip content={t('trade:tooltip-insured')}>
-            <p className="tooltip-underline">{t('trade:insured')}</p>
+        <div className="flex justify-between">
+          <Tooltip
+            content={t('trade:tooltip-insured', { tokenOrMarket: market.name })}
+          >
+            <p className="tooltip-underline">
+              {t('trade:insured', { token: '' })}
+            </p>
           </Tooltip>
           <p className="text-th-fgd-2">
-            {selectedMarket.groupInsuranceFund ? t('yes') : t('no')}
+            {market.groupInsuranceFund ? t('yes') : t('no')}
           </p>
-        </div> */}
+        </div>
       </div>
       <Button className="mt-6 w-full" onClick={onClose}>
         {t('close')}

components/modals/SpotMarketDetailsModal.tsx

@@ -0,0 +1,102 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+import { useTranslation } from 'next-i18next'
+import useSelectedMarket from 'hooks/useSelectedMarket'
+import { Serum3Market } from '@blockworks-foundation/mango-v4'
+import Button from '@components/shared/Button'
+import useMangoGroup from 'hooks/useMangoGroup'
+import { useMemo } from 'react'
+import Tooltip from '@components/shared/Tooltip'
+
+interface SpotMarketDetailsModalProps {
+  market: Serum3Market | undefined
+}
+
+type ModalCombinedProps = SpotMarketDetailsModalProps & ModalProps
+
+const SpotMarketDetailsModal = ({
+  isOpen,
+  onClose,
+  market,
+}: ModalCombinedProps) => {
+  const { t } = useTranslation(['common', 'trade'])
+  const { serumOrPerpMarket } = useSelectedMarket()
+  const { group } = useMangoGroup()
+
+  const [baseBank, quoteBank] = useMemo(() => {
+    if (!group || !market) return [undefined, undefined]
+    const base = group.getFirstBankByTokenIndex(market.baseTokenIndex)
+    const quote = group.getFirstBankByTokenIndex(market.quoteTokenIndex)
+    return [base, quote]
+  }, [group, market])
+
+  const [baseMintInfo, quoteMintInfo] = useMemo(() => {
+    if (!baseBank || !quoteBank) return [undefined, undefined]
+    const base = group!.mintInfosMapByMint.get(baseBank.mint.toString())
+    const quote = group!.mintInfosMapByMint.get(quoteBank.mint.toString())
+    return [base, quote]
+  }, [baseBank, quoteBank])
+
+  return market && serumOrPerpMarket ? (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <h2 className="text-center text-lg">
+        {t('trade:market-details', { market: market.name })}
+      </h2>
+      <div className="mt-4 space-y-2.5">
+        <div className="flex justify-between">
+          <p>{t('trade:min-order-size')}</p>
+          <p className="font-mono text-th-fgd-2">
+            {serumOrPerpMarket.minOrderSize}
+          </p>
+        </div>
+        <div className="flex justify-between">
+          <p>{t('trade:tick-size')}</p>
+          <p className="font-mono text-th-fgd-2">
+            {serumOrPerpMarket.tickSize}
+          </p>
+        </div>
+        <div className="flex justify-between">
+          <p>{t('trade:max-leverage')}</p>
+          <p className="font-mono text-th-fgd-2">5x</p>
+        </div>
+        {baseMintInfo ? (
+          <div className="flex justify-between">
+            <Tooltip
+              content={t('trade:tooltip-insured', {
+                tokenOrMarket: baseBank!.name,
+              })}
+            >
+              <p className="tooltip-underline">
+                {t('trade:insured', { token: baseBank!.name })}
+              </p>
+            </Tooltip>
+            <p className="font-mono text-th-fgd-2">
+              {baseMintInfo.groupInsuranceFund ? t('yes') : t('no')}
+            </p>
+          </div>
+        ) : null}
+        {quoteMintInfo ? (
+          <div className="flex justify-between">
+            <Tooltip
+              content={t('trade:tooltip-insured', {
+                tokenOrMarket: quoteBank!.name,
+              })}
+            >
+              <p className="tooltip-underline">
+                {t('trade:insured', { token: quoteBank!.name })}
+              </p>
+            </Tooltip>
+            <p className="font-mono text-th-fgd-2">
+              {quoteMintInfo.groupInsuranceFund ? t('yes') : t('no')}
+            </p>
+          </div>
+        ) : null}
+      </div>
+      <Button className="mt-6 w-full" onClick={onClose}>
+        {t('close')}
+      </Button>
+    </Modal>
+  ) : null
+}
+
+export default SpotMarketDetailsModal

components/stats/PerpMarketSettingsTable.tsx

@@ -7,7 +7,7 @@ import ContentBox from '../shared/ContentBox'
 import MarketLogos from '@components/trade/MarketLogos'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-// import Tooltip from '@components/shared/Tooltip'
+import Tooltip from '@components/shared/Tooltip'
 import { PerpStatsItem } from 'types'
 import { NextRouter, useRouter } from 'next/router'
 import { Disclosure, Transition } from '@headlessui/react'
@@ -55,13 +55,15 @@ const PerpMarketSettingsTable = () => {
               <Th className="text-right">{t('trade:max-leverage')}</Th>
               <Th className="text-right">{t('fees')}</Th>
               <Th className="text-right">{t('trade:funding-limits')}</Th>
-              {/* <Th className="text-right">
-                <Tooltip content={t('trade:tooltip-insured')}>
+              <Th className="text-right">
+                <Tooltip
+                  content={t('trade:tooltip-insured', { tokenOrMarket: '' })}
+                >
                   <span className="tooltip-underline">
-                    {t('trade:insured')}
+                    {t('trade:insured', { token: '' })}
                   </span>
                 </Tooltip>
-              </Th> */}
+              </Th>
             </TrHead>
           </thead>
           <tbody>
@@ -74,7 +76,7 @@ const PerpMarketSettingsTable = () => {
                 maintBaseLiabWeight,
                 makerFee,
                 takerFee,
-                // groupInsuranceFund,
+                groupInsuranceFund,
                 minFunding,
                 maxFunding,
                 publicKey,
@@ -128,11 +130,11 @@ const PerpMarketSettingsTable = () => {
                       {(100 * maxFunding.toNumber()).toFixed(2)}%
                     </p>
                   </Td>
-                  {/* <Td>
+                  <Td>
                     <p className="text-right">
                       {groupInsuranceFund ? t('yes') : t('no')}
                     </p>
-                  </Td> */}
+                  </Td>
                 </TrBody>
               )
             })}
@@ -149,7 +151,7 @@ const PerpMarketSettingsTable = () => {
               maintBaseLiabWeight,
               makerFee,
               takerFee,
-              // groupInsuranceFund,
+              groupInsuranceFund,
               minFunding,
               maxFunding,
               publicKey,
@@ -246,19 +248,21 @@ const PerpMarketSettingsTable = () => {
                               {(100 * maxFunding.toNumber()).toFixed(2)}%
                             </p>
                           </div>
-                          {/* <div className="col-span-1">
+                          <div className="col-span-1">
                             <Tooltip
-                              content={t('trade:tooltip-insured')}
+                              content={t('trade:tooltip-insured', {
+                                tokenOrMarket: name,
+                              })}
                               placement="top-start"
                             >
                               <p className="tooltip-underline text-xs text-th-fgd-3">
-                                {t('trade:insured')}
+                                {t('trade:insured', { token: '' })}
                               </p>
                             </Tooltip>
                             <p className="font-mono text-th-fgd-1">
                               {groupInsuranceFund ? t('yes') : t('no')}
                             </p>
-                          </div> */}
+                          </div>
                         </div>
                       </Disclosure.Panel>
                     </Transition>

components/trade/AdvancedMarketHeader.tsx

@@ -21,6 +21,7 @@ import SheenLoader from '@components/shared/SheenLoader'
 import usePrevious from '@components/shared/usePrevious'
 import PerpMarketDetailsModal from '@components/modals/PerpMarketDetailsModal'
 import useMangoGroup from 'hooks/useMangoGroup'
+import SpotMarketDetailsModal from '@components/modals/SpotMarketDetailsModal'
 
 const AdvancedMarketHeader = ({
   showChart,
@@ -218,7 +219,6 @@ const AdvancedMarketHeader = ({
             ) : null}
           </div>
           <div className="ml-6 flex items-center space-x-4">
-            {selectedMarket instanceof PerpMarket ? (
             <LinkButton
               className="flex items-center whitespace-nowrap text-th-fgd-3"
               onClick={() => setShowMarketDetails(true)}
@@ -228,7 +228,6 @@ const AdvancedMarketHeader = ({
                 {t('trade:market-details', { market: '' })}
               </span>
             </LinkButton>
-            ) : null}
             {setShowChart ? (
               <IconButton
                 className={showChart ? 'text-th-active' : 'text-th-fgd-2'}
@@ -242,10 +241,19 @@ const AdvancedMarketHeader = ({
         </div>
       </div>
       {showMarketDetails ? (
+        selectedMarket instanceof PerpMarket ? (
           <PerpMarketDetailsModal
             isOpen={showMarketDetails}
             onClose={() => setShowMarketDetails(false)}
+            market={selectedMarket}
           />
+        ) : (
+          <SpotMarketDetailsModal
+            isOpen={showMarketDetails}
+            onClose={() => setShowMarketDetails(false)}
+            market={selectedMarket}
+          />
+        )
       ) : null}
     </>
   )

public/locales/en/trade.json

@@ -25,7 +25,7 @@
     "init-leverage": "Init Leverage",
     "instantaneous-funding": "Instantaneous Funding Snapshot",
     "interval-seconds": "Interval (seconds)",
-    "insured": "Insured",
+    "insured": "{{token}} Insured",
     "limit-price": "Limit Price",
     "long": "Long",
     "maker": "Maker",
@@ -67,7 +67,7 @@
     "tick-size": "Tick Size",
     "tooltip-enable-margin": "Enable spot margin for this trade",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
-    "tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
+    "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
     "tooltip-slippage": "An estimate of the difference between the current price and the price your trade will be executed at",
     "tooltip-volume-alert": "Volume Alert Settings",

public/locales/es/trade.json

@@ -25,7 +25,7 @@
     "init-leverage": "Init Leverage",
     "instantaneous-funding": "Instantaneous Funding Snapshot",
     "interval-seconds": "Interval (seconds)",
-    "insured": "Insured",
+    "insured": "{{token}} Insured",
     "limit-price": "Limit Price",
     "long": "Long",
     "maker": "Maker",
@@ -67,7 +67,7 @@
     "tick-size": "Tick Size",
     "tooltip-enable-margin": "Enable spot margin for this trade",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
-    "tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
+    "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
     "tooltip-slippage": "An estimate of the difference between the current price and the price your trade will be executed at",
     "tooltip-volume-alert": "Volume Alert Settings",

public/locales/ru/trade.json

@@ -25,7 +25,7 @@
     "init-leverage": "Init Leverage",
     "instantaneous-funding": "Instantaneous Funding Snapshot",
     "interval-seconds": "Interval (seconds)",
-    "insured": "Insured",
+    "insured": "{{token}} Insured",
     "limit-price": "Limit Price",
     "long": "Long",
     "maker": "Maker",
@@ -67,7 +67,7 @@
     "tick-size": "Tick Size",
     "tooltip-enable-margin": "Enable spot margin for this trade",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
-    "tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
+    "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
     "tooltip-slippage": "An estimate of the difference between the current price and the price your trade will be executed at",
     "tooltip-volume-alert": "Volume Alert Settings",

public/locales/zh/trade.json

@@ -25,7 +25,7 @@
     "init-leverage": "Init Leverage",
     "instantaneous-funding": "Instantaneous Funding Snapshot",
     "interval-seconds": "Interval (seconds)",
-    "insured": "Insured",
+    "insured": "{{token}} Insured",
     "limit-price": "Limit Price",
     "long": "Long",
     "maker": "Maker",
@@ -67,7 +67,7 @@
     "tick-size": "Tick Size",
     "tooltip-enable-margin": "Enable spot margin for this trade",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
-    "tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
+    "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
     "tooltip-slippage": "An estimate of the difference between the current price and the price your trade will be executed at",
     "tooltip-volume-alert": "Volume Alert Settings",

public/locales/zh_tw/trade.json

@@ -24,7 +24,7 @@
     "in-orders": "在掛單中",
     "init-leverage": "初始槓桿",
     "instantaneous-funding": "瞬時資金費率",
-    "insured": "Insured",
+    "insured": "{{token}} Insured",
     "interval-seconds": "間隔（秒）",
     "limit-price": "限價價格",
     "long": "做多",
@@ -67,7 +67,7 @@
     "tick-size": "波動單位",
     "tooltip-enable-margin": "為此交易啟用保證金",
     "tooltip-ioc": "IOC交易若不吃單就會被取消。任何無法立刻成交的部分將被取消",
-    "tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
+    "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post交易若不掛單就會被取消。",
     "tooltip-slippage": "當前價格與您的交易將執行的價格之間的差值的估計",
     "tooltip-stable-price": "穩定價格用於一個安全機制。此機制可以限制用戶在預言機價格快速波動時下風險高的訂單",