読了時間：6分

このガイドに記載されているコードは監査を受けていません。本番環境にデプロイする前に、必ずコードの監査を行うことを強くお勧めします。

概要

Uniswap is one of the most discussed and important projects in the DeFi space. It’s a pretty popular project for many reasons - in this guide, we will learn how to interact with the Uniswap smart contracts using a JavaScript library called ethers.js and uniswap’s js sdk.

主な業務内容

• Learn about Uniswap V2
• Learn about the Uniswap SDK
• Interact with Uniswap via code

必要なもの

• Node.js installed on your system
• A text or Code editor
• ターミナル（別名：コマンドライン）
• An Ethereum node

What is Uniswap?

Uniswap is a protocol for the decentralized exchange of tokens on the Ethereum blockchain. Uniswap protocol is deployed as the set of smart contracts and is entirely decentralized, permissionless, and is censorship-resistant. It is built on the concept of Liquidity pools, automated market makers, or, to be precise, a constant product market maker.

Hayden Adams built the first version of Uniswap with vyper and deployed that version of the Uniswap protocol on the Ethereum Mainnet in 2018. In 2020 a second version was released named Uniswap V2; the main feature was the addition of the ERC20-ERC20 liquidity pools. Before V2, each liquidity pool had to consist of ETH as one of the currencies. For example, to trade from USDC to DAI, the user had to trade USDC for ETH and then ETH for DAI, which usually resulted in higher gas fees and more slippage. Offering ERC20-ERC20 pools was also better for liquidity providers who didn’t want to supply ETH. V2 has few other features, including on-chain price feeds and flash swaps. V2 is entirely written in Solidity. 

Now let us understand smart contracts in Uniswap. Uniswap V2 has two smart contract systems: core and periphery. 

Core: This consists of one factory and many pairs of contracts. Factory contract is responsible for creating many pair contracts. It is not recommended for users to interact with core contracts directly; instead, use a periphery contract because core contracts are very minimal and functionally straightforward:

• Factory: The factory contract’s role is to create different markets on Uniswap called pairs and act as a registry for different markets. It also makes sure that only one smart contract is formed per unique token pair.
• Pairs: The markets which the factory creates are known as pairs. It consists of unique token pair. Its primary purpose is to act as automated market makers and keep track of token balances in a pool. They also emit data that can be used to built decentralized price oracles.

Periphery: Periphery consists of a bunch of domain-specific smart contracts which help in interaction with the core:

• Library: The library provides features that enable convenient fetching of data and pricing.
• Router: The router contract uses the library and supports all the basic requirements of a front-end offering trading and liquidity management functionality.

We’ll use Uniswap Javascript SDK and ethers.js to interact with the Uniswap protocol.

What is Uniswap Javascript SDK?

Uniswap Javascript SDK helps in interacting with Uniswap V2 and builds on top of Uniswap V2. It runs on any machine/environment which can execute Javascript. The SDK is written in TypeScript and has a robust test suite, performs arbitrary precision arithmetic, and supports rounding to significant digits or fixed decimal places.

To learn more about ether.js, you can refer to this guide on How to connect to the Ethereum network with ethers.js.

Installing the required libraries.

We’ll install the ethers.js and uniswap js sdk using npm (Node Package Manager), which comes with Node.js. Let’s check if node.js is installed on our system. Copy-paste the following in your terminal/cmd:

$ node -v

インストールされていない場合は、Node.jsのLTS版を公式サイトからダウンロードできます。

Now that we have Node.js installed, let’s install the Ethers.js (version 5.7) and Uniswap SDK using npm (Node Package Manager), which comes with Node.js.

$ npm install @uniswap/sdk

$ npm install ethers@5.7

このステップで最もよく発生する問題は、`node-gyp` の内部的な不具合です。node-gyp のインストール手順については、こちらをご覧ください。

注：node-gypに関する問題が発生した場合は、お使いのPythonのバージョンが、上記の手順に記載されている互換バージョンのいずれかと一致している必要があります。 

Another common issue is a stale cache; clear your npm cache by simply typing the below into your terminal:

$ npm cache clean

If everything goes right, both the libraries will be installed on your system.

Quicknodeのイーサリアムエンドポイントを設定する

We could use pretty much any Ethereum client, such as Geth or OpenEthereum (fka Parity), for our purposes today. Since that is a bit too involved for just querying prices, we'll just grab a free endpoint from Quicknode to make this easy. It can be a testnet (like Ropstepn, Rinkeby or Kovan) or Mainnet. After you've created your free ethereum endpoint, copy your HTTP Provider endpoint:

 

 

後で必要になるので、これをコピーして保存しておいてください。

Interacting with Uniswap

We’ll get the price of Wrapped ether (WETH) price in DAI and vice versa; then we’ll get the trading price of WETH’s in DAI and then again calculate WETH’s price DAI after the trade.

Create a new JS file named index.js and copy-paste the following code in it (for the front end, you’ll need to change the syntax to ES6):

const { ChainId, Fetcher, WETH, Route, Trade, TokenAmount, TradeType } = require ('@uniswap/sdk');
const ethers = require('ethers');  

const url = 'ADD_YOUR_ETHEREUM_NODE_URL';
const customHttpProvider = new ethers.providers.JsonRpcProvider(url);

const chainId = ChainId.MAINNET;
const tokenAddress = '0x6B175474E89094C44Da98b954EedeAC495271d0F'

const init = async () => {
	const dai = await Fetcher.fetchTokenData(chainId, tokenAddress, customHttpProvider);
	const weth = WETH[chainId];
	const pair = await Fetcher.fetchPairData(dai, weth, customHttpProvider);
	const route = new Route([pair], weth);
	const trade = new Trade(route, new TokenAmount(weth, '100000000000000000'), TradeType.EXACT_INPUT);
	console.log("Mid Price WETH --> DAI:", route.midPrice.toSignificant(6));
	console.log("Mid Price DAI --> WETH:", route.midPrice.invert().toSignificant(6));
	console.log("-".repeat(45));
	console.log("Execution Price WETH --> DAI:", trade.executionPrice.toSignificant(6));
	console.log("Mid Price after trade WETH --> DAI:", trade.nextMidPrice.toSignificant(6));
}

init();

So go ahead and replace `ADD_YOUR_ETHEREUM_NODE_URL` with the http provider from the section above.

上記のコードの説明：

• Line 1-2: Importing the Uniswap SDK and ethers library with necessary Uniswap packages
• Line 4: Setting our Ethereum node URL
• Line 5: Instantiating an ethers JsonRpcProvider instance.
• Line 7: Defining chain id to mainnet.
• Line 8: Specifying token address to DAI; always confirm the address before using Uniswap You can get the address of any ERC20 token from etherscan.io token tracker.
• Line 10: Defining the init variable as an async function.
• Line 11: Creating a pointer to the DAI token and fetching the token data using the Fetcher object by passing chain id, token address, and customHttpProvider as arguments.
• Line 12: Defining our other token Wrapped ether.
• Line 13: Instantiating the pair object, the pair object allows interaction with a specific market, fetching the pair data of WETH and DAI pair.
• Line 14: Instantiating the route object and passing pair array and WETH as the input token.
• Line 15: Creating a new trade to get the execution price of WETH in DAI, Providing 100 WETH in input with 15 zeros and specifying trade type.
• Line 16: Getting midprice of WETH in DAI. Note: midprice in the context of Uniswap is the price that reflects the ratio of reserves in one or more pairs. It also represents the price at which you could theoretically trade a tiny amount (ε) of one token for the other.
• Line 17: Getting midprice of DAI in WETH.
• Line 18: Printing a dashed line for better output representation.
• Line 19: Getting the exact execution price of WETH in DAI. Note: Execution price is the ratio of assets sent/received. The Uniswap swapping of pairs is based on execution price rather than Mid-price.
• Line 20: Getting midprice of WETH in DAI after the trade.
• Line 23: Calling the init function.

Now, save the script file and run it using the following command:

$ node index

If everything goes according to the plan, it’ll give an output something similar to this:

結論

Now that we know how to use Uniswap Javascript SDK, you are all set to use this to build your own next big thing in DeFi.

イーサリアムに関する記事やガイドをもっと読みたい方は、ぜひニュースレターにご登録ください。ご意見やご感想がございましたら、Twitterからお気軽にお寄せください。また、Discordコミュニティサーバーでは、これまで出会った中で最もクールな開発者たちが集まっていますので、いつでもお気軽にチャットで交流してください :)