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

This commit is contained in:
Serkan Reis 2022-09-12 10:25:44 +03:00 committed by GitHub
parent 7d22328543
commit 11298185a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 2 deletions

View File

@ -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" />

View File

@ -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" />