From 39824e3ce8b1804b9944eb0faf71da7cdccf59ea Mon Sep 17 00:00:00 2001
From: Nikaru <nikaru@rango.exchange>
Date: Wed, 9 Oct 2024 07:26:59 +0000
Subject: [PATCH] feat: add id property to buttons

---
 .eslintrc.json                                | 12 ++++++++++--
 package.json                                  |  1 +
 .../BlockchainList/BlockchainList.tsx         |  3 ++-
 .../ConfirmWalletsModal.tsx                   |  3 +++
 .../CustomDestination/CustomDestination.tsx   | 10 ++++++++--
 .../CustomTokenModal/CustomTokenModal.tsx     |  1 +
 .../FilterSelector/FilterSelector.tsx         |  1 +
 .../FilterSelector/FilterSelectorContent.tsx  |  6 +++++-
 .../components/HeaderButtons/BackButton.tsx   |  6 +++++-
 .../components/HeaderButtons/CancelButton.tsx |  6 +++++-
 .../HeaderButtons/HeaderButtons.tsx           | 17 ++++++++++++++---
 .../HeaderButtons/RefreshButton.tsx           |  1 +
 .../components/HeaderButtons/WalletButton.tsx |  6 +++++-
 .../src/components/NoResult/NoResult.tsx      |  1 +
 .../src/components/Quote/QuoteCostDetails.tsx |  5 ++++-
 .../HighValueLossWarningModal.tsx             |  1 +
 .../QuoteWarningsAndErrors.tsx                |  1 +
 .../SlippageWariningModal.tsx                 |  2 ++
 .../UnknownPriceWarningModal.tsx              |  1 +
 .../components/SwapDetails/SwapDetails.tsx    |  3 +++
 .../SwapDetailsAlerts.Warning.tsx             |  2 ++
 .../SwapDetailsAlerts/SwapDetailsAlerts.tsx   |  1 +
 .../SwapDetailsCompleteModal.tsx              |  9 ++++++++-
 .../SwapDetailsModal.Cancel.tsx               |  8 +++++++-
 .../SwapDetailsModal.Delete.tsx               |  8 +++++++-
 .../src/components/TokenList/TokenList.tsx    |  1 +
 .../WalletStatefulConnect/DerivationPath.tsx  |  1 +
 .../ExperimentalChain.tsx                     |  1 +
 .../WalletStatefulConnect/Namespaces.tsx      |  1 +
 .../ActivateTabAlert/ActivateTabAlert.tsx     |  1 +
 .../ActivateTabModal/ActivateTabModal.tsx     |  1 +
 .../src/containers/Settings/Lists.tsx         | 12 ++++++------
 .../embedded/src/pages/AddCustomTokenPage.tsx |  6 +++++-
 widget/embedded/src/pages/ConfirmSwapPage.tsx |  2 ++
 .../embedded/src/pages/CustomTokensPage.tsx   |  4 ++++
 widget/embedded/src/pages/HistoryPage.tsx     |  3 +++
 widget/embedded/src/pages/Home.tsx            |  2 ++
 widget/embedded/src/pages/LanguagePage.tsx    |  2 +-
 .../src/pages/LiquiditySourcePage.tsx         | 19 ++++++++++++++++---
 widget/embedded/src/pages/SettingsPage.tsx    |  6 +++++-
 .../components/IconButton/IconButton.types.ts |  1 +
 widget/ui/src/components/List/List.tsx        |  2 +-
 .../src/components/ListItem/ListItem.types.ts |  2 ++
 .../ListItemButton/ListItemButton.tsx         |  1 +
 yarn.lock                                     | 12 ++++++++++++
 45 files changed, 166 insertions(+), 29 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index e0efaeeb18..a65b910337 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,7 +9,8 @@
     "import",
     "react",
     "react-hooks",
-    "destructuring"
+    "destructuring",
+    "jsx-id-attribute-enforcement"
   ],
   "extends": [
     "eslint:recommended",
@@ -107,7 +108,14 @@
     "@typescript-eslint/no-unnecessary-type-assertion": "error",
     "@typescript-eslint/prefer-enum-initializers": "error",
     "@typescript-eslint/promise-function-async": "error",
-    "@typescript-eslint/switch-exhaustiveness-check": "error"
+    "@typescript-eslint/switch-exhaustiveness-check": "error",
+    "jsx-id-attribute-enforcement/missing-ids": [
+      "error",
+      {
+        "targetCustom": ["Button", "IconButton"]
+      }
+    ]
+
     // "@typescript-eslint/explicit-function-return-type": "error",
     // "@typescript-eslint/naming-convention": [
     //   "error",
diff --git a/package.json b/package.json
index 905268c6c0..b44f7f4b8f 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-destructuring": "^2.2.1",
     "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-id-attribute-enforcement": "^1.0.2",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
diff --git a/widget/embedded/src/components/BlockchainList/BlockchainList.tsx b/widget/embedded/src/components/BlockchainList/BlockchainList.tsx
index 849c9abafd..958ec91658 100644
--- a/widget/embedded/src/components/BlockchainList/BlockchainList.tsx
+++ b/widget/embedded/src/components/BlockchainList/BlockchainList.tsx
@@ -48,6 +48,7 @@ export function BlockchainList(props: PropTypes) {
         {blockchains.map((item) => (
           <ListItemButton
             key={`${item.name}-${item.chainId}`}
+            className={`widget-blockchain-list-item-btn`}
             hasDivider
             onClick={() => onChange(item)}
             start={<Image src={item.logo} size={30} />}
@@ -56,7 +57,7 @@ export function BlockchainList(props: PropTypes) {
                 {item.displayName}
               </Typography>
             }
-            id={item.chainId as string}
+            id={item.name}
           />
         ))}
       </List>
diff --git a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx b/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx
index adefefe98f..e0c2647c3a 100644
--- a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx
+++ b/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx
@@ -331,6 +331,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
         footer: (
           <ConfirmButton>
             <Button
+              id="widget-confirm-wallet-modal-confirm-btn"
               loading={loading}
               disabled={isConfirmSwapDisabled(
                 loading,
@@ -355,6 +356,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
         header: (
           <ShowMoreHeader>
             <NavigateBack
+              id="widget-confirm-wallet-modal-navigate-back-icon-btn"
               variant="ghost"
               onClick={setShowMoreWalletFor.bind(null, '')}>
               <ChevronLeftIcon size={16} />
@@ -383,6 +385,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
           type="error"
           description={<BalanceErrors messages={balanceWarnings ?? []} />}>
           <Button
+            id="widget-confirm-wallet-modal-proceed-anyway-btn"
             variant="outlined"
             size="large"
             type="primary"
diff --git a/widget/embedded/src/components/CustomDestination/CustomDestination.tsx b/widget/embedded/src/components/CustomDestination/CustomDestination.tsx
index 7b2f1df3a5..f84e3e7a9a 100644
--- a/widget/embedded/src/components/CustomDestination/CustomDestination.tsx
+++ b/widget/embedded/src/components/CustomDestination/CustomDestination.tsx
@@ -63,13 +63,19 @@ export function CustomDestination(props: PropTypes) {
   const renderSuffix = () => {
     if (customDestination) {
       return (
-        <IconButton onClick={handleClear} variant="ghost">
+        <IconButton
+          id="widget-custom-destination-close-icon-btn"
+          onClick={handleClear}
+          variant="ghost">
           <CloseIcon size={12} color="gray" />
         </IconButton>
       );
     } else if (!isFirefox) {
       return (
-        <IconButton onClick={handlePaste} variant="ghost">
+        <IconButton
+          id="widget-custom-destination-paste-icon-btn"
+          onClick={handlePaste}
+          variant="ghost">
           <PasteIcon size={16} />
         </IconButton>
       );
diff --git a/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx b/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx
index 6419b662fc..8b3e330bde 100644
--- a/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx
+++ b/widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx
@@ -80,6 +80,7 @@ export function CustomTokenModal(props: PropTypes) {
       <Divider size={10} />
 
       <Button
+        id="widget-custom-token-modal-import-btn"
         variant="contained"
         size="large"
         type="primary"
diff --git a/widget/embedded/src/components/FilterSelector/FilterSelector.tsx b/widget/embedded/src/components/FilterSelector/FilterSelector.tsx
index 3b43e80ec8..5571a98ffe 100644
--- a/widget/embedded/src/components/FilterSelector/FilterSelector.tsx
+++ b/widget/embedded/src/components/FilterSelector/FilterSelector.tsx
@@ -28,6 +28,7 @@ export function FilterSelector(props: FilterSelectorPropTypes) {
           />
         }>
         <FilterButton
+          id="widget-filter-selector-filter-icon-btn"
           variant="default"
           isSelect={!!filterBy}
           onClick={() => onOpenChange(!props.open)}>
diff --git a/widget/embedded/src/components/FilterSelector/FilterSelectorContent.tsx b/widget/embedded/src/components/FilterSelector/FilterSelectorContent.tsx
index 853fb6c8d9..9aaf7574c9 100644
--- a/widget/embedded/src/components/FilterSelector/FilterSelectorContent.tsx
+++ b/widget/embedded/src/components/FilterSelector/FilterSelectorContent.tsx
@@ -25,7 +25,11 @@ export function FilterSelectorContent(props: PropTypes) {
         <Typography size="small" variant="body">
           {i18n.t('Status')}
         </Typography>
-        <Button variant="ghost" size="xxsmall" onClick={() => onClickItem('')}>
+        <Button
+          id="widget-filter-selector-reset-btn"
+          variant="ghost"
+          size="xxsmall"
+          onClick={() => onClickItem('')}>
           {i18n.t('Reset')}
         </Button>
       </div>
diff --git a/widget/embedded/src/components/HeaderButtons/BackButton.tsx b/widget/embedded/src/components/HeaderButtons/BackButton.tsx
index f674c44dcc..e7e8f007c4 100644
--- a/widget/embedded/src/components/HeaderButtons/BackButton.tsx
+++ b/widget/embedded/src/components/HeaderButtons/BackButton.tsx
@@ -7,7 +7,11 @@ import { HeaderButton } from './HeaderButtons.styles';
 
 function BackButton(props: PropTypes) {
   return (
-    <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
+    <HeaderButton
+      id="widget-header-back-icon-btn"
+      variant="ghost"
+      size="small"
+      onClick={props.onClick}>
       <ChevronLeftIcon color="black" size={16} />
     </HeaderButton>
   );
diff --git a/widget/embedded/src/components/HeaderButtons/CancelButton.tsx b/widget/embedded/src/components/HeaderButtons/CancelButton.tsx
index 99d3c8f226..13baf1df16 100644
--- a/widget/embedded/src/components/HeaderButtons/CancelButton.tsx
+++ b/widget/embedded/src/components/HeaderButtons/CancelButton.tsx
@@ -9,7 +9,11 @@ import { SuffixContainer } from './HeaderButtons.styles';
 function CancelButton(props: PropTypes) {
   return (
     <SuffixContainer>
-      <Button variant="ghost" onClick={props.onClick} size="xsmall">
+      <Button
+        id="widget-header-cancel-btn"
+        variant="ghost"
+        onClick={props.onClick}
+        size="xsmall">
         <Typography variant="label" size="medium" color="error500">
           {i18n.t('Cancel')}
         </Typography>
diff --git a/widget/embedded/src/components/HeaderButtons/HeaderButtons.tsx b/widget/embedded/src/components/HeaderButtons/HeaderButtons.tsx
index 1d1e71ec74..dd0405c8ba 100644
--- a/widget/embedded/src/components/HeaderButtons/HeaderButtons.tsx
+++ b/widget/embedded/src/components/HeaderButtons/HeaderButtons.tsx
@@ -61,7 +61,10 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
               container={getContainer()}
               side="top"
               content={i18n.t('Notifications')}>
-              <HeaderButton size="small" variant="ghost">
+              <HeaderButton
+                id="widget-header-notification-icon-btn"
+                size="small"
+                variant="ghost">
                 <NotificationsIcon size={18} color="black" />
                 <NotificationsBadge />
               </HeaderButton>
@@ -74,7 +77,11 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
           container={getContainer()}
           side="top"
           content={i18n.t('Settings')}>
-          <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
+          <HeaderButton
+            id="widget-header-setting-icon-btn"
+            size="small"
+            variant="ghost"
+            onClick={onClickSettings}>
             <SettingsIcon size={18} color="black" />
           </HeaderButton>
         </Tooltip>
@@ -84,7 +91,11 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
           container={getContainer()}
           side="top"
           content={i18n.t('History')}>
-          <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
+          <HeaderButton
+            id="widget-header-history-icon-btn"
+            size="small"
+            variant="ghost"
+            onClick={onClickHistory}>
             <TransactionIcon size={18} color="black" />
             <InProgressTransactionBadge />
           </HeaderButton>
diff --git a/widget/embedded/src/components/HeaderButtons/RefreshButton.tsx b/widget/embedded/src/components/HeaderButtons/RefreshButton.tsx
index d66cd9907c..0fcdf8b3ac 100644
--- a/widget/embedded/src/components/HeaderButtons/RefreshButton.tsx
+++ b/widget/embedded/src/components/HeaderButtons/RefreshButton.tsx
@@ -61,6 +61,7 @@ function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
 
   return (
     <HeaderButton
+      id="widget-header-refresh-icon-btn"
       variant="ghost"
       size="small"
       style={{ paddingTop: 0, paddingBottom: 0 }}
diff --git a/widget/embedded/src/components/HeaderButtons/WalletButton.tsx b/widget/embedded/src/components/HeaderButtons/WalletButton.tsx
index e8bb090c69..0bbdacc500 100644
--- a/widget/embedded/src/components/HeaderButtons/WalletButton.tsx
+++ b/widget/embedded/src/components/HeaderButtons/WalletButton.tsx
@@ -32,7 +32,11 @@ function WalletButton(props: PropTypes) {
 
   return (
     <Tooltip container={props.container} side="bottom" content={content}>
-      <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
+      <HeaderButton
+        id="widget-header-wallet-icon-btn"
+        variant="ghost"
+        size="small"
+        onClick={props.onClick}>
         {props.isConnected && <ConnectedIcon />}
         <WalletIcon size={18} color="black" />
       </HeaderButton>
diff --git a/widget/embedded/src/components/NoResult/NoResult.tsx b/widget/embedded/src/components/NoResult/NoResult.tsx
index 857312b71f..941b1cd3b8 100644
--- a/widget/embedded/src/components/NoResult/NoResult.tsx
+++ b/widget/embedded/src/components/NoResult/NoResult.tsx
@@ -68,6 +68,7 @@ export function NoResult(props: PropTypes) {
               info.alert.action && (
                 <Button
                   size="xsmall"
+                  id="widget-no-result-alert-btn"
                   type={info.alert.type}
                   prefix={
                     <PrefixIcon>
diff --git a/widget/embedded/src/components/Quote/QuoteCostDetails.tsx b/widget/embedded/src/components/Quote/QuoteCostDetails.tsx
index e2dc5ef058..4e3c9b2d05 100644
--- a/widget/embedded/src/components/Quote/QuoteCostDetails.tsx
+++ b/widget/embedded/src/components/Quote/QuoteCostDetails.tsx
@@ -91,7 +91,10 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
               {i18n.t('Gas & Fee Explanation')}
             </Typography>
 
-            <IconButton onClick={() => setOpen(false)} variant="ghost">
+            <IconButton
+              id="widget-quote-cost-details-modal-close-icon-btn"
+              onClick={() => setOpen(false)}
+              variant="ghost">
               <CloseIcon color="gray" size={14} />
             </IconButton>
           </ModalHeader>
diff --git a/widget/embedded/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx b/widget/embedded/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx
index 97b5da0754..2440e622d7 100644
--- a/widget/embedded/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx
+++ b/widget/embedded/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx
@@ -78,6 +78,7 @@ export function HighValueLossWarningModal(props: Props) {
     <WatermarkedModal
       footer={
         <Button
+          id="widget-high-value-loss-warning-modal-confirm-btn"
           type="primary"
           size="large"
           prefix={<WarningIcon />}
diff --git a/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx b/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx
index 9a06b0f670..b1874144c7 100644
--- a/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx
+++ b/widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx
@@ -71,6 +71,7 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
             {...(alertInfo.action === 'change-settings' && {
               action: (
                 <Button
+                  id="widget-quote-warning-error-change-settings-btn"
                   size="xxsmall"
                   type={alertInfo.alertType}
                   onClick={onChangeSettings}>
diff --git a/widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx b/widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx
index 56ab809c70..9778c143f9 100644
--- a/widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx
+++ b/widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx
@@ -35,6 +35,7 @@ export function SlippageWarningModal(props: PropsTypes) {
       prefix={
         <Button
           size="small"
+          id="widget-slippage-warning-modal-change-settings-btn"
           variant="ghost"
           onClick={() => navigate('../' + navigationRoutes.settings)}>
           <Typography variant="label" size="medium" color="$neutral900">
@@ -67,6 +68,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         <Divider size={18} />
         <Divider size={32} />
         <Button
+          id="widget-slippage-warning-modal-confirm-anyway-btn"
           size="large"
           type="primary"
           variant="contained"
diff --git a/widget/embedded/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx b/widget/embedded/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx
index 179edec625..97040dba37 100644
--- a/widget/embedded/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx
+++ b/widget/embedded/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx
@@ -21,6 +21,7 @@ export function UnknownPriceWarningModal(props: Props) {
     <WatermarkedModal
       footer={
         <Button
+          id="widget-unknown-price-warning-modal-confirm-btn"
           type="primary"
           size="large"
           prefix={<WarningIcon />}
diff --git a/widget/embedded/src/components/SwapDetails/SwapDetails.tsx b/widget/embedded/src/components/SwapDetails/SwapDetails.tsx
index 1933c943e8..18bae9b5f4 100644
--- a/widget/embedded/src/components/SwapDetails/SwapDetails.tsx
+++ b/widget/embedded/src/components/SwapDetails/SwapDetails.tsx
@@ -272,6 +272,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         suffix: swap.status !== 'running' && (
           <SuffixContainer>
             <Button
+              id="widget-swap-details-delete-btn"
               variant="ghost"
               type="error"
               size="xsmall"
@@ -288,6 +289,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         !showCompletedModal && (
           <Button
             fullWidth
+            id="widget-swap-details-try-again-btn"
             variant="contained"
             type="primary"
             size="large"
@@ -325,6 +327,7 @@ export function SwapDetails(props: SwapDetailsProps) {
                 alignOffset={-16}
                 align="end">
                 <IconButton
+                  id="widget-swap-details-done-copy-icon-btn"
                   variant="ghost"
                   onClick={handleCopy.bind(null, requestId || '')}>
                   {isCopied ? (
diff --git a/widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx b/widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx
index caff0792f1..93c49ba67a 100644
--- a/widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx
+++ b/widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx
@@ -14,6 +14,7 @@ export function WarningAlert(props: WaningAlertsProps) {
         title={message.shortMessage}
         action={
           <Button
+            id="widget-swap-details-warning-alert-change-network-btn"
             size="xxsmall"
             type="warning"
             onClick={() => {
@@ -37,6 +38,7 @@ export function WarningAlert(props: WaningAlertsProps) {
         title={message.shortMessage}
         action={
           <Button
+            id="widget-swap-details-warning-alert-connect-wallet-btn"
             size="xxsmall"
             type="warning"
             onClick={() => {
diff --git a/widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx b/widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx
index a566c41d84..5a84f96fef 100644
--- a/widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx
+++ b/widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx
@@ -53,6 +53,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
               action={
                 explorerUrl.url && (
                   <IconButton
+                    id="widget-swap-details-tx-link-icon-btn"
                     variant="ghost"
                     size="xsmall"
                     onClick={() => window.open(explorerUrl.url, '_blank')}>
diff --git a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx
index 2bb1b65c55..2a5da83dff 100644
--- a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx
+++ b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx
@@ -75,6 +75,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
       <Divider size={32} />
       {status === 'success' && (
         <Button
+          id="widget-swap-details-modal-done-btn"
           variant="contained"
           type="primary"
           size="large"
@@ -92,6 +93,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
         <>
           <Button
             variant="contained"
+            id="widget-swap-detail-modal-diagnosis-btn"
             type="primary"
             size="large"
             onClick={() => window.open(diagnosisUrl, '_blank')}>
@@ -100,7 +102,12 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           <Divider size={12} />
         </>
       )}
-      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+      <Button
+        id="widget-swap-details-modal-see-details-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
         <Typography variant="title" size="medium" color="primary">
           {i18n.t('See Details')}
         </Typography>
diff --git a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx
index c9e95be21c..91fae0576f 100644
--- a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx
+++ b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx
@@ -16,13 +16,19 @@ export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
       <Divider size={32} />
       <Button
         variant="contained"
+        id="widget-swap-details-modal-cancel-swap-yes-btn"
         type="primary"
         size="large"
         onClick={onCancel}>
         {i18n.t('Yes, Cancel it')}
       </Button>
       <Divider size={12} />
-      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+      <Button
+        id="widget-swap-details-modal-cancel-swap-no-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
         {i18n.t('No, Continue')}
       </Button>
     </>
diff --git a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx
index 367abe1947..1217f792a0 100644
--- a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx
+++ b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx
@@ -15,6 +15,7 @@ export const DeleteContent = ({ onDelete, onClose }: DeleteContentProps) => {
       />
       <Divider size={32} />
       <Button
+        id="widget-swap-details-modal-delete-swap-yes-btn"
         variant="contained"
         type="primary"
         size="large"
@@ -22,7 +23,12 @@ export const DeleteContent = ({ onDelete, onClose }: DeleteContentProps) => {
         {i18n.t('Yes, Delete it')}
       </Button>
       <Divider size={12} />
-      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+      <Button
+        id="widget-swap-details-modal-delete-swap-no-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
         <Typography variant="title" size="medium" color="primary">
           {i18n.t('No, Cancel')}
         </Typography>
diff --git a/widget/embedded/src/components/TokenList/TokenList.tsx b/widget/embedded/src/components/TokenList/TokenList.tsx
index dae2e4ce77..b8d6a1d62e 100644
--- a/widget/embedded/src/components/TokenList/TokenList.tsx
+++ b/widget/embedded/src/components/TokenList/TokenList.tsx
@@ -202,6 +202,7 @@ export function TokenList(props: PropTypes) {
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}
                 id={`${token.symbol}${token.address}`}
+                className={`widget-token-list-item-btn`}
                 hasDivider
                 onClick={() => onChange && onChange(tokens[index])}
                 start={
diff --git a/widget/embedded/src/components/WalletStatefulConnect/DerivationPath.tsx b/widget/embedded/src/components/WalletStatefulConnect/DerivationPath.tsx
index 46e38e221a..5d1a9a57b0 100644
--- a/widget/embedded/src/components/WalletStatefulConnect/DerivationPath.tsx
+++ b/widget/embedded/src/components/WalletStatefulConnect/DerivationPath.tsx
@@ -143,6 +143,7 @@ export function DerivationPath(props: PropTypes) {
       </InputsContainer>
 
       <Button
+        id="widget-derivation-path-confirm-btn"
         type="primary"
         onClick={handleConfirm}
         disabled={
diff --git a/widget/embedded/src/components/WalletStatefulConnect/ExperimentalChain.tsx b/widget/embedded/src/components/WalletStatefulConnect/ExperimentalChain.tsx
index 0d20e2fe50..dd717ec432 100644
--- a/widget/embedded/src/components/WalletStatefulConnect/ExperimentalChain.tsx
+++ b/widget/embedded/src/components/WalletStatefulConnect/ExperimentalChain.tsx
@@ -24,6 +24,7 @@ export function ExperimentalChain(props: PropTypes) {
       <Divider size={18} />
       <Divider size={32} />
       <Button
+        id="widget-experimental-chain-confirm-btn"
         onClick={onConfirm}
         variant="outlined"
         type="primary"
diff --git a/widget/embedded/src/components/WalletStatefulConnect/Namespaces.tsx b/widget/embedded/src/components/WalletStatefulConnect/Namespaces.tsx
index f756274915..a5ca1ac940 100644
--- a/widget/embedded/src/components/WalletStatefulConnect/Namespaces.tsx
+++ b/widget/embedded/src/components/WalletStatefulConnect/Namespaces.tsx
@@ -109,6 +109,7 @@ export function Namespaces(props: PropTypes) {
         )}
       </NamespaceList>
       <Button
+        id="widget-name-space-confirm-btn"
         type="primary"
         disabled={!selectedNamespaces.length}
         onClick={() => props.onConfirm(selectedNamespaces)}>
diff --git a/widget/embedded/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx b/widget/embedded/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx
index 05193af6a6..3512e6d255 100644
--- a/widget/embedded/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx
+++ b/widget/embedded/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx
@@ -9,6 +9,7 @@ export function ActivateTabAlert(props: PropTypes) {
     <Alert
       action={
         <Button
+          id="widget-active-tab-btn"
           onClick={props.onActivateTab}
           variant="contained"
           size="xxsmall"
diff --git a/widget/embedded/src/components/common/ActivateTabModal/ActivateTabModal.tsx b/widget/embedded/src/components/common/ActivateTabModal/ActivateTabModal.tsx
index 6f1046d701..bfc527ee76 100644
--- a/widget/embedded/src/components/common/ActivateTabModal/ActivateTabModal.tsx
+++ b/widget/embedded/src/components/common/ActivateTabModal/ActivateTabModal.tsx
@@ -24,6 +24,7 @@ export function ActivateTabModal(props: PropTypes) {
         )}>
         <Divider size={20} />
         <Button
+          id="widget-modal-confirm-activate-tab-btn"
           variant="contained"
           size="large"
           type="primary"
diff --git a/widget/embedded/src/containers/Settings/Lists.tsx b/widget/embedded/src/containers/Settings/Lists.tsx
index 4336f34d1e..6745f85899 100644
--- a/widget/embedded/src/containers/Settings/Lists.tsx
+++ b/widget/embedded/src/containers/Settings/Lists.tsx
@@ -150,7 +150,7 @@ export function SettingsLists() {
   };
 
   const bridgeItem = {
-    id: 'bridge-item',
+    id: 'widget-setting-bridge-item-btn',
     title: (
       <Typography variant="title" size="xmedium">
         {i18n.t('Bridges')}
@@ -168,7 +168,7 @@ export function SettingsLists() {
   };
 
   const exchangeItem = {
-    id: 'exchange-item',
+    id: 'widget-setting-exchange-item-btn',
     title: (
       <Typography variant="title" size="xmedium">
         {i18n.t('Exchanges')}
@@ -189,7 +189,7 @@ export function SettingsLists() {
   };
 
   const customTokensItem = {
-    id: 'custom-tokens-item',
+    id: 'widget-setting-custom-tokens-item-btn',
     title: (
       <Typography variant="title" size="xmedium">
         {i18n.t('Custom Tokens')}
@@ -208,7 +208,7 @@ export function SettingsLists() {
     onClick: () => navigate(navigationRoutes.customTokens),
   };
   const languageItem = {
-    id: 'language-item',
+    id: 'widget-setting-language-item-btn',
     title: (
       <Typography variant="title" size="xmedium">
         {i18n.t('Language')}
@@ -228,7 +228,7 @@ export function SettingsLists() {
   };
 
   const infiniteApprovalItem = {
-    id: 'infinite-approval-item',
+    id: 'widget-setting-infinite-approval-item-btn',
     title: (
       <>
         <Typography variant="title" size="xmedium">
@@ -259,7 +259,7 @@ export function SettingsLists() {
   };
 
   const themeItem = {
-    id: 'theme-item',
+    id: 'widget-setting-theme-item-btn',
     type: <ListItem />,
     title: (
       <Typography variant="title" size="xmedium">
diff --git a/widget/embedded/src/pages/AddCustomTokenPage.tsx b/widget/embedded/src/pages/AddCustomTokenPage.tsx
index 516608b95d..c3982b6e05 100644
--- a/widget/embedded/src/pages/AddCustomTokenPage.tsx
+++ b/widget/embedded/src/pages/AddCustomTokenPage.tsx
@@ -154,6 +154,7 @@ export function AddCustomTokenPage() {
           </div>
 
           <Button
+            id="widget-add-custom-token-import-btn"
             disabled={isImportDisabled}
             type="primary"
             variant="contained"
@@ -176,8 +177,11 @@ export function AddCustomTokenPage() {
             }>
             <Divider size={40} />
             <Divider size={10} />
-
+            {/* eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids */}
             <Button
+              id={`widget-add-custom-token-${
+                networkError ? 'retry' : 'add-another'
+              }-btn`}
               variant="contained"
               size="large"
               type="primary"
diff --git a/widget/embedded/src/pages/ConfirmSwapPage.tsx b/widget/embedded/src/pages/ConfirmSwapPage.tsx
index 58f1fb7f9a..b5d52f7ed4 100644
--- a/widget/embedded/src/pages/ConfirmSwapPage.tsx
+++ b/widget/embedded/src/pages/ConfirmSwapPage.tsx
@@ -243,6 +243,7 @@ export function ConfirmSwapPage() {
         <Buttons>
           <div className={confirmBtnStyles()}>
             <Button
+              id="widget-confirm-swap-start-btn"
               variant="contained"
               type="primary"
               size="large"
@@ -254,6 +255,7 @@ export function ConfirmSwapPage() {
             </Button>
           </div>
           <IconButton
+            id="widget-confirm-swap-wallet-icon-btn"
             variant="contained"
             type="primary"
             size="large"
diff --git a/widget/embedded/src/pages/CustomTokensPage.tsx b/widget/embedded/src/pages/CustomTokensPage.tsx
index 7e166116fc..03917764d5 100644
--- a/widget/embedded/src/pages/CustomTokensPage.tsx
+++ b/widget/embedded/src/pages/CustomTokensPage.tsx
@@ -110,6 +110,7 @@ export function CustomTokensPage() {
                 showTitle={false}
                 action={(token) => (
                   <DeleteIconButton
+                    id="widget-custom-token-delete-icon-btn"
                     variant="ghost"
                     onClick={() => {
                       setIsDeleteModalOpen(true);
@@ -140,6 +141,7 @@ export function CustomTokensPage() {
           <Divider size={20} />
 
           <Button
+            id="widget-custom-token-add-btn"
             type="primary"
             variant="contained"
             size="large"
@@ -161,6 +163,7 @@ export function CustomTokensPage() {
 
             <Button
               fullWidth
+              id="widget-custom-token-delete-modal-yes-btn"
               variant="contained"
               type="primary"
               size="large"
@@ -169,6 +172,7 @@ export function CustomTokensPage() {
             </Button>
             <Divider size={12} />
             <Button
+              id="widget-custom-token-delete-modal-no-btn"
               fullWidth
               variant="outlined"
               type="primary"
diff --git a/widget/embedded/src/pages/HistoryPage.tsx b/widget/embedded/src/pages/HistoryPage.tsx
index 91f8c30aea..83c4b018df 100644
--- a/widget/embedded/src/pages/HistoryPage.tsx
+++ b/widget/embedded/src/pages/HistoryPage.tsx
@@ -140,6 +140,7 @@ export function HistoryPage() {
         suffix: (
           <SuffixContainer>
             <Button
+              id="widget-history-clear-btn"
               disabled={isClearButtonDisabled}
               variant="ghost"
               size="xsmall"
@@ -234,6 +235,7 @@ export function HistoryPage() {
         />
         <Divider size={30} />
         <Button
+          id="widget-history-clear-modal-yes-btn"
           variant="contained"
           type="primary"
           size="large"
@@ -242,6 +244,7 @@ export function HistoryPage() {
         </Button>
         <Divider size={10} />
         <Button
+          id="widget-history-clear-modal-no-btn"
           variant="outlined"
           type="primary"
           size="large"
diff --git a/widget/embedded/src/pages/Home.tsx b/widget/embedded/src/pages/Home.tsx
index d377f2f15f..a59ca27e44 100644
--- a/widget/embedded/src/pages/Home.tsx
+++ b/widget/embedded/src/pages/Home.tsx
@@ -128,7 +128,9 @@ export function Home() {
       <Layout
         height="auto"
         footer={
+          // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
           <Button
+            id={`widget-swap-${swapButtonState.action}-btn`}
             type="primary"
             size="large"
             disabled={swapButtonState.disabled || !isActiveTab}
diff --git a/widget/embedded/src/pages/LanguagePage.tsx b/widget/embedded/src/pages/LanguagePage.tsx
index f820850cec..1ef1f93ece 100644
--- a/widget/embedded/src/pages/LanguagePage.tsx
+++ b/widget/embedded/src/pages/LanguagePage.tsx
@@ -21,7 +21,7 @@ export function LanguagePage() {
   const languageList = languages.map((languageItem) => {
     const { local, label, SVGFlag } = languageItem;
     return {
-      id: local,
+      id: `widget-setting-languages-${local}-item-btn`,
       value: local,
       title: (
         <Typography variant="title" size="xmedium">
diff --git a/widget/embedded/src/pages/LiquiditySourcePage.tsx b/widget/embedded/src/pages/LiquiditySourcePage.tsx
index 4002cad684..f9146db25f 100644
--- a/widget/embedded/src/pages/LiquiditySourcePage.tsx
+++ b/widget/embedded/src/pages/LiquiditySourcePage.tsx
@@ -68,8 +68,11 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   };
 
   const list = liquiditySources.map((sourceItem) => {
-    const { selected, groupTitle, logo } = sourceItem;
+    const { selected, groupTitle, logo, id, ...restSourceItem } = sourceItem;
     return {
+      id: `widget-setting-liquidity-source-${id
+        .toLowerCase()
+        .replace(/\s+/g, '-')}-item-btn`,
       start: <Image src={logo} size={22} type="circular" />,
       onClick: () => {
         if (!campaignMode) {
@@ -82,7 +85,10 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           {i18n.t(groupTitle)}
         </Typography>
       ),
-      ...sourceItem,
+      selected,
+      groupTitle,
+      logo,
+      ...restSourceItem,
     };
   });
 
@@ -104,7 +110,14 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
         title: i18n.t(sourceType),
         suffix: (
           <LiquiditySourceSuffix>
-            <Button variant="ghost" size="xsmall" onClick={toggleAllSources}>
+            {/* eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids */}
+            <Button
+              id={`widget-liquidity-source-${
+                hasSelectAll ? 'deselect-all' : 'select-all'
+              }-btn`}
+              variant="ghost"
+              size="xsmall"
+              onClick={toggleAllSources}>
               {hasSelectAll ? i18n.t('Deselect all') : i18n.t('Select all')}
             </Button>
           </LiquiditySourceSuffix>
diff --git a/widget/embedded/src/pages/SettingsPage.tsx b/widget/embedded/src/pages/SettingsPage.tsx
index 4a20ff023a..42e726f846 100644
--- a/widget/embedded/src/pages/SettingsPage.tsx
+++ b/widget/embedded/src/pages/SettingsPage.tsx
@@ -47,7 +47,11 @@ export function SettingsPage() {
             )}
             action={
               <ResetAction>
-                <Button type="secondary" size="small" onClick={onClick}>
+                <Button
+                  id="widget-setting-exit-campaign-mode-btn"
+                  type="secondary"
+                  size="small"
+                  onClick={onClick}>
                   {i18n.t('Reset')}
                 </Button>
               </ResetAction>
diff --git a/widget/ui/src/components/IconButton/IconButton.types.ts b/widget/ui/src/components/IconButton/IconButton.types.ts
index 0bc39f8040..c66c7ca006 100644
--- a/widget/ui/src/components/IconButton/IconButton.types.ts
+++ b/widget/ui/src/components/IconButton/IconButton.types.ts
@@ -2,6 +2,7 @@ import type { ButtonPropTypes } from '../Button/Button.types.js';
 import type { CSSProperties } from 'react';
 
 export type IconButtonPropTypes = {
+  id?: ButtonPropTypes['id'];
   size?: ButtonPropTypes['size'];
   type?: ButtonPropTypes['type'];
   variant?: ButtonPropTypes['variant'];
diff --git a/widget/ui/src/components/List/List.tsx b/widget/ui/src/components/List/List.tsx
index 80f99d2db4..dc7d9f67ac 100644
--- a/widget/ui/src/components/List/List.tsx
+++ b/widget/ui/src/components/List/List.tsx
@@ -20,7 +20,7 @@ function List(props: ListPropTypes) {
             id,
           });
         }
-        return <ListItem key={id} {...itemProps} />;
+        return <ListItem key={id} id={id} {...itemProps} />;
       })}
     </BaseList>
   );
diff --git a/widget/ui/src/components/ListItem/ListItem.types.ts b/widget/ui/src/components/ListItem/ListItem.types.ts
index 9dbe704dd0..cf64dc93f7 100644
--- a/widget/ui/src/components/ListItem/ListItem.types.ts
+++ b/widget/ui/src/components/ListItem/ListItem.types.ts
@@ -1,4 +1,5 @@
 export type ListItemPropTypes = {
+  id?: string;
   title?: string | React.ReactElement;
   description?: string | React.ReactElement;
   start?: React.ReactNode;
@@ -8,4 +9,5 @@ export type ListItemPropTypes = {
   onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
   hasDivider?: boolean;
   tabIndex?: number;
+  className?: string;
 };
diff --git a/widget/ui/src/components/ListItemButton/ListItemButton.tsx b/widget/ui/src/components/ListItemButton/ListItemButton.tsx
index 0b52595617..018d99413b 100644
--- a/widget/ui/src/components/ListItemButton/ListItemButton.tsx
+++ b/widget/ui/src/components/ListItemButton/ListItemButton.tsx
@@ -15,6 +15,7 @@ function ListItemButton(props: ListItemButtonProps) {
   return (
     <BaseListItemButton
       onClick={onClickWithKey}
+      id={id}
       aria-label="button"
       selected={selected}
       onKeyUp={(e: { key: string }) => {
diff --git a/yarn.lock b/yarn.lock
index b2663fb2f1..88b486dc92 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11907,6 +11907,13 @@ eslint-plugin-import@^2.27.5:
     semver "^6.3.1"
     tsconfig-paths "^3.14.2"
 
+eslint-plugin-jsx-id-attribute-enforcement@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-id-attribute-enforcement/-/eslint-plugin-jsx-id-attribute-enforcement-1.0.2.tgz#eb72009ef1c2d150bf7466be2b1d0008fe6de61b"
+  integrity sha512-xWg5lJ+z1/+WByCdtIAepKRx8J8GAeYGw4MmlAkEfdyCpj/UMEb+FVCmEVOJbXdyvTPq8xNfhIW/43eInykHPg==
+  dependencies:
+    requireindex "~1.1.0"
+
 eslint-plugin-prettier@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
@@ -17322,6 +17329,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+requireindex@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.1.0.tgz#e5404b81557ef75db6e49c5a72004893fe03e162"
+  integrity sha512-LBnkqsDE7BZKvqylbmn7lTIVdpx4K/QCduRATpO5R+wtPmky/a8pN1bO2D6wXppn1497AJF9mNjqAXr6bdl9jg==
+
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"