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

Show RPC wallets and info in Bitcoin wallet connector (#231)

0.3.9
Mayank Chhabra 4 years ago
committed by GitHub
parent
eb82e03400
commit
a5a2fdc150
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 223 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 162
      src/components/BitcoinConnectWallet.vue
  2. 26
      src/store/modules/bitcoin.js
  3. 90
      src/views/Bitcoin.vue

162
src/components/BitcoinConnectWallet.vue
View File

@ -2,44 +2,150 @@
<div>
<b-form-select v-model="selectedWallet" class="mb-3">
<b-form-select-option
:value="{walletName: 'Select your wallet', type: null}"
:value="{ walletName: 'Select your wallet', type: null }"
disabled
>Select your wallet</b-form-select-option>
<b-form-select-option :value="{walletName: 'Blockstream Green', type: 'p2p'}">Blockstream Green</b-form-select-option>
<b-form-select-option :value="{walletName: 'BlueWallet (on-chain only)', type: 'electrum'}">BlueWallet</b-form-select-option>
<b-form-select-option :value="{walletName: 'Electrum', type: 'electrum'}">Electrum</b-form-select-option>
<b-form-select-option :value="{walletName: 'Phoenix', type: 'electrum'}">Phoenix</b-form-select-option>
<b-form-select-option :value="{walletName: 'Sparrow', type: 'electrum'}">Sparrow</b-form-select-option>
<b-form-select-option :value="{walletName: 'Wasabi', type: 'p2p'}">Wasabi</b-form-select-option>
>Select your wallet</b-form-select-option
>
<b-form-select-option
:value="{ walletName: 'Blockstream Green', type: 'p2p' }"
>Blockstream Green</b-form-select-option
>
<b-form-select-option
:value="{ walletName: 'BlueWallet (on-chain only)', type: 'electrum' }"
>BlueWallet</b-form-select-option
>
<b-form-select-option
:value="{ walletName: 'Electrum', type: 'electrum' }"
>Electrum</b-form-select-option
>
<b-form-select-option :value="{ walletName: 'Fully Noded', type: 'rpc' }"
>Fully Noded</b-form-select-option
>
<b-form-select-option :value="{ walletName: 'Phoenix', type: 'electrum' }"
>Phoenix</b-form-select-option
>
<b-form-select-option :value="{ walletName: 'Sparrow', type: 'electrum' }"
>Sparrow</b-form-select-option
>
<b-form-select-option
:value="{ walletName: 'Specter Desktop', type: 'rpc' }"
>Specter Desktop</b-form-select-option
>
<b-form-select-option :value="{ walletName: 'Wasabi', type: 'p2p' }"
>Wasabi</b-form-select-option
>
<b-form-select-option-group label="Other">
<b-form-select-option
:value="{walletName: 'any other wallet that supports Bitcoin Core\'s P2P port', type: 'p2p'}"
>Bitcoin Core P2P</b-form-select-option>
:value="{
walletName:
'any other wallet that supports Bitcoin Core\'s P2P port',
type: 'p2p'
}"
>Bitcoin Core P2P</b-form-select-option
>
<b-form-select-option
:value="{walletName: 'any other wallet that supports an Electrum server', type: 'electrum'}"
>Electrum Server</b-form-select-option>
:value="{
walletName: 'any other wallet that supports Bitcoin Core\'s RPC',
type: 'rpc'
}"
>Bitcoin Core RPC</b-form-select-option
>
<b-form-select-option
:value="{
walletName: 'any other wallet that supports an Electrum server',
type: 'electrum'
}"
>Electrum Server</b-form-select-option
>
</b-form-select-option-group>
</b-form-select>
<div class="d-lg-flex align-items-center" v-if="connectionString && selectedWallet.type">
<div
class="d-lg-flex align-items-center"
v-if="
selectedWallet.type &&
urls[selectedWallet.type] &&
selectedWallet.type !== 'rpc'
"
>
<!-- Pubkey QR Code -->
<qr-code :value="connectionString" :size="200" level="M" class="qr-image mb-3 mb-lg-0" showLogo></qr-code>
<qr-code
:value="urls[selectedWallet.type]"
:size="200"
level="M"
class="qr-image mb-3 mb-lg-0"
showLogo
></qr-code>
<div class="w-100 align-self-center ml-lg-3">
<p
class="text-center text-lg-left"
>Connect {{ selectedWallet.walletName }} to your Umbrel using the following url</p>
<input-copy class="mb-2" size="sm" :value="connectionString"></input-copy>
<p class="text-center text-lg-left">
Connect {{ selectedWallet.walletName }} to your Umbrel using the
following url
</p>
<input-copy
class="mb-2"
size="sm"
:value="urls[selectedWallet.type]"
></input-copy>
</div>
</div>
<div
class="d-lg-flex align-items-center"
v-else-if="
selectedWallet.type &&
urls[selectedWallet.type] &&
selectedWallet.type === 'rpc'
"
>
<!-- Pubkey QR Code -->
<qr-code
:value="urls.rpc.connectionString"
:size="200"
level="M"
class="qr-image mb-3 mb-lg-0"
showLogo
></qr-code>
<div class="w-100 align-self-center ml-lg-3">
<p class="text-center text-lg-left">
Connect {{ selectedWallet.walletName }} to your Umbrel using the
following details
</p>
<b-row>
<b-col col cols="6">
<label class="mb-1 d-block"><small>RPC Username</small></label>
<input-copy
class="mb-2"
size="sm"
:value="urls.rpc.rpcuser"
></input-copy>
</b-col>
<b-col col cols="6">
<label class="mb-1 d-block"><small>RPC Password</small></label>
<input-copy
class="mb-2"
size="sm"
:value="urls.rpc.rpcpassword"
></input-copy> </b-col
><b-col col cols="12">
<label class="mb-1 d-block"><small>Address</small></label>
<input-copy
class="mb-2"
size="sm"
:value="urls.rpc.address"
></input-copy>
</b-col>
</b-row>
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import QrCode from "@/components/Utility/QrCode";
import InputCopy from "@/components/Utility/InputCopy";
export default {
props: {
urls: Object
},
data() {
return {
selectedWallet: {
@ -48,23 +154,7 @@ export default {
}
};
},
computed: {
...mapState({
onionAddress: state => state.bitcoin.onionAddress,
electrumAddress: state => state.bitcoin.electrumAddress
})
},
methods: {},
watch: {
selectedWallet(wallet) {
if (wallet.type === 'p2p') {
this.connectionString = this.onionAddress;
}
if (wallet.type === 'electrum') {
this.connectionString = this.electrumAddress;
}
}
},
components: {
QrCode,
InputCopy

26
src/store/modules/bitcoin.js
View File

@ -9,6 +9,12 @@ const state = () => ({
ipAddress: "",
onionAddress: "",
electrumAddress: "",
rpc: {
rpcuser: "",
rpcpassword: "",
address: "",
connectionString: ""
},
currentBlock: 0,
chain: "",
blockHeight: 0,
@ -126,6 +132,13 @@ const mutations = {
state.stats.hashrate = stats.hashrate;
},
setRpcInfo(state, rpcInfo) {
state.rpc.rpcuser = rpcInfo.rpcuser;
state.rpc.rpcpassword = rpcInfo.rpcpassword;
state.rpc.address = rpcInfo.address;
state.rpc.connectionString = rpcInfo.connectionString;
},
peers(state, peers) {
state.peers.total = peers.total || 0;
state.peers.inbound = peers.inbound || 0;
@ -247,6 +260,16 @@ const actions = {
}
},
async getRpcInfo({ commit }) {
const rpcInfo = await API.get(
`${process.env.VUE_APP_MANAGER_API_URL}/v1/system/bitcoin-rpc-connection-details`
);
if (rpcInfo) {
commit("setRpcInfo", rpcInfo);
}
},
async getSync({ commit, state }) {
if (state.operational) {
const sync = await API.get(
@ -279,8 +302,7 @@ const actions = {
//TODO: Fetch only new blocks
const latestThreeBlocks = await API.get(
`${
process.env.VUE_APP_MIDDLEWARE_API_URL
`${process.env.VUE_APP_MIDDLEWARE_API_URL
}/v1/bitcoind/info/blocks?from=${currentBlock - 2}&to=${currentBlock}`
);

90
src/views/Bitcoin.vue
View File

@ -20,10 +20,17 @@
</svg>
<small class="ml-1 text-success">Running</small>
<h3 class="d-block font-weight-bold mb-1">Bitcoin Core</h3>
<span class="d-block text-muted">{{ version ? `v${version}` : "..." }}</span>
<span class="d-block text-muted">{{
version ? `v${version}` : "..."
}}</span>
</div>
</div>
<b-dropdown variant="link" toggle-class="text-decoration-none p-0" no-caret right>
<b-dropdown
variant="link"
toggle-class="text-decoration-none p-0"
no-caret
right
>
<template v-slot:button-content>
<svg
width="18"
@ -52,8 +59,12 @@
/>
</svg>
</template>
<b-dropdown-item href="#" v-b-modal.connect-wallet-modal>Connect Wallet</b-dropdown-item>
<b-dropdown-item href="/logs/?filter=umbrel+bitcoin" target="_blank">View logs</b-dropdown-item>
<b-dropdown-item href="#" v-b-modal.connect-wallet-modal
>Connect Wallet</b-dropdown-item
>
<b-dropdown-item href="/logs/?filter=umbrel+bitcoin" target="_blank"
>View logs</b-dropdown-item
>
<!-- <b-dropdown-divider /> -->
<!-- <b-dropdown-item variant="danger" href="#" disabled>Stop Bitcoin Core</b-dropdown-item> -->
</b-dropdown>
@ -84,11 +95,23 @@
</div>
</template>
<div class="px-2 px-sm-3 pb-2 pb-sm-3">
<bitcoin-connect-wallet></bitcoin-connect-wallet>
<bitcoin-connect-wallet
:urls="{
p2p: onionAddress,
electrum: electrumAddress,
rpc: rpc
}"
></bitcoin-connect-wallet>
</div>
</b-modal>
<b-modal id="connection-info-modal" ref="connection-info-modal" size="lg" centered hide-footer>
<b-modal
id="connection-info-modal"
ref="connection-info-modal"
size="lg"
centered
hide-footer
>
<template v-slot:modal-header="{ close }">
<div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
<h3 class="text-lowercase">connect to bitcoin core</h3>
@ -114,10 +137,21 @@
<div class="px-2 px-sm-3 pb-2 pb-sm-3">
<div class="d-flex align-items-center">
<!-- Pubkey QR Code -->
<qr-code :value="onionAddress" :size="180" class="qr-image" showLogo></qr-code>
<qr-code
:value="onionAddress"
:size="180"
class="qr-image"
showLogo
></qr-code>
<div class="w-100 align-self-center ml-3 ml-sm-4">
<p>Connect your wallet to Bitcoin Core using the following address</p>
<input-copy size="sm" :value="onionAddress" v-if="onionAddress"></input-copy>
<p>
Connect your wallet to Bitcoin Core using the following address
</p>
<input-copy
size="sm"
:value="onionAddress"
v-if="onionAddress"
></input-copy>
<span
class="loading-placeholder loading-placeholder-lg mt-1"
style="width: 100%;"
@ -127,10 +161,19 @@
</div>
<div class="d-flex align-items-center">
<!-- Pubkey QR Code -->
<qr-code :value="electrumAddress" :size="180" class="qr-image" showLogo></qr-code>
<qr-code
:value="electrumAddress"
:size="180"
class="qr-image"
showLogo
></qr-code>
<div class="w-100 align-self-center ml-3 ml-sm-4">
<p>Connect your wallet to Electrum using the following address</p>
<input-copy size="sm" :value="electrumAddress" v-if="electrumAddress"></input-copy>
<input-copy
size="sm"
:value="electrumAddress"
v-if="electrumAddress"
></input-copy>
<span
class="loading-placeholder loading-placeholder-lg mt-1"
style="width: 100%;"
@ -146,7 +189,10 @@
<bitcoin-wallet></bitcoin-wallet>
</b-col>
<b-col col cols="12" md="6" xl="4">
<card-widget header="Blockchain" :loading="syncPercent !== 100 || blocks.length === 0">
<card-widget
header="Blockchain"
:loading="syncPercent !== 100 || blocks.length === 0"
>
<!-- <template v-slot:menu>
<b-dropdown-item variant="danger" href="#" disabled>Resync Blockchain</b-dropdown-item>
</template>-->
@ -175,7 +221,10 @@
animated
striped
></b-progress>
<small class="text-muted d-block text-right" v-if="currentBlock < blockHeight - 1">
<small
class="text-muted d-block text-right"
v-if="currentBlock < blockHeight - 1"
>
{{ currentBlock.toLocaleString() }} of
{{ blockHeight.toLocaleString() }} blocks
</small>
@ -211,7 +260,12 @@
></stat>
</b-col>-->
<b-col col cols="6" md="3" xl="6">
<stat title="Connections" :value="stats.peers" suffix="Peers" showNumericChange></stat>
<stat
title="Connections"
:value="stats.peers"
suffix="Peers"
showNumericChange
></stat>
</b-col>
<b-col col cols="6" md="3" xl="6">
<stat
@ -264,14 +318,15 @@ export default {
},
computed: {
...mapState({
onionAddress: state => state.bitcoin.onionAddress,
syncPercent: state => state.bitcoin.percent,
blocks: state => state.bitcoin.blocks,
version: state => state.bitcoin.version,
currentBlock: state => state.bitcoin.currentBlock,
blockHeight: state => state.bitcoin.blockHeight,
stats: state => state.bitcoin.stats,
electrumAddress: state => state.bitcoin.electrumAddress
onionAddress: state => state.bitcoin.onionAddress,
electrumAddress: state => state.bitcoin.electrumAddress,
rpc: state => state.bitcoin.rpc
})
},
methods: {
@ -302,7 +357,8 @@ export default {
fetchConnectionDetails() {
return Promise.all([
this.$store.dispatch("bitcoin/getHiddenServiceUrl"),
this.$store.dispatch("bitcoin/getElectrumUrl")
this.$store.dispatch("bitcoin/getElectrumUrl"),
this.$store.dispatch("bitcoin/getRpcInfo")
]);
}
},

Write Preview
Loading…
Cancel
Save