배포링크 : https://practice-meta-mask.vercel.app/
- CRA
- typescript
- styled-component
- redux-toolkit
- web3
- 데이터 수에 따라 유연하게 표출되는 드롭다운 만들기
- 여러개의 모달을 띄울 수 있는 모달 컴포넌트 만들기
- 크롬플러그인(Metamask) 연동해보기
- PopUpContainer : 팝업을 등록하고, 배열로 등록된 팝업들을 렌더링 해주며 React Portal을 통해 연결시켜준다. 원하는 태그와 연결시켜준다.
- PopUpTemplate : 팝업의 기본 틀이 되고, react children을 통해 JSXElement를 넘겨받는다.
- 여러가지 PopUp-Component : PopUpTemplate으로 감싼 후 내부에 원하는 형태로 마크업 하여 사용.
- useModal : 컴포넌트 내부 코드 간소화를 위해 redux dispatch 로직을 커스텀 훅으로 사용.
- 드롭다운 시연 : 데이터 수에 따라 목록을 동적으로 표출
- 팝업 시연
- 지갑 연결
- Metamask 계정, 네트워크 변경 감지 및 변경 내용 UI반영 : 이더리움 메인넷인 경우 Alert표출