feat: assign me

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#144](https://github.com/alleslabs/celatone-frontend/pull/144) Add `Assign me` for admin address on instantiate form
 - [#131](https://github.com/alleslabs/celatone-frontend/pull/131) Add CW2-related information to contract details page
 - [#120](https://github.com/alleslabs/celatone-frontend/pull/120) Add simulate migrate fee and the final migration step
 - [#108](https://github.com/alleslabs/celatone-frontend/pull/108) Add migrate options on migrate page and upload new code for migration

src/lib/components/forms/ControllerInput.tsx

@@ -1,13 +1,14 @@
 import {
+  Flex,
   FormControl,
   FormErrorMessage,
   FormHelperText,
   FormLabel,
   Input,
   InputGroup,
   InputRightElement,
-  Text,
 } from "@chakra-ui/react";
+import type { ReactNode } from "react";
 import type {
   Control,
   FieldPath,
@@ -27,6 +28,7 @@ interface ControllerInputProps<T extends FieldValues>
   rules?: UseControllerProps["rules"];
   status?: FormStatus;
   maxLength?: number;
+  helperAction?: ReactNode;
 }
 
 export const ControllerInput = <T extends FieldValues>({
@@ -42,6 +44,7 @@ export const ControllerInput = <T extends FieldValues>({
   rules = {},
   status,
   maxLength,
+  helperAction,
   ...componentProps
 }: ControllerInputProps<T>) => {
   const watcher = useWatch({
@@ -83,17 +86,16 @@ export const ControllerInput = <T extends FieldValues>({
           {status && getStatusIcon(status.state)}
         </InputRightElement>
       </InputGroup>
-      {isError ? (
-        <FormErrorMessage className="error-text">{error}</FormErrorMessage>
-      ) : (
-        <FormHelperText className="helper-text">
-          {status?.message ? (
-            getResponseMsg(status, helperText)
-          ) : (
-            <Text color="text.dark">{helperText}</Text>
-          )}
-        </FormHelperText>
-      )}
+      <Flex gap={1} alignItems="center" mt={1}>
+        {isError ? (
+          <FormErrorMessage className="error-text">{error}</FormErrorMessage>
+        ) : (
+          <FormHelperText className="helper-text">
+            {status?.message ? getResponseMsg(status, helperText) : helperText}
+          </FormHelperText>
+        )}
+        {helperAction}
+      </Flex>
     </FormControl>
   );
 };

src/lib/hooks/useAddress.ts

@@ -65,6 +65,7 @@ const validateAddress = (
   return null;
 };
 
+// TODO: refactor
 export const useValidateAddress = () => {
   const { currentChainRecord } = useWallet();
 

src/lib/pages/instantiate/instantiate.tsx

@@ -21,7 +21,7 @@ import { AssetInput } from "lib/components/forms/AssetInput";
 import JsonInput from "lib/components/json/JsonInput";
 import { Stepper } from "lib/components/stepper";
 import WasmPageContainer from "lib/components/WasmPageContainer";
-import { useLCDEndpoint } from "lib/hooks";
+import { useLCDEndpoint, useValidateAddress } from "lib/hooks";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { getCodeIdInfo } from "lib/services/code";
 import type { HumanAddr, Token, U } from "lib/types";
@@ -55,6 +55,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const fabricateFee = useFabricateFee();
   const { broadcast } = useTxBroadcast();
   const nativeTokensInfo = useNativeTokensInfo();
+  const { validateUserAddress, validateContractAddress } = useValidateAddress();
 
   // ------------------------------------------//
   // ------------------STATES------------------//
@@ -88,6 +89,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   });
   const {
     codeId,
+    adminAddress: watchAdminAddress,
     assets: watchAssets,
     initMsg: watchInitMsg,
     simulateError,
@@ -238,6 +240,14 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     }
   }, [codeIdQuery, msgQuery, reset, setValue]);
 
+  const validateAdmin = useCallback(
+    (input: string) =>
+      input && !!validateContractAddress(input) && !!validateUserAddress(input)
+        ? "Invalid Address."
+        : undefined,
+    [validateContractAddress, validateUserAddress]
+  );
+
   return (
     <>
       <WasmPageContainer>
@@ -277,6 +287,17 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             label="Admin Address (optional)"
             helperText="This address will be the admin for the deployed smart contract."
             variant="floating"
+            error={validateAdmin(watchAdminAddress)}
+            helperAction={
+              <Text
+                textColor="primary.main"
+                variant="body3"
+                cursor="pointer"
+                onClick={() => setValue("adminAddress", address)}
+              >
+                Assign me
+              </Text>
+            }
           />
           <Heading
             variant="h6"

src/lib/styles/theme/components/form.ts

@@ -38,7 +38,7 @@ export const Form: ComponentStyleConfig = {
         },
         "div.helper-text, .error-text": {
           ml: 3,
-          mt: 1,
+          mt: 0,
           fontSize: "12px",
           color: "text.dark",
           _disabled: {