準備Uniswap合約原始碼原始碼結構Uniswap在Github上面開源了全部合約程式碼,其中包括核心合約,周邊合約兩部分.Uniswap還開源了前端程式碼,前端程式碼使用React開發· 核心合約· 周邊合約· 前端程式碼

在Uniswap的核心程式碼中,主要包含3個合約:工廠合約,配對合約,ERC20合約.其中配對合約繼承了ERC20合約,我們可以把它們看作一個合約.工廠合約透過create2方法部署配對合約,所以在部署合約時只需要部署工廠合約.周邊合約中包括一些示例程式碼,例如價格預言機,閃電交換,其中最重要的是路由合約.在周邊合約的程式碼庫中,包含兩個路由合約:UnsiwapV2Router01,UnsiwapV2Router02.工廠合約和配對合約需要透過路由合約呼叫才能更好的完成交易所的全部功能,所以我們還要部署路由合約兩個合約大部分相同,有小部分不同,如果將兩個合約的差異化合併成一個合約,部署的時候將會出現out of gas,所以才被分成了兩個合約.常用功能兩個合約中都包括,所以我們部署其中任意一個路由合約都可以graph TDA(ERC20合約)B(配對合約)

C(工廠合約)D(路由合約)A-->|繼承|BB-->|引用|CD-->|呼叫|C從瀏覽器中下載合約原始碼

如果你對合約程式碼並不熟悉,也可以跳過上面這部分,接下來我們將從以太坊瀏覽器中直接複製線上版合約原始碼· 工廠合約· 路由合約部署合約安裝truffle我們可以使用truffle作為部署合約的環境,其他的環境也可以,如果已經安裝過truffle可以跳過這一步

$ npm install truffle -g建立專案· 初始化目錄$ mkdir uniswap$ cd uniswap$ truffle init

· 目錄結構:uniswap└───contracts    └───Migrations.sol    └───(建立UniswapV2Factory.sol,將工廠合約原始碼複製進來)    └───(建立UniswapV2Router02.sol,將路由合約原始碼複製進來)

└───migrations    └───1_initial_migration.js└───test└───truffle-config.js準備部署賬戶Uniswap的路由合約部署在以太坊的主網和Ropsten,Rinkeby,Goerli,Kovan幾個測試網的合約地址都是相同的,這樣可以使Uniswap的前端不管切換到任何一個網路,路由地址都不會變.要想實現這個相同地址的部署,我們需要準備一個全新的賬戶用來部署合約.全新的賬戶指的是在部署合約之前的nonce值為0.因為合約的地址是根據你的賬戶地址和nonce值計算出來的,所以在不同網路中,如果nonce值相同,部署出的合約地址也相同.

透過助記詞生成新賬戶可以透過我之前錄製的影片學習操作方法· B站影片· 油管影片生成好助記詞之後,記得用英文助記詞,儲存好助記詞,還有助記詞對應的賬戶地址向新地址轉帳ETH

部署合約需要的gas費約為0.18個Ether,目前主網可能需要的更多.透過一個已有Ether的賬戶向新賬戶轉帳.測試網的Ether可以透過每個測試網的水龍頭申請到測試幣.· 獲取測試幣方法準備WETH合約地址在部署路由合約時,建構函式中需要填入工廠合約的地址和WETH合約的地址,由於WETH合約的地址在主網和測試網的地址都不相同,所以需要找到每個網路中WETH合約的地址.WETH合約用於將Eth交換為erc20的Eth,由於Eth不是erc20的token,所以我們必須使用WETH作為交換媒介

{    mainnet:'0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',    ropsten:'0xc778417E063141139Fce010982780140Aa0cD5Ab',    rinkeby:'0xc778417E063141139Fce010982780140Aa0cD5Ab',    goerli:'0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6',    kovan:'0xd0A1E359811322d97991E03f863a0C30C2cF029C'

}申請infuraKey在部署合約之前,我們還需要使用infura作為免費節點,所以需要申請一個infuraKey· 申請地址:infura.io· 申請方法配置truffle-congif.js

安裝@truffle/hdwallet-provider模組,用於開啟助記詞的錢包,在專案目錄中執行命令:$ npm install @truffle/hdwallet-provider如果我們需要在每個網路中都部署上Uniswap合約,就需要配置truffle-congif.js,可以將以下程式碼全部複製貼上到檔案中,覆蓋原有程式碼.然後別忘了修改infuraKey和mnemonic助記詞$ vim truffle-config.jsconst HDWalletProvider = require('@truffle/hdwallet-provider');

const infuraKey = "填寫infuraKey";const mnemonic = "填寫助記詞";module.exports = {  networks: {    mainnet: {      provider: () => new HDWalletProvider(mnemonic, `https://mainnet.infura.io/v3/` infuraKey),

      network_id: 1,      gas: 5500000,      confirmations: 2,      timeoutBlocks: 200,      skipDryRun: true    },    

    ropsten: {      provider: () => new HDWalletProvider(mnemonic, `https://ropsten.infura.io/v3/` infuraKey),      network_id: 3,      gas: 5500000,      confirmations: 2,      timeoutBlocks: 200,

      skipDryRun: true    },        rinkeby: {      provider: () => new HDWalletProvider(mnemonic, `https://rinkeby.infura.io/v3/` infuraKey),      network_id: 4,      gas: 5500000,

      confirmations: 2,      timeoutBlocks: 200,      skipDryRun: true    },        goerli: {      provider: () => new HDWalletProvider(mnemonic, `https://goerli.infura.io/v3/` infuraKey),

      network_id: 5,      gas: 5500000,      confirmations: 2,      timeoutBlocks: 200,      skipDryRun: true    },    

    kovan: {      provider: () => new HDWalletProvider(mnemonic, `https://kovan.infura.io/v3/` infuraKey),      network_id: 42,      gas: 5500000,      confirmations: 2,      timeoutBlocks: 200,

      skipDryRun: true    },  },  mocha: {    // "timeout": 100000,  },

  compilers: {    solc: {      version: "0.5.16",    // Fetch exact version from solc-bin (default: truffle's version)      // docker: true,        // Use "0.5.1" you've installed locally with docker (default: false)      // settings: {          // See the solidity docs for advice about optimization and evmVersion      //  optimizer: {

      //    enabled: false,      //    runs: 200      //  },      //  evmVersion: "byzantium"      // }    }

  }}部署指令碼在編寫truffle的部署指令碼之前,先準備一個你的常用賬戶作為設定交易所手續費收取賬戶的管理員地址然後在專案目錄中執行命令,或者用編輯器建立檔案migrations/2_deploy_contract.js$ vim migrations/2_deploy_contract.js

const UniswapV2Factory = artifacts.require("UniswapV2Factory");const UniswapV2Router02 = artifacts.require("UniswapV2Router02");const feeToSetter = '設定手續費賬戶的管理員地址';const WETH = {    mainnet:'0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',    ropsten:'0xc778417E063141139Fce010982780140Aa0cD5Ab',

    rinkeby:'0xc778417E063141139Fce010982780140Aa0cD5Ab',    goerli:'0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6',    kovan:'0xd0A1E359811322d97991E03f863a0C30C2cF029C'};module.exports = (deployer, network, accounts) => {    deployer.deploy(UniswapV2Factory, feeToSetter).then((FactoryInstance)=>{

        return deployer.deploy(UniswapV2Router02,FactoryInstance.address,WETH[network]);    });};部署合約在專案目錄執行命令:$ truffle migrate -f 2 --network mainnet

$ truffle migrate -f 2 --network repsten$ truffle migrate -f 2 --network rinkeby$ truffle migrate -f 2 --network goerli$ truffle migrate -f 2 --network kovan現在我們就已經將Uniswap的路由合約和工廠合約都部署在所有的網路中了,你可以在控制檯的資訊中找到兩個合約的地址,也可以在以太坊瀏覽器中找到,在以太坊瀏覽器中搜尋新賬戶的地址,顯示出來的新賬戶的交易資訊中,將會顯示兩個建立合約的交易,第二個建立的合約是路由合約,將路由合約的地址記錄下來部署Uniswap前端

克隆前端程式碼在專案目錄執行命令:$ git clone https://github.com/Uniswap/uniswap-interface.git安裝依賴庫在專案目錄執行命令:$ cd uniswap-interface

$ yarn安裝完成後,可以先測試執行一下,在uniswap-interface目錄執行命令$ yarn start如果執行成功,將會開啟一個瀏覽器,同時開啟Uniswap的前端介面修改路由地址在Uniswap的前端中以常量的形式定義了Uniswap的路由地址,我們只需要修改路由地址就可以讓前端連結到你的路由合約中

修改檔案: 專案目錄/uniswap-interface/src/constants/index.ts 第6行import { AbstractConnector } from '@web3-react/abstract-connector'import { ChainId, JSBI, Percent, Token, WETH } from '@uniswap/sdk'import { fortmatic, injected, portis, walletconnect, walletlink } from '../connectors'export const ROUTER_ADDRESS = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D' //修改成你的路由合約地址......

儲存後執行yarn start即可看到效果將程式碼部署到GitHub Pages建立GitHub專案建立專案的方法就不在這裡講了,不會的同學可以去搜尋一下將前端程式碼新增到GitHub專案倉庫首先要刪除原先Uniswap專案中的.git目錄,在專案目錄執行命令:

$ cd uniswap-interface$ rm -rf .git然後初始化git,並將Unsiwap前端程式碼新增到自己的專案倉庫中git initgit remote add origin https://github.com/使用者名稱/專案名.git安裝並部署gh-pages

我們將透過gh-pages模組將前端程式碼部署到github.io,在前端程式碼的目錄執行:$ yarn add gh-pages接下來要編譯react和部署gh-pages,在前端程式碼的目錄執行:$ yarn build修改前端程式碼目錄中的package.json$ vim package.json

{  "name": "@uniswap/interface",  "description": "Uniswap Interface",  "homepage": "https://使用者名稱.github.io/專案名稱",//修改這裡......儲存退出之後,在前端程式碼的目錄執行:

$ git add .$ git commit -m "first commit"$ git push$ yarn deploy現在在瀏覽器中開啟https://使用者名稱.github.io/專案名稱/index.html就可以開啟自己的交易所啦. 如果不輸入地址結尾的index.html在專案剛部署之後會報錯,過一段時間就可以不輸入了.擴充套件

部署自己的weth可以將以太坊瀏覽器中的weth原始碼複製下來,自己部署一個屬於自己的weth合約可信token列表Uniswap有一個自己的可信token列表,同樣被設定在專案目錄/uniswap-interface/src/constants/index.ts檔案中,在最後一行就是.你可以將這個連結地址的檔案複製下來,設定成自己需要的可信token地址列表,然後上傳到github目錄中,再修改index.ts檔案中的連結地址,這樣就可以讓你自己的交易所中擁有自己設定的可信token列表了歡迎新增微信交流,微訊號:cuijin《手把手教你開發去中心化交易所》系列影片(油管)