@zoralabs/protocol-sdk 0.6.0 → 0.7.1

package/src/ipfs/mimeTypes.ts

@@ -0,0 +1,141 @@
+// text
+const HTML = "text/html";
+const MARKDOWN = "text/markdown";
+const MARKDOWN_UTF8 = "text/markdown; charset=utf-8";
+const TEXT_PLAIN_UTF8 = "text/plain; charset=utf-8";
+export const TEXT_PLAIN = "text/plain";
+const CSV = "text/csv";
+const NUMBERS = ".numbers";
+const EXCEL = ".xlsx";
+const PDF = "application/pdf";
+
+// image
+const JPG = "image/jpg";
+const JPEG = "image/jpeg";
+const PNG = "image/png";
+const WEBP = "image/webp";
+const SVG = "image/svg+xml";
+const TIFF = "image/tiff";
+const GIF = "image/gif";
+
+export const isImage = (mimeType: string | null | undefined) => {
+  if (!mimeType) return false;
+  return [JPG, JPEG, PNG, WEBP, SVG, TIFF, GIF].includes(mimeType);
+};
+
+export enum MediaType {
+  CSV = "CSV",
+  NUMBERS = "NUMBERS",
+  EXCEL = "EXCEL",
+  IMAGE = "IMAGE",
+  VIDEO = "VIDEO",
+  AUDIO = "AUDIO",
+  TIFF = "TIFF",
+  TEXT = "TEXT",
+  PDF = "PDF",
+  MODEL = "MODEL",
+  HTML = "HTML",
+  ZIP = "ZIP",
+  UNKNOWN = "UNKNOWN",
+}
+
+export const DEFAULT_THUMBNAIL_CID_HASHES: { [key: string]: string } = {
+  [MediaType.AUDIO]:
+    "bafkreidir5laqi26ta6ivnpe2zpekgrfcyi4tb5x6vhwmwnledmzxshfb4",
+  [MediaType.VIDEO]:
+    "bafkreifm4edadl3j5luoyvw4p6elxeqd77la7bulee6vhq5gq4chfk32mu",
+  [MediaType.HTML]:
+    "bafkreifgvi6xfwqy2l6g45csyokejpaib52ee7zrw6etrxl2tas4xkkclq",
+  [MediaType.ZIP]:
+    "bafkreihe5rr5jbkwzegisjlhxbb7jw22xw5oilfmgd2re6tz6buo4pasdq", // assuming all zip files are html directories
+  [MediaType.TEXT]:
+    "bafkreiaez25nfgggzrnza2loxf6xueb2esm44pnyjyulwoslnipowrf56q",
+  default: "bafkreihcoahllisbpb4eeypdwtm7go5uh275wxd7wf2tantpxlpjhviok4",
+};
+
+// video
+const MP4 = "video/mp4";
+const QUICKTIME = "video/quicktime";
+const M4V = "video/x-m4v";
+const WEBM = "video/webm";
+
+// audio
+const M4A = "audio/x-m4a";
+const MPEG = "audio/mpeg";
+const MP3 = "audio/mp3";
+const WAV = "audio/wav";
+const VND_WAV = "audio/vnd.wav";
+const VND_WAVE = "audio/vnd.wave";
+const WAVE = "audio/wave";
+const X_WAV = "audio/x-wav";
+const AIFF = "audio/aiff";
+
+// 3D
+const GLTF = "model/gltf+json";
+const GLB = "model/gltf-binary";
+// File extensions, as some files return '' as the mimetype
+const GLTF_EXT = ".gltf";
+const GLB_EXT = ".glb";
+
+// application
+export const JSON_MIME_TYPE = "application/json";
+const ZIP = "application/zip";
+
+const mimeToMediaType = {
+  [HTML]: MediaType.HTML,
+  [JPG]: MediaType.IMAGE,
+  [JPEG]: MediaType.IMAGE,
+  [PNG]: MediaType.IMAGE,
+  [WEBP]: MediaType.IMAGE,
+  [SVG]: MediaType.IMAGE,
+  [TIFF]: MediaType.TIFF,
+  [GIF]: MediaType.IMAGE,
+  [MP4]: MediaType.VIDEO,
+  [WEBM]: MediaType.VIDEO,
+  [QUICKTIME]: MediaType.VIDEO,
+  [M4V]: MediaType.VIDEO,
+  [MPEG]: MediaType.AUDIO,
+  [MP3]: MediaType.AUDIO,
+  [M4A]: MediaType.AUDIO,
+  [VND_WAV]: MediaType.AUDIO,
+  [VND_WAVE]: MediaType.AUDIO,
+  [WAV]: MediaType.AUDIO,
+  [WAVE]: MediaType.AUDIO,
+  [X_WAV]: MediaType.AUDIO,
+  [AIFF]: MediaType.AUDIO,
+  [TEXT_PLAIN]: MediaType.TEXT,
+  [TEXT_PLAIN_UTF8]: MediaType.TEXT,
+  [MARKDOWN]: MediaType.TEXT,
+  [MARKDOWN_UTF8]: MediaType.TEXT,
+  [CSV]: MediaType.CSV,
+  [NUMBERS]: MediaType.NUMBERS,
+  [EXCEL]: MediaType.EXCEL,
+  [PDF]: MediaType.PDF,
+  [ZIP]: MediaType.ZIP,
+  [GLTF]: MediaType.MODEL,
+  [GLTF_EXT]: MediaType.MODEL,
+  [GLB]: MediaType.MODEL,
+  // GLTF returns 'application/json' as the mimetype,
+  // and as the only JSON-encoded media we currently support,
+  // we assume that if the mimetype is JSON, it's a GLTF
+  [JSON_MIME_TYPE]: MediaType.MODEL,
+  [GLB_EXT]: MediaType.MODEL,
+} as const;
+
+/** Return a MediaType for the given mime type. If mime type is unknown you can provide a filename as a fallback, where the type will be guessed based on extension. */
+export function mimeTypeToMedia(mimeType?: string | null) {
+  if (!mimeType) return MediaType.UNKNOWN;
+
+  return (
+    mimeToMediaType[mimeType as keyof typeof mimeToMediaType] ||
+    MediaType.UNKNOWN
+  );
+}
+
+export async function getMimeType(uri?: string) {
+  if (!uri) return uri;
+
+  const res = await fetch(uri, { method: "HEAD" });
+  let mimeType = res.headers.get("content-type");
+  return mimeType;
+}

package/src/ipfs/text-metadata.ts

@@ -0,0 +1,128 @@
+import { TextMetadataFiles } from "./types";
+
+const CHAR_LIMIT = 1111;
+
+const wrapText = ({
+  ctx,
+  text,
+  x,
+  y,
+  maxWidth,
+  lineHeight,
+}: {
+  ctx: CanvasRenderingContext2D;
+  text: string;
+  x: number;
+  y: number;
+  maxWidth: number;
+  lineHeight: number;
+}) => {
+  // Split text into words
+  let words = text.replaceAll("\n", " \n ").split(/ +/);
+  let line = ""; // This will store the text of the current line
+  let testLine = ""; // This will store the text when we add a word, to test if it's too long
+  let lineArray = []; // This is an array of lines, which the function will return
+
+  for (var n = 0; n < words.length; n++) {
+    // Measure text sizing
+    testLine += `${words[n]} `;
+    let metrics = ctx.measureText(testLine);
+    let testWidth = metrics.width;
+    // If the width of this test line is more than the max width
+    if (words[n]?.includes("\n") || (testWidth > maxWidth && n > 0)) {
+      // Then the line is finished, push the current line into "lineArray"
+      lineArray.push({ text: line, x, y });
+      // Start a new line
+      y += lineHeight;
+      // Update line and test line to use this word as the first word on the next line
+      // If it's a newline, then don't add a space
+      if (words[n]?.includes("\n")) {
+        line = ``;
+        testLine = ``;
+      } else {
+        line = `${words[n]} `;
+        testLine = `${words[n]} `;
+      }
+    } else {
+      // Test line is less than the max width, add the word to the current line
+      line += `${words[n]} `;
+    }
+    // Handle a single line...
+    if (n === words.length - 1) {
+      lineArray.push({ text: line, x, y });
+    }
+  }
+  return lineArray;
+};
+
+async function generateTextPreview(text: string): Promise<File> {
+  // Trim the text to a reasonable max length. Prevent crashes if the user pastes a gigantic string
+  const trimmedText = text.trim().slice(0, CHAR_LIMIT);
+
+  const [width, height] = [500, 500];
+  const padding = 20;
+  const dpr = 2;
+
+  const fontFamily = "Inter";
+  const [fontSize, lineHeight] = [16, 24];
+  const [textColor, backgroundColor] = ["black", "white"];
+
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return reject(new Error("Could not create canvas context"));
+    }
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, width * dpr, width * dpr);
+    ctx.fillStyle = textColor;
+    ctx.font = `${fontSize * dpr}px ${fontFamily}`;
+    const wrapped = wrapText({
+      ctx,
+      text: trimmedText,
+      x: padding * dpr,
+      y: fontSize * dpr + padding * dpr,
+      maxWidth: width * dpr - padding * 2 * dpr,
+      lineHeight: lineHeight * dpr,
+    });
+    wrapped.forEach((line) => ctx.fillText(line.text, line.x, line.y));
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        return reject(new Error("Could not create blob"));
+      }
+      resolve(new File([blob], "thumbnail.png", { type: "image/png" }));
+    });
+  });
+}
+
+function generateTextTitle(text: string) {
+  const firstLine = text.split("\n")[0]!;
+  const firstSentence = firstLine?.split(". ")[0]!;
+
+  if (firstSentence.length > 50) {
+    return firstSentence.slice(0, 50) + "...";
+  }
+
+  return firstSentence;
+}
+
+const toTextFile = (text: string) =>
+  new File([text], "Untitled.txt", { type: "text/plain" });
+
+/** For text nfts, this will generate files that are needed for the metadata json, including the txt.file containing the text, and a thumbnail image containing a preview of the text
+ */
+export async function generateTextNftMetadataFiles(
+  text: string,
+): Promise<TextMetadataFiles> {
+  const name = generateTextTitle(text);
+  const textFile = toTextFile(text);
+  const thumbnailFile = await generateTextPreview(text);
+
+  return {
+    name,
+    mediaUrlFile: textFile,
+    thumbnailFile,
+  };
+}

package/src/ipfs/token-metadata.ts

@@ -0,0 +1,99 @@
+import { getFetchableUrl } from "./gateway";
+import {
+  DEFAULT_THUMBNAIL_CID_HASHES,
+  TEXT_PLAIN,
+  getMimeType,
+  isImage,
+  mimeTypeToMedia,
+} from "./mimeTypes";
+import {
+  MakeMediaMetadataParams,
+  MakeTextMetadataParams,
+  TokenMetadataJson,
+} from "./types";
+
+/**
+ * Takes properties for a text based nft and formats it as proper json metadata
+ * for the token, which should be uploaded to IPFS.
+ * @param parameters - The parameters to format into metadata {@link MakeTextMetadataParams}
+ */
+export const makeTextTokenMetadata = (
+  parameters: MakeTextMetadataParams,
+): TokenMetadataJson => {
+  const { name, textFileUrl, thumbnailUrl, attributes = [] } = parameters;
+
+  const content = textFileUrl
+    ? {
+        mime: TEXT_PLAIN,
+        uri: textFileUrl,
+      }
+    : null;
+
+  const image = thumbnailUrl;
+  const animation_url = textFileUrl;
+
+  return {
+    name,
+    image,
+    animation_url,
+    content,
+    attributes,
+  };
+};
+
+/**
+ * Takes properties for a media based nft (video, image, etc) and formats it as proper json metadata
+ * for the token, which should be uploaded to IPFS.
+ * @param parameters - The parameters to format into metadata {@link MakeMediaMetadataParams}
+ */
+export const makeMediaTokenMetadata = async ({
+  name,
+  description,
+  attributes = [],
+  mediaUrl,
+  thumbnailUrl,
+}: MakeMediaMetadataParams): Promise<TokenMetadataJson> => {
+  const contentUrl = mediaUrl;
+  const fetchableContentUrl = getFetchableUrl(contentUrl);
+
+  if (!fetchableContentUrl)
+    throw new Error(`Content url (${contentUrl}) is not fetchable`);
+
+  const mimeType = await getMimeType(fetchableContentUrl);
+  const mediaType = mimeTypeToMedia(mimeType);
+
+  let image: string | undefined = undefined;
+  let animation_url: string | null = null;
+
+  // If the media is an image, just set the image field
+  // Otherwise we require a thumbnail, set image and animation_url
+  if (isImage(mimeType)) {
+    image = contentUrl;
+  } else {
+    image = thumbnailUrl;
+    animation_url = mediaUrl;
+  }
+
+  // If no image determined, use a fallback placeholder
+  if (!image)
+    image = `ipfs://${
+      DEFAULT_THUMBNAIL_CID_HASHES[mediaType] ||
+      DEFAULT_THUMBNAIL_CID_HASHES.default
+    }`;
+
+  const content = contentUrl
+    ? {
+        mime: mimeType || "application/octet-stream",
+        uri: contentUrl,
+      }
+    : null;
+
+  return {
+    name,
+    description,
+    image,
+    animation_url,
+    content,
+    attributes,
+  };
+};

package/src/ipfs/types.ts

@@ -0,0 +1,54 @@
+export type CreateERC1155TokenAttributes = {
+  trait_type: string;
+  value: string;
+};
+
+export type ContractMetadataJson = {
+  name?: string;
+  description?: string;
+  image?: string;
+};
+
+export type TokenMetadataJson = {
+  name: string;
+  description?: string;
+  /** Primary image file */
+  image?: string;
+  animation_url?: string | null;
+  content?: {
+    mime: string;
+    uri: string;
+  } | null;
+  attributes: Array<CreateERC1155TokenAttributes>;
+};
+
+export type BaseMetadataParams = {
+  /** Token name */
+  name: string;
+  /** Optional description */
+  description?: string;
+  /** Optional attributes to tag the token with */
+  attributes?: CreateERC1155TokenAttributes[];
+};
+
+export type MakeTextMetadataParams = BaseMetadataParams & {
+  /** Ipfs url where media is hosted */
+  textFileUrl: string;
+  /** If thumbnail was generate for text file, thumbnail image url */
+  thumbnailUrl?: string;
+};
+
+export type TextMetadataFiles = {
+  name: string;
+  /** File that holds the text, and is the primary media */
+  mediaUrlFile: File;
+  /** Thumbnail image preview of the text */
+  thumbnailFile: File;
+};
+
+export type MakeMediaMetadataParams = BaseMetadataParams & {
+  /** Ipfs url where media is hosted */
+  mediaUrl: string;
+  /** Ipfs url where thumbnail of media is hosted */
+  thumbnailUrl?: string;
+};

package/src/mint/mint-client.test.ts

@@ -1,20 +1,20 @@
 import { describe, expect } from "vitest";
 import { Address, erc20Abi, parseAbi, parseEther } from "viem";
-import { zora } from "viem/chains";
-import {
-  zoraCreator1155ImplABI,
-  erc20MinterAddress as erc20MinterAddresses,
-} from "@zoralabs/protocol-deployments";
-import { anvilTest, forkUrls, makeAnvilTest } from "src/anvil";
+import { zora, zoraSepolia } from "viem/chains";
+import { zoraCreator1155ImplABI } from "@zoralabs/protocol-deployments";
+import { forkUrls, makeAnvilTest } from "src/anvil";
 import { createCollectorClient } from "src/sdk";
-import { requestErc20ApprovalForMint } from "./mint-client";
 
 const erc721ABI = parseAbi([
   "function balanceOf(address owner) public view returns (uint256)",
 ] as const);
 
 describe("mint-helper", () => {
-  anvilTest(
+  makeAnvilTest({
+    forkBlockNumber: 16028671,
+    forkUrl: forkUrls.zoraMainnet,
+    anvilChainId: zora.id,
+  })(
     "mints a new 1155 token",
     async ({ viemClients }) => {
       const { testClient, walletClient, publicClient } = viemClients;
@@ -31,15 +31,24 @@ describe("mint-helper", () => {
         publicClient,
       });
 
-      const { parameters } = await collectorClient.mint({
-        minterAccount: creatorAccount,
-        tokenId: targetTokenId,
+      const { token: mintable, prepareMint } = await collectorClient.getToken({
         tokenContract: targetContract,
         mintType: "1155",
-        mintRecipient: creatorAccount,
+        tokenId: targetTokenId,
+      });
+
+      mintable.maxSupply;
+      mintable.totalMinted;
+      mintable.tokenURI;
+      mintable;
+
+      const { parameters, costs } = prepareMint({
+        minterAccount: creatorAccount,
         quantityToMint: 1,
       });
 
+      expect(costs.totalCostEth).toBe(1n * parseEther("0.000777"));
+
       const oldBalance = await publicClient.readContract({
         abi: zoraCreator1155ImplABI,
         address: targetContract,
@@ -85,13 +94,24 @@ describe("mint-helper", () => {
         publicClient,
       });
 
-      const { parameters } = await collectorClient.mint({
+      const { prepareMint } = await collectorClient.getToken({
         tokenContract: targetContract,
+        mintType: "721",
+      });
+
+      const quantityToMint = 3n;
+
+      const { parameters, costs } = prepareMint({
         minterAccount: creatorAccount,
         mintRecipient: creatorAccount,
-        quantityToMint: 1,
-        mintType: "721",
+        quantityToMint,
       });
+
+      expect(costs.totalPurchaseCost).toBe(quantityToMint * parseEther(".08"));
+      expect(costs.totalCostEth).toBe(
+        quantityToMint * (parseEther("0.08") + parseEther("0.000777")),
+      );
+
       const oldBalance = await publicClient.readContract({
         abi: erc721ABI,
         address: targetContract,
@@ -114,7 +134,7 @@ describe("mint-helper", () => {
       });
 
       expect(oldBalance).to.be.equal(0n);
-      expect(newBalance).to.be.equal(1n);
+      expect(newBalance).to.be.equal(quantityToMint);
     },
     12 * 1000,
   );
@@ -139,42 +159,47 @@ describe("mint-helper", () => {
         address: mockCollector,
       });
 
-      const erc20Currency = "0xa6b280b42cb0b7c4a4f789ec6ccc3a7609a1bc39";
-      const erc20PricePerToken = 1000000000000000000n;
+      const { prepareMint } = await minter.getToken({
+        mintType: "1155",
+        tokenContract: targetContract,
+        tokenId: targetTokenId,
+      });
+
+      const quantityToMint = 1n;
+
+      const { parameters, erc20Approval, costs } = prepareMint({
+        minterAccount: mockCollector,
+        quantityToMint,
+      });
+
+      expect(erc20Approval).toBeDefined();
+      expect(costs.totalCostEth).toBe(0n);
+      expect(costs.totalPurchaseCost).toBe(
+        quantityToMint * 1000000000000000000n,
+      );
+      expect(costs.totalPurchaseCostCurrency).toBe(
+        "0xa6b280b42cb0b7c4a4f789ec6ccc3a7609a1bc39",
+      );
 
       const beforeERC20Balance = await publicClient.readContract({
         abi: erc20Abi,
-        address: erc20Currency,
+        address: erc20Approval!.erc20,
         functionName: "balanceOf",
         args: [mockCollector],
       });
 
-      const quantityToMint = 3n;
-
-      const quantityErc20 = erc20PricePerToken * BigInt(quantityToMint);
-
-      const { request } = await publicClient.simulateContract(
-        requestErc20ApprovalForMint({
-          erc20MinterAddress:
-            erc20MinterAddresses[chain.id as keyof typeof erc20MinterAddresses],
-          tokenAddress: erc20Currency,
-          account: mockCollector,
-          quantityErc20,
-        }),
-      );
-      const approveHash = await walletClient.writeContract(request);
-      const approveTxReciept = await publicClient.waitForTransactionReceipt({
-        hash: approveHash,
+      // execute the erc20 approval
+      const { request: erc20Request } = await publicClient.simulateContract({
+        abi: erc20Abi,
+        address: erc20Approval!.erc20,
+        functionName: "approve",
+        args: [erc20Approval!.approveTo, erc20Approval!.quantity],
+        account: mockCollector,
       });
-      expect(approveTxReciept).to.not.be.null;
 
-      const { parameters } = await minter.mint({
-        minterAccount: mockCollector,
-        tokenId: targetTokenId,
-        tokenContract: targetContract,
-        mintRecipient: mockCollector,
-        quantityToMint,
-        mintType: "1155",
+      const approveHash = await walletClient.writeContract(erc20Request);
+      await publicClient.waitForTransactionReceipt({
+        hash: approveHash,
       });
 
       const beforeCollector1155Balance = await publicClient.readContract({
@@ -185,20 +210,20 @@ describe("mint-helper", () => {
       });
       expect(beforeCollector1155Balance).to.be.equal(0n);
 
+      // execute the mint
       const simulationResult = await publicClient.simulateContract(parameters);
       const hash = await walletClient.writeContract(simulationResult.request);
-      const receipt = await publicClient.waitForTransactionReceipt({ hash });
-      expect(receipt).to.not.be.null;
+      await publicClient.waitForTransactionReceipt({ hash });
 
       const afterERC20Balance = await publicClient.readContract({
         abi: erc20Abi,
-        address: erc20Currency,
+        address: erc20Approval!.erc20,
         functionName: "balanceOf",
         args: [mockCollector],
       });
 
       expect(beforeERC20Balance - afterERC20Balance).to.be.equal(
-        erc20PricePerToken * quantityToMint,
+        erc20Approval!.quantity,
       );
 
       const afterCollector1155Balance = await publicClient.readContract({
@@ -211,4 +236,28 @@ describe("mint-helper", () => {
     },
     12 * 1000,
   );
+
+  makeAnvilTest({
+    forkUrl: forkUrls.zoraSepolia,
+    forkBlockNumber: 10294670,
+    anvilChainId: zoraSepolia.id,
+  })(
+    "gets onchain and premint mintables",
+    async ({ viemClients }) => {
+      const { publicClient, chain } = viemClients;
+
+      const targetContract: Address =
+        "0xa33e4228843092bb0f2fcbb2eb237bcefc1046b3";
+
+      const minter = createCollectorClient({ chainId: chain.id, publicClient });
+
+      const { tokens: mintables, contract } = await minter.getTokensOfContract({
+        tokenContract: targetContract,
+      });
+
+      expect(mintables.length).toBe(4);
+      expect(contract).toBeDefined();
+    },
+    12 * 1000,
+  );
 });