@rango-dev/ui 0.1.14-next.0 → 0.1.14-next.11

package/src/components/TextField/TextField.tsx

@@ -3,10 +3,10 @@ import React, { PropsWithChildren, RefObject } from 'react';
 import { styled } from '../../theme';
 
 const InputContainer = styled('div', {
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   padding: '1px',
   boxSizing: 'border-box',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   borderRadius: '$5',
   height: '$48',
   display: 'flex',
@@ -43,7 +43,7 @@ const InputContainer = styled('div', {
     },
     disabled: {
       true: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         cursor: 'not-allowed',
         filter: 'grayscale(100%)',
       },

package/src/components/TokenList/TokenItem.tsx

@@ -66,7 +66,7 @@ export function TokenItem(props: PropTypes) {
       >
         <TokenNameContainer>
           <Typography variant="body1">{token.symbol}</Typography>
-          <Typography variant="caption" color="neutrals600">
+          <Typography variant="caption" color="neutral600">
             {token.name}
           </Typography>
         </TokenNameContainer>

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/Tooltip/Tooltip.tsx

@@ -46,7 +46,7 @@ const TooltipContent = styled(RadixTooltip.Content, {
         color: '$white',
       },
       gray: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         color: '$black',
       },
       black: {
@@ -76,7 +76,7 @@ const TooltipArrow = styled(RadixTooltip.Arrow, {
         fill: '$success',
       },
       gray: {
-        fill: '$neutrals300',
+        fill: '$neutral100',
       },
       black: {
         fill: '$black',

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/{dist/components/BlockchainSelector/index.d.ts → src/containers/BlockchainSelector/index.ts}

@@ -1 +1 @@
-export { BlockchainSelector } from './BlockchainSelector';
+export { BlockchainSelector } from './BlockchainSelector';

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';
@@ -14,7 +14,7 @@ const MainContainer = styled('div', {
 const Section = styled('div', {
   paddingBottom: '$32',
   marginBottom: '$32',
-  borderBottom: '1px solid $neutrals400',
+  borderBottom: '1px solid $neutral400',
 });
 
 const Footer = styled('div', {
@@ -39,14 +39,14 @@ const Container = styled('div', {
     alignItems: 'center',
   },
   '.num': {
-    backgroundColor: '$neutrals300',
+    backgroundColor: '$neutral100',
     display: 'inline-flex',
     width: '24px',
     height: '24px',
-    color: '$neutrals800',
+    color: '$neutral800',
     borderRadius: '50%',
     fontSize: '$14',
-    border: '1px solid $neutrals400',
+    border: '1px solid $neutral400',
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -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>
+  );
+};

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

@@ -1,22 +1,21 @@
 import React from 'react';
 import { styled } from '../../theme';
 import { WalletInfo } from '../../types/wallet';
-import { Modal } from '../Modal';
 import { WalletType } from '@rango-dev/wallets-shared';
-import { Wallet } from '../Wallet';
+import { Modal, Wallet } from '../../components';
 
 export interface PropTypes {
   open: boolean;
   list: WalletInfo[];
   onSelect: (walletType: WalletType) => void;
   onClose: () => void;
-  error?: string;
 }
 
 const ModalContent = styled('div', {
   display: 'grid',
   gap: '$8',
   gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+  overflow: 'auto',
 });
 
 export function ConnectWalletsModal(props: PropTypes) {
@@ -36,7 +35,7 @@ export function ConnectWalletsModal(props: PropTypes) {
       open={open}
       content={Content}
       onClose={onClose}
-      containerStyle={{ width: '75%', maxWidth: '30rem', height: '70%' }}
+      containerStyle={{ width: '75%', maxWidth: '30rem', height: '60%' }}
     />
   );
 }

package/{dist/components/ConnectWalletsModal/index.d.ts → src/containers/ConnectWalletsModal/index.ts}

@@ -1 +1 @@
-export { ConnectWalletsModal } from './ConnectWalletsModal';
+export { ConnectWalletsModal } from './ConnectWalletsModal';

package/src/containers/History/History.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { History, PropTypes } from './History';
 import { pendingSwap } from './mock';
@@ -7,7 +7,7 @@ import { pendingSwap } from './mock';
 export default {
   title: 'Containers/History',
   component: History,
-} as ComponentMeta<typeof History>;
+} as Meta<typeof History>;
 
 export const Main = (props: PropTypes) => (
   <History {...props} list={pendingSwap} />