From ede4e6583858e8db292a233c3c9d3e9e47817b99 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Thu, 7 Nov 2024 18:28:13 +1000
Subject: [PATCH 1/2] chore: Add class name WIP

---
 .../components/Button/RefreshingButton.tsx       |  1 +
 .../transfer/components/FromSection/index.tsx    | 10 +++++++++-
 .../transfer/components/NetWorkSection/index.tsx | 11 +++++++++--
 .../transfer/components/SelectButton/index.tsx   |  2 ++
 .../transfer/components/ToSection/index.tsx      | 10 +++++++++-
 .../RouteInfo/AllowedSendAmount.tsx              |  1 +
 .../RouteInfo/EstimatedArrivalTime.tsx           |  5 +++--
 .../TransferOverview/RouteInfo/FeeBreakdown.tsx  |  7 ++++++-
 .../TransferOverview/RouteInfo/FeesInfo.tsx      |  3 +++
 .../RouteInfo/OtherRouteError.tsx                |  1 +
 .../RouteInfo/RouteName/BestRouteTag.tsx         |  1 +
 .../RouteInfo/RouteName/index.tsx                |  2 ++
 .../TransferOverview/RouteInfo/RouteSkeleton.tsx |  1 +
 .../TransferOverview/RouteInfo/RouteTitle.tsx    | 10 +++++++++-
 .../TransferOverview/RouteInfo/RouteWrapper.tsx  |  1 +
 .../RouteInfo/TokenInfoTooltip.tsx               |  2 +-
 .../components/TransferOverview/index.tsx        | 16 +++++++++++++---
 .../TransferOverview/modal/RoutesModal.tsx       | 11 +++++++++--
 .../src/modules/transfer/index.tsx               |  2 ++
 19 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx
index cae4f583..81adfeb7 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx
@@ -66,6 +66,7 @@ export const RefreshingButton = (props: BoxProps) => {
 
   return transferActionInfo ? (
     <Box
+      className={'bccb-widget-refreshing-button'}
       cursor={!isGlobalFeeLoading && !isRefreshing ? 'pointer' : 'not-allowed'}
       color={theme.colors[colorMode].button.refresh.text}
       _hover={{
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
index 3f143046..ae7cbddf 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
@@ -14,8 +14,16 @@ export function FromSection() {
   const theme = useTheme();
 
   return (
-    <Flex flexDir="column" gap={'12px'} w={'100%'} flex={1} h={'64px'}>
+    <Flex
+      className="bccb-widget-network-from"
+      flexDir="column"
+      gap={'12px'}
+      w={'100%'}
+      flex={1}
+      h={'64px'}
+    >
       <Flex
+        className="bccb-widget-network-title"
         alignItems="center"
         justifyContent={'space-between'}
         display={{ base: 'flex', md: 'none' }}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
index 6dc469af..e3dc000d 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
@@ -10,9 +10,14 @@ export const NetWorkSection = () => {
   const theme = useTheme();
 
   return (
-    <Flex flexDir={'column'} gap={'12px'}>
+    <Flex className="bccb-widget-network" flexDir={'column'} gap={'12px'}>
       <Flex flexDir={'row'} display={{ base: 'none', md: 'flex' }}>
-        <Flex alignItems="center" justifyContent={'space-between'} flex={1}>
+        <Flex
+          className="bccb-widget-network-title"
+          alignItems="center"
+          justifyContent={'space-between'}
+          flex={1}
+        >
           <Typography
             variant="body"
             size={'sm'}
@@ -23,6 +28,7 @@ export const NetWorkSection = () => {
           </Typography>
         </Flex>
         <Flex
+          className="bccb-widget-network-title"
           alignItems="center"
           justifyContent={'space-between'}
           flex={1}
@@ -40,6 +46,7 @@ export const NetWorkSection = () => {
         </Flex>
       </Flex>{' '}
       <Flex
+        className="bccb-widget-network-row"
         flexDir={['column', 'column', 'row']}
         justifyContent={'space-between'}
         alignItems={'center'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx
index c62d4d1a..344b843f 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx
@@ -17,6 +17,7 @@ export function SelectButton(props: SelectButtonProps) {
 
   return (
     <Button
+      className="bccb-widget-network-button"
       borderRadius={'8px'}
       flexShrink={0}
       h={'64px'}
@@ -42,6 +43,7 @@ export function SelectButton(props: SelectButtonProps) {
       <Flex gap={'12px'} alignItems={'center'} position={'relative'} overflow="hidden">
         <IconImage src={chain?.icon} fallbackBgColor={theme.colors[colorMode].support.primary[4]} />
         <Flex
+          className="bccb-widget-network-name"
           flexDir={'column'}
           alignItems={'flex-start'}
           whiteSpace="nowrap"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
index ad33a7c6..0b3d60b2 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
@@ -13,8 +13,16 @@ export function ToSection() {
   const toChain = useAppSelector((state) => state.transfer.toChain);
 
   return (
-    <Flex flexDir="column" gap={'12px'} w={'100%'} flex={1} h={'64px'}>
+    <Flex
+      className="bccb-widget-network-to"
+      flexDir="column"
+      gap={'12px'}
+      w={'100%'}
+      flex={1}
+      h={'64px'}
+    >
       <Flex
+        className="bccb-widget-network-title"
         alignItems="center"
         justifyContent={'space-between'}
         display={{ base: 'flex', md: 'none' }}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx
index cb725ebd..f55712c6 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx
@@ -21,6 +21,7 @@ export const AllowedSendAmount = ({
 
   return allowedSendAmount && isError ? (
     <Flex
+      className="bccb-widget-allowed-send-amount"
       flexDir={'row'}
       alignItems={'center'}
       color={
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/EstimatedArrivalTime.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/EstimatedArrivalTime.tsx
index 35971613..28ede3de 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/EstimatedArrivalTime.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/EstimatedArrivalTime.tsx
@@ -44,6 +44,7 @@ export const EstimatedArrivalTime = ({
 
   return (
     <Flex
+      className="bccb-widget-route-estimated-time"
       gap={'4px'}
       flexDir={'row'}
       alignItems={'center'}
@@ -53,11 +54,11 @@ export const EstimatedArrivalTime = ({
       {...otherProps}
     >
       <TimerIcon w={'16px'} h={'16px'} />
-      <Box fontSize={['14px']} fontWeight={400}>
+      <Box className="bccb-widget-route-info-label" fontSize={['14px']} fontWeight={400}>
         {formatMessage({ id: 'route.time.title' })}
       </Box>
       {waitingTime ? (
-        <Box fontSize={'14px'} fontWeight={500}>
+        <Box className="bccb-widget-route-info-text" fontSize={'14px'} fontWeight={500}>
           ~{formatEstimatedTime(waitingTime)}
         </Box>
       ) : (
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeeBreakdown.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeeBreakdown.tsx
index c961bde0..2fee40aa 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeeBreakdown.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeeBreakdown.tsx
@@ -4,7 +4,12 @@ export const FeeBreakdown = ({ title, value }: { title: string; value: string })
   const theme = useTheme();
   // TODO: Use colorMode
   return (
-    <Flex flexDir={'row'} color={theme.colors.light.text.primary} gap={'4px'}>
+    <Flex
+      className="bccb-widget-route-info-tooltip-fee"
+      flexDir={'row'}
+      color={theme.colors.light.text.primary}
+      gap={'4px'}
+    >
       <Box fontSize={'12px'} fontWeight={400}>
         {title}
       </Box>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx
index 1145390b..836fc034 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx
@@ -18,6 +18,7 @@ export const FeesInfo = ({ summary, breakdown, bridgeType, isError }: FeesInfoPr
   const { formatMessage } = useIntl();
   return (
     <Box
+      className="bccb-widget-route-fee-info"
       color={theme.colors[colorMode].text.tertiary}
       display={'inline-block'}
       lineHeight={'16px'}
@@ -30,6 +31,7 @@ export const FeesInfo = ({ summary, breakdown, bridgeType, isError }: FeesInfoPr
     >
       <FeesIcon w={'16px'} h={'16px'} mr={'4px'} />
       <Box
+        className="bccb-widget-route-info-label"
         mr={'4px'}
         as="span"
         display={'inline'}
@@ -40,6 +42,7 @@ export const FeesInfo = ({ summary, breakdown, bridgeType, isError }: FeesInfoPr
         {formatMessage({ id: 'route.fees.title' })}
       </Box>
       <Box
+        className="bccb-widget-route-info-text"
         mr={'4px'}
         as="span"
         display={'inline'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
index f7a9276c..28c38597 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
@@ -15,6 +15,7 @@ export const OtherRouteError = ({ bridgeType }: OtherRouteErrorProps) => {
   const routeError = useAppSelector((state) => state.transfer.routeError);
   return routeError && routeError[bridgeType] ? (
     <Box
+      className="bccb-widget-route-error"
       position={'static'}
       color={theme.colors[colorMode].route.warning}
       lineHeight={'16px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/BestRouteTag.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/BestRouteTag.tsx
index d87c6585..14d43b12 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/BestRouteTag.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/BestRouteTag.tsx
@@ -10,6 +10,7 @@ export const BestRouteTag = ({ bestMode }: TBestRouteTag) => {
   const { formatMessage } = useIntl();
   return (
     <Box
+      className={`bccb-widget-route-name-tag-${bestMode}`}
       p={'4px 8px'}
       borderRadius={'40px'}
       fontSize={'12px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx
index deba3e0b..b6d9abdf 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx
@@ -28,6 +28,7 @@ export const RouteName = React.memo(
 
     return (
       <Flex
+        className="bccb-widget-route-name"
         minH={'24px'}
         flexDir={'row'}
         gap={'8px'}
@@ -78,6 +79,7 @@ export const RouteName = React.memo(
           flex={1}
         >
           <Box
+            className="bccb-widget-route-name-text"
             fontSize={['12px', '12px', '12px', '14px']}
             lineHeight={['16px', '16px', '16px', '20px']}
             fontWeight={500}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
index 1de3d44d..6f1a7952 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
@@ -6,6 +6,7 @@ export const RouteSkeleton = () => {
 
   return (
     <Flex
+      className="bccb-widget-route-skeleton"
       p={'16px'}
       borderRadius={'8px'}
       flexDir={'column'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
index d8feca21..19ddb29e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
@@ -20,8 +20,15 @@ export const RouteTitle = ({ receiveAmt, toTokenInfo, isError }: RouteTitleProps
   const tokenUrl = formatTokenUrl(toChain?.tokenUrlPattern, toTokenInfo?.address);
 
   return (
-    <Flex flexDir={'row'} gap={'8px'} display={'inline'} opacity={isError ? 0.5 : 1}>
+    <Flex
+      className="bccb-widget-route-token"
+      flexDir={'row'}
+      gap={'8px'}
+      display={'inline'}
+      opacity={isError ? 0.5 : 1}
+    >
       <Flex
+        className="bccb-widget-route-title-amount"
         fontSize={'24px'}
         fontWeight={500}
         lineHeight={'32px'}
@@ -39,6 +46,7 @@ export const RouteTitle = ({ receiveAmt, toTokenInfo, isError }: RouteTitleProps
           isReceiveArea={true}
         >
           <Flex
+            className="bccb-widget-route-token-icon"
             flexDir={'row'}
             gap={'4px'}
             alignItems={'center'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
index 8f1bdcc0..222599f0 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
@@ -18,6 +18,7 @@ export const RouteWrapper = ({
 
   return (
     <Flex
+      className="bccb-widget-route-wrapper"
       flex={1}
       flexDir={'column'}
       gap={'4px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
index bfc75353..fc177be7 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
@@ -32,7 +32,7 @@ export const TokenInfoTooltip = ({
   const nativeToken = useMemo(() => isNativeToken(tokenAddress), [tokenAddress]);
 
   return (
-    <Flex display={'inline-block'} w={'auto'}>
+    <Flex className="bccb-widget-route-token-tooltip" display={'inline-block'} w={'auto'}>
       <LightMode>
         <Popover placement="top-start" trigger={'hover'} strategy={'fixed'} autoFocus={false}>
           <PopoverTrigger>{children}</PopoverTrigger>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index 1ecca835..3066706f 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
@@ -117,6 +117,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
     >
       <Flex flexDir={'column'} gap={'12px'}>
         <Flex
+          className="bccb-widget-route-header"
           display={{ base: 'none', lg: 'flex' }}
           justifyContent={'space-between'}
           alignItems={'center'}
@@ -141,6 +142,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
           ) : null}
         </Flex>
         <Box
+          className="bccb-widget-route-body"
           px={['0', '0', '0', '24px']}
           flex={1}
           overflow={'auto'}
@@ -155,7 +157,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
               <RouteSkeleton />
             </Flex>
           ) : (
-            <Flex flexDir={'column'} gap={'12px'}>
+            <Flex className="bccb-widget-route-list" flexDir={'column'} gap={'12px'}>
               {options?.map((bridge: ReactNode) => bridge)}
             </Flex>
           )}
@@ -172,7 +174,13 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
       transition={'width 0.15s'}
     >
       {cBridgeSupport && <CBridgeSendMaxMin />}
-      <Flex flexDir={'column'} gap={'24px'} ml={{ base: 0, lg: '24px' }} w={'100%'}>
+      <Flex
+        className="bccb-widget-route"
+        flexDir={'column'}
+        gap={'24px'}
+        ml={{ base: 0, lg: '24px' }}
+        w={'100%'}
+      >
         {!routeContentBottom ? (
           content
         ) : (
@@ -182,7 +190,9 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
             </Collapse>
           </Box>
         )}
-        <Box>{routeContentBottom ? routeContentBottom : null}</Box>
+        <Box className="bccb-widget-route-bottom">
+          {routeContentBottom ? routeContentBottom : null}
+        </Box>
       </Flex>
     </Flex>
   );
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx
index c30b730c..30a9f574 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx
@@ -16,8 +16,9 @@ export function RoutesModal(props: RoutesModalProps) {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} size={{ base: 'full', md: 'lg' }} isCentered>
-      <ModalOverlay w={'100%'} />
+      <ModalOverlay className="bccb-widget-modal-route-overlay" w={'100%'} />
       <ModalContent
+        className="bccb-widget-modal-route-content"
         background={theme.colors[colorMode].background.modal}
         p={0}
         h={['auto', 'auto', '665px']}
@@ -26,6 +27,7 @@ export function RoutesModal(props: RoutesModalProps) {
         margin={0}
       >
         <Flex
+          className="bccb-widget-modal-route-header"
           h={'64px'}
           px={'20px'}
           py={0}
@@ -50,7 +52,12 @@ export function RoutesModal(props: RoutesModalProps) {
             }}
           />
         </Flex>
-        <Flex flexDir="column" p={['20px', '20px', '24px 20px 16px']} flex={1}>
+        <Flex
+          className="bccb-widget-modal-route-wrapper"
+          flexDir="column"
+          p={['20px', '20px', '24px 20px 16px']}
+          flex={1}
+        >
           <Flex flexDir="column" mt={['0', '0', '0', '24px']} flex={1} overflowY="auto">
             {children}
           </Flex>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
index a3513f21..d4853c83 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
@@ -32,6 +32,7 @@ export function TransferWidget() {
 
   return (
     <Flex
+      className="bccb-widget-transfer-widget"
       flexDir={['column', 'column', 'column', 'row']}
       w={['100%']}
       mb={['120px', '120px', '160px']}
@@ -39,6 +40,7 @@ export function TransferWidget() {
       justifyContent={'center'}
     >
       <Flex
+        className="bccb-widget-transfer-widget-title"
         flexDir="column"
         background={['none', 'none', theme.colors[colorMode].background.main]}
         color={theme.colors[colorMode].text.primary}

From 7fb22d7fb3342b012b15946fb26a454edc7ad49e Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Mon, 11 Nov 2024 12:32:37 +1000
Subject: [PATCH 2/2] chore: Add more class name

---
 .../core/components/ConfirmCheckbox/index.tsx | 69 -------------------
 .../src/core/components/CopyAddress/index.tsx |  8 ++-
 .../src/core/components/InfoTooltip/index.tsx |  1 +
 .../src/core/components/StateModal/index.tsx  | 12 +++-
 .../src/core/components/VirtualList/index.tsx |  5 +-
 .../components/icons/ConfirmCheckIcon.tsx     |  7 +-
 .../src/core/locales/en.ts                    |  1 -
 .../SelectModal/ChooseTokenModal.tsx          |  9 ++-
 .../SelectModal/DestinationNetworkModal.tsx   |  4 +-
 .../SelectModal/SourceNetworkModal.tsx        |  4 +-
 .../SelectModal/components/BaseModal.tsx      | 10 ++-
 .../SelectModal/components/ListItem.tsx       |  1 +
 .../SelectModal/components/NoResultFound.tsx  | 19 ++++-
 .../SelectModal/components/SearchInput.tsx    |  1 +
 .../components/Button/ExchangeChain.tsx       |  1 +
 .../components/Button/SwitchNetworkButton.tsx |  1 +
 .../components/Button/SwitchWalletButton.tsx  |  1 +
 .../components/Button/TransferButton.tsx      |  2 +-
 .../components/Button/WalletConnectButton.tsx |  1 +
 .../components/ExternalTokenAddress/index.tsx | 43 ------------
 .../Modal/TransactionApproveModal/index.tsx   |  2 +
 .../TransactionConfirmingModal/index.tsx      |  1 +
 .../Modal/TransactionFailedModal/index.tsx    |  1 +
 .../Modal/TransactionSubmittedModal/index.tsx |  2 +
 .../components/ReceiveInfo/ReceiveLoading.tsx |  6 +-
 .../transfer/components/ReceiveInfo/index.tsx | 15 +++-
 .../SelectButton/TokenSelectButton.tsx        |  1 +
 .../SendInput/InputValidationMessage.tsx      |  1 +
 .../transfer/components/SendInput/MaxLink.tsx |  2 +-
 .../transfer/components/SendInput/index.tsx   |  3 +-
 .../transfer/components/ToAccount/index.tsx   | 22 +++++-
 .../components/TransferButtonGroup/index.tsx  |  6 +-
 .../TransferOverview/NoRouteFound.tsx         | 13 +++-
 .../components/TransferOverview/index.tsx     |  1 +
 .../src/modules/transfer/index.tsx            |  4 +-
 .../src/modules/wallet/WalletProvider.tsx     |  1 +
 .../wallet/components/ConnectButton/index.tsx |  7 +-
 .../components/Dropdown/DropdownButton.tsx    |  1 +
 .../components/Dropdown/DropdownItem.tsx      |  1 +
 .../components/Dropdown/DropdownList.tsx      |  1 +
 .../wallet/components/NetworkStatus/index.tsx |  3 +-
 .../wallet/components/ProfileMenu/index.tsx   |  4 +-
 .../components/SwitchingTipsModal/index.tsx   |  1 +
 43 files changed, 152 insertions(+), 147 deletions(-)
 delete mode 100644 packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx
 delete mode 100644 packages/canonical-bridge-widget/src/modules/transfer/components/ExternalTokenAddress/index.tsx

diff --git a/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx b/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx
deleted file mode 100644
index 5e2ed4f9..00000000
--- a/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Checkbox, CheckboxProps, theme, useColorMode } from '@bnb-chain/space';
-
-export const ConfirmCheckbox: React.FC<CheckboxProps> = (props: CheckboxProps) => {
-  const { colorMode } = useColorMode();
-
-  const { isChecked } = props;
-
-  return (
-    <Checkbox
-      _checked={{
-        '& .chakra-checkbox__control': {
-          border: `1px solid ${theme.colors[colorMode].text.brand}`,
-          color: theme.colors[colorMode].text.brand,
-        },
-        '& .chakra-text': {
-          color: theme.colors[colorMode].text.tertiary,
-        },
-      }}
-      // _hover={{
-      //   '& .chakra-text': {
-      //     color: theme.colors[colorMode].text.primary,
-      //   },
-      // }}
-      sx={{
-        alignItems: 'flex-start',
-        '&: hover': {
-          '.chakra-checkbox__control': {
-            border: isChecked
-              ? `1px solid ${theme.colors[colorMode].text.brand}`
-              : `1px solid ${theme.colors[colorMode].text.tertiary}`,
-          },
-        },
-
-        '.chakra-checkbox__control': {
-          border: `1px solid ${theme.colors[colorMode].text.tertiary}`,
-          borderRadius: '3px',
-          w: theme.sizes['4'],
-          h: theme.sizes['4'],
-          visibility: 'visible',
-          pos: 'relative',
-
-          _hover: {
-            bg: isChecked ? 'transpartent' : theme.colors[colorMode].layer['3'].hover,
-
-            '::before': {
-              content: '""',
-              w: theme.sizes['6'],
-              h: theme.sizes['6'],
-              pos: 'absolute',
-              bg: theme.colors[colorMode].layer[3].hover,
-              borderRadius: theme.sizes['2'],
-              zIndex: '-1',
-            },
-          },
-
-          _active: {
-            color: theme.colors[colorMode].text.primary,
-            bg: theme.colors[colorMode].layer['3'].active,
-          },
-
-          svg: {
-            w: '80%',
-          },
-        },
-      }}
-      {...props}
-    />
-  );
-};
diff --git a/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx b/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx
index 9bc3adee..4d30a6ff 100644
--- a/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx
@@ -27,7 +27,13 @@ export const CopyAddress = ({
     return null;
   }
   return (
-    <Flex justifyContent={'center'} alignItems={'center'} position={'relative'} {...otherProps}>
+    <Flex
+      className="bccb-widget-copy-address"
+      justifyContent={'center'}
+      alignItems={'center'}
+      position={'relative'}
+      {...otherProps}
+    >
       <CopyIcon
         boxSize={'20px'}
         cursor={'pointer'}
diff --git a/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx b/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx
index 8dd5a9c8..6dd4aed3 100644
--- a/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx
@@ -21,6 +21,7 @@ export const InfoTooltip = (props: InfoTooltipProps) => {
   return (
     <Tooltip
       hasArrow
+      className="bccb-widget-info-tooltip"
       placement="top"
       {...(isBase && {
         isOpen,
diff --git a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
index a55a835e..e083b1bb 100644
--- a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
@@ -42,6 +42,7 @@ export interface StateModalProps extends Omit<ModalProps, 'children'> {
   bodyProps?: ModalBodyProps;
   mainButtonIsDisabled?: boolean;
   closeButtonIsDisabled?: boolean;
+  className?: string;
 }
 
 export function StateModal(props: StateModalProps) {
@@ -58,6 +59,7 @@ export function StateModal(props: StateModalProps) {
     mainButtonIsDisabled = false,
     closeButtonIsDisabled = false,
     onClose,
+    className,
     mainButtonProps,
     bodyProps,
     footerProps,
@@ -76,8 +78,9 @@ export function StateModal(props: StateModalProps) {
       <LightMode>
         <ModalOverlay />
 
-        <ModalContent borderRadius={'20px'} maxW={'435px'}>
+        <ModalContent className={className} borderRadius={'20px'} maxW={'435px'}>
           <ModalCloseButton
+            className="bccb-widget-modal-close-button"
             top={'24px'}
             right={{ base: '24px', md: '24px' }}
             onClick={onBeforeClose}
@@ -86,6 +89,7 @@ export function StateModal(props: StateModalProps) {
           </ModalCloseButton>
 
           <ModalBody
+            className="bccb-widget-modal-body"
             pt={'48px'}
             px={'40px'}
             pb={'24px'}
@@ -94,8 +98,9 @@ export function StateModal(props: StateModalProps) {
             alignItems="center"
             {...bodyProps}
           >
-            <Flex>{icon}</Flex>
+            <Flex className="bccb-widget-modal-body-icon">{icon}</Flex>
             <Flex
+              className="bccb-widget-modal-body-title"
               mt={'24px'}
               fontSize={'24px'}
               fontWeight={700}
@@ -108,6 +113,7 @@ export function StateModal(props: StateModalProps) {
             </Flex>
             {description && (
               <Flex
+                className="bccb-widget-modal-body-description"
                 mt={'8px'}
                 textAlign="center"
                 color={theme.colors.light.text.tertiary}
@@ -120,6 +126,7 @@ export function StateModal(props: StateModalProps) {
           </ModalBody>
 
           <ModalFooter
+            className="bccb-widget-modal-footer"
             px={'40px'}
             pb={'40px'}
             justifyContent="center"
@@ -129,6 +136,7 @@ export function StateModal(props: StateModalProps) {
           >
             {mainButtonText && (
               <Button
+                className="bccb-widget-modal-main-button"
                 size="lg"
                 w={'100%'}
                 fontSize={'16px'}
diff --git a/packages/canonical-bridge-widget/src/core/components/VirtualList/index.tsx b/packages/canonical-bridge-widget/src/core/components/VirtualList/index.tsx
index ad43091e..91aaee50 100644
--- a/packages/canonical-bridge-widget/src/core/components/VirtualList/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/VirtualList/index.tsx
@@ -8,10 +8,11 @@ export interface VirtualListProps<T> {
   data: T[];
   itemHeight?: number;
   children: (item: T, index: number) => React.ReactNode;
+  className?: string;
 }
 
 export function VirtualList<T>(props: VirtualListProps<T>) {
-  const { data, children } = props;
+  const { data, children, className } = props;
 
   const { isMobile } = useResponsive();
 
@@ -35,7 +36,7 @@ export function VirtualList<T>(props: VirtualListProps<T>) {
   }, [isMobile]);
 
   return (
-    <Flex boxSize="100%" sx={scrollbarStyle}>
+    <Flex className={className} boxSize="100%" sx={scrollbarStyle}>
       <Virtuoso
         style={{
           width: '100%',
diff --git a/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx
index 83260879..8f2aeff8 100644
--- a/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx
@@ -28,7 +28,12 @@ export const ToAccountCheckBox = (props: { onClick: () => void; isChecked: boole
   const { colorMode } = useColorMode();
 
   return (
-    <Box onClick={onClick} cursor={'pointer'} mt={'-6px'}>
+    <Box
+      className="bccb-widget-to-account-checkbox"
+      onClick={onClick}
+      cursor={'pointer'}
+      mt={'-6px'}
+    >
       {isChecked ? (
         <CheckedIcon height={'32px'} width={'32px'} color={theme.colors[colorMode].text.brand} />
       ) : (
diff --git a/packages/canonical-bridge-widget/src/core/locales/en.ts b/packages/canonical-bridge-widget/src/core/locales/en.ts
index 3fc37b62..ac3d38b6 100644
--- a/packages/canonical-bridge-widget/src/core/locales/en.ts
+++ b/packages/canonical-bridge-widget/src/core/locales/en.ts
@@ -2,7 +2,6 @@ export const en = {
   'seo.title': 'BNB Chain Bridge | Cross-Chain Transfer',
   'seo.description':
     'Bridge and transfer your assets between networks (Ethereum, Polygon and etc.) and BNB Chain blockchain ecosystem.',
-  'main.address.link.text': 'Token address:',
   'header.network-status.wrong': 'Wrong network',
 
   'support.stargate.soon': 'We will support Stargate soon',
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
index 1f7a9dfd..8d132958 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
@@ -57,6 +57,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
   return (
     <BaseModal
+      className="bccb-widget-token-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.token.title' })}
@@ -77,7 +78,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
         {showBalance && <Text>{formatMessage({ id: 'select-modal.token.column.balance' })}</Text>}
       </Flex>
       <Flex flexDir="column" flex={1}>
-        <VirtualList data={data} itemHeight={64}>
+        <VirtualList className="bccb-widget-token-virtual-list" data={data} itemHeight={64}>
           {(item) => {
             const isDisabled = !isChainOrTokenCompatible(item);
             const isActive =
@@ -86,6 +87,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
             return (
               <ListItem
+                className="bccb-widget-token-list-item"
                 key={item.address}
                 iconUrl={item.icon}
                 isActive={isActive}
@@ -122,7 +124,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                     )}
 
                     {!isMobile && (
-                      <Flex h="16px" overflow="hidden">
+                      <Flex className="bccb-widget-token-address-link" h="16px" overflow="hidden">
                         <Flex
                           flexDir="column"
                           className={isNative || isActive ? undefined : 'token-info'}
@@ -155,6 +157,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
                   {!isDisabled && showBalance && (
                     <Flex
+                      className="bccb-widget-token-list-token-balance"
                       flexShrink={0}
                       flexDir="column"
                       alignItems="flex-end"
@@ -198,7 +201,7 @@ function TokenAddress(props: TokenAddressProps) {
   const { isMobile } = useResponsive();
 
   return (
-    <Flex>
+    <Flex className="bccb-widget-token-list-address">
       <Text
         isTruncated
         flexShrink={0}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
index abb2afa5..3fc1f776 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
@@ -42,6 +42,7 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
 
   return (
     <BaseModal
+      className="bccb-widget-to-network-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.destination.title' })}
@@ -49,9 +50,10 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
       placeholder={formatMessage({ id: 'select-modal.destination.placeholder' })}
       isNoResult={isNoResult}
     >
-      <VirtualList data={result} itemHeight={64}>
+      <VirtualList className="bccb-widget-to-network-virtual-list" data={result} itemHeight={64}>
         {(item) => (
           <ListItem
+            className="bccb-widget-to-network-list-item"
             key={item.id}
             iconUrl={item.icon}
             isActive={toChain?.id === item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
index 401f3ed8..934180bc 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
@@ -43,6 +43,7 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
 
   return (
     <BaseModal
+      className="bccb-widget-from-network-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.source.title' })}
@@ -50,9 +51,10 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
       placeholder={formatMessage({ id: 'select-modal.source.placeholder' })}
       isNoResult={isNoResult}
     >
-      <VirtualList data={result} itemHeight={64}>
+      <VirtualList className="bccb-widget-from-network-virtual-list" data={result} itemHeight={64}>
         {(item) => (
           <ListItem
+            className="bccb-widget-from-network-list-item"
             key={item.id}
             iconUrl={item.icon}
             isActive={fromChain?.id === item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
index f6e39f28..f60dd735 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
@@ -13,10 +13,11 @@ interface BaseModalProps {
   onSearch: (value: string) => void;
   placeholder: string;
   isNoResult: boolean;
+  className?: string;
 }
 
 export function BaseModal(props: BaseModalProps) {
-  const { isOpen, title, children, onClose, onSearch, placeholder, isNoResult } = props;
+  const { isOpen, title, children, onClose, onSearch, placeholder, isNoResult, className } = props;
 
   const theme = useTheme();
   const { colorMode } = useColorMode();
@@ -42,6 +43,7 @@ export function BaseModal(props: BaseModalProps) {
         marginInline={0}
       >
         <Flex
+          className={className}
           h={'64px'}
           px={'20px'}
           py={0}
@@ -68,7 +70,11 @@ export function BaseModal(props: BaseModalProps) {
         </Flex>
         <Flex flexDir="column" p="20px 0px 16px" flex={1}>
           <Flex px={'20px'} mb={'24px'}>
-            <SearchInput onChange={onSearch} placeholder={placeholder} />
+            <SearchInput
+              className="bccb-widget-modal-search"
+              onChange={onSearch}
+              placeholder={placeholder}
+            />
           </Flex>
           <Flex flexDir="column" flex={1} overflowY="auto">
             {isNoResult ? <NoResultFound /> : <>{children}</>}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
index 3c4d30a7..a9a2bf9e 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
@@ -65,6 +65,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
         </Flex>
         {showTag && isDisabled && (
           <Flex
+            className="bccb-widget-select-list-item-tag"
             alignItems="center"
             flexShrink={0}
             fontSize={'12px'}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx
index 0abfad4d..54809fd4 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx
@@ -11,12 +11,27 @@ export function NoResultFound(props: NoResultFoundProps) {
   const { colorMode } = useColorMode();
 
   return (
-    <Flex alignItems="center" flexDir="column" maxW={347} margin="32px auto" {...restProps}>
+    <Flex
+      className="bccb-widget-modal-no-result-found"
+      alignItems="center"
+      flexDir="column"
+      maxW={347}
+      margin="32px auto"
+      {...restProps}
+    >
       <NoResultIcon />
-      <Box fontWeight={700} fontSize={'20px'} lineHeight={1.4} mt={'16px'} mb={'8px'}>
+      <Box
+        className="title"
+        fontWeight={700}
+        fontSize={'20px'}
+        lineHeight={1.4}
+        mt={'16px'}
+        mb={'8px'}
+      >
         {formatMessage({ id: 'select-modal.search.no-result.title' })}
       </Box>
       <Text
+        className="bccb-widget-modal-no-result-found-text"
         textAlign="center"
         fontSize={'14px'}
         lineHeight={'20px'}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx
index d438371c..a87bfa75 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx
@@ -61,6 +61,7 @@ export function SearchInput(props: SearchInputProps) {
 
       {value && (
         <InputRightElement
+          className="bccb-widget-modal-search-right-element"
           justifyContent="flex-start"
           pl={'8px'}
           color={theme.colors[colorMode].text.tertiary}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/ExchangeChain.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/ExchangeChain.tsx
index f3c51b6e..ed3fe36e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/ExchangeChain.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/ExchangeChain.tsx
@@ -6,6 +6,7 @@ export const ExchangeChain = () => {
   const { colorMode } = useColorMode();
   return (
     <Flex
+      className="bccb-widget-exchange-chain-icon"
       width="100%"
       alignSelf="center"
       justifyContent="center"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
index 970ae716..b2e4c30b 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
@@ -15,6 +15,7 @@ export const SwitchNetworkButton = (props: ButtonProps) => {
 
   return (
     <Button
+      className="bccb-widget-switch-network-button"
       size="lg"
       h={'56px'}
       w="100%"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx
index f19ba1a3..ffc05867 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx
@@ -15,6 +15,7 @@ export const SwitchWalletButton = (props: ButtonProps) => {
 
   return (
     <Button
+      className="bccb-widget-switch-wallet-button"
       size="lg"
       h={'56px'}
       w="100%"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx
index bcc38a43..6c9329c7 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx
@@ -415,7 +415,7 @@ export function TransferButton({
   ]);
 
   return (
-    <Flex flexDir="column" w={'100%'}>
+    <Flex className="bccb-widget-transfer-button" flexDir="column" w={'100%'}>
       <Button
         bg={theme.colors[colorMode].button.brand.default}
         size={'lg'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletConnectButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletConnectButton.tsx
index 623bc182..3e1e62c0 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletConnectButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletConnectButton.tsx
@@ -14,6 +14,7 @@ export const WalletConnectButton = () => {
 
   return (
     <Button
+      className="bccb-widget-wallet-connect-button"
       size="lg"
       h={'56px'}
       w="100%"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ExternalTokenAddress/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ExternalTokenAddress/index.tsx
deleted file mode 100644
index 3d9b4dfc..00000000
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ExternalTokenAddress/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Flex, theme, Typography, useColorMode, useIntl } from '@bnb-chain/space';
-
-import { ExLinkIcon } from '@/core/components/icons/ExLinkIcon';
-import { formatAppAddress } from '@/core/utils/address';
-
-export const ExternalAddress = ({
-  address,
-  tokenUrl,
-}: {
-  address: `0x${string}` | string;
-  tokenUrl?: string;
-}) => {
-  const { colorMode } = useColorMode();
-  const { formatMessage } = useIntl();
-
-  return (
-    <Flex gap={'4px'} alignItems={'center'} color={theme.colors[colorMode].text.placeholder}>
-      <Typography variant="body" size={'sm'} flexDir={'row'}>
-        {formatMessage({ id: 'main.address.link.text' })}
-      </Typography>
-      <Flex
-        gap={'4px'}
-        alignItems={'center'}
-        color={theme.colors[colorMode].text.placeholder}
-        cursor={'pointer'}
-        _hover={{
-          color: theme.colors[colorMode].text.primary,
-          textDecoration: 'underline',
-        }}
-        onClick={() => {
-          if (tokenUrl) {
-            window.open(tokenUrl, '_blank');
-          }
-        }}
-      >
-        <Typography variant="body" size={'sm'} flexDir={'row'} fontWeight={500}>
-          {formatAppAddress({ address, transform: 'lowerCase' })}
-        </Typography>
-        {tokenUrl && <ExLinkIcon w={'16px'} h={'16px'} />}
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionApproveModal/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionApproveModal/index.tsx
index 627c8692..c78ce12d 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionApproveModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionApproveModal/index.tsx
@@ -53,6 +53,7 @@ export function TransactionApproveModal(
 
   return (
     <StateModal
+      className="bccb-widget-transaction-approve-modal"
       type="approve"
       title={formatMessage({ id: 'modal.approve.title' })}
       description={
@@ -109,6 +110,7 @@ export function TransactionApproveModal(
       }}
       closeButton={
         <Button
+          className="bccb-widget-modal-second-button"
           size="lg"
           variant={'outline'}
           w={'100%'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx
index 80dc9d30..37f95e1c 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx
@@ -5,6 +5,7 @@ export function TransactionConfirmingModal(props: Omit<StateModalProps, 'title'>
 
   return (
     <StateModal
+      className="bccb-widget-transaction-confirming-modal"
       type="confirming"
       title="Waiting For Confirmation"
       description={'Confirm this transaction in your wallet'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionFailedModal/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionFailedModal/index.tsx
index ba3e743b..b9688d26 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionFailedModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionFailedModal/index.tsx
@@ -8,6 +8,7 @@ export function TransactionFailedModal(props: Omit<StateModalProps, 'title'>) {
 
   return (
     <StateModal
+      className="bccb-widget-transaction-failed-modal"
       type="error"
       title={formatMessage({ id: 'modal.fail.title' })}
       description={formatMessage({ id: 'modal.fail.desc' })}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSubmittedModal/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSubmittedModal/index.tsx
index 15cea826..faf7b5aa 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSubmittedModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSubmittedModal/index.tsx
@@ -18,6 +18,7 @@ export function TransactionSubmittedModal(
   const { address } = useAccount();
   return (
     <StateModal
+      className="bccb-widget-transaction-submitted-modal"
       title={formatMessage({ id: 'modal.submit.title' })}
       description={formatMessage({ id: 'modal.submit.desc' })}
       onButtonClick={() => {
@@ -47,6 +48,7 @@ export function TransactionSubmittedModal(
       mainButtonText={formatMessage({ id: 'modal.submit.button.view-tx' })}
       closeButton={
         <Button
+          className="bccb-widget-modal-second-button"
           size="lg"
           variant={'outline'}
           w={'100%'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
index 3b2473f1..8d89962c 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
@@ -1,8 +1,8 @@
-import { Flex, Skeleton, SkeletonCircle } from '@bnb-chain/space';
+import { Box, Flex, Skeleton, SkeletonCircle } from '@bnb-chain/space';
 
 export const ReceiveLoading = () => {
   return (
-    <>
+    <Box className="bccb-widget-received-info-route-loading">
       <Flex flexDir={'column'} gap={'8px'} display={{ base: 'none', lg: 'flex' }}>
         <Flex gap={'8px'} mb={'12px'}>
           <Skeleton height={'24px'} width={'160px'} />
@@ -40,6 +40,6 @@ export const ReceiveLoading = () => {
         </Flex>
         <SkeletonCircle w={'32px'} h={'32px'} />
       </Flex>
-    </>
+    </Box>
   );
 };
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
index a7249e30..6de040a3 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
@@ -145,20 +145,29 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
   }, [estimatedAmount]);
 
   return (
-    <Box mb={'-24px'}>
+    <Box className="bccb-widget-received-info-container" mb={'-24px'}>
       <Collapse in={!isHideSection} animateOpacity>
         <Flex flexDir={'column'} gap={'12px'}>
           <Flex flexDir={'row'} alignItems={'center'} justifyContent={'space-between'}>
-            <Box color={theme.colors[colorMode].input.title} fontSize={'14px'} fontWeight={400}>
+            <Box
+              className="title"
+              color={theme.colors[colorMode].input.title}
+              fontSize={'14px'}
+              fontWeight={400}
+            >
               {formatMessage({ id: 'you.receive.title' })}
             </Box>
             {!isHideRouteButton ? (
-              <Box display={{ base: 'block', lg: 'none' }}>
+              <Box
+                className="bccb-widget-received-info-route-open"
+                display={{ base: 'block', lg: 'none' }}
+              >
                 <RouteChangeButton onOpen={onOpen} />
               </Box>
             ) : null}
           </Flex>
           <Flex
+            className="bccb-widget-received-info-route-content"
             minH={'114px'}
             borderRadius={'8px'}
             p={'16px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
index 271da271..7295f66f 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
@@ -25,6 +25,7 @@ export function TokenSelectButton(props: SelectButtonProps) {
 
   return (
     <Button
+      className="bccb-widget-token-select-button"
       borderRadius={'24px'}
       flexShrink={0}
       h={'40px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
index 065c1289..22310e55 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
@@ -64,6 +64,7 @@ export const InputValidationMessage = () => {
 
   return error || balanceInputError ? (
     <Box
+      className="bccb-widget-transfer-input-error"
       color={theme.colors[colorMode].text.danger}
       fontSize={'14px'}
       fontWeight={400}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
index 256c86e1..255938f8 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
@@ -43,7 +43,7 @@ export const MaxLink: React.FC = () => {
     fromChain?.chainType === walletType && balance !== undefined && !!selectedToken;
 
   return (
-    <Flex alignItems={'center'}>
+    <Flex className="bccb-widget-transfer-max" alignItems={'center'}>
       {showBalance ? (
         <Box
           onClick={setMaxAmount}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
index 0510e973..74f52ba0 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
@@ -92,7 +92,7 @@ export const SendInput: React.FC = () => {
   }, [isGlobalFeeLoading, debouncedSendValue, sendValue]);
 
   return (
-    <Flex flexDir={'column'} position={'relative'}>
+    <Flex className="bccb-widget-transfer-input-container" flexDir={'column'} position={'relative'}>
       <Flex flexDir={'row'} justifyContent={'space-between'}>
         <Box
           color={theme.colors[colorMode].input.title}
@@ -147,6 +147,7 @@ export const SendInput: React.FC = () => {
         }}
       >
         <Input
+          className="bccb-widget-transfer-input"
           inputMode={'decimal'}
           value={sendValue}
           color={theme.colors[colorMode].text.primary}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
index 29f1dabf..96840293 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
@@ -76,6 +76,7 @@ export function ToAccount(props: FlexProps) {
 
   return (
     <Flex
+      className="bccb-widget-to-account-container"
       flexDirection="column"
       color={theme.colors[colorMode].text.tertiary}
       fontSize={'14px'}
@@ -83,8 +84,11 @@ export function ToAccount(props: FlexProps) {
       fontWeight={400}
       {...props}
     >
-      <Box>{formatMessage({ id: 'to.section.account.label' })}</Box>
+      <Box className="bccb-widget-to-account-title">
+        {formatMessage({ id: 'to.section.account.label' })}
+      </Box>
       <InputGroup
+        className="bccb-widget-to-account-input"
         alignItems="center"
         mt={'12px'}
         _hover={{
@@ -123,12 +127,24 @@ export function ToAccount(props: FlexProps) {
       </InputGroup>
 
       {isInvalid && (
-        <Flex mt={'8px'} fontSize={'14px'} color={theme.colors[colorMode].text.danger}>
+        <Flex
+          className="bccb-widget-to-account-input-error"
+          mt={'8px'}
+          fontSize={'14px'}
+          color={theme.colors[colorMode].text.danger}
+        >
           {formatMessage({ id: 'to.section.account.invalid' })}
         </Flex>
       )}
 
-      <Flex flexDir={'row'} mt={'12px'} mb={'8px'} ml={'-6px'} gap={'2px'}>
+      <Flex
+        className="bccb-widget-to-account-confirm"
+        flexDir={'row'}
+        mt={'12px'}
+        mb={'8px'}
+        ml={'-6px'}
+        gap={'2px'}
+      >
         <ToAccountCheckBox onClick={toggleChecked} isChecked={isChecked} />
         <Box>{formatMessage({ id: 'to.section.confirm.text' })}</Box>
       </Flex>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
index 61cb05d5..3a99d406 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
@@ -35,7 +35,11 @@ export const TransferButtonGroup = () => {
 
   return (
     <>
-      <Flex gap={'4px'} mt={['16px', '16px', '24px', '24px']}>
+      <Flex
+        className="bccb-widget-transfer-button-container"
+        gap={'4px'}
+        mt={['16px', '16px', '24px', '24px']}
+      >
         <WalletButtonWrapper>
           <TransferButton
             onOpenSubmittedModal={onOpenSubmittedModal}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx
index f7f82679..d41c6d66 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx
@@ -31,6 +31,7 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => {
 
   return (
     <Flex
+      className="bccb-widget-no-route-found-container"
       flexDir={'column'}
       w={'100%'}
       gap={'8px'}
@@ -38,14 +39,21 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => {
       borderRadius={'8px'}
       p={[0, 0, 0, '0 16px']}
     >
-      <Flex justifyContent={'center'}>
+      <Flex className="bccb-widget-no-route-found-icon" justifyContent={'center'}>
         <RouteNotFoundIcon w={'40px'} h={'40px'} />
       </Flex>
-      <Typography variant="body" size={'md'} textAlign={'center'} fontWeight={500}>
+      <Typography
+        className="bccb-widget-no-route-found-title"
+        variant="body"
+        size={'md'}
+        textAlign={'center'}
+        fontWeight={500}
+      >
         {formatMessage({ id: !isNoRoute ? 'route.adjust.title' : 'route.no-found.title' })}
       </Typography>
 
       <Typography
+        className="bccb-widget-no-route-found-desc"
         variant="body"
         size={'sm'}
         mt={[0, 0, 0, '-4px']}
@@ -58,6 +66,7 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => {
       </Typography>
       {!isNoRoute && (
         <Box
+          className="bccb-widget-no-route-found-link"
           display={{ base: 'block', lg: 'none' }}
           margin={'0 auto'}
           fontSize={'14px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index 3066706f..05767fdc 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
@@ -107,6 +107,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
   const loading = !options || !options?.length || isGlobalFeeLoading;
   const content = (
     <Box
+      className="bccb-widget-route-container"
       position={'relative'}
       borderRadius={'24px'}
       py={'24px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
index d4853c83..89bff2db 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
@@ -74,7 +74,9 @@ export function TransferWidget() {
         <Flex flexDir="column">
           <TransferButtonGroup />
         </Flex>
-        <Box display={{ base: 'block', lg: 'none' }}>{routeContentBottom}</Box>
+        <Box className="bccb-widget-route-bottom" display={{ base: 'block', lg: 'none' }}>
+          {routeContentBottom}
+        </Box>
       </Flex>
       <Box display={{ base: 'none', lg: 'flex' }}>
         <TransferOverview routeContentBottom={routeContentBottom} />
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx b/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
index 23135c49..392241bb 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
@@ -101,6 +101,7 @@ export function WalletProvider(props: WalletProviderProps) {
         {children}
 
         <StateModal
+          className="bccb-widget-header-preventing-modal"
           title={formatMessage({ id: 'wallet.preventing-modal.title' })}
           description={formatMessage({ id: 'wallet.preventing-modal.desc' })}
           isOpen={isOpen}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
index 4b8278f3..21b4e4a4 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
@@ -18,7 +18,12 @@ export function ConnectButton(props: ConnectButtonProps) {
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
 
   return (
-    <Flex alignItems="center" gap={'16px'} {...restProps}>
+    <Flex
+      className="bccb-widget-header-wallet-connect-button"
+      alignItems="center"
+      gap={'16px'}
+      {...restProps}
+    >
       {!isConnected && (
         <Button
           variant="outline"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
index c0be2c6d..2600d205 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
@@ -28,6 +28,7 @@ export function DropdownButton(props: DropdownButtonProps) {
 
   return (
     <MenuButton
+      className="bccb-widget-header-menu-button"
       h={'40px'}
       minW={'40px'}
       pl="12px"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
index bc6222d6..40c12131 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
@@ -10,6 +10,7 @@ export function DropdownItem(props: DropdownItemProps) {
 
   return (
     <MenuItem
+      className="bccb-widget-header-menu-item"
       px="16px"
       h="40px"
       alignItems="center"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownList.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownList.tsx
index c8fd8c8f..33ba3a83 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownList.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownList.tsx
@@ -10,6 +10,7 @@ export function DropdownList(props: DropdownListProps) {
 
   return (
     <MenuList
+      className="bccb-widget-header-menu-list"
       bg={theme.colors[colorMode].popover.background}
       borderRadius={'8px'}
       maxH={'400px'}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
index c1eaeb53..45b4c9bf 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
@@ -41,7 +41,7 @@ export function NetworkStatus() {
   }, [chainId]);
 
   const switchDropdown = (onClose: () => void) => (
-    <DropdownList maxW={'240px'}>
+    <DropdownList className="bccb-widget-header-network-status" maxW={'240px'}>
       <Flex flexDir={'column'} alignItems={'center'} padding={'16px'} gap={'8px'}>
         <Typography
           color={theme.colors[colorMode].text.secondary}
@@ -101,6 +101,7 @@ export function NetworkStatus() {
           return (
             <>
               <DropdownButton
+                className="bccb-widget-header-dropdown-button"
                 bgColor={theme.colors[colorMode].layer[3].default}
                 isActive={isOpen}
                 isWarning={isOpen}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
index ed5aabf9..eb2b06a3 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
@@ -24,6 +24,7 @@ export const ProfileMenu = () => {
       {({ isOpen, onClose }) => (
         <>
           <DropdownButton
+            className="bccb-widget-header-profile-button"
             bgColor={theme.colors[colorMode].layer[3].default}
             isActive={isOpen}
             pl={{ base: '0', md: '12px' }}
@@ -61,7 +62,7 @@ export const ProfileMenu = () => {
             </Box>
           </DropdownButton>
 
-          <DropdownList overflowY="visible">
+          <DropdownList className="bccb-widget-header-profile-list" overflowY="visible">
             <Flex alignItems="center" p="16px 16px 12px">
               <Flex gap="12px">
                 <Center
@@ -89,6 +90,7 @@ export const ProfileMenu = () => {
             </Flex>
 
             <Flex
+              className="bccb-widget-header-profile-disconnect-link"
               borderTop={`1px solid ${theme.colors[colorMode].popover.separator}`}
               py="8px"
               onClick={() => {
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/SwitchingTipsModal/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/SwitchingTipsModal/index.tsx
index a415145c..3245900e 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/SwitchingTipsModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/SwitchingTipsModal/index.tsx
@@ -24,6 +24,7 @@ export function SwitchingTipsModal() {
 
   return (
     <StateModal
+      className="bccb-widget-header-switching-tips-modal"
       title={formatMessage({ id: 'wallet.switching-modal.title' })}
       description={formatMessage({ id: 'wallet.switching-modal.desc' })}
       isOpen={isOpenSwitchingTipsModal}