@rango-dev/widget-embedded 0.17.1-next.8 → 0.18.0

package/src/hooks/useTheme.ts

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { WidgetTheme } from '../types';
-
 import {
   createTheme,
   darkTheme as defaultDarkTheme,
@@ -8,7 +6,8 @@ import {
 } from '@rango-dev/ui';
 import { useEffect, useState } from 'react';
 
-import { useSettingsStore } from '../store/settings';
+import { useAppStore } from '../store/AppStore';
+import { type WidgetTheme } from '../types';
 import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_PRIMARY_RADIUS,
@@ -26,8 +25,8 @@ export function useTheme(props: WidgetTheme) {
   } = props;
 
   const [OSTheme, setOSTheme] = useState('light');
-  const theme = useSettingsStore.use.theme();
-  const setTheme = useSettingsStore.use.setTheme();
+
+  const { setTheme, theme } = useAppStore();
 
   const { dark, light } = customizedThemeTokens(colors);
 

package/src/index.ts

@@ -1,3 +1,5 @@
+import type { WidgetProps } from './containers/Widget';
+import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
   WidgetColors,
@@ -5,10 +7,12 @@ import type {
   WidgetConfig,
   WidgetTheme,
 } from './types';
-import type { WidgetProps } from './Widget';
 import type {
+  EventSeverity,
+  PendingSwapWithQueueID,
   Route,
   RouteEvent,
+  RouteExecutionEvents,
   RouteFailedEvent,
   RouteStartedEvent,
   RouteSucceededEvent,
@@ -27,7 +31,16 @@ import type {
   EventHandler as HandleWalletsUpdate,
   ProviderInterface,
 } from '@rango-dev/wallets-react';
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type {
+  WalletInfo,
+  WalletState,
+  WalletType,
+} from '@rango-dev/wallets-shared';
+import type {
+  PendingSwap,
+  PendingSwapNetworkStatus,
+  PendingSwapStep,
+} from 'rango-types';
 
 import {
   MainEvents,
@@ -37,10 +50,18 @@ import {
   StepExecutionEventStatus,
   useEvents as useWidgetEvents,
 } from '@rango-dev/queue-manager-rango-preset';
-import { useWallets } from '@rango-dev/wallets-react';
+import {
+  readAccountAddress,
+  useWallets,
+  Events as WalletEvents,
+} from '@rango-dev/wallets-react';
+import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
 
-import { WidgetWallets } from './Wallets';
-import { Widget } from './Widget';
+import { WidgetWallets } from './containers/Wallets';
+import { Widget } from './containers/Widget';
+import { useWidget } from './containers/WidgetInfo';
+import { WidgetProvider } from './containers/WidgetProvider';
+import { customizedThemeTokens } from './utils/ui';
 
 export type {
   WidgetConfig,
@@ -67,15 +88,42 @@ export type {
   StepApprovalTxSucceededEvent,
   StepOutputRevealedEvent,
   HandleWalletsUpdate,
+  ConnectedWallet,
 };
 export {
   Widget,
+  /**
+   * @deprecated Use `WidgetProvider` instead. This component will be removed in future versions.
+   */
   WidgetWallets,
+  WidgetProvider,
+  useWidget,
   useWallets,
   useWidgetEvents,
+  customizedThemeTokens,
   MainEvents,
   RouteEventType,
   StepEventType,
   StepExecutionEventStatus,
   StepExecutionBlockedEventStatus,
 };
+
+// Internal type exports for Rango
+export type {
+  WalletState,
+  WalletInfo,
+  PendingSwap,
+  PendingSwapWithQueueID,
+  PendingSwapStep,
+  RouteExecutionEvents,
+  EventSeverity,
+};
+
+// Internal function and enum exports for Rango
+export {
+  readAccountAddress,
+  Networks,
+  WalletEvents,
+  WalletTypes,
+  PendingSwapNetworkStatus,
+};

package/src/pages/ConfirmSwapPage.tsx

@@ -9,6 +9,7 @@ import { useManager } from '@rango-dev/queue-manager-react';
 import {
   Alert,
   Button,
+  css,
   Divider,
   IconButton,
   RefreshIcon,
@@ -18,7 +19,7 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 
@@ -30,6 +31,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
@@ -39,18 +41,9 @@ import { getContainer } from '../utils/common';
 const Container = styled('div', {
   position: 'relative',
   width: '100%',
-  '& .description': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingBottom: '$10',
-  },
-  '& .icon': {
-    width: '$24',
-    height: '$24',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+
+  '& .quote-update__alert': {
+    paddingTop: '$10',
   },
 });
 
@@ -58,16 +51,31 @@ const Buttons = styled('div', {
   width: '100%',
   display: 'flex',
   justifyContent: 'space-between',
-  '& .confirm-button': {
-    flexGrow: 1,
-    paddingRight: '$10',
-  },
   [`& ${IconButton}`]: {
     width: '$48',
     height: '$48',
   },
 });
 
+const confirmBtnStyles = css({
+  flexGrow: 1,
+  paddingRight: '$10',
+});
+
+const iconStyles = css({
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const descriptionStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
 export function ConfirmSwapPage() {
   //TODO: move component's logics to a custom hook
   const {
@@ -86,6 +94,8 @@ export function ConfirmSwapPage() {
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
+  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const { manager } = useManager();
   const {
     fetch: confirmSwap,
@@ -119,12 +129,11 @@ export function ConfirmSwapPage() {
           { id: confirmSwapResult.swap.requestId }
         );
         setSelectedSwap(confirmSwapResult.swap.requestId);
-        navigate(
-          '/' + navigationRoutes.swaps + `/${confirmSwapResult.swap.requestId}`,
-          {
-            replace: true,
-          }
-        );
+
+        const swap_url = `../${navigationRoutes.swaps}/${confirmSwapResult.swap.requestId}`;
+        navigate(swap_url, {
+          replace: true,
+        });
         setTimeout(() => {
           setInputAmount('');
         }, 0);
@@ -152,13 +161,23 @@ export function ConfirmSwapPage() {
       swap: null,
       warnings: null,
     });
-    confirmSwap({ selectedWallets })
+    confirmSwap({ selectedWallets, customDestination })
       .then((res) => {
         setConfirmSwapResult(res);
       })
       .catch((error) => console.error(error));
   };
 
+  useEffect(() => {
+    const disabledLiquiditySourceReset =
+      !!prevDisabledLiquiditySources.current.length &&
+      !disabledLiquiditySources.length;
+    if (disabledLiquiditySourceReset) {
+      void onRefresh();
+    }
+    prevDisabledLiquiditySources.current = disabledLiquiditySources;
+  }, [disabledLiquiditySources.length]);
+
   useEffect(() => {
     if (showWalletsOnInit) {
       cancelFetch();
@@ -238,12 +257,20 @@ export function ConfirmSwapPage() {
     connectedWallets.length,
   ]);
 
+  useLayoutEffect(() => {
+    if (!quote) {
+      navigate(`../`);
+    }
+  }, []);
+
   return (
     <Layout
       header={{
         title: i18n.t('Confirm Swap'),
-        onBack: () => navigate(-1),
-        hasConnectWallet: true,
+        onWallet: () => {
+          const wallets_url = `../${navigationRoutes.wallets}`;
+          navigate(wallets_url);
+        },
         suffix: (
           <Tooltip
             container={getContainer()}
@@ -252,7 +279,7 @@ export function ConfirmSwapPage() {
             <HeaderButton
               size="small"
               variant="ghost"
-              onClick={() => navigate('/' + navigationRoutes.settings)}>
+              onClick={() => navigate('../' + navigationRoutes.settings)}>
               <SettingsIcon size={18} color="black" />
             </HeaderButton>
           </Tooltip>
@@ -260,7 +287,7 @@ export function ConfirmSwapPage() {
       }}
       footer={
         <Buttons>
-          <div className="confirm-button">
+          <div className={confirmBtnStyles()}>
             <Button
               variant="contained"
               type="primary"
@@ -293,7 +320,7 @@ export function ConfirmSwapPage() {
       )}
 
       <Container>
-        <div className="description">
+        <div className={descriptionStyles()}>
           <Typography variant="title" size="small">
             {i18n.t('You get')}
           </Typography>
@@ -302,7 +329,7 @@ export function ConfirmSwapPage() {
             variant="ghost"
             disabled={fetchingConfirmationQuote}
             onClick={onRefresh}>
-            <div className="icon">
+            <div className={iconStyles()}>
               <RefreshIcon size={16} />
             </div>
           </Button>
@@ -314,7 +341,7 @@ export function ConfirmSwapPage() {
           </>
         )}
         {confirmSwapResult.warnings?.quoteUpdate && (
-          <>
+          <div className="quote-update__alert">
             <Alert
               variant="alarm"
               type="warning"
@@ -325,13 +352,13 @@ export function ConfirmSwapPage() {
                 )
               }
             />
-            <Divider size={12} />
-          </>
+          </div>
         )}
         <QuoteInfo
           quote={quote}
           type="swap-preview"
           expanded={true}
+          alertPosition="top"
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}
@@ -343,6 +370,7 @@ export function ConfirmSwapPage() {
             setShowQuoteWarningModal(false);
             await addNewSwap();
           }}
+          onChangeSettings={() => navigate('../' + navigationRoutes.settings)}
         />
       </Container>
     </Layout>

package/src/pages/HistoryPage.tsx

@@ -1,5 +1,4 @@
-import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
-import type { PendingSwapStep } from 'rango-types';
+import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -11,8 +10,6 @@ import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { SwapsGroup } from '../components/SwapsGroup';
 import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useUiStore } from '../store/ui';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
@@ -51,7 +48,6 @@ const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
 export function HistoryPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
   const { manager, state } = useManager();
   const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
   const [searchedFor, setSearchedFor] = useState<string>('');
@@ -78,7 +74,6 @@ export function HistoryPage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.swaps),
         title: i18n.t('History'),
       }}>
       <Container>
@@ -108,7 +103,7 @@ export function HistoryPage() {
               list={filteredList}
               onSwapClick={(requestId) => {
                 setSelectedSwap(requestId);
-                navigate(`${requestId}`, { replace: true });
+                navigate(requestId);
               }}
               groupBy={groupSwapsByDate}
               isLoading={loading}

package/src/pages/Home.tsx

@@ -9,8 +9,6 @@ import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
-  BALANCE_MAX_DECIMALS,
-  BALANCE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
@@ -24,23 +22,18 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { ButtonState } from '../types';
 import { numberToString } from '../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
-import {
-  canComputePriceImpact,
-  getOutputRatio,
-  getPercentageChange,
-  getSwapButtonState,
-  hasHighValueLoss,
-  hasLimitError,
-} from '../utils/swap';
-import { getBalanceFromWallet } from '../utils/wallets';
+import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
+import { formatBalance, isFetchingBalance } from '../utils/wallets';
 
 const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   overflowY: 'visible',
+  '& .quote__container': {
+    paddingTop: '$2',
+  },
 });
 
 const FromContainer = styled('div', {
@@ -78,16 +71,16 @@ export function Home() {
 
   const fetchMetaStatus = useAppStore().fetchStatus;
 
-  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { connectedWallets, getBalanceFor } = useWalletsStore();
   const setCurrentPage = useUiStore.use.setCurrentPage();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const layoutRef = useRef<HTMLDivElement>(null);
+  const fetchingBalance =
+    !!fromBlockchain &&
+    isFetchingBalance(connectedWallets, fromBlockchain.name);
 
   const needsToWarnEthOnPath = false;
 
-  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
-  const highValueLoss = hasHighValueLoss(inputUsdValue, outToInRatio);
-
   const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
     quote,
     inputAmount,
@@ -99,48 +92,26 @@ export function Home() {
     inputAmount,
     outputUsdValue
   );
-  const swapButtonState = getSwapButtonState(
+
+  const swapButtonState = getSwapButtonState({
     fetchMetaStatus,
-    connectedWallets,
     fetchingQuote,
+    inputAmount,
     quote,
-    hasLimitError(quote),
-    highValueLoss,
-    priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed,
+    anyWalletConnected: connectedWallets.length > 0,
+    error: quoteError,
+    warning: quoteWarning,
     needsToWarnEthOnPath,
-    inputAmount
-  );
+  });
 
-  const tokenBalance =
-    !!fromBlockchain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          BALANCE_MIN_DECIMALS,
-          BALANCE_MAX_DECIMALS
-        )
-      : '0';
+  const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
+
+  const fromTokenFormattedBalance =
+    formatBalance(fromTokenBalance)?.amount ?? '0';
 
   const tokenBalanceReal =
     !!fromBlockchain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.decimal
-        )
+      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
   useEffect(() => {
@@ -152,10 +123,8 @@ export function Home() {
   const percentageChange =
     !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
       ? null
-      : getPercentageChange(
-          inputUsdValue.toString(),
-          outputUsdValue.toString()
-        );
+      : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
+
   return (
     <Layout
       ref={layoutRef}
@@ -167,14 +136,13 @@ export function Home() {
           size="large"
           disabled={swapButtonState.disabled}
           prefix={
-            !swapButtonState.disabled &&
-            swapButtonState.hasWarning && <WarningIcon />
+            swapButtonState.action === 'confirm-warning' && <WarningIcon />
           }
           fullWidth
           onClick={() => {
-            if (swapButtonState.state === ButtonState.WAITFORCONNECTING) {
+            if (swapButtonState.action === 'connect-wallet') {
               navigate(navigationRoutes.wallets);
-            } else if (quoteWarning) {
+            } else if (swapButtonState.action === 'confirm-warning') {
               setShowQuoteWarningModal(true);
             } else {
               navigate(navigationRoutes.confirmSwap);
@@ -184,7 +152,10 @@ export function Home() {
         </Button>
       }
       header={{
-        hasConnectWallet: true,
+        onWallet: () => {
+          navigate(navigationRoutes.wallets);
+        },
+        hasBackButton: false,
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
@@ -200,11 +171,9 @@ export function Home() {
           <FromContainer>
             <SwapInput
               label={i18n.t('From')}
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-ignore
               mode="From"
               onInputChange={setInputAmount}
-              balance={tokenBalance}
+              balance={fromTokenFormattedBalance}
               chain={{
                 displayName: fromBlockchain?.displayName || '',
                 image: fromBlockchain?.logo || '',
@@ -213,7 +182,7 @@ export function Home() {
                 displayName: fromToken?.symbol || '',
                 image: fromToken?.image || '',
               }}
-              onClickToken={() => navigate('from-swap')}
+              onClickToken={() => navigate(navigationRoutes.fromSwap)}
               price={{
                 value: inputAmount,
                 usdValue: priceImpactInputCanNotBeComputed
@@ -229,8 +198,9 @@ export function Home() {
               }}
               disabled={fetchMetaStatus === 'failed'}
               loading={fetchMetaStatus === 'loading'}
+              loadingBalance={fetchingBalance}
               onSelectMaxBalance={() => {
-                if (tokenBalance !== '0') {
+                if (fromTokenFormattedBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
                 }
               }}
@@ -241,6 +211,7 @@ export function Home() {
             sharpBottomStyle={!!quote?.result || fetchingQuote}
             label={i18n.t('To')}
             mode="To"
+            fetchingQuote={fetchingQuote}
             chain={{
               displayName: toBlockchain?.displayName || '',
               image: toBlockchain?.logo || '',
@@ -272,27 +243,30 @@ export function Home() {
                 ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
             }}
-            onClickToken={() => navigate('to-swap')}
+            onClickToken={() => navigate(navigationRoutes.toSwap)}
             disabled={fetchMetaStatus === 'failed'}
             loading={fetchMetaStatus === 'loading'}
           />
         </InputsContainer>
-        <QuoteInfo
-          quote={quote}
-          loading={fetchingQuote}
-          error={quoteError}
-          warning={quoteWarning}
-          type="basic"
-          refetchQuote={fetchQuote}
-          showWarningModal={showQuoteWarningModal}
-          onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-          onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-          onConfirmWarningModal={() => {
-            setShowQuoteWarningModal(false);
-            setQuoteWarningsConfirmed(true);
-            navigate(navigationRoutes.confirmSwap);
-          }}
-        />
+        <div className="quote__container">
+          <QuoteInfo
+            quote={quote}
+            loading={fetchingQuote}
+            error={quoteError}
+            warning={quoteWarning}
+            type="basic"
+            refetchQuote={fetchQuote}
+            showWarningModal={showQuoteWarningModal}
+            onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+            onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+            onConfirmWarningModal={() => {
+              setShowQuoteWarningModal(false);
+              setQuoteWarningsConfirmed(true);
+              navigate(navigationRoutes.confirmSwap);
+            }}
+            onChangeSettings={() => navigate(navigationRoutes.settings)}
+          />
+        </div>
       </Container>
     </Layout>
   );

package/src/pages/LanguagePage.tsx

@@ -10,13 +10,9 @@ import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { useLanguage } from '../hooks/useLanguage';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export function LanguagePage() {
-  const { navigateBackFrom } = useNavigateBack();
-
   const { activeLanguage, changeLanguage, languages } = useLanguage();
 
   const languageList = languages.map((languageItem) => {
@@ -38,7 +34,6 @@ export function LanguagePage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
         title: i18n.t('Language'),
       }}>
       <SettingsContainer>