How to build Dapps on BSC?

How to build Dapps on BSC?

This guide will help you build a dapp (decentralized application) on BSC (Binance Smart Chain) with the functionalities to send transactions, deploy & interact with smart contracts, and sign messages, with keys secured by a familiar Web 2.0 style passwordless login.

Boostrap Project

CLI Quickstart Tool

To start, run the following CLI command in your terminal. The make-magic NPM package is the quickest way to bootstrap a Magic project from a list of pre-built templates — similar to create-react-app.

Setup Project Name

After a few seconds, you will be prompted for a project name. This will also be the name of the folder that will be created for this project.

Magic Publishable API Key

After putting in a project name, you will be prompted for your Magic Publishable API Key, which is used to enable user authentication with Magic.

To get your publishable API key, you’ll need to sign up for Magic Dashboard. Once you’ve signed up, an app will be created upon your first login (you’ll be able to create new apps later). You’ll now be able to see your Live Publishable API Key — copy and paste the key into your CLI prompt.

Select NPM Client

After hitting Enter, you’ll be asked to select whether you’d like to use npm / yarn as the NPM client for your project.

Open Application

After selecting your NPM client, a lightweight server will automatically start, and you’ll be directed to your application running locally. In this example app, you’ll be prompted to sign up for a new account using an email address or login into an existing one. The authentication process is secured by Magic.

After clicking on your magic link email, you’ll be successfully logged in, and a Binance Smart Chain wallet address will be automatically generated as well!

Get Test BNB

To interact with this example app, you’ll first need to acquire some test BNB tokens. This is very straightforward with Binance Smart Chain with a couple few steps:

  1. Visit the BNB Testnet Faucet
  2. Copy and paste your public address from the example app into the text box of the faucet
  3. Click the Give me BNB dropdown button, and select how many tests

BNB tokens you’d like to get

After a few seconds, the tokens will be available in your account.

Code Deep Dive

Now you can open your local project with a code editor of your choice, and we’ll highlight several snippets of code where we’ll teach you some basics on how to use Magic and Binance Smart Chain.

Install Magic and Web3 SDK

To begin using Magic and Binance Smart Chain, you’ll first need to install the Magic and Web3 Javascript SDK with a script tag. You can also install them with yarn or npm. You may already be familiar with the Web3 SDK, which is often used to build Ethereum-based decentralized applications. What’s exciting about Binance Smart Chain is that it’s EVM-compatible, which means you can continue to use the same Web3 SDK without having to learn a new SDK interface.

Initialize Magic Instance

Before you initialize a Magic instance, you’ll need to configure your Binance Smart Chain options.

For Testnet

For Mainnet

Now you can initialize a Magic instance with your **Publishable API Key** and Binance Smart Chain options:

Implement Login Handler

Implementing user login is very straightforward with Magic. Simply pass in the user email to a one-liner to initiate the login process:

await magic.auth.loginWithMagicLink({ email });

Full Implementation

Implement Send Transaction

Every Magic-user account comes with a Binance Smart Chain wallet key pair and can be accessed via familiar and simple Web 2.0 style login without needing to write down seed phrases or download browser extensions.

To get your current wallet address

const fromAddress = (await web3.eth.getAccounts())[0];

To send a transaction to the blockchain with Web3

Full Implementation

Implement Logout Handler

Implementing user logout is very simple.

Full Implementation

Use Formatic

Formatic is an alternative product developed by the Magic team to support Ethereum-specific dApps — it now also supports Binance Smart Chain. The main difference is that Fortmatic offers a Single-Sign-On user experience and has a default UI for sending transactions and sending messages (unlike Magic, where you can customize the UI).

That’s all we wanted to talk about for today, friends. Stay updated with the latest information and news from the bc team. Our team will be glad to see you next time!