isabella232 / simpledex-ui-example

SimpleDEX

Example DEX built using OasisDEX, Dai.js, DAI-UI, using the frontend boilerplate nextjs-daijs-dai-ui-example

Current revision works with Kovan, on the ETH-DAI pair.

Getting Started

For development run:

yarn run dev

Open http://localhost:3000, or to connect the kovan network pass the query string network=kovan like this: http://localhost:3000/?network=kovan

Theming

This app uses theme-ui with the dai-ui Maker theme. For more information see here, or start editing the theme.js file right away.

Dai.js

This app includes the Dai.js SDK along with a minimal Context Provider to connect web3 browser accounts & fetch some data. By default the app will connect to mainnet. To connect to the kovan network pass the query string network=kovan in the URL.

MDX Support

Included is the next-mdx plugin for markdown support. You can import .mdx files as react components, or drop files in your pages directory and they will be served by Next. See here for more information.

Testing

To spin up a local testchain and run jest:

yarn test

To spin up the testchain separately:

yarn testchain

This app uses jest with react-testing-library and is preconfigured with a custom render function that wraps the UI elements in ThemeProvider and MakerProvider.

Jest is configured to look in the test/helpers directory for helper utilities so you can import the custom render function like this: import { render } from 'render';

IPFS

Requires IPFS to be installed locally. First build and export the project.

yarn build && yarn export

Add output directory to ipfs.

ipfs add -r out

Resources

• Dai.js - Javascript SDK for interacting with the Maker system.
• Dai-ui - Theme colors and scales built with theme-ui.
• Theme UI - A constraint-based system for organizing styles in UI design.
• Testchain - Start a local test chain with the MakerDAO contracts deployed on it, quickly and easily.
• MDX - Markdown for the component era.
• React testing library - Simple and complete React DOM testing utilities that encourage good testing practices.
• IPFS - A peer-to-peer hypermedia protocol designed to make the web faster, safer, and more open.
• Next.js - Learn about Next.js features and API.