Playground adventures

Author: james

package-lock.json

@@ -8,7 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "@apollo/client": "^3.3.11",
+    "@tailwindcss/forms": "^0.2.1",
     "autoprefixer": "^10.2.4",
+    "graphql": "^15.5.0",
     "gray-matter": "^4.0.2",
     "next": "10.0.6",
     "postcss": "^8.2.6",

package.json

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+import { ApolloClient, ApolloProvider, InMemoryCache, useQuery, gql } from '@apollo/client';
+
+const client = new ApolloClient({
+    uri: 'https://graphql-api.mainnet.dandelion.link/',
+    cache: new InMemoryCache()
+});
+
+const GET_METADATA_BY_KEY = gql`
+    query MetaTX($metadatakey: String!) {
+        transactions(
+            where: { metadata: { key: {_eq: $metadatakey} } }
+        ) {
+            metadata {
+                key
+                value
+            }
+        }
+    }
+`
+
+function MetadataTX({ metadatakey}) {
+    
+    const { loading, error, data } = useQuery(GET_METADATA_BY_KEY, {
+        variables: { metadatakey }
+    })
+
+    if (loading) return <p>Loading...</p>
+    if (error) return <p>ERROR</p>
+    // What's cool is that if we know that there's certain data at a certain key, our page can respond accordingly
+    // Note that by looking at transactions[1], we can count on the blockchain to deliver us what we expect
+    // There's plenty more we could do for security here!
+    if (metadatakey === "100") return (
+        <div>
+            {data.transactions[1].metadata[0].value.additionalInformation[0].winners.map((i) => <p>{i.information.projectName}</p>)}
+        </div>
+    )
+    if (metadatakey === "13") return (
+        <div>
+            <p>{data.transactions[0].metadata[0].value.about}</p>
+            {data.transactions[0].metadata[0].value.cookies.map((i) => <p>{i.["Lucky Number"]} - {i.Fortune}</p>)}
+        </div>
+    )
+    if (data.transactions.length === 0) return <p>There is no data at that key.</p>
+    // For every other key:
+    return (
+        <div>
+            {data.transactions.map((i) => <p>{JSON.stringify(i.metadata)}</p>)}
+        </div>
+    )
+}   
+
+export default function rewardsOutput(){
+
+    const [txMeta, setTxMeta] = useState(null)
+
+    return (
+        <ApolloProvider client={client}>
+            <div className="w-2/3 mx-auto mt-10">
+                <h1>Graph QL Playground</h1>
+                
+                <form>
+                    <input id="keyNumber" name="keyNumber" type="text" onChange={e => setTxMeta(e.target.value)} className="m-5" />
+                </form>
+                <MetadataTX metadatakey={txMeta} />
+            </div>
+        </ApolloProvider>
+    )
+}

pages/playground/graphql/index.js

@@ -0,0 +1,56 @@
+import { ApolloClient, ApolloProvider, InMemoryCache, useQuery, gql } from '@apollo/client';
+
+const client = new ApolloClient({
+    uri: 'https://graphql-api.mainnet.dandelion.link/',
+    cache: new InMemoryCache()
+});
+
+function RewardAggregated() {
+    
+    const { loading, error, data } = useQuery(gql`
+        {
+            rewards_aggregate {
+                aggregate {
+                    avg {
+                        amount
+                    }
+                    count
+                    max {
+                        amount
+                    }
+                    min {
+                        amount
+                    }
+                    sum {
+                        amount
+                    }
+                }
+            }
+        }
+        `
+    )
+
+    if (loading) return <p>Loading...</p>
+    if (error) return <p>ERROR</p>
+    return (
+        <div>
+            <p>{data.rewards_aggregate.aggregate.avg.amount}</p>
+            <p>{data.rewards_aggregate.aggregate.count}</p>
+            <p>{data.rewards_aggregate.aggregate.max.amount/1000000}</p>
+            <p>{data.rewards_aggregate.aggregate.min.amount}</p>
+            <p>{data.rewards_aggregate.aggregate.sum.amount/1000000}</p>
+        </div>
+    )
+}   
+
+export default function rewardsOutput(){
+
+    return (
+        <ApolloProvider client={client}>
+            <div className="w-2/3 mx-auto mt-10">
+                <h1>Graph QL Playground</h1>
+                <RewardAggregated />
+            </div>
+        </ApolloProvider>
+    )
+}

pages/playground/graphql/rewardsoutput.js

@@ -8,9 +8,19 @@ function playground() {
                 Playground
             </CardHeading>
             <ul>
-                <li className="text-6xl m-12 hover:text-purple-700">
+                <li className="text-2xl m-12 hover:text-purple-700">
                     <Link href="playground/metadata">
-                        <a className="">Metadata</a>
+                        <a className="">Metadata Results via PostgREST</a>
+                    </Link>
+                </li>
+                <li className="text-2xl m-12 hover:text-purple-700">
+                    <Link href="playground/graphql/rewardsoutput">
+                        <a className="">GraphQL: Rewards Output</a>
+                    </Link>
+                </li>
+                <li className="text-2xl m-12 hover:text-purple-700">
+                    <Link href="playground/graphql/">
+                        <a className="">Metadata Results via GraphQL</a>
                     </Link>
                 </li>
             </ul>