Initial commit

Author: GGAlanSmithee

.env.template

@@ -0,0 +1,2 @@
+BLOCKFROST_PROJECT_ID_TESTNET=testnetMySecretBlockFrostProjectId
+BLOCKFROST_PROJECT_ID_MAINNET=mainnetMySecretBlockFrostProjectId

.eslintrc.json

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

.github/listing_assets.png

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

.github/processing_a_transaction.png

@@ -0,0 +1,7 @@
+Copyright 2022 Alan Smithee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

.gitignore

@@ -0,0 +1,49 @@
+# Lucid Blockfrost Proxy Example
+
+## DISCLAIMER
+
+Always be careful when interacting with the blockchain. Misuse can result in a loss of funds. This is only a technical example, and should be treated as such, I don't take any responsibility for any damage it might cause.
+
+
+## Examples
+
+### Processing a transaction
+
+![processing_a_transaction](.github/processing_a_transaction.png)
+
+### Listing assets
+
+![listing_assets](.github/listing_assets.png)
+
+## Explanation
+
+This is an example repo for using a proxy for the Lucid Blockfrost provider, so that the Project Id is not leaked to the client, as discussed in [this github issue](https://github.com/spacebudz/lucid/issues/25).
+
+The example itself allows you to send a transaction over either testnet or mainnet.
+
+This repo uses `next.js` and React. The code itself is also quite React-ish, building mainly on custom hooks. I don't necessarily suggest building your code like this, but since I have to deal with network changes, this was a suitable pattern.
+
+## Structure
+
+This is a standard next.js project, with only one page; `pages/index.tsx`. All the important code is located in the `hooks` folder.
+
+## Features
+
+- Forwards all blockfrost requests via the `pages/api/[[...all]].ts` routes, making it possible to hide your blockfrost keys
+- The keys are injected via env variables (see the `.env.template` file)
+- Handles both `mainnet` and `testnet`
+- Listens to network changes using the `experiments` api that - in this case - nami injects
+
+## Limitations / Considerations
+
+Since the Lucid package doesn't seamlessly support network changes, I had to keep track of it in states. Not sure I like this pattern, but it is what it is. Not sure if there are any implications to doing it this way.
+
+The proxy API might not be 100% compatible with the blockfrost API. IE. if there are any unforeseen issues, the API will return an empty 400 response, which the Lucid Blockfrost provider might be incompatible with. I will research this more. Improvements are welcome.
+
+## Contributing
+
+Just send an issue and/or PR my way if you have improvement suggestions. Much welcome.
+
+# License
+
+MIT, see LICENSE file.

LICENSE

@@ -0,0 +1,73 @@
+import { sortBy } from "lodash"
+import { fromUnit, Lucid } from "lucid-cardano"
+import { useCallback, useEffect, useState } from "react"
+
+import { Responses } from "@blockfrost/blockfrost-js"
+
+type Value = ReturnType<typeof fromUnit>
+
+interface ValueWithName extends Omit<Value, "name"> {
+  value: number
+  name: string
+}
+
+const useAssets = (lucid?: Lucid, networkId?: number) => {
+  const [assets, setAssets] = useState<Responses["asset"][]>([])
+  const [lovelace, setLovelace] = useState(0)
+
+  const fetchAssets = useCallback(async () => {
+    if (!lucid?.wallet) return
+
+    const utxos = await lucid.wallet.getUtxos()
+
+    const allUtxos = utxos
+      .map((u) => Object.keys(u.assets).map((key) => ({ key, value: u.assets[key] })))
+      .reduce((acc, curr) => [...acc, ...curr], [])
+      .map((a) => ({
+        ...fromUnit(a.key),
+        value: Number(a.value),
+      }))
+
+    const lovelaces = allUtxos
+      .filter((u) => u.policyId === "lovelace")
+      .reduce((acc, curr) => acc + curr.value, 0)
+
+    const utxoAssets = allUtxos
+      .filter((u) => u.policyId !== "lovelace")
+      .filter((v: Value): v is ValueWithName => v.name !== null)
+      .map((a) => ({
+        ...a,
+        fullyQualifiedAssetName: `${a.policyId}${a.name}`,
+      }))
+
+    const assetsWithMetadata: Responses["asset"][] = await Promise.all(
+      utxoAssets.map((a) =>
+        fetch(`/api/blockfrost/${networkId}/assets/${a.fullyQualifiedAssetName}`).then((r) =>
+          r.json()
+        )
+      )
+    )
+
+    const sortedAssets = sortBy(
+      assetsWithMetadata,
+      (a) => (Number(a.quantity) === 1 ? 1 : -1),
+      "policy_id",
+      "metadata.name",
+      "onchain_metadata.name"
+    )
+
+    setLovelace(lovelaces)
+    setAssets(sortedAssets)
+  }, [lucid?.wallet, networkId])
+
+  useEffect(() => {
+    fetchAssets()
+  }, [fetchAssets])
+
+  return {
+    lovelace,
+    assets,
+  }
+}
+
+export { useAssets }

README.md

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+const useHasNamiExtension = () => {
+  const [hasNamiExtension, setHasNamiExtension] = useState<boolean>()
+
+  useEffect(() => {
+    // give the browser a chance to load the extension
+    // and for it to inject itself into the window object
+    const timeout = setTimeout(() => {
+      setHasNamiExtension(!!window.cardano?.nami)
+    }, 10)
+
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [])
+
+  return hasNamiExtension
+}
+
+export { useHasNamiExtension }

hooks/use-assets.ts

@@ -0,0 +1,39 @@
+import { isNil } from "lodash"
+import { Blockfrost, Lucid } from "lucid-cardano"
+import { useCallback, useEffect, useState } from "react"
+
+import { useNetworkId } from "./use-network-id"
+import { useWalletApi } from "./use-wallet-api"
+
+const useLucid = () => {
+  const [lucid, setLucid] = useState<Lucid>()
+  const walletApi = useWalletApi()
+  const networkId = useNetworkId(walletApi)
+
+  const initializeLucid = useCallback(async () => {
+    if (isNil(networkId) || isNil(walletApi)) return
+
+    const provider = new Blockfrost(`/api/blockfrost/${networkId}`)
+    const network = networkId === 0 ? "Testnet" : "Mainnet"
+
+    const updatedLucid = await (isNil(lucid)
+      ? Lucid.new(provider, network)
+      : lucid.switchProvider(provider, network))
+
+    const lucidWithWallet = updatedLucid.selectWallet(walletApi)
+
+    setLucid(lucidWithWallet)
+  }, [lucid, networkId, walletApi])
+
+  useEffect(() => {
+    initializeLucid()
+  }, [initializeLucid])
+
+  return {
+    networkId,
+    walletApi,
+    lucid,
+  }
+}
+
+export { useLucid }