diff --git a/src/components/SwapForm/SwapActionButton/index.tsx b/src/components/SwapForm/SwapActionButton/index.tsx index 8ac277c2db..8c1aa5f650 100644 --- a/src/components/SwapForm/SwapActionButton/index.tsx +++ b/src/components/SwapForm/SwapActionButton/index.tsx @@ -60,6 +60,7 @@ type Props = { onWrap: (() => Promise) | undefined buildRoute: () => Promise customChainId?: ChainId + setGasUsd?: (val: number) => void } const SwapActionButton: React.FC = ({ @@ -84,6 +85,7 @@ const SwapActionButton: React.FC = ({ onWrap, buildRoute, customChainId, + setGasUsd, }) => { const theme = useTheme() const { changeNetwork } = useChangeNetwork() @@ -92,6 +94,9 @@ const SwapActionButton: React.FC = ({ const [errorWhileSwap, setErrorWhileSwap] = useState('') const noRouteFound = routeSummary && !routeSummary.route + useEffect(() => { + if (routeSummary?.gasUsd) setGasUsd?.(+routeSummary.gasUsd) + }, [routeSummary?.gasUsd, setGasUsd]) // toggle wallet when disconnected const toggleWalletModal = useWalletModalToggle() diff --git a/src/components/SwapForm/TradeSummary.tsx b/src/components/SwapForm/TradeSummary.tsx index 6ad7df402c..48c0cafd9d 100644 --- a/src/components/SwapForm/TradeSummary.tsx +++ b/src/components/SwapForm/TradeSummary.tsx @@ -16,6 +16,7 @@ import { useActiveWeb3React } from 'hooks' import { isSupportKyberDao, useGasRefundTier } from 'hooks/kyberdao' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' +import { usePaymentToken } from 'state/user/hooks' import { ExternalLink, TYPE } from 'theme' import { DetailedRouteSummary } from 'types/route' import { formattedNum } from 'utils' @@ -186,6 +187,8 @@ const TradeSummary: React.FC = ({ routeSummary, slippage }) => { } }, [hasTrade]) + const [paymentToken] = usePaymentToken() + const isHold = paymentToken?.address.toLowerCase() === '0xed4040fD47629e7c8FBB7DA76bb50B3e7695F0f2'.toLowerCase() const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP) return ( @@ -228,7 +231,7 @@ const TradeSummary: React.FC = ({ routeSummary, slippage }) => { - {gasUsd ? formattedNum(gasUsd, true) : '--'} + {gasUsd ? formattedNum(isHold ? +gasUsd * 0.8 : gasUsd, true) : '--'} diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx index c2482c4aee..0d0c102eb6 100644 --- a/src/components/SwapForm/index.tsx +++ b/src/components/SwapForm/index.tsx @@ -85,6 +85,7 @@ export type SwapFormProps = { customChainId?: ChainId omniView?: boolean onOpenGasToken?: () => void + setGasUsd?: (val: number) => void } const SwapForm: React.FC = props => { @@ -107,6 +108,7 @@ const SwapForm: React.FC = props => { customChainId, omniView, onOpenGasToken, + setGasUsd, } = props const { chainId: walletChainId } = useActiveWeb3React() @@ -297,6 +299,7 @@ const SwapForm: React.FC = props => { buildRoute={buildRoute} swapInputError={swapInputError} customChainId={customChainId} + setGasUsd={setGasUsd} /> {!isWrapOrUnwrap && } diff --git a/src/components/swapv2/GasTokenSetting.tsx b/src/components/swapv2/GasTokenSetting.tsx index afa91c986d..6bf3a88474 100644 --- a/src/components/swapv2/GasTokenSetting.tsx +++ b/src/components/swapv2/GasTokenSetting.tsx @@ -10,6 +10,7 @@ import { NativeCurrencies } from 'constants/tokens' import useTheme from 'hooks/useTheme' import { usePaymentToken } from 'state/user/hooks' import { useCurrencyBalances, useNativeBalance } from 'state/wallet/hooks' +import { formattedNum } from 'utils' const tokens = [ new Token(ChainId.ZKSYNC, '0xed4040fd47629e7c8fbb7da76bb50b3e7695f0f2', 18, 'HOLD', 'HOLD'), @@ -18,13 +19,46 @@ const tokens = [ new Token(ChainId.ZKSYNC, '0xbbeb516fb02a01611cbbe0453fe3c580d7281011', 8, 'wBTC', 'wBTC'), ] -export default function GasTokenSetting({ onBack }: { onBack: () => void }) { +export default function GasTokenSetting({ onBack, gasUsd }: { onBack: () => void; gasUsd: number }) { const theme = useTheme() const ethBalance = useNativeBalance() const balances = useCurrencyBalances(tokens) const [paymentToken, setPaymentToken] = usePaymentToken() + const gasIcon = ( + + + + + + + + + ) + return ( <> @@ -49,11 +83,12 @@ export default function GasTokenSetting({ onBack }: { onBack: () => void }) { - + { setPaymentToken(null) @@ -61,6 +96,10 @@ export default function GasTokenSetting({ onBack }: { onBack: () => void }) { }} sx={{ cursor: 'pointer', + background: !paymentToken ? rgba(theme.primary, 0.15) : 'transparent', + '&:hover': { + background: theme.buttonBlack, + }, }} > @@ -72,9 +111,14 @@ export default function GasTokenSetting({ onBack }: { onBack: () => void }) { + + + {gasIcon} + {gasUsd ? formattedNum(gasUsd, true) : '--'} + - + + + + {gasIcon}{' '} + {index === 0 && !!gasUsd && ( + + {formattedNum(gasUsd, true)} + + )}{' '} + {gasUsd ? formattedNum(gasUsd * (index === 0 ? 0.8 : 1), true) : '--'} + ))} diff --git a/src/pages/SwapV3/PopulatedSwapForm.tsx b/src/pages/SwapV3/PopulatedSwapForm.tsx index 7dc23ccfe9..7de27debe0 100644 --- a/src/pages/SwapV3/PopulatedSwapForm.tsx +++ b/src/pages/SwapV3/PopulatedSwapForm.tsx @@ -20,6 +20,7 @@ type Props = { onSelectSuggestedPair: (fromToken: Currency | undefined, toToken: Currency | undefined, amount?: string) => void hidden: boolean onOpenGasToken: () => void + setGasUsd?: (value: number) => void } const PopulatedSwapForm: React.FC = ({ routeSummary, @@ -27,6 +28,7 @@ const PopulatedSwapForm: React.FC = ({ hidden, onSelectSuggestedPair, onOpenGasToken, + setGasUsd, }) => { const currencyIn = useInputCurrency() const currencyOut = useOutputCurrency() @@ -92,6 +94,7 @@ const PopulatedSwapForm: React.FC = ({ onChangeCurrencyIn, onChangeCurrencyOut, onOpenGasToken, + setGasUsd, } return diff --git a/src/pages/SwapV3/index.tsx b/src/pages/SwapV3/index.tsx index c71140ac02..1105d97c17 100644 --- a/src/pages/SwapV3/index.tsx +++ b/src/pages/SwapV3/index.tsx @@ -163,6 +163,8 @@ export default function Swap() { const tradeRouteComposition = useMemo(() => { return getTradeComposition(chainId, routeSummary?.parsedAmountIn, undefined, routeSummary?.route, defaultTokens) }, [chainId, defaultTokens, routeSummary]) + + const [gasUsd, setGasUsd] = useState(0) const swapActionsRef = useRef(null) return ( @@ -186,6 +188,7 @@ export default function Swap() { setRouteSummary={setRouteSummary} hidden={activeTab !== TAB.SWAP} onOpenGasToken={() => setActiveTab(TAB.GAS_TOKEN)} + setGasUsd={setGasUsd} /> )} {activeTab === TAB.INFO && } @@ -213,7 +216,7 @@ export default function Swap() { /> )} {isCrossChainPage && } - {activeTab === TAB.GAS_TOKEN && setActiveTab(TAB.SWAP)} />} + {activeTab === TAB.GAS_TOKEN && setActiveTab(TAB.SWAP)} gasUsd={gasUsd} />} {isCrossChainPage && }