Pre mock data

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 './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/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/graphql-exchanges.js

@@ -0,0 +1,37 @@
+import { fetchExchange, subscriptionExchange } from 'urql'
+import { SubscriptionClient } from 'subscriptions-transport-ws'
+import { captureMessage } from '@sentry/browser'
+import endpoints from './endpoints'
+
+const GRAPH_API_ENDPOINTS = endpoints()
+const subscriptionClient = new SubscriptionClient(GRAPH_API_ENDPOINTS[1], {
+  reconnect: true,
+  reconnectionAttempts: 10,
+})
+
+// Default exchanges
+const DEFAULT_FETCH_EXCHANGE = fetchExchange
+const DEFAULT_SUBSCRIPTION_EXCHANGE = subscriptionExchange({
+  forwardSubscription: operation => subscriptionClient.request(operation),
+})
+
+export function getFetchExchange() {
+  return DEFAULT_FETCH_EXCHANGE
+}
+
+export function getSubscriptionExchange() {
+  return DEFAULT_SUBSCRIPTION_EXCHANGE
+}
+
+let connectionAttempts = 0
+subscriptionClient.onConnected(() => (connectionAttempts = 0))
+
+// Check for connection errors and if reaches max attempts send error log to Sentry
+subscriptionClient.onError(err => {
+  const maxReconnectionAttempts = subscriptionClient.reconnectionAttempts
+
+  if (maxReconnectionAttempts === ++connectionAttempts) {
+    captureMessage(`Connection error, could not connect to ${err.target.url}`)
+  }
+  console.log('Retrying connection...')
+})

src/hooks/query-hooks.js

@@ -1,8 +1,8 @@
 import { useQuery } from 'urql'
 
+import { JurorFirstANJActivationMovement } from '../queries/balances'
+import { ActiveJurors, JurorFeesClaimed } from '../queries/juror'
 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 +42,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,45 @@
 import { useMemo } from 'react'
 import { useSubscription } from 'urql'
+import { useCourtConfig } from '../providers/CourtConfig'
+
+// queries
 import { OpenTasks } from '../queries/tasks'
 import {
   CourtConfig,
   FeeMovements,
   JurorsRegistryModule,
 } from '../queries/court'
-import { useCourtConfig } from '../providers/CourtConfig'
-import { SingleDispute, AllDisputes } from '../queries/disputes'
+import { AllDisputes, SingleDispute } 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'
+import { JurorDraftsFrom, JurorDraftsNotRewarded } from '../queries/jurorDrafts'
+
+// utils
 import { bigNum } from '../lib/math-utils'
 import { dayjs } from '../utils/date-utils'
 import { groupMovements } from '../utils/anj-movement-utils'
 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'
+
+// types
+import { CourtModuleType } from '../types/court-module-types'
 
 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 +55,7 @@ function useJuror(jurorId) {
     .unix()
 
   const [{ data, error }] = useSubscription({
-    query: Juror,
+    query: JurorANJBalances,
     variables: { id: jurorId.toLowerCase(), from: yesterday },
   })
 
@@ -203,7 +210,7 @@ export function useDisputesSubscription() {
 
   const disputes = useMemo(
     () =>
-      data && data.disputes
+      data?.disputes
         ? data.disputes.map(dispute =>
             transformDisputeDataAttributes(dispute, courtConfig)
           )
@@ -227,7 +234,7 @@ export function useCurrentTermJurorDraftsSubscription(
   pause
 ) {
   const [result] = useSubscription({
-    query: CurrentTermJurorDrafts,
+    query: JurorDraftsFrom,
     variables: { id: jurorId.toLowerCase(), from: termStartTime },
     pause,
   })

src/index.js

@@ -5,11 +5,9 @@ import {
   Provider as UrqlProvider,
   cacheExchange,
   debugExchange,
-  fetchExchange,
-  subscriptionExchange,
 } from 'urql'
-import { SubscriptionClient } from 'subscriptions-transport-ws'
-import { captureMessage } from '@sentry/browser'
+import { getFetchExchange, getSubscriptionExchange } from './graphql-exchanges'
+
 import { devtoolsExchange } from '@urql/devtools'
 import { createGlobalStyle } from 'styled-components'
 import App from './App'
@@ -18,39 +16,19 @@ 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(),
   ],
 })
 
-let connectionAttempts = 0
-subscriptionClient.onConnected(() => (connectionAttempts = 0))
-
-// Check for connection errors and if reaches max attempts send error log to Sentry
-subscriptionClient.onError(err => {
-  const maxReconnectionAttempts = subscriptionClient.reconnectionAttempts
-
-  if (maxReconnectionAttempts === ++connectionAttempts) {
-    captureMessage(`Connection error, could not connect to ${err.target.url}`)
-  }
-  console.log('Retrying connection...')
-})
-
 const GlobalStyle = createGlobalStyle`
   body img {
     user-select:none;

src/queries/appeals.js

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
 export const AppealsByMaker = gql`
-  subscription($maker: Bytes!, $settled: Boolean!) {
+  subscription AppealsByMaker($maker: Bytes!, $settled: Boolean!) {
     appeals(where: { maker: $maker, settled: $settled }) {
       id
       round {
@@ -27,7 +27,7 @@ export const AppealsByMaker = gql`
 `
 
 export const AppealsByTaker = gql`
-  subscription($taker: Bytes!, $settled: Boolean!) {
+  subscription AppealsByTaker($taker: Bytes!, $settled: Boolean!) {
     appeals(where: { taker: $taker, settled: $settled }) {
       id
       round {

src/queries/balances.js

@@ -1,15 +1,15 @@
 import gql from 'graphql-tag'
 
-export const ANJBalance = gql`
-  subscription ANJBalance($id: ID!) {
+export const JurorANJWalletBalance = gql`
+  subscription JurorANJWalletBalance($id: ID!) {
     anjbalance(id: $id) {
       amount
     }
   }
 `
 
-export const Juror = gql`
-  subscription Juror($id: ID!, $from: BigInt!) {
+export const JurorANJBalances = gql`
+  subscription JurorANJBalances($id: ID!, $from: BigInt!) {
     juror(id: $id) {
       activeBalance
       lockedBalance
@@ -47,8 +47,8 @@ export const JurorTreasuryBalances = gql`
   }
 `
 
-export const FirstANJActivationMovement = gql`
-  query Juror($id: ID!) {
+export const JurorFirstANJActivationMovement = gql`
+  query JurorFirstANJActivationMovement($id: ID!) {
     juror(id: $id) {
       anjMovements(
         where: { type: "Activation" }
@@ -64,10 +64,3 @@ export const FirstANJActivationMovement = gql`
     }
   }
 `
-export const ActiveJurors = gql`
-  query Jurors {
-    jurors(first: 1000, where: { activeBalance_gt: 0 }) {
-      id
-    }
-  }
-`

src/queries/disputes.js

@@ -4,54 +4,34 @@ export const AllDisputes = gql`
   subscription AllDisputes($limit: Int) {
     disputes(first: $limit, orderBy: createdAt, orderDirection: desc) {
       id
-      txHash
-      createTermId
-      possibleRulings
       finalRuling
       lastRoundId
       state
       metadata
-      createdAt
       rounds {
         id
         state
         number
         draftTermId
-        jurorsNumber
-        settledPenalties
-        jurorFees
         delayedTerms
-        selectedJurors
-        coherentJurors
-        collectedTokens
-        createdAt
         jurors {
           juror {
             id
           }
           commitment
           outcome
         }
-        vote {
-          id
-          winningOutcome
-        }
+
         appeal {
           id
-          maker
-          appealedRuling
-          taker
-          opposedRuling
-          settled
-          createdAt
         }
       }
     }
   }
 `
 
 export const SingleDispute = gql`
-  subscription Dispute($id: ID!) {
+  subscription SingleDispute($id: ID!) {
     dispute(id: $id) {
       id
       txHash

src/queries/juror.js

@@ -8,3 +8,11 @@ export const JurorFeesClaimed = gql`
     }
   }
 `
+
+export const ActiveJurors = gql`
+  query ActiveJurors {
+    jurors(first: 1000, where: { activeBalance_gt: 0 }) {
+      id
+    }
+  }
+`