Web3 Wallets

Abstract

1. Introduction

[![NPM Version][npm-image]][npm-url] [![Downloads Stats][npm-downloads]][npm-url] [![Discord][discord-image]][discord-url] [![Gitmoji support][gitmoji-image]][gitmoji-url]

2. Objective

Connect multiple web3 wallets to your dapp easily

This project demonstrates how TypeScript, Web3, Ethereum can be applied to a real-world Blockchain & Cloud Computing problem.

3. Key Features / Modules

• Built-in functions for working with signatures, connecting wallets, tracking the status of transactions, ENS names, and more.
• Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, Keplr, xDefi, Phantom (Solana) and Injected wallets.
• Auto-refresh data on wallet, block, and network changes
• TypeScript ready
• All supported networks are in networks.ts

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm / yarn / pnpm
• VS Code or any code editor
• Node.js and npm
• Hardhat / Truffle / Remix IDE
• MetaMask wallet with a test network
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/viaprotocol/web3-wallets.git
cd web3-wallets

yarn add @viaprotocol/web3-wallets

import { useContext } from 'react'
import { WalletContext, WalletProvider } from '@viaprotocol/web3-wallets'

function App() {
  return (
    <WalletProvider>
      <NestedComponent />
    </WalletProvider>
  )
}

function NestedComponent() {
  const { connect, isConnected, address } = useContext(WalletContext)

  if (!isConnected) {
    return (
      // Select MetaMask and connect to ETH Mainnet
      <button
        type="button"
        onClick={() => connect({ name: 'MetaMask', chainId: 1 })}
      >Connect wallet</button>
    )
  }

  return (

{address}

  )
}

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add a CI/CD pipeline with GitHub Actions
• Deploy to a public test network or cloud free tier
• Add monitoring and cost alerts

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Why does this problem need a blockchain or cloud-native design?
2. Explain the smart contract / infrastructure components and how they interact.
3. How are gas costs or cloud costs kept under control?
4. How is the system secured (keys, IAM, access control)?
5. How would the solution scale to many more users?

9. Source Code & License

This project is developed by viaprotocol and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.