fix: field is not consistnece (#2277)

* fix: field is not consistnece
* add option all chains
* update css

src/pages/MyEarnings/MultipleChainSelectV2/ApplyButton.tsx

@@ -0,0 +1,54 @@
+import { Trans } from '@lingui/macro'
+import { MouseEventHandler } from 'react'
+import { Flex } from 'rebass'
+
+import { ButtonPrimary } from 'components/Button'
+import useTheme from 'hooks/useTheme'
+
+type ApplyButtonProps = {
+  disabled: boolean
+  onClick: MouseEventHandler<HTMLButtonElement>
+  numOfChains: number
+}
+
+export const ApplyButton: React.FC<ApplyButtonProps> = ({ disabled, onClick, numOfChains }) => {
+  const theme = useTheme()
+  return (
+    <ButtonPrimary
+      disabled={disabled}
+      style={{
+        height: '40px',
+        padding: '0 12px',
+      }}
+      onClick={onClick}
+    >
+      <Flex
+        as="span"
+        sx={{
+          width: '100%',
+          display: 'inline-flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gap: '4px',
+        }}
+      >
+        <Trans>View Selected Chains</Trans>
+        <Flex
+          as="span"
+          sx={{
+            width: '22px',
+            height: '22px',
+            borderRadius: '999px',
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            background: disabled ? undefined : theme.darkText,
+            color: disabled ? theme.border : theme.primary,
+          }}
+        >
+          {numOfChains ? String(numOfChains).padStart(2, '0') : 0}
+        </Flex>
+      </Flex>
+    </ButtonPrimary>
+  )
+}

src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx

@@ -23,17 +23,8 @@ const Label = styled.span<{ labelColor?: string }>`
   overflow: hidden;
   text-overflow: ellipsis;
 `
-type Props = {
-  onClick: () => void
-} & MultipleChainSelectProps
-const SelectButton: React.FC<Props> = ({
-  onClick,
-  selectedChainIds,
-  chainIds,
-  activeRender,
-  activeStyle,
-  labelColor,
-}) => {
+type Props = MultipleChainSelectProps
+const SelectButton: React.FC<Props> = ({ selectedChainIds, chainIds, activeRender, activeStyle, labelColor }) => {
   const theme = useTheme()
 
   const renderButtonBody = () => {
@@ -88,7 +79,6 @@ const SelectButton: React.FC<Props> = ({
         cursor: 'pointer',
         ...activeStyle,
       }}
-      onClick={onClick}
     >
       {activeRender ? activeRender(renderButtonBody()) : renderButtonBody()}
     </Flex>