DApp Development Guide

Developing a DApp (Decentralized Application) requires a certain level of technical expertise and knowledge, primarily encompassing the following areas:

Blockchain fundamentals: DApps are built on blockchain technology, so it's necessary to understand the basic knowledge of blockchain, including key technologies such as decentralization, consensus mechanism, and smart contract; blockchain networks: Ethereum is one of the most popular blockchain platforms, and DApp development requires the use of blockchain networks.
Smart Contract Development: Smart contracts are the core part of a DApp. They run on the blockchain and implement decentralized business logic. Common smart contract development languages include Solidity, Vyper, etc. Popular contract standards include ERC20 and ERC721 . You can use smart contract development tools such as Remix, Truffle, etc., to write, test, and deploy contracts.
Distributed Storage Technology: DApps typically need to store data in a decentralized network to ensure data security and persistence. IPFS（InterPlanetary File System） is a storage network based on a distributed hash table and can serve as an ideal storage solution for DApps.
Front-end Development Technologies: You can use front-end technologies like React, Vue.js, etc., to implement the front-end pages and user interaction functionalities of a DApp. You can also use open-source components for quick development. Common wallet connection components include: Wallet Connect, Ton Connect, Wagmi, RainbowKit, Web3 React, Web3 Modal etc.
Back-end Development Technologies: Back-end development is responsible for handling the business logic and data storage of a DApp.

Preparation

Install the Bitget Wallet extension entry
Follow the instructions to create a wallet account, manually add and switch to the ETH network.
Start a local server to run a web page:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Title</title>
  </head>
  <body>
    Hello World
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Title</title>
  </head>
  <body>
    Hello World
  </body>
</html>

Then you can choose either the Quick Development or Customized Development approach to build the part of the DApp that interacts with the blockchain.

Quick Development

When using Wagmi for DApp development:

Install the wagmi package
Configure the chains and provider
Create a BitgetWalletConnector
Set up the connected client
Use the hooks to interact with the wallet within the application

For more details, refer to the Wagmi documentation.

When using RainbowKit for DApp development:

Install related JS dependencies, RainbowKit and peer dependencies
Configure the wallet options with connectors and initialize
Add the RainbowKitProvider to the React application
Call the ConnectButton method to connect the wallet

For more details, refer to the RainbowKit documentation.

When using Web3 React for DApp development:

Install the relevant dependencies
Create a BitgetWallet Connector class
Add the bitgetWallet in the connectors directory
Add the bitgetWalletCard in the connectorCards directory
Add the bitgetWalletHooks in the ProviderExample
Use the hook methods to connect the wallet within the application

For more details, refer to the Web3 React documentation.

When using Web3 Modal for DApp development:

Install the relevant dependencies
Configure your ProjectId, metadata, chains, and other necessary config information
Call the createWeb3Modal method to apply the configs
Use the w3m-button and other web components within the application to connect the wallet

For more details, refer to the Web3 Modal documentation.

Customized Development

Customized Development requires understanding the knowledge of wallet providers. In short, in the BitgetWallet, the provider is a JavaScript class instance of the chain methods.

After installing the Bitget Wallet, the wallet will inject the provider object with the chain methods into the window object when the browser loads the page. You can call the methods of this provider to achieve interaction with the blockchain. The object injected by Bitget Wallet is generally ``window.bitkeep[namespace]`. Bitget Wallet provides a total of 10 provider objects:

Aptos provider = window.bitkeep.aptos;
Bitcoin provider = window.bitkeep.unisat;
Cosmos provider = window.bitkeep.keplr;
ETH provider = window.bitkeep.ethreum;
Near provider = window.bitkeep.near;
Solana provider = window.bitkeep.solana;
Starknet provider = window.starknet_bitkeep;
Sui is relatively unique, get provider through events
Ton provider = window.bitkeep.ton;
Tron tronLink = window.bitkeep.tronLink; tronWeb = window.bitkeep.tronWeb

For example: On the ETH chain you can use

const provider = window.bitkeep.ethreum;

const provider = window.bitkeep.ethreum;

To get the provider, and then use:

provider.request({ method: "eth_requestAccounts" });

provider.request({ method: "eth_requestAccounts" });

to request the wallet connection and retrieve the account address information. You can also pass in different methods to call different provider methods, thereby implementing complex application scenarios. For more details, please refer to the Eth Provider APIs and the Provider APIs of other chains.

You can check the existence of the provider to determine whether the user has installed the wallet plugin. Before using the provider, you must ensure that the wallet is properly installed. If the wallet is not installed, you should guide the user to download and install it.

const provider = window.bitkeep && window.bitkeep.ethereum;

if (!provider) {
  window.open("https://web3.bitget.com/en/wallet-download");
}

const provider = window.bitkeep && window.bitkeep.ethereum;

if (!provider) {
  window.open("https://web3.bitget.com/en/wallet-download");
}

The method of directly accessing the provider to connect the wallet and interact with it is called the `JS Bridge`.

The common scenarios for the JS Bridge to connect wallets are PC webpage linking to browser extension wallets, and in-app browser pages accessing the in-app wallet.

In addition to JS Bridge, there is also an interactive mode of `Http Bridge`.

In addition to the JS Bridge, there is also the `Http Bridge` as an interaction method.

The common scenarios for the Http Bridge to connect wallets are through a cloud-based server as a bridge, where the app wallet scans a QR code or jumps to the wallet via Deeplinks to establish a long-lived connection. Common implementation products for this are Wallet Connect and Ton Connect.

Wallet Connect

By constructing a provider object using the development package provided by Wallet Connect, there is no need to detect installation. For more details, please refer to the Reference/Wallet Connect documentation.

import { EthereumProvider } from "@walletconnect/ethereum-provider";
let provider = await EthereumProvider.init({
  projectId: "<YOUR_PROJECT_ID>",
  chains: [chainId],
  showQrModal: true,
  qrModalOptions: {
    themeMode: "dark",
    desktopWallets: [],
  },
});

await provider.connect();

import { EthereumProvider } from "@walletconnect/ethereum-provider";
let provider = await EthereumProvider.init({
  projectId: "<YOUR_PROJECT_ID>",
  chains: [chainId],
  showQrModal: true,
  qrModalOptions: {
    themeMode: "dark",
    desktopWallets: [],
  },
});

await provider.connect();

Ton Connect

By initializing the wallet connection component using the third-party package provided by Ton Connect, the component will automatically retrieve and provide a selection of compatible wallets for the user to connect. For more details, please refer to the Reference/Wallet Connect documentation.

import { TonConnectUI } from "@tonconnect/ui";
const tonConnectUI = new TonConnectUI({
  manifestUrl: "https://<YOUR_APP_URL>/tonconnect-manifest.json",
  buttonRootId: "<YOUR_CONNECT_BUTTON_ANCHOR_ID>",
});

await tonConnectUI.openModal();

import { TonConnectUI } from "@tonconnect/ui";
const tonConnectUI = new TonConnectUI({
  manifestUrl: "https://<YOUR_APP_URL>/tonconnect-manifest.json",
  buttonRootId: "<YOUR_CONNECT_BUTTON_ANCHOR_ID>",
});

await tonConnectUI.openModal();

Method Calls After Connecting the Wallet

After obtaining the provider, you can call the wallet APIs. The common APIs include:

Connect/disconnect wallet
Get wallet account information
Get current network/add network/switch network
Get balance
Sign regular data
Sign transactions
Send transactions

Additionally, wallets also provide event listeners, which allow DApps to monitor certain wallet operations. The typical events provided are:

Listen for account switching
Listen for network switching

For more details, please refer to the BitgetWallet APIs and Bitget Wallet Demo.

DApp Development Guide ​

Preparation ​

Quick Development ​

Customized Development ​

The method of directly accessing the provider to connect the wallet and interact with it is called the JS Bridge. ​

In addition to JS Bridge, there is also an interactive mode of Http Bridge. ​

In addition to the JS Bridge, there is also the Http Bridge as an interaction method. ​

Method Calls After Connecting the Wallet ​

Related Reading ​