@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

package/src/components/TextField/TextField.types.tsx

@@ -0,0 +1,21 @@
+import type { InputContainer } from './TextField.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof InputContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+
+export type Ref =
+  | ((instance: HTMLInputElement | null) => void)
+  | React.RefObject<HTMLInputElement>
+  | null
+  | undefined;
+
+export type PropTypes = {
+  label?: string;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  size?: BaseSizes;
+  variant?: BaseVariants;
+  fullWidth?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'>;

package/src/components/TokenAmount/TokenAmount.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TokenAmount } from './TokenAmount';
+
+const meta: Meta<typeof TokenAmount> = {
+  component: TokenAmount,
+};
+
+export default meta;
+type Story = StoryObj<typeof TokenAmount>;
+
+export const Main: Story = {
+  args: {
+    type: 'output',
+    price: { value: '1', usdValue: '28,490' },
+    percentageChange: '2.21',
+    warningLevel: 'low',
+    chain: { image: 'https://api.rango.exchange/swappers/osmosis.png' },
+    token: {
+      image: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+      displayName: 'JUNO',
+    },
+  },
+};

package/src/components/TokenAmount/TokenAmount.styles.ts

@@ -0,0 +1,27 @@
+import { styled } from '@stitches/react';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  variants: {
+    direction: {
+      vertical: {
+        flexDirection: 'column',
+        alignItems: 'start',
+      },
+      horizontal: { flexDirection: 'row', width: '100%', alignItems: 'end' },
+    },
+    centerAlign: {
+      true: { alignItems: 'center', justifyContent: 'center' },
+    },
+  },
+  '& .token-amount': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  '& .usd-value': {
+    display: 'flex',
+    paddingTop: '$5',
+  },
+});

package/src/components/TokenAmount/TokenAmount.tsx

@@ -0,0 +1,61 @@
+import type { PropTypes } from './TokenAmount.types';
+
+import React from 'react';
+
+import { ChainToken } from '../ChainToken';
+import { PriceImpact } from '../PriceImpact/PriceImpact';
+import { Typography } from '../Typography';
+
+import { Container } from './TokenAmount.styles';
+
+export function TokenAmount(props: PropTypes) {
+  return (
+    <Container direction={props.direction} centerAlign={props.centerAlign}>
+      <div className="token-amount">
+        <ChainToken
+          chainImage={props.chain.image}
+          tokenImage={props.token.image}
+          size="medium"
+        />
+        <div>
+          {props.label && (
+            <Typography ml={4} size="xsmall" variant="body" color="$neutral900">
+              {props.label}
+            </Typography>
+          )}
+          <div title={`${props.price.value} ${props.token.displayName}`}>
+            <Typography
+              ml={4}
+              size="medium"
+              variant="title"
+              style={{ fontWeight: 600 }}>
+              {props.price.value}
+            </Typography>
+            <Typography
+              ml={8}
+              size="medium"
+              variant="title"
+              style={{ fontWeight: 400 }}>
+              {props.token.displayName}
+            </Typography>
+          </div>
+        </div>
+      </div>
+      <div className="usd-value">
+        {props.type === 'input' && (
+          <Typography mr={4} size="small" variant="body" color="$neutral900">
+            {`~$${props.price.usdValue}`}
+          </Typography>
+        )}
+        {props.type === 'output' && (
+          <PriceImpact
+            size="small"
+            outputUsdValue={props.price.usdValue}
+            percentageChange={props.percentageChange}
+            warningLevel={props.warningLevel}
+          />
+        )}
+      </div>
+    </Container>
+  );
+}

package/src/components/TokenAmount/TokenAmount.types.ts

@@ -0,0 +1,20 @@
+import type { SwapInputProps } from '../../containers/SwapInput/SwapInput.types';
+import type { PriceImpactProps } from '../PriceImpact/PriceImpact.types';
+
+type BaseProps = Pick<SwapInputProps, 'token' | 'price'> & {
+  chain: Pick<SwapInputProps['chain'], 'image'>;
+  direction?: 'vertical' | 'horizontal';
+  centerAlign?: boolean;
+  label?: string;
+};
+
+type InputAmountProps = { type: 'input' };
+
+type OutputAmountProps = Pick<
+  PriceImpactProps,
+  'percentageChange' | 'warningLevel'
+> & {
+  type: 'output';
+};
+
+export type PropTypes = BaseProps & (InputAmountProps | OutputAmountProps);

package/src/components/TokenAmount/index.ts

@@ -0,0 +1 @@
+export { TokenAmount } from './TokenAmount';

package/src/components/TokenList/TokenItem.tsx

@@ -1,10 +1,13 @@
-import { Token } from 'rango-sdk';
-import React, { CSSProperties } from 'react';
+import type { TokenWithAmount } from './TokenList';
+import type { Token } from 'rango-sdk';
+import type { CSSProperties } from 'react';
+
+import React from 'react';
+
 import { styled } from '../../theme';
 import { Button } from '../Button';
-import { Typography } from '../Typography';
-import { TokenWithAmount } from './TokenList';
 import { Image } from '../common';
+import { Typography } from '../Typography';
 
 const TokenImageContainer = styled('div', {
   paddingRight: '$16',
@@ -40,12 +43,10 @@ export function TokenItem(props: PropTypes) {
         height: '48px',
         top: `${parseFloat(style?.top as string) + 0}px`,
         padding: '0 4px',
-      }}
-    >
+      }}>
       <Button
         variant="outlined"
         size="large"
-        align="start"
         onClick={onClick.bind(null, token)}
         type={selected ? 'primary' : undefined}
         prefix={
@@ -56,17 +57,20 @@ export function TokenItem(props: PropTypes) {
         suffix={
           token.balance?.amount && (
             <TokenAmountContainer>
-              <Typography variant="body2">{token.balance.amount}</Typography>
-              <Typography variant="caption">
+              <Typography variant="body" size="small">
+                {token.balance.amount}
+              </Typography>
+              <Typography variant="body" size="xsmall">
                 {`${token.balance.usdValue}$`}
               </Typography>
             </TokenAmountContainer>
           )
-        }
-      >
+        }>
         <TokenNameContainer>
-          <Typography variant="body1">{token.symbol}</Typography>
-          <Typography variant="caption" color="neutral600">
+          <Typography variant="body" size="medium">
+            {token.symbol}
+          </Typography>
+          <Typography variant="body" size="xsmall" color="neutral600">
             {token.name}
           </Typography>
         </TokenNameContainer>

package/src/components/TokenList/TokenList.stories.tsx

@@ -1,10 +1,13 @@
+import type { PropTypes } from './TokenList';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { TokenList, PropTypes } from './TokenList';
+
 import { tokensMeta } from './mockData';
+import { TokenList } from './TokenList';
 
 export default {
-  title: 'Components/Token List',
+  title: 'Components/Token List(Deprecated)',
   component: TokenList,
   argTypes: {
     searchedText: {

package/src/components/TokenList/TokenList.tsx

@@ -1,7 +1,11 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { Asset, Token } from 'rango-sdk';
+import type { CommonProps } from 'react-window';
+
 import React, { forwardRef, useEffect, useState } from 'react';
-import { CommonProps } from 'react-window';
-import { Asset, Token } from 'rango-sdk';
+
 import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
+
 import { TokenItem } from './TokenItem';
 
 export interface TokenWithAmount extends Token {
@@ -20,7 +24,9 @@ export interface PropTypes {
   multiSelect?: boolean;
   selectedList?: Asset[];
 }
-
+/**
+ * @deprecated will be removed in v2
+ */
 export function TokenList(props: PropTypes) {
   const { list, searchedText, onChange, multiSelect, selectedList } = props;
   const [selected, setSelected] = useState(props.selected);
@@ -58,7 +64,9 @@ export function TokenList(props: PropTypes) {
     setHasNextPage(list.length > tokens.length);
   }, [tokens.length]);
 
+  // eslint-disable-next-line react/display-name
   const innerElementType: React.FC<CommonProps> = forwardRef(
+    // eslint-disable-next-line destructuring/in-params, react/prop-types
     ({ style, ...rest }, ref) => {
       return (
         <div
@@ -66,6 +74,7 @@ export function TokenList(props: PropTypes) {
           ref={ref as any}
           style={{
             ...style,
+            // eslint-disable-next-line react/prop-types
             height: `${parseFloat(style?.height as string) + 8 * 2}px`,
           }}
           {...rest}

package/src/components/TokenList/mockData.ts

@@ -1,7 +1,7 @@
 // TODO: fix ts errors
 // eslint-disable-next-line
 // @ts-nocheck
-import { TokenWithAmount } from './TokenList';
+import type { TokenWithAmount } from './TokenList';
 
 export const tokensMeta: TokenWithAmount[] = [
   {

package/src/components/TokenPreview/TokenPreview.tsx

@@ -1,14 +1,12 @@
-import React, { ReactNode } from 'react';
-import {
-  Button,
-  InfoCircleIcon,
-  styled,
-  Typography,
-  Divider,
-  Image,
-} from '../..';
+import type { LoadingStatus } from '../../types/meta';
+import type { ReactNode } from 'react';
+
 import { i18n } from '@lingui/core';
-import { LoadingStatus } from '../../types/meta';
+import React from 'react';
+
+import { Button, Divider, Image, Typography } from '../..';
+import { styled } from '../../theme';
+import { InfoCircleIcon } from '../Icon';
 
 const Box = styled('div', {
   display: 'flex',
@@ -19,16 +17,16 @@ const Box = styled('div', {
 
 const Container = styled('div', {
   boxSizing: 'border-box',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   padding: '$8 $16 $16 $16',
 
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutral100',
+        backgroundColor: '$background',
       },
       outlined: {
-        border: '1px solid $neutral100',
+        border: '1px solid $background',
       },
     },
   },
@@ -68,14 +66,14 @@ const Container = styled('div', {
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutral100',
+  backgroundColor: '$background',
   borderRadius: '99999px',
 });
 
 const OutputContainer = styled('div', {
   windth: '100%',
   height: '$48',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
@@ -119,14 +117,15 @@ export function TokenPreview(props: PropTypes) {
     <Box>
       <Container type={'outlined'}>
         <div className="head">
-          <Typography variant="body2" color="neutral800">
+          <Typography variant="body" size="small" color="neutral800">
             {props.label}
           </Typography>
           <div>
             {percentageChange}
             {props.usdValue && (
               <Typography
-                variant="caption"
+                variant="body"
+                size="xsmall"
                 color="neutral600"
                 className="usd-value">{`$${props.usdValue}`}</Typography>
             )}
@@ -145,7 +144,6 @@ export function TokenPreview(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            align="start"
             size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
@@ -164,8 +162,7 @@ export function TokenPreview(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            size="large"
-            align="start">
+            size="large">
             {loadingStatus === 'success' && token
               ? token.symbol
               : i18n.t('Token')}
@@ -173,7 +170,9 @@ export function TokenPreview(props: PropTypes) {
           <Divider size={12} direction="horizontal" />
           <div className="amount">
             <OutputContainer>
-              <Typography variant="h4">{props.amount}</Typography>
+              <Typography variant="title" size="medium">
+                {props.amount}
+              </Typography>
             </OutputContainer>
           </div>
         </div>

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,16 +1,18 @@
+import type { PropTypes } from './Tooltip.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { Tooltip, PropTypes } from './Tooltip';
 import { AddWalletIcon } from '../Icon';
 
+import { Tooltip } from './Tooltip';
+
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
   args: {
     content: 'I am a tooltip',
     side: 'top',
-    color: 'gray',
   },
   argTypes: {
     content: {
@@ -27,29 +29,13 @@ export default {
     color: {
       name: 'color',
       control: { type: 'select' },
-      options: [
-        'primary',
-        'error',
-        'warning',
-        'success',
-        'black',
-        'white',
-        'gray',
-      ],
-      defaultValue: 'gray',
+      options: ['primary', 'error', 'warning', 'success'],
     },
   },
 } as Meta<typeof Tooltip>;
 
 export const Main = (props: PropTypes) => (
-  <div
-    style={{
-      height: 300,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    }}
-  >
+  <div>
     <Tooltip {...props}>
       <AddWalletIcon size={24} />
     </Tooltip>

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

@@ -0,0 +1,19 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
+import { styled } from '../../theme';
+import { Typography } from '../Typography';
+
+export const TooltipContent = styled(RadixTooltip.Content, {
+  zIndex: '999999',
+});
+
+export const TooltipArrow = styled(RadixTooltip.Arrow, {
+  fill: '$neutral100',
+});
+
+export const TooltipTypography = styled(Typography, {
+  borderRadius: '$md',
+  padding: '$5 $10',
+  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
+  backgroundColor: '$neutral100',
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -1,113 +1,36 @@
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { styled } from '../../theme';
-import React, { PropsWithChildren } from 'react';
-
-export interface PropTypes {
-  content: string;
-  side?: 'top' | 'right' | 'bottom' | 'left';
-  color?:
-    | 'primary'
-    | 'error'
-    | 'warning'
-    | 'success'
-    | 'gray'
-    | 'white'
-    | 'black';
-}
-const TooltipTrigger = styled(RadixTooltip.Trigger, {
-  border: 0,
-  padding: 0,
+import type { PropTypes } from './Tooltip.types';
+import type { PropsWithChildren } from 'react';
 
-  backgroundColor: 'transparent',
-});
-const TooltipContent = styled(RadixTooltip.Content, {
-  borderRadius: '$5',
-  padding: '$4 $8',
-  fontSize: '$14',
-  animationDuration: '400ms',
-  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-  willChange: 'transform, opacity',
-  variants: {
-    color: {
-      primary: {
-        backgroundColor: '$primary',
-        color: '$white',
-      },
-      error: {
-        backgroundColor: '$error',
-        color: '$white',
-      },
-      warning: {
-        backgroundColor: '$warning',
-        color: '$white',
-      },
-      success: {
-        backgroundColor: '$success',
-        color: '$white',
-      },
-      gray: {
-        backgroundColor: '$neutral100',
-        color: '$black',
-      },
-      black: {
-        backgroundColor: '$black',
-        color: '$white',
-      },
-      white: {
-        backgroundColor: '$white',
-        color: '$black',
-      },
-    },
-  },
-});
-const TooltipArrow = styled(RadixTooltip.Arrow, {
-  variants: {
-    color: {
-      primary: {
-        fill: '$primary',
-      },
-      error: {
-        fill: '$error',
-      },
-      warning: {
-        fill: '$warning',
-      },
-      success: {
-        fill: '$success',
-      },
-      gray: {
-        fill: '$neutral100',
-      },
-      black: {
-        fill: '$black',
-      },
-      white: {
-        fill: '$white',
-      },
-    },
-  },
-});
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
 
-const ChildrenWrapper = styled('div', {
-  display: 'inline-block',
-});
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipTypography,
+} from './Tooltip.styles';
 
-export function Tooltip({
-  children,
-  content,
-  side = 'top',
-  color = 'gray',
-}: PropsWithChildren<PropTypes>) {
+export function Tooltip(props: PropsWithChildren<PropTypes>) {
+  const {
+    children,
+    content,
+    color,
+    sideOffset,
+    container,
+    side = 'top',
+  } = props;
   return (
-    <RadixTooltip.Provider>
+    <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root>
-        <TooltipTrigger asChild>
-          <ChildrenWrapper>{children}</ChildrenWrapper>
-        </TooltipTrigger>
-        <RadixTooltip.Portal>
-          <TooltipContent color={color} side={side} sideOffset={5}>
-            {content}
-            <TooltipArrow color={color} />
+        <RadixTooltip.Trigger asChild>
+          <div>{children}</div>
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal container={container}>
+          <TooltipContent side={side} sideOffset={sideOffset}>
+            <TooltipTypography variant="label" size="medium" color={color}>
+              {content}
+            </TooltipTypography>
+            <TooltipArrow />
           </TooltipContent>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>

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

@@ -0,0 +1,12 @@
+import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { ComponentProps, ReactNode } from 'react';
+
+type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
+
+export interface PropTypes {
+  content: ReactNode;
+  side?: RadixTooltipContentProps['side'];
+  color?: 'primary' | 'error' | 'warning' | 'success';
+  sideOffset?: RadixTooltipContentProps['sideOffset'];
+  container?: HTMLElement;
+}

package/src/components/Tooltip/useEventListener.ts

@@ -0,0 +1,54 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+function useEventListener<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void
+): void;
+function useEventListener<
+  K extends keyof HTMLElementEventMap,
+  T extends HTMLElement = HTMLDivElement
+>(
+  eventName: K,
+  handler: (event: HTMLElementEventMap[K]) => void,
+  element: RefObject<T>
+): void;
+
+function useEventListener<
+  KW extends keyof WindowEventMap,
+  KH extends keyof HTMLElementEventMap,
+  T extends HTMLElement | void = void
+>(
+  eventName: KW | KH,
+  handler: (
+    event: WindowEventMap[KW] | HTMLElementEventMap[KH] | Event
+  ) => void,
+  element?: RefObject<T>
+) {
+  const savedHandler = useRef<typeof handler>();
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement: T | Window = element?.current || window;
+    if (!(targetElement && targetElement.addEventListener)) return;
+
+    // Update saved handler if necessary
+    if (savedHandler.current !== handler) {
+      savedHandler.current = handler;
+    }
+
+    // Create event listener that calls handler function stored in ref
+    const eventListener: typeof handler = (event) => {
+      if (savedHandler?.current) {
+        savedHandler.current(event);
+      }
+    };
+
+    targetElement.addEventListener(eventName, eventListener);
+
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element, handler]);
+}
+
+export default useEventListener;