@rango-dev/ui 0.44.1-next.5 → 0.44.1-next.6

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

@@ -1 +1 @@
-{"version":3,"file":"TokenSection.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAgDpD"}
+{"version":3,"file":"TokenSection.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA0DpD"}

package/dist/widget/ui/src/containers/SwapInput/TokenSection.styles.d.ts

@@ -1078,4 +1078,164 @@ export declare const skeletonStyles: import("@stitches/react/types/styled-compon
     zIndices: {};
     transitions: {};
 }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
+export declare const TitleContainer: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+}, import("@stitches/react/types/css-util.js").CSS<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+}, {
+    colors: {
+        primary: string;
+        primary500: string;
+        primary550: string;
+        secondary: string;
+        secondary100: string;
+        secondary150: string;
+        secondary200: string;
+        secondary250: string;
+        secondary500: string;
+        secondary550: string;
+        neutral: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        error100: string;
+        error300: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        warning100: string;
+        warning300: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        info: string;
+        info100: string;
+        info300: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        success100: string;
+        success300: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        background: string;
+        foreground: string;
+    };
+    space: {
+        0: string;
+        5: string;
+        10: string;
+        15: string;
+        20: string;
+        25: string;
+        30: string;
+        40: string;
+        46: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        xm: string;
+        md: string;
+        xl: string;
+        lg: string;
+        primary: string;
+        secondary: string;
+    };
+    fontSizes: {
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+    };
+    fonts: {
+        primary: string;
+        widget: string;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        12: string;
+        16: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        36: string;
+        40: string;
+        44: string;
+        52: string;
+        64: string;
+    };
+    letterSpacings: {};
+    sizes: {
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        18: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        32: string;
+        36: string;
+        40: string;
+        45: string;
+        48: string;
+    };
+    borderWidths: {};
+    borderStyles: {};
+    shadows: {
+        mainContainer: string;
+    };
+    zIndices: {};
+    transitions: {};
+}, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
 //# sourceMappingURL=TokenSection.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TokenSection.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAwBX,MAAO,SAClB;aAAY,MAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAY1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAAQ,CAAC;AAErC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAehC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAQ3B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAGzB,CAAC"}
+{"version":3,"file":"TokenSection.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAwBX,MAAO,SAClB;aAAY,MAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAY1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAAQ,CAAC;AAErC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAehC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAQ3B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAGzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAKzB,CAAC"}

package/dist/widget/ui/src/containers/SwapInput/TokenSection.types.d.ts

@@ -1,11 +1,13 @@
 export type TokenSectionProps = {
-    chainImage: string;
-    tokenImage: string;
+    chainImage?: string;
+    tokenImage?: string;
     tokenSymbol: string;
     chain: string;
     chianImageId?: string;
     error?: boolean;
     onClick: () => void;
     loading?: boolean;
+    warning?: boolean;
+    tooltipContainer?: HTMLElement;
 };
 //# sourceMappingURL=TokenSection.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TokenSection.types.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
+{"version":3,"file":"TokenSection.types.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,WAAW,CAAC;CAChC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.44.1-next.5",
+  "version": "0.44.1-next.6",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/ChainToken/ChainToken.constants.ts

@@ -8,3 +8,6 @@ export const tokenChainSizeMap: {
   medium: { token: 27, chain: 10 },
   large: { token: 30, chain: 15 },
 };
+
+export const DEFAULT_TOKEN_IMAGE_SRC =
+  'https://raw.githubusercontent.com/rango-exchange/assets/refs/heads/main/common/unknown-image.png';

package/src/components/ChainToken/ChainToken.tsx

@@ -5,7 +5,10 @@ import React from 'react';
 import { Image } from '../common/index.js';
 import { Skeleton } from '../Skeleton/index.js';
 
-import { tokenChainSizeMap } from './ChainToken.constants.js';
+import {
+  DEFAULT_TOKEN_IMAGE_SRC,
+  tokenChainSizeMap,
+} from './ChainToken.constants.js';
 import {
   ChainImageContainer,
   Container,
@@ -22,6 +25,11 @@ export const ChainToken: React.FC<ChainTokenPropTypes> = (props) => {
     loading,
   } = props;
 
+  const tokenImageSrc =
+    tokenImage === '' ? DEFAULT_TOKEN_IMAGE_SRC : tokenImage;
+  const chainImageSrc =
+    chainImage === '' ? DEFAULT_TOKEN_IMAGE_SRC : chainImage;
+
   return (
     <Container
       css={
@@ -39,19 +47,19 @@ export const ChainToken: React.FC<ChainTokenPropTypes> = (props) => {
           width={tokenChainSizeMap[size].token}
         />
       ) : (
-        <TokenImageContainer hasBorder={!tokenImage}>
+        <TokenImageContainer hasBorder={!tokenImageSrc}>
           <Image
             size={tokenChainSizeMap[size].token}
-            src={tokenImage}
+            src={tokenImageSrc}
             type="circular"
-            {...((useAsPlaceholder || !tokenImage) && {
+            {...((useAsPlaceholder || !tokenImageSrc) && {
               useAsPlaceholder: true,
               backgroundColor: 'transparent',
             })}
           />
         </TokenImageContainer>
       )}
-      <ChainImageContainer size={size} hasBorder={!chainImage}>
+      <ChainImageContainer size={size} hasBorder={!chainImageSrc}>
         {loading ? (
           <Skeleton
             variant="circular"
@@ -62,9 +70,9 @@ export const ChainToken: React.FC<ChainTokenPropTypes> = (props) => {
           <Image
             id={chianImageId}
             size={tokenChainSizeMap[size].chain}
-            src={chainImage}
+            src={chainImageSrc}
             type="circular"
-            {...((useAsPlaceholder || !chainImage) && {
+            {...((useAsPlaceholder || !chainImageSrc) && {
               useAsPlaceholder: true,
               backgroundColor: 'transparent',
             })}

package/src/components/ChainToken/ChainToken.types.ts

@@ -5,8 +5,8 @@ type BaseProps = Stitches.VariantProps<typeof ChainImageContainer>;
 type BaseSizes = Exclude<BaseProps['size'], object>;
 
 export type ChainTokenPropTypes = {
-  tokenImage: string;
-  chainImage: string;
+  tokenImage?: string;
+  chainImage?: string;
   chianImageId?: string;
   size: NonNullable<BaseSizes>;
   useAsPlaceholder?: boolean;

package/src/components/CustomTokenWarning/CustomTokenWarning.styles.ts

@@ -0,0 +1,30 @@
+import type { Tooltip } from '../Tooltip';
+import type { ComponentProps } from 'react';
+
+import { styled } from '../../theme';
+import { IconHighlight } from '../Alert/Alert.styles';
+
+export const tooltipStyles: ComponentProps<typeof Tooltip>['styles'] = {
+  root: {
+    zIndex: 10,
+  },
+};
+
+export const TooltipContent = styled('div', {
+  width: '217px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  '& .warning-icon-container': {
+    width: '$20',
+    height: '$20',
+    alignSelf: 'unset',
+  },
+});
+
+export const StyledIconHighlight = styled(IconHighlight, {
+  width: '14px',
+  height: '14px',
+  alignSelf: 'unset',
+});

package/src/components/CustomTokenWarning/CustomTokenWarning.tsx

@@ -0,0 +1,44 @@
+import type { PropTypes } from './CustomTokenWarning.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { WarningIcon } from '../../icons';
+import { IconHighlight } from '../Alert/Alert.styles';
+import { Divider } from '../Divider';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+
+import {
+  StyledIconHighlight,
+  TooltipContent,
+  tooltipStyles,
+} from './CustomTokenWarning.styles';
+
+export function CustomTokenWarning(props: PropTypes) {
+  return (
+    <Tooltip
+      styles={tooltipStyles}
+      side="bottom"
+      align="center"
+      sideOffset={20}
+      container={props.container}
+      content={
+        <TooltipContent>
+          <IconHighlight type="warning" className="warning-icon-container">
+            <WarningIcon color="warning" size={13} />
+          </IconHighlight>
+          <Divider size={4} direction="horizontal" />
+          <Typography variant="body" size="xsmall">
+            {i18n.t(
+              'This token may involve potential security risks; proceed with caution.'
+            )}
+          </Typography>
+        </TooltipContent>
+      }>
+      <StyledIconHighlight type="warning">
+        <WarningIcon color="warning" size={9} />
+      </StyledIconHighlight>
+    </Tooltip>
+  );
+}

package/src/components/CustomTokenWarning/CustomTokenWarning.types.ts

@@ -0,0 +1,3 @@
+export type PropTypes = {
+  container?: HTMLElement;
+};

package/src/components/CustomTokenWarning/index.ts

@@ -0,0 +1 @@
+export { CustomTokenWarning } from './CustomTokenWarning';

package/src/components/FullExpandedQuote/FullExpandedQuote.Skeletons.tsx

@@ -34,13 +34,7 @@ export function SkeletonHeader() {
 export function SkeletonOutput() {
   return (
     <OutputLoading>
-      <ChainToken
-        useAsPlaceholder={true}
-        size="large"
-        chainImage=""
-        tokenImage=""
-        loading={true}
-      />
+      <ChainToken useAsPlaceholder={true} size="large" loading={true} />
       <Skeleton variant="rounded" width={122} height={29} />
     </OutputLoading>
   );

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

@@ -25,11 +25,11 @@ export const StatusColors = {
 export interface SwapTokenData {
   from: {
     token: {
-      image: string;
+      image?: string;
       displayName: string;
     };
     blockchain: {
-      image: string;
+      image?: string;
     };
     amount: string;
     realAmount: string;
@@ -37,11 +37,11 @@ export interface SwapTokenData {
 
   to: {
     token: {
-      image: string;
+      image?: string;
       displayName: string;
     };
     blockchain: {
-      image: string;
+      image?: string;
     };
     amount: string;
     realAmount: string;

package/src/components/SwapListItem/SwapToken.tsx

@@ -27,23 +27,13 @@ export function SwapToken(props: PropTypes) {
       <TokenContainer>
         <Images>
           <div>
-            <ChainToken
-              tokenImage=""
-              chainImage=""
-              size="medium"
-              loading={true}
-            />
+            <ChainToken size="medium" loading={true} />
           </div>
           <div
             style={{
               transform: 'translateX(-5px)',
             }}>
-            <ChainToken
-              tokenImage=""
-              chainImage=""
-              size="medium"
-              loading={true}
-            />
+            <ChainToken size="medium" loading={true} />
           </div>
         </Images>
         <LayoutLoading>

package/src/components/index.ts

@@ -43,6 +43,7 @@ export * from './Flags/index.js';
 export * from './Select/index.js';
 export * from './QuoteTag/index.js';
 export * from './Tabs/index.js';
+export * from './CustomTokenWarning/index.js';
 export type {
   SvgIconProps,
   SvgIconPropsWithChildren,

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

@@ -9,8 +9,8 @@ type Notification = {
 
 export type PropTypes = {
   list: Notification[];
-  getBlockchainImage: (blockchain: string) => string;
-  getTokenImage: (token: Asset) => string;
+  getBlockchainImage: (blockchain: string) => string | undefined;
+  getTokenImage: (token: Asset) => string | undefined;
   onClickItem: (requestId: string) => void;
   onClearAll: () => void;
   containerStyles?: CSS;

package/src/containers/SwapInput/SwapInput.tsx

@@ -96,6 +96,8 @@ export function SwapInput(props: SwapInputPropTypes) {
           tokenImage={props.token.image}
           onClick={props.onClickToken}
           loading={props.loading}
+          warning={props.token.securityWarning}
+          tooltipContainer={props.tooltipContainer}
         />
         <div className={amountStyles()}>
           {props.loading || (props.mode === 'To' && props.fetchingQuote) ? (

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

@@ -3,11 +3,12 @@ import type { PriceImpactWarningLevel } from '../../components/PriceImpact/Price
 export type BaseProps = {
   chain: {
     displayName: string;
-    image: string;
+    image?: string;
   };
   token: {
     displayName: string;
-    image: string;
+    image?: string;
+    securityWarning?: boolean;
   };
   price: {
     value: string;
@@ -41,4 +42,5 @@ type ToProps = {
   warningLevel: PriceImpactWarningLevel;
 };
 
-export type SwapInputPropTypes = BaseProps & (FromProps | ToProps);
+export type SwapInputPropTypes = BaseProps &
+  (FromProps | ToProps) & { tooltipContainer?: HTMLElement };

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

@@ -74,3 +74,10 @@ export const skeletonStyles = css({
   width: '100%',
   padding: '$5 $0',
 });
+
+export const TitleContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+});

package/src/containers/SwapInput/TokenSection.tsx

@@ -2,6 +2,7 @@ import type { TokenSectionProps } from './TokenSection.types.js';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
+import { CustomTokenWarning } from 'src/components/CustomTokenWarning/CustomTokenWarning.js';
 
 import {
   ChainToken,
@@ -14,6 +15,7 @@ import {
   chainNameStyles,
   Container,
   skeletonStyles,
+  TitleContainer,
   tokenChainStyles,
   TokenSectionContainer,
 } from './TokenSection.styles.js';
@@ -28,6 +30,8 @@ export function TokenSection(props: TokenSectionProps) {
     chianImageId,
     onClick,
     loading,
+    warning,
+    tooltipContainer,
   } = props;
   return (
     <Container variant="default" disabled={error || loading} onClick={onClick}>
@@ -49,11 +53,19 @@ export function TokenSection(props: TokenSectionProps) {
             </div>
           ) : (
             <>
-              <Typography variant="title" size="medium">
-                {error || (!loading && !tokenSymbol)
-                  ? i18n.t('Select Token')
-                  : tokenSymbol}
-              </Typography>
+              <TitleContainer>
+                <Typography variant="title" size="medium">
+                  {error || (!loading && !tokenSymbol)
+                    ? i18n.t('Select Token')
+                    : tokenSymbol}
+                </Typography>
+                {warning && (
+                  <>
+                    <Divider size={4} direction="horizontal" />
+                    <CustomTokenWarning container={tooltipContainer} />
+                  </>
+                )}
+              </TitleContainer>
               <Typography
                 variant="body"
                 size="medium"

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

@@ -1,10 +1,12 @@
 export type TokenSectionProps = {
-  chainImage: string;
-  tokenImage: string;
+  chainImage?: string;
+  tokenImage?: string;
   tokenSymbol: string;
   chain: string;
   chianImageId?: string;
   error?: boolean;
   onClick: () => void;
   loading?: boolean;
+  warning?: boolean;
+  tooltipContainer?: HTMLElement;
 };