@rango-dev/widget-embedded 0.40.2-next.1 → 0.40.2-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.40.2-next.1",
+  "version": "0.40.2-next.11",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -24,24 +24,24 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/logging-core": "^0.7.1-next.0",
-    "@rango-dev/provider-all": "^0.43.1-next.1",
+    "@rango-dev/logging-core": "^0.7.1-next.1",
+    "@rango-dev/provider-all": "^0.43.1-next.5",
     "@rango-dev/queue-manager-core": "^0.28.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.43.1-next.1",
+    "@rango-dev/queue-manager-rango-preset": "^0.43.1-next.5",
     "@rango-dev/queue-manager-react": "^0.28.1-next.0",
-    "@rango-dev/signer-solana": "^0.37.1-next.1",
-    "@rango-dev/ui": "^0.44.1-next.1",
-    "@rango-dev/wallets-core": "^0.41.1-next.1",
-    "@rango-dev/wallets-react": "^0.28.1-next.1",
-    "@rango-dev/wallets-shared": "^0.42.1-next.1",
+    "@rango-dev/signer-solana": "^0.37.1-next.2",
+    "@rango-dev/ui": "^0.44.1-next.6",
+    "@rango-dev/wallets-core": "^0.41.1-next.4",
+    "@rango-dev/wallets-react": "^0.28.1-next.4",
+    "@rango-dev/wallets-shared": "^0.42.1-next.4",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "ethers": "^6.13.2",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.63",
-    "rango-types": "^0.1.80",
+    "rango-sdk": "^0.1.64",
+    "rango-types": "^0.1.81",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/AppRoutes.tsx

@@ -13,7 +13,7 @@ import { LanguagePage } from '../pages/LanguagePage';
 import { LiquiditySourcePage } from '../pages/LiquiditySourcePage';
 import { RoutesPage } from '../pages/Routes';
 import { SelectBlockchainPage } from '../pages/SelectBlockchainPage';
-import { SelectSwapItemsPage } from '../pages/SelectSwapItemsPage';
+import { SelectSwapItemsPage } from '../pages/SelectSwapItemPage/index';
 import { SettingsPage } from '../pages/SettingsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 import { WalletsPage } from '../pages/WalletsPage';

package/src/components/CustomTokenModal/CustomTokenModal.constants.ts

@@ -0,0 +1,2 @@
+export const CUSTOM_TOKEN_LEARN_MORE_LINK =
+  'https://blog.rango.exchange/understanding-the-risks-of-using-custom-token-contract-addresses-96022308eca4';

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -10,27 +10,38 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
+import { DEFAULT_TOKEN_IMAGE_SRC } from '../../constants/customTokens';
 import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
+import { CUSTOM_TOKEN_LEARN_MORE_LINK } from './CustomTokenModal.constants';
 import { generateExplorerLink } from './CustomTokenModal.helpers';
 import { Container, StyledLink } from './CustomTokenModal.styles';
 
 export function CustomTokenModal(props: PropTypes) {
-  const { open, onClose, token, onSubmitClick, blockchain } = props;
+  const { open, onClose, token, onExit, onSubmitClick, blockchain } = props;
 
   const explorerLink = generateExplorerLink(token.address, blockchain);
 
+  const onClickLearnMore = () =>
+    window.open(CUSTOM_TOKEN_LEARN_MORE_LINK, '_blank');
+
   return (
     <WatermarkedModal
       open={open}
       dismissible
       onClose={onClose}
+      onExit={onExit}
       container={getContainer()}>
       <Container>
-        <Image src={token.image} size={45} type="circular" />
+        <Image
+          src={token.image === '' ? DEFAULT_TOKEN_IMAGE_SRC : token.image}
+          size={45}
+          type="circular"
+        />
+        <Divider size={4} />
         <Typography variant="title" size="medium">
-          {token.name}
+          {token.symbol}
         </Typography>
         <Typography variant="body" size="small" className="_blockchain-name">
           {blockchain.displayName}
@@ -72,7 +83,7 @@ export function CustomTokenModal(props: PropTypes) {
           variant="body"
           className="_custom-token-description">
           {i18n.t(
-            `This token doesn't appear on the active token list(s). Make sure this is the token that you want to trade.`
+            `This token is not part of our verified token list. please verify its source and make sure to understand all associated risks before proceeding.`
           )}
         </Typography>
       </Container>
@@ -86,7 +97,17 @@ export function CustomTokenModal(props: PropTypes) {
         type="primary"
         fullWidth
         onClick={onSubmitClick}>
-        {i18n.t('Import')}
+        {i18n.t('Import Anyway')}
+      </Button>
+      <Divider size={10} />
+      <Button
+        id="widget-custom-token-modal-learn-more-btn"
+        variant="outlined"
+        size="large"
+        type="primary"
+        fullWidth
+        onClick={onClickLearnMore}>
+        {i18n.t('Learn More')}
       </Button>
     </WatermarkedModal>
   );

package/src/components/CustomTokenModal/CustomTokenModal.types.ts

@@ -3,6 +3,7 @@ import type { BlockchainMeta, Token } from 'rango-sdk';
 export type PropTypes = {
   open: boolean;
   onClose: () => void;
+  onExit: () => void;
   onSubmitClick: () => void;
   token: Token;
   blockchain: BlockchainMeta;

package/src/components/ImportCustomToken/ImportCustomToken.tsx

@@ -0,0 +1,121 @@
+import type { PropTypes } from './ImportCustomToken.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import { CustomTokenModal } from '../CustomTokenModal';
+
+export function ImportCustomToken(props: PropTypes) {
+  const {
+    token,
+    blockchain,
+    error,
+    address,
+    fetchCustomToken,
+    onCloseErrorModal,
+    onImport,
+    onExitErrorModal,
+    onExitImportModal,
+  } = props;
+  const { setCustomToken } = useAppStore();
+  const [showErrorModal, setShowErrorModal] = useState<boolean>(false);
+  const [showImportModal, setShowImportModal] = useState<boolean>(false);
+  const [retryClicked, setRetryClicked] = useState(false);
+
+  const getCustomToken = () => {
+    if (blockchain) {
+      void fetchCustomToken?.({
+        blockchain: blockchain.name,
+        tokenAddress: address,
+      });
+    }
+  };
+
+  const closeErrorModal = () => {
+    if (error?.type !== 'network-error') {
+      onCloseErrorModal?.();
+    }
+    setShowErrorModal(false);
+  };
+
+  const handleErrorModalButtonClick = () => {
+    setRetryClicked(true);
+    closeErrorModal();
+  };
+
+  const handleExit = () => {
+    if (retryClicked && error?.type === 'network-error') {
+      setRetryClicked(false);
+      void getCustomToken();
+    }
+    onExitErrorModal();
+  };
+
+  const handleSubmit = () => {
+    if (token) {
+      setCustomToken(token);
+      onImport();
+    }
+  };
+
+  useEffect(() => {
+    if (!!error) {
+      setShowErrorModal(true);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (blockchain && token) {
+      setShowImportModal(true);
+    }
+  }, [blockchain, token]);
+
+  return (
+    <>
+      <WatermarkedModal
+        open={showErrorModal}
+        dismissible
+        onClose={closeErrorModal}
+        onExit={handleExit}
+        container={getContainer()}>
+        <MessageBox
+          title={error?.title ?? ''}
+          type="error"
+          description={
+            error?.message || i18n.t('Failed Network, Please retry.')
+          }>
+          <Divider size={40} />
+          <Divider size={10} />
+          {/* eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids */}
+          <Button
+            id={`widget-add-custom-token-${
+              error?.type === 'network-error' ? 'retry' : 'add-another'
+            }-btn`}
+            variant="contained"
+            size="large"
+            type="primary"
+            fullWidth
+            onClick={handleErrorModalButtonClick}>
+            {error?.type === 'network-error'
+              ? i18n.t('Retry')
+              : i18n.t('Add another custom token')}
+          </Button>
+        </MessageBox>
+      </WatermarkedModal>
+      {blockchain && token && (
+        <CustomTokenModal
+          blockchain={blockchain}
+          token={token}
+          onSubmitClick={handleSubmit}
+          onClose={() => setShowImportModal(false)}
+          open={showImportModal}
+          onExit={onExitImportModal}
+        />
+      )}
+    </>
+  );
+}

package/src/components/ImportCustomToken/ImportCustomToken.types.ts

@@ -0,0 +1,18 @@
+import type {
+  CustomTokenError,
+  UseFetchCustomToken,
+} from '../../hooks/useFetchCustomToken';
+import type { TokenData } from '../TokenList/TokenList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+export type PropTypes = {
+  token: TokenData | null;
+  error?: CustomTokenError;
+  blockchain?: BlockchainMeta;
+  address: string;
+  fetchCustomToken?: UseFetchCustomToken['fetchCustomToken'];
+  onCloseErrorModal?: () => void;
+  onImport: () => void;
+  onExitErrorModal: () => void;
+  onExitImportModal: () => void;
+};

package/src/components/ImportCustomToken/index.ts

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

package/src/components/Layout/Layout.styles.ts

@@ -26,6 +26,11 @@ export const Container = styled('div', {
         height: WIDGET_HEIGHT,
       },
     },
+    showBanner: {
+      true: {
+        overflow: 'visible',
+      },
+    },
   },
 });
 
@@ -55,3 +60,10 @@ export const Footer = styled('div', {
     },
   },
 });
+
+export const BannerContainer = styled('div', {
+  width: '100%',
+  position: 'absolute',
+  bottom: '-$10',
+  transform: 'translateY(100%)',
+});

package/src/components/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react';
 
 import { useManager } from '@rango-dev/queue-manager-react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
 import { useIframe } from '../../hooks/useIframe';
@@ -22,12 +22,22 @@ import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 import { RefreshModal } from '../RefreshModal';
 
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
-import { Container, Content, Footer, LayoutContainer } from './Layout.styles';
+import {
+  BannerContainer,
+  Container,
+  Content,
+  Footer,
+  LayoutContainer,
+} from './Layout.styles';
 
 function Layout(props: PropsWithChildren<PropTypes>) {
   const { connectHeightObserver, disconnectHeightObserver } = useIframe();
   const { children, header, footer, height = 'fixed' } = props;
-  const { fetchStatus, connectedWallets } = useAppStore();
+  const {
+    fetchStatus,
+    connectedWallets,
+    config: { __UNSTABLE_OR_INTERNAL__ },
+  } = useAppStore();
   const [openRefreshModal, setOpenRefreshModal] = useState(false);
   const {
     config: { features, theme },
@@ -68,6 +78,22 @@ function Layout(props: PropsWithChildren<PropTypes>) {
 
   const scrollViewRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const showBanner = useMemo(() => {
+    const anyRouteExists =
+      (__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.length ?? 0) === 0;
+    const routesMatched =
+      !!__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.some((route) =>
+        location.pathname.endsWith(route)
+      );
+
+    return (
+      __UNSTABLE_OR_INTERNAL__?.swapBoxBanner &&
+      (anyRouteExists || routesMatched)
+    );
+  }, [
+    __UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.routes?.length,
+    location.pathname,
+  ]);
 
   useEffect(() => {
     const isIframe = isAppLoadedIntoIframe();
@@ -104,7 +130,8 @@ function Layout(props: PropsWithChildren<PropTypes>) {
       height={height}
       id={WIDGET_UI_ID.SWAP_BOX_ID}
       className={`${activeTheme()} ${LayoutContainer()}`}
-      ref={containerRef}>
+      ref={containerRef}
+      showBanner={showBanner}>
       <Header
         prefix={
           showBackButton ? (
@@ -112,7 +139,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
               onClick={() => {
                 navigateBack();
                 // As an example, used in routes page to add a custom logic when navigating back to the home page.
-                header.onBack && header.onBack();
+                header.onBack?.();
               }}
             />
           ) : null
@@ -159,6 +186,11 @@ function Layout(props: PropsWithChildren<PropTypes>) {
           <BottomLogo />
         </div>
       </Footer>
+      {showBanner && (
+        <BannerContainer>
+          {__UNSTABLE_OR_INTERNAL__?.swapBoxBanner?.element}
+        </BannerContainer>
+      )}
       <RefreshModal
         open={openRefreshModal}
         onClose={() => setOpenRefreshModal(false)}

package/src/components/NotificationContent/NotificationContent.tsx

@@ -26,9 +26,9 @@ export function NotificationContent() {
     <Notifications
       list={notifications}
       getBlockchainImage={(blockchain) =>
-        getBlockchainImage(blockchain, blockchains) ?? ''
+        getBlockchainImage(blockchain, blockchains)
       }
-      getTokenImage={(token) => findToken(token)?.image ?? ''}
+      getTokenImage={(token) => findToken(token)?.image}
       onClickItem={onClickItem}
       onClearAll={clearNotifications}
     />

package/src/components/Quote/QuoteTrigger.tsx

@@ -77,7 +77,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
             <React.Fragment key={key}>
               <ImageComponent
                 content={step.swapper.displayName}
-                src={step.swapper.image}
+                src={step.swapper.image ?? ''}
                 state={step.state}
                 container={container}
               />
@@ -90,7 +90,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                 <>
                   <ImageComponent
                     content={step.swapper.displayName}
-                    src={step.swapper.image}
+                    src={step.swapper.image ?? ''}
                     state={step.state}
                     container={container}
                   />
@@ -113,7 +113,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                               <React.Fragment key={key}>
                                 <ImageComponent
                                   content={step.swapper.displayName}
-                                  src={step.swapper.image}
+                                  src={step.swapper.image ?? ''}
                                   state={step.state}
                                   open={false}
                                 />
@@ -162,7 +162,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                     sideOffset={4}>
                     <ImageComponent
                       content={''}
-                      src={blockchain.image}
+                      src={blockchain.image ?? ''}
                       open={false}
                       className={index !== 0 ? 'blockchainImage' : ''}
                     />
@@ -182,7 +182,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                                 <ImageComponent
                                   key={chain.displayName}
                                   content={''}
-                                  src={chain.image}
+                                  src={chain.image ?? ''}
                                   open={false}
                                   className={i > index ? 'blockchainImage' : ''}
                                   container={container}

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.tsx

@@ -23,7 +23,7 @@ export function QuoteSummarySkeleton(props: PropTypes) {
   const quotePreview = (
     <QuoteSummary>
       <TokenAmount>
-        <ChainToken loading size="medium" chainImage="" tokenImage="" />
+        <ChainToken loading size="medium" />
         <Divider size={8} direction="horizontal" />
         <TokenAmountLabel>
           <Skeleton height={10} width={60} variant="rounded" />
@@ -72,7 +72,7 @@ export function QuoteSummarySkeleton(props: PropTypes) {
       {type === 'list-item' && (
         <Output>
           <OutputTokenInfo>
-            <ChainToken loading size="medium" chainImage="" tokenImage="" />
+            <ChainToken loading size="medium" />
             <Divider direction="horizontal" size={4} />
             <Skeleton height={15} width={150} variant="rounded" />
           </OutputTokenInfo>

package/src/components/QuoteSkeleton/StepSkeleton.tsx

@@ -25,7 +25,7 @@ export function StepSkeleton(props: PropTypes) {
         <StepSeparator hideSeparator={!separator} />
         <StepTokens extraSpace={separator}>
           <StepTokenInfo>
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
+            <ChainToken size="small" loading />
             <Divider direction="horizontal" size={8} />
             <Skeleton height={12} variant="rounded" />
           </StepTokenInfo>
@@ -33,7 +33,7 @@ export function StepSkeleton(props: PropTypes) {
             <NextIcon color="gray" size={16} />
           </StepIconContainer>
           <StepTokenInfo>
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
+            <ChainToken size="small" loading />
             <Divider direction="horizontal" size={8} />
             <Skeleton height={12} variant="rounded" />
           </StepTokenInfo>

package/src/components/SearchInput/SearchInput.tsx

@@ -15,9 +15,21 @@ export function SearchInput(props: PropTypes) {
     value,
     style,
     setValue,
+    suffix,
     ...inputAttributes
   } = props;
 
+  let inputSuffix = !!value.length ? (
+    // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
+    <IconButton variant="ghost" onClick={() => setValue?.('')} size="small">
+      <CloseIcon color="gray" size={10} />
+    </IconButton>
+  ) : null;
+
+  if (suffix) {
+    inputSuffix = suffix;
+  }
+
   return (
     <TextField
       prefix={
@@ -25,16 +37,7 @@ export function SearchInput(props: PropTypes) {
           <SearchIcon color="black" />
         </IconWrapper>
       }
-      suffix={
-        !!value.length && (
-          <IconButton
-            variant="ghost"
-            onClick={() => setValue?.('')}
-            size="small">
-            <CloseIcon color="gray" size={10} />
-          </IconButton>
-        )
-      }
+      suffix={inputSuffix}
       fullWidth={fullWidth}
       color={color}
       variant={variant}

package/src/components/SearchInput/SearchInput.types.ts

@@ -1,5 +1,6 @@
+import type { TextField } from '@rango-dev/ui';
 import type * as Stitches from '@stitches/react';
-import type React from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 
 export type PropTypes = {
   variant?: 'contained' | 'outlined' | 'ghost';
@@ -9,4 +10,5 @@ export type PropTypes = {
   value: string;
   setValue?: (value: string) => void;
   style?: Stitches.CSS;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'>;
+  suffix?: ReactElement;
+} & ComponentProps<typeof TextField>;

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -31,11 +31,11 @@ export interface CompleteModalPropTypes {
   percentageChange: string;
   chain: {
     displayName?: string;
-    image: string;
+    image?: string;
   };
   token: {
     displayName: string;
-    image: string;
+    image?: string;
   };
   description?: React.ReactNode;
   diagnosisUrl?: string | null;

package/src/components/TokenList/TokenList.styles.ts

@@ -2,6 +2,7 @@ import {
   css,
   darkTheme,
   ImageContainer,
+  ListItemButton,
   styled,
   Typography,
 } from '@rango-dev/ui';
@@ -102,6 +103,18 @@ export const List = styled('ul', {
   },
 });
 
+export const StyledListItemButton = styled(ListItemButton, {
+  variants: {
+    customToken: {
+      true: {
+        '&:hover': {
+          cursor: 'unset',
+        },
+      },
+    },
+  },
+});
+
 export const Tag = styled('div', {
   paddingLeft: '$5',
   paddingRight: '$5',
@@ -165,3 +178,30 @@ export const StyledLink = styled('a', {
     color: '$colors$info',
   },
 });
+
+export const ListItemContainer = styled('div', {
+  paddingRight: '$5',
+
+  '& .widget-token-list-item-btn': {
+    width: '100%',
+    overflow: 'hidden',
+    height: '60px',
+  },
+
+  '& .widget-token-list-item-import-btn': {
+    height: '$20',
+    padding: '0 $10',
+
+    '& ._text': {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+
+    '& ._typography': {
+      [`.${darkTheme} &`]: {
+        color: '$foreground',
+      },
+    },
+  },
+});