Uniswap 같은 DEX 어플을 만들어서 [그 1]

이번에는 유니스왓 같은 DEX 앱 제작을 목표로 세계적으로도 유명해지고 이를 계기로 DeFi를 활성화하고 첫 블로그를 기고할 예정이다.
먼저 고객부터 시작하십시오!

카탈로그

개요

생성된 응용 프로그램

마지막

개요

2020년, 2021년에는 신종 코로나 감염이 확대되면서 세계가 크게 변했지만, 블록체인의 세계도 크게 달라졌다.
데파이와 NFFT가 화제가 됐고, 특히 NFFT는 아티스트에서도 받아들여지기 시작해 일반인들에게도 널리 인지되기 시작했다.
이번에는 DeFi에서 상당히 유명한 UniSwap에 초점을 맞춰 DEX 앱 제작을 목표로 한다.
공식 문서를 읽으면서 진행하는 과정에서 고객에 대해 먼저 이동할 수 있기 때문에 첫 성과물로 공유하고 싶습니다.
이번에 사용한 소스 코드는 다음과 같다.
https://github.com/mashharuki/SwapExample
클라이언트 응용의 이미지는 다음과 같다.

응용 프로그램의 조작성에 대해 이야기하기 전에 DEX와 AMM 형식 등의 용어를 간단하게 정리해 보겠습니다.

DEX

일본어에서는 분산형 금융이라고 많이 불린다.특정 기업이나 조직이 관리하는 것이 아니라 스마트 프로비저닝을 통해 암호 자산이나 토큰을 자동으로 교환하는 교환소를 말한다.
DEX의 뜻과 정반대인 것은 CEX에서 동전검사회사, 비트플라이어회사, 디크레트회사 등을 들 수 있다는 것이다.이들 교환소는 관리자가 되는 존재가 있고, 그곳을 통해 암호 자산을 교환하는 등이다.
!
DEX의 경우 비밀 키 관리는 완전히 자기 관리입니다.
CEX의 경우 대다수가 신호를 많이 보내는 등 개인만 관리하는 것이 아니기 때문에 이 점도 다르다.

AMM 형식

일본어에서도'자동시장 메이커'라고도 하는데 일정한 정해진 규칙에 따라 자동으로 시장화할 수 있는 시스템을 말한다.
AMM 형태가 나오기 전에는 DEX가 대부분 다른 구조로 구축됐지만, 유동성이 생기기 어려워 현재는 잘 들리지 않는다.
※ 거래액 상위 순위는 거의 유니스왓, 서시스왓 등 AMM 형태의 DEX였기 때문에 최근까지 DEX=AMM
오늘은 언어의 간단한 개요일 뿐이지만 코인포스트 등 사이트의 해설은 더욱 상세하고 아래 페이지를 참고할 수 있을 것이다.
https://coinpost.jp/?p=304625

작성된 응용 프로그램 정보

UniSwap 공식 문서에서 SDK 가져오기 섹션을 참조하여 애플리케이션을 만들었습니다.
그래픽 디자인 등은 지금까지 제작된 앱에서 소재를 추출해 조합한 것이다.(거의 MUI 구성 요소의 조합입니다.)
먼저 공식 문서에 따라 Getting Started with the Swap Widget에 따라 카탈로그와 필요한 포장을 준비합니다!

또한 사전에 인푸라 등에 RPC 포트폴리오를 준비해야 하며, 계정을 만들지 않았다면 포트폴리오용 정보를 만들어 두세요!!
https://infura.io/
React의 초기 형태로 생성된 npx create-react-app 명령을 입력하고 튜토리얼에 따라 Swap Widget 구성 요소를 가져오면 바로 Swap을 진행할 수 있습니다!(매우 간단합니다!)
다만, 공식 문서대로 하면 오류가 발생하기 때문에 일부 수정이 필요한 것 같다.
!
react 버전이 18이면 안 되니까 17.02로 바꾸면 잘 돼요.
나의 상황은 앱이다.js는 다음과 같다!

import { SwapWidget } from '@uniswap/widgets';
import React, { useEffect, useState } from "react";
import { providers, ethers } from 'ethers';
import './App.css';
import '@uniswap/widgets/fonts.css'
import detectEthereumProvider from "@metamask/detect-provider";
// material-ui関連をインポートする。
import AppBar  from '@mui/material/AppBar';
import Toolbar  from '@mui/material/Toolbar';
import Typography  from '@mui/material/Typography';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
import Button from '@mui/material/Button';
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";


// Swap用のテーマ
const theme = {
  primary: '#001D82',
  secondary: '#6677C1',
  interactive: '#005BAE',
  container: '#ABD6FE',
  module: '#FFF7FB',
  accent: '#FF7BC2',
  outline: '#ABD6FE',
  dialog: '#FFF',
  fontFamily: 'Arvo',
  borderRadius: 1,
}

// StyledPaperコンポーネント
const StyledPaper = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(2),
  maxWidth: 360
}));

/**
 * Appコンポーネント
 */
const App = () => {
  // RPCのエンドポイントを設定する。
  const jsonRpcEndpoint = process.env.REACT_APP_API_ENDPOINT;
  const jsonRpcProvider = new providers.JsonRpcProvider(jsonRpcEndpoint);
  // create provider
  const provider = new ethers.providers.Web3Provider(jsonRpcProvider);
  // ステート変数
  const [account, setAccount] = useState({
    address: '',
    provider: provider,
  })

  // メタマスクに接続するための関数
  async function connectWallet() {
    const ethereumProvider = await detectEthereumProvider();

    if (ethereumProvider) {
      const accounts = await window.ethereum.request({
        method: 'eth_requestAccounts',
      })

      const address = accounts[0];
      setAccount({
        address: address,
        provider: ethereumProvider
      })
    }
  }

  return (
    <div>
      <AppBar position="static" color="inherit">
        <Toolbar className="toolbar">
          <Typography variant="h6" color="inherit" sx={{ flexGrow: 1 }}>
            <strong>Swap DApp</strong>
          </Typography>
          <Typography variant="h6" color="inherit">
            <Button onClick={connectWallet}>
              <AccountBalanceWalletIcon/>
            </Button>
          </Typography>
        </Toolbar>
      </AppBar>
      <Box sx={{ flexGrow: 1, overflow: "hidden", px: 3, mt: 10}}>
        <StyledPaper sx={{my: 1, mx: "auto", p: 0, borderRadius: 4}}>
          <div className="Uniswap">
            <SwapWidget provider={account.provider} jsonRpcEndpoint={jsonRpcEndpoint} theme={theme} />
          </div>
        </StyledPaper>
      </Box>
    </div>
  );
}

export default App;

다음은 조작에 관한 것입니다. 이번에 Rike by에서 Swap을 실천했습니다!
① 교환의 영패를 선택한다(속도 정보를 자동으로 획득할 수 있다!)

이번엔 ETH부터 UNI로 보려고요.
문제가 없으면 리뷰 스냅 버튼을 눌러도 되니까 눌러!
②Confrim swap 버튼을 눌러 달라는 요청을 받았습니다.
③ MetaMask에서 확인을 요청 받았습니다. 확인을 누르세요!

④ 잠시 후 스웩이 완성됩니다. 여기서 마치겠습니다!

MetaMask에서 확인하는 부분이 확실히 늘었어요!

처음으로 여기까지.

최후

한 마디로 하면 첫 번째 단계로서 자신의 React 응용 프로그램의 템플릿에서 SwapWidget을 가져오는 것은 매우 간단하다.
하지만 관건적인 스마트 구조기의 실시는 앞으로의 일이기 때문에 아직 장애가 있는 것 같다.
우리도 공식 문서를 읽으면서 개발했는데 왠지 오류가 생겨서 컴파일할 수가 없어요...
내 목표는 개발된 스마트 구조기를 원가 지역 블록체인으로 개조하여 원래의 기호화폐가 서로 스웩할 수 있도록 하는 것이다.
여기까지 읽어주셔서 감사합니다!

사이트 축소판 그림

이번에 앱을 제작할 때는 모두 참고 가치가 있는 물건들이다.
감사합니다!!
https://docs.uniswap.org/sdk/widgets/swap-widget#web3-provider
https://medium.com/geekculture/how-to-add-the-uniswap-swap-widget-to-your-react-dapp-9be353e2bd46