Merge pull request #24469 from brave/feat-wallet-refresh-quote-button

feat(wallet): Refresh Quote Button

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;
+  }
+`

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<boolean>(false)
+
   // methods
   const onInputChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -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')}
           </ReceiveAndQuoteText>
-          {!isFetchingQuote && timeUntilNextQuote !== undefined && (
-            <Row
-              width='unset'
-              gap='4px'
-            >
-              <ReceiveAndQuoteText
-                textSize='12px'
-                isBold={false}
+          <Row width='unset'>
+            {!isFetchingQuote && timeUntilNextQuote !== undefined && (
+              <Row
+                width='unset'
+                gap='4px'
+                margin='0px 4px 0px 0px'
               >
-                {beforeTag}
-              </ReceiveAndQuoteText>
-              <Text
-                textSize='12px'
-                isBold={true}
-                textColor='primary'
+                <ReceiveAndQuoteText
+                  textSize='12px'
+                  isBold={false}
+                >
+                  {beforeTag}
+                </ReceiveAndQuoteText>
+                <Text
+                  textSize='12px'
+                  isBold={true}
+                  textColor='primary'
+                >
+                  {duringTag}
+                </Text>
+              </Row>
+            )}
+            {timeUntilNextQuote !== undefined && (
+              <RefreshButton
+                onClick={handleRefreshQuote}
+                clicked={refreshClicked}
+                onAnimationEnd={() => setRefreshClicked(false)}
+                disabled={refreshClicked || isFetchingQuote}
               >
-                {duringTag}
-              </Text>
-            </Row>
-          )}
+                <RefreshIcon />
+              </RefreshButton>
+            )}
+          </Row>
         </ReceiveAndQuoteRow>
         <SelectAndInputRow
           width='100%'

components/brave_wallet_ui/page/screens/swap/hooks/useSwap.ts

@@ -1197,6 +1197,7 @@ export const useSwap = () => {
     setSelectingFromOrTo,
     handleOnSetFromAmount,
     handleOnSetToAmount,
+    handleQuoteRefresh,
     onClickFlipSwapTokens,
     setSwapAndSendSelected,
     handleOnSetToAnotherAddress,

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 = () => {
         />
         <ToAsset
           onInputChange={handleOnSetToAmount}
+          onRefreshQuote={handleQuoteRefresh}
           inputValue={toAmount}
           onClickSelectToken={() => setSelectingFromOrTo('to')}
           token={toToken}