@rango-dev/ui 0.1.14-next.10 → 0.1.14-next.12

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

@@ -1,11 +1,14 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { SwapDetail, PropTypes } from './SwapDetail';
 import { swap } from './mock';
 
 export default {
   title: 'Components/Swap Detail',
   component: SwapDetail,
+  args:{
+    status:'running'
+  },
   argTypes: {
     status: {
       name: 'status',
@@ -14,6 +17,6 @@ export default {
       defaultValue: 'running',
     },
   },
-} as ComponentMeta<typeof SwapDetail>;
+} as Meta<typeof SwapDetail>;
 
 export const Main = (props: PropTypes) => <SwapDetail {...props} swap={swap} />;

package/src/components/SwapDetail/SwapDetail.tsx

@@ -3,7 +3,7 @@ import { PendingSwap } from '../../containers/History/types';
 import { styled } from '../../theme';
 import { Button } from '../Button';
 import { ArrowRightIcon } from '../Icon';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 import { Spinner } from '../Spinner';
 import { Token } from './Token';
 import { limitDecimalPlaces } from '../../helper';
@@ -71,9 +71,9 @@ export function SwapDetail({
               amount: limitDecimalPlaces(swap.inputAmount),
             }}
           />
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <ArrowRightIcon size={12} />
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <Token
             data={{
               token: {

package/src/components/SwapDetail/Token.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from '../../theme';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 import { Image } from '../common';
 
 const TokenContainer = styled('div', {
@@ -18,7 +18,7 @@ const TokenContainer = styled('div', {
 
 const TokenImage = styled('div', {
   position: 'relative',
-  'img': {
+  img: {
     borderRadius: '50%',
   },
   '.overlay': {
@@ -63,12 +63,12 @@ export function Token(props: PropTypes) {
           <Image src={blockchain.logo} alt={blockchain.name} size={12} />
         </div>
       </TokenImage>
-      <Spacer size={8} />
+      <Divider size={8} direction="horizontal" />
       {!!amount && <span className="amount">{props.data.amount}</span>}
       {!amount && estimatedAmount && (
         <span className="amount estimated">{props.data.estimatedAmount}</span>
       )}
-      <Spacer size={4} />
+      <Divider size={4} direction="horizontal" />
       {token.symbol}
     </TokenContainer>
   );

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { TextField, PropTypes } from './TextField';
 import { SearchIcon } from '../Icon';
@@ -8,6 +8,7 @@ export default {
   title: 'Components/Text Field',
 
   component: TextField,
+
   argTypes: {
     disabled: {
       name: 'disabled',
@@ -18,7 +19,7 @@ export default {
       type: 'string',
     },
   },
-} as ComponentMeta<typeof TextField>;
+} as Meta<typeof TextField>;
 
 export const Main = (args: PropTypes) => <TextField {...args} />;
 

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

@@ -1,17 +1,17 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { TokenList, PropTypes } from './TokenList';
 import { tokensMeta } from './mockData';
 
 export default {
-  title: 'Token List',
+  title: 'Components/Token List',
   component: TokenList,
   argTypes: {
     searchedText: {
       defaultValue: '',
     },
   },
-} as ComponentMeta<typeof TokenList>;
+} as Meta<typeof TokenList>;
 
 export const Main = (args: PropTypes) => (
   <TokenList {...args} list={tokensMeta} selected={tokensMeta[0]} />

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { Tooltip, PropTypes } from './Tooltip';
 import { AddWalletIcon } from '../Icon';
@@ -7,6 +7,11 @@ import { AddWalletIcon } from '../Icon';
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
+  args: {
+    content: 'I am a tooltip',
+    side: 'top',
+    color: 'gray',
+  },
   argTypes: {
     content: {
       name: 'content',
@@ -34,7 +39,7 @@ export default {
       defaultValue: 'gray',
     },
   },
-} as ComponentMeta<typeof Tooltip>;
+} as Meta<typeof Tooltip>;
 
 export const Main = (props: PropTypes) => (
   <div

package/src/components/Typography/Typography.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { Typography, PropTypes } from './Typography';
 
@@ -34,7 +34,7 @@ export default {
       control: { type: 'boolean' },
     },
   },
-} as ComponentMeta<typeof Typography>;
+} as Meta<typeof Typography>;
 
 export const Main = (props: PropTypes) => (
   <div>

package/src/components/Wallet/Wallet.stories.tsx

@@ -1,28 +1,22 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { PropTypes, Wallet } from './Wallet';
 import { WalletState } from '../../types/wallet';
 
 export default {
-  title: 'Wallet chip',
+  title: 'Components/Wallet chip',
   component: Wallet,
+  args: {
+    name: 'Coinbase',
+    image: 'https://app.rango.exchange/wallets/coinbase.svg',
+  },
   argTypes: {
-    title: {
-      name: 'title',
-      type: 'string',
-      defaultValue: 'Coinbase',
-    },
     image: {
       name: 'image',
       type: 'string',
       defaultValue: 'https://app.rango.exchange/wallets/coinbase.svg',
     },
-    disabled: {
-      name: 'disabled',
-      type: 'boolean',
-      defaultValue: false,
-    },
     state: {
       name: 'wallet state',
       control: {
@@ -31,6 +25,6 @@ export default {
       options: Object.values(WalletState),
     },
   },
-} as ComponentMeta<typeof Wallet>;
+} as Meta<typeof Wallet>;
 
 export const Main = (args: PropTypes) => <Wallet {...args}></Wallet>;

package/src/components/index.ts

@@ -1,23 +1,17 @@
 export * from './BestRoute';
-export * from './BlockchainSelector';
 export * from './Button';
 export * from './Checkbox';
 export * from './Chip';
-export * from './ConnectWalletsModal';
 export * from './Icon';
-export * from './LiquiditySourcesSelector';
 export * from './Modal';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
-export * from './Settings';
-export * from './Spacer';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';
 export * from './SwapDetail';
 export * from './Switch';
 export * from './TextField';
-export * from './TokenSelector';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';

package/src/containers/BlockchainSelector/BlockchainSelector.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { BlockchainSelector, PropTypes } from './BlockchainSelector';
+import { blockchainMeta } from '../../components/BlockchainsList/mockData';
+import { SwapContainer } from '../../components/SwapContainer/SwapContainer';
+
+export default {
+  title: 'Containers/Blockchain Selector',
+  component: BlockchainSelector,
+  args: {
+    type: 'Source',
+    loadingStatus: 'success',
+  },
+  argTypes: {
+    type: {
+      name: 'type',
+      defaultValue: 'Source',
+      control: {
+        type: 'select',
+        options: ['Source', 'Destination'],
+      },
+    },
+    loadingStatus: {
+      name: 'loadingStatus',
+      control: {
+        type: 'select',
+        options: ['loading', 'success', 'failed'],
+      },
+    },
+  },
+} as Meta<typeof BlockchainSelector>;
+
+export const Main = (args: PropTypes) => (
+  <SwapContainer>
+    <BlockchainSelector
+      {...args}
+      list={blockchainMeta}
+      selected={blockchainMeta[0]}
+    />
+  </SwapContainer>
+);

package/src/{components → containers}/BlockchainSelector/BlockchainSelector.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { BlockchainMeta } from 'rango-sdk';
-import { BlockchainsList } from '../BlockchainsList';
-import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
-import { Spinner } from '../Spinner';
+import { BlockchainsList } from '../../components/BlockchainsList';
+import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
+import { Spinner } from '../../components/Spinner';
 import { styled } from '../../theme';
 import { CSSProperties } from '@stitches/react';
 import { containsText } from '../../helper';
 import { LoadingStatus } from '../../types/meta';
-import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../Alert/NotFoundAlert';
+import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
 import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const ListContainer = styled('div', {

package/src/containers/ConfirmSwap/ConfirmSwap.stories.tsx

@@ -1,22 +1,235 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ConfirmSwap, PropTypes } from './ConfirmSwap';
-import { exampleFor5Wallets, wallets } from './mock';
+import { exampleFor5Wallets, wallets, bestRoute } from './mock';
+import React from 'react';
+import { Button, Typography, Divider, Image, GasIcon, styled } from '../../';
+import { BestRouteResponse } from 'rango-sdk';
+import { ChevronRightIcon } from '../../components';
+const Box = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  overflow: 'hidden',
+});
+
+const Container = styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutral100',
+      },
+      outlined: {
+        border: '1px solid $neutral100',
+      },
+    },
+  },
+
+  defaultVariants: {
+    type: 'filled',
+  },
+
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8',
+    },
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    },
+    '.amount': {
+      width: '30%',
+    },
+  },
+});
+
+const OutputContainer = styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$surface',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8',
+});
+
+const TokenPreview = ({
+  chain,
+  token,
+  ...props
+}: {
+  label: string;
+  amount: string;
+  usdValue?: number;
+  chain: {
+    displayName: string;
+    logo: string;
+  };
+  token: {
+    symbol: string;
+    image: string;
+  };
+}) => (
+  <Box>
+    <Container type={'outlined'}>
+      <div className="head">
+        <Typography variant="body2" color="neutral800">
+          {props.label}
+        </Typography>
+        <div>
+          <Typography
+            variant="caption"
+            color="neutral600"
+            className="usd-value">{`$${props.usdValue}`}</Typography>
+        </div>
+      </div>
+      <div className="form">
+        <Button
+          className="selectors"
+          variant="outlined"
+          prefix={<Image src={chain.logo} size={24} />}
+          align="start"
+          size="large">
+          {chain.displayName}
+        </Button>
+        <Divider size={12} direction="horizontal" />
+        <Button
+          className="selectors"
+          variant="outlined"
+          prefix={<Image src={token.image} size={24} />}
+          size="large"
+          align="start">
+          {token.symbol}
+        </Button>
+        <Divider size={12} direction="horizontal" />
+        <div className="amount">
+          <OutputContainer>
+            <Typography variant="h4">{props.amount}</Typography>
+          </OutputContainer>
+        </div>
+      </div>
+    </Container>
+  </Box>
+);
+const OverviewContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
+  fontSize: '$12',
+
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+const RoutesOverview = (props: { routes: BestRouteResponse; totalFee?: string }) => {
+  const swaps = props.routes.result?.swaps;
+  return (
+    <OverviewContainer>
+      <div className="routes">
+        {swaps?.map((swap, idx) => {
+          const isLast = idx + 1 == swaps.length;
+          return (
+            <React.Fragment key={idx}>
+              <div className="route">{swap.from.symbol}</div>
+              <ChevronRightIcon size={12} />
+              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      <div className="fee">
+        <GasIcon size={12} />
+        <Divider size={4} direction="horizontal" />${props.totalFee}
+      </div>
+    </OverviewContainer>
+  );
+};
+
+const previewInputs = () => (
+  <>
+    <TokenPreview
+      chain={{
+        displayName: bestRoute?.result?.swaps[0].from.blockchain || '',
+        logo: bestRoute?.result?.swaps[0].from.blockchainLogo || '',
+      }}
+      token={{
+        symbol: bestRoute?.result?.swaps[0].from.symbol || '',
+        image: bestRoute?.result?.swaps[0].from.logo || '',
+      }}
+      usdValue={2}
+      amount={'2.99'}
+      label="From"
+    />
+    <Divider size={12} />
+    <TokenPreview
+      chain={{
+        displayName: bestRoute?.result?.swaps[0].to.blockchain || '',
+        logo: bestRoute?.result?.swaps[0].to.blockchainLogo || '',
+      }}
+      token={{
+        symbol: bestRoute?.result?.swaps[0].to.symbol || '',
+        image: bestRoute?.result?.swaps[0].to.logo || '',
+      }}
+      usdValue={2}
+      amount={'2.99'}
+      label="To"
+    />
+  </>
+);
 
 export default {
   title: 'Containers/ConfirmSwap',
   component: ConfirmSwap,
-  argTypes: {
-    requiredWallets: {
-      defaultValue: ['BSC', 'OSMOSIS'],
-    },
+  args: {
+    requiredWallets: ['BSC', 'OSMOSIS'],
+    confirmButtonTitle: 'confirm',
   },
-} as ComponentMeta<typeof ConfirmSwap>;
+} as Meta<typeof ConfirmSwap>;
 
 export const Main = (props: PropTypes) => (
-  <ConfirmSwap {...props} selectableWallets={wallets} />
+  <ConfirmSwap
+    {...props}
+    selectableWallets={wallets}
+    previewInputs={<>{previewInputs()}</>}
+    previewRoutes={<RoutesOverview routes={bestRoute} totalFee={'0.32'} />}
+  />
 );
 
 export const With5Wallets = (props: PropTypes) => (
-  <ConfirmSwap {...props} selectableWallets={exampleFor5Wallets} />
+  <ConfirmSwap
+    {...props}
+    selectableWallets={exampleFor5Wallets}
+    previewInputs={<>{previewInputs()}</>}
+    previewRoutes={<RoutesOverview routes={bestRoute} totalFee={'0.32'} />}
+  />
 );

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { Alert, Spacer } from '../../components';
+import { Alert, Divider } from '../../components';
 import { Button } from '../../components/Button';
 import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
 import { SelectableWalletList } from '../../components/SelectableWalletList';
@@ -54,7 +54,7 @@ const Container = styled('div', {
 
 const Alerts = styled('div', { paddingBottom: '$16' });
 
-type Message = string | ReactNode
+type Message = string | ReactNode;
 
 export interface PropTypes {
   onBack: () => void;
@@ -89,6 +89,7 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
     warnings,
     extraMessages,
   } = props;
+console.log(props);
 
   return (
     <SecondaryPage
@@ -116,16 +117,26 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
           <Alerts>
             {errors?.map((error, index) => (
               <React.Fragment key={index}>
-                <Spacer direction="vertical" />
-                <Alert type="error" key={index} 
-                  {...(typeof error === 'string') ? {title: error} : {children: error} }/>
+                <Divider />
+                <Alert
+                  type="error"
+                  key={index}
+                  {...(typeof error === 'string'
+                    ? { title: error }
+                    : { children: error })}
+                />
               </React.Fragment>
             ))}
             {warnings?.map((warning, index) => (
               <React.Fragment key={index}>
-                <Spacer direction="vertical" />
-                <Alert type="warning" key={index} 
-                  {...(typeof warning === 'string') ? {title: warning} : {children: warning} }/>
+                <Divider />
+                <Alert
+                  type="warning"
+                  key={index}
+                  {...(typeof warning === 'string'
+                    ? { title: warning }
+                    : { children: warning })}
+                />
               </React.Fragment>
             ))}
           </Alerts>
@@ -133,9 +144,7 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
         {props.previewInputs || props.previewRoutes ? (
           <Section>
             {props.previewInputs}
-            {!!props.previewRoutes ? (
-              <Spacer size={16} direction="vertical" />
-            ) : null}
+            {!!props.previewRoutes ? <Divider size={16} /> : null}
             {props.previewRoutes}
           </Section>
         ) : null}
@@ -146,7 +155,7 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
             <Container key={index}>
               <div className="title">
                 <div className="num">{index + 1}</div>
-                <Spacer size={8} />
+                <Divider size={8} direction="horizontal" />
                 <Typography variant="body2">Your {wallet} Wallet</Typography>
               </div>
               {list.length === 0 && (

package/src/containers/ConnectWalletsModal/ConnectWallets.stories.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Meta } from '@storybook/react';
+import { ConnectWalletsModal, PropTypes } from './ConnectWalletsModal';
+import { walletsInfo } from './mockData';
+
+export default {
+  title: 'Containers/Connect Wallets Modal',
+  component: ConnectWalletsModal,
+} as Meta<typeof ConnectWalletsModal>;
+
+export const Main = (args: PropTypes) => {
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Open Modal</button>
+      <ConnectWalletsModal
+        {...args}
+        list={walletsInfo}
+        open={open}
+        onClose={() => setOpen(false)}
+      />
+    </div>
+  );
+};