@rango-dev/ui 0.22.1-next.19 → 0.22.1-next.20

package/src/components/TextField/TextField.tsx

@@ -23,9 +23,7 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
     <>
       {label && (
         <>
-          <Label
-            className="_text"
-            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+          <Label {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
             <Typography variant="label" size="large">
               {label}
             </Typography>
@@ -39,10 +37,9 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
         variant={variant}
         size={size}
         style={style}
-        className="_text">
+        className="_text-field">
         {prefix || null}
         <Input
-          className="_text"
           {...inputAttributes}
           spellCheck={false}
           suffix={!!suffix}
@@ -56,5 +53,6 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
 
 const TextField = React.forwardRef(TextFieldComponent);
 TextField.displayName = 'TextField';
+TextField.toString = () => '._text-field';
 
 export { TextField };

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

@@ -7,13 +7,16 @@ 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',
-  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
+  boxShadow:
+    'inset 0 0 0.5px 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.3px 0.4px rgba(0, 0, 0, 0.02), 0.9px 1.5px rgba(0, 0, 0, 0.045), 0 3.5px 6px rgba(0, 0, 0, 0.09)',
   backgroundColor: '$neutral100',
 });
+
+export const TriggerContent = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -5,9 +5,9 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
 import React from 'react';
 
 import {
-  TooltipArrow,
   TooltipContent,
   TooltipTypography,
+  TriggerContent,
 } from './Tooltip.styles';
 
 export function Tooltip(props: PropsWithChildren<PropTypes>) {
@@ -24,14 +24,13 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root open={open}>
         <RadixTooltip.Trigger asChild>
-          <div>{children}</div>
+          <TriggerContent>{children}</TriggerContent>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>
           <TooltipContent side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>
-            <TooltipArrow />
           </TooltipContent>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>

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

@@ -30,7 +30,7 @@ export const WalletButton = styled('button', {
   backgroundColor: '$$color',
   alignItems: 'center',
   cursor: 'pointer',
-  width: 110,
+  width: 100,
   position: 'relative',
   fontFamily: 'inherit',
   '&:hover': {

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

@@ -1,4 +1,4 @@
-import { Button, TextField } from '../../components';
+import { Button, TextField, Typography } from '../../components';
 import { css, darkTheme, styled } from '../../theme';
 
 export const textStyles = css();
@@ -29,12 +29,12 @@ export const Container = styled('div', {
 });
 
 export const InputAmount = styled(TextField, {
+  width: '100%',
   padding: '0',
   fontSize: '$18',
   lineHeight: '$26',
   fontWeight: '$medium',
   textAlign: 'right',
-  width: 140,
   '&:disabled': {
     cursor: 'unset',
   },
@@ -48,7 +48,8 @@ export const MaxButton = styled(Button, {
 });
 
 export const ValueTypography = styled('div', {
-  width: 140,
+  display: 'flex',
+  width: '100%',
   textAlign: 'right',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
@@ -92,6 +93,8 @@ export const balanceStyles = css({
 });
 
 export const amountStyles = css({
+  width: '45%',
+  maxWidth: '170px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -102,3 +105,11 @@ export const amountStyles = css({
 export const labelContainerStyles = css({
   paddingBottom: '$5',
 });
+
+export const UsdPrice = styled(Typography, {
+  width: '100%',
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});

package/src/containers/SwapInput/SwapInput.tsx

@@ -15,11 +15,16 @@ import {
   labelStyles,
   MaxButton,
   textStyles,
+  UsdPrice,
   ValueTypography,
 } from './SwapInput.styles';
 import { TokenSection } from './TokenSection';
 
 export function SwapInput(props: SwapInputProps) {
+  const showBalance =
+    'balance' in props && !props.loading && !props.loadingBalance;
+  const showBalanceSkeleton =
+    'balance' in props && (props.loading || props.loadingBalance);
   return (
     <Container sharpBottomStyle={props.sharpBottomStyle}>
       <div className={labelContainerStyles()}>
@@ -27,7 +32,7 @@ export function SwapInput(props: SwapInputProps) {
           <Typography variant="body" size="small" className={textStyles()}>
             {props.label}
           </Typography>
-          {'balance' in props && !props.loading && (
+          {showBalance && (
             <div className={balanceStyles()}>
               <Typography
                 className={textStyles()}
@@ -46,7 +51,7 @@ export function SwapInput(props: SwapInputProps) {
               </MaxButton>
             </div>
           )}
-          {props.loading && (
+          {showBalanceSkeleton && (
             <div className={balanceStyles()}>
               <Skeleton variant="text" size="large" width={105} />
             </div>
@@ -66,9 +71,9 @@ export function SwapInput(props: SwapInputProps) {
         <div className={amountStyles()}>
           {props.loading || (props.mode === 'To' && props.fetchingQuote) ? (
             <>
-              <Skeleton variant="text" size="large" width={92} />
+              <Skeleton variant="text" size="large" />
               <Divider size={8} />
-              <Skeleton variant="text" size="medium" width={92} />
+              <Skeleton variant="text" size="medium" />
             </>
           ) : (
             <>
@@ -96,11 +101,11 @@ export function SwapInput(props: SwapInputProps) {
                 />
               ) : (
                 <ValueTypography hasWarning={!!props.price.error}>
-                  <Typography variant="body" size="medium">
+                  <UsdPrice variant="body" size="medium">
                     {props.price.usdValue
                       ? `~$${props.price.usdValue}`
                       : props.price.error}
-                  </Typography>
+                  </UsdPrice>
                 </ValueTypography>
               )}
             </>

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

@@ -25,6 +25,7 @@ export type BaseProps = {
 type FromProps = {
   mode: 'From';
   balance?: string;
+  loadingBalance: boolean;
   onSelectMaxBalance: () => void;
   onInputChange: (inputAmount: string) => void;
 };

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

@@ -3,6 +3,8 @@ import { css, darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {
   maxWidth: '180px',
+  minWidth: '130px',
+  flexGrow: 1,
   backgroundColor: 'transparent',
   color: '$neutral700',
   '&:disabled': {
@@ -31,7 +33,7 @@ export const Container = styled(Button, {
 export const chainNameStyles = css();
 
 export const TokenSectionContainer = styled('div', {
-  width: '10.625rem',
+  maxWidth: '170px',
   padding: '$2 $5',
   display: 'flex',
   borderRadius: '$xs',
@@ -53,8 +55,10 @@ export const tokenChainStyles = css({
   justifyContent: 'center',
   alignItems: 'start',
   paddingLeft: '$10',
+  flexGrow: 1,
 });
 
 export const skeletonStyles = css({
+  width: '100%',
   padding: '$5 $0',
 });

package/src/containers/SwapInput/TokenSection.tsx

@@ -36,9 +36,9 @@ export function TokenSection(props: TokenSectionProps) {
         <div className={tokenChainStyles()}>
           {loading ? (
             <div className={skeletonStyles()}>
-              <Skeleton variant="text" size="large" width={92} />
+              <Skeleton variant="text" size="large" />
               <Divider size={8} />
-              <Skeleton variant="text" size="medium" width={92} />
+              <Skeleton variant="text" size="medium" />
             </div>
           ) : (
             <>