Add snapshot option for active Stargaze users

components/LinkTabs.data.ts

@@ -171,3 +171,16 @@ export const authzLinkTabs: LinkTabProps[] = [
     href: '/authz/revoke',
   },
 ]
+
+export const snapshotLinkTabs: LinkTabProps[] = [
+  {
+    title: 'Collection Holders',
+    description: `Take a snapshot of collection holders`,
+    href: '/snapshots/holders',
+  },
+  {
+    title: 'Chain Snapshots',
+    description: `Export a list of users fulfilling a given condition`,
+    href: '/snapshots/chain',
+  },
+]

pages/snapshots/chain.tsx

@@ -0,0 +1,98 @@
+/* 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={0} data={snapshotLinkTabs} />
+      <div className="flex flex-col w-1/4">
+        <span className="text-lg font-bold text-white">Chain Data 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 })

pages/snapshots/holders.tsx

@@ -8,6 +8,8 @@
 import { ContractPageHeader } from 'components/ContractPageHeader'
 import { AddressInput } from 'components/forms/FormInput'
 import { useInputState } from 'components/forms/FormInput.hooks'
+import { LinkTabs } from 'components/LinkTabs'
+import { snapshotLinkTabs } from 'components/LinkTabs.data'
 import { SelectCollection } from 'components/SelectCollection'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
@@ -17,7 +19,7 @@ import toast from 'react-hot-toast'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 
-const Snapshots: NextPage = () => {
+const Holders: NextPage = () => {
   const [collectionAddress, setCollectionAddress] = useState<string>('')
   const collectionAddressState = useInputState({
     id: 'collection-address',
@@ -52,14 +54,14 @@ const Snapshots: NextPage = () => {
         link={links.Documentation}
         title="Snapshots"
       />
-
+      <LinkTabs activeIndex={0} data={snapshotLinkTabs} />
       <SelectCollection selectCollection={setCollectionAddress} />
       <AddressInput className="w-3/4" {...collectionAddressState} />
       <div className="flex-col mt-2 w-full form-control">
         <h1 className="underline text-lg font-bold">Snapshot Options </h1>
         <div className="flex-row w-full">
           <label className="justify-start cursor-pointer label w-2/5">
-            <span className="mr-2 font-bold">Include listed tokens on Marketplace</span>
+            <span className="mr-2 font-bold">Include tokens listed on Marketplace</span>
             <input
               checked={includeListed}
               className={`${includeListed ? `bg-stargaze` : `bg-gray-600`} checkbox`}
@@ -70,7 +72,7 @@ const Snapshots: NextPage = () => {
             />
           </label>
           <label className="justify-start cursor-pointer label w-2/5">
-            <span className="mr-2 font-bold">Include staked tokens on DAOs</span>
+            <span className="mr-2 font-bold">Include tokens staked on DAOs</span>
             <input
               checked={includeStaked}
               className={`${includeStaked ? `bg-stargaze` : `bg-gray-600`} checkbox`}
@@ -81,7 +83,7 @@ const Snapshots: NextPage = () => {
             />
           </label>
           <label className="justify-start cursor-pointer label w-2/5">
-            <span className="mr-2 font-bold">Export holders for each token individually</span>
+            <span className="mr-2 font-bold">Export by Token ID</span>
             <input
               checked={exportIndividualTokens}
               className={`${exportIndividualTokens ? `bg-stargaze` : `bg-gray-600`} checkbox`}
@@ -148,4 +150,4 @@ const Snapshots: NextPage = () => {
   )
 }
 
-export default withMetadata(Snapshots, { center: false })
+export default withMetadata(Holders, { center: false })

pages/snapshots/index.tsx

@@ -1 +1 @@
-export { default } from './snapshot'
+export { default } from './holders'