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

package/src/components/SwapListItem/SwapToken.tsx

@@ -0,0 +1,149 @@
+import type { PropTypes } from './SwapToken.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { NextIcon } from '../../icons';
+import { ChainToken } from '../ChainToken';
+import { Divider } from '../Divider';
+import { Skeleton } from '../Skeleton';
+import { Typography } from '../Typography';
+
+import {
+  Icon,
+  IconLoading,
+  Images,
+  Layout,
+  LayoutLoading,
+  TokenContainer,
+  TokenInfo,
+  TopSection,
+} from './SwapToken.styles';
+
+export function SwapToken(props: PropTypes) {
+  if ('isLoading' in props) {
+    return (
+      <TokenContainer>
+        <Images>
+          <div>
+            <ChainToken
+              tokenImage=""
+              chainImage=""
+              size="medium"
+              loading={true}
+            />
+          </div>
+          <div
+            style={{
+              transform: 'translateX(-5px)',
+            }}>
+            <ChainToken
+              tokenImage=""
+              chainImage=""
+              size="medium"
+              loading={true}
+            />
+          </div>
+        </Images>
+        <LayoutLoading>
+          <TokenInfo>
+            <Skeleton variant="text" size="medium" width={76} />
+            <Divider size={8} />
+            <Skeleton variant="text" size="medium" width={60} />
+          </TokenInfo>
+          <IconLoading>
+            <NextIcon size={12} color="gray" />
+          </IconLoading>
+          <TokenInfo>
+            <Skeleton variant="text" size="medium" width={76} />
+            <Divider size={8} />
+            <Skeleton variant="text" size="medium" width={60} />
+          </TokenInfo>
+        </LayoutLoading>
+      </TokenContainer>
+    );
+  }
+
+  const {
+    data: {
+      from: {
+        token: fromToken,
+        amount: fromAmount,
+        blockchain: fromBlockchain,
+      },
+      to: {
+        estimatedAmount,
+        token: toToken,
+        amount: toAmount,
+        blockchain: toBlockchain,
+      },
+    },
+    status,
+  } = props;
+  return (
+    <TokenContainer>
+      <Images>
+        <div>
+          <ChainToken
+            tokenImage={fromToken.image}
+            chainImage={fromBlockchain.image}
+            size="large"
+          />
+        </div>
+        <div
+          style={{
+            transform: 'translateX(-10px)',
+          }}>
+          <ChainToken
+            tokenImage={toToken.image}
+            chainImage={toBlockchain.image}
+            size="large"
+          />
+        </div>
+      </Images>
+      {status === 'running' ? (
+        <Layout direction="column">
+          <TopSection>
+            <Typography size="medium" variant="title">
+              {fromToken.displayName}
+            </Typography>
+            <Icon>
+              <NextIcon size={24} color="black" />
+            </Icon>
+            <Typography size="medium" variant="title">
+              {toToken.displayName}
+            </Typography>
+          </TopSection>
+          <Typography size="small" variant="body" color="neutral900">
+            {i18n.t('Waiting for bridge transaction')}
+          </Typography>
+        </Layout>
+      ) : (
+        <Layout direction="row">
+          <TokenInfo>
+            <Typography size="medium" variant="title">
+              {fromToken.displayName}
+            </Typography>
+            {!!fromAmount && (
+              <Typography size="small" variant="body" color="neutral900">
+                {fromAmount}
+              </Typography>
+            )}
+          </TokenInfo>
+          <Icon>
+            <NextIcon size={24} color="black" />
+          </Icon>
+          <TokenInfo>
+            <Typography size="medium" variant="title">
+              {toToken.displayName}
+            </Typography>
+
+            <Typography size="small" variant="body" color="neutral900">
+              {toAmount || estimatedAmount}
+            </Typography>
+          </TokenInfo>
+        </Layout>
+      )}
+    </TokenContainer>
+  );
+}

package/src/components/SwapListItem/SwapToken.types.ts

@@ -0,0 +1,8 @@
+import type { LoadingProps, Status, SwapTokenData } from './SwapListItem.types';
+
+export interface SwapTokenProps {
+  data: SwapTokenData;
+  status: Status;
+}
+
+export type PropTypes = SwapTokenProps | LoadingProps;

package/src/components/SwapListItem/index.ts

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

package/src/components/{SwapDetail → SwapListItem}/mock.ts

@@ -1,6 +1,11 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+// TODO: fix ts errors
+// eslint-disable-next-line
 // @ts-nocheck
+import type { SwapTokenData } from './SwapListItem.types';
+import type { PendingSwap } from '../../containers/History/types';
+
 import { RoutingResultType, TransactionType } from 'rango-sdk';
-import { PendingSwap } from '../../containers/History/types';
 
 export const swap: PendingSwap = {
   creationTime: '1673164511955',
@@ -274,3 +279,26 @@ export const swap: PendingSwap = {
     },
   ],
 };
+
+export const swapTokenData: SwapTokenData = {
+  from: {
+    token: {
+      image: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+      displayName: 'JUNO',
+    },
+    blockchain: {
+      image: 'https://api.rango.exchange/swappers/osmosis.png',
+    },
+    amount: '1.1',
+  },
+  to: {
+    token: {
+      image: 'https://api.rango.exchange/i/mJQPS2',
+      displayName: 'OSMO',
+    },
+    blockchain: {
+      image: 'https://api.rango.exchange/swappers/osmosis.png',
+    },
+    amount: '0.7',
+  },
+};

package/src/components/Switch/Switch.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react';
 import React from 'react';
-import { Switch, PropTypes } from './Switch';
+import { Switch } from './Switch';
+import { PropTypes } from './Switch.types';
 
 export default { title: 'Components/Switch', component: Switch } as Meta<
   typeof Switch

package/src/components/Switch/Switch.styles.tsx

@@ -0,0 +1,46 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+
+import { darkTheme, styled } from '../../theme';
+
+export const StyledSwitchRoot = styled(RadixSwitch.Root, {
+  boxSizing: 'border-box',
+  boxShadow: 'none',
+  borderStyle: 'solid',
+  width: '24px',
+  height: '16px',
+  backgroundColor: '$neutral800',
+  borderColor: '$neutral800',
+  borderRadius: '99999px',
+  position: 'relative',
+  padding: '0',
+  cursor: 'pointer',
+  transition: 'all 0.35s',
+
+  '&[data-state="checked"]': {
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
+  },
+  '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
+});
+
+export const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
+  position: 'absolute',
+  top: '0',
+  boxSizing: 'border-box',
+  display: 'block',
+  width: '12px',
+  height: '12px',
+  backgroundColor: '$background',
+  borderColor: '$secondary100',
+  transition: ' transform 300ms',
+  borderRadius: '999999px',
+  willChange: 'transform',
+
+  '&[data-state="checked"]': {
+    transform: 'translateX(8px)',
+  },
+});

package/src/components/Switch/Switch.tsx

@@ -1,49 +1,8 @@
-import React from 'react';
-import * as RadixSwitch from '@radix-ui/react-switch';
-
-import { styled } from '../../theme';
-
-const StyledSwitchRoot = styled(RadixSwitch.Root, {
-  boxSizing: 'border-box',
-  boxShadow: 'none',
-  borderStyle: 'solid',
-  width: '42px',
-  height: '22px',
-  backgroundColor: '$neutral600',
-  borderColor: '$neutral600',
-  borderRadius: '99999px',
-  position: 'relative',
-  padding: '0',
-  cursor: 'pointer',
-
-  '&[data-state="checked"]': {
-    backgroundColor: '$success',
-    borderColor: '$success',
-  },
-  '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
-});
+import type { PropTypes } from './Switch.types';
 
-const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
-  position: 'absolute',
-  top: '0',
-  boxSizing: 'border-box',
-  display: 'block',
-  width: '18px',
-  height: '18px',
-  backgroundColor: '$white',
-  transition: ' transform 300ms',
-  borderRadius: '999999px',
-  willChange: 'transform',
-
-  '&[data-state="checked"]': {
-    transform: 'translateX(20px)',
-  },
-});
+import React from 'react';
 
-export interface PropTypes {
-  checked: boolean;
-  onChange?: (checked: boolean) => void;
-}
+import { StyledSwitchRoot, StyledSwitchThumb } from './Switch.styles';
 
 export function Switch(props: PropTypes) {
   const { checked, onChange } = props;

package/src/components/Switch/Switch.types.tsx

@@ -0,0 +1,4 @@
+export interface PropTypes {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+}

package/src/components/TextField/TextField.stories.tsx

@@ -1,8 +1,11 @@
+import type { PropTypes } from './TextField.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { TextField, PropTypes } from './TextField';
-import { SearchIcon } from '../Icon';
+import { SearchIcon } from '../../icons';
+
+import { TextField } from './TextField';
 
 export default {
   title: 'Components/Text Field',
@@ -19,14 +22,19 @@ export default {
       type: 'string',
     },
   },
+  args: {
+    variant: 'contained',
+    placeholder: 'test',
+    fullWidth: false,
+  },
 } as Meta<typeof TextField>;
 
 export const Main = (args: PropTypes) => <TextField {...args} />;
 
 export const WithPrefix = (args: PropTypes) => (
-  <TextField {...args} prefix={<SearchIcon size={20} />} />
+  <TextField {...args} prefix={<SearchIcon size={20} color={'black'} />} />
 );
 
 export const WithSuffix = (args: PropTypes) => (
-  <TextField {...args} suffix={<SearchIcon size={20} />} />
+  <TextField {...args} suffix={<SearchIcon size={20} color={'black'} />} />
 );

package/src/components/TextField/TextField.styles.ts

@@ -0,0 +1,123 @@
+import { darkTheme, styled } from '../../theme';
+
+export const InputContainer = styled('div', {
+  borderRadius: '$xs',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+      false: {
+        width: 'fit-content',
+      },
+    },
+    size: {
+      small: {
+        padding: '$5 $15',
+      },
+      large: {
+        padding: '$10',
+        borderRadius: '$xl',
+      },
+    },
+    variant: {
+      contained: {
+        $$color: '$colors$neutral100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral300',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          $$color: '$colors$info100',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral100',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+      outlined: {
+        backgroundColor: 'transparent',
+        border: '1px solid $neutral100',
+        '&:hover': {
+          $$color: '$colors$info100',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          borderColor: '$$color',
+        },
+      },
+      ghost: {
+        background: 'transparent',
+      },
+    },
+
+    disabled: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      variant: 'contained',
+      disabled: true,
+      css: {
+        '&:hover': {
+          backgroundColor: '$neutral100',
+        },
+      },
+    },
+    {
+      variant: 'outlined',
+      disabled: true,
+      css: {
+        '&:hover': {
+          borderColor: '$neutral100',
+        },
+      },
+    },
+  ],
+});
+
+export const Input = styled('input', {
+  flexGrow: 1,
+  color: '$foreground',
+  fontSize: '$14',
+  lineHeight: '$20',
+  fontWeight: 400,
+  border: 'none',
+  outline: 'none',
+  fontFamily: 'inherit',
+  variants: {
+    suffix: {
+      true: { marginRight: '$10' },
+    },
+  },
+  backgroundColor: 'transparent',
+  '-webkit-appearance': 'none',
+  margin: 0,
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0,
+  },
+  '&[type="number"]': {
+    '-moz-appearance': 'textfield',
+  },
+
+  '&::placeholder, &::-webkit-input-placeholder': {
+    color: '$neutral900',
+  },
+  '&:focus-within': {
+    outline: 'none',
+  },
+});
+
+export const Label = styled('label', {
+  display: 'inline-block',
+});

package/src/components/TextField/TextField.tsx

@@ -1,157 +1,60 @@
-import React, { PropsWithChildren, RefObject } from 'react';
+import type { PropTypes, Ref } from './TextField.types';
+import type { PropsWithChildren } from 'react';
 
-import { styled } from '../../theme';
+import React from 'react';
 
-const InputContainer = styled('div', {
-  backgroundColor: '$surface',
-  padding: '1px',
-  boxSizing: 'border-box',
-  border: '1px solid $neutral400',
-  borderRadius: '$5',
-  height: '$48',
-  display: 'flex',
-  flexGrow: 1,
-  position: 'relative',
-  alignItems: 'center',
-  color: '$foreground',
-  overflowX: 'hidden',
-  transition: 'border-color ease .3s',
-  '&:focus-within': {
-    borderColor: '$success',
-    outline: '1px solid $success',
-  },
-  variants: {
-    size: {
-      small: {
-        '& input': {
-          fontSize: '$14',
-        },
-        height: '$32',
-      },
-      medium: {
-        '& input': {
-          fontSize: '$15',
-        },
-        height: '$40',
-      },
-      large: {
-        '& input': {
-          fontSize: '$16',
-        },
-        height: '$48',
-      },
-    },
-    disabled: {
-      true: {
-        backgroundColor: '$neutral100',
-        cursor: 'not-allowed',
-        filter: 'grayscale(100%)',
-      },
-    },
-    prefix: {
-      true: {
-        paddingLeft: '$16',
-      },
-      false: {
-        paddingLeft: '$0',
-      },
-    },
-    suffix: {
-      true: {
-        paddingRight: '$16',
-      },
-      false: {
-        paddingRight: '$0',
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-  },
-});
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
 
-const Input = styled('input', {
-  color: '$foreground',
-  paddingLeft: '$16',
-  paddingRight: '$16',
-  flexGrow: 1,
-  width: '100%',
-  border: 'none',
-  borderRadius: '$5',
-  outline: 'none',
-  backgroundColor: 'transparent',
-  '-webkit-appearance': 'none',
-  margin: 0,
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-    '-webkit-appearance': 'none',
-    margin: 0,
-  },
-  '&[type="number"]': {
-    '-moz-appearance': 'textfield',
-  }
-});
-const Label = styled('label', {
-  display: 'inline-block',
-  fontSize: '$14',
-  color: '$foreground',
-  marginBottom: '$4',
-});
+import { Input, InputContainer, Label } from './TextField.styles';
 
-export type PropTypes = {
-  label?: string;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  size?: 'small' | 'medium' | 'large';
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'> & {
-    ref?:
-      | ((instance: HTMLInputElement | null) => void)
-      | React.RefObject<HTMLInputElement>
-      | null
-      | undefined;
-  };
-
-export const TextField = React.forwardRef(
-  (
-    props: PropsWithChildren<PropTypes>,
-    ref:
-      | RefObject<HTMLInputElement>
-      | ((instance: HTMLInputElement | null) => void)
-      | null
-      | undefined
-  ) => {
-    const { label, prefix, suffix, children, size, style, ...inputAttributes } =
-      props;
-    return (
-      <>
-        {label && (
+function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
+  const {
+    label,
+    prefix,
+    suffix,
+    size = 'small',
+    style,
+    variant,
+    fullWidth,
+    ...inputAttributes
+  } = props;
+  return (
+    <>
+      {label && (
+        <>
           <Label
             className="_text"
-            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}
-          >
-            {label}
+            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+            <Typography variant="label" size="large">
+              {label}
+            </Typography>
           </Label>
-        )}
-        <InputContainer
-          disabled={inputAttributes.disabled}
-          prefix={!!prefix}
-          suffix={!!suffix}
-          size={size}
-          style={style}
+          <Divider direction="vertical" size={4} />
+        </>
+      )}
+      <InputContainer
+        disabled={inputAttributes.disabled}
+        fullWidth={fullWidth}
+        variant={variant}
+        size={size}
+        style={style}
+        className="_text">
+        {prefix || null}
+        <Input
           className="_text"
-        >
-          {prefix || null}
-          <Input
-            className="_text"
-            {...inputAttributes}
-            spellCheck={false}
-            ref={ref}
-          />
-          {suffix || null}
-        </InputContainer>
-      </>
-    );
-  }
-);
+          {...inputAttributes}
+          spellCheck={false}
+          suffix={!!suffix}
+          ref={ref}
+        />
+        {suffix || null}
+      </InputContainer>
+    </>
+  );
+}
+
+const TextField = React.forwardRef(TextFieldComponent);
+TextField.displayName = 'TextField';
+
+export { TextField };