From b7b26e1e97d30cba0aca232d3d424689216caec2 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 20 Sep 2024 16:26:17 -0700
Subject: [PATCH 1/3] feat: add ui/spinner for loading states

---
 src/components/ui/spinner.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/components/ui/spinner.tsx

diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
new file mode 100644
index 00000000000..33690b4ca76
--- /dev/null
+++ b/src/components/ui/spinner.tsx
@@ -0,0 +1,14 @@
+import * as React from "react"
+import { CgSpinner } from "react-icons/cg"
+
+const Spinner = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={className} {...props}>
+    <CgSpinner className="animate-spin" />
+  </div>
+))
+Spinner.displayName = "Spinner"
+
+export { Spinner }

From 484d52b1244040d24bee5e9a49c717b0e8b5a4c1 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 20 Sep 2024 16:26:55 -0700
Subject: [PATCH 2/3] refactor: WithdrawalCredentials to tailwind

use ui/alert component over custom divs
---
 .../Staking/WithdrawalCredentials.tsx         | 82 +++++++++----------
 1 file changed, 38 insertions(+), 44 deletions(-)

diff --git a/src/components/Staking/WithdrawalCredentials.tsx b/src/components/Staking/WithdrawalCredentials.tsx
index 57dab1aabcf..c3e0a9b7dfa 100644
--- a/src/components/Staking/WithdrawalCredentials.tsx
+++ b/src/components/Staking/WithdrawalCredentials.tsx
@@ -1,14 +1,18 @@
 import { ChangeEvent, FC, useMemo, useState } from "react"
 import { useTranslation } from "next-i18next"
-import { Button, Flex, Text } from "@chakra-ui/react"
 
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
-import Input from "@/components/Input"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import Input from "../../../tailwind/ui/Input"
+import { Alert, AlertContent } from "../ui/alert"
+import { Button } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
+import { Spinner } from "../ui/spinner"
+
 interface Validator {
   validatorIndex: number
   withdrawalCredentials: string
@@ -35,10 +39,9 @@ const WithdrawalCredentials: FC = () => {
       eventName: `click`,
     })
     setHasError(false)
-    setIsLoading((prev) => ({
-      ...prev,
-      [networkLowercase]: true,
-    }))
+    setIsLoading((prev) =>
+      isTestnet ? { ...prev, testnet: true } : { ...prev, mainnet: true }
+    )
     const endpoint = `https://${networkLowercase}.beaconcha.in/api/v1/validator/${inputValue}`
     try {
       const response = await fetch(endpoint)
@@ -56,10 +59,9 @@ const WithdrawalCredentials: FC = () => {
       console.error(error)
       setHasError(true)
     } finally {
-      setIsLoading((prev) => ({
-        ...prev,
-        [networkLowercase]: false,
-      }))
+      setIsLoading((prev) =>
+        isTestnet ? { ...prev, testnet: false } : { ...prev, mainnet: false }
+      )
     }
   }
 
@@ -78,36 +80,32 @@ const WithdrawalCredentials: FC = () => {
   const resultText = useMemo<string | JSX.Element>(() => {
     if (hasError)
       return (
-        <Flex bg="error.neutral" p={4}>
-          <Text m={0} color="error.base">
+        <Alert variant="error">
+          <AlertContent className="inline">
             {t("comp-withdrawal-credentials-error")}
-          </Text>
-        </Flex>
+          </AlertContent>
+        </Alert>
       )
     if (!validator) return " "
     if (validator.isUpgraded)
       return (
-        <Flex bg="success.neutral" p={4}>
-          <Text m={0} color="success.base">
-            <Text as="span" fontWeight="bold">
+        <Alert variant="success">
+          <AlertContent className="inline">
+            <strong>
               <Translation
                 id="page-staking:comp-withdrawal-credentials-upgraded-1"
                 options={{ validatorIndex: validator.validatorIndex }}
               />{" "}
-            </Text>
+            </strong>
             {t("comp-withdrawal-credentials-upgraded-2")}{" "}
             <CopyToClipboard text={longAddress} inline>
               {(isCopied) => (
                 <>
-                  <Text as="span" title={longAddress} fontWeight="bold">
-                    {shortAddress}
-                  </Text>
+                  <strong title={longAddress}>{shortAddress}</strong>
                   {isCopied ? (
                     <>
                       <Emoji text="✅" className="mx-2 text-lg" />
-                      <Text as="span" title={longAddress}>
-                        {t("copied")}
-                      </Text>
+                      <span title={longAddress}>{t("copied")}</span>
                     </>
                   ) : (
                     <Emoji text="📋" className="mx-2 text-lg" />
@@ -115,52 +113,48 @@ const WithdrawalCredentials: FC = () => {
                 </>
               )}
             </CopyToClipboard>
-          </Text>
-        </Flex>
+          </AlertContent>
+        </Alert>
       )
     return (
-      <Flex bg="error.neutral" p={4}>
-        <Text m={0} color="error.base">
-          <Text as="span" fontWeight="bold">
+      <Alert variant="error">
+        <AlertContent className="inline">
+          <strong>
             {validator.isTestnet
               ? t("comp-withdrawal-credentials-not-upgraded-1-testnet")
               : t("comp-withdrawal-credentials-not-upgraded-1")}
-          </Text>{" "}
+          </strong>{" "}
           <Translation id="page-staking:comp-withdrawal-credentials-not-upgraded-2" />
-        </Text>
-      </Flex>
+        </AlertContent>
+      </Alert>
     )
   }, [hasError, validator, longAddress, shortAddress, t])
 
   return (
-    <Flex direction="column" gap={4}>
-      <Flex alignItems="center" gap={2} flexWrap="wrap">
+    <Flex className="flex-col gap-4">
+      <Flex className="flex-wrap items-center gap-2">
         <Input
           id="validatorIndex"
           value={inputValue}
           onChange={handleChange}
-          w={{ base: "full", sm: "18ch" }}
+          className="w-full sm:w-[18ch]"
           placeholder={t("comp-withdrawal-credentials-placeholder")}
         />
-        <Flex
-          w={{ base: "full", sm: "fit-content" }}
-          direction={{ base: "column", sm: "row" }}
-          gap={2}
-        >
+        <Flex className="w-full flex-col gap-2 sm:w-fit sm:flex-row">
           <Button
             onClick={() => checkWithdrawalCredentials()}
-            isDisabled={!inputValue.length}
-            isLoading={isLoading.mainnet}
+            disabled={!inputValue.length}
           >
             {t("comp-withdrawal-credentials-verify-mainnet")}
+            {isLoading.mainnet && <Spinner />}
           </Button>
           <Button
             onClick={() => checkWithdrawalCredentials(true)}
-            isDisabled={!inputValue.length}
+            disabled={!inputValue.length}
             variant="outline"
-            isLoading={isLoading.testnet}
           >
             {t("comp-withdrawal-credentials-verify-holesky")}
+            {isLoading.testnet && <Spinner />}
           </Button>
         </Flex>
       </Flex>

From 3566ff2d35cd5be26ab1d2c551d9b25cfaa24aaf Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 20 Sep 2024 16:27:35 -0700
Subject: [PATCH 3/3] deprecate: rm unused Input component

---
 src/components/Input/Input.stories.tsx | 43 ------------------------
 src/components/Input/index.tsx         | 45 --------------------------
 2 files changed, 88 deletions(-)
 delete mode 100644 src/components/Input/Input.stories.tsx
 delete mode 100644 src/components/Input/index.tsx

diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
deleted file mode 100644
index 74fb88a0336..00000000000
--- a/src/components/Input/Input.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react"
-import { BsSlashSquare } from "react-icons/bs"
-import { VStack } from "@chakra-ui/react"
-import { Meta, StoryObj } from "@storybook/react"
-
-import Input from "."
-
-const meta = {
-  title: "Atoms / Form / Input",
-  component: Input,
-  args: {
-    rightIcon: <BsSlashSquare />,
-  },
-} satisfies Meta<typeof Input>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Sizes: Story = {
-  args: {
-    placeholder: "Search",
-  },
-  render: (args) => (
-    <VStack width="154px">
-      <Input {...args} />
-      <Input {...args} size="sm" />
-    </VStack>
-  ),
-}
-
-export const ElementVariations: Story = {
-  args: {
-    placeholder: "input text",
-  },
-  render: (args) => (
-    <VStack width="258px" spacing={4}>
-      <Input {...args} rightIcon={undefined} />
-      <Input {...args} />
-      <Input {...args} isDisabled />
-    </VStack>
-  ),
-}
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
deleted file mode 100644
index e84f31f29ec..00000000000
--- a/src/components/Input/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react"
-import {
-  Input as ChakraInput,
-  InputGroup,
-  InputGroupProps,
-  InputProps as ChakraInputProps,
-  InputRightElement,
-} from "@chakra-ui/react"
-
-type CommonProps = ChakraInputProps
-
-type NoIconProps = CommonProps & { rightIcon?: never }
-
-type WithIconProps = CommonProps & {
-  /**
-   * The Icon used to render `InputRightElement` on the right side of the input
-   */
-  rightIcon: JSX.Element
-  /**
-   * Primarily for style props to be applied to the wrapper
-   */
-  inputGroupProps?: InputGroupProps
-}
-
-type InputProps = NoIconProps | WithIconProps
-
-function Input(props: NoIconProps): JSX.Element
-function Input(props: WithIconProps): JSX.Element
-function Input(props: InputProps) {
-  if (props.rightIcon) {
-    const { size, inputGroupProps, rightIcon: Icon, ...rest } = props
-    return (
-      <InputGroup size={size} {...inputGroupProps}>
-        <ChakraInput data-peer {...rest} />
-        <InputRightElement>{Icon}</InputRightElement>
-      </InputGroup>
-    )
-  }
-
-  const { size, ...rest } = props
-
-  return <ChakraInput size={size} {...rest} />
-}
-
-export default Input