@rango-dev/widget-embedded 0.1.13-next.4 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.13-next.4",
+  "version": "0.1.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/AppRouter.tsx

@@ -1,36 +1,11 @@
-import React, { PropsWithChildren, useEffect, useRef } from 'react';
-import {
-  MemoryRouter,
-  useInRouterContext,
-  useLocation,
-  useNavigate,
-} from 'react-router';
+import React, { Fragment, PropsWithChildren } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router';
 import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-types';
 import { UpdateUrl } from './UpdateUrl';
-import { Home } from '../pages/Home';
 import { useMetaStore } from '../store/meta';
 
-const Route: React.FC = ({ children }: PropsWithChildren) => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const ref = useRef(true);
-
-  useEffect(() => {
-    if (location.pathname === navigationRoutes.confirmSwap && ref.current)
-      navigate(navigationRoutes.home + location.search, { state: 'redirect' });
-
-    ref.current = false;
-  }, []);
-
-  if (location.pathname === navigationRoutes.confirmSwap && ref.current)
-    return <Home />;
-
-  return <> {children}</>;
-};
-
 export function AppRouter({
   children,
   ...props
@@ -40,7 +15,7 @@ export function AppRouter({
   clearDisconnectedWallet: () => void;
 }) {
   const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Route : MemoryRouter;
+  const Router = isRouterInContext ? Fragment : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();
 
   const evmChains = blockchains.filter(isEvmBlockchain);
@@ -55,7 +30,7 @@ export function AppRouter({
 
   return (
     <>
-      <Router {...props}>{children}</Router>
+      <Router>{children}</Router>
       {isRouterInContext && <UpdateUrl />}
     </>
   );

package/src/components/AppRoutes.tsx

@@ -23,11 +23,11 @@ export function AppRoutes(props: PropTypes) {
 
   return useRoutes([
     {
-      path: getAbsolutePath(navigationRoutes.home),
+      path: navigationRoutes.home,
       element: <Home />,
     },
     {
-      path: getAbsolutePath(navigationRoutes.fromChain),
+      path: navigationRoutes.fromChain,
       element: (
         <SelectChainPage
           type="from"
@@ -36,40 +36,40 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: getAbsolutePath(navigationRoutes.toChain),
+      path: navigationRoutes.toChain,
       element: (
         <SelectChainPage type="to" supportedChains={config?.to?.blockchains} />
       ),
     },
     {
-      path: getAbsolutePath(navigationRoutes.fromToken),
+      path: navigationRoutes.fromToken,
       element: (
         <SelectTokenPage type="from" supportedTokens={config?.from?.tokens} />
       ),
     },
     {
-      path: getAbsolutePath(navigationRoutes.toToken),
+      path: navigationRoutes.toToken,
       element: (
         <SelectTokenPage type="to" supportedTokens={config?.to?.tokens} />
       ),
     },
     {
-      path: getAbsolutePath(navigationRoutes.settings),
+      path: navigationRoutes.settings,
       element: <SettingsPage supportedSwappers={config?.liquiditySources} />,
     },
     {
-      path: getAbsolutePath(navigationRoutes.liquiditySources),
+      path: navigationRoutes.liquiditySources,
       element: (
         <LiquiditySourcePage supportedSwappers={config?.liquiditySources} />
       ),
     },
-    { path: getAbsolutePath(navigationRoutes.swaps), element: <HistoryPage /> },
+    { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
       path: navigationRoutes.swapDetails,
       element: <SwapDetailsPage />,
     },
     {
-      path: getAbsolutePath(navigationRoutes.wallets),
+      path: navigationRoutes.wallets,
       element: (
         <WalletsPage
           supportedWallets={config?.wallets}

package/src/components/ChangeSlippageButton.tsx

@@ -11,7 +11,7 @@ export function ChangeSlippageButton() {
       type="primary"
       variant="outlined"
       size="small"
-      onClick={() => navigate(navigationRoutes.settings)}
+      onClick={() => navigate('/' + navigationRoutes.settings)}
     >
       Change Slippage
     </Button>

package/src/components/TokenInfo.tsx

@@ -225,7 +225,7 @@ export function TokenInfo(props: PropTypes) {
           <Button
             className="selectors"
             onClick={() => {
-              navigate(`/${props.type.toLowerCase()}-chain`);
+              navigate(`${props.type.toLowerCase()}-chain`);
             }}
             variant="outlined"
             disabled={loadingStatus === 'failed'}
@@ -249,7 +249,7 @@ export function TokenInfo(props: PropTypes) {
           <Button
             className="selectors"
             onClick={() => {
-              navigate(`/${props.type.toLowerCase()}-token`);
+              navigate(`${props.type.toLowerCase()}-token`);
             }}
             variant="outlined"
             disabled={

package/src/components/UpdateUrl.tsx

@@ -45,37 +45,6 @@ export function UpdateUrl() {
   }, []);
 
   useEffect(() => {
-    let fromChainString = '',
-      fromTokenString = '',
-      toChainString = '',
-      toTokenString = '',
-      fromAmount = '';
-    if (
-      loadingStatus !== 'success' &&
-      location.pathname != navigationRoutes.confirmSwap
-    ) {
-      fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
-      fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
-      toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
-      toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
-      fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
-      setSearchParams(
-        {
-          ...(fromChainString && {
-            [SearchParams.FROM_CHAIN]: fromChainString,
-          }),
-          ...(fromTokenString && {
-            [SearchParams.FROM_TOKEN]: fromTokenString,
-          }),
-          ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
-          ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
-          ...(fromAmount && {
-            [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
-          }),
-        },
-        { replace: true }
-      );
-    }
     if (!firstRender.current) {
       let fromChainString = '',
         fromTokenString = '',
@@ -87,7 +56,8 @@ export function UpdateUrl() {
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
         toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
         toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
-        fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
+        fromAmount =
+          searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
       } else {
         if (location.state === 'redirect') return;
         fromChainString = fromChain?.name || '';
@@ -99,27 +69,26 @@ export function UpdateUrl() {
           (toToken?.symbol || '') +
           (toToken?.address ? `--${toToken?.address}` : '');
         fromAmount = inputAmount;
-
-        setSearchParams(
-          {
-            ...(fromChainString && {
-              [SearchParams.FROM_CHAIN]: fromChainString,
-            }),
-            ...(fromTokenString && {
-              [SearchParams.FROM_TOKEN]: fromTokenString,
-            }),
-            ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
-            ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
-            ...(fromAmount && {
-              [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
-            }),
-          },
-          { replace: true }
-        );
       }
+      setSearchParams(
+        {
+          ...(fromChainString && {
+            [SearchParams.FROM_CHAIN]: fromChainString,
+          }),
+          ...(fromTokenString && {
+            [SearchParams.FROM_TOKEN]: fromTokenString,
+          }),
+          ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
+          ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
+          ...(fromAmount && {
+            [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
+          }),
+        },
+        { replace: true }
+      );
     }
     firstRender.current = false;
-  }, [location.pathname, inputAmount]);
+  }, [location.pathname, inputAmount, fromChain, fromToken, toChain, toToken]);
 
   useEffect(() => {
     if (loadingStatus === 'success') {

package/src/components/warnings/BalanceErrors.tsx

@@ -36,8 +36,8 @@ export function BalanceErrors({ messages }: PropTypes) {
       </Typography>
       <Spacer size={8} direction="vertical" />
       <List showListStyle={showListStyle}>
-        {messages.map((warning) => (
-          <ListItem showListStyle={showListStyle}>
+        {messages.map((warning, index) => (
+          <ListItem showListStyle={showListStyle} key={index}>
             <Message variant="body2">{warning}</Message>
           </ListItem>
         ))}

package/src/constants/navigationRoutes.ts

@@ -1,13 +1,13 @@
 export const navigationRoutes = {
   home: '/',
-  fromChain: '/from-chain',
-  fromToken: '/from-token',
-  toChain: '/to-chain',
-  toToken: '/to-token',
-  settings: '/settings',
+  fromChain: 'from-chain',
+  fromToken: 'from-token',
+  toChain: 'to-chain',
+  toToken: 'to-token',
+  settings: 'settings',
   liquiditySources: '/settings/liquidity-sources',
-  swaps: '/swaps',
-  wallets: '/wallets',
-  confirmSwap: '/confirm-swap',
-  swapDetails: '/swaps/:requestId',
+  swaps: 'swaps',
+  wallets: 'wallets',
+  confirmSwap: 'confirm-swap',
+  swapDetails: 'swaps/:requestId',
 };

package/src/hooks/useNavigateBack.ts

@@ -9,7 +9,8 @@ export function useNavigateBack() {
 
   const navigateBackFrom = (currentRoute: string) => {
     if (currentRoute === navigationRoutes.swapDetails)
-      return navigate(navigationRoutes.swaps, { replace: true });
+      return navigate('/' + navigationRoutes.swaps, { replace: true });
+
     if (
       !isRouterInContext ||
       (window.history.state && window.history.state.idx > 0)
@@ -30,9 +31,7 @@ export function useNavigateBack() {
       )
         navigate(navigationRoutes.home, { replace: true });
       else if (currentRoute === navigationRoutes.liquiditySources)
-        navigate(navigationRoutes.settings, { replace: true });
-      else if (currentRoute === navigationRoutes.swapDetails)
-        navigate(navigationRoutes.swaps, { replace: true });
+        navigate('/' + navigationRoutes.settings, { replace: true });
     }
   };
 

package/src/lib.tsx

@@ -15,7 +15,12 @@ import { Layout } from './components/Layout';
 import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import { isEvmBlockchain } from 'rango-sdk';
-import { WidgetTheme, WidgetConfig, WidgetColors, BlockchainAndTokenConfig } from './types';
+import {
+  WidgetTheme,
+  WidgetConfig,
+  WidgetColors,
+  BlockchainAndTokenConfig,
+} from './types';
 import useSelectLanguage from './hooks/useSelectLanguage';
 import './i18n';
 import QueueManager from './QueueManager';
@@ -23,8 +28,13 @@ import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
 import { initConfig } from './utils/configs';
 
-
-export {WidgetConfig, WalletType, WidgetTheme, WidgetColors,  BlockchainAndTokenConfig}
+export {
+  WidgetConfig,
+  WalletType,
+  WidgetTheme,
+  WidgetColors,
+  BlockchainAndTokenConfig,
+};
 
 export type WidgetProps = {
   config?: WidgetConfig;
@@ -116,8 +126,7 @@ export const Widget: React.FC<WidgetProps> = ({ config }) => {
     >
       <div className={activeTheme}>
         <QueueManager>
-          <SwapContainer
-            fixedHeight={currentPage !== navigationRoutes.home}>
+          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
             <AppRouter
               lastConnectedWallet={lastConnectedWalletWithNetwork}
               disconnectedWallet={disconnectedWallet}

package/src/pages/ConfirmSwapPage.tsx

@@ -18,7 +18,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { TokenPreview } from '../components/TokenPreview';
 // @ts-ignore // TODO: fix error in tsc build
 import { t } from 'i18next';
-import { Spacer, ConfirmSwap } from '@rango-dev/ui';
+import { Spacer, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
 import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
@@ -39,6 +39,7 @@ export function ConfirmSwapPage() {
   const fetchingBestRouteError = useBestRouteStore.use.error();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const { blockchains, tokens } = useMetaStore.use.meta();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
@@ -55,7 +56,12 @@ export function ConfirmSwapPage() {
   );
 
   const { manager } = useManager();
-  const { loading, errors, warnings, confirmSwap } = useConfirmSwap();
+  const {
+    loading: fetchingConfirmedRoute,
+    errors,
+    warnings,
+    confirmSwap,
+  } = useConfirmSwap();
 
   const selectedSlippage = customSlippage || slippage;
 
@@ -109,7 +115,7 @@ export function ConfirmSwapPage() {
               { id: swap.requestId }
             );
             setSelectedSwap(swap.requestId);
-            navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
+            navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
               replace: true,
             });
             setTimeout(() => {
@@ -119,7 +125,7 @@ export function ConfirmSwapPage() {
         });
       }}
       onChange={(wallet) => setSelectedWallet(wallet)}
-      confirmDisabled={confirmDisabled}
+      confirmDisabled={loadingMetaStatus !== 'success' || confirmDisabled}
       handleConnectChain={(wallet) => handleConnectChain(wallet)}
       isExperimentalChain={(wallet) =>
         getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
@@ -140,7 +146,11 @@ export function ConfirmSwapPage() {
             usdValue={inputUsdValue}
             amount={fromAmount}
             label={t('From')}
-            loadingStatus={bestRouteloadingStatus}
+            loadingStatus={
+              loadingMetaStatus !== 'success'
+                ? loadingMetaStatus
+                : bestRouteloadingStatus
+            }
           />
           <Spacer size={12} direction="vertical" />
           <TokenPreview
@@ -155,7 +165,11 @@ export function ConfirmSwapPage() {
             usdValue={outputUsdValue}
             amount={toAmount}
             label={t('To')}
-            loadingStatus={bestRouteloadingStatus}
+            loadingStatus={
+              loadingMetaStatus !== 'success'
+                ? loadingMetaStatus
+                : bestRouteloadingStatus
+            }
             percentageChange={
               <PercentageChange
                 inputUsdValue={inputUsdValue}
@@ -171,13 +185,19 @@ export function ConfirmSwapPage() {
           totalFee={numberToString(totalFeeInUsd, 0, 2)}
         />
       }
-      loading={loading}
+      loading={fetchingConfirmedRoute}
       errors={ConfirmSwapErrors(errors)}
       warnings={ConfirmSwapWarnings(warnings)}
       extraMessages={
-        showHighSlippageWarning && (
-          <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
-        )
+        <>
+          {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
+          {loadingMetaStatus === 'failed' && showHighSlippageWarning && (
+            <Spacer direction="vertical" />
+          )}
+          {showHighSlippageWarning && (
+            <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
+          )}
+        </>
       }
       confirmButtonTitle={
         warnings.length > 0 || errors.length > 0

package/src/pages/HistoryPage.tsx

@@ -24,7 +24,7 @@ export function HistoryPage() {
       loading={loading}
       onSwapClick={(requestId) => {
         setSelectedSwap(requestId);
-        navigate(navigationRoutes.swaps + `/${requestId}`, { replace: true });
+        navigate(`${requestId}`, { replace: true });
       }}
       onBack={navigateBackFrom.bind(null, navigationRoutes.swaps)}
     />