Build an NFT Wallet with OutSystems & Filecoin
Tags: blockchain, cloud, beginners, react
Published: 2021-10-22 23:31:01

Author: [@sydneylai](https://twitter.com/sydneylai)

You hear about NFTs as collectables or images, but how do we store or collect them? Today we will build an NFT wallet and host them on IPFS as a unique NFT.

We host the images in IPFS because this a peer to peer and a decentralized form of storage, rather than a centralized solution like AWS or Google Cloud. Therefore if AWS goes down or you forget to pay your Cloud subscription, you still have a hosting solution that assigned a unique identifier or content identifier (CID).

Once you have a unique image, you can either distribute your NFTs on a marketplace, put it on a smart contract or turn it into a game. I'll include resources below for how else you can continue to build. This tutorial is for beginners who want to learn how to create and host their NFTs.

---

# Start Here

```
Exposing a REST API for NFT Storage and OutSystems 
```

**Tools you'll need:**

OutSystems IDE https://outsyste.ms/developers 
Filecoin's NFT Storage https://nft.storage/

# Filecoin and IPFS Explained

**Vocab 101**

**CID** - content ID
**Pinning** - asking the node to keep the data, so that it's not trashed, if you pin it hte data presists
**Quede vs Pinning** - next deal brokered to get on the Filecoin network

---

## Making an NFT Wallet and Hosting NFTs

https://nft.storage/

**Here is your hosted image, with a CID**
![](https://i.imgur.com/mSeqVgg.png)

Hosting NFTs on marketplaces or wallets typically request ETH and gas. NFT developers who want free decentralized storage, you will be able to host your images on-chain with NFT.storage. 

Just upload your data and you'll receive an IPFS hash of the content (a CID) that can be used in on-chain NFT data as a pointer to the content.

![](https://i.imgur.com/scEMLLd.png)


How it works:

- Upload your data, get back an IPFS hash of the content (a CID) that can be used in on-chain NFT data as a pointer.
- Storage + Retrieval is free!
- Metadata is returned in proper formats!
- Fetch it back via IPFS (pinned redundantly >3x) 
- Backed up to Filecoin (stored redundantly >5x)


[Filecoin](https://filecoin.io/) provides long term storage for the data ensuring that even if nft.storage is attacked or taken down the NFT data persists.



## Consume API
![](https://i.imgur.com/pHRQ9Zh.png)

You can upload either a single file or consume the API to upload multiple files in a directory. The API follows a typical POST and GET Method.

```
**/Upload** - Consuming the API / Post Method
```

Explains uploads, throws it on some IPFS nodes, available over the network, not just centralized, it's free, the storage providers. 
https://nft.storage/api-docs/


## Consume NFT Storage API

**Step 1: Start with a mobile app**

When you launch Service Studio, you want to create a mobile application by clicking on "From Scratch" and then "Phone app". 

Name your application. 

Here you can design your application however you'd like. In this process, I'm creating an NFT wallet with a simple scrolling mechanism similar to the Instagram layout. 



**Step 2: Consume the NFT Storage REST API**



Click on Service, as we are building a service to consume the REST API

![](https://i.imgur.com/OPcthtT.png)

Right Click on REST and consume REST API
![](https://i.imgur.com/qveCE74.png)

Add Multiple Methods

Find the YAML file here 
https://nft.storage/api-docs/

Convert the NFT Storage YAML file to a JSON
https://nft.storage/schema.yml

Convert with 
https://www.convertjson.com/yaml-to-json.htm

![](https://i.imgur.com/c32MHjg.png)


Check and address any errors and warnings

**Step 3: Create and map out your REST API** 

Add Authorizations to your Methods

Double-click on the orange REST API Method titled "Click" > "Heads and Authentication"

In the Request headers dropdown select "Authorization"
![](https://i.imgur.com/ghidFSN.png)

Click on the "Test" tab and include a CID in the URL parameter values. You can find your CID [HERE](https://nft.storage/api-docs/) if you are logged in. 

![](https://i.imgur.com/5a1BgES.png)
in Request headers values, Authorization, include: 

> Bearer[KEY TOKEN]

**Bearer** - When things are stored in, there is a storage deal made, what each API call is doing in the background

![](https://i.imgur.com/FMFQW6G.png)


click on "Test" to see an ``` "ok":true value ```

1. Copy to response body
2. Click on Finish 
3. Hit the green Publish button

Now repeat **Step 3** for the rest of the REST API Methods titled "delete", "list", "status", "store" respectively

On the "List" method,

Include a future date for the **before** parameter


![](https://i.imgur.com/qZqWoov.png)

![](https://i.imgur.com/W8ZQ2BJ.png)

Copy over and match the fields

While you're creating an Authorization input parameter for both "Status" and "Store" you may get an error or empty payload, just click "Finish"

![](https://i.imgur.com/wKzGEVp.png)

Hit the green Publish button

**Step 4: Create a Service Action**
Right Click on "Service Action" and title your action "List"

The logic flow will visually appear

In the Logic tab, 
Integrations > REST > NFTStorageAPI > 


Drag the "list" Run Server Action into the logic flow and click on the icon until you see the "Authorization" dropdown


It's empty

In "list" Run Server Action, copy all four input parameters, and paste in the "List2" Service Action

![](https://i.imgur.com/87BKrXc.png)


Now include the Before and Limit within the List Run Server Action you just created on the Logic Flow

![](https://i.imgur.com/jkrEGGY.png)




Assign the "list" Run Sever Action by dragging an "Assign" blue icon from the left tray into the logic flow, below the "list" icon


![](https://i.imgur.com/JuGUlq0.png)

Assign the variable with "Response"

![](https://i.imgur.com/PMisnBD.png)



:bulb: You may get errors asking to make your structures public



**Step 5: Integrate your API wrapper**

To integrate your API, head to Interface > Home Screen and "Fetch Data from Other Sources", which I've named "ShowStorage"

![](https://i.imgur.com/42lS6td.png)

In the upper left-hand side there is a :electric_plug: icon where I will manage my dependencies. I want all the modules that I've created before, to be referenced. 

![](https://i.imgur.com/DxSowRF.png)

Head to the Logic tab and locate "List" Service Action, click on and drag the icon into the logic flow.

Head to the interface tab and double-click on the Output Parameter we've named "Response", set the Data Type to a ListResponse matching the Response Output Parameter in the Logic tab.

On the logic flow, drag and drop an Assign into the logic flow. In the drop-down, assign Response and List3.Response (or whichever number list you have show up).

![](https://i.imgur.com/x95Op9t.png)

In your Run Server Action titled "List", set

>before: "CurrDateTime()"
>Authorization: " "Bearer TOKEN" " 

Your Authoization Bearer TOKEN is a string so must close in quotes.



![](https://i.imgur.com/4tg57AF.png)


**Step 6: Connect the database and images**

On the Interface tab in the Mainflow UI Flow, add a Block widget and add an Input Parameter titled "CID".

Double-Click on the "Home" Screen icon and select "Widget Tree" on the top right. 

In Content, drag and drop a Block widget and set the sources: 

> Source Block "MainFlow\Block1"
> CID "ShowStorage.Response.value.Current.cid"


![](https://i.imgur.com/6ha9zX9.png)


Include three "x.y Expression" widgets within Content

In the first Expression, map the expression to 

> ShowStorage.Response.value.Current.cid

Folder structure is seen here:

![](https://i.imgur.com/uFXRu2i.png)

The second Expression, can be expressed as follows:

> FormatDateTime(ShowStorage.Response.value.Current.created, "d MMM yyyy HH:mm")

The third Expression, we can showcase the pinning service. 

**The Images**

In the Interface tab, click on the Block1 widget. Drag and drop an Image widget from the left. 

Set the Type to "External URL"

> "https://" + CID + ".ipfs.dweb.link"

In the API wrapper that I've titled "IPFSNFTStorage", create an Input Parameter within the "store" REST API Method. The Input Parameter will be named "Binary Image" and set the Data Type to "Binary Data".

![](https://i.imgur.com/a1XLz2r.png)

Now copy the three input parameters in store and create a Service Action titled "Upload" within the Service Actions folder. Paste the three input parameters within the "Upload" Service Action

![](https://i.imgur.com/I2mGIr2.png)


Double-click on "Upload" Service Action and drag the store REST API Method onto the logic flow

The "Store" Run Server Action is like requestion something from someone, in this case asking someone for the image.  

![](https://i.imgur.com/6GasJs7.png)

Therefore the Assign widget in the logic flow will be the response to the request: 

![](https://i.imgur.com/YAeddk1.png)

## Success :star: 

You have integrated your NFT Storage API and your mobile application can now display hosted NFTs


![](https://i.imgur.com/6EmcXz3.jpg)

## Continuing Education
Listen to Patrick Collins, developer advocate at Chainlink explain securing blockchain oracles on Decoded Podcast.

{% spotify spotify:episode:3AD34nKzqCMoWk4OcJAdx0 %}

## Video Tutorial
https://youtu.be/3Zy7XfDnev0

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz0ravzl7rp3kc4f6mu2.jpg)](https://youtu.be/3Zy7XfDnev0)

---