add uninsured warning notification to trade
This commit is contained in:
parent
a2d1cb83cd
commit
f8bac40412
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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": "无质押品"
|
||||
|
|
|
@ -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": "無質押品"
|
||||
|
|
Loading…
Reference in New Issue