fix(components): fix assign me and fix color in redelegation

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page
 - [#357](https://github.com/alleslabs/celatone-frontend/pull/357) Abstract color, typeface, images to theme config
 - [#352](https://github.com/alleslabs/celatone-frontend/pull/352) Refactor/Abstract styling (color system, font weight and more)
 - [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table

src/lib/components/AssignMe.tsx

@@ -1,18 +1,25 @@
 import { Text } from "@chakra-ui/react";
+import type { TextProps } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
 interface AssginMeProps {
   onClick?: MouseEventHandler<HTMLParagraphElement>;
   isDisable?: boolean;
+  textAlign?: TextProps["textAlign"];
 }
 
-export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
+export const AssignMe = ({
+  onClick,
+  isDisable = false,
+  textAlign = "right",
+}: AssginMeProps) => {
   const { address: walletAddress } = useWallet();
   const enabled = Boolean(!isDisable && walletAddress);
+
   return (
     <Text
-      textAlign="right"
+      textAlign={textAlign}
       mr={3}
       color={enabled ? "accent.main" : "text.disabled"}
       fontWeight={700}

src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx

@@ -25,7 +25,7 @@ export const NonRedelegatableTableRow = ({
 
     <TableRow>
       <Flex direction="column" gap={1} color="text.dark">
-        <Text variant="body2">
+        <Text variant="body2" color="text.dark">
           {formatUTC(nonRedelegatable.completionTime)}
         </Text>
         <Text variant="body3" color="text.disabled">

src/lib/pages/faucet/index.tsx

@@ -17,6 +17,7 @@ import {
   useInternalNavigate,
   useValidateAddress,
 } from "lib/app-provider";
+import { AssignMe } from "lib/components/AssignMe";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
@@ -158,19 +159,14 @@ const Faucet = () => {
         status={status}
         label="Receiving Address"
         helperAction={
-          <Text
-            color="accent.main"
-            fontWeight={700}
-            variant="body3"
-            cursor="pointer"
-            alignSelf="flex-start"
+          <AssignMe
             onClick={() => {
               AmpTrack(AmpEvent.USE_ASSIGN_ME);
               setAddress(walletAddress);
             }}
-          >
-            Assign me
-          </Text>
+            isDisable={!walletAddress || address === walletAddress}
+            textAlign="left"
+          />
         }
       />
       <Button

src/lib/pages/instantiate/instantiate.tsx

@@ -15,6 +15,7 @@ import {
   useLCDEndpoint,
   useValidateAddress,
 } from "lib/app-provider";
+import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import type { FormStatus } from "lib/components/forms";
 import { ControllerInput } from "lib/components/forms";
@@ -319,18 +320,13 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             variant="floating"
             error={validateAdmin(watchAdminAddress)}
             helperAction={
-              <Text
-                color="accent.main"
-                fontWeight={700}
-                variant="body3"
-                cursor="pointer"
+              <AssignMe
                 onClick={() => {
                   AmpTrack(AmpEvent.USE_ASSIGN_ME);
                   setValue("adminAddress", address);
                 }}
-              >
-                Assign me
-              </Text>
+                isDisable={!address || watchAdminAddress === address}
+              />
             }
           />
           <Heading variant="h6" as="h6" my={8} alignSelf="flex-start">