use use-cardano

Author: GGAlanSmithee

.env.template

@@ -1,2 +1,3 @@
 BLOCKFROST_PROJECT_ID_TESTNET=testnetMySecretBlockFrostProjectId
+BLOCKFROST_PROJECT_ID_PREVIEW=previewMySecretBlockFrostProjectId
 BLOCKFROST_PROJECT_ID_MAINNET=mainnetMySecretBlockFrostProjectId

hooks/use-image.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useState } from "react"
 
 const useImage = (src?: string) => {
   const [loaded, setLoaded] = useState(false)
@@ -8,7 +8,6 @@ const useImage = (src?: string) => {
     if (!src) return
 
     var loadedImage = new Image()
-    loadedImage.crossOrigin = "Anonymous"
 
     loadedImage.onload = function () {
       setImage(this as HTMLImageElement)

hooks/use-lucid/use-has-nami-extension.ts

@@ -1,6 +1,7 @@
-import { sortBy } from "lodash"
+import { isNil, sortBy } from "lodash"
 import { fromUnit, Lucid } from "lucid-cardano"
 import { useCallback, useEffect, useState } from "react"
+import { utility } from "use-cardano"
 
 import { Responses } from "@blockfrost/blockfrost-js"
 
@@ -17,7 +18,7 @@ const useTooligansAssets = (lucid?: Lucid, networkId?: number): Responses["asset
   const [tooligansAssets, setTooligansAssets] = useState<Responses["asset"][]>([])
 
   const fetchTooligans = useCallback(async () => {
-    if (!lucid?.wallet) return
+    if (!lucid?.wallet || isNil(networkId)) return
 
     const utxos = await lucid.wallet.getUtxos()
 
@@ -39,9 +40,9 @@ const useTooligansAssets = (lucid?: Lucid, networkId?: number): Responses["asset
 
     const assetsWithMetadata: Responses["asset"][] = await Promise.all(
       utxoAssets.map((a) =>
-        fetch(`/api/blockfrost/${networkId}/assets/${a.fullyQualifiedAssetName}`).then((r) =>
-          r.json()
-        )
+        fetch(
+          `/api/blockfrost/${utility.toNetworkName(networkId)}/assets/${a.fullyQualifiedAssetName}`
+        ).then((r) => r.json())
       )
     )
 

hooks/use-lucid/use-lucid.ts

@@ -8,6 +8,8 @@ const useTooligansImages = (tooligansAssets: Responses["asset"][]): Image[] => {
   const [loaded, setLoaded] = useState(false)
   const [tooligansImages, setTooligansImages] = useState<Image[]>([])
 
+  console.log(tooligansAssets)
+
   useEffect(() => {
     if (loaded || tooligansAssets.length <= 0) return
 
@@ -16,9 +18,7 @@ const useTooligansImages = (tooligansAssets: Responses["asset"][]): Image[] => {
     Promise.all(
       tooligansAssets.map((tooligan) =>
         asyncImageLoading(
-          tooligan?.onchain_metadata?.image
-            ?.toString()
-            ?.replace("ipfs://", "https://ipfs.blockfrost.dev/ipfs/"),
+          tooligan?.onchain_metadata?.image?.toString()?.replace("ipfs://", "/tooligan-image/"),
           makeTransparent
         )
       )

hooks/use-lucid/use-network-id.ts

@@ -8,7 +8,6 @@ const asyncImageLoading = (src?: string, onLoad?: OnLoad): Promise<Image> =>
       if (!src) return resolve(null)
 
       const image = new Image()
-      image.crossOrigin = "Anonymous"
 
       image.onload = function () {
         if (onLoad) {

hooks/use-lucid/use-wallet-api.ts

@@ -11,6 +11,13 @@ const nextConfig = {
 
     return config
   },
+  // NOTE: Avoid CORS problems with IPFS
+  rewrites: async () => [
+    {
+      source: "/tooligan-image/:path*",
+      destination: "https://ipfs.blockfrost.dev/ipfs/:path*",
+    },
+  ],
 }
 
 module.exports = nextConfig

hooks/use-tooligans-assets.ts

@@ -14,13 +14,15 @@
   },
   "dependencies": {
     "gameloop": "^1.1.4",
+    "http-proxy": "^1.18.1",
     "lodash": "^4.17.21",
-    "lucid-cardano": "^0.7.2",
+    "lucid-cardano": "^0.8.3",
     "next": "13.0.0",
-    "next-http-proxy-middleware": "^1.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "use-cardano": "1.0.0-beta.19",
+    "use-cardano-blockfrost-proxy": "^1.0.0"
   },
   "devDependencies": {
     "@blockfrost/blockfrost-js": "^5.0.0",

hooks/use-tooligans-images.ts

@@ -1,7 +1,23 @@
+import "use-cardano/styles/use-cardano.css"
 import "../styles/styles.css"
 
+import { CardanoProvider, CardanoToaster, UseCardanoOptions } from "use-cardano"
+
 import type { AppProps } from "next/app"
 
+const options: UseCardanoOptions = {
+  node: {
+    provider: "blockfrost-proxy",
+    proxyUrl: "/api/blockfrost",
+  },
+}
+
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <CardanoProvider options={options}>
+      <Component {...pageProps} />
+
+      <CardanoToaster />
+    </CardanoProvider>
+  )
 }

lib/async-image-loading.ts

@@ -1,49 +1 @@
-import { NextApiHandler } from 'next';
-import httpProxyMiddleware from 'next-http-proxy-middleware';
-
-const getTarget = (url?: string) => {
-  if (url?.startsWith("/api/blockfrost/0")) return "https://cardano-testnet.blockfrost.io/api/v0"
-  if (url?.startsWith("/api/blockfrost/1")) return "https://cardano-mainnet.blockfrost.io/api/v0"
-  return null
-}
-
-const getProjectId = (url?: string) => {
-  if (url?.startsWith("/api/blockfrost/0")) return process.env.BLOCKFROST_PROJECT_ID_TESTNET
-  if (url?.startsWith("/api/blockfrost/1")) return process.env.BLOCKFROST_PROJECT_ID_MAINNET
-  return null
-}
-
-const blockfrostProxy: NextApiHandler = async (req, res) => {
-  const target = getTarget(req.url)
-  const PROJECT_ID = getProjectId(req.url)
-
-  try {
-    if (!target || !PROJECT_ID) throw new Error("Invalid target or project id")
-
-    const response = await httpProxyMiddleware(req, res, {
-      target,
-      headers: {
-        PROJECT_ID,
-      },
-      pathRewrite: [
-        {
-          patternStr: "^/api/blockfrost/0",
-          replaceStr: "",
-        },
-        {
-          patternStr: "^/api/blockfrost/1",
-          replaceStr: "",
-        },
-      ],
-    })
-
-    return response
-  } catch (e) {
-    console.error("Blockfrost proxy error", e)
-
-    // NOTE(Alan): Not sure if this is compatible with Lucid / the Blockfrost provider
-    return res.status(400).end()
-  }
-}
-
-export default blockfrostProxy
+export { blockfrostProxy as default } from "use-cardano-blockfrost-proxy"

next.config.js

@@ -4,10 +4,9 @@ import { LevelSelect } from "components/LevelSelect"
 import { defaultLevel, levels } from "data/levels"
 import { useCanvas } from "hooks/use-canvas"
 import { useImage } from "hooks/use-image"
-import { useHasNamiExtension } from "hooks/use-lucid/use-has-nami-extension"
-import { useLucid } from "hooks/use-lucid/use-lucid"
 import { useTooligans } from "hooks/use-tooligans"
-import { useEffect, useMemo, useState } from "react"
+import { useMemo, useState } from "react"
+import { CardanoWalletSelector, useCardano } from "use-cardano"
 
 import styles from "../styles/index.module.css"
 
@@ -26,30 +25,18 @@ const Index = () => {
   const canvas = useCanvas()
   const { image: ballImage } = useImage("/images/soccer-ball.png")
 
-  const hasNamiExtension = useHasNamiExtension()
-  const { lucid, networkId } = useLucid()
-  const { tooligans, setTooligans } = useTooligans(lucid, networkId)
-  const [selectedTooligan, setSelectedTooligan] = useState<string>()
+  const { lucid, networkId } = useCardano()
 
-  // strict equals to avoid undefined
-  if (hasNamiExtension === false)
-    return (
-      <div className={styles.container}>
-        <div className={styles.left} />
-        <div>
-          <h1 className={styles.namiTitle}>
-            This game currently only works with the Nami extension installed.
-          </h1>
-        </div>
-        <div className={styles.right} />
-      </div>
-    )
+  const { tooligans, setTooligans } = useTooligans(lucid, networkId)
 
-  // not initialized yet
-  if (!lucid) return null
+  const [selectedTooligan, setSelectedTooligan] = useState<string>()
 
   return (
     <>
+      <div className={styles.connectContainer}>
+        <CardanoWalletSelector />
+      </div>
+
       <a href="https://github.com/GGAlanSmithee/tooligans-game">
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img

package.json

@@ -91,3 +91,9 @@
   text-align: center;
   margin-top: 4rem;
 }
+
+.connectContainer {
+  position: absolute;
+  left: 1rem;
+  top: 1rem;
+}