Skip to content

Commit

Permalink
chore: risk display part2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chef-Yogi
Chef-Yogi committed Oct 3, 2024
1 parent a551c09 commit c633bb0
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 24 deletions.
137 changes: 118 additions & 19 deletions apps/web/src/components/AccessRisk/SwapRevampRiskDisplay.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useTranslation } from '@pancakeswap/localization'
import { ERC20Token } from '@pancakeswap/sdk'
import { Box, FlexGap, Link, RiskAlertIcon, Text } from '@pancakeswap/uikit'
import { Box, FlexGap, Link, RiskAlertIcon, Text, WarningIcon } from '@pancakeswap/uikit'
import isUndefinedOrNull from '@pancakeswap/utils/isUndefinedOrNull'
import { SwapUIV2 } from '@pancakeswap/widgets-internal'
import { useEffect, useMemo, useState } from 'react'
Expand Down Expand Up @@ -35,6 +35,8 @@ interface RiskDetailsPanelProps {
token0RiskLevelDescription?: string
token1?: ERC20Token
token1RiskLevelDescription?: string
isPriceImpactTooHigh?: boolean
isSlippageTooHigh?: boolean
}

const useRiskCheckData = (token?: ERC20Token) => {
Expand Down Expand Up @@ -111,6 +113,70 @@ export const RiskTitle: React.FC<RiskDetailsProps> = ({ token }) => {
return null
}

export const PriceImpactTitle: React.FC = () => {
const { t } = useTranslation()
return (
<FlexGap alignItems="flex-start" gap="8px">
<Box>
<WarningIcon width={24} color="failure" />
</Box>
<FlexGap justifyContent="center" alignItems="flex-start" flexDirection="column" gap="8px">
<Text fontSize="16px">{t('Price impact too high. Proceed with caution.')}</Text>
</FlexGap>
</FlexGap>
)
}

export const SlippageTitle: React.FC = () => {
const { t } = useTranslation()
return (
<FlexGap alignItems="flex-start" gap="8px">
<Box>
<WarningIcon width={24} color="failure" />
</Box>
<FlexGap justifyContent="center" alignItems="flex-start" flexDirection="column" gap="8px">
<Text fontSize="16px">{t('Slippage settings too high. Proceed with caution.')}</Text>
</FlexGap>
</FlexGap>
)
}

const PriceImpactDetails: React.FC = () => {
const { t } = useTranslation()
return (
<FlexGap alignItems="flex-start" gap="8px">
<FlexGap justifyContent="center" alignItems="flex-start" flexDirection="column" gap="8px">
<Text>
{t(
'Final execution price may be differ from the market price due to trader size, available liquidity, and trading route. Please proceed with caution.',
)}
</Text>
<Link style={{ display: 'inline' }} ml="4px" external href="https://www.hashdit.io">
Learn More
</Link>
</FlexGap>
</FlexGap>
)
}

const SlippageDetails: React.FC = () => {
const { t } = useTranslation()
return (
<FlexGap alignItems="flex-start" gap="8px">
<FlexGap justifyContent="center" alignItems="flex-start" flexDirection="column" gap="8px">
<Text>
{t(
'You may only get the amount of “Minimum received” with a high slippage setting. Reset your slippage to avoid potential losses.',
)}
</Text>
<Link style={{ display: 'inline' }} ml="4px" external href="https://www.hashdit.io">
Learn More
</Link>
</FlexGap>
</FlexGap>
)
}

export const RiskDetails: React.FC<RiskDetailsProps> = ({ token }) => {
const { t } = useTranslation()
const { isDataLoading, riskLevel } = useRiskCheckData(token)
Expand Down Expand Up @@ -139,9 +205,10 @@ export const RiskDetails: React.FC<RiskDetailsProps> = ({ token }) => {
export const useShouldRiskPanelDisplay = (token0?: ERC20Token, token1?: ERC20Token) => {
const { isDataLoading: isDataLoading0, riskLevel: riskLevel0 } = useRiskCheckData(token0)
const { isDataLoading: isDataLoading1, riskLevel: riskLevel1 } = useRiskCheckData(token1)
if (isDataLoading0 || isDataLoading1) {
return false
}
return (
isDataLoading0 ||
isDataLoading1 ||
(riskLevel0 && riskLevel0 <= TOKEN_RISK.SIGNIFICANT && riskLevel0 >= TOKEN_RISK.HIGH) ||
(riskLevel1 && riskLevel1 <= TOKEN_RISK.SIGNIFICANT && riskLevel1 >= TOKEN_RISK.HIGH)
)
Expand All @@ -152,26 +219,58 @@ export const RiskDetailsPanel: React.FC<RiskDetailsPanelProps> = ({
token1,
token0RiskLevelDescription,
token1RiskLevelDescription,
isPriceImpactTooHigh,
isSlippageTooHigh,
}) => {
const [isOpen, setIsOpen] = useState(false)
const isRiskToken0 = useShouldRiskPanelDisplay(token0)
const isRiskToken1 = useShouldRiskPanelDisplay(token1)
const isRiskMoreThanOne = useMemo(() => {
let count = 0
if (isRiskToken0) {
count++
console.log('isRiskToken0', isRiskToken0)
}
if (isRiskToken1) {
count++
console.log('isRiskToken1', isRiskToken1)
}
if (isPriceImpactTooHigh) {
count++
console.log('isPriceImpactTooHigh', isPriceImpactTooHigh)
}
if (isSlippageTooHigh) {
count++
console.log('isSlippageTooHigh', isSlippageTooHigh)
}
return count > 1
}, [isRiskToken0, isRiskToken1, isPriceImpactTooHigh, isSlippageTooHigh])
return (
<RiskDetailsPanelWrapper width="100%" flexDirection="column" justifyContent="center" alignItems="center">
<SwapUIV2.Collapse
isOpen={isOpen}
onToggle={() => setIsOpen(!isOpen)}
title={
<FlexGap flexDirection="column">
<RiskTitle token={token0} />
<RiskTitle token={token1} />
</FlexGap>
}
content={
<FlexGap flexDirection="column" pl="32px" pr="8px">
<RiskDetails token={token0} riskLevelDescription={token0RiskLevelDescription} />
<RiskDetails token={token1} riskLevelDescription={token1RiskLevelDescription} />
</FlexGap>
}
/>
{isRiskMoreThanOne ? (
'risk more than one'
) : (
<SwapUIV2.Collapse
isOpen={isOpen}
onToggle={() => setIsOpen(!isOpen)}
title={
<FlexGap flexDirection="column">
<RiskTitle token={token0} />
<RiskTitle token={token1} />
{isPriceImpactTooHigh && <PriceImpactTitle />}
{isSlippageTooHigh && <SlippageTitle />}
</FlexGap>
}
content={
<FlexGap flexDirection="column" pl="32px" pr="8px">
<RiskDetails token={token0} riskLevelDescription={token0RiskLevelDescription} />
<RiskDetails token={token1} riskLevelDescription={token1RiskLevelDescription} />
{isPriceImpactTooHigh && <PriceImpactDetails />}
{isSlippageTooHigh && <SlippageDetails />}
</FlexGap>
}
/>
)}
</RiskDetailsPanelWrapper>
)
}
28 changes: 23 additions & 5 deletions apps/web/src/views/SwapSimplify/V4Swap/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { SmartRouter } from '@pancakeswap/smart-router/evm'
import { useUserSlippage } from '@pancakeswap/utils/user'
import { SwapUIV2 } from '@pancakeswap/widgets-internal'
import { RiskDetailsPanel, useShouldRiskPanelDisplay } from 'components/AccessRisk/SwapRevampRiskDisplay'
import { useCurrency } from 'hooks/Tokens'
Expand All @@ -7,8 +8,11 @@ import { useMemo } from 'react'
import { Field } from 'state/swap/actions'
import { useSwapState } from 'state/swap/hooks'
import { logger } from 'utils/datadog'
import { warningSeverity } from 'utils/exchange'
import { isXOrder } from 'views/Swap/utils'
import { SwapType } from '../../Swap/types'
import { useAllTypeBestTrade } from '../../Swap/V3Swap/hooks/useAllTypeBestTrade'
import { computeTradePriceBreakdown } from '../../Swap/V3Swap/utils/exchange'
import { ButtonAndDetailsPanel } from './ButtonAndDetailsPanel'
import { CommitButton } from './CommitButton'
import { FormMain } from './FormMainV4'
Expand Down Expand Up @@ -90,10 +94,20 @@ export function V4SwapForm() {
() => (bestOrder?.trade ? SmartRouter.getExecutionPrice(bestOrder.trade) : undefined),
[bestOrder?.trade],
)

const inputCurrency = useCurrency(inputCurrencyId)
const outputCurrency = useCurrency(outputCurrencyId)

const { priceImpactWithoutFee } = useMemo(
() => computeTradePriceBreakdown(isXOrder(bestOrder) ? bestOrder?.ammTrade : bestOrder?.trade),
[bestOrder],
)
const isPriceImpactTooHigh = useMemo(() => {
const warningLevel = warningSeverity(priceImpactWithoutFee)
return warningLevel >= 3
}, [priceImpactWithoutFee])
const [userSlippageTolerance] = useUserSlippage()
const isSlippageTooHigh = useMemo(() => userSlippageTolerance > 500, [userSlippageTolerance])

const shouldRiskPanelDisplay = useShouldRiskPanelDisplay(inputCurrency?.wrapped, outputCurrency?.wrapped)

return (
Expand All @@ -102,17 +116,21 @@ export function V4SwapForm() {
<SwapSelection swapType={SwapType.MARKET} />
<FormMain
tradeLoading={!tradeLoaded}
pricingAndSlippage={
<PricingAndSlippage priceLoading={!tradeLoaded} price={executionPrice ?? undefined} showSlippage={false} />
}
inputAmount={bestOrder?.trade?.inputAmount}
outputAmount={bestOrder?.trade?.outputAmount}
swapCommitButton={
<CommitButton order={bestOrder} tradeLoaded={tradeLoaded} tradeError={tradeError} {...commitHooks} />
}
/>
</SwapUIV2.SwapTabAndInputPanelWrapper>
{shouldRiskPanelDisplay && <RiskDetailsPanel token0={inputCurrency?.wrapped} token1={outputCurrency?.wrapped} />}
{(shouldRiskPanelDisplay || isPriceImpactTooHigh || isSlippageTooHigh) && (
<RiskDetailsPanel
isPriceImpactTooHigh={isPriceImpactTooHigh}
isSlippageTooHigh={isSlippageTooHigh}
token0={inputCurrency?.wrapped}
token1={outputCurrency?.wrapped}
/>
)}
<ButtonAndDetailsPanel
swapCommitButton={
<CommitButton order={bestOrder} tradeLoaded={tradeLoaded} tradeError={tradeError} {...commitHooks} />
Expand Down

0 comments on commit c633bb0

Please sign in to comment.