@rango-dev/widget-embedded 0.12.1-next.19 → 0.12.1-next.20

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoB7C,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4EnD,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,qBA6a/C"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoB7C,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4EnD,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,qBAua/C"}

package/dist/pages/SelectSwapItemsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAS,MAAM,WAAW,CAAC;AAI9C,OAAO,KAA8B,MAAM,OAAO,CAAC;AAgBnD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAuInD"}
+{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAS,MAAM,WAAW,CAAC;AAI9C,OAAO,KAA8B,MAAM,OAAO,CAAC;AAgBnD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBA4InD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.19",
+  "version": "0.12.1-next.20",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

package/src/Widget.tsx

@@ -25,6 +25,11 @@ const MainContainer = styled('div', {
   justifyContent: 'center',
   alignItems: 'center',
   fontFamily: '$widget',
+  boxSizing: 'border-box',
+  '& *, *::before, *::after': {
+    boxSizing: 'inherit',
+    listStyleType: 'none',
+  },
 });
 
 export type WidgetProps = {

package/src/components/AppRouter.tsx

@@ -1,11 +1,41 @@
-import React, { Fragment, PropsWithChildren } from 'react';
-import { MemoryRouter, useInRouterContext } from 'react-router';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type { PropsWithChildren } from 'react';
+
 import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
-import { WalletType } from '@rango-dev/wallets-shared';
-import { UpdateUrl } from './UpdateUrl';
-import { useMetaStore } from '../store/meta';
 import { useWallets } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-types';
+import React, { useEffect, useRef } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { Home } from '../pages/Home';
+import { useMetaStore } from '../store/meta';
+
+import { UpdateUrl } from './UpdateUrl';
+
+function Route(props: 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 <> {props.children}</>;
+}
 
 export function AppRouter({
   children,
@@ -16,7 +46,7 @@ export function AppRouter({
   clearDisconnectedWallet: () => void;
 }) {
   const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Fragment : MemoryRouter;
+  const Router = isRouterInContext ? Route : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();
   const { canSwitchNetworkTo } = useWallets();
 

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -15,8 +15,10 @@ import {
   WalletIcon,
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { getConfirmSwapErrorMessage } from '../../constants/errors';
+import { navigationRoutes } from '../../constants/navigationRoutes';
 import { getRouteWarningMessage } from '../../constants/warnings';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
@@ -51,6 +53,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const {
     bestRoute,
     setSelectedWallets: selectRouteWallets,
+    routeWalletsConfirmed,
     setRouteWalletConfirmed,
     customDestination,
     setCustomDestination,
@@ -229,10 +232,16 @@ export function ConfirmWalletsModal(props: PropTypes) {
 
   const modalContainer = document.querySelector('#swap-box') as HTMLDivElement;
 
+  const navigate = useNavigate();
   return (
     <Modal
       open={open}
-      onClose={onClose}
+      onClose={() => {
+        if (!routeWalletsConfirmed) {
+          navigate(navigationRoutes.home, { replace: true });
+        }
+        onClose();
+      }}
       dismissible={!showMoreWalletFor}
       container={modalContainer}
       {...(!showMoreWalletFor && {

package/src/hooks/useNavigateBack.ts

@@ -1,10 +1,12 @@
 import { useInRouterContext, useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useBestRouteStore } from '../store/bestRoute';
 
 export function useNavigateBack() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
+  const routeWalletsConfirmed = useBestRouteStore.use.routeWalletsConfirmed();
 
   navigationRoutes;
 
@@ -20,6 +22,14 @@ export function useNavigateBack() {
       // eslint-disable-next-line @typescript-eslint/no-magic-numbers
       navigate(-1);
     } else {
+      if (
+        [navigationRoutes.settings, navigationRoutes.wallets].includes(
+          currentRoute
+        ) &&
+        routeWalletsConfirmed
+      ) {
+        return navigate('/' + navigationRoutes.confirmSwap, { replace: true });
+      }
       if (
         [
           navigationRoutes.fromSwap,

package/src/hooks/useSwapInput.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useBestRouteStore } from '../store/bestRoute';
 import { useSettingsStore } from '../store/settings';
@@ -41,6 +41,7 @@ export function useSwapInput(): UseSwapInput {
     disabledLiquiditySources,
   } = useSettingsStore();
   const [error, setError] = useState('');
+  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const userSlippage = customSlippage ?? slippage;
   const hasTokensValue = !fromToken || !toToken;
   const shouldSkipRequest =
@@ -101,9 +102,13 @@ export function useSwapInput(): UseSwapInput {
   }, [inputAmount, shouldSkipRequest]);
 
   useEffect(() => {
-    if (!shouldSkipRequest) {
+    const disabledLiquiditySourceReset =
+      !!prevDisabledLiquiditySources.current.length &&
+      !disabledLiquiditySources.length;
+    if (!shouldSkipRequest && disabledLiquiditySourceReset) {
       fetch();
     }
+    prevDisabledLiquiditySources.current = disabledLiquiditySources;
     return cancelFetch;
   }, [disabledLiquiditySources.length]);
 

package/src/pages/ConfirmSwapPage.tsx

@@ -250,12 +250,6 @@ export function ConfirmSwapPage(props: PropTypes) {
     }
   }, []);
 
-  useEffect(() => {
-    if (!showWallets && !routeWalletsConfirmed) {
-      navigate(navigationRoutes.home, { replace: true });
-    }
-  }, [showWallets, routeWalletsConfirmed]);
-
   useEffect(() => {
     const routeChanged =
       confirmSwapResult.warnings?.route?.type &&
@@ -421,7 +415,7 @@ export function ConfirmSwapPage(props: PropTypes) {
       {showWallets && (
         <ConfirmWalletsModal
           open={showWallets}
-          onClose={setShowWallets.bind(null, false)}
+          onClose={() => setShowWallets(false)}
           onCancel={cancelFetch}
           loading={fetchingConfirmationRoute}
           onCheckBalance={onConfirmSwap}

package/src/pages/HistoryPage.tsx

@@ -78,7 +78,7 @@ export function HistoryPage() {
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, '/' + navigationRoutes.swaps),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.swaps),
         title: i18n.t('History'),
       }}>
       <Container>

package/src/pages/SelectSwapItemsPage.tsx

@@ -100,7 +100,12 @@ export function SelectSwapItemsPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, navigationRoutes.home),
+        onBack: () =>
+          navigateBackFrom(
+            type === 'from'
+              ? navigationRoutes.fromSwap
+              : navigationRoutes.toSwap
+          ),
         title: i18n.t('Swap {type}', { type }),
       }}>
       <BlockchainsSection

package/src/utils/wallets.ts

@@ -135,19 +135,19 @@ export function prepareAccountsForWalletStore(
     /*
      * In some cases we can handle unknown network by checking its address
      * pattern and act on it.
-     * Example: showing our evm compatible netwrok when the uknown network is evem.
+     * Example: showing our evm compatible network when the unknown network is evm.
      * Otherwise, we stop executing this function.
      */
-    const isUknownAndEvmBased =
+    const isUnknownAndEvmBased =
       network === Networks.Unknown && isEvmAddress(address);
-    if (isUnknown && !isUknownAndEvmBased) {
+    if (isUnknown && !isUnknownAndEvmBased) {
       return;
     }
 
     const isEvmBasedChain = evmBasedChains.includes(network);
 
     // If it's an evm network, we will add the address to all the evm chains.
-    if (isEvmBasedChain || isUknownAndEvmBased) {
+    if (isEvmBasedChain || isUnknownAndEvmBased) {
       /*
        * all evm chains are not supported in wallets, so we are adding
        * only to those that are supported by wallet.
@@ -158,7 +158,7 @@ export function prepareAccountsForWalletStore(
 
       evmChainsSupportedByWallet.forEach((network) => {
         /*
-         * EVM addresses are not case sensetive.
+         * EVM addresses are not case sensitive.
          * Some wallets like Binance-chain return some letters in uppercase which produces bugs in our wallet state.
          */
         addAccount(network, address.toLowerCase());
@@ -311,7 +311,7 @@ export function resetConnectedWalletState(
 
 export const calculateWalletUsdValue = (connectedWallet: ConnectedWallet[]) => {
   const uniqueAccountAddresses = new Set<string | null>();
-  const uniqueBalane: ConnectedWallet[] = connectedWallet?.reduce(
+  const uniqueBalance: ConnectedWallet[] = connectedWallet?.reduce(
     (acc: ConnectedWallet[], current: ConnectedWallet) => {
       return acc.findIndex(
         (i) => i.address === current.address && i.chain === current.chain
@@ -323,7 +323,7 @@ export const calculateWalletUsdValue = (connectedWallet: ConnectedWallet[]) => {
     []
   );
 
-  const modifiedWalletBlockchains = uniqueBalane?.map((chain) => {
+  const modifiedWalletBlockchains = uniqueBalance?.map((chain) => {
     const modifiedWalletBlockchain: Blockchain = {
       name: chain.chain,
       accounts: [],
@@ -348,10 +348,10 @@ export const calculateWalletUsdValue = (connectedWallet: ConnectedWallet[]) => {
       ?.reduce((a, b) => a.plus(b), ZERO) || ZERO
   ).toString();
 
-  return numberWithThousandSeperator(total);
+  return numberWithThousandSeparator(total);
 };
 
-function numberWithThousandSeperator(number: string | number): string {
+function numberWithThousandSeparator(number: string | number): string {
   const parts = number.toString().split('.');
   parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   return parts.join('.');
@@ -470,9 +470,9 @@ export function getSortedTokens(
   connectedWallets: ConnectedWallet[],
   otherChainTokens: TokenWithBalance[]
 ): TokenWithBalance[] {
-  const fromChainEqueulsToToBlockchain =
+  const fromChainEqualsToToBlockchain =
     chain?.name === otherChainTokens[0]?.name;
-  if (fromChainEqueulsToToBlockchain) {
+  if (fromChainEqualsToToBlockchain) {
     return otherChainTokens;
   }
   const filteredTokens = tokens.filter(