johnrjj / remix-swap

User interface to swap Ethereum tokens. Built on Remix using the 0x API.

remix-swap

Overview

A simple ERC-20 swap application built on Remix using the 0x API.

Quick start

1. Create an .env file and setup the required environment variables

ENV Variable	Description
ALCHEMY_API_KEY	Alchemy API key (create one here)
SESSION_SECRET	Used to sign cookies and can be any string
RPC_TEST_URL	RPC URL for E2E testing e.g. https://eth-mainnet.alchemyapi.io/v2/<alchemy-api-key-here>

2. Install the project dependencies

npm install

3. Start the Remix development server

npm run dev

4. Navigate to http://localhost:3000

open http://localhost:3000

Testing

The end-to-end (E2E) test command tests user flows from beginning to end using browser automation. First, Hardhat spins up a local Ethereum network node that is a fork of Ethereum mainnet. A script sends JSON-RPC calls to the node to setup the test account. This involves transferring an amount of ETH from a Hardhat account to the test account, then wrapping the ETH to get WETH (ERC-20). WETH is necessary because the application swaps ERC-20 tokens and ETH is not ERC-20 compliant. Second, the test command launches up Chrome with Puppeteer, which configures & connects MetaMask with the test account. Finally, Puppeteer runs through user flow(s) from start to end. For example, from MetaMask wallet connection -> entering a trade amount -> submitting a trade -> trade confirmation.

A GitHub Action runs the tests in a headless browser using xvfb.

npm run test:e2e