feat: add id property to buttons

rango-exchange · Oct 9, 2024 · 39824e3 · 39824e3
1 parent 8032261
commit 39824e3
Show file tree

Hide file tree

Showing 45 changed files with 166 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,14 +15,20 @@ 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"
         onClick={onDelete}>
         {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
@@ -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={