Hello everyone 👋, I, Atharva Deshpande am back with another article. This article focuses on creating a very simple app that uploads files to IPFS using Next.js.

Here is the link to GitHub Repository. You can go ahead and get the code directly but I would recommend reading through the article once.

Prerequisites

• Basic knowledge of Blockchain and IPFS.

• Any code editor. ( I would be using VSCode )

• Basic understanding of Javascript

• Machine with NodeJS installed.

Introduction

IPFS

IPFS is a way of storing and sharing files on the internet in a decentralized way. Instead of using a single server or central authority to host files, IPFS uses a network of computers to store and distribute files. This means that anyone can access and share files on the network without needing to go through a central server or authority. IPFS also uses a special kind of addressing system, which means that files are identified by their content, rather than by their location. This makes it possible to access files on the network without knowing where they are stored, which can make it more efficient and resilient than other ways of storing and sharing files online.

Let's BUIDL It 🛠️

Step 1: Pinata Account Setup

• Head over to Pinata and create an account

• Login to the account and click on "Developers" on the top NavBar.

• Click on "New Key", create an API key and copy the secret as you will not be able to look at the secret again.

Step 2: Write some code 💻

• Type in the command below in the terminal.

  Note: pinata-uploader is the name of the project that I have put. You can put it anything you like.

  npx create-next-app@latest pinata-uploader
  

  Select "No" when the prompt asks you for using Typescript in the project and hit enter.

  This is how your terminal would look after successful creation of the Next.js project.

• Open the project in VSCode using the command

  code pinata-uploader
  

  By running the command npm run dev you should be able to see the default UI provided by Next.js at localhost.

• Create a .env file in the root of your project and put in your API key and API Secret as below.

• Save the file and head over to next.config.js in the root folder and replace it with the following.

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    env: {
      API_KEY: process.env.API_KEY,
      API_SECRET: process.env.API_SECRET
    }
  }
  
  module.exports = nextConfig
  

  NOTE: Don't forget to load these env variables using the command source ./.env in Linux/macOS terminal.

  Finally, we would be now writing the main code which deals with Pinata.

• Go to pages/index.js and replace the Home function with the following

export default function Home() {
  return (
    <div className={styles.container}>
      <input type='file' onChange={(e)=>setFile(e.target.files[0])}></input>
      <button onClick={handleUpload}>Upload</button>
      <ul>
        {
          pinnedFiles && pinnedFiles.map(file => (
            <li key={file.id}>
              <a href={`https://gateway.pinata.cloud/ipfs/${file.ipfs_pin_hash}`} target='_blank' rel='noreferrer'>{file.metadata.name}</a>
            </li>
          ))
          
        }
      </ul>
    </div>
  )
}

On saving the file you will get some error related to handleUpload function not existing. Let's fix that:

Write a simple function defition which does nothing

const handleUpload = async () => {
}

When you save this, you will get another error. Add the following line to solve it

const [pinnedFiles, setPinnedFiles] = useState([])

You should now be able to see a very bad UI with a simple upload button and file selector.

Let's make these things work.

• Since we would be dealing with Pinata APIs, we would need to install axios by typing the command npm i --save axios

• Define a Pinata Config variable like this

  const pinataConfig = {
      root: 'https://api.pinata.cloud',
      headers: { 
        'pinata_api_key': process.env.API_KEY,
        'pinata_secret_api_key': process.env.API_SECRET
      }
  };
  

• Create a test function to check if we are indeed able to make the API call.

const testPinataConnection = async() => {
    try {
      const url =`${pinataConfig.root}/data/testAuthentication`
      const res = await axios.get(url, {headers: pinataConfig.headers});
      console.log(res.data);
    } catch (error) {
      console.log(error)
    }
}

Call this function on page load using the useEffect function.

useEffect(() => {
    testPinataConnection()
});

Open the developer tools and head over to console to see a success message from pinata. If you don't see any message then recheck all the steps we did above very carefully.

By far, your index.js should look like this

import Head from 'next/head'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import styles from '../styles/Home.module.css'
import axios from 'axios'

export default function Home () {
  const [pinnedFiles, setPinnedFiles] = useState([])
  const [file, setFile] = useState(null)
  const handleUpload = async () => {
  }

  const pinataConfig = {
    root: 'https://api.pinata.cloud',
    headers: {
      'pinata_api_key': process.env.API_KEY,
      'pinata_secret_api_key': process.env.API_SECRET
    }
  };

  const testPinataConnection = async () => {
    try {
      console.log(pinataConfig)
      const url = `${pinataConfig.root}/data/testAuthentication`
      const res = await axios.get(url, { headers: pinataConfig.headers });
      console.log(res.data);
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    testPinataConnection()
  });

  return (
    <div className={styles.container}>
      <input type='file' onChange={(e) => setFile(e.target.files[0])}></input>
      <button onClick={handleUpload}>Upload</button>
      <ul>
        {
          pinnedFiles && pinnedFiles.map(file => (
            <li key={file.id}>
              <a href={`https://gateway.pinata.cloud/ipfs/${file.ipfs_pin_hash}`} target='_blank' rel='noreferrer'>{file.metadata.name}</a>
            </li>
          ))

        }
      </ul>
    </div>
  )
}

Now let's get to adding the functionality of actually uploading a file to IPFS. We will update the handleUpload function to this.

  const handleUpload = async () => {
    try {
      if (file !== undefined) {
        const formData = new FormData();
        console.log(file)
        formData.append('file', file);
        const pinataBody = {
          options: {
            cidVersion: 1,
          },
          metadata: {
            name: file.name,
          }
        }
        formData.append('pinataOptions', JSON.stringify(pinataBody.options));
        formData.append('pinataMetadata', JSON.stringify(pinataBody.metadata));
        const url = `${pinataConfig.root}/pinning/pinFileToIPFS`;
        const response = await axios({
          method: 'post',
          url: url,
          data: formData,
          headers: pinataConfig.headers
        })
        console.log(response.data)
        queryPinataFiles();
      } else {
        alert('select file first')
      }
    } catch (error) {
      console.log(error)
    }
  }

You would notice the queryPinataFiles function being called inside, but we haven't yet defined it. Let us define the function body.

const queryPinataFiles = async () => {
    try {
      const url = `${pinataConfig.root}/data/pinList?status=pinned`;
      const response = await axios.get(url, pinataConfig);
      console.log(response.data.rows)
      setPinnedFiles(response.data.rows);
    } catch (error) {
      console.log(error)
    }
  };

Save the file and head over to your app and keep the network tab open.

Choose any file and press upload to pin it to IPFS. You would see a network call to IPFS being made and once it is successful you would get an IPFS hash in the Response section of the Request. This implies that you have successfully uploaded your file to the network.

One final thing which is remaining is loading the files you uploaded on start of the app. Simple call the queryPinataFiles function in the same useEffect

There are all your files pinned to IPFS. Click on the filename to see the actual details

VOILA YOU HAVE DONE IT!!!

Support

If you liked my article, consider supporting me with a coffee ☕️ or some crypto ( ₿, ⟠, etc)

Here is my public address 0x7935468Da117590bA75d8EfD180cC5594aeC1582

https://www.buymeacoffee.com/atoo

Lets connect

https://github.com/Atoo35

https://www.linkedin.com/in/atharva-deshpande-187969140/

https://twitter.com/atharva_35

Feedback

Let me know if I have missed something or provided the wrong info. It helps me keep genuine content and learn.

In this article, we would understand how to fetch mirror posts of any Ethereum address by using Arweave's Graph. This article expects prior knowledge of the fundamentals of blockchain, Arweave and Mirror.

Here is the link to Github Repository. You can go ahead and get the code directly but I would recommend reading through the article once.

Prerequisites

• Familiarity with blockchain, Arweave and Mirror.

• Any code editor. ( I would be using VSCode )

• Basic understanding of Javascript

• Machine with NodeJS(v16.15.0) installed.

Approach 🧠

The process of retrieving Mirror posts is split into 2 steps.

• Step 1: Retrieve the transactions of a user from the Arweave graph with the tag name MirrorXYZ.

• Step 2: Query the Arweave API https://arweave.net/<txId> by passing the transaction ID to get the JSON data format.

Let's BUIDL It 🛠️

1. Create a folder, open it in VSCode and run the command

npm init -y

Edit the `package.json` file so that the scripts tag looks like this.
```json
"scripts": {
    "start": "node index.js"
  }

1. Create an `index.js` file and run the command to install Axios which would be used to query the graph and get the JSON file as well.

```js
npm i axios

Your folder structure should look like this

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657790855601/1mYeTV1QS.png align="left")

1. Let's write the code to query the Arweave graph to get transactions of a user. In the index.js file, copy paste the following code.

const axios = require('axios');
arweaveURL = "https://arweave.net";
const fetchTransactions = async (address) => {
  try {
    const result = await axios.post(
      `${arweaveURL}/graphql`,
      {
        query: `
                {
                  transactions(
                      tags:[
                        {
                          name:"App-Name",
                          values:["MirrorXYZ"],
                        },
                        {
                          name:"Contributor",
                          values:["${address}"]
                        }
                      ]
                  sort:HEIGHT_DESC) {
                      edges {
                          node {
                              id
                          }
                      }
                  }
              }
              `
         },
         {
           headers: {
             'Content-Type': 'application/json'
           }
         }
       );
        return result.data.data
      } catch (err) {
        console.log(err);
      }
}
const main = async () => {
     const response = await fetchTransactions("0x9651B2a7Aa9ed9635cE896a1Af1a7d6294d5e902")
     console.log(response.transactions.edges)
}
main()
  .then(() => process.exit(0))

Here, the function `fetchTransactions` simply queries the Arweave Graph using axios. We are sending a graph query that searches for transactions with the tags `App-Name` as `MirrorXYZ` and `Contributor` address as `0x9651B2a7Aa9ed9635cE896a1Af1a7d6294d5e902`.

Note the above address is of Mirror Development

Run the script by typing the following in your terminal.
```js

npm start

    Your terminal should look somewhat like this

    ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657792467523/PwSpGcCQU.png align="left")


3. Let's write the final function which basically fetches the json data of the post. Add the below function anywhere before the `main` function
```javascript
const fetchArweaveTransactionData = async (transactionId) => {
      try {
          const response = await axios.get(`https://arweave.net/${transactionId}`)
          return response.data;
      } catch (error) {
          console.log(error)
      }
}

We simply pass on the transaction id from the response of the graph API to get the post. update your main function to the following:

const main = async () => {
      const response = await fetchTransactions("0x9651B2a7Aa9ed9635cE896a1Af1a7d6294d5e902")
      console.log(response.transactions.edges)
      const post = await fetchArweaveTransactionData(response.transactions.edges[0].node.id)
      console.log(post)
}

> Note: For the sake of this article, I am fetching post for only the first transaction from the response.

The response is pretty huge to display it here with the console version but here is the browser version.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657793042082/9eCSaXomb.png align="left")

That's it, folks we have successfully retrieved Mirror posts.

Support

If you liked my article, consider supporting me with a coffee ☕️ or some crypto ( ₿, ⟠, etc)

Here is my public address 0x7935468Da117590bA75d8EfD180cC5594aeC1582

Lets connect

https://github.com/Atoo35

https://www.linkedin.com/in/atharva-deshpande-187969140/

https://twitter.com/atharva_35

Feedback

Let me know if I have missed something or provided the wrong info. It helps me keep genuine content and learn as well.