react-feather#Repeat TypeScript Examples
The following examples show how to use
react-feather#Repeat.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: TradePrice.tsx From cuiswap with GNU General Public License v3.0 | 6 votes |
|
export default function TradePrice({
price,
inputCurrency,
outputCurrency,
showInverted,
setShowInverted
}: TradePriceProps) {
const theme = useContext(ThemeContext)
const formattedPrice = showInverted ? price?.toSignificant(6) : price?.invert()?.toSignificant(6)
const show = Boolean(inputCurrency && outputCurrency)
const label = showInverted
? `${outputCurrency?.symbol} per ${inputCurrency?.symbol}`
: `${inputCurrency?.symbol} per ${outputCurrency?.symbol}`
return (
<Text
fontWeight={500}
fontSize={14}
color={theme.text2}
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
>
{show ? (
<>
{formattedPrice ?? '-'} {label}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</>
) : (
'-'
)}
</Text>
)
}
Example #2
| Source File: TradePrice.tsx From cheeseswap-interface with GNU General Public License v3.0 | 6 votes |
|
export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {
const theme = useContext(ThemeContext)
const formattedPrice = showInverted ? price?.toSignificant(6) : price?.invert()?.toSignificant(6)
const show = Boolean(price?.baseCurrency && price?.quoteCurrency)
const label = showInverted
? `${price?.quoteCurrency?.symbol} per ${price?.baseCurrency?.symbol}`
: `${price?.baseCurrency?.symbol} per ${price?.quoteCurrency?.symbol}`
return (
<Text
fontWeight={700}
fontSize={14}
color={theme.colors.text2}
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
>
{show ? (
<>
{formattedPrice ?? '-'} {label}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</>
) : (
'-'
)}
</Text>
)
}
Example #3
| Source File: TradePrice.tsx From dyp with Do What The F*ck You Want To Public License | 6 votes |
|
export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {
const theme = useContext(ThemeContext)
const formattedPrice = showInverted ? price?.toSignificant(6) : price?.invert()?.toSignificant(6)
const show = Boolean(price?.baseCurrency && price?.quoteCurrency)
const label = showInverted
? `${price?.quoteCurrency?.symbol} per ${price?.baseCurrency?.symbol}`
: `${price?.baseCurrency?.symbol} per ${price?.quoteCurrency?.symbol}`
return (
<Text
fontWeight={500}
fontSize={14}
color={theme.text2}
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
>
{show ? (
<>
{formattedPrice ?? '-'} {label}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</>
) : (
'-'
)}
</Text>
)
}
Example #4
| Source File: TradePrice.tsx From luaswap-interface with GNU General Public License v3.0 | 6 votes |
|
export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {
const theme = useContext(ThemeContext)
const formattedPrice = showInverted ? price?.toSignificant(6) : price?.invert()?.toSignificant(6)
const show = Boolean(price?.baseCurrency && price?.quoteCurrency)
const label = showInverted
? `${price?.quoteCurrency?.symbol} per ${price?.baseCurrency?.symbol}`
: `${price?.baseCurrency?.symbol} per ${price?.quoteCurrency?.symbol}`
return (
<Text
fontWeight={500}
fontSize={14}
color={theme.text2}
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
>
{show ? (
<>
{formattedPrice ?? '-'} {label}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</>
) : (
'-'
)}
</Text>
)
}
Example #5
| Source File: SwapModalFooter.tsx From cuiswap with GNU General Public License v3.0 | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const theme = useContext(ThemeContext)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontWeight={400} fontSize={14} color={theme.text2}>
Price
</Text>
<Text
fontWeight={500}
fontSize={14}
color={theme.text1}
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '10px'
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
{trade.tradeType === TradeType.EXACT_INPUT ? 'Minimum received' : 'Maximum sold'}
</TYPE.black>
<QuestionHelper text="Your transaction will revert if there is a large, unfavorable price movement before it is confirmed." />
</RowFixed>
<RowFixed>
<TYPE.black fontSize={14}>
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</TYPE.black>
<TYPE.black fontSize={14} marginLeft={'4px'}>
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</TYPE.black>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black color={theme.text2} fontSize={14} fontWeight={400}>
Price Impact
</TYPE.black>
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
Liquidity Provider Fee
</TYPE.black>
<QuestionHelper text="A portion of each trade (0.30%) goes to liquidity providers as a protocol incentive." />
</RowFixed>
<TYPE.black fontSize={14}>
{realizedLPFee ? realizedLPFee?.toSignificant(6) + ' ' + trade.inputAmount.currency.symbol : '-'}
</TYPE.black>
</RowBetween>
</AutoColumn>
<AutoRow>
<ButtonError
onClick={onConfirm}
disabled={disabledConfirm}
error={severity > 2}
style={{ margin: '10px 0 0 0' }}
id="confirm-swap-or-send"
>
<Text fontSize={20} fontWeight={500}>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Text>
</ButtonError>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
Example #6
| Source File: SwapModalFooter.tsx From cheeseswap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const theme = useContext(ThemeContext)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontWeight={600} fontSize={14} color={theme.colors.text2}>
Price
</Text>
<Text
fontWeight={700}
fontSize={14}
color={theme.colors.text1}
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '10px'
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={16} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={600} color={theme.colors.text2}>
{trade.tradeType === TradeType.EXACT_INPUT ? 'Minimum received' : 'Maximum sold'}
</TYPE.black>
<QuestionHelper text="Your transaction will revert if there is a large, unfavorable price movement before it is confirmed." />
</RowFixed>
<RowFixed>
<TYPE.black fontSize={14}>
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</TYPE.black>
<TYPE.black fontSize={14} marginLeft={'4px'}>
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</TYPE.black>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black color={theme.colors.text2} fontSize={14} fontWeight={600}>
Price Impact
</TYPE.black>
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={600} color={theme.colors.text2}>
Liquidity Provider Fee
</TYPE.black>
<QuestionHelper text="For each trade a 0.2% fee is paid. 0.17% goes to liquidity providers and 0.03% goes to the CheeseSwap treasury." />
</RowFixed>
<TYPE.black fontSize={14}>
{realizedLPFee ? realizedLPFee?.toSignificant(6) + ' ' + trade.inputAmount.currency.symbol : '-'}
</TYPE.black>
</RowBetween>
</AutoColumn>
<AutoRow>
<ButtonError
onClick={onConfirm}
disabled={disabledConfirm}
error={severity > 2}
style={{ margin: '10px 0 0 0' }}
id="confirm-swap-or-send"
>
<Text fontSize={18} fontWeight={700}>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Text>
</ButtonError>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
Example #7
| Source File: SwapModalFooter.tsx From goose-frontend-amm with GNU General Public License v3.0 | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontSize="14px">Price</Text>
<Text
fontSize="14px"
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '8px',
fontWeight: 500
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT ? 'Minimum received' : 'Maximum sold'}
</Text>
<QuestionHelper text="Your transaction will revert if there is a large, unfavorable price movement before it is confirmed." />
</RowFixed>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</Text>
<Text fontSize="14px" marginLeft="4px">
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</Text>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">Price Impact</Text>
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">Liquidity Provider Fee</Text>
<QuestionHelper text="For each trade a 0.2% fee is paid. 0.17% goes to liquidity providers and 0.03% goes to the PancakeSwap treasury." />
</RowFixed>
<Text fontSize="14px">
{realizedLPFee ? `${realizedLPFee?.toSignificant(6) } ${ trade.inputAmount.currency.symbol}` : '-'}
</Text>
</RowBetween>
</AutoColumn>
<AutoRow>
<Button
onClick={onConfirm}
disabled={disabledConfirm}
variant={severity > 2 ? 'danger' : 'primary'}
mt="10px"
id="confirm-swap-or-send"
fullWidth
>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Button>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
Example #8
| Source File: SwapModalFooter.tsx From mozartfinance-swap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm,
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade,
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
const TranslateString = useI18n()
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontSize="14px">Price</Text>
<Text
fontSize="14px"
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '8px',
fontWeight: 500,
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? TranslateString(1210, 'Minimum received')
: TranslateString(220, 'Maximum sold')}
</Text>
<QuestionHelper
text={TranslateString(
202,
'Your transaction will revert if there is a large, unfavorable price movement before it is confirmed.'
)}
/>
</RowFixed>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</Text>
<Text fontSize="14px" marginLeft="4px">
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</Text>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">{TranslateString(226, 'Price Impact')}</Text>
<QuestionHelper
text={TranslateString(224, 'The difference between the market price and your price due to trade size.')}
/>
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">{TranslateString(228, 'Liquidity Provider Fee')}</Text>
<QuestionHelper
text={TranslateString(
999,
'For each trade a 0.2% fee is paid. 0.17% goes to liquidity providers and 0.03% goes to the PancakeSwap treasury.'
)}
/>
</RowFixed>
<Text fontSize="14px">
{realizedLPFee ? `${realizedLPFee?.toSignificant(6)} ${trade.inputAmount.currency.symbol}` : '-'}
</Text>
</RowBetween>
</AutoColumn>
<AutoRow>
<Button
onClick={onConfirm}
disabled={disabledConfirm}
variant={severity > 2 ? 'danger' : 'primary'}
mt="10px"
id="confirm-swap-or-send"
width="100%"
>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Button>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
Example #9
| Source File: SwapModalFooter.tsx From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm,
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade,
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
const TranslateString = useI18n()
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontSize="14px">Price</Text>
<Text
fontSize="14px"
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '8px',
fontWeight: 500,
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? TranslateString(1210, 'Minimum received')
: TranslateString(220, 'Maximum sold')}
</Text>
<QuestionHelper
text={TranslateString(
202,
'Your transaction will revert if there is a large, unfavorable price movement before it is confirmed.'
)}
/>
</RowFixed>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</Text>
<Text fontSize="14px" marginLeft="4px">
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</Text>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">{TranslateString(226, 'Price Impact')}</Text>
<QuestionHelper
text={TranslateString(224, 'The difference between the market price and your price due to trade size.')}
/>
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">{TranslateString(228, 'Liquidity Provider Fee')}</Text>
<QuestionHelper
text={TranslateString(
999,
'For each trade a 0.2% fee is paid. 0.17% goes to liquidity providers and 0.03% goes to the PancakeSwap treasury.'
)}
/>
</RowFixed>
<Text fontSize="14px">
{realizedLPFee ? `${realizedLPFee?.toSignificant(6)} ${trade.inputAmount.currency.symbol}` : '-'}
</Text>
</RowBetween>
</AutoColumn>
<AutoRow>
<Button
onClick={onConfirm}
disabled={disabledConfirm}
variant={severity > 2 ? 'danger' : 'primary'}
mt="10px"
id="confirm-swap-or-send"
width="100%"
>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Button>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
Example #10
| Source File: SwapModalFooter.tsx From pancake-swap-testnet with MIT License | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm,
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade,
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
const TranslateString = useI18n()
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontSize="14px">Price</Text>
<Text
fontSize="14px"
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '8px',
fontWeight: 500,
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? TranslateString(1210, 'Minimum received')
: TranslateString(220, 'Maximum sold')}
</Text>
<QuestionHelper
text={TranslateString(
202,
'Your transaction will revert if there is a large, unfavorable price movement before it is confirmed.'
)}
/>
</RowFixed>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</Text>
<Text fontSize="14px" marginLeft="4px">
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</Text>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">{TranslateString(226, 'Price Impact')}</Text>
<QuestionHelper
text={TranslateString(224, 'The difference between the market price and your price due to trade size.')}
/>
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">{TranslateString(228, 'Liquidity Provider Fee')}</Text>
<QuestionHelper
text={TranslateString(
999,
'For each trade a 0.2% fee is paid. 0.17% goes to liquidity providers and 0.03% goes to the PancakeSwap treasury.'
)}
/>
</RowFixed>
<Text fontSize="14px">
{realizedLPFee ? `${realizedLPFee?.toSignificant(6)} ${trade.inputAmount.currency.symbol}` : '-'}
</Text>
</RowBetween>
</AutoColumn>
<AutoRow>
<Button
onClick={onConfirm}
disabled={disabledConfirm}
variant={severity > 2 ? 'danger' : 'primary'}
mt="10px"
id="confirm-swap-or-send"
width="100%"
>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Button>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
Example #11
| Source File: SwapModalFooter.tsx From panther-frontend-dex with GNU General Public License v3.0 | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontSize="14px">Price</Text>
<Text
fontSize="14px"
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '8px',
fontWeight: 500
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT ? 'Minimum received' : 'Maximum sold'}
</Text>
<QuestionHelper text="Your transaction will revert if there is a large, unfavorable price movement before it is confirmed." />
</RowFixed>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</Text>
<Text fontSize="14px" marginLeft="4px">
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</Text>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">Price Impact</Text>
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">Liquidity Provider Fee</Text>
<QuestionHelper text="For each trade a 0.2% fee is paid. 0.17% goes to liquidity providers and 0.03% goes to the PantherSwap treasury." />
</RowFixed>
<Text fontSize="14px">
{realizedLPFee ? `${realizedLPFee?.toSignificant(6) } ${ trade.inputAmount.currency.symbol}` : '-'}
</Text>
</RowBetween>
</AutoColumn>
<AutoRow>
<Button
onClick={onConfirm}
disabled={disabledConfirm}
variant={severity > 2 ? 'danger' : 'primary'}
mt="10px"
id="confirm-swap-or-send"
fullWidth
>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Button>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
Example #12
| Source File: SwapModalFooter.tsx From luaswap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const theme = useContext(ThemeContext)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontWeight={400} fontSize={14} color={theme.text2}>
Price
</Text>
<Text
fontWeight={500}
fontSize={14}
color={theme.text1}
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '10px'
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
{trade.tradeType === TradeType.EXACT_INPUT ? 'Minimum received' : 'Maximum sold'}
</TYPE.black>
<QuestionHelper text="Your transaction will revert if there is a large, unfavorable price movement before it is confirmed." />
</RowFixed>
<RowFixed>
<TYPE.black fontSize={14}>
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</TYPE.black>
<TYPE.black fontSize={14} marginLeft={'4px'}>
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</TYPE.black>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black color={theme.text2} fontSize={14} fontWeight={400}>
Price Impact
</TYPE.black>
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
Swap Fee
</TYPE.black>
<QuestionHelper
text={`The swap fee is set at ${SWAP_FEE}, of which ${STAKE_FEE} goes to LuaSafe stakers, and the remaining ${LP_FEE} goes to LPs.`}
/>
</RowFixed>
<TYPE.black fontSize={14}>
{realizedLPFee ? realizedLPFee?.toSignificant(6) + ' ' + trade.inputAmount.currency.symbol : '-'}
</TYPE.black>
</RowBetween>
</AutoColumn>
<AutoRow>
<ButtonError
onClick={onConfirm}
disabled={disabledConfirm}
error={severity > 2}
style={{ margin: '10px 0 0 0' }}
id="confirm-swap-or-send"
>
<Text fontSize={20} fontWeight={500}>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Text>
</ButtonError>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
Example #13
| Source File: SwapModalFooter.tsx From pancakeswap-testnet with GNU General Public License v3.0 | 4 votes |
|
export default function SwapModalFooter({
trade,
onConfirm,
allowedSlippage,
swapErrorMessage,
disabledConfirm,
}: {
trade: Trade
allowedSlippage: number
onConfirm: () => void
swapErrorMessage: string | undefined
disabledConfirm: boolean
}) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
allowedSlippage,
trade,
])
const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
const severity = warningSeverity(priceImpactWithoutFee)
const TranslateString = useI18n()
return (
<>
<AutoColumn gap="0px">
<RowBetween align="center">
<Text fontSize="14px">Price</Text>
<Text
fontSize="14px"
style={{
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'right',
paddingLeft: '8px',
fontWeight: 500,
}}
>
{formatExecutionPrice(trade, showInverted)}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? TranslateString(1210, 'Minimum received')
: TranslateString(220, 'Maximum sold')}
</Text>
<QuestionHelper
text={TranslateString(
202,
'Your transaction will revert if there is a large, unfavorable price movement before it is confirmed.'
)}
/>
</RowFixed>
<RowFixed>
<Text fontSize="14px">
{trade.tradeType === TradeType.EXACT_INPUT
? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
: slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
</Text>
<Text fontSize="14px" marginLeft="4px">
{trade.tradeType === TradeType.EXACT_INPUT
? trade.outputAmount.currency.symbol
: trade.inputAmount.currency.symbol}
</Text>
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">{TranslateString(226, 'Price Impact')}</Text>
<QuestionHelper
text={TranslateString(224, 'The difference between the market price and your price due to trade size.')}
/>
</RowFixed>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</RowBetween>
<RowBetween>
<RowFixed>
<Text fontSize="14px">{TranslateString(228, 'Liquidity Provider Fee')}</Text>
<QuestionHelper
text={TranslateString(
999,
'For each trade a 0.2% fee is paid. 0.17% goes to liquidity providers and 0.03% goes to the PancakeSwap treasury.'
)}
/>
</RowFixed>
<Text fontSize="14px">
{realizedLPFee ? `${realizedLPFee?.toSignificant(6)} ${trade.inputAmount.currency.symbol}` : '-'}
</Text>
</RowBetween>
</AutoColumn>
<AutoRow>
<Button
onClick={onConfirm}
disabled={disabledConfirm}
variant={severity > 2 ? 'danger' : 'primary'}
mt="10px"
id="confirm-swap-or-send"
width="100%"
>
{severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
</Button>
{swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</AutoRow>
</>
)
}
