add insurance info to swap
This commit is contained in:
parent
7235c914ac
commit
a2d1cb83cd
|
@ -40,6 +40,7 @@ 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 InlineNotification from './shared/InlineNotification'
|
||||||
|
import { Bank, Group } from '@blockworks-foundation/mango-v4'
|
||||||
|
|
||||||
interface DepositFormProps {
|
interface DepositFormProps {
|
||||||
onSuccess: () => void
|
onSuccess: () => void
|
||||||
|
@ -67,6 +68,16 @@ export const walletBalanceForToken = (
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const isTokenInsured = (
|
||||||
|
bank: Bank | undefined,
|
||||||
|
group: Group | undefined,
|
||||||
|
) => {
|
||||||
|
if (!bank || !group) return true
|
||||||
|
const mintInfo = group.mintInfosMapByMint.get(bank.mint.toString())
|
||||||
|
const isInsured = mintInfo?.groupInsuranceFund
|
||||||
|
return isInsured
|
||||||
|
}
|
||||||
|
|
||||||
function DepositForm({ onSuccess, token }: DepositFormProps) {
|
function DepositForm({ onSuccess, token }: DepositFormProps) {
|
||||||
const { t } = useTranslation(['common', 'account', 'swap'])
|
const { t } = useTranslation(['common', 'account', 'swap'])
|
||||||
const [inputAmount, setInputAmount] = useState('')
|
const [inputAmount, setInputAmount] = useState('')
|
||||||
|
@ -87,10 +98,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
||||||
|
|
||||||
const isInsured = useMemo(() => {
|
const isInsured = useMemo(() => {
|
||||||
const group = mangoStore.getState().group
|
const group = mangoStore.getState().group
|
||||||
if (!bank || !group) return true
|
return isTokenInsured(bank, group)
|
||||||
const mintInfo = group.mintInfosMapByMint.get(bank.mint.toString())
|
|
||||||
const isInsured = mintInfo?.groupInsuranceFund
|
|
||||||
return isInsured
|
|
||||||
}, [bank])
|
}, [bank])
|
||||||
|
|
||||||
const tokenPositionsFull = useTokenPositionsFull([bank])
|
const tokenPositionsFull = useTokenPositionsFull([bank])
|
||||||
|
@ -307,7 +315,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
||||||
) : null}
|
) : null}
|
||||||
{!isInsured ? (
|
{!isInsured ? (
|
||||||
<InlineNotification
|
<InlineNotification
|
||||||
type="warning"
|
type="info"
|
||||||
desc={
|
desc={
|
||||||
<>
|
<>
|
||||||
{t('account:warning-uninsured', { token: bank?.name })}{' '}
|
{t('account:warning-uninsured', { token: bank?.name })}{' '}
|
||||||
|
|
|
@ -62,6 +62,8 @@ import {
|
||||||
RefetchOptions,
|
RefetchOptions,
|
||||||
RefetchQueryFilters,
|
RefetchQueryFilters,
|
||||||
} from '@tanstack/react-query'
|
} from '@tanstack/react-query'
|
||||||
|
import { isTokenInsured } from '@components/DepositForm'
|
||||||
|
import InlineNotification from '@components/shared/InlineNotification'
|
||||||
|
|
||||||
type JupiterRouteInfoProps = {
|
type JupiterRouteInfoProps = {
|
||||||
amountIn: Decimal
|
amountIn: Decimal
|
||||||
|
@ -332,7 +334,7 @@ const SwapReviewRouteInfo = ({
|
||||||
setSelectedRoute,
|
setSelectedRoute,
|
||||||
show,
|
show,
|
||||||
}: JupiterRouteInfoProps) => {
|
}: JupiterRouteInfoProps) => {
|
||||||
const { t } = useTranslation(['common', 'swap', 'trade'])
|
const { t } = useTranslation(['common', 'account', 'swap', 'trade'])
|
||||||
const slippage = mangoStore((s) => s.swap.slippage)
|
const slippage = mangoStore((s) => s.swap.slippage)
|
||||||
const wallet = useWallet()
|
const wallet = useWallet()
|
||||||
const [showRoutesModal, setShowRoutesModal] = useState<boolean>(false)
|
const [showRoutesModal, setShowRoutesModal] = useState<boolean>(false)
|
||||||
|
@ -605,7 +607,7 @@ const SwapReviewRouteInfo = ({
|
||||||
outputBank,
|
outputBank,
|
||||||
outputTokenInfo.decimals,
|
outputTokenInfo.decimals,
|
||||||
)
|
)
|
||||||
}, [selectedRoute])
|
}, [inputBank, outputBank, outputTokenInfo, selectedRoute])
|
||||||
|
|
||||||
const coinGeckoPriceDifference = useMemo(() => {
|
const coinGeckoPriceDifference = useMemo(() => {
|
||||||
return amountOut?.toNumber()
|
return amountOut?.toNumber()
|
||||||
|
@ -621,6 +623,11 @@ const SwapReviewRouteInfo = ({
|
||||||
: new Decimal(0)
|
: new Decimal(0)
|
||||||
}, [coingeckoPrices, amountIn, amountOut])
|
}, [coingeckoPrices, amountIn, amountOut])
|
||||||
|
|
||||||
|
const isInsured = useMemo(() => {
|
||||||
|
const group = mangoStore.getState().group
|
||||||
|
return isTokenInsured(outputBank, group)
|
||||||
|
}, [outputBank])
|
||||||
|
|
||||||
return routes?.length &&
|
return routes?.length &&
|
||||||
selectedRoute &&
|
selectedRoute &&
|
||||||
inputTokenInfo &&
|
inputTokenInfo &&
|
||||||
|
@ -638,16 +645,16 @@ const SwapReviewRouteInfo = ({
|
||||||
>
|
>
|
||||||
<div className="thin-scroll flex h-full flex-col justify-between overflow-y-auto">
|
<div className="thin-scroll flex h-full flex-col justify-between overflow-y-auto">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-between px-4 pt-4">
|
<div className="relative w-full px-4 pt-4">
|
||||||
<IconButton
|
<IconButton
|
||||||
className="text-th-fgd-2"
|
className="absolute text-th-fgd-2"
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
size="small"
|
size="small"
|
||||||
ref={focusRef}
|
ref={focusRef}
|
||||||
>
|
>
|
||||||
<ArrowLeftIcon className="h-5 w-5" />
|
<ArrowLeftIcon className="h-5 w-5" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<div className="relative h-8 w-8">
|
<div className="absolute right-4 h-8 w-8">
|
||||||
<CircularProgress
|
<CircularProgress
|
||||||
size={32}
|
size={32}
|
||||||
indicatorWidth={1}
|
indicatorWidth={1}
|
||||||
|
@ -656,7 +663,7 @@ const SwapReviewRouteInfo = ({
|
||||||
/>
|
/>
|
||||||
{refetchRoute ? (
|
{refetchRoute ? (
|
||||||
<IconButton
|
<IconButton
|
||||||
className="absolute bottom-0 left-0 right-0 top-0 text-th-fgd-2"
|
className="absolute inset-0 text-th-fgd-2"
|
||||||
hideBg
|
hideBg
|
||||||
onClick={() => refetchRoute()}
|
onClick={() => refetchRoute()}
|
||||||
size="small"
|
size="small"
|
||||||
|
@ -671,7 +678,7 @@ const SwapReviewRouteInfo = ({
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center bg-th-bkg-1 px-6 pt-2">
|
<div className="flex justify-center bg-th-bkg-1 px-6 pt-4">
|
||||||
<div className="mb-3 flex w-full flex-col items-center border-b border-th-bkg-3 pb-4">
|
<div className="mb-3 flex w-full flex-col items-center border-b border-th-bkg-3 pb-4">
|
||||||
<div className="relative mb-2 w-[72px]">
|
<div className="relative mb-2 w-[72px]">
|
||||||
<TokenLogo bank={inputBank} size={40} />
|
<TokenLogo bank={inputBank} size={40} />
|
||||||
|
@ -837,7 +844,7 @@ const SwapReviewRouteInfo = ({
|
||||||
<p className="tooltip-underline">Jupiter Fees</p>
|
<p className="tooltip-underline">Jupiter Fees</p>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<p className="text-right font-mono text-sm text-th-fgd-2">
|
<p className="text-right font-mono text-sm text-th-fgd-2">
|
||||||
≈{' '}
|
≈
|
||||||
<FormatNumericValue
|
<FormatNumericValue
|
||||||
value={jupiterFees}
|
value={jupiterFees}
|
||||||
decimals={outputTokenInfo.decimals}
|
decimals={outputTokenInfo.decimals}
|
||||||
|
@ -861,7 +868,7 @@ const SwapReviewRouteInfo = ({
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div> */}
|
</div> */}
|
||||||
{borrowAmount ? (
|
{borrowAmount && inputBank ? (
|
||||||
<>
|
<>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<Tooltip
|
<Tooltip
|
||||||
|
@ -872,7 +879,7 @@ const SwapReviewRouteInfo = ({
|
||||||
borrowAmount: formatNumericValue(borrowAmount),
|
borrowAmount: formatNumericValue(borrowAmount),
|
||||||
token: inputTokenInfo?.symbol,
|
token: inputTokenInfo?.symbol,
|
||||||
rate: formatNumericValue(
|
rate: formatNumericValue(
|
||||||
inputBank!.getBorrowRateUi(),
|
inputBank.getBorrowRateUi(),
|
||||||
2,
|
2,
|
||||||
),
|
),
|
||||||
})
|
})
|
||||||
|
@ -880,7 +887,7 @@ const SwapReviewRouteInfo = ({
|
||||||
borrowAmount: formatNumericValue(borrowAmount),
|
borrowAmount: formatNumericValue(borrowAmount),
|
||||||
token: inputTokenInfo?.symbol,
|
token: inputTokenInfo?.symbol,
|
||||||
rate: formatNumericValue(
|
rate: formatNumericValue(
|
||||||
inputBank!.getBorrowRateUi(),
|
inputBank.getBorrowRateUi(),
|
||||||
2,
|
2,
|
||||||
),
|
),
|
||||||
})
|
})
|
||||||
|
@ -900,7 +907,7 @@ const SwapReviewRouteInfo = ({
|
||||||
<Tooltip
|
<Tooltip
|
||||||
content={t('loan-origination-fee-tooltip', {
|
content={t('loan-origination-fee-tooltip', {
|
||||||
fee: `${(
|
fee: `${(
|
||||||
inputBank!.loanOriginationFeeRate.toNumber() * 100
|
inputBank.loanOriginationFeeRate.toNumber() * 100
|
||||||
).toFixed(3)}%`,
|
).toFixed(3)}%`,
|
||||||
})}
|
})}
|
||||||
delay={100}
|
delay={100}
|
||||||
|
@ -913,18 +920,39 @@ const SwapReviewRouteInfo = ({
|
||||||
<FormatNumericValue
|
<FormatNumericValue
|
||||||
value={
|
value={
|
||||||
borrowAmount *
|
borrowAmount *
|
||||||
inputBank!.loanOriginationFeeRate.toNumber()
|
inputBank.loanOriginationFeeRate.toNumber()
|
||||||
}
|
}
|
||||||
decimals={inputBank!.mintDecimals}
|
decimals={inputBank.mintDecimals}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
<span className="font-body text-th-fgd-3">
|
<span className="font-body text-th-fgd-3">
|
||||||
{inputBank!.name}
|
{inputBank.name}
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</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>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<div className="mb-4 flex items-center justify-center">
|
<div className="mb-4 flex items-center justify-center">
|
||||||
|
|
Loading…
Reference in New Issue