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 useTokenPositionsFull from 'hooks/useAccountPositionsFull'
|
||||||
import AccountSlotsFullNotification from './shared/AccountSlotsFullNotification'
|
import AccountSlotsFullNotification from './shared/AccountSlotsFullNotification'
|
||||||
import { handleInputChange } from 'utils/account'
|
import { handleInputChange } from 'utils/account'
|
||||||
import InlineNotification from './shared/InlineNotification'
|
|
||||||
import { Bank, Group } from '@blockworks-foundation/mango-v4'
|
import { Bank, Group } from '@blockworks-foundation/mango-v4'
|
||||||
|
import UninsuredNotification from './shared/UninsuredNotification'
|
||||||
|
|
||||||
interface DepositFormProps {
|
interface DepositFormProps {
|
||||||
onSuccess: () => void
|
onSuccess: () => void
|
||||||
|
@ -313,23 +313,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
{!isInsured ? (
|
{!isInsured ? <UninsuredNotification name={bank?.name} /> : null}
|
||||||
<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}
|
|
||||||
</div>
|
</div>
|
||||||
{connected ? (
|
{connected ? (
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -11,6 +11,7 @@ type TooltipProps = {
|
||||||
delay?: number
|
delay?: number
|
||||||
show?: boolean
|
show?: boolean
|
||||||
maxWidth?: string
|
maxWidth?: string
|
||||||
|
wrapperClassName?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Tooltip = ({
|
const Tooltip = ({
|
||||||
|
@ -21,6 +22,7 @@ const Tooltip = ({
|
||||||
delay = 0,
|
delay = 0,
|
||||||
show = true,
|
show = true,
|
||||||
maxWidth = '20rem',
|
maxWidth = '20rem',
|
||||||
|
wrapperClassName,
|
||||||
}: TooltipProps) => {
|
}: TooltipProps) => {
|
||||||
const themeData = mangoStore((s) => s.themeData)
|
const themeData = mangoStore((s) => s.themeData)
|
||||||
if (show) {
|
if (show) {
|
||||||
|
@ -43,7 +45,9 @@ const Tooltip = ({
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="outline-none focus:outline-none">{children}</div>
|
<div className={`outline-none focus:outline-none ${wrapperClassName}`}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
</Tippy>
|
</Tippy>
|
||||||
)
|
)
|
||||||
} else {
|
} 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,
|
RefetchQueryFilters,
|
||||||
} from '@tanstack/react-query'
|
} from '@tanstack/react-query'
|
||||||
import { isTokenInsured } from '@components/DepositForm'
|
import { isTokenInsured } from '@components/DepositForm'
|
||||||
import InlineNotification from '@components/shared/InlineNotification'
|
import UninsuredNotification from '@components/shared/UninsuredNotification'
|
||||||
|
|
||||||
type JupiterRouteInfoProps = {
|
type JupiterRouteInfoProps = {
|
||||||
amountIn: Decimal
|
amountIn: Decimal
|
||||||
|
@ -934,23 +934,7 @@ const SwapReviewRouteInfo = ({
|
||||||
</div>
|
</div>
|
||||||
{!isInsured ? (
|
{!isInsured ? (
|
||||||
<div className="mt-4 px-6">
|
<div className="mt-4 px-6">
|
||||||
<InlineNotification
|
<UninsuredNotification name={outputBank?.name} />
|
||||||
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>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -81,6 +81,8 @@ import CreateAccountModal from '@components/modals/CreateAccountModal'
|
||||||
import TradeformSubmitButton from './TradeformSubmitButton'
|
import TradeformSubmitButton from './TradeformSubmitButton'
|
||||||
import useIpAddress from 'hooks/useIpAddress'
|
import useIpAddress from 'hooks/useIpAddress'
|
||||||
import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
|
import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
|
||||||
|
import { isTokenInsured } from '@components/DepositForm'
|
||||||
|
import UninsuredNotification from '@components/shared/UninsuredNotification'
|
||||||
|
|
||||||
dayjs.extend(relativeTime)
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
|
@ -113,7 +115,13 @@ type TradeForm = {
|
||||||
type FormErrors = Partial<Record<keyof TradeForm, string>>
|
type FormErrors = Partial<Record<keyof TradeForm, string>>
|
||||||
|
|
||||||
const AdvancedTradeForm = () => {
|
const AdvancedTradeForm = () => {
|
||||||
const { t } = useTranslation(['common', 'settings', 'swap', 'trade'])
|
const { t } = useTranslation([
|
||||||
|
'common',
|
||||||
|
'account',
|
||||||
|
'settings',
|
||||||
|
'swap',
|
||||||
|
'trade',
|
||||||
|
])
|
||||||
const { poolIsPerpReadyForRefresh } = useOpenPerpPositions()
|
const { poolIsPerpReadyForRefresh } = useOpenPerpPositions()
|
||||||
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
|
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
|
||||||
const { usedSerum3, totalSerum3, usedPerps, totalPerps } =
|
const { usedSerum3, totalSerum3, usedPerps, totalPerps } =
|
||||||
|
@ -160,6 +168,15 @@ const AdvancedTradeForm = () => {
|
||||||
return bank
|
return bank
|
||||||
}, [selectedMarket])
|
}, [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
|
// check for available account token slots
|
||||||
const tokenPositionsFull = useTokenPositionsFull([baseBank, quoteBank])
|
const tokenPositionsFull = useTokenPositionsFull([baseBank, quoteBank])
|
||||||
|
|
||||||
|
@ -1074,7 +1091,7 @@ const AdvancedTradeForm = () => {
|
||||||
decimalScale={tickDecimals}
|
decimalScale={tickDecimals}
|
||||||
name="quote"
|
name="quote"
|
||||||
id="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"
|
placeholder="0.00"
|
||||||
value={tradeForm.quoteSize}
|
value={tradeForm.quoteSize}
|
||||||
onValueChange={handleQuoteSizeChange}
|
onValueChange={handleQuoteSizeChange}
|
||||||
|
@ -1228,6 +1245,20 @@ const AdvancedTradeForm = () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : 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 ? (
|
{perpSlotsFull && mangoAccountAddress ? (
|
||||||
<div className="mb-4 px-4">
|
<div className="mb-4 px-4">
|
||||||
<AccountSlotsFullNotification
|
<AccountSlotsFullNotification
|
||||||
|
|
|
@ -51,6 +51,8 @@ import MaxMarketTradeAmount from './MaxMarketTradeAmount'
|
||||||
import useMangoAccount from 'hooks/useMangoAccount'
|
import useMangoAccount from 'hooks/useMangoAccount'
|
||||||
import InlineNotification from '@components/shared/InlineNotification'
|
import InlineNotification from '@components/shared/InlineNotification'
|
||||||
import { debounce } from 'lodash'
|
import { debounce } from 'lodash'
|
||||||
|
import { isTokenInsured } from '@components/DepositForm'
|
||||||
|
import UninsuredNotification from '@components/shared/UninsuredNotification'
|
||||||
|
|
||||||
const set = mangoStore.getState().set
|
const set = mangoStore.getState().set
|
||||||
|
|
||||||
|
@ -113,6 +115,11 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
}
|
}
|
||||||
}, [selectedMarket, side])
|
}, [selectedMarket, side])
|
||||||
|
|
||||||
|
const isInsured = useMemo(() => {
|
||||||
|
const group = mangoStore.getState().group
|
||||||
|
return isTokenInsured(outputBank, group)
|
||||||
|
}, [outputBank])
|
||||||
|
|
||||||
const handleBaseSizeChange = useCallback(
|
const handleBaseSizeChange = useCallback(
|
||||||
debounce((e: NumberFormatValues, info: SourceInfo) => {
|
debounce((e: NumberFormatValues, info: SourceInfo) => {
|
||||||
if (info.source !== 'event') return
|
if (info.source !== 'event') return
|
||||||
|
@ -607,6 +614,11 @@ export default function SpotMarketOrderSwapForm() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
{!isInsured ? (
|
||||||
|
<div className="mb-4">
|
||||||
|
<UninsuredNotification name={outputBank?.name} />
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex justify-between text-xs">
|
<div className="flex justify-between text-xs">
|
||||||
<p>{t('trade:order-value')}</p>
|
<p>{t('trade:order-value')}</p>
|
||||||
|
|
|
@ -51,10 +51,11 @@
|
||||||
"tooltip-total-funding": "The sum of perp position funding earned and paid",
|
"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-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
|
||||||
"tooltip-unfollow-account": "Unfollow account",
|
"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",
|
"total-funding-earned": "Total Funding Earned",
|
||||||
"unfollow": "Unfollow",
|
"unfollow": "Unfollow",
|
||||||
"volume-chart": "Volume Chart",
|
"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}}",
|
"week-starting": "Week starting {{week}}",
|
||||||
"zero-collateral": "Zero Collateral",
|
"zero-collateral": "Zero Collateral",
|
||||||
"zero-balances": "Show Zero Balances"
|
"zero-balances": "Show Zero Balances"
|
||||||
|
|
|
@ -51,10 +51,11 @@
|
||||||
"tooltip-total-funding": "The sum of perp position funding earned and paid",
|
"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-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
|
||||||
"tooltip-unfollow-account": "Unfollow account",
|
"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",
|
"total-funding-earned": "Total Funding Earned",
|
||||||
"unfollow": "Unfollow",
|
"unfollow": "Unfollow",
|
||||||
"volume-chart": "Volume Chart",
|
"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}}",
|
"week-starting": "Week starting {{week}}",
|
||||||
"zero-collateral": "Zero Collateral",
|
"zero-collateral": "Zero Collateral",
|
||||||
"zero-balances": "Show Zero Balances"
|
"zero-balances": "Show Zero Balances"
|
||||||
|
|
|
@ -51,10 +51,11 @@
|
||||||
"tooltip-total-funding": "The sum of perp position funding earned and paid",
|
"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-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
|
||||||
"tooltip-unfollow-account": "Unfollow account",
|
"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",
|
"total-funding-earned": "Total Funding Earned",
|
||||||
"unfollow": "Unfollow",
|
"unfollow": "Unfollow",
|
||||||
"volume-chart": "Volume Chart",
|
"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}}",
|
"week-starting": "Week starting {{week}}",
|
||||||
"zero-collateral": "Zero Collateral",
|
"zero-collateral": "Zero Collateral",
|
||||||
"zero-balances": "Show Zero Balances"
|
"zero-balances": "Show Zero Balances"
|
||||||
|
|
|
@ -51,10 +51,11 @@
|
||||||
"tooltip-total-funding": "赚取和支付的合约资金费总和",
|
"tooltip-total-funding": "赚取和支付的合约资金费总和",
|
||||||
"tooltip-total-interest": "你获取的利息(存款)减你付出的利息(借贷)",
|
"tooltip-total-interest": "你获取的利息(存款)减你付出的利息(借贷)",
|
||||||
"tooltip-unfollow-account": "取消帐户关注",
|
"tooltip-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}}来算的一周",
|
"week-starting": "从{{week}}来算的一周",
|
||||||
"zero-balances": "显示等于零的余额",
|
"zero-balances": "显示等于零的余额",
|
||||||
"zero-collateral": "无质押品"
|
"zero-collateral": "无质押品"
|
||||||
|
|
|
@ -51,10 +51,11 @@
|
||||||
"tooltip-total-funding": "賺取和支付的合約資金費總和",
|
"tooltip-total-funding": "賺取和支付的合約資金費總和",
|
||||||
"tooltip-total-interest": "你獲取的利息(存款)減你付出的利息(借貸)",
|
"tooltip-total-interest": "你獲取的利息(存款)減你付出的利息(借貸)",
|
||||||
"tooltip-unfollow-account": "取消帳戶關注",
|
"tooltip-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}}來算的一周",
|
"week-starting": "從{{week}}來算的一周",
|
||||||
"zero-balances": "顯示等於零的餘額",
|
"zero-balances": "顯示等於零的餘額",
|
||||||
"zero-collateral": "無質押品"
|
"zero-collateral": "無質押品"
|
||||||
|
|
Loading…
Reference in New Issue