Skip to main content

Front-End Implementation

Introduction#

This guide will go through a simple and quick example to create a web interface and fetch & display data from Kyber DMM Subgraph. For the purpose of this guide we'll be using

Step1: Install#

To get started, navigate to the root location in your terminal and run:

yarn create react-app DMM-demo
cd DMM-demo

Next, add the required dependencies.

yarn add apollo-client apollo-cache-inmemory apollo-link-http graphql graphql-tag @apollo/react-hooks
yarn start

Once you run this on the command line you should see the default React app running on your browser. Open src -> App.js in a text editor(VStudio/ATOM) and replace the contents with the script below.

import React from 'react'
import './App.css'
function App() {
return <div></div>
}
export default App

Now, we have the skeleton ready, let's add on some flesh and body to it!

Step 2: setup Middleware (Graphql Client)#

In order to make requests to the DMM subgraph and fetch data, we’ll have to set up a middleware using Apollo to create a graphql client.

To do so,in the App.js file import and instantiate a new client instance, as shown below:

import React from "react"
import "./App.css"
import { ApolloClient } from "apollo-client"
import { InMemoryCache } from "apollo-cache-inmemory"
import { HttpLink } from "apollo-link-http"
export const client = new ApolloClient({
link: new HttpLink({
uri: "https://api.thegraph.com/subgraphs/dynamic-amm/dynamic-amm"
}),
cache: new InMemoryCache(),
})
function App() {
return <div></div>
}
export default App

For Apollo, to be able to handle requests, import providers and wrap the root in it. Which means, we will have to add content to index.jsas below:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import './index.css'
import { ApolloProvider } from 'react-apollo'
import { client } from './App'
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('root')
)
registerServiceWorker()

Step 3 : Construct Queries & Fetch Data#

For this example, let’s fetch some data about the KNC token on DMM, like the current price, and total liquidity across all pools. You can check out the Entities for all the fields and descriptions about each. Import gql into app.js to parse a query string into the GraphQL AST standard.

import gql from 'graphql-tag'
const KNC_QUERY = gql`
query tokens($tokenAddress: Bytes!) {
tokens(where: { id: $tokenAddress }) {
derivedETH
totalLiquidity
}
}
  • Fetch data

Now we have the query ready, plugin useQuery hook which uses our client instance to fetch data.

import { useQuery } from '@apollo/react-hooks'
const { loading: kncLoading, error: kncError, data: kncData } = useQuery(KNC_QUERY, {
variables: {
//passing in KNC address
tokenAddress: '0xdd974d5c2e2928dea5f71b9825b8b646686bd200'
}
})

Step 4: Output Layout#

Each query will return an object. We will have to parse the object to retrieve the data we need. The returned object will be an array of results, since we are looking at a single entity, 0 will be the array index.To parse the responses, add the following to App.js:

const kncPriceInEth = kncData && kncData.tokens[0].derivedETH
const kncTotalLiquidity = kncData && kncData.tokens[0].totalLiquidity

Finally, we can use the parsed response data to populate onto the UI. Add the following to the return function of App.js file:

return (
<div>
<div>
Knc price:{' '}
{ethLoading || kncLoading
? 'Loading token data...'
:// parse responses as floats and fix to 2 decimals
parseFloat(kncPriceInEth).toFixed(2)}
</div>
<div>
Knc total liquidity:{' '}
{kncLoading
? 'Loading token data...'
: // display the total amount of KNC spread across all pools
parseFloat(kncTotalLiquidity).toFixed(0)}
</div>
</div>
)

Full example code#

Your App.js file should look something like this:

import React, { useEffect } from 'react'
import './App.css'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import { useQuery } from '@apollo/react-hooks'
import gql from 'graphql-tag'
export const client = new ApolloClient({
link: new HttpLink({
uri: 'https://api.thegraph.com/subgraphs/dynamic-amm/dynamic-amm'
}),
fetchOptions: {
mode: 'no-cors'
},
cache: new InMemoryCache()
})
const KNC_QUERY = gql`
query tokens($tokenAddress: Bytes!) {
tokens(where: { id: $tokenAddress }) {
derivedETH
totalLiquidity
}
}
`
function App() {
const { loading: kncLoading, error: kncError,data: kncData } = useQuery(KNC_QUERY, {
variables: {
tokenAddress: '0xdd974d5c2e2928dea5f71b9825b8b646686bd200'
}
})
const kncPriceInEth = kncData && kncData.tokens[0].derivedETH
const kncTotalLiquidity = kncData && kncData.tokens[0].totalLiquidity
return (
<div>
<div>
knc price:{' '}
{ kncLoading
? 'Loading token data...'
: // parse responses as floats and fix to 2 decimals
parseFloat(kncPriceInEth).toFixed(2)}
</div>
<div>
Knc total liquidity:{' '}
{kncLoading
? 'Loading token data...'
: // display the total amount of KNC spread across all pools
parseFloat(kncTotalLiquidity).toFixed(0)}
</div>
</div>
)
}
export default App

This is a basic example which fetches and displays 2 values about KNC token from the DMM subgraph. There’s a lot more to explore and build complex interesting tools! We'd be happy to see you build on top of this.