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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.43.1-next.1",
+  "version": "0.43.1-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,23 +25,23 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.8.0",
-    "@rango-dev/provider-all": "^0.46.1-next.1",
+    "@rango-dev/provider-all": "^0.46.1-next.5",
     "@rango-dev/queue-manager-core": "^0.29.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.45.2-next.8",
+    "@rango-dev/queue-manager-rango-preset": "^0.45.2-next.11",
     "@rango-dev/queue-manager-react": "^0.29.0",
-    "@rango-dev/signer-solana": "^0.39.1-next.3",
-    "@rango-dev/ui": "^0.46.2-next.10",
-    "@rango-dev/wallets-core": "^0.43.1-next.7",
-    "@rango-dev/wallets-react": "^0.30.2-next.9",
-    "@rango-dev/wallets-shared": "^0.44.2-next.8",
+    "@rango-dev/signer-solana": "^0.39.1-next.4",
+    "@rango-dev/ui": "^0.46.2-next.14",
+    "@rango-dev/wallets-core": "^0.43.1-next.11",
+    "@rango-dev/wallets-react": "^0.30.2-next.12",
+    "@rango-dev/wallets-shared": "^0.44.2-next.13",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "ethers": "^6.13.2",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.67",
-    "rango-types": "^0.1.84",
+    "rango-sdk": "^0.1.68",
+    "rango-types": "^0.1.85",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",

package/src/components/BlockchainList/BlockchainList.tsx

@@ -44,7 +44,10 @@ export function BlockchainList(props: PropTypes) {
       );
     }
     return (
-      <List as="ul" key={`${blockchainCategory}-${searchedFor}`}>
+      <List
+        as="ul"
+        key={`${blockchainCategory}-${searchedFor}`}
+        id="widget-blockchain-list">
         {blockchains.map((item) => (
           <ListItemButton
             key={`${item.name}-${item.chainId}`}

package/src/components/BlockchainList/LoadingBlockchainList.tsx

@@ -6,7 +6,7 @@ import { List } from './BlockchainList.styles';
 const ITEM_SKELETON_COUNT = 20;
 export function LoadingBlockchainList() {
   return (
-    <List>
+    <List id="widget-blockchain-loading-list" as="ul">
       {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
         <ListItem
           key={e}

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.tsx

@@ -20,7 +20,8 @@ export function BlockchainSelectorButton(props: PropTypes) {
       <Divider size={10} />
       <InputContainer
         onClick={disabled ? undefined : onClick}
-        disabled={disabled}>
+        disabled={disabled}
+        id="widget-blockchain-selector-container">
         <FlexContainer>
           {hasLogo && (
             <>

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -57,7 +57,7 @@ export function BlockchainsSection(props: PropTypes) {
         </>
       )}
       <Divider size={12} />
-      <Blockchains>
+      <Blockchains id="widget-blockchains-section-container">
         {fetchStatus === 'loading' &&
           Array.from(
             Array(
@@ -70,6 +70,7 @@ export function BlockchainsSection(props: PropTypes) {
         {fetchStatus === 'success' && (
           <>
             <BlockchainsChip
+              className="widget-blockchains-section-all-btn"
               selected={!blockchain}
               onClick={() => {
                 if (type === 'from') {
@@ -90,6 +91,7 @@ export function BlockchainsSection(props: PropTypes) {
                 sideOffset={2}
                 container={getContainer()}>
                 <BlockchainsChip
+                  className="widget-blockchains-section-item-btn"
                   key={item.name}
                   selected={!!blockchain && blockchain.name === item.name}
                   onClick={() => onChange(item)}>
@@ -100,6 +102,7 @@ export function BlockchainsSection(props: PropTypes) {
 
             {onlyOneItemInList ? (
               <BlockchainsChip
+                className="widget-blockchains-section-only-item-btn"
                 key={blockchainsList.more[0].name}
                 selected={
                   !!blockchain &&
@@ -111,7 +114,10 @@ export function BlockchainsSection(props: PropTypes) {
             ) : null}
 
             {showMoreButton ? (
-              <BlockchainsChip onClick={onMoreClick} key="more-blockchains">
+              <BlockchainsChip
+                onClick={onMoreClick}
+                key="more-blockchains"
+                className="widget-blockchains-section-more-items-btn">
                 <Typography variant="body" size="xsmall" color="secondary500">
                   {i18n._('More +{count}', {
                     count: blockchainsList.more.length,

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -307,6 +307,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
 
   return (
     <WatermarkedModal
+      id="widget-confirm-wallets-modal"
       open={open}
       onClose={() => {
         if (!quoteWalletsConfirmed) {
@@ -368,6 +369,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       })}
       anchor="center">
       <WatermarkedModal
+        id='"widget-confirm-wallets-insufficient-account-balance-modal'
         open={isInsufficientBalanceModalOpen}
         onClose={setBalanceWarnings.bind(null, [])}
         container={modalContainer}>
@@ -406,7 +408,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
         <>
           {error && (
             <>
-              <Alert variant="alarm" type="error" title={i18n.t(error)} />
+              <Alert
+                id="widget-confirm-wallet-modal-error-alert"
+                variant="alarm"
+                type="error"
+                title={i18n.t(error)}
+              />
               <Divider size={12} />
             </>
           )}

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -123,9 +123,7 @@ export function WalletList(props: PropTypes) {
           ? getConciseAddress(address, ACCOUNT_ADDRESS_MAX_CHARACTERS)
           : '';
         const isConnectedButDifferentThanTargetNamespace =
-          isConnected && wallet.isHub
-            ? !conciseAddress
-            : !!wallet.needsNamespace && !conciseAddress;
+          isConnected && !!wallet.needsNamespace && !conciseAddress;
 
         const experimentalChain = isExperimentalChain(blockchains(), chain);
 
@@ -198,12 +196,14 @@ export function WalletList(props: PropTypes) {
           <React.Fragment key={`${wallet.title}_${blockchainDisplayName}`}>
             {!!experimentalChainWallet && (
               <WatermarkedModal
+                id="widget-wallets-list-watermarked-modal"
                 open={!!experimentalChainWallet && showExperimentalChainModal}
                 container={modalContainer}
                 onClose={() => {
                   setExperimentalChainWallet(null);
                 }}>
                 <ExperimentalChain
+                  id="widget-wallets-list-experimental-chain-container"
                   displayName={blockchainDisplayName}
                   onConfirm={() => {
                     void addExperimentalChain(experimentalChainWallet);
@@ -213,6 +213,7 @@ export function WalletList(props: PropTypes) {
             )}
             {addingExperimentalChainStatus && (
               <WatermarkedModal
+                id="widget-wallets-list-experimental-chain-watermarked-modal"
                 open={!!addingExperimentalChainStatus}
                 onClose={setAddingExperimentalChainStatus.bind(null, null)}
                 container={modalContainer}>
@@ -226,6 +227,7 @@ export function WalletList(props: PropTypes) {
             )}
             <SelectableWallet
               key={wallet.type}
+              id="widget-wallets-list-selectable-wallet-btn"
               description={getWalletDescription()}
               descriptionColor={getWalletDescriptionColor()}
               onClick={onSelectableWalletClick}
@@ -237,6 +239,7 @@ export function WalletList(props: PropTypes) {
         );
       })}
       <StatefulConnectModal
+        id="widget-wallets-list-stateful-connect-modal"
         wallet={selectedWalletToConnect}
         options={{ defaultSelectedChains: quoteChains || [chain] }}
         onClose={() => {
@@ -257,7 +260,10 @@ export function WalletList(props: PropTypes) {
         }}
       />
       {shouldShowMoreWallets && (
-        <ShowMoreWallets selected={false} onClick={onShowMore}>
+        <ShowMoreWallets
+          selected={false}
+          onClick={onShowMore}
+          id="widget-wallets-list-show-more-wallets-btn">
           <Typography variant="label" size="medium">
             {i18n.t('Show more wallets')}
             <Typography variant="label" size="medium" color="$primary">

package/src/components/CustomDestination/CustomDestination.tsx

@@ -102,7 +102,7 @@ export function CustomDestination(props: PropTypes) {
         open={open}
         triggerAnchor="top"
         trigger={
-          <CustomDestinationButton>
+          <CustomDestinationButton id="widget-custom-destination-collapsible-btn">
             <div className="button__content">
               <WalletIcon size={18} color="info" />
               <Divider size={4} direction="horizontal" />
@@ -120,6 +120,7 @@ export function CustomDestination(props: PropTypes) {
         }
         onClickTrigger={() => handleOpenChange(!open)}>
         <StyledTextField
+          id="widget-custom-destination-blockchain-address-input"
           ref={inputRef}
           style={{
             padding: 0,

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -23,6 +23,7 @@ export function CustomTokenModal(props: PropTypes) {
   return (
     <WatermarkedModal
       open={open}
+      id="widget-custom-token-watermarked-modal"
       dismissible
       onClose={onClose}
       onExit={onExit}

package/src/components/FilterSelector/FilterSelectorContent.tsx

@@ -40,6 +40,7 @@ export function FilterSelectorContent(props: PropTypes) {
             return (
               <ListItemButton
                 key={item.id}
+                className="widget-filter-selector-list-item-btn"
                 style={{ height: '40px', width: '100%' }}
                 selected={false}
                 hasDivider={props.list.length - 1 != index}

package/src/components/HeaderButtons/InProgressTransactionBadge.tsx

@@ -17,7 +17,7 @@ const InProgressTransactionBadge = () => {
   }
 
   return (
-    <InProgressTransactionBadgeContainer>
+    <InProgressTransactionBadgeContainer id="widget-header-history-badge-container">
       <InProgressIcon color="info" size={6} />
     </InProgressTransactionBadgeContainer>
   );

package/src/components/HeaderButtons/NotificationsBadge.tsx

@@ -20,7 +20,11 @@ export function NotificationsBadge() {
 
   return notificationsCount ? (
     <NotificationsBadgeContainer isSever={hasSeverNotification}>
-      <Typography variant="body" size="xsmall" color="$background">
+      <Typography
+        variant="body"
+        size="xsmall"
+        color="$background"
+        id="widget-header-notifications-badge-container">
         {notificationsCount}
       </Typography>
     </NotificationsBadgeContainer>

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -112,6 +112,7 @@ export function HistoryGroupedList(props: PropTypes) {
         return (
           <SwapItemContainer key={swap.requestId}>
             <SwapListItem
+              className="widget-history-group-list-swap-item-btn"
               requestId={swap.requestId}
               creationTime={swap.creationTime}
               status={swap.status}

package/src/components/ImportCustomToken/ImportCustomToken.tsx

@@ -73,12 +73,12 @@ export function ImportCustomToken(props: PropTypes) {
       setShowImportModal(true);
     }
   }, [blockchain, token]);
-
   return (
     <>
       <WatermarkedModal
         open={showErrorModal}
         dismissible
+        id="widget-add-custom-token-modal"
         onClose={closeErrorModal}
         onExit={handleExit}
         container={getContainer()}>

package/src/components/NoResult/NoResult.tsx

@@ -42,7 +42,7 @@ export function NoResult(props: PropTypes) {
   }
 
   return (
-    <Container>
+    <Container id="widget-no-result-container">
       <NoRouteIcon size={NoRouteIconSize[size]} color="gray" />
       <Divider size={4} />
       <Typography variant="title" size={NoRouteTitleSize[size]}>
@@ -64,6 +64,7 @@ export function NoResult(props: PropTypes) {
       {!!info.alert && (
         <Footer size={size}>
           <Alert
+            id="widget-no-result-alert"
             type={info.alert.type}
             title={info.alert.text}
             titleAlign={'left'}

package/src/components/NotificationContent/NotificationContent.tsx

@@ -24,6 +24,7 @@ export function NotificationContent() {
 
   return (
     <Notifications
+      id="widget-notifications-container"
       list={notifications}
       getBlockchainImage={(blockchain) =>
         getBlockchainImage(blockchain, blockchains)

package/src/components/Quote/Quote.tsx

@@ -226,6 +226,7 @@ export function Quote(props: QuoteProps) {
                 variant="alarm"
                 type={stepHasError ? 'error' : 'warning'}
                 title={alertTitle}
+                id="widget-quote-footer-step-alarm-alert"
                 footer={
                   <FooterAlert>
                     {hasBridgeLimitError && (
@@ -336,12 +337,13 @@ export function Quote(props: QuoteProps) {
       tooltipContainer={getExpanded()}
       steps={steps}
       tags={sortedQuoteTags}
+      id="widget-quote-full-expanded-quote-container"
       quoteCost={
         <QuoteCostDetails
           quote={quote}
           fullExpandedMode
           time={totalTime}
-          fee={fee}
+          fee={totalFee}
           feeWarning={feeWarning}
           timeWarning={timeWarning}
           showModalFee={showModalFee}
@@ -359,6 +361,7 @@ export function Quote(props: QuoteProps) {
     />
   ) : (
     <SummaryContainer
+      id="widget-quote-summary-container"
       selected={selected}
       listItem={type === 'list-item'}
       basic={type === 'basic'}>
@@ -384,7 +387,7 @@ export function Quote(props: QuoteProps) {
           <QuoteCostDetails
             quote={quote}
             time={totalTime}
-            fee={fee}
+            fee={totalFee}
             feeWarning={feeWarning}
             timeWarning={timeWarning}
             showModalFee={showModalFee}
@@ -397,6 +400,7 @@ export function Quote(props: QuoteProps) {
                 e.stopPropagation();
                 onClickAllRoutes();
               }}
+              id="widget-quote-all-routes-btn"
               size="xxsmall"
               type="secondary"
               variant="default"
@@ -447,6 +451,7 @@ export function Quote(props: QuoteProps) {
         )}
         {type === 'list-item' && (
           <TokenAmount
+            id="widget-quote-token-amount-container"
             tooltipContainer={container}
             type="output"
             direction="vertical"
@@ -500,6 +505,7 @@ export function Quote(props: QuoteProps) {
               return (
                 <StepDetails
                   type="quote-details"
+                  className="widget-quote-step-details-container"
                   key={key}
                   tooltipContainer={container}
                   step={step}

package/src/components/Quote/Quote.types.ts

@@ -1,5 +1,6 @@
 import type { QuoteError, QuoteWarning, SelectedQuote } from '../../types';
 import type { Step } from '@rango-dev/ui';
+import type BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
 
 export type QuoteProps = {
@@ -45,7 +46,7 @@ export type QuoteTriggerImagesProps = {
 export type QuoteCostDetailsProps = {
   quote: SelectedQuote | null;
   steps: number;
-  fee: string;
+  fee: BigNumber;
   time: string;
   feeWarning?: boolean;
   timeWarning?: boolean;

package/src/components/Quote/QuoteCostDetails.tsx

@@ -71,6 +71,11 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const container = fullExpandedMode ? getExpanded() : getContainer();
 
   const feesGroup = getFeesGroup(swaps);
+  const roundedFee = numberToString(
+    fee,
+    GAS_FEE_MIN_DECIMALS,
+    GAS_FEE_MAX_DECIMALS
+  );
 
   return (
     <>
@@ -83,7 +88,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
               }
             : undefined
         }
-        fee={fee}
+        fee={roundedFee}
         feeWarning={feeWarning}
         timeWarning={timeWarning}
         time={time}
@@ -93,6 +98,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
       />
 
       <WatermarkedModal
+        id="widget-quote-cost-explanation-modal"
         container={container}
         open={open}
         anchor={fullExpandedMode ? 'center' : 'bottom'}
@@ -145,7 +151,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
                           fee.amount,
                           GAS_FEE_MIN_DECIMALS,
                           GAS_FEE_MAX_DECIMALS
-                        )}{' '}
+                        )}
                         {fee.asset.symbol} ($
                         {numberToString(
                           usdValue,
@@ -174,7 +180,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
             </Typography>
           </FeeSection>
           <Line />
-          {Object.keys(feesGroup.nonePayable).length && (
+          {!!Object.keys(feesGroup.nonePayable).length && (
             <CustomCollapsible
               triggerAnchor="bottom"
               onClickTrigger={() => setOpenCollapse((prev) => !prev)}

package/src/components/Quote/QuoteSummary.tsx

@@ -23,6 +23,7 @@ export function QuoteSummary(props: PropTypes) {
       <TokenAmount
         direction="horizontal"
         label={i18n.t('Swap input')}
+        id="widget-quote-summary-swap-input"
         type="input"
         tooltipContainer={getContainer()}
         price={{
@@ -39,6 +40,7 @@ export function QuoteSummary(props: PropTypes) {
       />
       <div className={separatorStyles()} />
       <TokenAmount
+        id="widget-quote-summary-estimated-input"
         direction="horizontal"
         tooltipContainer={getContainer()}
         label={i18n.t('Estimated output')}

package/src/components/Quote/QuoteTrigger.tsx

@@ -53,6 +53,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
 
   return (
     <Trigger
+      className="widget-quote-trigger-btn"
       listItem={type === 'list-item'}
       ref={(ref) => (quoteRef.current = ref)}
       selected={selected}

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -76,6 +76,7 @@ export function HighValueLossWarningModal(props: Props) {
 
   return (
     <WatermarkedModal
+      id="widget-high-value-loss-warning-modal"
       footer={
         <Button
           id="widget-high-value-loss-warning-modal-confirm-btn"

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -88,6 +88,7 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
         <Alerts>
           <Divider size={10} />
           <Alert
+            id="widget-quote-warning-and-errors-alert"
             title={alertInfo.title}
             type={alertInfo.alertType}
             variant="alarm"

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -29,6 +29,7 @@ export function SlippageWarningModal(props: PropsTypes) {
 
   return (
     <WatermarkedModal
+      id="widget-slippage-warning-modal"
       anchor="bottom"
       open={open}
       container={getContainer()}

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -19,6 +19,7 @@ export function UnknownPriceWarningModal(props: Props) {
   const { open, onClose, onConfirm, confirmationDisabled } = props;
   return (
     <WatermarkedModal
+      id="widget-unknown-price-warning-modal"
       footer={
         <Button
           id="widget-unknown-price-warning-modal-confirm-btn"

package/src/components/Quotes/Quotes.tsx

@@ -108,6 +108,7 @@ export function Quotes(props: PropTypes) {
                 return (
                   <React.Fragment key={quote.requestId}>
                     <QuoteInfo
+                      id="widget-quotes-quote-info-container"
                       showModalFee={showModalFee}
                       container={container}
                       selected={selectedQuote?.requestId === quote.requestId}

package/src/components/Quotes/SelectStrategy.tsx

@@ -37,6 +37,7 @@ export function SelectStrategy(props: { container: HTMLElement }) {
   return (
     <SelectContainer>
       <Select
+        id={'widget-quotes-strategy-select'}
         container={props.container}
         options={ROUTE_STRATEGY}
         value={sortStrategy}

package/src/components/RefreshModal/RefreshModal.tsx

@@ -17,6 +17,7 @@ export function RefreshModal(props: PropTypes) {
       open={open}
       dismissible
       onClose={onClose}
+      id="widget-refresh-modal"
       container={getContainer()}>
       <MessageBox
         title={i18n.t('Something went wrong')}
@@ -25,6 +26,7 @@ export function RefreshModal(props: PropTypes) {
         <Divider size={30} />
         <RefreshButton
           variant="outlined"
+          id="widget-refresh-modal-refresh-btn"
           size="large"
           type="primary"
           fullWidth

package/src/components/SearchInput/SearchInput.tsx

@@ -16,12 +16,16 @@ export function SearchInput(props: PropTypes) {
     style,
     setValue,
     suffix,
+    id,
     ...inputAttributes
   } = props;
 
   let inputSuffix = !!value.length ? (
-    // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
-    <IconButton variant="ghost" onClick={() => setValue?.('')} size="small">
+    <IconButton
+      id={`${id}۰icon-btn`}
+      variant="ghost"
+      onClick={() => setValue?.('')}
+      size="small">
       <CloseIcon color="gray" size={10} />
     </IconButton>
   ) : null;
@@ -37,6 +41,7 @@ export function SearchInput(props: PropTypes) {
           <SearchIcon color="black" />
         </IconWrapper>
       }
+      id={id}
       suffix={inputSuffix}
       fullWidth={fullWidth}
       color={color}

package/src/components/Slippage/Slippage.tsx

@@ -84,6 +84,7 @@ export function Slippage() {
           const key = `slippage-${index}`;
           return (
             <SlippageChip
+              id={`widget-slippage-chip-${slippageItem.toString()}%-btn`}
               key={key}
               onClick={() => onClickSlippageChip(slippageItem)}
               selected={customSlippage === null && slippageItem === slippage}
@@ -100,6 +101,7 @@ export function Slippage() {
             min="0.01"
             max="30"
             step="0.01"
+            id="widget-slippage-chip-text-input"
             onInput={onInput}
             fullWidth
             variant="contained"
@@ -122,6 +124,7 @@ export function Slippage() {
         <>
           <Divider size={10} />
           <Alert
+            id="widget-slippage-alert"
             variant="alarm"
             type={slippageValidation.type}
             title={slippageValidation.message}

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -31,6 +31,7 @@ const DELAY_SHOWING_MODAL_FOR = 300;
 
 interface PropTypes {
   wallet: WalletInfoWithExtra | undefined;
+  id: string;
   onClose: () => void;
   // When connecting wallet is executed **successfully**, this will be called afterwards.
   onConnect?: () => void;
@@ -155,6 +156,7 @@ export function StatefulConnectModal(props: PropTypes) {
 
   return (
     <WatermarkedModal
+      id={props.id}
       open={isConnecting}
       onClose={handleClosingModal}
       onExit={() => {

package/src/components/SwapDetails/SwapDetails.tsx

@@ -314,7 +314,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </Button>
         )
       }>
-      <Container compact ref={containerRef}>
+      <Container compact ref={containerRef} id="widget-swap-details-container">
         <RequestIdContainer className={rowStyles()}>
           <Typography variant="label" size="large" color="neutral700">
             {`${i18n.t('Request ID')}`}
@@ -443,6 +443,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               (state === 'completed' && index === steps.length - 1);
             return (
               <StepDetails
+                className={'widget-swap-details-step-item-container'}
                 key={key}
                 step={step}
                 type="swap-progress"

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Failed.tsx

@@ -13,6 +13,7 @@ export function FailedAlert(props: FailedAlertsProps) {
 
   return (
     <Alert
+      id="widget-failed-swap-details-alert"
       type="error"
       title={message.shortMessage}
       containerStyles={{
@@ -23,6 +24,7 @@ export function FailedAlert(props: FailedAlertsProps) {
       action={
         message.detailedMessage.content && (
           <IconButton
+            id="widget-swap-details-failed-btn"
             onClick={() => setShowContentError((prev) => !prev)}
             variant="ghost"
             size="xsmall">