This is part three in my series of blog posts about building Gorilla Funds. You can read Part One on querying the graph-protocol and making first contact with Gatsby here. Part Two sets out an easy-to-follow example of how to build fund pages in principle. In this post, I will show you how to build a page listing these funds-, how to link them and how to add a touch of CSS-Style.

If you want to run the example or experiment a little bit with it, just clone it from github… navigate into the folder, run

yarn install && gatsby develop

and then open localhost:8000/fundlistpage

PART THREE:

Let’s begin:

To create a page that lists all the funds (here 10), just add a file named fundlistpage.js to the /pages folder in the /src directory and add the following code.

As in the previous example we pull the data with Graph-QL from the API-Endpoint and can now use the results to show them on the site. Open the Graph-QL Explorer and use the query from the file above and you can see the structure of the response, which makes it easy to code the correct loop. In the file you might notice that I use several components. (If you want to know more about gatsby — here is the tutorial). First, I use my StaticSite-Component, shown below:

StaticSite.jsx

And second and third I use the components FundList and FundListItem.

FundList.jsx

FundListItem.jsx

The StaticSite-Component includes a Header, a Menu, a Content and a Footer as usual. All of these are themselves components, each defined in a file in the /components folder.

Here they are: First the Header-Component:

Header.jsx

In this file you can spot something new. In a component you can use a StaticQuery to pull the data into it. In this file for example I pull the title into the header. In the footer I do this in the same way. But where does it come from? You have to define it in your gatsby-config.js as shown below. On the top of the file, you find the siteMetadata. When the site is running you can always look them up via the Graph-QL-Explorer.

The new gatsby-config.js file:

The Menu component:

Menu.jsx

The Content component:

Content.jsx

The Footer component:

Footer.jsx

If you copy all the files in the right folder — components into the /components folder in the /src directory, the new fundlistpage.jsx into the /pages folder and the new gatsby-config.js in the root folder of your project just run:

gatsby develop

… OK OK, it’s all there but it’s not styled yet. But styling is the easy bit:

Create a gatsby-browser.js file in the root-directory of your project and add the following line:

import “./src/styles/global.css”

Now create a folder /style in the / src — folder and add a global.css file. (CSS in JS is possible as well. Just visit the tutorial for more information).

Add the following content:

Run again

gatsby develop

and it should show a basic design.

Nice, isn’t it? I hope it was easy to follow and I wish you all “Happy Coding”, “Merry Christmas” and “A Happy New Year”.

By the way, did you notice, that all that’s necesarry for a front-end to enable invest and redeem in the funds are two buttons and a little bit of logic to interact with the Melon Protocol? I am always amazed where this will all lead and how quickly we can get there.

And…

did you see that Ash just published an open interface for mobile and web. Just Wow.

2020 will be amazing.

That was Part Three of this little tutorial. In Part Four I will explain how to connect to the Ethereum-Network via Web3.