130 lines
4.4 KiB
TypeScript
130 lines
4.4 KiB
TypeScript
/* eslint-disable eslint-comments/disable-enable-pair */
|
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
|
|
import clsx from 'clsx'
|
|
import { Alert } from 'components/Alert'
|
|
import { Button } from 'components/Button'
|
|
import { Conditional } from 'components/Conditional'
|
|
import { ContractPageHeader } from 'components/ContractPageHeader'
|
|
import { JsonPreview } from 'components/JsonPreview'
|
|
import type { NextPage } from 'next'
|
|
import { NextSeo } from 'next-seo'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { toast } from 'react-hot-toast'
|
|
import { FaAsterisk } from 'react-icons/fa'
|
|
import { NETWORK } from 'utils/constants'
|
|
import { withMetadata } from 'utils/layout'
|
|
import { useWallet } from 'utils/wallet'
|
|
|
|
const UploadContract: NextPage = () => {
|
|
const wallet = useWallet()
|
|
|
|
const [loading, setLoading] = useState(false)
|
|
const [transactionResult, setTransactionResult] = useState<any>()
|
|
const [wasmFile, setWasmFile] = useState<File | null>(null)
|
|
const [wasmByteArray, setWasmByteArray] = useState<Uint8Array | null>(null)
|
|
|
|
const inputFile = useRef<HTMLInputElement>(null)
|
|
|
|
const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (!e.target.files) return
|
|
setWasmFile(e.target.files[0])
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (wasmFile) {
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
try {
|
|
if (!e.target?.result) return toast.error('Error parsing file.')
|
|
const byteArray = new Uint8Array(e.target.result as ArrayBuffer)
|
|
setWasmByteArray(byteArray)
|
|
} catch (error: any) {
|
|
toast.error(error.message)
|
|
}
|
|
}
|
|
reader.readAsArrayBuffer(wasmFile)
|
|
}
|
|
}, [wasmFile])
|
|
|
|
const upload = async () => {
|
|
try {
|
|
if (!wallet.isWalletConnected) return toast.error('Please connect your wallet.')
|
|
if (!wasmFile || !wasmByteArray) return toast.error('No file selected.')
|
|
|
|
setLoading(true)
|
|
|
|
const client = await wallet.getSigningCosmWasmClient()
|
|
|
|
const result = await client.upload(wallet.address as string, wasmByteArray, 'auto')
|
|
|
|
setTransactionResult({
|
|
transactionHash: result.transactionHash,
|
|
codeId: result.codeId,
|
|
originalSize: result.originalSize,
|
|
compressedSize: result.compressedSize,
|
|
originalChecksum: result.checksum,
|
|
})
|
|
|
|
setLoading(false)
|
|
} catch (err: any) {
|
|
setLoading(false)
|
|
toast.error(err.message, { style: { maxWidth: 'none' } })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="py-6 px-12 space-y-4">
|
|
<Conditional test={NETWORK === 'testnet'}>
|
|
<NextSeo title="Upload Contract" />
|
|
<ContractPageHeader
|
|
description="Here you can upload a contract on Stargaze Testnet."
|
|
link=""
|
|
title="Upload Contract"
|
|
/>
|
|
<div className="inset-x-0 bottom-0 border-b-2 border-white/25" />
|
|
|
|
<Conditional test={Boolean(transactionResult)}>
|
|
<Alert type="info">
|
|
<b>Upload success!</b> Here is the transaction result containing the code ID, transaction hash and other
|
|
data.
|
|
</Alert>
|
|
<JsonPreview content={transactionResult} title="Transaction Result" />
|
|
<br />
|
|
</Conditional>
|
|
|
|
<div
|
|
className={clsx(
|
|
'flex relative justify-center items-center space-y-4 h-32',
|
|
'rounded border-2 border-white/20 border-dashed',
|
|
)}
|
|
>
|
|
<input
|
|
accept=".wasm"
|
|
className={clsx(
|
|
'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
|
|
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
|
|
)}
|
|
onChange={onFileChange}
|
|
ref={inputFile}
|
|
type="file"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end pb-6">
|
|
<Button isDisabled={!wasmFile} isLoading={loading} isWide leftIcon={<FaAsterisk />} onClick={upload}>
|
|
Upload Contract
|
|
</Button>
|
|
</div>
|
|
</Conditional>
|
|
<Conditional test={NETWORK === 'mainnet'}>
|
|
<NextSeo title="Upload Contract" />
|
|
<ContractPageHeader description="" link="" title="Upload Contract" />
|
|
<Alert type="info">Permissionless upload of contracts is only supported for testnet currently.</Alert>
|
|
</Conditional>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default withMetadata(UploadContract, { center: false })
|