@rango-dev/widget-embedded 0.29.1-next.0 → 0.29.1-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.0",
+  "version": "0.29.1-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -27,10 +27,10 @@
     "@rango-dev/logging-core": "^0.4.0",
     "@rango-dev/provider-all": "^0.34.1-next.0",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.1",
     "@rango-dev/queue-manager-react": "^0.26.0",
     "@rango-dev/signer-solana": "^0.29.1-next.0",
-    "@rango-dev/ui": "^0.35.1-next.0",
+    "@rango-dev/ui": "^0.35.1-next.1",
     "@rango-dev/wallets-react": "^0.20.1-next.0",
     "@rango-dev/wallets-shared": "^0.34.1-next.0",
     "bignumber.js": "^9.1.1",

package/src/components/Layout/Layout.styles.ts

@@ -7,7 +7,7 @@ export const LayoutContainer = css({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
-  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
+  boxShadow: '$mainContainer',
 });
 
 export const Container = styled('div', {

package/src/components/NotificationContent/NotificationContent.tsx

@@ -14,7 +14,6 @@ import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-import { areTokensEqual } from '../../utils/wallets';
 
 import {
   ClearAllButton,
@@ -36,7 +35,7 @@ export function NotificationContent() {
 
   const notifications: Notification[] = getNotifications();
   const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
+  const { findToken } = useAppStore();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
@@ -69,17 +68,13 @@ export function NotificationContent() {
         <List>
           {sortedNotification.map((notificationItem, index) => {
             const { route, requestId, event } = notificationItem;
-            const fromToken = tokens.find((tokenItem) =>
-              areTokensEqual(tokenItem, route.from)
-            );
+            const fromToken = findToken(route.from);
 
             const fromBlockchain = blockchains.find(
               (blockchainItem) => blockchainItem.name === route.from.blockchain
             );
 
-            const toToken = tokens.find((tokenItem) =>
-              areTokensEqual(tokenItem, route.to)
-            );
+            const toToken = findToken(route.to);
 
             const toBlockchain = blockchains.find(
               (blockchainItem) => blockchainItem.name === route.to.blockchain

package/src/components/Quote/Quote.tsx

@@ -88,7 +88,7 @@ export function Quote(props: QuoteProps) {
     container: propContainer,
   } = props;
   const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
+  const { findToken } = useAppStore();
   const swappers = useAppStore().swappers();
   const { customSlippage, slippage } = useAppStore();
   const userSlippage = customSlippage || slippage;
@@ -303,7 +303,7 @@ export function Quote(props: QuoteProps) {
           ) : undefined,
         time: roundedSecondsToString(swap.estimatedTimeInSeconds),
         fee: numberToString(
-          getUsdFeeOfStep(swap, tokens),
+          getUsdFeeOfStep(swap, findToken),
           GAS_FEE_MIN_DECIMALS,
           GAS_FEE_MAX_DECIMALS
         ),
@@ -320,7 +320,7 @@ export function Quote(props: QuoteProps) {
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
   const totalTime = roundedSecondsToString(totalArrivalTime(quote?.swaps));
-  const totalFee = getTotalFeeInUsd(quote?.swaps ?? [], tokens);
+  const totalFee = getTotalFeeInUsd(quote?.swaps ?? [], findToken);
   const fee = numberToString(
     totalFee,
     GAS_FEE_MIN_DECIMALS,

package/src/components/Quotes/Quotes.tsx

@@ -39,7 +39,7 @@ export function Quotes(props: PropTypes) {
     error,
   } = useQuoteStore();
   const { slippage, customSlippage } = useAppStore();
-  const tokens = useAppStore().tokens();
+  const { findToken } = useAppStore();
   const container = propContainer || getContainer();
   const hasQuotes = !!quotes && quotes.results.length;
   const userSlippage = customSlippage ?? slippage;
@@ -56,7 +56,7 @@ export function Quotes(props: PropTypes) {
       fromToken,
       toToken,
       userSlippage,
-      tokens,
+      findToken,
     });
   };
   const showNoResultMessage =

package/src/components/SwapDetails/SwapDetails.tsx

@@ -47,7 +47,11 @@ import {
   roundedSecondsToString,
   totalArrivalTime,
 } from '../../utils/numbers';
-import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
+import {
+  createRetryQuote,
+  getPriceImpact,
+  getPriceImpactLevel,
+} from '../../utils/quote';
 import {
   getLastConvertedTokenInFailedSwap,
   getSwapMessages,
@@ -81,7 +85,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
   const blockchains = useAppStore().blockchains();
   const swappers = useAppStore().swappers();
-  const tokens = useAppStore().tokens();
+  const { findToken } = useAppStore();
   const retry = useQuoteStore.use.retry();
   const isActiveTab = useUiStore.use.isActiveTab();
   const navigate = useNavigate();
@@ -294,7 +298,8 @@ export function SwapDetails(props: SwapDetailsProps) {
             type="primary"
             size="large"
             onClick={() => {
-              retry(swap, { blockchains: blockchains, tokens: tokens });
+              const swapInput = createRetryQuote(swap, blockchains, findToken);
+              retry(swapInput);
               setTimeout(() => {
                 const home = '../../';
                 navigate(home);

package/src/containers/Wallets/Wallets.tsx

@@ -33,7 +33,7 @@ export const WidgetContext = createContext<WidgetContextInterface>({
 function Main(props: PropsWithChildren<PropTypes>) {
   const { updateConfig, updateSettings, fetch: fetchMeta } = useAppStore();
   const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
+  const { findToken } = useAppStore();
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
@@ -79,7 +79,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
           meta.isContractWallet
         );
         if (data.length) {
-          connectWallet(data, tokens);
+          connectWallet(data, findToken);
         }
       } else {
         disconnectWallet(type);

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

@@ -1,4 +1,5 @@
-import type { Meta } from '../../store/quote';
+import type { Meta, RetryQuote } from '../../store/quote';
+import type { FindToken } from '../../store/slices/data';
 import type { Manager } from '@rango-dev/queue-manager-core';
 import type { PendingSwap } from 'rango-types/lib';
 
@@ -10,9 +11,11 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 
 import { getPendingSwaps } from '../../utils/queue';
+import { createRetryQuote } from '../../utils/quote';
 
 interface WidgetHistoryActions {
-  retrySwap: (pendingSwap: PendingSwap, meta: Meta) => void;
+  retrySwap: (retryQuote: RetryQuote) => void;
+  findToken: FindToken;
 }
 
 export class WidgetHistory {
@@ -41,7 +44,13 @@ export class WidgetHistory {
   }
 
   public retry(swap: PendingSwap, meta: Meta) {
-    return this.actions.retrySwap(swap, meta);
+    const retryQuote = createRetryQuote(
+      swap,
+      meta.blockchains,
+      this.actions.findToken
+    );
+
+    return this.actions.retrySwap(retryQuote);
   }
 
   public cancel(id: string) {

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -21,7 +21,9 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
   const isActiveTab = useUiStore.use.isActiveTab();
   const retrySwap = useQuoteStore.use.retry();
-  const history = new WidgetHistory(manager, { retrySwap });
+  const { findToken } = useAppStore();
+
+  const history = new WidgetHistory(manager, { retrySwap, findToken });
   const details = useWalletsStore.use.connectedWallets();
   const isLoading = useWalletsStore.use.loading();
   const totalBalance = calculateWalletUsdValue(details);
@@ -42,7 +44,7 @@ export function WidgetInfo(props: React.PropsWithChildren) {
       isLoading,
       details,
       totalBalance,
-      refetch,
+      refetch: (accounts) => refetch(accounts, findToken),
     },
     meta: {
       blockchains,

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

@@ -1,4 +1,5 @@
 import type { ConfirmSwapFetchResult } from './useConfirmSwap.types';
+import type { FindToken } from '../../store/slices/data';
 import type {
   ConfirmSwapWarnings,
   QuoteErrorResponse,
@@ -87,9 +88,10 @@ export function generateWarnings(
   params: {
     fromToken: Token;
     toToken: Token;
-    meta: { blockchains: BlockchainMeta[]; tokens: Token[] };
+    meta: { blockchains: BlockchainMeta[] };
     selectedWallets: Wallet[];
     userSlippage: number;
+    findToken: FindToken;
   }
 ): ConfirmSwapWarnings {
   let quoteChanged = false;
@@ -105,7 +107,7 @@ export function generateWarnings(
   const quoteWarning = generateQuoteWarnings(currentQuote, {
     fromToken: params.fromToken,
     toToken: params.toToken,
-    tokens: params.meta.tokens,
+    findToken: params.findToken,
     userSlippage: params.userSlippage,
   });
 

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -32,6 +32,7 @@ export function useConfirmSwap(): ConfirmSwap {
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
+  const { findToken } = useAppStore();
 
   const userSlippage = customSlippage || slippage;
 
@@ -96,7 +97,8 @@ export function useConfirmSwap(): ConfirmSwap {
           {
             fromToken,
             toToken,
-            meta: { blockchains, tokens },
+            meta: { blockchains },
+            findToken,
             selectedWallets,
             userSlippage,
           }

package/src/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts

@@ -15,10 +15,10 @@ import { useNotificationStore } from '../../store/notification';
 import { useWalletsStore } from '../../store/wallets';
 
 export function useSubscribeToWidgetEvents() {
-  const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
+  const { findToken } = useAppStore();
   const widgetEvents = useEvents();
 
   useEffect(() => {
@@ -40,8 +40,8 @@ export function useSubscribeToWidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getWalletsDetails([fromAccount], tokens);
-        toAccount && getWalletsDetails([toAccount], tokens);
+        fromAccount && getWalletsDetails([fromAccount], findToken);
+        toAccount && getWalletsDetails([toAccount], findToken);
       }
 
       setNotification(event, route);

package/src/hooks/useSwapInput.ts

@@ -53,7 +53,6 @@ export function useSwapInput({
   } = useAppStore().config;
   const connectedWallets = useWalletsStore.use.connectedWallets();
 
-  const tokens = useAppStore().tokens();
   const {
     fromToken,
     toToken,
@@ -78,6 +77,7 @@ export function useSwapInput({
   const liquiditySources = useAppStore().getLiquiditySources();
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const excludeLiquiditySources = useAppStore().excludeLiquiditySources();
+  const { findToken } = useAppStore();
 
   const [loading, setLoading] = useState(true);
   const prevInputAmount = useRef(inputAmount);
@@ -153,7 +153,7 @@ export function useSwapInput({
               fromToken,
               toToken,
               userSlippage,
-              tokens,
+              findToken,
             });
           updateQuotePartialState('warning', quoteWarning);
         })

package/src/hooks/useSyncStoresWithConfig.ts

@@ -8,7 +8,6 @@ import {
   isBlockchainExcludedInConfig,
   isTokenExcludedInConfig,
 } from '../utils/configs';
-import { areTokensEqual } from '../utils/wallets';
 
 export function useSyncStoresWithConfig() {
   const {
@@ -28,6 +27,7 @@ export function useSyncStoresWithConfig() {
   const fetchMetaStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
+  const { findToken } = useAppStore();
 
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useAppStore();
@@ -51,9 +51,8 @@ export function useSyncStoresWithConfig() {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
       );
-      const token = tokens.find((t) =>
-        areTokensEqual(t, config?.from?.token || null)
-      );
+      const fromToken = config?.from?.token;
+      const token = fromToken && findToken(fromToken);
 
       if (chain || (!chain && prevConfigFromBlockchain.current)) {
         setFromBlockchain(chain ?? null);
@@ -101,9 +100,9 @@ export function useSyncStoresWithConfig() {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain
       );
-      const token = tokens.find((t) =>
-        areTokensEqual(t, config?.to?.token || null)
-      );
+
+      const toToken = config?.to?.token;
+      const token = toToken && findToken(toToken);
 
       if (chain || (!chain && prevConfigToBlockchain.current)) {
         setToBlockchain(chain ?? null);

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

@@ -1,30 +1,16 @@
-import type { BlockchainMeta, Token } from 'rango-sdk';
+import type { Asset, 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 convertTokenSearchParamToAsset(
+  searchParam: string,
+  chain: BlockchainMeta
+): Asset {
+  const symbolAndAddress = searchParam.split('--');
+
+  return {
+    blockchain: chain.name,
+    address: symbolAndAddress?.[1] || null,
+    symbol: symbolAndAddress[0],
+  };
 }
 
 export function tokenToSearchParam(token: Token | null): string | undefined {

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -10,7 +10,7 @@ import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 
 import {
-  searchParamToToken,
+  convertTokenSearchParamToAsset,
   tokenToSearchParam,
 } from './useSyncUrlAndStore.helpers';
 
@@ -36,7 +36,7 @@ export function useSyncUrlAndStore() {
   const { updateIframe, updateCampaignMode } = useAppStore();
   const campaignMode = useAppStore().isInCampaignMode();
   const liquiditySourcesParamsRef = useRef<string>();
-
+  const { findToken } = useAppStore();
   const getUrlSearchParams = () => {
     const utmQueryParams: Record<string, string> = {};
 
@@ -124,19 +124,26 @@ export function useSyncUrlAndStore() {
       const fromBlockchain = blockchains.find(
         (blockchain) => blockchain.name === searchParams.fromBlockchain
       );
-      const fromToken = searchParamToToken(
-        tokens,
-        searchParams.fromToken,
-        fromBlockchain ?? null
-      );
+
+      const fromToken =
+        searchParams.fromToken && fromBlockchain
+          ? findToken(
+              convertTokenSearchParamToAsset(
+                searchParams.fromToken,
+                fromBlockchain
+              )
+            )
+          : undefined;
       const toBlockchain = blockchains.find(
         (blockchain) => blockchain.name === searchParams.toBlockchain
       );
-      const toToken = searchParamToToken(
-        tokens,
-        searchParams.toToken,
-        toBlockchain ?? null
-      );
+
+      const toToken =
+        searchParams.toToken && toBlockchain
+          ? findToken(
+              convertTokenSearchParamToAsset(searchParams.toToken, toBlockchain)
+            )
+          : undefined;
 
       if (!!fromBlockchain) {
         setFromBlockchain(fromBlockchain);

package/src/hooks/useTheme.ts

@@ -30,6 +30,7 @@ export function useTheme(props: WidgetTheme) {
   const { dark, light } = customizedThemeTokens(colors);
 
   const baseTheme = createTheme({
+    shadows: props.shadows || {},
     radii: {
       primary: `${borderRadius}px`,
       secondary: `${secondaryBorderRadius}px`,

package/src/store/quote.ts

@@ -6,7 +6,6 @@ import type {
   PreferenceType,
   Token,
 } from 'rango-sdk';
-import type { PendingSwap } from 'rango-types';
 
 import BigNumber from 'bignumber.js';
 import { create } from 'zustand';
@@ -14,7 +13,7 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
-import { createRetryQuote, getQuoteToTokenUsdPrice } from '../utils/quote';
+import { getQuoteToTokenUsdPrice } from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
 
 import createSelectors from './selectors';
@@ -38,7 +37,13 @@ type SomeQuoteState = {
   error: QuoteError | null;
   warning: QuoteWarning | null;
 };
-
+export type RetryQuote = {
+  fromBlockchain: BlockchainMeta | null;
+  fromToken?: Token;
+  toBlockchain: BlockchainMeta | null;
+  toToken?: Token;
+  inputAmount: string;
+};
 export interface QuoteState {
   fromBlockchain: BlockchainMeta | null;
   toBlockchain: BlockchainMeta | null;
@@ -73,7 +78,7 @@ export interface QuoteState {
   ) => void;
   setInputAmount: (amount: string) => void;
   setSelectedQuote: (quote: SelectedQuote | null) => void;
-  retry: (pendingSwap: PendingSwap, meta: Meta) => void;
+  retry: (retryQuote: RetryQuote) => void;
   switchFromAndTo: () => void;
   setQuoteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
@@ -219,15 +224,15 @@ export const useQuoteStore = createSelectors(
           }),
         }));
       },
-      retry: (pendingSwap, meta) => {
-        const { tokens, blockchains } = meta;
+      retry: (retryQuote) => {
         const {
           fromBlockchain,
           fromToken,
           toBlockchain,
           toToken,
           inputAmount,
-        } = createRetryQuote(pendingSwap, blockchains, tokens);
+        } = retryQuote;
+
         set({
           fromBlockchain,
           fromToken,

package/src/store/selectors.ts

@@ -1,4 +1,4 @@
-import { StoreApi, UseBoundStore } from 'zustand';
+import type { StoreApi, UseBoundStore } from 'zustand';
 
 type State = object;
 
@@ -6,10 +6,12 @@ type WithSelectors<S> = S extends { getState: () => infer T }
   ? S & { use: { [K in keyof T]: () => T[K] } }
   : never;
 
-const createSelectors = <S extends UseBoundStore<StoreApi<State>>>(_store: S) => {
-  let store = _store as WithSelectors<typeof _store>;
+const createSelectors = <S extends UseBoundStore<StoreApi<State>>>(
+  _store: S
+) => {
+  const store = _store as WithSelectors<typeof _store>;
   store.use = {};
-  for (let k of Object.keys(store.getState())) {
+  for (const k of Object.keys(store.getState())) {
     (store.use as any)[k] = () => store((s) => s[k as keyof typeof s]);
   }
 

package/src/store/slices/data.test.ts

@@ -9,6 +9,7 @@ import {
   createToken,
   updateAppStoreConfig,
 } from '../../test-utils/fixtures';
+import { createTokenHash } from '../../utils/meta';
 import { createAppStore } from '../app';
 
 let appStoreState: AppStoreState;
@@ -48,7 +49,10 @@ beforeEach(() => {
 
   const initData = createInitialAppStore();
   initData._blockchainsMapByName.set(rangoBlockchain.name, rangoBlockchain);
-  customTokens.forEach((token) => initData._tokens.push(token));
+  customTokens.forEach((token) => {
+    const tokenHash = createTokenHash(token);
+    initData._tokensMapByTokenHash.set(tokenHash, token);
+  });
 
   const appStore = createAppStore();
   appStore.setState(initData);
@@ -149,10 +153,10 @@ describe('check sorting tokens is working correctly in app store', () => {
 
   test('put popular token with lowest blockchain sort at first', () => {
     const rangoToken = customTokens[0];
-    const rangoIndex = appStoreState._tokens.findIndex(
-      (tokenItem) => tokenItem.symbol === rangoToken.symbol
-    );
-    appStoreState._tokens[rangoIndex].isPopular = true;
+    const token = appStoreState.findToken(rangoToken);
+    if (token) {
+      token.isPopular = true;
+    }
     appStoreState._blockchainsMapByName.set(rangoToken.blockchain, {
       ...rangoBlockchain,
       sort: 0,