TCR UI (WIP)

the ethereum blockchain is a decentralized database

ethereum miners are decentralized servers

token-curated registries are decentralized lists

a tcr is powered by its users

a user can participate in a tcr's application, challenge, and voting processes

a tcr has 1 permission: its intrinsic token

if a user controls a balance of a tcr's token, that user can participate in that tcr

if Alice has adToken, she can participate in the adChain registry

if a user controls multiple tokens from multiple tcrs, the user can participate in multiple tcrs

if Bob has SUN, FOAM, and CVL, he can participate in the Sunset, FOAM, and Civil registries

---

Requirements

• Node >= 8.0.0
• Yarn >= 1.7.0* _{*npm is not supported for package management. tcr-ui uses yarn.lock to ensure sub-dependency versions are pinned. yarn is required to install node_modules}

Getting started

NOTICE:

Commands prefixed with $ should be executed in this repo, while commands prefixed with > should be executed in a separate shell, in a cloned tcr repo

TCR-UI:

Clone & run app in dev mode in browser, rebuild on file changes - localhost:3000

  $ git clone https://github.com/kangarang/tcr-ui.git
  $ cd tcr-ui
  $ yarn
  $ yarn start

Tests

Run unit tests with Jest

  $ yarn test

Local blockchain/RPC (optional):

ganache-cli - localhost:8545

Warning: Do not use the mnemonic associated with this command on ethereum main network. You will lose your funds!

  # start local blockchain and rpc server
  $ yarn run rpc

TCR (optional):

  # clone tcr smart contracts
  > git clone https://github.com/skmgoldin/tcr.git
  > cd tcr

  # install node dependencies and ethpm dependencies
  > npm install

  # compile smart contracts
  > npm run compile

Deploy contracts (optional):

  # migrate contracts to local test network (port: 8545)
  > npm run deploy-ganache

  # migrate contracts to rinkeby test network (network_id: 4)
  > npm run deploy-rinkeby

---

Deployed TCRs

The Sunset Registry is deployed on the Rinkeby test network

The adChain Registry for publishers is deployed on Ethereum main network

---

Directory structure

|
├── design - Wireframes
├── docs - Documentation
├── public - Files that don't get compiled, just moved to build
|  └── index.html - Html template file
├── scripts
|  └── abis - TCR contract JSON ABIs
├── src
|  ├── api - Fetch data
|  ├── assets - Images, fonts, etc.
|  ├── components - Stateless, dumb components
|  ├── config - Config data
|  ├── containers - Stateful, smart containers
|  ├── libs - Framework-agnostic libraries
|  ├── modules - Redux modules
|  |  ├── [module] - Single Redux module
|  |  |  ├── sagas - Asynchronous side-effects
|  |  |  ├── tests - Jest unit tests
|  |  |  ├── actions.js - Action creators / plain objects
|  |  |  ├── index.js - Module root import / export
|  |  |  ├── reducers.js - Pure functions / immutable.js
|  |  |  ├── selectors.js - State selectors / reselect.js
|  |  |  ├── types.js - Action types / string constants
|  |  |  └── utils.js - Module-specific helpers
|  |  └── reducers - Reducer combiner
|  ├── stories - Storybook
|  ├── translations - Language JSON dictionaries
|  ├── utils - Common utility helper functions
|  ├── App.js - Root React component
|  ├── global-styles.js - Theme / colors
|  ├── index.js - Entry point for app
|  └── store.js - Redux reducer and middleware injector
|

---

Docs

• Events
• Transactions
• IPFS

Wireframes

---

How it works

The application requires a browser ethereum provider (Ethjs + MetaMask). On load, the app uses the provider to connect to an Ethereum network. Once connected, the app retrieves tcr contract ABIs from IPFS. Using the ABIs, the app begins to poll for event logs (e.g. _Application, _Challenge, _VoteCommitted, _VoteRevealed, etc.). With those logs, the app creates/transforms listing entities to manifest an emulation of the smart contract system's current state.

Different event logs trigger different effects to different listing entities. For example, an _Application event will effectively create a listing entity. A _Challenge event will add challenge information to the respective listing which renders the listing at a different part of the app. A _VoteRevealed event will update the listing's votesFor and votesAgainst values. Click here to see the createListing and transformListing functions.

Application Binary Interfaces

tcr-ui retrieves ABIs from IPFS, then loads the tcr smart contracts using the current networkID of MetaMask. the ABIs retrieved from IPFS are the same ABIs as the ones located in /scripts/abis/

The registry MUST be deployed to a network. If you have a registry address that you want to force, hardcode it in /src/config

If you do not want to rely on hardcoding the address, you can add a custom set of ABIs to IPFS:

1. Edit the "address" of the appropriate "networks" section of /scripts/abis/Registry.json
2. Run npm run update:abis to add your custom abis to IPFS. (note: a multihash starting with "Qm" will be printed)
3. Update the ipfsABIsHash variable in /src/config to the IPFS multihash

more info

---

Resources

Articles

• Token-Curated Registries 1.0
• Token-Curated Registry 1.1, 2.0
• Continuous Token-Curated Registries: The Infinity of Lists
• City Walls & Bo-Taoshi: Exploring the Power of Token-Curated Registries

Code

• TCR
• PLCR Voting
• AdChain Registry
• AdChain Registry Dapp
• DAppDev/EasyTCR

Community

• Gitter channel
• tokencuratedregistry.com

---

Acknowledgements

Aragon-ui

0x.js

Augur

MyCrypto

UDAPP

---

Workflow diagrams

These workflow diagrams were created by our wonderful designer, Eva Shon

---

License

This project is licensed under the MIT license, Copyright (c) 2018 Isaac Kang. For more information see LICENSE.