@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

package/src/components/Radio/Radio.tsx

@@ -1,100 +1,14 @@
-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: '$8',
-});
-const StyledItem = styled(RadioGroup.Item, {
-  padding: '0',
-  width: '20px',
-  height: '20px',
-  borderRadius: '100%',
-  cursor: 'pointer',
-  backgroundColor: '$background',
-  border: '1px solid $neutral400',
-
-  '&:hover': {
-    borderColor: '$neutral600',
-  },
-});
+import type { PropTypes } from './Radio.types';
 
-const Container = styled('div', {
-  display: 'flex',
-});
-
-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: '$success',
-  },
-});
-
-const Label = styled('label', {
-  paddingLeft: '$8',
-  cursor: 'pointer',
-  color: '$foreground',
-});
+import React from 'react';
 
-export interface PropTypes {
-  options: { label: string; value: string }[];
-  value: string;
-  onChange: (value: string) => void;
-  direction?: 'vertical' | 'horizontal';
-  style?: CSSProperties;
-}
+import { StyledIndicator, StyledItem } from './Radio.styles';
 
 export function Radio(props: PropTypes) {
-  const { value, onChange, direction = 'vertical', style } = props;
+  const { value } = props;
   return (
-    <Container>
-      <StyledRoot
-        onValueChange={onChange}
-        value={value}
-        direction={direction}
-        style={style}
-      >
-        {props.options.map((option, index) => (
-          <ItemContainer key={index}>
-            <StyledItem value={option.value} id={option.value}>
-              <StyledIndicator />
-            </StyledItem>
-            <Label className="_text" htmlFor={option.value}>
-              <Typography variant="body2">{option.label}</Typography>
-            </Label>
-          </ItemContainer>
-        ))}
-      </StyledRoot>
-    </Container>
+    <StyledItem value={value} id={value}>
+      <StyledIndicator />
+    </StyledItem>
   );
 }

package/src/components/Radio/Radio.types.tsx

@@ -0,0 +1,3 @@
+export interface PropTypes {
+  value: string;
+}

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

@@ -0,0 +1,31 @@
+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/RadioGroup/RadioGroup.styles.tsx

@@ -0,0 +1,38 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+
+import { styled } from '../../theme';
+
+export const RadioRoot = styled(RadioGroup.Root, {
+  variants: {
+    direction: {
+      horizontal: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      },
+      vertical: {
+        display: 'grid',
+        gridGap: '$24',
+      },
+    },
+  },
+});
+
+export const ItemContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: '$8',
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+});
+
+export const Label = styled('label', {
+  paddingLeft: '$8',
+  cursor: 'pointer',
+  color: '$foreground',
+  '& > span': {
+    display: 'block',
+  },
+});

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,37 @@
+import type { PropTypes } from './RadioGroup.types';
+
+import React from 'react';
+
+import { Radio } from '../Radio/Radio';
+import { Typography } from '../Typography';
+
+import {
+  Container,
+  ItemContainer,
+  Label,
+  RadioRoot,
+} from './RadioGroup.styles';
+
+export function RadioGroup(props: PropTypes) {
+  const { value, onChange, direction = 'vertical', style, options } = props;
+  return (
+    <Container>
+      <RadioRoot
+        onValueChange={onChange}
+        value={value}
+        direction={direction}
+        style={style}>
+        {options.map((option) => (
+          <ItemContainer key={option.value}>
+            <Radio value={option.value} />
+            <Label className="_text" htmlFor={option.value}>
+              <Typography variant="body" size="small">
+                {option.label}
+              </Typography>
+            </Label>
+          </ItemContainer>
+        ))}
+      </RadioRoot>
+    </Container>
+  );
+}

package/src/components/RadioGroup/RadioGroup.types.tsx

@@ -0,0 +1,13 @@
+import type { PropTypes as RadioType } from '../Radio/Radio.types';
+import type { CSSProperties } from '@stitches/react';
+
+export interface PropTypes {
+  options: {
+    label: string;
+    value: RadioType['value'];
+  }[];
+  value: RadioType['value'];
+  onChange: (value: string) => void;
+  direction?: 'vertical' | 'horizontal';
+  style?: CSSProperties;
+}

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export { RadioRoot } from './RadioGroup.styles';

package/src/components/RouteCost/RouteCost.styles.ts

@@ -0,0 +1,20 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  borderRadius: '$xs',
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+  paddingBottom: '$10',
+  '& .item': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .icon': {
+    width: '$16',
+    height: '$16',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/RouteCost/RouteCost.tsx

@@ -0,0 +1,48 @@
+import type { PropTypes } from './RouteCost.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Separator } from '../BestRoute/BestRoute.styles';
+import { Typography } from '../Typography';
+
+import { Container } from './RouteCost.styles';
+
+export function RouteCost(props: PropTypes) {
+  const { fee, time, steps } = props;
+  return (
+    <Container>
+      <div className="item">
+        <div className="icon">
+          <GasIcon size={12} color={'gray'} />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          ${fee}
+        </Typography>
+      </div>
+      <Separator />
+      <div className="item">
+        <div className="icon">
+          <TimeIcon size={12} color="gray" />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          {i18n.t({
+            id: 'timeSec',
+            message: '{time} sec',
+            values: { time },
+          })}
+        </Typography>
+      </div>
+      <Separator />
+      <div className="item">
+        <div className="icon">
+          <NumberIcon size={16} color="gray" />
+        </div>
+        <Typography ml={2} align="center" variant="body" size="small">
+          {steps}
+        </Typography>
+      </div>
+    </Container>
+  );
+}

package/src/components/RouteCost/RouteCost.types.ts

@@ -0,0 +1,5 @@
+export type PropTypes = {
+  fee: string;
+  time: string | number;
+  steps: number;
+};

package/src/components/RouteCost/index.ts

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

package/src/components/RoutesOverview/RoutesOverview.tsx

@@ -1,15 +1,18 @@
+import type { BestRouteResponse } from 'rango-sdk';
+
 import React from 'react';
-import { ChevronRightIcon, GasIcon, Divider } from '..';
+
 import { styled } from '../../theme';
-import { BestRouteResponse } from 'rango-sdk';
+import { Divider } from '../Divider';
+import { AngleRightIcon, GasIcon } from '../Icon';
 
 export const Container = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   padding: '$8',
-  borderRadius: '$5',
-  backgroundColor: '$neutral100',
+  borderRadius: '$xs',
+  backgroundColor: '$background',
   color: '$neutral800',
   fontSize: '$12',
 
@@ -28,7 +31,9 @@ interface PropTypes {
   totalFee?: string;
 }
 export function RoutesOverview(props: PropTypes) {
-  if (!props.routes) return null;
+  if (!props.routes) {
+    return null;
+  }
 
   const swaps = props.routes.result?.swaps;
   return (
@@ -36,10 +41,11 @@ export function RoutesOverview(props: PropTypes) {
       <div className="routes">
         {swaps?.map((swap, idx) => {
           const isLast = idx + 1 == swaps.length;
+          const key = `swap-${idx}`;
           return (
-            <React.Fragment key={idx}>
+            <React.Fragment key={key}>
               <div className="route">{swap.from.symbol}</div>
-              <ChevronRightIcon size={12} />
+              <AngleRightIcon size={12} />
               {isLast ? <div className="route">{swap.to.symbol}</div> : null}
             </React.Fragment>
           );

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

@@ -1,16 +1,18 @@
-import { Meta } from '@storybook/react';
-import { PropTypes, SecondaryPage } from './SecondaryPage';
+import type { PropTypes } from './SecondaryPage';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
 
+import { SecondaryPage } from './SecondaryPage';
+
 export default {
-  title: 'Components/Secondary Page',
+  title: 'Components/Secondary Page (Deprecated)',
   component: SecondaryPage,
-  args:{
-    textField:true,
-    textFieldPlaceholder:'Search',
-    title:'Secondary Page'
-  }
+  args: {
+    textField: true,
+    textFieldPlaceholder: 'Search',
+    title: 'Secondary Page',
+  },
 } as Meta<typeof SecondaryPage>;
 
-
 export const Main = (args: PropTypes) => <SecondaryPage {...args} />;

package/src/components/SecondaryPage/SecondaryPage.tsx

@@ -1,4 +1,7 @@
-import React, { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+
+import React, { useState } from 'react';
+
 import { styled } from '../../theme';
 import { Divider } from '../Divider';
 import { Header } from '../Header';
@@ -35,14 +38,27 @@ const TextFieldContainer = styled('div', {
   padding: '1px',
 });
 
+/**
+ * @deprecated will be removed in v2
+ */
 export function SecondaryPage(props: PropTypes) {
-  const { title, Footer, TopButton, onBack, hasHeader = true } = props;
+  const {
+    title,
+    Footer,
+    TopButton,
+    // onBack,
+    hasHeader = true,
+  } = props;
   const [searchedFor, setSearchedFor] = useState('');
 
   return (
     <>
       {hasHeader && (
-        <Header onBack={onBack} title={title || ''} suffix={TopButton} />
+        <Header
+          // onBack={onBack}
+          title={title || ''}
+          suffix={TopButton}
+        />
       )}
 
       <ContentContainer>
@@ -52,7 +68,9 @@ export function SecondaryPage(props: PropTypes) {
               size="large"
               prefix={<SearchIcon size={24} />}
               placeholder={props.textFieldPlaceholder}
-              onChange={(event) => setSearchedFor(event.target.value)}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setSearchedFor(event.target.value)
+              }
               value={searchedFor}
               autoFocus
             />

package/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts

@@ -0,0 +1,35 @@
+import { type BlockchainMeta, TransactionType } from 'rango-sdk';
+
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
+  switch (type) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchain.type === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchain.type !== TransactionType.TRANSFER &&
+        blockchain.type !== TransactionType.COSMOS &&
+        blockchain.type !== TransactionType.EVM
+      );
+    default:
+      return blockchain.type === type;
+  }
+};
+
+const blockchainslogo = {
+  [BlockchainCategories.EVM]: ['ETH', 'BSC', 'POLYGON'],
+  [BlockchainCategories.COSMOS]: ['COSMOS', 'OSMOSIS', 'JUNO'],
+  [BlockchainCategories.UTXO]: ['BTC', 'LTC', 'BCH'],
+  [BlockchainCategories.OTHER]: ['STARKNET', 'TRON', 'SOLANA'],
+};
+
+export const generateBlockchainsLogo = (
+  list: BlockchainMeta[],
+  type: Exclude<BlockchainCategories, 'ALL'>
+) =>
+  list
+    .filter((item) => filterByType(item, type))
+    .filter((item) => blockchainslogo[type].includes(item.name));

package/src/components/SelectableCategoryList/SelectableCategoryList.styles.ts

@@ -0,0 +1,21 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr',
+});
+
+export const ImageContent = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: '$10',
+});
+export const FirstImage = styled('img', {
+  position: 'absolute',
+  top: -2,
+  width: 15,
+  height: 15,
+});

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './SelectableCategoryList.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Divider, Image, Skeleton, Typography } from '..';
+import { BlockchainsChip } from '../BlockchainsChip';
+
+import { generateBlockchainsLogo } from './SelectableCategoryList.helpers';
+import {
+  Container,
+  FirstImage,
+  ImageContent,
+} from './SelectableCategoryList.styles';
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+export function SelectableCategoryList(props: PropTypes) {
+  const { setCategory, category, blockchains, isLoading } = props;
+  const categories = Object.keys(
+    BlockchainCategories
+  ) as BlockchainCategories[];
+  return (
+    <Container>
+      {isLoading &&
+        Array.from(Array(5), (_, index) => (
+          <Skeleton
+            key={index}
+            variant="rounded"
+            height={70}
+            width={index === 0 ? 45 : 65}
+          />
+        ))}
+      {!isLoading &&
+        categories.map((blockchainCategory) => (
+          <BlockchainsChip
+            selected={category === blockchainCategory}
+            key={blockchainCategory}
+            onClick={() => setCategory(blockchainCategory)}>
+            {blockchainCategory !== BlockchainCategories.ALL && (
+              <>
+                <ImageContent>
+                  {generateBlockchainsLogo(blockchains, blockchainCategory).map(
+                    (blockchain, index) =>
+                      index === 0 ? (
+                        <FirstImage
+                          key={`image-${blockchain.name}-${blockchain.chainId}`}
+                          src={blockchain.logo}
+                        />
+                      ) : (
+                        <Image
+                          key={`image-${blockchain.name}-${blockchain.chainId}`}
+                          src={blockchain.logo}
+                          size={15}
+                        />
+                      )
+                  )}
+                </ImageContent>
+                <Divider size={12} />
+              </>
+            )}
+            <Typography
+              size="xsmall"
+              variant="body"
+              color={
+                blockchainCategory === BlockchainCategories.ALL
+                  ? 'secondary500'
+                  : undefined
+              }>
+              {i18n.t(BlockchainCategories[blockchainCategory])}
+            </Typography>
+          </BlockchainsChip>
+        ))}
+    </Container>
+  );
+}

package/src/components/SelectableCategoryList/SelectableCategoryList.types.ts

@@ -0,0 +1,16 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PropTypes {
+  setCategory: (type: string) => void;
+  category: string;
+  blockchains: BlockchainMeta[];
+  isLoading?: boolean;
+}
+
+export enum BlockchainCategories {
+  ALL = 'ALL',
+  EVM = 'EVM',
+  COSMOS = 'COSMOS',
+  UTXO = 'UTXO',
+  OTHER = 'OTHER',
+}

package/src/components/SelectableCategoryList/index.ts

@@ -0,0 +1,2 @@
+export { SelectableCategoryList } from './SelectableCategoryList';
+export { BlockchainCategories } from './SelectableCategoryList.types';

package/src/components/SelectableWalletList/SelectableWalletList.stories.tsx

@@ -1,11 +1,13 @@
+import type { PropTypes } from './SelectableWalletList';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { SelectableWalletList, PropTypes } from './SelectableWalletList';
 import { data } from './mock';
+import { SelectableWalletList } from './SelectableWalletList';
 
 export default {
-  title: 'Components/SelectableWalletList',
+  title: 'Components/SelectableWalletList(Deprecated)',
   component: SelectableWalletList,
 } as Meta<typeof SelectableWalletList>;