Build your First DAO and deploy it to moonbeam network PART 3 : Deploy to moonbeam.

This article is part of DAO building on moonbeam series, if you still didn’t read the other part yet, I highly recommend checking it first here

1. Build your First DAO and deploy it to moonbeam network PART 1 : Setup and play around
2. Build your First DAO and deploy it to moonbeam network PART 2 : Smart Contract

Previously, we have already walkthrough the features and deep dive into the code, I hope you guys should already understand the concept of simple DAO already and how it implements.

In this chapter, we’ll try to deploy it to moonbeam and also try to use an ability that moonbeam provides us like XCM. Some people may have a question, what exactly is moonbeam, and also what is XCM though? Don’t worry, I will explain it to you very soon through a tutorial and code.

What is Polkadot & moonbeam ?

To don’t make this article too long, I’ll explain just the brief concept, to let you guys could figure out what is it.

Polkadot is another blockchain network that has a philosophy to focus on Specialization and Connectivity, polkadot believed that we can make one blockchain that is best on every aspect, instead, we should have some ecosystem of specialized chains and make their connections seamless, so polkadot introduced concept of RelayChain which is the main network and make secured, and finality of specialized chain (Layer 0) and called specialized chain that connected to RelayChain(Layer 1) as Parachain, polkadot also provides SDK to let everyone create parachain to plugin the central Relaychain . Moonbeam is one of parachain that popular and very specialized for dapps and smart contract. Moonbeam let user migrate app from ethereum, and also enhance dapp ability that polkadot chain provided, such as cross chain transfer, etc.

If you need to deep dive into more detail about moonbeam, please check this its a great resource to getting start and learn about moonbeam and polkadot.

How Dapps deployment ?

In order to deploy dapps, you have to prepare to deploy 2 part, the first one is smart contract, and the second web frontend client. We will focus on just the first smart contract part deployment here, as the frontend part is just normal web deployment nothing special there. So let’s get start

On our dapps template, it already has prepared script for deployment, let’s check file 00_deploy_your_contract.js . Every deployment script will be created here.

notes: deployment scripts name here should start with number or date to help us figure out sequence of deployment and let us browser to the latest deployment script easier.

// packages/hardhat/deploy/00_deploy_your_contract.js
module.exports = async ({ getNamedAccounts, deployments }) => {
  const { deploy } = deployments;
  const { deployer } = await getNamedAccounts();
  const members = [
    "<add-your-address-here>",
  ]; // browser burner wallet and powvt.eth addresses.
  PowDAO = await deploy("PowDAO", {
    // Learn more about args here: https://www.npmjs.com/package/hardhat-deploy#deploymentsdeploy
    from: deployer,
    args: [members],
    log: true,
  });
  ....
}

The template choose hardhat as tools to build a development environment and also help to deploy the contract. If you have no idea about hardhat, please check it here first. hardhat will call default function in this deployment script file, and pass the essentials variable in, such as deployments and getNameAccounts . The deployments is object that included everything about deployment and also the deploy function that we’ll use to execute the deployment. Also getNameAccounts is deployer address, we’ll explain about this address later.

Let’s check on the script it very short. basically, it just call deploy function with a specific parameter that indicates what we gonna deploy. The first param is your smart contract name which you need to deploy. The second param extra config information. you have to specify from which is the deployer address, this address we got from getNameAccounts that returned from hardhat itself, the second one is args which is the argument value that we need to pass to smart contract constructor. normally, this argument will be any variable that we need to configure once the contract is deployed, and don’t need to change it forever. For this example, this address is DAO’s initial member, as we need some first members to have a grant to add another one. The last one is just log, just turn it on to help check the deployment process easier.

Setup Network for deployment

This template also already prepared hardhat config about blockchain network to deploy, let’s check file ackages/hardhat/hardhat.config.js. This file included all declaration config for networks, and also some script code.

const defaultNetwork = "localMoonbeam"
...
module.exports = {
  defaultNetwork,
   networks: {
    localhost: {
      url: "http://localhost:8545",
    },
	....
	localMoonbeam: {
      url: "http://127.0.0.1:9933",
      gasPrice: 1000000000,
      chainId: 1281,
      accounts: {
        mnemonic: mnemonic(),
      },
    },
  }
}
const DEBUG = true;

This hardhat config file required us to return the hardhat network config, as you can see, we need to config the defaultNetwork as the network that we need to deploy to, and also networks as the information of each network config.

And don’t forgot to change this flag to true

const DEBUG = true;

To let use saw all mechanism on deployment.

Let’s add localMoonbeam config with this config

localMoonbeam: {
   url: "http://127.0.0.1:9933",
   gasPrice: 1000000000,
   chainId: 1281,
   accounts: {
     mnemonic: mnemonic(),
   },
},

url is the RPC url use for let hardhat contact with network

gasPrice is gas that you need to spend when deploy.

chainId this one needs to be 1281 for moonbeam local node. (Yeah, we’ll deploy it to standalone local node first, that I will show you how to run it soon)

accounts this one is accounts for deployment, you might be curious that we already add deployer address in the script previously, why we still need to define it here again. We’ll use HDWallet to keep private keys, and mnemonic is the readable key that gave us access to all addresses inside. if you not familiar with concept of HDWallet, I highly suggest you check this Link first.

Alright, then we’ll generate deployer wallet address first, the template also already prepared script for us 🤩

Just run

yarn generate

It should show the response like

$ yarn workspace @scaffold-eth/hardhat generate
$ hardhat generate
mnemonic <your-mnemonic>
privateKey <private-address>
🔐 Account Generated as <address> and set as mnemonic in packages/hardhat
💬 Use 'yarn run account' to get more information about the deployment account.
✨  Done in 4.59s.

Please keep privateKey and address very well, we need to use it in the next step.

(If you can’t see private please double check you already change DEBUG flag on deployment script)

Run standalone Moonbeam local node & connect to polkadot.js

Honestly, to don’t make this article too long, we could follow this official Moonbeam Guideline to run the node and connect to polkadot.js. So basically, we need to spin up docker for moonbeam development node and connect polkadot.js to your local one.

polkadot.js is saas app provided by polkadot team it has many useful tools to connect and explore polkadot ecosystem network. You can check it here https://polkadot.js.org/apps

Then assume that you’re already setup everything follow the moonbeam doc, then let using it to transfer money to our local wallet.
first of all, click navigate to the account page from the navbar above.

Then, check on the list.

here is the list of pre-created user addresses on this local node, each has 1 million coins to let us play around. So click on “Send” button to send some asset to our generated address.

Then fill address that you got from yarn generate step above as a destination address to transfer to, fill the amount should be at least 100 to be more liquidity, then click send and “sign & submit”.

polkadot.js will show notification to ensure that your transaction is already written on the block.

To make sure, you can check transaction result on Network > Explorer this page will show the latest event that happen on chain. so you should saw this transfer transaction success.

If everything is look good, then we are ready to deploy our contract to moonbeam node now, let compile our smart contract first.

And like before, the template has already prepared compile script for us.

yarn compile

Then you should see the response like

$ yarn workspace @scaffold-eth/hardhat compile
$ hardhat compile
Compiling 3 files with 0.6.7
Compilation finished successfully
✨ Done in 5.35s.

This result means the compiler already complied 3 smart contracts (including others contract on template) with a solidity version 0.6.7. If you need to config about compiler please check this config in hardhat.config.js file.

solidity: {
    compilers: [
      {
        version: "0.6.7",
        settings: {
          optimizer: {
            enabled: true,
            runs: 200,
          },
        },
      },
    ],
  },

We are ready to deploy now, let run

yarn deploy

It will run deployment script, then the result should be like

yarn run v1.22.10
$ yarn workspace @scaffold-eth/hardhat deploy
$ hardhat deploy --export-all ../react-app/src/contracts/hardhat_contracts.json
Nothing to compile
deploying "PowDAO" (tx: <tx-hash>)...: deployed at <contract-address> with 2083695 gas
$ hardhat run scripts/publish.js
✅  Published contracts to the subgraph package.
✨  Done in 4.79s.

It will deploy contract to your local moonbeam chain, and also show the address on contract and tx unique hash. To make sure, you should also see this message on your local docker moonbeam node.

2022-04-14 05:37:54 🙌 Starting consensus session on top of parent <adderess>
2022-04-14 05:37:54 🎁 Prepared block for proposing at 11 (35 ms) [hash: <hash>; parent_hash: 0x410c…2783; extrinsics (4): [0xeeac…02d8, 0xb6c1…e2c7, 0xef12…0427, 0x5b23…63d1]]
2022-04-14 05:37:54 ✨ Imported #11 (0xcb13…5c3f)
2022-04-14 05:37:54 Instant Seal success: CreatedBlock { hash: <hash>, aux: ImportedAux { header_only: false, clear_justification_requests: false, needs_justification: false, bad_justification: false, is_new_best: true } }
2022-04-14 05:37:55 💤 Idle (0 peers), best: #11 (0xcb13…5c3f), finalized #0 (0x6103…acbe), ⬇ 0 ⬆ 0

Hooray 🎉 🎉 🎉 your contact is already deployed to your local moonbeam node now.

To check the functionalities, you can run react-app by

yarn start

But don’t forget to change the target chain on react-app code to point to your local moonbeam network instead.

First, you have to add network config for moonbeam local on react app first

// packages/react-app/src/constants.js
export const NETWORKS = {
  localhost: {
    name: "localhost",
    color: "#666666",
    chainId: 31337,
    blockExplorer: "",
    rpcUrl: "http://" + window.location.hostname + ":8545",
  },
  ...
  localMoonbeam: {
    name: "Local Moonbeam",
    gasPrice: 1000000000,
    chainId: 1281,
    color: "#00b0ef",
    rpcUrl: "http://127.0.0.1:9933",
  },
}

Add name whatever you want, gasPrice you can copy from above config first (the gas price has some tricks to define, I’ll make some article about gasPrice and strategies to reduce gasPrice very soon.). chainId same as you config on hardhat config, and also rpcUrl should point to you local docker moonbeam node

Then, go to react App.jsx file to change app to point io moonbeam network instead of hardhat local default chain.

// packages/react-app/src/App.jsx
/// 📡 What chain are your contracts deployed to?
const targetNetwork = NETWORKS.localMoonbeam;

Then refresh your UI again. right now, you should see “Local Moonbeam” or whatever name you define on the right you of react app.

So now, you already successfully deployed contract to moonbeam node on your machine. If you need to deploy it to moonbeam official node, just change chainId and rpcUrl to point at the official one instead of local. Every step else should be the same.

And again our article is too long 🤣, so let split it into the next part.

On the next episode, we’ll try some interesting functionality on moonbeam like XCM, we’ll use polkadot.js to transfer asset across parachain and also write some contract to transfer asset.

Thank you for your interest, and see you on the next 🚀