1  <template lang='pug'>
 2  div
 3      .boxy(v-if='!$store.state.cash.info.initialdownload && $store.state.cash.info.feepercentiles')
 4          .lim(v-if='$store.getters.limbo > 0') limbo  {{ $store.getters.limbo.toLocaleString() }}
 5          .section {{ $store.state.cash.info.bitcoinblocks}} blocks
 6          .section fee percentiles (sat/byte):
 7          .section
 8              .grid
 9                  .five.grid
10                      p 90th
11                  .six.grid
12                      .chain  {{ $store.state.cash.info.feepercentiles[4] }}
13                  .one.grid(:class='getFeeColor($store.state.cash.info.feepercentiles[4])')
14          .section
15              .grid
16                  .five.grid
17                      p 75th
18                  .six.grid
19                      .chain  {{ $store.state.cash.info.feepercentiles[3] }}
20                  .one.grid(:class='getFeeColor($store.state.cash.info.feepercentiles[3])')
21          .section
22              .grid
23                  .five.grid
24                      p 50th
25                  .six.grid
26                      .chain  {{ $store.state.cash.info.feepercentiles[2] }}
27                  .one.grid(:class='getFeeColor($store.state.cash.info.feepercentiles[2])')
28          .section
29              .grid
30                  .five.grid
31                      p 25th
32                  .six.grid
33                      .chain  {{ $store.state.cash.info.feepercentiles[1] }}
34                  .one.grid(:class='getFeeColor($store.state.cash.info.feepercentiles[1])')
35          .section
36              .grid
37                  .five.grid
38                      p 10th
39                  .six.grid
40                      .chain  {{ $store.state.cash.info.feepercentiles[0] }}
41                  .one.grid(:class='getFeeColor($store.state.cash.info.feepercentiles[0])')
42          //.section
43          //    .grid
44          //        .five.grid
45          //            p recommend
46          //        .six.grid
47          //            .chain  {{ Math.min(1, $store.state.cash.info.smartfee * 1000) }}
48          //        .one.grid(:class='getFeeColor($store.state.cash.info.smartfee * 10000)')
49      .boxy(v-else) node syncing 
50          span(v-if='!$store.state.cash.info.verificationprogress') false
51          span(v-else) {{Math.round($store.state.cash.info.verificationprogress * 10000) / 100 }}% 
52  
53  </template>
54  
55  <script> 
56  export default {
57      methods: {
58          getFeeColor(x){
59              if (this.$store.getters.member.stacks === 1) return
60              if (x > 100) return { redwx : 1}
61              if (x > 50) return { yellowwx : 1}
62              if (x > 10) return { bluewx: 1}
63              return {greenwx: 1}
64          },
65      }
66  }
67  
68  </script>
69  
70  <style lang='stylus' scoped>
71  @import '../styles/colours'
72  
73  .boxy
74      box-shadow: 0 3px 10px rgb(0 0 0 / 0.2)
75      padding: .378em
76      margin-bottom: 1em
77      margin-right: 1.5em
78  
79  .grid 
80      display: flex 
81  
82  .five 
83      flex: 5 5 3em
84  .six 
85      flex: 6 6 3em
86  .one 
87      min-height:1em
88      flex: 1 1 1em
89      border-radius: 50%
90  
91  </style>
92