refactor: WithdrawalCredentials to tailwind

use ui/alert component over custom divs

Author: wackerow

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,89 +80,81 @@ 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" />
                   )}
                 </>
               )}
             </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>