feat (Minter): Add minter example (#7)

* chore: install react hook form * chore: add graph endpoint for testnet * fix: turn off music autoplay * feat: add a minter example
Mintbase · Aug 31, 2021 · fe628b1 · fe628b1 · vercel · Aug 31, 2021
1 parent 18ba222
commit fe628b1
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 4 deletions.
diff --git a/components/Minter.tsx b/components/Minter.tsx
@@ -0,0 +1,188 @@
+import { useForm } from 'react-hook-form'
+
+import { MetadataField } from 'mintbase'
+
+import { gql } from 'apollo-boost'
+import { useLazyQuery } from '@apollo/client'
+
+import { useState, useEffect } from 'react'
+
+import { useWallet } from '../services/providers/MintbaseWalletContext'
+
+const FETCH_MINTER_STORE = gql`
+  query FetchMinterStores($minter: String!) {
+    store(where: { minters: { account: { _eq: $minter } } }) {
+      id
+    }
+  }
+`
+
+const Minter = () => {
+  const { wallet, isConnected, details } = useWallet()
+  const [coverImage, setCoverImage] = useState<File | null>(null)
+  const [isMinting, setIsMinting] = useState<boolean>(false)
+
+  const [fetchStores, { called, loading, data }] = useLazyQuery(
+    FETCH_MINTER_STORE,
+    { variables: { minter: details.accountId } }
+  )
+
+  useEffect(() => {
+    if (!isConnected) return
+
+    fetchStores()
+  }, [isConnected])
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm()
+
+  const handleCoverImage = (e: any) => {
+    const file = e.target.files[0]
+
+    setCoverImage(file)
+  }
+
+  const onSubmit = async (data: any) => {
+    if (!wallet || !wallet.minter) return
+    if (!coverImage) return
+
+    setIsMinting(true)
+
+    const { data: fileUploadResult, error: fileError } =
+      await wallet.minter.uploadField(MetadataField.Media, coverImage)
+
+    if (fileError) {
+      console.error(fileError)
+      return
+    }
+
+    wallet.minter.setMetadata({
+      title: data.title,
+      description: data.description,
+    })
+
+    setIsMinting(false)
+
+    wallet.mint(1, data.store, undefined, undefined, undefined)
+  }
+
+  if (!isConnected) return <div>Connect your wallet</div>
+
+  if (loading) return <div>Loading...</div>
+
+  return (
+    <div className="w-full">
+      <form
+        className="bg-white rounded px-8 pt-6 pb-8 mb-4"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="mb-4">
+          <h1 className="font-semibold mb-2 text-xl leading-tight sm:leading-normal">
+            Simple Minter
+          </h1>
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Contract
+          </label>
+
+          <select
+            {...register('store', { required: true })}
+            className="text-sm"
+          >
+            {data?.store.map((store: { id: string }) => (
+              <option key={store.id} value={store.id}>
+                {store.id}
+              </option>
+            ))}
+          </select>
+
+          {errors.store && (
+            <p className="text-red-500 text-xs italic">
+              Please select a store.
+            </p>
+          )}
+        </div>
+
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Title
+          </label>
+          <input
+            {...register('title', { required: true })}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            placeholder="Title"
+          />
+          {errors.title && (
+            <p className="text-red-500 text-xs italic">Please add title.</p>
+          )}
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Description
+          </label>
+          <input
+            {...register('description', { required: true })}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            placeholder="Description"
+          />
+          {errors.description && (
+            <p className="text-red-500 text-xs italic">
+              Please add a description.
+            </p>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Attach Cover Image
+          </label>
+          <div className="flex items-center justify-center w-full">
+            <label className="flex flex-col rounded-lg border-4 border-dashed w-full h-60 p-10 group text-center">
+              <div className="h-full w-full text-center flex flex-col items-center justify-center">
+                {!coverImage && (
+                  <p className="pointer-none text-gray-500 ">Select a file</p>
+                )}
+                {coverImage && (
+                  <p className="pointer-none text-gray-500">
+                    {coverImage.name}
+                  </p>
+                )}
+              </div>
+              <input
+                {...register('coverImage', { required: true })}
+                type="file"
+                className="hidden"
+                onChange={handleCoverImage}
+              />
+            </label>
+          </div>
+          {errors.coverImage && (
+            <p className="text-red-500 text-xs italic">
+              Please add a cover image.
+            </p>
+          )}
+        </div>
+
+        {isMinting ? (
+          <div className="w-full py-2 px-4 rounded bg-gray-200 text-center text-black font-bold mb-2">
+            Creating your mint transaction...
+          </div>
+        ) : (
+          <div className="flex items-center flex-row-reverse justify-between">
+            <input
+              className="bg-black hover:bg-gray-700 text-white font-bold py-2 px-4 w-full rounded focus:outline-none focus:shadow-outline"
+              type="submit"
+              value="Mint"
+            />
+          </div>
+        )}
+      </form>
+    </div>
+  )
+}
+
+export default Minter
diff --git a/components/MusicPlayer.tsx b/components/MusicPlayer.tsx
@@ -49,7 +49,11 @@ const MusicPlayer = () => {
   }, [data])
 
   return (
-    <>{musicList.length > 0 && <PlayerWithNoSSR audioLists={musicList} />}</>
+    <>
+      {musicList.length > 0 && (
+        <PlayerWithNoSSR audioLists={musicList} autoPlay={false} />
+      )}
+    </>
   )
 }
 

diff --git a/constants/mintbase.ts b/constants/mintbase.ts
@@ -2,3 +2,8 @@ export const GRAPH_MAINNET_HTTPS_URI =
   'https://mintbase-mainnet.hasura.app/v1/graphql'
 export const GRAPH_MAINNET_WSS_URI =
   'wss://mintbase-mainnet.hasura.app/v1/graphql'
+
+export const GRAPH_TESTNET_HTTPS_URI =
+  'https://mintbase-testnet.hasura.app/v1/graphql'
+export const GRAPH_TESTNET_WSS_URI =
+  'wss://mintbase-testnet.hasura.app/v1/graphql'
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "next": "11.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-hook-form": "^7.13.0",
     "react-jinke-music-player": "^4.24.1",
     "subscriptions-transport-ws": "^0.9.19"
   },

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -5,8 +5,21 @@ import { useApollo } from '../services/apolloClient'
 
 import 'tailwindcss/tailwind.css'
 
+import {
+  GRAPH_MAINNET_HTTPS_URI,
+  GRAPH_TESTNET_HTTPS_URI,
+} from '../constants/mintbase'
+
 function MyApp({ Component, pageProps }: AppProps) {
-  const apolloClient = useApollo(pageProps)
+  const apolloClient = useApollo({
+    ...pageProps,
+    network: {
+      graphUri:
+        process.env.NEXT_PUBLIC_MINTBASEJS_NETWORK === 'testnet'
+          ? GRAPH_TESTNET_HTTPS_URI
+          : GRAPH_MAINNET_HTTPS_URI,
+    },
+  })
 
   return (
     <WalletProvider apiKey={process.env.NEXT_PUBLIC_MINTBASEJS_API_KEY || ''}>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -6,6 +6,7 @@ import Footer from '../components/Footer'
 import Navbar from '../components/Navbar'
 import Products from '../components/Products'
 import MusicPlayer from '../components/MusicPlayer'
+import Minter from '../components/Minter'
 
 const Home = () => {
   return (
@@ -17,9 +18,10 @@ const Home = () => {
       <Header />
       {/* <Navbar /> */}
       <Hero />
-      <Products storeId="wildeverse.mintbase1.near" />
-      <Products storeId="hellovirtualworld.mintbase1.near" />
+      {/* <Products storeId="wildeverse.mintbase1.near" /> */}
+      {/* <Products storeId="hellovirtualworld.mintbase1.near" /> */}
       <MusicPlayer />
+      <Minter />
       <Footer />
     </>
   )

diff --git a/yarn.lock b/yarn.lock
@@ -3709,6 +3709,11 @@ react-draggable@^4.4.3:
     classnames "^2.2.5"
     prop-types "^15.6.0"
 
+react-hook-form@^7.13.0:
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.13.0.tgz#af451e4771af2ddcb4ccb2f6a11eeb191c66bbdc"
+  integrity sha512-ofjzl78xNTRmBHFZ/gOn65HDiqM/LHxbVMlaFoemyMQIDFTR4aG4h2CpCG/N0TbW5IQbh21hBYUvvmqK0ByEhg==
+
 react-is@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"