@rango-dev/ui 0.26.1-next.8 → 0.27.0

package/src/components/Header/Header.tsx

@@ -5,13 +5,15 @@ import React from 'react';
 
 import { Typography } from '../Typography';
 
-import { Container, Suffix } from './Header.styles';
+import { Container, globalHeaderStyles, Suffix } from './Header.styles';
 
 export function Header({
   prefix,
   suffix,
   title,
 }: PropsWithChildren<PropTypes>) {
+  globalHeaderStyles();
+
   return (
     <Container>
       {prefix}
@@ -19,6 +21,8 @@ export function Header({
         {title}
       </Typography>
       <Suffix>{suffix}</Suffix>
+      <div className="rng-curve-left"></div>
+      <div className="rng-curve-right"></div>
     </Container>
   );
 }

package/src/components/Header/index.ts

@@ -1 +1,2 @@
 export { Header } from './Header';
+export { HEADER_CORNDER_RADIUS } from './Header.constants';

package/src/components/Modal/Modal.tsx

@@ -62,7 +62,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
         setActive(false);
         timeoutRef.current = setTimeout(() => {
           setIsMount(false);
-          container.style.overflow = 'unset';
+          container.style.removeProperty('overflow');
         }, CLOSED_DELAY);
       }
     }

package/src/components/QuoteCost/QuoteCost.styles.ts

@@ -1,4 +1,4 @@
-import { css, styled } from '../../theme';
+import { css, keyframes, styled } from '../../theme';
 
 export const Container = styled('div', {
   borderRadius: '$xs',
@@ -23,7 +23,34 @@ export const iconStyles = css({
   alignItems: 'center',
 });
 
+const blinker = keyframes({
+  '50%': {
+    opacity: 0.2,
+  },
+});
+
 export const itemStyles = css({
   display: 'flex',
   alignItems: 'center',
+  '&.feeSection': {
+    cursor: 'pointer',
+    '&:hover': {
+      svg: {
+        color: '$secondary',
+      },
+      '._typography': {
+        color: '$secondary',
+      },
+    },
+  },
+  '&.warning': {
+    animation: `${blinker} 2s linear infinite`,
+
+    svg: {
+      color: '$warning500',
+    },
+    '._typography': {
+      color: '$warning500',
+    },
+  },
 });

package/src/components/QuoteCost/QuoteCost.tsx

@@ -3,6 +3,7 @@ import type { PropTypes } from './QuoteCost.types';
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -13,17 +14,36 @@ import {
 } from './QuoteCost.styles';
 
 export function QuoteCost(props: PropTypes) {
-  const { fee, time, steps } = props;
+  const {
+    fee,
+    time,
+    steps,
+    onClickFee,
+    tooltipGas,
+    feeWarning,
+    tooltipContainer,
+  } = props;
   return (
     <Container>
-      <div className={itemStyles()}>
-        <div className={iconStyles()}>
-          <GasIcon size={12} color={'gray'} />
+      <Tooltip
+        container={tooltipContainer}
+        content={tooltipGas}
+        open={!onClickFee && !tooltipGas ? false : undefined}
+        side="bottom">
+        <div
+          className={`${itemStyles()} ${onClickFee ? 'feeSection' : ''} ${
+            feeWarning ? 'warning' : ''
+          }`}
+          onClick={onClickFee}>
+          <div className={iconStyles()}>
+            <GasIcon size={12} color={'gray'} />
+          </div>
+          <Typography ml={2} align="center" variant="body" size="small">
+            ${fee}
+          </Typography>
         </div>
-        <Typography ml={2} align="center" variant="body" size="small">
-          ${fee}
-        </Typography>
-      </div>
+      </Tooltip>
+
       <Separator />
       <div className={itemStyles()}>
         <div className={iconStyles()}>

package/src/components/QuoteCost/QuoteCost.types.ts

@@ -2,4 +2,8 @@ export type PropTypes = {
   fee: string;
   time: string | number;
   steps: number;
+  onClickFee?: () => void;
+  tooltipGas?: string;
+  feeWarning?: boolean;
+  tooltipContainer?: HTMLElement;
 };

package/src/components/SwapContainer/SwapContainer.tsx

@@ -22,28 +22,16 @@ const MainContainer = styled('div', {
     boxSizing: 'border-box',
     listStyleType: 'none',
   },
-  variants: {
-    fixedHeight: {
-      true: {
-        height: '633px',
-        maxHeight: '633px',
-      },
-      false: {
-        height: 'auto',
-      },
-    },
-  },
 });
 
 export interface PropTypes {
   style?: CSSProperties;
-  fixedHeight?: boolean;
 }
 
 export function SwapContainer(props: PropsWithChildren<PropTypes>) {
-  const { children, style, fixedHeight = true } = props;
+  const { children, style } = props;
   return (
-    <MainContainer style={style} id="swap-box" fixedHeight={fixedHeight}>
+    <MainContainer style={style} id="swap-box">
       {children}
     </MainContainer>
   );

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

@@ -5,6 +5,13 @@ import { Typography } from '../Typography';
 
 export const TooltipContent = styled(RadixTooltip.Content, {
   zIndex: '999999',
+  variants: {
+    align: {
+      right: {
+        position: 'absolute',
+      },
+    },
+  },
 });
 
 export const TooltipTypography = styled(Typography, {

package/src/components/Tooltip/Tooltip.tsx

@@ -20,6 +20,7 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     open,
     side = 'top',
     style,
+    align,
   } = props;
   return (
     <RadixTooltip.Provider delayDuration={0}>
@@ -28,7 +29,7 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
           <TriggerContent>{children}</TriggerContent>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
-          <TooltipContent side={side} sideOffset={sideOffset}>
+          <TooltipContent align={align} side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>

package/src/components/Tooltip/Tooltip.types.ts

@@ -1,8 +1,11 @@
+import type { TooltipContent } from './Tooltip.styles';
 import type * as RadixTooltip from '@radix-ui/react-tooltip';
-import type { CSSProperties } from '@stitches/react';
+import type * as Stitches from '@stitches/react';
 import type { ComponentProps, ReactNode } from 'react';
 
 type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
+type BaseProps = Stitches.VariantProps<typeof TooltipContent>;
+type BaseAlign = Exclude<BaseProps['align'], object>;
 
 export interface PropTypes {
   content: ReactNode;
@@ -11,5 +14,6 @@ export interface PropTypes {
   sideOffset?: RadixTooltipContentProps['sideOffset'];
   container?: HTMLElement;
   open?: boolean;
-  style?: CSSProperties;
+  style?: Stitches.CSSProperties;
+  align?: BaseAlign;
 }

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/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';

package/src/theme.ts

@@ -170,6 +170,7 @@ export const theme = {
   transitions: {},
 };
 const media = {
+  xs: '(min-width: 375px)',
   sm: '(min-width: 640px)',
   md: '(min-width: 768px)',
   lg: '(min-width: 1024px)',