feat: migrate options and upload

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#108](https://github.com/alleslabs/celatone-frontend/pull/108) Add migrate options on migrate page and upload new code for migration
 - [#94](https://github.com/alleslabs/celatone-frontend/pull/94) Add unsupported assets in contract details page
 - [#72](https://github.com/alleslabs/celatone-frontend/pull/72) Fix general wording and grammar
 - [#110](https://github.com/alleslabs/celatone-frontend/pull/110) Fix proposal detail rendering

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

@@ -26,6 +26,7 @@ interface UploadTxParams {
   memo?: string;
   client: SigningCosmWasmClient;
   onTxSucceed?: (codeId: number) => void;
+  isMigrate: boolean;
 }
 
 export const uploadContractTx = ({
@@ -37,6 +38,7 @@ export const uploadContractTx = ({
   memo,
   client,
   onTxSucceed,
+  isMigrate,
 }: UploadTxParams): Observable<TxResultRendering> => {
   return pipe(
     sendingTx(fee),
@@ -80,15 +82,15 @@ export const uploadContractTx = ({
               <span style={{ fontWeight: 700 }}>
                 ‘{codeDesc || `${wasmFileName}(${txInfo.codeId})`}’
               </span>{" "}
-              is available on your stored code. Would you like to instantiate
-              your code now?
+              is available on your stored code. Would you like to{" "}
+              {isMigrate ? "migrate" : "instantiate"} your code now?
             </>
           ),
           headerIcon: (
             <Icon as={MdCloudUpload} fontSize="24px" color="text.dark" />
           ),
         },
-        actionVariant: "upload",
+        actionVariant: isMigrate ? "upload-migrate" : "upload",
       } as TxResultRendering;
     }
   )().pipe(catchTxError());

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

@@ -3,21 +3,27 @@ import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
 import { uploadContractTx } from "lib/app-fns/tx/upload";
+import type { Option } from "lib/types";
 
 export interface UploadStreamParams {
-  onTxSucceed?: (codeId: number) => void;
+  wasmFileName: Option<string>;
+  wasmCode: Option<Promise<ArrayBuffer>>;
   codeDesc: string;
+  estimatedFee: Option<StdFee>;
+  onTxSucceed?: (codeId: number) => void;
 }
 
-export const useUploadContractTx = (
-  wasmFileName: string | undefined,
-  wasmCode: Promise<ArrayBuffer> | undefined,
-  estimatedFee: StdFee | undefined
-) => {
+export const useUploadContractTx = (isMigrate: boolean) => {
   const { address, getCosmWasmClient } = useWallet();
 
   return useCallback(
-    async ({ onTxSucceed, codeDesc }: UploadStreamParams) => {
+    async ({
+      wasmFileName,
+      wasmCode,
+      codeDesc,
+      estimatedFee,
+      onTxSucceed,
+    }: UploadStreamParams) => {
       const client = await getCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
@@ -31,8 +37,9 @@ export const useUploadContractTx = (
         fee: estimatedFee,
         client,
         onTxSucceed,
+        isMigrate,
       });
     },
-    [address, getCosmWasmClient, estimatedFee, wasmCode, wasmFileName]
+    [address, getCosmWasmClient, isMigrate]
   );
 };

src/lib/components/ContractSelectSection.tsx

@@ -121,7 +121,7 @@ export const ContractSelectSection = observer(
     });
 
     const { refetch } = useQuery(
-      ["query", "instantiateInfo", contractAddress],
+      ["query", "instantiateInfo", endpoint, contractAddress],
       async () => queryInstantiateInfo(endpoint, contractAddress),
       {
         enabled: false,

src/lib/components/forms/FormStatus.tsx

@@ -1,7 +1,7 @@
 import { Icon, Spinner, Text } from "@chakra-ui/react";
 import { MdCheckCircle, MdOutlineWarning } from "react-icons/md";
 
-type ResponseState = "init" | "loading" | "success" | "error";
+export type ResponseState = "init" | "loading" | "success" | "error";
 
 export interface FormStatus {
   state: ResponseState;

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -90,7 +90,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
 
   // TODO: Abstract query
   const { refetch } = useQuery(
-    ["query", "instantiateInfo", contractAddressState],
+    ["query", "instantiateInfo", endpoint, contractAddressState],
     async () =>
       queryInstantiateInfo(endpoint, contractAddressState as ContractAddr),
     {

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

@@ -1,12 +1,14 @@
 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";
 
 import { getExplorerTxUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
 import type { ActionVariant, TxReceipt } from "lib/types";
 
+// TODO: refactor props to pass param in txResultRendering instead of receipt
 interface ButtonSectionProps {
   actionVariant?: ActionVariant;
   onClose?: () => void;
@@ -18,6 +20,7 @@ export const ButtonSection = ({
   onClose,
   receipts,
 }: ButtonSectionProps) => {
+  const router = useRouter();
   const navigate = useInternalNavigate();
   const { currentChainName } = useWallet();
 
@@ -64,6 +67,26 @@ export const ButtonSection = ({
           </Button>
         </>
       );
+    case "upload-migrate":
+      return (
+        <Button
+          variant="primary"
+          rightIcon={
+            <Icon as={FiChevronRight} color="gray.900" fontSize="18px" />
+          }
+          onClick={() => {
+            const codeId = receipts.find((r) => r.title === "Code ID")?.value;
+
+            navigate({
+              pathname: "/migrate",
+              query: { contract: router.query.contract, "code-id": codeId },
+            });
+            onClose?.();
+          }}
+        >
+          Proceed to Migrate
+        </Button>
+      );
     case "rejected":
     case "resend":
       return (

src/lib/components/stepper/StepperItem.tsx

@@ -1,7 +1,12 @@
 import { Flex, Icon, Text } from "@chakra-ui/react";
 import { MdCheck } from "react-icons/md";
 
-import type { Step } from "./types";
+import type { Mode, Step } from "./types";
+
+export const stepperText: Record<Mode, Record<number, string>> = {
+  deploy: { 1: "Upload or Select Code ID", 2: "Instantiate Code" },
+  migrate: { 1: "Migrate Options", 2: "Migrate Details" },
+};
 
 const StepLabel = ({
   step,
@@ -33,9 +38,11 @@ const StepLabel = ({
 };
 
 export const StepperItem = ({
+  mode,
   step,
   currentStep,
 }: {
+  mode: Mode;
   step: Step;
   currentStep: Step;
 }) => {
@@ -61,7 +68,7 @@ export const StepperItem = ({
         fontWeight={disabled ? 400 : 700}
         color={disabled ? "text.disabled" : "text.main"}
       >
-        {step === 1 ? "Upload or Select Code ID" : "Instantiate Code"}
+        {stepperText[mode][step]}
       </Text>
     </Flex>
   );

src/lib/components/stepper/index.tsx

@@ -1,17 +1,18 @@
 import { Flex } from "@chakra-ui/react";
 
 import { StepperItem } from "./StepperItem";
-import type { Step } from "./types";
+import type { Mode, Step } from "./types";
 
 interface StepperProps {
+  mode: Mode;
   currentStep: Step;
 }
 
-export const Stepper = ({ currentStep }: StepperProps) => {
+export const Stepper = ({ mode, currentStep }: StepperProps) => {
   return (
     <Flex width="100%">
-      <StepperItem step={1} currentStep={currentStep} />
-      <StepperItem step={2} currentStep={currentStep} />
+      <StepperItem step={1} mode={mode} currentStep={currentStep} />
+      <StepperItem step={2} mode={mode} currentStep={currentStep} />
     </Flex>
   );
 };

src/lib/components/stepper/types.ts

@@ -1 +1,3 @@
 export type Step = 1 | 2;
+
+export type Mode = "deploy" | "migrate";