Why dApps need user interfaces in Blockchain / Solidity - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do decentralized applications (dApps) require user interfaces?

Choose the best reason why dApps need user interfaces for users.

A To store user data directly on the interface instead of the blockchain

B To allow users to interact easily with blockchain functions without coding knowledge

C Because blockchain networks cannot run without a graphical interface

D Because smart contracts require a user interface to execute transactions

💡 Hint

Think about how normal people use apps and what they need to do with dApps.

dApps run on blockchains but users need simple ways to send transactions and see results. User interfaces make this easy without coding.

❓ Predict Output

intermediate

What does this simple dApp UI code output?

Given this JavaScript snippet simulating a dApp UI interaction, what is the console output?

Blockchain / Solidity

async function connectWallet() {
  const walletConnected = true;
  if (walletConnected) {
    return 'Wallet connected';
  } else {
    return 'Please connect your wallet';
  }
}

connectWallet().then(console.log);

A undefined

B Please connect your wallet

C Error: walletConnected is not defined

D Wallet connected

💡 Hint

Look at the value of walletConnected and what the function returns.

The variable walletConnected is true, so the function returns 'Wallet connected'.

🔧 Debug

advanced

Why does this dApp UI code fail to update the balance display?

Identify the bug in this React code snippet that prevents the balance from showing after fetching.

Blockchain / Solidity

import React, { useState, useEffect } from 'react';

function Balance() {
  const [balance, setBalance] = useState(null);

  useEffect(() => {
    async function fetchBalance() {
      const bal = await getBalanceFromBlockchain();
      setBalance(bal);
    }
    fetchBalance();
  }, []);

  return <div>Your balance: {balance}</div>;
}

async function getBalanceFromBlockchain() {
  return '10 ETH';
}

A The code tries to assign to 'balance' directly instead of using setBalance

B The useEffect hook is missing a dependency array

C The getBalanceFromBlockchain function is not awaited properly

D The initial state of balance should be 0, not null

💡 Hint

Remember how React state variables are updated.

React state variables must be updated using their setter function. Direct assignment to 'balance' does not update the UI.

📝 Syntax

advanced

Which option fixes the syntax error in this dApp UI code snippet?

Fix the syntax error in this JavaScript object used for UI state:

const state = { connected: true, balance: '5 ETH', }

A Remove the trailing comma after 'balance: "5 ETH"'

B Change the quotes around '5 ETH' to single quotes

C Add a semicolon after the closing brace

D Add a key 'wallet' with value null

💡 Hint

Trailing commas in object literals can cause errors in some JavaScript environments.

Trailing commas after the last property in an object literal can cause syntax errors in older JavaScript versions or strict modes.

🚀 Application

expert

How many user interface components are needed to fully interact with a dApp wallet?

Consider a dApp wallet interface that allows users to connect, view balance, send tokens, and view transaction history. How many distinct UI components are minimally required?

A 2 components: WalletInterface, TransactionPanel

B 3 components: WalletConnector, TokenSender, HistoryViewer

C 4 components: ConnectButton, BalanceDisplay, SendForm, TransactionList

D 5 components: ConnectButton, BalanceDisplay, SendForm, TransactionList, SettingsPanel

💡 Hint

Think about each unique user action or view needed.

Each main function (connect, view balance, send tokens, view history) requires a separate UI component for clarity and usability.