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

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

@@ -1,9 +1,8 @@
 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;
@@ -17,6 +16,7 @@ const ModalContent = styled('div', {
   display: 'grid',
   gap: '$8',
   gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+  overflow: 'auto',
 });
 
 export function ConnectWalletsModal(props: PropTypes) {
@@ -36,7 +36,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/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} />

package/src/containers/History/History.tsx

@@ -5,8 +5,8 @@ import { containsText } from '../../helper';
 import { styled } from '../../theme';
 import { PendingSwap } from './types';
 import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
-import { LoaderContainer } from '../../components/TokenSelector/TokenSelector';
 import { SwapsGroup, PropTypes as SwapsGroupPropTypes } from './SwapsGroup';
+import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const Container = styled('div', {
   overflowY: 'auto',

package/src/containers/History/mock.ts

@@ -172,7 +172,7 @@ export const pendingSwap: PendingSwap[] = [
         toLogo: 'https://api.rango.exchange/i/mJQPS2',
         startTransactionTime: 1673164519916,
         swapperId: 'Osmosis',
-        swapperLogo: '',
+        swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
         expectedOutputAmountHumanReadable: '1.540670',
         outputAmount: '1.540658',
         status: 'running',
@@ -307,7 +307,7 @@ export const pendingSwap: PendingSwap[] = [
       swaps: [
         {
           swapperId: 'Osmosis',
-          swapperLogo: '',
+          swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
           swapperType: 'DEX',
           from: {
             symbol: 'JUNO',
@@ -581,7 +581,7 @@ export const pendingSwap: PendingSwap[] = [
         {
           swapperId: 'Osmosis',
           swapperType: 'DEX',
-          swapperLogo: '',
+          swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
 
           from: {
             symbol: 'JUNO',

package/src/{components → containers}/LiquiditySourcesSelector/LiquiditySourcesSelector.stories.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import {
   LiquiditySourcesSelector,
   PropTypes,
 } from './LiquiditySourcesSelector';
-import { liquiditySources } from '../LiquiditySourceList/mockData';
+import { liquiditySources } from '../../components/LiquiditySourceList/mockData';
 
 export default {
-  title: 'Liquidity Sources Selector',
+  title: 'Containers/Liquidity Sources Selector',
   component: LiquiditySourcesSelector,
-} as ComponentMeta<typeof LiquiditySourcesSelector>;
+  args: {
+    loadingStatus: 'success',
+  },
+} as Meta<typeof LiquiditySourcesSelector>;
 
 export const Main = (args: PropTypes) => (
   <LiquiditySourcesSelector {...args} list={liquiditySources} />

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

@@ -2,9 +2,8 @@ import { CSSProperties } from '@stitches/react';
 import React from 'react';
 import { containsText } from '../../helper';
 import { LiquiditySource, LoadingStatus } from '../../types/meta';
-import { Button } from '../Button';
-import { LiquiditySourceList } from '../LiquiditySourceList';
-import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
+import { Button, SecondaryPage } from '../../components';
+import { LiquiditySourceList } from '../../components/LiquiditySourceList';
 
 const filterLiquiditySources = (
   liquiditySources: LiquiditySource[],

package/src/containers/Settings/Settings.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { Settings, PropTypes } from './Settings';
+import { liquiditySources } from '../../components/LiquiditySourceList/mockData';
+import { SwapContainer } from '../../components';
+
+export default {
+  title: 'Containers/Settings',
+  component: Settings,
+  args: {
+    slippages: [0.5, 1, 3, 5, 8, 13, 20],
+    selectedSlippage: 3,
+    minSlippage: 1,
+    maxSlippage: 10,
+  },
+} as Meta<typeof Settings>;
+
+
+export const Main = (args: PropTypes) => (
+  <SwapContainer>
+    <Settings
+      {...args}
+      liquiditySources={liquiditySources}
+      selectedLiquiditySources={liquiditySources.slice(0, 5)}
+    />
+  </SwapContainer>
+);

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

@@ -1,14 +1,17 @@
 import { styled } from '../../theme';
 import React, { useState } from 'react';
-import { AngleRightIcon } from '../Icon';
-import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
-import { Typography } from '../Typography';
-import { Chip } from '../Chip';
+
 import { LiquiditySource, LoadingStatus } from '../../types/meta';
-import { TextField } from '../TextField';
-import { Radio } from '../Radio';
-import { Switch } from '../Switch';
-import { Button } from '../Button';
+import {
+  AngleRightIcon,
+  Button,
+  Chip,
+  Radio,
+  SecondaryPage,
+  Switch,
+  TextField,
+  Typography,
+} from '../../components';
 
 const BaseContainer = styled('div', {
   borderRadius: '$5',

package/src/containers/SwapHistory/SwapHistory.stories.tsx

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

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -6,12 +6,11 @@ import {
   Typography,
   CheckCircleIcon,
   InfoCircleIcon,
-  Spacer,
+  Divider,
   Button,
   Alert,
   Drawer,
   Spinner,
-  Divider,
   Image,
 } from '../../components';
 import { styled } from '../../theme';
@@ -53,7 +52,7 @@ export const ErrorMsg = styled(Typography, {
 
 export const FeeContainer = styled('div', {
   paddingLeft: '$16',
-  color: '$neutral800'
+  color: '$neutral800',
 });
 
 export const Fee = styled('div', {
@@ -243,7 +242,7 @@ export function SwapHistory(props: PropTypes) {
                 onClick={onCopy.bind(null, pendingSwap?.requestId)}
               >
                 <RequestId>{pendingSwap?.requestId}</RequestId>
-                <Spacer size={4} />
+                <Divider size={4} direction="horizontal" />
                 <Button type="primary" variant="ghost" size="compact">
                   {isCopied ? 'Copied!' : 'Copy'}
                 </Button>
@@ -408,7 +407,7 @@ export function SwapHistory(props: PropTypes) {
             >
               Skip
             </Button>
-            <Spacer size={16} />
+            <Divider size={16} direction="horizontal" />
             <Button
               variant="contained"
               type="error"

package/src/containers/SwapHistory/mock.ts

@@ -34,7 +34,7 @@ export const pendingSwap: PendingSwap = {
       {
         swapperId: 'Osmosis',
         swapperType: 'DEX',
-        swapperLogo: '',
+        swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
         from: {
           symbol: 'JUNO',
           logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
@@ -171,7 +171,7 @@ export const pendingSwap: PendingSwap = {
       toLogo: 'https://api.rango.exchange/i/mJQPS2',
       startTransactionTime: 1673164519916,
       swapperId: 'Osmosis',
-      swapperLogo: '',
+      swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
       expectedOutputAmountHumanReadable: '1.540670',
       outputAmount: '1.540658',
       status: 'running',

package/src/{components → containers}/TokenSelector/TokenSelector.stories.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { TokenSelector, PropTypes } from './TokenSelector';
-import { tokensMeta } from '../TokenList/mockData';
+import { tokensMeta } from '../../components/TokenList/mockData';
 
 export default {
-  title: 'Token Selector',
+  title: 'Containers/Token Selector',
   component: TokenSelector,
-  argTypes: {
-    type: {
-      defaultValue: 'Source',
-    },
+  args: {
+    type: 'Source',
+    loadingStatus: 'success',
   },
-} as ComponentMeta<typeof TokenSelector>;
+} as Meta<typeof TokenSelector>;
 
 export const Main = (args: PropTypes) => (
   <TokenSelector {...args} list={tokensMeta} selected={tokensMeta[0]} />

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { containsText } from '../../helper';
-import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
-import { TokenList } from '../TokenList';
-import { TokenWithAmount } from '../TokenList/TokenList';
+
 import { LoadingStatus } from '../../types/meta';
-import { Spinner } from '../Spinner';
-import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../Alert/NotFoundAlert';
 import { styled } from '../../theme';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { LoadingFailedAlert, SecondaryPage, Spinner } from '../../components';
+import {
+  TokenList,
+  TokenWithAmount,
+} from '../../components/TokenList/TokenList';
 
 export const LoaderContainer = styled('div', {
   display: 'flex',

package/src/containers/index.ts

@@ -1,3 +1,8 @@
 export * from './ConfirmSwap';
 export * from './History';
 export * from './SwapHistory';
+export * from './BlockchainSelector';
+export * from './ConnectWalletsModal';
+export * from './LiquiditySourcesSelector';
+export * from './TokenSelector';
+export * from './Settings';

package/dist/components/BlockchainSelector/BlockchainSelector.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
-import { BlockchainSelector, PropTypes } from './BlockchainSelector';
-declare const _default: ComponentMeta<typeof BlockchainSelector>;
-export default _default;
-export declare const Main: (args: PropTypes) => JSX.Element;

package/dist/components/ConnectWalletsModal/ConnectWallets.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
-import { ConnectWalletsModal, PropTypes } from './ConnectWalletsModal';
-declare const _default: ComponentMeta<typeof ConnectWalletsModal>;
-export default _default;
-export declare const Main: (args: PropTypes) => JSX.Element;

package/dist/components/LiquiditySourcesSelector/LiquiditySourcesSelector.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
-import { LiquiditySourcesSelector, PropTypes } from './LiquiditySourcesSelector';
-declare const _default: ComponentMeta<typeof LiquiditySourcesSelector>;
-export default _default;
-export declare const Main: (args: PropTypes) => JSX.Element;

package/dist/components/Settings/Settings.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
-import { Settings, PropTypes } from './Settings';
-declare const _default: ComponentMeta<typeof Settings>;
-export default _default;
-export declare const Main: (args: PropTypes) => JSX.Element;

package/dist/components/Spacer/Spacer.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface PropTypes {
-    size?: 4 | 8 | 12 | 16 | 18 | 20 | 24;
-    direction?: 'vertical' | 'horizontal';
-}
-export declare function Spacer({ size, direction }: PropTypes): JSX.Element;

package/dist/components/Spacer/Spacer.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
-import { Spacer, PropTypes } from './Spacer';
-declare const _default: ComponentMeta<typeof Spacer>;
-export default _default;
-export declare const Main: (props: PropTypes) => JSX.Element;

package/dist/components/Spacer/index.d.ts

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

package/dist/components/SwapContainer/SwapContainer.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
-import { SwapContainer, PropTypes } from './SwapContainer';
-declare const _default: ComponentMeta<typeof SwapContainer>;
-export default _default;
-export declare const Main: (args: PropTypes) => JSX.Element;

package/dist/components/TokenSelector/TokenSelector.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
-import { TokenSelector, PropTypes } from './TokenSelector';
-declare const _default: ComponentMeta<typeof TokenSelector>;
-export default _default;
-export declare const Main: (args: PropTypes) => JSX.Element;

package/src/components/BlockchainSelector/BlockchainSelector.stories.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { BlockchainSelector, PropTypes } from './BlockchainSelector';
-import { blockchainMeta } from '../BlockchainsList/mockData';
-import { SwapContainer } from '../SwapContainer/SwapContainer';
-
-export default {
-  title: 'Blockchain Selector',
-  component: BlockchainSelector,
-  argTypes: {
-    type: {
-      defaultValue: 'Source',
-    },
-  },
-} as ComponentMeta<typeof BlockchainSelector>;
-
-export const Main = (args: PropTypes) => (
-  <SwapContainer>
-    <BlockchainSelector
-      {...args}
-      list={blockchainMeta}
-      selected={blockchainMeta[0]}
-    />
-  </SwapContainer>
-);

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { ConnectWalletsModal, PropTypes } from './ConnectWalletsModal';
-import { walletsInfo } from './mockData';
-
-export default {
-  title: 'Connect Wallets Modal',
-  component: ConnectWalletsModal,
-} as ComponentMeta<typeof ConnectWalletsModal>;
-
-export const Main = (args: PropTypes) => (
-  <ConnectWalletsModal {...args} list={walletsInfo} />
-);

package/src/components/Settings/Settings.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { Settings, PropTypes } from './Settings';
-import { SwapContainer } from '../SwapContainer/SwapContainer';
-import { liquiditySources } from '../LiquiditySourceList/mockData';
-
-export default {
-  title: 'Settings',
-  component: Settings,
-  argTypes: {
-    slippages: {
-      defaultValue: [0.5, 1, 3, 5, 8, 13, 20],
-    },
-    selectedSlippage: { defaultValue: 3 },
-    liquiditySources: {
-      defaultValue: liquiditySources,
-    },
-    selectedLiquiditySources: {
-      defaultValue: liquiditySources.slice(0, 5),
-    },
-    minSlippage: {
-      defaultValue: 1,
-    },
-    maxSlippage: {
-      defaultValue: 10,
-    },
-  },
-} as ComponentMeta<typeof Settings>;
-
-export const Main = (args: PropTypes) => (
-  <SwapContainer>
-    <Settings {...args} />
-  </SwapContainer>
-);

package/src/components/Spacer/Spacer.stories.tsx

@@ -1,31 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import React from 'react';
-import { Typography } from '../Typography';
-import { Spacer, PropTypes } from './Spacer';
-
-export default {
-  title: 'Components/Spacer',
-  component: Spacer,
-  argTypes: {
-    size: {
-      name: 'size',
-      control: { type: 'select' },
-      options: [12, 16, 18, 20],
-      defaultValue: 12,
-    },
-    direction: {
-      name: 'direction',
-      control: { type: 'select' },
-      options: ['vertical', 'horizontal'],
-      defaultValue: 'horizontal',
-    },
-  },
-} as ComponentMeta<typeof Spacer>;
-
-export const Main = (props: PropTypes) => (
-  <div style={{ display: props.direction === 'horizontal' ? 'flex' : 'block' }}>
-    <Typography variant="body1">spacer </Typography>
-    <Spacer {...props} />
-    <Typography variant="body1">spacer</Typography>
-  </div>
-);

package/src/components/Spacer/Spacer.tsx

@@ -1,128 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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>
-);