Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI/UX challenges of Web3 and Dapps

UI/UX challenges of Web3 and Dapps

With the next generation of the web (Web3) we observe a progressive transition of traditional centralized web apps to decentralized apps (Dapps). They can natively interact with blockchain technologies and unlock endless new ideas and innovation. Interacting with Dapps today can often lead to uncertain and frightening actions which lead to frustration and skepticism. We’ll deep-dive into Web3 and Dapps fundamentals and how we got there, clear up confusions and explore how we can improve user experiences to help bringing Dapps closer to people.

Glenn Reyes

December 18, 2022
Tweet

More Decks by Glenn Reyes

Other Decks in Programming

Transcript

  1. Glenn Reyes @glnnrys
    UI/UX challenges of

    Web3 and Dapps
    Workshop

    View Slide

  2. Glenn Reyes
    @glnnrys


    🇵🇭 living in 🇦🇹


    Independent Software Engineer



    Gotten into Web3 through
    @enzyme
    fi
    nance


    🤍 React, GraphQL, Design Systems

    🚴 Sports & 🎸 Music

    View Slide

  3. Agenda
    1.Intro to Web3 & Ethereum Virtual Machine (EVM)


    Blockchain, Dapps & Ethereum

    2.Intro to Wallets & Native Payments (Transactions)


    Intro & Setup MetaMask


    Public & Private Keys

    3.Interacting with public Dapps


    Opensea, Uniswap, ParaSwap, Lenster, Enzyme, etc.

    4.Understanding the tech stack behind Dapps

    5.Identifying UI/UX challenges

    6.What can we do today?

    View Slide

  4. Questions?

    View Slide

  5. What is a blockchain?

    View Slide

  6. View Slide

  7. What is Ethereum?

    View Slide

  8. Ethereum is the community-run technology
    powering the cryptocurrency ether (ETH) and
    thousands of decentralized applications.

    View Slide

  9. What are Smart Contracts?

    View Slide

  10. A "smart contract" is simply a program
    that runs on the Ethereum blockchain.

    View Slide

  11. Read — Query a node on the network


    Write — Send a transaction

    View Slide

  12. What is Web3?

    View Slide

  13. New iteration of the

    World Wide Web

    View Slide

  14. Web3 Architecture

    View Slide

  15. View Slide

  16. Dapp

    View Slide

  17. Decentralized App

    View Slide

  18. Questions?

    View Slide

  19. Wallets & Transactions

    View Slide

  20. View Slide

  21. Interacting with public Dapps

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. Understanding the tech stack
    of Dapps

    View Slide

  28. Ethereum
    Data
    Solidity
    Logic
    Hardhat
    EVM Smart Contracts Ethereum Development Environment
    Ethereum Tooling
    MetaMask
    Wallet
    Identity

    View Slide

  29. Ethereum
    Data
    Solidity
    Logic
    Hardhat
    EVM Smart Contracts Ethereum Development Environment
    Ethereum Tooling
    MetaMask
    Wallet
    Identity
    Vite
    React Development Environment
    Frontend Tooling
    React
    User Interfaces
    Frontend
    BACKEND
    FRONTEND

    View Slide

  30. github.com/glennreyes/react-dapp

    View Slide

  31. Why nobody uses really Web3 yet
    Identifying UI/UX challenges

    View Slide

  32. The entire process is hard to understand
    Wallets, Setup & Transactions

    View Slide

  33. View Slide

  34. Transactions aren’t instant … yet

    View Slide

  35. etherscan.io

    View Slide

  36. View Slide

  37. View Slide

  38. What can we do today?

    View Slide

  39. Work to improve UI/UX of transactions
    • Sharding


    • Divide network into smaller independent networks


    • Allows to process transactions in parallel


    • Layer 2 Solutions


    • O
    ff
    -chain or side chains - less congestion & better transpaction speed


    • ✅ Upgrading to Ethereum 2.0 — “The Merge”


    • September 15, 2022


    • Proof of Work 👉 Proof of Stake


    • Less energy consumption by ~99.95%


    • Improving network infrastructure


    • Improve Ethereum network infrastructure


    • Increase number of nodes


    • Improve connectivity between nodes

    View Slide

  40. https://tinyurl.com/better-web3
    Ideas on what we can do
    today

    View Slide

  41. https://tinyurl.com/better-web3
    -
    feedback
    Please help me improve

    this workshop 🙏

    View Slide