@rango-dev/widget-embedded 0.23.1-next.8 → 0.24.0

package/src/components/Quotes/Quotes.tsx

@@ -2,7 +2,7 @@ import type { PropTypes } from './Quotes.types';
 import type { MultiRouteSimulationResult } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
-import { Divider, Typography } from '@rango-dev/ui';
+import { Divider, FullExpandedQuote, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 import { QuoteInfo } from '../../containers/QuoteInfo';
@@ -26,6 +26,7 @@ export function Quotes(props: PropTypes) {
     fetch,
     showModalFee,
     hasSort = true,
+    fullExpandedMode = false,
   } = props;
   const {
     selectedQuote,
@@ -66,35 +67,41 @@ export function Quotes(props: PropTypes) {
 
   return (
     <>
+      {hasSort && (
+        <>
+          <StrategyContent>
+            <Typography size="xmedium" variant="title">
+              {i18n.t('Sort by')}
+            </Typography>
+            <SelectStrategy container={getContainer()} />
+          </StrategyContent>
+          <Divider size="10" />
+        </>
+      )}
+
       {loading &&
         Array.from({ length: ITEM_SKELETON_COUNT }, (_, index) => (
           <React.Fragment key={index}>
-            <QuoteSkeleton
-              tagHidden={false}
-              type="list-item"
-              expanded={false}
-            />
-            <Divider size={16} />
+            {fullExpandedMode ? (
+              <FullExpandedQuote loading />
+            ) : (
+              <QuoteSkeleton
+                tagHidden={false}
+                type="list-item"
+                expanded={false}
+              />
+            )}
+            {index !== ITEM_SKELETON_COUNT - 1 && <Divider size={16} />}
           </React.Fragment>
         ))}
 
       {!loading && (
         <>
-          {hasSort && (
-            <>
-              <StrategyContent>
-                <Typography size="xmedium" variant="title">
-                  {i18n.t('Sort by')}
-                </Typography>
-                <SelectStrategy container={getContainer()} />
-              </StrategyContent>
-              <Divider size="10" />
-            </>
-          )}
           {hasQuotes
-            ? sortQuotes.map((quote) => {
+            ? sortQuotes.map((quote, index) => {
                 const quoteWarning = getQuoteWarning(quote);
                 const quoteError = getQuoteError(quote.swaps);
+                const lastIndex = sortQuotes.length - 1 === index;
 
                 return (
                   <React.Fragment key={quote.requestId}>
@@ -106,6 +113,7 @@ export function Quotes(props: PropTypes) {
                       loading={loading}
                       error={quoteError?.options || null}
                       warning={quoteWarning}
+                      fullExpandedMode={fullExpandedMode}
                       onClick={(quote) => {
                         if (!quoteError) {
                           updateQuotePartialState('warning', quoteWarning);
@@ -118,13 +126,17 @@ export function Quotes(props: PropTypes) {
                       }}
                       type="list-item"
                     />
-                    <Divider size={16} />
+                    {!lastIndex && <Divider size={16} />}
                   </React.Fragment>
                 );
               })
             : showNoResultMessage && (
                 <ErrorsContainer>
-                  <NoResult error={error} fetch={fetch} />
+                  <NoResult
+                    size={fullExpandedMode ? 'large' : 'small'}
+                    error={error}
+                    fetch={fetch}
+                  />
                 </ErrorsContainer>
               )}
         </>

package/src/components/Quotes/Quotes.types.ts

@@ -6,4 +6,5 @@ export type PropTypes = {
   fetch: (shouldChangeSelectedQuote?: boolean) => void;
   showModalFee?: boolean;
   hasSort?: boolean;
+  fullExpandedMode?: boolean;
 };

package/src/components/Quotes/SelectStrategy.tsx

@@ -1,9 +1,9 @@
 import type { PreferenceType } from 'rango-sdk';
 
+import { i18n } from '@lingui/core';
 import { Select } from '@rango-dev/ui';
 import React from 'react';
 
-import { ROUTE_STRATEGY } from '../../constants/quote';
 import { useQuoteStore } from '../../store/quote';
 
 import { SelectContainer } from './Quotes.styles';
@@ -11,22 +11,39 @@ import { SelectContainer } from './Quotes.styles';
 export function SelectStrategy(props: { container: HTMLElement }) {
   const { updateQuotePartialState, sortStrategy } = useQuoteStore();
 
+  const ROUTE_STRATEGY: { value: PreferenceType; label: string }[] = [
+    {
+      value: 'SMART',
+      label: i18n.t('Smart Routing'),
+    },
+    {
+      value: 'FEE',
+      label: i18n.t('Lowest Fee'),
+    },
+    {
+      value: 'SPEED',
+      label: i18n.t('Fastest Transfer'),
+    },
+    {
+      value: 'NET_OUTPUT',
+      label: i18n.t('Maximum Return'),
+    },
+    {
+      value: 'PRICE',
+      label: i18n.t('Maximum Output'),
+    },
+  ];
+
   return (
     <SelectContainer>
       <Select
         container={props.container}
         options={ROUTE_STRATEGY}
-        value={
-          ROUTE_STRATEGY.find(
-            (strategy) => strategy.value === sortStrategy
-          ) as {
-            value: PreferenceType;
-            label: string;
-          }
-        }
+        value={sortStrategy}
         handleItemClick={(item) => {
-          updateQuotePartialState('sortStrategy', item.value as PreferenceType);
+          updateQuotePartialState('sortStrategy', item.value);
         }}
+        variant="filled"
       />
     </SelectContainer>
   );

package/src/components/Slippage/Slippage.tsx

@@ -47,19 +47,17 @@ export function Slippage() {
         {SLIPPAGES.map((slippageItem, index) => {
           const key = `slippage-${index}`;
           return (
-            <>
-              <SlippageChip
-                key={key}
-                onClick={() => {
-                  if (customSlippage) {
-                    setCustomSlippage(null);
-                  }
-                  setSlippage(slippageItem);
-                }}
-                selected={!customSlippage && slippageItem === slippage}
-                label={`${slippageItem.toString()}%`}
-              />
-            </>
+            <SlippageChip
+              key={key}
+              onClick={() => {
+                if (customSlippage) {
+                  setCustomSlippage(null);
+                }
+                setSlippage(slippageItem);
+              }}
+              selected={!customSlippage && slippageItem === slippage}
+              label={`${slippageItem.toString()}%`}
+            />
           );
         })}
         <TextField

package/src/components/SwapDetails/SwapDetails.tsx

@@ -109,9 +109,11 @@ export function SwapDetails(props: SwapDetailsProps) {
       if (swap.status === 'success' || swap.status === 'failed') {
         setShowCompletedModal(swap.status);
         setAsRead(swap.requestId);
+      } else if (showCompletedModal) {
+        setShowCompletedModal(null);
       }
     }
-  }, [swap.status]);
+  }, [swap.status, swap.requestId]);
 
   useEffect(() => {
     if (showSwitchNetwork) {

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,5 +1,6 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
 
+import { debug } from '@rango-dev/logging-core';
 import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
@@ -39,7 +40,10 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             state={walletState}
             link={walletInfo.installLink}
             disabled={walletButtonDisabled}
-            onClick={async () => connect(walletType)}
+            // TODO we need to show an error modal when user reject the connection
+            onClick={async () =>
+              connect(walletType).catch((error) => debug(error))
+            }
           />
         </WalletContainer>
       )}

package/src/components/TokenList/TokenList.tsx

@@ -19,7 +19,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
-import { generateRangeColors } from '../../utils/colors';
+import { generateShade, isBright } from '../../utils/colors';
 import { formatBalance } from '../../utils/wallets';
 
 import { LoadingTokenList } from './LoadingTokenList';
@@ -133,23 +133,24 @@ export function TokenList(props: PropTypes) {
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
           );
-          const color = generateRangeColors(
-            token.symbol,
-            blockchain?.color || ''
+          const lightShade = generateShade(
+            blockchain?.color || '',
+            isBright(blockchain?.color || '') ? 5 : 125
           );
+          const darkShade = generateShade(blockchain?.color || '', -100);
 
           const customCssForTag = {
-            $$color: color[`${token.symbol}100`],
+            $$color: lightShade,
             [`.${darkTheme} &`]: {
-              $$color: color[`${token.symbol}900`],
+              $$color: darkShade,
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: color[`${token.symbol}700`],
+            $$color: darkShade,
             [`.${darkTheme} &`]: {
-              $$color: color[`${token.symbol}100`],
+              $$color: lightShade,
             },
             color: '$$color',
           };

package/src/constants/errors.ts

@@ -31,7 +31,7 @@ export const errorMessages = () => {
       impactTitle: i18n.t('High Price Impact'),
       title: i18n.t('Price impact is too high!'),
       description: i18n.t(
-        'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.'
+        'The price impact is significantly higher than the allowed amount.'
       ),
       confirmMessage: i18n.t('Confirm high price impact'),
     },

package/src/constants/index.ts

@@ -2,7 +2,7 @@ import { UI_ID } from '@rango-dev/ui';
 
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
-export const SCANNER_BASE_URL = 'https://scan.rango.exchange';
+export const SCANNER_BASE_URL = 'https://explorer.rango.exchange';
 
 export const WIDGET_UI_ID = {
   SWAP_BOX_ID: 'rango-swap-box',

package/src/constants/languages.ts

@@ -1,6 +1,22 @@
 import type { FlagPropTypes, Language } from '@rango-dev/ui';
 
-import { English, French, Japanese, Portuguese, Spanish } from '@rango-dev/ui';
+import {
+  Chinese,
+  English,
+  Finland,
+  French,
+  German,
+  Greece,
+  Italian,
+  Japanese,
+  Netherlands,
+  Poland,
+  Portuguese,
+  Russian,
+  Spanish,
+  Swedish,
+  Ukrainian,
+} from '@rango-dev/ui';
 
 export type LanguageItem = {
   title: string;
@@ -15,6 +31,16 @@ export const LANGUAGES: LanguageItem[] = [
   { title: 'French', label: 'Français', local: 'fr', SVGFlag: French },
   { title: 'Japanese', label: '日本語', local: 'ja', SVGFlag: Japanese },
   { title: 'Portuguese', label: 'Português', local: 'pt', SVGFlag: Portuguese },
+  { title: 'Chinese', label: '中国人', local: 'zh', SVGFlag: Chinese },
+  { title: 'Russian', label: 'Русский', local: 'ru', SVGFlag: Russian },
+  { title: 'German', label: 'Deutsch', local: 'de', SVGFlag: German },
+  { title: 'Ukrainian', label: 'Україні', local: 'uk', SVGFlag: Ukrainian },
+  { title: 'Swedish', label: 'svenska', local: 'sv', SVGFlag: Swedish },
+  { title: 'Finnish', label: 'Suomalainen', local: 'fi', SVGFlag: Finland },
+  { title: 'Dutch', label: 'Nederlands', local: 'nl', SVGFlag: Netherlands },
+  { title: 'Greek', label: 'Grieks', local: 'el', SVGFlag: Greece },
+  { title: 'Italian', label: 'Italiana', local: 'it', SVGFlag: Italian },
+  { title: 'Polish', label: 'Polski', local: 'pl', SVGFlag: Poland },
 ];
 
 export const DEFAULT_LANGUAGE = 'en';

package/src/constants/quote.ts

@@ -1,4 +1,4 @@
-import type { PreferenceType, SwapFee, TagValue } from 'rango-sdk';
+import type { SwapFee, TagValue } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 
@@ -22,29 +22,6 @@ export type FeesGroup = {
   nonePayable: { [key in NameOfFees]?: SwapFee[] };
 };
 
-export const ROUTE_STRATEGY: { value: PreferenceType; label: string }[] = [
-  {
-    value: 'SMART',
-    label: i18n.t('Smart Routing'),
-  },
-  {
-    value: 'FEE',
-    label: i18n.t('Lowest Fee'),
-  },
-  {
-    value: 'SPEED',
-    label: i18n.t('Fastest Transfer'),
-  },
-  {
-    value: 'NET_OUTPUT',
-    label: i18n.t('Maximum Return'),
-  },
-  {
-    value: 'PRICE',
-    label: i18n.t('Maximum Output'),
-  },
-];
-
 export const HIGH_PRIORITY_TAGS: TagValue[] = [
   'RECOMMENDED',
   'CENTRALIZED',

package/src/constants/searchFor.ts

@@ -0,0 +1,6 @@
+export const MIN_LENGTH_SYMBOL_EXACT_MATCH = 1;
+export const MIN_LENGTH_SYMBOL_START_WITH = 2;
+export const MIN_LENGTH_SYMBOL_CONTAINS = 3;
+export const MIN_LENGTH_TOKEN_NAME_EXACT_MATCH = 3;
+export const MIN_LENGTH_TOKEN_NAME_CONTAINS = 3;
+export const MIN_LENGTH_TOKEN_ADDRESS_CONTAINS = 4;

package/src/containers/App/App.styles.ts

@@ -1,13 +1,9 @@
 import { styled } from '@rango-dev/ui';
 
 export const MainContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
   fontFamily: '$widget',
   boxSizing: 'border-box',
   textAlign: 'left',
-
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

package/src/containers/App/App.tsx

@@ -1,50 +1,26 @@
-import type { WalletType } from '@rango-dev/wallets-shared';
-
 import { I18nManager } from '@rango-dev/ui';
-import React, { useContext, useEffect, useState } from 'react';
+import React from 'react';
 
-import { AppRouter } from '../../components/AppRouter';
 import { AppRoutes } from '../../components/AppRoutes';
 import { WidgetEvents } from '../../components/WidgetEvents';
-import { globalFont } from '../../globalStyles';
-import { useFetchApiConfig } from '../../hooks/useFetchApiConfig';
+import { useBootstrap } from '../../hooks/useBootstrap';
 import { useLanguage } from '../../hooks/useLanguage';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
-import { useNotificationStore } from '../../store/notification';
-import { WidgetContext } from '../Wallets';
 
 import { MainContainer } from './App.styles';
 
 export function Main() {
-  globalFont();
-
+  useBootstrap();
   const { config } = useAppStore();
   const { activeTheme } = useTheme(config?.theme || {});
   const { activeLanguage } = useLanguage();
-  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
-    useState<string>('');
-  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
-  const widgetContext = useContext(WidgetContext);
-  const { fetchApiConfig } = useFetchApiConfig();
-  useEffect(() => {
-    void useNotificationStore.persist.rehydrate();
-    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
-    void fetchApiConfig().catch(console.log);
-  }, []);
 
   return (
     <I18nManager language={activeLanguage}>
       <MainContainer id="swap-container" className={activeTheme()}>
         <WidgetEvents />
-        <AppRouter
-          lastConnectedWallet={lastConnectedWalletWithNetwork}
-          disconnectedWallet={disconnectedWallet}
-          clearDisconnectedWallet={() => {
-            setDisconnectedWallet(undefined);
-          }}>
-          <AppRoutes />
-        </AppRouter>
+        <AppRoutes />
       </MainContainer>
     </I18nManager>
   );

package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -10,8 +10,21 @@ export const Container = styled('div', {
   [`.${darkTheme} &`]: {
     backgroundColor: '$neutral300',
   },
+
+  variants: {
+    expandMode: {
+      default: {
+        width: '390px',
+      },
+      full: {
+        width: '719px',
+      },
+    },
+  },
+
   '&.is-hidden': {
     width: 0,
+    height: 0,
     opacity: 0,
     marginLeft: 0,
   },

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -9,6 +9,7 @@ import { LayoutContainer } from '../../components/Layout/Layout.styles';
 import { Quotes } from '../../components/Quotes';
 import { SelectStrategy } from '../../components/Quotes/SelectStrategy';
 import { WIDGET_UI_ID } from '../../constants';
+import { useAppStore } from '../../store/AppStore';
 import { getExpanded } from '../../utils/common';
 
 import { Container, Content } from './ExpandedQuotes.styles';
@@ -19,6 +20,8 @@ export function ExpandedQuotes(props: PropTypes) {
   const { fetch, loading, onClickOnQuote, onClickRefresh, isVisible } = props;
   const [isDelayedVisible, setIsDelayedVisible] = useState(false);
   const containerClass = isDelayedVisible ? '' : 'is-hidden';
+  const { config } = useAppStore();
+  const fullExpandedMode = config?.variant === 'full-expanded';
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | null = null;
@@ -43,6 +46,7 @@ export function ExpandedQuotes(props: PropTypes) {
 
   return (
     <Container
+      expandMode={config?.variant === 'full-expanded' ? 'full' : 'default'}
       className={`${containerClass} ${LayoutContainer()}`}
       id={WIDGET_UI_ID.EXPANDED_BOX_ID}>
       <Header
@@ -64,6 +68,7 @@ export function ExpandedQuotes(props: PropTypes) {
           hasSort={false}
           loading={loading}
           onClickOnQuote={onClickOnQuote}
+          fullExpandedMode={fullExpandedMode}
         />
       </Content>
     </Container>

package/src/containers/Inputs/Inputs.tsx

@@ -25,7 +25,7 @@ import { formatBalance, isFetchingBalance } from '../../utils/wallets';
 import { Container, FromContainer } from './Inputs.styles';
 
 export function Inputs(props: PropTypes) {
-  const { fetchingQuote, fetchMetaStatus, onClickToken } = props;
+  const { fetchingQuote, fetchMetaStatus, onClickToken, isExpandable } = props;
   const {
     fromToken,
     fromBlockchain,
@@ -39,7 +39,6 @@ export function Inputs(props: PropTypes) {
     selectedQuote,
   } = useQuoteStore();
   const { connectedWallets, getBalanceFor } = useWalletsStore();
-
   const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
 
   const fromTokenFormattedBalance =
@@ -116,7 +115,7 @@ export function Inputs(props: PropTypes) {
         <SwitchFromAndToButton />
       </FromContainer>
       <SwapInput
-        sharpBottomStyle={!!selectedQuote || fetchingQuote}
+        sharpBottomStyle={!isExpandable && (!!selectedQuote || fetchingQuote)}
         label={i18n.t('To')}
         mode="To"
         fetchingQuote={fetchingQuote}

package/src/containers/Inputs/Inputs.types.ts

@@ -4,4 +4,5 @@ export type PropTypes = {
   fetchingQuote: boolean;
   fetchMetaStatus: FetchStatus;
   onClickToken: (mode: 'from' | 'to') => void;
+  isExpandable?: boolean;
 };

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -25,6 +25,7 @@ export function QuoteInfo(props: PropTypes) {
     showModalFee,
     selected,
     onClickAllRoutes,
+    fullExpandedMode = false,
   } = props;
   const { inputAmount, inputUsdValue, toToken } = useQuoteStore();
 
@@ -65,6 +66,7 @@ export function QuoteInfo(props: PropTypes) {
         type={type}
         expanded={expanded}
         onClickAllRoutes={onClickAllRoutes}
+        fullExpandedMode={fullExpandedMode}
         input={{
           value: inputAmount,
           usdValue: inputUsdValue?.toString() ?? '',

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -14,4 +14,5 @@ export type PropTypes = {
   onClickAllRoutes?: () => void;
   selected?: boolean;
   showModalFee?: boolean;
+  fullExpandedMode?: boolean;
 };