@rango-dev/widget-embedded 0.48.0 → 0.48.1-next.0

package/src/pages/SelectBlockchainPage.tsx

@@ -1,3 +1,5 @@
+import type { BlockchainMeta } from 'rango-types';
+
 import { i18n } from '@lingui/core';
 import {
   Divider,
@@ -11,6 +13,7 @@ import { BlockchainList } from '../components/BlockchainList';
 import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useSwapMode } from '../hooks/useSwapMode';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 
@@ -24,10 +27,12 @@ export function SelectBlockchainPage(props: PropTypes) {
   const navigateBack = useNavigateBack();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
-  const setToBlockchain = useQuoteStore.use.setToBlockchain();
-  const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const { fetchStatus } = useAppStore();
+  const setToBlockchain = useQuoteStore().use.setToBlockchain();
+  const setFromBlockchain = useQuoteStore().use.setFromBlockchain();
+  const setToToken = useQuoteStore().use.setToToken();
+  const { fetchStatus, findNativeToken } = useAppStore();
   const navigate = useNavigate();
+  const { swapMode } = useSwapMode();
 
   const blockchains = useAppStore().blockchains({
     type,
@@ -36,6 +41,26 @@ export function SelectBlockchainPage(props: PropTypes) {
 
   const showCategory = !props.hideCategory && activeCategoriesCount !== 1;
 
+  const handleBlockchainChange = (blockchain: BlockchainMeta) => {
+    if (type === 'custom-token') {
+      navigate(`..?blockchain=${blockchain.name}`, { replace: true });
+    } else {
+      if (type === 'source') {
+        setFromBlockchain(blockchain);
+      } else {
+        if (swapMode === 'swap') {
+          setToBlockchain(blockchain);
+        } else {
+          const blockchainNativeToken = findNativeToken(blockchain);
+          if (blockchainNativeToken) {
+            setToToken({ token: blockchainNativeToken, meta: { blockchains } });
+          }
+        }
+      }
+      navigateBack();
+    }
+  };
+
   return (
     <Layout
       header={{
@@ -72,18 +97,7 @@ export function SelectBlockchainPage(props: PropTypes) {
           showTitle={type !== 'custom-token'}
           searchedFor={searchedFor}
           blockchainCategory={blockchainCategory}
-          onChange={(blockchain) => {
-            if (type === 'custom-token') {
-              navigate(`..?blockchain=${blockchain.name}`, { replace: true });
-            } else {
-              if (type === 'source') {
-                setFromBlockchain(blockchain);
-              } else {
-                setToBlockchain(blockchain);
-              }
-              navigateBack();
-            }
-          }}
+          onChange={handleBlockchainChange}
         />
       </PageContainer>
     </Layout>

package/src/pages/SelectSwapItemPage/SelectSwapItemsPage.tsx

@@ -35,7 +35,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setToToken,
     setFromBlockchain,
     setToBlockchain,
-  } = useQuoteStore();
+  } = useQuoteStore()();
   const { getBalanceFor } = useAppStore();
   const {
     fetch,

package/src/store/quote.ts

@@ -6,12 +6,14 @@ import type {
   PreferenceType,
   Token,
 } from 'rango-sdk';
+import type { StateCreator } from 'zustand';
 
 import BigNumber from 'bignumber.js';
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
+import { useSwapMode } from '../hooks/useSwapMode';
 import { eventEmitter } from '../services/eventEmitter';
 import {
   type QuoteError,
@@ -95,7 +97,7 @@ export interface QuoteState {
   sanitizeInputAmount: (amount: string) => void;
   setSelectedQuote: (quote: SelectedQuote | null) => void;
   retry: (retryQuote: RetryQuote) => void;
-  switchFromAndTo: () => void;
+  switchFromAndTo: (options?: { toToken?: Token }) => void;
   setQuoteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
   setCustomDestination: (address: string | null) => void;
@@ -103,276 +105,303 @@ export interface QuoteState {
   setQuoteWarningsConfirmed: (flag: boolean) => void;
 }
 
-export const useQuoteStore = createSelectors(
-  create<QuoteState>()(
-    subscribeWithSelector((set) => ({
-      fromBlockchain: null,
-      fromToken: null,
-      inputAmount: '',
+const initializer: StateCreator<
+  QuoteState,
+  [['zustand/subscribeWithSelector', never]],
+  []
+> = (
+  set: (
+    partial:
+      | QuoteState
+      | Partial<QuoteState>
+      | ((state: QuoteState) => QuoteState | Partial<QuoteState>),
+    replace?: boolean | undefined
+  ) => void
+) => ({
+  fromBlockchain: null,
+  fromToken: null,
+  inputAmount: '',
+  outputAmount: null,
+  inputUsdValue: new BigNumber(0),
+  outputUsdValue: new BigNumber(0),
+  toBlockchain: null,
+  toToken: null,
+  refetchQuote: true,
+  sortStrategy: 'SMART',
+  selectedQuote: null,
+  quotes: null,
+  error: null,
+  warning: null,
+  quoteWalletsConfirmed: false,
+  selectedWallets: [],
+  customDestination: null,
+  quoteWarningsConfirmed: false,
+  updateQuotePartialState: (key, value) =>
+    set((state) => ({
+      ...state,
+      [key]: value,
+    })),
+  setSelectedQuote: (quote) =>
+    set((state) => {
+      let outputAmount: BigNumber | null = null;
+      let outputUsdValue: BigNumber = ZERO;
+
+      let inputUsdValue = state.inputUsdValue;
+      if (!isPositiveNumber(state.inputAmount)) {
+        return {};
+      }
+      if (!!quote) {
+        outputAmount = !!quote?.outputAmount
+          ? new BigNumber(quote?.outputAmount)
+          : null;
+        inputUsdValue = getUsdInputFrom(quote) ?? ZERO;
+        outputUsdValue = getUsdOutputFrom(quote) ?? ZERO;
+      }
+      return {
+        selectedQuote: quote,
+        ...(!!quote && {
+          outputAmount,
+          outputUsdValue,
+          inputUsdValue,
+        }),
+      };
+    }),
+  resetAlerts: () =>
+    set(() => ({
+      error: null,
+      warning: null,
+    })),
+  resetQuote: () =>
+    set(() => ({
+      selectedQuote: null,
       outputAmount: null,
-      inputUsdValue: new BigNumber(0),
       outputUsdValue: new BigNumber(0),
-      toBlockchain: null,
-      toToken: null,
-      refetchQuote: true,
-      sortStrategy: 'SMART',
-      selectedQuote: null,
       quotes: null,
+      refetchQuote: true,
       error: null,
       warning: null,
-      quoteWalletsConfirmed: false,
-      selectedWallets: [],
-      customDestination: null,
-      quoteWarningsConfirmed: false,
-      updateQuotePartialState: (key, value) =>
-        set((state) => ({
-          ...state,
-          [key]: value,
-        })),
-      setSelectedQuote: (quote) =>
-        set((state) => {
-          let outputAmount: BigNumber | null = null;
-          let outputUsdValue: BigNumber = ZERO;
+    })),
+  setFromBlockchain: (chain) => {
+    set((state) => {
+      if (state.fromBlockchain?.name === chain?.name) {
+        return {};
+      }
 
-          let inputUsdValue = state.inputUsdValue;
-          if (!isPositiveNumber(state.inputAmount)) {
-            return {};
-          }
-          if (!!quote) {
-            outputAmount = !!quote?.outputAmount
-              ? new BigNumber(quote?.outputAmount)
-              : null;
-            inputUsdValue = getUsdInputFrom(quote) ?? ZERO;
-            outputUsdValue = getUsdOutputFrom(quote) ?? ZERO;
-          }
-          return {
-            selectedQuote: quote,
-            ...(!!quote && {
-              outputAmount,
-              outputUsdValue,
-              inputUsdValue,
-            }),
-          };
-        }),
-      resetAlerts: () =>
-        set(() => ({
-          error: null,
-          warning: null,
-        })),
-      resetQuote: () =>
-        set(() => ({
+      return {
+        fromBlockchain: chain,
+        inputUsdValue: new BigNumber(0),
+        ...(state.fromToken && {
           selectedQuote: null,
+          fromToken: null,
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
-          quotes: null,
-          refetchQuote: true,
-          error: null,
-          warning: null,
-        })),
-      setFromBlockchain: (chain) => {
-        set((state) => {
-          if (state.fromBlockchain?.name === chain?.name) {
-            return {};
-          }
-
-          return {
-            fromBlockchain: chain,
-            inputUsdValue: new BigNumber(0),
-            ...(state.fromToken && {
-              selectedQuote: null,
-              fromToken: null,
-              outputAmount: null,
-              outputUsdValue: new BigNumber(0),
-            }),
-          };
-        });
-      },
-      setFromToken: (params) => {
-        return set((state) => ({
-          fromToken: params.token,
-          ...(params.token && {
-            fromBlockchain:
-              params.meta.blockchains.find(
-                (blockchain) => blockchain.name === params.token.blockchain
-              ) ?? null,
-          }),
-          ...(!!state.inputAmount && {
-            inputUsdValue: getUsdValue(params.token, state.inputAmount),
-          }),
-        }));
-      },
-      setToBlockchain: (chain) => {
-        set((state) => {
-          if (state.toBlockchain?.name === chain?.name) {
-            return {};
-          }
-
-          return {
-            toBlockchain: chain,
-            ...(state.toToken && {
-              selectedQuote: null,
-              toToken: null,
-              outputAmount: null,
-              outputUsdValue: new BigNumber(0),
-            }),
-          };
-        });
-      },
-      setToToken: (params) => {
-        return set(() => ({
-          toToken: params.token,
-          ...(params.token && {
-            toBlockchain:
-              params.meta.blockchains.find(
-                (blockchain) => blockchain.name === params.token.blockchain
-              ) ?? null,
-          }),
-        }));
-      },
-      sanitizeInputAmount: (amount) => {
-        const sanitized = sanitizeInputAmount(amount);
-
-        set(() => ({
-          inputAmount: sanitized,
-        }));
-      },
-      setInputAmount: (amount) => {
-        let sanitized = amount;
-        if (!isZeroValue(amount)) {
-          // sanitize once a meaningful digit is entered (e.g. "00001" → "1")
-          sanitized = removeLeadingZeros(sanitized);
-          sanitized = ensureLeadingZeroForDecimal(sanitized);
-        }
-        set((state) => ({
-          inputAmount: sanitized,
-          ...(!sanitized && {
-            outputAmount: null,
-            outputUsdValue: new BigNumber(0),
-            selectedQuote: null,
-          }),
-          ...(!!state.fromToken && {
-            inputUsdValue: getUsdValue(state.fromToken, sanitized),
-          }),
-        }));
-      },
-      retry: (retryQuote) => {
-        const {
-          fromBlockchain,
-          fromToken,
-          toBlockchain,
-          toToken,
-          inputAmount,
-        } = retryQuote;
+        }),
+      };
+    });
+  },
+  setFromToken: (params) => {
+    return set((state) => ({
+      fromToken: params.token,
+      ...(params.token && {
+        fromBlockchain:
+          params.meta.blockchains.find(
+            (blockchain) => blockchain.name === params.token.blockchain
+          ) ?? null,
+      }),
+      ...(!!state.inputAmount && {
+        inputUsdValue: getUsdValue(params.token, state.inputAmount),
+      }),
+    }));
+  },
+  setToBlockchain: (chain) => {
+    set((state) => {
+      if (state.toBlockchain?.name === chain?.name) {
+        return {};
+      }
 
-        set({
-          fromBlockchain,
-          fromToken,
-          inputAmount,
-          outputAmount: null,
-          inputUsdValue: getUsdValue(fromToken ?? null, inputAmount),
-          outputUsdValue: new BigNumber(0),
-          toBlockchain,
-          toToken,
-          selectedQuote: null,
-        });
-      },
-      switchFromAndTo: () =>
-        set((state) => ({
-          fromBlockchain: state.toBlockchain,
-          fromToken: state.toToken,
-          toBlockchain: state.fromBlockchain,
-          toToken: state.fromToken,
-          inputAmount: state.outputAmount?.toString() || '',
-          inputUsdValue: state.toToken
-            ? getUsdValue(state.toToken, state.outputAmount?.toString() || '')
-            : new BigNumber(0),
-        })),
-      resetFromBlockchain: () =>
-        set(() => ({
-          fromToken: null,
-          fromBlockchain: null,
-          outputUsdValue: new BigNumber(0),
-          inputUsdValue: new BigNumber(0),
-          inputAmount: '',
-          outputAmount: null,
+      return {
+        toBlockchain: chain,
+        ...(state.toToken && {
           selectedQuote: null,
-        })),
-      resetToBlockchain: () =>
-        set(() => ({
           toToken: null,
-          toBlockchain: null,
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
-          selectedQuote: null,
-        })),
-      setQuoteWalletConfirmed: (flag) =>
-        set({
-          quoteWalletsConfirmed: flag,
-        }),
-      setSelectedWallets: (wallets) => set({ selectedWallets: wallets }),
-      setCustomDestination: (address) => set({ customDestination: address }),
-      resetQuoteWallets: () =>
-        set({
-          quoteWalletsConfirmed: false,
-          selectedWallets: [],
-          customDestination: null,
         }),
-      setQuoteWarningsConfirmed: (flag) =>
-        set({ quoteWarningsConfirmed: flag }),
-    }))
-  )
-);
+      };
+    });
+  },
+  setToToken: (params) => {
+    return set(() => ({
+      toToken: params.token,
+      ...(params.token && {
+        toBlockchain:
+          params.meta.blockchains.find(
+            (blockchain) => blockchain.name === params.token.blockchain
+          ) ?? null,
+      }),
+    }));
+  },
+  sanitizeInputAmount: (amount) => {
+    const sanitized = sanitizeInputAmount(amount);
 
-export const unsubscribeQuoteStore = useQuoteStore.subscribe(
-  (selectedState, previousSelectedState) => {
-    if (
-      selectedState.fromBlockchain !== previousSelectedState.fromBlockchain ||
-      selectedState.fromToken !== previousSelectedState.fromToken ||
-      selectedState.toBlockchain !== previousSelectedState.toBlockchain ||
-      selectedState.toToken !== previousSelectedState.toToken ||
-      selectedState.inputAmount !== previousSelectedState.inputAmount
-    ) {
-      // useEffect hook can not be used in Zustand subscribe
-      eventEmitter.emit(WidgetEvents.QuoteEvent, {
-        type: QuoteEventTypes.QUOTE_INPUT_UPDATE,
-        payload: {
-          fromBlockchain: selectedState.fromBlockchain?.name,
-          toBlockchain: selectedState.toBlockchain?.name,
-          fromToken: selectedState.fromToken
-            ? {
-                symbol: selectedState.fromToken.symbol,
-                name: selectedState.fromToken.name,
-                address: selectedState.fromToken.address,
-              }
-            : undefined,
-          toToken: selectedState.toToken
-            ? {
-                symbol: selectedState.toToken.symbol,
-                name: selectedState.toToken.name,
-                address: selectedState.toToken.address,
-              }
-            : undefined,
-          requestAmount: selectedState.inputAmount,
-        },
-      });
+    set(() => ({
+      inputAmount: sanitized,
+    }));
+  },
+  setInputAmount: (amount) => {
+    let sanitized = amount;
+    if (!isZeroValue(amount)) {
+      // sanitize once a meaningful digit is entered (e.g. "00001" → "1")
+      sanitized = removeLeadingZeros(sanitized);
+      sanitized = ensureLeadingZeroForDecimal(sanitized);
     }
+    set((state) => ({
+      inputAmount: sanitized,
+      ...(!sanitized && {
+        outputAmount: null,
+        outputUsdValue: new BigNumber(0),
+        selectedQuote: null,
+      }),
+      ...(!!state.fromToken && {
+        inputUsdValue: getUsdValue(state.fromToken, sanitized),
+      }),
+    }));
+  },
+  retry: (retryQuote) => {
+    const { fromBlockchain, fromToken, toBlockchain, toToken, inputAmount } =
+      retryQuote;
 
-    if (
-      selectedState.selectedQuote?.requestId !==
-      previousSelectedState.selectedQuote?.requestId
-    ) {
-      eventEmitter.emit(WidgetEvents.QuoteEvent, {
-        type: QuoteEventTypes.QUOTE_OUTPUT_UPDATE,
-        payload: selectedState.selectedQuote
+    set({
+      fromBlockchain,
+      fromToken,
+      inputAmount,
+      outputAmount: null,
+      inputUsdValue: getUsdValue(fromToken ?? null, inputAmount),
+      outputUsdValue: new BigNumber(0),
+      toBlockchain,
+      toToken,
+      selectedQuote: null,
+    });
+  },
+  switchFromAndTo: () =>
+    set((state) => ({
+      fromBlockchain: state.toBlockchain,
+      fromToken: state.toToken,
+      toBlockchain: state.fromBlockchain,
+      toToken: state.fromToken,
+      inputAmount: state.outputAmount?.toString() || '',
+      inputUsdValue: state.toToken
+        ? getUsdValue(state.toToken, state.outputAmount?.toString() || '')
+        : new BigNumber(0),
+    })),
+  resetFromBlockchain: () =>
+    set(() => ({
+      fromToken: null,
+      fromBlockchain: null,
+      outputUsdValue: new BigNumber(0),
+      inputUsdValue: new BigNumber(0),
+      inputAmount: '',
+      outputAmount: null,
+      selectedQuote: null,
+    })),
+  resetToBlockchain: () =>
+    set(() => ({
+      toToken: null,
+      toBlockchain: null,
+      outputAmount: null,
+      outputUsdValue: new BigNumber(0),
+      selectedQuote: null,
+    })),
+  setQuoteWalletConfirmed: (flag) =>
+    set({
+      quoteWalletsConfirmed: flag,
+    }),
+  setSelectedWallets: (wallets) => set({ selectedWallets: wallets }),
+  setCustomDestination: (address) => set({ customDestination: address }),
+  resetQuoteWallets: () =>
+    set({
+      quoteWalletsConfirmed: false,
+      selectedWallets: [],
+      customDestination: null,
+    }),
+  setQuoteWarningsConfirmed: (flag) => set({ quoteWarningsConfirmed: flag }),
+});
+
+const createSwapQuoteSelectors = create<QuoteState>()(
+  subscribeWithSelector(initializer)
+);
+const createRefuelQuoteSelectors = create<QuoteState>()(
+  subscribeWithSelector(initializer)
+);
+
+export const useSwapQuoteStore = createSelectors(createSwapQuoteSelectors);
+export const useRefuelQuoteStore = createSelectors(createRefuelQuoteSelectors);
+
+export function useQuoteStore() {
+  const { swapMode } = useSwapMode();
+  return createSelectors(
+    swapMode === 'refuel'
+      ? createRefuelQuoteSelectors
+      : createSwapQuoteSelectors
+  );
+}
+
+const subscribeCallback = (
+  selectedState: QuoteState,
+  previousSelectedState: QuoteState
+) => {
+  if (
+    selectedState.fromBlockchain !== previousSelectedState.fromBlockchain ||
+    selectedState.fromToken !== previousSelectedState.fromToken ||
+    selectedState.toBlockchain !== previousSelectedState.toBlockchain ||
+    selectedState.toToken !== previousSelectedState.toToken ||
+    selectedState.inputAmount !== previousSelectedState.inputAmount
+  ) {
+    // useEffect hook can not be used in Zustand subscribe
+    eventEmitter.emit(WidgetEvents.QuoteEvent, {
+      type: QuoteEventTypes.QUOTE_INPUT_UPDATE,
+      payload: {
+        fromBlockchain: selectedState.fromBlockchain?.name,
+        toBlockchain: selectedState.toBlockchain?.name,
+        fromToken: selectedState.fromToken
           ? {
-              requestAmount: selectedState.selectedQuote.requestAmount,
-              swaps: selectedState.selectedQuote.swaps,
-              outputAmount: selectedState.selectedQuote.outputAmount,
-              resultType: selectedState.selectedQuote.resultType,
-              tags: selectedState.selectedQuote.tags,
+              symbol: selectedState.fromToken.symbol,
+              name: selectedState.fromToken.name,
+              address: selectedState.fromToken.address,
             }
-          : null,
-      });
-    }
+          : undefined,
+        toToken: selectedState.toToken
+          ? {
+              symbol: selectedState.toToken.symbol,
+              name: selectedState.toToken.name,
+              address: selectedState.toToken.address,
+            }
+          : undefined,
+        requestAmount: selectedState.inputAmount,
+      },
+    });
   }
-);
+
+  if (
+    selectedState.selectedQuote?.requestId !==
+    previousSelectedState.selectedQuote?.requestId
+  ) {
+    eventEmitter.emit(WidgetEvents.QuoteEvent, {
+      type: QuoteEventTypes.QUOTE_OUTPUT_UPDATE,
+      payload: selectedState.selectedQuote
+        ? {
+            requestAmount: selectedState.selectedQuote.requestAmount,
+            swaps: selectedState.selectedQuote.swaps,
+            outputAmount: selectedState.selectedQuote.outputAmount,
+            resultType: selectedState.selectedQuote.resultType,
+            tags: selectedState.selectedQuote.tags,
+          }
+        : null,
+    });
+  }
+};
+
+export const unsubscribeSwapQuoteStore =
+  useSwapQuoteStore.subscribe(subscribeCallback);
+export const unsubscribeRefuelQuoteStore =
+  useRefuelQuoteStore.subscribe(subscribeCallback);

package/src/store/slices/data.ts

@@ -56,6 +56,7 @@ export interface DataSlice {
   swappers: () => SwapperMeta[];
   isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
   findToken: FindToken;
+  findNativeToken: (blockchain: BlockchainMeta) => Token | undefined;
   fetch: () => Promise<void>;
 }
 
@@ -275,6 +276,14 @@ export const createDataSlice: StateCreator<
     }
     return token;
   },
+  findNativeToken: (blockchain: BlockchainMeta) => {
+    const feeAsset = blockchain.feeAssets[0];
+    return get().findToken({
+      blockchain: blockchain.name,
+      address: feeAsset.address,
+      symbol: feeAsset.symbol,
+    });
+  },
   isTokenPinned: (token, type) => {
     const pinnedTokens =
       type === 'source'