Mock data

package.json

@@ -31,14 +31,19 @@
     "styled-components": "^4.4.1",
     "subscriptions-transport-ws": "^0.9.16",
     "urql": "^1.6.3",
+    "wonka": "^4.0.7",
     "use-wallet": "^0.4.4"
   },
   "scripts": {
     "start": "npm run sync-assets && REACT_APP_BUILD=$(git log --pretty=format:'%h' -n 1) react-app-rewired start",
     "start:local": "REACT_APP_CHAIN_ID=1337 npm run start ",
+    "start:local:mock": "REACT_APP_MOCK_DATA=1 npm run start:local",
     "start:mainnet": "REACT_APP_CHAIN_ID=1 npm run start",
+    "start:mainnet:mock": "REACT_APP_MOCK_DATA=1 npm run start:mainnet",
     "start:ropsten": "REACT_APP_CHAIN_ID=3 npm run start",
+    "start:ropsten:mock": "REACT_APP_MOCK_DATA=1 npm run start:ropsten",
     "start:rinkeby": "REACT_APP_CHAIN_ID=4 npm run start",
+    "start:rinkeby:mock": "REACT_APP_MOCK_DATA=1 npm run start:rinkeby",
     "build": "./scripts/build.sh",
     "build:local": "REACT_APP_CHAIN_ID=1337 npm run build",
     "build:mainnet": "REACT_APP_CHAIN_ID=1 npm run build",

src/App.js

@@ -2,15 +2,15 @@ import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { Main, ToastHub } from '@aragon/ui'
 import theme from './theme-court'
+import AppLoader from './components/AppLoader'
+import GlobalErrorHandler from './components/GlobalErrorHandler'
 import MainView from './components/MainView'
+import OnboardingLoader from './components/OnboardingLoader'
+import Routes from './Routes'
 import { ActivityProvider } from './components/Activity/ActivityProvider'
 import { CourtClockProvider } from './providers/CourtClock'
 import { CourtConfigProvider } from './providers/CourtConfig'
 import { WalletProvider } from './providers/Wallet'
-import AppLoader from './components/AppLoader'
-import OnboardingLoader from './components/OnboardingLoader'
-import Routes from './Routes'
-import GlobalErrorHandler from './GlobalErrorHandler'
 
 function App() {
   return (

src/components/Dashboard/ANJLockedDistribution.js

@@ -95,7 +95,7 @@ function Row({ label, isLabelLink, amount, symbol, weight }) {
       )}
 
       <span>
-        {weight?.gt(1) && `${weight.toNumber()}x `} {amount} {symbol}
+        {weight > 1 && `${weight}x `} {amount} {symbol}
       </span>
     </div>
   )

src/components/Dashboard/Balance.js

@@ -279,8 +279,8 @@ function useHelpAttributes(distribution) {
     const { lockedPerDispute } = distribution
 
     const onlyOneDispute = lockedPerDispute.length === 1
-    const isJurorDraftedMultipleTimesSameDispute = lockedPerDispute.some(lock =>
-      lock.weight.gt(1)
+    const isJurorDraftedMultipleTimesSameDispute = lockedPerDispute.some(
+      lock => lock.weight > 1
     )
 
     let text

src/components/Disputes/DisputeActions.js

@@ -187,6 +187,7 @@ function InformationSection({
 }
 
 // Helper function that returns main attributes for the YourVoteInfo component
+// TODO: Contemplate final round cases (when a juror has voted, the ANJ amount is pre-slashed)
 const useInfoAttributes = ({
   hasJurorVoted,
   jurorDraft,

src/GlobalErrorHandler.js → src/components/GlobalErrorHandler.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { captureException, showReportDialog } from '@sentry/browser'
-import GenericError from './components/Errors/GenericError'
-import GlobalErrorScreen from './components/Errors/GlobalErrorScreen'
-import DisputeNotFoundError from './components/Disputes/DisputeNotFoundError'
+import GenericError from './Errors/GenericError'
+import GlobalErrorScreen from './Errors/GlobalErrorScreen'
+import DisputeNotFoundError from './Disputes/DisputeNotFoundError'
 
-import { DisputeNotFound } from './errors'
-import { sentryEnabled } from './sentry'
+import { DisputeNotFound } from '../errors'
+import { sentryEnabled } from '../sentry'
 
 class GlobalErrorHandler extends React.Component {
   static propTypes = {

src/environment.js

@@ -28,6 +28,9 @@ const ENV_VARS = {
   ENABLE_SENTRY() {
     return process.env.REACT_APP_ENABLE_SENTRY === '1'
   },
+  MOCK_DATA() {
+    return process.env.REACT_APP_MOCK_DATA === '1'
+  },
 }
 
 export default function env(name) {

src/exchanges.js

@@ -0,0 +1,30 @@
+import { fetchExchange, subscriptionExchange } from 'urql'
+import { SubscriptionClient } from 'subscriptions-transport-ws'
+
+import env from './environment'
+import endpoints from './endpoints'
+import { mockFetchExchange, mockSubscriptionExchange } from './mock/exchanges/'
+
+const DEFAULT_FETCH_EXCHANGE = fetchExchange
+const DEFAULT_SUBSCRIPTION_EXCHANGE = subscriptionExchange({
+  forwardSubscription: operation => subscriptionClient.request(operation),
+})
+const GRAPH_API_ENDPOINTS = endpoints()
+
+export const subscriptionClient = new SubscriptionClient(
+  GRAPH_API_ENDPOINTS[1],
+  {
+    reconnect: true,
+    reconnectionAttempts: 10,
+  }
+)
+
+export function getFetchExchange() {
+  return env('MOCK_DATA') ? mockFetchExchange : DEFAULT_FETCH_EXCHANGE
+}
+
+export function getSubscriptionExchange() {
+  return env('MOCK_DATA')
+    ? mockSubscriptionExchange
+    : DEFAULT_SUBSCRIPTION_EXCHANGE
+}

src/hooks/query-hooks.js

@@ -1,8 +1,11 @@
 import { useQuery } from 'urql'
 
+import {
+  ActiveJurors,
+  JurorFirstANJActivationMovement,
+} from '../queries/balances'
 import { JurorDrafts } from '../queries/jurorDrafts'
 import { JurorFeesClaimed } from '../queries/juror'
-import { ActiveJurors, FirstANJActivationMovement } from '../queries/balances'
 
 export function useJurorDraftQuery(jurorId) {
   const [result] = useQuery({
@@ -42,7 +45,7 @@ export function useJurorRewardsEverClaimedQuery(jurorId) {
 
 export function useFirstANJActivationQuery(jurorId, { pause = false }) {
   const [result] = useQuery({
-    query: FirstANJActivationMovement,
+    query: JurorFirstANJActivationMovement,
     variables: { id: jurorId.toLowerCase() },
     pause,
   })

src/hooks/subscription-hooks.js

@@ -1,38 +1,43 @@
 import { useMemo } from 'react'
 import { useSubscription } from 'urql'
+
+// queries
 import { OpenTasks } from '../queries/tasks'
+import { useCourtConfig } from '../providers/CourtConfig'
+import { AllDisputes, SingleDispute } from '../queries/disputes'
+import { AppealsByMaker, AppealsByTaker } from '../queries/appeals'
+import { JurorDraftsFrom, JurorDraftsNotRewarded } from '../queries/jurorDrafts'
 import {
   CourtConfig,
   FeeMovements,
   JurorsRegistryModule,
 } from '../queries/court'
-import { useCourtConfig } from '../providers/CourtConfig'
-import { SingleDispute, AllDisputes } from '../queries/disputes'
-import { AppealsByMaker, AppealsByTaker } from '../queries/appeals'
-import { ANJBalance, Juror, JurorTreasuryBalances } from '../queries/balances'
 import {
-  JurorDraftsNotRewarded,
-  CurrentTermJurorDrafts,
-} from '../queries/jurorDrafts'
-import { CourtModuleType } from '../types/court-module-types'
+  JurorANJBalances,
+  JurorANJWalletBalance,
+  JurorTreasuryBalances,
+} from '../queries/balances'
+
+// utils
 import { bigNum } from '../lib/math-utils'
 import { dayjs } from '../utils/date-utils'
 import { groupMovements } from '../utils/anj-movement-utils'
+import { CourtModuleType } from '../types/court-module-types'
 import { transformAppealDataAttributes } from '../utils/appeal-utils'
 import { transformDisputeDataAttributes } from '../utils/dispute-utils'
 import { transformJurorDataAttributes } from '../utils/juror-draft-utils'
+import { transformClaimedFeesDataAttributes } from '../utils/subscription-utils'
 import {
   getModuleAddress,
   transformCourtConfigDataAttributes,
 } from '../utils/court-utils'
-import { transformClaimedFeesDataAttributes } from '../utils/subscription-utils'
 
 const NO_AMOUNT = bigNum(0)
 
 // Subscription to get juror's wallet balance
 function useANJBalance(jurorId) {
   const [{ data, error }] = useSubscription({
-    query: ANJBalance,
+    query: JurorANJWalletBalance,
     variables: { id: jurorId.toLowerCase() },
   })
 
@@ -48,7 +53,7 @@ function useJuror(jurorId) {
     .unix()
 
   const [{ data, error }] = useSubscription({
-    query: Juror,
+    query: JurorANJBalances,
     variables: { id: jurorId.toLowerCase(), from: yesterday },
   })
 
@@ -203,7 +208,7 @@ export function useDisputesSubscription() {
 
   const disputes = useMemo(
     () =>
-      data && data.disputes
+      data?.disputes
         ? data.disputes.map(dispute =>
             transformDisputeDataAttributes(dispute, courtConfig)
           )
@@ -227,7 +232,7 @@ export function useCurrentTermJurorDraftsSubscription(
   pause
 ) {
   const [result] = useSubscription({
-    query: CurrentTermJurorDrafts,
+    query: JurorDraftsFrom,
     variables: { id: jurorId.toLowerCase(), from: termStartTime },
     pause,
   })

src/hooks/useCourtContracts.js

@@ -583,7 +583,11 @@ export function useTotalANTStakedPolling(timeout = 1000) {
     let timeoutId
 
     // Since we don't have the ANT contract address on the local environment we are skipping the stat
-    if (isLocalOrUnknownNetwork()) {
+    if (
+      isLocalOrUnknownNetwork() ||
+      !networkAgentAddress ||
+      !networkReserveAddress
+    ) {
       setError(true)
       return
     }
@@ -595,6 +599,7 @@ export function useTotalANTStakedPolling(timeout = 1000) {
       timeoutId = setTimeout(() => {
         const agentBalancePromise = antContract.balanceOf(networkAgentAddress)
         const vaultBalancePromise = antContract.balanceOf(networkReserveAddress)
+
         return Promise.all([agentBalancePromise, vaultBalancePromise])
           .then(([antInAgent, antInVault]) => {
             if (!cancelled) {

src/index.js

@@ -1,40 +1,38 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { captureMessage } from '@sentry/browser'
+import { devtoolsExchange } from '@urql/devtools'
+import { createGlobalStyle } from 'styled-components'
 import {
   createClient,
   Provider as UrqlProvider,
   cacheExchange,
   debugExchange,
-  fetchExchange,
-  subscriptionExchange,
 } from 'urql'
-import { SubscriptionClient } from 'subscriptions-transport-ws'
-import { captureMessage } from '@sentry/browser'
-import { devtoolsExchange } from '@urql/devtools'
-import { createGlobalStyle } from 'styled-components'
+
 import App from './App'
+
 import endpoints from './endpoints'
+import env from './environment'
+import {
+  getFetchExchange,
+  getSubscriptionExchange,
+  subscriptionClient,
+} from './exchanges'
 import initializeSentry from './sentry'
 
 initializeSentry()
 
-const [GRAPH_API_ENDPOINT_HTTP, GRAPH_API_ENDPOINT_WS] = endpoints()
-
-const subscriptionClient = new SubscriptionClient(GRAPH_API_ENDPOINT_WS, {
-  reconnect: true,
-  reconnectionAttempts: 10,
-})
+const [GRAPH_API_ENDPOINT_HTTP] = endpoints()
 
 const client = createClient({
   url: GRAPH_API_ENDPOINT_HTTP,
   exchanges: [
     debugExchange,
     devtoolsExchange,
     cacheExchange,
-    fetchExchange,
-    subscriptionExchange({
-      forwardSubscription: operation => subscriptionClient.request(operation),
-    }),
+    getFetchExchange(),
+    getSubscriptionExchange(),
   ],
 })
 
@@ -43,6 +41,10 @@ subscriptionClient.onConnected(() => (connectionAttempts = 0))
 
 // Check for connection errors and if reaches max attempts send error log to Sentry
 subscriptionClient.onError(err => {
+  if (env('MOCK_DATA')) {
+    return
+  }
+
   const maxReconnectionAttempts = subscriptionClient.reconnectionAttempts
 
   if (maxReconnectionAttempts === ++connectionAttempts) {