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

package/src/components/Toast/Toast.tsx

@@ -2,9 +2,12 @@ import type { ToastProps } from './Toast.types';
 
 import React, { useEffect } 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 { useToast } from './Toast.Provider';
 import {
@@ -14,46 +17,70 @@ import {
   ToastContentContainer,
 } 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 { removeToast } = useToast();
   useEffect(() => {
-    const timer = setTimeout(() => {
-      removeToast(id);
-    }, autoHideDuration);
+    let cleanup;
+
+    if (autoHideDuration) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, autoHideDuration);
 
-    return () => {
-      clearTimeout(timer);
-    };
+      cleanup = () => clearTimeout(timer);
+    }
+
+    return cleanup;
   }, [id]);
 
+  const handleClose = () => {
+    removeToast(id, position);
+    onClose?.();
+  };
+
   return (
-    <ToastContentContainer horizontal={horizontal}>
-      {'component' in props ? (
-        props.component
-      ) : (
-        <AlertBox
-          onClick={() => removeToast(id)}
-          type={props.type}
-          style={props.style}>
+    <ToastContentContainer>
+      <AlertBox
+        onClick={hideOnTap ? handleClose : undefined}
+        variant={variant}
+        type={type}>
+        {variant === 'custom' ? (
           <AlertFlexContainer>
-            <IconHighlight type={props.type} align="center">
-              <AlertIcon type={props.type} />
+            <IconHighlight type={type} align="center">
+              <AlertIcon type={type} />
             </IconHighlight>
             <Divider direction="horizontal" size={10} />
-            <StyledTypography
-              variant="body"
-              size="small"
-              color={props.titleColor}
-              hasColor={!!props.titleColor}
-              align="left">
+            <StyledTypography variant="body" size="small" align="left">
               {props.title}
             </StyledTypography>
           </AlertFlexContainer>
-        </AlertBox>
-      )}
+        ) : (
+          <Alert
+            title={title}
+            type={type}
+            variant="alarm"
+            titleAlign="left"
+            action={
+              hasCloseIcon ? (
+                <IconButton variant="ghost" size="xsmall" onClick={handleClose}>
+                  <CloseIcon size={12} />
+                </IconButton>
+              ) : undefined
+            }
+          />
+        )}
+      </AlertBox>
     </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/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';