Create Solana Tokens Metadata Easily with Pinata

M Jupri Amin — Sat, 12 Oct 2024 22:27:43 +0000

This is a submission for the The Pinata Challenge

What I Built

I developed a web application called "Solana Token Creator powered by Pinata" that allows users to easily create Solana tokens with custom metadata. This project leverages Pinata's IPFS storage for securely storing token logos and metadata, combining the power of Solana's blockchain with Pinata's decentralized storage to provide a seamless token creation experience.

Key features include:

Create Solana tokens with custom metadata
Upload token logos and token metadatas to Pinata IPFS
View recently created tokens in a dynamic marquee
Wallet integration for Solana transactions
Dark mode support

Demo

Live Demo: Solana Token Creator powered by Pinata

Screenshots:

My Code

Source Code: GitHub

Key files demonstrating Pinata integration:

src/lib/pinata.ts: Handles the integration with Pinata for uploading metadata and images.
src/hooks/useCreateSplToken.tsx: Custom hook for creating Solana tokens, including Pinata interactions.
src/components/sections/running-tokens.tsx: Fetches and displays recently created tokens from Pinata.

More Details

Here are some clear examples of how I used Pinata in this project:

Uploading Token Logos:
I used Pinata to store token logos on IPFS. Users can either upload an image file or provide a URL.

export const uploadImage = async ({
  type,
  image,
  tokenMetadata,
}: UploadImage) => {
  const uploadMethod = type === "file" ? "base64" : "url";
  const res = await pinata.upload[uploadMethod](image)
    .cidVersion(1)
    .addMetadata({
      name: `${tokenMetadata?.symbol}-logo-${Date.now()}`,
    })
    .group(process.env.PINATA_GROUP_IMAGE_ID!);

  return {
    ...tokenMetadata,
    image: `${GATEWAY_URL}${res.IpfsHash}`,
  };
};

Storing Token Metadata:
After creating the token, I upload the metadata (including the IPFS link to the logo) to Pinata.

export const uploadMetadata = async (metadata: TokenMetadata) => {
  const res = await pinata.upload
    .json(metadata)
    .cidVersion(1)
    .addMetadata({
      name: `${metadata.symbol}-metadata-${Date.now()}`,
    })
    .group(process.env.PINATA_GROUP_METADATA_ID!);
  return `${GATEWAY_URL}${res.IpfsHash}`;
};

Retrieving Recent Tokens:
I fetch recently created tokens from Pinata to display in a dynamic marquee on the homepage.

const fetchTokens = async () => {
  const files = await listFiles();
  const oneWeekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
  const recentFiles = _.filter(
    files,
    (file) => new Date(file.date_pinned).getTime() >= oneWeekAgo,
  );
  const metadataHashes = _.map(recentFiles, "ipfs_pin_hash");
  return getFiles(metadataHashes);
};

export const listFiles = async () => {
  const res = await pinata.listFiles();
  return res.filter((file) => file.mime_type === "application/json");
};

export const getFile = async (hash: string) => {
  const res = await fetch(`${GATEWAY_URL}${hash}`, {
    next: { revalidate: 3600 },
  });
  if (!res.ok) throw new Error("Failed to fetch file");
  return res.json();
};

export const getFiles = async (hashes: string[]) => {
  const promises = hashes.map((hash) => getFile(hash));
  return Promise.all(promises);
};

By using Pinata, I ensured that all token metadata and logos are stored in a decentralized manner, aligning with the principles of blockchain technology and providing a robust, scalable solution for Solana token creation.

DEV Community: M Jupri Amin

Create Solana Tokens Metadata Easily with Pinata

What I Built

Demo

My Code

More Details