@rango-dev/ui 0.1.10-next.102

package/src/components/Spacer/Spacer.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { styled } from '../../theme';
+
+const SpacerContainer = styled('div', {
+  variants: {
+    size: {
+      4: {},
+      8: {},
+      12: {},
+      16: {},
+      18: {},
+      20: {},
+      24: {},
+    },
+    direction: {
+      vertical: {},
+      horizontal: {},
+    },
+  },
+  compoundVariants: [
+    {
+      size: 4,
+      direction: 'horizontal',
+      css: {
+        width: '$4',
+      },
+    },
+    {
+      size: 4,
+      direction: 'vertical',
+      css: {
+        height: '$4',
+      },
+    },
+    {
+      size: 8,
+      direction: 'horizontal',
+      css: {
+        width: '$8',
+      },
+    },
+    {
+      size: 8,
+      direction: 'vertical',
+      css: {
+        height: '$8',
+      },
+    },
+    {
+      size: 12,
+      direction: 'horizontal',
+      css: {
+        width: '$12',
+      },
+    },
+    {
+      size: 12,
+      direction: 'vertical',
+      css: {
+        height: '$12',
+      },
+    },
+    {
+      size: 16,
+      direction: 'horizontal',
+      css: {
+        width: '$16',
+      },
+    },
+    {
+      size: 16,
+      direction: 'vertical',
+      css: {
+        height: '$16',
+      },
+    },
+    {
+      size: 18,
+      direction: 'horizontal',
+      css: {
+        width: '$18',
+      },
+    },
+    {
+      size: 18,
+      direction: 'vertical',
+      css: {
+        height: '$18',
+      },
+    },
+    {
+      size: 20,
+      direction: 'horizontal',
+      css: {
+        width: '$20',
+      },
+    },
+    {
+      size: 20,
+      direction: 'vertical',
+      css: {
+        height: '$20',
+      },
+    },
+    {
+      size: 24,
+      direction: 'horizontal',
+      css: {
+        width: '$24',
+      },
+    },
+    {
+      size: 24,
+      direction: 'vertical',
+      css: {
+        height: '$24',
+      },
+    },
+  ],
+});
+export interface PropTypes {
+  size?: 4 | 8 | 12 | 16 | 18 | 20 | 24;
+  direction?: 'vertical' | 'horizontal';
+}
+
+export function Spacer({ size = 12, direction = 'horizontal' }: PropTypes) {
+  return <SpacerContainer size={size} direction={direction} />;
+}

package/src/components/Spacer/index.ts

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

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,25 @@
+import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Spinner, PropTypes } from './Spinner';
+
+export default {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    color: {
+      name: 'color',
+      control: { type: 'select' },
+      options: ['primary', 'error', 'warning', 'success', 'black', 'white'],
+      defaultValue: 'primary',
+    },
+
+    size: {
+      name: 'size',
+      control: { type: 'radio' },
+      options: [16, 20, 24],
+      defaultValue: 16,
+    },
+  },
+} as ComponentMeta<typeof Spinner>;
+
+export const Main = (props: PropTypes) => <Spinner {...props} />;

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { keyframes, styled } from '../../theme';
+
+const spin = keyframes({
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+const SpinnerContainer = styled('div', {
+  borderRadius: '50%',
+  position: 'relative',
+  border: `2px solid $neutrals300`,
+  borderRight: `2px solid`,
+  animation: `${spin} 1.5s linear infinite`,
+  margin: `0px $8`,
+  variants: {
+    color: {
+      primary: {
+        borderRightColor: '$primary',
+      },
+      error: {
+        borderRightColor: '$error',
+      },
+      warning: {
+        borderRightColor: '$warning',
+      },
+      success: {
+        borderRightColor: '$success',
+      },
+      black: {
+        borderRightColor: '$black',
+      },
+      white: {
+        borderRightColor: '$white',
+      },
+    },
+    size: {
+      16: {
+        width: '$16',
+        height: '$16',
+      },
+      20: {
+        width: '$20',
+        height: '$20',
+      },
+      24: {
+        width: '$24',
+        height: '$24',
+      },
+    },
+  },
+});
+export interface PropTypes {
+  size?: 16 | 20 | 24;
+  color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
+}
+
+export function Spinner({ size = 16, color = 'primary' }: PropTypes) {
+  return <SpinnerContainer size={size} color={color} />;
+}

package/src/components/Spinner/index.ts

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

package/src/components/StatusDrawer/StatusDrawer.stories.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { StatusDrawer, PropTypes } from './StatusDrawer';
+import { SwapContainer } from '../SwapContainer';
+
+export default {
+  name: 'Components/StatusDrawer',
+  component: StatusDrawer,
+  argTypes: {
+    status: {
+      name: 'status',
+      control: { type: 'select' },
+      options: ['continue', 'success', 'failed'],
+      defaultValue: 'success',
+    },
+    title: {
+      name: 'title',
+      control: { type: 'text' },
+      defaultValue: 'Swap successful',
+    },
+    subtitle: {
+      name: 'subtitle',
+      control: { type: 'text' },
+      defaultValue:
+        'There are now 0.0493 BNB in 0x542...C2Df wallet on BSC chain.',
+    },
+  },
+} as ComponentMeta<typeof StatusDrawer>;
+
+export const Main = (args: PropTypes) => {
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <SwapContainer>
+      <button onClick={() => setOpen(true)}>Open Drawer</button>
+      <StatusDrawer {...args} open={open} onClose={() => setOpen(false)} />
+    </SwapContainer>
+  );
+};

package/src/components/StatusDrawer/StatusDrawer.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { styled } from '../../theme';
+import { Button } from '../Button';
+import { Drawer } from '../Drawer';
+import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
+import { Spacer } from '../Spacer';
+import { Typography } from '../Typography';
+
+export interface PropTypes {
+  open: boolean;
+  onClose: () => void;
+  status: 'continue' | 'success' | 'failed';
+  title: string;
+  subtitle: string;
+  onSubmit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+const Header = styled('div', {
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginBottom: '$16',
+});
+const Footer = styled('div', {
+  padding: '$20',
+  display: 'flex',
+  alignItems: 'center',
+});
+export function StatusDrawer({
+  status = 'success',
+  title,
+  subtitle,
+  onSubmit,
+  onCancel,
+  ...props
+}: PropTypes) {
+  return (
+    <Drawer
+      container={document.body}
+      content={
+        <>
+          <Header>
+            {status === 'success' ? (
+              <CheckCircleIcon color="success" size={24} />
+            ) : status === 'failed' ? (
+              <InfoCircleIcon color="error" size={24} />
+            ) : (
+              <WarningIcon color="warning" size={24} />
+            )}
+            <Typography variant="h6">{title}</Typography>
+          </Header>
+          <Typography variant="body2">{subtitle}</Typography>
+        </>
+      }
+      footer={
+        <Footer>
+          {status !== 'failed' && (
+            <Button fullWidth onClick={onCancel}>
+              {status === 'success' ? 'Cancel' : 'See detailes'}
+            </Button>
+          )}
+          <Spacer size={16} />
+          <Button
+            fullWidth
+            onClick={onSubmit}
+            variant="contained"
+            type="primary"
+          >
+            {status === 'success'
+              ? 'Done'
+              : status === 'continue'
+              ? 'Continue'
+              : 'See detailes'}
+          </Button>
+        </Footer>
+      }
+      anchor="bottom"
+      {...props}
+    />
+  );
+}

package/src/components/StatusDrawer/index.ts

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

package/src/components/StepDetail/StepDetail.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { StepDetail, PropTypes } from './StepDetail';
+
+export default {
+  title: 'Components/StepDetail',
+  component: StepDetail,
+  argTypes: {
+    logo: {
+      name: 'logo',
+      control: { type: 'text' },
+      defaultValue: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+    },
+    chainLogo: {
+      name: 'chainLogo',
+      control: { type: 'text' },
+      defaultValue: 'https://api.rango.exchange/swappers/osmosis.png',
+    },
+    amount: {
+      name: 'amount',
+      control: { type: 'text' },
+      defaultValue: '1',
+    },
+    symbol: {
+      name: 'symbol',
+      control: { type: 'text' },
+      defaultValue: 'JUNO',
+    },
+    blockchain: {
+      name: 'chainAlt',
+      control: { type: 'text' },
+      defaultValue: 'OSMOSIS',
+    },
+  },
+} as ComponentMeta<typeof StepDetail>;
+
+export const Main = (props: PropTypes) => <StepDetail {...props} />;

package/src/components/StepDetail/StepDetail.tsx

@@ -0,0 +1,109 @@
+import React, { PropsWithChildren } from 'react';
+import { styled } from '../../theme';
+import { Typography } from '../Typography';
+
+const StepLogoContainer = styled('div', {
+  position: 'relative',
+  width: '$28',
+  height: '$28',
+  variants: {
+    direction: {
+      vertical: {
+        margin: 'auto',
+      },
+      horizontal: {},
+    },
+  },
+});
+const Logo = styled('img', {
+  width: '$28',
+  height: '$28',
+  borderRadius: '50%',
+});
+
+const ChainLogo = styled('div', {
+  position: 'absolute',
+  right: -4,
+  bottom: -4,
+  width: '$16',
+  height: '$16',
+  padding: '$2',
+  borderRadius: '50%',
+  backgroundColor: '$background',
+  border: '1px solid $neutrals400',
+
+  img: {
+    width: '100%',
+    display: 'block',
+  },
+});
+const StepContainer = styled('div', {
+  display: 'flex',
+  variants: {
+    direction: {
+      horizontal: {
+        alignItems: 'center',
+      },
+      vertical: {
+        flexDirection: 'column',
+        textAlign: 'center',
+        justifyContent: 'center',
+      },
+    },
+  },
+});
+const Detail = styled('div', {
+  variants: {
+    pl: {
+      true: {
+        paddingLeft: '$4',
+        '@lg': {
+          paddingLeft: '$8',
+        },
+      },
+      false: {
+        paddingTop: '$8',
+      },
+    },
+  },
+});
+const SubTitle = styled(Typography, {
+  color: '$neutrals600',
+  display: 'block',
+});
+export interface PropTypes {
+  logo: string;
+  chainLogo: string;
+  amount: string;
+  symbol: string;
+  blockchain: string;
+  direction?: 'horizontal' | 'vertical';
+}
+
+export function StepDetail({
+  logo,
+  chainLogo,
+  amount,
+  symbol,
+  blockchain,
+  direction = 'horizontal',
+}: PropsWithChildren<PropTypes>) {
+  return (
+    <StepContainer direction={direction}>
+      <StepLogoContainer direction={direction}>
+        <Logo src={logo} alt={symbol} />
+        <ChainLogo>
+          <img src={chainLogo} alt={blockchain} />
+        </ChainLogo>
+      </StepLogoContainer>
+      <Detail pl={direction === 'horizontal'}>
+        <Typography noWrap variant={direction === 'vertical' ? 'body2' : 'h6'}>
+          {amount ? parseFloat(amount).toFixed(2) : '?'} {symbol}
+        </Typography>
+        <SubTitle noWrap variant="caption" color="neutrals800">
+          on {blockchain}
+        </SubTitle>
+      </Detail>
+    </StepContainer>
+  );
+}

package/src/components/StepDetail/index.ts

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

package/src/components/SwapContainer/SwapContainer.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { SwapContainer, PropTypes } from './SwapContainer';
+
+export default {
+  title: 'Components/Swap Box',
+  component: SwapContainer,
+} as ComponentMeta<typeof SwapContainer>;
+
+export const Main = (args: PropTypes) => (
+  <SwapContainer {...args}></SwapContainer>
+);

package/src/components/SwapContainer/SwapContainer.tsx

@@ -0,0 +1,43 @@
+import { CSSProperties } from '@stitches/react';
+import React, { PropsWithChildren } from 'react';
+import { styled } from '../../theme';
+
+const MainContainer = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '$10',
+  boxShadow: '$s',
+  width: '100%',
+  minWidth: '375px',
+  maxWidth: '512px',
+  maxHeight: '595px',
+  padding: '$16',
+  boxSizing: 'border-box',
+  backgroundColor: '$background',
+  variants: {
+    fixedHeight: {
+      true: {
+        height: '595px',
+      },
+      false: {
+        height: 'auto',
+      },
+    },
+  },
+});
+
+export interface PropTypes {
+  style?: CSSProperties;
+  fixedHeight?: boolean;
+}
+
+export function SwapContainer(props: PropsWithChildren<PropTypes>) {
+  const { children, style, fixedHeight = true } = props;
+
+  return (
+    <MainContainer style={style} id="swap-box" fixedHeight={fixedHeight}>
+      {children}
+    </MainContainer>
+  );
+}

package/src/components/SwapContainer/index.ts

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

package/src/components/SwapDetail/SwapDetail.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { SwapDetail, PropTypes } from './SwapDetail';
+import { swap } from './mock';
+
+export default {
+  title: 'Components/Swap Detail',
+  component: SwapDetail,
+  argTypes: {
+    status: {
+      name: 'status',
+      control: { type: 'select' },
+      options: ['running', 'failed', 'success'],
+      defaultValue: 'running',
+    },
+  },
+} as ComponentMeta<typeof SwapDetail>;
+
+export const Main = (props: PropTypes) => <SwapDetail {...props} swap={swap} />;

package/src/components/SwapDetail/SwapDetail.tsx

@@ -0,0 +1,112 @@
+import React, { PropsWithChildren } from 'react';
+import { PendingSwap } from '../../containers/History/types';
+import { styled } from '../../theme';
+import { Button } from '../Button';
+import { ArrowRightIcon } from '../Icon';
+import { Spacer } from '../Spacer';
+import { Spinner } from '../Spinner';
+import { Token } from './Token';
+
+const Container = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$16 0',
+  borderBottom: '1px solid $neutrals300',
+
+  '& > .info': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  '.status': {
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    fontSize: '$12',
+  },
+
+  '&.running': {
+    color: '$foreground',
+  },
+  '&.failed,&.success': {
+    color: '$neutrals600',
+  },
+
+  '&.failed .status': {
+    color: '$error',
+  },
+  '&.success .status': {
+    color: '$success',
+  },
+});
+
+export interface PropTypes {
+  swap: PendingSwap;
+  status: 'running' | 'failed' | 'success';
+  onClick: (requestId: string) => void;
+}
+
+export function SwapDetail({
+  swap,
+  status,
+  onClick,
+}: PropsWithChildren<PropTypes>) {
+  const firstStep = swap.steps[0];
+  const lastStep = swap.steps[swap.steps.length - 1];
+
+  return (
+    <Button
+      variant="ghost"
+      size="free"
+      fullWidth
+      onClick={onClick.bind(null, swap.requestId)}
+    >
+      <Container className={`${status}`}>
+        <div className="info">
+          <Token
+            data={{
+              token: {
+                logo: firstStep.fromLogo,
+                symbol: firstStep.fromSymbol,
+              },
+              blockchain: {
+                // @ts-ignore
+                logo: firstStep.fromBlockchainLogo,
+                name: firstStep.fromBlockchain,
+              },
+              amount: swap.inputAmount,
+            }}
+          />
+          <Spacer size={12} />
+          <ArrowRightIcon size={12} />
+          <Spacer size={12} />
+          <Token
+            data={{
+              token: {
+                logo: lastStep.toLogo,
+                symbol: lastStep.toSymbol,
+              },
+              blockchain: {
+                // @ts-ignore
+                logo: lastStep.toBlockchainLogo,
+                name: lastStep.toBlockchain,
+              },
+              amount:
+                lastStep.outputAmount ||
+                lastStep.expectedOutputAmountHumanReadable ||
+                '',
+            }}
+          />
+        </div>
+        <div className={`status`}>
+          {status === 'running' ? (
+            <Spinner size={24} color="primary" />
+          ) : (
+            status
+          )}
+        </div>
+      </Container>
+    </Button>
+  );
+}