@rango-dev/widget-embedded 0.20.1-next.8 → 0.21.0

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -1,26 +1,11 @@
 import { styled } from '@rango-dev/ui';
 
-export const PositionTopAlerts = styled('div', {
-  paddingBottom: '$10',
-});
-
 export const QuoteContainer = styled('div', {
   width: '100%',
   '& .position-top__skeleton': {
     paddingTop: '$10',
   },
 });
-
-export const SkeletonContainer = styled('div', {
-  variants: {
-    paddingTop: {
-      true: {
-        paddingTop: '$10',
-      },
-    },
-  },
-});
-
 export const FooterStepAlarm = styled('div', {
   paddingBottom: '$15',
 });

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -1,36 +1,16 @@
 import type { PropTypes } from './QuoteInfo.types';
 
-import { Divider } from '@rango-dev/ui';
 import React from 'react';
 
 import { Quote } from '../../components/Quote';
 import { QuoteSkeleton } from '../../components/QuoteSkeleton';
-import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
 import { useQuoteStore } from '../../store/quote';
 import { QuoteErrorType } from '../../types';
 
-import {
-  PositionTopAlerts,
-  QuoteContainer,
-  SkeletonContainer,
-} from './QuoteInfo.styles';
+import { QuoteContainer } from './QuoteInfo.styles';
 
 export function QuoteInfo(props: PropTypes) {
-  const {
-    quote,
-    type,
-    loading,
-    error,
-    warning,
-    refetchQuote,
-    showWarningModal,
-    onOpenWarningModal,
-    onCloseWarningModal,
-    onConfirmWarningModal,
-    onChangeSettings,
-    expanded = false,
-    alertPosition = 'bottom',
-  } = props;
+  const { quote, type, loading, error, warning, expanded = false } = props;
   const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
     useQuoteStore();
 
@@ -41,59 +21,32 @@ export function QuoteInfo(props: PropTypes) {
 
   const showQuote = !noResult && quote && quote.result && !loading;
 
-  const quoteWarningsAndErrors = (warning || error) && (
-    <QuoteWarningsAndErrors
-      warning={warning}
-      error={error}
-      loading={loading}
-      refetchQuote={refetchQuote}
-      showWarningModal={showWarningModal}
-      onOpenWarningModal={onOpenWarningModal}
-      onCloseWarningModal={onCloseWarningModal}
-      onConfirmWarningModal={onConfirmWarningModal}
-      onChangeSettings={onChangeSettings}
-    />
-  );
-  return (
-    <>
-      {loading && (
-        <QuoteContainer>
-          <SkeletonContainer paddingTop={alertPosition === 'top'}>
-            <QuoteSkeleton type={type} expanded={expanded} />
-          </SkeletonContainer>
-        </QuoteContainer>
-      )}
-
-      {alertPosition === 'top' && (
-        <PositionTopAlerts>{quoteWarningsAndErrors}</PositionTopAlerts>
-      )}
-      {showQuote ? (
-        <QuoteContainer>
-          <Quote
-            quote={quote}
-            error={error}
-            warning={warning}
-            type={type}
-            expanded={expanded}
-            recommended={true}
-            input={{
-              value: inputAmount,
-              usdValue: inputUsdValue?.toString() ?? '',
-            }}
-            output={{
-              value: outputAmount?.toString() ?? '',
-              usdValue: outputUsdValue?.toString() ?? '',
-            }}
-          />
-        </QuoteContainer>
-      ) : null}
-
-      {alertPosition === 'bottom' && (
-        <>
-          {!warning && !error && <Divider size={16} />}
-          {quoteWarningsAndErrors}
-        </>
-      )}
-    </>
-  );
+  if (loading) {
+    return (
+      <QuoteContainer>
+        <QuoteSkeleton type={type} expanded={expanded} />
+      </QuoteContainer>
+    );
+  }
+
+  return showQuote ? (
+    <QuoteContainer>
+      <Quote
+        quote={quote}
+        error={error}
+        warning={warning}
+        type={type}
+        expanded={expanded}
+        recommended={true}
+        input={{
+          value: inputAmount,
+          usdValue: inputUsdValue?.toString() ?? '',
+        }}
+        output={{
+          value: outputAmount?.toString() ?? '',
+          usdValue: outputUsdValue?.toString() ?? '',
+        }}
+      />
+    </QuoteContainer>
+  ) : null;
 }

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

@@ -10,11 +10,4 @@ export type PropTypes = {
   warning: QuoteWarning | null;
   autoScrollOnExpanding?: boolean;
   expanded?: boolean;
-  alertPosition?: 'top' | 'bottom';
-  refetchQuote: () => void;
-  showWarningModal: boolean;
-  onOpenWarningModal: () => void;
-  onCloseWarningModal: () => void;
-  onConfirmWarningModal: () => void;
-  onChangeSettings: () => void;
 };

package/src/containers/Wallets/Wallets.tsx

@@ -13,9 +13,9 @@ import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
 import React, { createContext, useEffect, useRef, useState } from 'react';
 
-import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
+import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import {
   prepareAccountsForWalletStore,
@@ -39,7 +39,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
-  useSyncStoresWithConfig();
 
   useEffect(() => {
     void fetchMeta().catch(console.log);
@@ -101,6 +100,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
       props.onUpdateState(type, event, value, state, meta);
     }
   };
+  const isActiveTab = useUiStore.use.isActiveTab();
 
   useEffect(() => {
     if (accounts.length) {
@@ -120,7 +120,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         allBlockChains={blockchains}
         providers={providers}
         onUpdateState={onUpdateState}
-        autoConnect>
+        autoConnect={!!isActiveTab}>
         {props.children}
       </Provider>
     </WidgetContext.Provider>

package/src/containers/Widget/Widget.tsx

@@ -1,13 +1,18 @@
 import type { WidgetProps } from './Widget.types';
 import type { PropsWithChildren } from 'react';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { DEFAULT_CONFIG } from '../../store/slices/config';
+import { destroyTabManager } from '../../store/ui';
 import { Main } from '../App';
 import { WidgetProvider } from '../WidgetProvider';
 
 export function Widget(props: PropsWithChildren<WidgetProps>) {
+  useEffect(() => {
+    return destroyTabManager;
+  }, []);
+
   if (!props.config?.externalWallets) {
     return (
       <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -3,8 +3,11 @@ import type { WidgetInfoContextInterface } from './WidgetInfo.types';
 import { useManager } from '@rango-dev/queue-manager-react';
 import React, { createContext, useContext } from 'react';
 
+import { useLanguage } from '../../hooks/useLanguage';
 import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
+import { setCurrentTabAsActive, useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
 
@@ -16,6 +19,7 @@ export const WidgetInfoContext = createContext<
 
 export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
+  const isActiveTab = useUiStore.use.isActiveTab();
   const retrySwap = useQuoteStore.use.retry();
   const history = new WidgetHistory(manager, { retrySwap });
   const details = useWalletsStore.use.connectedWallets();
@@ -26,9 +30,13 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
   const loadingStatus = useAppStore().fetchStatus;
+  const resetLanguage = useLanguage().resetLanguage;
+  const notifications = useNotificationStore().getUnreadNotifications();
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  const value = {
+  const value: WidgetInfoContextInterface = {
+    isActiveTab,
+    setCurrentTabAsActive,
     history,
     wallets: {
       isLoading,
@@ -42,6 +50,10 @@ export function WidgetInfo(props: React.PropsWithChildren) {
       swappers,
       loadingStatus,
     },
+    resetLanguage,
+    notifications: {
+      list: notifications,
+    },
   };
 
   return (

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -2,9 +2,12 @@ import type { WidgetHistory } from './WidgetInfo.helpers';
 import type { FetchStatus } from '../../store/slices/data';
 import type { ConnectedWallet } from '../../store/wallets';
 import type { Wallet } from '../../types';
+import type { Notification } from '../../types/notification';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
 export interface WidgetInfoContextInterface {
+  isActiveTab: boolean;
+  setCurrentTabAsActive: () => void;
   history: WidgetHistory;
   wallets: {
     details: ConnectedWallet[];
@@ -18,4 +21,8 @@ export interface WidgetInfoContextInterface {
     swappers: SwapperMeta[];
     loadingStatus: FetchStatus;
   };
+  resetLanguage: () => void;
+  notifications: {
+    list: Notification[];
+  };
 }

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -17,7 +17,8 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
       API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
       BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
     });
-  }, [config]);
+  }, [config.apiKey, config.apiUrl]);
+
   return (
     <WidgetWallets config={config} onUpdateState={onUpdateState}>
       <QueueManager apiKey={config.apiKey}>

package/src/hooks/useLanguage.ts

@@ -9,18 +9,20 @@ interface UseLanguage {
   languages: LanguageItem[];
   defaultLanguage: Language;
   activeLanguage: Language;
-  changeLanguage: (language?: Language) => void;
+  changeLanguage: (language?: Language | null) => void;
+  resetLanguage: () => void;
 }
 
 export function useLanguage(): UseLanguage {
-  const { setLanguage, language } = useAppStore();
+  const { setLanguage, language, config } = useAppStore();
   const languages = LANGUAGES;
-  const defaultLanguage = DEFAULT_LANGUAGE;
+  const defaultLanguage = config?.language || DEFAULT_LANGUAGE;
 
   return {
-    activeLanguage: language,
+    activeLanguage: language || defaultLanguage,
     languages,
     defaultLanguage,
     changeLanguage: (language) => setLanguage(language || DEFAULT_LANGUAGE),
+    resetLanguage: () => setLanguage(null),
   };
 }

package/src/hooks/useSwapInput.ts

@@ -59,8 +59,9 @@ export function useSwapInput(): UseSwapInput {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
+    fetchStatus,
   } = useAppStore();
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
   const userSlippage = customSlippage ?? slippage;
@@ -148,6 +149,9 @@ export function useSwapInput(): UseSwapInput {
   );
 
   useEffect(() => {
+    if (fetchStatus !== 'success') {
+      return;
+    }
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
       resetState(false);
       cancelFetch();
@@ -175,6 +179,7 @@ export function useSwapInput(): UseSwapInput {
     });
     return cancelFetch;
   }, [
+    fetchStatus,
     inputAmount,
     fromToken?.symbol,
     fromToken?.address,

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,6 +1,6 @@
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
@@ -44,14 +44,7 @@ export function useSyncStoresWithConfig() {
     setInputAmount(config?.amount?.toString() || '');
   }, [config?.amount]);
 
-  /*
-   * We update quote tokens in two scenarios.
-   * If default values exist in widget config or search parameters exist in URL.
-   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
-   * Using useLayoutEffect causes widget config values to apply first.
-   * We may consider replacing this with a better solution in the future.
-   */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
@@ -100,14 +93,7 @@ export function useSyncStoresWithConfig() {
     }
   }, [toTokensConfig, toBlockchainsConfig]);
 
-  /*
-   * We update quote tokens in two scenarios.
-   * If default values exist in widget config or search parameters exist in URL.
-   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
-   * Using useLayoutEffect causes widget config values to apply first.
-   * We may consider replacing this with a better solution in the future.
-   */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain

package/src/hooks/useSyncUrlAndStore/index.ts

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

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.helpers.ts

@@ -0,0 +1,35 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+export function searchParamToToken(
+  tokens: Token[],
+  searchParam: string | null,
+  chain: BlockchainMeta | null
+): Token | null {
+  if (!chain) {
+    return null;
+  }
+  return (
+    tokens.find((token) => {
+      const symbolAndAddress = searchParam?.split('--');
+      if (symbolAndAddress?.length === 1) {
+        return (
+          token.symbol === symbolAndAddress[0] &&
+          token.address === null &&
+          token.blockchain === chain.name
+        );
+      }
+      return (
+        token.symbol === symbolAndAddress?.[0] &&
+        token.address === symbolAndAddress?.[1] &&
+        token.blockchain === chain.name
+      );
+    }) || null
+  );
+}
+
+export function tokenToSearchParam(token: Token | null): string | undefined {
+  if (token) {
+    return `${token.symbol}${token.address ? `--${token.address}` : ''}`;
+  }
+  return undefined;
+}

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -0,0 +1,135 @@
+import { useEffect } from 'react';
+import {
+  useInRouterContext,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
+
+import { SearchParams } from '../../constants/searchParams';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  searchParamToToken,
+  tokenToSearchParam,
+} from './useSyncUrlAndStore.helpers';
+
+export function useSyncUrlAndStore() {
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const {
+    fromBlockchain,
+    toBlockchain,
+    fromToken,
+    toToken,
+    inputAmount,
+    setFromBlockchain,
+    setToBlockchain,
+    setFromToken,
+    setToToken,
+    setInputAmount,
+  } = useQuoteStore();
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const isInRouterContext = useInRouterContext();
+
+  const getUrlSearchParams = () => {
+    const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
+    const fromBlockchain = searchParams.get(SearchParams.FROM_BLOCKCHAIN);
+    const fromToken = searchParams.get(SearchParams.FROM_TOKEN);
+    const toBlockchain = searchParams.get(SearchParams.TO_BLOCKCHAIN);
+    const toToken = searchParams.get(SearchParams.TO_TOKEN);
+    const autoConnect = searchParams.get(SearchParams.AUTO_CONNECT);
+
+    return {
+      fromAmount,
+      fromBlockchain,
+      fromToken,
+      toBlockchain,
+      toToken,
+      autoConnect,
+    };
+  };
+
+  const updateUrlSearchParams = (
+    searchParams: Record<string, string | undefined>
+  ) => {
+    for (const property in searchParams) {
+      if (!searchParams[property]) {
+        delete searchParams[property];
+      }
+    }
+    setSearchParams(searchParams as Record<string, string>, { replace: true });
+  };
+
+  useEffect(() => {
+    const { autoConnect } = getUrlSearchParams();
+    if (isInRouterContext && fetchMetaStatus === 'success') {
+      updateUrlSearchParams({
+        [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
+        [SearchParams.FROM_TOKEN]: tokenToSearchParam(fromToken),
+        [SearchParams.TO_BLOCKCHAIN]: toBlockchain?.name,
+        [SearchParams.TO_TOKEN]: tokenToSearchParam(toToken),
+        [SearchParams.FROM_AMOUNT]: inputAmount,
+        [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
+      });
+    }
+  }, [
+    location.pathname,
+    inputAmount,
+    fromBlockchain,
+    fromToken,
+    toBlockchain,
+    toToken,
+  ]);
+
+  useEffect(() => {
+    if (!isInRouterContext) {
+      return;
+    }
+    const searchParams = getUrlSearchParams();
+    if (searchParams.fromAmount) {
+      setInputAmount(searchParams.fromAmount);
+    }
+    if (fetchMetaStatus === 'success') {
+      const fromBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.fromBlockchain
+      );
+      const fromToken = searchParamToToken(
+        tokens,
+        searchParams.fromToken,
+        fromBlockchain ?? null
+      );
+      const toBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.toBlockchain
+      );
+      const toToken = searchParamToToken(
+        tokens,
+        searchParams.toToken,
+        toBlockchain ?? null
+      );
+      if (!!fromBlockchain) {
+        setFromBlockchain(fromBlockchain);
+        if (!!fromToken) {
+          setFromToken({
+            token: fromToken,
+            meta: {
+              blockchains: blockchains,
+              tokens: tokens,
+            },
+          });
+        }
+      }
+      if (!!toBlockchain) {
+        setToBlockchain(toBlockchain);
+        if (!!toToken) {
+          setToToken({
+            token: toToken,
+            meta: { blockchains: blockchains, tokens: tokens },
+          });
+        }
+      }
+    }
+  }, [fetchMetaStatus]);
+}

package/src/index.ts

@@ -9,7 +9,6 @@ import type {
   WidgetTheme,
 } from './types';
 import type {
-  EventSeverity,
   PendingSwapWithQueueID,
   Route,
   RouteEvent,
@@ -40,6 +39,7 @@ import type {
 import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
 import {
+  EventSeverity,
   MainEvents,
   RouteEventType,
   StepEventType,
@@ -115,7 +115,6 @@ export type {
   PendingSwapWithQueueID,
   PendingSwapStep,
   RouteExecutionEvents,
-  EventSeverity,
 };
 
 // Internal function and enum exports for Rango
@@ -125,4 +124,5 @@ export {
   WalletEvents,
   WalletTypes,
   PendingSwapNetworkStatus,
+  EventSeverity,
 };

package/src/libs/tabManager/index.ts

@@ -0,0 +1,2 @@
+export { TabManager } from './tabManager';
+export type { TabManagerInterface } from './tabManager.types';

package/src/libs/tabManager/tabManager.constants.ts

@@ -0,0 +1,3 @@
+export const TIMEOUT = 300;
+export const MAXIMUM_TAB_ID = 100_000;
+export const CHANNEL_NAME = 'rango-widget';