99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
/* eslint-disable eslint-comments/disable-enable-pair */
|
|
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
|
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
|
/* eslint-disable tailwindcss/classnames-order */
|
|
|
|
import { Button } from 'components/Button'
|
|
import { ContractPageHeader } from 'components/ContractPageHeader'
|
|
import { LinkTabs } from 'components/LinkTabs'
|
|
import { snapshotLinkTabs } from 'components/LinkTabs.data'
|
|
import type { NextPage } from 'next'
|
|
import { NextSeo } from 'next-seo'
|
|
import { useState } from 'react'
|
|
import toast from 'react-hot-toast'
|
|
// import Brand from 'public/brand/brand.svg'
|
|
import { withMetadata } from 'utils/layout'
|
|
import { links } from 'utils/links'
|
|
|
|
export interface ChainDataType {
|
|
type: 'active-users'
|
|
endpoint: string
|
|
}
|
|
|
|
const Chain: NextPage = () => {
|
|
const activeUsersEndpoint = `https://metabase.constellations.zone/public/question/cc17fce5-3cc4-4b03-b100-81bdf982f391.json`
|
|
const [chainDataType, setChainDataType] = useState<ChainDataType>({
|
|
type: 'active-users',
|
|
endpoint: activeUsersEndpoint,
|
|
})
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
const download = (content: string, fileName: string, contentType: string) => {
|
|
const a = document.createElement('a')
|
|
const file = new Blob([content], { type: contentType })
|
|
a.href = URL.createObjectURL(file)
|
|
a.download = fileName
|
|
a.click()
|
|
}
|
|
|
|
return (
|
|
<section className="px-4 pt-4 pb-16 mx-auto space-y-8 ml-8 w-full">
|
|
<NextSeo title="Snapshots" />
|
|
<ContractPageHeader
|
|
description="Here you can export the snapshot of the holders for a collection."
|
|
link={links.Documentation}
|
|
title="Snapshots"
|
|
/>
|
|
<LinkTabs activeIndex={1} data={snapshotLinkTabs} />
|
|
<div className="flex flex-col w-1/4">
|
|
<span className="text-lg font-bold text-white">Chain Snapshot Type</span>
|
|
<select
|
|
className="mt-2 pt-2 pb-2 px-4 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
|
|
onChange={(e) => setChainDataType(JSON.parse(e.target.value))}
|
|
>
|
|
<option value={JSON.stringify({ type: 'active-users', endpoint: activeUsersEndpoint })}>
|
|
Active Stargaze Users
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<Button
|
|
className="px-4 py-2 mt-4 font-bold text-white bg-stargaze rounded-md"
|
|
isLoading={isLoading}
|
|
onClick={() => {
|
|
setIsLoading(true)
|
|
fetch(chainDataType.endpoint)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.length === 0) {
|
|
toast.error('Could not fetch snapshot data for the given collection address.', {
|
|
style: { maxWidth: 'none' },
|
|
})
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
if (chainDataType.type === 'active-users') {
|
|
const addresses = data.map((item: any) => item.address)
|
|
download(addresses.join('\n'), 'active-users.txt', 'text/plain')
|
|
}
|
|
setIsLoading(false)
|
|
})
|
|
.catch((err) => {
|
|
setIsLoading(false)
|
|
toast.error(`Could not fetch chain data: ${err}`, {
|
|
style: { maxWidth: 'none' },
|
|
})
|
|
console.error('Could not fetch chain data: ', err)
|
|
})
|
|
}}
|
|
>
|
|
{' '}
|
|
Export List
|
|
</Button>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default withMetadata(Chain, { center: false })
|