Gold Farmers-Entropy example (#9)

Author: hanbao-dev

entropy/growing/app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

entropy/growing/app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

entropy/growing/app/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+}

entropy/growing/app/README.md

@@ -0,0 +1,41 @@
+# Pyth Entropy Example
+
+This Next.js project demonstrates a basic use case of Pyth Entropy by integrating it into a web application to simulate the growth process of NFTs. The application features frontend components and hooks to interact with smart contracts, handle state changes, and respond to events.
+
+## Features
+
+- **Minting NFTs**: Users can mint new NFTs.
+- **Growing NFTs**: Users can request to grow their NFTs based on randomness provided by the Pyth network.
+- **Event Watching**: The application listens to contract events to update UI accordingly.
+
+## Development Setup
+
+### Prerequisites
+
+- Node.js installed on your machine.
+- Bun installed for fast package management.
+- Farmiliarity with Next.js, Wagmi.sh, Tailwind, Shad.cn and React Query
+
+### Installation
+
+Clone the repository and install the dependencies:
+
+```bash
+bun i
+```
+
+### Running the Development Server
+
+To start the development server, run:
+
+```bash
+bun dev
+```
+
+This will start the server on `http://localhost:3000`, and you can view your application in the browser.
+
+## Acknowledgments
+
+This example of using Pyth Entropy was created by [lualabs.xyz](https://lualabs.xyz).
+
+We hope this starter example inspires you to continue innovating and building creative solutions with NFTs.

entropy/growing/app/app/(home)/components/grow.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Loader2 } from "lucide-react"
+import { useGrow } from "../hooks/use-grow"
+
+export const Grow = () => {
+  const {
+    tokens,
+    setTokenId,
+    grow,
+    isLoading,
+    info,
+    tokenId,
+    isSuccess,
+    growResult,
+    reset,
+  } = useGrow()
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-4">
+      {isSuccess && growResult && (
+        <>
+          <div>{growResult.growResult}</div>
+          <Button className="w-full" onClick={reset}>
+            Continue
+          </Button>
+        </>
+      )}
+      {isSuccess && !growResult && <Loader2 className="animate-spin" />}
+      {!isSuccess && !growResult && (
+        <>
+          <Select onValueChange={setTokenId}>
+            <SelectTrigger disabled={isLoading} className="w-full">
+              <SelectValue placeholder="Select NFT" />
+            </SelectTrigger>
+            <SelectContent>
+              {tokens.map(({ label, value }, index) => {
+                return (
+                  <SelectItem key={`${index}_${label}`} value={value}>
+                    {label}
+                  </SelectItem>
+                )
+              })}
+            </SelectContent>
+          </Select>
+          <Button className="w-full" disabled={isLoading} onClick={grow}>
+            Grow
+          </Button>
+          {tokenId !== "" && (
+            <div className="text-left">
+              <div>Level: {info.level}</div>
+              <div>Status: {info.status}</div>
+            </div>
+          )}
+          {tokenId === "" && <div className="h-[40px]"></div>}
+        </>
+      )}
+    </div>
+  )
+}

entropy/growing/app/app/(home)/components/mint.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { useMint } from "../hooks/use-mint"
+
+export const Mint = () => {
+  const { mint, isLoading } = useMint()
+  return (
+    <Button
+      className="w-full"
+      disabled={isLoading}
+      onClick={mint}
+    >{`Mint${isLoading ? "ing..." : ""}`}</Button>
+  )
+}

entropy/growing/app/app/(home)/hooks/use-get-token-info.tsx

@@ -0,0 +1,28 @@
+import { NFTGrowtthAddress } from "@/contracts/addresses"
+import { useReadNftGrowthNftInfo } from "@/contracts/generated"
+import { useMemo } from "react"
+
+export const useGetTokenInfo = (tokenId?: string) => {
+  const { data: info, refetch } = useReadNftGrowthNftInfo({
+    address: NFTGrowtthAddress,
+    args: [BigInt(tokenId!)],
+    query: {
+      enabled: tokenId !== "",
+    },
+  })
+
+  const level = useMemo(() => {
+    return info?.[0].toString()
+  }, [info])
+
+  const status = useMemo(() => {
+    if (info?.[1] !== undefined) {
+      return info?.[1] === 0 ? "Alive" : "Dead"
+    }
+  }, [info])
+
+  return {
+    refetch,
+    info: { level, status },
+  }
+}

entropy/growing/app/app/(home)/hooks/use-get-tokens.tsx

@@ -0,0 +1,28 @@
+import { NFTGrowtthAddress } from "@/contracts/addresses"
+import { useReadNftGrowthTokensOfOwner } from "@/contracts/generated"
+import { useMemo } from "react"
+import { blastSepolia } from "viem/chains"
+import { useAccount } from "wagmi"
+
+export const useGetTokens = () => {
+  const { address } = useAccount()
+  const { data } = useReadNftGrowthTokensOfOwner({
+    address: NFTGrowtthAddress,
+    chainId: blastSepolia.id,
+    args: [address!],
+    query: {
+      enabled: !!address,
+    },
+  })
+
+  const tokens = useMemo(() => {
+    return (
+      data?.map((tokenId) => ({
+        value: tokenId.toString(),
+        label: `#${tokenId.toString()}`,
+      })) || []
+    )
+  }, [data])
+
+  return { tokens }
+}

entropy/growing/app/app/(home)/hooks/use-grow-result.tsx

@@ -0,0 +1,73 @@
+import { NFTGrowtthAddress } from "@/contracts/addresses"
+import { useWatchNftGrowthEvent } from "@/contracts/generated"
+import { useCallback, useReducer } from "react"
+
+type Result = "Success" | "Failure" | "Death"
+
+export interface GrowResult {
+  tokenId: string
+  growResult: Result
+}
+
+type State = {
+  growResult?: GrowResult
+}
+
+type Action =
+  | { type: "SET_NFT_RESULT"; payload: GrowResult }
+  | { type: "RESET" }
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "SET_NFT_RESULT":
+      return { ...state, growResult: action.payload }
+    case "RESET":
+      return {}
+    default:
+      return state
+  }
+}
+
+export const useGrowResult = (currentTokenId: string) => {
+  const [state, dispatch] = useReducer(reducer, {})
+
+  const handleGrowEvent = useCallback(
+    (event: any) => {
+      const { tokenId, result } = event[0].args
+      if (
+        tokenId &&
+        tokenId.toString() === currentTokenId &&
+        result !== undefined
+      ) {
+        dispatch({
+          type: "SET_NFT_RESULT",
+          payload: {
+            tokenId: tokenId.toString(),
+            growResult: getNFTResult(result),
+          },
+        })
+      }
+    },
+    [currentTokenId]
+  )
+
+  useWatchNftGrowthEvent({
+    address: NFTGrowtthAddress,
+    onLogs: handleGrowEvent,
+  })
+
+  const resetResult = useCallback(() => dispatch({ type: "RESET" }), [])
+
+  return { ...state, resetResult }
+}
+
+export const getNFTResult = (result: number): Result => {
+  switch (result) {
+    case 0:
+      return "Success"
+    case 1:
+      return "Failure"
+    default:
+      return "Death"
+  }
+}

entropy/growing/app/app/(home)/hooks/use-grow.tsx

@@ -0,0 +1,60 @@
+import { NFTGrowtthAddress } from "@/contracts/addresses"
+import {
+  useReadNftGrowthGetGrowFee,
+  useWriteNftGrowthGrow,
+} from "@/contracts/generated"
+import { useCallback, useState } from "react"
+import { blastSepolia } from "viem/chains"
+import { useWaitForTransactionReceipt } from "wagmi"
+import * as web3 from "web3"
+import { useGetTokenInfo } from "./use-get-token-info"
+import { useGetTokens } from "./use-get-tokens"
+import { useGrowResult } from "./use-grow-result"
+
+export const useGrow = () => {
+  const [tokenId, setTokenId] = useState("")
+  const { tokens } = useGetTokens()
+  const { resetResult, growResult } = useGrowResult(tokenId)
+  const { info, refetch } = useGetTokenInfo(tokenId)
+
+  const {
+    data: hash,
+    writeContract,
+    isPending,
+    reset: resetGrow,
+    isSuccess,
+  } = useWriteNftGrowthGrow()
+  const { data: price } = useReadNftGrowthGetGrowFee({
+    address: NFTGrowtthAddress,
+  })
+
+  const grow = useCallback(() => {
+    const randomNumber = web3.utils.randomHex(32) as `0x${string}`
+    writeContract({
+      address: NFTGrowtthAddress,
+      chainId: blastSepolia.id,
+      value: price,
+      args: [BigInt(tokenId), randomNumber],
+    })
+  }, [writeContract, tokenId, price])
+
+  const { isLoading } = useWaitForTransactionReceipt({ hash })
+
+  const reset = useCallback(() => {
+    resetResult()
+    resetGrow()
+    refetch()
+  }, [resetResult, resetGrow, refetch])
+
+  return {
+    grow,
+    isLoading: isPending || isLoading || isSuccess,
+    setTokenId,
+    tokens,
+    info,
+    tokenId,
+    growResult,
+    isSuccess,
+    reset,
+  }
+}