Blockscout: Add new pages "Apps"/"Stakes" for POSDAO network

[pashagonchar]

Menu icons:
https://zpl.io/bLPD5n7

Main page:
https://zpl.io/V4Ol5MX

Validators tab:
https://zpl.io/aR1Pxne

Stake modal window:
https://zpl.io/29Oyw7W

Stake more modal window:
https://zpl.io/2GyOGDd

Stake (user not signed) modal window:
https://zpl.io/2jQw7Zx

Withdraw modal window:
https://zpl.io/aNPoDQZ

Move stake modal window:
https://zpl.io/bWqLjxn
https://zpl.io/25OrpB3

Active pools tab:
https://zpl.io/bABEl18

Active pools tab, user not signed:
https://zpl.io/bWqLX3M

Inactive pools tab:
https://zpl.io/V4Ol5pz

---

You can leave your comment here: https://invis.io/YPQNPDTW4ZB

[gabitoesmiapodo]

Hi guys, could you grant me permission to start working on this repository?

Maybe @igorbarinov ?

[igorbarinov]

@gabitoesmiapodo I've added you to the explorer team

[gabitoesmiapodo]

Thank you.

[gabitoesmiapodo]

@igorbarinov is there some work already done for the POSDAO network, or should I add the new styles and sections on a new development branch with some static / mock content, for somebody to add some logic to it later?

(I'm not sure if it's you who I should be asking these questions, if there's somebody else available please let me know).

[acravenho]

@gabitoesmiapodo Yes, please add this to a separate branch and we can have someone take a look at it for the logic.

[gabitoesmiapodo]

@acravenho

I finally got the Blockscout running locally.

Is there a preferred approach, or a guide to implement a theme for a new network (POSDAO in this case)?

I see the new designs implement not only color and icon changes, but also some layout modifications, new sections, etc., so there might be some changes affecting other networks too.

[acravenho]

@gabitoesmiapodo There is no infrastructure setup currently to make structural changes that will not affect the entire application. However, we can enable features through configuration settings and environment variables for chain specific features. We do this currently with the xdai chain.

I would add the changes to the current infrastructure and then we can enable them with an environment variable POSDAO = true.

[gabitoesmiapodo]

@acravenho

Just to clarify: so there's no way to change a theme dinamically? Each themed version is a different instance built and deployed for each network?

If that's the case, I asume I should just make all the necessary modifications to existing layout(s), add new icons and SCSS, and then the remaining issues will be solved when building and deploying the new / updated instances.

Sorry for all the questions, BTW.

[acravenho]

@gabitoesmiapodo

Just to clarify: so there's no way to change a theme dinamically? Each themed version is a different instance built and deployed for each network?

That's correct, each chain is built separately so there is a bit of customization that can be done here.

Let's make the changes to SCSS by adding a new POSDAO theme and including all assets that will be needed by the new dynamic theme.

[gabitoesmiapodo]

@acravenho

I'm not able tu update the theme's colors.

This is all I could get for now.

I can change the logo (in this case I'm using the POA logo, but I have the POSDAO logo available too), and I can connect to ganache, display transactions, etc.

But if I do this on theme/variables:

```
// @import "neutral_variables";
@import "dai_variables";
@import "theme/base_variables";
````

... nothing happens. I see some changes on the console logs, but nothing reflects on the browser, even if I update manually.

Is there something I'm missing?

[acravenho]

@gabitoesmiapodo I believe you're missing the _ before dai_variables.

[varasev]

@pashagonchar I left my comments in https://invis.io/YPQNPDTW4ZB - some pages need to be supplemented with a few UI elements and we also need to have a few extra layouts (see my comments for all of those pages).

[gabitoesmiapodo]

@acravenho

It seems that wasn't the problem (the underscore is not needed for this type of @import).

I finally got it working by stopping the server, deleting all the files in the blockscout/apps/block_scout_web/priv/static/css/ folder, and by doing mix phx.server again.

I don't know why that fixed the problem, but It updates everything correctly on every file save now.

@varasev

If there are new designs needed, I think @pashagonchar will address that, and update the Zeplin files.

[saneery]

@gabitoesmiapodo could you check your updates that relates to this PR#1853? After merging master into production-posdao there seems color schema is broken

[vbaranov]

@saneery

you should remove import "neutral_variables" from

https://github.com/poanetwork/blockscout/blob/production-posdao/apps/block_scout_web/assets/css/theme/_variables.scss#L2

[saneery]

@vbaranov
Thanks!
Should I add this change to my PR#2106?

[maxgrapps]

@vbaranov
Thanks!
Should I add this change to my PR#2106?

To use variables for xdai, you should connect dai_variables instead of posdao_variables

[vbaranov]

Should I add this change to my PR#2106?

yes, please

[maxgrapps]

@vbaranov
Thanks!
Should I add this change to my PR#2106?

@saneery And we should use dai_logo.svg logo there

[vbaranov]

@maxgrapps if we don't need to use posdao_variables and posdao logo, please add a PR to remove those obsolete assets from master