3

I can't get the value from the signer.getAddress() function on Ethers.js. When I try to use "alert" or "console.log" it is fine but I want to display it directly on the page. It says; "object Promise".

Here is my code:

import "./App.css";
import { ethers } from "ethers";

function App() {
  const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
  const signer = provider.getSigner();

  async function connectMetamask() {
    await provider.send("eth_requestAccounts", []);
  }

  async function myAddress() {
    await signer.getAddress();
  }

  return (
    <div className="general">
      <div className="web3-loader">
        <button className="button1" onClick={connectMetamask}>
          Connect Metamask
        </button>
      </div>
      <br></br>
      <div className="input-area">
        <label>{"Your address is: " + myAddress()} </label>
        <br></br>
        <label>Recipient address:</label>
        <input
          type="text"
          placeholder="Receiver address"
          className="input2"
        ></input>
        <br></br>
        <label>Amount:</label>
        <input
          type="text"
          placeholder="Amount of ETH"
          className="input3"
        ></input>
      </div>
    </div>
  );
}

export default App;
norbekoff
  • 1,719
  • 1
  • 10
  • 21
Blockchain
  • 31
  • 2

1 Answers1

1

import "./App.css";
import { ethers } from "ethers";
import {useState} from "react"

function App() {
  const [add, setAdd] = useState("")
  const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
  const signer = provider.getSigner();

  async function connectMetamask() {
    const res = await provider.send("eth_requestAccounts", []);
    setAdd(res);
  }

  async function myAddress() {
    await signer.getAddress();
  }

  return (
    <div className="general">
      <div className="web3-loader">
        <button className="button1" onClick={connectMetamask}>
          Connect Metamask
        </button>
      </div>
      <br></br>
      <div className="input-area">
        <label>{`your address is ${add}`} </label>
        <br></br>
        <label>Recipient address:</label>
        <input
          type="text"
          placeholder="Receiver address"
          className="input2"
        ></input>
        <br></br>
        <label>Amount:</label>
        <input
          type="text"
          placeholder="Amount of ETH"
          className="input3"
        ></input>
      </div>
    </div>
  );
}

export default App;
Killua_01
  • 11
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the [help center](https://stackoverflow.com/help/how-to-answer). – Ethan Sep 24 '22 at 23:45