diff --git a/.changeset/early-comics-roll.md b/.changeset/early-comics-roll.md new file mode 100644 index 000000000..4378ccc2c --- /dev/null +++ b/.changeset/early-comics-roll.md @@ -0,0 +1,5 @@ +--- +'@relayprotocol/relay-kit-ui': patch +--- + +Post-launch fixes for `TokenWidget` diff --git a/packages/ui/src/components/widgets/SwapButton.tsx b/packages/ui/src/components/widgets/SwapButton.tsx index e5e73441e..2eb5d2f7e 100644 --- a/packages/ui/src/components/widgets/SwapButton.tsx +++ b/packages/ui/src/components/widgets/SwapButton.tsx @@ -98,15 +98,9 @@ const SwapButton: FC = ({ 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 = ({ 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={() => { diff --git a/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx b/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx index 1d3e2695e..053f32b8b 100644 --- a/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx +++ b/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx @@ -49,10 +49,21 @@ const TransactionDetailsFooter: FC = ({ {timeEstimate && timeEstimate.time !== 0 ? ( <> - + - {timeLabel} + + {timeLabel} + {showDivider ? ( = ({ ) : null} {hasNetworkCost ? ( - + - {networkCostLabel} + + {networkCostLabel} + ) : null} diff --git a/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx b/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx index 7c5a248cd..f8d6970ce 100644 --- a/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx +++ b/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 = ({ // 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,