@rango-dev/ui 0.46.2-next.9 → 0.47.0

package/src/components/MessageBox/DefaultMessageBox.tsx

@@ -10,10 +10,10 @@ import { Container, Description, IconHighlight } from './MessageBox.styles.js';
 import StatusIcon from './StatusIcon.js';
 
 export function MessageBox(props: PropsWithChildren<PropTypes>) {
-  const { type, title, description, children, icon } = props;
+  const { type, title, description, children, icon, id } = props;
 
   return (
-    <Container>
+    <Container id={id}>
       <IconHighlight type={type}>
         {icon || <StatusIcon type={type} />}
       </IconHighlight>

package/src/components/MessageBox/MessageBox.types.tsx

@@ -9,5 +9,6 @@ export interface PropTypes {
   type: MessageType;
   title: string;
   description?: string | ReactNode;
+  id?: string;
   icon?: ReactNode;
 }

package/src/components/Modal/Modal.tsx

@@ -32,6 +32,7 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
     prefix,
     header,
     dismissible = true,
+    id,
     children,
     suffix,
     footer,
@@ -116,6 +117,7 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
   return createPortal(
     <BackDrop active={active} onClick={handleBackDropClick} css={styles?.root}>
       <ModalContainer
+        id={id}
         active={active}
         css={styles?.container}
         anchor={anchor}
@@ -131,7 +133,10 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
             <Flex>
               {suffix}
               {dismissible && hasCloseIcon && (
-                <IconButton onClick={onClose} variant="ghost">
+                <IconButton
+                  id={`${id}-close-btn`}
+                  onClick={onClose}
+                  variant="ghost">
                   <CloseIcon color="gray" size={14} />
                 </IconButton>
               )}

package/src/components/Modal/Modal.types.ts

@@ -11,6 +11,7 @@ export interface ModalPropTypes {
   onClose: () => void;
   onExit?: () => void;
   anchor?: BaseAnchor;
+  id?: string;
   dismissible?: boolean;
   header?: React.ReactNode;
   prefix?: React.ReactNode;

package/src/components/Select/Select.tsx

@@ -11,7 +11,8 @@ import { SelectContent, SelectItem, SelectTrigger } from './Select.styles.js';
 export function SelectComponent<T extends string>(props: SelectPropTypes<T>) {
   const [open, setOpen] = useState(false);
   const selectRef = useRef<HTMLDivElement>(null);
-  const { options, value, container, handleItemClick, variant, styles } = props;
+  const { options, value, container, handleItemClick, variant, id, styles } =
+    props;
   const handleToggle = () => {
     setOpen((prev) => !prev);
   };
@@ -43,6 +44,7 @@ export function SelectComponent<T extends string>(props: SelectPropTypes<T>) {
     <div ref={selectRef}>
       <Select.Root value={value} open={open}>
         <SelectTrigger
+          id={id}
           variant={variant}
           onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
           onClick={handleToggle}
@@ -69,7 +71,7 @@ export function SelectComponent<T extends string>(props: SelectPropTypes<T>) {
                 {options.map((option) => (
                   <SelectItem
                     onClick={() => {
-                      handleItemClick && handleItemClick(option);
+                      handleItemClick?.(option);
                       handleToggle();
                     }}
                     key={option.value}

package/src/components/Select/Select.types.ts

@@ -12,6 +12,7 @@ export type SelectPropTypes<T> = {
   handleItemClick?: (item: Item<T>) => void;
   value: string;
   container?: HTMLElement;
+  id: string;
   variant: Variant;
   styles?: {
     trigger?: Stitches.CSS;

package/src/components/SelectableCategoryList/SelectableCategoryList.tsx

@@ -43,6 +43,9 @@ export function SelectableCategoryList(props: SelectableCategoryListPropTypes) {
           return (
             hasBlockchain && (
               <BlockchainsChip
+                className={
+                  'widget-selectable-category-list-blockchains-chip-btn'
+                }
                 selected={category === blockchainCategory}
                 key={blockchainCategory}
                 onClick={() => setCategory(blockchainCategory)}>

package/src/components/StepDetails/StepDetails.tsx

@@ -36,6 +36,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
       isFocused,
       tabIndex,
       tooltipContainer,
+      className,
     } = props;
 
     const { from, to, swapper } = step;
@@ -66,6 +67,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         type={type}
         state={state}
         ref={containerRef}
+        className={className}
         tabIndex={tabIndex}>
         {type === 'quote-details' && (
           <div className={swapperItemStyles()}>

package/src/components/StepDetails/StepDetails.types.ts

@@ -39,5 +39,6 @@ export type StepDetailsProps = {
   state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
   isFocused?: boolean;
   tabIndex?: number;
+  className: string;
   tooltipContainer?: HTMLElement;
 };

package/src/components/SwapListItem/SwapListItem.tsx

@@ -42,9 +42,10 @@ export function SwapListItem(props: PropsWithChildren<SwapListItemPropTypes>) {
     swapTokenData,
     tooltipContainer,
     currentStep,
+    className,
   } = props;
   return (
-    <Main onClick={onClick.bind(null, requestId)}>
+    <Main onClick={onClick.bind(null, requestId)} className={className}>
       <Container>
         <Header>
           <Date>

package/src/components/SwapListItem/SwapListItem.types.ts

@@ -9,6 +9,7 @@ export interface SwapListItemProps {
   onClick: (requestId: string) => void;
   swapTokenData: SwapTokenData;
   onlyShowTime?: boolean;
+  className: string;
   tooltipContainer?: HTMLElement;
   currentStep: PendingSwapStep | null;
 }

package/src/components/Tabs/Tabs.tsx

@@ -156,7 +156,7 @@ export function TabsComponent(props: TabsPropTypes) {
   }, [containerRef.current, showArrows, currentIndex]);
 
   return (
-    <Container hasPadding={scrollButtons && showArrows}>
+    <Container hasPadding={scrollButtons && showArrows} className={className}>
       {scrollable && showArrows && scrollButtons && (
         <>
           <ArrowLeft

package/src/components/TextField/TextField.tsx

@@ -66,6 +66,7 @@ function TextFieldComponent(
         className="_text-field">
         {prefix || null}
         <Input
+          autoComplete="off"
           {...inputAttributes}
           onKeyDown={handleKeyDown}
           onPaste={handlePaste}

package/src/components/TextField/TextField.types.tsx

@@ -18,6 +18,7 @@ export type TextFieldPropTypes = {
   suffix?: React.ReactNode;
   size?: BaseSizes;
   variant?: BaseVariants;
+  id: string;
   fullWidth?: boolean;
   labelProps?: TypographyPropTypes;
   style?: Stitches.CSS;

package/src/components/Toast/Toast.tsx

@@ -92,9 +92,12 @@ export const Toast = (props: ToastPropTypes) => {
               type={type}
               variant="alarm"
               titleAlign="left"
+              id={id.toString()}
               action={
                 hasCloseIcon ? (
+                  // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
                   <IconButton
+                    className="toast-close-icon-btn"
                     variant="ghost"
                     size="xsmall"
                     onClick={handleClose}>

package/src/components/TokenAmount/TokenAmount.tsx

@@ -18,7 +18,10 @@ import {
 
 export function TokenAmount(props: PropTypes) {
   return (
-    <Container direction={props.direction} centerAlign={props.centerAlign}>
+    <Container
+      direction={props.direction}
+      centerAlign={props.centerAlign}
+      id={props.id}>
       <div className={tokenAmountStyles()}>
         <ChainToken
           chainImage={props.chain.image}

package/src/components/TokenAmount/TokenAmount.types.ts

@@ -4,6 +4,7 @@ import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types.js';
 type BaseProps = Pick<SwapInputPropTypes, 'token' | 'price'> & {
   chain: Pick<SwapInputPropTypes['chain'], 'image'>;
   direction?: 'vertical' | 'horizontal';
+  id: string;
   centerAlign?: boolean;
   label?: string;
   tooltipContainer?: HTMLElement;

package/src/components/Typography/Typography.tsx

@@ -7,6 +7,7 @@ import { TypographyContainer } from './Typography.styles.js';
 
 export function Typography({
   children,
+  id,
   className,
   color,
   ...props

package/src/components/Typography/Typography.types.tsx

@@ -11,6 +11,7 @@ export interface TypographyPropTypes {
   size: BaseSizes;
   align?: BaseAlign;
   noWrap?: boolean;
+  id?: string;
   className?: string;
   style?: Stitches.CSSProperties;
   color?: string;

package/src/components/Wallet/ClickableWallet.tsx

@@ -51,6 +51,7 @@ function Wallet(props: WalletPropTypes) {
 
   return wrapComponentWithTooltip(
     <WalletButton
+      className={'widget-clickable-wallet-btn'}
       disabled={props.state == WalletState.CONNECTING || disabled}
       onClick={() => {
         if (props.state === WalletState.NOT_INSTALLED) {

package/src/components/Wallet/SelectableWallet.tsx

@@ -19,6 +19,7 @@ export function SelectableWallet(props: SelectablePropTypes) {
     image,
     onClick,
     selected,
+    id,
     description,
     descriptionColor,
     disabled = false,
@@ -27,6 +28,7 @@ export function SelectableWallet(props: SelectablePropTypes) {
   return (
     <SelectableWalletButton
       selected={selected}
+      id={id}
       disabled={props.state == WalletState.CONNECTING || disabled}
       onClick={() => {
         if (props.state === WalletState.NOT_INSTALLED) {

package/src/components/Wallet/Wallet.types.ts

@@ -52,5 +52,6 @@ export interface WalletPropTypes {
 export type SelectablePropTypes = WalletPropTypes & {
   selected: boolean;
   disabled?: boolean;
+  id: string;
   descriptionColor: string;
 };

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.tsx

@@ -8,13 +8,14 @@ import { Modal, Wallet } from '../../components/index.js';
 import { ModalContent } from './ConnectWalletsModal.styles.js';
 
 export function ConnectWalletsModal(props: ConnectWalletsModalPropTypes) {
-  const { open, list, onSelect, onClose } = props;
+  const { open, list, onSelect, onClose, id } = props;
 
   return (
     <Modal
       title={i18n.t('Connect Wallets')}
       open={open}
       onClose={onClose}
+      id={id}
       styles={{
         container: { width: '75%', maxWidth: '30rem', height: '60%' },
       }}>

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.types.ts

@@ -5,6 +5,7 @@ export interface ConnectWalletsModalPropTypes {
   open: boolean;
   list: WalletInfo[];
   onSelect: (walletType: WalletType) => void;
+  id: string;
   onClose: () => void;
   error?: string;
 }

package/src/containers/Notifications/Notifications.tsx

@@ -25,6 +25,7 @@ export function Notifications(props: PropTypes) {
     onClickItem,
     onClearAll,
     containerStyles,
+    id,
   } = props;
   return (
     <Container equalPadding={list.length === 0} css={containerStyles}>
@@ -34,7 +35,11 @@ export function Notifications(props: PropTypes) {
             <Typography variant="label" size="medium">
               {i18n.t('Notifications')}
             </Typography>
-            <ClearAllButton variant="ghost" size="xsmall" onClick={onClearAll}>
+            <ClearAllButton
+              id={`${id}-clear-all-btn`}
+              variant="ghost"
+              size="xsmall"
+              onClick={onClearAll}>
               <Typography variant="body" size="xsmall" color="neutral700">
                 {i18n.t('Clear all')}
               </Typography>
@@ -61,6 +66,7 @@ export function Notifications(props: PropTypes) {
               <React.Fragment key={requestId}>
                 {index > 0 && <Divider size={4} />}
                 <ListItem
+                  className={`${id}-list-item`}
                   onClick={() => onClickItem(requestId)}
                   actionRequired={event.messageSeverity === 'warning'}
                   title={

package/src/containers/Notifications/Notifications.types.ts

@@ -9,6 +9,7 @@ type Notification = {
 
 export type PropTypes = {
   list: Notification[];
+  id: string;
   getBlockchainImage: (blockchain: string) => string | undefined;
   getTokenImage: (token: Asset) => string | undefined;
   onClickItem: (requestId: string) => void;

package/src/containers/SwapInput/SwapInput.tsx

@@ -69,6 +69,7 @@ export function SwapInput(props: SwapInputPropTypes) {
               <MaxButton
                 variant="default"
                 size="xsmall"
+                id={`${props.id}-max-btn`}
                 onClick={props.onSelectMaxBalance}>
                 <Typography variant="body" size="xsmall">
                   {i18n.t('Max')}
@@ -86,6 +87,7 @@ export function SwapInput(props: SwapInputPropTypes) {
       <div className={formStyles()}>
         <TokenSectionContainer>
           <TokenSection
+            id={`${props.id}-token-selection-container`}
             chain={props.chain.displayName}
             chianImageId={
               props.mode === 'To'
@@ -124,6 +126,7 @@ export function SwapInput(props: SwapInputPropTypes) {
                   disabled={props.disabled || props.mode === 'To'}
                   style={{ padding: 0 }}
                   value={price.value}
+                  id={`${props.id}-input`}
                   type={'onInputChange' in props ? 'number' : 'text'}
                   step="any"
                   size="large"

package/src/containers/SwapInput/SwapInput.types.ts

@@ -1,6 +1,7 @@
 import type { PriceImpactWarningLevel } from '../../components/PriceImpact/PriceImpact.types.js';
 
 export type BaseProps = {
+  id: string;
   chain: {
     displayName: string;
     image?: string;

package/src/containers/SwapInput/TokenSection.tsx

@@ -36,12 +36,17 @@ export function TokenSection(props: TokenSectionProps) {
     loading,
     warning,
     tooltipContainer,
+    id,
   } = props;
 
   const tokenSelected = !error && !loading && !!tokenSymbol;
 
   return (
-    <Container variant="default" disabled={error || loading} onClick={onClick}>
+    <Container
+      id={`${id}-clear-all-btn`}
+      variant="default"
+      disabled={error || loading}
+      onClick={onClick}>
       <TokenSectionContainer>
         <ChainToken
           chianImageId={chianImageId}

package/src/containers/SwapInput/TokenSection.types.ts

@@ -2,6 +2,7 @@ export type TokenSectionProps = {
   chainImage?: string;
   tokenImage?: string;
   tokenSymbol: string;
+  id: string;
   chain: string;
   chianImageId?: string;
   error?: boolean;