Learn to build on Celo with Figment Learn

Celo 101

A lot of blockchain projects promise to build a new financial system,but few have thought about mainstream adoption as hard as Celo. With a mobile-first approach where a phone number is all you need to participate in the network, Celo makes cryptocurrency user-friendly and simplifies access to global financial services. Plus, it’s compatible with Ethereum!

Celo

< 1 hour

1 hour

1.5 hours

2 hours +

Beginner

Intermediate

Advanced

Graphql

JS/TS

Solidity

Mobile-first

React

React Native

NodeJS

Smart contracts

Truffle

Javascript

Metamask

Remix

IPFS

Hardhat

Next.js

Payment

Tools & Infra

Time Commitment

Difficulty

Programming Language

Feature

Technology

We no longer host the Pathway pages on this website, the content has moved to the `learn-web3-dapp` repository at <https://github.com/figment-networks/learn-web3-dapp#-get-started>.

The workflow for Pathways is easy to follow:

- Using the `learn-web3-dapp` code repository, you will be running a local development server (`yarn dev`)
- Each Pathway is accessible from the main page displayed when the development server is running
- Once you begin a Pathway, your completion progress is saved in the local storage of your web browser
- Each Pathway has a similar goal: To guide you through using various code libraries to work with different parts of the web3 stack
- Many of the individual steps of a Pathway provide you with coding challenges, so that you can learn by doing
- You will need to complete the code as explained in the instructions before moving on to the next step
- All of the coding challenges have solutions which are blurred until you click on them, to prevent you from being stuck
- Once you have completed a Pathway, you should have a working knowledge of that protocol which will help you tackle larger projects

For less experienced developers or for anybody who wants to dive in without needing to set up a development environment, **[we recommend using Gitpod](https://gitpod.io/#https://github.com/figment-networks/learn-web3-dapp)** to work with the `learn-web3-dapp` project (this requires you to have a GitHub account to sign in). Gitpod can save you a considerable amount of time, as you don't have to install dependencies or set up any software - everything just works! Gitpod provides you with a fully functional Visual Studio Code editor running in your browser, so you can jump right in. This is what it looks like: 

![Gitpod UI](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/gitpod-firstlook.png?raw=true)

If you are an experienced developer, or if you prefer to use a different code editor, [cloning the repo locally](https://github.com/figment-networks/learn-web3-dapp#-clone-locally) is still possible, however you might encounter various system configuration issues depending on how your local environment is set up. It will be more difficult to develop on a Windows system than on Linux or MacOS, and there are also some known issues with developing Solana programs on Windows. It is strongly recommended to use the [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/install#manual-installation-steps) (WSL) if you are running Windows 10. 

If you are cloning the repo locally, a minimum of **NodeJS version 14.17 is required**. Some of the Pathways will require use of the [Rust toolchain](https://rustup.rs/). If you are developing on Linux, you will want to make sure you have the [build-essential](https://itsfoss.com/build-essential-ubuntu/) package installed, as the `cc` linker is required for compiling Solana programs.

Get the balance

Learn how to create a Smart Contract which facilitates crowdfunding.

Celo Crowd Funding Project Tutorial

Setup the project

Learn how to write a smart contract using the Solidity language and a contract from the Openzeppelin library for ERC1155 tokens

How to create a ERC1155 NFT in Celo Network with Hardhat

Transfer some tokens

# Introduction

Remix is an in-browser Solidity IDE that’s used to write, compile and debug Solidity code. Solidity is a high-level, contract-oriented programming language for writing smart contracts. Celo is a close cousin of Ethereum so Celo developers can use many of the resources available for ethereum, Remix being one of them. In this tutorial, we will learn how to set up our development environment on Remix so that we can deploy and interact with celo smart contracts on Alfajores testnet and mainnet directly from Remix.

# Prerequisites

1. Chromium based browser $Example- Google Chrome and Brave$
2. Celo Extension Wallet can be downloaded from [here](https://chrome.google.com/webstore/detail/celoextensionwallet/kkilomkmpmkbdnfelcpgckmpcaemjcdh?hl=en).
3. Funds to deploy contracts on the blockchain. Faucet for Alfajores Testnet can be reached from [here](https://celo.org/developers/faucet).
4. Some previous experience of working with Metamask, Solidity and Remix.

# Adding Celo extension to Remix

Head over to [Remix](https://remix.ethereum.org/) and click on `Plugin Manger`. Here search for **Celo** Plugin and click on **Activate**.

![](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/celo-extension-first.JPG)

Now we should be able to see **Celo** icon in Icon Tray.

Our development area should look like this.

![](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/celo-extension-added.JPG)

# Connecting Celo Extension Wallet to Remix

After making sure we have selected Alfajores testnet account in Celo Extension Wallet 1. Click on the **Connect** button in the account tab. 2. Allow celo-extension-wallet to connect to Remix.

Now we will be able to see our Celo Balance in the Balance tab.

**MAKE SURE NETWORK SELECTED IS `Alfajores`**

# Deploying Smart Contract on Alfajores Testnet

We will deploy a very simple smart contract for this tutorial.

Create a new file named `simple_contract.sol` from file explorer and copy the following content.

```solidity
// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.7.0 <0.8.0;

/**
 * @title Storage
 * @dev Store & retrieve value in a variable
 */
contract Storage {

    uint256 number;

    /**
     * @dev Store value in variable
     * @param num value to store
     */
    function store(uint256 num) public {
        number = num;
    }

    /**
     * @dev Return value 
     * @return value of 'number'
     */
    function retrieve() public view returns (uint256){
        return number;
    }
}
```

Let's go back to Celo Plugin and click on **Compile**.

After compiling the successfully, we are ready to deploy our contract.

Click on the **Deploy** button and sign the transaction using your wallet.

![](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/celo-extension-deploy-button%20%281%29%20%281%29%20%281%29.JPG)

Yay! we have successfully deployed our contract to the Alfajores Testnet. We can check the status of the transaction on [Alfajores Blockscout](https://alfajores-blockscout.celo-testnet.org/) by pasting the transaction hash.

Now try playing around with the store and retrieve the functionality of our smart contract. We can use similar instructions for deploying contracts on mainnet by selecting **Celo Main Network** in celo-extension-wallet but we will need real celo in that case.

# Potential errors and their solutions

## Connect button in Celo extension connects to Metamask.

If you have both metamask and Celo extension wallet installed then this problem can arise. You can uninstall metamask and everything will work fine. If you don't want to remove metamask extension then you can work with celo extension wallet in incognito mode. Just click on the Extensions icon on the chrome extension tray, select celo extension wallet and click on options, and select manage extension, Here click on allow In Incognito. Now you are all set to go.

## Celo extension doesn't work on incognito mode

Celo extension requires your cookie permissions to work properly which is not given by default in incognito mode. Head over to `chrome://settings/content/cookies` and select allow all cookies option in general settings.


Learn how to use Remix IDE for deploying Celo smart contracts

Deploy Celo Smart contracts with Remix IDE

[**The original tutorial can be found in the Celo documentation here**](https://docs.celo.org/v/master/developer-guide/start/hello-mobile-dapp). 

# Introduction

This tutorial includes a walk through of a truffle box to get you started with developing React Native DApps on Celo. We will touch on several key concepts in Celo DApp development including:

* Creating accounts $private keys$
* Basic smart contract development in Solidity
* Sending transactions to a Celo network
* View transactions with a block explorer
* Mobile development using React Native and Expo

**Mandatory:** Make sure that you have the [Yarn package manager](https://yarnpkg.com/), [Truffle](https://www.trufflesuite.com/truffle) installed and **are using Node.js version 10.x**, then `$ truffle unbox critesjosh/celo-dappkit` in your new project directory. This will download the code from [this GitHub repo](https://github.com/critesjosh/celo-dappkit) to get you started.

Use this [Truffle Box](https://www.trufflesuite.com/boxes) to get started building a mobile DApp using Celo and React Native in Javascript. We will build a simple React Native application that we can use to read and update a contract on the Alfajores test network.

Once you download the box, run `$ yarn` to install the necessary smart contract development dependencies. Navigate to the client directory and run `$ yarn` again to install the client application dependencies.

This Truffle box uses React Native and Expo for developing a mobile first Celo blockchain experience. You will also need Expo installed globally on your machine. Install it with:

```javascript
$ npm install expo-cli --global
```

# Smart contract development

The project comes with a Hello World example contract in the root contracts directory. The box is also configured to deploy Solidity smart contracts to the Alfajores test network, but you will need test network funds to pay for the deployment costs.

Run the command:

```
npm run account
```

This will create a new account for development. The new account address will be printed in the console. This script will generate a private key for you and store it in `/.secret`. If you need to print the account info again, run `$ npm run account` again, it will not create a new account, it will read the saved private key and print the corresponding account address.

Truffle will read this private key for contract deployments.

Copy your account address and paste it in to the [Alfajores faucet](https://celo.org/developers/faucet) to fund your account.

You can migrate the `HelloWorld.sol` contract to the alfajores test network with the command:

```
truffle migrate --network alfajores
```

To run a local development Celo blockchain, use the Celo fork of `ganache-cli`. You can find the package details and install instructions [here.](https://www.npmjs.com/package/@celo/ganache-cli)

You should deploy the `HelloWorld.sol` contract to work through the exercise. You can deploy it using the remote node specified in `truffle-config.js`. You may get an error about connecting to a running RPC client. If you run into the error, trying running `truffle migrate --network alfajores` again. A successful deployment should print something like the following:

```
Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.


Starting migrations...
======================
> Network name:    'alfajores'
> Network id:      44787
> Block gas limit: 0x1312d00


1_initial_migration.js
======================

   Deploying 'Migrations'
   ----------------------
   > transaction hash:    0x8a7d5f323ef9e356407566ded4d191e3b68b0ba579c5a7b920e5dea3936bb101
   > Blocks: 0            Seconds: 4
   > contract address:    0x6363f95B5dDe5bbb1A73dbdc752036e105769207
   > block number:        587188
   > block timestamp:     1583779418
   > account:             0x0ac6eDb733EAB57f8fa6c0F8678de0b9ef950bc6
   > balance:             4.98552399999999992
   > gas used:            188419
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00376838 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00376838 ETH


2_deploy_contracts.js
=====================

   Deploying 'HelloWorld'
   ----------------------
   > transaction hash:    0xb48d8f2da01f49b6ebe3dd2391b289c735afd2ec1b57902a5bd3958c4b5773b3
   > Blocks: 1            Seconds: 4
   > contract address:    0xD9BBC1c3C76bd285C33de5Df4b987369EC66DC56
   > block number:        587190
   > block timestamp:     1583779428
   > account:             0x0ac6eDb733EAB57f8fa6c0F8678de0b9ef950bc6
   > balance:             4.979126059999999888
   > gas used:            277896
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00555792 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00555792 ETH


Summary
=======
> Total deployments:   2
> Final cost:          0.0093263 ETH
```

Since we are developing this on the public Alfajores test network, we can view all the accounts, contracts and transactions on the [public block explorer](https://alfajores-blockscout.celo-testnet.org/).

You can look up the contract deployment transaction on the Alfajores block explorer via the transaction hash, [https://alfajores-blockscout.celo-testnet.org/tx/0xb48d8f2da01f49b6ebe3dd2391b289c735afd2ec1b57902a5bd3958c4b5773b3](https://alfajores-blockscout.celo-testnet.org/tx/0xb48d8f2da01f49b6ebe3dd2391b289c735afd2ec1b57902a5bd3958c4b5773b3) in this case.

Truffle will save the deployment information to the Truffle artifact located at `client/contracts/HelloWorld.json`. You will use this deployment information to connect your React Native application to the correct contract.

# Developing the mobile application

Keep in mind that you will need a version of the Celo Wallet installed on the mobile device with which you are developing the application. The Celo Wallet is the private key management software used to sign transactions for the user.

You can build a the latest version of the Celo Wallet and find instructions on running a development build [here.](https://github.com/celo-org/celo-monorepo/tree/master/packages/mobile) Once you have a device with the Celo wallet installed, you can start working on your application.

For the purposes of introduction, we have added some code to you get you started located in App.js in the `client` directory.

## Application development with Expo

In this project, the React Native application lives in the `client` directory. `cd` into the client directory and run `$ yarn` to install the dependencies.

[Expo](https://expo.io/) is a tool that makes developing React Native applications much easier. We will be using Expo for easy setup.

Install it with:

```
npm install expo-cli --global
```

You can start the application with

```
expo start
```

You can use your physical mobile device or an emulator to develop apps with Expo. If you want to use your physical device, you will have to [install the Expo app on your device.](https://expo.io/learn)

## Using an emulator

You can find more information about running and Android emulator [here.](https://developer.android.com/studio/run/emulator-commandline)

## Celo DApp Examples

[Celo Savings Circle](https://github.com/celo-org/savings-circle-demo)

# Conclusion

You should now have the necessary skills to get started with developing mobile applications on Celo. In this tutorial we covered:

* Creating accounts $private keys$
* Basic smart contract development in Solidity
* Sending transactions to a Celo network
* View transactions with a block explorer
* Mobile development using React Native and Expo

This is not a comprehensive tutorial for Celo's features and capabilities, keep exploring the docs to learn more. 


Learn how to create a simple mobile DApp using dAppKit and the React Native Expo framework

Hello Mobile DApp


{% embed url="https://www.youtube.com/watch?v=OgIiySTRGQE" caption="Subgraphs for Celo video tutorial" %}

# What is the Graph Protocol?

The Graph protocol lets you create GraphQL APIs called subgraphs for your smart contracts. Sounds like a lot? We'll break it down.

## What is GraphQL?

GraphQL is a query language for web APIs. Instead of having multiple dumb endpoints, we can have a smart GraphQL endpoint which:

* Lets you view the API schema. Schemas are auto-generated, so say goodbye to writing swagger files!
* Lets you fetch exactly what you want in a single query.

{% embed url="http://www.youtube.com/watch?v=eIQh02xuVw4" caption="GraphQL in 100 seconds" %}

## I'm able to read my contract data. Why use another protocol?

Querying a blockchain directly needs additional setup. For this you need access to a Celo node, plus a frontend library like `web3.js`.

In contrast, you can directly query GraphQL from your app or command line.

## How does it work?

1. Blockchains store a permanent history of transactions. Graph protocol indexes the transactions for our contract, similar to how Google indexes the internet. We can query these transactions through a GraphQL schema.
2. Smart contracts let us define and trigger events. For example, when we transfer ERC20 tokens to someone, a `transfer` event is triggered. Graph protocol listens to these events in real time and updates it's data. This way, we always get the latest data.
3. The Graph protocol is decentralized. We don't need to worry about API server going down.

# Show me the code!

**Resources:**

1. [Source code](https://github.com/secretshardul/the-graph-celo)
2. [Deployed subgraph](https://thegraph.com/explorer/subgraph/secretshardul/celo-subgraph-tutorial)
3. [Deployed Celo contract](https://explorer.celo.org/address/0x56d04968f959ae609a32c8eadb8cd3db90490a7f/transactions)

We will create a subgraph for a gravatar contract deployed on the Celo mainnet. This is a fork of the official Graph tutorial with modifications made for Celo.

- Visit the Graph Protocol website and sign in with Github.
- Go to your dashboard and click on **Add Subgraph**. Fill in the required details and click on **Create subgraph**.

   ![Create subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/celo-subgraph-01-dashboard-create-new.png)

- Follow the steps shown on the dashboard with a small variation.

![Create subgraph](https://github.com/figment-networks/learn-tutorials/raw/master/assets/celo-subgraph-02-dashboard-instructions.png)

1. Install Graph CLI using NPM or Yarn.

```bash
npm install -g @graphprotocol/graph-cli
```
**OR**
```bash
yarn global add @graphprotocol/graph-cli
```

2. Initialize the Celo starter project. We have diverged from the instructions because we're building on Celo.

```bash
git clone https://github.com/secretshardul/the-graph-celo.git
```

**Install node dependencies using**

```bash
yarn
```
**OR**
```bash
npm install
```

3. Deploying

```bash
# Authenticate Graph CLI. The access token is displayed on your subgraph dashboard.
graph auth https://api.thegraph.com/deploy/ <ACCESS_TOKEN>

# Deploy to The Graph
graph deploy \
    --debug \
    --node https://api.thegraph.com/deploy/ \
    --ipfs https://api.thegraph.com/ipfs/ \
    <SUBGRAPH_NAME>
```

You should get an output similar to

```bash
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
Compile data source: Gravity => build/Gravity/Gravity.wasm
✔ Compile subgraph
Copy schema file build/schema.graphql
Write subgraph file build/Gravity/abis/Gravity.json
Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
Add file to IPFS build/schema.graphql
                .. QmbSFRGGvHM7Cn8YSjDL41diDMxN4LQUDEMqaa5VVc5sC4
Add file to IPFS build/Gravity/abis/Gravity.json
                .. QmajZTadknSpgsCWRz9fG6bXFHdpVXPMWpx9yMipz3VtMQ
Add file to IPFS build/Gravity/Gravity.wasm
                .. QmbK8bwncci52cstF3P8Q8i4oGjrMt1pUqdv5Uf1VXqXdb
✔ Upload subgraph to IPFS

Build completed: QmXWN5HVtKsRdCKc7HUthjvuyPiwkCNeYJQknsAa5AqQ8K

Deployed to https://thegraph.com/explorer/subgraph/secretshardul/celo-subgraph-tutorial

Subgraph endpoints:
Queries (HTTP):     https://api.thegraph.com/subgraphs/name/secretshardul/celo-subgraph-tutorial
Subscriptions (WS): wss://api.thegraph.com/subgraphs/name/secretshardul/celo-subgraph-tutorial
```

4. Refresh the page to see your deployed subgraph. It can take some hours for data to be synced, after which our queries will return the desired results.

![Query explorer](https://github.com/figment-networks/learn-tutorials/raw/master/assets/celo-subgraph-03-query-explorer.png)

5. Time to run a GraphQL query! A default query is given which gets data of the first five gravatars. Press the run button. Here's the query again for reference:

```graphql
# Get details of first five gravatars
{
    gravatars(first: 5) {
        id
        owner
        displayName
        imageUrl
    }
}
```

You will get a result similar to

```json
{
    "data": {
        "gravatars": [
            {
                "displayName": "Carl",
                "id": "0x0",
                "imageUrl": "https://thegraph.com/img/team/team_04.png",
                "owner": "0x243566e830705ce95b09ae66705c8b291b333310"
            }
        ]
    }
}
```

**Note**: Wait for the syncing to complete, otherwise you will see an empty result.

6. How to use subgraphs in our apps? I've created a Postman public workspace for demonstration. [Visit the Celo subgraph workspace](https://www.postman.com/cloudy-firefly-3880/workspace/the-graph-celo/request/9305744-4a75a867-c2b3-446b-be18-864c7e6550eb). You can try out the predefined queries by pressing the run button.

Press the code button on the right side. Select the language of your choice to get the generated code. For example we get this snippet for cURL. Paste it in your terminal to see the result.

**Postman generate code button**

![Postman generate code button](https://github.com/figment-networks/learn-tutorials/raw/master/assets/celo-subgraph-04-postman-code-button.png)

**Postman generated code results**

![Postman generated code results](https://github.com/figment-networks/learn-tutorials/raw/master/assets/celo-subgraph-05-postman-generated-code.png)

```bash
curl --location --request POST 'https://api.thegraph.com/subgraphs/name/secretshardul/the-graph-celo' \
    --header 'Content-Type: application/json' \
    --data-raw '{"query":"{\n  gravatars(first: 5) {\n    id\n    owner\n    displayName\n    imageUrl\n  }\n}\n","variables":{}}'
```

# Explanation

We have a pre-deployed contract `GravatarRegistry`.
* Gravatar stands for 'Globally Recognized Avatar'. They are profile pictures that are guaranteed to be unique. Did you know that the default avatars on GitHub and StackOverflow are actually gravatars? 

This smart contract crates a registry for Gravatars. It has the following features:
* Create new gravatar
* View gravatars of other users
* Update name and image of your gravatar

```javascript
pragma solidity ^0.4.0;

contract GravatarRegistry {
    event NewGravatar(uint id, address owner, string displayName, string imageUrl);
    event UpdatedGravatar(uint id, address owner, string displayName, string imageUrl);

    struct Gravatar {
        address owner;
        string displayName;
        string imageUrl;
    }

    Gravatar[] public gravatars;

    mapping (uint => address) public gravatarToOwner;
    mapping (address => uint) public ownerToGravatar;

    function createGravatar(string _displayName, string _imageUrl) public {
        require(ownerToGravatar[msg.sender] == 0);
        uint id = gravatars.push(Gravatar(msg.sender, _displayName, _imageUrl)) - 1;

        gravatarToOwner[id] = msg.sender;
        ownerToGravatar[msg.sender] = id;

        emit NewGravatar(id, msg.sender, _displayName, _imageUrl);
    }

    function getGravatar(address owner) public view returns (string, string) {
        uint id = ownerToGravatar[owner];
        return (gravatars[id].displayName, gravatars[id].imageUrl);
    }

    function updateGravatarName(string _displayName) public {
        require(ownerToGravatar[msg.sender] != 0);
        require(msg.sender == gravatars[ownerToGravatar[msg.sender]].owner);

        uint id = ownerToGravatar[msg.sender];

        gravatars[id].displayName = _displayName;
        emit UpdatedGravatar(id, msg.sender, _displayName, gravatars[id].imageUrl);
    }

    function updateGravatarImage(string _imageUrl) public {
        require(ownerToGravatar[msg.sender] != 0);
        require(msg.sender == gravatars[ownerToGravatar[msg.sender]].owner);

        uint id = ownerToGravatar[msg.sender];

        gravatars[id].imageUrl =  _imageUrl;
        emit UpdatedGravatar(id, msg.sender, gravatars[id].displayName, _imageUrl);
    }

}
```

Note the events `NewGravatar` and `UpdatedGravatar` in the code above. The Graph protocol updates its index with fresh data whenever events are fired.
Look at [subgraph.yaml](https://github.com/secretshardul/the-graph-celo/blob/master/subgraph.yaml), which is the starting point for creating subgraphs. It contains the following information:
   * Subgraph description and source code repository
   * GraphQL schema file location
   * Contract related data: contract name, network, address and ABIs
   * Events to listen to. We are listening to `NewGravatar(uint256,address,string,string)` and `UpdatedGravatar(uint256,address,string,string)` events.
   * **Event handlers**: Graph protocol reads the transaction data whenever a registered event is fired. This raw transaction data must be processed before it can be useful. Event handlers specify what data points must be read, and are responsible for populating this data into the GraphQL schema. Note the event handlers `handleNewGravatar` and `handleUpdatedGravatar`.

```yaml
specVersion: 0.0.2
description: Gravatar contract subgraph for Celo
repository: https://github.com/secretshardul/the-graph-celo
schema:
file: ./schema.graphql
dataSources:
- kind: ethereum/contract
    name: Gravity
    network: celo
    source:
    address: '0x56d04968f959ae609a32c8eadb8cd3db90490a7f' # Deployed contract address
    abi: Gravity
    mapping:
    kind: ethereum/events
    apiVersion: 0.0.4
    language: wasm/assemblyscript
    entities:
        - Gravatar
    abis:
        - name: Gravity
        file: ./abis/Gravity.json
    eventHandlers:
        - event: NewGravatar(uint256,address,string,string)
        handler: handleNewGravatar
        - event: UpdatedGravatar(uint256,address,string,string)
        handler: handleUpdatedGravatar
    file: ./src/mapping.ts
```

Look at the event handler code in [src/mapping.ts](https://github.com/secretshardul/the-graph-celo/blob/master/src/mapping.ts).
Note how `owner`, `displayName` and `imageUrl` fields are updated and saved.

```typescript
import { NewGravatar, UpdatedGravatar } from '../generated/Gravity/Gravity'
import { Gravatar } from '../generated/schema'

// Save details whenever a new gravatar is created
export function handleNewGravatar(event: NewGravatar): void {
    let gravatar = new Gravatar(event.params.id.toHex())
    gravatar.owner = event.params.owner
    gravatar.displayName = event.params.displayName
    gravatar.imageUrl = event.params.imageUrl
    gravatar.save()
}

// Update index data whenever gravatar data is updated on the smart contract
export function handleUpdatedGravatar(event: UpdatedGravatar): void {
    let id = event.params.id.toHex()
    let gravatar = Gravatar.load(id)
    if (gravatar == null) {
        gravatar = new Gravatar(id)
    }
    gravatar.owner = event.params.owner
    gravatar.displayName = event.params.displayName
    gravatar.imageUrl = event.params.imageUrl
    gravatar.save()
}
```

Look at [schema.graphql](https://github.com/secretshardul/the-graph-celo/blob/master/schema.graphql). Note that we had declared `Gravatar` as an entity in [subgraph.yaml](https://github.com/secretshardul/the-graph-celo/blob/master/subgraph.yaml). We define our entity `Gravatar` here using the `@entity` annotation.

```yaml
type Gravatar @entity {
    id: ID!
    owner: Bytes!
    displayName: String!
    imageUrl: String!
}
```

Look at [migrations/3\_create\_gravatars.js](https://github.com/secretshardul/the-graph-celo/blob/master/migrations/3_create_gravatars.js). When this contract was created, we created a gravatar for Carl for demonstration purposes.

```javascript
const GravatarRegistry = artifacts.require('./GravatarRegistry.sol')

module.exports = async function(deployer) {
    const registry = await GravatarRegistry.deployed()

    console.log('Account address:', registry.address)

    let accounts = await web3.eth.getAccounts()
    console.log('Accounts', accounts)
    await registry.createGravatar('Carl', 'https://thegraph.com/img/team/team_04.png', {
        from: accounts[0],
    })
}
```

# Creating subgraphs for your own contracts

Make changes to the contracts. You may want to edit or replace [Gravity.sol](https://github.com/secretshardul/the-graph-celo/blob/master/contracts/Gravity.sol) with your custom contract.
Create a file `.env` which will contain environment variables. Look at [.env-template](https://github.com/secretshardul/the-graph-celo/blob/master/.env-template) for the required format. 
We need two variables: 
- `DATAHUB_API_KEY`: Sign up for Datahub and pick Celo from the available protocols. Copy the API key and paste it here. DataHub provides private RPC endpoints for popular blockchains, letting us create high performance apps. We get a free tier of 100k requests per day.
- `PRIVATE_KEY`: Private key of a Celo account. This is different from your Mnemonic. You will need real CELO tokens on this account since we are deploying to the mainnet.

You can optionally look at [truffle.js](https://github.com/secretshardul/the-graph-celo/blob/master/truffle.js) to see how these parameters are used in code. This script is responsible for compiling our code and deploying it to Celo.

```javascript
    require('babel-register')
    require('babel-polyfill')
    require('dotenv').config()

    const HDWalletProvider = require('truffle-hdwallet-provider')
    const ContractKit = require('@celo/contractkit')
    const Web3 = require('web3')

    // We need a Celo provider so that contract can be deployed to Celo
    function getCeloProvider(network) {
    const web3 = new Web3(`https://celo-${network}--rpc.datahub.figment.io/apikey/${process.env.DATAHUB_API_KEY}/`)
    const account = web3.eth.accounts.privateKeyToAccount(process.env.PRIVATE_KEY)

    const client = ContractKit.newKitFromWeb3(web3)
    client.addAccount(account.privateKey)
    return client.web3.currentProvider
    }

    const alfajoresProvider = getCeloProvider('alfajores')
    const celoMainnetProvider = getCeloProvider('mainnet')

    module.exports = {
    networks: {
        development: { // Local development
            host: '127.0.0.1',
            port: 9545,
            network_id: '*',
        },
        // Change network to celo-alfajores in subgraph.yaml for testnet support
        celo-alfajores: {
            provider: alfajoresProvider,
            network_id: '44787',
            skipDryRun: true,
        },
        celo: {
            provider: celoMainnetProvider,
            network_id: '42220'
        },
    },
    compilers: {
        solc: {
        version: '0.4.25'
        }
    }
    }
```

Run the deployment script. This will build your contract and deploy it on Celo mainnet. Ensure that you have Celo tokens on your address.

```
truffle migrate --network celo
```

   You should get a result similar to

```text
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
Compile data source: Gravity => build/Gravity/Gravity.wasm
✔ Compile subgraph
Copy schema file build/schema.graphql
Write subgraph file build/Gravity/abis/Gravity.json
Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
Add file to IPFS build/schema.graphql
                .. QmbSFRGGvHM7Cn8YSjDL41diDMxN4LQUDEMqaa5VVc5sC4
Add file to IPFS build/Gravity/abis/Gravity.json
                .. QmajZTadknSpgsCWRz9fG6bXFHdpVXPMWpx9yMipz3VtMQ
Add file to IPFS build/Gravity/Gravity.wasm
                .. QmbK8bwncci52cstF3P8Q8i4oGjrMt1pUqdv5Uf1VXqXdb
✔ Upload subgraph to IPFS

Build completed: QmXWN5HVtKsRdCKc7HUthjvuyPiwkCNeYJQknsAa5AqQ8K

Deployed to https://thegraph.com/explorer/subgraph/secretshardul/celo-subgraph-tutorial

Subgraph endpoints:
Queries (HTTP):     https://api.thegraph.com/subgraphs/name/secretshardul/celo-subgraph-tutorial
Subscriptions (WS): wss://api.thegraph.com/subgraphs/name/secretshardul/celo-subgraph-tutorial
```

Note the address of the deployed contract. Replace the address field in [subgraph.yaml](https://github.com/secretshardul/the-graph-celo/blob/master/subgraph.yaml) with this field.
Depending on your contract, you may need to edit the [handler code](https://github.com/secretshardul/the-graph-celo/blob/master/src/mapping.ts) and [GraphQL schema](https://github.com/secretshardul/the-graph-celo/blob/master/schema.graphql). Here are some subgraph templates to help you out:
   * [ERC 20 Fungible Tokens](https://github.com/secretshardul/the-graph-celo/blob/master/schema.graphql)
   * [ERC 721 Non-Fungible Tokens$NFTs$](https://github.com/wighawag/eip721-subgraph)

Generate Graph build files using

```bash
yarn codegen
# or
npm run codegen
```

You will get an output similar to

```text
yarn run v1.22.10
$ graph codegen
Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
Skip migration: Bump mapping specVersion from 0.0.1 to 0.0.2
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
Load contract ABI from abis/Gravity.json
✔ Load contract ABIs
Generate types for contract ABI: Gravity (abis/Gravity.json)
Write types to generated/Gravity/Gravity.ts
✔ Generate types for contract ABIs
✔ Generate types for data source templates
✔ Load data source template ABIs
✔ Generate types for data source template ABIs
✔ Load GraphQL schema from schema.graphql
Write types to generated/schema.ts
✔ Generate types for GraphQL schema

Types generated successfully

✨  Done in 16.31s.
```

Run the Graph protocol [deployment script](subgraphs-on-celo.md#3-show-me-the-code) mentioned earlier.

## Caveats and considerations

1. Deployed subgraphs can't be renamed or deleted, although they can be updated.
2. Subgraphs only support reads/queries. You can't send transactions to update the blockchain state!

## Further reading

* [The Graph documentation](https://thegraph.com/docs/)
* [graphql.org](https://graphql.org/)

# Conclusion

We have learned how the Graph protocol is helpful, and how we can build and deploy our own subgraphs.
# About the author

This tutorial was created by Shardul Aeer, a full stack developer exploring the brave new world of Web3 and blockchain. Follow his journey on:

* [GitHub](https://github.com/secretshardul)
* [LinkedIn](https://www.linkedin.com/in/shardul-aeer-96084a172)
* [Twitter](https://twitter.com/AeerShardul)


Learn how to integrate The Graph with CELO

Create subgraphs for Celo smart contracts

[**The original tutorial can be found in the Celo documentation here**](https://docs.celo.org/developer-guide/start/hellocelo). 

# Introduction

In this guide, we are going to write a Node.js script to introduce some of the basic concepts that are important to understand how Celo works. This will get us started with connecting to the Celo network and learning how to develop more advanced applications.

{% hint style="info" %}
We assume you already have Node.js and NPM installed on your computer.
{% endhint %}

# Learning Objectives

At the end of this guide, you will be able to:

* Connect to the Celo test network, called Alfajores
* Get test CELO and Celo Dollars $cUSD$ from the faucet
* Read account and contract information from the test network
* Transferring CELO and cUSD on the test network

# Getting Started

To start, [clone this GitHub repo](https://github.com/critesjosh/helloCelo). This is a Node.js application.

```
git clone https://github.com/critesjosh/helloCelo.git
```

We will be using the Celo ContractKit SDK to interact with the Celo test network $Alfajores$. Let's install it. It is already defined in the package.json, so we can get it with

```
npm install
```

## Importing ContractKit

We will be writing our Node.js app in the `helloCelo.js` file.

Import the contract kit into our script with

```javascript
// 1. Import web3 and contractkit 
const Web3 = require("web3")
const ContractKit = require('@celo/contractkit')
```

Now we can use the ContractKit to connect to the test network.

```javascript
// 2. Init a new kit, connected to the alfajores testnet
const web3 = new Web3('https://alfajores-forno.celo-testnet.org')
const kit = ContractKit.newKitFromWeb3(web3)
```

{% hint style="info" %}
At any point in the file you can `console.log()` variables to print their output when you run the script.
{% endhint %}

## Reading Alfajores

ContractKit contains a `contracts` property that we can use to access certain information about deployed Celo contracts.

> The Celo blockchain has two native assets, CELO $CELO$ and the Celo Dollar $cUSD$. Both of these assets implement the [ERC20 token standard](https://eips.ethereum.org/EIPS/eip-20) from Ethereum. 
> The CELO asset is managed by the CELO smart contract and Celo Dollars is managed by the cUSD contract. We can access the CELO contract via the SDK with `kit.contracts.getGoldToken()` and the cUSD contract with `kit.contracts.getStableToken()`. These functions return promises, so we have to wait for them to resolve before we can interact with the token contracts. If you are unfamiliar with Promises in Javascript, [check out this documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). 
> Promises are encountered frequently in blockchain development. In this guide, we use the [async/await syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) for promises.

Let's read some token balances from the blockchain. Add the following line in the `readAccount()` function.

```javascript
// 3. Get the token contract wrappers
let goldtoken = await kit.contracts.getGoldToken()
let stabletoken = await kit.contracts.getStableToken()
```

We can get the CELO balance of an account using the token wrappers like `goldtoken.balanceOf(address)`. Let's check the balance of this address `'0xD86518b29BB52a5DAC5991eACf09481CE4B0710d'`.

```javascript
// 4. Address to look up
let anAddress = '0xD86518b29BB52a5DAC5991eACf09481CE4B0710d'

// 5. Get token balances
let celoBalance = await goldtoken.balanceOf(anAddress)
let cUSDBalance = await stabletoken.balanceOf(anAddress)

// Print balances
console.log(`${anAddress} CELO balance: ${celoBalance.toString()}`)
console.log(`${anAddress} cUSD balance: ${cUSDBalance.toString()}`)
```

The `balanceOf(address)` function also returns a Promise, so we wait for the promise to resolve then we print the result.

To view the balances, run the script from the termainal with

```
node helloCelo.js
```

> You may notice that we convert the balance to a string before we print it. This is because the `balanceOf()` function returns a [BigNumber](https://github.com/MikeMcl/bignumber.js/).
> Javascript does not have floating point numbers, so it is common to convert integers to large numbers before doing arithmetic. So 1 CELO = 10\*\*18 base units of CELO. 
> The `balanceOf()` function returns the account balance in these base units. Converting the BigNumber to a string converts the BigNumber object into a more legible string. 

Reading all account balances is a powerful feature of blockchains. Next, let's see how we can send value to each other on the testnet.

In order to do transfers $aka [transactions](https://docs.celo.org/getting-started/glossary#transaction)$, we need to:

1. Create an [account](https://docs.celo.org/getting-started/glossary#account) $by creating a private key$
2. Fund it with test CELO and cUSDs
3. Sign and send transactions to the network

# Accounts

We are accessing the Celo network via a remote [node](https://docs.celo.org/getting-started/glossary#node) via HTTP requests at `'https://alfajores-forno.celo-testnet.org'`.

> Don't worry about what this means right now, just understand that it is easier to get started using Celo by accessing remote nodes, rather than running them locally on your machine.
> You can read more about [the details of the Celo network](https://github.com/critesjosh/celo-monorepo/tree/8542c1bc3ad32bc48eed33073f4d34a36fd91fae/packages/docs/celo-sdk/walkthroughs/overview.md#topology-of-a-celo-network).​

Because we are accessing the network remotely, we need to generate an account to sign transactions and fund that account with test CELO.

There is a short script in `getAccount.js` to either get a Celo account from a mnemonic in the `.secret` file, or create a random account if the file is empty. In the script, we use`web3.js` to create a new private key/account pair. [Web3.js](https://web3js.readthedocs.io/en/v1.2.6/) is a popular javascript library for handling Ethereum related functionality. Celo is a cousin of Ethereum, so this library works well for generating Celo accounts.

{% hint style="danger" %}
This is not the standard way of managing Celo accounts. In a production environment, the [Celo Wallet](https://docs.celo.org/celo-codebase/wallet) will manage accounts for you. Accessing accounts from the Celo Wallet will be discussed in future guides.
{% endhint %}

We can now use this `account` to get account information $ie the private key and account address$ and to send transactions from `account.address`. Add the following code to read the account balance. Continue adding to `helloCelo.js`.

```javascript
// Create an Account

// 6. Import the getAccount function
const getAccount = require('./getAccount').getAccount

async function createAccount(){
    // 7. Get your account
    let account = await getAccount()

    // 8. Get the token contract wrappers
    let goldtoken = await kit.contracts.getGoldToken()
    let stabletoken = await kit.contracts.getStableToken()

    // 9. Get your token balances
    let celoBalance = await goldtoken.balanceOf(account.address)
    let cUSDBalance = await stabletoken.balanceOf(account.address)

    // Print your account info
    console.log(`Your account address: ${account.address}`)
    console.log(`Your account CELO balance: ${celoBalance.toString()}`)
    console.log(`Your account cUSD balance: ${cUSDBalance.toString()}`)
}
```

Run this script again with `node helloCelo.js`. This will print `0`, as we have not funded the associated account yet.

# Using the faucet

We can get free test CELO and cUSDs on the test network for development via the [Celo Alfajores faucet](https://celo.org/build/faucet).

Copy your randomly generated account address from the console output mentioned above, and paste it into the faucet.

Once your account has been funded, run the command `node helloCelo.js` again to see your updated balance.

# Sending Value

We have an account with CELO and cUSD in it, now how do we send tokens to another account? Remember the token wrappers we used to read account balances earlier? We can use the same wrappers to send tokens, you just need to add the private key associated with your account to ContractKit $see line 10$.

The token wrappers have a method called `transfer(address, amount)` that allows you to send value to the specified address $line 14$.

You need to `send()` the transaction to the network after you construct it. The `send()` methods accepts an option that allows you to specify the `feeCurrency`, which allows the sender to pay transaction fees in CELO or cUSD. The default `feeCurrency` is CELO. In the following example, let's pay transaction fees in CELO when we transfer CELO and pay with cUSD when we transfer cUSD.

The `send()` method returns a transaction object. We will wait for the transaction receipt $which will be returned when the transaction has been included in the blockchain$ and print it when we get it. This receipt contains information about the transaction.

After we read the receipt, we check the balance of our account again, using the `balanceOf()` function. The logs print our updated balance!

You may notice that the account balance is a bit smaller than the amount of tokens that we sent. This is because you have to pay for every update to the network.

Add the following code to the `send()` function in `helloCelo.js` to send a transaction.

```javascript
async function send(){
    // 10. Get your account
    let account = await getAccount()

    // 11. Add your account to ContractKit to sign transactions
    kit.connection.addAccount(account.privateKey)

    // 12. Specify recipient Address
    let anAddress = '0xD86518b29BB52a5DAC5991eACf09481CE4B0710d'

    // 13. Specify an amount to send
    let amount = 100000

    // 14. Get the token contract wrappers    
    let goldtoken = await kit.contracts.getGoldToken()
    let stabletoken = await kit.contracts.getStableToken()

    // 15. Transfer CELO and cUSD from your account to anAddress
    // Specify cUSD as the feeCurrency when sending cUSD
    let celotx = await goldtoken.transfer(anAddress, amount).send({from: account.address})
    let cUSDtx = await stabletoken.transfer(anAddress, amount).send({from: account.address, feeCurrency: stabletoken.address})

    // 16. Wait for the transactions to be processed
    let celoReceipt = await celotx.waitReceipt()
    let cUSDReceipt = await cUSDtx.waitReceipt()

    // 17. Print receipts
    console.log('CELO Transaction receipt: %o', celoReceipt)
    console.log('cUSD Transaction receipt: %o', cUSDReceipt)

    // 18. Get your new balances
    let celoBalance = await goldtoken.balanceOf(account.address)
    let cUSDBalance = await stabletoken.balanceOf(account.address)

    // 19. Print new balance
    console.log(`Your new account CELO balance: ${celoBalance.toString()}`)
    console.log(`Your new account cUSD balance: ${cUSDBalance.toString()}`)
}
```

Run `node helloCelo.js` again to send the transactions and see the printed output in the console.

## Connecting to a Ledger Device from a Web Application

The above instructions apply to building NodeJS applications. If you want to build an integration with a web application, you can still use the ContractKit by following slightly modified instructions.

You will need to have the following `npm` libraries installed: `web3`, `@celo/contractkit`, `@celo/wallet-ledger`, `@ledgerhq/hw-app-eth`, `@ledgerhq/hw-transport-u2f` and `@ledgerhq/hw-transport-webusb`.

Then, you can create a new instance of the ContractKit with the following code:

```javascript
import { ContractKit, newKitFromWeb3 } from "@celo/contractkit";
import { newLedgerWalletWithSetup } from "@celo/wallet-ledger";
import Eth from "@ledgerhq/hw-app-eth";
import TransportU2F from "@ledgerhq/hw-transport-u2f";
import TransportUSB from "@ledgerhq/hw-transport-webusb";
import Web3 from "web3";

// Handle getting the Celo Ledger transport.
const getCeloLedgerTransport = () => {
  if (window.USB) {
    return TransportUSB.create();
  } else if (window.u2f) {
    return TransportU2F.create();
  }

  throw new Error("Ledger Transport not support, please use Chrome, Firefox, Brave, Opera or Edge.");
};

// Handle creating a new Celo ContractKit
const getContractKit = async () => {
  // Create a Web3 provider by passing in the testnet/mainnet URL
  const web3 = new Web3("https://alfajores-forno.celo-testnet.org");

  // Get the appropriate Ledger Transport
  const transport = await getCeloLedgerTransport();

  // Create a new instance of the ETH Ledger Wallet library
  const eth = new Eth(transport);

  // Use the Celo Ledger Wallet setup util
  const wallet = await newLedgerWalletWithSetup(eth.transport);

  // Instantiate the ContractKit
  const kit: ContractKit = newKitFromWeb3(web3, wallet);

  return kit;
};
```

Once you have successfully created the ContractKit, you can use the various Celo contracts to sign transactions with a connected Ledger device. For example, here's how to transfer gold tokens $just like above in the NodeJS example$:

```javascript
// Use the gold token contract to transfer tokens
const transfer = async (from, to, amount) => {
  const goldTokenContract = await kit.contracts.getGoldToken();
  const tx = await goldTokenContract.transfer(to, amount).send({ from });
  const receipt = await tx.waitReceipt();
  console.log("Transaction Receipt: ", receipt);
};
```

This is the basic setup to integrate the Celo Ledger App with a web application. You can also view the [Celo Ledger App example codebase](https://github.com/celo-org/celo-ledger-web-app) for some other examples of connecting to a Ledger Device from a web application.

# Conclusion

Congratulations! You have accomplished a lot in this short introduction to developing on Celo.

We covered:

* Installing and setting up ContractKit
* Connecting to the Celo Alfajores network
* Getting the CELO contract wrapper
* Reading account balances using the CELO wrapper
* Generating a new account in Celo
* Funding an account using the Celo Alfajores Faucet
* Sending CELO

If you had any difficulties following this tutorial or simply want to discuss Celo tech with us you can [**join our community today**](https://discord.gg/fszyM7K)!


Learn how to connect to the Celo test network and transfer tokens using ContractKit

Send CELO & cUSD

# Introduction

This tutorial is designed for developers who have deployed dapps on ethereum before and now want to learn how to do the same with the Celo blockchain.

One of the biggest advantages of using Celo is that it is EVM compatible which means you can easily redeploy your dapps from ethereum blockchain to celo with a few changes in code $if at all required$ and just changing the configuration file. In this tutorial, we will learn to do the same.

We will be redeploying the famous **Pet Shop** dApp. A complete walkthrough of pet shop is outside the scope of this tutorial, but you can find it [here](https://www.trufflesuite.com/tutorials/pet-shop). The current tutorial is not limited to just this example and can be used as a guide to redeploy any other Ethereum smart contract to Celo.

# Getting Started

Start by cloning the following repository

```text
git clone https://github.com/trufflesuite/pet-shop-tutorial
```

After cloning the repository, we have all the contracts required to deploy **Pet Shop** Dapp.

Let's install all the dependencies of the dapp by using

```text
npm install
```

Now we have all the tools to start on your journey.

# Using the Celo CLI

First, we need to find a way to interact with Celo blockchain. For this tutorial, we will be using `Celo CLI` to do the same.

```text
npm install -g @celo/celocli
```

CeloCLI makes it extremely easy to interact with Celo Blockchain. It is a very handy tool for all celo developers. More information about CeloCLI can be found [here](https://docs.celo.org/celo-owner-guide/quick-start).

After installing it, we need to make sure it is pointing to the correct endpoint. Let's check that by

```text
celocli config:get
```

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

Our node should be pointing to **node:** [https://alfajores-forno.celo-testnet.org](https://alfajores-forno.celo-testnet.org)

In case your endpoint is something else, you can change it by using

```text
celocli config:set --node https://alfajores-forno.celo-testnet.org
```

Now our celocli is connected to `Alfajores Testnet`. We need an account to work with. Let's use celocli for this. Use the following command to get a new account on testnet.

```text
celocli account:new
```

Our terminal should look something like this. $Everyone will have different values though!$

![](https://imgur.com/qMjrv5Z.png) As we don't want anybody to see our private key, it is an accepted practice among developers to use \`.env\` files to set up environment variables. During the time of uploading our project to any open source platform, we hide these files by adding them to \`.gitignore\` Create a .env file in the same directory and add the following line

```text
PRIVATE_KEY=<YOUR_PRIVATE_KEY>
```

We will use this private key later on in this tutorial. Now that we have an account to work with, let's get some funds for signing transactions on the blockchain. Use Alfajores testnet faucet which can be found [here](https://celo.org/developers/faucet). To check if we have received funds, use


```text
celocli account:balance <YOUR_PUBLIC_ADDRESS>
```

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

# Changing truffle-config.js

To deploy our dapp to the Celo blockchain, all we need to do now is to change the `truffle-config.js` so that it can work with Celo blockchain. We will be taking help of `ContractKit` and `Wallet-local` made by Celo. We also need to install `dotenv` to use our Private Key.

To install all of these, use

```text
npm i --save @celo/contractkit @celo/wallet-local dotenv
```

`ContractKit` is a library to help developers and validators to interact with the celo-blockchain and is well suited to developers looking for an easy way to integrate Celo Smart Contracts within their applications. `Wallet-Local` provides a local wallet instance to connect with contractKit. the `dotenv` file will be used to import Private Key that we added to **.env** file above into truffle-config without hardcoding it.

Paste the following code into our `truffle-config.js` file:

```javascript
// dotenv is used to import all the environment variables into the .env file
require("dotenv").config();
const ContractKit = require("@celo/contractkit");
const { LocalWallet } = require("@celo/wallet-local");

const PRIVATE_KEY = process.env.PRIVATE_KEY;
const testnetURL = "https://alfajores-forno.celo-testnet.org";
const localWallet = new LocalWallet();

/*
ContractKit is used to access web3 object to interact with node's Json RPC API.
It takes two arguments, first being a network URL such as the testnet URL and secondly, a wallet instance for signing transactions.
*/

const kit = ContractKit.newKit(testnetURL, localWallet);

async function setConfig() {
  kit.addAccount(PRIVATE_KEY);
  kit.defaultAccount = localWallet.getAccounts()[0];
}
setConfig();
module.exports = {
  networks: {
    testnet: {
      provider: kit.connection.web3.currentProvider, // to connect with Alfajores testnet
      network_id: 44787,
    },
  },
};
```

Now our configuration file is all set to work with the Celo Blockchain.

Let's compile our smart contracts using

```text
truffle compile
```

and after compiling is completed, let's migrate our smart contracts to Celo.

```text
truffle migrate --network testnet
```

Congratulations! With that, we have deployed our Ethereum DApp to Celo.

Now we can use the same process to deploy any DApp we want to Celo. Don't let anything stop you, try cloning any project on ethereum and deploy it on Celo. Celo has wonderful opportunities for new projects. 

Learn how to re-deploy Ethereum Dapps on the Celo network

How to re-deploy your Ethereum DApp to Celo

Learn how to create, deploy, and interact with Vault Smart Contract on the Celo Ecosystem

Create Vault Smart Contract

Build a functioning DAO by writing the Solidity smart contract and building a React Native dApp

Build a Decentralized Autonomous Organization (DAO) on Celo

# Introduction

Celo offers mobile friendly development environment which includes mainnet and testnet wallet, mobile SDK. In this tutorial we are going to make counter dapp with expo $react native$. This dapp will be able to do following things:

* Get account, phone number from mobile wallet
* Create transaction
* Sign transaction

# Prerequisite

You should have some basic knowledge of javascript, react and solidity. Also, have following requirements installed:

* Node.js
* Yarn Package Manager
* Truffle
* Expo $[cli](https://docs.expo.io/get-started/installation/#1-expo-cli) on your computer and [expo client](https://docs.expo.io/get-started/installation/#2-expo-go-app-for-ios-and) in your mobile$
* Celo mobile wallet $Alfajores$

As we are going to work with mobile app you should install expo mobile client and alfajores $celo testnet wallet for mobile devices$. Make sure to fund your wallet with faucet.

# Setup

For setting up our development environment, create a new folder and run following command in that folder:

```bash
truffle unbox critesjosh/celo-dappkit
```

This will download truffle box created by celo team. You can take a look at it [here](https://github.com/critesjosh/celo-dappkit).

Now, we need to install all the dependencies of our smart contract and mobile app.

```javascript
yarn // installs dependencies for truffle
cd client
yarn // isntalls dependencies for expo
```

# Smart Contract

Copy the following smart contract code into `HelloWorld.sol` file inside of `contracts` folder and then rename the file to `Counter.sol`. We will not cover writing smart contracts or the Solidity language in this tutorial. The [Solidity documentation](https://docs.soliditylang.org/) is available as a resource to get started.

```javascript
//SPDX-License-Identifier: MIT

pragma solidity >=0.5.0;
// Above statement specifies the compatible compiler versions
// Learn more about Solidity here: https://docs.soliditylang.org/en/v0.8.3/

// Declare a contract called HelloWorld
contract Counter {

  // Define a unsigned integer called name, initialize it to 'Celo'
  uint256 count = 0;

// Declare a function called getCount.
// The 'public' label means the function can be called internally, by transactions or other contracts.
// The 'view' label indicates that the function does not change the state of the contract.
// The function returns the value of count variable which is of type uint256
  function getCount() 
  public 
  view returns (uint256) {
    return count;
  }

// Declare a function called incrementCount
// The function increments value of count by 1.
// The 'external' label means the function can only be called from an external source
  function incrementCount() 
  external {
      count += 1;
  }

// Declare a function called decrementCount
// The function decrements value of count by 1.
// The 'external' label means the function can only be called from an external source
  function decrementCount() 
  external {
      require(count > 0, "Count is zero");
      count -= 1;
  }
}
```

# Deploy smart contract

For deployment, we need to create a migration for the counter smart contract. Inside of the `migrations` folder go to `2_deploy_contracts.js` and change every `HelloWorld` to `Counter`.

Run following command in terminal:

```javascript
yarn account
```

This will display the account address from which we will deploy the Solidity smart contract.

```javascript
xQc@RecycleBin MINGW64 ~/Documents/blockchain/celoDappCounter
$ yarn account
yarn run v1.22.4
$ node utils/createAccount.js
Account address: 0xbF0eC2F761F2C3303AE5f9695eE79d2EECdb2579
Done in 2.78s.
```

To be able to afford the deployment costs, it will be necessary to visit the [Celo developers faucet](https://celo.org/developers/faucet) and request some tokens.

We need to make one more change in `truffle-config.js`. Change `web3` that file to following:

```javascript
const web3 = new Web3('https://celo-alfajores--rpc.datahub.figment.io/apikey/<YOUR_API_KEY>/')
```

Now, we can run Truffle to deploy the smart contract to Celo.

```javascript
truffle migrate --network alfajores
```

After the deployment is completed, you will see similar output in the terminal:

```javascript
xQc@RecycleBin MINGW64 ~/Documents/blockchain/celoDappCounter
$ truffle migrate --network alfajores

Compiling your contracts...
===========================
Account address: 0xbF0eC2F761F2C3303AE5f9695eE79d2EECdb2579
> Compiling .\contracts\HelloWorld.sol
> Compiling .\contracts\Migrations.sol
> Artifacts written to C:\Users\xQc\Documents\blockchain\celoDappCounter\client\contracts
> Compiled successfully using:
   - solc: 0.5.16+commit.9c3226ce.Emscripten.clang    



Starting migrations...
======================
> Network name:    'alfajores'
> Network id:      44787
> Block gas limit: 0 (0x0)


1_initial_migration.js
======================

   Deploying 'Migrations'
   ----------------------
   > transaction hash:    0x0e801fb8dd2178d5affe2a149282d2b2501a4a31b01c9abd2d2582e3154972e1
   > Blocks: 1            Seconds: 5
   > contract address:    0x9be45eb8F9d51F52a79368429A250C64E553a04E
   > block number:        4607994
   > block timestamp:     1618390036
   > account:             0xbF0eC2F761F2C3303AE5f9695eE79d2EECdb2579
   > balance:             9.9874644
   > gas used:            163575 (0x27ef7)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.0032715 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:           0.0032715 ETH


2_deploy_contracts.js
=====================

   Deploying 'Counter'
   ----------------------
   > transaction hash:    0x02bda4034198353421bc141d89e7b4437e4ac7d0eb2590b1887bb169e3af707d
   > Blocks: 1            Seconds: 5
   > contract address:    0xCb218976Ec0Dd771d69a559AffDb3FeEfE095ADa
   > block number:        4607997
   > block timestamp:     1618390051
   > account:             0xbF0eC2F761F2C3303AE5f9695eE79d2EECdb2579
   > balance:             9.98410176
   > gas used:            126391 (0x1edb7)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00252782 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00252782 ETH


Summary
=======
> Total deployments:   2
> Final cost:          0.00579932 ETH
```

There should be two additional files now, inside of the `contracts` subdirectory of `client`: `Counter.json` and `Migrations.json`.

# Mobile Dapp

As we have completed our smart contract part of tutorial, we can move to creating mobile dapp.

Run

```javascript
cd client
```

Before starting on the UI of our dapp, we will need to change some files.

Delete `assets` folder in `client` and remove `icon` and `splash` field from `app.json`

Go to `root.js` and change the `provide` to include a valid DataHub API key and RPC endpoint URL. Make sure the URL contains the trailing forward slash after the API key has been inserted

```javascript
export const provider = "https://celo-alfajores--rpc.datahub.figment.io/apikey/<YOUR_API_KEY>/"
```

We will go over the React Native portions of the code, but first you need to clear the contents of `App.js` and replace it with the following:

```javascript
import React from 'react'
import './global'
import { web3, kit } from './root'
import { StyleSheet, Text, Button, View } from 'react-native'
import {
  requestTxSig,
  waitForSignedTxs,
  requestAccountAddress,
  waitForAccountAuth,
  FeeCurrency
} from '@celo/dappkit'
import { toTxResult } from "@celo/connect"
import * as Linking from 'expo-linking'
import CounterContract from './contracts/Counter.json'

export default class App extends React.Component {

  // Set the defaults for the state
  state = {
    address: 'Not logged in',
    phoneNumber: 'Not logged in',
    cUSDBalance: 'Not logged in',
    CounterContract: {},
    count: ''
  }

  // This function is called when the page successfully renders
  componentDidMount = async () => {

    // Check the Celo network ID
    const networkId = await web3.eth.net.getId();

    // Get the deployed HelloWorld contract info for the appropriate network ID
    const deployedNetwork = CounterContract.networks[networkId];

    // Create a new contract instance with the HelloWorld contract info
    const instance = new web3.eth.Contract(
      CounterContract.abi,
      deployedNetwork && deployedNetwork.address
    );
    // Save the contract instance
    this.setState({ CounterContract: instance })
  }

  login = async () => {

    // A string you can pass to DAppKit, that you can use to listen to the response for that request
    const requestId = 'login'

    // A string that will be displayed to the user, indicating the DApp requesting access/signature
    const dappName = 'Counter'

    // The deeplink that the Celo Wallet will use to redirect the user back to the DApp with the appropriate payload.
    const callback = Linking.makeUrl('/my/path')

    // Ask the Celo Alfajores Wallet for user info
    requestAccountAddress({
      requestId,
      dappName,
      callback,
    })

    // Wait for the Celo Wallet response
    const dappkitResponse = await waitForAccountAuth(requestId)

    // Set the default account to the account returned from the wallet
    kit.defaultAccount = dappkitResponse.address

    // Get the stabel token contract
    const stableToken = await kit.contracts.getStableToken()

    // Get the user account balance (cUSD)
    const cUSDBalanceBig = await stableToken.balanceOf(kit.defaultAccount)

    // Convert from a big number to a string
    let cUSDBalance = cUSDBalanceBig.toString()

    // Update state
    this.setState({
      cUSDBalance,
      isLoadingBalance: false,
      address: dappkitResponse.address,
      phoneNumber: dappkitResponse.phoneNumber
    })
  }

  getCount = async () => {

    // Read the count stored in the Counter contract
    let _count = await this.state.CounterContract.methods.getCount().call()

    // Update state
    this.setState({ count: _count })
  }

  increment = async () => {
    const requestId = 'increment_count'
    const dappName = 'Counter'
    const callback = Linking.makeUrl('/my/path')

    // Create a transaction object to increment count
    const txObject = await this.state.CounterContract.methods.incrementCount()

    // Send a request to the Celo wallet to send an update transaction to the Counter contract
    requestTxSig(
      kit,
      [
        {
          from: this.state.address,
          to: this.state.CounterContract.options.address,
          tx: txObject,
          feeCurrency: FeeCurrency.cUSD
        }
      ],
      { requestId, dappName, callback }
    )

    // Get the response from the Celo wallet
    const dappkitResponse = await waitForSignedTxs(requestId)
    const tx = dappkitResponse.rawTxs[0]

    // Get the transaction result, once it has been included in the Celo blockchain
    let result = await toTxResult(kit.web3.eth.sendSignedTransaction(tx)).waitReceipt()

    console.log(`Counter contract increment count transaction receipt: `, result)

    // Update count on UI
    await this.getCount();
  }

  decrement = async () => {
    const requestId = 'increment_count'
    const dappName = 'Counter'
    const callback = Linking.makeUrl('/my/path')

    // Create a transaction object to decrement the count
    const txObject = await this.state.CounterContract.methods.decrementCount()

    // Send a request to the Celo wallet to send an update transaction to the Counter contract
    requestTxSig(
      kit,
      [
        {
          from: this.state.address,
          to: this.state.CounterContract.options.address,
          tx: txObject,
          feeCurrency: FeeCurrency.cUSD
        }
      ],
      { requestId, dappName, callback }
    )

    // Get the response from the Celo wallet
    const dappkitResponse = await waitForSignedTxs(requestId)
    const tx = dappkitResponse.rawTxs[0]

    // Get the transaction result, once it has been included in the Celo blockchain
    let result = await toTxResult(kit.web3.eth.sendSignedTransaction(tx)).waitReceipt()

    console.log(`Counter contract decrement count transaction receipt: `, result)

    // Update count on UI
    await this.getCount();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Login first</Text>
        <Button title="login()"
          onPress={() => this.login()} />
        <Text style={styles.title}>Account Info:</Text>
        <Text>Current Account Address:</Text>
        <Text>{this.state.address}</Text>
        <Text>Phone number: +91 ***** *****</Text>
        <Text>cUSD Balance: {this.state.cUSDBalance}</Text>

        <Text style={styles.title}>Get Count</Text>
        <Button title="Get Count"
          onPress={() => this.getCount()} />
        <Text style={styles.count}>{this.state.count}</Text>
        <View style={styles.buttonContainer}>
          <Button style={styles.button} title="Increment count"
            onPress={() => this.increment()} />
          <Button style={styles.button} title="Decrement count"
            onPress={() => this.decrement()} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#35d07f',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    marginVertical: 8,
    fontSize: 20,
    fontWeight: 'bold'
  },
  buttonContainer: {
    flexDirection: 'row',
    paddingVertical: 30,
    alignItems: 'center',
    justifyContent: 'center',
  },
  count: {
    fontSize: 40
  }
});
```

We will go through code method by method.

Here we are using class component of react. These classes have states in which we can store the data.

In `state` variable of `App` class we are storing our data.

Then `componentDidMount` method is creating contract instance so that we can call methods of the smart contract. After creating the smart contract instance we are storing it in state variable `CounterContract`.

Now, we will be looking at methods given by dapp kit in `login` method of our `App` class.

Here we are setting 3 variables `requestId`, `dappName`, and `callback`.

* `requestId`: used to listen response of our request
* `dappName`: name will show up while getting permission from user 
* `callback`: deeplink that will use to redirect user back to dapp

While calling `requestAccountAddress`, we are passing above 3 parameters.

Now, user will be redirected to celo wallet to get account details which we will use to perform other actions in our dapp.

After getting account details from celo wallet, we will set those in our state variables.

As we are creating counter, we need to get the count. `getCount` method does that. It calls `getCount` method of our contract and stores count in state.

Now, we will increment the count with `incrementCount` method. For this we need to set same three variables `requestId`, `dappName`, and `callback`.

For incrementing count we will create transaction. But first we need to create transaction object `txObject` and then pass that to celo wallet using `requestTxSig`.

`requestTxSig` method takes three parameters:

* kit: contract kit instance
* txParams: parameters required for transaction
* meta: object for dappkit for connecting with celo wallet

This method will create a transaction to increment the value of count. The generated transaction hash will be logged to the console.

After this we are waiting for transaction to complete and then we are updating value of count.

`decrementCount` method is similar to `incrementCount` method but instead of calling the `incrementCount` function of smart conttract, we are calling `decrementCount` function.

Remaining method is `render` which takes care of UI. Also, we have `style` constant of end which is used for styling of our component.

Now, only thing remaining do to run our mobile application using expo client on our mobile deice.

Run

```javascript
yarn start
```

This will open browser window like you see here

![Expo terminal](https://i.imgur.com/mIcw4LF.jpeg%20)

There you can see QR code at bottom left scan it with QR code scanner from expo client in your mobile device.

It will open up our dapp. It should look like this

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

Now we can go through process of incrementing the counter. First login by pressing login button. It will give us option to select our wallet of choice

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

Select Alfajores wallet.

After selecting the wallet, it will redirect us to the actual wallet and ask for permission.

![](https://i.imgur.com/TCtRhZ3.jpeg)

Click on the allow button to give information to our dapp.

Now that we have access, we will be redirected once again to our dapp where the account information will be displayed now in place of the `Not logged in` text.

![](https://i.imgur.com/Ywor7bg.jpeg)

We should now increment the count, which will redirect us to the wallet to sign a transaction.

![](https://i.imgur.com/p7NdEga.jpeg)

Click on allow. After reaching our dapp screen we can see the count has increased by 1!

![](https://i.imgur.com/alHJoiS.jpeg)

Congratulations for completing this tutorial, Introduction to DappKit! We have now created a functioning mobile dapp on the Celo testnet. This same methodology can be applied to the Celo mainnet as well, to produce functioning distributed applications.

# Conclusion

In this tutorial, we have covered some parts of DappKit, how it connects with the Celo mobile wallet, how we can connect our dapp with the mobile wallet and how to do some basic things like getting account addresses, balance of accounts, phone number connected to Celo mobile wallet, and signing transactions.

Thank you for following along with this tutorial, now take this knowledge and build amazing things on Celo!

# About the Author

This tutorial was created by [Nikhil Bhintade](https://www.linkedin.com/in/nikbhintade). Nikhil is a student $BE, Electrical$ and crypto enthusiast who's learning all about the world of web3 and want to document what he learned.


In this tutorial we are going to make counter dapp with expo (react native)

Introduction to dApp kit

# What is Celo?

Celo is a smart contract blockchain network. The technology uses a phone-number-based identity system with address-based encryption and [eigentrust-based reputation](https://en.wikipedia.org/wiki/EigenTrust). Their first application is a social payments system that can be used on a smartphone.

Celo is preparing to launch a variety of stable coins pegged to global fiat and crypto currencies, the first one being pegged to the US dollar (cUSD).

# Why build on Celo?

The Celo blockchain is designed to empower anyone with a smartphone anywhere in the world to have access to financial services, send money to phone numbers, and pay merchants. The project aims to be a decentralized platform that is not controlled by any single entity, but instead developed, upgraded and operated by a broad community of individuals, organizations and partners.

Celo is oriented around providing the simplest possible experience for end users, who may have no familiarity with cryptocurrencies, and may be using low cost devices with limited connectivity. To achieve this, the project takes a full-stack approach, comprising of both a protocol and applications that use that protocol. Celo offers a full suite of powerful features:

* Stable value currencies (cUSD)
* Accounts linked to phone numbers
* Transaction fees in any currency
* Immediate syncing
* Programmable (full EVM compatibility)
* Carbon Neutral

# What can you build on Celo?

Celo enables developers to build a new financial system to empower their users. Developers can:
* Create financial services applications for the underbanked (savings accounts, money transfer interfaces, merchant services, lending, trading)
* Integrate with existing blockchain and traditional financial services
* Create transparent aid services
* Build payroll integrations to allow internet users to earn stable currencies
* Create advanced user wallets (smart contract wallets) 
* Alternative currencies 
* Use the full suite of Ethereum smart contracts right off the shelf

You can view some of the projects that are building on Celo [here](https://docs.celo.org/developer-guide/overview/celo-dapp-gallery).

# Network Specifications

## Transaction Fees

* [Celo uses a gas market based on EIP1559 to set gas prices](https://docs.celo.org/celo-codebase/protocol/transactions/gas-pricing)
* [There are also gateway fees for light clients](https://docs.celo.org/celo-codebase/protocol/transactions/full-node-incentives)
* Currently fees on the network are around $0.001/transaction

## Transaction Speed & Finality

Celo has a 5 seconds block time with instant finality.

## Languages supported

Most of the protocol code is written in Go, while the SDKs are written in Typescript which supports native javascript.

The Celo community is also working on Java and Python SDKs.

## EVM compatibility

While the Celo client originated as a fork of Ethereum Go langauge client, [go-ethereum](https://github.com/ethereum/go-ethereum) (or geth), it has several significant differences, including a proof-of-stake based PBFT consensus mechanism. All the cryptoassets on Celo have ERC-20 compliant interfaces, meaning that while they are not ERC-20 tokens on the Ethereum Mainnet, all familiar tooling and code that support ERC-20 tokens can be easily adapted for Celo assets, including the Celo Native Asset (CELO) and the Celo Dollar (cUSD).

In terms of programmability, Celo is similar to Ethereum. Both networks run the Ethereum Virtual Machine (EVM) to support smart contract functionality. This means that all programming languages, developer tooling and standards that target the EVM are relevant for both Celo and Ethereum. Developers building on Celo can write smart contracts in [Solidity](https://solidity.readthedocs.io/en/latest/), use [Truffle](https://www.trufflesuite.com/) for smart contract management and take advantage of smart contract standards that have already been developed for Ethereum.

## Role of the CELO token

The native Celo token (CELO) is the utility token on the Celo network. CELO are used to pay for transactions and are also staked by token-holders to earn rewards, participate in governance, and to vote for validators.



What is Celo?

Learn how to make a Distributed File Manager using the IPFS protocol for storing files on the Celo network

Distributed File Manager (DFM) using Celo, IPFS and ReactJS

# Introduction

In this tutorial we will write tests for a Celo smart contract.

Writing tests is an important part of smart contract development because smart contract vulnerabilities can have real world implications like losing user funds! The best way to try to mitigate vulnerabilities is to write extensive unit tests in order to test every part of our contract's functionality.

This is a beginner friendly tutorial. Read on to learn about testing!

# Prerequisites

For this tutorial you will need to install Truffle and Ganache. Truffle is a set of tools for smart contract development and Ganache is a tool for creating local blockchains.

In your console, run the following:

`npm install -g truffle`

then run:

`npm install -g ganache-cli`

Great! That's all we'll need for our smart contract testing.

# Project setup

Next, we're going to setup our project. Let's create a folder called `celoTesting` and `cd` into the folder:

`mkdir celoTesting && cd celoTesting`

Now let's initialize Truffle:

`truffle init`

There should now be a handful of files and folders in your `celoTesting` directory. Let's open `celoTesting` with your favorite text editor and continue.

# Writing the smart contract

Since this tutorial focuses on smart contract testing, we'll use a very simple Solidity contract in order to get our bearings.

Create a new smart contract in the `contracts/` folder named `HelloWorld.sol` and write the following:

```text
pragma solidity >=0.5.0 <0.7.0;

contract HelloWorld {
  string name = 'Celo';

  function getName() public view returns (string memory) {
    return name;
  }

  function setName(string calldata newName) external {
    name = newName;
  }
}
```

Great! This is just a simple smart contract which will either get the `name` variable by calling `getName()` or update the `name` variable by calling `setName()`. When the contract first runs, `name` will be "Celo".

# Deployment

Now that we have a smart contract, let's deploy it to make sure it works. We'll be deploying it on the Ganache CLI, which is a command line tool for creating local blockchains. Ganache will create a local Ethereum blockchain for us to test on. Since Celo is a fork of Ethereum, they use the same environment.

To spin up the local blockchain, in a new terminal window run:

`ganache-cli --port 8545`

We use a new terminal window since we'll want to keep Ganache running while we develop.

Next, replace the existing contents of `truffle.config` with the following:

```text
module.exports = {
  networks: {
    // Truffle uses this by default
    development: {
      host: "127.0.0.1",
      port: 8545,
      network_id: "*",
    },
  }
};
```

This will simply use the Ganache environment whenever we deploy or test our contracts. Our Ganache environment is running on `localhost` $127.0.0.1$ and using port 8545.

We'll also want to create a `migrations` file for our smart contract to deploy from. Create a file and call it `2_helloworld_migration.js` inside the `migrations/` folder and write the following:

```text
const HelloWorld = artifacts.require("HelloWorld");

module.exports = function (deployer) {
  deployer.deploy(HelloWorld);
};
```

After all that, we can run `truffle migrate` in our terminal to deploy our contracts.

The results should look like this:

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

# Testing

Truffle lets us test our smart contracts using both Javascript or Solidity. For this tutorial, we will write tests in Javascript.

For Javascript tests, Truffle uses two testing libraries commonly used in Javascript development. By default, this is the [Mocha](https://mochajs.org/) testing framework and [Chai](https://www.chaijs.com/) for assertions. A great thing about truffle is we are free to use whatever testing framework we want, but for our purposes this works well.

An important thing to note about testing in Truffle is that whenever we run the tests, Truffle will create a new contract deployment. This means we get a fresh start whenever we run our tests, and our contract gets reset.

Moving on to development, in the `test/` folder create a new file called `helloworld.js`.

The first line we'll write will get our smart contract instance:

`const HelloWorld = artifacts.require("HelloWorld");`

Next, let's setup our testing file:

```text
contract("Hello world test", async => {

}
```

Before we write our tests, let's review the goals of writing unit tests. A unit test should:

* Test one method 
* Provide some specific arguments to that method
* Test that the result is as expected

Let's test that our contract returns "Celo" from `getName()` in our `HelloWorld` contract. If you'll recall, `getName()` returns whatever the string inside the `name` variable is. By default, we set name to be `Celo` when the contract is created.

```text
const HelloWorld = artifacts.require("HelloWorld");

contract("Hello world test", async => {
  it("Should return Celo", async () => {
    const instance = await HelloWorld.deployed();
    const name = await instance.getName.call();
    assert.equal(name, 'Celo');
  });
}
```

In this test, we create an `instance` of the `HelloWorld` contract deployment, and call the `getName()` function on it. The syntax for this is simply `instance.getName.call()` for calling functions which read from the blockchain.

Next, our test `asserts` that the value returned from `getName()` is equal to the string 'Celo'.

Let's run this! In a terminal window $with ganache running$, type:

`truffle test`

This will run all our tests. Our test passes!

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

Now that we have our first test which tests the `getName()` function, let's write a test to check `setName()`:

```text
it("Should rename to Figment Learn", async () => {
  const instance = await HelloWorld.deployed();
  await instance.setName('Figment Learn');
  const name = await instance.getName.call();
  assert.equal(name, 'Figment Learn');
});
```

For this second test, we use `setName()` to change the name variable to "Figment Learn" and then call `getName()` to check if the variable updated.

In this test, we again retrieve an instance of the `HelloWorld` contract, but this time we call the `setName()` function on it like so:

`await instance.setName('Figment Learn');`

Unlike `getName()`, we don't use `.call()`. Whenever we're calling functions that _write_ to the blockchain, we won't need to use `.call()`.

Let's run `truffle test` again:

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

Great! This works. The test does take a while longer than the first one because it calls two functions and waits for each of them to finish.

A big part of unit testing is testing the edge cases which could possibly break your code. An example could be using special characters like emojis in our `setName()` function. Let's write a test to make sure that works:

```text
it("Should work with special characters ", async () =>  {
  const instance = await HelloWorld.deployed();
  await instance.setName('I ❤️ emojis 🎉');
  const name = await instance.getName.call();
  assert.equal(name, 'I ❤️ emojis 🎉');
});
```

And finally, let's run this last test:

![last test](https://i.imgur.com/Jhn09wb.png)

Woohoo! All our tests pass.

# Conclusion

Now we know how to write tests for our smart contracts. This skill will come in handy whenever you're working on a smart contract and need to verify that all of the functionality works. Although our tests were relatively simple, they should be enough to get you started on your testing journey.

# Further reading

After following this tutorial, you should have a basis for writing tests for smart contracts. Unit testing is a entire subsection of development which has lots of discussion around it. If you'd like to read more, here are some additional resources:

* [Writing automated smart contract tests](https://docs.openzeppelin.com/learn/writing-automated-tests) - A tutorial from OpenZeppelin
* [Unit testing best practices](https://stackify.com/unit-testing-basics-best-practices/) - This isn't specific to Solidity, but writing great unit tests is a concept that extends to development across all programming.
* [New to unit testing, how to write great tests?](https://stackoverflow.com/questions/3258733/new-to-unit-testing-how-to-write-great-tests) - A stack overflow question with some great answers on writing great tests. 
* [Testing deployed smart contracts](https://fulldecent.blogspot.com/2019/04/testing-deployed-ethereum-contracts.html) - This tutorial may come in handy if you're trying to test a contract which has been deployed to the Celo mainnet.

# About the author

This tutorial was created by Alex Reyes. Alex is a student $BS, Computer Science$ and crypto enthusiast who's learning all about the world of web3 one day at a time and he's contributing to Web3 communities actively. He has previously completed internships at Facebook and Microsoft.


We will learn how to use Truffle in order to test smart contracts on Celo

Testing Celo Smart Contracts with Truffle

Swap cUSD to CELO

# Introduction

Moola is an open-source protocol for decentralized money markets on the Celo blockchain. Moola, which is a fork of the open-source Aave protocol v1, enables liquidity providers to earn compound interest on their Celo Dollars$cUSD$ or CELO which is paid by borrowers who can take out collateralized loans with variable or stable interest rates.

In this tutorial we will learn how we can use Moola's Money Market to 1. Deposit Collateral $cUSD or CELO$ 2. Borrow assets $cUSD or CELO$ 3. Repay the loan that we took 4. Withdraw our Collateral back to our custodial wallet

We need a custodial wallet with some funds that we can use to interact with **Moola**. We will be using the [`VALORA`](https://valoraapp.com/) app that is a custodial wallet with beautiful UI where we can store our Celo or cUSD.

# Prerequisites

1. Valora App
2. Funds to use as collateral on Moola

# Connecting Valora with Moola

After we have set up our Valora, we need to head over to [Moola](https://app.moola.market/#/welcome). We will be presented with a screen like this.

![](https://imgur.com/0rayIk4.png)

Click on the **Connect Valora** button and then press **Allow**.

Now Moola has view access to our funds which we have deposited on Valora App.

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

We can deposit cUSD or CELO using our Valora app and start earning compound interest. Interest rates are variable and adjust based on demand for borrowing.  
When demand to borrow the asset is low, rates are low. When demand to borrow the asset is high, rates are high.

Now there are a couple of things to give attention to: 1. **Deposit APY$annual percentage yield$** - This is the amount of interest that the user will get if they deposit collateral. 2. **Borrow APR$Annual Percentage Rate$** - This is the cost borrower pay each year to borrow collateral. 3. **Maximum Loan to Value $75%$** - This is amount a user can borrow by depositing collateral. For example - User who has deposited 100 cUSD can borrow 75cUSD or Celo of equivalent worth on that collateral. Keep in mind that this loan will have interest associated with it. 4. **Liquidation Threshold $80%$** - Moola always make sure that users have healthy LTV$Loan to value$ ratio. Let's suppose a user depositied Celo worth $100 and borrowed 75 cUSD. Now the price of Celo decreased and the deposited Celo is now worth less than $100. This means that LTV is more than 75%. This is not acceptable to Moola and user will be at a risk of liquidation. If LTV ratio falls below the Liquidation Threshold $80%$ then a portion of user's collateral can be liquidated at a discount to bring the LTV back down below 75%. User can deposit more collateral to save themselves from being liquidated. 5. **Health Factor** - This indicates the health of user's loan. It should always be `SAFE`.

# How to use Moola

Moola offers various functionalities which can be seen here.

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

## Deposit

Let's start by depositing `50cUSD` to Moola. Go to the _Deposit_ tab and enter the amount.

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

Click on `Deposit cUSD`

![](https://imgur.com/9wAgbLu.png)

Sign the transaction by using **Allow**

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

Our transaction got confirmed.

Now our home screen should look something like this.

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

## Borrow

Now we know that we can borrow a maximum of 75% of our collateral. In our case that would be

```text
0.75 (75%) * 11.182 (value of 50cUSD in terms of Celo at the time of writing) = ~8.3702
```

Let's go to the Borrow tab and borrow some Celo.

![](https://imgur.com/804sw9e.png)

Sign the transaction

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

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

our transaction got confirmed.

Our Home screen should look like this.

![](https://imgur.com/3KRoWsA.png)

## Repay

We have to repay the Celo so that we access our deposited cUSD. To repay the loan we took, lets head over to `Repay` tab.

Select `Repay Celo`

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

Enter the amount, for this case, we will repay all our debt.

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

Click on `Repay Celo`

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

Our transaction got confirmed.

## Withdraw

Now that we have repay our debt , we can withdraw our cUSD if we want to. Let's withdraw our cUSD to Valora.

Head over to `Withdraw` tab and select `Withdraw CUSD`

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

Let's withdraw all our cUSD. We can see that Moola has already added the interest that got accumulated during the period our cUSD was deposited. Enter the amount and click on `Withdraw CUSD`.

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

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

Our transaction got confirmed. This marks the end of this tutorial. In this tutorial we learned how we can use **Moola** and participate in DeFi on Celo blockchain.

# Use cases

Before participating in any DeFi application you should know the risk behind it. Finance is just a way to transfer the risk. But we can use these tools to our advantage if we know how to manage the risk. Some of the most popular use cases can be:

# Bullish on CELO

If you think the price of CELO will go up and you want to take on leverage then the steps are:

1. Deposit CELO
2. Borrow cUSD 
3. Sell cUSD / Buy CELO $via Mento, AMM of Celo Blockchain$
4. Deposit CELO 

# Bearish on CELO

If you're attempting to get into a short position in the cUSD price of CELO because you think the price of CELO will go down then the steps are:

1. Deposit cUSD
2. Borrow CELO 
3. Sell CELO / Buy cUSD  $via Mento$
4. Deposit cUSD

# Conclusion

Moola is just getting started and is on the right path. Moola is experiencing exponential growth with over $1M locked. Many new features like Flash loans and uncollateralized loans are on the roadmap of this promising startup. Moola also received a funding of $1.4M in March,2021 which will help Moola accelerate it's growth. Moola will also release it's new UI soon.

# About the Author

This tutorial was created by [Deepanshu Hooda](https://github.com/gitofdeepanshu/), who is a computer science junior and a blockchain developer with high interest in finance. He spends most of the his time studying new DeFi protocols and loves to travel.


This tutorial is a part of DeFi series where people can learn how to participate in DeFi on the Celo Blockchain.

How to use Moola’s money market

Set the storage of a smart contract

We no longer host the Pathway pages on this website, the content has moved to the `learn-web3-dapp` repository at <https://github.com/figment-networks/learn-web3-dapp#-get-started>.

For less experienced developers or for anyone who wants to dive in without complicated setup, **[we recommend using Gitpod](https://gitpod.io/#https://github.com/figment-networks/learn-web3-dapp)** to work with the `learn-web3-dapp` project (this requires you to have a GitHub account to sign in). Gitpod can save you a considerable amount of time, as you don't have to install dependencies or set up a development environment - everything just works!

If you are an experienced developer, [cloning the repo locally](https://github.com/figment-networks/learn-web3-dapp#-clone-locally) is still possible, however you might encounter various system configuration issues depending on how your local environment is set up. A minimum of NodeJS version 14.17 is recommended, and you'll want to make sure you have the `build-essential` package installed. You'll also want to make sure your Rust toolchain is up to date and that you have the `wasm32-unknown-unknown` target triple set up and installed.


You can now access the Celo 101 Pathway on our GitHub repo.

The Celo Pathway has moved to learn-web3-dapp

[The original tutorial can be found in the Celo documentation here](https://docs.celo.org/developer-guide/start/hello-contract-remote-node). 

# Introduction

This guide walks you through the basics of how to deploy your own smart contracts on Celo networks. As Celo is fully EVM compatible, we inherit the rich developer ecosystem and tooling of the Ethereum community. You will be deploying a typical hello world smart contract onto the Alfajores testnet with typical Ethereum tools like Truffle and Ganache.

# Setup

This guide assumes that you have a basic Node/[NPM](https://www.npmjs.com/get-npm) setup. If so, you can install truffle with:

```text
npm install -g truffle
```

{% hint style="info" %}
[Learn more about the Truffle development framework here.](https://www.trufflesuite.com/docs/truffle/overview)
{% endhint %}

As you may know, Truffle is built for Ethereum developers. Because Celo has a similar network architecture and runs the Ethereum Virtual Machine, Celo developers are able to leverage many Ethereum developer tools. It is important to keep in mind the differences, however. If you haven't already, please review the Celo overview.


[Clone this Truffle project from GitHub to get started](https://github.com/critesjosh/hello_contract-truffle).

```text
git clone https://github.com/critesjosh/hello_contract-truffle.git
```

This is a basic truffle project, with some additional files to help us with account management and deploying to a remote Celo test net node. Run `npm install` to install of the project dependencies.

## Hello World!

Add a contract with the command

```text
truffle create contract HelloWorld
```

We will not go into the details of how to write Solidity in this exercise, but you can learn more at the [Solidity documentation page](https://solidity.readthedocs.io/en/latest/).

The contract will just store a name for now:

```solidity
pragma solidity >=0.5.0;

contract HelloWorld {
  string name = 'Celo';

  function getName() public view returns (string memory) {
    return name;
  }

  function setName(string calldata newName) external {
    name = newName;
  }
}
```

# Compile the contract

Before you deploy the contract, you need to compile the Solidity code into Ethereum bytecode. The following truffle command will look in the `./contracts` directory and compile any new or updated Solidity $`.sol`$ contracts.

```text
truffle compile
```

After compiling the contract, you need to create a migration to deploy the contract. For that, create a file in the `./migrations/` folder named `2_deploy_helloworld.js`:

> [Learn more about Truffle migrations](https://www.trufflesuite.com/docs/truffle/getting-started/running-migrations).

```javascript
var HelloWorld = artifacts.require('HelloWorld')

module.exports = function(deployer) {
  deployer.deploy(HelloWorld)
}
```

> You can also learn more about [Truffle configuration options](https://www.trufflesuite.com/docs/truffle/reference/configuration).

# Deploy to Alfajores $remotely$

When you deploy contracts to the Celo network with a remote node, you have to sign the contract deployment transaction locally before sending it to the remote node to be broadcast to the network. This presents some unique challenges when using Ethereum development tools $like Truffle$ because Celo transaction objects are slightly different than Ethereum transaction objects.

When you are ready to deploy your contract to Alfajores, you'll need a Celo client connected to the testnet. In this exercise you will connect to a remote node to read and write to the public testnet $Alfajores$, but you could also run a testnet node locally to perform the same actions.

Here are the steps to go through to deploy the contract to the Alfajores testnet.

1. Connect to Forno $a remote Celo node service provider$
2. Get personal account information $generate a private key if required, stored in `./.secret`$
3. Get your personal account address and fund it via the [faucet](https://celo.org/build/faucet)
4. Get the compiled contract bytecode
5. Create and sign the contract deployment transaction
6. Send transaction to the network

Make sure the dependencies are installed with:

```text
npm install
```

Run the provided script with:

```text
node celo_deploy.js
```

```javascript
// celo_deploy.js

const Web3 = require('web3')
const ContractKit = require('@celo/contractkit')
const web3 = new Web3('https://alfajores-forno.celo-testnet.org')
const kit = ContractKit.newKitFromWeb3(web3)
const getAccount = require('./getAccount').getAccount

async function awaitWrapper(){
    let account = await getAccount()

    // This account must have a CELO balance to pay tx fees 
    // get some testnet funds at https://celo.org/build/faucet
    console.log(account.address)

    //...
}

awaitWrapper()
```

The provided code will import the contract kit and connect to the remote node. It will look for a private key in the `./.secret` file, and if it doesn't find one, it will generate a new one. Once it gets the key, it will print the associated account. This is the account that we will fund with the faucet.

If you go to the [Alfajores Faucet Page](https://celo.org/build/faucet), you can faucet your account some CELO and see your balance increase.

Then add your account to the `kit` with the private key:

```javascript
kit.connection.addAccount(account.privateKey) // this account must have a CELO balance to pay transaction fees
```

## Deploy the contract with Truffle

Before you can use Truffle for the migration, you need to set up the proper configuration in `./truffle-config.js`. At the top of `./truffle-config.js`, set up the `kit` by connecting to the test network and adding the account you just funded.

```javascript
const Web3 = require('web3')
const ContractKit = require('@celo/contractkit')
const web3 = new Web3('https://alfajores-forno.celo-testnet.org')
const kit = ContractKit.newKitFromWeb3(web3)
const getAccount = require('./getAccount').getAccount

async function awaitWrapper(){
    let account = await getAccount()
    kit.addAccount(account.privateKey)
}
awaitWrapper()
```

Then, in the `networks` object, you can add the initialized `kit` provider to an `alfajores` property.

```javascript
  networks: {
    test: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*"
    },
    // CeloProvider & Alfajores network ID
    alfajores: {
      provider: kit.connection.web3.currentProvider,
      network_id: 44787
    }
  }
```

Now, deploy the contracts to Alfajores with this command:

```text
truffle migrate --network alfajores
```

# Custom Node.js Deployment

In this section, you will deploy a contract using a simple Node.js script to show how you can do it without using Truffle.

You need to compile the `HelloWorld.sol` contract using $if it isn't already$:

```text
truffle compile
```

This command will generate a `HelloWorld.json` file in the `./build/contracts/` directory. `HelloWorld.json` contains a lot of data about the contract, compiler and low level details. Import this file into the deployment script with:

```javascript
const HelloWorld = require('./build/contracts/HelloWorld.json')
```

You are finally ready to deploy the contract. Use the `kit` to create a custom transaction that includes the contract bytecode:

```javascript
let tx = await kit.sendTransaction({
    from: account.address,
    data: HelloWorld.bytecode // from ./build/contracts/HelloWorld.json
})
```

{% hint style="info" %}
To deploy a contract on Celo, use the `kit.sendTransaction()` function without a `to:` field and the contract bytecode in the `data` field. The account that you are sending the transaction from must have enough CELO to pay the transaction fee, unless you specify another currency as the `feeCurrency`, then you need enough of that currency to pay the transaction fee.
{% endhint %}

The entire deployment script is less than 20 lines of code.

```javascript
const Web3 = require('web3')
const ContractKit = require('@celo/contractkit')
const web3 = new Web3('https://alfajores-forno.celo-testnet.org')
const kit = ContractKit.newKitFromWeb3(web3)
const getAccount = require('./getAccount').getAccount
const HelloWorld = require('./build/contracts/HelloWorld.json')

async function awaitWrapper(){
    let account = await getAccount()
    console.log(account.address)

    // this account must have a CELO balance to pay transaction fees
    kit.connection.addAccount(account.privateKey)

    let tx = await kit.connection.sendTransaction({
        from: account.address,
        data: HelloWorld.bytecode
    })

    const receipt = await tx.waitReceipt()
    console.log(receipt)
}

awaitWrapper()
```

Congratulations! You have deployed your first contract onto Celo! You can verify your contract deployment on [Blockscout](https://alfajores-blockscout.celo-testnet.org/). You can get the transaction hash from the receipt and look it up on the block explorer.

# Interacting with Custom Contracts

Now HelloWorld.sol is deployed onto the Alfajores testnet. How can you interact with the deployed contract using ContractKit? `helloWorld.js` includes some example code that shows how you can do this.

There are 3 functions defined in `helloWorld.js` that accomplish this.

The first function, `initContract()`, reads the deployed contract information from the Truffle artifact at `HelloWorld.json`. With this information, you can create a new web3.js Contract instance:

```javascript
async function initContract(){
    // Check the Celo network ID
    const networkId = await web3.eth.net.getId()

    // Get the contract associated with the current network
    const deployedNetwork = HelloWorld.networks[networkId]

    // Create a new contract instance with the HelloWorld contract info
    let instance = new web3.eth.Contract(
        HelloWorld.abi,
        deployedNetwork && deployedNetwork.address
    )

    getName(instance)
    setName(instance, "hello world!")
}
```

After creating the contract instance, the `initContract()` function calls `getName()` and `setName()`.

The `getName()` function will call, return and print the `getName()` function of the provided instance of the HelloWorld contract.

```javascript
async function getName(instance){
    let name = await instance.methods.getName().call()
    console.log(name)
}
```

The `setName()` function is a bit more involved. First, it gets the account key from the provided `./secret` file, just like in `celo_deploy.js`. Then it creates a `txObject` that encodes a smart contract transaction call to `setName()` with the provided `newName` to the provided instance of the HelloWorld contract. Then the function sends the encoded transaction object to the network, waits for a reciept and prints it to the console.

```javascript
async function setName(instance, newName){
    let account = await getAccount()

    // Add your account to ContractKit to sign transactions
    // This account must have a CELO balance to pay tx fees, get some at https://celo.org/build/faucet
    kit.connection.addAccount(account.privateKey)
    const txObject = await instance.methods.setName(newName)
    let tx = await kit.sendTransactionObject(txObject, { from: account.address })

    let receipt = await tx.waitReceipt()
    console.log(receipt)
}
```

The above method shows a more detail about how to create custom deployment transactions and scripts than the previous method.

As you can see, all the goodies from Ethereum apply to Celo, so virtually all tutorials and other content should be easily translatable to Celo.

Check out [https://celo.org/build](https://celo.org/build) for more resources!


Learn how to deploy your own smart contracts on the Celo network

Deploy and Interact with Contracts (Remotely)

🎓 Pathway complete!

Create an account

# Introduction

The Celo blockchain is completely independent from the Ethereum blockchain, but both compile their smart contracts to [EVM](https://github.com/ethereumbook/ethereumbook/blob/develop/13evm.asciidoc) bytecode. This means that any smart contract written for the Ethereum blockchain is already compatible with the Celo network.

To better understand this relationship, we’re going to take the faucet code from [Chapter 7](https://github.com/ethereumbook/ethereumbook/blob/develop/07smart-contracts-solidity.asciidoc) of the [Ethereum book](https://github.com/ethereumbook/ethereumbook), and customize it for the Celo network.

Please note that while this contract is written in Solidity, contracts written in any EVM-compatible high-level programming language $LLL, Serpent, Mutan$ can be used for Celo. As long as the code is compiled to run on an \[Ethereum Virtual Machine\]$- [The Ethereum Virtual Machine](https://github.com/ethereumbook/ethereumbook/blob/develop/13evm.asciidoc)$ it is compatible with both chains.

### If the contract already works, then why would we want to alter it?

Celo's native currency, CELO, is also an ERC-20 compliant token. The same is true for Celo's stable coin, cUSD. We'll see in the next section that our basic Ethereum faucet does not account for ERC-20 tokens. When it is run on the Celo blockchain, it will assume we want to withdraw the native currency, CELO, as default.

This tutorial aims to show how we can rewrite the faucet and capitalize on the fact that CELO is an ERC-20 compliant token just like its stable coin, cUSD.

## Original Faucet code

Below is the [code](https://raw.githubusercontent.com/ethereumbook/ethereumbook/develop/code/Solidity/Faucet8.sol) from the Ethereum book.

```javascript
// SPDX-License-Identifier: CC-BY-SA-4.0

// Version of Solidity compiler this program was written for
pragma solidity ^0.6.4;

contract Owned {
    address payable owner;

    // Contract constructor: set owner
    constructor() public {
        owner = msg.sender;
    }

    // Access control modifier
    modifier onlyOwner {
        require(msg.sender == owner, "Only the contract owner can call this function");
        _;
    }
}

contract Mortal is Owned {
    // Contract destructor
    function destroy() public onlyOwner {
        selfdestruct(owner);
    }
}

contract Faucet is Mortal {
    event Withdrawal(address indexed to, uint amount);
    event Deposit(address indexed from, uint amount);

    // Accept any incoming amount
    receive() external payable {
        emit Deposit(msg.sender, msg.value);
    }

    // Give out ether to anyone who asks
    function withdraw(uint withdraw_amount) public {
        // Limit withdrawal amount
        require(withdraw_amount <= 0.1 ether);

        require(
            address(this).balance >= withdraw_amount,
            "Insufficient balance in faucet for withdrawal request"
        );

        // Send the amount to the address that requested it
        msg.sender.transfer(withdraw_amount);

        emit Withdrawal(msg.sender, withdraw_amount);
    }
}
```

If we were to deploy this contract on the Celo network as is, it would work for withdrawing the native currency, Celo. This is because Celo is equivalent to Ether in Solidity contracts like this.

But what about Celo's stable currency, cUSD? How would we withdraw that token from this faucet?

To withdraw a specific token, we will have to rewrite our faucet to consider ERC-20 tokens.

## Rewriting the Faucet

While we're at it, we should utilize the [Open Zeppelin](https://github.com/pkdcryptos/OpenZeppelin-openzeppelin-solidity) library to avoid rewriting code that has already have been security audited and used in many Ethereum contracts without issue. There is no guarantee these contracts will provide absolute safety, but they've been tested and can be trusted more than any custom ones we whip up.

First, we'll remove our Owned and Mortal contracts and import Open Zeppelin contracts instead.

Add the Open Zeppelin library to your project.

```javascript
npm install openzeppelin-solidity
```

Now we can import the relevant contracts in our Faucet.sol file.

The Owned and Mortal contracts from the code above are replaced below with the Open Zeppelin access contract called Ownable. Instead of us having to write basic behavior like this for every Solidity project, we can just utilize this library instead.

The [Ownable](https://github.com/pkdcryptos/OpenZeppelin-openzeppelin-solidity/blob/master/contracts/ownership/Ownable.sol) contract provides administrative access control over the faucet. Only the creator of the contract can destroy the contract. What's nice about the Open Zeppelin contract is it adds a bit more functionality than ours. Specifically the ability to transfer or renounce ownership over a contract.

Our updated Faucet.sol file now has these imports at the top:

```javascript
pragma solidity >=0.8.0;

import "../node_modules/openzeppelin-solidity/contracts/security/ReentrancyGuard.sol";
import "../node_modules/openzeppelin-solidity/contracts/access/Ownable.sol";

import "../node_modules/openzeppelin-solidity/contracts/token/ERC20/IERC20.sol";

contract Faucet is ReentrancyGuard, Ownable {
  // ...
}
```

We also added the [Reentrancy Guard](https://github.com/pkdcryptos/OpenZeppelin-openzeppelin-solidity/blob/master/contracts/utils/ReentrancyGuard.sol) contract to protect against nested calls to our faucet. We didn't need to add this for our faucet to be functional, but we should follow best practices to secure our code and protect our users and ourselves.

To complete our contract and have it work for both Celo and cUSD, we have to update our withdraw function.

Everything else stays the same. Our logging events for withdrawals and deposits don't change. Our receive function stays the same.

We need to add an additional parameter to the withdraw function signature that allows us to specify a token name to the faucet. Then we will be able to send that token out of our faucet and to the user who requests a payout based on the name of the requested token.

```javascript
    function withdraw(uint256 withdraw_amount, address token) public {

        require(
            address(this).balance >= withdraw_amount,
            "Insufficient balance in faucet for withdrawal request"
        );

        require(
            // transfer the specified token from this contract to msg.sender
            IERC20(token).transfer(msg.sender, withdraw_amount),
            "Withdrawing cUSD failed."
        );
        emit Withdrawal(msg.sender, withdraw_amount);
    }
```

By using the ERC20 interface from Open Zeppelin, we can pass any address that points to a Celo token contract and withdraw that token from this faucet, provided there is a sufficient balance beforehand.

Here is the full Faucet.sol contract after our changes:

```javascript
pragma solidity >=0.8.0;

import "../node_modules/openzeppelin-solidity/contracts/security/ReentrancyGuard.sol";
import "../node_modules/openzeppelin-solidity/contracts/access/Ownable.sol";

import "../node_modules/openzeppelin-solidity/contracts/token/ERC20/IERC20.sol";

contract Faucet is ReentrancyGuard, Ownable {
    event Withdrawal(address indexed to, uint256 amount);
    event Deposit(address indexed from, uint256 amount);

    address Celo = 0xF194afDf50B03e69Bd7D057c1Aa9e10c9954E4C9;
    address cUSD = 0x874069Fa1Eb16D44d622F2e0Ca25eeA172369bC1;

    function withdraw(uint256 withdraw_amount, address token) public {
        require(token == Celo || token == cUSD, "token is not celo or cUSD");

        require(
            address(this).balance >= withdraw_amount,
            "Insufficient balance in faucet for withdrawal request"
        );

        require(
            IERC20(token).transfer(msg.sender, withdraw_amount),
            "Withdrawing cUSD failed."
        );
        emit Withdrawal(msg.sender, withdraw_amount);
    }

    function donate() external payable {
        emit Deposit(msg.sender, msg.value);
    }

    receive() external payable {
        emit Deposit(msg.sender, msg.value);
    }

    fallback() external payable {
        emit Deposit(msg.sender, msg.value);
    }
}
```

This is our Ethereum faucet contract completely altered for Celo.

We even added some additional checks to make sure the token passed to the withdraw function matches the CELO or cUSD contract address. This ensures only Celo currencies can be withdrawn from this faucet.

## Calling the contract

To call this contract from a dApp kit frontend, we can run the following code. There is a truffle box kit that works out-of-the-box for Celo applications that we should use as our foundation for the project because it simplifies the setup process for our Celo full-stack projects. If we're not interested in seeing our blockchain results in GUI format, we could simply quickstart a [Truffle](https://www.trufflesuite.com/docs/truffle/quickstart#compiling) project with no frontend consideration.

Run the following in the root of a project directory to set up the kit:

```javascript
truffle unbox critesjosh/celo-dappkit
```

Please note that addresses are handled as strings in Javascript and that withdraw amounts have to be handled as big numbers. The reasons for this are outside the scope of this tutorial. For a more in depth explanation of big numbers in Javascript please see this [article](https://ethereumdev.io/how-to-deal-with-big-numbers-in-javascript/).

To deal with the big numbers we'll install the bignumber.js library.

```javascript
cd client
npm install bignumber
```

A withdrawal from the faucet function would look like this. This code could be triggered from a button press in a react application as seen in the example [here](https://github.com/BrittanyDeventer/green-deeds-celo/blob/master/client/screens/CeloScreen.js).

```javascript
/* 
 * To see the full context of this code snippet please view the full file:
 * https://github.com/BrittanyDeventer/green-deeds-celo/blob/master/client/screens/CeloScreen.js
 * ads
 * More on async functions can be found:
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
 */

  withdrawFromFaucet = async (withdrawAmount) => {

    // set variables for the Celo wallet request
    const requestId = 'withdraw_cUSD'
    const dappName = 'Green Deeds'
    const callback = Linking.makeUrl('/my/path')

    // convert user amount to wei in bignumber format
    let amount = parseFloat(withdrawAmount)
    let weiAmount = BigNumber(amount*10e17)

    const txObject = await this.state.faucetContract.methods.withdraw(weiAmount, cUSD)

    // Send a request to the Celo wallet to send an update transaction to the Faucet contract
    requestTxSig(
      kit,
      [
        {
          from: this.state.address,
          to: this.state.faucetContract.options.address,
          tx: txObject,
          feeCurrency: FeeCurrency.cUSD
        }
      ],
      { requestId, dappName, callback }
    ).catch(err => console.log("requestTXSig Err: ", err))

    // Get the response from the Celo wallet
    const dappkitResponse = await waitForSignedTxs(requestId)
    const tx = dappkitResponse.rawTxs[0]

    // Get the transaction result, once it has been included in the Celo blockchain
    let result = await toTxResult(kit.web3.eth.sendSignedTransaction(tx)).waitReceipt()

    console.log(`Faucet contract update transaction receipt: `, result.transactionHash)  
    Alert.alert("Transaction Complete!",
    `Tx Hash: ${result.transactionHash}`
    )
  }
```

# Conclusion

In this tutorial, we learned how to alter a smart contract originally written for Ethereum and customize it for use on the Celo network. We learned about the difference between a native token such as Ether or Celo, and an ERC-20 token such as cUSD. We altered some example Solidity code to illustrate the process generally used to prepare an Ethereum contract for use on another EVM compatible network, including specific mention of alternative tokens where necessary - such as inside the withdraw function, as part of a require statement.

As long as we understand that both blockchains are EVM compatible and run the same bytecode, we can customize any existing Ethereum contract for the Celo network.

# Next Steps

I hope this tutorial helps to see the potential in looking at existing open source code and understanding how simple modifications can lead to efficient coding solutions. Please consider the following reading list to continue on your journey.

## Further Reading:

* [The Ethereum Virtual Machine](https://github.com/ethereumbook/ethereumbook/blob/develop/13evm.asciidoc)
* [Celo Background and Key Concepts](https://docs.celo.org/overview#background-and-key-concepts)
* [Open Zeppelin Source](https://github.com/pkdcryptos/OpenZeppelin-openzeppelin-solidity)
* [Celo Savings Circle](https://github.com/celo-org/savings-circle-demo)
  * Another dApp that utilizes the ERC20 interface in Celo contracts
* [Ethereum Book](https://github.com/ethereumbook/ethereumbook)
* [How to deal with big numbers in Javascript](https://ethereumdev.io/how-to-deal-with-big-numbers-in-javascript/)
* [Celo for Ethereum Developers](https://docs.celo.org/developer-guide/celo-for-eth-devs)
* [Truffle Quickstart](https://www.trufflesuite.com/docs/truffle/quickstart#compiling)

# About the Author

This tutorial was created by [Brittany Deventer](https://github.com/BrittanyDeventer). Brittany is a full-stack developer.


Learn how to convert & customize an existing Ethereum Smart Contract for Celo network

How to customize an Ethereum smart contract for the Celo network

# Introduction

In this tutorial, you will learn how to successfully connect your React Native App to use the Celo Wallet and return a Wallet Address from the Alfajores Wallet.

_To carry out transactions on the Celo Network, you have to connect your Wallet to be able to carry out transactions. When you start out building a dAPP using React Native, you will need this guide to demonstrate how you can install the required libraries to get your dApp up and running._

# Prerequisites

This article assumes that you have basic knowledge of JavaScript $TypeScript$ and how to start a React Native App using expo. It is also assumed that you have read the expo documentation and have basic knowledge of the Celo Wallet.

1. [Celo Wallet](https://docs.celo.org/getting-started/alfajores-testnet/using-the-mobile-wallet)
2. [React Native using expo](https://docs.expo.io/)
3. [DappKit](https://docs.celo.org/developer-guide/dappkit/setup)

# Project Setup

You will need node version `^10.13.0`  
Open the Celo documentation and follow the setup instructions:

`expo init $YOUR_APP_NAME`  
We will use the `TypeScript Template >> Tabs` 

![](https://github.com/figment-networks/learn-tutorials/raw/master/assets/terminalimage.png)

To use the Celo DappKit, install using: `yarn add @celo/dappkit`  
DAppKit's dependencies require a bit of adjustment to use vanilla Expo. The first are a lot of the Node.js modules that are expected. You can get those mostly by using the following modules:`yarn add node-libs-react-native vm-browserify`

**Important Note!**

The default React Native library that is installed with the expo package will cause your app to break. To fix this, go to the `package.json` file and replace the `react-native` version value with this: `^0.63.4` at the time of writing this tutorial. You can always use the most recent version of React Native.

**A Note on the installed Packages**

_node-libs-react-native_: This package provides React Native compatible implementations of Node core modules like stream and http. This is a fork of node-libs-browser with a few packages swapped to be compatible in React Native.

_vm-browserify_ is used to emulate node's vm module for the browser.

**A couple of points to note:**

_The metro.config.js file_

```javascript
const crypto = require.resolve('crypto-browserify');
const url = require.resolve('url/');
module.exports = {
  resolver: {
    extraNodeModules: {
      crypto,
      url,
      fs: require.resolve('expo-file-system'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      net: require.resolve('react-native-tcp'),
      os: require.resolve('os-browserify/browser.js'),
      path: require.resolve('path-browserify'),
      stream: require.resolve('readable-stream'),
      vm: require.resolve('vm-browserify'),
    },
  },
};
```

This should allow you to build the project, however some dependencies might expect certain invariants on the global environment. For that you should create a file `global.ts` with the content below:

```typescript
export interface Global {
  btoa: any
  self: any
  Buffer: any
  process: any
  location: any
}

declare var global: Global
if (typeof global.self === 'undefined') {
  global.self = global
}

if (typeof btoa === 'undefined') {
  global.btoa = function (str: string) {
    return new Buffer(str, 'binary').toString('base64')
  }
}

global.Buffer = require('buffer').Buffer
global.process = require('process')
global.location = {
  protocol: 'https',
}
```

And then add `import './global'` at the top of your `App.js/tsx` file

**Set up Redux**

Install the Redux libraries using the following command:

```text
yarn add redux redux-thunk redux-logger react-redux
```

For TypeScript to run redux logger locally without any errors, you have to add the library `@types/redux-logger` to the devDependencies using the command:

```text
yarn add @types/redux-logger --dev
```

Run the app with the command `expo start`.

# Code

After installing the required libraries, we can then build 2 simple screens in the React Native app. The first screen will have one button. The button will be used to sign a User into the dApp. The second screen will be the screen that proves that the user has successfully authenticated. 

The second screen will return the user's wallet address.

**Let's build the Screens**:

```javascript
export default function LoginScreen() {
  return (
    <View style={styles.container}>
      <Button>Connect Wallet</Button>
    </View>
  );
}
```

![Login Screen](https://github.com/figment-networks/learn-tutorials/raw/master/assets/loginscreen.png)

```javascript
export default function HomeScreen() {
  return (
    <View>
      <Text>wallet address</Text>
      <Text>wallet phone</Text>
    </View>
  );
}
```

**Let's implement the Logic to connect to the Wallet**:

We will use Redux to manage the app state, we have to set up Redux actions to make a call to the Celo Wallet and return the result which is then saved in the app global state. To keep your directory devoid of clutter, open a directory to hold the files for the Redux logic:

![](https://github.com/figment-networks/learn-tutorials/raw/master/assets/reduxdirectory.png)

You can add a file called `constants.js` to the Redux Store Directory. The constants will be used to track the wallet connection process by having the constants as the type of action that was dispatched and then update the state accordingly using a reducer.

```javascript
export const walletConstants = {
  CONNECT_REQUEST: 'WALLET_CONNECT_REQUEST',
  CONNECT_SUCCESS: 'WALLET_CONNECT_SUCCESS',
  CONNECT_FAILURE: 'WALLET_CONNECT_FAILURE',
};
```

Create a `walletsAction.ts` file in the actions folder

```javascript
/*
 The export statement is used to export the only function in the file so that the function can be called using `walletsActions.connect()`
 */
export const walletActions = {
  connect,
};

/*
This function is a simple method provided by Celo to connect to the Valora or Alfajores (for testing) wallet. The `dispatch()` is a redux function which is used to emit actions which we can then listen for in the reducer and update the state accordingly.
*/
function connect() {
  return (dispatch: any) => {
    // This dispatch calls a function that is declared later on in the code.
    dispatch(request('Connecting to wallet'));

    // These variables are needed to connect to the wallet
    // requestId is used to identify the request so we can listen for the same request using the waitForAccoutAuth() function
    // dappName holds the name of the App the wallet will expose as requesting for the detaila
    // callback is the screen we want to send the user to after a successfull connection is made
    const requestId = 'dapplogin';
    const dappName = 'celodapp';
    const callback = Linking.makeUrl('two');

    // This is from the Celo DappKit library, it fires up the wallet and gets the neccessary information
    requestAccountAddress({
      requestId,
      dappName,
      callback,
    });

    //This function listens for the request above and fire up an action to be handled by a reducer.
    waitForAccountAuth(requestId)
      .then((res) => {
        dispatch(success(res));
      })
      .catch((err) => {
        dispatch(failure(err));
        dispatch(alertActions.error(err.toString()));
      });
  };

  // These are the function calls which are dispatched when the user makes a request. The state of the app changes with the status of the request response.
  function request(message: string) {
    return { type: walletConstants.CONNECT_REQUEST, message };
  }
  function success(res: object) {
    return { type: walletConstants.CONNECT_SUCCESS, res };
  }
  function failure(error: any) {
    return { type: walletConstants.CONNECT_FAILURE, error };
  }
}
```

The above file is the `walletAction.ts` It contains the logic to connect to the Wallet and saves the response in the global redux state which is accessible to any part of the codebase. The next thing will be to write the reducer logic to handle the app state modification.

Create a `walletReducer.ts` file in the reducers folder and add the following code:

```javascript
// The initial state of the wallet
const initialState = {
  failed: true,
  connecting: false,
  message: '',
  address: '',
  phone: '',
};

// This is the wallet reducer which takes the state and action as parameters.
// It modifies the state accordingly based on the type of action that it receives from the dispatch calls in the `walletAction.ts` file
export function wallet(state = initialState, action: any) {
  switch (action.type) {
    case walletConstants.CONNECT_REQUEST:
      return {
        connecting: true,
        message: action.message,
      };
    case walletConstants.CONNECT_SUCCESS:
      return {
        failed: false,
        address: action.res.address,
        phone: action.res.phoneNumber,
      };
    case walletConstants.CONNECT_FAILURE:
      return {
        error: action.error,
      };
    default:
      return state;
  }
}
```

Create a `store.ts` file in the store folder:

```javascript
// This is where the store is setup. This is where redux updates the state of the store based on the user actions.
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';

import { rootReducer } from './reducers';

const loggerMiddleware = createLogger();

export const store = createStore(rootReducer, applyMiddleware(thunkMiddleware, loggerMiddleware));
```

Let's update the `App.tsx` file with the Redux Provider:

```javascript
// The Redux Provider wraps around the entire application
export default function App() {
  return (
    <Provider store={store}>
    ...
    </Provider>
  );
}
```

Time to update the LoginScreen and the HomeScreen with the Redux Actions:

```javascript
// The useDispatch is a React Redux Hook to dispatch an action creator.
export default function HomeScreen() {
  const dispatch = useDispatch();

  // This function calls up the connect function from the walletAction Action
  const login = () => {
    dispatch(walletActions.connect());
  };

  return (
    <View style={styles.container}>
      <Button onPress={login}>Connect Wallet</Button>
    </View>
  );
}
```

Also update the HomeScreen and the HomeScreen with the Redux Actions:

```javascript
// Here, we connect to the global state with useSelector hook
export default function HomeScreen() {
  const wallet = useSelector((state: any) => state.wallet);

  // We make sure to handle instances where a user tries to navigate to this page without connecting the app to their wallet by making sure to navigate back to the loginscreen if a connection to the wallet hasn't been made yet
  React.useEffect(() => {
    if (wallet.failed) {
      navigation.navigate('Root');
    }
  }, []);

  return (
    <View>
      <Text>{wallet.address}</Text>
      <Text>{wallet.phone}</Text>
    </View>
  );
}
```

Run your app and Login to see the Wallet and Phone number returned to the Home Screen.

![Wallet Screen](https://github.com/figment-networks/learn-tutorials/raw/master/assets/walletscreen.png)

![Home Screen](https://github.com/figment-networks/learn-tutorials/raw/master/assets/homescreen.png)

# WalletConnect v1 alternative

Instead of using celo DappKit api, nowadays WalletConnect is recommended:

[Valora + WalletConnect v1](https://docs.celo.org/developer-resources/walkthroughs/valora-wc-v1)

This chapter explains how to upgrade the app using node version `^v17.3.0` WalletConnect instead of DappKit
In addition, disconnect functionality and balances information are retrieved and displayed (new sample pictures added). Also, we will explain how to run
the application in web browser mode.

1. Make sure you have nvm installed. This helps you switch between node versions very easy, depending on project needs

```text
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
```

2. Install and use node v17.3.0 with `nvm` the [Node.js version manager](https://github.com/nvm-sh/nvm#intro)

```text
nvm install v17.3.0
nvm use 17.3.0
```

3. To use the WalletConnect v1, install using: 

```text
yarn add @celo/contractkit
yarn add @walletconnect/web3-provider
yarn add react-native-tcp
yarn add web3
```

Prior to running the application, you may need to execute `export NODE_OPTIONS=--openssl-legacy-provider` needed for some Linux systems (CentOS 7)

Run the app using: `expo start` You should see the following:

![Start](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/START_APP.png?raw=true)

Point your web browser under: http://localhost:19002 according to above picture. 
In the following screen, choose "Run in web browser" and your app will be launched in a new web page.

![Run in web browser](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/RUN_WEB_BROWSER.png?raw=true)

## Code changes
1. In the `constants.js` add new constant:
```javascript
DISCONNECT_REQUEST: 'WALLET_DISCONNECT_REQUEST'
```
  
2. Remove DappKit logic from `walletsAction.ts`, change the logic of connect function with WalletConnect support. Add `disconnect` function

```javascript

  export const walletActions = {
    connect, disconnect,
  };

  /*
   Provider configuration to enable wallet connection
  */
  const provider = new WalletConnectProvider({
    rpc: {
      44787: "https://alfajores-forno.celo-testnet.org",
      42220: "https://forno.celo.org",
    },
  });

function connect(navigation) {
  return (dispatch: any) => {
    // This dispatch calls a function that is declared later on in the code.
    let asyncConnect = async() => {
      await provider.enable();
      const web3 = new Web3(provider);
      let kit = newKitFromWeb3(web3)
      kit.defaultAccount = provider.accounts[0]
      let asyncGetData = async() => {
        const stableToken = await kit.contracts.getStableToken();
        const goldToken = await kit.contracts.getGoldToken();
        const cUsdBalanceObj = await stableToken.balanceOf(kit.defaultAccount);
        const goldBalanceObj = await goldToken.balanceOf(kit.defaultAccount);
        const res = {address:kit.defaultAccount, cUsd:cUsdBalanceObj/10**18, celo:goldBalanceObj/10**18};
        dispatch(success(res));
        navigation.navigate('TabTwo');
      }
      provider.on("accountsChanged", (accounts) => {
        asyncGetData();
      });
    }
    dispatch(request('Connecting to wallet'));
    asyncConnect();
  };
  ...
 }
 /* Disconnect from wallet function
 */
 function disconnect() {
  return (dispatch: any) => {
    // This dispatch calls a function that is declared later on in the code.
    let asyncDisconnect = async() => {
        await provider.disconnect();
    }
    dispatch(requestDisconnect('Disconnecting from wallet'));
    asyncDisconnect();
    };
    function requestDisconnect(message: string) {
      return { type: walletConstants.DISCONNECT_REQUEST, message };

    }
  }
```
  
3. Add `cUsd` and `celo` fields to app state in `walletReducer.ts`

```javascript
  const initialState = {
    failed: true,
    connecting: false,
    message: '',
    address: '',
    cUsd: '',
    celo:''
  };

  export function wallet(state = initialState, action: any) {
    switch (action.type) {
      ...
      case walletConstants.CONNECT_SUCCESS:
        return {
          failed: false,
          address: action.res.address,
          cUsd: action.res.cUsd,
          celo: action.res.celo
        };
     ...
    }
  }
```

4. Add logout function to LoginScreen, and inject tab two navigation object in `connect` (as you noticed, we removed the Linking.makeUrl used by DappKit callback, with react native navigation support, which does not refresh entire page to show wallet address/balances. This is not needed, since react uses `state` to show updated page in a responsive async manner. 

```javascript
export default function LoginScreen({ navigation }) {
  const dispatch = useDispatch();

  // This function calls up the connect function from the walletAction Action
  const login = () => {
    dispatch(walletActions.connect(navigation));
  };

  const logout = () => {
    dispatch(walletActions.disconnect());
  };

  return (
    <View style={styles.container}>

        <Button onPress={login} title="Connect Wallet"></Button>
        <Button onPress={logout} title="Disconnect Wallet"></Button>

    </View>
  );
}
```

Here is how the login page should look like now, the new disconnect button is added
![Login Screen](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/TAB_ONE.png?raw=true)

5. Change HomeScreen to display balances in addition to address

```javascript
export default function HomeScreen({ navigation }) {
  ...
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Address: {wallet.address}</Text>
      <Text style={styles.title1}>cUSD: {wallet.cUsd}</Text>
      <Text style={styles.title1}>Celo: {wallet.celo}</Text>
    </View>
  );
}
```

## Application workflow

Run your app and Login to see the Wallet address and balances returned to the Home Screen.

1. First, scan your valora mobile app with the WalletConnect screen shown after the Connect button is pressed (first picture from below)

2. You need to allow access from your Valora Mobile app in order to see the data from Home Screen (second picture from below)

3. When permission granted, the second tab (home screen) is automatically displayed with address and balances information (third picture from below)

![Wallet connect Screen](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/VALORA_QR.png?raw=true)

![Wallet Screen](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/VALORA_CONNECT_F.jpeg?raw=true)

![Home Screen](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/VALORA_TAB2_F.png?raw=true)

# Conclusion

In this tutorial, we learned: How to successfully connect your Redux based React Native App to use the Celo Wallet and return a Wallet Address from the Valora/Alfajores Wallet. The last chapter (WalletConnect v1 alternative) explains how to use the new connection api supported by valora with your mobile installed valora app (https://valoraapp.com/).

# About the Authors

This tutorial was created by [Segun Ogundipe](https://www.linkedin.com/in/segun-ogundipe) and [Emmanuel Oaikhenan](https://github.com/emmaodia).

The WalletConnect v1 alternative chapter was created by [Mircea Carasel](https://ro.linkedin.com/in/mirceac).
Also, the full code with the WalletConnect approach can be found here: https://github.com/mirceac/valora2


Learn how to successfully set up a Celo Wallet with a React Native DApp using Redux

How to successfully connect to a Celo Wallet with a React Native DApp

# Introduction

How would you go about deploying an existing Solidity smart contract on the Celo network? One answer is that you could do it with the help of Truffle -- a development environment that is designed to make deploying smart contracts much easier.

Read on to learn how to deploy smart contracts on Celo with Truffle!

# Prerequisites

This tutorial would be most helpful if you have a smart contract you've written which you'd like to deploy on Celo. If not, that's okay as we will be deploying the default Truffle Migrations contract.

Before you continue, make sure you have Truffle installed. If you don't, run the following line of code in your terminal:

`npm install -g truffle`

## Project setup

First, open the terminal and make a new project folder. We’ll call it celoSmartContract:

`mkdir celoSmartContract && cd celoSmartContract`

Next, let’s initialize the project directory with NPM, the [Node Package Manager](https://npmjs.com/), using the -y flag to accept default parameters:

`npm init -y`

After NPM has initialized the project directory, we’ll need to install some additional packages. Here’s an overview of what we need to install:

* [ContractKit](https://www.npmjs.com/package/@celo/contractkit) - this is a package created by the Celo team to aid in Celo development
* [dotenv](https://www.npmjs.com/package/dotenv) - for reading environment variables stored in a .env file in our code
* [web3.js](https://github.com/ChainSafe/web3.js) - the Ethereum JavaScript API

Install all of the above dependencies for this project using NPM:

`npm install --save @celo/contractkit dotenv web3`

After the NPM packages have installed, we will need to initialize Truffle in our project directory:

`truffle init`

Here's what a successful run of truffle initialization would look like:

[![truffle init](https://camo.githubusercontent.com/96639b87ce3a287a678cff74b466d840f84b83a42403fae9b23287163e275cee/68747470733a2f2f692e696d6775722e636f6d2f4a46367a646f542e706e67)](https://camo.githubusercontent.com/96639b87ce3a287a678cff74b466d840f84b83a42403fae9b23287163e275cee/68747470733a2f2f692e696d6775722e636f6d2f4a46367a646f542e706e67)

## A simple smart contract

Now that we've initialized Truffle, we'll move on to the smart contract we'll be deploying.

For reference, your project structure should now look like this:

[![project structure](https://camo.githubusercontent.com/089cdaddf4682328e54509cbe1b127fb6c2a9e8f4df9ed7ac82d6ed3cefaede1/68747470733a2f2f692e696d6775722e636f6d2f4a705471574c4a2e706e67)](https://camo.githubusercontent.com/089cdaddf4682328e54509cbe1b127fb6c2a9e8f4df9ed7ac82d6ed3cefaede1/68747470733a2f2f692e696d6775722e636f6d2f4a705471574c4a2e706e67)

In this tutorial, the **Migrations.sol** contract which is initialized by Truffle is what we will be deploying.

**Note**: If you want to deploy a smart contract you've written, replace the **Migrations.sol** file in the **contracts/** folder with your own Solidity file. Here's what the default **Migrations.sol** file looks like:

```javascript
// SPDX-License-Identifier: MIT
pragma  solidity >=0.4.22 <0.9.0;

contract Migrations {

  address public owner =  msg.sender;
  uint  public last_completed_migration;

  modifier restricted() {
    require(
	  msg.sender == owner,"This function is restricted to the contract's owner");
	  _;
  }

  function setCompleted(uint completed) public restricted {
	last_completed_migration = completed;
  }
}
```

We won't be going over this smart contract in this tutorial, but if you want to learn Solidity feel free to go through the other tutorials on Figment Learn!

### The migrations folder

Files in the migrations folder are used as deployment scripts. In Truffle, these deployment scripts are called migrations. For each Solidity file you want to deploy, you'll need a corresponding migration.

At its simplest, a migration will look like the `1_initial_migration.js` file you see below:

```javascript
const  Migrations = artifacts.require("Migrations");

module.exports = function (deployer)  {
  deployer.deploy(Migrations);
};
```

Let's break this down a bit.

At the top of the file, the artifacts.require line is what fetches the contract we'll be deploying. The name should always match the Solidity contract definition. In our migrations contract, the contract definition looks like this:

`contract Migrations {`

Next, the script exports a function via the `module.exports()` syntax which takes in a `deployer` object. The deployer object is used for managing some of Truffle's deployment duties, and is what will be used to deploy the contract from Truffle's side of things.

And that's it! At its simplest, migrations are short like this.

**Note:** If you want to deploy your custom Solidity contract, create a new file using the numbered migrations convention, and replace YOUR\_CONTRACT\_NAME with your contract definition:

```javascript
const YOUR_CONTRACT_NAME = artifacts.require("YOUR_CONTRACT_NAME"); 

module.exports  =  function  (deployer)  {
  deployer.deploy(YOUR_CONTRACT_NAME);
};
```

## Connecting to a testnet node

Now we're going to need to connect to a Celo testnet node, which will be how we communicate with the Celo blockchain.

First, create a .env file in the **root directory** of the `celoSmartContract` folder. To do so, navigate to the top of your project folder and type the following command into your terminal:

`touch .env`

Great! You've made a .env file which will hold the environment secrets. Make sure you do not commit this file to GitHub! Add `.env` to a line in your `.gitignore` file to prevent it from being sent to GitHub if you were to commit.

We're going to use [DataHub](https://figment.io/datahub/) to connect to the Celo test network. If you don't have an account, sign up on the [DataHub](https://datahub.figment.io/) website and then resume this tutorial.

Next, open the .env file you created in your code editor and add the following variable, where is the API key from DataHub:

`REST_URL=https://celo-alfajores--rpc.datahub.figment.io/apikey/<INSERT_API_KEY>/`

**Note:** there needs to be a trailing / at the end of the line for this to work!

Now we have the URL we'll use to connect to the Celo testnet saved.

## Getting a Celo account

Next, we’re going to need a Celo account to deploy from. We will need a few things for deployment:

* A Celo account address and corresponding private key
* A Celo account [loaded with testnet funds](https://celo.org/developers/faucet).

First things first, let's get an account and a private key. Create a file named `getAccount.js` in your project root directory. In that file, write the following code:

```javascript
const ContractKit =  require('@celo/contractkit');

const Web3 =  require('web3');

require('dotenv').config();

const main =  async  ()  =>  {
    const web3 =  new  Web3(process.env.REST_URL);
	const client = ContractKit.newKitFromWeb3(web3);

	const account = web3.eth.accounts.create();

	console.log('address: ', account.address);
    console.log('privateKey: ', account.privateKey);
};

main().catch((err)  =>  {
	console.error(err);
});
```

Let's break this down.

First, the script imports ContractKit, Web3, and dotenv. Next, it connects to the Celo network via the REST\_URL in your `.env` file using the following:

`const web3 = new Web3(process.env.REST_URL);`

Then it creates an account on that same testnet connection with the following line:

`const account = web3.eth.accounts.create();`

After that, we just print out the address and private key for future use.

**Note:** The above code is from [\#2. Create your first Celo account](https://learn.figment.io/network-documentation/celo/tutorial/intro-pathway-celo-basics/2.account), so feel free to rewind if you need a review.

Next, run the script in your terminal:

`node getAccount.js`

Your output should print out the address and private key for you new Celo account. It will look like this:

[![output](https://camo.githubusercontent.com/85e62204e4c406103e375245afef4c7ee1fb83998bf2b08e168044c4863fd42b/68747470733a2f2f692e696d6775722e636f6d2f7571314c5854662e706e67)](https://camo.githubusercontent.com/85e62204e4c406103e375245afef4c7ee1fb83998bf2b08e168044c4863fd42b/68747470733a2f2f692e696d6775722e636f6d2f7571314c5854662e706e67)

**Note:** It is important to keep your private key secure! Whoever has it can access all your funds on Celo.

Copy the privateKey into your .env file by adding a line with the following:

`PRIVATE_KEY=YOUR-PRIVATE-KEY`

Where **YOUR-PRIVATE-KEY** is the private key you got from the script output.

Now that you have a Celo account, take the address and paste it into the [Celo developer faucet](https://celo.org/developers/faucet). This will give you testnet funds you can use to deploy your smart contract. Fill out the form and wait a couple of seconds, and your account should be loaded up and ready to go.

[![funding](https://camo.githubusercontent.com/0c74bcb5251da3397bae2c6901c25218a6ff73befb825a53c546181e95e0db06/68747470733a2f2f692e696d6775722e636f6d2f7a5074575748572e706e67)](https://camo.githubusercontent.com/0c74bcb5251da3397bae2c6901c25218a6ff73befb825a53c546181e95e0db06/68747470733a2f2f692e696d6775722e636f6d2f7a5074575748572e706e67)

## Truffle config

The **truffle-config.js** is used in order to tell truffle how you want to deploy your contract.

For our purposes, we will need to add the following code to the project truffle-config file:

```javascript
const ContractKit = require('@celo/contractkit');
const Web3 = require('web3');

require('dotenv').config({path: '.env'});

// Create connection to DataHub Celo Network node
const web3 = new Web3(process.env.REST_URL);

const client = ContractKit.newKitFromWeb3(web3);

// Initialize account from our private key
const account = web3.eth.accounts.privateKeyToAccount(process.env.PRIVATE_KEY);

// We need to add private key to ContractKit in order to sign transactions
client.addAccount(account.privateKey);

module.exports = {
  compilers: {
    solc: {
      version: "0.6.6",    // Fetch exact version from solc-bin (default: truffle's version)
    }
  },
  networks: {
    test: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*"
    },
    alfajores: {
      provider: client.connection.web3.currentProvider, // CeloProvider
      network_id: 44787  // latest Alfajores network id
    }
  }
};
```

First, the config file imports ContractKit, Web3, and dotenv just like the `getAccounts.js` file.

It connects to our Celo node by getting the REST\_URL from .env:

`const web3 = new Web3(process.env.REST_URL);`

Then it gets your account from the private key in the `.env` file in order to deploy from your account:

`const account = web3.eth.accounts.privateKeyToAccount(process.env.PRIVATE_KEY);`

We also add the private key to ContractKit in order to sign transactions with the following:

`client.addAccount(account.privateKey);`

And finally, in the `module.exports` function, we set the Solidity version we want to use under `compilers: {` and the network we want to deploy to under `networks: {`.

The following block of code is what tells truffle to deploy to alfajores $Celo's test network$:

```javascript
alfajores: {
    provider: client.connection.web3.currentProvider, // CeloProvider
    network_id: 44787  // latest Alfajores network id
}
```

## Deployment

We’re almost there! Run the following to check that you did everything correctly:

`truffle compile`

If things are working, you should see the following output:

[![compile output](https://camo.githubusercontent.com/c132bce955dd7c13ee2b89d5b9ac1164f99da53830b11a64096b752278735ad9/68747470733a2f2f692e696d6775722e636f6d2f6835593672636f2e706e67)](https://camo.githubusercontent.com/c132bce955dd7c13ee2b89d5b9ac1164f99da53830b11a64096b752278735ad9/68747470733a2f2f692e696d6775722e636f6d2f6835593672636f2e706e67)

Now that we’ve compiled the smart contract, the last step is to deploy it. Run the following to deploy to the Alfajores testnet:

`truffle migrate --network alfajores`

You should see the following deployment output:

[![output](https://camo.githubusercontent.com/c0fd0be76786e0c102b0ee445dbd77113f3f626853b3bad4827575250ed61788/68747470733a2f2f692e696d6775722e636f6d2f683757777161442e706e67)](https://camo.githubusercontent.com/c0fd0be76786e0c102b0ee445dbd77113f3f626853b3bad4827575250ed61788/68747470733a2f2f692e696d6775722e636f6d2f683757777161442e706e67)

If you see something like the above, you did it correctly! To see your smart contract on the Celo network, open the [Alfajores block explorer](https://alfajores-blockscout.celo-testnet.org/) and paste in the address on the contract address line of your truffle output:

`> contract address: 0xc13891Df18E57137c40876ad206a9B0A30dF8CF5`

You should see a successful contract deployment at that address!

[![block explorer](https://camo.githubusercontent.com/2d23c68351d5f73727daf04dad01cc6efd9a82e5678789d61436c608865036eb/68747470733a2f2f692e696d6775722e636f6d2f6e6c32383869612e706e67)](https://camo.githubusercontent.com/2d23c68351d5f73727daf04dad01cc6efd9a82e5678789d61436c608865036eb/68747470733a2f2f692e696d6775722e636f6d2f6e6c32383869612e706e67)

# Conclusion

Congratulations! You've just deployed a smart contract on the Celo network using Truffle!

Now that you've finished the tutorial, you should have a basic understanding of deploying smart contracts on the Celo network. The possibilities are endless for what you can create! It's still early. You can use this tutorial as a jumping off point for deploying the smart contracts of your dreams🥳

The complete source code for this tutorial can be found on [GitHub](https://github.com/alexreyes/Celo-Deploying-With-Truffle).

# Next Steps

Now that you've learned how to deploy smart contracts on Celo using Truffle, you can build new use cases for the cryptoeconomy on Celo! To learn more Solidity, check out Solidity by Example. You can also continue with the other tutorials on [Figment Learn](https://learn.figment.io/tutorials/).

## Common Errors & Solutions

Here are some common errors you may encounter.

If you get the following error:

`Error: Invalid JSON RPC response: {"message":"no Route matched with those values"}`

[![json rpc error](https://camo.githubusercontent.com/b10c13fb11358a60891ccd1e3191e40ffe54d19ffef9b3f0b127e3e567eed1b6/68747470733a2f2f692e696d6775722e636f6d2f42384c657272552e706e67)](https://camo.githubusercontent.com/b10c13fb11358a60891ccd1e3191e40ffe54d19ffef9b3f0b127e3e567eed1b6/68747470733a2f2f692e696d6775722e636f6d2f42384c657272552e706e67)

Then it's a problem with the **REST\_URL** in your **.env** file.

Make sure the URL has a trailing **/** at the end! It should look like this:

`REST_URL = https://celo-alfajores--rpc.datahub.figment.io/apikey/YOUR-API-KEY/`

If your contract didn't deploy to the test network, your output might look like this:

[![didn&apos;t deploy](https://camo.githubusercontent.com/a59c20e99081c85f182da44f68a167aec86a58da7c690367b4dbe35f57673943/68747470733a2f2f692e696d6775722e636f6d2f703637645a444d2e706e67)](https://camo.githubusercontent.com/a59c20e99081c85f182da44f68a167aec86a58da7c690367b4dbe35f57673943/68747470733a2f2f692e696d6775722e636f6d2f703637645a444d2e706e67)

Where the contracts compiled but it didn't give you an address for where it was deployed to.

To fix this, make sure you have your account loaded up with [testnet funds](https://celo.org/developers/faucet).

If you want to double check that your account received the funds, go to the [Alfajores block explorer](https://alfajores-blockscout.celo-testnet.org/) and paste in your account's address.

Make sure your account isn't empty like this one!

[![empty account](https://camo.githubusercontent.com/60a2da1b381d2d9f9c21ade38e54f3793ead7bf2162d4eb7ccb8297733494cbc/68747470733a2f2f692e696d6775722e636f6d2f795055594353442e706e67)](https://camo.githubusercontent.com/60a2da1b381d2d9f9c21ade38e54f3793ead7bf2162d4eb7ccb8297733494cbc/68747470733a2f2f692e696d6775722e636f6d2f795055594353442e706e67)

# About the author

This tutorial was created by [Alex Reyes](https://www.linkedin.com/in/alexreyes-tech). Alex is a student $BS, Computer Science$ and crypto enthusiast who's learning all about the world of web3 one day at a time and he's contributing to Web3 communities actively. He completed his previous internships at Facebook and Microsoft.



We will learn how to use Truffle and ContractKit to deploy smart contracts to Celo.

Deploying smart contracts on Celo with Truffle

Get the storage of a smart contract

# Introduction

In this tutorial, we will set up a Virtual Machines and install the necessary software to create a full node, then run a light client to monitor the network.  
Full nodes are a major part of the Celo blockchain. A full node is a constantly running program that will help to write, and validate new changes in the network. Multiple full nodes work together, validating the blockchain in a decentralized way.

Please watch the videos linked below and follow along with the written tutorial!

# Prerequisites

* Have a basic understanding of Virtual Machines $VM$, and the Linux terminal.
* Install the Valora app on iOS or Android: [https://valoraapp.com/](https://valoraapp.com/)
* Download the most recent Debian 10.x 64-bit ISO: [https://www.debian.org/](https://www.debian.org/)
* Download VirtualBox, the Oracle VM host: [https://www.virtualbox.org/](https://www.virtualbox.org/)
* Download Signal for iOS or Android: [https://www.signal.org/](https://www.signal.org/)

# Creating the VM

**Video 1 -** Creating the Virtual Machine in VirtualBox

**Click the image to access the video :**

[![SC2 Video](https://img.youtube.com/vi/Cdqwzf-zfug/0.jpg)](http://www.youtube.com/watch?v=Cdqwzf-zfug)

* Click on "Create New" in VirtualBox
* Select a dynamically allocated virtual hard disk
* Start the Virtual Machine
* Create a new user 
* Select "Use entire disk", then write the changes to disk
* Select the checkboxes: Debian desktop environment, SSH server, Standard system utilities 
* Install the Grub bootloader onto the Virtual HARDDISK

The installation of Debian is complete and the VM is now ready.

**Video 2, Building the full node**

[![SC2 Video](https://img.youtube.com/vi/l8qAISLJZq8/0.jpg)](http://www.youtube.com/watch?v=l8qAISLJZq8)

### Gain sudo on the VM

On Linux, the command `sudo` stands for "substitute user do".   
Once a user account is added to the `sudo` group, it will be able to act with administrator or "root" privileges on the VM.

The following commands are entered into the VM terminal:

`su -`

* You will be required to enter the root password of the VM.

`usermod -aG sudo YOURUSERNAME`

* YOURUSERNAME needs to be replaced with the currently logged in users' account name. By default this should be displayed in the terminal prompt, but you can use the command `who` to make sure which account you are currently logged in with. 
* Restart the VM

`id`

* Find $sudo$ in the group list:

![image](https://user-images.githubusercontent.com/80616939/120870817-2f38a480-c557-11eb-9fd0-5be9e710af8d.png)

## Install Docker & utilities

Curl will be used for inserting GitHub scripts into the terminal.

Docker is a service that will be running the light client.

Vim is a tool used for editing files within the terminal. [Click here](https://www.linux.com/training-tutorials/vim-101-beginners-guide-vim/) to read a beginners guide to Vim.

`sudo apt update && sudo apt upgrade`

`sudo apt install docker.io`

`sudo apt install curl`

`sudo apt install vim`

## Enable bi-directional copy/paste & and improve display resolution

Run an external program called VBoxLinuxAdditions, which enables copy/paste between the VM and the host machine.

Cursor over devices in the top left corner, and select: Insert Guest Additions CD Image 

![image](https://user-images.githubusercontent.com/80616939/118760448-0ebadb80-b830-11eb-88fa-51e672a41d83.png)

`cd /media/cdrom`

`sudo sh VBoxLinuxAdditions.run`

* Restart the VM 
* Select Bidirectional copy/paste under Devices &gt; Shared Clipboard

Linux headers provide many vital functions without installing unnecessary files, while VBoxLinuxAdditions provides the dynamic screen resolution.

``sudo apt install build-essential linux-headers-`uname -r``` 

* Restart the VM 
* Select "Adjust window size" under View on the menubar.

## Install nvm and the Celo CLI

This is the install script for [nvm](https://github.com/nvm-sh/nvm), the Node Version Manager. Remember to source files after adding them.

`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash`

`source ~/.bashrc`

Install/use node version 10, then install the Celo CLI onto this client.

`nvm install 10`

`nvm use 10`

`npm install -g @celo/celocli` : The `-g` flag here means we will [install the package globally](https://docs.npmjs.com/downloading-and-installing-packages-globally).

## Join the Docker group

Add your user account to the Docker group.

`sudo usermod -aG docker $YOURUSERNAME`

* Restart the VM

`id`

* Find $docker$ in the list because 

Docker is required for running the light client.

* Close this terminal 

## Use curl to fetch the script

To learn about `.env` files check out this [guide](https://docs.figment.io/network-documentation/extra-guides/dotenv-and-.env).

We are using `curl` to fetch the information stored on [Gist](https://docs.github.com/en/github/writing-on-github/editing-and-sharing-content-with-gists/creating-gists), a free site that GitHub provides for sharing code and other documents.

This `.env` file is for storing and accessing environment variables. It will hold the public keys. 

```text
curl -o celo.env https://gist.githubusercontent.com/alchemydc/ce712f6f3caa7ec79f15f930ed5904ed/raw/385c65b1d3f760854258bfd6dd8cbd135710b78f/celo.env 

source celo.env
```

Here are the contents of this file, if you'd like to create `celo.env` yourself :

```text
export CELO_IMAGE=us.gcr.io/celo-org/geth:mainnet
export CELO_ACCOUNT_ADDRESS="YOUR_ACCOUNT_ADDRESS"
```

This file runs the light client, and contains information about the node in the form of the runtime parameters. This shell script requires Docker to be installed in order to work successfully because it contains the commands `docker pull` and `docker run` . To place the script on the filesystem of the VM, run the following commands

```text
curl -o start_celo.sh https://gist.githubusercontent.com/alchemydc/e28945f5059acd70969b39a50fd0f80a/raw/0d15cceb89ea86ca46df94441c06ecd88a4e6635/start_celo.sh 
```

![image](https://user-images.githubusercontent.com/80616939/120844824-33e86300-c52d-11eb-8b1f-db5e66ec76bb.png)

Move these files into a new directory named `celo-data-dir` by running these commands in the terminal:

```text
mkdir celo-data-dir && cd celo-data-dir

mv ../celo.env . 
mv ../start_celo.sh .

source celo.env && source start_celo.sh
```

The command `mkdir` is for making a new directory, `cd` is for changing the current directory, and `mv` is for moving files. `source` will read and execute the contents of the file.

The docker container should now be running.

## Starting the node

**Run this command from inside celo-data-dir :**

`docker run -v $PWD:/root/.celo --rm -it $CELO_IMAGE account new`

Copy the public address that is provided with your new node account :

![image](https://user-images.githubusercontent.com/80616939/122334208-96ab0880-cef6-11eb-9204-d1279da300a8.png)

Next, run `vim celo.env`

![image](https://user-images.githubusercontent.com/80616939/118758843-044b1280-b82d-11eb-88df-e83e5fb813f4.png)

* In vim press "i" for insert mode.
* Remove YOUR\_ACCOUNT\_ADDRESS with with the backspace or delete key.
* Paste in the public address by pressing "shift+insert".
* Exit vim by pressing ":", then typing "wq", then press return $sometimes called enter$.
* Because we have changed the contents, remember to run `source celo.env`

## Running the light client

`chmod u+x ./start_celo.sh`, Gives the user permission to execute the script.

`./start_celo.sh`, Starts the light client.

`cat ./start_celo.sh`, Displays node information.

`docker stop geth`, Stops the light client.

* Use 2 terminal tabs. One for starting the light client, and the second for all other commands.    

`./start_celo.sh`

`celocli node:synced`

* If true, the node is connected.   

`celocli account:balance NODE_ADDRESS`

`docker stop geth`

![image](https://user-images.githubusercontent.com/80616939/118338503-8eb11080-b4d3-11eb-99a3-11417cf79b32.png)

## Sending Celo to and from the node

* Send both CUSD, and CELO native token to your node address.
* Have 2 terminal windows open. One is for running the light client, and the other for entering commands.
* Make sure both terminals are in the `celo-data-dir`.

`cat ./start_celo.sh`

`docker exec -it geth geth attach`

`exit`

`celocli account:unlock $PUBLIC_ADDRESS`

* Enter password 

`source celo.env`

`celocli transfer:dollars --from $NODE_ADDRESS --to $PHONE_ADDRESS --value=1e16`

Understanding this unit of measurement: 1e16 = 0.01 CUSD, 1e15 = 0.1 CUSD, 1e14 = 1.0 CUSD.

![image](https://user-images.githubusercontent.com/80616939/118338915-9c1aca80-b4d4-11eb-87b6-7970949923aa.png)

# Conclusion

Congratulations, the full node and light client should now be operational!  
Keep in mind this is not the only way to set up a full node. This node is now under your control and part of the Celo blockchain, so remember to store all related keys and passwords safely to avoid losing any money. Please experiment with this setup and personalize it. The `start_celo.sh` and `celo.env` files can be altered to suit your needs. 

# About the Author

This tutorial was put together by [Aidan Dedecker](https://github.com/Aidandedecker/), a bright young member of the Learn community. You can contact him on the [community forums](https://community.figment.io/u/aidanbdedecker/summary).



Learn how to setup & run a Celo full node in a Virtual Machine

Run a Celo full node in a Virtual Machine

# Introduction 

It is important to understand the different types of tokens which can be traded or sold on a blockchain like Celo. There are many use cases for blockchain tokens, and developers are coming up with new ones all the time. This tutorial will show you how to create your own **fungible** token on Celo using the Solidity smart contract language.

# Prerequisites

1. Celo environment setup for Remix, tutorial for which can be found [here](https://learn.figment.io/tutorials/celo-for-remix)
2. Basic knowledge of [Solidity](https://https://solidity-by-example.org/) and the [Remix IDE](https://remix.ethereum.org)

# What are tokens?

Tokens are a unit of measurement, some of which can be used in the virtual world. A token can represent any value the creator wants it to have. Some examples:

* Shares of a company
* Player currency in online games
* A unit of influence in governance of DeFi projects
* A piece of art or media

# Types of Tokens

Broadly these digital tokens can be classified into two categories:

## a. Fungible Tokens :

Fungibility means **replaceable** by another identical item. In simple terms, tokens that have equal value and are interchangable. This could be understood in much the same way as fiat currency - a dollar bill of a certain denomination. Every dollar is equal to every other dollar of the same value, except in very specific circumstances any five dollar bill could be replaced with any other five dollar bill. The exact value of a cryptocurrency token could be subject to change, but one fungible token could serve all the same functions as any other fungible token issued by the same on-chain contract. 

## b. Non-Fungible Tokens $NFTs$:

As you can guess, these are exactly the opposite of fungible tokens: They are not replaceable. Every non-fungible token is unique, thus cannot be interchanged. Examples can be digital art or songs.

In this example we will learn how to mint **fungible** tokens. We will use a standard interface of fungible tokens that is quite popular on the **Ethereum** blockchain and learn how to build similar tokens on **Celo**.

# ERC-20 Standard

ERC-20 is a standard interface used on Ethereum to build fungible tokens. The "ERC" portion of the name refers to "Ethereum Request for Comments" and is a standard adopted by the Ethereum foundation as well as many projects which develop predominantly on Ethereum. 

Because the Solidity language can be used by any EVM-compatible blockchain, the entire standard can be reproduced on Celo with little extra work.

This interface contains some **functions**:

```solidity
// Optional
function name() public view returns (string)
function symbol() public view returns (string)
function decimals() public view returns (uint)
// Required
function totalSupply() public view returns (uint)
function balanceOf(address tokenOwner) public view returns (uint balance)
function allowance(address tokenOwner, address spender) public view returns (uint remaining)
function transfer(address to, uint tokens) public returns (bool success)
function approve(address spender, uint tokens) public returns (bool success)
function transferFrom(address from, address to, uint tokens) public returns (bool success)
```

As well as some **events**:

```solidity
event Transfer(address indexed from, address indexed to, uint tokens)
event Approval(address indexed tokenOwner, address indexed spender, uint tokens)
```

These need to be defined before deploying our smart contract on the blockchain.

In this tutorial, we will create a minimalistic version of ERC-20 $fungible$ tokens.

# Defining Functions and Events

We have named our contract `CeloFungibleToken` and the implementation is given below. Create a new file on Remix named `erc20.sol` and copy the code below:

```solidity
// WARNING: This contract should not be used in production

pragma solidity ^0.5.0;

contract ERC20Interface {
    function totalSupply() public view returns (uint);
    function balanceOf(address tokenOwner) public view returns (uint balance);
    function allowance(address tokenOwner, address spender) public view returns (uint remaining);
    function transfer(address to, uint tokens) public returns (bool success);
    function approve(address spender, uint tokens) public returns (bool success);
    function transferFrom(address from, address to, uint tokens) public returns (bool success);

    event Transfer(address indexed from, address indexed to, uint tokens);
    event Approval(address indexed tokenOwner, address indexed spender, uint tokens);
}


contract CeloFungibleToken is ERC20Interface{
    string public name;                          // name of the token
    string public symbol;                        // symbol of token
    uint8 public decimals;                       // divisibility of token
    uint256 public _totalSupply;                 // total number of tokens in existence

    mapping(address => uint) balances;
    mapping(address => mapping(address => uint)) allowed;


    constructor() public {
        name = "CeloFungibleToken";
        symbol = "CFT";
        decimals = 10; 
        _totalSupply = 10000000000000; // total tokens would equal (_totalSupply/10**decimals)=1000

        /** 
          * decimals means the unit of divisibility we want for our tokens,
          * For example if we want a divisibility of 10^(-3) and total supply of 1000 tokens then
          * decimals = 3 and _totalSupply = 1000000
          **/

        balances[msg.sender] = _totalSupply;
        emit Transfer(address(0), msg.sender, _totalSupply);
    }

    function totalSupply() public view returns (uint) {
        return _totalSupply  - balances[address(0)];
    }

    function balanceOf(address tokenOwner) public view returns (uint balance) {
        return balances[tokenOwner];
    }


    // This function allows an address to give an allowance to another address (spender) 
    // to be able to retrieve tokens from it. 

    function allowance(address tokenOwner, address spender) public view returns (uint remaining) {
        return allowed[tokenOwner][spender];
    }

    function approve(address spender, uint tokens) public returns (bool success) {
        allowed[msg.sender][spender] = tokens;
        emit Approval(msg.sender, spender, tokens);
        return true;
    }

    function transfer(address to, uint tokens) public returns (bool success) {
        balances[msg.sender] = balances[msg.sender]- tokens;
        balances[to] = balances[to] +  tokens;
        emit Transfer(msg.sender, to, tokens);
        return true;
    }


     // This function moves the amount of tokens from sender to recipient and the given amount is 
     // then deducted from the caller’s allowance. 

    function transferFrom(address from, address to, uint tokens) public returns (bool success) {
        balances[from] = balances[from] -  tokens;
        allowed[from][msg.sender] = allowed[from][msg.sender] -  tokens;
        balances[to] = balances[to] + tokens;
        emit Transfer(from, to, tokens);
        return true;
    }
}
```

Our contract should be able to compile now.

# Deployment

We will deploy our contract on Celo's Alfajores testnet. We need to make sure that we have enough balance in our testnet account. We can get free testnet balance from [the Celo Developers faucet](https://celo.org/developers/faucet).

# Procedure

a. Select the account on Celo Wallet with which we want to deploy the smart contract. Make sure to select the account on Alfajores testnet!

b. Click on **Deploy** button.  
 ![accessibility text](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/celo-extension-deploy-button%20%281%29%20%281%29.JPG)

c. Pay the `transaction fee` and sign the transaction using celo wallet.

![accessibility text](https://raw.githubusercontent.com/figment-networks/learn-tutorials/master/assets/signing-transaction-celo.JPG)

**Congratulations!** we have deployed our very own Fungible token on the Celo blockchain. It usually takes around 5 seconds to achieve finality for our transactions. Once our transaction is confirmed, let's head over to [BlockScout](https://alfajores-blockscout.celo-testnet.org/) to see all the details.

[Here](https://alfajores-blockscout.celo-testnet.org/address/0x4324bf228a8a3f1ddfd232335372d5cbaae38cd1/transactions) are the details of the smart contract deployment shown in this example.

# Transferring tokens

Now that our contract is deployed, we have all the CFT tokens that exist on Celo Blockchain. There are many ways of transferring tokens from one address to another. We will discuss a couple of methods. 

**1. SMART CONTRACT INTERACTION** :

a. Select the account which has 1000 CFT, in the example case `0x0eAd666A5B65ED614990fD582693039ed49847E6` $which you can verify on Blockscout using the link given above$ on Celo extension wallet.

b. In the transfer tab and we need to enter the **Alfajores Testnet Address** of the account to which we want to transfer the tokens with the amount of tokens to be transferred. For this tutorial, we will use `0x39E526B01fDe70d64FABDCe5Ca92b47789AA231D` and send 10 CFT tokens $be mindful of decimals that we defined in the contract$.

![accessibility text](https://github.com/figment-networks/learn-tutorials/raw/master/assets/transfer-tab-celo-extension.JPG)

c. Click on `Transact`

![accessibility text](https://github.com/figment-networks/learn-tutorials/raw/master/assets/sending-token-celo-remix.JPG)

d. Pay the `transaction fee`

With that, we have learned how to transfer your fungible tokens to other addresses. But there is still a problem, we aren't able to see our tokens on our Celo wallet. To display the tokens we'll need to:

- Select the **Add Token** button on our Celo wallet as shown in the image.

![accessibility text](https://github.com/figment-networks/learn-tutorials/raw/master/assets/celo-extension-wallet.JPG)

- Enter the contract address in **Token Contract Address** and click `Next`.

![accessibility text](https://github.com/figment-networks/learn-tutorials/raw/master/assets/token-address-celo-wallet.JPG)

- Click on `Add token`

Now we are able to see our token balance!

![accessibility text](https://github.com/figment-networks/learn-tutorials/raw/master/assets/celo-wallet-after-token-addition.JPG)

**2. Celo Wallet**

After adding the token address to our wallet, simply click on the Send button and input the address of a recipient. Tokens will be transferred after signing the transaction and paying the transaction fee.

# Conclusion

In this tutorial, we learned: 
1. Some different use cases of fungible tokens 
2. There are different types of tokens with different standards 
3. How to deploy a custom fungible token on the Celo blockchain 
4. How to send tokens over Celo!

We cannot wait to see what you create!


How to create fungible tokens on Celo using the Remix IDE