Merge pull request #317 from public-awesome/snapshot-active-users

Snapshot active 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/collections/create.tsx

@@ -1903,6 +1903,13 @@ const CollectionCreationPage: NextPage = () => {
             <Alert className="mt-4" type="info">
               Setting the unit price as 0 for public minting may render the collection vulnerable for bot attacks.
               Please consider creating a whitelist of addresses that can mint for free instead.
+              <br />
+              <div className="flex flex-row justify-start">
+                <span className="mt-2 mr-2">You may export a list of active Stargaze addresses using</span>
+                <AnchorButton className="font-bold text-white hover:underline" external href="/snapshots/chain">
+                  Snapshots
+                </AnchorButton>
+              </div>
             </Alert>
           </Conditional>
         </Conditional>

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={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 })

pages/snapshots/holders.tsx

@@ -0,0 +1,165 @@
+/* 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 { 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'
+import { useEffect, 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'
+
+const Holders: NextPage = () => {
+  const [collectionAddress, setCollectionAddress] = useState<string>('')
+  const collectionAddressState = useInputState({
+    id: 'collection-address',
+    name: 'collection-address',
+    title: 'Collection Address',
+    defaultValue: '',
+  })
+
+  const [includeStaked, setIncludeStaked] = useState<boolean>(true)
+  const [includeListed, setIncludeListed] = useState<boolean>(true)
+  const [exportIndividualTokens, setExportIndividualTokens] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const snapshotEndpoint = `https://metabase.constellations.zone/api/public/card/4cf9550e-5eb7-4fe7-bd3b-dc33229f53dc/query/json?parameters=%5B%7B%22type%22%3A%22category%22%2C%22value%22%3A%22${collectionAddressState.value}%22%2C%22id%22%3A%22cb34b7a8-70cf-ba86-8d9c-360b5b2fedd3%22%2C%22target%22%3A%5B%22variable%22%2C%5B%22template-tag%22%2C%22collection_addr%22%5D%5D%7D%5D`
+
+  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()
+  }
+
+  useEffect(() => {
+    collectionAddressState.onChange(collectionAddress)
+  }, [collectionAddress])
+
+  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} />
+      <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 tokens listed on Marketplace</span>
+            <input
+              checked={includeListed}
+              className={`${includeListed ? `bg-stargaze` : `bg-gray-600`} checkbox`}
+              onClick={() => {
+                setIncludeListed(!includeListed)
+              }}
+              type="checkbox"
+            />
+          </label>
+          <label className="justify-start cursor-pointer label w-2/5">
+            <span className="mr-2 font-bold">Include tokens staked on DAOs</span>
+            <input
+              checked={includeStaked}
+              className={`${includeStaked ? `bg-stargaze` : `bg-gray-600`} checkbox`}
+              onClick={() => {
+                setIncludeStaked(!includeStaked)
+              }}
+              type="checkbox"
+            />
+          </label>
+          <label className="justify-start cursor-pointer label w-2/5">
+            <span className="mr-2 font-bold">Export by Token ID</span>
+            <input
+              checked={exportIndividualTokens}
+              className={`${exportIndividualTokens ? `bg-stargaze` : `bg-gray-600`} checkbox`}
+              onClick={() => {
+                setExportIndividualTokens(!exportIndividualTokens)
+              }}
+              type="checkbox"
+            />
+          </label>
+        </div>
+      </div>
+
+      <Button
+        className="px-4 py-2 font-bold text-white bg-stargaze rounded-md"
+        isLoading={isLoading}
+        onClick={() => {
+          if (collectionAddressState.value.length === 0) {
+            toast.error('Please select a collection or enter a valid collection address.', {
+              style: { maxWidth: 'none' },
+            })
+            return
+          }
+          setIsLoading(true)
+          fetch(snapshotEndpoint)
+            .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' },
+                })
+                return
+              }
+              if (exportIndividualTokens) {
+                const csv = `address,tokenId\n${data
+                  ?.map((row: any) => {
+                    if (!includeListed && row.is_listed) return ''
+                    if (!includeStaked && row.is_staked) return ''
+                    return `${row.owner_addr},${row.token_id}\n`
+                  })
+                  .join('')}`
+                download(csv, 'snapshot.csv', 'text/csv')
+                setIsLoading(false)
+                return
+              }
+              const aggregatedData: any[] = []
+              data.forEach((row: any) => {
+                if (!includeListed && row.is_listed) return
+                if (!includeStaked && row.is_staked) return
+                const existingRow = aggregatedData.find((r) => r.address === row.owner_addr)
+                if (existingRow) {
+                  existingRow.amount += 1
+                } else {
+                  aggregatedData.push({ address: row.owner_addr, amount: 1 })
+                }
+              })
+
+              aggregatedData.sort((a, b) => b.amount - a.amount)
+              const csv = `address,amount\n${aggregatedData.map((row: any) => Object.values(row).join(',')).join('\n')}`
+              download(csv, 'snapshot.csv', 'text/csv')
+              setIsLoading(false)
+            })
+            .catch((err) => {
+              setIsLoading(false)
+              toast.error(`Could not fetch snapshot data: ${err}`, {
+                style: { maxWidth: 'none' },
+              })
+              console.error('Could not fetch snapshot data: ', err)
+            })
+        }}
+      >
+        {' '}
+        Export Snapshot
+      </Button>
+    </section>
+  )
+}
+
+export default withMetadata(Holders, { center: false })

pages/snapshots/index.tsx

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

pages/snapshots/snapshot.tsx

@@ -1,84 +0,0 @@
-/* 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 */
-/* eslint-disable react/button-has-type */
-
-import { ContractPageHeader } from 'components/ContractPageHeader'
-import { AddressInput } from 'components/forms/FormInput'
-import { useInputState } from 'components/forms/FormInput.hooks'
-import { SelectCollection } from 'components/SelectCollection'
-import type { NextPage } from 'next'
-import { NextSeo } from 'next-seo'
-import { useEffect, 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'
-
-const Snapshots: NextPage = () => {
-  const [collectionAddress, setCollectionAddress] = useState<string>('')
-  const collectionAddressState = useInputState({
-    id: 'collection-address',
-    name: 'collection-address',
-    title: 'Collection Address',
-    defaultValue: '',
-  })
-
-  const snapshotEndpoint = `https://metabase.constellations.zone/api/public/card/b5764fb2-9a23-4ecf-866b-dec79c4c461e/query/json?parameters=%5B%7B%22type%22%3A%22category%22%2C%22value%22%3A%22${collectionAddressState.value}%22%2C%22id%22%3A%22cb34b7a8-70cf-ba86-8d9c-360b5b2fedd3%22%2C%22target%22%3A%5B%22variable%22%2C%5B%22template-tag%22%2C%22collection_addr%22%5D%5D%7D%5D`
-  // function to download .json from the endpoint
-  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()
-  }
-
-  useEffect(() => {
-    collectionAddressState.onChange(collectionAddress)
-  }, [collectionAddress])
-
-  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"
-      />
-
-      <SelectCollection selectCollection={setCollectionAddress} />
-      <AddressInput className="w-3/4" {...collectionAddressState} />
-      <button
-        className="px-4 py-2 font-bold text-white bg-stargaze rounded-md"
-        onClick={() => {
-          fetch(snapshotEndpoint)
-            .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' },
-                })
-                return
-              }
-              const csv = `address,amount\n${data?.map((row: any) => Object.values(row).join(',')).join('\n')}`
-              download(csv, 'snapshot.csv', 'text/csv')
-            })
-            .catch((err) => {
-              toast.error(`Could not fetch snapshot data: ${err}`, {
-                style: { maxWidth: 'none' },
-              })
-              console.error('Could not fetch snapshot data: ', err)
-            })
-        }}
-      >
-        {' '}
-        Export Snapshot
-      </button>
-    </section>
-  )
-}
-
-export default withMetadata(Snapshots, { center: false })