feat: add clear admin menuitem

src/lib/app-fns/tx/clearAdmin.tsx

@@ -66,7 +66,6 @@ export const clearAdminTx = ({
             <Icon as={MdCheckCircle} color="success.main" boxSize={6} />
           ),
         },
-        actionVariant: "clear_admin",
       } as TxResultRendering;
     }
   )().pipe(catchTxError());

src/lib/app-provider/tx/clearAdmin.ts

@@ -4,13 +4,13 @@ import { useCallback } from "react";
 import { useFabricateFee } from "../hooks";
 import { clearAdminTx } from "lib/app-fns/tx/clearAdmin";
 import { CLEAR_ADMIN_GAS } from "lib/data";
-import type { ContractAddr, Option } from "lib/types";
+import type { ContractAddr } from "lib/types";
 
 export interface ClearAdminStreamParams {
   onTxSucceed?: (txHash: string) => void;
 }
 
-export const useClearAdminTx = (contractAddress: Option<ContractAddr>) => {
+export const useClearAdminTx = (contractAddress: ContractAddr) => {
   const { address, getCosmWasmClient } = useWallet();
   const fabricateFee = useFabricateFee();
   const clearAdminFee = fabricateFee(CLEAR_ADMIN_GAS);

src/lib/components/button/AdminButton.tsx

@@ -0,0 +1,101 @@
+import {
+  Button,
+  chakra,
+  Icon,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Tooltip,
+} from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import {
+  MdKeyboardArrowDown,
+  MdPerson,
+  MdPersonRemove,
+  MdReadMore,
+} from "react-icons/md";
+
+import { ClearAdminContract } from "../modal/contract/ClearAdminContract";
+import { useInternalNavigate } from "lib/app-provider";
+import type { ContractAddr, HumanAddr, Option } from "lib/types";
+
+const StyledMenuItem = chakra(MenuItem, {
+  baseStyle: {
+    fontSize: "14px",
+  },
+});
+
+const StyledIcon = chakra(Icon, {
+  baseStyle: {
+    boxSize: "4",
+    display: "flex",
+    alignItems: "center",
+  },
+});
+
+interface AdminButtonProps {
+  contractAddress: ContractAddr;
+  admin: Option<HumanAddr | ContractAddr>;
+}
+
+export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
+  const { address } = useWallet();
+  const navigate = useInternalNavigate();
+
+  return (
+    <Menu>
+      <Tooltip
+        hasArrow
+        label="You don't have admin access to this contract."
+        placement="top"
+        bg="primary.dark"
+        arrowSize={8}
+        isDisabled={!!address && address === admin}
+      >
+        <MenuButton
+          variant="outline-gray"
+          as={Button}
+          isDisabled={!address || address !== admin}
+          rightIcon={<Icon as={MdKeyboardArrowDown} boxSize="18px" />}
+        >
+          Admin
+        </MenuButton>
+      </Tooltip>
+      <MenuList>
+        <StyledMenuItem
+          icon={<StyledIcon as={MdReadMore} color="gray.600" />}
+          onClick={() => {
+            navigate({
+              pathname: "/migrate",
+              query: { contract: contractAddress },
+            });
+          }}
+        >
+          Migrate
+        </StyledMenuItem>
+        <StyledMenuItem
+          icon={<StyledIcon as={MdPerson} color="gray.600" />}
+          onClick={() => {
+            navigate({
+              pathname: "/admin",
+              query: { contract: contractAddress },
+            });
+          }}
+        >
+          Update Admin
+        </StyledMenuItem>
+        <ClearAdminContract
+          contractAddress={contractAddress}
+          triggerElement={
+            <StyledMenuItem
+              icon={<StyledIcon as={MdPersonRemove} color="gray.600" />}
+            >
+              Clear Admin
+            </StyledMenuItem>
+          }
+        />
+      </MenuList>
+    </Menu>
+  );
+};

src/lib/components/button/index.ts

@@ -1,3 +1,4 @@
 export * from "./BackButton";
 export * from "./ConnectWallet";
+export * from "./InstantiateButton";
 export * from "./ShowMoreButton";

src/lib/pages/code-details/components/CTASection.tsx

@@ -2,7 +2,7 @@ import { Flex, Button, chakra, Icon } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { MdCheck } from "react-icons/md";
 
-import { InstantiateButton } from "lib/components/button/InstantiateButton";
+import { InstantiateButton } from "lib/components/button";
 import { RemoveCode } from "lib/components/modal/code/RemoveCode";
 import { SaveOrEditCodeModal } from "lib/components/modal/code/SaveOrEditCode";
 import { useCodeStore } from "lib/hooks";

src/lib/pages/codes/components/CodesTable.tsx

@@ -19,7 +19,7 @@ import type { ReactNode } from "react";
 import { MdSearchOff } from "react-icons/md";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { InstantiateButton } from "lib/components/button/InstantiateButton";
+import { InstantiateButton } from "lib/components/button";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { RemoveCode } from "lib/components/modal/code/RemoveCode";
 import { SaveOrRemoveCode } from "lib/components/modal/code/SaveOrRemoveCode";

src/lib/pages/contract-details/components/ContractTop.tsx

@@ -6,61 +6,30 @@ import {
   Button,
   Icon,
   IconButton,
-  MenuItem,
-  chakra,
-  MenuButton,
-  Menu,
-  MenuList,
-  Tooltip,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
-import {
-  MdBookmark,
-  MdBookmarkBorder,
-  MdInput,
-  MdKeyboardArrowDown,
-  MdPerson,
-  MdPersonRemove,
-  MdReadMore,
-} from "react-icons/md";
+import { MdBookmark, MdBookmarkBorder, MdInput } from "react-icons/md";
 import { RiPencilFill } from "react-icons/ri";
 
 import { useInternalNavigate } from "lib/app-provider";
+import { AdminButton } from "lib/components/button/AdminButton";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import {
   AddToOtherList,
   EditContractDetails,
   SaveContractDetails,
 } from "lib/components/modal";
-import { ClearAdminContract } from "lib/components/modal/contract/ClearAdminContract";
 import type { ContractData } from "lib/model/contract";
 import type { ContractAddr } from "lib/types";
 
-const StyledMenuItem = chakra(MenuItem, {
-  baseStyle: {
-    fontSize: "14px",
-  },
-});
-
-const StyledIcon = chakra(Icon, {
-  baseStyle: {
-    boxSize: "4",
-    display: "flex",
-    alignItems: "center",
-  },
-});
-
 interface ContractTopProps {
   contractData: ContractData;
 }
 export const ContractTop = ({ contractData }: ContractTopProps) => {
   const navigate = useInternalNavigate();
-  const { address } = useWallet();
+
   const { contractLocalInfo, instantiateInfo, publicInfo } = contractData;
 
   const contractAddress = instantiateInfo?.contractAddress as ContractAddr;
-  const admin = instantiateInfo?.admin;
-
   const displayName =
     contractLocalInfo?.name || publicInfo?.name || instantiateInfo?.label;
 
@@ -162,59 +131,10 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
         )}
       </Flex>
       <Flex gap={4}>
-        <Menu>
-          <Tooltip
-            hasArrow
-            label="You don't have admin access to this contract."
-            placement="top"
-            bg="primary.dark"
-            arrowSize={8}
-            isDisabled={!!address && address === admin}
-          >
-            <MenuButton
-              variant="outline-gray"
-              as={Button}
-              isDisabled={!address || address !== admin}
-              rightIcon={<Icon as={MdKeyboardArrowDown} boxSize="18px" />}
-            >
-              Admin
-            </MenuButton>
-          </Tooltip>
-          <MenuList>
-            <StyledMenuItem
-              icon={<StyledIcon as={MdReadMore} color="gray.600" />}
-              onClick={() => {
-                navigate({
-                  pathname: "/migrate",
-                  query: { contract: contractAddress },
-                });
-              }}
-            >
-              Migrate
-            </StyledMenuItem>
-            <StyledMenuItem
-              icon={<StyledIcon as={MdPerson} color="gray.600" />}
-              onClick={() => {
-                navigate({
-                  pathname: "/admin",
-                  query: { contract: contractAddress },
-                });
-              }}
-            >
-              Update Admin
-            </StyledMenuItem>
-            <ClearAdminContract
-              contractAddress={contractAddress}
-              triggerElement={
-                <StyledMenuItem
-                  icon={<StyledIcon as={MdPersonRemove} color="gray.600" />}
-                >
-                  Clear Admin
-                </StyledMenuItem>
-              }
-            />
-          </MenuList>
-        </Menu>
+        <AdminButton
+          contractAddress={contractAddress}
+          admin={instantiateInfo?.admin}
+        />
         <Button
           variant="outline-primary"
           leftIcon={<SearchIcon />}