Gorilla Funds. The race is on…

Funds easily accessible for everyone. That’s our mission.

Sometimes in life a tiny little thing happens — a little click — and then the path to the future is suddenly different.

For me that “click” was the article “Graphing the melon protocol” — published in September. You can read it here:

I read it, I played around with it…

…and immediately I knew that I would have to get my hands dirty. Could it really be so damn easy? Yes! The Graph is amazing; it’s the perfect tool to query data about the Funds on the Melon Network. In my opinion, this is the point that people will look back on in the future and say:

This is where the race began.

What race? The race to the best UI for the Melon Network. If the crypto-economy grows as I expect it will, there will be no bank, no broker or any other financial service provider without a crypto fund on its website. Managed by the bank, or a fund manager, but living on the Melon Network. Why? Because it is possible and reasonable.

Why reasonable?

Some days ago, I read an article about tokenized real estate available on Uniswap, Neufund is already making tokenized securities a reality and one stable-coin after another pops up. And now, derivatives are available through platforms such as Synthetix. What does all this mean? Essentially, in the near future a crypto fund will be able to hold real estate, securities, crypto, derivatives, fiat money (via stable-coins) and, and, and… the list is constantly expanding. How cool is that? And, here’s the key, all at a much lower cost than is possible today. And that’s why it is reasonable.

I hope to accelerate this race, by showing how I am building Gorilla Funds, step by step in a blog-series. I said: It was damn easy. And in principle it is… so let’s get started:

PART ONE: Querying the Graph-Protocol and making first contact with Gatsby..

When you want to build a UI for the Melon-Network, such as Gorilla Funds, you first need the data. What funds exist, how much assets under management do they have, what is the performance of the funds, which assets do they hold and so on. Before “The Graph” you had to use the Ethereum Javascript API, to extract the data, but now it is much easier. All you need is the Graph-QL Endpoint of the Melon subgraph built by Avantgarde Finance.

And here it is:

https://api.thegraph.com/subgraphs/name/melonproject/melon

But how does it work?

Let’s give it a try. Open a terminal and type:

curl -X POST\
 -H “Content-Type: application/json”\
 --data ‘{ “query”: “{ funds { name } }”}’\ https://api.thegraph.com/subgraphs/name/melonproject/melon

and you get the names of all the funds on the melon-network. It’s like querying a database, really cool, isn’t it?

But with Gatsby we can get it a lot easier. If you don’t know Gatsby, here it is:

GatsbyJS

What is Gatsby? Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps and the best: Gatsbys Data Layer is powered by GraphQL. You can pull your data easily in your App from a GraphQL-Endpoint, so it’s a perfect fit for our usecase.

If you want to build with me, the first steps, are to visit this tutorial site and make sure your development environment is ready to go.

Install the first starter:

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Navigate to the hello-world directory:

cd hello-world

type

gatsby develop

and hit enter. Open your browser and open http://localhost:8000 and you will see your first gatsby-site. Now open: http://localhost:8000/__graphql and you see the included GraphQL-Explorer. It would be really cool to query the Melon Network with this GraphQL-Explorer, wouldn’t it? O-K — no problem. We just need to add the Endpoint somehow. And how? Really easy, because Gatsby has a plugin for that. So…

…go to your hello-world directory. Stop the development-server with “Ctrl+C” and type:

yarn add gatsby-source-graphql

Open now the file gatsby-config.js in the hello-world-directory and change your gatsby-config.js in the hello-world-directory to:

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */
const api_mainnet = "https://api.thegraph.com/subgraphs/name/melonproject/melon"
const api_kovan = "https://api.thegraph.com/subgraphs/name/melonproject/melon-kovan"
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-graphql",
      options: {
      typeName: 'MELON',
      fieldName: 'melon',
      url: `${api_mainnet}`,
      //url: `${api_kovan}`,
      },
    },
  ]
}

Run again:

gatsby-develop

and visit http://localhost:8000/__graphql

Take a look on the left: Do you see Melon? ;-).

and now the Query from the beginning in the Graph-QL-Explorer:

Happy playing.

To be honest, I can spend a whole afternoon just playing with the results.

Just amazing — and the end of PART ONE.

In the next part, I’ll show you how to automatically create fund-pages for all funds on the Melon-Network, with all the necessary data.