230511 ~ 230515 블록체인 지갑 만들기

목차

1. 프로젝트 소개 및 목표

2. 화면 초기 디자인 

3. 화면 구현 영상

4. 화면 구성 설명

 

 

 

https://github.com/100space/2304/tree/main/toy

GitHub - 100space/2304

 

1.  프로젝트 소개 및 목표

블록체인 블록 구성들을 만들면서 간단하게 화면을 브라우저에 띄어봤었다.

https://baekspace.tistory.com/194

블록체인 - 지갑 프로그램 만들기

리액트 프로젝트를 마친 후 블록체인을 하면서 리액트를 사용하지 않고 공부를 하다 보니 감을 잃었을 거라 생각하여 진행된 프로젝트였다.

개인 프로젝트로 서버 및 블록체인을 위한 Back-end 작업이 되어있기 때문에 화면을 그리는 것에 집중하였다.

 

타입스크립트를 배운 상태여서 리액트 + 타입스크립트를 사용했고, 상태 관리를 위하여 redux, redux-thunk를 사용하였다.

비슷한 지갑프로그램을 찾아보다가 MetaMask를 참고하였다.

 

그래서 MetaMask처럼 크롬 익스텐션( 확장프로그램 )으로 만들어보려고 계획했다.

 

 

2.  화면 초기 디자인 

피그마로 기본적인 디자인을 그렸다.

기본적으로 3페이지를 만들고, 상단 아이콘을 이용해서 팝업창으로 띄울 생각을 하였고,

기본적인 구상이므로 부분적으로 다르게 그려진 것도 있다.

 

크롬 익스텐션을 만드는 것이 목표였기 때문에, Router을 이용해서 url이 바뀌면서 페이지 컴포넌트가 바뀌는 것이 아닌 슬라이드를 이용하여 화면을 전환하기로 하였다. 화면에 다 사용했던 색은 아니지만 색을 미리 지정해두기도 했다.

Back-up의 의미를 담은 Baek-upay를 프로그램의 이름으로 지정하였다!

 

 

3. 화면 구현

1. 화면 구성 및 상단 버튼을 이용한 계정 선택

2. 계정 복사기능

 

 

4. 화면 구성 

일단 결과적으로 크롬 익스텐션으로 기능을 구현해 봤다.

크롬 익스텐션의 최대크기가 400px X 600px이라는 것을 나중에 알게 되어서 당황했지만,

처음부터 1 rem = 10px을 기준으로 rem단위를 사용했었기 때문에, html의 폰트크기를 이용해서 쉽게 변환할 수 있었다.

 

계정을 선택하는 기능

최초 진입 시에는 Account에 빈값을 가져온다. 하지만 우측 상단 사람아이콘을 이용하여 나의 계정을 선택하면 선택된 Account 및 잔액에 대한 정보를 얻을 수 있다. 이후 계정에 대한 정보는 전역으로 관리하여 화면이 바뀌는 상황에서도 상태를 유지할 수 있다.

이 My Account는 내 계정들을 모아놓은 창으로  팝업 형태로 보이고, 계정들은 드롭다운 형태로 구현하였다.

계정은 40글자로 이루어져 있지만, 가독성을 좋게 하고, 혹시 모를 중복된 계정에 대해서 비교할 수 있도록 앞뒤 10 글자씩 보이게 구현하였다.

 

Transaction 컴포넌트는 트랜잭션을 만들어 트랜잭션 풀에 대기 상태를 만들어줄 수 있다.

 

트랜잭션 생성을 할 때,  나의 계정(sender)과 받는 사람(received account), 보낼 금액 3가지 항목을 이용하여 영수증을 작성하고, 트랜잭션을 생성하여 트랜잭션 풀에 담긴다.

트랜잭션 풀에 담겨있는 상황에서 이중지불을 막기 위해서 해당 계정의 send 버튼을 loading모드로 바꾸어 락기능을 구현하였다.

 

account는 40글자로 이루어진 string이기 때문에, 따로 저장을 해서 관리를 해야 한다고 판단하였다.

saved Wallet이라는 페이지에서 즐겨 찾는 계정의 느낌으로 저장해 놓은 계정을 불러올 수 있고, 삭제하는 기능도 가지고 있다.

계정의 스트링을 누르면 복사할 수 있는 기능을 넣었다. 말줄임표로 표현되는 각각의 계정은 title에 실제 40글자를 담은 데이터를 가지고 있기 때문에, "..."이 있는 줄여진 계정이 아닌 실제 계정의 데이터를 복사할 수 있다.

 

블록이 생성된 후에 좌측의 체인 페이지를 이용하여 생성된 블록의 해시와 생성시간을 확인할 수 있다.

응용하면, 이 블록하나를 선택하면 상세정보를 얻는 페이지를 구현할 수 있다. 

 

 

 

---