Version: V1

Front-End Implementation

Introduction#

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

React for the interface,
Apollo Client for querying information,
and yarn.

Step 1: 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.js as 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 that 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: '0xdeFA4e8a7bcBA345F687a2f1456F5Edd9CE97202',
  },
});

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: '0xdeFA4e8a7bcBA345F687a2f1456F5Edd9CE97202',
    },
  });

  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 to build complex interesting tools! We'd be happy to see you build on top of this.