relayprotocol · pedromcunha · Nov 22, 2024 · Nov 22, 2024 · Nov 22, 2024
diff --git a/.changeset/clever-parrots-sip.md b/.changeset/clever-parrots-sip.md
@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Add new theme tokens and section ids
diff --git a/packages/ui/panda.config.ts b/packages/ui/panda.config.ts
@@ -136,7 +136,8 @@ export default defineConfig({
         3: { value: '12px' },
         4: { value: '16px' },
         5: { value: '32px' },
-        6: { value: '64px' }
+        6: { value: '64px' },
+        'widget-card-section-gutter': { value: '6px' }
       },
       fonts: {
         body: { value: 'var(--font-inter), sans-serif' }
@@ -157,6 +158,7 @@ export default defineConfig({
         // Text
         'text-default': { value: { base: '{colors.gray.12}' } },
         'text-subtle': { value: { base: '{colors.gray.11}' } },
+        'text-subtle-secondary': { value: { base: '{colors.gray.11}' } },
         'text-error': { value: { base: '{colors.red.12}' } },
         'text-success': { value: { base: '{colors.green.11}' } },
 
@@ -237,11 +239,18 @@ export default defineConfig({
         'widget-card-border-radius': { value: '12px' },
         'modal-border-radius': { value: { base: '16px' } },
         'input-border-radius': { value: { base: '8px' } },
-        'dropdown-border-radius': { value: { base: '8px' } }
+        'dropdown-border-radius': { value: { base: '8px' } },
+        'widget-swap-currency-button-border-radius': { value: { base: '8px' } }
       },
       borders: {
         'widget-border': { value: { base: '0x solid white' } },
-        'modal-border': { value: { base: '0x solid white' } }
+        'modal-border': { value: { base: '0x solid white' } },
+        'widget-swap-currency-button-border-width': {
+          value: { base: '4px' }
+        },
+        'widget-card-border': {
+          value: { base: '0 solid transparent' }
+        }
       },
       shadows: {
         'widget-box-shadow': {

diff --git a/packages/ui/src/components/common/BalanceDisplay.tsx b/packages/ui/src/components/common/BalanceDisplay.tsx
@@ -47,7 +47,7 @@ export const BalanceDisplay: FC<BalanceDisplayProps> = ({
           ) : (
             <Text
               style="subtitle3"
-              color={hasInsufficientBalance ? 'red' : 'subtle'}
+              color={hasInsufficientBalance ? 'red' : 'subtleSecondary'}
             >
               Balance:{' '}
               {balance !== undefined

diff --git a/packages/ui/src/components/primitives/Box.tsx b/packages/ui/src/components/primitives/Box.tsx
@@ -9,13 +9,11 @@ const BoxCss = cva({})
 
 type BoxCssProps = Parameters<typeof BoxCss>['0']
 
-const Box: FC<{ css?: Styles } & BoxCssProps & PropsWithChildren> = ({
-  css,
-  children,
-  ...props
-}) => {
+const Box: FC<
+  { css?: Styles; id?: string } & BoxCssProps & PropsWithChildren
+> = ({ css, children, id, ...props }) => {
   return (
-    <div className={designCss(BoxCss.raw(props), designCss.raw(css))}>
+    <div className={designCss(BoxCss.raw(props), designCss.raw(css))} id={id}>
       {children}
     </div>
   )

diff --git a/packages/ui/src/components/primitives/Flex.tsx b/packages/ui/src/components/primitives/Flex.tsx
@@ -75,12 +75,14 @@ export const FlexCss = cva({
 type FlexCssProps = Parameters<typeof FlexCss>['0']
 
 const Flex: FC<
-  { css?: Styles; style?: CSSProperties } & FlexCssProps & PropsWithChildren
-> = ({ css, style, children, ...props }) => {
+  { css?: Styles; style?: CSSProperties; id?: string } & FlexCssProps &
+    PropsWithChildren
+> = ({ css, style, children, id, ...props }) => {
   return (
     <div
       className={designCss(FlexCss.raw(props), designCss.raw(css))}
       style={style}
+      id={id}
     >
       {children}
     </div>

diff --git a/packages/ui/src/components/primitives/Text.tsx b/packages/ui/src/components/primitives/Text.tsx
@@ -66,6 +66,9 @@ const TextCss = cva({
       subtle: {
         color: 'text-subtle'
       },
+      subtleSecondary: {
+        color: 'text-subtle-secondary'
+      },
       error: {
         color: 'text-error'
       },

diff --git a/packages/ui/src/components/widgets/FeeBreakdown.tsx b/packages/ui/src/components/widgets/FeeBreakdown.tsx
@@ -54,11 +54,13 @@ const FeeBreakdown: FC<Props> = ({
     if (isFetchingPrice) {
       return (
         <Box
+          id={'fee-breakdown-section'}
           css={{
             borderRadius: 'widget-card-border-radius',
             backgroundColor: 'widget-background',
+            border: 'widget-card-border',
             overflow: 'hidden',
-            mb: '6px'
+            mb: 'widget-card-section-gutter'
           }}
         >
           <FetchingQuoteLoader
@@ -84,9 +86,11 @@ const FeeBreakdown: FC<Props> = ({
       css={{
         borderRadius: 'widget-card-border-radius',
         backgroundColor: 'widget-background',
+        border: 'widget-card-border',
         overflow: 'hidden',
-        mb: '6px'
+        mb: 'widget-card-section-gutter'
       }}
+      id={'fee-breakdown-section'}
     >
       {!isSingleChainLocked ? (
         <>
@@ -108,8 +112,7 @@ const FeeBreakdown: FC<Props> = ({
           flexDirection: 'row',
           gap: '2',
           width: '100%',
-          px: '4',
-          py: '3'
+          p: '3'
         }}
       >
         <button
@@ -146,7 +149,7 @@ const FeeBreakdown: FC<Props> = ({
             <>
               <FontAwesomeIcon icon={faClock} width={16} />
               <Text style="subtitle2">~ {timeEstimate?.formattedTime}</Text>
-              <Box css={{ width: 1, background: 'gray6', height: 20 }} />
+              <Box css={{ color: 'gray6' }}>&#8226;</Box>
             </>
           ) : null}
           <FontAwesomeIcon

diff --git a/packages/ui/src/components/widgets/SwapRouteSelector.tsx b/packages/ui/src/components/widgets/SwapRouteSelector.tsx
@@ -51,10 +51,8 @@ const SwapRouteSelector: FC<Props> = ({
             flexDirection: 'row',
             alignItems: 'center',
             gap: '3',
-            px: '4',
-            py: '3',
+            p: '12',
             borderRadius: 'widget-card-border-radius',
-            border: 'widget-card-border',
 
             '&:disabled': {
               cursor: 'default',

diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -297,6 +297,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                 >
                   <TokenSelectorContainer
                     css={{ backgroundColor: 'widget-background' }}
+                    id={'from-token-section'}
                   >
                     <Flex
                       align="center"
@@ -351,14 +352,18 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                         }}
                       />
                     )}
-                    <Flex align="center" justify="between" css={{ gap: '4' }}>
+                    <Flex
+                      align="center"
+                      justify="between"
+                      css={{ gap: '4', width: '100%' }}
+                    >
                       <AmountInput
                         value={
                           tradeType === 'EXACT_INPUT'
                             ? amountInputValue
                             : amountInputValue
-                            ? formatFixedLength(amountInputValue, 8)
-                            : amountInputValue
+                              ? formatFixedLength(amountInputValue, 8)
+                              : amountInputValue
                         }
                         setValue={(e) => {
                           setAmountInputValue(e)
@@ -417,9 +422,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           isSingleChainLocked
                             ? [lockChainId]
                             : fromToken?.chainId !== undefined &&
-                              fromToken?.chainId === lockChainId
-                            ? [fromToken?.chainId]
-                            : undefined
+                                fromToken?.chainId === lockChainId
+                              ? [fromToken?.chainId]
+                              : undefined
                         }
                         restrictedTokensList={tokens?.filter(
                           (token) => token.chainId === fromToken?.chainId
@@ -457,7 +462,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                     >
                       {price?.details?.currencyIn?.amountUsd &&
                       Number(price.details.currencyIn.amountUsd) > 0 ? (
-                        <Text style="subtitle3" color="subtle">
+                        <Text style="subtitle3" color="subtleSecondary">
                           {formatDollar(
                             Number(price.details.currencyIn.amountUsd)
                           )}
@@ -552,10 +557,14 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           justifyContent: 'center',
                           width: '100%',
                           height: '100%',
+                          '--borderWidth':
+                            'borders.widget-swap-currency-button-border-width',
                           '--borderColor':
                             'colors.widget-swap-currency-button-border-color',
-                          border: '4px solid var(--borderColor)',
-                          zIndex: 10
+                          border: `var(--borderWidth) solid var(--borderColor)`,
+                          zIndex: 10,
+                          borderRadius:
+                            'widget-swap-currency-button-border-radius'
                         }}
                         onClick={() => {
                           if (fromToken || toToken) {
@@ -585,7 +594,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                     )}
                   </Box>
                   <TokenSelectorContainer
-                    css={{ backgroundColor: 'widget-background', mb: '6px' }}
+                    css={{
+                      backgroundColor: 'widget-background',
+                      mb: 'widget-card-section-gutter'
+                    }}
+                    id={'to-token-section'}
                   >
                     <Flex
                       css={{ width: '100%' }}
@@ -672,14 +685,18 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                         }}
                       />
                     )}
-                    <Flex align="center" justify="between" css={{ gap: '4' }}>
+                    <Flex
+                      align="center"
+                      justify="between"
+                      css={{ gap: '4', width: '100%' }}
+                    >
                       <AmountInput
                         value={
                           tradeType === 'EXPECTED_OUTPUT'
                             ? amountOutputValue
                             : amountOutputValue
-                            ? formatFixedLength(amountOutputValue, 8)
-                            : amountOutputValue
+                              ? formatFixedLength(amountOutputValue, 8)
+                              : amountOutputValue
                         }
                         setValue={(e) => {
                           setAmountOutputValue(e)
@@ -765,9 +782,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           isSingleChainLocked
                             ? [lockChainId]
                             : toToken?.chainId !== undefined &&
-                              toToken?.chainId === lockChainId
-                            ? [toToken?.chainId]
-                            : undefined
+                                toToken?.chainId === lockChainId
+                              ? [toToken?.chainId]
+                              : undefined
                         }
                         restrictedTokensList={tokens?.filter(
                           (token) => token.chainId === toToken?.chainId
@@ -782,7 +799,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       {price?.details?.currencyOut?.amountUsd &&
                       Number(price.details.currencyOut.amountUsd) > 0 ? (
                         <Flex align="center" css={{ gap: '1' }}>
-                          <Text style="subtitle3" color="subtle">
+                          <Text style="subtitle3" color="subtleSecondary">
                             {formatDollar(
                               Number(price.details.currencyOut.amountUsd)
                             )}
@@ -849,9 +866,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       css={{
                         borderRadius: 'widget-card-border-radius',
                         backgroundColor: 'widget-background',
+                        border: 'widget-card-border',
                         overflow: 'hidden',
-                        mb: '6px'
+                        mb: 'widget-card-section-gutter'
                       }}
+                      id={'swap-route-selection-section'}
                     >
                       <SwapRouteSelector
                         chain={toChain}
@@ -897,7 +916,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                     relayerFeeProportion={relayerFeeProportion}
                     supportsExternalLiquidity={supportsExternalLiquidity}
                     containerCss={{
-                      mb: '6px'
+                      mb: 'widget-card-section-gutter'
                     }}
                   />
                   {promptSwitchRoute ? (

diff --git a/packages/ui/src/components/widgets/TokenSelectorContainer.tsx b/packages/ui/src/components/widgets/TokenSelectorContainer.tsx
@@ -2,24 +2,24 @@ import { type FC, type PropsWithChildren } from 'react'
 import { Flex } from '../primitives/index.js'
 import { type Styles } from '@reservoir0x/relay-design-system/css'
 
-const TokenSelectorContainer: FC<PropsWithChildren & { css?: Styles }> = ({
-  children,
-  css
-}) => {
+const TokenSelectorContainer: FC<
+  PropsWithChildren & { css?: Styles; id?: string }
+> = ({ children, css, id }) => {
   return (
     <Flex
       align="center"
       justify="between"
+      id={id}
       css={{
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'start',
         backgroundColor: 'widget-card-background',
+        border: 'widget-card-border',
         gap: '3',
         p: '12px 12px',
         borderRadius: 'widget-card-border-radius',
-        border: 'widget-card-border',
         ...css
       }}
     >

diff --git a/packages/ui/src/components/widgets/WidgetErrorWell.tsx b/packages/ui/src/components/widgets/WidgetErrorWell.tsx
@@ -67,6 +67,7 @@ export const WidgetErrorWell: FC<Props> = ({
             mb: '3',
             ...containerCss
           }}
+          id={'widget-error-well-section'}
         >
           <Box css={{ color: 'amber9' }}>
             <FontAwesomeIcon icon={faExclamationCircle} width={16} />
@@ -98,6 +99,7 @@ export const WidgetErrorWell: FC<Props> = ({
             mb: '3',
             ...containerCss
           }}
+          id={'widget-error-well-section'}
         >
           <Box css={{ color: 'red10' }}>
             <FontAwesomeIcon icon={faExclamationCircle} width={16} />
@@ -119,6 +121,7 @@ export const WidgetErrorWell: FC<Props> = ({
             mb: '3',
             ...containerCss
           }}
+          id={'widget-error-well-section'}
         >
           <Box css={{ color: 'red10' }}>
             <FontAwesomeIcon icon={faExclamationCircle} width={16} />
@@ -164,6 +167,7 @@ export const WidgetErrorWell: FC<Props> = ({
             mb: '3',
             ...containerCss
           }}
+          id={'widget-error-well-section'}
         >
           <Box css={{ color: 'amber10' }}>
             <FontAwesomeIcon icon={faExclamationCircle} width={16} />
@@ -189,6 +193,7 @@ export const WidgetErrorWell: FC<Props> = ({
           mb: '3',
           ...containerCss
         }}
+        id={'widget-error-well-section'}
       >
         <Box css={{ color: 'red9' }}>
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
@@ -214,6 +219,7 @@ export const WidgetErrorWell: FC<Props> = ({
           mb: '3',
           ...containerCss
         }}
+        id={'widget-error-well-section'}
       >
         <Box css={{ color: 'amber10' }}>
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />