nathanwoodburn/firewallet-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update site to have setup instructions
All checks were successful
Build Docker / Build Docker (push) Successful in 52s
Details

Browse Source
This commit is contained in:
Nathan Woodburn
2025-01-31 16:54:52 +11:00
parent b821d0a8d1
commit a689e3def0
6 changed files with 86 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
setup.html
View File

@@ -11,111 +11,31 @@
<meta property="og:type" content="website">
<meta property="og:title" content="FireWallet">
<meta name="twitter:title" content="FireWallet">
<meta name="description" content="The Handshake wallet that is just Fire">
<meta name="twitter:description" content="The Handshake wallet that is just Fire">
<meta property="og:description" content="The Handshake wallet that is just Fire">
<meta name="twitter:card" content="summary">
<meta name="description" content="The Handshake wallet that is just Fire">
<meta property="og:image" content="https://firewallet.au/assets/img/splash.png">
<script>
(function() {
// JavaScript snippet handling Dark/Light mode switching
const getStoredTheme = () => localStorage.getItem('theme');
const setStoredTheme = theme => localStorage.setItem('theme', theme);
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
const getPreferredTheme = () => {
if (forcedTheme) return forcedTheme;
const storedTheme = getStoredTheme();
if (storedTheme) {
return storedTheme;
}
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
if (pageTheme) {
return pageTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else {
document.documentElement.setAttribute('data-bs-theme', theme);
}
}
setTheme(getPreferredTheme());
const showActiveTheme = (theme, focus = false) => {
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
if (!themeSwitchers.length) return;
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active');
element.setAttribute('aria-pressed', 'false');
});
for (const themeSwitcher of themeSwitchers) {
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
if (btnToActivate) {
btnToActivate.classList.add('active');
btnToActivate.setAttribute('aria-pressed', 'true');
}
}
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme();
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme());
}
});
window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme());
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', (e) => {
e.preventDefault();
const theme = toggle.getAttribute('data-bs-theme-value');
setStoredTheme(theme);
setTheme(theme);
showActiveTheme(theme);
})
})
});
})();
</script>
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
<link rel="icon" type="image/png" sizes="900x768" href="/assets/img/FW.png">
<link rel="icon" type="image/png" sizes="900x768" href="/assets/img/FW.png">
<link rel="icon" type="image/png" sizes="900x768" href="/assets/img/FW.png">
<link rel="icon" type="image/png" sizes="900x768" href="/assets/img/FW.png">
<link rel="icon" type="image/png" sizes="900x768" href="/assets/img/FW.png">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
</head>
<body>
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav">
<div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-md bs-icon-rounded shadow d-flex justify-content-center align-items-center me-2 bs-icon"><img src="assets/img/FW.png" width="100%"></span><span>FireWallet</span></a>
<div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-md bs-icon-rounded shadow d-flex justify-content-center align-items-center me-2 bs-icon"><img src="/assets/img/FW.png" width="100%"></span><span>FireWallet</span></a>
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid"><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/#download">Download</a></li>
<li class="nav-item"><a class="nav-link" href="usage">Usage</a></li>
<li class="nav-item"><a class="nav-link" href="/setup">Setup</a></li>
<li class="nav-item"><a class="nav-link" target="_blank" href="https://git.woodburn.au/nathanwoodburn/firewalletbrowser">Code</a></li>
<li class="nav-item"><a class="nav-link" href="https://l.woodburn.au/discord" target="_blank">Help</a></li>
</ul>
</div>
@@ -129,7 +49,7 @@
<div class="col-md-8 col-xl-6 text-center text-md-start mx-auto">
<div class="text-center">
<p class="fw-bold text-success mb-2">FireWallet</p>
<h1 class="fw-bold">Setting up your wallet is only a few clicks away</h1>
<h1 class="fw-bold">Getting started</h1>
</div>
</div>
</div>
@@ -139,8 +59,7 @@
<div class="container bg-dark py-5" style="background: rgb(39, 38, 46);">
<div class="row">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<p class="fw-bold text-success mb-2">Setup</p>
<h3 class="fw-bold">You can get FireWallet running in just 3 steps</h3>
<p class="fw-bold text-success mb-2">Installation</p>
</div>
</div>
<div class="py-5 p-lg-5">
@@ -149,26 +68,59 @@
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">1.</span></div>
<h5 class="fw-bold card-title">Install the latest version</h5>
<p class="text-muted card-text mb-4">Get the latest release from <a href="https://github.com/Nathanwoodburn/FireWallet/releases/" target="_blank">here</a>. Or you can build this from the source code using Visual Studio</p>
<h5 class="fw-bold card-title">Make sure you have HSD or Bob Wallet installed</h5>
<p class="text-muted card-text mb-4">FireWallet doesn't include HSD so you need to run a separate HSD node (or use Bob's).</p>
</div>
</div>
</div>
<div class="col mb-5" style="margin-top: 100px;">
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">2.</span></div>
<h5 class="fw-bold card-title">Connect your Node</h5>
<p class="text-muted card-text mb-4">Choose either to connect FireWallet to your existing Node (either HSD or Bob wallet). This will require running Bob to have FireWallet work. Just copy the API key from your settings into the node setup form to get FireWallet connected.<br><br>Or FireWallet can run its own node, just select the Run HSD option in the node setup. Just give it a random API key and go to the next step.</p>
<h5 class="fw-bold card-title">Make sure you have python installed</h5>
<p class="text-muted card-text mb-4">Check if you have python installed by opening a terminal and running<br><code>python3 --version</code><br>Make sure that you have Python 3.10 or above.<br>You can install python from <a href="https://www.python.org/downloads/" target="_blank">here</a></p>
</div>
</div>
</div>
<div class="col mb-4" style="margin-top: -200px;">
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">3.</span></div>
<h5 class="fw-bold card-title">Add your accounts</h5>
<p class="text-muted card-text mb-4">If you have been using Bob your accounts will automatically sync.<br>Otherwise you can add them with the New button on the Accounts page</p>
<h5 class="fw-bold card-title">Make sure you have git installed</h5>
<p class="text-muted card-text mb-4">Check if you have git installed by opening a terminal and running<br><code>git --version</code><br>It shouldn't matter what version you are using.<br>You can download it from <a href="https://git-scm.com/downloads" target="_blank">here</a></p>
</div>
</div>
</div>
</div>
<div class="row" style="max-width: 900px;margin: auto;">
<div class="col" style="margin-bottom: 40px;">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">4.</span></div>
<h5 class="fw-bold card-title">Install FireWallet</h5>
<p class="text-muted card-text mb-4">Open a terminal in the folder you wish to have the FireWallet files stored (eg. Documents or Downloads). Note that installing will create a new folder called&nbsp;<span style="color: rgb(220, 61, 203);">firewalletbrowser</span>. Then run the following command to download FireWallet<br><code>git clone https://git.woodburn.au/nathanwoodburn/firewalletbrowser.git</code><br><br>Install the required components by running<br><code>cd firewalletbrowser</code><br><code>python3 -m pip install -r requirements.txt</code><br><br><br></p>
</div>
</div>
</div>
</div>
<div class="row" style="max-width: 900px;margin: auto;">
<div class="col" style="margin-bottom: 40px;">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">5.</span></div>
<h5 class="fw-bold card-title">Configuring FireWallet</h5>
<p class="text-muted card-text mb-4">Copy the example.env file from where FireWallet installed to a new file called .env (in the same folder).<br><br>Now you can edit the .env file to set your configuration. You will need to set the HSD_API to the api key from HSD or Bob (in Settings &gt; Network &amp; Connection &gt; Internal HSD Node &gt; View API Key)<br><br>You shouldn't need to change the other settings unless you have a more complex setup (eg. using a remote node)</p>
</div>
</div>
</div>
</div>
<div class="row" style="max-width: 900px;margin: auto;">
<div class="col" style="margin-bottom: 40px;">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">6.</span></div>
<h5 class="fw-bold card-title">Start FireWallet</h5>
<p class="text-muted card-text mb-4">Open a terminal in the folder you have the FireWallet files stored (eg. Documents/firewalletbrowser or Downloads/firewalletbrowser).<br>Then run the following command to start FireWallet on Windows<br><code>python3 main.py</code><br><br>On Linux/macOS you can run a more performant server with<br><code>python3 server.py</code><br><br><br><br></p>
</div>
</div>
</div>
@@ -200,8 +152,8 @@
</div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bold-and-dark.js"></script>
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/js/script.min.js"></script>
</body>
</html>