App id miscelaneus (gnosis#1267)

* Remove fuse reference

* Move appId to the root of the config

* Override config with envs

* Define a max app id for validation

* Define env overrides for config

* Move validation to override env conf

* Remove default appId from config

* Fix error in message

* Improve message

* Give it more space

Co-authored-by: Leandro Boscariol <[email protected]>

Co-authored-by: Leandro Boscariol <[email protected]>

Author: anxolin

config-default.yaml

@@ -1,16 +1,32 @@
 #######################################################################################
 ##                                  DEFAULT CONFIG                                   ##
 #######################################################################################
-# - Defines the default configuration
-# - **WARNING**: Do not modify this file
-#   - For custom config create a new file "custom/config.yaml"
-#   - You can override in the custom file any config that is defined here
-#   - For redefining components, or for more information, follow the instructions in ./README.md
-
+# Defines the default configuration
+#   🚫 WARNING 🚫: Do not modify this file
+#       - For custom config create a new file "custom/config.yaml"
+#       - You can override in the custom file any config that is defined here
+#       - For redefining components, or for more information, follow the instructions in ./README.md
+#   ⚙️Read more here:
+#       https://github.com/gnosis/dex-react/wiki/Config
+
+# App Id
+#   Identify the app. The IDs range from 1 until 256
+#   Every transaction sent to the blockchain will include the ID and some basic analytic info
+#
+#   ⚠️IMPORTANT: The ID must be unique per App/Client of Gnosis Protocol:
+#       https://github.com/gnosis/dex-react/wiki/App-Ids-for-Forks
+#   More information about forking the web:
+#       https://github.com/gnosis/dex-react/wiki/Fork-project
+#
+#appId: 1
+
+# Name of the app
 name: Gnosis Protocol Web
 
+# Logo used for the favicon
 logoPath: './src/assets/img/logo.svg'
 
+# HTML template
 templatePath: './src/html/index.html'
 
 # Whitelisted tokens from Gnosis Contract retrieved from a smart contract
@@ -89,7 +105,7 @@ disabledTokens:
       description: This token is disabled for trading and depositing. SNX will be deprecated and replaced by another token at the end of July 2020.  Go to https://www.synthetix.io for more information
       reason: DEPRECATED
       url: https://docs.synthetix.io/integrations/guide/#proxy-deprecation
-      
+
     - address: '0x45804880De22913dAFE09f4980848ECE6EcbAf78'
       name: Paxos Gold
       symbol: PAXG

jest.config.js

@@ -1,4 +1,7 @@
-const config = require('./src/loadConfig')(true)
+const loadConfig = require('./src/loadConfig')
+const overrideEnvConfig = require('./src/overrideEnvConfig')
+
+const config = overrideEnvConfig(loadConfig(true))
 
 module.exports = {
   roots: ['<rootDir>/test'],

src/components/Layout/Footer.tsx

@@ -148,6 +148,10 @@ const Footer: React.FC = () => {
         <a target="_blank" rel="noopener noreferrer" href={'https://github.com/gnosis/dex-react/tree/v' + VERSION}>
           v{VERSION}
         </a>{' '}
+        -{' '}
+        <a target="_blank" rel="noopener noreferrer" href="https://github.com/gnosis/dex-react/wiki/App-Ids-for-Forks">
+          App Id: {CONFIG.appId}
+        </a>{' '}
         - Contracts{' '}
         <a
           target="_blank"

src/const.ts

@@ -37,6 +37,10 @@ export const BATCH_SUBMISSION_CLOSE_TIME = 4 // in minutes
 
 export const MINIMUM_ALLOWANCE_DECIMALS = 10
 
+// Max App Id: Read more here:
+//    https://github.com/gnosis/dex-react/wiki/App-Ids-for-Forks
+export const MAX_APP_ID = 255
+
 export const APP_NAME = 'Gnosis Protocol Web'
 
 export const ETHER_PNG =

src/overrideEnvConfig.js

@@ -0,0 +1,31 @@
+const MAX_APP_ID = 255
+const DEFAULT_DEV_APP_ID = 1
+const IS_DEV = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test'
+
+function getAppId(config) {
+  const appId = Number(process.env.APP_ID || config.appId || (IS_DEV ? DEFAULT_DEV_APP_ID : undefined))
+
+  let error
+  if (!appId) {
+    error = 'The appId config, or APP_ID environment variable is required'
+  } else {
+    if (!Number.isInteger(appId) || appId < 1 || appId > MAX_APP_ID) {
+      error = `appId config or APP_ID environment variable isn't valid. Expected a positive integer <= ${MAX_APP_ID}, got ${appId}`
+    }
+  }
+
+  if (error) {
+    throw new Error(error + '. Read more in https://github.com/gnosis/dex-react/wiki/App-Ids-for-Forks')
+  }
+
+  return appId
+}
+
+function overrideEnvConfig(config) {
+  return {
+    ...config,
+    appId: getAppId(config),
+  }
+}
+
+module.exports = overrideEnvConfig

src/types/config.ts

@@ -57,6 +57,7 @@ export interface DisabledTokens {
 }
 
 export interface Config {
+  appId: number
   name: string
   logoPath: string
   templatePath: string

src/utils/flagCodes.ts

@@ -7,8 +7,19 @@ export interface Flag<T extends string> {
 }
 
 // OUR specific flags
+const FIXED_SENTINEL = 'dec0de'
+
 // lowercase hex value to be appended to tx.data
-const SENTINEL = 'dec0de'
+const SENTINEL =
+  FIXED_SENTINEL +
+  Number(CONFIG.appId)
+    .toString(16)
+    .padStart(2, '0')
+console.log('SENTINEL', SENTINEL)
+
+if (!/^[0-9a-f]+$/.test(SENTINEL)) {
+  throw new Error(`SENTINEL isn't valid. Expected lowercase hex value, got ${SENTINEL}`)
+}
 
 type DxFlagName = 'provider' | 'mobile' | 'browser' | 'screenSize'
 

test/config.spec.ts

@@ -6,8 +6,16 @@ import {
   ExchangeContractConfig,
 } from 'types/config'
 import { Network } from 'types'
+import { MAX_APP_ID } from 'const'
 
 describe('Test config defaults', () => {
+  it('appId', () => {
+    expect(CONFIG.appId).toEqual(expect.any(Number))
+    expect(Number.isInteger(CONFIG.appId)).toBe(true)
+    expect(CONFIG.appId).toBeGreaterThanOrEqual(1)
+    expect(CONFIG.appId).toBeLessThanOrEqual(MAX_APP_ID)
+  })
+
   it('name', () => {
     expect(CONFIG.name).toEqual('Gnosis Protocol Web')
   })

webpack.config.babel.js

@@ -10,14 +10,15 @@ import path from 'path'
 
 import dotenv from 'dotenv'
 import loadConfig from './src/loadConfig'
+import overrideEnvConfig from './src/overrideEnvConfig'
 
 // Setup env vars
 dotenv.config()
 
 const isProduction = process.env.NODE_ENV == 'production'
 
 const baseUrl = isProduction ? '' : '/'
-const config = loadConfig()
+const config = overrideEnvConfig(loadConfig())
 const { name: appName } = config
 
 module.exports = ({ stats = false } = {}) => ({