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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.0",
+  "version": "0.29.1-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,14 +25,14 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.4.0",
-    "@rango-dev/provider-all": "^0.34.1-next.0",
+    "@rango-dev/provider-all": "^0.34.1-next.5",
     "@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.5",
     "@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/wallets-react": "^0.20.1-next.0",
-    "@rango-dev/wallets-shared": "^0.34.1-next.0",
+    "@rango-dev/signer-solana": "^0.29.1-next.1",
+    "@rango-dev/ui": "^0.35.1-next.6",
+    "@rango-dev/wallets-react": "^0.20.1-next.4",
+    "@rango-dev/wallets-shared": "^0.34.1-next.4",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

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

@@ -1,33 +1,13 @@
 import type { Notification } from '../../types/notification';
 
-import { i18n } from '@lingui/core';
-import { EventSeverity } from '@rango-dev/queue-manager-rango-preset';
-import {
-  ChainToken,
-  ChevronRightIcon,
-  Divider,
-  Typography,
-} from '@rango-dev/ui';
+import { Notifications } from '@rango-dev/ui';
 import React from 'react';
 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,
-  Container,
-  Header,
-  IconContainer,
-  Images,
-  List,
-  ListItem,
-} from './NotificationContent.styles';
-import { NotificationNotFound } from './NotificationNotFound';
-
-const MAX_NOTIFICATIONS_DISPLAYED = 4;
+import { getBlockchainImage } from '../../utils/meta';
 
 export function NotificationContent() {
   const navigate = useNavigate();
@@ -36,107 +16,21 @@ export function NotificationContent() {
 
   const notifications: Notification[] = getNotifications();
   const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
-  const sortedNotification = notifications
-    .sort((a, b) => b.creationTime - a.creationTime)
-    .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
+  const { findToken } = useAppStore();
 
-  const handleOnClick = (requestId: Notification['requestId']) => {
+  const onClickItem = (requestId: Notification['requestId']) => {
     navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 
   return (
-    <Container>
-      {sortedNotification.length > 0 && (
-        <>
-          <Header>
-            <Typography variant="label" size="medium">
-              {i18n.t('Notifications')}
-            </Typography>
-            <ClearAllButton
-              variant="ghost"
-              size="xsmall"
-              onClick={clearNotifications}>
-              <Typography variant="body" size="xsmall">
-                {i18n.t('Clear all')}
-              </Typography>
-            </ClearAllButton>
-          </Header>
-          <Divider direction="vertical" size={4} />
-        </>
-      )}
-      {sortedNotification.length ? (
-        <List>
-          {sortedNotification.map((notificationItem, index) => {
-            const { route, requestId, event } = notificationItem;
-            const fromToken = tokens.find((tokenItem) =>
-              areTokensEqual(tokenItem, route.from)
-            );
-
-            const fromBlockchain = blockchains.find(
-              (blockchainItem) => blockchainItem.name === route.from.blockchain
-            );
-
-            const toToken = tokens.find((tokenItem) =>
-              areTokensEqual(tokenItem, route.to)
-            );
-
-            const toBlockchain = blockchains.find(
-              (blockchainItem) => blockchainItem.name === route.to.blockchain
-            );
-
-            return (
-              <React.Fragment key={requestId}>
-                {index > 0 && <Divider size={4} />}
-                <ListItem
-                  onClick={() => handleOnClick(requestId)}
-                  actionRequired={
-                    event.messageSeverity === EventSeverity.WARNING
-                  }
-                  title={
-                    <Typography
-                      variant="body"
-                      size="small"
-                      color={
-                        event.messageSeverity === EventSeverity.WARNING
-                          ? '$foreground'
-                          : '$neutral700'
-                      }>
-                      {i18n.t(event.message)}
-                    </Typography>
-                  }
-                  id={requestId}
-                  start={
-                    <Images>
-                      <div className="from-chain-token">
-                        <ChainToken
-                          tokenImage={fromToken ? fromToken.image : ''}
-                          chainImage={fromBlockchain ? fromBlockchain.logo : ''}
-                          size="small"
-                        />
-                      </div>
-                      <div className="to-chain-token">
-                        <ChainToken
-                          tokenImage={toToken ? toToken.image : ''}
-                          chainImage={toBlockchain ? toBlockchain.logo : ''}
-                          size="small"
-                        />
-                      </div>
-                    </Images>
-                  }
-                  end={
-                    <IconContainer>
-                      <ChevronRightIcon size={12} color="gray" />
-                    </IconContainer>
-                  }
-                />
-              </React.Fragment>
-            );
-          })}
-        </List>
-      ) : (
-        <NotificationNotFound />
-      )}
-    </Container>
+    <Notifications
+      list={notifications}
+      getBlockchainImage={(blockchain) =>
+        getBlockchainImage(blockchain, blockchains) ?? ''
+      }
+      getTokenImage={(token) => findToken(token)?.image ?? ''}
+      onClickItem={onClickItem}
+      onClearAll={clearNotifications}
+    />
   );
 }

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/components/WalletNamespacesModal/WalletNamespacesModal.tsx

@@ -1,4 +1,5 @@
 import type { PropTypes } from './WalletNamespacesModal.types';
+import type { Namespace } from '@rango-dev/wallets-shared';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
@@ -11,7 +12,7 @@ import {
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import { Namespace } from '@rango-dev/wallets-shared';
+import { namespaceMainBlockchain } from '@rango-dev/wallets-shared';
 import React, { useMemo, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
@@ -25,15 +26,6 @@ import {
 
 import { NamespaceList } from './WalletNamespacesModal.styles';
 
-export const namespaceMainBlockchain: Record<Namespace, string> = {
-  [Namespace.Evm]: 'ETH',
-  [Namespace.Solana]: 'SOLANA',
-  [Namespace.Cosmos]: 'COSMOS',
-  [Namespace.Utxo]: 'BTC',
-  [Namespace.Starknet]: 'STARKNET',
-  [Namespace.Tron]: 'TRON',
-};
-
 const getBlockchainLogo = (
   blockchains: BlockchainMeta[],
   blockchainName: string

package/src/containers/Wallets/Wallets.tsx

@@ -33,11 +33,11 @@ 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 = {
-    walletConnectProjectId: props.config?.walletConnectProjectId,
+    walletConnectProjectId: config?.walletConnectProjectId,
     walletConnectListedDesktopWalletLink:
       props.config.__UNSTABLE_OR_INTERNAL__
         ?.walletConnectListedDesktopWalletLink,
@@ -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);
@@ -32,6 +34,7 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const loadingStatus = useAppStore().fetchStatus;
   const resetLanguage = useLanguage().resetLanguage;
   const notifications = useNotificationStore().getNotifications();
+  const clearNotifications = useNotificationStore().clearNotifications;
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value: WidgetInfoContextInterface = {
@@ -42,17 +45,19 @@ export function WidgetInfo(props: React.PropsWithChildren) {
       isLoading,
       details,
       totalBalance,
-      refetch,
+      refetch: (accounts) => refetch(accounts, findToken),
     },
     meta: {
       blockchains,
       tokens,
       swappers,
       loadingStatus,
+      findToken,
     },
     resetLanguage,
     notifications: {
       list: notifications,
+      clearAll: clearNotifications,
     },
   };
 

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

@@ -1,5 +1,5 @@
 import type { WidgetHistory } from './WidgetInfo.helpers';
-import type { FetchStatus } from '../../store/slices/data';
+import type { FetchStatus, FindToken } from '../../store/slices/data';
 import type { ConnectedWallet } from '../../store/wallets';
 import type { Wallet } from '../../types';
 import type { Notification } from '../../types/notification';
@@ -20,9 +20,11 @@ export interface WidgetInfoContextInterface {
     tokens: Token[];
     swappers: SwapperMeta[];
     loadingStatus: FetchStatus;
+    findToken: FindToken;
   };
   resetLanguage: () => void;
   notifications: {
     list: Notification[];
+    clearAll: () => void;
   };
 }

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`,