@rango-dev/widget-embedded 0.20.1-next.20 → 0.20.1-next.22

package/src/constants/searchParams.ts

@@ -1,8 +1,8 @@
 export enum SearchParams {
-  'FROM_CHAIN' = 'fromBlockchain',
-  'FROM_TOKEN' = 'fromToken',
-  'TO_CHAIN' = 'toBlockchain',
-  'TO_TOKEN' = 'toToken',
-  'FROM_AMOUNT' = 'fromAmount',
-  'AUTO_CONNECT' = 'autoConnect',
+  FROM_BLOCKCHAIN = 'fromBlockchain',
+  FROM_TOKEN = 'fromToken',
+  TO_BLOCKCHAIN = 'toBlockchain',
+  TO_TOKEN = 'toToken',
+  FROM_AMOUNT = 'fromAmount',
+  AUTO_CONNECT = 'autoConnect',
 }

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/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

@@ -13,7 +13,6 @@ import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
 import React, { createContext, useEffect, useRef, useState } from 'react';
 
-import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
@@ -39,7 +38,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
-  useSyncStoresWithConfig();
 
   useEffect(() => {
     void fetchMeta().catch(console.log);

package/src/hooks/useSwapInput.ts

@@ -59,8 +59,9 @@ export function useSwapInput(): UseSwapInput {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
+    fetchStatus,
   } = useAppStore();
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
   const userSlippage = customSlippage ?? slippage;
@@ -148,6 +149,9 @@ export function useSwapInput(): UseSwapInput {
   );
 
   useEffect(() => {
+    if (fetchStatus !== 'success') {
+      return;
+    }
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
       resetState(false);
       cancelFetch();
@@ -175,6 +179,7 @@ export function useSwapInput(): UseSwapInput {
     });
     return cancelFetch;
   }, [
+    fetchStatus,
     inputAmount,
     fromToken?.symbol,
     fromToken?.address,

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,6 +1,6 @@
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
@@ -44,14 +44,7 @@ export function useSyncStoresWithConfig() {
     setInputAmount(config?.amount?.toString() || '');
   }, [config?.amount]);
 
-  /*
-   * We update quote tokens in two scenarios.
-   * If default values exist in widget config or search parameters exist in URL.
-   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
-   * Using useLayoutEffect causes widget config values to apply first.
-   * We may consider replacing this with a better solution in the future.
-   */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
@@ -100,14 +93,7 @@ export function useSyncStoresWithConfig() {
     }
   }, [toTokensConfig, toBlockchainsConfig]);
 
-  /*
-   * We update quote tokens in two scenarios.
-   * If default values exist in widget config or search parameters exist in URL.
-   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
-   * Using useLayoutEffect causes widget config values to apply first.
-   * We may consider replacing this with a better solution in the future.
-   */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain

package/src/hooks/useSyncUrlAndStore/index.ts

@@ -0,0 +1 @@
+export { useSyncUrlAndStore } from './useSyncUrlAndStore';

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.helpers.ts

@@ -0,0 +1,35 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+export function searchParamToToken(
+  tokens: Token[],
+  searchParam: string | null,
+  chain: BlockchainMeta | null
+): Token | null {
+  if (!chain) {
+    return null;
+  }
+  return (
+    tokens.find((token) => {
+      const symbolAndAddress = searchParam?.split('--');
+      if (symbolAndAddress?.length === 1) {
+        return (
+          token.symbol === symbolAndAddress[0] &&
+          token.address === null &&
+          token.blockchain === chain.name
+        );
+      }
+      return (
+        token.symbol === symbolAndAddress?.[0] &&
+        token.address === symbolAndAddress?.[1] &&
+        token.blockchain === chain.name
+      );
+    }) || null
+  );
+}
+
+export function tokenToSearchParam(token: Token | null): string | undefined {
+  if (token) {
+    return `${token.symbol}${token.address ? `--${token.address}` : ''}`;
+  }
+  return undefined;
+}

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -0,0 +1,135 @@
+import { useEffect } from 'react';
+import {
+  useInRouterContext,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
+
+import { SearchParams } from '../../constants/searchParams';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  searchParamToToken,
+  tokenToSearchParam,
+} from './useSyncUrlAndStore.helpers';
+
+export function useSyncUrlAndStore() {
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const {
+    fromBlockchain,
+    toBlockchain,
+    fromToken,
+    toToken,
+    inputAmount,
+    setFromBlockchain,
+    setToBlockchain,
+    setFromToken,
+    setToToken,
+    setInputAmount,
+  } = useQuoteStore();
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const isInRouterContext = useInRouterContext();
+
+  const getUrlSearchParams = () => {
+    const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
+    const fromBlockchain = searchParams.get(SearchParams.FROM_BLOCKCHAIN);
+    const fromToken = searchParams.get(SearchParams.FROM_TOKEN);
+    const toBlockchain = searchParams.get(SearchParams.TO_BLOCKCHAIN);
+    const toToken = searchParams.get(SearchParams.TO_TOKEN);
+    const autoConnect = searchParams.get(SearchParams.AUTO_CONNECT);
+
+    return {
+      fromAmount,
+      fromBlockchain,
+      fromToken,
+      toBlockchain,
+      toToken,
+      autoConnect,
+    };
+  };
+
+  const updateUrlSearchParams = (
+    searchParams: Record<string, string | undefined>
+  ) => {
+    for (const property in searchParams) {
+      if (!searchParams[property]) {
+        delete searchParams[property];
+      }
+    }
+    setSearchParams(searchParams as Record<string, string>, { replace: true });
+  };
+
+  useEffect(() => {
+    const { autoConnect } = getUrlSearchParams();
+    if (isInRouterContext && fetchMetaStatus === 'success') {
+      updateUrlSearchParams({
+        [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
+        [SearchParams.FROM_TOKEN]: tokenToSearchParam(fromToken),
+        [SearchParams.TO_BLOCKCHAIN]: toBlockchain?.name,
+        [SearchParams.TO_TOKEN]: tokenToSearchParam(toToken),
+        [SearchParams.FROM_AMOUNT]: inputAmount,
+        [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
+      });
+    }
+  }, [
+    location.pathname,
+    inputAmount,
+    fromBlockchain,
+    fromToken,
+    toBlockchain,
+    toToken,
+  ]);
+
+  useEffect(() => {
+    if (!isInRouterContext) {
+      return;
+    }
+    const searchParams = getUrlSearchParams();
+    if (searchParams.fromAmount) {
+      setInputAmount(searchParams.fromAmount);
+    }
+    if (fetchMetaStatus === 'success') {
+      const fromBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.fromBlockchain
+      );
+      const fromToken = searchParamToToken(
+        tokens,
+        searchParams.fromToken,
+        fromBlockchain ?? null
+      );
+      const toBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.toBlockchain
+      );
+      const toToken = searchParamToToken(
+        tokens,
+        searchParams.toToken,
+        toBlockchain ?? null
+      );
+      if (!!fromBlockchain) {
+        setFromBlockchain(fromBlockchain);
+        if (!!fromToken) {
+          setFromToken({
+            token: fromToken,
+            meta: {
+              blockchains: blockchains,
+              tokens: tokens,
+            },
+          });
+        }
+      }
+      if (!!toBlockchain) {
+        setToBlockchain(toBlockchain);
+        if (!!toToken) {
+          setToToken({
+            token: toToken,
+            meta: { blockchains: blockchains, tokens: tokens },
+          });
+        }
+      }
+    }
+  }, [fetchMetaStatus]);
+}

package/src/pages/ConfirmSwapPage.tsx

@@ -20,32 +20,24 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
 import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
 import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
+import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 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';
 import { QuoteWarningType } from '../types';
 import { getContainer } from '../utils/common';
-
-const Container = styled('div', {
-  position: 'relative',
-  width: '100%',
-
-  '& .quote-update__alert': {
-    paddingTop: '$10',
-  },
-});
+import { joinList } from '../utils/ui';
 
 const Buttons = styled('div', {
   width: '100%',
@@ -88,12 +80,12 @@ export function ConfirmSwapPage() {
     quoteWarningsConfirmed,
   } = useQuoteStore();
   const navigate = useNavigate();
+  const location = useLocation();
   const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
 
   const { connectedWallets } = useWalletsStore();
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
   const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const { manager } = useManager();
@@ -128,7 +120,6 @@ export function ConfirmSwapPage() {
           { swapDetails: confirmSwapResult.swap },
           { id: confirmSwapResult.swap.requestId }
         );
-        setSelectedSwap(confirmSwapResult.swap.requestId);
 
         const swap_url = `../${navigationRoutes.swaps}/${confirmSwapResult.swap.requestId}`;
         navigate(swap_url, {
@@ -259,10 +250,49 @@ export function ConfirmSwapPage() {
 
   useLayoutEffect(() => {
     if (!quote) {
-      navigate(`../`);
+      navigate(`../${location.search}`);
     }
   }, []);
 
+  const quoteWarning = confirmSwapResult.warnings?.quote ?? null;
+  const quoteError = confirmSwapResult.error;
+  const alerts = [];
+  if (dbErrorMessage) {
+    alerts.push(<Alert type="error" variant="alarm" title={dbErrorMessage} />);
+  }
+
+  if (confirmSwapResult.warnings?.quoteUpdate) {
+    alerts.push(
+      <Alert
+        variant="alarm"
+        type="warning"
+        title={
+          confirmSwapResult.warnings.quoteUpdate &&
+          getQuoteUpdateWarningMessage(confirmSwapResult.warnings.quoteUpdate)
+        }
+      />
+    );
+  }
+
+  if (quoteWarning || quoteError) {
+    alerts.push(
+      <QuoteWarningsAndErrors
+        warning={quoteWarning}
+        error={quoteError}
+        loading={fetchingConfirmationQuote}
+        refetchQuote={onRefresh}
+        showWarningModal={showQuoteWarningModal}
+        onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+        onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+        onConfirmWarningModal={async () => {
+          setShowQuoteWarningModal(false);
+          await addNewSwap();
+        }}
+        onChangeSettings={() => navigate(navigationRoutes.settings)}
+      />
+    );
+  }
+
   return (
     <Layout
       header={{
@@ -319,7 +349,7 @@ export function ConfirmSwapPage() {
         />
       )}
 
-      <Container>
+      <PageContainer>
         <div className={descriptionStyles()}>
           <Typography variant="title" size="small">
             {i18n.t('You get')}
@@ -336,45 +366,20 @@ export function ConfirmSwapPage() {
             />
           </div>
         </div>
-        {dbErrorMessage && (
-          <>
-            <Alert type="error" variant="alarm" title={dbErrorMessage} />
-            <Divider size={12} />
-          </>
-        )}
-        {confirmSwapResult.warnings?.quoteUpdate && (
-          <div className="quote-update__alert">
-            <Alert
-              variant="alarm"
-              type="warning"
-              title={
-                confirmSwapResult.warnings.quoteUpdate &&
-                getQuoteUpdateWarningMessage(
-                  confirmSwapResult.warnings.quoteUpdate
-                )
-              }
-            />
-          </div>
-        )}
+        <Divider size="12" />
+
+        {joinList(alerts, <Divider size={10} />)}
+        {alerts.length > 0 ? <Divider size={10} /> : null}
+
         <QuoteInfo
           quote={quote}
           type="swap-preview"
           expanded={true}
-          alertPosition="top"
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}
-          refetchQuote={onRefresh}
-          showWarningModal={showQuoteWarningModal}
-          onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-          onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-          onConfirmWarningModal={async () => {
-            setShowQuoteWarningModal(false);
-            await addNewSwap();
-          }}
-          onChangeSettings={() => navigate('../' + navigationRoutes.settings)}
         />
-      </Container>
+      </PageContainer>
     </Layout>
   );
 }