@rango-dev/widget-embedded 0.17.1-next.10 → 0.17.1-next.12

package/src/pages/ConfirmSwapPage.tsx

@@ -119,12 +119,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);
@@ -242,8 +241,10 @@ export function ConfirmSwapPage() {
     <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 +253,7 @@ export function ConfirmSwapPage() {
             <HeaderButton
               size="small"
               variant="ghost"
-              onClick={() => navigate('/' + navigationRoutes.settings)}>
+              onClick={() => navigate('../' + navigationRoutes.settings)}>
               <SettingsIcon size={18} color="black" />
             </HeaderButton>
           </Tooltip>

package/src/pages/HistoryPage.tsx

@@ -11,8 +11,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 +49,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 +75,6 @@ export function HistoryPage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.swaps),
         title: i18n.t('History'),
       }}>
       <Container>
@@ -108,7 +104,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

@@ -184,7 +184,10 @@ export function Home() {
         </Button>
       }
       header={{
-        hasConnectWallet: true,
+        onWallet: () => {
+          navigate(navigationRoutes.wallets);
+        },
+        hasBackButton: false,
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
@@ -213,7 +216,7 @@ export function Home() {
                 displayName: fromToken?.symbol || '',
                 image: fromToken?.image || '',
               }}
-              onClickToken={() => navigate('from-swap')}
+              onClickToken={() => navigate(navigationRoutes.fromSwap)}
               price={{
                 value: inputAmount,
                 usdValue: priceImpactInputCanNotBeComputed
@@ -272,7 +275,7 @@ export function Home() {
                 ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
             }}
-            onClickToken={() => navigate('to-swap')}
+            onClickToken={() => navigate(navigationRoutes.toSwap)}
             disabled={fetchMetaStatus === 'failed'}
             loading={fetchMetaStatus === 'loading'}
           />

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>

package/src/pages/LiquiditySourcePage.tsx

@@ -23,8 +23,6 @@ import {
   NotFoundContainer,
   SettingsContainer,
 } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
@@ -39,7 +37,6 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const swappers = useAppStore().swappers();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
-  const { navigateBackFrom } = useNavigateBack();
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
     getUniqueSwappersGroups(swappers);
 
@@ -102,7 +99,6 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
         title: i18n.t(sourceType),
         suffix: (
           <LiquiditySourceSuffix>

package/src/pages/SelectBlockchainPage.tsx

@@ -5,7 +5,6 @@ import React, { useState } from 'react';
 import { BlockchainList } from '../components/BlockchainList';
 import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
@@ -16,7 +15,7 @@ interface PropTypes {
 
 export function SelectBlockchainPage(props: PropTypes) {
   const { type } = props;
-  const { navigateBackFrom } = useNavigateBack();
+  const navigateBack = useNavigateBack();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const setToBlockchain = useQuoteStore.use.setToBlockchain();
@@ -26,14 +25,10 @@ export function SelectBlockchainPage(props: PropTypes) {
   const blockchains = useAppStore().blockchains({
     type: type,
   });
-  const routeKey = type === 'source' ? 'fromBlockchain' : 'toBlockchain';
 
   return (
     <Layout
       header={{
-        onBack: () => {
-          navigateBackFrom(navigationRoutes[routeKey]);
-        },
         title: i18n.t(`Select Blockchain`),
       }}>
       <Divider size={12} />
@@ -66,8 +61,7 @@ export function SelectBlockchainPage(props: PropTypes) {
           } else {
             setToBlockchain(blockchain);
           }
-
-          navigateBackFrom(navigationRoutes[routeKey]);
+          navigateBack();
         }}
       />
     </Layout>

package/src/pages/SelectSwapItemsPage.tsx

@@ -23,7 +23,7 @@ interface PropTypes {
 export function SelectSwapItemsPage(props: PropTypes) {
   const { type } = props;
   const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
+  const navigateBack = useNavigateBack();
   const {
     fromBlockchain,
     toBlockchain,
@@ -72,27 +72,13 @@ export function SelectSwapItemsPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        onBack: () =>
-          navigateBackFrom(
-            type === 'source'
-              ? navigationRoutes.fromSwap
-              : navigationRoutes.toSwap
-          ),
-        title: i18n.t('Swap {type}', {
-          type: type === 'source' ? 'from' : 'to',
-        }),
+        title: i18n.t('Swap {type}', { type }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}
         type={type == 'source' ? 'from' : 'to'}
         blockchain={type === 'source' ? fromBlockchain : toBlockchain}
-        onMoreClick={() =>
-          navigate(
-            type === 'source'
-              ? navigationRoutes.fromBlockchain
-              : navigationRoutes.toBlockchain
-          )
-        }
+        onMoreClick={() => navigate(navigationRoutes.blockchains)}
         onChange={(blockchain) => {
           updateBlockchain(blockchain);
         }}
@@ -123,7 +109,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
             updateBlockchain(tokenBlockchain);
           }
 
-          navigateBackFrom(navigationRoutes.fromSwap);
+          navigateBack();
         }}
       />
     </Layout>

package/src/pages/SettingsPage.tsx

@@ -18,7 +18,6 @@ import { SettingsContainer } from '../components/SettingsContainer';
 import { Slippage } from '../components/Slippage';
 import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useSettingsStore } from '../store/settings';
 import { getContainer } from '../utils/common';
@@ -29,7 +28,6 @@ export function SettingsPage() {
   const { theme } = useAppStore().config;
   const fetchStatus = useAppStore().fetchStatus;
   const swappers = useAppStore().swappers();
-  const { navigateBackFrom } = useNavigateBack();
 
   const infiniteApprove = useSettingsStore.use.infiniteApprove();
   const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
@@ -171,7 +169,6 @@ export function SettingsPage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
         title: i18n.t('Setting'),
       }}>
       <SettingsContainer>

package/src/pages/SwapDetailsPage.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 
 import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
@@ -15,7 +14,7 @@ export function SwapDetailsPage() {
   const loading = !state.loadedFromPersistor;
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
-  const { navigateBackFrom } = useNavigateBack();
+  const navigateBack = useNavigateBack();
   const { fetchStatus: fetchMetaStatus } = useAppStore();
 
   const showSkeleton = loading || fetchMetaStatus === 'loading';
@@ -36,8 +35,8 @@ export function SwapDetailsPage() {
   const onDelete = async () => {
     if (selectedSwap?.id) {
       try {
-        await manager?.deleteQueue(selectedSwap.id);
-        navigateBackFrom(navigationRoutes.swapDetails);
+        manager?.deleteQueue(selectedSwap.id);
+        navigateBack();
       } catch (e) {
         console.log(e);
       }

package/src/pages/ThemePage.tsx

@@ -13,8 +13,6 @@ import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useSettingsStore } from '../store/settings';
 
 type Theme = 'dark' | 'light' | 'auto';
@@ -26,7 +24,6 @@ enum Mode {
 }
 
 export function ThemePage() {
-  const { navigateBackFrom } = useNavigateBack();
   const theme = useSettingsStore.use.theme();
   const setTheme = useSettingsStore.use.setTheme();
 
@@ -72,7 +69,6 @@ export function ThemePage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
         title: i18n.t('Theme'),
       }}>
       <SettingsContainer>

package/src/pages/WalletsPage.tsx

@@ -6,8 +6,6 @@ import React, { Fragment, useState } from 'react';
 
 import { Layout } from '../components/Layout';
 import { WalletModal } from '../components/WalletModal';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { getContainer } from '../utils/common';
@@ -30,7 +28,6 @@ export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage() {
   const { config, fetchStatus: fetchMetaStatus } = useAppStore();
-  const { navigateBackFrom } = useNavigateBack();
   const [openModal, setOpenModal] = useState(false);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
@@ -64,7 +61,6 @@ export function WalletsPage() {
     <Layout
       header={{
         title: i18n.t('Connect Wallets'),
-        onBack: () => navigateBackFrom(navigationRoutes.wallets),
       }}>
       <Container>
         <Typography variant="title" size="xmedium" align="center">

package/src/utils/colors.ts

@@ -31,7 +31,7 @@ export const generateRangeColors = (name: string, color: string) => {
   const NUMBER_OF_COLORS = 10;
   const HALF_NUMBER_OF_COLORS = 5;
   const COLOR_SUFFIX = 100;
-  const AMT = 32;
+  const AMT = 25;
 
   let colors = { [name]: color };
   for (let i = 1; i < NUMBER_OF_COLORS; i++) {
@@ -60,6 +60,7 @@ export const generateRangeColors = (name: string, color: string) => {
       };
     }
   }
+
   return colors;
 };
 export const generateColors = (