@rango-dev/ui 0.29.1-next.8 → 0.30.0

package/src/components/Flags/Turkish.tsx

@@ -0,0 +1,28 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Turkish(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#d80027" d="M0 0h512v512H0z" />
+        <g fill="#eee">
+          <path d="m245.5 209.2 21 29 34-11.1-21 29 21 28.9-34-11.1-21 29V267l-34-11.1 34-11z" />
+          <path d="M188.2 328.3a72.3 72.3 0 1 1 34.4-136 89 89 0 1 0 0 127.3 72 72 0 0 1-34.4 8.7z" />
+        </g>
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Ukrainian.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Ukrainian(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#ffda44" d="m0 256 258-39.4L512 256v256H0z" />
+        <path fill="#338af3" d="M0 0h512v256H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Vietnamese.tsx

@@ -0,0 +1,28 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Vietnamese(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#d80027" d="M0 0h512v512H0z" />
+        <path
+          fill="#ffda44"
+          d="m256 133.6 27.6 85H373L300.7 271l27.6 85-72.3-52.5-72.3 52.6 27.6-85-72.3-52.6h89.4z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/index.ts

@@ -1,9 +1,49 @@
+import Bengali from './Bengali';
+import Chinese from './Chinese';
 import English from './English';
+import Finland from './Finland';
 import French from './French';
+import German from './German';
+import Greece from './Greece';
+import Hindi from './Hindi';
+import Indonesian from './Indonesian';
+import Italian from './Italian';
 import Japanese from './Japanese';
+import Malay from './Malay';
+import Netherlands from './Netherlands';
+import Poland from './Poland';
 import Portuguese from './Portuguese';
+import Russian from './Russian';
 import Spanish from './Spanish';
+import Swedish from './Swedish';
+import Thai from './Thai';
+import Turkish from './Turkish';
+import Ukrainian from './Ukrainian';
+import Vietnamese from './Vietnamese';
 
 export type { FlagPropTypes } from './Flags.types';
 
-export { English, Spanish, Japanese, French, Portuguese };
+export {
+  English,
+  Spanish,
+  Japanese,
+  French,
+  Portuguese,
+  Hindi,
+  Chinese,
+  Bengali,
+  Russian,
+  Indonesian,
+  German,
+  Malay,
+  Swedish,
+  Thai,
+  Turkish,
+  Ukrainian,
+  Vietnamese,
+  Finland,
+  Netherlands,
+  Greece,
+  Italian,
+  Poland,
+};

package/src/components/FullExpandedQuote/FullExpandedQuote.Skeletons.tsx

@@ -53,7 +53,7 @@ export function SkeletonItemLeft() {
     <div
       style={{
         display: 'flex',
-        alignItems: 'end',
+        alignItems: 'center',
       }}>
       <Skeleton variant="rounded" width={42} height={49} />
     </div>

package/src/components/FullExpandedQuote/FullExpandedQuote.styles.ts

@@ -20,6 +20,12 @@ export const RouteContainer = styled('div', {
   [`.${darkTheme} &`]: {
     backgroundColor: '$neutral500',
   },
+  '&:hover': {
+    backgroundColor: '$neutral300',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+  },
   variants: {
     selected: {
       true: {
@@ -55,7 +61,7 @@ export const TagsContainer = styled('div', {
 
 export const Steps = styled('div', {
   display: 'flex',
-  height: '85px',
+  height: '102px',
 });
 
 export const StepItem = styled('div', {
@@ -109,8 +115,8 @@ export const SwapperContainer = styled(FlexCenter, {
 export const SwapperImage = styled(FlexCenter, {
   borderRadius: '$lg',
   position: 'relative',
-  width: '$18',
-  height: '$18',
+  width: '$24',
+  height: '$24',
   border: '1px solid transparent',
   variants: {
     state: {
@@ -127,10 +133,10 @@ export const SwapperImage = styled(FlexCenter, {
 export const IconHighlight = styled(FlexCenter, {
   borderRadius: '$lg',
   position: 'absolute',
-  width: '$8',
-  height: '$8',
-  bottom: -2,
-  right: -2,
+  width: '$10',
+  height: '$10',
+  bottom: -3,
+  right: -3,
   variants: {
     type: {
       warning: {
@@ -153,12 +159,12 @@ export const IconHighlight = styled(FlexCenter, {
 
 export const OutputSection = styled(FlexCenter, {
   flexDirection: 'column',
-  paddingLeft: '$4',
+  paddingLeft: '$8',
 });
 
 export const VerticalLine = styled('div', {
   display: 'flex',
-  width: '50%',
+  width: 'calc(50% + 1px)',
   borderRight: '1px dashed',
   height: '$10',
   borderColor: '$info300',

package/src/components/FullExpandedQuote/FullExpandedQuote.tsx

@@ -45,7 +45,8 @@ export function FullExpandedQuote(props: PropTypes) {
     warningLevel,
     tooltipContainer,
     onClick,
-    selected,
+    feeWarning,
+    selected = false,
   } = props;
 
   const steps: DataLoadedProps['steps'] = loading
@@ -64,6 +65,7 @@ export function FullExpandedQuote(props: PropTypes) {
               fee={props.fee}
               time={props.time}
               steps={numberOfSteps}
+              feeWarning={feeWarning}
             />
             <TagsContainer>
               {props.tags.map((tag) => (
@@ -85,7 +87,7 @@ export function FullExpandedQuote(props: PropTypes) {
               ) : (
                 <LeftSection>
                   <ChainToken
-                    size="small"
+                    size="xmedium"
                     chainImage={step.from.chain.image}
                     tokenImage={step.from.token.image}
                   />
@@ -116,20 +118,21 @@ export function FullExpandedQuote(props: PropTypes) {
                     <SwapperContainer>
                       <SwapperImage state={step.state}>
                         <Image
-                          size={15}
+                          size={22}
                           type="circular"
                           src={step.swapper.image}
                         />
                         {step.state && (
                           <IconHighlight type={step.state}>
                             {step.state === 'error' ? (
-                              <ErrorIcon size={6} color="error" />
+                              <ErrorIcon size={8} color="error" />
                             ) : (
-                              <WarningIcon size={6} color="warning" />
+                              <WarningIcon size={8} color="warning" />
                             )}
                           </IconHighlight>
                         )}
                       </SwapperImage>
+                      <Divider size={2} />
                       <Typography size="xsmall" variant="body" align="center">
                         {step.swapper.displayName}
                       </Typography>
@@ -149,6 +152,7 @@ export function FullExpandedQuote(props: PropTypes) {
               tokenImage={steps[numberOfSteps - 1].to.token.image}
               size="medium"
             />
+            <Divider size={4} />
             <div>
               <Tooltip
                 content={props.outputPrice.realValue}
@@ -158,7 +162,7 @@ export function FullExpandedQuote(props: PropTypes) {
                   {props.outputPrice.value}
                 </Typography>
                 <Divider size={4} direction="horizontal" />
-                <Typography size="large" variant="body">
+                <Typography size="xmedium" variant="title">
                   {steps[numberOfSteps - 1].to.token.displayName}
                 </Typography>
               </Tooltip>

package/src/components/FullExpandedQuote/FullExpandedQuote.types.ts

@@ -10,6 +10,7 @@ type BaseProps = {
   tooltipContainer?: HTMLElement;
   onClick?: () => void;
   selected?: boolean;
+  feeWarning?: boolean;
 };
 
 export type DataLoadedProps = {

package/src/components/Header/Header.styles.ts

@@ -16,7 +16,7 @@ export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  padding: '$15 $20',
+  padding: '$20 $20 $15 $20',
   $$color: '$colors$neutral100',
   [`.${darkTheme} &`]: {
     $$color: '$colors$neutral300',

package/src/components/I18nManager/I18nManager.tsx

@@ -11,11 +11,21 @@ import React, { useEffect, useReducer } from 'react';
  *  "translations/*": ["../../translations/*"]
  *}
  */
+import { messages as deMessages } from '../../../../../translations/de';
+import { messages as elMessages } from '../../../../../translations/el';
 import { messages as enMessages } from '../../../../../translations/en';
 import { messages as esMessages } from '../../../../../translations/es';
+import { messages as fiMessages } from '../../../../../translations/fi';
 import { messages as frMessages } from '../../../../../translations/fr';
+import { messages as itMessages } from '../../../../../translations/it';
 import { messages as jaMessages } from '../../../../../translations/ja';
+import { messages as nlMessages } from '../../../../../translations/nl';
+import { messages as plMessages } from '../../../../../translations/pl';
 import { messages as ptMessages } from '../../../../../translations/pt';
+import { messages as ruMessages } from '../../../../../translations/ru';
+import { messages as svMessages } from '../../../../../translations/sv';
+import { messages as ukMessages } from '../../../../../translations/uk';
+import { messages as zhMessages } from '../../../../../translations/zh';
 
 const messages = {
   en: enMessages,
@@ -23,6 +33,16 @@ const messages = {
   ja: jaMessages,
   fr: frMessages,
   pt: ptMessages,
+  zh: zhMessages,
+  ru: ruMessages,
+  de: deMessages,
+  uk: ukMessages,
+  sv: svMessages,
+  fi: fiMessages,
+  nl: nlMessages,
+  el: elMessages,
+  it: itMessages,
+  pl: plMessages,
 };
 
 i18n.load(messages);

package/src/components/ListItem/ListItem.styles.ts

@@ -44,6 +44,7 @@ export const BaseListItem = styled('li', {
     alignItems: 'center',
     paddingLeft: '$10',
     overflow: 'hidden',
+    flexShrink: 0,
   },
   variants: {
     hasDivider: {

package/src/components/ListItem/ListItem.types.ts

@@ -5,5 +5,7 @@ export type ListItemProps = {
   end?: React.ReactNode;
   as?: 'div' | 'li';
   onClick?: () => void;
+  onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
   hasDivider?: boolean;
+  tabIndex?: number;
 };

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -1,26 +1,10 @@
 import { darkTheme, styled } from '../../theme';
+import { ListItem } from '../ListItem/ListItem';
 
-export const BaseListItemButton = styled('button', {
+export const BaseListItemButton = styled(ListItem, {
   transition: 'all 0.35s',
-  border: 0,
-  width: '100%',
-  backgroundColor: 'transparent',
-  fontFamily: 'inherit',
-  padding: 'unset',
-  '&:focus-visible': {
-    borderRadius: '$xs',
-
-    outline: 0,
-    $$color: '$colors$info100',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$info700',
-    },
-    backgroundColor: '$$color',
-  },
   '&:hover': {
     $$color: '$colors$info100',
-    borderRadius: '$xs',
-
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
@@ -30,19 +14,19 @@ export const BaseListItemButton = styled('button', {
   '&:active': {
     transform: 'scale(0.99)',
   },
-  variants: {
-    hasDivider: {
-      true: {
-        borderBottom: '1px solid',
-        $$color: '$colors$neutral300',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$neutral400',
-        },
-        borderColor: '$$color',
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0,
-      },
+
+  '&:focus-visible': {
+    borderRadius: '$xs',
+
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
     },
+    backgroundColor: '$$color',
+  },
+
+  variants: {
     selected: {
       true: { outline: '1px solid $secondary500' },
       false: { outline: 0 },

package/src/components/ListItemButton/ListItemButton.tsx

@@ -2,25 +2,27 @@ import type { ListItemButtonProps } from './ListItemButton.types';
 
 import React from 'react';
 
-import { ListItem } from '../ListItem/ListItem';
-
 import { BaseListItemButton } from './ListItemButton.styles';
 
 function ListItemButton(props: ListItemButtonProps) {
-  const { onClick, id, style, hasDivider, selected, ...restProps } = props;
+  const { onClick, id, selected, ...restProps } = props;
   const onClickWithKey = () => {
     if (onClick) {
       onClick(id);
     }
   };
+
   return (
     <BaseListItemButton
-      hasDivider={hasDivider}
-      selected={selected}
       onClick={onClickWithKey}
-      style={style}>
-      <ListItem {...restProps} />
-    </BaseListItemButton>
+      aria-label="button"
+      selected={selected}
+      onKeyUp={(e: { key: string }) => {
+        e.key === 'Enter' && onClickWithKey();
+      }}
+      tabIndex={0}
+      {...restProps}
+    />
   );
 }
 

package/src/components/ListItemButton/ListItemButton.types.ts

@@ -5,6 +5,5 @@ export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
   id: string;
   onClick: (id: string) => void;
   style?: CSSProperties;
-  hasDivider?: boolean;
   selected?: boolean;
 };

package/src/components/Popover/Popover.styles.ts

@@ -1,15 +1,21 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const PopoverContainer = styled(RadixPopover.Content, {
   borderRadius: '$sm',
   filter: 'drop-shadow(0px 5px 20px rgba(130, 130, 130, 0.20))',
   backgroundColor: '$neutral100',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
 });
 
 export const PopoverArrow = styled(RadixPopover.Arrow, {
   fill: '$neutral100',
+  [`.${darkTheme} &`]: {
+    fill: '$neutral300',
+  },
   width: '$16',
   height: '$8',
 });

package/src/components/Select/Select.tsx

@@ -8,10 +8,10 @@ import { Typography } from '../Typography';
 
 import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
 
-export function SelectComponent(props: PropTypes) {
+export function SelectComponent<T extends string>(props: PropTypes<T>) {
   const [open, setOpen] = useState(false);
   const selectRef = useRef<HTMLDivElement>(null);
-  const { options, value, container, handleItemClick } = props;
+  const { options, value, container, handleItemClick, variant } = props;
   const handleToggle = () => {
     setOpen((prev) => !prev);
   };
@@ -29,17 +29,20 @@ export function SelectComponent(props: PropTypes) {
     };
   }, []);
 
+  const selectedLabel = options.find((option) => option.value === value)?.label;
+
   return (
     <div ref={selectRef}>
-      <Select.Root value={value?.value} open={open}>
+      <Select.Root value={value} open={open}>
         <SelectTrigger
+          variant={variant}
           onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
           onClick={handleToggle}
           open={open}
-          aria-label={value?.label}>
+          aria-label={selectedLabel}>
           <Select.Value>
             <Typography variant="body" size="small">
-              {value?.label}
+              {selectedLabel}
             </Typography>
           </Select.Value>
 
@@ -63,11 +66,11 @@ export function SelectComponent(props: PropTypes) {
                     key={option.value}
                     value={option.value}>
                     <Select.ItemText>
-                      <Typography variant="body" size="small">
+                      <Typography variant="body" size="small" className="_text">
                         {option.label}
                       </Typography>
                     </Select.ItemText>
-                    {option.value === value?.value && (
+                    {option.value === value && (
                       <DoneIcon size={14} color="secondary" />
                     )}
                   </SelectItem>

package/src/components/Select/Select.types.ts

@@ -1,10 +1,14 @@
-type Item = {
-  value: string;
+type Item<T> = {
+  value: T;
   label: string;
 };
-export type PropTypes = {
-  options: Item[];
-  handleItemClick?: (item: Item) => void;
-  value: Item;
+
+type Variant = 'filled' | 'outlined';
+
+export type PropTypes<T> = {
+  options: Item<T>[];
+  handleItemClick?: (item: Item<T>) => void;
+  value: string;
   container?: HTMLElement;
+  variant: Variant;
 };

package/src/components/Select/select.styles.ts

@@ -9,22 +9,9 @@ export const SelectTrigger = styled(Select.Trigger, {
   justifyContent: 'space-between',
   alignItems: 'center',
   cursor: 'pointer',
-  padding: '$5 $10',
-  border: 0,
   outline: 0,
   whiteSpace: 'nowrap',
-  borderRadius: '$sm',
-  backgroundColor: '$neutral300',
-  [`.${darkTheme} &`]: {
-    backgroundColor: '$neutral400',
-  },
   width: '100%',
-  '&:hover': {
-    backgroundColor: '$info100',
-    [`.${darkTheme} &`]: {
-      backgroundColor: '$neutral',
-    },
-  },
   '& svg': {
     transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
   },
@@ -44,6 +31,35 @@ export const SelectTrigger = styled(Select.Trigger, {
         },
       },
     },
+    variant: {
+      filled: {
+        border: 0,
+        borderRadius: '$sm',
+        padding: '$5 $10',
+        backgroundColor: '$neutral300',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$neutral400',
+        },
+        '&:hover': {
+          backgroundColor: '$info100',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral',
+          },
+        },
+      },
+      outlined: {
+        backgroundColor: 'transparent',
+        padding: '$10',
+        border: '1px solid $neutral300',
+        borderRadius: '$xm',
+        '&:hover': {
+          borderColor: '$info300',
+          '& svg': {
+            color: '$secondary500',
+          },
+        },
+      },
+    },
   },
 });
 
@@ -69,8 +85,12 @@ export const SelectItem = styled(Select.Item, {
 
   '&:hover': {
     backgroundColor: '$info100',
+    '& ._text': {
+      color: '$secondary500',
+    },
     [`.${darkTheme} &`]: {
       backgroundColor: '$neutral',
+      color: '$secondary500',
     },
   },
 });

package/src/components/StepDetails/StepDetails.styles.ts

@@ -69,7 +69,7 @@ export const Alerts = styled('div', {
 });
 
 export const DashedLine = styled('div', {
-  borderLeft: '1px dashed black',
+  borderLeft: '1px dashed $foreground',
   minHeight: '64px',
   margin: '0 11.5px',
   alignSelf: 'stretch',

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,6 +1,6 @@
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 import { Typography } from '../Typography';
 
 export const TooltipContent = styled(RadixTooltip.Content, {
@@ -17,9 +17,11 @@ export const TooltipContent = styled(RadixTooltip.Content, {
 export const TooltipTypography = styled(Typography, {
   borderRadius: '$md',
   padding: '$5 $10',
-  boxShadow:
-    'inset 0 0 0.5px 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.3px 0.4px rgba(0, 0, 0, 0.02), 0.9px 1.5px rgba(0, 0, 0, 0.045), 0 3.5px 6px rgba(0, 0, 0, 0.09)',
-  backgroundColor: '$neutral100',
+  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
+  backgroundColor: '$neutral200',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral500',
+  },
 });
 
 export const TriggerContent = styled('div', {

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -45,6 +45,12 @@ export const MaxButton = styled(Button, {
     $$color: '$colors$secondary800',
   },
   backgroundColor: '$$color',
+  '& ._typography': {
+    color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      color: '$colors$secondary400',
+    },
+  },
 });
 
 export const ValueTypography = styled('div', {