• Stars
    star
    223
  • Rank 178,458 (Top 4 %)
  • Language
    JavaScript
  • License
    BSD 2-Clause "Sim...
  • Created over 6 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Legacy ENS manager app

ENS Application

ENS Application

⚠️ IMPORTANT NOTE TO CONTRIBUTORS ⚠️

As work has begun on the next version of the ENS app, please do not submit PRs for issues marked 'redesign' or 'post-redesign'. We will soon have info on how to contribute to the new app. Thanks for all your hard work!

Installation

Manual

Expects Node.js version >=14.17.0

$> git clone https://github.com/ensdomains/ens-app.git
$> cd ens-app
$> yarn install
$> yarn start

Open your browser at localhost:3000 and open metamask.

To start the ipfs-enabled build:

yarn start:ipfs

The main difference of the ipfs-build is that it uses HashRouter instead of BrowserRouter and makes sure all links are relative.

The ENS app can be used with the Gnosis Safe web interface. The required steps are outline here.

Unit Testing

All tests are run with Jest for both the front-end application and testing blockchain functionality. For blockchain based tests it uses ganache-cli by default. If you want to see the transactions in the Ganache GUI, you can change the environment in the test file from GANACHE_CLI to GANACHE. Then you can open Ganache on your computer and test manually after the test runner deploys the contracts.

To run the tests:

npm test

To speed up the tests, the contracts are compiled before the tests. If you need to update the solidity code, you can run npm run compile to recompile the code. Alternatively you can uncomment the code that compiles the contracts in the tests, which will slow down the tests considerably.

Troubleshooting tests

If you get this error:

$ npm test

> [email protected] test /Users/youruser/drive/projects/ens-app
> react-scripts test --env=jsdom

2018-05-23 09:17 node[85833] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-05-23 09:17 node[85833] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:136
      throw er; // Unhandled 'error' event
      ^

Error: Error watching file for changes: EMFILE
    at _errnoException (util.js:999:13)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1374:9)
npm ERR! Test failed.  See above for more details.

Try installing watchman on OSX by doing:

brew uninstall watchman
brew install watchman

Coding Style and Contribution Guide

Importing and Exporting

Global modules will be imported first regardless, e.g. React, ReactDOM and any other libraries that are installed via NPM. Imports thereafter will be separated by type with line separating each type. Generally React components will only have one export, unless there are multiple versions of that component, or it's a collection of related styled components. Since there are generally only one export, we will use export default to allow more flexibility.

import React from 'react'
import ReactDOM from 'react'
import styled from '@emotion/styled/macro'

import util from '../utils'

import ComponentA from '../components/ComponentA'
import ComponentB from '../components/ComponentB'

export

React Style

We use a functional components, using hooks instead of class based components. For basic state we use useState and for more complicated state useReducer. If they reusable, then you can abstract them to the hooks file, which can additionally by split up into a folder once we have enough hooks.

import React, { useState } from 'react'

export default function Component({ someProp }) {
  const [state, setState] = useState(null)
  return <div>...</div>
}

CSS/Styling

Styling in this app is done with Emotion, with styled components style CSS. We do not use css or classNames, unless we are passing through the styles to a component. We use the babel plugin macros import as this enables labels and source mapping for our components. We also use parentheses for all styled components to keep consistency when we create components that compose with each other.

import styled from '@emotion/styled/macro'

const Component = styled('div')`
  display: flex;
`

Media Queries

The main way to use media queries is with the helper function mq located in the root at mediaQuery. We have absolute URL support, so you can just import it directly as mediaQuery. It has properties for all the breakpoints supported by our app. We also have a useMediaMin hook, which we plan to roll out to replace the render prop version when we can convert all our components to functional components.

Currently supported breakpoints:

const breakpoints = {
  small: 576,
  medium: 768,
  large: 992,
  xLarge: 1200
}

You can use it as follows:

import styled from '@emotion/styled/macro'
import mq from 'mediaQuery'

const SomeComponent = styled('div')`
  font-size: 14px;
  ${mq.small`
    font-size: 22px;
  `}
`

The second way is using hooks, which uses useEffect and useState underneath. This must be used with functional components.

import { useMediaMin } from './mediaQuery'

function Component(){
  const mediumBP = useMediaMin('medium')
  return <>
    {mediumBP ? <LargeComponent /> : <SmallComponent />}
  <>
}

Cypress testing best practice.

Cypress end 2 end testing tends to be very flakey when ran on CI environment.

  • Assert the existence before assert the non existence = Cypress waits until the default timeout (set to 12 sec) to make sure that the element does not exist whereas asserting the existence of an element completes as soon as the element becomes visible. Try to assert existing element with default timeout, then try to assert non-existing element with timeout:0 to speed up.
  • Fix warnings = Sometimes React elements render in the strange way very subtly which may not be visible by human but can be detected by automated test. If some assertion is failing, check if there are warning and try to fix them first.
  • Make use of testid rather than asserting with css attributes (such as color) = Asserting to change if button becomes clickable tends to be flakey as you have to manually loop and check the css attribute rather than allowing cypress to wait with built-in timeout feature. Try to set testid such as button-${ canClick ? 'enabled' : 'disabled' } so that you can set assertion against enabled/disabled condition.
  • Consolidate tests where applicable = Even though it's discouraged in unit testing, doing so will save time for setup/teardown. If test is slow because it's doing lots of setup/teardown for each test cast, try to consolidate them.

Internationalisation

We use the i18next and react-i18next package for internationlisation.

Currently we use /public/locales/[language].json for translation. Each property should be a page or reusable component. The only exception to this is c which is a namespace we are using for common language throughout the app that will have to be reused over and over.

Adding a new language

To add a new language, copy the public/locals/en.json file, and name it [language].js and then you can begin to translate each label one by one.

The other thing that needs to be changed is LanguageSwitcher.js, which has a list of currently supported languages, and the i18n.js init file. This will add the language to our dropdown menu.

Once this has been done, please create a pull request for us to review and check it has been done correctly.

End to end Testing

Getting started with E2E testing

In case you haven't already:

  • git clone https://github.com/ensdomains/ens-app.git
  • git clone https://github.com/ensdomains/ens-subgraph

You need to make sure these are all cloned into the same parent folder.

Next in the ens-app folder run the following (will need multiple terminals open):

npx ganache-cli -b 1

Install Docker: https://www.docker.com/get-started

in the ens-app folder:

rm -rf data
docker-compose up

in the ens-app folder:

yarn preTest
yarn subgraph

in the ens-subgraph folder:

yarn setup

in the ens-app folder:

yarn start:test
yarn run cypress:open

This should open up cypress. To run the tests click on 'Run n integration tests'


The main package for the E2E tests is ensdomains/mock, which exposes a script that will prepopulate ganache with ENS so you have everything setup to run Cypress on.

The ENS app has end to end tests with Cypress. To run them you need to start ganache, run the seed script, run the app and then run cypress. This should start chrome and the Cypress GUI. Each time the test run, the script needs to be re-run and the app restarted for it to work.

ganache-cli
yarn run preTest

This runs the app in local ganache mode:

yarn start:test
yarn run cypress:open

To test the ipfs-build use the respective ":ipfs"-variants of the scripts:

yarn start:test:ipfs
yarn run cypress:open:ipfs

Setting up subgraph

Subgraph is used to list subdomains and all the names you have registered.

Prerequisite

Get ens subgraph

git clone https://github.com/ensdomains/ens-subgraph
cd ens-subgraph
yarn

Get graph-node

git clone https://github.com/graphprotocol/graph-node

From now on, we assume that graph-node, ens-app, and ens-subgraph all exist under the same directory

Start ganache

ganache-cli

Download and start docker

Download and start docker first

Start thegraph node

This starts up docker with ipfs, postgresdb, and the-graph node.

cd graph-node/docker
docker-compose up

Deploy ENS contracts and update subgraph.yml

cd ens-app
yarn preTest
yarn subgraph

subgraph job updates ENS contract addresses and updates environment from mainnet to dev

Deploy ENS subgraph

Generate deployment code

cd ../ens-subgraph
yarn
yarn codegen

Deploy

yarn create-local
yarn deploy-local

NOTE: If it raises error, try to delete graph-node/docker/data and startup the docker again.

Confirm that you can query from browser

Screenshot 2019-07-17 at 11 34 59

Bundle size

If you add a new package or make a change to the way files are being imported (e.g. adding an import statement to a file), you should run yarn build before and after the changes and you will see how your changes have impacted the bundle sizes on the second run.

if the bundle size has changed significantly (100kb+) you probably want to consider taking steps to mitigate this:

More Repositories

1

ens

Implementations for ENS core functionality: The registry, registrars, and public resolvers.
JavaScript
1,159
star
2

ens-contracts

The core contracts of the ENS protocol
TypeScript
576
star
3

ensjs-v2

Javascript bindings for the Ethereum Name Service
JavaScript
206
star
4

subdomain-registrar

A registrar that sells subdomains to users on behalf of their owners
CSS
185
star
5

governance-contracts

Governance contracts for the ENS DAO
JavaScript
160
star
6

address-encoder

Encodes and decodes address formats for various cryptocurrencies
TypeScript
148
star
7

offchain-resolver

TypeScript
142
star
8

docs

Main documentation site for the ENS protocol
TypeScript
136
star
9

evmgateway

This repository implements a generic CCIP-Read gateway for fetching state proofs of data on other EVM chains. The intended use is for contracts on L1 to be able to fetch and verify data from contracts on L2 in a read context.
TypeScript
132
star
10

ens-app-v3

The official ENS manager app. Register and manage your ENS names here.
TypeScript
126
star
11

ensjs

ENS javascript library for contract interaction
TypeScript
123
star
12

ensdomains-landing

ENS Homepage V2, the main homepage of the ENS protocol.
TypeScript
105
star
13

ethregistrar

Solidity
92
star
14

thorin

A web3 native design system.
TypeScript
81
star
15

ens-metadata-service

TypeScript
71
star
16

resolvers

A collection of resolvers for ENS domains
JavaScript
69
star
17

dnssec-oracle

A DNSSEC oracle for Ethereum
Solidity
57
star
18

react-ens-address

React Component to resolve ENS names or reverse resolve addresses
JavaScript
57
star
19

ui

UI components and reusable functions
JavaScript
55
star
20

l2gateway-demo

A simple demonstration of a proposed L2 gateway specification
JavaScript
52
star
21

name-wrapper

JavaScript
45
star
22

ens-avatar

ENS Avatar resolver library for both nodejs and browser.
TypeScript
40
star
23

solsha1

Pure-solidity implementation of the SHA1 hash function.
Solidity
39
star
24

ens.domains

JavaScript
31
star
25

reverse-records

JavaScript
27
star
26

dnsprovejs

A tool to convince an Ethereum DNSSEC oracle of the contents of DNS records
TypeScript
25
star
27

buffer

A library for working with mutable byte buffers in Solidity.
Solidity
25
star
28

governance-web-react

JavaScript
23
star
29

governance-docs

Governance documentation for the ENS DAO
22
star
30

offchain-resolver-example

CCIP Offchain ENS Resolver example implementation
TypeScript
21
star
31

dnsregistrar

DNS registrar for ENS
Solidity
21
star
32

ens-manager

JavaScript
19
star
33

ethers-ccip-read

Ethers-rs CCIP-Read Middleware
Rust
19
star
34

media-kit

ens media kit resources
CSS
17
star
35

ens-validation

TypeScript
17
star
36

root

New ENS root contract
JavaScript
16
star
37

op-resolver

JavaScript
15
star
38

ens-twitter-api

TypeScript
14
star
39

ens-avatar-worker

Cloudflare worker that facilitates gasless avatar record updates via the ENS manager app
TypeScript
13
star
40

dnssecoraclejs

TypeScript/JavaScript library for generating DNSSEC proofs for the ENS DNSSEC oracle contract
TypeScript
11
star
41

court

Basic smart contracts for the arbitration processes.
Solidity
11
star
42

docs-v2

The Ethereum Name Service (ENS) is a distributed, open, and extensible naming system based on the Ethereum blockchain. This repository contains documentation, examples, and much more.
HTML
11
star
43

blacklist

Blacklisting tools for ENS
Solidity
10
star
44

optimistic-dnssec

Optimistic Implementation of the DNSSEC Registrar
Solidity
10
star
45

ens-archived-contracts

Collection of compiled ENS smart contracts
Solidity
10
star
46

hackathon-registrar

A simple ENS registrar for Hackathons
Solidity
9
star
47

gas-estimate-worker

Cloudflare worker for estimating registration gas costs with tenderly
TypeScript
9
star
48

name-reservations

Repository for 3-6 character name reservations in .eth.
CSS
9
star
49

enschain

Solidity
9
star
50

frontend-template

Starter web app for web3 developers
TypeScript
8
star
51

offchain-gateway-rs

Offchain CCIP Gateway Resolver implementation in Rust
Rust
7
star
52

learn-docs

Documentation for learning about ENS domains
7
star
53

renewal-widget

ENS Renewal widget displays a popup window if there are any expiring ENS names.
JavaScript
7
star
54

arb-resolver

JavaScript
7
star
55

ensips

ENS Improvement Proposals
TypeScript
7
star
56

hack.ens.domains

JavaScript
7
star
57

k-ens

ENS formally verified
6
star
58

auction

An auction contract for a one-off vickery style auction of 3-6 character names
JavaScript
6
star
59

my-ens-app

HTML
6
star
60

ccip-read-dns-gateway

ENS CCIP-Read DNSSEC Gateway
TypeScript
5
star
61

dnssectool

JavaScript
5
star
62

short-name-claims-app

A webapp for submitting claims for ENS short names (3-6 characters)
TypeScript
5
star
63

blog

Official Ethereum Name Service Blog
TypeScript
5
star
64

hack2018

5
star
65

research

ENS relevant research.
5
star
66

ccip-tools

CCIP Multitool for testing your offchain resolver!
TypeScript
5
star
67

ens-support-docs

ENS Support Docs
CSS
4
star
68

ens-reclaim-deposit-subgraph

TypeScript
4
star
69

hackathon-registrar-app

JavaScript
4
star
70

renewal

JavaScript
4
star
71

ens-print

Micro App for printing ENS stickers
JavaScript
4
star
72

ethlink-request

It fetches newly created subdomain and send request to eth.link to add to the DoH proxy
TypeScript
4
star
73

mock

Module for mocking ENS locally
JavaScript
4
star
74

integrations

List of integrations for ENS
TypeScript
4
star
75

reclaim

TypeScript
3
star
76

moonpay-worker

JavaScript
3
star
77

normalise-refund

JavaScript
3
star
78

test-utils

ENS test utilities
JavaScript
3
star
79

tldclaims

JavaScript
3
star
80

verify-ratification

Code to verify the votes ratifying the ENS constitution
JavaScript
3
star
81

usd-oracle

USD oracle research
3
star
82

batch-gateway

3
star
83

short-name-claims-subgraph

A subgraph for indexing ENS .eth short name claims
TypeScript
3
star
84

migration-scripts

Python
3
star
85

ens-faucet-worker

Cloudflare worker to help distribute testnet ETH to ENS manager app users
TypeScript
3
star
86

ens-bigquery-udf

JavaScript
3
star
87

ens-evmgateway

TypeScript
3
star
88

crypto-addr-serialize

Encode/Decode various cryptocurrency addresses
JavaScript
3
star
89

ens-og-image

TypeScript
2
star
90

enscluster

Config files for the ensdomains Kubernetes clusters
Python
2
star
91

dnssec-oracle-anchors

JavaScript
2
star
92

dao-pm

Project management repository for the ENS DAO
2
star
93

context-resolver

TypeScript
2
star
94

constitution-book-claim

ENS DAO constitution book claim site
TypeScript
2
star
95

ens-avatar-fallback

JavaScript
2
star
96

arbitrum-resolver

JavaScript
1
star
97

pm

an place to hold ENS project issues which cannot be assigned to any existing repos
1
star
98

ens-cfw

TypeScript
1
star
99

rasterize-gcp

ENS NFT Rasterization Service
JavaScript
1
star
100

punycode

Solidity
1
star