• 카테고리

    질문 & 답변
  • 세부 분야

    블록체인

  • 해결 여부

    미해결

ERC20과 프론트엔드연결 지갑 변경 관련 질문 입니다!

22.10.12 23:41 작성 조회수 202

1

안녕하세요!! 강의 도움 많이 받고 있습니다!!

다름이 아니라 ERC20 프론트엔드연결1 강의 내용 관련해 질문드리려고 합니다.

강의와 마찬가지로 useEffect 훅 안에

window.ethereum.on("accountsChanged", () => {

setUp();

}

를 입력해 메타마스크 계정이 바뀔 때마다 setUp 함수가 실행되도록 했습니다.

강의에서는 지갑 계정을 바꾸고 getAll 버튼을 누르면 변경된 지갑 주소가 잘 찍히는 것을 확인했습니다.

그런데 코드 치고 직접 실습하는 과정에서 문제가 발생했습니다.

강의에서처럼 getAll 버튼을 누르면 변경된 지갑 주소가 찍히는 것을 기대했으나 지갑이 변경되어도 변경 이전 지갑 주소가 찍힙니다...

일단은 window.ethereum.on("accountsChanged", () => { window.location.reload(); })

를 통해 해결은 했으나... 리로드 되면서 화면전환되는게 너무 거슬려서 디원님처럼 문제를 해결하고 싶어 질문드립니다!!! accountsChanged 이벤트핸들러가 업데이트 되면서 사용법이 변경된건지... 아니면 제가 무엇을 놓치고 있는지 감이 오지 않습니다..🥲(메타마스크 docs에는 accountsChanged 핸들러 안 콜백함수에 accounts 인자가 있더라구요...!)

직접 작성한 코드입니다.

Screen Shot 2022-10-12 at 11.30.14 PM.png

답변 2

·

답변을 작성해보세요.

0

네, 정말 이상하네요.

현재 같은 코드로 해보니, 제 쪽에서는 잘 돌아가고 있습니다...😂

혹시 getWeb3.js 파일을 제가 볼 수 있을까요 :) ??

BEB06님의 프로필

BEB06

질문자

2022.10.13

image도무지 감이 오질 않네요 🤣

캡쳐한 사진 밑에 export default getWeb3가 생략됐네요!

코드에는 적혀있습니다!

new Promise 바로 밑에,

window.addEventListener("load", async () =>

...

}

때문에 그런거 같아요 :)

이 부분때문에, 메타마스크 주소를 변경해도 주소를 못 들고 온거같아요.

페이지를 로딩할 때 마다, 메타마스크의 주소를 들고 와야한다고 되어있어요 :)

window.addEventListener("load", async () =>

...

}

이 부분을 제거하시고, 아래와 같이 바로 쓰시면 될 거같아요 :)

import Web3 from "web3";

const getWeb3 = () =>
  new Promise(async (resolve, reject) => {
    // Wait for loading completion to avoid race conditions with web3 injection timing.

    // Modern dapp browsers...
    if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      try {
        // Request account access if needed
        await window.ethereum.request({ method: "eth_requestAccounts" });
        // Accounts now exposed
        resolve(web3);
      } catch (error) {
        reject(error);
      }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
      // Use Mist/MetaMask's provider.
      const web3 = window.web3;
      console.log("Injected web3 detected.");
      resolve(web3);
    }
    // Fallback to localhost; use dev console port by default...
    else {
      const provider = new Web3.providers.HttpProvider("http://127.0.0.1:8545");
      const web3 = new Web3(provider);
      console.log("No web3 instance injected, using Local web3.");
      resolve(web3);
    }
  });

export default getWeb3;

 

혹시 해결 안되신다면, 댓글 부탁드려요 :))

BEB06님의 프로필

BEB06

질문자

2022.10.13

Aㅏ........😳🤣🥲

정말 바보같은 짓을 했네요...

감사합니다 디원님!!!!!!! 해결됐습니다!!!!!!

아니예요!, 개발하다보면 저도 그런 실수 많이해요 😂😂

네넵 다행입니다 :))

좋은 하루 되세요!! :))

0

안녕하세요 :)

정말 열심히 하시니, 보기 정말 좋습니다!! :)

image

빈 배열을 한번 넣어 보시겠어요 :)

감사합니다 !!

혹시 해결되지 않으시면, 댓글 부탁드려요!

BEB06님의 프로필

BEB06

질문자

2022.10.13

imagedependency array 추가하고 실행했는데도 작동하질 않습니다...😂

accountsChanged 이벤트핸들러 안에 'hi' 메시지를 로그 찍어보면 계정이 바뀔때마다 로그가 잘 찍히는데...

함수 실행이 되질 않네요... 함수 스코프 문제인 것 같은데... 코드대로 해도 작동이 되질 않습니다 😱