@rango-dev/ui 0.37.1-next.1 → 0.38.0

package/src/components/Tooltip/index.ts

@@ -1,4 +1,4 @@
-export { Tooltip } from './Tooltip.js';
-export type { TooltipPropTypes } from './Tooltip.types.js';
-export { NumericTooltip } from './NumericTooltip.js';
-export type { NumericTooltipPropTypes } from './NumericTooltip.types.js';
+export { Tooltip } from './Tooltip';
+export type { TooltipPropTypes } from './Tooltip.types';
+export { NumericTooltip } from './NumericTooltip';
+export type { NumericTooltipPropTypes } from './NumericTooltip.types';

package/src/components/Typography/NotSelectableTypography.ts

@@ -1,6 +1,6 @@
-import { styled } from '../../theme.js';
+import { styled } from '../../theme';
 
-import { Typography } from './Typography.js';
+import { Typography } from './Typography';
 
 export const NotSelectableTypography = styled(Typography, {
   userSelect: 'none',

package/src/components/Typography/Typography.styles.tsx

@@ -1,4 +1,4 @@
-import { styled } from '../../theme.js';
+import { styled } from '../../theme';
 
 export const TypographyContainer = styled('span', {
   display: 'inline-block',

package/src/components/Typography/Typography.tsx

@@ -1,9 +1,9 @@
-import type { TypographyPropTypes } from './Typography.types.js';
+import type { TypographyPropTypes } from './Typography.types';
 import type { PropsWithChildren } from 'react';
 
 import React from 'react';
 
-import { TypographyContainer } from './Typography.styles.js';
+import { TypographyContainer } from './Typography.styles';
 
 export function Typography({
   children,

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

@@ -1,4 +1,4 @@
-import type { TypographyContainer } from './Typography.styles.js';
+import type { TypographyContainer } from './Typography.styles';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof TypographyContainer>;

package/src/components/Typography/index.ts

@@ -1,3 +1,3 @@
-export { Typography } from './Typography.js';
-export { NotSelectableTypography } from './NotSelectableTypography.js';
-export type { TypographyPropTypes } from './Typography.types.js';
+export { Typography } from './Typography';
+export { NotSelectableTypography } from './NotSelectableTypography';
+export type { TypographyPropTypes } from './Typography.types';

package/src/components/VirtualizedList/index.ts

@@ -1 +1 @@
-export { VirtualizedList, GroupedVirtualizedList } from './VirtualizedList.js';
+export { VirtualizedList, GroupedVirtualizedList } from './VirtualizedList';

package/src/components/Wallet/ClickableWallet.tsx

@@ -1,23 +1,23 @@
-import type { WalletPropTypes } from './Wallet.types.js';
+import type { WalletPropTypes } from './Wallet.types';
 
 import { detectInstallLink } from '@rango-dev/wallets-shared';
 import React, { Fragment } from 'react';
 
-import { Image } from '../common/index.js';
-import { Divider } from '../Divider/index.js';
-import { Skeleton } from '../Skeleton/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { Typography } from '../Typography/index.js';
+import { Image } from '../common';
+import { Divider } from '../Divider';
+import { Skeleton } from '../Skeleton';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
 
-import { makeInfo } from './Wallet.helpers.js';
+import { makeInfo } from './Wallet.helpers';
 import {
   LoadingButton,
   Text,
   Title,
   WalletButton,
   WalletImageContainer,
-} from './Wallet.styles.js';
-import { WalletState } from './Wallet.types.js';
+} from './Wallet.styles';
+import { WalletState } from './Wallet.types';
 
 function Wallet(props: WalletPropTypes) {
   const { title, type, image, onClick, isLoading, disabled = false } = props;

package/src/components/Wallet/SelectableWallet.tsx

@@ -1,17 +1,17 @@
 import { detectInstallLink } from '@rango-dev/wallets-shared';
 import React from 'react';
 
-import { Image } from '../common/index.js';
-import { Typography } from '../Typography/index.js';
+import { Image } from '../common';
+import { Typography } from '../Typography';
 
-import { makeInfo } from './Wallet.helpers.js';
+import { makeInfo } from './Wallet.helpers';
 import {
   Text,
   Title,
   WalletButton,
   WalletImageContainer,
-} from './Wallet.styles.js';
-import { type SelectablePropTypes, WalletState } from './Wallet.types.js';
+} from './Wallet.styles';
+import { type SelectablePropTypes, WalletState } from './Wallet.types';
 
 export function SelectableWallet(props: SelectablePropTypes) {
   const {

package/src/components/Wallet/Wallet.helpers.ts

@@ -1,8 +1,8 @@
-import type { Info } from './Wallet.types.js';
+import type { Info } from './Wallet.types';
 
 import { i18n } from '@lingui/core';
 
-import { WalletState } from './Wallet.types.js';
+import { WalletState } from './Wallet.types';
 
 export function makeInfo(state: WalletState): Info {
   switch (state) {

package/src/components/Wallet/Wallet.styles.ts

@@ -1,5 +1,5 @@
-import { darkTheme, styled } from '../../theme.js';
-import { Typography } from '../Typography/index.js';
+import { darkTheme, styled } from '../../theme';
+import { Typography } from '../Typography';
 
 export const WalletImageContainer = styled('div', {
   '& img': {

package/src/components/Wallet/Wallet.tsx

@@ -1,2 +1,2 @@
-export { default as Wallet } from './ClickableWallet.js';
-export { SelectableWallet } from './SelectableWallet.js';
+export { default as Wallet } from './ClickableWallet';
+export { SelectableWallet } from './SelectableWallet';

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

@@ -1,5 +1,5 @@
 import type { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
-import type { TransactionType } from 'rango-types';
+import type { TransactionType } from 'rango-sdk';
 
 export enum WalletState {
   NOT_INSTALLED = 'not_installed',

package/src/components/Wallet/index.ts

@@ -1,3 +1,3 @@
-export * from './Wallet.js';
-export type { WalletInfo } from './Wallet.types.js';
-export { WalletState } from './Wallet.types.js';
+export * from './Wallet';
+export type { WalletInfo } from './Wallet.types';
+export { WalletState } from './Wallet.types';

package/src/components/common/Image.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { styled } from '../../theme.js';
+import { styled } from '../../theme';
 
 export const ImageContainer = styled('div', {
   display: 'flex',

package/src/components/common/index.ts

@@ -1 +1 @@
-export { Image, ImageContainer } from './Image.js';
+export { Image, ImageContainer } from './Image';

package/src/components/common/styles.ts

@@ -1,6 +1,6 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 
-import { keyframes, styled } from '../../theme.js';
+import { keyframes, styled } from '../../theme';
 
 const slideDown = keyframes({
   from: {

package/src/components/index.ts

@@ -1,49 +1,46 @@
-export * from './I18nManager/index.js';
-export * from './Alert/index.js';
-export * from './BlockchainsChip/index.js';
-export * from './BottomLogo/index.js';
-export * from './Button/index.js';
-export * from './IconButton/index.js';
-export * from './Collapsible/index.js';
-export * from './Checkbox/index.js';
-export * from './Chip/index.js';
-export * from './common/index.js';
-export * from './Divider/index.js';
-export * from './FullExpandedQuote/index.js';
-export * from './Header/index.js';
-export * from './Modal/index.js';
-export * from './MessageBox/index.js';
-export * from './RadioGroup/index.js';
-export * from './RefreshProgressButton/index.js';
-export * from './SelectableCategoryList/index.js';
-export * from './Spinner/index.js';
-export * from './SwapListItem/index.js';
-export * from './Switch/index.js';
-export * from './TextField/index.js';
-export * from './Toast/index.js';
-export * from './Tooltip/index.js';
-export * from './Typography/index.js';
-export * from './Wallet/index.js';
-export * from './Radio/index.js';
-export * from './PriceImpact/index.js';
-export * from './ChainToken/index.js';
-export * from './Skeleton/index.js';
-export * from './VirtualizedList/index.js';
-export * from './ListItemButton/index.js';
-export * from './List/index.js';
-export * from './ListItem/index.js';
-export * from './NotFound/index.js';
-export * from './MessageBox/index.js';
-export * from './IconButton/index.js';
-export * from './QuoteCost/index.js';
-export * from './TokenAmount/index.js';
-export * from './StepDetails/index.js';
-export * from './Popover/index.js';
-export * from './Flags/index.js';
-export * from './Select/index.js';
-export * from './QuoteTag/index.js';
-export * from './Tabs/index.js';
-export type {
-  SvgIconProps,
-  SvgIconPropsWithChildren,
-} from './SvgIcon/index.js';
+export * from './I18nManager';
+export * from './Alert';
+export * from './BlockchainsChip';
+export * from './BottomLogo';
+export * from './Button';
+export * from './IconButton';
+export * from './Collapsible';
+export * from './Checkbox';
+export * from './Chip';
+export * from './common';
+export * from './Divider';
+export * from './FullExpandedQuote';
+export * from './Header';
+export * from './Modal';
+export * from './MessageBox';
+export * from './RadioGroup';
+export * from './RefreshProgressButton';
+export * from './SelectableCategoryList';
+export * from './Spinner';
+export * from './SwapListItem';
+export * from './Switch';
+export * from './TextField';
+export * from './Toast';
+export * from './Tooltip';
+export * from './Typography';
+export * from './Wallet';
+export * from './Radio';
+export * from './PriceImpact';
+export * from './ChainToken';
+export * from './Skeleton';
+export * from './VirtualizedList';
+export * from './ListItemButton';
+export * from './List';
+export * from './ListItem';
+export * from './NotFound';
+export * from './MessageBox';
+export * from './IconButton';
+export * from './QuoteCost';
+export * from './TokenAmount';
+export * from './StepDetails';
+export * from './Popover';
+export * from './Flags';
+export * from './Select';
+export * from './QuoteTag';
+export * from './Tabs';
+export type { SvgIconProps, SvgIconPropsWithChildren } from './SvgIcon';

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '../../theme.js';
+import { styled } from '../../theme';
 
 export const ModalContent = styled('div', {
   display: 'grid',

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.tsx

@@ -1,11 +1,11 @@
-import type { ConnectWalletsModalPropTypes } from './ConnectWalletsModal.types.js';
+import type { ConnectWalletsModalPropTypes } from './ConnectWalletsModal.types';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { Modal, Wallet } from '../../components/index.js';
+import { Modal, Wallet } from '../../components';
 
-import { ModalContent } from './ConnectWalletsModal.styles.js';
+import { ModalContent } from './ConnectWalletsModal.styles';
 
 export function ConnectWalletsModal(props: ConnectWalletsModalPropTypes) {
   const { open, list, onSelect, onClose } = props;

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

@@ -1,4 +1,4 @@
-import type { WalletInfo } from '../../components/index.js';
+import type { WalletInfo } from '../../components';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 export interface ConnectWalletsModalPropTypes {

package/src/containers/ConnectWalletsModal/index.ts

@@ -1,2 +1,2 @@
-export { ConnectWalletsModal } from './ConnectWalletsModal.js';
-export type { ConnectWalletsModalPropTypes } from './ConnectWalletsModal.types.js';
+export { ConnectWalletsModal } from './ConnectWalletsModal';
+export type { ConnectWalletsModalPropTypes } from './ConnectWalletsModal.types';

package/src/containers/Notifications/NotificationNotFound.tsx

@@ -1,10 +1,10 @@
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { Divider, Typography } from '../../components/index.js';
-import { NoNotificationIcon } from '../../icons/index.js';
+import { Divider, Typography } from '../../components';
+import { NoNotificationIcon } from '../../icons';
 
-import { NotFoundContainer } from './Notifications.styles.js';
+import { NotFoundContainer } from './Notifications.styles';
 
 export function NotificationNotFound() {
   return (

package/src/containers/Notifications/Notifications.styles.ts

@@ -1,5 +1,5 @@
-import { Button, ListItemButton } from '../../components/index.js';
-import { darkTheme, styled } from '../../theme.js';
+import { Button, ListItemButton } from '../../components';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   borderRadius: '$sm',

package/src/containers/Notifications/Notifications.tsx

@@ -1,12 +1,12 @@
-import type { PropTypes } from './Notifications.types.js';
+import type { PropTypes } from './Notifications.types';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { ChainToken, Divider, Typography } from '../../components/index.js';
-import { ChevronRightIcon } from '../../icons/index.js';
+import { ChainToken, Divider, Typography } from '../../components';
+import { ChevronRightIcon } from '../../icons';
 
-import { NotificationNotFound } from './NotificationNotFound.js';
+import { NotificationNotFound } from './NotificationNotFound';
 import {
   ClearAllButton,
   Container,
@@ -15,7 +15,7 @@ import {
   Images,
   List,
   ListItem,
-} from './Notifications.styles.js';
+} from './Notifications.styles';
 
 export function Notifications(props: PropTypes) {
   const {

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

@@ -1,5 +1,5 @@
-import type { CSS } from '../../theme.js';
-import type { Asset } from 'rango-types';
+import type { CSS } from '../../theme';
+import type { Asset } from 'rango-sdk';
 
 type Notification = {
   route: { from: Asset; to: Asset };

package/src/containers/Notifications/index.ts

@@ -1 +1 @@
-export * from './Notifications.js';
+export * from './Notifications';

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

@@ -1,5 +1,5 @@
-import { Button, TextField, Typography } from '../../components/index.js';
-import { css, darkTheme, styled } from '../../theme.js';
+import { Button, TextField, Typography } from '../../components';
+import { css, darkTheme, styled } from '../../theme';
 
 export const textStyles = css();
 

package/src/containers/SwapInput/SwapInput.tsx

@@ -1,4 +1,4 @@
-import type { SwapInputPropTypes } from './SwapInput.types.js';
+import type { SwapInputPropTypes } from './SwapInput.types';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
@@ -9,8 +9,8 @@ import {
   PriceImpact,
   Skeleton,
   Typography,
-} from '../../components/index.js';
-import { UI_ID } from '../../constants/index.js';
+} from '../../components';
+import { UI_ID } from '../../constants';
 
 import {
   amountStyles,
@@ -24,8 +24,8 @@ import {
   textStyles,
   UsdPrice,
   ValueTypography,
-} from './SwapInput.styles.js';
-import { TokenSection } from './TokenSection.js';
+} from './SwapInput.styles';
+import { TokenSection } from './TokenSection';
 
 export function SwapInput(props: SwapInputPropTypes) {
   const showBalance =
@@ -37,6 +37,15 @@ export function SwapInput(props: SwapInputPropTypes) {
 
   const showBalanceSkeleton =
     'balance' in props && (props.loading || props.loadingBalance);
+  const price = props.price;
+
+  const isUsdValueZeroOrFalsy =
+    !props.price.usdValue || props.price.usdValue === '0';
+
+  const displayUsdValue =
+    props.price.error ||
+    (isUsdValueZeroOrFalsy ? '0.00' : `~$${props.price.usdValue}`);
+
   return (
     <Container
       id={
@@ -99,17 +108,17 @@ export function SwapInput(props: SwapInputPropTypes) {
             <>
               <NumericTooltip
                 align="end"
-                content={props.price.realValue}
+                content={price.realValue}
                 container={props.tooltipContainer}
                 open={
-                  !props.price.realValue || props.price.realValue === '0'
+                  !price.realValue || price.realValue === '0'
                     ? false
                     : undefined
                 }>
                 <InputAmount
                   disabled={props.disabled || props.mode === 'To'}
                   style={{ padding: 0 }}
-                  value={props.price.value}
+                  value={price.value}
                   type={'onInputChange' in props ? 'number' : 'text'}
                   step="any"
                   size="large"
@@ -129,30 +138,21 @@ export function SwapInput(props: SwapInputPropTypes) {
                     container: props.tooltipContainer,
                     side: 'bottom',
                   }}
-                  outputUsdValue={props.price.usdValue}
-                  realOutputUsdValue={props.price.realUsdValue}
-                  error={props.price.error}
+                  outputUsdValue={price.usdValue}
+                  realOutputUsdValue={price.realUsdValue}
+                  error={price.error}
                   percentageChange={props.percentageChange}
                   warningLevel={props.warningLevel}
                 />
               ) : (
                 <NumericTooltip
-                  content={props.price.realUsdValue}
+                  content={price.realUsdValue}
                   container={props.tooltipContainer}
-                  open={
-                    !props.price.realUsdValue ||
-                    props.price.realUsdValue === '0'
-                      ? false
-                      : undefined
-                  }
+                  open={isUsdValueZeroOrFalsy ? false : undefined}
                   side="bottom">
-                  <ValueTypography hasWarning={!!props.price.error}>
+                  <ValueTypography hasWarning={!!price.error}>
                     <UsdPrice variant="body" size="medium">
-                      {props.price.usdValue
-                        ? props.price.usdValue === '0'
-                          ? '0.00'
-                          : `~$${props.price.usdValue}`
-                        : props.price.error}
+                      {displayUsdValue}
                     </UsdPrice>
                   </ValueTypography>
                 </NumericTooltip>

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

@@ -1,4 +1,4 @@
-import type { PriceImpactWarningLevel } from '../../components/PriceImpact/PriceImpact.types.js';
+import type { PriceImpactWarningLevel } from '../../components/PriceImpact/PriceImpact.types';
 
 export type BaseProps = {
   chain: {

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

@@ -1,6 +1,6 @@
-import { ChainImageContainer } from '../../components/ChainToken/ChainToken.styles.js';
-import { Button } from '../../components/index.js';
-import { css, darkTheme, styled } from '../../theme.js';
+import { Button } from '../../components';
+import { ChainImageContainer } from '../../components/ChainToken/ChainToken.styles';
+import { css, darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {
   maxWidth: '180px',

package/src/containers/SwapInput/TokenSection.tsx

@@ -1,14 +1,9 @@
-import type { TokenSectionProps } from './TokenSection.types.js';
+import type { TokenSectionProps } from './TokenSection.types';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import {
-  ChainToken,
-  Divider,
-  Skeleton,
-  Typography,
-} from '../../components/index.js';
+import { ChainToken, Divider, Skeleton, Typography } from '../../components';
 
 import {
   chainNameStyles,
@@ -16,7 +11,7 @@ import {
   skeletonStyles,
   tokenChainStyles,
   TokenSectionContainer,
-} from './TokenSection.styles.js';
+} from './TokenSection.styles';
 
 export function TokenSection(props: TokenSectionProps) {
   const {

package/src/containers/SwapInput/index.ts

@@ -1,2 +1,2 @@
-export { SwapInput } from './SwapInput.js';
-export type { SwapInputPropTypes } from './SwapInput.types.js';
+export { SwapInput } from './SwapInput';
+export type { SwapInputPropTypes } from './SwapInput.types';

package/src/containers/Warnings/BalanceErrors.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Typography } from '../../components/index.js';
-import { styled } from '../../theme.js';
+import { Typography } from '../../components';
+import { styled } from '../../theme';
 
 interface PropTypes {
   messages: string[];

package/src/containers/Warnings/index.ts

@@ -1 +1 @@
-export { BalanceErrors } from './BalanceErrors.js';
+export { BalanceErrors } from './BalanceErrors';

package/src/containers/index.ts

@@ -1,4 +1,4 @@
-export * from './ConnectWalletsModal/index.js';
-export * from './Warnings/index.js';
-export * from './SwapInput/index.js';
-export * from './Notifications/index.js';
+export * from './ConnectWalletsModal';
+export * from './Warnings';
+export * from './SwapInput';
+export * from './Notifications';

package/src/hooks/index.ts

@@ -1 +1 @@
-export { useCopyToClipboard } from './useCopyToClipboard.js';
+export { useCopyToClipboard } from './useCopyToClipboard';

package/src/icons/Add.tsx

@@ -1,8 +1,8 @@
-import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
 
 import React, { createElement } from 'react';
 
-import { SvgIcon } from '../components/SvgIcon/index.js';
+import { SvgIcon } from '../components/SvgIcon';
 
 function SvgAdd(props: SvgIconPropsWithChildren) {
   return createElement(

package/src/icons/AutoTheme.tsx

@@ -1,8 +1,8 @@
-import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
 
 import React, { createElement } from 'react';
 
-import { SvgIcon } from '../components/SvgIcon/index.js';
+import { SvgIcon } from '../components/SvgIcon';
 
 function SvgAutoTheme(props: SvgIconPropsWithChildren) {
   return createElement(

package/src/icons/Autorenew.tsx

@@ -1,8 +1,8 @@
-import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
 
 import React, { createElement } from 'react';
 
-import { SvgIcon } from '../components/SvgIcon/index.js';
+import { SvgIcon } from '../components/SvgIcon';
 
 function SvgAutorenew(props: SvgIconPropsWithChildren) {
   return createElement(

package/src/icons/BorderRadius.tsx

@@ -1,8 +1,8 @@
-import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
 
 import React, { createElement } from 'react';
 
-import { SvgIcon } from '../components/SvgIcon/index.js';
+import { SvgIcon } from '../components/SvgIcon';
 
 function SvgBorderRadius(props: SvgIconPropsWithChildren) {
   return createElement(