@rango-dev/ui 0.26.1-next.4 → 0.26.1-next.6

package/src/components/SwapListItem/SwapToken.tsx

@@ -71,12 +71,13 @@ export function SwapToken(props: PropTypes) {
         token: fromToken,
         amount: fromAmount,
         blockchain: fromBlockchain,
+        realAmount: fromRealAmount,
       },
       to: {
         token: toToken,
         amount: toAmount,
         blockchain: toBlockchain,
-        realAmount,
+        realAmount: toRealAmount,
       },
     },
     status,
@@ -128,7 +129,7 @@ export function SwapToken(props: PropTypes) {
               {fromToken.displayName}
             </Typography>
             {!!fromAmount && (
-              <Tooltip content={fromAmount} container={tooltipContainer}>
+              <Tooltip content={fromRealAmount} container={tooltipContainer}>
                 <Typography size="small" variant="body" color="neutral700">
                   {fromAmount}
                 </Typography>
@@ -142,7 +143,7 @@ export function SwapToken(props: PropTypes) {
             <Typography size="medium" variant="title">
               {toToken.displayName}
             </Typography>
-            <Tooltip content={realAmount} container={tooltipContainer}>
+            <Tooltip content={toRealAmount} container={tooltipContainer}>
               <Typography size="small" variant="body" color="neutral700">
                 {toAmount}
               </Typography>

package/src/components/SwapListItem/mock.ts

@@ -305,6 +305,7 @@ export const swapTokenData: SwapTokenData = {
       image: 'https://api.rango.exchange/swappers/osmosis.png',
     },
     amount: '1.1',
+    realAmount: '1.1',
   },
   to: {
     token: {

package/src/components/Switch/Switch.styles.tsx

@@ -17,6 +17,7 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   padding: '0',
   cursor: 'pointer',
   transition: 'all 0.35s',
+  overflow: 'hidden',
 
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',
@@ -41,6 +42,12 @@ export const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
   transition: ' transform 300ms',
   borderRadius: '999999px',
   willChange: 'transform',
+  '&:hover': {
+    boxShadow: 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-moz-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-webkit-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+    '-o-box-shadow': 'rgba(0, 0, 0, 0.6) 0px 3px 8px',
+  },
 
   '&[data-state="checked"]': {
     transform: 'translateX(8px)',

package/src/components/TextField/TextField.tsx

@@ -17,14 +17,17 @@ function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
     style,
     variant,
     fullWidth,
+    labelProps,
     ...inputAttributes
   } = props;
   return (
     <>
       {label && (
         <>
-          <Label {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
-            <Typography variant="label" size="large">
+          <Label
+            className="_text"
+            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+            <Typography variant="label" size="large" {...labelProps}>
               {label}
             </Typography>
           </Label>

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

@@ -1,4 +1,5 @@
 import type { InputContainer } from './TextField.styles';
+import type { PropTypes as TypographyProps } from '../Typography/Typography.types';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof InputContainer>;
@@ -12,10 +13,11 @@ export type Ref =
   | undefined;
 
 export type PropTypes = {
-  label?: string;
+  label?: string | React.ReactNode;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   size?: BaseSizes;
   variant?: BaseVariants;
   fullWidth?: boolean;
+  labelProps?: TypographyProps;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'>;

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

@@ -72,5 +72,5 @@ export const LoadingButton = styled('div', {
   backgroundColor: '$neutral100',
   alignItems: 'center',
   justifyContent: 'center',
-  width: 110,
+  width: 100,
 });

package/src/icons/Height.tsx

@@ -0,0 +1,24 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgHeight(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Height">
+        <path
+          id="Height_2"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.3807 23.7933C12.1204 24.0689 11.6983 24.0689 11.4379 23.7933L7.19526 19.301C6.93491 19.0254 6.93491 18.5784 7.19526 18.3028C7.45561 18.0271 7.87772 18.0271 8.13807 18.3028L11.2426 21.59V2.41003L8.13807 5.69723C7.87772 5.97289 7.45561 5.97289 7.19526 5.69723C6.93491 5.42156 6.93491 4.97462 7.19526 4.69896L11.4379 0.206747C11.6983 -0.0689157 12.1204 -0.0689157 12.3807 0.206747L16.6234 4.69896C16.8837 4.97462 16.8837 5.42156 16.6234 5.69723C16.363 5.97289 15.9409 5.97289 15.6805 5.69723L12.576 2.41003V21.59L15.6805 18.3028C15.9409 18.0271 16.363 18.0271 16.6234 18.3028C16.8837 18.5784 16.8837 19.0254 16.6234 19.301L12.3807 23.7933Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgHeight;

package/src/icons/Key.tsx

@@ -0,0 +1,32 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgKey(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg">
+      <g id="key">
+        <path
+          id="Vector"
+          d="M3.26028 12.4995C3.20753 12.4995 3.1495 12.4942 3.10203 12.489L1.95736 12.3307C1.40876 12.2569 0.912912 11.7663 0.828513 11.2072L0.670263 10.052C0.617513 9.68278 0.775763 9.20278 1.03951 8.93377L3.35523 6.61815C2.98071 5.12011 3.41325 3.53768 4.51573 2.44581C6.22482 0.742057 9.00473 0.736782 10.7191 2.44581C11.5473 3.27394 12.0009 4.37637 12.0009 5.54737C12.0009 6.71837 11.5473 7.82079 10.7191 8.64893C9.61136 9.74608 8.03414 10.1786 6.54659 9.79883L4.2256 12.1144C4.00405 12.3465 3.60843 12.4995 3.26028 12.4995ZM7.61214 1.95525C6.68902 1.95525 5.77117 2.30339 5.0696 3.00493C4.1201 3.94911 3.77723 5.3311 4.17285 6.61815C4.21505 6.76056 4.17813 6.90826 4.07263 7.01375L1.59338 9.49289C1.50371 9.58256 1.42986 9.81465 1.44569 9.93597L1.60393 11.0911C1.63558 11.2916 1.85186 11.5184 2.05231 11.5448L3.20225 11.703C3.32885 11.7241 3.56095 11.6503 3.65063 11.5606L6.14042 9.07619C6.24592 8.97069 6.39889 8.93904 6.53604 8.98124C7.80731 9.38212 9.19463 9.03926 10.1441 8.0898C10.8193 7.41463 11.1939 6.50737 11.1939 5.54737C11.1939 4.58209 10.8193 3.6801 10.1441 3.00493C9.45838 2.30866 8.53526 1.95525 7.61214 1.95525Z"
+          fill="#727272"
+        />
+        <path
+          id="Vector_2"
+          d="M4.84974 11.3351C4.74951 11.3351 4.64929 11.2982 4.57016 11.2191L3.35692 10.0059C3.20394 9.85291 3.20394 9.59973 3.35692 9.44676C3.50989 9.29379 3.76309 9.29379 3.91607 9.44676L5.12931 10.66C5.28229 10.8129 5.28229 11.0661 5.12931 11.2191C5.05019 11.2982 4.94996 11.3351 4.84974 11.3351Z"
+          fill="#727272"
+        />
+        <path
+          id="Vector_3"
+          d="M7.64781 6.69786C6.99371 6.69786 6.46094 6.16511 6.46094 5.51104C6.46094 4.85697 6.99371 4.32422 7.64781 4.32422C8.30191 4.32422 8.83468 4.85697 8.83468 5.51104C8.83468 6.16511 8.30191 6.69786 7.64781 6.69786ZM7.64781 5.11543C7.43153 5.11543 7.25218 5.29478 7.25218 5.51104C7.25218 5.72731 7.43153 5.90665 7.64781 5.90665C7.86408 5.90665 8.04343 5.72731 8.04343 5.51104C8.04343 5.29478 7.86408 5.11543 7.64781 5.11543Z"
+          fill="#727272"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgKey;

package/src/icons/Width.tsx

@@ -0,0 +1,29 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgWidth(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Width" clipPath="url(#clip0_5933_20072)">
+        <path
+          id="Width_2"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.206748 12.0355C-0.0689161 11.8403 -0.0689161 11.5237 0.206748 11.3284L4.69896 8.14645C4.97462 7.95118 5.42156 7.95118 5.69722 8.14645C5.97289 8.34171 5.97289 8.65829 5.69722 8.85355L2.41003 11.182H21.59L18.3028 8.85355C18.0271 8.65829 18.0271 8.34171 18.3028 8.14645C18.5784 7.95118 19.0254 7.95118 19.301 8.14645L23.7933 11.3284C24.0689 11.5237 24.0689 11.8403 23.7933 12.0355L19.301 15.2175C19.0254 15.4128 18.5784 15.4128 18.3028 15.2175C18.0271 15.0223 18.0271 14.7057 18.3028 14.5104L21.59 12.182H2.41003L5.69722 14.5104C5.97289 14.7057 5.97289 15.0223 5.69722 15.2175C5.42156 15.4128 4.97462 15.4128 4.69896 15.2175L0.206748 12.0355Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5933_20072">
+          <rect width={24} height={24} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgWidth;

package/src/icons/index.ts

@@ -18,6 +18,7 @@ export { default as ErrorIcon } from './Error';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
 export { default as GasIcon } from './Gas';
+export { default as HeightIcon } from './Height';
 export { default as InProgressIcon } from './InProgress';
 export { default as InfoErrorIcon } from './InfoError';
 export { default as InfoIcon } from './Info';
@@ -43,7 +44,9 @@ 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 WidthIcon } from './Width';
 export { default as ChainsIcon } from './Chains';
 export { default as ColorsIcon } from './Colors';
+export { default as KeyIcon } from './Key';
 export { default as SettingsIcon } from './Settings';
 export { default as StyleIcon } from './Style';

package/src/theme.ts

@@ -147,12 +147,14 @@ export const theme = {
     4: '4px',
     6: '6px',
     8: '8px',
+    10: '10px',
     12: '12px',
     16: '16px',
     18: '18px',
     20: '20px',
     24: '24px',
     28: '28px',
+    30: '30px',
     32: '32px',
     36: '36px',
     40: '40px',