Develop:    

Gnosis Protocol Web

Gnosis Protocol Web is the first dapp built on the Gnosis Protocol.

Gnosis Protocol is a fully permissionless DEX that enables ring trades to maximize liquidity.

Gnosis Protocol Web allows users to:

• Create orders in Gnosis Protocol
• See the balances for any token: available in their wallet and on the exchange
• Deposit and withdraw tokens to/from the exchange wallet

Running locally

# Install dependencies (we use Yarn but NPM should work too)
yarn

# Start dev server in http://localhost:8080
yarn start

Open http://localhost:8080 in your browser.

Mock mode (default)

The app will run by default in mock mode, that means that all service implementations will be replaced by a mocked one with some fake data. This is useful for development, however it's also useful to run it with the actual implementation:

# Disable mock mode
MOCK=false yarn start

Alternatively, if you want to persist this behaviour, add the env var into a local .env file (i.e. use .env.example as a template).

Autoconnect for mock mode (default)

When running in mock mode, the wallet will be connected automatically - to change this behaviour run the app via:

# Disable autoconnect, for mock mode
AUTOCONNECT=false yarn start

Alternatively, if you want to persist this behaviour add the env var into a local .env file (i.e. use .env.example as a template).

Build app

yarn build

Static files will be generated inside the ./dist dir.

Run tests

yarn test

Automatically fixing code

Manually, by running:

yarn lint:fix

If you use Visual Studio Code, it's recommended to install Prettier - Code formatter and add the following to your settings.json

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Testnet faucets

In order to get testing tokens, read up on the information here: faucet

Customizing components

This app employs overrides from an alternative source (custom/ directory) for easy swap in of imported files.

Override works for absolute paths that make use of baseUrl That is if there are two files:

• src/pages/About.tsx
• custom/pages/About.tsx

import About from 'pages/About'
// will try resolving from custom/ first and failing that from src/

NOTE: If you are forking the project, you might want to delete the custom/.gitignore file so you can commit a config file and components inside the custom directory.

Config

Default app configs can be found on the default config file

We recommend against editing this file directly, though.

If you wish to replace any default config, create a file named config inside the custom folder.

Both JSON and YAML formats are supported.

Simply replace any config found on config-default.

NOTE: If you are forking the project, you might want to delete the custom/.gitignore file so you can commit a config file and components inside the custom directory.

Below we provide details for each config.

name

A single string that controls the page title and favicon metadata.

logoPath

Path to favicon logo.

templatePath

Path to the template html file.

tcr

Tokens are dynamically loaded from the contract, but it might not be desirable to display everything in the interface.

Gnosis Protocol is a fully permissionless trading protocol for ERC-20, as such, anyone can enable a token for trading. Tokens of dubious value or nature or those not compatible with the ERC-20 standard may also be added. Accordingly, it is the responsibility of the Site operator to determine which tokens listed on the permissionless Gnosis Protocol are displayed on their Site.

To dynamically control which tokens are displayed without the need of a redeployment, it's possible to use a Token Curated Registry (TCR) contract per network.

The only requirement is that this contract implements the following method:

function getTokens(uint256 _listId) public view returns (address[] memory)

For a sample implementation, refer to dxDAO's TCR.

Config format:

tcr:
  type: 'multi-tcr'
  config:
    lists:
      - networkId: number
        listId: number
        contractAddress: string

# OR, for no filtering
tcr:
  type: 'none'

Where:

• type currently is either multi-tcr or none for no filter.
• networkId is a number, such as 1 for Mainnet, 4 for Rinkeby and so on.
• listId is optional and defaults to 0
• contractAddress the address of the contract deployed in network networkId

Note: For networks where a TCR contract is not provided, the tokens will not be filtered.

dexPriceEstimator

Endpoints for service that provides price estimation and data for the orderbook graph.

Config format:

dexPriceEstimator:
  type: 'dex-price-estimator'
  config:
    - networkId: number
      url_production: string
      url_develop: string

Where:

• type can only be dex-price-estimator.
• networkId is a number, such as 1 for Mainnet, 4 for Rinkeby and so on.
• url_production the endpoint for given networkId to use in production
• url_develop the endpoint for given networkId to use in development (optional)

theGraphApi

Endpoints for Gnosis Protocol Subgraph.

Config format:

theGraphApi:
  type: 'the-graph'
  config:
    - networkId: number
      url: string

Where:

• type can only be the-graph.
• networkId is a number, such as 1 for Mainnet, 4 for Rinkeby and so on.
• url the endpoint for given networkId

defaultProviderConfig

Endpoint for default Ethereum network provider.

Used when a wallet is not connected and for read operations when connected through Wallet Connect.

Config format:

defaultProviderConfig:
  type: 'infura'
  config:
    infuraId: 607a7dfcb1ad4a0b83152e30ce20cfc5
    infuraEndpoint: wss://mainnet.infura.io/ws/v3/

OR

defaultProviderConfig:
  type: 'url'
  config:
    ethNodeUrl: http://localhost:8383

Where:

• infuraId is your Infura id. Appended to infuraEndpoint.
• infuraEndpoint is the base url to Infura endpoint -- without the infuraId.
• ethNodeUrl is the url to an Ethereum node.

Note: Both values can be provided as environment variables. Respectively, INFURA_ID and ETH_NODE_URL.

exchangeContractConfig

Exchange contract config. Used for narrowing down event queries.

Config format:

exchangeContractConfig:
  type: 'contractBlock'
  config:
    - networkId: number
      blockNumber: number

Where:

• type can only be contractBlock.
• networkId is a number, such as 1 for Mainnet, 4 for Rinkeby and so on.
• blockNumber is the block where contract was deployed to given network

Wallet connect

Config for wallet connect. Allows to set a different bridge.

Config format:

walletConnect:
  bridge: 'wss://safe-walletconnect.gnosis.io/'

Alternatively you can set the bridge by declaring the env var WALLET_CONNECT_BRIDGE that would take precedence over the config.