@rango-dev/ui 0.33.1-next.0 → 0.33.1-next.2

package/src/components/Modal/Modal.stories.tsx

@@ -1,33 +0,0 @@
-import type { PropTypes } from './Modal.types';
-import type { Meta } from '@storybook/react';
-
-import React, { useState } from 'react';
-
-import { MessageBox } from '../MessageBox';
-
-import { Modal } from './Modal';
-
-export default {
-  name: 'Modal',
-  component: Modal,
-  args: {
-    title: 'I`m a modal',
-    container: document.getElementById('storybook-root'),
-  },
-} as Meta<typeof Modal>;
-
-export const Main = (args: PropTypes) => {
-  const [open, setOpen] = useState<boolean>(false);
-  return (
-    <div>
-      <button onClick={() => setOpen(true)}>Open Modal</button>
-      <Modal {...args} open={open} onClose={() => setOpen(false)}>
-        <MessageBox
-          type="warning"
-          title="Title"
-          description="This is a test text"
-        />
-      </Modal>
-    </div>
-  );
-};

package/src/components/NotFound/NotFound.stories.tsx

@@ -1,17 +0,0 @@
-import type { PropTypes } from './NotFound.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { NotFound } from './NotFound';
-
-export default {
-  title: 'Components/NotFound',
-  component: NotFound,
-  args: {
-    title: 'Not Found!',
-    description: 'Try using different keywords',
-  },
-} as Meta<typeof NotFound>;
-
-export const Main = (args: PropTypes) => <NotFound {...args} />;

package/src/components/Popover/Popover.stories.tsx

@@ -1,63 +0,0 @@
-import type { PropTypes } from './Popover.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { AddIcon, NotificationsIcon } from '../../icons';
-import { Button } from '../Button';
-import { List } from '../List';
-
-import { Popover } from './Popover';
-
-function PopoverContent() {
-  return (
-    <div style={{ width: '300px' }}>
-      <div>I'm a Popover</div>
-      <List
-        items={[
-          { id: 'one', title: 'one' },
-          { id: 'two', title: 'two' },
-          { id: 'three', title: 'three' },
-          { id: 'four', title: 'four' },
-        ]}
-      />
-    </div>
-  );
-}
-
-export default {
-  title: 'Components/Popover',
-  component: Popover,
-  args: {
-    content: <PopoverContent />,
-    side: 'bottom',
-  },
-  argTypes: {
-    content: {
-      name: 'content',
-      control: { type: 'component' },
-      defaultValue: null,
-    },
-    side: {
-      name: 'side',
-      control: { type: 'select' },
-      options: ['top', 'right', 'bottom', 'left'],
-      defaultValue: 'bottom',
-    },
-  },
-} as Meta<typeof Popover>;
-
-export const Main = (props: PropTypes) => (
-  <div style={{ display: 'flex' }}>
-    <Popover {...props}>
-      <Button>
-        <AddIcon size={24} />
-      </Button>
-    </Popover>
-    <Popover {...props}>
-      <Button>
-        <NotificationsIcon size={24} />
-      </Button>
-    </Popover>
-  </div>
-);

package/src/components/PriceImpact/PriceImpact.stories.tsx

@@ -1,21 +0,0 @@
-import type { PriceImpactProps } from './PriceImpact.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { PriceImpact } from './PriceImpact';
-
-const meta: Meta<typeof PriceImpact> = {
-  title: 'Components/Price Impact',
-  component: PriceImpact,
-  args: {
-    size: 'small',
-    outputUsdValue: '28,490',
-    percentageChange: '2.21',
-    warningLevel: 'low',
-  },
-};
-
-export default meta;
-
-export const Main = (args: PriceImpactProps) => <PriceImpact {...args} />;

package/src/components/Radio/Radio.stories.tsx

@@ -1,21 +0,0 @@
-import type { PropTypes } from './Radio.types';
-import type { Meta } from '@storybook/react';
-
-import { Root as RadioRoot } from '@radix-ui/react-radio-group';
-import React from 'react';
-
-import { Radio } from './Radio';
-
-export default {
-  title: 'Components/Radio',
-  component: Radio,
-  args: {
-    value: 'test',
-  },
-} as Meta<typeof Radio>;
-
-export const Main = (args: PropTypes) => (
-  <RadioRoot>
-    <Radio {...args} />
-  </RadioRoot>
-);

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,31 +0,0 @@
-import type { PropTypes } from './RadioGroup.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { RadioGroup } from './RadioGroup';
-
-export default {
-  title: 'Components/RadioGroup',
-  component: RadioGroup,
-  args: {
-    options: [
-      { value: 'one', label: 'One' },
-      { value: 'two', label: 'Two' },
-      { value: 'three', label: 'Three' },
-    ],
-    direction: 'horizontal',
-    defaultValue: 'one',
-  },
-  argTypes: {
-    options: {
-      defaultValue: [
-        { value: 'one', label: 'One' },
-        { value: 'two', label: 'Two' },
-        { value: 'three', label: 'Three' },
-      ],
-    },
-  },
-} as Meta<typeof RadioGroup>;
-
-export const Main = (args: PropTypes) => <RadioGroup {...args} />;

package/src/components/RefreshProgressButton/RefreshProgressButton.stories.tsx

@@ -1,20 +0,0 @@
-import type { SvgIconPropsWithChildren } from '../SvgIcon';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { RefreshProgressButton } from './RefreshProgressButton';
-
-export default {
-  title: 'Components/RefreshProgressButton',
-  component: RefreshProgressButton,
-  args: {
-    size: 22,
-    color: 'black',
-    progress: 20,
-  },
-} as Meta<typeof RefreshProgressButton>;
-
-export const Main = (args: SvgIconPropsWithChildren & { progress: number }) => (
-  <RefreshProgressButton {...args} />
-);

package/src/components/Select/Select.stories.tsx

@@ -1,41 +0,0 @@
-import type { PropTypes } from './Select.types';
-import type { Meta } from '@storybook/react';
-
-import React, { useState } from 'react';
-
-import { Select } from '.';
-
-const options = [
-  {
-    label: 'Default',
-    value: 'default',
-  },
-  {
-    label: 'Expanded',
-    value: 'expanded',
-  },
-  {
-    label: 'Full Expanded',
-    value: 'full-expanded',
-  },
-];
-export default {
-  title: 'Components/Select',
-  component: Select,
-  args: {
-    variant: 'outlined',
-    options,
-    value: 'default',
-  },
-} as Meta<typeof Select>;
-
-export const Main = (args: PropTypes<string>) => {
-  const [value, setValue] = useState<string>(args.value);
-  return (
-    <Select
-      {...args}
-      value={value}
-      handleItemClick={(item) => setValue(item.value)}
-    />
-  );
-};

package/src/components/SelectableCategoryList/SelectableCategoryList.stories.tsx

@@ -1,27 +0,0 @@
-import type { PropTypes } from './SelectableCategoryList.types';
-import type { Meta } from '@storybook/react';
-
-import React, { useState } from 'react';
-
-import { blockchains } from './mock';
-import { SelectableCategoryList } from './SelectableCategoryList';
-
-export default {
-  title: 'Components/SelectableCategoryList',
-  component: SelectableCategoryList,
-  args: {
-    blockchains,
-    isLoading: false,
-  },
-} as Meta<typeof SelectableCategoryList>;
-
-export const Main = (args: PropTypes) => {
-  const [category, setCategory] = useState<string>('');
-  return (
-    <SelectableCategoryList
-      {...args}
-      setCategory={setCategory}
-      category={category}
-    />
-  );
-};

package/src/components/SelectableCategoryList/mock.ts

@@ -1,235 +0,0 @@
-export const blockchains = [
-  {
-    name: 'ETH',
-    defaultDecimals: 18,
-    addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'],
-    feeAssets: [
-      {
-        blockchain: 'ETH',
-        symbol: 'ETH',
-        address: null,
-      },
-    ],
-    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/ETH/icon.svg',
-    displayName: 'Ethereum',
-    shortName: 'ETH',
-    sort: 0,
-    color: '#ecf0f1',
-    enabled: true,
-    type: 'EVM',
-    chainId: '0x1',
-    info: {
-      infoType: 'EvmMetaInfo',
-      chainName: 'Ethereum Mainnet',
-      nativeCurrency: {
-        name: 'ETH',
-        symbol: 'ETH',
-        decimals: 18,
-      },
-      rpcUrls: ['https://rpc.ankr.com/eth'],
-      blockExplorerUrls: ['https://etherscan.io'],
-      addressUrl: 'https://etherscan.io/address/{wallet}',
-      transactionUrl: 'https://etherscan.io/tx/{txHash}',
-      enableGasV2: true,
-    },
-  },
-  {
-    name: 'BSC',
-    defaultDecimals: 18,
-    addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'],
-    feeAssets: [
-      {
-        blockchain: 'BSC',
-        symbol: 'BNB',
-        address: null,
-      },
-    ],
-    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/BSC/icon.svg',
-    displayName: 'BNB Smart Chain',
-    shortName: 'BSC',
-    sort: 1,
-    color: '#F3BA2F',
-    enabled: true,
-    type: 'EVM',
-    chainId: '0x38',
-    info: {
-      infoType: 'EvmMetaInfo',
-      chainName: 'Binance Smart Chain Mainnet',
-      nativeCurrency: {
-        name: 'BNB',
-        symbol: 'BNB',
-        decimals: 18,
-      },
-      rpcUrls: ['https://bsc-dataseed1.ninicoin.io'],
-      blockExplorerUrls: ['https://bscscan.com'],
-      addressUrl: 'https://bscscan.com/address/{wallet}',
-      transactionUrl: 'https://bscscan.com/tx/{txHash}',
-      enableGasV2: false,
-    },
-  },
-  {
-    name: 'POLYGON',
-    defaultDecimals: 18,
-    addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'],
-    feeAssets: [
-      {
-        blockchain: 'POLYGON',
-        symbol: 'MATIC',
-        address: null,
-      },
-    ],
-    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/POLYGON/icon.svg',
-    displayName: 'Polygon',
-    shortName: 'Polygon',
-    sort: 3,
-    color: '#8247E5',
-    enabled: true,
-    type: 'EVM',
-    chainId: '0x89',
-    info: {
-      infoType: 'EvmMetaInfo',
-      chainName: 'Polygon Mainnet',
-      nativeCurrency: {
-        name: 'MATIC',
-        symbol: 'MATIC',
-        decimals: 18,
-      },
-      rpcUrls: ['https://polygon-rpc.com'],
-      blockExplorerUrls: ['https://polygonscan.com'],
-      addressUrl: 'https://polygonscan.com/address/{wallet}',
-      transactionUrl: 'https://polygonscan.com/tx/{txHash}',
-      enableGasV2: true,
-    },
-  },
-  {
-    name: 'TRON',
-    defaultDecimals: 18,
-    addressPatterns: ['^T[1-9A-HJ-NP-Za-km-z]{33}$'],
-    feeAssets: [
-      {
-        blockchain: 'TRON',
-        symbol: 'TRX',
-        address: null,
-      },
-    ],
-    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/TRON/icon.svg',
-    displayName: 'Tron',
-    shortName: 'Tron',
-    sort: 11,
-    color: '#FF060A',
-    enabled: true,
-    type: 'TRON',
-    chainId: '0x2b6653dc',
-    info: {
-      infoType: 'EvmMetaInfo',
-      chainName: 'TRON Mainnet',
-      nativeCurrency: {
-        name: 'TRX',
-        symbol: 'TRX',
-        decimals: 6,
-      },
-      rpcUrls: ['https://api.trongrid.io/jsonrpc'],
-      blockExplorerUrls: ['https://tronscan.org/#'],
-      addressUrl: 'https://tronscan.org/#/address/{wallet}',
-      transactionUrl: 'https://tronscan.org/#/tx/{txHash}',
-      enableGasV2: false,
-    },
-  },
-  {
-    name: 'BTC',
-    defaultDecimals: 8,
-    addressPatterns: [
-      '^[13][a-km-zA-HJ-NP-Z1-9]{25,34}$|^(bc1)[0-9A-Za-z]{39,59}$',
-    ],
-    feeAssets: [
-      {
-        blockchain: 'BTC',
-        symbol: 'BTC',
-        address: null,
-      },
-    ],
-    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/BTC/icon.svg',
-    displayName: 'Bitcoin',
-    shortName: 'BTC',
-    sort: 12,
-    color: '#F7931A',
-    enabled: true,
-    type: 'TRANSFER',
-    chainId: null,
-    info: null,
-  },
-  {
-    name: 'COSMOS',
-    defaultDecimals: 6,
-    addressPatterns: ['^(cosmos1)[0-9a-z]{38}$'],
-    feeAssets: [
-      {
-        blockchain: 'COSMOS',
-        symbol: 'ATOM',
-        address: null,
-      },
-    ],
-    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/COSMOS/icon.svg',
-    displayName: 'Cosmos',
-    shortName: 'Cosmos',
-    sort: 14,
-    color: '#2E3148',
-    enabled: true,
-    type: 'COSMOS',
-    chainId: 'cosmoshub-4',
-    info: {
-      infoType: 'CosmosMetaInfo',
-      experimental: false,
-      rpc: 'https://cosmos-rpc.polkachu.com',
-      rest: 'https://lcd-cosmoshub.blockapsis.com',
-      cosmostationLcdUrl: 'https://lcd-cosmoshub.blockapsis.com',
-      cosmostationApiUrl: 'https://cosmos-rpc.polkachu.com',
-      cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/',
-      mintScanName: 'cosmos',
-      chainName: 'Cosmos',
-      stakeCurrency: {
-        coinDenom: 'ATOM',
-        coinMinimalDenom: 'uatom',
-        coinDecimals: 6,
-        coinGeckoId: 'cosmos',
-        coinImageUrl: '/tokens/blockchain/cosmos.svg',
-      },
-      bip44: {
-        coinType: 118,
-      },
-      bech32Config: {
-        bech32PrefixAccAddr: 'cosmos',
-        bech32PrefixAccPub: 'cosmospub',
-        bech32PrefixValAddr: 'cosmosvaloper',
-        bech32PrefixValPub: 'cosmosvaloperpub',
-        bech32PrefixConsAddr: 'cosmosvalcons',
-        bech32PrefixConsPub: 'cosmosvalconspub',
-      },
-      currencies: [
-        {
-          coinDenom: 'ATOM',
-          coinMinimalDenom: 'uatom',
-          coinDecimals: 6,
-          coinGeckoId: 'cosmos',
-          coinImageUrl: '/tokens/blockchain/cosmos.svg',
-        },
-      ],
-      feeCurrencies: [
-        {
-          coinDenom: 'ATOM',
-          coinMinimalDenom: 'uatom',
-          coinDecimals: 6,
-          coinGeckoId: 'cosmos',
-          coinImageUrl: '/tokens/blockchain/cosmos.svg',
-        },
-      ],
-      features: ['stargate', 'ibc-transfer'],
-      explorerUrlToTx: 'https://www.mintscan.io/cosmos/txs/{txHash}',
-      gasPriceStep: {
-        low: 0.01,
-        average: 0.025,
-        high: 0.04,
-      },
-    },
-  },
-];

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -1,52 +0,0 @@
-import type { PropTypes } from './Skeleton.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { Divider } from '../Divider';
-import { Typography } from '../Typography';
-
-import { Skeleton } from './Skeleton';
-
-export default {
-  title: 'Components/Skeleton',
-  component: Skeleton,
-  args: {
-    width: 50,
-    height: 50,
-  },
-  argTypes: {
-    variant: {
-      name: 'variant',
-      defaultValue: 'rounded',
-      control: {
-        type: 'select',
-        options: ['text', 'circular', 'rectangular', 'rounded'],
-      },
-    },
-
-    size: {
-      name: 'size',
-      defaultValue: 'small',
-      control: {
-        type: 'select',
-        options: ['small', 'medium', 'large'],
-      },
-    },
-  },
-} as Meta<typeof Skeleton>;
-
-export const Main = (args: PropTypes) => (
-  <>
-    <Skeleton {...args} height={50} width={50} variant="circular" />
-    <Divider />
-    <Skeleton {...args} variant="text" size="medium" width={200} />
-    <Divider />
-    <Skeleton width={210} height={60} variant="rectangular" />
-    <Divider />
-    <Skeleton {...args} width={210} height={60} variant="rounded" />
-    <Divider />
-    <Typography variant="title" size="small"></Typography>
-    <Skeleton {...args} />
-  </>
-);

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

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { PropTypes } from './Spinner.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { Spinner } from './Spinner';
-
-export default {
-  title: 'Components/Spinner',
-  component: Spinner,
-  args: {
-    color: 'primary',
-    size: 16,
-  },
-  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 Meta<typeof Spinner>;
-
-export const Main = (props: PropTypes) => <Spinner {...props} />;

package/src/components/StepDetails/StepDetails.stories.tsx

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import React from 'react';
-
-import { Alert } from '../Alert';
-
-import { step1 } from './mock';
-import { StepDetails } from './StepDetails';
-
-const meta: Meta<typeof StepDetails> = {
-  component: StepDetails,
-};
-
-export default meta;
-type Story = StoryObj<typeof StepDetails>;
-
-export const Main: Story = {
-  args: {
-    step: { ...step1, alerts: <Alert title="test alert" type="warning" /> },
-    type: 'swap-progress',
-    state: 'completed',
-  },
-};

package/src/components/StepDetails/mock.ts

@@ -1,35 +0,0 @@
-import type { Step } from './StepDetails.types';
-
-export const step1: Step = {
-  swapper: {
-    displayName: 'MayaProtocol',
-    image: 'https://api.rango.exchange/swappers/maya.jpg',
-  },
-  from: {
-    token: {
-      displayName: 'BTC',
-      image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
-    },
-    chain: {
-      displayName: 'BTC',
-      image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
-    },
-    price: {
-      value: '1.00000000',
-    },
-  },
-  to: {
-    chain: {
-      displayName: 'ETH',
-      image: 'https://api.rango.exchange/blockchains/ethereum.svg',
-    },
-    token: {
-      displayName: 'ETH',
-
-      image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
-    },
-    price: {
-      value: '14.863736725876758517',
-    },
-  },
-};