Web3 Wallet

Web3 Wallet is a front end focused project with access to Ethereum network. It allows for connecting to any compatible Ethereum provider (window.ethereum) via the Ethereum JavaScript API.

The application is able to detect which network a user is connected to, it also allows for switching between chains like Ethereum, Binance, Polygon or other ERC-20 compatible token. It is compattible with MetaMask and Coinbase wallets.

Main Features

Wallet

connecting to ERC-20 (Ethereum) compatible network
switching between chains
displaying user's account balance

Transaction Form

checking recipient address validity (checksum)
displaying live token price (using CoinGecko API)
calculating token amount in fiat
displaying live gas fees
pre-checking transaction amount against the wallet balance

Transaction History

Blockchain Transactions

Error handling

none or malformed recipient address (address checksum check)
none or insufficient transaction amount
on chain network errors

Code sample

The main part of the application is the WalletProvider responsible for majority of the wallet related opperations. Connecting/disconnecting to an account, getting account balance from the blockchain base on the connected account address, getting gas fees and waiting for blockchain transaction confirmation.

export const WalletProvider = (props: PropsWithChildren) => {
  const [hash, setTxHash] = useState<`0x${string}` | undefined>(undefined);
  const { isLoading, isSuccess, isError } = useWaitForTransaction({
    hash,
  });
 
  const connect = useConnect({
    connector: new InjectedConnector(),
  });
  const disconnect = useDisconnect();
  const account = useAccount();
  const balance = useBalance({
    address: account.address,
    watch: true,
  });
  const gas = useFeeData({
    formatUnits: "ether",
    watch: true,
  });
 
  const value = {
    connect,
    disconnect,
    account,
    balance,
    gas,
    transaction: {
      setTxHash,
      isLoading,
      isSuccess,
      isError,
    },
  };
 
  return <WalletContext.Provider value={value} {...props} />;
};

Libraries and tools

This is a React TypeScript project using the following libraries and tools:

React
TailwindCSS
CoinGecko API Client
wagmi - for interacting with the blockchain
react-hook-form - for form handling and validation
react-query - for data fetching and caching
use-debounce - for debouncing user input

Dolorem et et distinctio rerum.

Eveniet suscipit eveniet recusandae. Vero qui quas aliquam. Expedita saepe non et velit voluptas quidem ut dignissimos. Labore odio deserunt deserunt ipsam omnis ut. Consequatur aut eos voluptas harum cumque explicabo dicta.

Eaque minus aut voluptatum. Aut beatae numquam similique quasi. Est perferendis voluptatem qui sint ut veritatis inventore. Quaerat repudiandae deleniti asperiores mollitia rerum voluptate.

Projects

ATMs Observability Map

Next.js Integration

Web3 Wallet

Web Chat

Websocket based game

Categories

Latest Projects