@rango-dev/ui 0.15.1-next.0 → 0.15.1-next.10

package/src/components/SwapListItem/SwapListItem.helpers.ts

@@ -0,0 +1,51 @@
+import type { Status } from './SwapListItem.types';
+
+import { i18n } from '@lingui/core';
+
+export function getStatus(status: Status): string {
+  switch (status) {
+    case 'failed':
+      return i18n.t('Failed');
+    case 'success':
+      return i18n.t('Complete');
+    default:
+      return i18n.t('In progress');
+  }
+}
+
+export function formattedDateAndTime(
+  time: string,
+  onlyShowTime?: boolean
+): string {
+  if (!time) {
+    return '';
+  }
+
+  const date = new Date(Number(time));
+  const HOURS_IN_HALF_DAY = 12; // Constant for 12 hours
+  const MINUTES_IN_SINGLE_DIGIT = 10; // Constant for 10 minutes
+
+  if (!onlyShowTime) {
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
+    return date.toLocaleDateString(undefined, options);
+  }
+
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const period = hours >= HOURS_IN_HALF_DAY ? 'pm' : 'am';
+
+  const formattedHours =
+    hours % HOURS_IN_HALF_DAY === 0
+      ? HOURS_IN_HALF_DAY
+      : hours % HOURS_IN_HALF_DAY;
+  const formattedMinutes =
+    minutes < MINUTES_IN_SINGLE_DIGIT ? `0${minutes}` : minutes;
+
+  const formattedTime = `${formattedHours}:${formattedMinutes} ${period}`;
+
+  return formattedTime;
+}

package/src/components/SwapListItem/SwapListItem.stories.tsx

@@ -0,0 +1,32 @@
+import type { PropTypes } from './SwapListItem.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { swap, swapTokenData } from './mock';
+import { SwapListItem } from './SwapListItem';
+
+export default {
+  title: 'Components/Swap List Item',
+  component: SwapListItem,
+  args: {
+    status: 'running',
+  },
+  argTypes: {
+    status: {
+      name: 'status',
+      control: { type: 'select' },
+      options: ['running', 'failed', 'success'],
+      defaultValue: 'running',
+    },
+  },
+} as Meta<typeof SwapListItem>;
+
+export const Main = (props: PropTypes) => (
+  <SwapListItem
+    {...props}
+    requestId={swap.requestId}
+    creationTime={swap.creationTime}
+    swapTokenData={swapTokenData}
+  />
+);

package/src/components/SwapListItem/SwapListItem.styles.ts

@@ -0,0 +1,61 @@
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+  gap: 10,
+});
+
+export const Header = styled('div', {
+  display: 'flex',
+  padding: 0,
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const Main = styled('button', {
+  backgroundColor: '$neutral100',
+  border: 'none',
+  width: '100%',
+  borderRadius: '$xm',
+  gap: 10,
+  padding: 15,
+  cursor: 'pointer',
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    backgroundColor: '$surface600',
+    outline: 'none',
+  },
+});
+
+export const Date = styled('div', {
+  display: 'flex',
+  padding: '$2',
+  alignItems: 'flex-start',
+});
+
+export const LoadingMain = styled('div', {
+  backgroundColor: '$neutral100',
+  border: 'none',
+  width: '100%',
+  borderRadius: '$xm',
+  gap: 10,
+  padding: 15,
+});
+
+export const LoadingContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+  gap: 25,
+});

package/src/components/SwapListItem/SwapListItem.tsx

@@ -0,0 +1,64 @@
+import type { PropTypes } from './SwapListItem.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Skeleton } from '../Skeleton';
+import { Typography } from '../Typography';
+
+import { formattedDateAndTime, getStatus } from './SwapListItem.helpers';
+import {
+  Container,
+  Date,
+  Header,
+  LoadingContainer,
+  LoadingMain,
+  Main,
+} from './SwapListItem.styles';
+import { StatusColors } from './SwapListItem.types';
+import { SwapToken } from './SwapToken';
+
+export function SwapListItem(props: PropsWithChildren<PropTypes>) {
+  if ('isLoading' in props) {
+    return (
+      <LoadingMain>
+        <LoadingContainer>
+          <Header>
+            <Skeleton variant="text" size="medium" width={76} />
+            <Skeleton variant="text" size="medium" width={76} />
+          </Header>
+          <SwapToken isLoading={true} />
+        </LoadingContainer>
+      </LoadingMain>
+    );
+  }
+
+  const {
+    onClick,
+    requestId,
+    creationTime,
+    onlyShowTime,
+    status,
+    swapTokenData,
+  } = props;
+  return (
+    <Main onClick={onClick.bind(null, requestId)}>
+      <Container>
+        <Header>
+          <Date>
+            <Typography variant="label" size="medium" color="neutral800">
+              {formattedDateAndTime(creationTime, onlyShowTime)}
+            </Typography>
+          </Date>
+          <Typography
+            variant="label"
+            size="medium"
+            color={StatusColors[status]}>
+            {getStatus(status)}
+          </Typography>
+        </Header>
+        <SwapToken data={swapTokenData} status={status} />
+      </Container>
+    </Main>
+  );
+}

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

@@ -0,0 +1,47 @@
+export type Status = 'running' | 'failed' | 'success';
+
+export interface SwapListItemProps {
+  requestId: string;
+  creationTime: string;
+  status: Status;
+  onClick: (requestId: string) => void;
+  swapTokenData: SwapTokenData;
+  onlyShowTime?: boolean;
+}
+
+export interface LoadingProps {
+  isLoading: true;
+}
+
+export type PropTypes = SwapListItemProps | LoadingProps;
+
+export const StatusColors = {
+  failed: 'error500',
+  running: 'info500',
+  success: 'success500',
+};
+
+export interface SwapTokenData {
+  from: {
+    token: {
+      image: string;
+      displayName: string;
+    };
+    blockchain: {
+      image: string;
+    };
+    amount: string;
+  };
+
+  to: {
+    token: {
+      image: string;
+      displayName: string;
+    };
+    blockchain: {
+      image: string;
+    };
+    amount: string;
+    estimatedAmount?: string;
+  };
+}

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

@@ -0,0 +1,76 @@
+import { styled } from '../../theme';
+
+export const TokenContainer = styled('div', {
+  display: 'flex',
+  padding: 0,
+  alignItems: 'center',
+  gap: 10,
+});
+
+export const Images = styled('div', {
+  display: 'flex',
+  padding: 0,
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const Layout = styled('div', {
+  display: 'flex',
+  alignItems: 'flex-start',
+  variants: {
+    direction: {
+      column: {
+        flexDirection: 'column',
+        flex: '1 0 0',
+      },
+      row: {
+        padding: 0,
+      },
+    },
+  },
+});
+
+export const TopSection = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+});
+
+export const TokenInfo = styled('div', {
+  display: 'flex',
+  padding: 0,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+});
+
+export const Icon = styled('div', {
+  display: 'flex',
+  padding: '$4',
+  width: '$32',
+  height: '$32',
+
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const LayoutLoading = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const IconLoading = styled('div', {
+  display: 'flex',
+  width: '$24',
+  height: '$24',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const LoadingContainer = styled('div', {
+  display: 'flex',
+  padding: 0,
+  alignItems: 'center',
+  gap: 25,
+});

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="xsmall" variant="headline">
+              {fromToken.displayName}
+            </Typography>
+            <Icon>
+              <NextIcon size={24} color="black" />
+            </Icon>
+            <Typography size="xsmall" variant="headline">
+              {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="xsmall" variant="headline">
+              {fromToken.displayName}
+            </Typography>
+            {!!fromAmount && (
+              <Typography size="small" variant="body" color="neutral900">
+                {fromAmount}
+              </Typography>
+            )}
+          </TokenInfo>
+          <Icon>
+            <NextIcon size={24} color="black" />
+          </Icon>
+          <TokenInfo>
+            <Typography size="xsmall" variant="headline">
+              {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 { 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',
+
+  '&:hover': {
+    backgroundColor: '$secondary500',
+    borderColor: '$secondary500',
+  },
+  '&[data-state="checked"]': {
+    backgroundColor: '$secondary600',
+    borderColor: '$secondary600',
+  },
+  '-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'} />} />
 );