Leaderboard app with query

packages/web/env-config.js.template

@@ -9,7 +9,7 @@ const environments = {
       projectId: 'celo-faucet',
     },
     LEADERBOARD: {
-      uri: "http://localhost:8080/v1/graphql",
+      uri: "http://localhost:4000/graphiql",
       pageLength: 5
     },
     V3: true,

packages/web/src/dev/Cover.tsx

@@ -3,13 +3,13 @@ import LazyLoad from 'react-lazyload'
 import { Image, StyleSheet, Text, View } from 'react-native'
 import Fade from 'react-reveal/Fade'
 import Transceive from 'src/dev/Transceive'
-// import LeaderBoardApp from './LeaderBoardApp'
 import { H2, H3, H4 } from 'src/fonts/Fonts'
 import { I18nProps, Trans, withNamespaces } from 'src/i18n'
 import { Cell, GridRow, Spans } from 'src/layout/GridRow'
 import Button, { BTN, SIZE } from 'src/shared/Button.3'
 import { HEADER_HEIGHT } from 'src/shared/Styles'
 import { colors, fonts, standardStyles, textStyles } from 'src/styles'
+import LeaderBoardApp from './LeaderBoardApp'
 const DELAY = 100
 const DURATION = 400
 

packages/web/src/dev/LeaderBoard.tsx

@@ -41,7 +41,6 @@ class LeaderBoard extends React.PureComponent<BoardProps & I18nProps, State> {
     const { pageLength } = getConfig().publicRuntimeConfig.LEADERBOARD
     const showExpandButton = this.props.leaders.length >= (page + 1) * pageLength
     const sortedLeaders = this.props.leaders.sort(sorter).slice(0, pageLength * (page + 1))
-
     const maxPoints = round(sortedLeaders[0].points * 1.1, 100)
     const width = this.state.width
     return (
@@ -95,10 +94,11 @@ function sorter(alpha: Competitor, bravo: Competitor) {
   return -1
 }
 
-const PORTIONS = 8
+const Portions = 8
 
 function Axis({ max }: { max: number }) {
-  const portion = max / PORTIONS
+  const scaled_max = max / Math.pow(10, 20)
+  const portion = scaled_max / Portions
 
   return (
     <View style={[standardStyles.row, styles.xaxis]}>
@@ -113,7 +113,7 @@ function Axis({ max }: { max: number }) {
           )
         })}
       <Text key={max} style={[fonts.small, textStyles.invert]}>
-        {max}
+        {round(scaled_max)}
       </Text>
     </View>
   )

packages/web/src/dev/LeaderBoardApp.tsx

@@ -20,15 +20,12 @@ const createApolloClient = () => {
   })
 }
 
-// TODO (@diminator): change once leaderboard endpoint is ready
 const query = gql`
   query AddresessOrderedByBalance {
-    addresses(
-      where: { fetched_coin_balance: { _gt: "0" } }
-      order_by: { fetched_coin_balance: desc }
-    ) {
-      fetched_coin_balance
-      hash
+    leaderboard {
+      points
+      address
+      identity
     }
   }
 `
@@ -45,11 +42,10 @@ class LeaderBoardApp extends React.PureComponent<I18nProps> {
             if (error) {
               return <LeaderBoardError error={error} />
             }
-            // TODO (@diminator): change once leaderboard endpoint is ready
-            const LEADERS = data.addresses.map((account) => {
+            const LEADERS = data.leaderboard.map((account) => {
               return {
-                identity: account.hash,
-                points: account.fetched_coin_balance,
+                identity: account.identity,
+                points: account.points,
               }
             })
             return <LeaderBoard leaders={LEADERS} />

packages/web/static/locales/en/dev.json

@@ -4,7 +4,6 @@
     "We're looking for node operators and admins who can help develop the Celo menu. Spin up a validator or full node, build operational experience, and help the community prepare for opening night.",
   "aboutTheChallengeButton": "Get Involved",
   "expandLeaderboard": "Expand Leaderboard",
-
   "makeWithCelo": "Build Celo",
   "makeWithCeloSubtitle": "Get a taste of Baklava, Celo’s incentivized testnet",
   "greatStakeOff": "The Great Celo\nStake Off",