address feedback - phase 3

Author: 0xTxbi

demo/pages/ui/token/[[...params]].tsx

@@ -349,16 +349,6 @@ const TokenWidgetPage: NextPage = () => {
             lockChainId={singleChainMode ? 8453 : undefined}
             singleChainMode={singleChainMode}
             supportedWalletVMs={supportedWalletVMs}
-            sponsoredTokens={[
-              '792703809:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
-              '130:0x078d782b760474a361dda0af3839290b0ef57ad6',
-              '103665049:0xdba34672e30cb065b1f93e3ab55318768fd6fef66c15942c9f7cb846e2f900e7::usdc::USDC',
-              '8453:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
-              '43114:0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e',
-              '137:0x3c499c542cef5e3811e1192ce70d8cc03d5c3359',
-              '42161:0xaf88d065e77c8cc2239327c5edb3a432268e5831',
-              '10:0x0b2c639c533813f4aa9d7837caf62653d097ff85'
-            ]}
             toToken={toToken}
             setToToken={setToToken}
             fromToken={fromToken}

packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx

@@ -884,6 +884,91 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
   )
 }
 
+// Chain Filter Trigger Component
+type ChainFilterTriggerProps = {
+  value: ChainFilterValue
+  open: boolean
+}
+
+const ChainFilterTrigger: FC<ChainFilterTriggerProps> = ({ value, open }) => (
+  <Button
+    aria-label="Chain filter"
+    color="ghost"
+    size="none"
+    css={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
+      height: 40,
+      px: '12px',
+      cursor: 'pointer',
+      backgroundColor: 'dropdown-background',
+      borderRadius: 'dropdown-border-radius',
+      flexShrink: 0
+    }}
+  >
+    {value.id ? (
+      <ChainIcon
+        chainId={value.id}
+        width={20}
+        height={20}
+        css={{ borderRadius: 4, overflow: 'hidden' }}
+      />
+    ) : (
+      <AllChainsLogo style={{ width: 20, height: 20 }} />
+    )}
+    <Box css={{ color: 'gray9' }}>
+      <FontAwesomeIcon
+        icon={faChevronDown}
+        width={12}
+        height={12}
+        style={{
+          transform: open ? 'rotate(180deg)' : 'rotate(0)',
+          transition: 'transform 0.2s'
+        }}
+      />
+    </Box>
+  </Button>
+)
+
+// Chain Search Input Component
+type ChainSearchInputProps = {
+  value: string
+  onChange: (value: string) => void
+}
+
+const ChainSearchInput: FC<ChainSearchInputProps> = ({ value, onChange }) => (
+  <Input
+    placeholder="Search for a chain"
+    icon={
+      <Box css={{ color: 'gray9' }}>
+        <FontAwesomeIcon
+          icon={faMagnifyingGlass}
+          width={16}
+          height={16}
+        />
+      </Box>
+    }
+    containerCss={{
+      width: '100%',
+      height: 40,
+      mb: '2'
+    }}
+    css={{
+      width: '100%',
+      _placeholder_parent: {
+        textOverflow: 'ellipsis'
+      },
+      '--borderColor': 'colors.subtle-border-color',
+      border: '1px solid var(--borderColor)',
+      backgroundColor: 'modal-background'
+    }}
+    value={value}
+    onChange={(e) => onChange((e.target as HTMLInputElement).value)}
+    onKeyDown={(e) => e.stopPropagation()}
+  />
+)
+
 // Compact Chain Filter Component
 type CompactChainFilterProps = {
   options: ChainFilterValue[]
@@ -936,46 +1021,7 @@ const CompactChainFilter: FC<CompactChainFilterProps> = ({
     <Dropdown
       open={open}
       onOpenChange={(open) => setOpen(open)}
-      trigger={
-        <Button
-          aria-label="Chain filter"
-          color="ghost"
-          size="none"
-          css={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '6px',
-            height: 40,
-            px: '12px',
-            cursor: 'pointer',
-            backgroundColor: 'dropdown-background',
-            borderRadius: 'dropdown-border-radius',
-            flexShrink: 0
-          }}
-        >
-          {value.id ? (
-            <ChainIcon
-              chainId={value.id}
-              width={20}
-              height={20}
-              css={{ borderRadius: 4, overflow: 'hidden' }}
-            />
-          ) : (
-            <AllChainsLogo style={{ width: 20, height: 20 }} />
-          )}
-          <Box css={{ color: 'gray9' }}>
-            <FontAwesomeIcon
-              icon={faChevronDown}
-              width={12}
-              height={12}
-              style={{
-                transform: open ? 'rotate(180deg)' : 'rotate(0)',
-                transition: 'transform 0.2s'
-              }}
-            />
-          </Box>
-        </Button>
-      }
+      trigger={<ChainFilterTrigger value={value} open={open} />}
       contentProps={{
         align: 'end',
         avoidCollisions: false,
@@ -988,36 +1034,9 @@ const CompactChainFilter: FC<CompactChainFilterProps> = ({
       }}
     >
       <Flex direction="column" css={{ p: '2' }}>
-        <Input
-          placeholder="Search for a chain"
-          icon={
-            <Box css={{ color: 'gray9' }}>
-              <FontAwesomeIcon
-                icon={faMagnifyingGlass}
-                width={16}
-                height={16}
-              />
-            </Box>
-          }
-          containerCss={{
-            width: '100%',
-            height: 40,
-            mb: '2'
-          }}
-          css={{
-            width: '100%',
-            _placeholder_parent: {
-              textOverflow: 'ellipsis'
-            },
-            '--borderColor': 'colors.subtle-border-color',
-            border: '1px solid var(--borderColor)',
-            backgroundColor: 'modal-background'
-          }}
+        <ChainSearchInput
           value={chainSearchInput}
-          onChange={(e) =>
-            setChainSearchInput((e.target as HTMLInputElement).value)
-          }
-          onKeyDown={(e) => e.stopPropagation()}
+          onChange={setChainSearchInput}
         />
         <Flex
           direction="column"

packages/ui/src/components/widgets/SwapButton.tsx

@@ -10,8 +10,11 @@ type SwapButtonProps = {
   onConnectWallet?: () => void
   onAnalyticEvent?: (eventName: string, data?: any) => void
   onClick: () => void
-  context: 'Swap' | 'Deposit' | 'Withdraw'
-  showHighPriceImpactWarning: boolean
+  context: 'Swap' | 'Deposit' | 'Withdraw' | 'Buy' | 'Sell'
+  showHighPriceImpactWarning?: boolean
+  disableSwapButton?: boolean
+  tokenWidgetMode?: boolean
+  hasValidAmount?: boolean
 } & Pick<
   ChildrenProps,
   | 'quote'
@@ -35,7 +38,10 @@ const SwapButton: FC<SwapButtonProps> = ({
   isValidFromAddress,
   isValidToAddress,
   context,
-  showHighPriceImpactWarning,
+  showHighPriceImpactWarning = false,
+  disableSwapButton = false,
+  tokenWidgetMode = false,
+  hasValidAmount = true,
   onConnectWallet,
   quote,
   address,
@@ -58,39 +64,69 @@ const SwapButton: FC<SwapButtonProps> = ({
       !quote ||
       Number(debouncedInputAmountValue) === 0 ||
       Number(debouncedOutputAmountValue) === 0
+    
+    const isWalletSelectionPrompt =
+      tokenWidgetMode && (ctaCopy.includes('Select') || ctaCopy.includes('Enter'))
+    const isSelectTokenPrompt = tokenWidgetMode && ctaCopy === 'Select a token'
+    
+    const buttonDisabled = tokenWidgetMode
+      ? (disableSwapButton ||
+         isFetchingQuote ||
+         isSelectTokenPrompt ||
+         (!isWalletSelectionPrompt && !hasValidAmount))
+      : (isFetchingQuote ||
+         (isValidToAddress &&
+           (isValidFromAddress || !fromChainWalletVMSupported) &&
+           (invalidAmount ||
+             hasInsufficientBalance ||
+             isInsufficientLiquidityError ||
+             transactionModalOpen ||
+             depositAddressModalOpen ||
+             isSameCurrencySameRecipientSwap ||
+             !recipientWalletSupportsChain ||
+             disableSwapButton)))
+    
+    const buttonLabel = tokenWidgetMode && isFetchingQuote && hasValidAmount
+      ? 'Fetching quote'
+      : ctaCopy
 
     return (
       <Button
-        css={{ justifyContent: 'center' }}
+        css={{
+          justifyContent: 'center',
+          width: tokenWidgetMode ? '100%' : undefined,
+          textTransform: tokenWidgetMode ? 'uppercase' : undefined,
+          fontFamily: tokenWidgetMode ? 'heading' : undefined,
+          fontWeight: tokenWidgetMode ? 700 : undefined,
+          fontStyle: tokenWidgetMode ? 'var(--relay-fonts-button-cta-font-style, italic)' : undefined
+        }}
         color={showHighPriceImpactWarning ? 'error' : 'primary'}
         aria-label={context}
         cta={true}
-        disabled={
-          isFetchingQuote ||
-          (isValidToAddress &&
-            (isValidFromAddress || !fromChainWalletVMSupported) &&
-            (invalidAmount ||
-              hasInsufficientBalance ||
-              isInsufficientLiquidityError ||
-              transactionModalOpen ||
-              depositAddressModalOpen ||
-              isSameCurrencySameRecipientSwap ||
-              !recipientWalletSupportsChain))
-        }
-        data-testid="swap-button"
+        disabled={buttonDisabled}
+        data-testid={tokenWidgetMode ? "token-action-button" : "swap-button"}
         onClick={() => {
-          onClick()
+          if (!buttonDisabled) {
+            onClick()
+          }
         }}
       >
-        {ctaCopy}
+        {buttonLabel}
       </Button>
     )
   }
 
   return (
     <Button
       cta={true}
-      css={{ justifyContent: 'center' }}
+      css={{
+        justifyContent: 'center',
+        width: tokenWidgetMode ? '100%' : undefined,
+        textTransform: tokenWidgetMode ? 'uppercase' : undefined,
+        fontFamily: tokenWidgetMode ? 'heading' : undefined,
+        fontWeight: tokenWidgetMode ? 700 : undefined,
+        fontStyle: tokenWidgetMode ? 'var(--relay-fonts-button-cta-font-style, italic)' : undefined
+      }}
       aria-label="Connect wallet"
       onClick={() => {
         if (!onConnectWallet) {
@@ -102,7 +138,7 @@ const SwapButton: FC<SwapButtonProps> = ({
           context
         })
       }}
-      data-testid="widget-connect-wallet-button"
+      data-testid={tokenWidgetMode ? "token-widget-connect-wallet-button" : "widget-connect-wallet-button"}
     >
       Connect Wallet
     </Button>

packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx

@@ -18,7 +18,7 @@ import type { TradeType, ChildrenProps } from './widget/TokenWidgetRenderer.js'
 import type { Token, LinkedWallet } from '../../../types/index.js'
 import type { RelayChain } from '@relayprotocol/relay-sdk'
 import { isDeadAddress, tronDeadAddress } from '@relayprotocol/relay-sdk'
-import TokenActionButton from './TokenActionButton.js'
+import SwapButton from '../SwapButton.js'
 import { PaymentMethodTrigger } from '../../common/TokenSelector/triggers/PaymentMethodTrigger.js'
 import AmountSectionHeader from './AmountSectionHeader.js'
 import AmountModeToggle from './AmountModeToggle.js'
@@ -255,23 +255,9 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
   const currencyInAmountUsd = quote?.details?.currencyIn?.amountUsd
   const currencyInAmountFormatted = quote?.details?.currencyIn?.amountFormatted
 
-  // Only show skeleton on initial load, not on subsequent fetches
   const isLoadingPayWith =
     hasValidOutputAmount && isFetchingQuote && fromToken && !currencyInAmountUsd
 
-  const disableActionButton =
-    isFetchingQuote ||
-    (isValidToAddress &&
-      (isValidFromAddress || !fromChainWalletVMSupported) &&
-      (invalidAmount ||
-        hasInsufficientBalance ||
-        isInsufficientLiquidityError ||
-        transactionModalOpen ||
-        depositAddressModalOpen ||
-        isSameCurrencySameRecipientSwap ||
-        !recipientWalletSupportsChain ||
-        disableSwapButton))
-
   return (
     <TabsContent value="buy">
       <SectionContainer
@@ -590,20 +576,36 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
         </Flex>
 
         <Flex css={{ width: '100%' }}>
-          <TokenActionButton
+          <SwapButton
+            context="Buy"
+            transactionModalOpen={transactionModalOpen}
+            depositAddressModalOpen={depositAddressModalOpen}
+            showHighPriceImpactWarning={showHighPriceImpactWarning}
+            disableSwapButton={disableSwapButton}
+            tokenWidgetMode={true}
+            hasValidAmount={!invalidAmount}
+            quote={quote}
+            address={address}
+            hasInsufficientBalance={hasInsufficientBalance}
+            isInsufficientLiquidityError={isInsufficientLiquidityError}
+            debouncedInputAmountValue={debouncedInputAmountValue}
+            debouncedOutputAmountValue={debouncedOutputAmountValue}
+            isSameCurrencySameRecipientSwap={isSameCurrencySameRecipientSwap}
+            ctaCopy={displayCta}
+            isValidFromAddress={isValidFromAddress}
+            isValidToAddress={isValidToAddress}
+            fromChainWalletVMSupported={fromChainWalletVMSupported}
+            recipientWalletSupportsChain={recipientWalletSupportsChain}
+            isFetchingQuote={isFetchingQuote}
             onClick={() => {
               onAnalyticEvent?.('TOKEN_BUY_CLICKED', {
                 token: toToken,
                 amount: amountOutputValue
               })
               onPrimaryAction()
             }}
-            ctaCopy={displayCta}
-            disabled={disableActionButton}
-            isFetchingQuote={isFetchingQuote}
-            hasValidAmount={!invalidAmount}
             onConnectWallet={onConnectWallet}
-            address={address}
+            onAnalyticEvent={onAnalyticEvent}
           />
         </Flex>