Merge pull request #113 from alleslabs/page/update-admin

Page/update admin

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#113](https://github.com/alleslabs/celatone-frontend/pull/113) Update admin page ui and wireup
 - [#98](https://github.com/alleslabs/celatone-frontend/pull/98) Add migrate, update admin, clear admin menu on contract list and detail
 - [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#102](https://github.com/alleslabs/celatone-frontend/pull/102) Add quick menu in overview and add highlighted in left sidebar

src/env.ts

@@ -1,4 +1,3 @@
-import { MsgType } from "lib/types";
 import type { ContractAddr, ChainGasPrice, Token, U } from "lib/types";
 import type { CelatoneConstants, CelatoneContractAddress } from "types";
 
@@ -49,16 +48,9 @@ export const FALLBACK_LCD_ENDPOINT: Record<string, string> = {
 
 export const MAX_FILE_SIZE = 800_000;
 
-export const MSG_TYPE_URL = {
-  [MsgType.STORE_CODE]: "/cosmwasm.wasm.v1.MsgStoreCode",
-  [MsgType.INSTANTIATE]: "/cosmwasm.wasm.v1.MsgInstantiateContract",
-  [MsgType.EXECUTE]: "/cosmwasm.wasm.v1.MsgExecuteContract",
-};
-
 export const CELATONE_CONSTANTS: CelatoneConstants = {
   gasAdjustment: 1.6,
   maxFileSize: MAX_FILE_SIZE,
-  msgTypeUrl: MSG_TYPE_URL,
 };
 
 export const DUMMY_MNEMONIC = process.env.NEXT_PUBLIC_DUMMY_MNEMONIC;

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

@@ -0,0 +1,74 @@
+import { Icon } from "@chakra-ui/react";
+import type {
+  ExecuteResult,
+  SigningCosmWasmClient,
+} from "@cosmjs/cosmwasm-stargate";
+import type { StdFee } from "@cosmjs/stargate";
+import { pipe } from "@rx-stream/pipe";
+import { MdCheckCircle } from "react-icons/md";
+import type { Observable } from "rxjs";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { ContractAddr, HumanAddr, TxResultRendering } from "lib/types";
+import { TxStreamPhase } from "lib/types";
+import { formatUFee } from "lib/utils";
+
+import { catchTxError, postTx, sendingTx } from "./common";
+
+interface UpdateAdminTxParams {
+  address: HumanAddr;
+  contractAddress: ContractAddr;
+  newAdmin: HumanAddr | ContractAddr;
+  fee: StdFee;
+  client: SigningCosmWasmClient;
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+}
+
+export const updateAdminTx = ({
+  address,
+  contractAddress,
+  newAdmin,
+  fee,
+  client,
+  onTxSucceed,
+  onTxFailed,
+}: UpdateAdminTxParams): Observable<TxResultRendering> => {
+  return pipe(
+    sendingTx(fee),
+    postTx<ExecuteResult>({
+      postFn: () =>
+        client.updateAdmin(address, contractAddress, newAdmin, fee, undefined),
+    }),
+    ({ value: txInfo }) => {
+      onTxSucceed?.();
+      return {
+        value: null,
+        phase: TxStreamPhase.SUCCEED,
+        receipts: [
+          {
+            title: "Tx Hash",
+            value: txInfo.transactionHash,
+            html: (
+              <ExplorerLink type="tx_hash" value={txInfo.transactionHash} />
+            ),
+          },
+          {
+            title: "Tx Fee",
+            value: `${formatUFee(
+              txInfo.events.find((e) => e.type === "tx")?.attributes[0].value ??
+                "0u"
+            )}`,
+          },
+        ],
+        receiptInfo: {
+          header: "Update Admin Complete",
+          headerIcon: (
+            <Icon as={MdCheckCircle} color="success.main" boxSize={6} />
+          ),
+        },
+        actionVariant: "update-admin",
+      } as TxResultRendering;
+    }
+  )().pipe(catchTxError(onTxFailed));
+};

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

@@ -1,5 +1,6 @@
 export * from "./upload";
-export * from "./resend";
-export * from "./clearAdmin";
 export * from "./execute";
 export * from "./instantiate";
+export * from "./resend";
+export * from "./updateAdmin";
+export * from "./clearAdmin";

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

@@ -0,0 +1,44 @@
+import type { StdFee } from "@cosmjs/stargate";
+import { useWallet } from "@cosmos-kit/react";
+import { useCallback } from "react";
+
+import { updateAdminTx } from "lib/app-fns/tx/updateAdmin";
+import type { ContractAddr, HumanAddr, Option } from "lib/types";
+
+export interface UpdateAdminStreamParams {
+  contractAddress: ContractAddr;
+  newAdmin: HumanAddr | ContractAddr;
+  estimatedFee: Option<StdFee>;
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+}
+
+export const useUpdateAdminTx = () => {
+  const { address, getCosmWasmClient } = useWallet();
+
+  return useCallback(
+    async ({
+      contractAddress,
+      newAdmin,
+      estimatedFee,
+      onTxSucceed,
+      onTxFailed,
+    }: UpdateAdminStreamParams) => {
+      const client = await getCosmWasmClient();
+      if (!address || !client)
+        throw new Error("Please check your wallet connection.");
+      if (!estimatedFee) return null;
+
+      return updateAdminTx({
+        address: address as HumanAddr,
+        contractAddress,
+        newAdmin,
+        fee: estimatedFee,
+        client,
+        onTxSucceed,
+        onTxFailed,
+      });
+    },
+    [address, getCosmWasmClient]
+  );
+};

src/lib/components/ErrorMessageRender.tsx

@@ -0,0 +1,21 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Flex, Icon, Text } from "@chakra-ui/react";
+import { IoIosWarning } from "react-icons/io";
+
+interface ErrorMessageRenderProps extends FlexProps {
+  error: string;
+}
+
+export const ErrorMessageRender = ({
+  error,
+  ...restProps
+}: ErrorMessageRenderProps) => {
+  return (
+    <Flex gap={2} {...restProps}>
+      <Icon as={IoIosWarning} boxSize={4} color="error.main" />
+      <Text variant="body3" color="error.main">
+        {error}
+      </Text>
+    </Flex>
+  );
+};

src/lib/components/forms/TextInput.tsx

@@ -64,7 +64,7 @@ export const TextInput = ({
           maxLength={maxLength}
         />
         <InputRightElement h="full">
-          {status && getStatusIcon(status.state)}
+          {status && getStatusIcon(status.state, "20px")}
         </InputRightElement>
       </InputGroup>
 

src/lib/components/modal/tx/ButtonSection.tsx

@@ -1,5 +1,6 @@
 import { Button, Icon } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
+import { useRouter } from "next/router";
 import { useCallback } from "react";
 import { FiChevronRight } from "react-icons/fi";
 
@@ -20,6 +21,7 @@ export const ButtonSection = ({
 }: ButtonSectionProps) => {
   const navigate = useInternalNavigate();
   const { currentChainName } = useWallet();
+  const router = useRouter();
 
   const openExplorer = useCallback(() => {
     const txHash = receipts.find((r) => r.title === "Tx Hash")?.value;
@@ -64,6 +66,25 @@ export const ButtonSection = ({
           </Button>
         </>
       );
+    case "update-admin":
+      return (
+        <>
+          <Button variant="ghost-primary" onClick={openExplorer}>
+            See Transaction
+          </Button>
+          <Button
+            variant="primary"
+            rightIcon={
+              <Icon as={FiChevronRight} color="gray.900" fontSize="18px" />
+            }
+            onClick={() =>
+              navigate({ pathname: `/contract/${router.query.contract}` })
+            }
+          >
+            View Contract Details
+          </Button>
+        </>
+      );
     case "rejected":
     case "resend":
       return (

src/lib/data/constant.ts

@@ -64,6 +64,7 @@ export const typeUrlDict = {
   [MsgType.STORE_CODE]: "/cosmwasm.wasm.v1.MsgStoreCode",
   [MsgType.INSTANTIATE]: "/cosmwasm.wasm.v1.MsgInstantiateContract",
   [MsgType.EXECUTE]: "/cosmwasm.wasm.v1.MsgExecuteContract",
+  [MsgType.UPDATE_ADMIN]: "/cosmwasm.wasm.v1.MsgUpdateAdmin",
 };
 
 export const DEFAULT_RPC_ERROR = "Invalid format, or Something went wrong";