@rango-dev/ui 0.28.2-next.0 → 0.28.2-next.10

package/src/components/Toast/Toast.styles.ts

@@ -1,48 +1,252 @@
-import { darkTheme, keyframes, lightTheme, styled } from '../../theme';
+import { css, darkTheme, lightTheme, styled } from '../../theme';
 import { Typography } from '../Typography';
 
-const toastOpacity = keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 },
+import {
+  HOVER_TRANSITION_DURATION,
+  TOAST_TRANSITION_DURATION,
+} from './Toast.helpers';
+
+export const toastContentStyles = css({
+  transition: `transform ${HOVER_TRANSITION_DURATION}ms ease-in-out`,
+  '&:hover': {
+    transform: 'scale(0.99)',
+  },
 });
 
 export const ToastContentContainer = styled('div', {
+  transition: `transform ${TOAST_TRANSITION_DURATION}ms cubic-bezier(0, 0, 0.75, 1.25)`,
+  cursor: 'pointer',
   variants: {
-    horizontal: {
-      right: {
-        right: 12,
-        animation: `${toastOpacity} .7s`,
+    isActive: {
+      true: {},
+    },
+    isVisible: {
+      true: {},
+    },
+    position: {
+      'right-top': {},
+      'right-bottom': {},
+      'left-top': {},
+      'left-bottom': {},
+      'center-top': {},
+      'center-bottom': {},
+    },
+  },
+  compoundVariants: [
+    {
+      position: 'right-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
       },
-      left: {
-        left: 12,
-        animation: `${toastOpacity} .7s`,
+    },
+    {
+      position: 'right-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateX(100%)',
       },
     },
-  },
+    {
+      position: 'right-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        maxHeight: '0px',
+        transform: 'translateX(100%)',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateY(0)',
+        opacity: 1,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateY(-1000%)',
+        opacity: 0,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        maxHeight: '0px',
+        opacity: 0,
+        transform: 'translateY(-1000%)',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateY(0)',
+        maxHeight: '200px',
+        opacity: 1,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateY(1000%)',
+        maxHeight: '200px',
+        opacity: 0,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateY(1000%)',
+        maxHeight: '0px',
+        opacity: 0,
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+  ],
 });
 
 export const ToastContainer = styled('div', {
+  overflow: 'hidden',
   position: 'absolute',
   zIndex: 9999,
   display: 'flex',
   gap: '$4',
   flexDirection: 'column',
   variants: {
-    horizontal: {
-      right: {
+    position: {
+      'right-top': {
+        right: 12,
+        top: 2,
+      },
+      'right-bottom': {
         right: 12,
+        bottom: 2,
+        flexDirection: 'column-reverse',
       },
-      left: {
+      'left-top': {
         left: 12,
+        top: 2,
       },
-    },
-
-    vertical: {
-      top: {
+      'left-bottom': {
+        left: 12,
+        bottom: 2,
+        flexDirection: 'column-reverse',
+      },
+      'center-top': {
+        left: '50%',
+        transform: 'translateX(-50%)',
         top: 2,
       },
-      bottom: {
+      'center-bottom': {
+        left: '50%',
+        transform: 'translateX(-50%)',
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
     },
   },
@@ -53,36 +257,73 @@ export const AlertBox = styled('div', {
   borderRadius: '$sm',
   width: '292px',
   minHeight: '52px',
-  backgroundColor: '$background',
-  borderRight: '1px solid',
-  [`.${darkTheme} &`]: {
-    backgroundColor: '#070917',
-  },
-  '&:hover': {
-    backgroundColor: '$info100',
-    [`.${darkTheme} &`]: {
-      backgroundColor: '#111733',
-    },
-  },
   variants: {
+    variant: {
+      custom: {
+        backgroundColor: '$background',
+        borderRight: '1px solid',
+        '&:hover': {
+          backgroundColor: '$info100',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral300',
+          },
+        },
+      },
+      standard: {
+        '& ._alert': {
+          padding: '$10',
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+      },
+    },
     type: {
-      error: {
+      error: {},
+      success: {},
+      warning: {},
+      info: {},
+      loading: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'custom',
+      type: 'error',
+
+      css: {
         borderRightColor: '$error500',
       },
-      success: {
+    },
+    {
+      variant: 'custom',
+      type: 'success',
+      css: {
         borderRightColor: '$success500',
       },
-      warning: {
+    },
+    {
+      variant: 'custom',
+      type: 'warning',
+      css: {
         borderRightColor: '$warning500',
       },
-      info: {
+    },
+    {
+      variant: 'custom',
+      type: 'info',
+      css: {
         borderRightColor: '$info500',
       },
-      loading: {
+    },
+    {
+      variant: 'custom',
+      type: 'loading',
+      css: {
         borderRightColor: '$info500',
       },
     },
-  },
+  ],
 });
 
 export const AlertFlexContainer = styled('div', {
@@ -108,6 +349,5 @@ export const StyledTypography = styled(Typography, {
 
 export const ToastStoryContainer = styled('div', {
   display: 'flex',
-  justifyContent: 'center',
   alignItems: 'center',
 });

package/src/components/Toast/Toast.tsx

@@ -1,59 +1,111 @@
 import type { ToastProps } from './Toast.types';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import { CloseIcon } from '../../icons';
+import { Alert } from '../Alert';
 import { IconHighlight } from '../Alert/Alert.styles';
 import AlertIcon from '../Alert/AlertIcon';
 import { Divider } from '../Divider';
+import { IconButton } from '../IconButton';
 
+import { TOAST_HIDE_DELAY, TOAST_UNMOUNT_DELAY } from './Toast.helpers';
 import { useToast } from './Toast.Provider';
 import {
   AlertBox,
   AlertFlexContainer,
   StyledTypography,
   ToastContentContainer,
+  toastContentStyles,
 } from './Toast.styles';
 
-const DEFAULT_HIDE_DURATION = 3_000;
-
 export const Toast = (props: ToastProps) => {
-  const { id, horizontal, autoHideDuration = DEFAULT_HIDE_DURATION } = props;
+  const {
+    id,
+    autoHideDuration,
+    onClose,
+    type,
+    title,
+    position,
+    hasCloseIcon = true,
+    hideOnTap = true,
+    variant = 'standard',
+  } = props;
+  const [isActive, setIsActive] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const { removeToast } = useToast();
   useEffect(() => {
-    const timer = setTimeout(() => {
-      removeToast(id);
-    }, autoHideDuration);
+    let cleanup;
+
+    if (autoHideDuration) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, autoHideDuration);
+
+      cleanup = () => clearTimeout(timer);
+    }
 
-    return () => {
-      clearTimeout(timer);
-    };
+    return cleanup;
   }, [id]);
 
+  const handleClose = () => {
+    setIsActive(false);
+    setTimeout(() => {
+      setIsVisible(false);
+    }, TOAST_HIDE_DELAY);
+    setTimeout(() => {
+      removeToast(id, position);
+      onClose?.();
+    }, TOAST_UNMOUNT_DELAY);
+  };
+
+  useEffect(() => {
+    setIsVisible(true);
+    setTimeout(() => {
+      setIsActive(true);
+    }, 0);
+  }, []);
+
   return (
-    <ToastContentContainer horizontal={horizontal}>
-      {'component' in props ? (
-        props.component
-      ) : (
+    <ToastContentContainer
+      isActive={isActive}
+      position={position}
+      isVisible={isVisible}>
+      <div className={toastContentStyles()}>
         <AlertBox
-          onClick={() => removeToast(id)}
-          type={props.type}
-          style={props.style}>
-          <AlertFlexContainer>
-            <IconHighlight type={props.type} align="center">
-              <AlertIcon type={props.type} />
-            </IconHighlight>
-            <Divider direction="horizontal" size={10} />
-            <StyledTypography
-              variant="body"
-              size="small"
-              color={props.titleColor}
-              hasColor={!!props.titleColor}
-              align="left">
-              {props.title}
-            </StyledTypography>
-          </AlertFlexContainer>
+          onClick={hideOnTap ? handleClose : undefined}
+          variant={variant}
+          type={type}>
+          {variant === 'custom' ? (
+            <AlertFlexContainer>
+              <IconHighlight type={type} align="center">
+                <AlertIcon type={type} />
+              </IconHighlight>
+              <Divider direction="horizontal" size={10} />
+              <StyledTypography variant="body" size="small" align="left">
+                {props.title}
+              </StyledTypography>
+            </AlertFlexContainer>
+          ) : (
+            <Alert
+              title={title}
+              type={type}
+              variant="alarm"
+              titleAlign="left"
+              action={
+                hasCloseIcon ? (
+                  <IconButton
+                    variant="ghost"
+                    size="xsmall"
+                    onClick={handleClose}>
+                    <CloseIcon size={12} />
+                  </IconButton>
+                ) : undefined
+              }
+            />
+          )}
         </AlertBox>
-      )}
+      </div>
     </ToastContentContainer>
   );
 };

package/src/components/Toast/Toast.types.ts

@@ -1,31 +1,33 @@
+import type { ToastContainer } from './Toast.styles';
 import type { Type } from '../Alert/Alert.types';
-import type { CSSProperties } from '@stitches/react';
+import type * as Stitches from '@stitches/react';
+import type { CSSProperties } from 'react';
 
+type BaseProps = Stitches.VariantProps<typeof ToastContainer>;
+export type ToastPosition = Exclude<BaseProps['position'], object>;
 export interface ProviderPropTypes {
   container: HTMLElement;
-  anchorOrigin?: {
-    horizontal: 'left' | 'right';
-    vertical: 'bottom' | 'top';
-  };
-  containerStyle?: CSSProperties;
 }
 
-export type ToastType = { autoHideDuration?: number; id?: number | string } & (
-  | {
-      title: string;
-      type: Type;
-      titleColor?: string;
-      style?: CSSProperties;
-    }
-  | { component: React.ReactNode }
-);
+export type ToastType = {
+  autoHideDuration?: number;
+  id?: number | string;
+  containerStyle?: CSSProperties;
+  onClose?: () => void;
+  position: ToastPosition;
+  title: string;
+  type: Type;
+  style?: CSSProperties;
+  hasCloseIcon?: boolean;
+  hideOnTap?: boolean;
+  variant?: 'custom' | 'standard';
+};
 
 export type ToastProps = ToastType & {
   id: number | string;
-  horizontal: 'left' | 'right';
 };
 
 export type ProviderContext = {
   addToast: (content: ToastType) => void;
-  removeToast: (id: number | string) => void;
+  removeToast: (id: number | string, position: ToastPosition) => void;
 };

package/src/components/Typography/NotSelectableTypography.ts

@@ -0,0 +1,7 @@
+import { styled } from '../../theme';
+
+import { Typography } from './Typography';
+
+export const NotSelectableTypography = styled(Typography, {
+  userSelect: 'none',
+});

package/src/components/Typography/Typography.types.tsx

@@ -4,7 +4,7 @@ import type * as Stitches from '@stitches/react';
 type BaseProps = Stitches.VariantProps<typeof TypographyContainer>;
 type BaseSizes = Exclude<BaseProps['size'], object>;
 type BaseVariants = Exclude<BaseProps['variant'], object>;
-type BaseAlign = Exclude<BaseProps['align'], object>;
+export type BaseAlign = Exclude<BaseProps['align'], object>;
 
 // eslint-disable-next-line @typescript-eslint/no-magic-numbers
 type margin = 2 | 4 | 8 | 12;

package/src/components/Typography/index.ts

@@ -1,2 +1,3 @@
 export { Typography } from './Typography';
+export { NotSelectableTypography } from './NotSelectableTypography';
 export type { PropTypes as TypographyPropTypes } from './Typography.types';

package/src/components/index.ts

@@ -51,3 +51,4 @@ export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
 export * from './Flags';
+export * from './Select';

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.tsx

@@ -30,7 +30,9 @@ export function ConnectWalletsModal(props: PropTypes) {
       title={i18n.t('Connect Wallets')}
       open={open}
       onClose={onClose}
-      containerStyle={{ width: '75%', maxWidth: '30rem', height: '60%' }}>
+      styles={{
+        container: { width: '75%', maxWidth: '30rem', height: '60%' },
+      }}>
       <ModalContent>
         {list.map((info) => (
           <Wallet {...info} key={info.title} onClick={onSelect} />

package/src/icons/Autorenew.tsx

@@ -0,0 +1,20 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgAutorenew(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgAutorenew;

package/src/icons/Exit.tsx

@@ -0,0 +1,20 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgExit(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        d="M10.09 15.59 11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgExit;

package/src/icons/Swap.tsx

@@ -0,0 +1,20 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgSwap(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        d="M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgSwap;

package/src/icons/index.ts

@@ -1,5 +1,6 @@
 export { default as AddIcon } from './Add';
 export { default as AutoThemeIcon } from './AutoTheme';
+export { default as AutorenewIcon } from './Autorenew';
 export { default as BorderRadiusIcon } from './BorderRadius';
 export { default as ChevronDownIcon } from './ChevronDown';
 export { default as ChevronLeftIcon } from './ChevronLeft';
@@ -16,6 +17,7 @@ export { default as DesktopIcon } from './Desktop';
 export { default as DoneIcon } from './Done';
 export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ErrorIcon } from './Error';
+export { default as ExitIcon } from './Exit';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
 export { default as GasIcon } from './Gas';
@@ -41,6 +43,7 @@ export { default as RefreshIcon } from './Refresh';
 export { default as ReverseIcon } from './Reverse';
 export { default as RouteIcon } from './Route';
 export { default as SearchIcon } from './Search';
+export { default as SwapIcon } from './Swap';
 export { default as TimeIcon } from './Time';
 export { default as TransactionIcon } from './Transaction';
 export { default as UtxoCategoryIcon } from './UtxoCategory';