Update contract address using router on contract execution pages (#7)

pages/contracts/minter/execute.tsx

@@ -16,9 +16,10 @@ import { useWallet } from 'contexts/wallet'
 import type { DispatchExecuteArgs } from 'contracts/minter/messages/execute'
 import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/minter/messages/execute'
 import type { NextPage } from 'next'
+import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
 import type { FormEvent } from 'react'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { FaArrowRight } from 'react-icons/fa'
 import { useMutation } from 'react-query'
@@ -62,6 +63,7 @@ const MinterExecutePage: NextPage = () => {
     title: 'Minter Address',
     subtitle: 'Address of the Minter contract',
   })
+  const contractAddress = contractState.value
 
   const recipientState = useInputState({
     id: 'recipient-address',
@@ -122,6 +124,19 @@ const MinterExecutePage: NextPage = () => {
     },
   )
 
+  const router = useRouter()
+
+  useEffect(() => {
+    if (contractAddress.length > 0) {
+      void router.replace({ query: { contractAddress } })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contractAddress])
+  useEffect(() => {
+    const initial = new URL(document.URL).searchParams.get('contractAddress')
+    if (initial && initial.length > 0) contractState.onChange(initial)
+  }, [])
+
   return (
     <section className="py-6 px-12 space-y-4">
       <NextSeo title="Execute Minter Contract" />

pages/contracts/sg721/execute.tsx

@@ -15,9 +15,10 @@ import { useWallet } from 'contexts/wallet'
 import type { DispatchExecuteArgs } from 'contracts/sg721/messages/execute'
 import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/sg721/messages/execute'
 import type { NextPage } from 'next'
+import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
 import type { FormEvent } from 'react'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { FaArrowRight } from 'react-icons/fa'
 import { useMutation } from 'react-query'
@@ -49,6 +50,8 @@ const Sg721ExecutePage: NextPage = () => {
     subtitle: 'Address of the Sg721 contract',
   })
 
+  const contractAddress = contractState.value
+
   const messageState = useInputState({
     id: 'message',
     name: 'message',
@@ -121,6 +124,19 @@ const Sg721ExecutePage: NextPage = () => {
     },
   )
 
+  const router = useRouter()
+
+  useEffect(() => {
+    if (contractAddress.length > 0) {
+      void router.replace({ query: { contractAddress } })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contractAddress])
+  useEffect(() => {
+    const initial = new URL(document.URL).searchParams.get('contractAddress')
+    if (initial && initial.length > 0) contractState.onChange(initial)
+  }, [])
+
   return (
     <section className="py-6 px-12 space-y-4">
       <NextSeo title="Execute Sg721 Contract" />