feat: fully functional deploy script page

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#556](https://github.com/alleslabs/celatone-frontend/pull/556) Fully functional deploy script page
 - [#550](https://github.com/alleslabs/celatone-frontend/pull/550) Add modules and resources in account detail
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Wireup publish module tx
 - [#544](https://github.com/alleslabs/celatone-frontend/pull/544) Show module source code if available

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

@@ -0,0 +1,77 @@
+import type { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { StdFee } from "@cosmjs/stargate";
+import { pipe } from "@rx-stream/pipe";
+import type { Observable } from "rxjs";
+
+import type { CatchTxError } from "lib/app-provider/tx/catchTxError";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import type { HumanAddr, TxResultRendering } from "lib/types";
+import { TxStreamPhase } from "lib/types";
+import { formatUFee } from "lib/utils";
+
+import { postTx, sendingTx } from "./common";
+
+interface DeployScriptTxParams {
+  address: HumanAddr;
+  client: SigningCosmWasmClient;
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+  catchTxError: CatchTxError;
+  fee: StdFee;
+  messages: EncodeObject[];
+}
+
+export const deployScriptTx = ({
+  address,
+  client,
+  catchTxError,
+  onTxSucceed,
+  onTxFailed,
+  fee,
+  messages,
+}: DeployScriptTxParams): Observable<TxResultRendering> => {
+  return pipe(
+    sendingTx(fee),
+    postTx({
+      postFn: () => client.signAndBroadcast(address, messages, fee),
+    }),
+    ({ value: txInfo }) => {
+      const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]
+        .value;
+      onTxSucceed?.();
+      return {
+        value: null,
+        phase: TxStreamPhase.SUCCEED,
+        receipts: [
+          {
+            title: "Tx Hash",
+            value: txInfo.transactionHash,
+            html: (
+              <ExplorerLink
+                type="tx_hash"
+                value={txInfo.transactionHash}
+                openNewTab
+              />
+            ),
+          },
+          {
+            title: "Tx Fee",
+            value: txFee ? formatUFee(txFee) : "N/A",
+          },
+        ],
+        receiptInfo: {
+          header: "Script Deployed!",
+          headerIcon: (
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize={5}
+            />
+          ),
+        },
+      } as TxResultRendering;
+    }
+  )().pipe(catchTxError(onTxFailed));
+};

src/lib/app-provider/env.ts

@@ -98,6 +98,7 @@ export enum CELATONE_QUERY_KEYS {
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
   FUNCTION_VIEW = "CELATONE_QUERY_FUNCTION_VIEW",
   MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
+  SCRIPT_DECODE = "CELATONE_QUERY_SCRIPT_DECODE",
   // RESOURCE
   ACCOUNT_RESOURCES = "CELATONE_QUERY_ACCOUNT_RESOURCES",
 }

src/lib/app-provider/tx/script.tsx

@@ -0,0 +1,50 @@
+import type { EncodeObject } from "@cosmjs/proto-signing";
+import type { StdFee } from "@cosmjs/stargate";
+import { useCallback } from "react";
+
+import { useCurrentChain } from "../hooks";
+import { useTrack } from "lib/amplitude";
+import { deployScriptTx } from "lib/app-fns/tx/script";
+import type { HumanAddr } from "lib/types";
+
+import { useCatchTxError } from "./catchTxError";
+
+export interface DeployScriptStreamParams {
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+  estimatedFee?: StdFee;
+  messages: EncodeObject[];
+}
+
+export const useDeployScriptTx = () => {
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
+  const { trackTxSucceed } = useTrack();
+  const catchTxError = useCatchTxError();
+
+  return useCallback(
+    async ({
+      onTxSucceed,
+      onTxFailed,
+      estimatedFee,
+      messages,
+    }: DeployScriptStreamParams) => {
+      const client = await getSigningCosmWasmClient();
+      if (!address || !client)
+        throw new Error("Please check your wallet connection.");
+      if (!estimatedFee) return null;
+      return deployScriptTx({
+        address: address as HumanAddr,
+        client,
+        onTxSucceed: () => {
+          trackTxSucceed();
+          onTxSucceed?.();
+        },
+        onTxFailed,
+        catchTxError,
+        fee: estimatedFee,
+        messages,
+      });
+    },
+    [address, getSigningCosmWasmClient, trackTxSucceed, catchTxError]
+  );
+};

src/lib/components/ComponentLoader.tsx

@@ -0,0 +1,10 @@
+import { Spinner } from "@chakra-ui/react";
+import type { PropsWithChildren } from "react";
+
+export const ComponentLoader = ({
+  isLoading,
+  children,
+}: PropsWithChildren<{ isLoading: boolean }>) => {
+  if (isLoading) return <Spinner size="lg" mx="auto" />;
+  return <>{children}</>;
+};

src/lib/components/abi/AbiForm.tsx

@@ -1,4 +1,5 @@
 import { Flex } from "@chakra-ui/react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import type { AbiFormData, ExposedFunction } from "lib/types";
@@ -19,14 +20,19 @@ export const AbiForm = ({
   propsOnChange,
   propsOnErrors,
 }: AbiFormProps) => {
-  const { setValue, watch, getValues } = useForm<AbiFormData>({
+  const { setValue, watch, getValues, reset } = useForm<AbiFormData>({
     defaultValues: initialData,
     mode: "all",
   });
   const { typeArgs, args } = watch();
 
+  useEffect(() => {
+    reset(initialData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(initialData), reset]);
+
   return (
-    <Flex direction="column" gap={4}>
+    <Flex direction="column" gap={4} w="full">
       {Object.keys(typeArgs).length > 0 && (
         <TypesForm
           genericTypeParams={fn.generic_type_params}

src/lib/components/dropzone/index.tsx

@@ -13,11 +13,13 @@ import { DROPZONE_CONFIG } from "./config";
 interface DropZoneProps extends FlexProps {
   setFile: (file: File) => void;
   fileType: DropzoneFileType;
+  error?: string;
 }
 
 export function DropZone({
   setFile,
   fileType,
+  error,
   ...componentProps
 }: DropZoneProps) {
   const wasm = useWasmConfig({ shouldRedirect: false });
@@ -52,11 +54,13 @@ export function DropZone({
     maxSize,
   });
 
+  const isError = Boolean(error || fileRejections.length > 0);
+
   return (
     <Flex direction="column">
       <Flex
         border="1px dashed"
-        borderColor={fileRejections.length > 0 ? "error.main" : "gray.700"}
+        borderColor={isError ? "error.main" : "gray.700"}
         w="full"
         p="24px 16px"
         borderRadius="8px"
@@ -92,9 +96,9 @@ export function DropZone({
           )
         </Text>
       </Flex>
-      {fileRejections.length > 0 && (
-        <Text variant="body3" color="error.main" mt="2px">
-          {fileRejections[0].errors[0].message}
+      {isError && (
+        <Text variant="body3" color="error.main" mt={1}>
+          {fileRejections[0]?.errors[0]?.message ?? error}
         </Text>
       )}
     </Flex>

src/lib/layout/navbar/index.tsx

@@ -82,10 +82,9 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
               category: "Quick Actions",
               slug: "quick-actions",
               submenu: [
-                // TODO change path to /account/0x1
                 {
                   name: "0x1 Page",
-                  slug: "/deploy",
+                  slug: "/accounts/0x1",
                   icon: "home" as IconKeys,
                 },
                 {

src/lib/pages/deploy-script/components/Footer.tsx

@@ -0,0 +1,41 @@
+import { Button, Flex, Spinner } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+interface FooterProps {
+  disabled: boolean;
+  isLoading: boolean;
+  executeScript: () => void;
+}
+
+export const Footer = ({
+  isLoading = false,
+  disabled,
+  executeScript,
+}: FooterProps) => {
+  const router = useRouter();
+  return (
+    <Flex
+      w="full"
+      bg="gray.900"
+      h="70px"
+      bottom={0}
+      position="sticky"
+      zIndex={2}
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Flex justify="space-between" w="540px">
+        <Button variant="outline-primary" onClick={router.back}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          isDisabled={isLoading || disabled}
+          onClick={executeScript}
+        >
+          {isLoading ? <Spinner size="md" variant="light" /> : "Execute Script"}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};

src/lib/pages/deploy-script/components/ScriptInput.tsx

@@ -0,0 +1,50 @@
+import { Flex, chakra } from "@chakra-ui/react";
+
+import { AbiForm } from "lib/components/abi";
+import type { AbiFormData, ExposedFunction, Option } from "lib/types";
+
+const MessageContainer = chakra(Flex, {
+  baseStyle: {
+    w: "full",
+    bg: "gray.900",
+    p: "24px 8px",
+    borderRadius: "8px",
+    fontSize: "14px",
+    color: "gray.400",
+    justifyContent: "center",
+  },
+});
+
+interface ScriptInputProps {
+  fn: Option<ExposedFunction>;
+  initialData: AbiFormData;
+  propsOnChange?: (data: AbiFormData) => void;
+  propsOnErrors?: (errors: [string, string][]) => void;
+}
+
+export const ScriptInput = ({
+  fn,
+  initialData,
+  propsOnChange,
+  propsOnErrors,
+}: ScriptInputProps) => {
+  if (!fn)
+    return (
+      <MessageContainer>
+        Your script input will display here after uploading .mv file.
+      </MessageContainer>
+    );
+
+  return fn.generic_type_params.length || fn.params.length ? (
+    <AbiForm
+      fn={fn}
+      initialData={initialData}
+      propsOnChange={propsOnChange}
+      propsOnErrors={propsOnErrors}
+    />
+  ) : (
+    <MessageContainer>
+      Your uploaded script file does not require any input.
+    </MessageContainer>
+  );
+};