배경
제품은 비공개이므로 여기서 이야기할 만한 것은 제약 조건입니다. UI가 Chrome 확장 프로그램 안에서 실행되는 만큼, 지갑 흐름도 브라우저가 확장 프로그램 코드에 적용하는 규칙 안에서 동작해야 했습니다.
확장 프로그램 / dApp — 2024
Chrome 확장 & Web3
지갑 연결을 내장한 Chrome 확장 프로그램입니다. 본체는 CRXJS로 만들었고, 그 위의 지갑 레이어는 확장 프로그램 origin 경계를 넘어 동작하도록 구현했습니다.
만든 것
확장 프로그램 자체는 CRXJS(Chrome 확장 프로그램용 Vite 플러그인)로 만들었습니다. 그 위에 지갑 레이어를 올렸습니다. 지갑을 연결하고, 계정과 네트워크를 확인하고, 둘 중 하나가 바뀌면 반응합니다.
아키텍처
확장 프로그램은 웹 페이지가 아니고, 그 사실이 설계를 결정합니다. UI가 확장 프로그램 origin에서 실행되기 때문에, 지갑은 일반 사이트에 하듯 provider를 주입해 주지 않습니다. 그래서 지갑 접근은 페이지가 내어 주는 것에 기대는 방식이 아니라 명시적이어야 했습니다. 그 레이어를 wagmi의 커넥터 모델과 Dynamic SDK가 담당합니다. 다루는 것은 커넥터, 활성 계정, 현재 체인, 그리고 그중 무엇이든 바뀔 때 발생하는 이벤트입니다. MetaMask는 그 레이어를 통해 연결되는 지갑 중 하나입니다.
결과
확장 프로그램은 2024년 실사용자에게 배포되었습니다. 이 프로젝트에서 Web3는 연동 작업이며, 토큰 발행이나 토크노믹스가 아닙니다.