Forem: Samina

How to create an NFT-gated website

Samina — Wed, 13 Apr 2022 15:32:18 +0000

One of the more dynamic use cases for NFTs is using them as a membership pass to the NFT holders. Let’s assume you want to create a website for your community that is gated by having access to a specific NFT from a collection. You can keep downloadable content or hidden pages by access to the NFT.

In this guide, we will create a website that restricts content based on owning an NFT using React.

You can grab a copy of the final project from our examples organization, check it out here.

Mint an NFT Drop

To create an NFT gated website, we will need either an NFT Collection, NFT Drop, Edition, or an Edition Drop contract already deployed on a blockchain. If you don’t have one created, you can create one using thirdweb’s TypeScript SDK or thirdweb’s dashboard.

If your NFTs are an NFT Drop or Edition Drop contract, set up claim phases before using the claiming functions mentioned later in the guide.

For our example, I am using an NFT Drop contract called Cookie Club for members of the Cookie Club. 🤫

You can view the Cookie Club NFT Drop on the thirdweb dashboard.

Clone the template repository

To get started will use a cra-javascript-template which already includes a working SDK setup. This template will make it easy to learn and save time when getting started with our project.

If you’d prefer to use your own template, you can install the latest version of our SDK in your project with npm install @thirdweb-dev/sdk react ethers oryarn add @thirdweb-dev/sdk react ethers

First, navigate to the cra-javascript-starter GitHub repository and click on "Use this template" to create a copy.

Add the project’s name, description, and other settings, and then clone it locally on your device. Open the directory and run npm install in your terminal to install all the dependencies.

Setup the blockchain

Inside our src folder, we will open the index.js file. We will first change the chain id to the chain of our NFT Drop. For this project, we’ll be using Rinkeby since our NFT Drop contract is on the Rinkeby testnet.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Rinkeby;

ReactDOM.render(
  <React.StrictMode>
    <ThirdwebProvider desiredChainId={activeChainId}>
      <App />
    </ThirdwebProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Setup the connect wallet button

In the same folder, there is the app.js file. In this one, we want to allow our user to connect to the app and then obtain our user’s wallet address. On the front end, we will create a button that lets users connect with MetaMask. When a wallet is connected, it will display the corresponding address.

import { useAddress, useMetamask } from "@thirdweb-dev/react";
import "./styles.css";

const App = () => {
  // get address of user & allow them to connect with metamask
  const address = useAddress();
  const connectWithMetamask = useMetamask();

  //if there isn't a wallet connected, display our connect MetaMask button
  if (!address) {
    return (
      <>
        <h1>Welcome to the Cookie Club</h1>
        <button className="btn" onClick={connectWithMetamask}>
          Connect MetaMask
        </button>
      </>
    );
  }

  // if an address is connected, display address
  return (
    <div>
      <p>Your address: {address}</p>
    </div>
  );
};

export default App;

Let’s preview what our app looks like and ensure it’s working by running npm start in the terminal.

Conditionally render content & add an NFT minting button

In the same App.js file, we will add conditionals that render specific pages based on the connection status of the user. We want the user to be able to mint an NFT from the drop if they don’t already hold an NFT. If the connected user does have one, we will display some congratulatory text.
As an extra, I added a helper function to display our shortened wallet address called truncateAddress. Feel free to add or omit this as well in your app.

import { useAddress, useMetamask } from '@thirdweb-dev/react';
import { useState, useEffect } from 'react';
import "./styles.css";

const App = () => {
    // get address of user & allow them to connect with metamask
    const address = useAddress();
    const connectWithMetamask = useMetamask();

    // add nft Drop contract
    const nftDrop = useNFTDrop("0x66463b3C1EBf08b9dE889BCc0A5cbf29dc0e2B7a");
    const [hasClaimedNFT, setHasClaimedNFT] = useState(false);
    const [isClaiming, setIsClaiming] = useState(false);

    // function to claim NFT
    const mintNFT = async () => {
        try {
            setIsClaiming(true);
            await nftDrop.claim(1);
            setHasClaimedNFT(true);
        catch (error) {
            setHasClaimedNFT(true);
            console.error("Failed to mint NFT", error);
        } finally {
            setIsClaiming(false);
        }
    }

    //if there isn't a wallet connected, display our connect MetaMask button
    if (!address) {
    return (
      <>
        <h1>Welcome to the Cookie Club</h1>
        <button className="btn" onClick={connectWithMetamask}>
          Connect MetaMask
        </button>
      </>
    );
  }

    // if the user is connected and has an NFT from the drop, display text
    if (hasClaimedNFT) {
    return <h2>Congratulations! You have a Cookie NFT! 🍪</h2>;
  }

  // helper function to truncate the address so it displays in a nice format
  function truncateAddress(address) {
    return `${address.slice(0, 6)}...${address.slice(-4)}`;
  }

    //if the user does not have an NFT, show their address and mint an NFT button
    return (
    <>
      <p className="address">
        There are no Cookie NFTs held by:{" "}
        <span className="value">{truncateAddress(address)}</span>
      </p>
      <button className="btn mint" disabled={isClaiming} onClick={mintNft}>
        Mint NFT
      </button>
    </>
  );
}

export default App;

Add useEffect to check for state changes

Lastly, we want to add a useEffect function to ensure we are up to date with the latest state of the app. This function triggers every time something in the dependency array changes. For example, if the user’s address or nftDrop disconnects or changes, we want to refresh and update it accordingly.

import { useAddress, useMetamask, useNFTDrop } from "@thirdweb-dev/react";
import { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  // allow user to connect to app with metamask, and obtain address
  const address = useAddress();
  const connectWithMetamask = useMetamask();

  //
  const nftDrop = useNFTDrop("0x66463b3C1EBf08b9dE889BCc0A5cbf29dc0e2B7a");
  const [hasClaimedNFT, setHasClaimedNFT] = useState(false);
  const [isClaiming, setIsClaiming] = useState(false);

  useEffect(() => {
    // If they don't have an connected wallet, exit!
    if (!address) {
      return;
    }

    const checkBalance = async () => {
      try {
        const nfts = await nftDrop.getOwned(address);
        setHasClaimedNFT(nfts?.length > 0);
      } catch (error) {
        setHasClaimedNFT(false);
        console.error("Failed to get NFTs", error);
      }
    };
    checkBalance();
  }, [address, nftDrop]);

  const mintNft = async () => {
    try {
      setIsClaiming(true);
      await nftDrop.claim(1);
      setHasClaimedNFT(true);
    } catch (error) {
      setHasClaimedNFT(false);
      console.error("Failed to mint NFT", error);
    } finally {
      setIsClaiming(false);
    }
  };

    //if there isn't a wallet connected, display our connect MetaMask button
  if (!address) {
    return (
      <>
        <h1>Welcome to the Cookie Club</h1>
        <button className="btn" onClick={connectWithMetamask}>
          Connect MetaMask
        </button>
      </>
    );
  }

  // if the user is connected and has an NFT from the drop, display text
  if (hasClaimedNFT) {
    return <h2>Congratulations! You have a Cookie NFT! 🍪</h2>;
  }

  // truncates the address so it displays in a nice format
  function truncateAddress(address) {
    return `${address.slice(0, 6)}...${address.slice(-4)}`;
  }

  // if there are no NFTs from collection in wallet, display button to mint
  return (
    <>
      <p className="address">
        There are no Cookie NFTs held by:{" "}
        <span className="value">{truncateAddress(address)}</span>
      </p>
      <button className="btn" disabled={isClaiming} onClick={mintNft}>
        Mint NFT
      </button>
    </>
  );
}

export default function app;

Link to Project

You can create a copy of this project from our example repository.

Congratulations!

Let’s go! You created an NFT gated membership website using React. Feel free to add some downloadable content or secret updates behind this new page for your NFT community members!

Mint An NFT Without Writing Any Code

Samina — Sat, 26 Mar 2022 20:14:42 +0000

This guide explains how to mint an NFT without writing code on thirdweb in a few steps.

Minting with thirdweb guarantees you own both the NFT and the smart contract. If you mint an NFT on a platform where you don't own the smart contract, this can create issues. What will happen if this platform goes down or decides to change the royalties of a smart contract? Owning both the NFT and the smart contract ensures true ownership.

To create our NFT, we will need to have a crypto wallet. For this guide, we are using Coinbase Wallet. If you don't have a wallet, you can create one by following our Setup Coinbase Wallet Guide.

Setup

To begin, navigate to the thirdweb dashboard and connect your wallet. Once connected, you will be able to click + Create New Contract > Create NFTs and Tokens > NFT Collection.

Under general settings, add a contract name, description, image, and symbol to distinguish your contracts.You can pick any name you want for the contract. Under payout settings, add the wallet address for primary sales and, optionally, royalty sales. The wallet address for primary sales is usually your own wallet, which is filled in by default. Leave it like this if you want to receive the proceeds of any sale under this contract.

Scroll down and click the blue deploy now button to prompt a transaction confirmation from your wallet. Confirm this from the pop-up on your wallet.

Once we get through the settings, we can mint our first NFT through the dashboard.

Minting the NFT

Click on the blue + Mint button in the top right corner.

A settings panel will pop up on the right side of your screen. Give your NFT a name, description, and upload your file.

NFTs can be a variety of different mediums including image, audio, video, html, text file, pdf, or even 3d models.

Optionally, you can add some metadata or properties to your NFT using ‘key’ and ‘value’ pairs. In this example, I chose the color of the cookie and the number of chocolate chips as the key-value properties.

After adding the fields, click on the blue + Mint NFT button. You will be prompted to confirm the transaction in your wallet. Click the confirmation button. And that’s it- the newly minted NFT will appear in your dashboard.

Congratulations!

You have now minted your first NFT using thirdweb's dashboard. Now you can send it to a friend, list it on a marketplace, set it as your profile pic on Twitter, or just hold it in your wallet for safekeeping. The possibilities are endless with NFTs.

This guide was originally posted on thirdweb.

Day 1 - Getting Started with Flow + Cadence

Samina — Thu, 19 Aug 2021 22:23:25 +0000

Introduction

What is Flow?

Flow is a blockchain similar to others you may have heard of such as Ethereum or Solana. One of the key distinguishers for Flow is how they solved scalability while maintaining decentralization and security.

If you want to dive into a more in depth comparison of Flow and Ethereum check out this article: https://pixelplex.io/blog/flow-vs-ethereum-comparison-best-platforms-for-nft/

What is Cadence?

Cadence is a Resource-Oriented programming language designed for developing smart contracts. Cadence is a great programming language to get started in Web3 because it prevents developers from accidentally writing code that could cause data or financial loss. It is also fast, lower cost compared to other Proof Of Work Blockchains, and secure.

You can learn more about Flow and Cadence through their Getting Started page.

Part I - Installing Flow CLI

Installing the Flow CLI will depend on the operating system of your device. Follow the documentation from Flow to install the latest version.

After installing, in your CLI/terminal, use the command flow version to verify you have the correction version installed.

To start working with Flow in a REPL, in the CLI/Terminal type the command flow cadence which will open something that looks like this:

Welcome to Cadence v0.18.0!
Type '.help' for assistance.

1>

This is the REPL environment in which we will start in.

Of course, we can't break tradition. Let's start learning Cadence with none other than "Hello, World."

In your CLI/terminal type the following and press enter.

log("Hello, World")

This should echo the statement back in your CLI/Terminal.

Now we can move onto learning comments, types, variables, and functions.

Part II - Comments

Cadence has your standard options for formatting comments plus a few more.

Single line comments
```
// comment
```
Multi-line Comments
```
/* multi line
comment */
```
Documentation Comments - Single Line
```
/// documentation single line comment
```

Documentation Comments - Multi-line

/**
documentation
multi-line
comment
**/

Part III - Types + Variable Declaration

Like most programming languages, Cadence has primitive types. Primitive types are basic data types that serve as a building block in most languages.

In Cadence, you can declare primitive type variables explicitly let name: String = "Samina" or implicitly let name = "Samina"

Note: before we get into types, when declaring variables in Cadence there is a difference between let and var. Unlike in JavaScript, let is an immutable or not changeable variable declaration. In contrast, var is mutable or changeable.

let age = 21
age = age + 1

For example, the statement above would result in an error. Use var instead of let when you are planning on changing the variables.

Integers are used to represent whole numbers. An integer can take on many forms including decimal, binary, octal, and hex. You can also use underscores to make it visually easier to comprehend bigger numbers (ex. 100,000,000 -> 100_000_000).
```
let numOne = 627 //decimal
var numTwo = 0b1010 //binary (decimal equivalent 10)
let numThree = 0o13 //octal (decimal equivalent 11)
var numFour = 0xFF //hex (decimal equivalent 255)
```
You can use specific versions of Int such as Int8 (range: -128 to 127) or Int16 (range:
-32,768 to 32,767) if you want to be specific or save storage space. You can also use unsigned
integers: UInt.
Fixed- Point Numbers are used to represent fractional numbers. In Cadence, these are Fix64 or UFix64 for the unsigned version.
```
let numOne: Fix64 = 7.25
var numTwo: UFix64 = 126.02
```
Strings are a collection of unicode characters that are immutable. I like to think of them as a collection of characters or a word. Note: strings are always enclosed in quotes.
```
let name = "Steve"
let favoriteGame: String = "Minecraft"
```
Addresses allows you to store addresses or pointers. This is used quite frequently in Cadence to reference accounts and will be super useful when we dive into Smart Contracts and Transactions.
```
let accountAddress: Address = 0x123456789
```
Booleans allows you to store the binary values true or false. These types can be used to indicate an on or off state or work with conditionals (if-else) to help control your program.
```
var lightsOn = false
let isAfraid = true
```

Cadence also has several composite data types. Composite types are usually built from the aforementioned primitive types.

Arrays are a mutable collection of types.

let months = ["January", "February", "March", "April", 
"May", "June", "July", "August", "September", "October", 
"November", "December"]

Dictionaries are a mutable collection of key-value pairs.

let sides = {"triangle": 3, "square": 4 , "pentagon": 5 , "hexagon": 6}
sides["square"] //outputs 4

Structures or structs are a value type. You can compare them to objects in JavaScript. Their primary purpose is to store information.
```
pub struct avenger {
    pub let name: String
    pub let ability: String
    pub let weapon: String
    pub let weight: Fix64 //pounds
    pub let height: Fix64 //inches

    init(name: String, ability: String, weapon: String, weight: Fix64, height: Fix64) {
        self.name = name
        self.ability = ability
        self.weapon = weapon
        self.weight = weight
        self.height = height
    }
}
```
The keyword pub stands for public- which is an [access modifier](https://en.wikipedia.org/wiki/Access_modifiers#:~:text=Access%20modifiers%20(or%20access%20specifiers,facilitate%20the%20encapsulation%20of%20components.). We use the keyword struct to declare the structure and follow it with the name to reference the struct: avenger. Inside of the struct, after we declare our fields, we must use init() to initialize the fields.

In order to initialize an instance of a struct we would do the following:
```
let CaptainAmerica = avenger(name: "Steve Rogers", ability: "Super Strength", weapon: "Shield", weight: 240, height: 74)
```
Resources are similar to structs except they are linear types. Resources are moved around and not copied (in contrast to structs) and they can only exist once.

What does that mean?

Good question. Well, it is a vital part of Resource-oriented programming
languages, prevalent in Web3. Resources are special and can be used in Cadence to
represent something unique such as an NFT, Collection, etc.

For resources I am going to use the following example provided in the Fast Floward Bootcamp:
```
pub resource Wallet {
    pub var dollars: UInt

    init(dollars: UInt) {
        self.dollars = dollars
    }
}
```
In order to initialize the Wallet we created, we would use the following
```
let myWallet <- create Wallet(dollars: 10)
destroy myWallet
```
Notice how it uses an arrow <- instead of = and the keyword create to initialize the Wallet. The arrow signifies where the resource is moving and the create indicates the creation of that resource.

Because resources don't allow [garbage collection](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science), we must delete the resource manually by using the keyword destroy followed by the name of the resource.

Something interesting to note is that resources are used in Cadence for assets like NFTs because they cannot be destroyed (unless destroyed by the owner). This is an important structure to have because you don't ever want to lose these, oftentimes, valuable assets.

Part IIII - Functions

Are you still there? Bare with me, this is the last technical section.

Functions!

If you have worked with functions in other programming languages, this should be fairly similar in nature.

In contrast to the REPL we worked with earlier, for this section we can work with a .cdc or Cadence file.

To begin, create your file in the CLI/terminal:

flow cadence demo.cdc

You can open this using your favorite command line editor or use an IDE such as VS Code. If you decide to use VS Code, be sure to install the Cadence extension to assist you with syntax highlighting.

In a .cdc file we will declare an entry-point by using the main() function.

pub fun main() {
    log("Hello, World")
}

To run this program type flow cadence in the root of your directory. We should once again see it echo "Hello World"

Notice the keyword pub (short for public)- this is an access modifier meaning that the public has access to the value. Following that is fun which is an abbreviation for function. The rest of it should look similar to functions you have created before.

Now let's take it a step further and add another function. This example was also provided by the Fast Floward Bootcamp

pub fun hello(to name: String) {
    log("Hello, ".concat(name))
}

pub fun main() {
    hello(to: "Steve Rogers")
}

We should see the following when we run this program:

Hello, Steve Rogers

With that, we can conclude the main material from Day 1.

Fast Floward BootCamp

For further learning, the Fast Floward Bootcamp provides a great example to reinforce all these concepts, and provides Quests to practice your learning.

I want to thank the team at Decentology for providing all this material to learn Flow and Cadence. Their team has gone above and beyond providing an inclusive, welcoming environment, and supporting incoming developers to Web3.

If you are interested in registering for the Fast Floward Bootcamp, register through this link: https://www.decentology.com/blog/fast-floward-developer-bootcamp-for-flow

How I Solved W1Q1 Quest- Frame It!

Samina — Thu, 19 Aug 2021 22:20:09 +0000

Introduction

While working through the 2021 Fast Floward boot camp, you will come across a Quest on the first day that involves printing a "picture" from a provided String of characters. This problem tests your knowledge of the basics of the Cadence programming language: types, variables, structs, and functions.

In this blog post, I will go over how I solved this problem and what challenges I faced when working through it.

Quest

Write a function that displays a canvas in a frame

pub fun display(canvas: Canvas)

Expected Output:

"+-----+"
"|*   *|"
"| * * |"
"|  *  |"
"| * * |"
"|*   *|"
"+-----+"

Solution

The way I always like to start solving problems is to determine the given input and the expected output. Notice for this function they are passing in a parameter called canvas.

Recall from the given program, a canvas is a struct with width, height, and pixels fields. I will use width to help parse the given string of pixels into the expected output.

pub struct Canvas {
    pub let width: UInt8
    pub let height: UInt8
    pub let pixels: String

    init(width: UInt8, height: UInt8, pixels: String) {
        self.width = width
        self.height = height
        self.pixels = pixels
    }
}

First I will tackle the top and bottom borders of the "frame". In addition to the display function, I am going to create a helper function called displayBorder that prints based on the width of the canvas. I will pass the canvas struct as a parameter and declare a variable myString to hold the output.

//helper function for display
pub fun displayBorder(canvas: Canvas) {
    var myString = ""
}

pub fun display(canvas: Canvas) {
    //print top border
    displayBorder(canvas: Canvas)
}

Now, I want to construct the desired output on myString. I will use the concat() method to append the characters myString = myString.concat("+").

//helper function for display
pub fun displayBorder(canvas: Canvas) {
    var myString = ""

    myString = myString.concat("+")
}

pub fun display(canvas: Canvas) {
    //print top border
    displayBorder(canvas: Canvas)
}

After adding the first + I will concatenate - to span the width of the canvas.

Since Cadence doesn't have increment-able for loops (i.e for (var i = 0; i < num; i++)) I am adding a variable called idx set to 0 to help me increment using a while loop. Note when using canvas.width in a comparison, you will need to type cast it into an Int, otherwise you cannot compare Int and UInt8.

//helper function for display
pub fun displayBorder(canvas: Canvas) {
    var myString = ""
    var idx = 0

    myString = myString.concat("+")
    while idx < Int(canvas.width) {
        myString = myString.concat("-")
        idx = idx + 1
    }

}

pub fun display(canvas: Canvas) {
    //print top border
    displayBorder(canvas: Canvas)
}

To finish this helper function, I will add myString = myString.concat("+") one more time and finally log the output.

//helper function for display
pub fun displayBorder(canvas: Canvas) {
    var myString = ""
    var idx = 0

    //build string
    myString = myString.concat("+")
    while idx < Int(canvas.width) {
        myString = myString.concat("-")
        idx = idx + 1
    }
    myString = myString.concat("+")

    log(myString)
}

pub fun display(canvas: Canvas) {
    //print top border
    displayBorder(canvas: Canvas)
}

Now I can add the content inside the canvas plus the left and right borders. For this part I can either create another helper function or leave it inside the display canvas. Because I am only using this code once, I keep the code inside the display function.

For printing the canvas, I am going to use the same idea as I did for displayBorder except I am going to loop through the length of pixels.

I am also using an offset variable equal to the width of the canvas to help navigate each "row" of the canvas.

pub fun display(canvas: Canvas) {
    var idx = 0
    var offset = Int(canvas.width)
    var myString = ""

    //print top border
    displayBorder(canvas: Canvas)

    //print canvas + l/r borders
    while idx < canvas.pixels.length {

    }

}

To build the string for each row, I first concatenate | and then use the slice method to add the pixels for each row. For slice, I am grabbing pixels from idx up until idx + offset at each iteration of the loop.

pub fun display(canvas: Canvas) {
    var idx = 0
    var offset = Int(canvas.width)
    var myString = ""

    //print top border
    displayBorder(canvas: Canvas)

    //print canvas + l/r borders
    while idx < canvas.pixels.length {
        myString = myString.concat("|")
        myString = myString.concat(canvas.pixels.slice(from: idx, upTo: idx + offset))
        myString = myString.concat("|")

        //increment index by offset
        idx = idx + offset
    }

}

Notice how I incremented idx by offset at each iteration. This ensures the index starts and ends at the beginning and end of each row.

To illustrate what I mean, the first time we run our loop our idx is 0 and idx + offset is 5. The second time our idx will be 5 but our idx + offset will be 10 and so on.

At the end of each iteration of the loop I also log and reset myString before looping again.

pub fun display(canvas: Canvas) {
    var idx = 0
    var offset = Int(canvas.width)
    var myString = ""

    //print top border
    displayBorder(canvas: Canvas)

    //print canvas + l/r borders
    while idx < canvas.pixels.length {
        myString = myString.concat("|")
        myString = myString.concat(canvas.pixels.slice(from: idx, upTo: idx + offset))
        myString = myString.concat("|")

        //print and reset string
        log(myString)
        myString = ""
    }

}

To finish this function, I will call our helper function displayBorder once more to create the bottom border.

pub fun display(canvas: Canvas) {
    var idx = 0
    var offset = Int(canvas.width)
    var myString = ""

    //print top border
    displayBorder(canvas: Canvas)

    //print canvas + l/r borders
    while idx < canvas.pixels.length {
        myString = myString.concat("|")
        myString = myString.concat(canvas.pixels.slice(from: idx, upTo: idx + offset))
        myString = myString.concat("|")

        //increment index by offset
        idx = idx + offset

        //print and reset string
        log(myString)
        myString = ""
    }

    //print bottom border
    displayBorder(canvas: Canvas)

}

To wrap everything up, call the display function in main() and test it on the canvasX (example provided by Fast Floward).

display(canvas: CanvasX)

You can see the final version of this program on GitHub.

Conclusion

That's it! Fairly simple but it takes understanding of a few key concepts and a little bit of work to solve this problem.

A challenge I faced was understanding how to reference the different fields from the struct and type casting. I learned that to reference you will need to prefix the field with the name of the struct e.g canvas.width or canvas.pixels. I also did not type cast the fields into Int initially and ran into several errors.

Another challenge I faced was understanding which methods I could use to build the strings for the output. I learned Cadence includes concat() and slice() which I was familiar with from JavaScript and used these two to build my strings.

The last challenge I faced was deciding how to loop through the pixels field to display the canvas. I remembered that in problems involving rows and columns using an offset can help simplify the problem. Drawing this part out on paper helped to visualize where to slice from.

Of course, there will be more efficient ways to solve this problem. Even after solving, I realized I could pass canvas.width into the helper function displayBorder instead of the entire struct.

If you came up with a different solution, let me know what is was in the comments!

Fast Floward BootCamp

If you are interested in registering for the Fast Floward Bootcamp, register through this link: https://www.decentology.com/blog/fast-floward-developer-bootcamp-for-flow

Vires In Numeris

Samina — Thu, 19 Aug 2021 18:41:16 +0000

Lorem ipsum dolor sit amet. And the rest of this post will resume in English.

This past week I have been kept up at night pondering about the world of cryptocurrency. What are the barriers holding back this secure, efficient, and transparent financial system that could profoundly change the world? Is this system truly financially equitable for everyone?

I’ve read some bold statements online and through the media, that claim cryptocurrency “relies on trust.” There is speculation that we need to trust the system to adopt it, the same way we trust the US Dollar or other fiat currencies.

Who do we trust is the next question?

We trust the government and banks with our fiat currencies because of the laws that protect the system. Furthermore, this currency has value because the government gives it value. The downside to this is governments have control over the amount of money in rotation and value. In some cases, this works out to boost the economy. In other cases, it can and has caused trouble.

“It is based on the reality that central banks tinkering with the money supply has induced recessions, exacerbated unemployment, and given rise to a global banking system based on profiteering and corruption.” - James McWhinney, Investopedia (Why Governments Are Afraid of Blockchain)

In contrast, cryptocurrency does not have a central authority or an institution behind it. There is not a single entity or a single individual controlling this technology. It is composed only of people who participate in the system. This initiative gives the power and control back to the people.

In reality, cryptocurrency does not rely on trust. The entire premise of cryptocurrency is we should not need to trust someone or some entity to govern it. The “source of truth” is in the immutable and proven blockchain data.

This brings me to “vires in numeris,” or Latin for strength in numbers.

The proof is ultimately in the numbers.

This famous motto is inscribed on minted Bitcoin and Ledger brand hardware wallets. The idea is relying on the strength of numbers to secure its value instead of central authorities.

After digging, I found the original forum on which the minted phrase was decided: bitcointalk.org/index.php?topic=4994.msg140..

This refreshing piece of digital history illustrates how quickly grand ideas can come to fruition.

So the next time you hear online that for cryptocurrency to be adopted, think vires in numeris; the proof is in the numbers.

One of these days, I will get that tattooed somewhere on my arm.

The Next Ten Months

Samina — Wed, 18 Aug 2021 16:25:44 +0000

Sometimes inspiration strikes when you’re outside. Sometimes it appears when you’re browsing Instagram. Sometimes it hits when your peers are out-lapping you on “life’s biggest milestones.”

In my case, it struck at 2 am while watching My Hero Academia.

That’s right. My Hero Academia, a Japanese anime, has inspired me to keep myself accountable on the next journey in my life from Web2 to Web3.

For those unfamiliar with the series, a boy named Izuku wants to be a hero but was born without the genetic ability to become one. Avoiding major spoilers, Izuku becomes a hero on some condition and must go through ten months of disciplined training to catch up to speed with his peers. The rest of the series follows Izuku’s day-to-day life, the challenges he faces, and his inner monologue and reflections.

Like Izuku, I want to spend ten months focused on Web3 and master this technology that is about to take the world by storm. In the process, I will break down concepts for others who also want to learn Web3, especially those coming from Web2.

I can’t afford to fall behind. I will be going for it with everything I have. -Izuku Midoriya, 'My Hero Academia'.

There are a few action items I have planned for the upcoming future.

I am officially beginning my journey with #100DaysOfWeb3 where I will tweet every day for 100 days something new I learned or what I completed. I encourage you to join me on this challenge if you are also considering a career in Web3 or want to learn more about it!

I am completing the Fast Floward Bootcamp and writing summaries and solutions to help other developers attending future sessions.

I am creating a resources page that will list out all the sources I used to learn. You can catch the latest version of this page on my blog: samina.dev/resources.

Most importantly, I am joining the team at Decentology as a Developer Advocate. Decentology is a Silicon Valley based startup focused on onboarding the next 10 million Web2 developers into Web3. At Decentology, I will be following the steps of Izuku: documenting my journey, the challenges I face, and my reflections.

You can follow snippets journey on the following platforms:

Twitter(#100DaysOfWeb3)

Instagram(Study Inspiration)

Resource Page(List of resources)