진행중인 DApp 프로젝트는 기본적으로 Wallet과 연결하는 클라이언트 코드가 작성되어 있다.
-
Select a network
이번 시리즈에서 구현할 DApp 프로젝트는 Solidity contract를 작성하고 client UI에 연결할 예정이다. 따라서, 이더리움 네트워크만 사용한다. -
Connect Wallet
기본적으로 superswap DEX 프로젝트에서는 client에서 Wallet을 연결하는 기능이 구현이 되어있었다.
하지만, 정상적으로 동작하지 않는다. Connect Wallet에 사용하는 코드를 다음과 같이 확인할 수 있었다.
// LoginMethodModal.tsx
import { useMoralis } from "react-moralis";
const { authenticate, isAuthenticated, logout, isAuthenticating, user } = useMoralis();
...
const loginMetamask = async () => {
console.log("yes");
if (!isAuthenticated) {
await authenticate({
provider: "metamask",
signingMessage: "Sign in with Superswap",
chainId: 0x1,
})
.then(function (user) {console.log(user);})
.catch(function (error) {
console.log(error);
});
setWalletChosen("Metamask");
}
};moralis는 개발자가 DApp을 구축하고 관리하기 위한 도구를 제공하는 플랫폼이다. 해당 소스코드를 보면, moralis를 사용해서 웹 어플리케이션에서 Metamask 월렛 연결을 시도한다.
authenticate는 사용자의 인증을 수행하는 moralis 함수고, provider 매개변수로 "metamask"를 전달해서 인증을 시도하고 있다.
정상적으로 동작하지 않아 여러가지 알아봤지만 결론적으로 web3.js를 사용해서 코드를 다시 작성하기로 했다.
DApp 프로젝트는 solidity 스마트 컨트랙트를 만들고, swap 기능을 클라이언트에 연결하기 위해서 web3.js를 사용하게 되었다.
Web3.js
기본적으로 web3 개념은 블록체인과 인공지능과 같은 핵심 기술을 기반으로 하여 사용자 맞춤 정보를 제공하거나 정보에 대한 소유권을 가지는 새로운 패러다임이라고 한다.
즉, 인터넷이 발명되고 그 안에 Web이라고 하는 서비스가 탄생했고, Web1.0부터 Web3.0의 개념까지 이어졌다 라고 볼 수 있다.
이제 본론으로 돌아와서, web3.js는 이더리움 네트워크와 상호작용하기 위한 자바스크립트 라이브러리이다.
web3.js는 JSON-RPC 라는 프로토콜을 통해 이더리움 네트워크와 상호작용한다.
따라서, DApp 프로젝트의 클라이언트 UI에서는 Web3.js를 통해 배포된 스마트컨트랙트를 사용할 예정이다. 그리고, Web3.js가 제공하는 기능을 통해 다음과 같이 월렛 연결도 할 수 있다.
Connect Wallet with Web3.js
- 월렛 연결은 시리즈 마지막 글에 작성하였음.
https://velog.io/@jhcha/DEX-superswap-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
참고자료:
https://web3js.org/
https://velog.io/@citron03/web3.js%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C
