Merge pull request #114 from bnb-chain/widget/classname

Widget/classname
bnb-chain · Nov 11, 2024 · 5cfc070 · 5cfc070
2 parents c4e0adf + 92cdafd
commit 5cfc070
Show file tree

Hide file tree

Showing 60 changed files with 207 additions and 161 deletions.
diff --git a/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx b/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...anonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/...anonical-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/...l-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx b/...l-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
@@ -42,16 +42,18 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
 
   return (
     <BaseModal
+      className="bccb-widget-to-network-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.destination.title' })}
       onSearch={onSearch}
       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/...onical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx b/...onical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
@@ -43,16 +43,18 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
 
   return (
     <BaseModal
+      className="bccb-widget-from-network-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.source.title' })}
       onSearch={onSearch}
       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/...ical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/...ical-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/...nical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx b/...nical-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/...-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx b/...-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/...al-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx b/...al-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
@@ -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/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={{