2022-03-11 18:49:17 +00:00
<!DOCTYPE html> < html lang = "en" > < head > < meta charSet = "utf-8" / > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" / > < title > Installing the DLC Wallet UI · bitcoin-s< / title > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" / > < meta name = "generator" content = "Docusaurus" / > < meta name = "description" content = "# Easy setup" / > < meta name = "docsearch:version" content = "next" / > < meta name = "docsearch:language" content = "en" / > < meta property = "og:title" content = "Installing the DLC Wallet UI · bitcoin-s" / > < meta property = "og:type" content = "website" / > < meta property = "og:url" content = "https://bitcoin-s.org/" / > < meta property = "og:description" content = "# Easy setup" / > < meta property = "og:image" content = "https://bitcoin-s.org/img/undraw_online.svg" / > < meta name = "twitter:card" content = "summary" / > < meta name = "twitter:image" content = "https://bitcoin-s.org/img/undraw_tweetstorm.svg" / > < link rel = "shortcut icon" href = "/img/favicon.ico" / > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" / > < link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" / > < script >
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61958686-2', 'auto');
ga('send', 'pageview');
2022-06-28 15:54:09 +00:00
< / script > < link rel = "stylesheet" href = "/css/code-block-buttons.css" / > < script type = "text/javascript" src = "https://buttons.github.io/buttons.js" > < / script > < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js" > < / script > < script type = "text/javascript" src = "https://fonts.googleapis.com/css?family=Montserrat:500" > < / script > < script type = "text/javascript" src = "https://www.googletagmanager.com/gtag/js?id=UA-61958686-2" > < / script > < script type = "text/javascript" src = "/js/code-block-buttons.js" > < / script > < script src = "/js/scrollSpy.js" > < / script > < link rel = "stylesheet" href = "/css/main.css" / > < script src = "/js/codetabs.js" > < / script > < / head > < body class = "sideNavVisible separateOnPageNav" > < div class = "fixedHeaderContainer" > < div class = "headerWrapper wrapper" > < header > < a href = "/" > < img class = "logo" src = "/img/favicon.ico" alt = "bitcoin-s" / > < h2 class = "headerTitleWithLogo" > bitcoin-s< / h2 > < / a > < a href = "/versions" > < h3 > next< / h3 > < / a > < div class = "navigationWrapper navigationSlider" > < nav class = "slidingNav" > < ul class = "nav-site nav-site-internal" > < li class = "siteNavGroupActive" > < a href = "/docs/next/core/core-intro" target = "_self" > Docs< / a > < / li > < li class = "" > < a href = "/download" target = "_self" > Download< / a > < / li > < li class = "" > < a href = "/api/org/bitcoins" target = "_self" > API< / a > < / li > < li class = "" > < a href = "/help" target = "_self" > Help< / a > < / li > < li class = "navSearchWrapper reactNavSearchWrapper" > < input type = "text" id = "search_input_react" placeholder = "Search" title = "Search" / > < / li > < / ul > < / nav > < / div > < / header > < / div > < / div > < div class = "navPusher" > < div class = "docMainWrapper wrapper" > < div class = "docsNavContainer" id = "docsNav" > < nav class = "toc" > < div class = "toggleNav" > < section class = "navWrapper wrapper" > < div class = "navBreadcrumb wrapper" > < div class = "navToggle" id = "navToggler" > < div class = "hamburger-menu" > < div class = "line1" > < / div > < div class = "line2" > < / div > < div class = "line3" > < / div > < / div > < / div > < h2 > < i > › < / i > < span > Getting Setup< / span > < / h2 > < div class = "tocToggler" id = "tocToggler" > < i class = "icon-toc" > < / i > < / div > < / div > < div class = "navGroups" > < div class = "navGroup" > < h3 class = "navGroupCategoryTitle" > Getting Started< / h3 > < ul class = "" > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/getting-started" > Intro and Getting Started< / a > < / li > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/bips" > Supported BIPs< / a > < / li > < / ul > < / div > < div class = "navGroup" > < h3 class = "navGroupCategoryTitle" > Getting Setup< / h3 > < ul class = "" > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/getting-setup" > Getting Bitcoin-S installed on your machine< / a > < / li > < li class = "navListItem navListItemActive" > < a class = "navItem" href = "/docs/next/ui-setup" > Installing the DLC Wallet UI< / a > < / li > < / ul > < / div > < div class = "navGroup" > < h3 class = "navGroupCategoryTitle" > Applications< / h3 > < ul class = "" > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/applications/cli" > CLI< / a > < / li > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/applications/server" > Application Server< / a > < / li > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/applications/gui" > GUI< / a > < / li > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/applications/server-systemd" > Systemd installation< / a > < / li > < / ul > < / div > < div class = "navGroup" > < h3 class = "navGroupCategoryTitle" > Chain< / h3 > < ul class = "" > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/chain/chain" > Blockchain Verification< / a > < / li > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/chain/filter-sync" > Syncing Blockfilters< / a > < / li > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/chain/chain-query-api" > Chain Query API< / a > < / li > < / ul > < / div > < div class = "navGroup" > < h3 class = "navGroupCategoryTitle" > Configuration< / h3 > < ul class = "" > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/config/configuration" > Application Configuration< / a > < / li > < / ul > < / div > < div class = "navGroup" > < h3 class = "navGroupCategoryTitle" > Core Module< / h3 > < ul class = "" > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/core/core-intro" > Core Module< / a > < / li > < li class = "navListItem" > < a class = "navItem" href = "/docs/next/core/addresses" > Gener
2022-03-11 18:49:17 +00:00
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length ; i + + ) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length ; j + + ) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings & & headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
< / script > < / nav > < / div > < div class = "container mainContainer docsContainer" > < div class = "wrapper" > < div class = "post" > < header class = "postHeader" > < a class = "edit-page-link button" href = "https://github.com/bitcoin-s/bitcoin-s/blob/master/docs/ui-setup.md" target = "_blank" rel = "noreferrer noopener" > Edit< / a > < h1 id = "__docusaurus" class = "postHeaderTitle" > Installing the DLC Wallet UI< / h1 > < / header > < article > < div > < span > < h1 > < a class = "anchor" aria-hidden = "true" id = "easy-setup" > < / a > < a href = "#easy-setup" aria-hidden = "true" class = "hash-link" > < svg class = "hash-link-icon" aria-hidden = "true" height = "16" version = "1.1" viewBox = "0 0 16 16" width = "16" > < path fill-rule = "evenodd" d = "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" > < / path > < / svg > < / a > Easy setup< / h1 >
< p > We have desktop installers for mac, windows and linux. This requires you to be signed into a github account to download.< / p >
< p > The link to the installers is < a href = "https://suredbits.com/bitcoin-s" > suredbits.com/bitcoin-s< / a > < / p >
< p > You can download the appropriate installer for your machine< / p >
< p > < img src = "/img/installers.png" alt = "Example banner" > < / p >
< p > The downside of this setup is it uses an old UI that we are working to get rid of.
This UI is missing new features that drastically improve UX.< / p >
< p > Once you download and install the wallet, deposit 100,000 sats and < a href = "https://oracle.suredbits.com/" > find an event you want to bet on< / a > !< / p >
< p > The wallet will take roughly 20-30 minutes to synchronize with the bitcoin network. If you deposit funds before
the synchronization finishes, the funds may not show up right away. This is expected. They will show up when the sync is done.< / p >
< p > For more information about building a DLC with this UI, checkout this youtube tutorial I recorded:< / p >
< p > < a href = "https://youtu.be/oR0I0aHxNMM?t=219" > https://youtu.be/oR0I0aHxNMM?t=219< / a > < / p >
< h1 > < a class = "anchor" aria-hidden = "true" id = "advanced-setup" > < / a > < a href = "#advanced-setup" aria-hidden = "true" class = "hash-link" > < svg class = "hash-link-icon" aria-hidden = "true" height = "16" version = "1.1" viewBox = "0 0 16 16" width = "16" > < path fill-rule = "evenodd" d = "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" > < / path > < / svg > < / a > Advanced setup< / h1 >
< p > This requires command line skills.< / p >
< h3 > < a class = "anchor" aria-hidden = "true" id = "starting-the-backend" > < / a > < a href = "#starting-the-backend" aria-hidden = "true" class = "hash-link" > < svg class = "hash-link-icon" aria-hidden = "true" height = "16" version = "1.1" viewBox = "0 0 16 16" width = "16" > < path fill-rule = "evenodd" d = "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" > < / path > < / svg > < / a > Starting the backend< / h3 >
< p > From the image above, download the < code > bitcoin-s-server< / code > artifact.< / p >
< p > < img src = "/img/installers.png" alt = "Example banner" > < / p >
< p > After unzipping, you will need to run < code > chmod +x ./bin/bitcoin-s-server< / code > from the terminal make the file executable.< / p >
< p > After making the file executable, you can start the server with< / p >
2022-04-28 16:10:36 +00:00
< pre > < code class = "hljs" > unzip bitcoin< span class = "hljs-_" > -s< / span > -server.zip
< span class = "hljs-built_in" > cd< / span > bitcoin< span class = "hljs-_" > -s< / span > -server
chmod +x ./bin/bitcoin< span class = "hljs-_" > -s< / span > -server
./bin/bitcoin< span class = "hljs-_" > -s< / span > -server
< / code > < / pre >
2022-03-11 18:49:17 +00:00
< p > This starts the backend and will begin synchronizing with the bitcoin network.< / p >
< h3 > < a class = "anchor" aria-hidden = "true" id = "building-and-starting-the-frontend" > < / a > < a href = "#building-and-starting-the-frontend" aria-hidden = "true" class = "hash-link" > < svg class = "hash-link-icon" aria-hidden = "true" height = "16" version = "1.1" viewBox = "0 0 16 16" width = "16" > < path fill-rule = "evenodd" d = "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" > < / path > < / svg > < / a > Building and starting the frontend< / h3 >
< p > Here are the instructions to build, you can paste this into your terminal< / p >
2022-04-28 16:10:36 +00:00
< pre > < code class = "hljs" > git < span class = "hljs-built_in" > clone< / span > https://github.com/bitcoin< span class = "hljs-_" > -s< / span > /bitcoin< span class = "hljs-_" > -s< / span > -ts.git
2022-06-28 15:54:09 +00:00
< span class = "hljs-built_in" > cd< / span > bitcoin< span class = "hljs-_" > -s< / span > -ts & & npm i & & run build
2022-03-11 18:49:17 +00:00
< span class = "hljs-built_in" > cd< / span > wallet-server-ui & & npm i & & npm run build
< span class = "hljs-built_in" > cd< / span > ../wallet-server-ui-proxy & & npm i & & npm run startlocal
< / code > < / pre >
< p > The last command, < code > npm run startlocal< / code > should result in server starting with logs that look like this< / p >
< pre > < code class = "hljs" > > wallet-server-ui-proxy@< span class = "hljs-number" > 1.9< / span > < span class = "hljs-number" > .0< / span > startlocal
> DEFAULT_UI_PASSWORD=none BITCOIN_S_SERVER_RPC_PASSWORD=password npx ts-node server.ts
...
ConfigureServerURL() < span class = "hljs-string" > http:< / span > < span class = "hljs-comment" > //localhost:9999/< / span >
ConfigureAuthorizationHeader() Basic Yml0Y29pbnM6cGFzc3dvcmQ=
[HPM] Proxy < span class = "hljs-string" > created:< / span > < span class = "hljs-regexp" > / -> http:/< / span > < span class = "hljs-regexp" > /localhost:9999/< / span >
[HPM] Proxy rewrite rule < span class = "hljs-string" > created:< / span > < span class = "hljs-string" > "^/api/v0"< / span > ~> < span class = "hljs-string" > ""< / span >
[HPM] Proxy < span class = "hljs-string" > created:< / span > < span class = "hljs-regexp" > / -> ws:/< / span > < span class = "hljs-regexp" > /localhost:19999/< / span > events
[HPM] Proxy rewrite rule < span class = "hljs-string" > created:< / span > < span class = "hljs-string" > "^/websocket"< / span > ~> < span class = "hljs-string" > ""< / span >
< span class = "hljs-number" > 2022< / span > < span class = "hljs-number" > -03< / span > < span class = "hljs-number" > -11< / span > < span class = "hljs-string" > T17:< / span > < span class = "hljs-number" > 05< / span > :< span class = "hljs-number" > 19.238< / span > Z < span class = "hljs-string" > info:< / span > starting HTTP server
< span class = "hljs-number" > 2022< / span > < span class = "hljs-number" > -03< / span > < span class = "hljs-number" > -11< / span > < span class = "hljs-string" > T17:< / span > < span class = "hljs-number" > 05< / span > :< span class = "hljs-number" > 19.242< / span > Z < span class = "hljs-string" > info:< / span > Web Server started on < span class = "hljs-string" > port:< / span > < span class = "hljs-number" > 3002< / span > ⚡
< / code > < / pre >
< p > Now if you navigate to your web browser, you should see a page like this at < code > http://localhost:3002< / code > < / p >
< p > < img src = "/img/Screenshot%20from%202022-03-11%2011-20-17.png" alt = "Alt text" > < / p >
< p > The password is < code > none< / code > , enter that and you should see the wallet!< / p >
< p > < img src = "/img/Screenshot%20from%202022-03-11%2011-21-47.png" alt = "Alt text" > < / p >
< p > Deposit 100,000 sats and < a href = "https://oracle.suredbits.com/" > find an event you want to bet on< / a > !< / p >
< p > The wallet will take roughly 20-30 minutes to synchronize with the bitcoin network. If you deposit funds before
the synchronization finishes, the funds may not show up right away. This is expected. They will show up when the sync is done.< / p >
< p > After the synchronization is done, you should be good to do a DLC! :tada:< / p >
< / span > < / div > < / article > < / div > < div class = "docs-prevnext" > < a class = "docs-prev button" href = "/docs/next/getting-setup" > < span class = "arrow-prev" > ← < / span > < span > Getting Bitcoin-S installed on your machine< / span > < / a > < a class = "docs-next button" href = "/docs/next/applications/cli" > < span > CLI< / span > < span class = "arrow-next" > →< / span > < / a > < / div > < / div > < / div > < nav class = "onPageNav" > < / nav > < / div > < footer class = "nav-footer" id = "footer" > < section class = "sitemap" > < a href = "/" class = "nav-home" > < img src = "/img/favicon.ico" alt = "bitcoin-s" width = "66" height = "58" / > < / a > < div > < h5 > Docs< / h5 > < a href = "/docs/en/getting-started" > Getting Started< / a > < a href = "/docs/en/core/core-intro" > Guides< / a > < a href = "/api/org/bitcoins" > API Reference< / a > < / div > < div > < h5 > Community< / h5 > < a href = "/en/users.html" > User Showcase< / a > < a href = "https://join.slack.com/t/suredbits/shared_invite/zt-eavycu0x-WQL7XOakzQo8tAy7jHHZUw" target = "_blank" rel = "noreferrer noopener" > Slack< / a > < a href = "https://gitter.im/bitcoin-s-core/" > Gitter chat< / a > < / div > < div > < h5 > More< / h5 > < a href = "https://github.com/bitcoin-s/bitcoin-s" > GitHub< / a > < a class = "github-button" href = "https://github.com/bitcoin-s/bitcoin-s" data-icon = "octicon-star" data-count-href = "/bitcoin-s/bitcoin-s-core/stargazers" data-show-count = "true" data-count-aria-label = "# stargazers on GitHub" aria-label = "Star this project on GitHub" > Star< / a > < / div > < / section > < section class = "copyright" > Copyright © 2022 Suredbits & the bitcoin-s developers< / section > < / footer > < / div > < script type = "text/javascript" src = "https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js" > < / script > < script >
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search & & search.focus();
}
});
< / script > < script >
var search = docsearch({
apiKey: '0a510688bf8448e19aeb380377d328d3',
indexName: 'bitcoin-s',
inputSelector: '#search_input_react'
});
< / script > < / body > < / html >
