lukechilds
/
umbrel-dashboard
mirror of https://github.com/lukechilds/umbrel-dashboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

calculate lnd balance from channels

readme
Mayank 5 years ago
parent
b6b06b12f0
commit
7626e4bc50
3 changed files with 74 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 118
      src/components/ChannelList.vue
  2. 6
      src/components/LightningWallet.vue
  3. 2
      src/layouts/DashboardLayout.vue

118
src/components/ChannelList.vue
View File

@ -1,16 +1,13 @@
<template> <template>
<div class="channel-list-container"> <div class="channel-list-container">
<div class="channel-list"> <div class="channel-list">
<b-row <transition-group name="list" appear>
v-for="(channel, index) in [...channels, ...channels]" <div v-for="(channel, index) in channels" :key="index" class="py-3 px-4 channel">
:key="index" <b-row align-v="center">
class="py-3 px-4 channel" <b-col col cols="12" xl="3">
align-v="center" <!-- on large screens -->
> <div class="d-none d-xl-block">
<b-col col cols="12" xl="3"> <!-- <div>
<!-- on large screens -->
<div class="d-none d-xl-block">
<!-- <div>
<svg <svg
width="8" width="8"
height="8" height="8"
@ -22,16 +19,16 @@
<circle cx="4" cy="4" r="4" fill="#00CD98" :class="`fill-${variant}`" /> <circle cx="4" cy="4" r="4" fill="#00CD98" :class="`fill-${variant}`" />
</svg> </svg>
<small class>Channel {{index + 1}}</small> <small class>Channel {{index + 1}}</small>
</div>--> </div>-->
<status variant="success" size="sm">Online</status> <status variant="success" size="sm">Online</status>
<span <span
class="text-muted d-block" class="text-muted d-block"
>{{ channel.initiator ? `Opened by you` : `Opened by peer` }}</span> >{{ channel.initiator ? `Opened by you` : `Opened by peer` }}</span>
</div> </div>
<!-- on small screens --> <!-- on small screens -->
<div class="d-xl-none d-flex justify-content-between align-items-center mb-1"> <div class="d-xl-none d-flex justify-content-between align-items-center mb-1">
<!-- <div> <!-- <div>
<svg <svg
width="8" width="8"
height="8" height="8"
@ -43,34 +40,36 @@
<circle cx="4" cy="4" r="4" fill="#00CD98" :class="`fill-${variant}`" /> <circle cx="4" cy="4" r="4" fill="#00CD98" :class="`fill-${variant}`" />
</svg> </svg>
<small class="text-muted">Channel {{index + 1}}</small> <small class="text-muted">Channel {{index + 1}}</small>
</div>--> </div>-->
<status variant="success" size="sm">Online</status> <status variant="success" size="sm">Online</status>
<small <small
class="text-muted d-block" class="text-muted d-block"
>{{ channel.initiator ? `Opened by you` : `Opened by peer` }}</small> >{{ channel.initiator ? `Opened by you` : `Opened by peer` }}</small>
</div> </div>
</b-col> </b-col>
<b-col col cols="12" xl="9"> <b-col col cols="12" xl="9">
<div class="channel"> <div class="channel">
<div class="channel-balances d-flex justify-content-between"> <div class="channel-balances d-flex justify-content-between">
<span <span
class="text-primary font-weight-" class="text-primary font-weight-"
>{{ Number(channel.localBalance).toLocaleString() }} Sats</span> >{{ Number(channel.localBalance).toLocaleString() }} Sats</span>
<span <span
class="text-success font-weight-" class="text-success font-weight-"
>{{ Number(channel.remoteBalance).toLocaleString() }} Sats</span> >{{ Number(channel.remoteBalance).toLocaleString() }} Sats</span>
</div> </div>
<div <div
class="channel-bar my-1" class="channel-bar my-1"
:style="{background: getChannelBarGradient(Number(channel.localBalance), Number(channel.remoteBalance))}" :style="{background: getChannelBarGradient(Number(channel.localBalance), Number(channel.remoteBalance))}"
></div> ></div>
<div class="channel-balances d-flex justify-content-between"> <div class="channel-balances d-flex justify-content-between">
<small class="text-muted">Max Send</small> <small class="text-muted">Max Send</small>
<small class="text-muted">Max Receive</small> <small class="text-muted">Max Receive</small>
</div> </div>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
</div>
</transition-group>
</div> </div>
</div> </div>
</template> </template>
@ -150,7 +149,7 @@ export default {
} }
} }
.channel-list { .channel-list {
max-height: 20rem; height: 20rem; //to do: change to max-height
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; //momentum scroll on iOS -webkit-overflow-scrolling: touch; //momentum scroll on iOS
} }
@ -166,4 +165,27 @@ export default {
border-radius: 5px; border-radius: 5px;
background: red; background: red;
} }
//list transitions
.list-enter-active,
.list-leave-active {
transition: transform 0.8s, opacity 0.8s ease;
}
.list-enter {
transform: translate3d(0, 10px, 0);
opacity: 0;
}
.list-enter-to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.list-leave {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.list-leave-to {
transform: translate3d(0, 10px, 0);
opacity: 0;
}
</style> </style>

6
src/components/LightningWallet.vue
View File

@ -572,7 +572,7 @@ export default {
//refresh data //refresh data
this.$store.dispatch("lightning/getTransactions"); this.$store.dispatch("lightning/getTransactions");
this.$store.dispatch("lightning/getBalance"); this.$store.dispatch("lightning/getChannels");
//clear any intervals //clear any intervals
window.clearInterval(this.state.receive.invoiceStatusPoller); window.clearInterval(this.state.receive.invoiceStatusPoller);
@ -623,7 +623,7 @@ export default {
//refresh //refresh
this.$store.dispatch("lightning/getTransactions"); this.$store.dispatch("lightning/getTransactions");
this.$store.dispatch("lightning/getBalance"); this.$store.dispatch("lightning/getChannels");
} catch (error) { } catch (error) {
this.state.error = JSON.stringify(error.response) this.state.error = JSON.stringify(error.response)
? error.response.data ? error.response.data
@ -770,7 +770,7 @@ export default {
window.clearInterval(this.state.receive.invoiceStatusPoller); window.clearInterval(this.state.receive.invoiceStatusPoller);
//refresh //refresh
this.$store.dispatch("lightning/getBalance"); this.$store.dispatch("lightning/getChannels");
this.$store.dispatch("lightning/getTransactions"); this.$store.dispatch("lightning/getTransactions");
} }

2
src/layouts/DashboardLayout.vue
View File

@ -119,7 +119,7 @@ export default {
this.$store.dispatch("bitcoin/getBalance"); this.$store.dispatch("bitcoin/getBalance");
this.$store.dispatch("bitcoin/getTransactions"); this.$store.dispatch("bitcoin/getTransactions");
this.$store.dispatch("lightning/getTransactions"); this.$store.dispatch("lightning/getTransactions");
this.$store.dispatch("lightning/getBalance"); this.$store.dispatch("lightning/getChannels");
} }
}, },
created() { created() {

Write Preview
Loading…
Cancel
Save