@rango-dev/widget-embedded 0.12.1-next.26 → 0.12.1-next.28

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

@@ -1,42 +0,0 @@
-import { darkTheme, styled } from '@rango-dev/ui';
-
-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

@@ -1,15 +0,0 @@
-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

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

package/src/components/BlockchainsChip/index.ts

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

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

@@ -1,20 +0,0 @@
-import { type BlockchainMeta } from 'rango-sdk';
-
-import { filterByType } from '../BlockchainList/BlockchainList.helpers';
-
-import { BlockchainCategories } from './SelectableCategoryList.types';
-
-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

@@ -1,21 +0,0 @@
-import { styled } from '@rango-dev/ui';
-
-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

@@ -1,79 +0,0 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { PropTypes } from './SelectableCategoryList.types';
-
-import { i18n } from '@lingui/core';
-import { Divider, Image, Skeleton, Typography } from '@rango-dev/ui';
-import React from 'react';
-
-import { useMetaStore } from '../../store/meta';
-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 } = props;
-  const blockchains = useMetaStore.use.meta().blockchains;
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const categories = Object.keys(
-    BlockchainCategories
-  ) as BlockchainCategories[];
-  return (
-    <Container>
-      {loadingStatus === 'loading' &&
-        Array.from(Array(5), (_, index) => (
-          <Skeleton
-            key={index}
-            variant="rounded"
-            height={70}
-            width={index === 0 ? 45 : 65}
-          />
-        ))}
-      {loadingStatus === 'success' &&
-        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

@@ -1,12 +0,0 @@
-export interface PropTypes {
-  setCategory: (type: string) => void;
-  category: string;
-}
-
-export enum BlockchainCategories {
-  ALL = 'ALL',
-  EVM = 'EVM',
-  COSMOS = 'COSMOS',
-  UTXO = 'UTXO',
-  OTHER = 'OTHER',
-}

package/src/components/SelectableCategoryList/index.ts

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