basic apollo queries

MetaFam · May 19, 2022 · 05d27d8 · 05d27d8
1 parent a7a664c
commit 05d27d8
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@ yarn-error.log*
 *.tsbuildinfo
 .yarn/install-state.gz
 .yarn/cache/
+.vercel/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -20,5 +20,5 @@
   "window.autoDetectColorScheme": true,
   "workbench.colorTheme": "Default Dark+",
   "window.closeWhenEmpty": true,
-  "window.zoomLevel": 4
+  "window.zoomLevel": 6
 }
diff --git a/package.json b/package.json
@@ -56,5 +56,9 @@
     "@typescript-eslint/parser": "latest",
     "eslint": "8.12.0",
     "typescript": "4.6.2"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.6.4",
+    "graphql": "^16.5.0"
   }
 }
diff --git a/packages/ui/components/TokensTable.tsx b/packages/ui/components/TokensTable.tsx
@@ -4,6 +4,7 @@ import {
 } from '@chakra-ui/react'
 import { httpURL } from 'lib/helpers'
 import { TokenState } from 'lib/types'
+import Link from 'next/link'
 import NextLink from 'next/link'
 import Markdown from 'react-markdown'
 
@@ -133,7 +134,11 @@ const URITd:React.FC<Token> = ({ token }) => (
 )
 
 const TotalTd:React.FC<Token> = ({ token }) => (
-  <Td>{token.total?.toString() ?? <Spinner/>}</Td>
+  <Td>
+    <Link href={`/owners/${token.id}`}>
+      {token.total?.toString() ?? <Spinner/>}
+    </Link>
+  </Td>
 )
 
 const ActionsTd:React.FC<Token> = ({ token }) => (

diff --git a/packages/ui/lib/types.ts b/packages/ui/lib/types.ts
@@ -33,6 +33,7 @@ export type CodedError = Error & { code: number }
 
 export type TokenState = {
   id: string
+  gating?: boolean 
   uri?: string
   metadata?: ERC1155Metadata
   total?: number

diff --git a/packages/ui/pages/_app.tsx b/packages/ui/pages/_app.tsx
@@ -3,27 +3,37 @@ import type { AppProps } from 'next/app'
 import Head from 'next/head'
 import { ChakraProvider } from '@chakra-ui/react'
 import { Web3ContextProvider } from 'lib/hooks'
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider,
+  useQuery,
+  gql
+} from "@apollo/client";
 
-const App = ({ Component, pageProps }: AppProps) => {
-  const prod = process.env.NODE_ENV === 'production'
+const client = new ApolloClient({
+  uri: 'https://api.thegraph.com/subgraphs/name/alberthaotan/nft-matic',
+  cache: new InMemoryCache(),
+})
 
-  return (
-    <ChakraProvider>
-      <Head>
-        <link
-          rel="shortcut icon"
-          href={`${prod ? '/chievemints' : ''}/favicon.png`}
-        />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1.0"
-        />
-      </Head>
+const App = ({ Component, pageProps }: AppProps) => (
+  <ChakraProvider>
+    <Head>
+      <link
+        rel="shortcut icon"
+        href="favicon.png"
+      />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0"
+      />
+    </Head>
+    <ApolloProvider {...{ client }}>
       <Web3ContextProvider>
         <Component {...pageProps} />
       </Web3ContextProvider>
-    </ChakraProvider>
-  )
-}
+    </ApolloProvider>
+  </ChakraProvider>
+)
 
 export default App
diff --git a/packages/ui/pages/disburse/[nftId].tsx b/packages/ui/pages/disburse/[nftId].tsx
@@ -67,7 +67,7 @@ const Disburse: NextPage = () => {
   const [raw, setRaw] = useState('')
   const [action, setAction] = useState('whitelist')
   const {
-    ensProvider, address, roContract, connected, connect
+    ensProvider, address, roContract, rwContract, connected, connect, userProvider
   } = useWeb3()
   const [addresses, setAddresses] = useState<Array<string | ReactNode>>([])
   const toast = useToast()
@@ -129,12 +129,23 @@ const Disburse: NextPage = () => {
     },
     [roContract, tokenId],
   )
+  console.debug({rwContract, userProvider})
 
   const submit = useCallback(async (evt) => {
     evt.preventDefault()
 
+    if(!rwContract) {
+      toast({
+        title: `Contract Error!`,
+        description: 'Token is not Connected.',
+        status: 'error',
+        isClosable: true,
+        duration: 10000
+      })
+      return
+    }
     try {
-      const skip = evt.target.skip.checked
+      // const skip = evt.target.skip.checked
       const addrs = await Promise.all(
         split(raw)
         .map(async (name: string) => {
@@ -148,10 +159,20 @@ const Disburse: NextPage = () => {
       switch(action) {
         case 'mint': {
           console.debug('minting', { addrs })
+          const tx = await rwContract?.['mint(address[],uint256,bytes)'](
+            addrs, tokenId, []
+          )
+          await tx.wait()
           break
         }
         case 'whitelist': {
           console.debug('whitelist', { addrs })
+          addrs.map(async (addr) => {
+            const minterRole = await roContract?.roleValueForName('Minter')
+            const tx = await rwContract?.['mint(address,uint256,uint256,bytes)'](
+              addr, tokenId, 1, []
+            )
+          })
           break
         }
       }
@@ -164,7 +185,7 @@ const Disburse: NextPage = () => {
         duration: 10000
       })
     }
-  }, [action, addresses, ensProvider])
+  }, [action, addresses, ensProvider, roContract, rwContract, tokenId])
 
   if(error) {
     return (
@@ -246,7 +267,14 @@ const Disburse: NextPage = () => {
           </Checkbox>
         </FormControl>
         <FormControl textAlign="center">
-          <Button type="submit" colorScheme="green">Distribute</Button>
+          {console.debug({rwContract})}
+          {!rwContract ? (
+            <Button onClick={connect}>
+              Connect
+            </Button>
+          ) : (
+            <Button type="submit" colorScheme="green">Distribute</Button>
+          )}
         </FormControl>
       </Stack>
     </Container>

diff --git a/packages/ui/pages/owners/[nftId].tsx b/packages/ui/pages/owners/[nftId].tsx
@@ -0,0 +1,39 @@
+import { useRouter } from 'next/router'
+import { gql, useQuery } from '@apollo/client'
+import { ListItem, OrderedList } from '@chakra-ui/react'
+
+const NFT_OWNERS = gql`
+  query NFTOwners {
+    nfts(where:{ contract: "0x2fd05e332fcb602772337a5684b189f26a92cfab" }) {
+      contract {
+        id
+    }
+      ownership {
+        id
+        owner
+        quantity
+      }
+    }
+  }
+`
+export const Owners = () => {
+  const { query: { nftId } } = useRouter()
+  const { loading, error, data } = useQuery(NFT_OWNERS)
+  console.debug({loading, error, data})
+  if (loading) return 'Loading…'
+  if (error) return `Error! ${error.message}`
+  return (
+    <OrderedList>
+      {data.nfts.map(({ ownership }) => {
+        console.debug({ownership})
+      return (
+        <ListItem>
+          {`${ownership.owner} (${ownership.quantity})`}
+        </ListItem>
+      )
+      })}
+    </OrderedList>
+  )
+}
+
+export default Owners