Skip to main content
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 KyberSwap Subgraph. For the purpose of this guide, we'll be using

Step 1: Install#

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

yarn create react-app kyberswap-demo
cd kyberswap-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 KyberSwap 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 KyberSwap, 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 KyberSwap 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.