Merge pull request #12418 from TylerAPfledderer/refactor/remove-old-s…

…elect refactor: remove the old `Select` component
ethereum · Mar 11, 2024 · 2ce32ca · 2ce32ca
2 parents 9bd486f + 058ae6c
commit 2ce32ca
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 331 deletions.
diff --git a/src/@chakra-ui/components/ReactSelect.ts b/src/@chakra-ui/components/ReactSelect.ts
@@ -1,6 +1,6 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react"
 
-import { reactSelectAnatomyKeys } from "@/components/ReactSelect/innerComponents"
+import { reactSelectAnatomyKeys } from "@/components/Select/innerComponents"
 
 const $borderBaseWidth = cssVar("border-base-width")
 

diff --git a/src/@chakra-ui/components/Select.ts b/src/@chakra-ui/components/Select.ts
diff --git a/src/@chakra-ui/components/index.ts b/src/@chakra-ui/components/index.ts
@@ -23,7 +23,6 @@ import { Popover } from "./Popover"
 import { Progress } from "./Progress"
 import { Radio } from "./Radio"
 import { ReactSelect } from "./ReactSelect"
-import { Select } from "./Select"
 import { Switch } from "./Switch"
 import { Table } from "./Table"
 import { Tabs } from "./Tabs"
@@ -54,7 +53,6 @@ export default {
   Progress,
   Radio,
   ReactSelect,
-  Select,
   Spinner: spinnerDefaultTheme,
   Switch,
   Table,

diff --git a/src/components/CentralizedExchanges/index.tsx b/src/components/CentralizedExchanges/index.tsx
@@ -9,7 +9,7 @@ import Emoji from "@/components/Emoji"
 import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
-import ReactSelect from "@/components/ReactSelect"
+import Select from "@/components/Select"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
@@ -103,7 +103,7 @@ const CentralizedExchanges = ({
         {t("page-get-eth-exchanges-intro")}
       </Text>
       <Box w="full" maxW="container.sm">
-        <ReactSelect
+        <Select
           instanceId="eth-exchange-region"
           aria-label={t("page-get-eth-exchanges-header")}
           options={selectOptions}

diff --git a/src/components/FindWallet/WalletTable/index.tsx b/src/components/FindWallet/WalletTable/index.tsx
@@ -29,7 +29,7 @@ import {
 import { Image } from "@/components/Image"
 import InlineLink, { LinkProps } from "@/components/Link"
 import Text from "@/components/OldText"
-import ReactSelect, { ReactSelectOnChange } from "@/components/ReactSelect"
+import Select, { SelectOnChange } from "@/components/Select"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
@@ -246,7 +246,7 @@ const WalletTable = ({ filters, walletData }: WalletTableProps) => {
     (
       colName: ColumnClassName,
       featureDispatch: SetFeatureSelectState
-    ): ReactSelectOnChange<DropdownOption> =>
+    ): SelectOnChange<DropdownOption> =>
     (selectedOption) => {
       if (!selectedOption) return
       updateDropdown(selectedOption, featureDispatch, colName)
@@ -275,7 +275,7 @@ const WalletTable = ({ filters, walletData }: WalletTableProps) => {
           <Text as="span" hideFrom="sm" fontSize="md" whiteSpace="nowrap">
             {t("page-find-wallet-choose-features")}
           </Text>
-          <ReactSelect
+          <Select
             options={[
               {
                 label: t("page-find-choose-to-compare"),
@@ -290,7 +290,7 @@ const WalletTable = ({ filters, walletData }: WalletTableProps) => {
           />
         </Th>
         <Th>
-          <ReactSelect
+          <Select
             options={[
               {
                 label: t("page-find-choose-to-compare"),
@@ -305,7 +305,7 @@ const WalletTable = ({ filters, walletData }: WalletTableProps) => {
           />
         </Th>
         <Th>
-          <ReactSelect
+          <Select
             options={[
               {
                 label: t("page-find-choose-to-compare"),

diff --git a/src/components/Layer2/Layer2Onboard.tsx b/src/components/Layer2/Layer2Onboard.tsx
@@ -28,8 +28,7 @@ import { ButtonLink } from "../Buttons"
 import InlineLink from "../Link"
 import OldHeading from "../OldHeading"
 import Text from "../OldText"
-import ReactSelect, { ReactSelectOnChange } from "../ReactSelect"
-import { StyledSelect as Select } from "../SharedStyledComponents"
+import Select, { SelectOnChange } from "../Select"
 
 const Flex50 = (props: ChildOnlyProp) => (
   <Box flex={{ base: "100%", md: "50%" }} {...props} />
@@ -174,7 +173,7 @@ const Layer2Onboard = ({
     },
   } as const
 
-  const handleLayer2SelectChange: ReactSelectOnChange<Layer2Option> = (
+  const handleLayer2SelectChange: SelectOnChange<Layer2Option> = (
     selectedOption
   ) => {
     if (!selectedOption) return
@@ -188,7 +187,7 @@ const Layer2Onboard = ({
     setSelectedL2(selectedOption.l2)
   }
 
-  const handleExchangeOnboard: ReactSelectOnChange<
+  const handleExchangeOnboard: SelectOnChange<
     ExchangeOption | CexOnboardOption
   > = (selectedOption) => {
     if (!selectedOption) return
@@ -242,7 +241,7 @@ const Layer2Onboard = ({
           </Box>
           {/* LeftSelected */}
           <Box mt="auto">
-            <ReactSelect
+            <Select
               instanceId="layer2-left-selected"
               placeholder={t("layer-2-onboard-wallet-input-placeholder")}
               options={layer2Options}
@@ -265,7 +264,7 @@ const Layer2Onboard = ({
           </Box>
           {/* RightSelect */}
           <Box mt="auto">
-            <ReactSelect
+            <Select
               instanceId="exchange-onboard-select"
               options={[
                 {

diff --git a/src/components/ReactSelect/ReactSelect.stories.tsx b/src/components/ReactSelect/ReactSelect.stories.tsx
diff --git a/src/components/ReactSelect/index.tsx b/src/components/ReactSelect/index.tsx