2. ZeroLAB
ZeroLAB
Welcome back!
In the last session, we got to know more about consensus protocol – a criticalcomponent of blockchain.We are glad to
have you again in this session!
In this session, we will learn about a common concept used in the blockchain - ‘blockchain token’. Everyone knows
about NFTs and keeps talking about them.But what are they? And how do they actually work? Let’sexplore it together!
I N T R O
3. ZeroLAB
Blockchain Token
> A deep dive into an interesting application of
blockchain technology
By Dr. Alessio Bonti & Jason Pham
6. ZeroLAB
ZeroLAB
The Old English word “tãcen”, which means a
sign or symbol, is where the term "token"
originates. It is frequently used to describe
privately issued special-purpose tokens with
no intrinsic value, such as laundry tokens,
arcade game tokens, and transit tokens.
I N T R O D U C T I O N
7. ZeroLAB
ZeroLAB
The fact that physical tokens are only
occasionally used has a lot to dowith the
connotation that "token" connotes negligible
worth. Physical tokens are not easily
exchangeable and frequently limited to
particular companies, groups, or regions. They
also typically serve a single purpose.
I N T R O D U C T I O N
9. ZeroLAB
ZeroLAB
The term "token" is now being redefined by
blockchain-based abstractions thatcan be owned
and standin for assets, money, or access rights.
D E F I N I T I O N
10. ZeroLAB
ZeroLAB
The limited use of token is also redefined by
blockchain technology.
Blockchain has completely eliminate the
“insignificant value” prejudice of token by lifting
the restriction on its use and ownership.
D E F I N I T I O N
12. ZeroLAB
ZeroLAB
Fungibility
A tokenis fungible if we can swap a single unitof it
with another without anydifference in value or
function.
For example, 1 EURis always equal to another 1
EUR; or 1 Bitcoin can be equally exchanged with
another 1Bitcoin
N A T U R E
13. ZeroLAB
ZeroLAB
Fungibility
Onthe otherhand,non-fungible tokens (NFTs)
“represent unique tangible or intangible artefacts”. So,
one NFT cannot be exchanged with another.
For instance, a tokenrepresentingthe MonaLisa
paintingcannot be exchanged with a tokenthat
represents The Starry Night.
N A T U R E
14. ZeroLAB
ZeroLAB
Intrinsically
Some tokens represent digital artefacts from
inside blockchain network.
Those intrinsic assets are, thus,controlled and
protected by the consensus rules. It implies that
those tokens are free from any additionalproblems
with intermediary parties.
N A T U R E
16. ZeroLAB
ZeroLAB
Based on the natures of the blockchain tokens. There two main ways of utilizing tokens
B L O C K C H A I N T O K E N U T I L I Z A T I O N
Utility Equity
17. ZeroLAB
ZeroLAB
Utility tokens are used to grant their owners
access to a service and/or resource.
For instance, Meta may require you tohave a
“Meta Coin” in your wallet to get you accessed
to the Metaverse.
B L O C K C H A I N T O K E N U T I L I Z A T I O N
18. ZeroLAB
ZeroLAB
Equity tokens are used as representations of
ownership or control shares.
Examples of equity tokens are rangingfrom
representations of firm’s dividends and profits, to
that of votingshares in a Decentralized Autonomous
Organization (DAO), where decision are made based
ondecentralized votes from token owners.
B L O C K C H A I N T O K E N U T I L I Z A T I O N
20. ZeroLAB
ZeroLAB
Currency
A token can be a currency itself.
Resource
A token can be a representation of a resource
generated from sharing activities.
B L O C K C H A I N T O K E N U S E C A S E S
21. ZeroLAB
ZeroLAB
Asset
As mentioned before, a token can represent the
ownership of any asset whether it is tangibleor
intangible, intrinsic or extrinsic.
Identity
A tokencan serve as adigital identity (e.g., driving
licence, citizenshipID, etc.).
B L O C K C H A I N T O K E N U S E C A S E S
22. ZeroLAB
ZeroLAB
Collectible
Tokens can be acquired as collectibles workingas
similar as stamps, but they can be either digital or
physical.
Certification
A tokencan represent a certificate (e.g.,
educational degree, marriage certificate, etc.)
B L O C K C H A I N T O K E N U S E C A S E S
24. ZeroLAB
ZeroLAB
Blockchain tokenis not a solutionto all problems.
Blockchain tokendoes have its own drawbacks just like everything else in the realistic world.
Therefore, you should consider the use of blockchain token carefully. Only use it when you
really need it in your application. Only adopt it if your application cannot do its job withouta
token. And only use it if it genuinely lifts your business barriers and solves your business
problems.
I M P O R T A N T N O T E O N B L O C K C H A I N T O K E N U S A G E
25. ZeroLAB
Time to build
What an interesting lesson about blockchain token it was! It is time for practical
activities.
26. ZeroLAB
ZeroLAB
We have already made a long way through to
the fifth session!
This practical session will show you how to
Upload images to IPFS through a Dapp.
P R A C T I C A L J O U R N E Y
Topics
1. Create and fundyour account with testnet funds.
2. Setup your development environment.
3. Connect account to a Dapp.
4. Write a simple smart contract, deploy and test.
5. Upload images to IPFS through a Dapp.
6. Create NFT on the Dapp and transfer using your
wallet.
28. ZeroLAB
ZeroLAB
The Inter-Planetary File System (IPFS) is a
peer-to-peer distributed file system that
provides data availability, security, integrity,
and performance by using content based
addressing mechanism.
I P F S B R I E F I N T R O
HannahScherwatzky/ONE37pm
29. ZeroLAB
ZeroLAB
In order toupload images to IPFS network, we
need tohave an IPFS node. There are a lot of
providers provide IPFS node as a service. So,
we will use one of them, Infura.
By registering, we will have 5 GBs of
storage for free which is more than
enough for us.
I P F S B R I E F I N T R O
30. ZeroLAB
ZeroLAB
The next four slides show you how to create your own Infura project. This will
store all images that you upload to IPFS through the application later. So, you will
have full control over all uploaded images.
However, if you want to skip this step and use our Infura project instead (the
images you upload later will go into our Infura account), you can go to the GET
PROJECT CREDENTIALS page.
I N F U R A P R O J E C T
31. ZeroLAB
ZeroLAB
C R E A T E I N F U R A A C C O U N T
Go toInfura IPFS(https://infura.io/product/ipfs) > Click “Connect to IPFS now” > Register an account.
32. ZeroLAB
ZeroLAB
C O N F I G U R E P R O J E C T
Choose IPFS as the Network and give your project a cool name > Submit.
33. ZeroLAB
ZeroLAB
C R E A T E I N F U R A A C C O U N T
You will not be charged for anything until you upload 5 GBs of files (around 1400 photos taken by iPhone Xs) to Infura.
So, it is safeto provide your card details here.
34. ZeroLAB
ZeroLAB
G E T P R O J E C T C R E D E N T I A L S
A project ID and a project secret will beprovided after creating an account. We will need this in our application later.
You can use these credentials if you don’t want to create your own Infura account.
35. ZeroLAB
ZeroLAB
Now, we can
clone the ipfs-
image Dapp code
and start working
on it.
C L O N E T H E D A P P
// Change directory to zerolab-prac
cd zerolab-prac
// Clone the ipfs-image repo
git clone https://github.com/jasonhtpham/ipfs-
image.git
// Change directory to ipfs-image
cd ipfs-image
// Launch VS Code for the current directory
code .
Theipfs-imageDappisbuiltontopoftheSetNumberDappfromourlastsession.
37. ZeroLAB
ZeroLAB
B U I L D T H E D A P P
Renamethe file.env.exampleto .env (right clickon the file andchooseRename).This file iswherewewill keepour project ID and
project secret from Infura so that we can usein our codelater,while those secretarekeptin private.
38. ZeroLAB
ZeroLAB
In the .env file, you
need toreplace the
placeholders with
yourInfura project
ID and project
secret.
S E C R E T I N F O
# TODO1: Store Infura project credential in a secret place
REACT_APP_INFURA_PROJECT_ID="<your Infura project ID>"
REACT_APP_INFURA_PROJECT_SECRET="<your Infura project secret>"
39. ZeroLAB
ZeroLAB
B U I L D T H E D A P P
Then, we navigate to the file named ipfs.js in src/helpers/ folder. This is where we initiate our IPFSclient usingInfura.
40. ZeroLAB
ZeroLAB
This piece of code
takes the secrets we
are keeping inthe
.env file toinitiate
our IPFS client.
I P F S N O D E I N I T
// TODO2: Create an IPFS client instance
import { create } from 'ipfs-http-client';
const projectId = process.env.REACT_APP_INFURA_PROJECT_ID;
const projectSecret =
process.env.REACT_APP_INFURA_PROJECT_SECRET;
const auth =
'Basic ' + Buffer.from(projectId + ':' +
projectSecret).toString('base64');
export const ipfs = create({
host: 'ipfs.infura.io',
port: 5001,
protocol: 'https',
headers: {
authorization: auth,
},
});
41. ZeroLAB
ZeroLAB
B U I L D T H E D A P P
After that, we navigate to the file named FileUpload.js in src/components/ folder. This is where we build our frontend
component for the users to upload images to IPFS.
42. ZeroLAB
ZeroLAB
Create a constant to
hold thepublic IPFS
gateway URL. This is
the prefix of the URL
which we will use to
get our uploaded
image.
P R E P A R E G A T E W A Y
// TODO3: Create a constant for the public gateway URL to
retrieve uploaded images from IPFS
const PUBLIC_GATEWAY_URL =
'https://gateway.pinata.cloud/ipfs/';
43. ZeroLAB
ZeroLAB
This piece of code
takes the image
provided by the
user and upload it
to IPFS using the
clientwe initiated in
the previous step.
U P L O A D F U N C T I O N
// TODO4: Create a function to upload the image to IPFS and
return the hash
const handleUploadImage = async (event) => {
const imgObject = event.target.files[0]
imgObject.preview =
URL.createObjectURL(event.target.files[0]);
setImage(imgObject);
try {
const ipfsImage = await ipfs.add(imgObject);
alert(`Image uploaded! Check image by accessing
${PUBLIC_GATEWAY_URL}${ipfsImage.path}`);
} catch (e) {
console.error(e);
}
};
44. ZeroLAB
ZeroLAB
S A V E C H A N G E S
After finish updating, press Ctrl + S or ⌘Command + S to save changes. In the VSCode terminal, run “npmi” to install
packages > Run “npmstart” to launch the application.
45. ZeroLAB
ZeroLAB
U P L O A D I M A G E T O I P F S
In our Dapp, press Upload Image > choosean image of your choice> Open. After a moment, a popup will appear with
the URL of the uploaded image.
46. ZeroLAB
ZeroLAB
G E T U P L O A D E D I P F S I M A G E
Copythe URL and paste it into a new tab. It may take a few minutes to get the image as IPFS public gateway has a rate
limit for requests.
47. ZeroLAB
ZeroLAB
I P F S C I D
In the URL, the part starts with “Qm…” isthe most important part. It is the content identifier version 0 (CID v0) of your
image which is used to uniquely identify your image on the IPFS network.
49. ZeroLAB
We have learned how to upload an image to IPFS network – a useful decentralized file
storage system. Now you can store your files and retrieve them easily and efficiently
on IPFS.
In the nextpractical session, we will take one step further by minting NFT out of
images!
P R A C T I C A L 5
