@rango-dev/ui 0.29.1-next.9 → 0.30.1-next.0

package/src/components/Flags/Russian.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Russian(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="#0052b4" d="M512 170v172l-256 32L0 342V170l256-32z" />
+        <path fill="#eee" d="M512 0v170H0V0Z" />
+        <path fill="#d80027" d="M512 342v170H0V342Z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Swedish.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Swedish(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="#0052b4"
+          d="M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"
+        />
+        <path
+          fill="#ffda44"
+          d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Thai.tsx

@@ -0,0 +1,32 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Thai(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 0h512v89l-79.2 163.7L512 423v89H0v-89l82.7-169.6L0 89z"
+        />
+        <path
+          fill="#eee"
+          d="M0 89h512v78l-42.6 91.2L512 345v78H0v-78l40-92.5L0 167z"
+        />
+        <path fill="#0052b4" d="M0 167h512v178H0z" />
+      </g>
+    </svg>
+  );
+}

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

@@ -7,6 +7,7 @@ import {
   FlexCenter,
   OutputLoading,
   Separator,
+  SkeletonItemLeftContainer,
   VerticalLine,
 } from './FullExpandedQuote.styles';
 
@@ -24,11 +25,7 @@ export function SkeletonHeader() {
         css={{
           gap: '$5',
         }}>
-        <Skeleton width={74} variant="text" size="large" />
-        <Skeleton width={80} variant="text" size="large" />
-        <Skeleton width={75} variant="text" size="large" />
-        <Skeleton width={52} variant="text" size="large" />
-        <Skeleton width={95} variant="text" size="large" />
+        <Skeleton width={153} variant="text" size="large" />
       </FlexCenter>
     </>
   );
@@ -39,7 +36,7 @@ export function SkeletonOutput() {
     <OutputLoading>
       <ChainToken
         useAsPlaceholder={true}
-        size="medium"
+        size="large"
         chainImage=""
         tokenImage=""
         loading={true}
@@ -50,13 +47,9 @@ export function SkeletonOutput() {
 }
 export function SkeletonItemLeft() {
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'end',
-      }}>
+    <SkeletonItemLeftContainer>
       <Skeleton variant="rounded" width={42} height={49} />
-    </div>
+    </SkeletonItemLeftContainer>
   );
 }
 

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: {
@@ -76,6 +82,7 @@ export const RightSection = styled('div', {
   borderColor: '$info300',
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: 'flex-end',
   gap: '2px',
   [`.${darkTheme} &`]: {
     borderColor: '$secondary600',
@@ -109,8 +116,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 +134,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 +160,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',
@@ -201,8 +208,14 @@ export const Separator = styled('div', {
 });
 
 export const OutputLoading = styled(FlexCenter, {
-  padding: '0 $2',
+  padding: '$10 $2 0',
   height: '85px',
   gap: '$10',
   flexDirection: 'column',
 });
+
+export const SkeletonItemLeftContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  paddingTop: '$25',
+});

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,13 +162,14 @@ 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>
             </div>
             <StyledPriceImpact
-              size="xsmall"
+              size="small"
+              outputColor="$neutral700"
               warningLevel={warningLevel}
               outputUsdValue={props.outputPrice.usdValue}
               realOutputUsdValue={props.outputPrice.realUsdValue}

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.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/PriceImpact/PriceImpact.tsx

@@ -10,6 +10,7 @@ export function PriceImpact(props: PriceImpactProps) {
   const {
     size = 'medium',
     outputUsdValue,
+    outputColor,
     realOutputUsdValue,
     percentageChange,
     warningLevel,
@@ -37,7 +38,10 @@ export function PriceImpact(props: PriceImpactProps) {
               : undefined
           }
           side={tooltipProps?.side}>
-          <OutputUsdValue size={size} variant="body" color="$neutral600">
+          <OutputUsdValue
+            size={size}
+            variant="body"
+            color={outputColor || '$neutral600'}>
             {`~$${outputUsdValue}`}
           </OutputUsdValue>
         </Tooltip>

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -6,6 +6,7 @@ export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
 export type PriceImpactProps = {
   size: TypographyPropTypes['size'];
   outputUsdValue?: string;
+  outputColor?: string;
   realOutputUsdValue?: string;
   error?: string;
   percentageChange?: string | null;