Post-launch fixes for TokenWidget (#872)

* fix footer vertical alignement

* sync footer line height

* fix action button font inconsistency

* fix sell tab init balance load

* feat: changeset

Author: 0xTxbi

.changeset/early-comics-roll.md

@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Post-launch fixes for `TokenWidget`

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

@@ -98,15 +98,9 @@ const SwapButton: FC<SwapButtonProps> = ({
         css={{
           justifyContent: 'center',
           width: tokenWidgetMode ? '100%' : undefined,
-          textTransform:
-            tokenWidgetMode && (context === 'Buy' || context === 'Sell')
-              ? 'uppercase'
-              : 'none',
-          fontFamily: tokenWidgetMode ? 'heading' : undefined,
-          fontWeight: tokenWidgetMode ? 700 : undefined,
-          fontStyle: tokenWidgetMode
-            ? 'var(--relay-fonts-button-cta-font-style, italic)'
-            : undefined
+          ...(!tokenWidgetMode && {
+            textTransform: 'none'
+          })
         }}
         color={showHighPriceImpactWarning ? 'error' : 'primary'}
         aria-label={context}
@@ -130,15 +124,9 @@ const SwapButton: FC<SwapButtonProps> = ({
       css={{
         justifyContent: 'center',
         width: tokenWidgetMode ? '100%' : undefined,
-        textTransform:
-          tokenWidgetMode && (context === 'Buy' || context === 'Sell')
-            ? 'uppercase'
-            : 'none',
-        fontFamily: tokenWidgetMode ? 'heading' : undefined,
-        fontWeight: tokenWidgetMode ? 700 : undefined,
-        fontStyle: tokenWidgetMode
-          ? 'var(--relay-fonts-button-cta-font-style, italic)'
-          : undefined
+        ...(!tokenWidgetMode && {
+          textTransform: 'none'
+        })
       }}
       aria-label="Connect wallet"
       onClick={() => {

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

@@ -49,10 +49,21 @@ const TransactionDetailsFooter: FC<TransactionDetailsFooterProps> = ({
       {timeEstimate && timeEstimate.time !== 0 ? (
         <>
           <Flex align="center" css={{ gap: '2' }}>
-            <Box css={{ color: clockColor, width: 14, height: 14 }}>
+            <Box
+              css={{
+                color: clockColor,
+                width: 14,
+                height: 14,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }}
+            >
               <FontAwesomeIcon icon={faClock} />
             </Box>
-            <Text style="subtitle3">{timeLabel}</Text>
+            <Text style="subtitle3" css={{ lineHeight: 'normal' }}>
+              {timeLabel}
+            </Text>
           </Flex>
           {showDivider ? (
             <Flex
@@ -67,10 +78,21 @@ const TransactionDetailsFooter: FC<TransactionDetailsFooterProps> = ({
       ) : null}
       {hasNetworkCost ? (
         <Flex align="center" css={{ gap: '2' }}>
-          <Box css={{ color: 'gray9', width: 14, height: 14 }}>
+          <Box
+            css={{
+              color: 'gray9',
+              width: 14,
+              height: 14,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
             <FontAwesomeIcon icon={faGasPump} />
           </Box>
-          <Text style="subtitle3">{networkCostLabel}</Text>
+          <Text style="subtitle3" css={{ lineHeight: 'normal' }}>
+            {networkCostLabel}
+          </Text>
         </Flex>
       ) : null}
     </Flex>

packages/ui/src/components/widgets/TokenWidget/widget/index.tsx

@@ -1,4 +1,4 @@
-import { Flex, Button, Text } from '../../../primitives/index.js'
+import { Flex, Text } from '../../../primitives/index.js'
 import { TabsRoot, TabsList, TabsTrigger } from '../../../primitives/Tabs.js'
 import {
   useCallback,
@@ -603,6 +603,21 @@ const TokenWidget: FC<TokenWidgetProps> = ({
         // Get public client for the fromChain to estimate gas
         const publicClient = usePublicClient({ chainId: fromChain?.id })
 
+        // Seed fromToken on sell tab if empty but we have a token available
+        useEffect(() => {
+          if (activeTab !== 'sell') return
+          if (fromToken) return
+
+          const candidateFromToken =
+            tabTokenStateRef.current.sell?.fromToken ??
+            tabTokenStateRef.current.buy?.toToken ??
+            toToken
+
+          if (candidateFromToken) {
+            handleSetFromToken(candidateFromToken)
+          }
+        }, [activeTab, fromToken, toToken, handleSetFromToken])
+
         useWalletGuards({
           multiWalletSupportEnabled,
           allowUnsupportedOrigin,