feature(Contract): Migrate contract

src/app/routes.tsx

@@ -37,6 +37,7 @@ import VoteTx from "txs/gov/VoteTx"
 import StoreCodeTx from "txs/wasm/StoreCodeTx"
 import InstantiateContractTx from "txs/wasm/InstantiateContractTx"
 import ExecuteContractTx from "txs/wasm/ExecuteContractTx"
+import MigrateContractTx from "txs/wasm/MigrateContractTx"
 import AnchorEarnTx from "txs/earn/AnchorEarnTx"
 import SignMultisigTxPage from "pages/multisig/SignMultisigTxPage"
 import PostMultisigTxPage from "pages/multisig/PostMultisigTxPage"
@@ -127,6 +128,7 @@ export const useNav = () => {
     { path: "/contract/instantiate", element: <InstantiateContractTx /> },
     { path: "/contract/store", element: <StoreCodeTx /> },
     { path: "/contract/execute/:contract", element: <ExecuteContractTx /> },
+    { path: "/contract/migrate/:contract", element: <MigrateContractTx /> },
     { path: "/earn", element: <AnchorEarnTx /> },
 
     /* auth */

src/pages/contract/Contract.tsx

@@ -1,17 +1,17 @@
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import ManageSearchIcon from "@mui/icons-material/ManageSearch"
-import { AccAddress } from "@terra-money/terra.js"
+import { AccAddress, ContractInfo } from "@terra-money/terra.js"
 import createContext from "utils/createContext"
 import { useContractInfo } from "data/queries/wasm"
 import { Page, Card, Grid } from "components/layout"
 import { Fetching, State, Empty } from "components/feedback"
 import { SearchInput } from "components/form"
 import ContractActions from "./ContractActions"
-import ContractDetails from "./ContractDetails"
+import ContractItem from "./ContractItem"
 
 export const [useContract, ContractProvider] =
-  createContext<AccAddress>("useContract")
+  createContext<ContractInfo>("useContract")
 
 const Contract = () => {
   const { t } = useTranslation()
@@ -41,8 +41,8 @@ const Contract = () => {
         ) : (
           <Fetching {...state}>
             {result && (
-              <ContractProvider value={address}>
-                <ContractDetails {...result} />
+              <ContractProvider value={result}>
+                <ContractItem {...result} />
               </ContractProvider>
             )}
           </Fetching>

src/pages/contract/ContractDetails.module.scss

@@ -1,10 +1,5 @@
 @import "mixins";
 
-.main {
-  overflow: hidden;
-  width: 100%;
-}
-
 .header {
   @include desktop {
     @include flex(flex-start);
@@ -20,7 +15,3 @@
 .link {
   font-weight: var(--normal);
 }
-
-.wrapper {
-  overflow: hidden;
-}

src/pages/contract/ContractDetails.tsx

@@ -1,13 +1,12 @@
 import { useTranslation } from "react-i18next"
 import { ContractInfo } from "@terra-money/terra.js"
 import { Pre, FinderLink } from "components/general"
-import { Card, Grid } from "components/layout"
-import ContractItemActions from "./ContractItemActions"
+import { Grid } from "components/layout"
 import styles from "./ContractDetails.module.scss"
 
 const ContractDetails = (props: ContractInfo) => {
   const { t } = useTranslation()
-  const { code_id, address, admin, creator, init_msg } = props
+  const { code_id, admin, creator, init_msg } = props
 
   const contents = [
     {
@@ -25,31 +24,24 @@ const ContractDetails = (props: ContractInfo) => {
   ]
 
   return (
-    <Card
-      title={<FinderLink className={styles.link}>{address}</FinderLink>}
-      extra={<ContractItemActions />}
-      bordered
-      mainClassName={styles.main}
-    >
-      <Grid gap={32}>
-        <header className={styles.header}>
-          {contents.map(({ title, content }) =>
-            !content ? null : (
-              <Grid gap={4} key={title}>
-                <h1>{title}</h1>
-                <p>{content}</p>
-              </Grid>
-            )
-          )}
-        </header>
+    <Grid gap={32}>
+      <header className={styles.header}>
+        {contents.map(({ title, content }) =>
+          !content ? null : (
+            <Grid gap={4} key={title}>
+              <h1>{title}</h1>
+              <p>{content}</p>
+            </Grid>
+          )
+        )}
+      </header>
 
-        <Grid gap={4} className={styles.wrapper}>
-          {/* Do not translate this */}
-          <h1>InitMsg</h1>
-          <Pre height={240}>{init_msg}</Pre>
-        </Grid>
+      <Grid gap={4} className={styles.wrapper}>
+        {/* Do not translate this */}
+        <h1>InitMsg</h1>
+        <Pre height={240}>{init_msg}</Pre>
       </Grid>
-    </Card>
+    </Grid>
   )
 }
 

src/pages/contract/ContractItem.module.scss

@@ -0,0 +1,8 @@
+.main {
+  overflow: hidden;
+  width: 100%;
+}
+
+.link {
+  font-weight: var(--normal);
+}

src/pages/contract/ContractItem.tsx

@@ -0,0 +1,23 @@
+import { ContractInfo } from "@terra-money/terra.js"
+import { FinderLink } from "components/general"
+import { Card } from "components/layout"
+import ContractItemActions from "./ContractItemActions"
+import ContractDetails from "./ContractDetails"
+import styles from "./ContractItem.module.scss"
+
+const ContractItem = (props: ContractInfo) => {
+  const { address } = props
+
+  return (
+    <Card
+      title={<FinderLink className={styles.link}>{address}</FinderLink>}
+      extra={<ContractItemActions />}
+      mainClassName={styles.main}
+      bordered
+    >
+      <ContractDetails {...props} />
+    </Card>
+  )
+}
+
+export default ContractItem

src/pages/contract/ContractItemActions.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next"
+import { useAddress } from "data/wallet"
 import { Button, LinkButton } from "components/general"
 import { ModalButton } from "components/feedback"
 import { ExtraActions } from "components/layout"
@@ -7,7 +8,8 @@ import { useContract } from "./Contract"
 
 const ContractItemActions = () => {
   const { t } = useTranslation()
-  const address = useContract()
+  const connectedAddress = useAddress()
+  const { address, admin } = useContract()
 
   return (
     <ExtraActions>
@@ -25,6 +27,12 @@ const ContractItemActions = () => {
       <LinkButton to={`/contract/execute/${address}`} size="small" outline>
         {t("Execute")}
       </LinkButton>
+
+      {admin && connectedAddress === admin && (
+        <LinkButton to={`/contract/migrate/${address}`} size="small" outline>
+          {t("Migrate")}
+        </LinkButton>
+      )}
     </ExtraActions>
   )
 }

src/pages/contract/ContractQuery.tsx

@@ -18,7 +18,7 @@ interface Values {
 
 const ContractQuery = () => {
   const { t } = useTranslation()
-  const contract = useContract()
+  const { address } = useContract()
 
   /* form */
   const form = useForm<Values>({ mode: "onChange" })
@@ -32,7 +32,7 @@ const ContractQuery = () => {
   const [query, setQuery] = useState<object>({})
 
   const { data, error, ...state } = useQuery({
-    ...getContractQuery<object>(contract, query),
+    ...getContractQuery<object>(address, query),
     enabled: !isEmpty(query),
     retry: false,
   })

src/txs/wasm/MigrateContractForm.tsx

@@ -0,0 +1,96 @@
+import { useCallback, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { useForm } from "react-hook-form"
+import { AccAddress, MsgMigrateContract } from "@terra-money/terra.js"
+import { parseJSON, validateMsg } from "utils/data"
+import { useAddress } from "data/wallet"
+import { useBankBalance } from "data/queries/bank"
+import { Form, FormItem } from "components/form"
+import { Input, EditorInput } from "components/form"
+import validate from "../validate"
+import Tx, { getInitialGasDenom } from "../Tx"
+
+interface TxValues {
+  id?: number
+  msg?: string
+}
+
+const MigrateContractForm = ({ contract }: { contract: AccAddress }) => {
+  const { t } = useTranslation()
+
+  const address = useAddress()
+  const bankBalance = useBankBalance()
+
+  /* tx context */
+  const initialGasDenom = getInitialGasDenom(bankBalance)
+
+  /* form */
+  const form = useForm<TxValues>({ mode: "onChange" })
+  const { register, watch, handleSubmit, formState } = form
+  const { errors } = formState
+  const values = watch()
+
+  /* tx */
+  const createTx = useCallback(
+    ({ id, msg }: TxValues) => {
+      if (!address || !(id && msg)) return
+      if (!validateMsg(msg)) return
+
+      const migrate_msg = parseJSON(msg)
+      const msgs = [new MsgMigrateContract(address, contract, id, migrate_msg)]
+
+      return { msgs }
+    },
+    [address, contract]
+  )
+
+  /* fee */
+  const estimationTxValues = useMemo(() => values, [values])
+
+  const tx = {
+    initialGasDenom,
+    estimationTxValues,
+    createTx,
+    onSuccess: { label: t("Contract"), path: "/contract" },
+  }
+
+  return (
+    <Tx {...tx}>
+      {({ fee, submit }) => (
+        <Form onSubmit={handleSubmit(submit.fn)}>
+          <FormItem label={t("Code ID")} error={errors.id?.message}>
+            <Input
+              {...register("id", {
+                valueAsNumber: true,
+                required: "Code ID is required",
+                min: {
+                  value: 0,
+                  message: "Code ID must be a positive integer",
+                },
+                validate: {
+                  integer: (value) =>
+                    Number.isInteger(value) || "Code ID must be an integer",
+                },
+              })}
+              inputMode="decimal"
+              placeholder="1"
+              autoFocus
+            />
+          </FormItem>
+
+          <FormItem
+            label="Migrate msg" // do not translate this
+            error={errors.msg?.message}
+          >
+            <EditorInput {...register("msg", { validate: validate.msg() })} />
+          </FormItem>
+
+          {fee.render()}
+          {submit.button}
+        </Form>
+      )}
+    </Tx>
+  )
+}
+
+export default MigrateContractForm

src/txs/wasm/MigrateContractTx.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { Page, Card } from "components/layout"
+import TxContext from "../TxContext"
+import MigrateContractForm from "./MigrateContractForm"
+
+const MigrateContractTx = () => {
+  const { t } = useTranslation()
+  const { contract } = useParams()
+
+  if (!contract) throw new Error("Contract is not defined")
+
+  return (
+    <Page title={t("Migrate")} small>
+      <Card>
+        <TxContext>
+          <MigrateContractForm contract={contract} />
+        </TxContext>
+      </Card>
+    </Page>
+  )
+}
+
+export default MigrateContractTx