Chain
BNB Beacon Chain
Staking & lapisan tata kelola ekosistem BNB Chain
Pengembang
Komunitas
This blog is contributed by Magic Team
Download this example and get started in seconds:npx make-magic --template binance-smart-chain
Hi 👋, in this end-to-end guide you'll be building a Binance Smart Chain based dApp (decentralized application) with the functionalities to send transactions, deploy & iteract with smart contracts, and sign messages, with keys secured by a familiar Web 2.0 style passwordless login!
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.
npx make-magic --template binance-smart-chain
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.
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 to 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 Test Publishable API Key - copy and paste the key into your CLI prompt.
After hitting Enter, you'll be asked to select whether you’d like to use npm / yarn as the NPM client for your project.
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 to 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!
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:
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.
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!
<script src="https://cdn.jsdelivr.net/npm/magic-sdk/dist/magic.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@1.3.4/dist/web3.min.js"></script>
Before you initialize a Magic instance, you'll need to configure your Binance Smart Chain options.
For Testnet
const BSCOptions = {
/* Smart Chain Testnet RPC URL */
rpcUrl: 'https://data-seed-prebsc-1-s1.binance.org:8545/',
chainId: 97, // Smart Chain Testnet Chain ID
};
For Mainnet
const BSCOptions = {
/* Smart Chain Mainnet RPC URL */
rpcUrl: 'https://bsc-dataseed.binance.org/',
chainId: 56, // Smart Chain Mainnet Chain ID
};
Now you can initialize a Magic instance with your Publishable API Key and Binance Smart Chain options:
/* Initialize Magic instance */
const magic = new Magic('pk_test_api_key', {
network: BSCOptions,
});
/* Initialize Binance Smart Chain Web3 provider */
const web3 = new Web3(magic.rpcProvider);
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
const handleLogin = async e => {
e.preventDefault();
const email = new FormData(e.target).get('email');
if (email) {
/* One-liner login 🤯 */
await magic.auth.loginWithMagicLink({ email });
render();
}
};
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 seedphrases 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
const receipt = await web3.eth.sendTransaction({
from: fromAddress,
to: destination,
value: web3.utils.toWei(amount),
});
Read official Web3 SDK documentation to learn more method usages. The Magic SDK documentation has more examples too.
Full Implementation
const handleSendTxn = async e => {
e.preventDefault();
const destination = new FormData(e.target).get('destination');
const amount = new FormData(e.target).get('amount');
if (destination && amount) {
const btnSendTxn = document.getElementById('btn-send-txn');
btnSendTxn.disabled = true;
btnSendTxn.innerText = 'Sending...';
const fromAddress = (await web3.eth.getAccounts())[0];
// Submit transaction to the blockchain and wait for it to be mined
const receipt = await web3.eth.sendTransaction({
from: fromAddress,
to: destination,
value: web3.utils.toWei(amount),
});
console.log('Completed:', receipt);
render();
}
};
Implementing user logout is very simple.
Full Implementation
const handleLogout = async () => {
await magic.user.logout();
render();
};
Fortmatic 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).
👉 Check out the following CodeSandBox for full example.