Rui/fee component

src/assets/locales/en/translation.json

@@ -159,6 +159,9 @@
   "dismiss": "Dismiss",
   "insufficient_token_balance": "Insufficient {{token}} balance",
   "amount": "Amount",
+  "select_token": "Select Token",
+  "fee_token": "Fee token",
+  "fx_fees": "Tx fees",
   "redeem_page": {
     "maximum_in_single_request": "Max redeemable in single request",
     "redeem": "Redeem",

src/component-library/Select/Select.stories.tsx

@@ -6,7 +6,7 @@ import { Flex } from '../Flex';
 import { Select, SelectProps } from './Select';
 import { SelectTrigger, SelectTriggerProps } from './SelectTrigger';
 
-const SelectTemplate: Story<SelectProps<any>> = (args) => {
+const SelectTemplate: Story<SelectProps<'modal', any>> = (args) => {
   return (
     <Select {...args}>
       <Item textValue='BTC' key='BTC'>

src/component-library/Select/Select.tsx

@@ -12,35 +12,42 @@ import { Sizes } from '../utils/prop-types';
 import { SelectModal } from './SelectModal';
 import { SelectTrigger } from './SelectTrigger';
 
+type SelectType = 'listbox' | 'modal';
+
 type SelectObject = Record<string, unknown>;
 
 // TODO: listbox to be implemented
-type Props<T extends SelectObject> = {
-  type?: 'listbox' | 'modal';
+type Props<F extends SelectType = 'listbox', T = SelectObject> = {
+  type?: F;
   open?: boolean;
   loading?: boolean;
   size?: Sizes;
   // MEMO: Allows a custom select trigger (TokenInput select)
   asSelectTrigger?: any;
   renderValue?: (item: Node<T>) => ReactNode;
   placeholder?: ReactNode;
-  modalTitle?: ReactNode;
+  modalTitle?: F extends 'modal' ? ReactNode : never;
 };
 
-type InheritAttrs<T extends SelectObject = any> = Omit<
+type InheritAttrs<F extends SelectType = 'listbox', T = SelectObject> = Omit<
   CollectionBase<T> & FieldProps & AriaSelectProps<T>,
-  keyof Props<T> | 'isDisabled' | 'isLoading' | 'isOpen' | 'isRequired' | 'selectedKey' | 'defaultSelectedKey'
+  keyof Props<F, T> | 'isDisabled' | 'isLoading' | 'isOpen' | 'isRequired' | 'selectedKey' | 'defaultSelectedKey'
 >;
 
-type NativeAttrs<T extends SelectObject> = Omit<React.InputHTMLAttributes<Element>, keyof Props<T>>;
+type NativeAttrs<F extends SelectType = 'listbox', T = SelectObject> = Omit<
+  React.InputHTMLAttributes<Element>,
+  keyof Props<F, T>
+>;
 
-type SelectProps<T extends SelectObject> = Props<T> & NativeAttrs<T> & InheritAttrs<T>;
+type SelectProps<F extends SelectType = 'listbox', T = SelectObject> = Props<F, T> &
+  NativeAttrs<F, T> &
+  InheritAttrs<F, T>;
 
-const Select = <T extends SelectObject>(
+const Select = <F extends SelectType = 'listbox', T extends SelectObject = SelectObject>(
   {
     value,
     defaultValue,
-    type = 'listbox',
+    type = 'listbox' as F,
     name,
     disabled,
     loading,
@@ -57,7 +64,7 @@ const Select = <T extends SelectObject>(
     renderValue = (item) => item.rendered,
     items,
     ...props
-  }: SelectProps<T>,
+  }: SelectProps<F, T>,
   ref: ForwardedRef<HTMLInputElement>
 ): JSX.Element => {
   const inputRef = useDOMRef(ref);
@@ -145,8 +152,8 @@ const Select = <T extends SelectObject>(
   );
 };
 
-const _Select = forwardRef(Select) as <T extends SelectObject>(
-  props: SelectProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> }
+const _Select = forwardRef(Select) as <F extends SelectType = 'listbox', T extends SelectObject = SelectObject>(
+  props: SelectProps<F, T> & { ref?: React.ForwardedRef<HTMLInputElement> }
 ) => ReturnType<typeof Select>;
 
 Select.displayName = 'Select';

src/component-library/TokenInput/TokenListItem.tsx

@@ -0,0 +1,30 @@
+import { CoinIcon } from '../CoinIcon';
+import { Flex } from '../Flex';
+import { useSelectModalContext } from '../Select/SelectModalContext';
+import { Span } from '../Text';
+import { StyledListItemLabel, StyledListTokenWrapper } from './TokenInput.style';
+import { TokenData } from './TokenSelect';
+
+type TokenListItemProps = TokenData;
+
+const TokenListItem = ({ balance, balanceUSD, value, tickers }: TokenListItemProps): JSX.Element => {
+  const isSelected = useSelectModalContext().selectedItem?.key === value;
+
+  return (
+    <>
+      <StyledListTokenWrapper alignItems='center' gap='spacing2' flex='1'>
+        <CoinIcon size={tickers ? 'lg' : 'md'} ticker={value} tickers={tickers} />
+        <StyledListItemLabel $isSelected={isSelected}>{value}</StyledListItemLabel>
+      </StyledListTokenWrapper>
+      <Flex direction='column' alignItems='flex-end' gap='spacing2' flex='0'>
+        <StyledListItemLabel $isSelected={isSelected}>{balance}</StyledListItemLabel>
+        <Span size='s' color='tertiary'>
+          {balanceUSD}
+        </Span>
+      </Flex>
+    </>
+  );
+};
+
+export { TokenListItem };
+export type { TokenListItemProps };

src/component-library/TokenInput/TokenSelect.tsx

@@ -1,28 +1,9 @@
 import { CoinIcon } from '../CoinIcon';
 import { Flex } from '../Flex';
 import { Item, Select, SelectProps } from '../Select';
-import { useSelectModalContext } from '../Select/SelectModalContext';
 import { Span } from '../Text';
-import { StyledListItemLabel, StyledListTokenWrapper, StyledTicker, StyledTokenSelect } from './TokenInput.style';
-
-const ListItem = ({ data }: { data: TokenData }) => {
-  const isSelected = useSelectModalContext().selectedItem?.key === data.value;
-
-  return (
-    <>
-      <StyledListTokenWrapper alignItems='center' gap='spacing2' flex='1'>
-        <CoinIcon size={data.tickers ? 'lg' : 'md'} ticker={data.value} tickers={data.tickers} />
-        <StyledListItemLabel $isSelected={isSelected}>{data.value}</StyledListItemLabel>
-      </StyledListTokenWrapper>
-      <Flex direction='column' alignItems='flex-end' gap='spacing2' flex='0'>
-        <StyledListItemLabel $isSelected={isSelected}>{data.balance}</StyledListItemLabel>
-        <Span size='s' color='tertiary'>
-          {data.balanceUSD}
-        </Span>
-      </Flex>
-    </>
-  );
-};
+import { StyledTicker, StyledTokenSelect } from './TokenInput.style';
+import { TokenListItem } from './TokenListItem';
 
 const Value = ({ data }: { data: TokenData }) => (
   <Flex alignItems='center' justifyContent='space-evenly' gap='spacing1'>
@@ -38,15 +19,15 @@ type TokenData = {
   balanceUSD: string;
 };
 
-type TokenSelectProps = Omit<SelectProps<TokenData>, 'children' | 'type'>;
+type TokenSelectProps = Omit<SelectProps<'modal', TokenData>, 'children' | 'type'>;
 
 const TokenSelect = ({ label: labelProp, 'aria-label': ariaLabelProp, ...props }: TokenSelectProps): JSX.Element => {
   // it is unlikely that labelProp is not a string, but we need to avoid any accessibility error
   const labelText = (typeof labelProp === 'string' && labelProp) || ariaLabelProp;
   const ariaLabel = labelText && `Choose token for ${labelText} field`;
 
   return (
-    <Select<TokenData>
+    <Select<'modal', TokenData>
       {...props}
       type='modal'
       asSelectTrigger={StyledTokenSelect}
@@ -57,7 +38,7 @@ const TokenSelect = ({ label: labelProp, 'aria-label': ariaLabelProp, ...props }
     >
       {(data: TokenData) => (
         <Item key={data.value} textValue={data.value}>
-          <ListItem data={data} />
+          <TokenListItem {...data} />
         </Item>
       )}
     </Select>

src/component-library/TokenInput/index.tsx

@@ -1,3 +1,5 @@
 export type { TokenInputProps } from './TokenInput';
 export { TokenInput } from './TokenInput';
+export type { TokenListItemProps } from './TokenListItem';
+export { TokenListItem } from './TokenListItem';
 export type { TokenData, TokenSelectProps } from './TokenSelect';

src/component-library/index.tsx

@@ -59,8 +59,8 @@ export type { TextLinkProps } from './TextLink';
 export { TextLink } from './TextLink';
 export type { ComponentLibraryTheme } from './theme';
 export { theme } from './theme';
-export type { TokenData, TokenInputProps, TokenSelectProps } from './TokenInput';
-export { TokenInput } from './TokenInput';
+export type { TokenData, TokenInputProps, TokenListItemProps, TokenSelectProps } from './TokenInput';
+export { TokenInput, TokenListItem } from './TokenInput';
 export type { TokenStackProps } from './TokenStack';
 export { TokenStack } from './TokenStack';
 export type { TooltipProps } from './Tooltip';

src/component-library/theme/theme.ts

@@ -577,8 +577,8 @@ const theme = {
     color: 'var(--color-select-text)',
     size: {
       small: {
-        padding: 'var(--spacing-1)',
-        text: 'var(--text-s)',
+        padding: 'var(--spacing-1) var(--spacing-2)',
+        text: 'var(--text-xs)',
         // TODO: to be determined
         maxHeight: 'calc(var(--spacing-6) - 1px)'
       },

src/components/TransactionDetails/TransactionDetails.style.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { InformationCircle } from '@/assets/icons';
-import { Dl, theme } from '@/component-library';
+import { Dl, DlGroup, Select, SelectProps, theme, TokenData } from '@/component-library';
 
 const StyledDl = styled(Dl)`
   border: ${theme.border.default};
@@ -16,4 +16,26 @@ const StyledInformationCircle = styled(InformationCircle)`
   vertical-align: text-top;
 `;
 
-export { StyledDl, StyledInformationCircle };
+const SelectWrapper = ({ ...props }: SelectProps<'modal', TokenData>) => <Select<'modal', TokenData> {...props} />;
+
+const StyledSelect = styled(SelectWrapper)`
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+// This custom padding helps to keep harmony between normal elements and elements with small select
+const StyledDlGroup = styled(DlGroup)`
+  &:first-of-type {
+    padding-bottom: 0.407rem;
+  }
+
+  &:not(:first-of-type):not(:last-of-type) {
+    padding: 0.407rem 0;
+  }
+
+  &:last-of-type {
+    padding-top: 0.407rem;
+  }
+`;
+
+export { StyledDl, StyledDlGroup, StyledInformationCircle, StyledSelect };

src/components/TransactionDetails/TransactionDetails.tsx

@@ -4,13 +4,8 @@ import { StyledDl } from './TransactionDetails.style';
 
 type TransactionDetailsProps = DlProps;
 
-const TransactionDetails = ({
-  children,
-  direction = 'column',
-  gap = 'spacing3',
-  ...props
-}: TransactionDetailsProps): JSX.Element => (
-  <StyledDl direction={direction} gap={gap} {...props}>
+const TransactionDetails = ({ children, direction = 'column', ...props }: TransactionDetailsProps): JSX.Element => (
+  <StyledDl direction={direction} gap='spacing0' {...props}>
     {children}
   </StyledDl>
 );

src/components/TransactionDetails/TransactionDetailsDt.tsx

@@ -22,7 +22,7 @@ const TransactionDetailsDt = ({
   <Dt color={color} size={size} {...props}>
     {children}
     {tooltipLabel && (
-      <Tooltip label='The bridge fee paid to the vaults, relayers and maintainers of the system'>
+      <Tooltip label={tooltipLabel}>
         <StyledInformationCircle size='s' />
       </Tooltip>
     )}

src/components/TransactionDetails/TransactionDetailsGroup.tsx

@@ -1,12 +1,16 @@
-import { DlGroup, DlGroupProps } from '@/component-library';
+import { DlGroupProps } from '@/component-library';
+
+import { StyledDlGroup } from './TransactionDetails.style';
 
 type TransactionDetailsGroupProps = DlGroupProps;
 
 const TransactionDetailsGroup = ({
   flex = '1',
   justifyContent = 'space-between',
   ...props
-}: TransactionDetailsGroupProps): JSX.Element => <DlGroup flex={flex} justifyContent={justifyContent} {...props} />;
+}: TransactionDetailsGroupProps): JSX.Element => (
+  <StyledDlGroup flex={flex} justifyContent={justifyContent} {...props} />
+);
 
 export { TransactionDetailsGroup };
 export type { TransactionDetailsGroupProps };

src/components/TransactionDetails/TransactionSelectToken.tsx

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Item, SelectProps, Span, TokenData, TokenListItem, Tooltip } from '@/component-library';
+
+import { StyledInformationCircle, StyledSelect } from './TransactionDetails.style';
+
+type Props = {
+  label?: ReactNode;
+  tooltipLabel?: ReactNode;
+};
+
+type InheritAttrs = Omit<SelectProps<'modal', TokenData>, keyof Props | 'children'>;
+
+type TransactionSelectTokenProps = Props & InheritAttrs;
+
+const TransactionSelectToken = ({
+  label: labelProp,
+  tooltipLabel,
+  ...props
+}: TransactionSelectTokenProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  const label = tooltipLabel ? (
+    <Span>
+      {labelProp}
+      {tooltipLabel && (
+        <Tooltip label={tooltipLabel}>
+          <StyledInformationCircle size='s' />
+        </Tooltip>
+      )}
+    </Span>
+  ) : (
+    labelProp
+  );
+
+  return (
+    <StyledSelect
+      type='modal'
+      size='small'
+      modalTitle={t('select_token')}
+      renderValue={(item) => item.value.value}
+      label={label}
+      {...props}
+    >
+      {(data: TokenData) => (
+        <Item key={data.value} textValue={data.value}>
+          <TokenListItem {...data} />
+        </Item>
+      )}
+    </StyledSelect>
+  );
+};
+
+export { TransactionSelectToken };
+export type { TransactionSelectTokenProps };

src/components/TransactionDetails/index.tsx

@@ -6,5 +6,5 @@ export type { TransactionDetailsDtProps } from './TransactionDetailsDt';
 export { TransactionDetailsDt } from './TransactionDetailsDt';
 export type { TransactionDetailsGroupProps } from './TransactionDetailsGroup';
 export { TransactionDetailsGroup } from './TransactionDetailsGroup';
-export type { TransactionFeeProps } from './TransactionFee';
-export { TransactionFee } from './TransactionFee';
+export type { TransactionSelectTokenProps } from './TransactionSelectToken';
+export { TransactionSelectToken } from './TransactionSelectToken';