---

title: "How to Create a Dynamic App NFT Resume"

publishDate: "10 Jan 2023"

description: "Level up your job search with a dynamic app NFT resume that will wow any employer."

ogImage: "/blog-images/other/6410b6848afd85df8fe0a193_2023-01-10_How-to-Create_blog-img-tiny.png"

atUri: "at://did:plc:ia2zdnhjaokf5lazhxrmj6eu/site.standard.document/3mdzvussqrf2v"

---

import pinnie from "../../assets/pinnie.png";

import OutLinkButton from "@/components/common/OutLinkButton";

<OutLinkButton

  link="https://www.pinata.cloud/blog/resume-app-nft"

  site="Pinata"

  image={pinnie}

/>{" "}

Despite the current market conditions, web3 jobs are still on the rise. But competition is at an all-time high. Sure you can build a portfolio of projects to help display your skills, but that’s what everyone else is doing too. What can you do to stand out among the crowds of developers out there like yourself? How are you thinking outside the box?

Rather than another LinkedIn resume or eye-glazing PDF, what if a potential employer opened up their crypto wallet and saw an interactive resume NFT with your name on it? It would demonstrate not only your ability to make NFTs, but [App NFTs](https://medium.com/pinata/how-to-build-an-app-nft-7c57b51698e7)—this concept that a full blown and functional application can be an NFT. You think that might crank things up a bit?

This dynamic resume app NFT would show an ability to make anything an NFT, like an interactive comic book or even a small game. And you’d better believe it would get that employer intrigued enough to set up some time to chat with the power of simply dropping your resume into their wallet.

Sound interesting? Let’s talk about how you can create your own dynamic resume app NFT.

## Building your Resume App NFT

Here we’ll give a general walkthrough of how to create this Resume App NFT, but the ultimate tutorial (and what is primarily referenced while building this) is [Justin’s guide on how to create App NFTs using Pinata](https://medium.com/pinata/how-to-build-an-app-nft-7c57b51698e7), Polygon and Opensea.

Let’s get into it.

First things first, you need a vision of what your resume could look like. As the primary builder, our Head of Community Steve Simkins envisioned something more dynamic and interactive, taking advantage of all the fun web dev tools out there. It was important to keep in mind what this would look like from an NFT marketplace like Opensea or a crypto wallet, making sure it’s size would not cause problems.

Steve spent sometime tinkering in Figma and ended up with a card like design that could have multiple screens with different pieces of the resume. The reader could hover over the card and get a cool 3D effect, and click on the forward and back buttons to read through his skills.

After the design was finished, it was time to build the app. Steve followed Justin’s tutorial by making a simple React application and made sure to use **“homepage”: “.”** in the **package.json** file; very important to make sure it runs correctly on Pinata and IPFS. From there Steve used some standard issue web design methods and created a static “website” or app that was his resume. Of course for this step you can use just about any kind of javascript framework or tools, not just React. Once the development was complete, Steve ran the build command and uploaded the build folder to Pinata.

As said in Justin’s tutorial, you can use a free Pinata account to do all of this, but to truly harness the full user experience of this app, using a paid account with a Dedicated Gateway will make this app much faster than if you used a public gateway or depended on external sources. Here is an example of the application through Steve’s Dedicated Gateway:

<iframe

  src="/blog-images/files-stevedylan-dev/QmdKYQpczE7giv15Yx2tkk1pkbRe862eaLhTR5e7FjhJ8F.html"

  frameborder="0"

  height="500px"

  width="100%"

  class="hidden sm:block"

/>

<img

  src="/blog-images/other/63bd95503c654e14fc1b3b00_Slide-16-9-3.png"

  alt="Screenshot of web app"

  height={1080}

  width={1920}

  aspectRatio={1 / 1}

  class="sm:hidden"

/>

Awesome! Resume app is done, time to turn it into an NFT. Following the guide, Steve created a simple smart contract to deploy the App NFT in a way that he could keep updating it with new versions, very handy if you ever have an update in experience or education. Also keep in mind you can do your own smart contract customization here to do cool stuff, like mass airdrop your NFT to a list of wallets or ENS addresses!

With the smart contract tested and ready to go, it was time to prep the metadata for the NFT. Steve kept it pretty simple with a name, description, image link for thumbnails, and used his Dedicated Gateway link in the **animation_url** for performance.

```json

{

  "name": "Steve's App NFT Resume",

  "description": "A dynamic NFT resume by Steve",

  "image": "ipfs://QmTa46bKHxcQCBoNt887X2zNJwAHpAZ93hTXDi9KeJeM4W",

  "animation_url": "https://stevedsimkins.mypinata.cloud/ipfs/QmdKYQpczE7giv15Yx2tkk1pkbRe862eaLhTR5e7FjhJ8F/index.html"

}

```

With the metadata.json file complete, Steve uploaded that file to Pinata as well and used the CID as the token URI like so:

```javascript

const URI = "ipfs://QmU85vmit8ShrUpnJFg3wEAMA61GcQB2X5KcgabchDV1kt";

```

That’s it! After Steve ran the deployment command with Hardhat, the NFT had been minted in his wallet where we could see it on OpenSea! [Check it out](https://testnets.opensea.io/assets/goerli/0x45602432657d8100119e8633b677043b9022c22b/1) 😎

Of course this app is a fun proof of concept, but with some more refining and perhaps a better framework, you can make efficient applications that can be owned as NFTs. This is just one of the many possibilities, all of which could either make your portfolio impressive, or even launch your own company 👀 What will you build?

---

title: "How to Create 3D NFTs on Solana"

publishDate: "18 May 2022"

description: "Learn how to scan and mint real life objects on Solana"

ogImage: "/blog-images/medium/v2/resize:fit:4800/format:webp/1*5vzpNGiQSZqe1EX6ghDINg.png"

atUri: "at://did:plc:ia2zdnhjaokf5lazhxrmj6eu/site.standard.document/3mdzvut5khv2v"

---

import medium from "../../assets/medium.png";

import OutLinkButton from "@/components/common/OutLinkButton";

<OutLinkButton

	link="https://medium.com/pinata/how-to-scan-and-create-1-1-3d-nfts-on-solana-using-polycam-and-pinata-df513dd87937"

	site="Medium"

	image={medium}

/>

The growth and evolution of NFTs has come a long way from the early days. Some of the early NFT projects were simple .png files or a link to a YouTube video, but now they are an entire industry that consumes brand, utility, even augmented reality. Metaverses, 3D objects, and other virtual reality experiences are all the rage, and I firmly believe we will see more of this in the near future.

One unique tool that I stumbled upon was Polycam. Polycam is a mobile iOS app that utilizes the iPhone’s LiDAR scanner to map 3D objects and environments. 3D NFTs are certainly popular, but what about 3D NFTs of real life objects? Or even better: real life environments? I think this is an angle that not many people have thought about creating, and opens up a whole new realm of artistic expression in ways people have not seen before.

In this tutorial we’ll cover how to use Polycam to scan and create a 3D models and environments, and then we’ll cover how to make them into NFTs using Pinata and Solana.

## Scanning with Polycam

To get started you’ll want to download the Polycam app on the App Store. Be aware that this is only for iPhones, and scanning environments will be more effective if you have a LiDAR scanner on your iPhone. Having a LiDAR scanner is not necessary though! Once you download it you will need to make an account with them and start their 14 day free trial.

Once you do that Polycam will take you to the “captures” page where you can see all your scans. To learn how the scan process works, I would highly recommend their well done tutorials on their website and in the app.

[Using LiDAR Mode to Capture Large Spaces](https://learn.poly.cam/capturing-large-spaces)

[Using Photo Mode to Capture 3D Objects](https://learn.poly.cam/building-a-studio-for-photo-mode-captures)

In short, you will want to use the LiDAR mode when you are trying to scan environments or large spaces, and for 3D objects you will want to use the photo mode!

For this tutorial I’m going to scan my desk space using the LiDAR method, and for the 3D objects we’ll use an old book, and of course Pinnie!

With the video below you can get glimpse of how the LiDAR scanner maps over surfaces. Taking it real slow and covering every angle really helps with scanning environments.

<div style="padding:216.22% 0 0 0;position:relative;">

	<iframe

		src="https://player.vimeo.com/video/703877466?h=9659ba4952"

		style="position:absolute;top:0;left:0;width:100%;height:100%;"

		frameborder="0"

		allow="autoplay; fullscreen; picture-in-picture"

		allowfullscreen

	></iframe>

</div>

<script src="https://player.vimeo.com/api/player.js"></script>

After you’re done scanning there will be a processing step that will take all the data and map it into a 3D environment!

<div style="padding:216.22% 0 0 0;position:relative;">

	<iframe

		src="https://player.vimeo.com/video/703880632?h=52b5f574b7"

		style="position:absolute;top:0;left:0;width:100%;height:100%;"

		frameborder="0"

		allow="autoplay; fullscreen; picture-in-picture"

		allowfullscreen

	></iframe>

</div>

<script src="https://player.vimeo.com/api/player.js"></script>

Once it’s processed you can go ahead and view the 3D model/environment! Polycam really is first class; you can create videos, you can view the model in Augmented Reality, it just has so many awesome features! My model isn’t the cleanest since I have so many small detailed objects on my desk, but for something a bit simpler this feature is amazing.

<div style="padding:216.22% 0 0 0;position:relative;">

	<iframe

		src="https://player.vimeo.com/video/703884780?h=de95c5de7a"

		style="position:absolute;top:0;left:0;width:100%;height:100%;"

		frameborder="0"

		allow="autoplay; fullscreen; picture-in-picture"

		allowfullscreen

	></iframe>

</div>

<script src="https://player.vimeo.com/api/player.js"></script>

Now that we got our model, we can upload it to the cloud and look at it through our web browser! Just click on the little cloud icon on the top of the screen when viewing your model and it will be uploaded to your cloud storage with Polycam.

Once viewing it in the web browser, we can download the model by clicking “export.”

![image](/blog-images/placeholder.png)>

From there we want to select the GLTF format and start the download!

![image](/blog-images/placeholder.png)>

Ok so we got our 3D file for our environment, now lets do some 3D objects as well! The process is pretty similar, except for 3D objects we’ll switch to the “photo” mode instead of the LiDAR mode. The photo mode will take a bunch of different pictures and put them together to make a 3D model! In the video below you can see what the process looks like as I scan one of my prized possessions, a 1930's edition of Moby Dick illustrated by Rockwell Kent.

<div style="padding:216.22% 0 0 0;position:relative;">

	<iframe

		src="https://player.vimeo.com/video/704181596?h=92cada3864"

		style="position:absolute;top:0;left:0;width:100%;height:100%;"

		frameborder="0"

		allow="autoplay; fullscreen; picture-in-picture"

		allowfullscreen

	></iframe>

</div>

<script src="https://player.vimeo.com/api/player.js"></script>

Once we finish scanning the book, I like to select the higher end of the quality allowance, and I like to use the object masking to get all the fine details. These photo mode objects are a bit more work, so when you take one Polycam sends it off to a server for higher powered processing. Due to how intense the work is, you can only take 150 of these a month, but I don’t think that will be an issue for most people. Once they finish processing it, the model looks like this!

<div style="padding:216.22% 0 0 0;position:relative;">

	<iframe

		src="https://player.vimeo.com/video/704185926?h=2a929c3d73"

		style="position:absolute;top:0;left:0;width:100%;height:100%;"

		frameborder="0"

		allow="autoplay; fullscreen; picture-in-picture"

		allowfullscreen

	></iframe>

</div>

<script src="https://player.vimeo.com/api/player.js"></script>

The download process looks exactly the same as we did the desk, very easy! Also while you’re still in Polycam, you can edit, adjust, crop, etc. your model all inside their app or website, so that way when the model is exported it’s ready to be turned into an NFT!

Last but not least, we got a model of Pinnie too 😉

[Pinata Polycam Capture](https://poly.cam/capture/FAE73483-C416-49D6-B92C-33260BF924E1)

## Creating 1/1 NFTs on Solana

Alright alright alright, we got our models from Polycam, now lets turn them into 1/1 NFTs on Solana!

First thing you’ll want to do is get a [Pinata account](https://pinat.cloud). I would recommend getting the professional account so you can use a Dedicated Gateway, you’ll see why as we go further!

There’s a lot of great benefits of using IPFS for NFTs, such as [content addressability](https://docs.ipfs.io/concepts/content-addressing/) and [portability](https://medium.com/pinata/web3-data-portability-through-ipfs-saved-hicetnunc-724e3df2948d), but especially speed using a dedicated gateway. Since Solana is still adopting IPFS, not all the wallets and marketplaces have their own gateway solutions to resolve links like “ipfs://CID.” However with our own dedicated gateway we can use a standard “https://” link and deliver it with speed. You’ll see how we’ll do this in a bit!

Let’s log into Pinata and upload our file. Really simple, just click on the upload button in the top left, give it a name, and upload!

![image](/blog-images/placeholder.png)>

Then we just need to choose a subdomain and make sure its available. If it is, click next!

If we just clicked on this file to preview it, it’s gonna take us straight to download since the browser doesn’t know what to do. That’s ok! We’re gonna format the link for our NFT metadata. It will look something like this.

```

https://{your-subdomain}.mypinata.cloud/ipfs/{your-3d-file-cid}?filename={file-name-and-extension}

```

For our particular CID the link will look like this!

```

https://pinnieblog.mypinata.cloud/ipfs/QmWmcX9ikvNTJtCmuX9oWiUvTABQZ6tC6UARqa7ozBh2Ry?filename=Pinnie.glb

```

Ok our 3D file is on IPFS, the next step is to create a metadata file that will point to that 3D file. Open up your terminal and run:

```bash

mkdir 3d-nfts && cd 3d-nfts && touch pinnie.json

```

Then open up that pinnie.json file in your text editor of choice. Since we’re using Solana we will want to use [Metaplex Token Metadata Standard](https://docs.metaplex.com/token-metadata/Versions/v1.0.0/nft-standard#json-structure) which you will definitely want to save as a reference, but we’ll be simplifying ours just a little bit.

```json

{

	"name": "3D Pinnie",

	"symbol": "PIN",

	"description": "A 3D scan of Pinnie taken with Polycam",

	"seller_fee_basis_points": 0,

	"image": "null",

	"animation_url": "https://pinnieblog.mypinata.cloud/ipfs/QmWmcX9ikvNTJtCmuX9oWiUvTABQZ6tC6UARqa7ozBh2Ry?filename=Pinnie.glb",

	"external_url": "https://pinata.cloud",

	"collection": {

		"name": "Pinnie's 3D NFTs",

		"family": "3D NFTs"

	},

	"properties": {

		"files": [

			{

				"uri": "null",

				"type": "image/png"

			},

			{

				"uri": "https://pinnieblog.mypinata.cloud/ipfs/QmWmcX9ikvNTJtCmuX9oWiUvTABQZ6tC6UARqa7ozBh2Ry?filename=Pinnie.glb",

				"type": "vr/glb"

			}

		],

		"category": "3D",

		"creators": [

			{

				"address": "D8KLFUfnRwGsMt6n56FzkyRYmVUQXiRnJWFV7rZYCYdd",

				"share": 100

			}

		]

	}

}

```

Couple of things you’ll want to take note here. We could use an image URL if you wanted a backup, just make sure you upload a separate file to Pinata. For our example I’ve left it as null. The key thing to notice is the “animation_url” which I have set to our link we created earlier. Under properties and files, we left the image null again, and created another one that includes:

```json

{

	"uri": "https://pinnieblog.mypinata.cloud/ipfs/QmWmcX9ikvNTJtCmuX9oWiUvTABQZ6tC6UARqa7ozBh2Ry?filename=Pinnie.glb",

	"type": "vr/glb"

}

```

The uri is the link to our content, and the type defines the kind of file we want to use, which in this case is virtual reality (vr) and the file format (glb). Once you get familiar with the metadata standard it’s pretty straight forward. Now that we created this metadata file, save it and upload it to Pinata as well. Once it’s uploaded take note of the CID and save the link to it, should look something like this:

```

https://pinnieblog.mypinata.cloud/ipfs/QmYTQDE2ur5Lo4z76cNjwMAq6H3oNyDb1xuCQfdxMBnmon

```

We’re really close to minting this NFT! [Solana](https://solana.com/) is an up and coming blockchain that is capable of incredible speeds and low transactions fees. Before we go any further you’ll want to make sure you have a couple of things installed on your computer:

- [Solana CLI](https://docs.solana.com/cli/install-solana-cli-tools)

- [Metaboss](https://github.com/samuelvanderwaal/metaboss)

Be sure to follow the instructions for installing each very carefully! The Solana CLI is the tool that will let us interact with the Solana blockchain, and Metaboss is nicknamed “The Solana Metaplex NFT ‘Swiss Army Knife’” and rightly so. It is packed with features, including the minting NFTs!

Once you’ve installed both, let’s make sure the Solana CLI is setup properly by running the following command.

```bash

solana --version

```

If that returns the version then we are good to go! Next thing we’ll do is create a wallet, set our network to devnet, and get some fake sol. To create a new wallet run the command below.

```bash

solana-keygen new --outfile ~/.config/solana/devnet.json

```

This will create a file on your computer and is the code version of a new Solana wallet! Next we want to set our Solana config to use this wallet by default.

```bash

solana config set --keypair ~/.config/solana/devnet.json

```

Last but not least, we’ll set our Solana config to use the devnet environment so we can use fake money and have room to mess around.

```bash

solana config set --url https://api.devnet.solana.com

```

Now we can make sure all is good by running:

```bash

solana config get

```

This will return what wallet we’re using and what network we’re on! Last step is to get some test SOL, which is so easy! Just run the command below. Once it’s done it should return a balance!

```bash

solana airdrop 2

```

As far as Metaboss goes, it’s pretty simple to install after installing Solana. Once you have installed it, run the following command to make sure it’s ready to go.

```bash

metaboss --version

```

To mint our NFT, Metaboss makes it so easy! We just gotta run this command:

```bash

metaboss mint one --external-metadata-uri https://pinnieblog.mypinata.cloud/ipfs/QmYTQDE2ur5Lo4z76cNjwMAq6H3oNyDb1xuCQfdxMBnmon --keypair ~/.config/solana/devnet.json

```

Let’s break down what’s happening here. Metaboss is going to mint one token for us, and we set the “external-metadata-uri” to the url we created a little while ago that points to our uploaded metadata. Then we just set the keypair or wallet to authorize the transaction, and that’s it! If it worked you should get a result with the transaction ID and the mint account!

Ok but we want to see it right? All we gotta do is open our ~/.config/solana/devnet.json file, and copy the numbers in it (this is your private key, keep it safe and do not share it!)

Then using a wallet like Phantom, click on “Add / Connect wallet, select “import private key,” then paste in our keypair from earlier. Once it’s in your wallet you will want to click on the settings icon in the bottom right, scroll down to “change network” and set it to “Devnet.” Once you do that, go back to your NFTs page and you should see it!!

![wallet gif](/blog-images/medium/v2/resize:fit:716/1*V-onKvcCU830IvHxNWHbEg.gif)

## Conclusion

Polycam really introduces a whole new way of how content can be created using modern tech. You can imagine how this might be used for journalism, where instead of just looking at a photo of a story, you can view it as a 3D object with augmented reality. Someone who explores caves can share their experience as a 3D environment! Paired with Solana as a much faster and affordable layer one solution, and [Pinata](https://pinata.cloud) to deliver IPFS content quickly, the possibilities are endless!

ogImage: "/blog-images/cloudinary/v1683045399/misc/D59779D7-75D0-4EE8-8C39-6C3EDA5D5CFC_1_105_c_hbikqe.jpg"

import substack from "../../assets/substack.png";

import OutLinkButton from "@/components/common/OutLinkButton";

<OutLinkButton

	link="https://open.substack.com/pub/stevedsimkins/p/48-hours-disconnected?r=1iyrw0&utm_campaign=post&utm_medium=web"

	site="Substack"

	image={substack}

/>{" "}

![cover](/blog-images/cloudinary/v1683045399/misc/D59779D7-75D0-4EE8-8C39-6C3EDA5D5CFC_1_105_c_hbikqe.jpg)

---

title: "How to Run Your Own Public IPFS Gateway"

publishDate: "2023-10-10T00:00:00.000Z"

description: "Learn how to run a public IPFS gateway with a custom domain using Digital Ocean"

tags: ["ipfs", "tutorials"]

ogImage: "/blog-images/other/6525558858895876456798a8_20231010_How-To-Run-Your-Own-IPFS-Gateway.jpeg"

atUri: "at://did:plc:ia2zdnhjaokf5lazhxrmj6eu/site.standard.document/3mdzvus7pff2v"

---

IPFS has proven to be the decentralized storage protocol of choice by many blockchain developers, and one of the crucial tools used to access content on IPFS are [Gateways](https://www.pinata.cloud/blog/what-is-an-ipfs-gateway). IPFS Gateways are like bridges between the IPFS protocol and the HTTP protocol that we use everyday to browse websites. There are lots of different options to choose from when it comes to IPFS Gateways, and in this post we'll show you how to host and build your own!

<aside>

⚠️ Warning! This guide will show you how to make a public IPFS Gateway that can access any CID on IPFS, which means it has the potential to be abused. Please be cautious and look into ways you can secure your gateway.

</aside>

## Requirements

In order to follow this guide you’ll need a few things. First and foremost you’ll need a decent amount of experience using Linux servers and navigating around in the terminal, things like creating daemons or editing text files with vi or nano. You’ll also need a cloud server provider, and there’s plenty to choose from. In this guide we’ll use Digital Ocean and get a simple droplet. Also if you want to have a custom domain instead of using an IP address you can get something through a domain provider like Namecheap.

## Setting Up the Server

Before we rent a server for our IPFS node, you’ll want to create an SSH key to login with. This is the preferred secure way to SSH into your server versus a user name and password. You can check out [this guide](https://docs.digitalocean.com/products/droplets/how-to/add-ssh-keys/) on how to create them.

It will prompt you to put in a passphrase to access the key so choose something secure, and once created it will make a file located in `~/.ssh/rsa.pub`. We’ll use the contents in just a moment when we setup the server.

Since we’ll be using DigitalOcean you can head over there to create an account and buy a Droplet. You definitely don’t need anything crazy, I just got the following:

<img

  src="/blog-images/placeholder.png"

  alt="digital ocean droplet creation"

  width={1920}

  height={1080}

  aspectRatio={2 / 1}

/>

For the authorization select SSH Keys, then copy and paste the contents of `~/.ssh/rsa.pub` and paste it in as a new key.

<img

  src="/blog-images/placeholder.png"

  alt="digital ocean ssh key creation"

  width={1920}

  height={1080}

  aspectRatio={3 / 1}

/>

After the droplet has been created, you will actually want to turn it off, go to the Network settings, and enable IPV6. Once enabled turn it back on and try to SSH into it with the following command with the IPV4 address of the server:

`ssh root@ipv4address`

It should prompt you to enter in the passphrase for you SSH key, and after entering it you should be in!

While we are signed in, we are currently logged in as root, which is not the most secure practice. This next step is optional, but highly recommend. First we’ll create a new user with the command `adduser steve`, and of course you can use whatever username you want to. It will prompt you to make a new password and for some other information you can leave blank. Next we need to give the user the permissions necessary to run the IPFS node with `sudo usermod -aG sudo steve` (and of course from this point on replace `steve` with the username you chose).

Next we’ll need to run the following commands to create an `.ssh` directory for our new user and give proper permissions so we can edit it.

```

mkdir /home/steve/.ssh

touch /home/steve/.ssh/authorized_keys

sudo chown -R steve:steve /home/steve/.ssh

sudo chmod 700 /home/steve/.ssh

sudo chmod 600 /home/steve/.ssh/authorized_keys

```

With those commands completed you can now login as your user with `su steve` and then edit the SSH keys files to paste in your own that we used earlier with either `vim` or `nano` then `/.ssh/authorized_keys`. After pasting in your key you can run `exit` to log out of the user, then again to leave the SSH session. Now you should be able to SSH in with the new user `ssh steve@ipv4address`.

## Install IPFS

Once you’re in your server you can run `sudo apt update` just to make sure all your packages are up to date. Then you will want to visit the [release page for IPFS Kubo](https://github.com/ipfs/kubo/releases), the Go implementation of an IPFS node used pretty much everywhere. On that page you can choose the latest stable release, then locate the correct distribution for your OS. In my particular case it ended up being `kubo_v0.22.0_linux-amd64.tar.gz`. Copy the link to that file, then back in your terminal for the droplet run

```bash

wget "https://github.com/ipfs/kubo/releases/download/v0.22.0/kubo_v0.22.0_linux-amd64.tar.gz"

```

This will download the Kubo zip file to your home directory. You can unzip it with `tar -xf kubo_v0.22.0_linux-amd64.tar.gz` and then you should see a folder just called “kubo.” `cd` into that folder then run `sudo ./install.sh` and that will move the binary from the folder into your `/usr/local/bin` folder. To make sure it worked, try running `ipfs --version` , it should show the version number if successful.

With IPFS installed on our server the next thing we need to do is create a `systemd` service aka a daemon. This will make sure that IPFS is always running and will start up automatically if we ever reboot the server. To do this you will want to either use `sudo` with either `vim` or `nano` and create a file called `ipfs.service` under `/etc/systemd/user/` , so altogether would look something like `sudo vim /etc/systemd/user/ipfs.service`. Once the editor is open you can paste in the following:

```makefile

[Unit]

Description=InterPlanetary File System (IPFS) daemon

Documentation=https://docs.ipfs.io/

After=network.target

[Service]

Type=notify

ExecStart=/usr/local/bin/ipfs daemon --enable-gc=true --migrate=true

ExecStop=/usr/local/bin/ipfs shutdown

Restart=on-failure

KillSignal=SIGINT

[Install]

WantedBy=default.target

```

Save the file and exit the editor, then run the following commands to start up the daemon and make it persist between logins:

```bash

ipfs init --profile=server --empty-repo

systemctl --user enable ipfs

systemctl --user start ipfs

systemctl --user status ipfs

loginctl enable-linger $USER

```

All of this together should have the IPFS node running, and you can test it out by running the following command

```bash

curl -L http://localhost:8080/ipfs/QmPyCYfL5oF79cfXjbt5cyr5hAZcyNrPNV9ytvUPdk8KT9

```

<aside>

💡 Keep in mind that with a fresh node like this with zero configuration might be slow and take a while to pull content and be connected with other major IPFS networks

</aside>

## Setting Up Custom Domain

Now that your IPFS node is setup and we can use the gateway, these next steps will help you assign a domain to the gateway and make it public. First you will need to acquire a domain name which you can get from multiple providers like Namecheap. For this tutorial we’ll use the example `[domain.com](http://domain.com)` (very original). After purchasing the domain you will want to go into the advance DNS settings through your domain provider, and there we’ll add some records so we can use `[ipfs.domain.com](http://ipfs.domain.com)` as our gateway domain. You can get the IPV4 and IPV6 addresses from your Digital Ocean console.

| Type | Host    | Value        | TTL       |

| ---- | ------- | ------------ | --------- |

| A    | ipfs    | IPV4 Address | Automatic |

| A    | \*.ipfs | IPV4 Address | Automatic |

| AAAA | ipfs    | IPV6 Address | Automatic |

| AAAA | \*.ipfs | IPV6 Address | Automatic |

You can use a DNS checker for `[ipfs.domain.com](http://ipfs.domain.com)` to make sure everything is propagating but it can take some time depending on your provider.

After assigning the domain to the IP addresses of our droplet, we need to go in and edit our IPFS config.

<aside>

⚠️ WARNING: The following command will open your gateway and IPFS node for anyone to use, do so with caution and do further research before releasing it to the while.

</aside>

You can paste `ipfs config Addresses.Gateway /ip4/0.0.0.0/tcp/8080` into the terminal and it will change the IP from your local network to the outside network, allowing external traffic to use it. We stress caution here because IPFS gateways are known to be abused which we’ll get into later. After changing that setting on the IPFS config we need to make one additional edit with `vim ~/.ipfs.config`. Once the file is open navigate under the following and add your specific domain and configs for `UseSubdomains` and `Paths`.

```json

"Gateway": {

    "PublicGateways": {

        "domain.com": {

                "UseSubdomains": true,

                "Paths": [

                        "/ipfs"

								]

				}

		}

}

```

After we have written and saved those changes we’ll need to restart the IPFS daemon with `systemctl --user restart ipfs`. Then we can test if our custom domain works in our own browser with a link like this: `http://ipfs.domain.com:8080/ipfs/QmVLwvmGehsrNEvhcCnnsw5RQNseohgEkFNN1848zNzdng`. Now keep in mind that we did not use `https` as that will come later, and you’ll also notice we had to include that nasty port number which is not very smooth. So let’s fix that!

We’ll use nginx to help with some re-routing on our server so we can just leave out the port number in our urls. Run `sudo apt install nginx` to get started. Once installed we will want to rename the default configuration as a backup with `sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default-back` then create a new one by running `sudo vim /etc/nginx/sites-available/default`. In that file you can paste the following:

```

server {

	listen 80;

	server_name ipfs.domain.com;

	location / {

    proxy_pass http://127.0.0.1:8080;

    proxy_set_header Host $host;

    proxy_set_header X-Real-IP $remote_addr;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_set_header X-Forwarded-Proto $scheme;

	}

}

```

Write and save that file, then run `systemctl restart nginx`. If successful we can now use a url like this: `[http://ipfs.domain.com/ipfs/QmVLwvmGehsrNEvhcCnnsw5RQNseohgEkFNN1848zNzdng](http://ipfs.domain.com/ipfs/QmVLwvmGehsrNEvhcCnnsw5RQNseohgEkFNN1848zNzdng)`.

## Setting up SSL (HTTPS)

As you saw in the last url we used, we’re still using http which is a no go in today’s standards. In order to fix that we need to get an SSL certificate for our domain. Thankfully its pretty straight forward with a package called certbot. You can install it with `sudo nnap install certbot --classic` then run the command `sudo certbot --nginx -d [ipfs.domain.com](http://ipfs.domain.com)`. It should walk you though some questions you can answer, then it should issue a certificate for your domain. Last step is to go back to your domain provider and add this DNS record:

| Type | Host | Value                   |

| ---- | ---- | ----------------------- |

| CAA  | ipfs | http://letsencrypt.org/ |

Now you can test it out with `[https://ipfs.domain.com/ipfs/QmVLwvmGehsrNEvhcCnnsw5RQNseohgEkFNN1848zNzdng](https://ipfs.domain.com/ipfs/QmVLwvmGehsrNEvhcCnnsw5RQNseohgEkFNN1848zNzdng)`. Congrats!! You just setup your own public IPFS gateway. But, something isn’t quite right: its super slow isn’t it? Let’s talk about that.

## Further Steps

You have your public gateway setup and it sorta works, but its also super slow. There are some things you can do to help relieve this. One of those things is setting up a cache layer or CDN to help make fetching files a second time much faster. You can also look into peering your gateway with IPFS pinning services to tap into their network and get faster speeds, or configure your IPFS node to work with the Distributed Hash Table (DHT) to assist with finding files. Even with all those things, it can be tough to maintain good speeds.

Another thing you have to consider when hosting an IPFS gateway yourself is abuse. The unfortunately piece of a decentralized network is that there is plenty of people out there who want to abuse public gateways by hammering them with requests for files or use your gateway for phishing content. When that happens you have to keep up with a list of CIDs to block from your gateway or risk it have it taken down by domain registrars. You can check out a list of CIDs to block by IPFS [here](https://github.com/ipfs/infra/blob/master/ipfs/gateway/denylist.conf), however it is no longer being maintained making it even more difficult to keep up yourself.

## Another Option: Pinata Dedicated IPFS Gateways

With any open source software endeavor, you have to ask yourself an important question: “Is this worth my time?” There are plenty of things you can do yourself when it comes to networking, like setting up your own custom email server, and doing those things will help you learn a lot. However if you’re trying to heavily use and depend on IPFS as a service for your decentralized applications, then it becomes a different question. Even if you got the speeds of your gateway up to a decent level, would it be worth the expense and upkeep to keep running it yourself and hope it does not get abused?

This is why IPFS pinning services like Pinata exist: to make IPFS easy and simple for developers. With Pinata you can not only upload files easily, but with Pinata Dedicated Gateways you get unmatched speeds thanks to a built in 200 location edge cache CDN. You get the benefits of being hooked up to a large network of nodes instead of just your solitary node. Plus, you get Gateway Access Controls so you can access content on IPFS with protection from spam and abuse. Setting up this public gateway was fun, but in a production environment, I’m thankful to have Pinata :) Happy Pinning!

---

title: "How to Encrypt and Decrypt Files on IPFS Using Lit Protocol"

publishDate: "04 Nov 2023"

description: "Experience the power of decentralized storage, encryption, and token gating with this tutorial"

tags: ["ipfs", "blockchain", "tutorials"]

ogImage: "/blog-images/other/6545bfa112815d6340466066_20231103_How-to-Encrypt-and-Decrypt-Files-on-IPFS-Using-Lit-Protocol-and-Pinata.jpeg"

atUri: "at://did:plc:ia2zdnhjaokf5lazhxrmj6eu/site.standard.document/3mdzvus3hnn2v"

---

The most popular method used for sharing files off-chain in Web3 is IPFS, and there are some [good reasons for that](https://www.pinata.cloud/blog/why-ipfs-is-the-storage-solution-for-web3-developers). However it does not come without its own share of problems, and one of those is the ability to share private files. IPFS is a public network so anyone with a CID can access and download that content, and this hinders projects that may want to token gate content or create subscriptions to content. With that said, encryption has proven to be one solution to this problem. Remarkably, the solution of [asymmetric encryption](https://www.okta.com/identity-101/asymmetric-encryption) is used in blockchain all the time and can be reused for the purpose of token gating. [Lit Protocol](https://litprotocol.com/) is a decentralized middleware client that enables access controls to help extend asymmetric encryption to token gating based on crypto ownership, such as owning an NFT, ERC-20 token balance, or simply designating a recipient address. In this post, we’ll show you how you can combine the best of both worlds and create an app that will encrypt content, upload it to IPFS, and then given an encrypted CID, decrypt it.

## Why IPFS?

IPFS is public and openly available, but it’s also not permanent by default. This means that unlike blockchain storage protocols that make every piece of content permanent as soon as it’s uploaded, you can potentially remove content from IPFS. You’ll see why this is important as we explore encryption more deeply.

The biggest problem with encryption is that its always evolving. One encryption method we use today will be outdated one day in the future. An example is [MD5 which was cracked almost perhaps 10 years ago](https://www.okta.com/identity-101/md5/#:~:text=The%20MD5%20hash%20function's%20security,be%20used%20for%20malicious%20purposes.) but people still use it without knowing the risk. When we consider putting files on a decentralized network that are specifically designed to not be taken down, things get messy. Arweave is a common consideration for encryption and decentralized storage, however, their model puts content on the network permanently. There is the possibility those encrypted files could be cracked in another 10 years.

IPFS is different in that content is not “permanent,” but rather it is “persistent.” It's a subtle difference but has massive ramifications. With IPFS, the content will only stay on the network if at least one IPFS node keeps the content “[pinned](https://www.pinata.cloud/blog/what-is-pinning),” which tells other nodes that might have a cached copy of the content to keep it available. As soon as there are no nodes pinning a particular CID, then the nodes holding that cache will dump it when they use garbage collection. It's a unique mechanism that helps prevent digital waste and ensures only the content we value will persist. The concepts of permanence and persistence are truly philosophical differences of approaching the same problem.

When you combine IPFS with encryption, you get a unique situation where content that is no longer used can be unpinned. Granted it does not guarantee the content will be completely wiped from the network, but it does give users a level of control over their content they would normally not have with other decentralized storage networks. It is also unlikely that bad actors would go through the trouble and costs to keep encrypted content pinned for the purpose of decrypting it years down the road. The [cost of storage](https://www.pinata.cloud/blog/is-ipfs-free) helps balance situations like these. With that said let's actually build this thing!

<aside>

ℹ️ <b>Disclosure:</b> There will always be limitations to encryption and eventually current methods may be cracked. Please be aware of the risk involved and be sure to read <a href="https://developer.litprotocol.com/v3/sdk/authentication/security">Lit Protocol’s best practices for security.</a>

</aside>

## Building the App

What’s great about this project is that we already have most of what we need to build it! Pinata created a [Next.js template](https://www.pinata.cloud/blog/announcing-pinata-ipfs-developer-starter-templates) a while back which we can use again and just add in our Lit Protocol SDK.

To follow this tutorial you will want to make sure you have the following:

- Node.js 18 or higher

- [A Free Pinata Account](https://app.pinata.cloud/register)

- A text editor like VSCode

Before going any further make sure you get a [free Pinata account](https://app.pinata.cloud/register) so you can make an [API key](https://docs.pinata.cloud/docs/api-keys) and get a [free Dedicated Gateway](https://docs.pinata.cloud/docs/dedicated-ipfs-gateways) for this project! Once you make an API key, save the `JWT` that we’ll use in a little bit, as well as the gateway domain for your Dedicated Gateways.

Thats it! To kick it off, simply run the command to use the Pinata Next.js Template

```bash

npx create-pinata-app

```

You will be prompted to choose your flavors of the app, such as Typescript vs Javascript, or Tailwindcss vs Vanilla CSS. For this template, I chose Typescript and Tailwindcss but feel free to choose your own. After giving it a name and making your selections go ahead and open the project in VSCode.

Back in the terminal the next thing we’re going to do is install the [Lit Protocol SDK](https://developer.litprotocol.com/v3/sdk/installation). We’ll be using the V3 of the SDK which is in beta, and you can install based on their docs [here](https://developer.litprotocol.com/v3/sdk/installation) or use this command:

```bash

npm install @lit-protocol/lit-node-client@cayenne

```

The last thing you need to do to set up the project is open the `.env.sample` file which should look like this:

```

PINATA_JWT=

NEXT_PUBLIC_GATEWAY_URL=

NEXT_PUBLIC_GATEWAY_TOKEN=

```

Paste in the `PINATA_JWT` that you made earlier when you set up your Pinata account and also paste in the `NEXT_PUBLIC_GATEWAY_URL` with the format `[https://mygateway.mypinata.cloud](https://mygateway.mypinata.cloud)` with of course your own domain URL. Then change the name of the file from `.env.sample` to `.env.local`, a very important step for our app to work!

Now lets go ahead and spin up the dev server with `npm run dev` and start building. All of our work will be done in just one file, `pages/index.tsx`; easy! We’ll start by importing the Lit Protocol SDK at the top of the file.

```jsx

import { useState, useRef } from "react";

import Head from "next/head";

import Image from "next/image";

import Files from "@/components/Files";

// import lit protocol sdk

import * as LitJsSdk from "@lit-protocol/lit-node-client";

```

Inside the `Home` component, we’ll add another state variable that we’ll come back to later.

```jsx

const [file, setFile] = useState("");

const [cid, setCid] = useState("");

const [uploading, setUploading] = useState(false);

// add a new state for the cid to decrypt

const [decryptionCid, setDecryptionCid] = useState("");

```

The great thing about this template is that it's already got uploads to IPFS with Pinata baked in with an `/api/files` route on the backend, so all we have to do is encrypt the file before we upload it. We’ll do this in the `uploadFile` function inside of `Home`, and it should look like this to start.

```jsx

const uploadFile = async (fileToUpload) => {

  try {

    setUploading(true);

    const formData = new FormData();

    formData.append("file", fileToUpload, fileToUpload.name);

    const res = await fetch("/api/files", {

      method: "POST",

      body: formData,

    });

    const ipfsHash = await res.text();

    setCid(ipfsHash);

    setUploading(false);

  } catch (e) {

    console.log(e);

    setUploading(false);

    alert("Trouble uploading file");

  }

};

```

At the top of our `try` statement but underneath our `setUploading` state, we’ll initialize the `LitNodeClient` using the `ceyenne` network, connect our app to that network, then get the `authSig`. Lit Protocol is a decentralized network middleware that helps us do some cool token gating and lets us do encryption. In these few statements, we create a client that connects to that middleware network and then gets a signature from the user. This signature will be used for signing the encrypted files.

```jsx

const uploadFile = async (fileToUpload) => {

    try {

      setUploading(true);

      const litNodeClient = new LitJsSdk.LitNodeClient({

        litNetwork: 'cayenne',

      });

      // then get the authSig

      await litNodeClient.connect();

      const authSig = await LitJsSdk.checkAndSignAuthMessage({

        chain: 'ethereum'

      });

// rest of the code

```

Next up we’ll set up our access controls for this encrypted content. We’ll dive deeper into this later in the tutorial, but essentially this is the most important part of our app as it determines who can decrypt the content we encrypt. It could be something like token gating by NFT collection or a direct address. For now, we’ll keep it simple and allow anyone with a balance of 0 ETH or higher to decrypt it (that should be everyone with a wallet).

```jsx

const uploadFile = async (fileToUpload) => {

    try {

      setUploading(true);

			// Create our litNodeClient

      const litNodeClient = new LitJsSdk.LitNodeClient({

        litNetwork: 'cayenne',

      });

      // Then get the authSig

      await litNodeClient.connect();

      const authSig = await LitJsSdk.checkAndSignAuthMessage({

        chain: 'ethereum'

      });

			// Define our access controls, this is set to be anyone

			const accs = [

        {

          contractAddress: '',

          standardContractType: '',

          chain: 'ethereum',

          method: 'eth_getBalance',

          parameters: [':userAddress', 'latest'],

          returnValueTest: {

            comparator: '>=',

            value: '0',

          },

        },

      ];

// rest of the code

```

The fun part; encrypting! There are several methods of encryption that Lit Protocol offers through their SDK, such as just a string, or a file, and in our case, we’ll use the `encryptFileAndZipWithMetadata` method. This is handy because in order to decrypt a file, our recipient will need the `accs` parameters we set and a secure hash. We want a simple way for all of this to be packaged and included in our IPFS CID, and that's exactly what this method will do. All we have to do is pass in our access control conditions array, our `authSig`, the chain, our `fileToUpload` that we passed into the function argument, the `litNodeClient`, and finally a simple `readme` that will explain to whoever happens to download it from IPFS what they need to do with it.

```jsx

const uploadFile = async (fileToUpload) => {

    try {

      setUploading(true);

      // Create our litNodeClient

      const litNodeClient = new LitJsSdk.LitNodeClient({

        litNetwork: 'cayenne',

      });

      // Then get the authSig

      await litNodeClient.connect();

      const authSig = await LitJsSdk.checkAndSignAuthMessage({

        chain: 'ethereum'

      });

      // Define our access controls, this is set to be anyone

      const accs = [

        {

          contractAddress: '',

          standardContractType: '',

          chain: 'ethereum',

          method: 'eth_getBalance',

          parameters: [':userAddress', 'latest'],

          returnValueTest: {

            comparator: '>=',

            value: '0',

          },

        },

      ];

      // Then we use our access controls and authSig to encrypt the file and zip it up with the metadata

      const encryptedZip = await LitJsSdk.encryptFileAndZipWithMetadata({

        accessControlConditions: accs,

        authSig,

        chain: 'ethereum',

        file: fileToUpload,

        litNodeClient: litNodeClient,

        readme: "Use IPFS CID of this file to decrypt it"

      });

// rest of the code

```

One last little touch we need to do is adapt this encrypted zip file so it will be accepted by our `/api/files` endpoint, and we’ll do so with just two lines of code.

```jsx

// Then we turn it into a file that will be accepted by the API endpoint

const encryptedBlob = new Blob([encryptedZip], { type: "text/plain" });

const encryptedFile = new File([encryptedBlob], fileToUpload.name);

```

All together we should have an upload function that looks like this:

```jsx

const uploadFile = async (fileToUpload) => {

  try {

    setUploading(true);

    // Create our litNodeClient

    const litNodeClient = new LitJsSdk.LitNodeClient({

      litNetwork: "cayenne",

    });

    // Then get the authSig

    await litNodeClient.connect();

    const authSig = await LitJsSdk.checkAndSignAuthMessage({

      chain: "ethereum",

    });

    // Define our access controls, this is set to be anyone

    const accs = [

      {

        contractAddress: "",

        standardContractType: "",

        chain: "ethereum",

        method: "eth_getBalance",

        parameters: [":userAddress", "latest"],

        returnValueTest: {

          comparator: ">=",

          value: "0",

        },

      },

    ];

    // Then we use our access controls and authSig to encrypt the file and zip it up with the metadata

    const encryptedZip = await LitJsSdk.encryptFileAndZipWithMetadata({

      accessControlConditions: accs,

      authSig,

      chain: "ethereum",

      file: fileToUpload,

      litNodeClient: litNodeClient,

      readme: "Use IPFS CID of this file to decrypt it",

    });

    // Then we turn it into a file that will be accepted by the Pinata API

    const encryptedBlob = new Blob([encryptedZip], { type: "text/plain" });

    const encryptedFile = new File([encryptedBlob], fileToUpload.name);

    // Finally we upload the file by passing it to our /api/files endpoint

    // Keep in mind this works for smaller files and you may need to do a presigned JWT and upload from the client if you're dealing with larger files

    // Read more about that here: https://www.pinata.cloud/blog/how-to-upload-to-ipfs-from-the-frontend-with-signed-jwts

    const formData = new FormData();

    formData.append("file", encryptedFile, encryptedFile.name);

    const res = await fetch("/api/files", {

      method: "POST",

      body: formData,

    });

    const ipfsHash = await res.text();

    setCid(ipfsHash);

    setUploading(false);

  } catch (e) {

    console.log(e);

    setUploading(false);

    alert("Trouble uploading file");

  }

};

```

One thing to note is that there is a file size restriction when using the Next API routes, so if you have larger files you may want to move uploading to the client side and utilize pre-signed JWTs which we talk about in [this post.](https://www.pinata.cloud/blog/how-to-upload-to-ipfs-from-the-frontend-with-signed-jwts)

We now have encrypted uploads! If you upload a file through the app you should get a CID, and if you download the file it will result in a zip folder with all the stuff we just made. This is cool, but how do we decrypt it? How do we let other people decrypt it? Its actually pretty easy! We’re gonna make a new function right below our upload function called `decryptFile()`, which will take a `fileToDecrypt` CID. First thing we’ll do is fetch that file using our Dedicated Gateway and turn it into a blob.

```jsx

const decryptFile = async (fileToDecrypt) => {

    try {

      // First we fetch the file from IPFS using the CID and our Gateway URL, then turn it into a blob

      const fileRes = await fetch(`${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${fileToDecrypt}?filename=encrypted.zip`)

      const file = await fileRes.blob()

    } catch (error) {

      alert("Trouble decrypting file")

      console.log(error)

    }

```

Now we can re-create the `litNodeClient` and get the auth signature. The beauty of this SDK is that once some signs they will not need to sign again unless they disconnect from the app, making the interactions fairly smooth.

```jsx

const decryptFile = async (fileToDecrypt) => {

    try {

      // First we fetch the file from IPFS using the CID and our Gateway URL, then turn it into a blob

      const fileRes = await fetch(`${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${fileToDecrypt}?filename=encrypted.zip`)

      const file = await fileRes.blob()

      // We recreated the litNodeClient and the authSig

      const litNodeClient = new LitJsSdk.LitNodeClient({

        litNetwork: 'cayenne',

      });

      await litNodeClient.connect();

      const authSig = await LitJsSdk.checkAndSignAuthMessage({

        chain: 'ethereum'

      });

    } catch (error) {

      alert("Trouble decrypting file")

      console.log(error)

    }

```

Just like we used `encryptFileAndZipWithMetadata` method, we have a matching method for decryption called `decryptZipFileWithMetadata` which we’ll use very similarly to the encryption. The zip folder has everything we need so all we have to pass in is the `file` blob, our `litNodeClient`, and the recipient `authSig`. Piece of cake! From this, we’ll extract the `decryptedFile` and `metadata` from our request.

```jsx

const decryptFile = async (fileToDecrypt) => {

    try {

      // First we fetch the file from IPFS using the CID and our Gateway URL, then turn it into a blob

      const fileRes = await fetch(`${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${fileToDecrypt}?filename=encrypted.zip`)

      const file = await fileRes.blob()

      // We recreated the litNodeClient and the authSig

      const litNodeClient = new LitJsSdk.LitNodeClient({

        litNetwork: 'cayenne',

      });

      await litNodeClient.connect();

      const authSig = await LitJsSdk.checkAndSignAuthMessage({

        chain: 'ethereum'

      });

      // Then we simpyl extract the file and metadata from the zip

      // We could do more with this, like try to display it in the app UI if we wanted to

      const { decryptedFile, metadata } = await LitJsSdk.decryptZipFileWithMetadata({

        file: file,

        litNodeClient: litNodeClient,

        authSig: authSig,

      })

    } catch (error) {

      alert("Trouble decrypting file")

      console.log(error)

    }

```

All that’s left to do is deliver the file to the user! There are several ways you could go about it, for example, if you want to display the content to the user such as an image or video you could do so with a bit of formatting. In this example, we’ll just trigger a download to the recipient’s computer. All together we should have the following.

```jsx

const decryptFile = async (fileToDecrypt) => {

    try {

      // First we fetch the file from IPFS using the CID and our Gateway URL, then turn it into a blob

      const fileRes = await fetch(`${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${fileToDecrypt}?filename=encrypted.zip`)

      const file = await fileRes.blob()

      // We recreated the litNodeClient and the authSig

      const litNodeClient = new LitJsSdk.LitNodeClient({

        litNetwork: 'cayenne',

      });

      await litNodeClient.connect();

      const authSig = await LitJsSdk.checkAndSignAuthMessage({

        chain: 'ethereum'

      });

      // Then we simpyl extract the file and metadata from the zip

      // We could do more with this, like try to display it in the app UI if we wanted to

      const { decryptedFile, metadata } = await LitJsSdk.decryptZipFileWithMetadata({

        file: file,

        litNodeClient: litNodeClient,

        authSig: authSig,

      })

      // After we have our dcypted file we can download it

      const blob = new Blob([decryptedFile], { type: 'application/octet-stream' });

      const downloadLink = document.createElement('a');

      downloadLink.href = URL.createObjectURL(blob);

      downloadLink.download = metadata.name;  // Use the metadata to get the file name and type

    } catch (error) {

      alert("Trouble decrypting file")

      console.log(error)

    }

```

One small little change we’ll make to the JSX is a text input where someone can paste in a CID and a “Decrypt” button someone can press after pasting in their CID.

```jsx

<input

  type="text"

  onChange={(e) => setDecryptionCid(e.target.value)}

  className="px-4 py-2 border-2 border-secondary rounded-3xl text-lg"

  placeholder="Enter CID to decrypt"

/>

<button

  onClick={() => decryptFile(decryptionCid)}

  className="mr-10 w-[150px] bg-light text-secondary border-2 border-secondary rounded-3xl py-2 px-4 hover:bg-secondary hover:text-light transition-all duration-300 ease-in-out"

>Decrypt</button>

```

With all of this together, you should have an app with the following flow!

<video muted autoplay style="width: 100%; height: auto; position: relative;">

    <source src="https://mktg.mypinata.cloud/ipfs/QmcoP5gj1gJyZNCDUHE2e1g1cbwvEHo6E56xMhPV8KaHaf/file-encryption.mp4" type="video/mp4">

</video>

You can also download and use this exact template [here](https://github.com/PinataCloud/pinata-lit-protocol-template)!

## Going Further

This little template is really designed just to get you started and help you understand how Pinata and Lit Protocol work, and there is so much you can do with it. I would highly recommend checking out Lit Protocol’s documentation, in particular their section on all the [different access controls](https://developer.litprotocol.com/v3/sdk/access-control/evm/basic-examples) you can do. For example, if you only wanted holders of a particular ERC721 NFT you could use the following.

```jsx

const accessControlConditions = [

  {

    contractAddress: "0xA80617371A5f511Bf4c1dDf822E6040acaa63e71",

    standardContractType: "ERC721",

    chain,

    method: "balanceOf",

    parameters: [":userAddress"],

    returnValueTest: {

      comparator: ">",

      value: "0",

    },

  },

];

```

Or you could do DAO membership (MolochDAOv2.1, also supports DAOHaus)\***\*[](https://developer.litprotocol.com/v3/sdk/access-control/evm/basic-examples#must-be-a-member-of-a-dao-molochdaov21-also-supports-daohaus)\*\***

```jsx

const accessControlConditions = [

  {

    contractAddress: "0x50D8EB685a9F262B13F28958aBc9670F06F819d9",

    standardContractType: "MolochDAOv2.1",

    chain,

    method: "members",

    parameters: [":userAddress"],

    returnValueTest: {

      comparator: "=",

      value: "true",

    },

  },

];

```

You can even do a simple check if the recipient is a particular wallet address.

```jsx

const accessControlConditions = [

  {

    contractAddress: "",

    standardContractType: "",

    chain,

    method: "",

    parameters: [":userAddress"],

    returnValueTest: {

      comparator: "=",

      value: "0x50e2dac5e78B5905CB09495547452cEE64426db2",

    },

  },

];

```

With these building blocks, you could easily build a standalone token gating app, or build a custom solution for your holders. The possibilities are endless!

Happy Pinning!

  src="/blog-images/files-stevedylan-dev/Qmeb4797YyF2FhwTdoPuuQi4LXgdXaGoGcTRqU85JAEv9M.mp4"

  src="/blog-images/files-stevedylan-dev/QmWHHCV9YVecdDVcbKXLdfcudW5XBiTt4EfLagP9cowJjC.mp4"

  src="/blog-images/files-stevedylan-dev/Qmd3SNkNTms4JQCtv4wmFUKS679A2zsrG7e58szLWS3pmM.mp4"

  src="/blog-images/files-stevedylan-dev/QmTRit4eCktJ87NjxdErZ3csXimNq43G8SueQP77mvtvkE.mp4"

  src="/blog-images/files-stevedylan-dev/QmVSc4amHjygkTcd4Rrx62DaYWMXSYpJD8fBhSinGyChyp.mp4"

  src="/blog-images/files-stevedylan-dev/QmdQSzMuPiDEcFhWLMLsabLLsHD4qG74Qh1WtvQ8SnSa1B.mp4"

  src="/blog-images/files-stevedylan-dev/QmZou8CVipfiFxYkYYm3H6BAzKk1ks6mkosTULxk7GgFUb.mp4"

  src="/blog-images/files-stevedylan-dev/QmUW8QWY1ug3uHzLWtc6F9pFHAurgbjG3qmnc9o6whZDoZ.mp4"

  src="/blog-images/files-stevedylan-dev/QmdrPRHBkMNCvcbCEaQp9PeUKQsuCHKHgEecBMG6tRnLyB.mp4"

  src="/blog-images/files-stevedylan-dev/Qmc1Lfd6KmrWSU1kTtrnT59nyPx1QpTvhEzPY9taagWCuv.mp4"

---

title: "Arc: The Internet Computer"

publishDate: "08 Mar 2023"

description: "How the Arc web browser is paving the way for the future of consumer computers"

tags: ["open web", "philosophy"]

ogImage: "/blog-images/cloudinary/v1678385122/arc-browser-blog-post/opluqtxq1ceoigepyjwf.png"

atUri: "at://did:plc:ia2zdnhjaokf5lazhxrmj6eu/site.standard.document/3mdzvuskpwn2v"

---

![Arc Logo](/blog-images/cloudinary/v1678385122/arc-browser-blog-post/opluqtxq1ceoigepyjwf.png)

height={1080}

aspectRatio={16 / 9}

/>

## 20 Years of the Same Thing

The internet has grown significantly in the last twenty years. What was once just static web pages with facts is now a bustling cyber metropolis where we write essays, share photos of food, and buy airline tickets. It's something we use every day and take for granted. What's interesting is that in the last twenty years of the internet's evolution, the way we experience it has stayed mostly the same. Web browsers have certainly changed in appearance and performance, but the tab model and disconnect from the rest of the computer have stayed. The Browser Company making the Arc Browser has plans to change that and has the ambitious goal of creating an "Internet Computer." Before we get ahead of ourselves, let's have a brief overview of Arc and its features.

## Tabs, Folders, and Spaces

<img

  src="/blog-images/placeholder.png"

  alt="Tabs folders and spaces in arc"

  width={1920}

  height={1080}

  aspectRatio={16 / 9}

/>

One of the fundamental differences between Arc and other browsers is how it handles tabs. Instead of a row of tabs at the top of a window, Arc keeps them all in a sidebar. I genuinely believe there is a strong UX decision being made here: organization is simply easier to accomplish with a side menu than it is with a top menu. Beyond that, Arc uses a “Pinned Tabs” and “Today’s Tabs” approach to organizing your website. You may often feel hesitant to close a website because you might need it later. If you do, you can move it to the pinned tabs. When you feel like you don’t need it, then you can remove it from pinned tabs. Anything that stays in today’s tabs can be automatically cleared after a certain amount of time, or you can click a button to wipe them all out. This is powerful because it makes the decision of what is important and what isn’t easy for people to make.

<img

  src="/blog-images/placeholder.png"

  alt="View of spaces in Arc"

  width={1920}

  height={1080}

  aspectRatio={16 / 9}

/>

Of course, you may have lots of websites that you need to keep pinned, and for that, Arc has Folders and Spaces. Folders work like any other bookmark folder, where you can store as many as you want with sub-folders as well. This can be useful if you have a lot of sites that need to be referenced for a project. Folders work to a degree, but even still, you can have too many folders. That’s where spaces come in. Spaces are designed to be different workspaces for whatever you do on the internet. You could have a shopping space, an entertainment space, a developer space, anything really. You can customize the appearance, name, icon, and of course, the pinned tabs and folders for each one. Arc makes it simple to swipe between spaces and re-organize them to fit your needs.

<img

  src="/blog-images/placeholder.png"

  alt="View of favorites in Arc"

  width={912}

  height={528}

/>

Favorites are special in that they are in nice little squares are the top of the sidebar no matter what space you are in, so for instance if you use Spotify a lot then that would be an ideal favorite app or website. They also have a preview feature when you hover over them for selective sites, e.g. Google Calendar will show you a brief schedule window.

These simple changes can drastically clear up and organize your internet browser if you typically have thirty Chrome tabs open, and it's seriously good. There are even more reasons why this feature set is so important, but we’ll get back to that later.

## Split View

<img

  src="/blog-images/placeholder.png"

  alt="Split view in Arc"

  height={1080}

  width={1920}

  aspectRatio={16 / 9}

/>

Another killer feature on Arc is split views. With a few clicks, you can easily have side-by-side panels of two different websites. You can even pin these dual tabs if you have to reference them quickly. You can actually do more than just two; depending on how big your screen is, you can go crazy! Personally, I use this all the time when reading an article while taking notes or moving information from one app to another. The Arc team recently released vertical splits as well, perhaps enough persuasion to get a vertical monitor.

Managing split views is effortless, with the ability to expand tabs to full screen, delete or replace a pane, resize panes, and rearrange them. It's such a simple feature but executed so well.

## Peek View

![Peek view in Arc](/blog-images/cloudinary/v1678295158/arc-browser-blog-post/pcu6lczn2z48pvmuucte.gif)

Peek is a new feature for Arc but perhaps one of my favorites. When you click on a link, instead of taking you to a new tab or taking you off the current site, a smaller window pops up and allows you to see the content, where you can either close it or expand it into a full tab. You could be browsing Twitter, see someone reference an article, take a quick peek, and be done! It's a great way to reduce tab clutter, with a world-class UX.

## Easels

<img

  src="/blog-images/placeholder.png"

  alt="Easels in Arc"

  height={1080}

  width={1920}

  aspectRatio={16 / 9}

/>

Easels are something completely unique to Arc and have some pretty impressive abilities. The concept is like internet chalkboards. You can snip pieces of websites, add them to an easel, then add other things like your images, text, shapes, etc. Arc provides a great shortcut (that can be customized), where all you have to do is hold down Command and Shift, then click & drag across the screen to select what you want to snip. Then it will prompt what easel you want to add the snippet to, or if you want to make a new one. Easels can also be made public and shared with other people!

![Live mode in Arc Easels](/blog-images/cloudinary/v1678295978/arc-browser-blog-post/dqk3g3sfyp34ooosaupn.gif)

The craziest part? They feature a LIVE mode. Let’s say you take a snippet of the weather of your hometown from Google and save it to your easel. At any time, you can visit the easel and press the “play” button, and Arc will update the easel in real-time! I’ve used this feature to track packages and share research with my team. Others have used it to make personalized dashboards to feature live info. You really need to try it for yourself!

## Boosts

<img

  src="/blog-images/placeholder.png"

  alt="A view of the Boosts menu in Arc"

  height={1080}

  width={1920}

  aspectRatio={16 / 9}

/>

Arc has an affinity to bring back the excitement of the internet from the 90s, both in design and in customization. Not only does Arc feature themes for your browser to personalize your experience, they give you the ability to do “Boosts” to websites. Boosts are simply CSS or JS injections to websites so you can customize the color of a website or give it additional functionality.

<img

  src="/blog-images/placeholder.png"

  alt="Boost being made in Arc for Tiwtter"

  height={1080}

  width={1920}

  aspectRatio={16 / 9}

/>

As someone who is obsessed with customizing the personal computer environment, I absolutely love Boosts. [Nord](https://nordtheme.com/) is one of my favorite color palettes, and I use it for as many ports as I can. With Boosts, I’ve been able to customize all my regular sites to give it some flare. This comes a bit naturally for me since I have some web development experience and know how to snag CSS selectors easily, however, there are possibilities for Boosts to become a marketplace feature where non-technical users could save and use Boosts made by others.

## One App to Rule Them All

A fun fact about most applications running on your computer: they're likely Electron apps. Electron is a framework for building desktop applications, and it uses web languages like Javascript. In a lot of ways, Electron apps are just web browsers. Most apps in this format work in your web browser too, like Slack, Spotify, Discord, etc. My personal computer operated like this: I had a dozen apps downloaded for individual web applications. Why? 1. It was cumbersome to use them in my web browser, and 2. I thought it would be more performant than using the web browser (it was not). Arc solved both of those problems for me.

This goes back to how Arc manages pinned tabs. Since it has the ability to treat websites like applications, it makes it much easier to access them and use them. Instead of having a bunch of tabs on the top of my browser where Slack could get lost, I can always find it in my pinned tabs on my sidebar. Within two days of adjusting to Arc, I was able to delete all of my excess Electron apps. Now instead of running ten apps at once, I run maybe two or three, with Arc being the heavy lifter. When I’m not using apps, I can simply close them out but keep it pinned in my tabs for easy access later on.

## Internet Computers

That last point brings us to the concept of Internet Computers that Josh, the CEO of The Browser Company, talks about in [videofile\_ : the internet computer](https://youtu.be/v0160IirdL4). He essentially breaks down how most of our lives run on applications in the cloud rather than the computers we use, whether it's our work, our photos and videos, or our entertainment; it doesn’t live locally. An Internet Computer is a fluid concept without definition, but perhaps could look like

> I can tap my finger on the device, or I can toss at a glance and whoosh: my computer comes down from the internet, comes down from the cloud, and is right there on that machine. Because all of the stuff I need, all of my tools, all of my files, all of my people, my teams, all of those things are out there on the internet too so it doesn't matter where I access it from.

Josh talks about this as a possible reality in five to ten years, but to be honest, it feels like we could be so much closer. Arc is already an app that can do just about anything you need it to do, thanks to the power of developers building web applications. Of course, there are limitations with heavier software, and there is still a lot of work to be done, but the concept of a computer that lives in the cloud and could seamlessly travel between your phone, your computer, or your partner’s tablet, really excites me!

I can also see some possibilities of Web3 being part of this future, where your crypto wallet could be used as your internet identity. Your assets and funds could be used with an Internet computer to send tokens, vote on proposals, or integrate digital collectibles. The future of crypto and blockchain is still muddy and has a lot of work before it becomes a reality, yet it's easy to visualize something like this.

## Join the Arc Side

Whatever the future might hold, Arc and its incredible features are available now! At the time of this blogpost it is only available on MacOS, but the team is currently building out a mobile app as well as a Windows version. It is also only accessed by invite only. however there are many being passed around. My best suggestion is to check out their [Discord](https://discord.gg/arcinternet) where they have a channel for invite codes, or if you want, you can [email me](mailto:hello@stevedsimkins.dev), and I’ll give out what I can! 😁

I appreciate everything The Browser Company has accomplished so far, and I wish them the best as they attempt to revolutionize the way we experience the Internet!

---

title: "Scaling Your NFT Project: A Beginner’s Guide to IPFS"

publishDate: "07 Oct 2022"

description: "Storage ain’t sexy, but if web3 is gonna take a leap, it's one of the biggest problems we need to solve for."

ogImage: "/blog-images/other/62fd1b0820188c4271c6f5ac_Thumbnail1.png"

atUri: "at://did:plc:ia2zdnhjaokf5lazhxrmj6eu/site.standard.document/3mdzvusztdf2v"

---

import bueno from "../../assets/bueno.png";

import OutLinkButton from "@/components/common/OutLinkButton";

<OutLinkButton link="https://bueno.art/blog/pinata-ipfs-guide" site="Bueno" image={bueno} />