Build A Simple Ethereum Wallet

Published: at 08:40 PM

Ethereum Wallet

💓 If you enjoyed the information and the web site, please donate.

â›” Join Raisin using the referral code elyser010443 when you register for a high-yield savings product on raisin.com to earn up to a $125 bonus.

Here is an example of the simple wallet.

📲 Technologies Used

What is an ENS?

💹 Join Robinhood with my link and we will both pick a free stock.

📚 Project Setup And Installation

yarn create react-app simplewallet

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

npm i ethers

After installing those dependencies you can start the project:

yarn start

🧠 Never forget any of your passwords with Roboform

💹 Create Files And Your Wallet

Open the src/App.js file, this is the file that contains the code for your entire page. This is the only place you will update code for this project. Update your code to:

import { Button, Flex, Text } from '@chakra-ui/react';

function App() {
  const connectWallet = async () => {
    // we will try to connect to a wallet here
  }

  return (
    <Flex
      alignItems='center'
      justifyContent='center'
      height='100vh'
      bg='#6E304B'
    >
        <Button onClick={connectWallet}>Connect Wallet</Button>
    </Flex>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import { ChakraProvider } from '@chakra-ui/react'

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

You are importing Button and Flex from Chakra UI, this applies styles to Flex to center the Button in the center of the page. You also import Text as you will use that later on.

The onClick handler on your Button will call connectWallet function every time a user clicks on it.

There is nothing there right now in the function so nothing will happen if you click on it. Add a console.log(‘Please connect.’) inside the function and you should see things happening in the Developer console. Please Connect

You now have the base app and a function that is called anytime a user clicks the button.

import { ethers } from 'ethers';

const connectWallet = async () => {
    if (!window.ethereum) {
      alert('🚨 Please install MetaMask.');
      return;
    }

  try {
    await window.ethereum.request({ method: 'eth_requestAccounts' });

    const provider =  new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const address = await signer.getAddress();

    console.log('address', address)
  } catch (error) {
    console.log(error)
  }
}

🔒 Grab yourself a secure hardware wallet from Trezor

👓 Review The Code

if (!window.ethereum) {
alert('Please install MetaMask.');
return;
}

await window.ethereum.request({ method: 'eth_requestAccounts' });

const provider =  new ethers.providers.Web3Provider(window.ethereum);

const signer = provider.getSigner();

const address = await signer.getAddress();

Here are a few resources to read about the technologies used:

👥 Learn a language with me for free through Duolingo

👀 Display ENS

import { useState } from 'react';

const [account, setAccount] = useState({});

To show the connected address to the user, in the connectWallet function under const address = await signer.getAddress(); add two lines that will retrieve the account’s ENS name and avatar:

const ens = await provider.lookupAddress(address);
const avatar = await provider.getAvatar(ens);

The app is asking the provider to lookup the ENS address and avatar and it will return the ENS name and avatar if there is anything created for the ENS address and avatar.

setAccount({
  address,
  avatar,
  ens
});

import { Button, Flex, Text } from '@chakra-ui/react';
import { ethers } from 'ethers';
import { useState } from 'react';

function App() {
  const [account, setAccount] = useState({});

  const connectWallet = async () => {
    if (!window.ethereum) {
      alert('🚨 Please install Metamask.');
      return;
    }

    try {
      await window.ethereum.request({ method: 'eth_requestAccounts' });

      const provider =  new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const address = await signer.getAddress();
      const ens = await provider.lookupAddress(address);
      const avatar = await provider.getAvatar(ens);

      setAccount({
        address,
        avatar,
        ens
      });
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <Flex
      alignItems='center'
      justifyContent='center'
      height='100vh'
      bg='#6E304B'
    >
      <Button onClick={connectWallet}>🔓 Connect Wallet</Button>
    </Flex>
  );
}

export default App;

<Flex
  alignItems='center'
  justifyContent='center'
  height='100vh'
  bg='#6E304B'
>
  {account.address ? (
    <Text color='white'>{account.address}</Text>
  ) : (
    <Button onClick={connectWallet}>🔓 Connect Wallet</Button>
  )}
</Flex>

import { Avatar, Box, Button, Flex,  Text  } from '@chakra-ui/react';
import { ethers } from 'ethers';
import { useState } from 'react';

const shortenAddress = (address) => {
  return `${address.slice(0, 4)}...${address.slice(
    address.length - 4,
    address.length
  )}`;
}

function App() {
  const [account, setAccount] = useState({});

  const connectWallet = async () => {
    if (!window.ethereum) {
      alert('🚨 Please install MetaMask.');
      return;
    }

    try {
      await window.ethereum.request({ method: 'eth_requestAccounts' });

      const provider =  new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const address = await signer.getAddress();
      const ens = await provider.lookupAddress(address);
      const avatar = await provider.getAvatar(ens);

      setAccount({
        address,
        avatar,
        ens
      });
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <Flex
      alignItems='center'
      justifyContent='center'
      height='100vh'
      bg='#6E304B'
    >
      {account.address ? (
        <Box
          maxW='sm'
          borderRadius='3xl'
          p='5'
          bg='white'
          textAlign='center'
        >
          <Avatar name={account.ens} src={account.avatar} size='lg' mb='2'  />
          {account.ens && (
            <Text fontSize='xl'>{account.ens}</Text>
          )}
          <Text fontSize='xs' title={account.address}>{shortenAddress(account.address)}</Text>
        </Box>
      ) : (
        <Button onClick={connectWallet}>🔓 Connect Wallet</Button>
      )}
    </Flex>
  );
}

export default App;

🔶 Summary

  • asked permission to read from an account
  • communicated with a provider
  • retrieved and showed the account’s address
  • looked for any ENS information attached to that account

â›” Join Raisin using the referral code elyser010443 when you register for a high-yield savings product on raisin.com to earn up to a $125 bonus.

💓 If you enjoyed the information and the web site, please donate.

Elyse Y. Robinson Elyse Y. Robinson, an enterprising entrepreneur, is the mastermind behind Taxes and Services, a multifaceted holding company that doubles as her accounting firm. Her ventures encompass an array of innovative projects. One of her key initiatives is Switch Into Tech, a dynamic weekly newsletter that doubles as a platform for advertising monthly career seminars, offering weekly tech-related freebies, and promoting her latest podcast episodes of Nobody Wants To Work Tho. Additionally, Elyse shares her insights through her blog at Data.gal, where she delves into various data-related topics. Elyse’s passions extend beyond her businesses; she is deeply enamored with Mexico, has an insatiable appetite for research, and is dedicated to assisting others in transitioning into technology careers.

Subscribe to the Newsletter