@rango-dev/ui 0.1.10-next.69

package/src/components/LiquiditySourceList/mockData.ts

@@ -0,0 +1,316 @@
+import { LiquiditySource } from '../../types/meta';
+
+export const liquiditySources: LiquiditySource[] = [
+  {
+    title: 'Pancake',
+    logo: 'https://api.rango.exchange/swappers/pancake-swap.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'ThorChain',
+    logo: 'https://api.rango.exchange/swappers/Thorchain.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Horizon Bridge',
+    logo: 'https://api.rango.exchange/swappers/harmony-horizon.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: '1Inch',
+    logo: 'https://api.rango.exchange/swappers/1inch.svg',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'OpenOcean',
+    logo: 'https://api.rango.exchange/swappers/openocean.svg',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'SushiSwap',
+    logo: 'https://api.rango.exchange/swappers/sushi.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'OkcSwap',
+    logo: 'https://api.rango.exchange/swappers/okcswap.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'CherrySwap',
+    logo: 'https://api.rango.exchange/swappers/cherry-swap.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Osmosis',
+    logo: 'https://api.rango.exchange/swappers/osmosis.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Osmosis',
+    logo: 'https://api.rango.exchange/swappers/osmosis.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'SolanaWrapper',
+    logo: 'https://api.rango.exchange/tokens/SOLANA/SOL.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Jupiter',
+    logo: 'https://api.rango.exchange/swappers/jupiter.svg',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'stargate',
+    logo: 'https://api.rango.exchange/swappers/stargate.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Multichain',
+    logo: 'https://api.rango.exchange/swappers/multichain.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Satellite',
+    logo: 'https://api.rango.exchange/swappers/satellite.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Diffusion',
+    logo: 'https://api.rango.exchange/swappers/diffusion.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'JunoSwap',
+    logo: 'https://api.rango.exchange/swappers/junoswap.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'JunoSwap',
+    logo: 'https://api.rango.exchange/swappers/junoswap.svg',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'PangolinSwap',
+    logo: 'https://api.rango.exchange/swappers/pangolin.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'MMFinance',
+    logo: 'https://api.rango.exchange/swappers/mm-finance.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'CronaSwap',
+    logo: 'https://api.rango.exchange/swappers/crona.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'VVSFinance',
+    logo: 'https://api.rango.exchange/swappers/vvs-finance.svg',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'MDexHeco',
+    logo: 'https://api.rango.exchange/swappers/mdex.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'ParaSwap',
+    logo: 'https://api.rango.exchange/swappers/para-swap.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'AuroraSwap',
+    logo: 'https://api.rango.exchange/swappers/aurora-swap.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Across',
+    logo: 'https://api.rango.exchange/swappers/across.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Arbitrum Bridge',
+    logo: 'https://api.rango.exchange/swappers/arbitrum-bridge.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'TrisolarisSwap',
+    logo: 'https://api.rango.exchange/swappers/trisolaris.svg',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Polygon Bridge',
+    logo: 'https://api.rango.exchange/swappers/polygon-bridge.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'SpookySwap',
+    logo: 'https://api.rango.exchange/swappers/spooky-swap.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Voyager',
+    logo: 'https://api.rango.exchange/swappers/voyager.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Rainbow Bridge',
+    logo: 'https://api.rango.exchange/swappers/rainbow-bridge.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Lido',
+    logo: 'https://api.rango.exchange/swappers/lido.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Symbiosis',
+    logo: 'https://api.rango.exchange/swappers/symbiosis.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Avalanche Bridge',
+    logo: 'https://api.rango.exchange/swappers/avalanche-bridge.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'VoltageSwap',
+    logo: 'https://api.rango.exchange/swappers/voltage.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'XYFinance',
+    logo: 'https://api.rango.exchange/swappers/xy.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'cBridge v2.0',
+    logo: 'https://api.rango.exchange/swappers/cbridge.png',
+    type: 'AGGREGATOR',
+    selected: true,
+  },
+  {
+    title: 'Hyphen',
+    logo: 'https://api.rango.exchange/swappers/hyphen.svg',
+    type: 'AGGREGATOR',
+    selected: true,
+  },
+  {
+    title: 'Optimism Bridge',
+    logo: 'https://api.rango.exchange/swappers/optimism.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'OolongSwap',
+    logo: 'https://api.rango.exchange/swappers/oolong.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'QuickSwap',
+    logo: 'https://api.rango.exchange/swappers/quick-swap.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'StellaSwap',
+    logo: 'https://api.rango.exchange/swappers/stella.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'ViperSwap',
+    logo: 'https://api.rango.exchange/swappers/viper.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'FinKujira',
+    logo: 'https://api.rango.exchange/swappers/finkujira.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Hop',
+    logo: 'https://api.rango.exchange/swappers/hop.svg',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'BeamSwap',
+    logo: 'https://api.rango.exchange/swappers/beam-swap.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'SolarbeamSwap',
+    logo: 'https://api.rango.exchange/swappers/solarbeamlogo.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Sifchain',
+    logo: 'https://api.rango.exchange/swappers/sifchain.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'Sifchain',
+    logo: 'https://api.rango.exchange/swappers/sifchain.png',
+    type: 'DEX',
+    selected: true,
+  },
+  {
+    title: 'Wormhole',
+    logo: 'https://api.rango.exchange/swappers/wormhole.png',
+    type: 'BRIDGE',
+    selected: true,
+  },
+  {
+    title: 'UniSwapV2',
+    logo: 'https://api.rango.exchange/swappers/uniswap.png',
+    type: 'DEX',
+    selected: true,
+  },
+];

package/src/components/LiquiditySourcesSelector/LiquiditySourcesSelector.stories.tsx

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

package/src/components/LiquiditySourcesSelector/LiquiditySourcesSelector.tsx

@@ -0,0 +1,55 @@
+import { CSSProperties } from '@stitches/react';
+import React from 'react';
+import { containsText } from '../../helpers';
+import { styled } from '../../theme';
+import { LiquiditySource } from '../../types/meta';
+import { Button } from '../Button';
+import { LiquiditySourceList } from '../LiquiditySourceList';
+import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
+
+const filterLiquiditySources = (
+  liquiditySources: LiquiditySource[],
+  searchedFor: string
+) =>
+  liquiditySources.filter((liquiditySource) =>
+    containsText(liquiditySource.title, searchedFor || '')
+  );
+export interface PropTypes {
+  list: LiquiditySource[];
+  onChange: (liquiditySource: LiquiditySource) => void;
+  toggleAll?: () => void;
+  onBack?: () => void;
+  hasHeader?: boolean;
+  listContainerStyle?: CSSProperties;
+}
+const ActionButton = styled(Button, {
+  position: 'absolute',
+  right: 0,
+});
+
+export function LiquiditySourcesSelector(props: PropTypes) {
+  const { list, onChange, onBack, hasHeader, listContainerStyle, toggleAll } =
+    props;
+
+  return (
+    <SecondaryPage
+      textField={true}
+      textFieldPlaceholder="Search By Name"
+      title="Liquidity Sources"
+      TopButton={
+        <ActionButton variant="ghost" type="primary" onClick={toggleAll}>
+          {list.find((item) => item.selected) ? 'Clear all' : 'Select all'}
+        </ActionButton>
+      }
+      hasHeader={hasHeader}
+      onBack={onBack}
+      Content={({ searchedFor }) => (
+        <LiquiditySourceList
+          listContainerStyle={listContainerStyle}
+          list={filterLiquiditySources(list, searchedFor)}
+          onChange={onChange}
+        />
+      )}
+    />
+  );
+}

package/src/components/LiquiditySourcesSelector/index.ts

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

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

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Modal, PropTypes } from './Modal';
+
+export default { name: 'Modal', component: Modal } as ComponentMeta<
+  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}
+        title="I'm modal"
+        onClose={() => setOpen(false)}
+      />
+    </div>
+  );
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,76 @@
+import { CSSProperties } from '@stitches/react';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { styled } from '../../theme';
+import { CloseIcon } from '../Icon/CloseIcon';
+import { Typography } from '../Typography';
+
+export interface PropTypes {
+  title: string;
+  open: boolean;
+  onClose: () => void;
+  content: React.ReactNode;
+  containerStyle?: CSSProperties;
+  contentStyle?: CSSProperties;
+}
+
+const BackDrop = styled('div', {
+  position: 'fixed',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  top: '0',
+  left: '0',
+  width: '100vw',
+  height: '100vh',
+  backgroundColor: 'rgba(0,0,0,.1)',
+});
+
+const ModalContainer = styled('div', {
+  backgroundColor: '$background',
+  borderRadius: '$10',
+  padding: '$16 $16',
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: '$s',
+});
+
+const ModalHeader = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16',
+});
+
+const ContentContainer = styled('div', {
+  overflowY: 'scroll',
+});
+
+export function Modal(props: PropTypes) {
+  const { title, content, open, onClose, containerStyle, contentStyle } = props;
+
+  const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) onClose();
+  };
+
+  return (
+    <>
+      {open &&
+        createPortal(
+          <BackDrop onClick={handleBackDropClick}>
+            <ModalContainer style={containerStyle}>
+              <ModalHeader>
+                <Typography variant="h4">{title}</Typography>
+                <CloseIcon size={24} onClick={onClose} />
+              </ModalHeader>
+              <ContentContainer style={contentStyle}>
+                {content}
+              </ContentContainer>
+            </ModalContainer>
+          </BackDrop>,
+          document.body
+        )}
+    </>
+  );
+}

package/src/components/Modal/index.ts

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

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

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

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import { styled } from '../../theme';
+import { Typography } from '../Typography';
+import { CSSProperties } from '@stitches/react';
+
+const StyledRoot = styled(RadioGroup.Root, {
+  variants: {
+    direction: {
+      horizontal: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      },
+      vertical: {
+        display: 'grid',
+        gridGap: '$24',
+      },
+    },
+  },
+});
+
+const ItemContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: '$24',
+});
+
+const StyledItem = styled(RadioGroup.Item, {
+  backgroundColor: '$neutrals300',
+  width: '20px',
+  height: '20px',
+  borderRadius: '100%',
+  border: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: '$neutrals400',
+  },
+});
+
+const StyledIndicator = styled(RadioGroup.Indicator, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  '&::after': {
+    content: '',
+    display: 'block',
+    width: '10px',
+    height: '10px',
+    borderRadius: '50%',
+    backgroundColor: '$primary',
+  },
+});
+
+const Label = styled('label', {
+  paddingLeft: '$16',
+  cursor: 'pointer',
+});
+
+export interface PropTypes {
+  options: { label: string; value: string }[];
+  defaultValue: string;
+  onChange: (value: string) => void;
+  direction?: 'vertical' | 'horizontal';
+  style?: CSSProperties;
+
+}
+
+export function Radio(props: PropTypes) {
+  const { defaultValue, onChange, direction = 'vertical', style } = props;
+  return (
+    <form>
+      <StyledRoot
+        onValueChange={onChange}
+        defaultValue={defaultValue}
+        direction={direction}
+        style={style}
+      >
+        {props.options.map((option) => (
+          <ItemContainer>
+            <StyledItem value={option.value} id={option.value}>
+              <StyledIndicator />
+            </StyledItem>
+            <Label htmlFor={option.value}>
+              <Typography variant="body2">{option.label}</Typography>
+            </Label>
+          </ItemContainer>
+        ))}
+      </StyledRoot>
+    </form>
+  );
+}

package/src/components/Radio/index.ts

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

package/src/components/SecondaryPage/SecondaryPage.stories.tsx

@@ -0,0 +1,7 @@
+import { ComponentMeta } from '@storybook/react';
+import { SecondaryPage } from './SecondaryPage';
+
+export default {
+  title: 'Components/Secondary Page',
+  component: SecondaryPage,
+} as ComponentMeta<typeof SecondaryPage>;