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

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/TextField/TextField.styles.ts

@@ -90,7 +90,6 @@ export const Input = styled('input', {
   fontWeight: 400,
   border: 'none',
   outline: 'none',
-  width: '100%',
   variants: {
     suffix: {
       true: { marginRight: '$10' },
@@ -113,6 +112,9 @@ export const Input = styled('input', {
   '&::placeholder, &::-webkit-input-placeholder': {
     color: '$neutral900',
   },
+  '&:focus-within': {
+    outline: 'none',
+  },
 });
 
 export const Label = styled('label', {

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,6 +1,16 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
 import { styled } from '../../theme';
 import { Typography } from '../Typography';
 
+export const TooltipContent = styled(RadixTooltip.Content, {
+  zIndex: '999999',
+});
+
+export const TooltipArrow = styled(RadixTooltip.Arrow, {
+  fill: '$neutral100',
+});
+
 export const TooltipTypography = styled(Typography, {
   borderRadius: '$md',
   padding: '$5 $10',

package/src/components/Tooltip/Tooltip.tsx

@@ -4,7 +4,11 @@ import type { PropsWithChildren } from 'react';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import React from 'react';
 
-import { TooltipTypography } from './Tooltip.styles';
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipTypography,
+} from './Tooltip.styles';
 
 export function Tooltip(props: PropsWithChildren<PropTypes>) {
   const {
@@ -16,17 +20,18 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     side = 'top',
   } = props;
   return (
-    <RadixTooltip.Provider>
+    <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root>
         <RadixTooltip.Trigger asChild>
           <div>{children}</div>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
-          <RadixTooltip.Content side={side} sideOffset={sideOffset}>
+          <TooltipContent side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>
-          </RadixTooltip.Content>
+            <TooltipArrow />
+          </TooltipContent>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>
     </RadixTooltip.Provider>

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';

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -61,11 +61,4 @@ export const MaxButton = styled(Button, {
     $$color: '$colors$secondary800',
   },
   backgroundColor: '$$color',
-  '&:focus-visible': {
-    $$outline: '$colors$info600',
-    [`.${darkTheme} &`]: {
-      $$outline: '$colors$info100',
-    },
-    outlineColor: '$$outline',
-  },
 });

package/src/containers/SwapInput/SwapInput.tsx

@@ -95,7 +95,9 @@ export function SwapInput(props: SwapInputProps) {
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                   }}>
-                  {props.price.usdValue || props.price.error}
+                  {props.price.usdValue
+                    ? `~$${props.price.usdValue}`
+                    : props.price.error}
                 </Typography>
               )}
             </>