@rango-dev/ui 0.15.1-next.17 → 0.15.1-next.18

package/dist/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.types.d.ts

@@ -0,0 +1,15 @@
+import type { BlockchainMeta } from 'rango-sdk';
+export interface PropTypes {
+    setCategory: (type: string) => void;
+    category: string;
+    blockchains: BlockchainMeta[];
+    isLoading?: boolean;
+}
+export declare enum BlockchainCategories {
+    ALL = "ALL",
+    EVM = "EVM",
+    COSMOS = "COSMOS",
+    UTXO = "UTXO",
+    OTHER = "OTHER"
+}
+//# sourceMappingURL=SelectableCategoryList.types.d.ts.map

package/dist/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCategoryList.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SelectableCategoryList/SelectableCategoryList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,oBAAoB;IAC9B,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB"}

package/dist/widget/ui/src/components/SelectableCategoryList/index.d.ts

@@ -0,0 +1,3 @@
+export { SelectableCategoryList } from './SelectableCategoryList';
+export { BlockchainCategories } from './SelectableCategoryList.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/SelectableCategoryList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SelectableCategoryList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/widget/ui/src/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './I18nManager';
 export * from './Alert';
 export * from './BestRoute';
+export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
 export * from './IconButton';
@@ -21,6 +22,7 @@ export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Wallet';
+export * from './SelectableCategoryList';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';

package/dist/widget/ui/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.15.1-next.17",
+  "version": "0.15.1-next.18",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",

package/src/components/BlockchainsChip/BlockchainsChip.styles.ts

@@ -0,0 +1,42 @@
+import { darkTheme, styled } from '../../theme';
+
+export const Chip = styled('button', {
+  padding: '$10',
+  borderRadius: '$sm',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  border: 0,
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+  },
+  variants: {
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/BlockchainsChip/BlockchainsChip.tsx

@@ -0,0 +1,15 @@
+import type { PropTypes } from './BlockchainsChip.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Chip } from './BlockchainsChip.styles';
+
+export function BlockchainsChip(props: PropsWithChildren<PropTypes>) {
+  const { children, selected, onClick } = props;
+  return (
+    <Chip selected={selected} onClick={onClick}>
+      {children}
+    </Chip>
+  );
+}

package/src/components/BlockchainsChip/BlockchainsChip.types.ts

@@ -0,0 +1,4 @@
+export interface PropTypes {
+  selected?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/src/components/BlockchainsChip/index.ts

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

package/src/components/Button/Button.styles.tsx

@@ -94,6 +94,7 @@ export const ButtonBase = styled('button', {
         '&:disabled:hover': {
           borderColor: '$neutral800',
           transform: 'unset',
+          color: '$neutral800',
         },
       },
       ghost: {

package/src/components/Checkbox/Checkbox.types.ts

@@ -7,7 +7,7 @@ type RadixCheckboxProps = Pick<
 
 interface WithLabelProps {
   id: string;
-  label: string;
+  label: React.ReactNode;
 }
 interface ComponentProps {
   id?: never;

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

@@ -1,6 +1,7 @@
 export * from './I18nManager';
 export * from './Alert';
 export * from './BestRoute';
+export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
 export * from './IconButton';
@@ -21,6 +22,7 @@ export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Wallet';
+export * from './SelectableCategoryList';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';