Home page style

DAppBoard · Dec 29, 2018 · 98446a0 · 98446a0
1 parent 2dc2064
commit 98446a0
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 32 deletions.
diff --git a/api/controllers/main/PageController.js b/api/controllers/main/PageController.js
@@ -1,13 +1,18 @@
 module.exports = {
 
  index: async function(req, res) {
- var tokens = await sails.helpers.tokens.listSummaryTop.with({});
+ var tokens = await sails.helpers.tokens.listSummaryTop.with({type: "token"});
+ var nfts = await sails.helpers.tokens.listSummaryTop.with({type: "nft"});
+ var stables = await sails.helpers.tokens.listSummaryTop.with({type: "stable"});
  console.log(tokens)
  return (res.view('pages/homepage', {
  main: {
  nav: 'home',
  },
  tokens: tokens,
+ nfts: nfts,
+ stables: stables,
+
  }));
  },
 

diff --git a/api/helpers/tokens/list-summary-top.js b/api/helpers/tokens/list-summary-top.js
@@ -4,32 +4,59 @@ module.exports = {
  description: 'Return the list of the tokens.',
 
  inputs: {
+ 'type': {
+ type: 'string',
+ example: 'name',
+ description: 'The nquery to execute.',
+ required: false,
+ defaultsTo: 'token',
+ },
  },
 
  fn: async function(inputs, exits) {
  var knex = await sails.helpers.db.getknex();
  var base = knex.select('*').from('token_transfers_summary');
- var addresses = [
- '9f8f72aa9304c8b593d555f12ef6589cc3a579a2'.toLowerCase(), // Maker
- 'a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'.toLowerCase(), // USDCoin
- 'd26114cd6EE289AccF82350c8d8487fedB8A0C07'.toLowerCase(), // OMG
- 'e41d2489571d322189246dafa5ebde1f4699f498'.toLowerCase(), // ZRX
- '0d8775f648430679a709e98d2b0cb6250d2887ef'.toLowerCase(), // BAT
- '05f4a42e251f2d52b8ed15e9fedaacfcef1fad27'.toLowerCase(), // Ziliqa
- '1985365e9f78359a9B6AD760e32412f4a445E862'.toLowerCase(), // REP
- 'b63b606ac810a52cca15e44bb630fd42d8d1d83d'.toLowerCase(), // MCO
- '89d24a6b4ccb1b6faa2625fe562bdd9a23260359'.toLowerCase(), // DAI
- 'a74476443119A942dE498590Fe1f2454d7D4aC0d'.toLowerCase(), // GOLEM
- '1f573d6fb3f13d689ff844b4ce37794d79a7ff1c'.toLowerCase(), // Bancor
- 'f629cbd94d3791c9250152bd8dfbdf380e2a3b9c'.toLowerCase(), // ENJIN
- 'ef68e7c694f40c8202821edf525de3782458639f'.toLowerCase(), // Loopring
- '41e5560054824ea6b0732e656e3ad64e20e94e45'.toLowerCase(), // Civic
- 'b64ef51c888972c908cfacf59b47c1afbc0ab8ac'.toLowerCase(), // Storj
- '08711d3b02c8758f2fb3ab4e80228418a7f8e39c'.toLowerCase(), // Edgeless
- '960b236A07cf122663c4303350609A66A7B288C0'.toLowerCase(), // Aragon
- '6810e776880c02933d47db1b9fc05908e5386b96'.toLowerCase(), // Gnosis
- 'B97048628DB6B661D4C2aA833e95Dbe1A905B280'.toLowerCase() // TENX
- ];
+ var addresses = [];
+ if (inputs.type == "token") {
+ addresses = [
+ '9f8f72aa9304c8b593d555f12ef6589cc3a579a2'.toLowerCase(), // Maker
+ 'd26114cd6EE289AccF82350c8d8487fedB8A0C07'.toLowerCase(), // OMG
+ 'e41d2489571d322189246dafa5ebde1f4699f498'.toLowerCase(), // ZRX
+ '0d8775f648430679a709e98d2b0cb6250d2887ef'.toLowerCase(), // BAT
+ '05f4a42e251f2d52b8ed15e9fedaacfcef1fad27'.toLowerCase(), // Ziliqa
+ '1985365e9f78359a9B6AD760e32412f4a445E862'.toLowerCase(), // REP
+ 'b63b606ac810a52cca15e44bb630fd42d8d1d83d'.toLowerCase(), // MCO
+ '89d24a6b4ccb1b6faa2625fe562bdd9a23260359'.toLowerCase(), // DAI
+ 'a74476443119A942dE498590Fe1f2454d7D4aC0d'.toLowerCase(), // GOLEM
+ '1f573d6fb3f13d689ff844b4ce37794d79a7ff1c'.toLowerCase(), // Bancor
+ 'f629cbd94d3791c9250152bd8dfbdf380e2a3b9c'.toLowerCase(), // ENJIN
+ 'ef68e7c694f40c8202821edf525de3782458639f'.toLowerCase(), // Loopring
+ '41e5560054824ea6b0732e656e3ad64e20e94e45'.toLowerCase(), // Civic
+ 'b64ef51c888972c908cfacf59b47c1afbc0ab8ac'.toLowerCase(), // Storj
+ '08711d3b02c8758f2fb3ab4e80228418a7f8e39c'.toLowerCase(), // Edgeless
+ '960b236A07cf122663c4303350609A66A7B288C0'.toLowerCase(), // Aragon
+ '6810e776880c02933d47db1b9fc05908e5386b96'.toLowerCase(), // Gnosis
+ 'B97048628DB6B661D4C2aA833e95Dbe1A905B280'.toLowerCase() // TENX
+ ];
+ }
+ if (inputs.type == "nft") {
+ addresses = [
+ "06012c8cf97bead5deae237070f9587f8e7a266d", // Cryptokitties
+ "f87e31492faf9a91b02ee0deaad50d51d56d5d4d", // Decentralaland
+ "71c118b00759b0851785642541ceb0f4ceea0bd5", // Chibi
+ "f5b0a3efb8e8e4c201e2a935f110eaaf3ffecb8d", // Axie
+ "06a6a7af298129e3a2ab396c9c06f91d3c54aba8", // 0xuniverse
+ "6ebeaf8e8e946f0716e6533a6f2cefc83f60e8ab", // God Unchained
+ ];
+ }
+ if (inputs.type == "stable") {
+ addresses = [
+ 'a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'.toLowerCase(), // USDCoin
+ '89d24a6b4ccb1b6faa2625fe562bdd9a23260359'.toLowerCase(), // DAI
+ '8dd5fbce2f6a956c3022ba3663759011dd51e73e'.toLowerCase(), // TrueUSD
+ '57ab1e02fee23774580c119740129eac7081e9d3'.toLowerCase(), // sUSD
+ ];
+ }
  for (var address of addresses) {
  base.orWhere('address', address)
  }

diff --git a/views/pages/homepage.ejs b/views/pages/homepage.ejs
@@ -10,24 +10,49 @@
  <section class="container">
 
  <div class="sandbox">
- <h2 class="title is-2">Tokens</h2>
- <p>7 days transfers</p>
+ <p class="landing-title tooltip is-tooltip-right is-tooltip-multiline" data-tooltip="Some interesting ERC20 tokens with their activity during the last 7 days.">Tokens</p>
  <div class="columns">
  <% for(var i=0; i < 4; i++) {%>
- <a href="/contract/<%=tokens[i].address%>/token" class="column is-parent is-shady ">
- <center style="width:100%;">
+ <a href="/contract/<%=tokens[i].address%>/token" class="column is-parent is-shady has-text-centered">
  <article class="tile is-child notification is-white">
  <contract_icon :size="50" name="<%=tokens[i].name%>" symbol="<%=tokens[i].symbol%>" address="<%=tokens[i].address%>"></contract_icon>
  <p class="title is-5"><%=tokens[i].name%></p>
  <general_trend_line data_key="transfers" :days="7" :data="<%= JSON.stringify(tokens[i].item) %>"></general_trend_line>
  </article>
- </center>
  </a>
  <% } %>
-
-
-
  </div>
+ <a style="float: right;" href="/tokens">Explore all ERC20 tokens ></a>
+ </div>
+ <div class="sandbox">
+ <p class="landing-title tooltip is-tooltip-right is-tooltip-multiline" data-tooltip="Some interesting NFT tokens with their activity during the last 7 days.">Non fungible tokens</p>
+ <div class="columns">
+ <% for(var i=0; i < 4; i++) {%>
+ <a href="/contract/<%=nfts[i].address%>/token" class="column is-parent is-shady has-text-centered">
+ <article class="tile is-child notification is-white">
+ <contract_icon :size="50" name="<%=nfts[i].name%>" symbol="<%=nfts[i].symbol%>" address="<%=nfts[i].address%>"></contract_icon>
+ <p class="title is-5"><%=nfts[i].name%></p>
+ <general_trend_line data_key="transfers" :days="7" :data="<%= JSON.stringify(nfts[i].item) %>"></general_trend_line>
+ </article>
+ </a>
+ <% } %>
+ </div>
+ <a style="float: right;" href="/nfts">Explore NFTS ></a>
+ </div>
+ <div class="sandbox">
+ <p class="landing-title tooltip is-tooltip-right is-tooltip-multiline" data-tooltip="Some ERC20 stable coins with their activity during the last 7 days.">Stable coins</p>
+ <div class="columns">
+ <% for(var i=0; i < 4; i++) {%>
+ <a href="/contract/<%=stables[i].address%>/token" class="column is-parent is-shady has-text-centered">
+ <article class="tile is-child notification is-white">
+ <contract_icon :size="50" name="<%=stables[i].name%>" symbol="<%=stables[i].symbol%>" address="<%=stables[i].address%>"></contract_icon>
+ <p class="title is-5"><%=stables[i].name%></p>
+ <general_trend_line data_key="transfers" :days="7" :data="<%= JSON.stringify(stables[i].item) %>"></general_trend_line>
+ </article>
+ </a>
+ <% } %>
+ </div>
+ </div>
  <div class="sandbox">
  <h2 class="title is-2">NFTs</h2>
  <div class="tile is-ancestor">
@@ -167,6 +192,12 @@
  font-family: 'Open Sans', serif;
  }
 
+ .landing-title {
+ width: fit-content;
+ font-size: 2.0rem;
+ font-weight: 700;
+ }
+
  .hero-body .container {
  max-width: 700px;
  }
@@ -210,7 +241,7 @@
 
  .card {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
- margin-bottom: 2rem;
+ margin-bottom: 0rem;
  }
 
  .intro {
@@ -219,7 +250,7 @@
  }
 
  .sandbox {
- padding: 5rem 0;
+ padding: 1rem 0;
  }
 
  .tile.notification {