@rango-dev/ui 0.35.1-next.1 → 0.35.1-next.10

package/dist/widget/ui/src/containers/Notifications/Notifications.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Notifications/Notifications.styles.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAG1D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgBpB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DASjB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAEzB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAQf,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAWnB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAQ5B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKxB,CAAC"}

package/dist/widget/ui/src/containers/Notifications/Notifications.types.d.ts

@@ -0,0 +1,23 @@
+import type { CSS } from '../../theme';
+import type { Asset } from 'rango-sdk';
+type Notification = {
+    route: {
+        from: Asset;
+        to: Asset;
+    };
+    event: {
+        messageSeverity: string;
+        message: string;
+    };
+    requestId: string;
+};
+export type PropTypes = {
+    list: Notification[];
+    getBlockchainImage: (blockchain: string) => string;
+    getTokenImage: (token: Asset) => string;
+    onClickItem: (requestId: string) => void;
+    onClearAll: () => void;
+    containerStyles?: CSS;
+};
+export {};
+//# sourceMappingURL=Notifications.types.d.ts.map

package/dist/widget/ui/src/containers/Notifications/Notifications.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.types.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Notifications/Notifications.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,EAAE,EAAE,KAAK,CAAA;KAAE,CAAC;IAClC,KAAK,EAAE;QAAE,eAAe,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;IACxC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC;CACvB,CAAC"}

package/dist/widget/ui/src/containers/Notifications/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Notifications';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/containers/Notifications/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Notifications/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/widget/ui/src/containers/SwapInput/SwapInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapInput.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,kBAAkB,qBAsIlD"}
+{"version":3,"file":"SwapInput.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,kBAAkB,qBAwIlD"}

package/dist/widget/ui/src/containers/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ConnectWalletsModal';
 export * from './Warnings';
 export * from './SwapInput';
+export * from './Notifications';
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/containers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/dist/widget/ui/src/icons/CreditCard.d.ts

@@ -0,0 +1,5 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+import React from 'react';
+declare function SvgCreditCard(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
+export default SvgCreditCard;
+//# sourceMappingURL=CreditCard.d.ts.map

package/dist/widget/ui/src/icons/CreditCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCard.d.ts","sourceRoot":"","sources":["../../../../../src/icons/CreditCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,aAAa,CAAC,KAAK,EAAE,wBAAwB,4DAerD;AACD,eAAe,aAAa,CAAC"}

package/dist/widget/ui/src/icons/Disconnect.d.ts

@@ -0,0 +1,5 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+import React from 'react';
+declare function SvgDisconnect(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
+export default SvgDisconnect;
+//# sourceMappingURL=Disconnect.d.ts.map

package/dist/widget/ui/src/icons/Disconnect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Disconnect.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Disconnect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,aAAa,CAAC,KAAK,EAAE,wBAAwB,4DAkBrD;AACD,eAAe,aAAa,CAAC"}

package/dist/widget/ui/src/icons/Swap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Swap.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Swap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,OAAO,CAAC,KAAK,EAAE,wBAAwB,4DAY/C;AACD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Swap.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Swap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,OAAO,CAAC,KAAK,EAAE,wBAAwB,4DAqD/C;AACD,eAAe,OAAO,CAAC"}

package/dist/widget/ui/src/icons/index.d.ts

@@ -11,10 +11,12 @@ export { default as CloseIcon } from './Close';
 export { default as CompleteIcon } from './Complete';
 export { default as CopyIcon } from './Copy';
 export { default as CosmosCategoryIcon } from './CosmosCategory';
+export { default as CreditCardIcon } from './CreditCard';
 export { default as CustomColorsIcon } from './CustomColors';
 export { default as DarkModeIcon } from './DarkMode';
 export { default as DeleteIcon } from './Delete';
 export { default as DesktopIcon } from './Desktop';
+export { default as DisconnectIcon } from './Disconnect';
 export { default as DocumentIcon } from './Document';
 export { default as DoneIcon } from './Done';
 export { default as EvmCategoryIcon } from './EvmCategory';

package/dist/widget/ui/src/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}

package/dist/widget/ui/src/theme.d.ts

@@ -1644,6 +1644,8 @@ export declare const darkTheme: string & {
     };
 }, "">;
 export declare const rangoDarkColors: {
+    secondary800: string;
+    secondary850: string;
     neutral: string;
     neutral100: string;
     neutral200: string;

package/dist/widget/ui/src/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.35.1-next.1",
+  "version": "0.35.1-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -50,7 +50,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.34.1-next.0",
+    "@rango-dev/wallets-shared": "^0.34.1-next.5",
     "@stitches/react": "^1.2.8",
     "copy-to-clipboard": "^3.3.3",
     "rango-sdk": "^0.1.49",

package/src/components/FullExpandedQuote/FullExpandedQuote.TokenSection.tsx

@@ -3,7 +3,7 @@ import type { TokenSectionPropTypes } from './FullExpandedQuote.types';
 import React from 'react';
 
 import { ChainToken } from '../ChainToken';
-import { Tooltip } from '../Tooltip';
+import { NumericTooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -27,7 +27,7 @@ export function TokenSection(props: TokenSectionPropTypes) {
     <TokenSectionContainer style={style} isInternalSwap={isInternalSwap}>
       <ChainToken size={size} chainImage={chainImage} tokenImage={tokenImage} />
       <TokenInfo className="token-info">
-        <Tooltip
+        <NumericTooltip
           content={tooltipProps?.content}
           container={tooltipProps?.container}
           side="bottom"
@@ -38,7 +38,7 @@ export function TokenSection(props: TokenSectionPropTypes) {
             className={isInternalSwap ? tokenLabelStyles() : ''}>
             {amount}
           </Typography>
-        </Tooltip>
+        </NumericTooltip>
         <Typography size="xsmall" variant="body" className={tokenLabelStyles()}>
           {name}
         </Typography>

package/src/components/FullExpandedQuote/FullExpandedQuote.helpers.ts

@@ -1,7 +1,11 @@
+import type { I18n } from '@lingui/core';
+import type { Tag } from 'rango-sdk';
+
 export const ITEM_SKELETON_COUNT = 3;
 export const TOOLTIP_SIDE_OFFSET = 10;
 const MAX_AMOUNT_LENGTH_DISPLAY = 4;
 const MAX_NAME_LENGTH_DISPLAY = 6;
+
 export function shortenAmount(amount: string) {
   if (!amount || amount.length <= MAX_AMOUNT_LENGTH_DISPLAY) {
     return amount;
@@ -15,3 +19,14 @@ export function shortenDisplayName(name: string) {
   }
   return name.slice(0, MAX_NAME_LENGTH_DISPLAY) + '...';
 }
+
+export function getTagLabel(tag: Tag, t: I18n['t']): string {
+  const data: Record<Tag, string> = {
+    CENTRALIZED: t('Centralized'),
+    FASTEST: t('Fastest'),
+    HIGH_IMPACT: t('High Impact'),
+    LOWEST_FEE: t('Lowest Fee'),
+    RECOMMENDED: t('Recommended'),
+  };
+  return data[tag];
+}

package/src/components/FullExpandedQuote/FullExpandedQuote.tsx

@@ -1,5 +1,7 @@
 import type { DataLoadedProps, PropTypes } from './FullExpandedQuote.types';
+import type { Tag } from 'rango-sdk';
 
+import { i18n } from '@lingui/core';
 import React, { useState } from 'react';
 
 import { ErrorIcon, WarningIcon } from '../../icons';
@@ -8,10 +10,11 @@ import { Image } from '../common';
 import { Divider } from '../Divider';
 import { QuoteCost } from '../QuoteCost';
 import { QuoteTag } from '../QuoteTag';
-import { Tooltip } from '../Tooltip';
+import { NumericTooltip, Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
+  getTagLabel,
   ITEM_SKELETON_COUNT,
   shortenAmount,
   shortenDisplayName,
@@ -79,7 +82,11 @@ export function FullExpandedQuote(props: PropTypes) {
             />
             <TagsContainer>
               {props.tags.map((tag) => (
-                <QuoteTag key={tag.label} label={tag.label} value={tag.value} />
+                <QuoteTag
+                  key={tag.label}
+                  label={getTagLabel(tag.value as Tag, i18n.t)}
+                  value={tag.value}
+                />
               ))}
             </TagsContainer>
           </>
@@ -236,7 +243,7 @@ export function FullExpandedQuote(props: PropTypes) {
                       />
                       <Divider size={4} />
                       <div>
-                        <Tooltip
+                        <NumericTooltip
                           content={props.outputPrice.realValue}
                           container={tooltipContainer}
                           open={
@@ -249,11 +256,10 @@ export function FullExpandedQuote(props: PropTypes) {
                           <Typography size="xmedium" variant="title">
                             {step.to.token.displayName}
                           </Typography>
-                        </Tooltip>
+                        </NumericTooltip>
                       </div>
                       <StyledPriceImpact
                         size="small"
-                        outputColor="$neutral700"
                         warningLevel={warningLevel}
                         outputUsdValue={props.outputPrice.usdValue}
                         realOutputUsdValue={props.outputPrice.realUsdValue}

package/src/components/FullExpandedQuote/FullExpandedQuote.types.ts

@@ -3,7 +3,7 @@ import type { ChainTokenPropTypes } from '../ChainToken';
 import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types';
 import type { PropTypes as QuoteCostProps } from '../QuoteCost/QuoteCost.types';
 import type { InternalSwap, Step } from '../StepDetails/StepDetails.types';
-import type { TooltipPropTypes } from '../Tooltip/Tooltip.types';
+import type { NumericTooltipPropTypes, TooltipPropTypes } from '../Tooltip';
 import type { CSSProperties } from '@stitches/react';
 import type { RouteTag } from 'rango-sdk';
 
@@ -41,7 +41,7 @@ export interface TokenSectionPropTypes {
   style?: CSSProperties;
   tooltipProps?: {
     container: TooltipPropTypes['container'];
-    content: TooltipPropTypes['content'];
+    content: NumericTooltipPropTypes['content'];
     open?: TooltipPropTypes['open'];
   };
   isInternalSwap?: boolean;

package/src/components/PriceImpact/PriceImpact.styles.ts

@@ -1,5 +1,4 @@
-import { styled } from '../../theme';
-import { Typography } from '../Typography';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   width: '100%',
@@ -8,8 +7,32 @@ export const Container = styled('div', {
   alignItems: 'center',
 });
 
-export const OutputUsdValue = styled(Typography, {
-  overflow: 'hidden',
+export const ValueTypography = styled('div', {
+  display: 'flex',
   whiteSpace: 'nowrap',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
+  '& ._typography': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+  variants: {
+    hasWarning: {
+      true: {
+        '& ._typography': {
+          color: '$warning500',
+        },
+      },
+    },
+    hasError: {
+      true: {
+        '& ._typography': {
+          color: '$error500',
+        },
+      },
+    },
+  },
 });

package/src/components/PriceImpact/PriceImpact.tsx

@@ -2,9 +2,9 @@ import type { PriceImpactPropTypes } from './PriceImpact.types';
 
 import React from 'react';
 
-import { Divider, Tooltip, Typography } from '..';
+import { Divider, NumericTooltip, Typography } from '..';
 
-import { Container, OutputUsdValue } from './PriceImpact.styles';
+import { Container, ValueTypography } from './PriceImpact.styles';
 
 export function PriceImpact(props: PriceImpactPropTypes) {
   const {
@@ -19,17 +19,13 @@ export function PriceImpact(props: PriceImpactPropTypes) {
     ...rest
   } = props;
 
-  let percentageChangeColor = '$neutral600';
-  if (!outputUsdValue || warningLevel === 'low') {
-    percentageChangeColor = '$warning500';
-  } else if (warningLevel === 'high') {
-    percentageChangeColor = '$error500';
-  }
+  const hasWarning = !outputUsdValue || warningLevel === 'low';
+  const hasError = warningLevel === 'high';
 
   return (
     <Container {...rest}>
       {outputUsdValue && (
-        <Tooltip
+        <NumericTooltip
           content={realOutputUsdValue}
           container={tooltipProps?.container}
           open={
@@ -38,19 +34,17 @@ export function PriceImpact(props: PriceImpactPropTypes) {
               : undefined
           }
           side={tooltipProps?.side}>
-          <OutputUsdValue
-            size={size}
-            variant="body"
-            color={outputColor || '$neutral600'}>
-            {outputUsdValue === '0' ? '0.00' : `~$${outputUsdValue}`}
-          </OutputUsdValue>
-        </Tooltip>
+          <ValueTypography>
+            <Typography size={size} variant="body" color={outputColor}>
+              {outputUsdValue === '0' ? '0.00' : `~$${outputUsdValue}`}
+            </Typography>
+          </ValueTypography>
+        </NumericTooltip>
       )}
       {((outputUsdValue && percentageChange) || !outputUsdValue) && (
-        <>
+        <ValueTypography hasError={hasError} hasWarning={hasWarning}>
           <Divider direction="horizontal" size={4} />
-
-          <Typography size={size} variant="body" color={percentageChangeColor}>
+          <Typography size={size} variant="body">
             {outputUsdValue &&
               percentageChange &&
               `(${
@@ -61,7 +55,7 @@ export function PriceImpact(props: PriceImpactPropTypes) {
 
             {!outputUsdValue && error}
           </Typography>
-        </>
+        </ValueTypography>
       )}
     </Container>
   );

package/src/components/StepDetails/StepDetails.tsx

@@ -7,7 +7,7 @@ import { ChainToken } from '../../components/ChainToken/ChainToken';
 import { NextIcon } from '../../icons';
 import { Image } from '../common';
 import { Divider } from '../Divider';
-import { Tooltip } from '../Tooltip';
+import { NumericTooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -133,7 +133,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 tokenImage={step.from.token.image}
                 size="small"
               />
-              <Tooltip
+              <NumericTooltip
                 content={step.from.price.realValue}
                 container={tooltipContainer}>
                 <Divider direction="horizontal" size={4} />
@@ -141,7 +141,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                   size="small"
                   color="$neutral700"
                   variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
-              </Tooltip>
+              </NumericTooltip>
               <Divider direction="horizontal" size={4} />
 
               <NextIcon color="gray" />
@@ -151,7 +151,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 tokenImage={step.to.token.image}
                 size="small"
               />
-              <Tooltip
+              <NumericTooltip
                 content={step.to.price.realValue}
                 container={tooltipContainer}>
                 <Divider direction="horizontal" size={4} />
@@ -161,7 +161,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 }${step.to.price.value} ${
                   step.to.token.displayName
                 }`}</Typography>
-              </Tooltip>
+              </NumericTooltip>
             </div>
             <Alerts pb={hasSeparator && type === 'quote-details'}>
               {step.alerts}

package/src/components/SwapListItem/SwapToken.tsx

@@ -7,7 +7,7 @@ import { NextIcon } from '../../icons';
 import { ChainToken } from '../ChainToken';
 import { Divider } from '../Divider';
 import { Skeleton } from '../Skeleton';
-import { Tooltip } from '../Tooltip';
+import { NumericTooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -129,11 +129,13 @@ export function SwapToken(props: PropTypes) {
               {fromToken.displayName}
             </Typography>
             {!!fromAmount && (
-              <Tooltip content={fromRealAmount} container={tooltipContainer}>
+              <NumericTooltip
+                content={fromRealAmount}
+                container={tooltipContainer}>
                 <Typography size="small" variant="body" color="neutral700">
                   {fromAmount}
                 </Typography>
-              </Tooltip>
+              </NumericTooltip>
             )}
           </TokenInfo>
           <Icon>
@@ -143,11 +145,11 @@ export function SwapToken(props: PropTypes) {
             <Typography size="medium" variant="title">
               {toToken.displayName}
             </Typography>
-            <Tooltip content={toRealAmount} container={tooltipContainer}>
+            <NumericTooltip content={toRealAmount} container={tooltipContainer}>
               <Typography size="small" variant="body" color="neutral700">
                 {toAmount}
               </Typography>
-            </Tooltip>
+            </NumericTooltip>
           </TokenInfo>
         </Layout>
       )}

package/src/components/TextField/TextField.tsx

@@ -33,6 +33,16 @@ function TextFieldComponent(
     }
   };
 
+  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+    if (inputAttributes?.type === 'number') {
+      const data = event.clipboardData.getData('text');
+      const numericPattern = /^\d+(\.\d+)?$/;
+      if (!numericPattern.test(data)) {
+        event.preventDefault();
+      }
+    }
+  };
+
   return (
     <>
       {label && (
@@ -58,6 +68,7 @@ function TextFieldComponent(
         <Input
           {...inputAttributes}
           onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
           spellCheck={false}
           suffix={!!suffix}
           ref={ref}

package/src/components/TokenAmount/TokenAmount.tsx

@@ -5,7 +5,8 @@ import React from 'react';
 import { ChainToken } from '../ChainToken';
 import { Divider } from '../Divider';
 import { PriceImpact } from '../PriceImpact';
-import { Tooltip } from '../Tooltip';
+import { ValueTypography } from '../PriceImpact/PriceImpact.styles';
+import { NumericTooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -32,7 +33,7 @@ export function TokenAmount(props: PropTypes) {
             </Typography>
           )}
           <div>
-            <Tooltip
+            <NumericTooltip
               content={props.price.realValue}
               open={!props.price.realValue ? false : undefined}
               container={props.tooltipContainer}>
@@ -49,24 +50,24 @@ export function TokenAmount(props: PropTypes) {
                 style={{ fontWeight: 400 }}>
                 {props.token.displayName}
               </Typography>
-            </Tooltip>
+            </NumericTooltip>
           </div>
         </div>
       </div>
       {props.price.usdValue && props.price.usdValue !== '0' && (
         <div className={usdValueStyles()}>
-          <Tooltip
+          <NumericTooltip
             content={props.price.realUsdValue}
             container={props.tooltipContainer}>
             {props.type === 'input' && (
-              <>
-                <Typography size="small" variant="body" color="$neutral700">
+              <ValueTypography>
+                <Typography size="small" variant="body">
                   {`~$${props.price.usdValue}`}
                 </Typography>
                 <Divider direction="horizontal" size={4} />
-              </>
+              </ValueTypography>
             )}
-          </Tooltip>
+          </NumericTooltip>
           {props.type === 'output' && (
             <PriceImpact
               size="small"

package/src/components/Tooltip/NumericTooltip.tsx

@@ -0,0 +1,16 @@
+import type { NumericTooltipPropTypes } from './NumericTooltip.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Tooltip } from './Tooltip';
+
+export function NumericTooltip(
+  props: PropsWithChildren<NumericTooltipPropTypes>
+) {
+  const MAX_DECIMALS = 12;
+  const formattedNumber = Number(props.content)
+    .toFixed(props.maxDecimals || MAX_DECIMALS)
+    .replace(/(?:\.0*|(\.\d+?)0*)$/, '$1');
+  return <Tooltip {...props} content={formattedNumber} />;
+}

package/src/components/Tooltip/NumericTooltip.types.tsx

@@ -0,0 +1,6 @@
+import type { TooltipPropTypes } from './Tooltip.types';
+
+export interface NumericTooltipPropTypes extends TooltipPropTypes {
+  content: string | number | null | undefined;
+  maxDecimals?: number;
+}

package/src/components/Tooltip/index.ts

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

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

@@ -21,7 +21,7 @@ export function makeInfo(state: WalletState): Info {
     case WalletState.CONNECTING:
       return {
         color: 'neutral600',
-        description: i18n.t('Connecting...'),
+        description: i18n.t('Connecting ...'),
         tooltipText: i18n.t('Connecting'),
       };
     case WalletState.DISCONNECTED:

package/src/containers/Notifications/NotificationNotFound.tsx

@@ -0,0 +1,19 @@
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Divider, Typography } from '../../components';
+import { NoNotificationIcon } from '../../icons';
+
+import { NotFoundContainer } from './Notifications.styles';
+
+export function NotificationNotFound() {
+  return (
+    <NotFoundContainer>
+      <NoNotificationIcon color="secondary" size={26} />
+      <Divider size={12} />
+      <Typography variant="body" size="medium" color="neutral700">
+        {i18n.t('There are no notifications.')}
+      </Typography>
+    </NotFoundContainer>
+  );
+}