JSFiddle - React, Tailwind, and code Playground

by Zatcepin

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/[email protected]"></script>

<!-- App -->
<div id="app">
  <h1>Explore Sanbase Demo</h1>
  <div>
    <div id="result" class="loading">Loading...     </div>
  </div>
</div>

CSS

body {
  font-family: sans-serif;
  margin: 0;
  background: #f0f0f0;
}

#app {
  padding: 24px;
  max-width: 400px;
  margin: auto;
}

h1 {
  text-align: center;
  font-weight: normal;
  font-size: 18px;
}

article {
  background: white;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 2px;
}

.loading {
  text-align: center;
  color: #777;
}

.title {
  text-transform: uppercase;
}

.author {
  color: #777;
}

JavaScript

console.clear()

const client = new Apollo.lib.ApolloClient({
  networkInterface: Apollo.lib.createNetworkInterface({
    uri: 'https://api.santiment.net/graphql',
    transportBatching: true,
  }),
  connectToDevTools: true,
})

const QUERY = Apollo.gql`
{
  allProjects {
    name
    ethBalance
  }
}
`

client.query({ query: QUERY}).then(result => {
	const balance = result.data.allProjects.reduce((acc, val) => {
    return acc = +val.ethBalance + acc
  }, 0)
  resultEl = document.querySelector('#result')
	resultEl.innerHTML = "All Projects ETH Balance " + balance.toFixed(2)
})