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

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx

@@ -11,6 +11,7 @@ export function WarningAlert(props: WaningAlertsProps) {
     return (
       <Alert
         type="warning"
+        id="widget-swap-details-change-network-alert"
         title={message.shortMessage}
         action={
           <Button
@@ -36,6 +37,7 @@ export function WarningAlert(props: WaningAlertsProps) {
       <Alert
         type="warning"
         title={message.shortMessage}
+        id="widget-swap-details-warning-alert-connect-wallet-alert"
         action={
           <Button
             id="widget-swap-details-warning-alert-connect-wallet-btn"
@@ -53,5 +55,11 @@ export function WarningAlert(props: WaningAlertsProps) {
     );
   }
 
-  return <Alert type="warning" title={message.shortMessage} />;
+  return (
+    <Alert
+      id="widget-swap-details-short-alert"
+      type="warning"
+      title={message.shortMessage}
+    />
+  );
 }

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -40,6 +40,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
         return (
           <Fragment key={key}>
             <Alert
+              id="widget-swap-details-tx-alert"
               type={
                 lastUrl
                   ? (loading && 'loading') || (error && 'error') || 'success'
@@ -65,7 +66,13 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
           </Fragment>
         );
       })}
-      {waitingProgress && <Alert type="loading" title={message.shortMessage} />}
+      {waitingProgress && (
+        <Alert
+          id="widget-swap-details-loading-alert"
+          type="loading"
+          title={message.shortMessage}
+        />
+      )}
       {step.status !== 'failed' && hasWarning && (
         <WarningAlert
           switchNetwork={switchNetwork}

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -44,6 +44,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     <WatermarkedModal
       open={open}
       onClose={onClose}
+      id="widget-swap-details-complete-modal"
       container={
         document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
       }>
@@ -52,6 +53,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           <TokenAmount
             direction="vertical"
             tooltipContainer={getContainer()}
+            id="widget-swap-details-complete-modal-success-token-amount-container"
             type="output"
             centerAlign={true}
             price={{

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -73,6 +73,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
         </WalletContainer>
       )}
       <StatefulConnectModal
+        id="widget-swap-details-modal"
         wallet={selectedWalletToConnect}
         onClose={() => {
           setSelectedWalletToConnect(undefined);

package/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx

@@ -19,4 +19,8 @@ export const modalNetworkValues: Record<
     type: 'success',
     title: i18n.t('Network Changed'),
   },
+  [PendingSwapNetworkStatus.NetworkChangeFailed]: {
+    type: 'warning',
+    title: i18n.t('Network Change Failed'),
+  },
 };

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -29,6 +29,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
 
   return (
     <WatermarkedModal
+      id="widget-swap-details-modal"
       open={!!state}
       onClose={onClose}
       container={

package/src/components/SwapMetrics/SwapMetrics.helpers.ts

@@ -41,14 +41,18 @@ export function getUsdExchangeRate(params: {
   if (!toTokenUsdPrice || !fromTokenUsdPrice) {
     return { rawValue: '0', displayValue: '0' };
   }
-
   const toPrice = new BigNumber(toTokenUsdPrice);
   const fromPrice = new BigNumber(fromTokenUsdPrice);
   const rawValue = toPrice.dividedBy(fromPrice);
   let displayValue: string;
 
   if (rawValue.isLessThan(1)) {
-    displayValue = rawValue.toFixed(SMALL_VALUE_DECIMALS);
+    /*
+     * Format the number with up to SMALL_VALUE_DECIMALS digits after the decimal point,
+     * then remove any trailing zeros.
+     * Example: "0.120000" → "0.12", "0.00000000000010" → "0.0000000000001"
+     */
+    displayValue = rawValue.toFixed(SMALL_VALUE_DECIMALS).replace(/\.?0+$/, '');
   } else if (rawValue.toFixed(0).length > LARGE_VALUE_MAX_DIGITS) {
     displayValue = rawValue.toFixed(0).slice(0, LARGE_VALUE_MAX_DIGITS);
   } else {

package/src/components/SwitchFromAndTo/SwitchFromAndTo.tsx

@@ -15,6 +15,7 @@ export function SwitchFromAndToButton() {
   return (
     <SwitchButtonContainer>
       <StyledButton
+        id="widget-switch-from-and-to-btn"
         onClick={(event) => {
           const button = event.currentTarget;
 

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -100,6 +100,7 @@ export function DerivationPath(props: PropTypes) {
           {i18n.t('Choose Derivation Path Template')}
         </InputLabel>
         <Select
+          id="widget-derivation-path-template-select"
           value={selectedDerivationPathId || ''}
           options={derivationPaths.map((derivationPath) => ({
             value: derivationPath.id,
@@ -116,6 +117,7 @@ export function DerivationPath(props: PropTypes) {
             : i18n.t('Enter Index')}
         </InputLabel>
         <TextField
+          id="widget-derivation-path-template-input"
           type={isCustomOptionSelected ? 'text' : 'number'}
           variant="contained"
           value={derivationPathIndex}

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -25,7 +25,7 @@ export function Detached(props: PropTypes) {
         icon={<Image src={targetWallet.image} size={45} />}
       />
       <Divider size={20} />
-      <NamespaceList>
+      <NamespaceList id="widget-detached-namespace-list" as={'ul'}>
         {targetWallet.needsNamespace?.data.map((namespace, index, array) => (
           <React.Fragment key={namespace.id}>
             {namespace.unsupported ? (

package/src/components/WalletStatefulConnect/ExperimentalChain.tsx

@@ -5,13 +5,15 @@ import React from 'react';
 interface PropTypes {
   displayName?: string;
   onConfirm: () => void;
+  id: string;
 }
 
 export function ExperimentalChain(props: PropTypes) {
-  const { displayName, onConfirm } = props;
+  const { displayName, onConfirm, id } = props;
 
   return (
     <MessageBox
+      id={id}
       title={i18n.t({
         id: 'Add {blockchainDisplayName} Chain',
         values: { blockchainDisplayName: displayName },

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -44,6 +44,8 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
   const namespaceState = walletState.namespaces?.get(namespace.value);
   const firstAccountArray = namespaceState.accounts?.[0]?.split(':');
 
+  const supportedChains = namespace.getSupportedChains(blockchains);
+
   useEffect(() => setErrorIsExpanded(false), [error]);
 
   useLayoutEffect(() => {
@@ -95,7 +97,7 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
           size={40}
         />
         <NamespaceItemInnerContent>
-          <NamespaceDetachedItemInfo>
+          <NamespaceDetachedItemInfo className="widget-namespace-detached-item-info-div">
             <Typography variant="label" size="large">
               {namespace.label}
             </Typography>
@@ -122,6 +124,7 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
           )}
           {!namespaceState.connected && error && (
             <NamespaceItemErrorDropdownToggle
+              className="widget-namespace-detached-item-error-toggle-btn"
               onClick={() =>
                 setErrorIsExpanded((errorIsExpanded) => !errorIsExpanded)
               }>
@@ -145,8 +148,8 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
           )}
           {!namespaceState.connected &&
             !error &&
-            namespace.chains.length > 1 && (
-              <SupportedChainsList chains={namespace.chains} />
+            supportedChains.length > 1 && (
+              <SupportedChainsList chains={supportedChains} />
             )}
         </NamespaceItemInnerContent>
         {namespaceState.connecting ? (
@@ -165,7 +168,7 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
       {!namespaceState.connected && !!error && errorIsExpanded && (
         <>
           <Divider size={4} />
-          <NamespaceItemError>
+          <NamespaceItemError id="widget-namespace-item-error-div">
             <Typography variant="body" size="small" color="neutral700">
               {(error.cause as Error)?.message || error.message}
             </Typography>

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

@@ -18,9 +18,13 @@ export function NamespaceListItem(props: NamespaceItemPropTypes) {
   const { onClick, type, namespace } = props;
   const blockchains = useAppStore().blockchains();
 
-  const showSupportedChains = namespace.chains.length > 1;
+  const supportedChains = namespace.getSupportedChains(blockchains);
+  const showSupportedChains = supportedChains.length > 1;
   return (
-    <NamespaceItemContainer onClick={onClick} clickable>
+    <NamespaceItemContainer
+      onClick={onClick}
+      clickable
+      className="widget-namespace-list-item">
       <NamespaceItemContent>
         <NamespaceLogo
           src={getBlockchainLogo(blockchains, namespace.id)}
@@ -31,7 +35,7 @@ export function NamespaceListItem(props: NamespaceItemPropTypes) {
             {namespace.label}
           </Typography>
           {showSupportedChains && (
-            <SupportedChainsList chains={namespace.chains} />
+            <SupportedChainsList chains={supportedChains} />
           )}
         </NamespaceItemInnerContent>
         {type === 'radio' ? (

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -12,21 +12,30 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { useAppStore } from '../../store/AppStore';
+
 import { NamespaceListItem } from './NamespaceListItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
 import { NamespaceUnsupportedItem } from './NamespaceUnsupportedItem';
 
 export function Namespaces(props: PropTypes) {
   const { targetWallet } = props.value;
-  const singleNamespace = targetWallet.needsNamespace?.selection === 'single';
+  const namespacesProperty = targetWallet.properties?.find(
+    (property) => property.name === 'namespaces'
+  );
+  const isHub = targetWallet.isHub;
+  const singleNamespace = targetWallet.isHub
+    ? namespacesProperty?.value.selection === 'single'
+    : targetWallet.needsNamespace?.selection === 'single';
+  const needsNamespace = isHub
+    ? namespacesProperty?.value
+    : targetWallet.needsNamespace;
   const providerImage = targetWallet.image;
 
+  const blockchains = useAppStore().blockchains();
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
   const supportedNamespaces = useMemo(
-    () =>
-      targetWallet.needsNamespace?.data.filter(
-        (namespace) => !namespace.unsupported
-      ),
+    () => needsNamespace?.data.filter((namespace) => !namespace.unsupported),
     [targetWallet?.type]
   );
 
@@ -73,9 +82,11 @@ export function Namespaces(props: PropTypes) {
       if (!!props.value.defaultSelectedChains?.length) {
         const namespacesContainingDefaultSelectedChains =
           supportedNamespaces.filter((namespace) =>
-            namespace.chains.some((chain) =>
-              props.value.defaultSelectedChains?.includes(chain.name)
-            )
+            namespace
+              .getSupportedChains(blockchains)
+              .some((chain) =>
+                props.value.defaultSelectedChains?.includes(chain.name)
+              )
           );
         setSelectedNamespaces(
           namespacesContainingDefaultSelectedChains.map(
@@ -106,6 +117,7 @@ export function Namespaces(props: PropTypes) {
         <>
           <Divider size={20} />
           <Alert
+            id="widget-wallet-stateful-connect-alert"
             variant="alarm"
             type="info"
             title={i18n.t(
@@ -132,23 +144,21 @@ export function Namespaces(props: PropTypes) {
       <NamespaceList>
         {wrapRadioRoot(
           <>
-            {targetWallet.needsNamespace?.data.map(
-              (namespace, index, array) => (
-                <React.Fragment key={namespace.id}>
-                  {namespace.unsupported ? (
-                    <NamespaceUnsupportedItem namespace={namespace} />
-                  ) : (
-                    <NamespaceListItem
-                      value={selectedNamespaces.includes(namespace.value)}
-                      namespace={namespace}
-                      type={singleNamespace ? 'radio' : 'checkbox'}
-                      onClick={() => onSelect(namespace.value)}
-                    />
-                  )}
-                  {index !== array.length - 1 && <Divider size={10} />}
-                </React.Fragment>
-              )
-            )}
+            {needsNamespace?.data.map((namespace, index, array) => (
+              <React.Fragment key={namespace.id}>
+                {namespace.unsupported ? (
+                  <NamespaceUnsupportedItem namespace={namespace} />
+                ) : (
+                  <NamespaceListItem
+                    value={selectedNamespaces.includes(namespace.value)}
+                    namespace={namespace}
+                    type={singleNamespace ? 'radio' : 'checkbox'}
+                    onClick={() => onSelect(namespace.value)}
+                  />
+                )}
+                {index !== array.length - 1 && <Divider size={10} />}
+              </React.Fragment>
+            ))}
           </>
         )}
       </NamespaceList>

package/src/components/WalletStatefulConnect/SupportedChainsList.tsx

@@ -15,7 +15,7 @@ const SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER = 3;
 export function SupportedChainsList(props: PropTypes) {
   const { chains } = props;
   return (
-    <SupportedChainsContainer>
+    <SupportedChainsContainer id="widget-supported-chains-container">
       {chains
         .slice(0, SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER)
         .map((chain, index) => (

package/src/components/WalletStatefulConnect/SupportedChainsList.types.ts

@@ -1,5 +1,5 @@
-import type { Chain } from '@rango-dev/wallets-core/dist/namespaces/common/types';
+import type { BlockchainMeta } from 'rango-types';
 
 export type PropTypes = {
-  chains: Chain[];
+  chains: BlockchainMeta[];
 };

package/src/components/common/ActivateTabModal/ActivateTabModal.tsx

@@ -15,6 +15,7 @@ export function ActivateTabModal(props: PropTypes) {
       open={open}
       dismissible
       onClose={onClose}
+      id="widget-active-tab-modal"
       container={getContainer()}>
       <MessageBox
         title={i18n.t('Activate current tab')}

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -47,7 +47,7 @@ export function ExpandedQuotes(props: PropTypes) {
   return (
     <Container
       expandMode={config?.variant === 'full-expanded' ? 'full' : 'default'}
-      className={`${containerClass} ${LayoutContainer()}`}
+      className={`${containerClass} ${LayoutContainer()} widget-expanded-quotes-container`}
       id={WIDGET_UI_ID.EXPANDED_BOX_ID}>
       <Header
         title={i18n.t('Routes')}

package/src/containers/Inputs/Inputs.tsx

@@ -78,6 +78,7 @@ export function Inputs(props: PropTypes) {
       <FromContainer>
         <SwapInput
           label={i18n.t('From')}
+          id="widget-swap-from"
           mode="From"
           onInputChange={setInputAmount}
           onInputBlur={sanitizeInputAmount}
@@ -133,6 +134,7 @@ export function Inputs(props: PropTypes) {
         sharpBottomStyle={!isExpandable && (!!selectedQuote || fetchingQuote)}
         label={i18n.t('To')}
         mode="To"
+        id="widget-swap-to-input"
         fetchingQuote={fetchingQuote}
         chain={{
           displayName: toBlockchain?.displayName || '',

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -23,6 +23,7 @@ export function QuoteInfo(props: PropTypes) {
     onClick,
     showModalFee,
     selected,
+    id,
     onClickAllRoutes,
     fullExpandedMode = false,
     container,
@@ -50,7 +51,7 @@ export function QuoteInfo(props: PropTypes) {
   }
 
   return showQuote ? (
-    <QuoteContainer onClick={() => onClick?.(quote)}>
+    <QuoteContainer onClick={() => onClick?.(quote)} id={id}>
       <Quote
         quote={quote}
         error={error}

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

@@ -9,6 +9,7 @@ export type PropTypes = {
   tagHidden?: boolean;
   error: QuoteError | null;
   warning: QuoteWarning | null;
+  id: string;
   autoScrollOnExpanding?: boolean;
   expanded?: boolean;
   onClickAllRoutes?: () => void;

package/src/containers/Settings/Lists.tsx

@@ -73,6 +73,7 @@ const themesList = [
 const getThemeIcon = (theme: ThemeMode) => {
   const iconProps: SvgIconProps = { color: 'gray', size: 16 };
 
+  // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
   switch (theme) {
     case 'auto':
       return <AutoThemeIcon {...iconProps} />;
@@ -131,6 +132,7 @@ export function SettingsLists() {
   ).length;
 
   const handleSwapperEndItem = (totalSelected: number, total: number) => {
+    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (fetchStatus) {
       case 'loading':
         return <Skeleton variant="text" size="medium" width={50} />;
@@ -230,7 +232,7 @@ export function SettingsLists() {
   const infiniteApprovalItem = {
     id: 'widget-setting-infinite-approval-item-btn',
     title: (
-      <>
+      <React.Fragment>
         <Typography variant="title" size="xmedium">
           {i18n.t('Infinite approval')}
         </Typography>
@@ -251,7 +253,7 @@ export function SettingsLists() {
           }>
           <InfoIcon color="gray" />
         </Tooltip>
-      </>
+      </React.Fragment>
     ),
     start: <InfinityIcon color="gray" size={16} />,
     end: <Switch checked={infiniteApprove} />,
@@ -272,6 +274,7 @@ export function SettingsLists() {
           container={getContainer()}
           items={themesList}
           value={theme}
+          className="widget-setting-theme-item-tabs-container"
           onChange={(item) => setTheme(item.id as ThemeMode)}
           type="primary"
           borderRadius="small"
@@ -298,7 +301,14 @@ export function SettingsLists() {
 
   return (
     <List
-      type={<ListItemButton hasDivider id="_" onClick={() => console.log()} />}
+      type={
+        <ListItemButton
+          className="widget-settings-list-item-btn"
+          hasDivider
+          id="_"
+          onClick={() => console.log()}
+        />
+      }
       items={settingItems}
     />
   );

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -97,25 +97,22 @@ export function useStatefulConnect(): UseStatefulConnect {
 
       // Legacy and hub have different structure to handle each situation.
       const isHub = !!wallet.isHub;
-      const detachedInstances = wallet.properties?.find(
-        (item) => item.name === 'detached'
-      )?.value;
+      const needsNamespace = isHub
+        ? wallet.properties?.find((item) => item.name === 'namespaces')?.value
+        : wallet.needsNamespace;
+
+      const needsDerivationPath = isHub
+        ? wallet.properties?.find((item) => item.name === 'derivationPath')
+            ?.value
+        : wallet.needsDerivationPath;
 
       // 1. Target wallet does not contain any namespaces
-      if (
-        (isHub && !detachedInstances?.length) ||
-        (!isHub && !wallet.needsNamespace)
-      ) {
+      if (!needsNamespace?.data?.length) {
         return await runConnect(wallet.type, undefined, options);
       }
 
       // 2. Target wallet contains more than one namespace
-      if (
-        (isHub && detachedInstances?.length && detachedInstances.length > 1) ||
-        (!isHub &&
-          wallet.needsNamespace?.data.length &&
-          wallet.needsNamespace.data.length > 1)
-      ) {
+      if (needsNamespace?.data.length && needsNamespace.data.length > 1) {
         dispatch({
           type: 'needsNamespace',
           payload: {
@@ -127,12 +124,9 @@ export function useStatefulConnect(): UseStatefulConnect {
       }
 
       // 3. Target wallet contains only one namespace
-      if (
-        (isHub && detachedInstances?.length === 1) ||
-        (!isHub && wallet.needsNamespace?.data.length === 1)
-      ) {
-        if (wallet.needsNamespace && wallet.needsDerivationPath) {
-          const namespace = wallet.needsNamespace.data[0];
+      if (needsNamespace?.data.length === 1) {
+        if (needsDerivationPath) {
+          const namespace = needsNamespace.data[0];
 
           dispatch({
             type: 'needsDerivationPath',
@@ -146,7 +140,7 @@ export function useStatefulConnect(): UseStatefulConnect {
         }
         return await runConnect(
           wallet.type,
-          wallet.needsNamespace?.data.map((namespace) => ({
+          needsNamespace?.data?.map((namespace) => ({
             namespace: namespace.value,
           })),
           options
@@ -182,11 +176,19 @@ export function useStatefulConnect(): UseStatefulConnect {
   };
 
   const handleNamespace = async (
-    wallet: WalletInfoWithExtra,
+    wallet: ExtendedModalWalletInfo,
     selectedNamespaces: Namespace[]
   ): Promise<Result> => {
-    const isSingleNamespace = wallet.needsNamespace?.selection === 'single';
-    const needsDerivationPath = wallet.needsDerivationPath;
+    const isHub = !!wallet.isHub;
+    const needsNamespace = isHub
+      ? wallet.properties?.find((item) => item.name === 'namespaces')?.value
+      : wallet.needsNamespace;
+
+    const needsDerivationPath = isHub
+      ? wallet.properties?.find((item) => item.name === 'derivationPath')?.value
+      : wallet.needsDerivationPath;
+
+    const isSingleNamespace = needsNamespace?.selection === 'single';
     const firstSelectedNamespace = selectedNamespaces[0];
 
     if (!firstSelectedNamespace) {

package/src/pages/AddCustomTokenPage.tsx

@@ -93,6 +93,7 @@ export function AddCustomTokenPage() {
             <Divider size={10} />
             <TextField
               fullWidth
+              id="widget-add-custom-token-token-address-input"
               disabled={!blockchain}
               variant="contained"
               placeholder={i18n.t('Enter token address')}
@@ -107,7 +108,12 @@ export function AddCustomTokenPage() {
             {!isValidAddress && !!address && (
               <>
                 <Divider size={4} />
-                <Alert type="error" variant="alarm" title="Invalid Address" />
+                <Alert
+                  id="widget-add-custom-token-invalid-address-alert"
+                  type="error"
+                  variant="alarm"
+                  title="Invalid Address"
+                />
               </>
             )}
           </div>

package/src/pages/ConfirmSwapPage.tsx

@@ -199,7 +199,14 @@ export function ConfirmSwapPage() {
   const quoteError = confirmSwapResult.error;
   const alerts = [];
   if (dbErrorMessage) {
-    alerts.push(<Alert type="error" variant="alarm" title={dbErrorMessage} />);
+    alerts.push(
+      <Alert
+        id="widget-confirm-swap-db-error-alert"
+        type="error"
+        variant="alarm"
+        title={dbErrorMessage}
+      />
+    );
   }
 
   if (quoteWarning || quoteError) {
@@ -304,6 +311,7 @@ export function ConfirmSwapPage() {
         <QuoteInfo
           quote={selectedQuote}
           type="swap-preview"
+          id="widget-confirm-swap-quote-container"
           expanded
           tagHidden
           error={confirmSwapResult.error}

package/src/pages/CustomTokensPage.tsx

@@ -94,6 +94,7 @@ export function CustomTokensPage() {
           {!!customTokens.length ? (
             <>
               <SearchInput
+                id="widget-custom-tokens-search-token-input"
                 value={searchedFor}
                 setValue={setSearchedFor}
                 fullWidth
@@ -152,6 +153,7 @@ export function CustomTokensPage() {
         </Content>
         <WatermarkedModal
           open={isDeleteModalOpen}
+          id="widget-custom-tokens-delete-modal"
           dismissible
           onClose={() => setIsDeleteModalOpen(false)}
           container={getContainer()}>

package/src/pages/HistoryPage.tsx

@@ -159,6 +159,7 @@ export function HistoryPage() {
             fullWidth
             variant="contained"
             placeholder={i18n.t('Search Transaction')}
+            id="widget-history-search-transaction-input"
             autoFocus
             onChange={handleSearch}
             style={{ height: 36 }}
@@ -211,6 +212,7 @@ export function HistoryPage() {
       <WatermarkedModal
         open={openClearModal}
         onClose={onCloseModal}
+        id="widget-history-clear-modal"
         container={getContainer()}>
         <Divider size={20} />
         <MessageBox

package/src/pages/Home.tsx

@@ -217,6 +217,7 @@ export function Home() {
               quote={selectedQuote}
               loading={fetchingQuote}
               error={quoteError}
+              id="widget-home-expandable-quote-container"
               tagHidden={false}
               warning={currentQuoteWarning}
               type="basic"