Merge pull request #771 from relayprotocol/pedro/fe-7861-update-ui-labels

Update UI labels

Author: pedromcunha

.changeset/short-lies-leave.md

@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Add test ids for automation

packages/ui/src/components/common/CustomAddressModal.tsx

@@ -262,6 +262,7 @@ export const CustomAddressModal: FC<Props> = ({
             }
             onOpenChange(false)
           }}
+          data-testid="save-button"
         >
           Save
         </Button>

packages/ui/src/components/common/MultiWalletDropdown.tsx

@@ -18,6 +18,7 @@ type MultiWalletDropdownProps = {
   selectedWalletAddress?: string
   chain?: RelayChain
   disablePasteWalletAddressOption?: boolean
+  testId?: string
   onSelect: (wallet: LinkedWallet) => void
   onLinkNewWallet: () => void
   onAnalyticEvent?: (eventName: string, data?: any) => void
@@ -30,6 +31,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
   selectedWalletAddress,
   chain,
   disablePasteWalletAddressOption,
+  testId,
   onSelect,
   onAnalyticEvent,
   onLinkNewWallet,
@@ -141,6 +143,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
             display: 'flex',
             alignContent: 'center'
           }}
+          data-testid={testId}
         >
           <Flex align="center" css={{ gap: '1' }}>
             {isSupportedSelectedWallet && selectedWallet?.walletLogoUrl ? (

packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx

@@ -131,6 +131,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
         <AccessibleListItem value="input" asChild>
           <Input
             ref={onInputRef}
+            data-testid="chain-search-input"
             placeholder="Search chains"
             icon={
               <Box css={{ color: 'gray9' }}>

packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx

@@ -14,15 +14,15 @@ import useRelayClient from '../../../../hooks/useRelayClient.js'
 type TokenTriggerProps = {
   token?: Token
   locked?: boolean
-  isSingleChainLocked?: boolean
   address?: string
+  testId?: string
 }
 
 export const TokenTrigger: FC<TokenTriggerProps> = ({
   token,
   locked,
-  isSingleChainLocked,
-  address
+  address,
+  testId
 }) => {
   const relayClient = useRelayClient()
   const chain = relayClient?.chains?.find(
@@ -50,6 +50,7 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
           backgroundColor: 'widget-selector-background'
         }
       }}
+      data-testid={testId}
     >
       <Flex align="center" css={{ gap: '2' }}>
         <ChainTokenIcon

packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx

@@ -125,6 +125,7 @@ export const TransactionsByChain: FC<TransactionsByChainProps> = ({
                         alignItems: 'center',
                         gap: '2'
                       }}
+                      data-testid="transaction-link"
                     >
                       {truncateAddress(txHash)}
                       <FontAwesomeIcon
@@ -148,6 +149,7 @@ export const TransactionsByChain: FC<TransactionsByChainProps> = ({
                   alignItems: 'center',
                   gap: '2'
                 }}
+                data-testid="refund-transaction-link"
               >
                 {truncateAddress(refundTx?.txHash)}
                 <FontAwesomeIcon icon={faArrowUpRightFromSquare} width={16} />

packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx

@@ -424,8 +424,9 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                         margin: '0 auto',
                         marginBottom: '16px'
                       }}
+                      data-testid="onramp-token-select-button"
                     >
-                      <TokenTrigger isSingleChainLocked={true} token={token} />
+                      <TokenTrigger token={token} />
                     </div>
                   }
                 />
@@ -558,6 +559,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                     disablePasteWalletAddressOption={
                       disablePasteWalletAddressOption
                     }
+                    testId="onramp-wallet-select-button"
                   />
                 ) : null}
                 {!multiWalletSupportEnabled || !toChainWalletVMSupported ? (

packages/ui/src/components/widgets/SwapButton.tsx

@@ -77,6 +77,7 @@ const SwapButton: FC<SwapButtonProps> = ({
               isSameCurrencySameRecipientSwap ||
               !recipientWalletSupportsChain))
         }
+        data-testid="swap-button"
         onClick={() => {
           onClick()
         }}
@@ -101,6 +102,7 @@ const SwapButton: FC<SwapButtonProps> = ({
           context
         })
       }}
+      data-testid="widget-connect-wallet-button"
     >
       Connect Wallet
     </Button>

packages/ui/src/components/widgets/SwapWidget/index.tsx

@@ -791,6 +791,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             setAddressModalOpen={setAddressModalOpen}
                             wallets={linkedWallets!}
                             onAnalyticEvent={onAnalyticEvent}
+                            testId="origin-wallet-select-button"
                           />
                         ) : null}
                       </Flex>
@@ -899,8 +900,8 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               <TokenTrigger
                                 token={fromToken}
                                 locked={lockFromToken}
-                                isSingleChainLocked={isSingleChainLocked}
                                 address={address}
+                                testId="origin-token-select-button"
                               />
                             </div>
                           }
@@ -1274,6 +1275,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             setAddressModalOpen={setAddressModalOpen}
                             wallets={linkedWallets!}
                             onAnalyticEvent={onAnalyticEvent}
+                            testId="destination-wallet-select-button"
                           />
                         ) : null}
 
@@ -1420,8 +1422,8 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               <TokenTrigger
                                 token={toToken}
                                 locked={lockToToken}
-                                isSingleChainLocked={isSingleChainLocked}
                                 address={address}
+                                testId="destination-token-select-button"
                               />
                             </div>
                           }