@rango-dev/ui 0.26.1-next.9 → 0.27.1-next.0

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

@@ -0,0 +1,113 @@
+import { darkTheme, keyframes, lightTheme, styled } from '../../theme';
+import { Typography } from '../Typography';
+
+const toastOpacity = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+export const ToastContentContainer = styled('div', {
+  variants: {
+    horizontal: {
+      right: {
+        right: 12,
+        animation: `${toastOpacity} .7s`,
+      },
+      left: {
+        left: 12,
+        animation: `${toastOpacity} .7s`,
+      },
+    },
+  },
+});
+
+export const ToastContainer = styled('div', {
+  position: 'absolute',
+  zIndex: 9999,
+  display: 'flex',
+  gap: '$4',
+  flexDirection: 'column',
+  variants: {
+    horizontal: {
+      right: {
+        right: 12,
+      },
+      left: {
+        left: 12,
+      },
+    },
+
+    vertical: {
+      top: {
+        top: 2,
+      },
+      bottom: {
+        bottom: 2,
+      },
+    },
+  },
+});
+
+export const AlertBox = styled('div', {
+  display: 'flex',
+  borderRadius: '$sm',
+  width: '292px',
+  minHeight: '52px',
+  backgroundColor: '$background',
+  borderRight: '1px solid',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '#070917',
+  },
+  '&:hover': {
+    backgroundColor: '$info100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '#111733',
+    },
+  },
+  variants: {
+    type: {
+      error: {
+        borderRightColor: '$error500',
+      },
+      success: {
+        borderRightColor: '$success500',
+      },
+      warning: {
+        borderRightColor: '$warning500',
+      },
+      info: {
+        borderRightColor: '$info500',
+      },
+      loading: {
+        borderRightColor: '$info500',
+      },
+    },
+  },
+});
+
+export const AlertFlexContainer = styled('div', {
+  display: 'flex',
+  padding: '$10',
+  alignItems: 'center',
+});
+
+export const StyledTypography = styled(Typography, {
+  variants: {
+    hasColor: {
+      false: {
+        [`.${lightTheme} &`]: {
+          color: '$neutral700',
+        },
+        [`.${darkTheme} &`]: {
+          color: '$neutral900',
+        },
+      },
+    },
+  },
+});
+
+export const ToastStoryContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,59 @@
+import type { ToastProps } from './Toast.types';
+
+import React, { useEffect } from 'react';
+
+import { IconHighlight } from '../Alert/Alert.styles';
+import AlertIcon from '../Alert/AlertIcon';
+import { Divider } from '../Divider';
+
+import { useToast } from './Toast.Provider';
+import {
+  AlertBox,
+  AlertFlexContainer,
+  StyledTypography,
+  ToastContentContainer,
+} from './Toast.styles';
+
+const DEFAULT_HIDE_DURATION = 3_000;
+
+export const Toast = (props: ToastProps) => {
+  const { id, horizontal, autoHideDuration = DEFAULT_HIDE_DURATION } = props;
+  const { removeToast } = useToast();
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      removeToast(id);
+    }, autoHideDuration);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [id]);
+
+  return (
+    <ToastContentContainer horizontal={horizontal}>
+      {'component' in props ? (
+        props.component
+      ) : (
+        <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>
+        </AlertBox>
+      )}
+    </ToastContentContainer>
+  );
+};

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

@@ -0,0 +1,31 @@
+import type { Type } from '../Alert/Alert.types';
+import type { CSSProperties } from '@stitches/react';
+
+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 ToastProps = ToastType & {
+  id: number | string;
+  horizontal: 'left' | 'right';
+};
+
+export type ProviderContext = {
+  addToast: (content: ToastType) => void;
+  removeToast: (id: number | string) => void;
+};

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from './Toast';
+export { ToastProvider, useToast } from './Toast.Provider';

package/src/components/Wallet/ClickableWallet.tsx

@@ -1,7 +1,7 @@
 import type { WalletPropTypes } from './Wallet.types';
 
 import { detectInstallLink } from '@rango-dev/wallets-shared';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Image } from '../common';
 import { Divider } from '../Divider';
@@ -20,7 +20,7 @@ import {
 import { WalletState } from './Wallet.types';
 
 function Wallet(props: WalletPropTypes) {
-  const { title, type, image, onClick, isLoading } = props;
+  const { title, type, image, onClick, isLoading, disabled = false } = props;
   const info = makeInfo(props.state);
 
   if (isLoading) {
@@ -35,10 +35,15 @@ function Wallet(props: WalletPropTypes) {
     );
   }
 
+  const WrapperComponent = disabled ? Fragment : Tooltip;
+
   return (
-    <Tooltip container={props.container} content={info.tooltipText} side="top">
+    <WrapperComponent
+      container={props.container}
+      content={info.tooltipText}
+      side="top">
       <WalletButton
-        disabled={props.state == WalletState.CONNECTING}
+        disabled={props.state == WalletState.CONNECTING || disabled}
         onClick={() => {
           if (props.state === WalletState.NOT_INSTALLED) {
             window.open(detectInstallLink(props.link), '_blank');
@@ -64,7 +69,7 @@ function Wallet(props: WalletPropTypes) {
           </Typography>
         </Text>
       </WalletButton>
-    </Tooltip>
+    </WrapperComponent>
   );
 }
 

package/src/components/Wallet/SelectableWallet.tsx

@@ -14,12 +14,21 @@ import {
 import { type SelectablePropTypes, WalletState } from './Wallet.types';
 
 export function SelectableWallet(props: SelectablePropTypes) {
-  const { title, type, image, onClick, selected, description, state } = props;
+  const {
+    title,
+    type,
+    image,
+    onClick,
+    selected,
+    description,
+    state,
+    disabled = false,
+  } = props;
   const info = makeInfo(props.state);
   return (
     <WalletButton
       selected={selected}
-      disabled={props.state == WalletState.CONNECTING}
+      disabled={props.state == WalletState.CONNECTING || disabled}
       onClick={() => {
         if (props.state === WalletState.NOT_INSTALLED) {
           window.open(detectInstallLink(props.link), '_blank');

package/src/components/Wallet/Wallet.styles.ts

@@ -48,6 +48,10 @@ export const WalletButton = styled('button', {
     backgroundColor: '$$color',
     outline: 0,
   },
+  '&:disabled': {
+    filter: 'grayscale(1)',
+    pointerEvents: 'none',
+  },
   variants: {
     selected: {
       true: {

package/src/components/Wallet/Wallet.types.ts

@@ -39,8 +39,10 @@ export interface WalletPropTypes {
   description?: string;
   isLoading?: boolean;
   container?: HTMLElement;
+  disabled?: boolean;
 }
 
 export type SelectablePropTypes = WalletPropTypes & {
   selected: boolean;
+  disabled?: boolean;
 };

package/src/components/index.ts

@@ -29,6 +29,7 @@ export * from './SwapListItem';
 export * from './SwapDetailsPlaceholder';
 export * from './Switch';
 export * from './TextField';
+export * from './Toast';
 export * from './TokenList';
 export * from './TokenPreview';
 export * from './Tooltip';

package/src/icons/Add.tsx

@@ -0,0 +1,25 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgAdd(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        d="M18.8611 13.6389H4.63889C4.15296 13.6389 3.75 13.2359 3.75 12.75C3.75 12.2641 4.15296 11.8611 4.63889 11.8611H18.8611C19.347 11.8611 19.75 12.2641 19.75 12.75C19.75 13.2359 19.347 13.6389 18.8611 13.6389Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        d="M11.75 20.75C11.2641 20.75 10.8611 20.347 10.8611 19.8611V5.63889C10.8611 5.15296 11.2641 4.75 11.75 4.75C12.2359 4.75 12.6389 5.15296 12.6389 5.63889V19.8611C12.6389 20.347 12.2359 20.75 11.75 20.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgAdd;

package/src/icons/index.ts

@@ -1,3 +1,4 @@
+export { default as AddIcon } from './Add';
 export { default as AutoThemeIcon } from './AutoTheme';
 export { default as BorderRadiusIcon } from './BorderRadius';
 export { default as ChevronDownIcon } from './ChevronDown';