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

package/src/containers/ConfirmSwap/mock.ts

@@ -31,8 +31,7 @@ export const bestRoute: BestRouteType = {
         to: {
           symbol: 'WETH.E',
           logo: 'https://api.rango.exchange/i/j9xgdC',
-          blockchainLogo:
-            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/avax_cchain.svg',
 
           address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
           blockchain: 'AVAX_CCHAIN',
@@ -73,8 +72,7 @@ export const bestRoute: BestRouteType = {
           blockchain: 'AVAX_CCHAIN',
           decimals: 18,
           usdPrice: 1329.24,
-          blockchainLogo:
-            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/avax_cchain.svg',
         },
         to: {
           symbol: 'AVAX',
@@ -83,8 +81,7 @@ export const bestRoute: BestRouteType = {
           blockchain: 'AVAX_CCHAIN',
           decimals: 18,
           usdPrice: 12.5,
-          blockchainLogo:
-            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/avax_cchain.svg',
         },
         fromAmount: '0.062064305934309070',
         fromAmountPrecision: null,
@@ -153,14 +150,14 @@ export const bestRoute: BestRouteType = {
 
 export const wallets: SelectableWallet[] = [
   {
-    walletType: WalletType.META_MASK,
+    walletType: WalletTypes.META_MASK,
     address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
     image: 'https://app.rango.exchange/wallets/metamask.svg',
     chain: 'BSC',
     selected: false,
   },
   {
-    walletType: WalletType.OKX,
+    walletType: WalletTypes.OKX,
     address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
     image: 'https://app.rango.exchange/wallets/okx.png',
     chain: 'BSC',
@@ -168,7 +165,7 @@ export const wallets: SelectableWallet[] = [
   },
 
   {
-    walletType: WalletType.KEPLR,
+    walletType: WalletTypes.KEPLR,
     address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
     image: 'https://app.rango.exchange/wallets/keplr.png',
     chain: 'OSMOSIS',
@@ -178,35 +175,35 @@ export const wallets: SelectableWallet[] = [
 
 export const exampleFor5Wallets: SelectableWallet[] = [
   {
-    walletType: WalletType.META_MASK,
+    walletType: WalletTypes.META_MASK,
     address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
     image: 'https://app.rango.exchange/wallets/metamask.svg',
     selected: false,
     chain: 'BSC',
   },
   {
-    walletType: WalletType.OKX,
+    walletType: WalletTypes.OKX,
     address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
     image: 'https://app.rango.exchange/wallets/okx.png',
     selected: false,
     chain: 'BSC',
   },
   {
-    walletType: WalletType.EXODUS,
+    walletType: WalletTypes.EXODUS,
     address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
     image: 'https://app.rango.exchange/wallets/exodus.png',
     selected: false,
     chain: 'BSC',
   },
   {
-    walletType: WalletType.MATH,
+    walletType: WalletTypes.MATH,
     address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
     image: 'https://app.rango.exchange/wallets/math-wallet.png',
     selected: false,
     chain: 'BSC',
   },
   {
-    walletType: WalletType.CLOVER,
+    walletType: WalletTypes.CLOVER,
     address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
     image: 'https://app.rango.exchange/wallets/clover.jpeg',
     selected: false,
@@ -214,7 +211,7 @@ export const exampleFor5Wallets: SelectableWallet[] = [
   },
 
   {
-    walletType: WalletType.KEPLR,
+    walletType: WalletTypes.KEPLR,
     address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
     image: 'https://app.rango.exchange/wallets/keplr.png',
     selected: false,

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

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

package/src/{components → containers}/ConnectWalletsModal/mockData.ts

@@ -1,5 +1,5 @@
 import { WalletInfo, WalletState } from '../../types/wallet';
-import { WalletType } from '@rango-dev/wallets-shared';
+import { WalletTypes } from '@rango-dev/wallets-shared';
 
 export const walletsInfo: WalletInfo[] = [
   {
@@ -7,7 +7,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -15,7 +15,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.CONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -23,14 +23,14 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.CONNECTING,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
     name: 'Coinbase',
     state: WalletState.NOT_INSTALLED,
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
     installLink:
       'https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad?hl=en',
@@ -40,7 +40,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -48,7 +48,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.CONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -56,7 +56,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -64,7 +64,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -72,7 +72,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -80,7 +80,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -88,7 +88,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -96,7 +96,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -104,7 +104,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -112,7 +112,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -120,7 +120,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
   {
@@ -128,7 +128,7 @@ export const walletsInfo: WalletInfo[] = [
     name: 'Coinbase',
     state: WalletState.DISCONNECTED,
     installLink: '',
-    type: WalletType.COINBASE,
+    type: WalletTypes.COINBASE,
     showOnMobile: true,
   },
 ];

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/index.ts

@@ -1,2 +1,3 @@
 export { History } from './History';
-export { SwapsGroup, GroupBy } from './SwapsGroup';
+export { SwapsGroup } from './SwapsGroup';
+export type { GroupBy } from './SwapsGroup';

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/containers/History/types.tsx

@@ -7,7 +7,7 @@ import {
   Transfer,
 } from 'rango-sdk';
 import { PendingSwapNetworkStatus, StepStatus } from '../../types/swaps';
-export { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+export type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 export type PendingSwapStep = {
   id: number;

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

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

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

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

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

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

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';