@rango-dev/ui 0.22.1-next.8 → 0.23.0

package/dist/widget/ui/src/icons/Icons.stories.d.ts

@@ -1,6 +1,6 @@
 import type { SvgIconProps } from '../components/SvgIcon';
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any> | import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any>;
 export default _default;
 export declare const Main: (props: SvgIconProps) => React.JSX.Element;
 //# sourceMappingURL=Icons.stories.d.ts.map

package/dist/widget/ui/src/icons/OtherCategory.d.ts

@@ -0,0 +1,5 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+import React from 'react';
+declare function SvgOtherCategory(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
+export default SvgOtherCategory;
+//# sourceMappingURL=OtherCategory.d.ts.map

package/dist/widget/ui/src/icons/OtherCategory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtherCategory.d.ts","sourceRoot":"","sources":["../../../../../src/icons/OtherCategory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,4DAgExD;AACD,eAAe,gBAAgB,CAAC"}

package/dist/widget/ui/src/icons/UtxoCategory.d.ts

@@ -0,0 +1,5 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+import React from 'react';
+declare function SvgUtxoCategory(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
+export default SvgUtxoCategory;
+//# sourceMappingURL=UtxoCategory.d.ts.map

package/dist/widget/ui/src/icons/UtxoCategory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtxoCategory.d.ts","sourceRoot":"","sources":["../../../../../src/icons/UtxoCategory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,eAAe,CAAC,KAAK,EAAE,wBAAwB,4DAoCvD;AACD,eAAe,eAAe,CAAC"}

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

@@ -7,11 +7,13 @@ export { default as ChevronUpIcon } from './ChevronUp';
 export { default as CloseIcon } from './Close';
 export { default as CompleteIcon } from './Complete';
 export { default as CopyIcon } from './Copy';
+export { default as CosmosCategoryIcon } from './CosmosCategory';
 export { default as CustomColorsIcon } from './CustomColors';
 export { default as DarkModeIcon } from './DarkMode';
 export { default as DeleteIcon } from './Delete';
 export { default as DesktopIcon } from './Desktop';
 export { default as DoneIcon } from './Done';
+export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ErrorIcon } from './Error';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
@@ -30,6 +32,7 @@ export { default as NoNotificationIcon } from './NoNotification';
 export { default as NotificationNumberIcon } from './NotificationNumber';
 export { default as NotificationsIcon } from './Notifications';
 export { default as NumberIcon } from './Number';
+export { default as OtherCategoryIcon } from './OtherCategory';
 export { default as PinIcon } from './Pin';
 export { default as RefreshIcon } from './Refresh';
 export { default as ReverseIcon } from './Reverse';
@@ -37,6 +40,7 @@ export { default as RouteIcon } from './Route';
 export { default as SearchIcon } from './Search';
 export { default as TimeIcon } from './Time';
 export { default as TransactionIcon } from './Transaction';
+export { default as UtxoCategoryIcon } from './UtxoCategory';
 export { default as WalletIcon } from './Wallet';
 export { default as WarningIcon } from './Warning';
 export { default as ChainsIcon } from './Chains';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,2 @@
-export type { BestRouteWithFee } from './swaps';
 export type { ConnectedWallet } from './wallet';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}

package/dist/widget/ui/src/types/swaps.d.ts

@@ -1,30 +1,4 @@
-import type { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
-export type SwapStatus = 'running' | 'failed' | 'success';
-export type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
-export type StepStatus = 'created' | 'running' | 'failed' | 'success' | 'waitingForApproval' | 'approved';
-export declare enum PendingSwapNetworkStatus {
-    WaitingForConnectingWallet = "waitingForConnectingWallet",
-    WaitingForQueue = "waitingForQueue",
-    WaitingForNetworkChange = "waitingForNetworkChange",
-    NetworkChanged = "networkChanged"
-}
-export type WalletTypeAndAddress = {
-    walletType: string;
-    address: string;
-};
-export type SwapSavedSettings = {
-    slippage: string;
-    disabledSwappersIds: string[];
-    disabledSwappersGroups: string[];
-};
+import type { BlockchainValidationStatus, WalletRequiredAssets } from 'rango-sdk';
 export type SimulationAssetAndAmount = WalletRequiredAssets;
 export type SimulationValidationStatus = BlockchainValidationStatus;
-export type BestRouteType = BestRouteResponse;
-export type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
-    result: Omit<SimulationResult, 'swaps'> & {
-        swaps: (SwapResult & {
-            feeInUsd?: string;
-        })[];
-    };
-};
 //# sourceMappingURL=swaps.d.ts.map

package/dist/widget/ui/src/types/swaps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../../../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,oBAAoB,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvE,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,oBAAoB,GACpB,UAAU,CAAC;AAEf,oBAAY,wBAAwB;IAClC,0BAA0B,+BAA+B;IACzD,eAAe,oBAAoB;IACnC,uBAAuB,4BAA4B;IACnD,cAAc,mBAAmB;CAClC;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,sBAAsB,EAAE,MAAM,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC5D,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,CAAC;AACpE,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IACjE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;QACxC,KAAK,EAAE,CAAC,UAAU,GAAG;YAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,EAAE,CAAC;KAC/C,CAAC;CACH,CAAC"}
+{"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../../../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,oBAAoB,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC5D,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,CAAC"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.22.1-next.8",
+  "version": "0.23.0",
   "license": "MIT",
   "type": "module",
-  "module": "./dist/index.js",
+  "source": "./src/index.ts",
   "main": "./dist/index.js",
   "exports": "./dist/index.js",
   "typings": "dist/widget/ui/src/index.d.ts",
@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "yarn bundle --watch",
     "build": "node ../../scripts/build/command.mjs --path widget/ui",
+    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "build:icons": "svgr svgs/resources/fill --config-file svgs/configs/.svgrrc.default.cjs",
     "type-checking": "tsc --declaration --emitDeclarationOnly",
     "storybook": "storybook dev -p 3000",
@@ -25,7 +26,6 @@
   "peerDependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/queue-manager-rango-preset": "*",
     "react": ">=16"
   },
   "devDependencies": {
@@ -65,9 +65,10 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.21.1-next.3",
+    "@rango-dev/wallets-shared": "^0.22.0",
     "@stitches/react": "^1.2.8",
-    "rango-sdk": "^0.1.35",
+    "rango-sdk": "^0.1.44",
+    "rango-types": "^0.1.57",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
     "react-window-infinite-loader": "^1.0.8",

package/src/components/Alert/Alert.styles.ts

@@ -1,16 +1,10 @@
-import { darkTheme, styled } from '../../theme';
+import { css, darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '$xs',
 
-  '.title': {
-    display: 'flex',
-    alignItems: 'center',
-    flex: '1 0 0',
-  },
-
   '.title_typography:first-letter': {
     textTransform: 'uppercase',
   },
@@ -120,6 +114,7 @@ export const IconHighlight = styled('div', {
   justifyContent: 'center',
   alignItems: 'center',
   alignSelf: 'flex-start',
+  flexShrink: 0,
   variants: {
     type: {
       success: {
@@ -160,3 +155,9 @@ export const IconHighlight = styled('div', {
     },
   },
 });
+
+export const titleStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flex: '1 0 0',
+});

package/src/components/Alert/Alert.tsx

@@ -7,7 +7,7 @@ import { Divider } from '../Divider';
 import { Typography } from '../Typography';
 
 import { getColor } from './Alert.helpers';
-import { Container, IconHighlight, Main } from './Alert.styles';
+import { Container, IconHighlight, Main, titleStyles } from './Alert.styles';
 import AlertIcon from './AlertIcon';
 
 export function Alert(props: PropsWithChildren<PropTypes>) {
@@ -28,7 +28,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
       type={type}
       variant={variant}>
       <Main variant={variant}>
-        <div className="title">
+        <div className={titleStyles()}>
           <IconHighlight type={type}>
             <AlertIcon type={type} />
           </IconHighlight>

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

@@ -1,4 +1,5 @@
 import { darkTheme, styled } from '../../theme';
+import { ImageContainer } from '../common';
 
 export const Chip = styled('button', {
   padding: '$10',
@@ -15,7 +16,7 @@ export const Chip = styled('button', {
   cursor: 'pointer',
   border: 0,
   fontFamily: 'inherit',
-  '.image-container': {
+  [`& ${ImageContainer}`]: {
     borderRadius: '$xm',
     overflow: 'hidden',
   },

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

@@ -524,6 +524,7 @@ export const ButtonBase = styled('button', {
 });
 
 export const Content = styled('span', {
+  flexGrow: 1,
   display: 'inline-block',
   variants: {
     pl: {

package/src/components/ListItem/ListItem.styles.ts

@@ -2,6 +2,7 @@ import { darkTheme, styled } from '../../theme';
 
 export const BaseListItem = styled('li', {
   width: '100%',
+  overflow: 'hidden',
   borderRadius: '$xs',
   display: 'flex',
   alignItems: 'center',
@@ -41,6 +42,7 @@ export const BaseListItem = styled('li', {
     justifyContent: 'center',
     alignItems: 'center',
     paddingLeft: '$10',
+    overflow: 'hidden',
   },
   variants: {
     hasDivider: {

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -6,6 +6,7 @@ export const BaseListItemButton = styled('button', {
   width: '100%',
   backgroundColor: 'transparent',
   fontFamily: 'inherit',
+  padding: 'unset',
   '&:focus-visible': {
     borderRadius: '$xs',
 

package/src/components/PriceImpact/PriceImpact.styles.ts

@@ -1,7 +1,15 @@
 import { styled } from '../../theme';
+import { Typography } from '../Typography';
 
 export const Container = styled('div', {
+  width: '100%',
   display: 'flex',
-  justifyContent: 'center',
+  justifyContent: 'end',
   alignItems: 'center',
 });
+
+export const OutputUsdValue = styled(Typography, {
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});

package/src/components/PriceImpact/PriceImpact.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { Typography } from '..';
 
-import { Container } from './PriceImpact.styles';
+import { Container, OutputUsdValue } from './PriceImpact.styles';
 
 export function PriceImpact(props: PriceImpactProps) {
   const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
@@ -19,12 +19,12 @@ export function PriceImpact(props: PriceImpactProps) {
   return (
     <Container>
       {outputUsdValue && (
-        <Typography
+        <OutputUsdValue
           size={size === 'small' ? 'small' : 'medium'}
           variant="body"
           color="$neutral600">
           {`~$${outputUsdValue}`}
-        </Typography>
+        </OutputUsdValue>
       )}
       {((outputUsdValue && percentageChange) || !outputUsdValue) && (
         <Typography

package/src/components/QuoteCost/QuoteCost.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { css, styled } from '../../theme';
 
 export const Container = styled('div', {
   borderRadius: '$xs',
@@ -6,17 +6,6 @@ export const Container = styled('div', {
   justifyContent: 'start',
   alignItems: 'center',
   paddingBottom: '$10',
-  '& .item': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .icon': {
-    width: '$16',
-    height: '$16',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
 });
 
 export const Separator = styled('div', {
@@ -25,3 +14,16 @@ export const Separator = styled('div', {
   marginRight: '$10',
   borderLeft: '1px solid $foreground',
 });
+
+export const iconStyles = css({
+  width: '$16',
+  height: '$16',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const itemStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});

package/src/components/QuoteCost/QuoteCost.tsx

@@ -5,14 +5,19 @@ import React from 'react';
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
 import { Typography } from '../Typography';
 
-import { Container, Separator } from './QuoteCost.styles';
+import {
+  Container,
+  iconStyles,
+  itemStyles,
+  Separator,
+} from './QuoteCost.styles';
 
 export function QuoteCost(props: PropTypes) {
   const { fee, time, steps } = props;
   return (
     <Container>
-      <div className="item">
-        <div className="icon">
+      <div className={itemStyles()}>
+        <div className={iconStyles()}>
           <GasIcon size={12} color={'gray'} />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">
@@ -20,8 +25,8 @@ export function QuoteCost(props: PropTypes) {
         </Typography>
       </div>
       <Separator />
-      <div className="item">
-        <div className="icon">
+      <div className={itemStyles()}>
+        <div className={iconStyles()}>
           <TimeIcon size={12} color="gray" />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">
@@ -29,8 +34,8 @@ export function QuoteCost(props: PropTypes) {
         </Typography>
       </div>
       <Separator />
-      <div className="item">
-        <div className="icon">
+      <div className={itemStyles()}>
+        <div className={iconStyles()}>
           <NumberIcon size={16} color="gray" />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">

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

@@ -1,7 +1,29 @@
 import { type BlockchainMeta, TransactionType } from 'rango-sdk';
 
+import {
+  CosmosCategoryIcon,
+  EvmCategoryIcon,
+  OtherCategoryIcon,
+  UtxoCategoryIcon,
+} from '../../icons';
+
 import { BlockchainCategories } from './SelectableCategoryList.types';
 
+export const blockchainCategoryIcons = {
+  [BlockchainCategories.EVM]: EvmCategoryIcon,
+  [BlockchainCategories.COSMOS]: CosmosCategoryIcon,
+  [BlockchainCategories.UTXO]: UtxoCategoryIcon,
+  [BlockchainCategories.OTHER]: OtherCategoryIcon,
+};
+
+export const blockchainCategoryLabel = {
+  [BlockchainCategories.ALL]: 'All',
+  [BlockchainCategories.EVM]: 'EVM',
+  [BlockchainCategories.COSMOS]: 'Cosmos',
+  [BlockchainCategories.UTXO]: 'UTXO',
+  [BlockchainCategories.OTHER]: 'Other',
+};
+
 const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
   switch (type) {
     case BlockchainCategories.ALL:
@@ -19,17 +41,22 @@ const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
   }
 };
 
-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 = (
+export const hasAnyCategory = (
   list: BlockchainMeta[],
-  type: Exclude<BlockchainCategories, 'ALL'>
-) =>
-  list
-    .filter((item) => filterByType(item, type))
-    .filter((item) => blockchainslogo[type].includes(item.name));
+  blockchainType: string
+) => list.some((blockchain) => filterByType(blockchain, blockchainType));
+
+export const getCountCategories = (list: BlockchainMeta[]) => {
+  const categoriesToCheck = Object.values(BlockchainCategories).filter(
+    (category) => category !== BlockchainCategories.ALL
+  );
+
+  const categoriesCount = categoriesToCheck.reduce((count, category) => {
+    const isCategoryPresent = list.some((blockchain) =>
+      filterByType(blockchain, category)
+    );
+    return count + (isCategoryPresent ? 1 : 0);
+  }, 0);
+
+  return categoriesCount;
+};

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -4,19 +4,19 @@ import type { PropTypes } from './SelectableCategoryList.types';
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { Divider, Image, Skeleton, Typography } from '..';
+import { Divider, Skeleton, Typography } from '..';
 import { BlockchainsChip } from '../BlockchainsChip';
 
-import { generateBlockchainsLogo } from './SelectableCategoryList.helpers';
 import {
-  Container,
-  FirstImage,
-  ImageContent,
-} from './SelectableCategoryList.styles';
+  blockchainCategoryIcons,
+  blockchainCategoryLabel,
+  hasAnyCategory,
+} from './SelectableCategoryList.helpers';
+import { Container } from './SelectableCategoryList.styles';
 import { BlockchainCategories } from './SelectableCategoryList.types';
 
 export function SelectableCategoryList(props: PropTypes) {
-  const { setCategory, category, blockchains, isLoading } = props;
+  const { setCategory, category, isLoading, blockchains } = props;
   const categories = Object.keys(
     BlockchainCategories
   ) as BlockchainCategories[];
@@ -32,45 +32,46 @@ export function SelectableCategoryList(props: PropTypes) {
           />
         ))}
       {!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>
-        ))}
+        categories.map((blockchainCategory) => {
+          const Logo =
+            blockchainCategory !== BlockchainCategories.ALL
+              ? blockchainCategoryIcons[blockchainCategory]
+              : null;
+
+          const hasBlockchain = hasAnyCategory(blockchains, blockchainCategory);
+
+          return (
+            hasBlockchain && (
+              <BlockchainsChip
+                selected={category === blockchainCategory}
+                key={blockchainCategory}
+                onClick={() => setCategory(blockchainCategory)}>
+                {Logo && (
+                  <>
+                    <Logo size={28} />
+                    <Divider size={12} />
+                  </>
+                )}
+                <Typography
+                  size="xsmall"
+                  variant="body"
+                  color={
+                    blockchainCategory === BlockchainCategories.ALL
+                      ? 'secondary500'
+                      : undefined
+                  }>
+                  {i18n.t({
+                    id: '{blockchainCategory}',
+                    values: {
+                      blockchainCategory:
+                        blockchainCategoryLabel[blockchainCategory],
+                    },
+                  })}
+                </Typography>
+              </BlockchainsChip>
+            )
+          );
+        })}
     </Container>
   );
 }

package/src/components/SelectableCategoryList/index.ts

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

package/src/components/Skeleton/Skeleton.tsx

@@ -5,12 +5,13 @@ import React from 'react';
 import { SkeletonContainer } from './Skeleton.styles';
 
 export function Skeleton(props: PropTypes) {
+  const { width = '100%' } = props;
   const customCss =
     props.variant !== 'text'
       ? {
-          width: props.width,
+          width,
           height: props.height,
         }
-      : { width: props.width };
+      : { width };
   return <SkeletonContainer css={customCss} {...props} />;
 }

package/src/components/Skeleton/Skeleton.types.ts

@@ -8,7 +8,7 @@ type BaseSizes = Exclude<BaseProps['size'], object>;
 type TextVariant = {
   variant: 'text';
   size: BaseSizes;
-  width: number;
+  width?: number;
 };
 
 type OtherVariant = {