diff --git a/components/brave_wallet_ui/page/screens/composer_ui/to_asset/to_asset.style.ts b/components/brave_wallet_ui/page/screens/composer_ui/to_asset/to_asset.style.ts index ed2359286dd..506d5b1813d 100644 --- a/components/brave_wallet_ui/page/screens/composer_ui/to_asset/to_asset.style.ts +++ b/components/brave_wallet_ui/page/screens/composer_ui/to_asset/to_asset.style.ts @@ -5,9 +5,10 @@ import styled from 'styled-components' import * as leo from '@brave/leo/tokens/css/variables' +import Icon from '@brave/leo/react/icon' // Shared Styles -import { Text, Row } from '../../../../components/shared/style' +import { Text, Row, WalletButton } from '../../../../components/shared/style' export const ReceiveAndQuoteText = styled(Text)` line-height: 18px; @@ -30,3 +31,32 @@ export const SelectAndInputRow = styled(Row)` export const NetworkAndFiatRow = styled(Row)` min-height: 22px; ` + +export const RefreshIcon = styled(Icon).attrs({ + name: 'refresh' +})` + --leo-icon-size: 16px; + color: ${leo.color.icon.default}; +` + +export const RefreshButton = styled(WalletButton)<{ + clicked: boolean +}>` + cursor: pointer; + border: none; + background: none; + padding: 0px; + animation: ${(p) => (p.clicked ? 'spin 1s 1' : 'none')}; + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } + } + &:disabled { + cursor: not-allowed; + opacity: 0.4; + } +` diff --git a/components/brave_wallet_ui/page/screens/composer_ui/to_asset/to_asset.tsx b/components/brave_wallet_ui/page/screens/composer_ui/to_asset/to_asset.tsx index 0dae6e5cbeb..6afffa6cea9 100644 --- a/components/brave_wallet_ui/page/screens/composer_ui/to_asset/to_asset.tsx +++ b/components/brave_wallet_ui/page/screens/composer_ui/to_asset/to_asset.tsx @@ -26,6 +26,7 @@ import { // Types import { BraveWallet, SendPageTabHashes } from '../../../../constants/types' +import { SwapParamsOverrides } from '../../swap/constants/types' // Components import { SelectButton } from '../select_button/select_button' @@ -39,7 +40,9 @@ import { ReceiveAndQuoteText, NetworkAndFiatRow, ReceiveAndQuoteRow, - SelectAndInputRow + SelectAndInputRow, + RefreshIcon, + RefreshButton } from './to_asset.style' import { AmountInput, ToSectionWrapper } from '../shared_composer.style' import { Column, Row, Text } from '../../../../components/shared/style' @@ -60,6 +63,7 @@ const millisecondToString = (milliseconds: number) => { interface Props { onClickSelectToken: () => void onInputChange: (value: string) => void + onRefreshQuote: (overrides: SwapParamsOverrides) => void inputValue: string inputDisabled: boolean buttonDisabled?: boolean @@ -76,6 +80,7 @@ export const ToAsset = (props: Props) => { const { token, onClickSelectToken, + onRefreshQuote, onInputChange: onChange, hasInputError, inputDisabled, @@ -101,6 +106,9 @@ export const ToAsset = (props: Props) => { querySubscriptionOptions60s ) + // State + const [refreshClicked, setRefreshClicked] = React.useState(false) + // methods const onInputChange = React.useCallback( (event: React.ChangeEvent) => { @@ -109,6 +117,11 @@ export const ToAsset = (props: Props) => { [onChange] ) + const handleRefreshQuote = React.useCallback(() => { + setRefreshClicked(true) + onRefreshQuote({}) + }, [onRefreshQuote]) + // Memos const fiatValue = React.useMemo(() => { if (!token || selectedSendOption === SendPageTabHashes.nft) { @@ -171,26 +184,39 @@ export const ToAsset = (props: Props) => { > {getLocale('braveWalletReceiveEstimate')} - {!isFetchingQuote && timeUntilNextQuote !== undefined && ( - - + {!isFetchingQuote && timeUntilNextQuote !== undefined && ( + - {beforeTag} - - + {beforeTag} + + + {duringTag} + + + )} + {timeUntilNextQuote !== undefined && ( + setRefreshClicked(false)} + disabled={refreshClicked || isFetchingQuote} > - {duringTag} - - - )} + + + )} + { setSelectingFromOrTo, handleOnSetFromAmount, handleOnSetToAmount, + handleQuoteRefresh, onClickFlipSwapTokens, setSwapAndSendSelected, handleOnSetToAnotherAddress, diff --git a/components/brave_wallet_ui/page/screens/swap/swap.tsx b/components/brave_wallet_ui/page/screens/swap/swap.tsx index cf9e4cab95a..c51f987f01e 100644 --- a/components/brave_wallet_ui/page/screens/swap/swap.tsx +++ b/components/brave_wallet_ui/page/screens/swap/swap.tsx @@ -64,6 +64,7 @@ export const Swap = () => { setSelectingFromOrTo, handleOnSetFromAmount, handleOnSetToAmount, + handleQuoteRefresh, setSelectedGasFeeOption, setSlippageTolerance, onSubmit, @@ -158,6 +159,7 @@ export const Swap = () => { /> setSelectingFromOrTo('to')} token={toToken}