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

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -3,18 +3,17 @@ import type { PropTypes } from './QuoteInfo.types';
 import { Divider } from '@rango-dev/ui';
 import React from 'react';
 
-import { Quote, QuoteSkeleton } from '../../components/Quote';
+import { Quote } from '../../components/Quote';
+import { QuoteSkeleton } from '../../components/QuoteSkeleton';
 import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
-import {
-  TOKEN_AMOUNT_MAX_DECIMALS,
-  TOKEN_AMOUNT_MIN_DECIMALS,
-  USD_VALUE_MAX_DECIMALS,
-  USD_VALUE_MIN_DECIMALS,
-} from '../../constants/routing';
 import { useQuoteStore } from '../../store/quote';
-import { numberToString } from '../../utils/numbers';
+import { QuoteErrorType } from '../../types';
 
-import { QuoteContainer } from './QuoteInfo.styles';
+import {
+  PositionTopAlerts,
+  QuoteContainer,
+  SkeletonContainer,
+} from './QuoteInfo.styles';
 
 export function QuoteInfo(props: PropTypes) {
   const {
@@ -28,19 +27,46 @@ export function QuoteInfo(props: PropTypes) {
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
+    onChangeSettings,
     expanded = false,
+    alertPosition = 'bottom',
   } = props;
   const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
     useQuoteStore();
 
-  const showQuote = quote && quote.result && !loading;
+  const noResult =
+    error &&
+    (error.type === QuoteErrorType.NO_RESULT ||
+      error.type === QuoteErrorType.REQUEST_FAILED);
+
+  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>
-          <QuoteSkeleton type={type} expanded={expanded} />
+          <SkeletonContainer paddingTop={alertPosition === 'top'}>
+            <QuoteSkeleton type={type} expanded={expanded} />
+          </SkeletonContainer>
         </QuoteContainer>
       )}
+
+      {alertPosition === 'top' && (
+        <PositionTopAlerts>{quoteWarningsAndErrors}</PositionTopAlerts>
+      )}
       {showQuote ? (
         <QuoteContainer>
           <Quote
@@ -51,46 +77,22 @@ export function QuoteInfo(props: PropTypes) {
             expanded={expanded}
             recommended={true}
             input={{
-              value: numberToString(
-                inputAmount,
-                TOKEN_AMOUNT_MIN_DECIMALS,
-                TOKEN_AMOUNT_MAX_DECIMALS
-              ),
-              usdValue: numberToString(
-                inputUsdValue,
-                USD_VALUE_MIN_DECIMALS,
-                USD_VALUE_MAX_DECIMALS
-              ),
+              value: inputAmount,
+              usdValue: inputUsdValue?.toString() ?? '',
             }}
             output={{
-              value: numberToString(
-                outputAmount,
-                TOKEN_AMOUNT_MIN_DECIMALS,
-                TOKEN_AMOUNT_MAX_DECIMALS
-              ),
-              usdValue: numberToString(
-                outputUsdValue,
-                USD_VALUE_MIN_DECIMALS,
-                USD_VALUE_MAX_DECIMALS
-              ),
+              value: outputAmount?.toString() ?? '',
+              usdValue: outputUsdValue?.toString() ?? '',
             }}
           />
         </QuoteContainer>
       ) : null}
 
-      {!warning && !error && <Divider size={16} />}
-
-      {(warning || error) && (
-        <QuoteWarningsAndErrors
-          warning={warning}
-          error={error}
-          loading={loading}
-          refetchQuote={refetchQuote}
-          showWarningModal={showWarningModal}
-          onOpenWarningModal={onOpenWarningModal}
-          onCloseWarningModal={onCloseWarningModal}
-          onConfirmWarningModal={onConfirmWarningModal}
-        />
+      {alertPosition === 'bottom' && (
+        <>
+          {!warning && !error && <Divider size={16} />}
+          {quoteWarningsAndErrors}
+        </>
       )}
     </>
   );

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -8,10 +8,13 @@ export type PropTypes = {
   loading: boolean;
   error: QuoteError | null;
   warning: QuoteWarning | null;
+  autoScrollOnExpanding?: boolean;
   expanded?: boolean;
+  alertPosition?: 'top' | 'bottom';
   refetchQuote: () => void;
   showWarningModal: boolean;
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;
   onConfirmWarningModal: () => void;
+  onChangeSettings: () => void;
 };

package/src/{Wallets.tsx → containers/Wallets/Wallets.tsx}

@@ -1,5 +1,9 @@
-import type { WidgetConfig } from './types';
-import type { ProvidersOptions } from './utils/providers';
+import type {
+  OnConnectHandler,
+  PropTypes,
+  WidgetContextInterface,
+} from './Wallets.types';
+import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
 import type { Network } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
@@ -8,18 +12,14 @@ import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
 import React, { createContext, useEffect, useRef } from 'react';
 
-import { useWalletProviders } from './hooks/useWalletProviders';
-import { AppStoreProvider, useAppStore } from './store/AppStore';
-import { useWalletsStore } from './store/wallets';
+import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
+import { useWalletProviders } from '../../hooks/useWalletProviders';
+import { AppStoreProvider, useAppStore } from '../../store/AppStore';
+import { useWalletsStore } from '../../store/wallets';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,
-} from './utils/wallets';
-
-type OnConnectHandler = (key: string) => void;
-interface WidgetContextInterface {
-  onConnectWallet(handler: OnConnectHandler): void;
-}
+} from '../../utils/wallets';
 
 export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
@@ -27,25 +27,26 @@ export const WidgetContext = createContext<WidgetContextInterface>({
   },
 });
 
-function Main(
-  props: PropsWithChildren<{
-    providers: WidgetConfig['wallets'];
-    options?: ProvidersOptions;
-    onUpdateState?: EventHandler;
-    config: WidgetConfig;
-  }>
-) {
-  const updateConfig = useAppStore().updateConfig;
+function Main(props: PropsWithChildren<PropTypes>) {
+  const { updateConfig, updateSettings, fetch: fetchMeta } = useAppStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
-  const { providers } = useWalletProviders(props.providers, props?.options);
-  const disconnectWallet = useWalletsStore.use.disconnectWallet();
-  const connectWallet = useWalletsStore.use.connectWallet();
+  const walletOptions: ProvidersOptions = {
+    walletConnectProjectId: props.config?.walletConnectProjectId,
+  };
+  const { providers } = useWalletProviders(props.config.wallets, walletOptions);
+  const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
+  useSyncStoresWithConfig();
+
+  useEffect(() => {
+    void fetchMeta().catch(console.log);
+  }, []);
 
   useEffect(() => {
     if (props.config) {
       updateConfig(props.config);
+      updateSettings(props.config);
     }
   }, [props.config]);
 
@@ -117,14 +118,7 @@ function Main(
   );
 }
 
-export function WidgetWallets(
-  props: PropsWithChildren<{
-    providers: WidgetConfig['wallets'];
-    options?: ProvidersOptions;
-    onUpdateState?: EventHandler;
-    config: WidgetConfig;
-  }>
-) {
+export function WidgetWallets(props: PropsWithChildren<PropTypes>) {
   const { config, ...otherProps } = props;
   return (
     <AppStoreProvider config={config}>

package/src/containers/Wallets/Wallets.types.ts

@@ -0,0 +1,12 @@
+import type { WidgetConfig } from '../../types';
+import type { EventHandler } from '@rango-dev/wallets-react';
+
+export type OnConnectHandler = (key: string) => void;
+export interface WidgetContextInterface {
+  onConnectWallet(handler: OnConnectHandler): void;
+}
+
+export interface PropTypes {
+  onUpdateState?: EventHandler;
+  config: WidgetConfig;
+}

package/src/containers/Wallets/index.ts

@@ -0,0 +1 @@
+export { WidgetWallets, WidgetContext } from './Wallets';

package/src/containers/Widget/Widget.tsx

@@ -0,0 +1,19 @@
+import type { WidgetProps } from './Widget.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { DEFAULT_CONFIG } from '../../store/slices/config';
+import { Main } from '../App';
+import { WidgetProvider } from '../WidgetProvider';
+
+export function Widget(props: PropsWithChildren<WidgetProps>) {
+  if (!props.config?.externalWallets) {
+    return (
+      <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+        <Main />
+      </WidgetProvider>
+    );
+  }
+  return <Main />;
+}

package/src/containers/Widget/Widget.types.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from '../../types';
+
+export type WidgetProps = {
+  config?: WidgetConfig;
+};

package/src/containers/Widget/index.ts

@@ -0,0 +1,2 @@
+export { Widget } from './Widget';
+export type { WidgetProps } from './Widget.types';

package/src/containers/WidgetInfo/WidgetInfo.helpers.ts

@@ -0,0 +1,64 @@
+import type { Meta } from '../../store/quote';
+import type { Manager } from '@rango-dev/queue-manager-core';
+import type { PendingSwap } from 'rango-types/lib';
+
+import {
+  cancelSwap,
+  getCurrentBlockchainOfOrNull,
+  getCurrentStep,
+  getRelatedWalletOrNull,
+} from '@rango-dev/queue-manager-rango-preset';
+
+import { getPendingSwaps } from '../../utils/queue';
+
+interface WidgetHistoryActions {
+  retrySwap: (pendingSwap: PendingSwap, meta: Meta) => void;
+}
+
+export class WidgetHistory {
+  private manager: Manager | undefined;
+  private actions: WidgetHistoryActions;
+
+  constructor(manager: Manager | undefined, actions: WidgetHistoryActions) {
+    this.manager = manager;
+    this.actions = actions;
+  }
+
+  public getAllSwaps() {
+    return getPendingSwaps(this.manager);
+  }
+
+  public getCurrentStep(swap: PendingSwap) {
+    return this.getCurrentStepInfo(swap).step;
+  }
+
+  public getCurrentStepWallet(swap: PendingSwap) {
+    return this.getCurrentStepInfo(swap).wallet;
+  }
+
+  public getCurrentStepNetwork(swap: PendingSwap) {
+    return this.getCurrentStepInfo(swap).network;
+  }
+
+  public retry(swap: PendingSwap, meta: Meta) {
+    return this.actions.retrySwap(swap, meta);
+  }
+
+  public cancel(id: string) {
+    const queue = this.manager?.get(id);
+    if (queue) {
+      cancelSwap(queue);
+    }
+  }
+
+  private getCurrentStepInfo(swap: PendingSwap) {
+    const currentStep = getCurrentStep(swap);
+    return {
+      step: currentStep,
+      wallet: currentStep ? getRelatedWalletOrNull(swap, currentStep) : null,
+      network: currentStep
+        ? getCurrentBlockchainOfOrNull(swap, currentStep)
+        : null,
+    };
+  }
+}

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -0,0 +1,62 @@
+import type { WidgetInfoContextInterface } from './WidgetInfo.types';
+
+import { useManager } from '@rango-dev/queue-manager-react';
+import React, { createContext, useContext } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import { useWalletsStore } from '../../store/wallets';
+import { calculateWalletUsdValue } from '../../utils/wallets';
+
+import { WidgetHistory } from './WidgetInfo.helpers';
+
+export const WidgetInfoContext = createContext<
+  WidgetInfoContextInterface | undefined
+>(undefined);
+
+export function WidgetInfo(props: React.PropsWithChildren) {
+  const { manager } = useManager();
+  const retrySwap = useQuoteStore.use.retry();
+  const history = new WidgetHistory(manager, { retrySwap });
+  const details = useWalletsStore.use.connectedWallets();
+  const isLoading = useWalletsStore.use.loading();
+  const totalBalance = calculateWalletUsdValue(details);
+  const refetch = useWalletsStore.use.getWalletsDetails();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const swappers = useAppStore().swappers();
+  const loadingStatus = useAppStore().fetchStatus;
+
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const value = {
+    history,
+    wallets: {
+      isLoading,
+      details,
+      totalBalance,
+      refetch,
+    },
+    meta: {
+      blockchains,
+      tokens,
+      swappers,
+      loadingStatus,
+    },
+  };
+
+  return (
+    <WidgetInfoContext.Provider value={value}>
+      {props.children}
+    </WidgetInfoContext.Provider>
+  );
+}
+
+export function useWidget(): WidgetInfoContextInterface {
+  const context = useContext(WidgetInfoContext);
+  if (!context) {
+    throw new Error(
+      'useWidget can only be used within the WidgetProvider component'
+    );
+  }
+  return context;
+}

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -0,0 +1,21 @@
+import type { WidgetHistory } from './WidgetInfo.helpers';
+import type { FetchStatus } from '../../store/slices/data';
+import type { ConnectedWallet } from '../../store/wallets';
+import type { Wallet } from '../../types';
+import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
+
+export interface WidgetInfoContextInterface {
+  history: WidgetHistory;
+  wallets: {
+    details: ConnectedWallet[];
+    totalBalance: string;
+    isLoading: boolean;
+    refetch: (accounts: Wallet[], tokens: Token[]) => void;
+  };
+  meta: {
+    blockchains: BlockchainMeta[];
+    tokens: Token[];
+    swappers: SwapperMeta[];
+    loadingStatus: FetchStatus;
+  };
+}

package/src/containers/WidgetInfo/index.ts

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

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,28 @@
+import type { PropTypes } from './WidgetProvider.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { useMemo } from 'react';
+
+import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
+import QueueManager from '../../QueueManager';
+import { initConfig } from '../../utils/configs';
+import { WidgetWallets } from '../Wallets';
+import { WidgetInfo } from '../WidgetInfo';
+
+export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
+  const { onUpdateState, config } = props;
+
+  useMemo(() => {
+    initConfig({
+      API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
+      BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
+    });
+  }, [config]);
+  return (
+    <WidgetWallets config={config} onUpdateState={onUpdateState}>
+      <QueueManager apiKey={config.apiKey}>
+        <WidgetInfo>{props.children}</WidgetInfo>
+      </QueueManager>
+    </WidgetWallets>
+  );
+}

package/src/containers/WidgetProvider/WidgetProvider.types.ts

@@ -0,0 +1,7 @@
+import type { WidgetConfig } from '../../types';
+import type { EventHandler } from '@rango-dev/wallets-react';
+
+export type PropTypes = {
+  onUpdateState?: EventHandler;
+  config: WidgetConfig;
+};

package/src/containers/WidgetProvider/index.ts

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

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -1,12 +1,13 @@
 import type { ConfirmSwapFetchResult } from './useConfirmSwap.types';
 import type { ConfirmSwapWarnings, Wallet } from '../../types';
-import type { BestRouteResponse, Token } from 'rango-sdk';
+import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 
 import { errorMessages } from '../../constants/errors';
 import { QuoteErrorType, QuoteUpdateType } from '../../types';
 import { numberToString } from '../../utils/numbers';
 import {
   generateQuoteWarnings,
+  getPriceImpact,
   isNumberOfSwapsChanged,
   isQuoteChanged,
   isQuoteInternalCoinsUpdated,
@@ -14,10 +15,9 @@ import {
 } from '../../utils/quote';
 import {
   checkSlippageErrors,
-  getBalanceWarnings,
+  generateBalanceWarnings,
   getLimitErrorMessage,
   getMinRequiredSlippage,
-  getPercentageChange,
   getQuoteOutputAmount,
   hasLimitError,
   isOutputAmountChangedALot,
@@ -67,17 +67,20 @@ export function throwErrorIfResponseIsNotValid(response: BestRouteResponse) {
 }
 
 export function generateWarnings(
-  previousQuote: BestRouteResponse,
+  previousQuote: BestRouteResponse | undefined,
   currentQuote: BestRouteResponse,
   params: {
     fromToken: Token;
     toToken: Token;
-    tokens: Token[];
+    meta: { blockchains: BlockchainMeta[]; tokens: Token[] };
     selectedWallets: Wallet[];
     userSlippage: number;
   }
 ): ConfirmSwapWarnings {
-  const quoteChanged = isQuoteChanged(previousQuote, currentQuote);
+  let quoteChanged = false;
+  if (previousQuote) {
+    quoteChanged = isQuoteChanged(previousQuote, currentQuote);
+  }
   const output: ConfirmSwapWarnings = {
     quote: null,
     quoteUpdate: null,
@@ -87,7 +90,7 @@ export function generateWarnings(
   const quoteWarning = generateQuoteWarnings(currentQuote, {
     fromToken: params.fromToken,
     toToken: params.toToken,
-    tokens: params.tokens,
+    tokens: params.meta.tokens,
     userSlippage: params.userSlippage,
   });
 
@@ -95,13 +98,13 @@ export function generateWarnings(
     output.quote = quoteWarning;
   }
 
-  if (quoteChanged) {
+  if (previousQuote && quoteChanged) {
     if (isOutputAmountChangedALot(previousQuote, currentQuote)) {
       output.quoteUpdate = {
         type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
         newOutputAmount: numberToString(getQuoteOutputAmount(currentQuote)),
         percentageChange: numberToString(
-          getPercentageChange(
+          getPriceImpact(
             getQuoteOutputAmount(previousQuote) ?? '',
             getQuoteOutputAmount(currentQuote) ?? ''
           ),
@@ -124,9 +127,10 @@ export function generateWarnings(
     }
   }
 
-  const balanceWarnings = getBalanceWarnings(
+  const balanceWarnings = generateBalanceWarnings(
     currentQuote,
-    params.selectedWallets
+    params.selectedWallets,
+    params.meta.blockchains
   );
   const enoughBalance = balanceWarnings.length === 0;
 

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -7,9 +7,8 @@ import { useEffect } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { useSettingsStore } from '../../store/settings';
 import { useWalletsStore } from '../../store/wallets';
-import { QuoteErrorType } from '../../types';
+import { isFeatureEnabled } from '../../utils/settings';
 import { createQuoteRequestBody, getWalletsForNewSwap } from '../../utils/swap';
 import { useFetchQuote } from '../useFetchQuote';
 
@@ -25,7 +24,6 @@ export function useConfirmSwap(): ConfirmSwap {
     toToken,
     inputAmount,
     setQuote,
-    resetQuote,
     quote: initialQuote,
     customDestination: customDestinationFromStore,
     setQuoteWarningsConfirmed,
@@ -38,10 +36,12 @@ export function useConfirmSwap(): ConfirmSwap {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
-  } = useSettingsStore();
+  } = useAppStore();
   const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
+  const { features } = useAppStore().config;
+  const { enableNewLiquiditySources } = useAppStore().config;
 
   const userSlippage = customSlippage || slippage;
 
@@ -54,7 +54,7 @@ export function useConfirmSwap(): ConfirmSwap {
     const customDestination =
       params?.customDestination ?? customDestinationFromStore;
 
-    if (!fromToken || !toToken || !inputAmount || !initialQuote) {
+    if (!fromToken || !toToken || !inputAmount) {
       return {
         quote: null,
         swap: null,
@@ -69,15 +69,18 @@ export function useConfirmSwap(): ConfirmSwap {
       inputAmount,
       wallets: connectedWallets,
       selectedWallets,
+      excludeLiquiditySources: enableNewLiquiditySources,
       disabledLiquiditySources,
       slippage: userSlippage,
       affiliateRef,
       affiliatePercent,
       affiliateWallets,
-      initialQuote: initialQuote,
+      initialQuote: initialQuote ?? undefined,
       destination: customDestination,
     });
-
+    if (isFeatureEnabled('experimentalRoute', features)) {
+      requestBody.experimental = true;
+    }
     let currentQuote: BestRouteResponse;
     try {
       currentQuote = await fetchQuote(requestBody).then((response) =>
@@ -86,12 +89,6 @@ export function useConfirmSwap(): ConfirmSwap {
       setQuote(currentQuote);
     } catch (error: any) {
       const confirmSwapResult = handleQuoteErrors(error);
-      if (
-        confirmSwapResult.error?.type === QuoteErrorType.NO_RESULT ||
-        confirmSwapResult.error?.type === QuoteErrorType.REQUEST_FAILED
-      ) {
-        resetQuote();
-      }
       return confirmSwapResult;
     }
 
@@ -108,13 +105,17 @@ export function useConfirmSwap(): ConfirmSwap {
       { blockchains, tokens }
     );
 
-    const confirmSwapWarnings = generateWarnings(initialQuote, currentQuote, {
-      fromToken,
-      toToken,
-      tokens: tokens,
-      selectedWallets,
-      userSlippage,
-    });
+    const confirmSwapWarnings = generateWarnings(
+      initialQuote ?? undefined,
+      currentQuote,
+      {
+        fromToken,
+        toToken,
+        meta: { blockchains, tokens },
+        selectedWallets,
+        userSlippage,
+      }
+    );
 
     if (confirmSwapWarnings.quoteUpdate) {
       setQuoteWarningsConfirmed(false);

package/src/hooks/useConfirmSwap/useConfirmSwap.types.ts

@@ -1,5 +1,5 @@
 import type { ConfirmSwapWarnings, QuoteError, Wallet } from '../../types';
-import type { PendingSwap } from 'rango-types/lib';
+import type { PendingSwap } from 'rango-types';
 
 export type ConfirmSwapFetchResult = {
   swap: PendingSwap | null;