diff --git a/.changeset/odd-moles-brake.md b/.changeset/odd-moles-brake.md new file mode 100644 index 000000000..2751455e7 --- /dev/null +++ b/.changeset/odd-moles-brake.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': patch +--- + +Add slippage details to review quote screen diff --git a/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx index 25b955883..7d737d1fd 100644 --- a/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx +++ b/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, type FC } from 'react' +import { useEffect, useState, type FC, type ReactNode } from 'react' import { Button, Flex, @@ -11,7 +11,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { type Token } from '../../../../types/index.js' import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight' import type { useQuote } from '@reservoir0x/relay-kit-hooks' -import { formatDollar } from '../../../../utils/numbers.js' +import { formatBN, formatDollar } from '../../../../utils/numbers.js' import { LoadingSpinner } from '../../LoadingSpinner.js' import { truncateAddress } from '../../../../utils/truncate.js' import { calculatePriceTimeEstimate } from '../../../../utils/quote.js' @@ -27,6 +27,7 @@ import React from 'react' import { useRelayClient } from '../../../../hooks/index.js' import type { Address } from 'viem' import type { LinkedWallet } from '../../../../types/index.js' +import Tooltip from '../../../primitives/Tooltip.js' type ReviewQuoteProps = { fromToken?: Token @@ -73,6 +74,14 @@ export const ReviewQuoteStep: FC = ({ const totalImpactUsd = quote?.details?.totalImpact?.usd const showHighPriceImpactWarning = isHighPriceImpact && totalImpactUsd && Number(totalImpactUsd) <= -10 + const minimumAmountFormatted = quote?.details?.currencyOut?.minimumAmount + ? formatBN( + quote.details.currencyOut.minimumAmount, + 6, + toToken?.decimals, + false + ) + : undefined const fromChain = client?.chains?.find( (chain) => chain.id === fromToken?.chainId @@ -105,7 +114,58 @@ export const ReviewQuoteStep: FC = ({ return () => clearInterval(interval) }, [quoteUpdatedAt]) - const breakdown = [ + let breakdown: { title: string; value: ReactNode }[] = [] + + if (minimumAmountFormatted) { + breakdown.push({ + title: 'Min. Received', + value: ( + + + {minimumAmountFormatted} {toToken?.symbol} + + + Automatic slippage tolerance is applied to every trade. The + option to adjust slippage will be available soon. + + } + > +
+ + + Slippage:{' '} + {quote?.details?.slippageTolerance?.destination?.percent ?? 0} + % + + + + + +
+
+
+ ) + }) + } + + breakdown = [ + ...breakdown, { title: 'Estimated time', value: (