From 7a9be74e151fa3eca92f32c904c7c9c538f58f2b Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Wed, 28 Oct 2020 10:26:31 -0300 Subject: [PATCH 1/4] Adds networks.md --- docs/networks.md | 357 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 357 insertions(+) create mode 100644 docs/networks.md diff --git a/docs/networks.md b/docs/networks.md new file mode 100644 index 0000000000..cb0bdecee0 --- /dev/null +++ b/docs/networks.md @@ -0,0 +1,357 @@ +# Network Configuration + +## Network configuration structure + +We have currently this structure for the network configuration: + +- This is the main configuration that you need to provide in order to add a new network. +``` +export interface NetworkConfig { + network: NetworkSettings + disabledFeatures?: SafeFeatures + disabledWallets?: Wallets + environment: SafeEnvironments +} +``` + + + +#### NetworkSettings + +- It contains the id of the ETH Network, the name of the network, information about the native coin of that network and a boolean that marks the network as a testnet or a production network. +``` +export type NetworkSettings = { + id: ETHEREUM_NETWORK, + backgroundColor: string, + textColor: string, + label: string, + isTestNet: boolean, + nativeCoin: Token, +} +``` + +- Currently supported ETHEREUM_NETWORKS: + +``` +export enum ETHEREUM_NETWORK { + MAINNET = 1, + MORDEN = 2, + ROPSTEN = 3, + RINKEBY = 4, + GOERLI = 5, + KOVAN = 42, + XDAI = 100, + ENERGY_WEB_CHAIN = 246, + VOLTA = 73799, + UNKNOWN = 0, + LOCAL = 4447, +} +``` + +- For the native coin, this is the structure: + +``` +type Token = { + address: string + name: string + symbol: string + decimals: number + logoUri?: string +} +``` + + +#### SafeFeatures + +Its an array that contains a list of features that should be disabled for the network. It's empty as default. + +``` +export type SafeFeatures = FEATURES[] + +export enum FEATURES { + ERC721 = 'ERC721', + ERC1155 = 'ERC1155', + SAFE_APPS = 'SAFE_APPS', + CONTRACT_INTERACTION = 'CONTRACT_INTERACTION' +} +``` + +#### Wallets + +It is an array that contains a list of wallets that will be disabled for the network. It's empty as default. + +``` +export type Wallets = WALLETS[] +``` + +``` +export enum WALLETS { + METAMASK = 'metamask', + WALLET_CONNECT = 'walletConnect', + TREZOR = 'trezor', + LEDGER = 'ledger', + TRUST = 'trust', + DAPPER = 'dapper', + FORTMATIC = 'fortmatic', + PORTIS = 'portis', + AUTHEREUM = 'authereum', + TORUS = 'torus', + UNILOGIN = 'unilogin', + COINBASE = 'coinbase', + WALLET_LINK = 'walletLink', + OPERA = 'opera', + OPERA_TOUCH = 'operaTouch' +} +``` + +#### SafeEnviroments + +If the network has different enviroments, you can add them here, otherwise you should add only the production settings + +``` +type SafeEnvironments = { + dev?: EnvironmentSettings + staging?: EnvironmentSettings + production: EnvironmentSettings +} +``` + +We use a transaction service (**txServiceUrl**) for fetching the transactions and balances of the safe and also to POST messages with the created transactions, this should be provided by Gnosis. + +The **networkExplorer** information is information related to the networkExplorer used for the given network (Blockscout for xDai, Etherscan for mainnet, etc). This is used for link transaction hashes and addresses to the given network explorer. +``` +export type EnvironmentSettings = GasPrice & { + txServiceUrl: string + relayApiUrl?: string + safeAppsUrl: string + rpcServiceUrl: string + networkExplorerName: string + networkExplorerUrl: string + networkExplorerApiUrl: string +} +``` + +The **gasPrice** for the network in case it's a fixed amount (like xDai), otherwise you can give an oracle we can use to fetch the current gas price +``` +type GasPrice = { + gasPrice: number + gasPriceOracle?: GasPriceOracle +} | { + gasPrice?: number + // for infura there's a REST API Token required stored in: `REACT_APP_INFURA_TOKEN` + gasPriceOracle: GasPriceOracle +} +``` + +``` +export type GasPriceOracle = { + url: string + // Different gas api providers can use a different name to reflect different gas levels based on tx speed + // For example in ethGasStation for ETHEREUM_MAINNET = safeLow | average | fast + gasParameter: string +} +``` + +### Enviroment variables: + +- **REACT_APP_NETWORK**: name of the used network (ex: xDai, mainnet, rinkeby) +- **REACT_APP_GOOGLE_ANALYTICS**: Used for enabling google analytics +- **REACT_APP_PORTIS_ID**: Portis ID for enabling it on given network +- **REACT_APP_FORTMATIC_KEY**: Formatic yey for given network +- **REACT_APP_BLOCKNATIVE_KEY**: Blocknative key for given network + +--- +## How to add a network + +1) In case that is not already supported, add the network on the **ETHEREUM_NETWORK** enum in `src/config/networks/network.d.ts` + +``` +export enum ETHEREUM_NETWORK { + MAINNET = 1, + MORDEN = 2, + ROPSTEN = 3, + RINKEBY = 4, + GOERLI = 5, + KOVAN = 42, + XDAI = 100, + ENERGY_WEB_CHAIN = 246, + VOLTA = 73799, + UNKNOWN = 0, + LOCAL = 4447, +} +``` + +2) Add **env variables**: + +* REACT_APP_NETWORK +* REACT_APP_GOOGLE_ANALYTICS +* REACT_APP_PORTIS_ID +* REACT_APP_FORTMATIC_KEY +* REACT_APP_BLOCKNATIVE_KEY + +3) Add the **NetworkSettings** in `src/config/networks` as `.ts`: + +``` +import { EnvironmentSettings, ETHEREUM_NETWORK, NetworkConfig } from 'src/config/networks/network.d' + +const baseConfig: EnvironmentSettings = { + txServiceUrl: '', + safeAppsUrl: '', + gasPriceOracleUrl: '', + gasPriceOracle: { + url: '', + gasParameter: '', + }, + rpcServiceUrl: '', + networkExplorerName: '', + networkExplorerUrl: '', + networkExplorerApiUrl: '', +} + +const rinkeby: NetworkConfig = { + environment: { + dev: { + ...baseConfig, + }, + staging: { + ...baseConfig, + safeAppsUrl: '', + }, + production: { + ...baseConfig, + txServiceUrl: '', + safeAppsUrl: '', + }, + }, + network: { + id: ETHEREUM_NETWORK., + backgroundColor: '', + textColor: '', + label: '', + isTestNet: true/false, + nativeCoin: { + address: '', + name: '', + symbol: '', + decimals: ?, + logoUri: '', + }, + }, + disabledFeatures: [], + disabledWallets: [] +} + +export default +``` + +## Configuration example (xDai) - fixed gas price + +1) **ETHEREUM_NETWORK** +``` +export enum ETHEREUM_NETWORK { + MAINNET = 1, + MORDEN = 2, + ROPSTEN = 3, + RINKEBY = 4, + GOERLI = 5, + KOVAN = 42, + XDAI = 100, -> ADDED XDAI + ENERGY_WEB_CHAIN = 246, + VOLTA = 73799, + UNKNOWN = 0, + LOCAL = 4447, +} +``` + +2) **Network file** (src/config/networks/xdai.ts) + +``` +import { ETHEREUM_NETWORK, NetworkConfig } from 'src/config/networks/network.d' + +const xDai: NetworkConfig = { + environment: { + production: { + txServiceUrl: 'https://safe-transaction.xdai.gnosis.io/api/v1', + safeAppsUrl: 'https://safe-apps-xdai.staging.gnosisdev.com', + gasPrice: 1e9, + rpcServiceUrl: 'https://dai.poa.network/', + networkExplorerName: 'Blockscout', + networkExplorerUrl: 'https://blockscout.com/poa/xdai', + networkExplorerApiUrl: 'https://blockscout.com/poa/xdai/api', + }, + }, + network: { + id: ETHEREUM_NETWORK.XDAI, + backgroundColor: '#48A8A6', + textColor: '#ffffff', + label: 'xDai', + isTestNet: false, + nativeCoin: { + address: '0x000', + name: 'xDai', + symbol: 'xDai', + decimals: 18, + logoUri: xDaiLogo, + }, + }, + disabledWallets:[ + WALLETS.TREZOR, + WALLETS.LEDGER + ] +} + +export default xDai +``` + +## Configuration example (Mainnet) - gas price retrieven by oracle + + +**Network file** (src/config/networks/mainnet.ts) + +``` +const baseConfig: EnvironmentSettings = { + txServiceUrl: 'https://safe-transaction.mainnet.staging.gnosisdev.com/api/v1', + safeAppsUrl: 'https://safe-apps.dev.gnosisdev.com', + gasPriceOracle: { + url: 'https://ethgasstation.info/json/ethgasAPI.json', + gasParameter: 'average', + }, + rpcServiceUrl: 'https://mainnet.infura.io:443/v3', + networkExplorerName: 'Etherscan', + networkExplorerUrl: 'https://etherscan.io', + networkExplorerApiUrl: 'https://api.etherscan.io/api', +} + +const mainnet: NetworkConfig = { + environment: { + dev: { + ...baseConfig, + }, + staging: { + ...baseConfig, + safeAppsUrl: 'https://safe-apps.staging.gnosisdev.com', + }, + production: { + ...baseConfig, + txServiceUrl: 'https://safe-transaction.mainnet.gnosis.io/api/v1', + safeAppsUrl: 'https://apps.gnosis-safe.io', + }, + }, + network: { + id: ETHEREUM_NETWORK.MAINNET, + backgroundColor: '#E8E7E6', + textColor: '#001428', + label: 'Mainnet', + isTestNet: false, + nativeCoin: { + address: '0x000', + name: 'Ether', + symbol: 'ETH', + decimals: 18, + logoUri: EtherLogo, + }, + } +} + +export default mainnet +``` From af18d9dd339bcab91d4df86d3d1701cd7c876f05 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Wed, 28 Oct 2020 10:26:42 -0300 Subject: [PATCH 2/4] Updates readme.md --- readme.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/readme.md b/readme.md index 622e88ebfd..dbd62775a8 100644 --- a/readme.md +++ b/readme.md @@ -101,6 +101,10 @@ Give an example Add additional notes about how to deploy this on a live system +## Configuring the app for running on different networks + +[Please check the network configuration documentation](./docs/networks.md) + ## Built With * [Truffle React Box](https://github.com/truffle-box/react-box) - The web framework used From 68283809eefa8450021c269cdd6179cadcbd1664 Mon Sep 17 00:00:00 2001 From: Fernando Date: Thu, 29 Oct 2020 14:29:45 -0300 Subject: [PATCH 3/4] add md formatting --- docs/networks.md | 48 +++++++++++++++++++++++++----------------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/docs/networks.md b/docs/networks.md index cb0bdecee0..1be6c16ddd 100644 --- a/docs/networks.md +++ b/docs/networks.md @@ -5,7 +5,7 @@ We have currently this structure for the network configuration: - This is the main configuration that you need to provide in order to add a new network. -``` +```typescript export interface NetworkConfig { network: NetworkSettings disabledFeatures?: SafeFeatures @@ -15,11 +15,11 @@ export interface NetworkConfig { ``` - #### NetworkSettings - It contains the id of the ETH Network, the name of the network, information about the native coin of that network and a boolean that marks the network as a testnet or a production network. -``` + +```typescript export type NetworkSettings = { id: ETHEREUM_NETWORK, backgroundColor: string, @@ -30,9 +30,9 @@ export type NetworkSettings = { } ``` -- Currently supported ETHEREUM_NETWORKS: +- Currently supported Ethereum-compatible networks: -``` +```typescript export enum ETHEREUM_NETWORK { MAINNET = 1, MORDEN = 2, @@ -50,7 +50,7 @@ export enum ETHEREUM_NETWORK { - For the native coin, this is the structure: -``` +```typescript type Token = { address: string name: string @@ -65,7 +65,7 @@ type Token = { Its an array that contains a list of features that should be disabled for the network. It's empty as default. -``` +```typescript export type SafeFeatures = FEATURES[] export enum FEATURES { @@ -80,11 +80,11 @@ export enum FEATURES { It is an array that contains a list of wallets that will be disabled for the network. It's empty as default. -``` +```typescript export type Wallets = WALLETS[] ``` -``` +```typescript export enum WALLETS { METAMASK = 'metamask', WALLET_CONNECT = 'walletConnect', @@ -108,7 +108,7 @@ export enum WALLETS { If the network has different enviroments, you can add them here, otherwise you should add only the production settings -``` +```typescript type SafeEnvironments = { dev?: EnvironmentSettings staging?: EnvironmentSettings @@ -119,7 +119,8 @@ type SafeEnvironments = { We use a transaction service (**txServiceUrl**) for fetching the transactions and balances of the safe and also to POST messages with the created transactions, this should be provided by Gnosis. The **networkExplorer** information is information related to the networkExplorer used for the given network (Blockscout for xDai, Etherscan for mainnet, etc). This is used for link transaction hashes and addresses to the given network explorer. -``` + +```typescript export type EnvironmentSettings = GasPrice & { txServiceUrl: string relayApiUrl?: string @@ -131,8 +132,9 @@ export type EnvironmentSettings = GasPrice & { } ``` -The **gasPrice** for the network in case it's a fixed amount (like xDai), otherwise you can give an oracle we can use to fetch the current gas price -``` +The **gasPrice** for the network in case it's a fixed amount (like xDai), otherwise you can give an oracle we can use to fetch the current gas price. + +```typescript type GasPrice = { gasPrice: number gasPriceOracle?: GasPriceOracle @@ -143,7 +145,7 @@ type GasPrice = { } ``` -``` +```typescript export type GasPriceOracle = { url: string // Different gas api providers can use a different name to reflect different gas levels based on tx speed @@ -163,9 +165,9 @@ export type GasPriceOracle = { --- ## How to add a network -1) In case that is not already supported, add the network on the **ETHEREUM_NETWORK** enum in `src/config/networks/network.d.ts` +1) In case that is not already supported, add the network on the **ETHEREUM_NETWORK** enum in [`src/config/networks/network.d.ts`](/src/config/networks/network.d.ts) -``` +```typescript export enum ETHEREUM_NETWORK { MAINNET = 1, MORDEN = 2, @@ -189,9 +191,9 @@ export enum ETHEREUM_NETWORK { * REACT_APP_FORTMATIC_KEY * REACT_APP_BLOCKNATIVE_KEY -3) Add the **NetworkSettings** in `src/config/networks` as `.ts`: +3) Add the **NetworkSettings** in [`src/config/networks`](/src/config/networks) as `.ts`: -``` +```typescript import { EnvironmentSettings, ETHEREUM_NETWORK, NetworkConfig } from 'src/config/networks/network.d' const baseConfig: EnvironmentSettings = { @@ -247,7 +249,7 @@ export default ## Configuration example (xDai) - fixed gas price 1) **ETHEREUM_NETWORK** -``` +```typescript export enum ETHEREUM_NETWORK { MAINNET = 1, MORDEN = 2, @@ -263,9 +265,9 @@ export enum ETHEREUM_NETWORK { } ``` -2) **Network file** (src/config/networks/xdai.ts) +2) **Network file** [xdai](/src/config/networks/xdai.ts) -``` +```typescript import { ETHEREUM_NETWORK, NetworkConfig } from 'src/config/networks/network.d' const xDai: NetworkConfig = { @@ -306,9 +308,9 @@ export default xDai ## Configuration example (Mainnet) - gas price retrieven by oracle -**Network file** (src/config/networks/mainnet.ts) +**Network file** [mainnet](/src/config/networks/mainnet.ts) -``` +```typescript const baseConfig: EnvironmentSettings = { txServiceUrl: 'https://safe-transaction.mainnet.staging.gnosisdev.com/api/v1', safeAppsUrl: 'https://safe-apps.dev.gnosisdev.com', From 6629f91893e4d1c57e671a6b9546a4ccdcb4ea7c Mon Sep 17 00:00:00 2001 From: Daniel Sanchez Date: Wed, 4 Nov 2020 17:01:34 +0100 Subject: [PATCH 4/4] Add some rewording --- docs/networks.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/networks.md b/docs/networks.md index 1be6c16ddd..e3c4afecd7 100644 --- a/docs/networks.md +++ b/docs/networks.md @@ -17,7 +17,7 @@ export interface NetworkConfig { #### NetworkSettings -- It contains the id of the ETH Network, the name of the network, information about the native coin of that network and a boolean that marks the network as a testnet or a production network. +- It contains the Ethereum compatible network id, the network name, information about the native coin of that network and a boolean to indicate if the network is a testnet or a production network. ```typescript export type NetworkSettings = { @@ -30,7 +30,7 @@ export type NetworkSettings = { } ``` -- Currently supported Ethereum-compatible networks: +- Currently supported Ethereum compatible networks: ```typescript export enum ETHEREUM_NETWORK { @@ -48,7 +48,7 @@ export enum ETHEREUM_NETWORK { } ``` -- For the native coin, this is the structure: +- This is the structure to define the native coin: ```typescript type Token = { @@ -63,7 +63,7 @@ type Token = { #### SafeFeatures -Its an array that contains a list of features that should be disabled for the network. It's empty as default. +It's an array that contains a list of features that should be disabled for the network. It's empty by default. ```typescript export type SafeFeatures = FEATURES[] @@ -78,7 +78,7 @@ export enum FEATURES { #### Wallets -It is an array that contains a list of wallets that will be disabled for the network. It's empty as default. +It's an array that contains a list of wallets that will be disabled for the network. It's empty by default. ```typescript export type Wallets = WALLETS[] @@ -106,7 +106,7 @@ export enum WALLETS { #### SafeEnviroments -If the network has different enviroments, you can add them here, otherwise you should add only the production settings +If the network has different enviroments, you can add them here, otherwise you should only add production settings ```typescript type SafeEnvironments = { @@ -116,9 +116,9 @@ type SafeEnvironments = { } ``` -We use a transaction service (**txServiceUrl**) for fetching the transactions and balances of the safe and also to POST messages with the created transactions, this should be provided by Gnosis. +We use a transaction service (**txServiceUrl**) to fetch transactions and balances of each safe and also to POST messages with the created transactions, this should be provided by Gnosis. -The **networkExplorer** information is information related to the networkExplorer used for the given network (Blockscout for xDai, Etherscan for mainnet, etc). This is used for link transaction hashes and addresses to the given network explorer. +The **networkExplorer** parameters are used to provide information related to the networkExplorer used for the given network (Blockscout for xDai, Etherscan for mainnet, etc). This is used for link transaction hashes and addresses to the given network explorer. ```typescript export type EnvironmentSettings = GasPrice & { @@ -132,7 +132,7 @@ export type EnvironmentSettings = GasPrice & { } ``` -The **gasPrice** for the network in case it's a fixed amount (like xDai), otherwise you can give an oracle we can use to fetch the current gas price. +The **gasPrice** is used to indicate a fixed amount for some networks (like xDai), otherwise you can provide an oracle we can use to fetch the current gas price. ```typescript type GasPrice = { @@ -165,7 +165,7 @@ export type GasPriceOracle = { --- ## How to add a network -1) In case that is not already supported, add the network on the **ETHEREUM_NETWORK** enum in [`src/config/networks/network.d.ts`](/src/config/networks/network.d.ts) +1) In case that it is not already supported, add the network on the **ETHEREUM_NETWORK** enum in [`src/config/networks/network.d.ts`](/src/config/networks/network.d.ts) ```typescript export enum ETHEREUM_NETWORK {