Forem: Shoaib Sayyed

Create an NFT with Stacks

Shoaib Sayyed — Fri, 18 Nov 2022 07:21:42 +0000

Quickly create your own NFT using Clarity with Stacks.

Hello Developers 👋

Welcome to today’s post, where we’ll break down a blockchain topic into bite-sized pieces to help you learn and apply your new skills in the real world.

Today’s topic is Creating an NFT with Stacks.

Here’s a list of what we’ll cover 🗒

✅ Step 1: Set up your project using Clarinet
✅ Step 2: Configure dependencies and define traits
✅ Step 3: Create the NFT smart contract
✅ Step 4: Check the contracts for errors
✅ Step 5: Testing the contract on local chain
✅ Step 6: Deploy the NFT smart contracts

By the end of this post, you’ll be able to create and deploy your own NFT using the Stacks.

Let’s go! 🚀

Prerequisites

There are some prerequisite that you should have setup before going into this tutorial ⚒️

You should have Clarinet installed on your system. Follow the installation guide.
Setup your Hiro wallet. Download the wallet.

✅ Step 1: Set up your project using Clarinet

We will create a project called music-bird using Clarinet. Open up your terminal and type the following in the command:

clarinet new music-bird

Once the project is created Open the folder in your favorite IDE (example: VS Code) and open the built-in terminal emulator by going to the Terminal menu and choosing New Terminal.

Now, Inside our project folder, we will create two new Clarity contracts using the following commands:

clarinet contract new nft-trait

clarinet contract new music-bird

Clarinet will create a boilerplate Clarity and test file, and add the contracts to the configuration file.

Creating file contracts/nft-trait.clar
Creating file tests/nft-trait_test.ts

Creating file contracts/music-bird.clar
Creating file tests/music-bird_test.ts

As we are not going to write any test cases in this post, so we can delete the tests folder.

✅ Step 2: Configure dependencies and define traits

Now that we have the project setup out of the way, lets configure the dependencies and define the traits.

For creating the NFT on stacks we need to follow the Sip 009 NFT standard and its pre-defined traits. We will be writing our NFT contract based on this traits.

To assert that the music-bird NFT contract implements the trait of SIP-009, we can use the impl-trait function, as the NFT trait is already deployed on Stacks Mainnet, we can use that deployed contract address when deploying our NFT on mainnet but in this post we are deploying on testnet, so we will configure a NFT traits contract on our local.

To do so, open up the nft-trait.clar file inside the contracts directory and add the following traits in it.

(define-trait nft-trait
  (
    ;; Last token ID, limited to uint range
    (get-last-token-id () (response uint uint))

    ;; URI for metadata associated with the token 
    (get-token-uri (uint) (response (optional (string-ascii 256)) uint))

     ;; Owner of a given token identifier
    (get-owner (uint) (response (optional principal) uint))

    ;; Transfer from the sender to a new principal
    (transfer (uint principal principal) (response bool uint))
  )
)

Now we have define the traits, lets configure the dependencies for our NFT smart contract. Open Clarinet.toml and edit the [contracts.music-bird] section, we need to add the dependency of nft-trait contract.

[contracts.music-bird]
path = "contracts/music-bird.clar"
depends_on = ["nft-trait"]

This will ensure that the nft-traits contract should deployed before our NFT smart contract as it depends on it.

✅ Step 3: Create the NFT smart contract

Now everything is setup, let us jump into writing our NFT contract. Open the music-bird.clar contracts file and remove all the boilerplate code.

;; Use this when deploying on mainnet
;; (impl-trait 'SP2PABAF9FTAJYNFZH93XENAJ8FVY99RRM50D2JG9.nft-trait.nft-trait)

;; Use this when deploying on testnet
;; Implementing traits from the `nft-trait.clar` contract
(impl-trait .nft-trait.nft-trait)

By adding this expression, the analyzer will check if the contract implements the trait specified when the contract is deployed. It will reject the transaction if the contract is not a full implementation. It is therefore recommended to always use impl-trait because it prevent accidental non-conformity.

Now let's define a non fungible token which will take the name of the NFT and its identifier type, Since the SIP requires the asset identifier type to be an unsigned integer, we add our NFT definition next.

(define-non-fungible-token music-bird uint)

The asset identifier for the NFT should be an incrementing unsigned integer. The easiest way to implement it is to increment a counter variable each time a new NFT is minted. Let us define a data variable for it.

(define-data-var last-token-id uint u0)

Now, we will add a constant for the contract deployer and two error codes. Here is everything put together:

;; Implementing traits from the `nft-trait.clar` contract
(impl-trait .nft-trait.nft-trait)

(define-constant contract-owner tx-sender)
(define-constant err-owner-only (err u100))
(define-constant err-not-token-owner (err u101))

(define-non-fungible-token music-bird uint)

(define-data-var last-token-id uint u0)

To get the token id of last minted NFT, we will define a read only function which will read the chain state and return us the value of last-token-id variable.

(define-read-only (get-last-token-id)
    (ok (var-get last-token-id))
)

After that, we will define one more read only function get-token-uri which is used to get metadata for the NFT. But in this post we are not going to look that, so we will keep it as none.

(define-read-only (get-token-uri (token-id uint))
    (ok none)
)

Now its time to define a public function to mint our NFTs which will take the recipient address and mint the NFT to that address.

(define-public (mint (recipient principal))
  (let
    (
      (token-id (+ (var-get last-token-id) u1))
    )
    (asserts! (is-eq tx-sender contract-owner) err-owner-only)
    (try! (nft-mint? music-bird token-id recipient))
    (var-set last-token-id token-id)
    (ok token-id)
  )
)

In the above mint function,

First, we have defined the local variable token-id and set its value by incrementing the last-token-id value with 1.
After that, we have an asserts! function which will validate, is the transaction sender who is calling the mint function tx-sender is equal to the contract-owner who has deployed the contract or not.
With this check, the mint function can only be called by the contract owner, and not by anyone else.
Then we are minting our music-bird NFT to the recipient.
Once the NFT is successfully minted, we are updating the last-token-id variable with the updated value of token-id and returning the same.

Now let's define a read only function get-owner which will take the NFT's token-id and return the owner of the NFT.

(define-read-only (get-owner (token-id uint))
    (ok (nft-get-owner? music-bird token-id))
)

And, the final function in our contract will be a public function using which the NFT owner can transfer their NFT to some other address.

(define-public (transfer (token-id uint) (sender principal) (recipient principal))
    (begin
    (asserts! (is-eq tx-sender sender) err-not-token-owner)
    (nft-transfer? music-bird token-id sender recipient)
    )
)

In the above transfer function,

It will take the NFT's token id, and the sender and recipient addresses.
Then first we will check transaction sender address and the sender address received in parameter is same or not.
If it is not same then we will throw an error that the transaction sender is not the owner of the NFT.
And If the condition satisfies, we will begin to transfer the NFT of token id from the sender address to the recipient address.

✅ Step 4: Check the contracts for errors

Now we have written our NFT contract and it's time to check for errors. Run the command on the terminal:

clarinet check

✅ Step 5: Testing the contract on local chain

Once our code have been checked for errors we can now test our function by running them on local chain, which can easily be possible with clarinet. To do so we just need to run the following command on terminal

clarinet console

Now our console session is running, lets call our mint function and try to mint a token for ourselves.

The syntax to call a contract from console in Clarinet is:

>> (contract-call? contract-identifier function-name param-1 param-2 ...)

So calling our mint function:

>> (contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.music-bird mint 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM)

You can see the NFT mint event and the resulting ok response. We can transfer the newly minted token with ID u1 to a different principal.

>> (contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.music-bird transfer u1 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM 'ST2CY5V39NHDPWSXMW9QDT3HC3GD6Q6XX4CFRK9AG)

Here as well you can see the NFT transfer event and the resulting ok response. We can confirms that the token is now owned by the specified principal by calling the get-owner function.

>> (contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.music-bird get-owner u1)

✅ Step 5: Deploy the NFT smart contracts

To deploy our NFT smart contract on testnet, open up the Sandbox - Stacks Explorer

Connect your wallet and Switch to testnet.
First we need to deploy our NFT trait smart contract
Paste your NFT trait smart contract code in IDE and Update the contract name.

Click on Deploy and Confirm the transaction.

You can view the transaction details in your wallet activity. Click on the transaction in you wallet activity and you will be redirected to Stacks block explorer page.

Now we will repeat the same steps for deploying our NFT smart contract, so first

Copy and Paste your NFT smart contract code in IDE.
Copy the contract name of nft-trait smart contract from the block explorer page and replace the path in impl-trait function in our NFT smart contract.

(impl-trait 'ST2K0T4HFQKJMMCHBYFPRNVBG0B1NZFZTV94RD9WE.nft-trait.nft-trait)

Update the contract name, click on Deploy and Confirm the transaction.

Similarly, you can view the transaction details in your wallet activity

To view more details about the deployment, click on the transaction in you wallet activity.

That is all there is to it! NFTs in Clarity are really quite easy to do. The full source code of the project can be found here: https://github.com/0xShoaib/music-bird-nft

9 Tricks To Write Less JavaScript.

Shoaib Sayyed — Thu, 07 May 2020 04:48:17 +0000

Hi Dev 👋, Thanks for opening my blog. I hope you are doing well and ready to learn some Tricks To Write Less JavaScript 😎.

So, let's start!

1. Declaring Variables

//Longhand
let x;
let y;
let z = "post";

//Shorthand
let x, y, z = "post";

2. Assignment Operator

//Longhand
x = x + y;
x = x - y;

//Shorthand
x += y;
x -= y;

3. Ternary Operator

let answer, num = 15;

//Longhand
if (num > 10) {
  answer = "greater than 10";
} 
else {
  answer = "less than 10";
}

//Shorthand
const answer = num > 10 ? "greater than 10" : "less than 10";

4. Short for Loop

const languages = ["html", "css", "js"];

//Longhand
for (let i = 0; i < languages.length; i++) {
  const language = languages[i];
  console.log(language);
}

//Shorthand
for (let language of languages) console.log(language);

5. Template Literals

const name = "Dev";
const timeOfDay = "afternoon";

//Longhand
const greeting = "Hello " + name + ", I wish you a good " + timeOfDay + "!";

//Shorthand
const greeting = `Hello ${name}, I wish you a good ${timeOfDay}!`;

6. Arrow Function

//Longhand
function sayHello(name) {
  console.log("Hello", name);
}

list.forEach(function (item) {
  console.log(item);
});

//Shorthand
sayHello = name => console.log("Hello", name);

list.forEach(item => console.log(item));

7. Object Array Notation

//Longhand
let arr = new Array();
arr[0] = "html";
arr[1] = "css";
arr[2] = "js";

//Shorthand
let arr = ["html", "css", "js"];

8. Object Destructuring

const post = {
  data: {
    id: 1,
    title: "9 trick to write less Javascript",
    text: "Hello World!",
    author: "Shoaib Sayyed",
  },
};

//Longhand
const id = post.data.id;
const title = post.data.title;
const text = post.data.text;
const author = post.data.author;

//Shorthand
const { id, title, text, author } = post.data;

9. Object with identical Keys and Values

//Longhand
const userDetails = {
  name: name, // 'name' key = 'name' variable
  email: email,
  age: age,
  location: location,
};

//Shorthand
const userDetails = { name, email, age, location };

That's It 😎.

Thanks for reading! My name is Shoaib Sayyed; I love helping people to learn new skills 😊. You can follow me, if you’d like to be notified about new articles and resources.

Styling in React

Shoaib Sayyed — Tue, 05 May 2020 07:08:32 +0000

Hi Dev 👋, Thanks for opening my blog. I hope you are doing well and ready to learn about Styling in React 😎.

We can add styling to React Component in 4 ways:

Inline Styling
CSS-in-JS Libraries
CSS & CSS Pre-processors
CSS Module

So, let's start!!

1. Inline Styling

Inline styles are nothing new, they're a HTML feature that we've all most likely used at some point. However implementing inline styles in React are little different, we store the CSS in object as key/value pair.


// Inline object defination
<div style={{ backgroundColor: "grren" }}> I am a Div </div>;

// Object literal defination
const divStyle = { backgroundColor: "green" };

<div style={divStyle}> I am a Div </div>;

Inline style are mostly used when applying conditional styles, they are often not the best choice when more than one element requires same styling.

2. CSS-in-JS Libraries

CSS-in-JS and inline styles are extremely similar. However, with inline styles React attaches the styles to the DOM nodes, whereas CSS-in-JS libraries take your styles and inject them into a <style> tag in the DOM.

First you need to install CSS-in-JS Library i.e styled-components

npm install --save styled-components

// Import styled-components
import styled from "styled-components";

// Declaring the styles
const Title = styled.h1`
    font-size: 1.6em;
    color: green;
    text-align: center
`;

// Regular JSX Component tag
<Title>
    Hello World!
</Title>

You can also declare the styles in separate file and then imported in.

3. CSS & CSS Pre-processors

The process of using vanilla CSS or CSS pre-processors is the same in React, there are couple of notable differences. When applying classes to elements, we use the className syntax rather than class. We also link our stylesheet using @import syntax.

import React from "react";

// Import CSS or SCSS file
import "./App.css";

const App = () => {
  return <h1 className="title">Hello World!</h1>;
};

Define the styles for .title class in App.css file. We can use one global CSS/Sass file or we can split our stylesheet up into components.

    /* In App.css */
      .title {
        font-size: 1.6em;
        color: green;
        text-align: center;
      }

4. CSS Module

CSS Module are simply .css files in which all the CSS styles and animations are defined. With an exception, all of the styles declared are locally scoped to the Component they are imported into.

import React from "react";
import style from "./title.css";

const Title = () => {
  return <h1 className={style.title}>Hello World!</h1>;
};

export default Title;

Refer to each CSS style using . notation. Define the styles for .title class in title.css. All CSS styles for one component are declared in one file

    /* In title.css */
      .title {
        font-size: 1.6em;
        color: green;
        text-align: center;
      }

That's It 😎.

Thanks for reading! My name is Shoaib Sayyed; I love helping people to learn new skills 😊. You can follow me on Twitter if you’d like to be notified about new articles and resources.

8 Must Know Javascript Array Methods

Shoaib Sayyed — Tue, 05 May 2020 04:45:10 +0000

Hi, Dev! Thanks for opening my blog. I hope you are doing well and ready to learn the most used JavaScript Array Methods.

Here are the 8 JavaScript Array Methods you should know.

1. filter()

The filter() method returns an array filled with all array elements that satisfies the condition.
If no elements satisfies the condition, it returns an empty array.

      let arr = [1, 2, 3, 4, 5, 6];

      // returning items less than 4
      let filteredArr = arr.filter((item) => item < 4);

      console.log(filteredArr); // output: [1, 2, 3]

2. map()

The map() method returns a new array with the results of calling a function for every array element.
The map() method calls the provided function once for each element in an array, in order.

      let arr = [1, 2, 3, 4, 5, 6];

      // adding one to each array element
      let mappedArr = arr.map((item) => item + 1);

      console.log(mappedArr); // output: [2, 3, 4, 5, 6, 7]

3. find()

The find() method returns the value of the first element in an array that satisfies the condition.
The find() method executes the function once for each element present in the array.

      let arr = [1, 2, 3, 4, 5, 6];

      // finding element greater than 4
      let resultArr = arr.find((item) => item > 4);

      console.log(resultArr); // output: [5]

4. forEach()

The forEach() method calls a function once for each element in an array, in order.

      let arr = [1, 2, 3, 4, 5, 6];

      arr.forEach((item) => {
        console.log(item); // output: 1 2 3 4 5 6
      });

5. some()

The some() method checks if any one of the elements in an array satisfies the condition.
If satisfied, it returns 'true' otherwise 'false'.

      let arr = [1, 2, 3, 4, 5, 6];

      // checking is any array element equals to 3
      let isThree = arr.some((item) => item === 3);

      console.log(isThree); // output: true

      // checking is any array element equals to 10
      let isTen = arr.some((item) => item === 10);

      console.log(isTen); // output: false

6. every()

The every() method checks if all elements in an array satisfies the condition.
If satisfied, it returns 'true' otherwise 'false'.

      let arr = [1, 2, 3, 4, 5, 6];

      // all elements are less than 6
      let lessSix = arr.every((item) => item <= 6);

      console.log(lessSix); // output: true

      // all elements are greater than 10
      let greaterTen = arr.every((item) => item > 10);

      console.log(greaterTen); // output: false

7. reduce()

The reduce() method reduces the array to a single value.
The reduce() method executes a provided function for each value of the array (from left-to-right) and return value is stored in an accumulator.

      let arr = [1, 2, 3, 4, 5, 6];

      // adding all elements of an array
      let sum = arr.reduce((total, value) => total + value);

      console.log(sum); // output: 21

8. includes()

The includes() method determines whether an array contains a specified element.
If array contains the element, it returns 'true' otherwise 'false'.

      let arr = ["html", "css", "js"];

      // checking is array conatins 'js'
      arr.includes("js"); // output: true

      // checking is array conatins 'react'
      arr.includes("react"); // output: false

Note: All the above array methods does not change the original array.