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:
- Visit the BNB Testnet Faucet
- Copy and paste your public address from the example app into the text box of the faucet
- 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!
