本頁面使用機器翻譯自英語，可能包含錯誤或不清楚的語言。如需最準確的信息，請參閱英文原文。由於更新頻繁，部分內容可能與英文原文有出入。請加入我們在 Crowdin 上的努力，幫助我們改進本頁面的翻譯。 (Crowdin translation page, Contributing guide)
Building UI for the dApp
In this section, we'll build the user interface (UI) for our dApp, including wallet connection, balance updates, and minting functionality.
Setting Up the Main Scene
Step 1: Create a Scenes Folder
- Navigate to your project's assets folder.
- Right-click and select Create Folder.
- Name it scenes. (Insert Image)
- Inside the scenes folder, right-click and select Create → Scene.
- Save the scene file when prompted.
- Double-click the newly created scene to set it as the default scene.
Step 2: Creating the Base Canvas
- In the Hierarchy window, right-click on Scene.
- Navigate to Create → UI Component → Canvas.
- Rename it to Canvas
Step 3: Creating the Web3UI Container
- Right-click on the newly created Canvas.
- Select Create → Empty Node.
- Rename it to Web3UI.
Step 4: Setting Up Main UI Objects
Inside Web3UI, create the following components:
1. Connect Wallet Button
- Right-click Web3UI → Create → UI Component → Button.
- Rename it to ConnectWallet.
- In the Inspector Pane, set the button label text to Connect Wallet.
2. Mint Button
- Right-click Web3UI → Create → UI Component → Button.
- Rename it to MintButton.
- Set the button label text to Mint Button.
3. Address Label
- Right-click Web3UI → Create → 2D Object → Label.
- Rename it to AddressLabel.
- Set the label text to Connected Address:.
4. Balance Label
- Right-click Web3UI → Create → 2D Object → Label.
- Rename it to BalanceLabel.
- Set the label text to 0.000ET.
After adding all components, your Hierarchy should look like this:
Canvas└── Web3UI ├── ConnectWallet ├── MintButton ├── AddressLabel ├── BalanceLabel
備註
To properly arrange your components, use the alignment tools at top of the Scene. Click on each component and adjust its position as needed