@rango-dev/widget-embedded 0.20.1-next.2 → 0.20.1-next.21

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

@@ -51,6 +51,7 @@ export const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   flexGrow: 1,
+  overflow: 'hidden',
 });
 
 export const Title = styled('div', {
@@ -68,6 +69,7 @@ export const List = styled('ul', {
   padding: 0,
   margin: 0,
   listStyle: 'none',
+
   '& li': {
     alignItems: 'none',
 

package/src/components/TokenList/TokenList.tsx

@@ -278,7 +278,7 @@ export function TokenList(props: PropTypes) {
       </Typography>
       <Divider size={4} />
       {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {fetchStatus === 'success' && <List>{renderList()}</List>}
+      {fetchStatus === 'success' && <List as="ul">{renderList()}</List>}
     </Container>
   );
 }

package/src/components/WidgetEvents.tsx

@@ -11,14 +11,12 @@ import { useEffect } from 'react';
 import { useAppStore } from '../store/AppStore';
 import { useNotificationStore } from '../store/notification';
 import { useWalletsStore } from '../store/wallets';
-import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
   const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
-  const setAsRead = useNotificationStore.use.setAsRead();
   const widgetEvents = useEvents();
 
   useEffect(() => {
@@ -43,18 +41,8 @@ export function WidgetEvents() {
         fromAccount && getWalletsDetails([fromAccount], tokens);
         toAccount && getWalletsDetails([toAccount], tokens);
       }
-      if (
-        (event.type === StepEventType.TX_EXECUTION_BLOCKED &&
-          validBlockedStatuses.includes(event.status)) ||
-        event.type === StepEventType.FAILED
-      ) {
-        setNotification(event, route);
-      } else if (
-        event.type === StepEventType.TX_EXECUTION ||
-        event.type === StepEventType.CHECK_STATUS
-      ) {
-        setAsRead(route.requestId);
-      }
+
+      setNotification(event, route);
     });
 
     return () => widgetEvents.all.clear();

package/src/constants/index.ts

@@ -1,3 +1,4 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
 export const RANGO_SWAP_BOX_ID = 'rango-swap-box';
+export const SCANNER_BASE_URL = 'https://scan.rango.exchange';

package/src/constants/quote.ts

@@ -0,0 +1,23 @@
+import type { SwapFee } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+
+export type NameOfFees =
+  | 'Swapper Fee'
+  | 'Affiliate Fee'
+  | 'Outbound network fee'
+  | 'Rango Fee'
+  | 'Network Fee';
+
+export const NAME_OF_FEES: Record<NameOfFees, string> = {
+  'Network Fee': i18n.t('Network Fee'),
+  'Swapper Fee': i18n.t('Protocol Fee'),
+  'Affiliate Fee': i18n.t('Affiliate Fee'),
+  'Outbound network fee': i18n.t('Outbound Fee'),
+  'Rango Fee': i18n.t('Rango Fee'),
+};
+
+export type FeesGroup = {
+  payable: { [key in NameOfFees]?: SwapFee[] };
+  nonePayable: { [key in NameOfFees]?: SwapFee[] };
+};

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

@@ -6,6 +6,8 @@ export const MainContainer = styled('div', {
   alignItems: 'center',
   fontFamily: '$widget',
   boxSizing: 'border-box',
+  textAlign: 'left',
+
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

package/src/containers/App/App.tsx

@@ -20,7 +20,7 @@ export function Main() {
 
   const { config } = useAppStore();
   const { activeTheme } = useTheme(config?.theme || {});
-  const { activeLanguage, changeLanguage } = useLanguage();
+  const { activeLanguage } = useLanguage();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
@@ -30,9 +30,6 @@ export function Main() {
     void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
-  useEffect(() => {
-    changeLanguage(config?.language);
-  }, [config?.language]);
 
   return (
     <I18nManager language={activeLanguage}>

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

@@ -3,6 +3,7 @@ import type {
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
+import type { Wallet } from '../../types/wallets';
 import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
 import type { Network } from '@rango-dev/wallets-shared';
@@ -10,7 +11,7 @@ import type { PropsWithChildren } from 'react';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useEffect, useRef } from 'react';
+import React, { createContext, useEffect, useRef, useState } from 'react';
 
 import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
 import { useWalletProviders } from '../../hooks/useWalletProviders';
@@ -34,6 +35,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: props.config?.walletConnectProjectId,
   };
+  const [accounts, setAccounts] = useState<Wallet[]>([]);
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
@@ -66,7 +68,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
           supportedChainNames,
           meta.isContractWallet
         );
-        connectWallet(data, tokens);
+        setAccounts(data);
       } else {
         disconnectWallet(type);
       }
@@ -99,6 +101,13 @@ function Main(props: PropsWithChildren<PropTypes>) {
       props.onUpdateState(type, event, value, state, meta);
     }
   };
+
+  useEffect(() => {
+    if (accounts.length) {
+      connectWallet(accounts, tokens);
+    }
+  }, [accounts, tokens]);
+
   return (
     <WidgetContext.Provider
       // eslint-disable-next-line react/jsx-no-constructed-context-values

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -3,7 +3,9 @@ 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 { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
@@ -26,6 +28,8 @@ 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 = {
@@ -42,6 +46,10 @@ export function WidgetInfo(props: React.PropsWithChildren) {
       swappers,
       loadingStatus,
     },
+    resetLanguage,
+    notifications: {
+      list: notifications,
+    },
   };
 
   return (

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

@@ -2,6 +2,7 @@ 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 {
@@ -18,4 +19,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

@@ -48,6 +48,7 @@ export function useSwapInput(): UseSwapInput {
     toToken,
     inputAmount,
     inputUsdValue,
+    quote,
     resetQuote,
     setQuote,
   } = useQuoteStore();
@@ -63,9 +64,9 @@ export function useSwapInput(): UseSwapInput {
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
   const userSlippage = customSlippage ?? slippage;
-  const hasTokensValue = !fromToken || !toToken;
+  const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
-    hasTokensValue ||
+    tokensValueInvalid ||
     tokensAreEqual(fromToken, toToken) ||
     !isPositiveNumber(inputAmount);
 
@@ -153,6 +154,9 @@ export function useSwapInput(): UseSwapInput {
       return;
     }
     if (shouldSkipRequest) {
+      if (quote) {
+        resetQuote();
+      }
       return;
     }
     resetQuote();

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,9 +1,13 @@
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import {
+  isBlockchainExcludedInConfig,
+  isTokenExcludedInConfig,
+} from '../utils/configs';
 import { tokensAreEqual } from '../utils/wallets';
 
 export function useSyncStoresWithConfig() {
@@ -27,22 +31,10 @@ export function useSyncStoresWithConfig() {
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useAppStore();
 
-  const fromTokensConfig = useMemo(
-    () => config?.from?.tokens,
-    [config?.from?.tokens]
-  );
-  const fromBlockchainsConfig = useMemo(
-    () => config?.from?.blockchains,
-    [config?.from?.blockchains]
-  );
-  const toTokensConfig = useMemo(
-    () => config?.to?.tokens,
-    [config?.to?.tokens]
-  );
-  const toBlockchainsConfig = useMemo(
-    () => config?.to?.blockchains,
-    [config?.to?.blockchains]
-  );
+  const fromTokensConfig = config?.from?.tokens;
+  const fromBlockchainsConfig = config?.from?.blockchains;
+  const toTokensConfig = config?.to?.tokens;
+  const toBlockchainsConfig = config?.to?.blockchains;
   const prevConfigFromToken = useRef<Asset | undefined>(undefined);
   const prevConfigToToken = useRef<Asset | undefined>(undefined);
   const prevConfigFromBlockchain = useRef<string | undefined>(undefined);
@@ -90,30 +82,21 @@ export function useSyncStoresWithConfig() {
   ]);
 
   useEffect(() => {
-    if (fromToken && fromTokensConfig) {
-      if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
-        setFromToken({ token: null });
-      }
+    if (isTokenExcludedInConfig(fromToken, fromTokensConfig)) {
+      setFromToken({ token: null });
     }
 
-    if (fromBlockchain && fromBlockchainsConfig) {
-      if (!fromBlockchainsConfig.includes(fromBlockchain.name)) {
-        setFromBlockchain(null);
-      }
+    if (isBlockchainExcludedInConfig(fromBlockchain, fromBlockchainsConfig)) {
+      setFromBlockchain(null);
     }
   }, [fromTokensConfig, fromBlockchainsConfig]);
 
   useEffect(() => {
-    if (toToken && toTokensConfig) {
-      if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
-        setToToken({ token: null });
-      }
+    if (isTokenExcludedInConfig(toToken, toTokensConfig)) {
+      setFromToken({ token: null });
     }
-
-    if (toBlockchain && toBlockchainsConfig) {
-      if (!toBlockchainsConfig.includes(toBlockchain.name)) {
-        setToBlockchain(null);
-      }
+    if (isBlockchainExcludedInConfig(toBlockchain, toBlockchainsConfig)) {
+      setToBlockchain(null);
     }
   }, [toTokensConfig, toBlockchainsConfig]);
 

package/src/index.ts

@@ -2,13 +2,13 @@ import type { WidgetProps } from './containers/Widget';
 import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
+  Tokens,
   WidgetColors,
   WidgetColorsKeys,
   WidgetConfig,
   WidgetTheme,
 } from './types';
 import type {
-  EventSeverity,
   PendingSwapWithQueueID,
   Route,
   RouteEvent,
@@ -39,6 +39,7 @@ import type {
 import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
 import {
+  EventSeverity,
   MainEvents,
   RouteEventType,
   StepEventType,
@@ -86,6 +87,7 @@ export type {
   StepOutputRevealedEvent,
   HandleWalletsUpdate,
   ConnectedWallet,
+  Tokens,
 };
 export {
   Widget,
@@ -113,7 +115,6 @@ export type {
   PendingSwapWithQueueID,
   PendingSwapStep,
   RouteExecutionEvents,
-  EventSeverity,
 };
 
 // Internal function and enum exports for Rango
@@ -123,4 +124,5 @@ export {
   WalletEvents,
   WalletTypes,
   PendingSwapNetworkStatus,
+  EventSeverity,
 };