Building User-Friendly dApp Interfaces BDC Practice Questions (Page 6)

Questions 26–30

1. 26expert · hard

   A dApp for a decentralized exchange allows users to provide liquidity. After a user submits a transaction, the UI shows a success message, but the transaction later reverts due to a price slippage issue. Users are confused because the success message was premature. The team wants to prevent this confusion. Which approach is most effective?

   • AShow a success message immediately after the user signs the transaction, since the user has approved it.
   • BWait for the transaction receipt to be mined before showing a success message, and display a warning if the transaction reverts.
   • CHide the success message and only show an error if the transaction fails.
   • DAsk users to manually check the block explorer to see if the transaction succeeded.
   Reveal Solution Discussion Select an answer first
2. 27expert · hard

   A dApp for a decentralized education platform is used by students on a variety of devices, including older smartphones and assistive technologies. The team must ensure the interface is responsive and accessible without requiring users to download additional software. Which design strategy is most appropriate?

   • AUse a progressive web app (PWA) with a responsive layout, semantic HTML, and ARIA labels to support assistive technologies.
   • BCreate a desktop-only web application with a fixed layout.
   • CUse a PDF-based interface that can be viewed on any device.
   • DDevelop a native app for each major mobile platform to ensure performance.
   Reveal Solution Discussion Select an answer first
4. 28application · medium

   A dApp team is building a mobile-first interface for a DeFi dashboard. They want to ensure it works well on both small phones and large desktop monitors. Which approach best meets this requirement?

   • ADesign a fixed-width layout optimized for the most common phone size and add horizontal scrolling for larger screens.
   • BCreate a separate mobile app using React Native and a separate web app for desktop users.
   • CRely on the browser's default zoom to scale the desktop layout down to mobile size.
   • DUse a responsive CSS grid with breakpoints that adjust the layout from a single column on phones to multiple columns on larger screens.
   Reveal Solution Discussion Select an answer first
5. 29application · medium

   A dApp allows users to swap tokens. After a user confirms a swap in MetaMask, the transaction is pending for several minutes. The UI shows a generic spinner. Users are unsure if the transaction is still valid or if they need to do something. What is the best way to communicate the transaction status?

   • AAutomatically resubmit the transaction with a higher gas price if it is pending for more than one minute.
   • BShow a message that says 'Transaction failed' if it takes longer than 30 seconds.
   • CHide all status information and let users check their wallet balance to infer success.
   • DDisplay a status message that says 'Transaction pending' with the transaction hash and a link to the block explorer, and update the UI when the transaction is confirmed.
   Reveal Solution Discussion Select an answer first
6. 30expert · hard

   A dApp team is integrating MetaMask and WalletConnect to support both desktop and mobile users. They want to provide a seamless experience, but they are concerned about users who do not have a wallet installed. What is the best strategy?

   • AUse only WalletConnect for all users, as it works on both desktop and mobile.
   • BShow a 'Connect Wallet' button that only supports MetaMask, and display an error if MetaMask is not installed.
   • CRequire users to install MetaMask before they can use the dApp.
   • DDetect the user's platform and show the appropriate wallet connection option, with a fallback to WalletConnect for mobile and a 'Get a Wallet' link for users without a wallet.
   Reveal Solution Discussion Select an answer first