Query update
This commit is contained in:
parent
de79ffa1db
commit
aeec57bdef
@ -1,71 +1,63 @@
|
|||||||
|
/* eslint-disable eslint-comments/disable-enable-pair */
|
||||||
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { Button } from 'components/Button'
|
import { Button } from 'components/Button'
|
||||||
import { dispatchQuery } from 'components/collections/queries/query'
|
|
||||||
import { ContractPageHeader } from 'components/ContractPageHeader'
|
import { ContractPageHeader } from 'components/ContractPageHeader'
|
||||||
import { AddressInput } from 'components/forms/FormInput'
|
import { AddressInput } from 'components/forms/FormInput'
|
||||||
import { useInputState } from 'components/forms/FormInput.hooks'
|
import { useInputState } from 'components/forms/FormInput.hooks'
|
||||||
import Lister from 'components/Lister'
|
import Lister from 'components/Lister'
|
||||||
import { useContracts } from 'contexts/contracts'
|
import { useContracts } from 'contexts/contracts'
|
||||||
|
import { dispatchQuery } from 'contracts/vendingMinter/messages/query'
|
||||||
import type { NextPage } from 'next'
|
import type { NextPage } from 'next'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import { NextSeo } from 'next-seo'
|
import { NextSeo } from 'next-seo'
|
||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { toast } from 'react-hot-toast'
|
import { toast } from 'react-hot-toast'
|
||||||
import { useQuery } from 'react-query'
|
import { useQuery } from 'react-query'
|
||||||
import { withMetadata } from 'utils/layout'
|
import { withMetadata } from 'utils/layout'
|
||||||
import { links } from 'utils/links'
|
import { links } from 'utils/links'
|
||||||
|
|
||||||
|
import { useWallet } from '../../contexts/wallet'
|
||||||
|
|
||||||
const CollectionQueriesPage: NextPage = () => {
|
const CollectionQueriesPage: NextPage = () => {
|
||||||
const { baseMinter: baseMinterContract, vendingMinter: vendingMinterContract, sg721: sg721Contract } = useContracts()
|
const { vendingMinter: vendingMinterContract } = useContracts()
|
||||||
const type = 'config'
|
const wallet = useWallet()
|
||||||
const sg721ContractAddress = `sg721ContractState.value`
|
|
||||||
const [doneList, setDoneList] = useState<number[]>([])
|
const [doneList, setDoneList] = useState<number[]>([])
|
||||||
const [processList, setProcessList] = useState<number[]>([])
|
const [processList, setProcessList] = useState<number[]>([])
|
||||||
const [errorList, setErrorList] = useState<number[]>([])
|
const [errorList, setErrorList] = useState<number[]>([])
|
||||||
const [numTokens, setNumTokens] = useState(0)
|
const [numTokens, setNumTokens] = useState(0)
|
||||||
const [pers, setPers] = useState(0)
|
const [percentage, setPercentage] = useState(0)
|
||||||
const minterContractState = useInputState({
|
const minterContractState = useInputState({
|
||||||
id: 'minter-contract-address',
|
id: 'minter-contract-address',
|
||||||
name: 'minter-contract-address',
|
name: 'minter-contract-address',
|
||||||
title: 'Minter Address',
|
title: 'Minter Contract Address',
|
||||||
subtitle: 'Address of the Minter contract',
|
defaultValue: '',
|
||||||
|
placeholder: 'stars1...',
|
||||||
})
|
})
|
||||||
const minterContractAddress = minterContractState.value
|
const minterContractAddress = minterContractState.value
|
||||||
|
|
||||||
const vendingMinterMessages = useMemo(
|
|
||||||
() => vendingMinterContract?.use(minterContractAddress),
|
|
||||||
[vendingMinterContract, minterContractAddress],
|
|
||||||
)
|
|
||||||
const baseMinterMessages = useMemo(
|
|
||||||
() => baseMinterContract?.use(minterContractAddress),
|
|
||||||
[baseMinterContract, minterContractAddress],
|
|
||||||
)
|
|
||||||
const sg721Messages = useMemo(() => sg721Contract?.use(sg721ContractAddress), [sg721Contract, sg721ContractAddress])
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (minterContractState.value.length > 0) {
|
if (minterContractAddress.length > 0) {
|
||||||
void router.replace({ query: { minterContractAddress } })
|
void router.replace({ query: { minterContractAddress } })
|
||||||
}
|
}
|
||||||
}, [minterContractState.value])
|
}, [minterContractAddress])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const initial = new URL(document.URL).searchParams.get('minterContractAddress')
|
const initial = new URL(document.URL).searchParams.get('minterContractAddress')
|
||||||
if (initial && initial.length > 0) minterContractState.onChange(initial)
|
if (initial && initial.length > 0) minterContractState.onChange(initial)
|
||||||
console.log(minterContractState, minterContractAddress)
|
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const { data: response } = useQuery(
|
const { data: response } = useQuery(
|
||||||
[sg721Messages, baseMinterMessages, vendingMinterMessages, type] as const,
|
[minterContractAddress, vendingMinterContract, wallet] as const,
|
||||||
async ({ queryKey }) => {
|
async () => {
|
||||||
const [_sg721Messages, _baseMinterMessages_, _vendingMinterMessages, _type] = queryKey
|
const messages = vendingMinterContract?.use(minterContractAddress)
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
||||||
const result = await dispatchQuery({
|
const result = await dispatchQuery({
|
||||||
vendingMinterMessages: _vendingMinterMessages,
|
address: '',
|
||||||
baseMinterMessages: _baseMinterMessages_,
|
messages,
|
||||||
sg721Messages: _sg721Messages,
|
type: 'config',
|
||||||
type: _type,
|
|
||||||
})
|
})
|
||||||
return result
|
return result
|
||||||
},
|
},
|
||||||
@ -74,15 +66,14 @@ const CollectionQueriesPage: NextPage = () => {
|
|||||||
onError: (error: any) => {
|
onError: (error: any) => {
|
||||||
toast.error(error.message, { style: { maxWidth: 'none' } })
|
toast.error(error.message, { style: { maxWidth: 'none' } })
|
||||||
},
|
},
|
||||||
enabled: Boolean(sg721ContractAddress && minterContractAddress && type),
|
enabled: Boolean(minterContractAddress && vendingMinterContract),
|
||||||
retry: false,
|
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (response) {
|
if (response) {
|
||||||
setNumTokens(response['num_tokens'])
|
setNumTokens(response['num_tokens'])
|
||||||
setPers(0)
|
setPercentage(0)
|
||||||
setDoneList([])
|
setDoneList([])
|
||||||
setProcessList([])
|
setProcessList([])
|
||||||
setErrorList([])
|
setErrorList([])
|
||||||
@ -90,8 +81,8 @@ const CollectionQueriesPage: NextPage = () => {
|
|||||||
}, [response])
|
}, [response])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (numTokens !== 0) setPers((100 * doneList.length) / numTokens)
|
if (numTokens !== 0) setPercentage((100 * doneList.length) / numTokens)
|
||||||
else setPers(0)
|
else setPercentage(0)
|
||||||
}, [doneList.length, numTokens])
|
}, [doneList.length, numTokens])
|
||||||
|
|
||||||
function chooseAlternate(url: string, attempt: number) {
|
function chooseAlternate(url: string, attempt: number) {
|
||||||
@ -140,7 +131,7 @@ const CollectionQueriesPage: NextPage = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log('hata: ', i, e)
|
console.log('error: ', i, e)
|
||||||
}
|
}
|
||||||
if (totalAttempt !== 4) {
|
if (totalAttempt !== 4) {
|
||||||
void warmOne(i, image, attempt === 3 ? 0 : attempt + 1, attempt === 3 ? totalAttempt + 1 : totalAttempt)
|
void warmOne(i, image, attempt === 3 ? 0 : attempt + 1, attempt === 3 ? totalAttempt + 1 : totalAttempt)
|
||||||
@ -161,7 +152,6 @@ const CollectionQueriesPage: NextPage = () => {
|
|||||||
async function warmingProcess(url: string, attempt: number) {
|
async function warmingProcess(url: string, attempt: number) {
|
||||||
const link = `${chooseAlternate(url, attempt)}/1`
|
const link = `${chooseAlternate(url, attempt)}/1`
|
||||||
try {
|
try {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
||||||
const { data, status } = await axios.get(link)
|
const { data, status } = await axios.get(link)
|
||||||
if (status === 200) {
|
if (status === 200) {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||||
@ -179,11 +169,11 @@ const CollectionQueriesPage: NextPage = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="py-6 px-12 space-y-4">
|
<section className="py-6 px-12 space-y-4">
|
||||||
<NextSeo title="Warm Up Your Collection" />
|
<NextSeo title="Collection Warm Up" />
|
||||||
<ContractPageHeader
|
<ContractPageHeader
|
||||||
description="Here you can warm up your collection items"
|
description="Here you can pre-warm your collection for improved IPFS performance."
|
||||||
link={links.Documentation}
|
link={links.Documentation}
|
||||||
title="Warm Up Collection Items"
|
title="Collection Warm Up"
|
||||||
/>
|
/>
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
<AddressInput {...minterContractState} />
|
<AddressInput {...minterContractState} />
|
||||||
@ -198,7 +188,7 @@ const CollectionQueriesPage: NextPage = () => {
|
|||||||
<div className="flex flex-row w-full text-center">
|
<div className="flex flex-row w-full text-center">
|
||||||
<div className="w-1/3">{numTokens}</div>
|
<div className="w-1/3">{numTokens}</div>
|
||||||
<div className="w-1/3">{doneList.length}</div>
|
<div className="w-1/3">{doneList.length}</div>
|
||||||
<div className="w-1/3">{(Math.round(pers * 100) / 100).toFixed(2)}%</div>
|
<div className="w-1/3">{(Math.round(percentage * 100) / 100).toFixed(2)}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
Loading…
Reference in New Issue
Block a user