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

This commit is contained in:
2025-01-31 16:54:52 +11:00
parent b821d0a8d1
commit a689e3def0
6 changed files with 86 additions and 588 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -11,10 +11,10 @@
<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 type="application/ld+json">
{
@@ -23,110 +23,29 @@
"name": "FireWallet",
"url": "https://firewallet.au"
}
</script>
<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><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">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/assets/fonts/fontawesome5-overrides.min.css">
</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 active" 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>
@@ -145,7 +64,7 @@
</div>
</div>
</div>
<div style="padding-top: 20px;text-align: center;"><a class="btn btn-primary" role="button" href="#download">Download</a></div>
<div style="padding-top: 20px;text-align: center;"><a class="btn btn-primary" role="button" href="/setup">Setup</a></div>
</header>
<section style="background: rgb(39,38,46);">
<div class="container bg-dark py-5" style="background: rgb(39, 38, 46);">
@@ -183,7 +102,7 @@
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1"></path>
</svg></div>
<h5 class="fw-bold card-title">Create custom python plugins</h5>
<p class="text-muted card-text mb-4">Speed up your wallet interactions by creating/using plugins. You can use the included plugin to auto reveal, redeem bid and renew domains or create your own for your specific use case.</p><sub>Only available on FireWallet Browser</sub>
<p class="text-muted card-text mb-4">Speed up your wallet interactions by creating/using plugins. You can use the included plugin to auto reveal, redeem bid and renew domains or create your own for your specific use case.</p>
</div>
</div>
</div>
@@ -203,42 +122,35 @@
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Portfolio</p><img src="assets/img/browser/home.png" width="100%" alt="Portfolio Page">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Portfolio</p><img src="/assets/img/browser/home.png" width="100%" alt="Portfolio Page">
</div>
</div>
</div>
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Sending HNS</p><img src="assets/img/browser/send.png" width="100%" alt="Send HNS Page">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Sending HNS</p><img src="/assets/img/browser/send.png" width="100%" alt="Send HNS Page">
</div>
</div>
</div>
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Receive HNS and Domains</p><img src="assets/img/browser/receive.png" width="100%" alt="Receive Page">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Receive HNS and Domains</p><img src="/assets/img/browser/receive.png" width="100%" alt="Receive Page">
</div>
</div>
</div>
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Domain DNS Editing</p><img src="assets/img/browser/dnseditor.png" width="100%" alt="DNS Edit Page">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Domain DNS Editing</p><img src="/assets/img/browser/dnseditor.png" width="100%" alt="DNS Edit Page">
</div>
</div>
</div>
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Batching<br><sub>Only available on desktop currently</sub></p><img src="https://github.com/Nathanwoodburn/FireWallet/raw/master/assets/batch.png" width="100%" alt="Bacth Page">
</div>
</div>
</div>
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Plugins<br><sub>Only available on browser</sub></p><img src="assets/img/browser/plugins.png" width="100%" alt="Bacth Page">
<p style="color: rgb(25,245,170);font-size: 20px;text-align: center;">Plugins<br></p><img src="/assets/img/browser/plugins.png" width="100%" alt="Bacth Page">
</div>
</div>
</div>
@@ -262,31 +174,7 @@
<div class="card bg-secondary-light">
<div class="card-body text-center px-4 py-5 px-md-5">
<p class="fw-bold text-secondary card-text mb-2">Open Source</p>
<h5 class="fw-bold card-title mb-3">Check the code and compile it yourself to ensure there isn't anything bad in there</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="download">
<div class="container py-5">
<div class="mx-auto" style="max-width: 900px;">
<div class="row row-cols-1 row-cols-md-2 d-flex justify-content-center">
<div class="col mb-4">
<div class="card bg-primary-light">
<div class="card-body text-center px-4 py-5 px-md-5">
<p class="fw-bold text-primary card-text mb-2">FireWallet Desktop</p>
<h5 class="fw-bold card-title mb-3">C# desktop app. Only runs on Windows devices</h5><a class="btn btn-primary" role="button" target="_blank" href="https://github.com/Nathanwoodburn/FireWallet/releases/">Download</a>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card bg-secondary-light">
<div class="card-body text-center px-4 py-5 px-md-5">
<p class="fw-bold text-secondary card-text mb-2">FireWallet Browser</p>
<h5 class="fw-bold card-title mb-3">Python app with browser UI. Runs on any OS with python.<br>Optional docker installation.</h5><a class="btn btn-primary" role="button" target="_blank" href="https://github.com/nathanwoodburn/firewalletbrowser?tab=readme-ov-file#installation">Download</a>
<h5 class="fw-bold card-title mb-3">Check the code and verify it yourself to ensure there isn't anything bad in there</h5>
</div>
</div>
</div>
@@ -302,8 +190,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>

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>

View File

@@ -6,7 +6,4 @@
<url>
<loc>https://firewallet.au/setup.html</loc>
</url>
<url>
<loc>https://firewallet.au/usage.html</loc>
</url>
</urlset>

View File

@@ -1,339 +0,0 @@
<!DOCTYPE html>
<html data-bs-theme="auto" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Usage - FireWallet</title>
<link rel="canonical" href="https://firewallet.au/usage.html">
<meta property="og:url" content="https://firewallet.au/usage.html">
<meta name="twitter:image" content="https://firewallet.au/assets/img/splash.png">
<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 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">
<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>
<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="https://l.woodburn.au/discord" target="_blank">Help</a></li>
</ul>
</div>
</div>
</nav>
</div>
</nav>
<header class="bg-dark">
<div class="container pt-4 pt-xl-5">
<div class="row pt-5">
<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">Learn how to use the Desktop Wallet</h1>
</div>
</div>
</div>
</div>
</header>
<section style="background: rgb(39,38,46);">
<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">Usage</p>
<h3 class="fw-bold">Tips to get the most from FireWallet</h3>
</div>
</div>
<div class="py-5 p-lg-5">
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
<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);">1.</span></div>
<h5 class="fw-bold card-title">Use the Import button on the Batch Window</h5>
<p class="text-muted card-text mb-4">This importing is one of the most powerful batching functions of the wallet. You can import a plaintext list of domain (each domain on a new line) to create a batch with them.<br>Or you can create a CSV file like <a href="https://github.com/Nathanwoodburn/FireWallet/blob/master/example-configs/batch.txt" target="_blank">this example</a> to autofill your batch settings</p>
</div>
</div>
</div>
<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">Find something strange?<br>Look at the logs</h5>
<p class="text-muted card-text mb-4">If you have found a bug the log.txt file could help find the solution. This file is %appdata%/FireWallet/log.txt</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="background: rgb(39,38,46);">
<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">Settings</p>
<h3 class="fw-bold">Settings</h3><small>%appdata%/FireWallet/settings.txt</small>
</div>
</div>
<div class="py-5 p-lg-5">
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
<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);">1.</span></div>
<h5 class="fw-bold card-title">Add a custom block explorer</h5>
<p class="text-muted card-text mb-4">Choose the explorer you prefer to use for each type of lookup (transactions, addresses, etc).<br>Make sure the&nbsp;</p><code>explorer-tx: https://niami.io/tx/<br>explorer-addr: https://niami.io/address/<br>explorer-block: https://niami.io/block/<br>explorer-domain: https://niami.io/domain/</code>
</div>
</div>
</div>
<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">Set how many confirmations<br>to count a transaction verified</h5>
<p class="text-muted card-text mb-4">You can choose how many confirmations are needed before a transactions is no longer marked as pending</p><code>confirmations: 1</code>
</div>
</div>
</div>
<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">Set how many TXs you want on your portfolio</h5>
<p class="text-muted card-text mb-4">You can choose if you want a few or a lot of TXs to show on your portfolio. The more TXs that show the slower the portfolio will load.</p><code>portfolio-tx: 20</code>
</div>
</div>
</div>
<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);">4.</span></div>
<h5 class="fw-bold card-title">Set a custom DNS server to use for HIP-02 resolution</h5>
<p class="text-muted card-text mb-4">You can choose what DNS server to use for HIP-02 lookups.</p><code>hip-02-ip: 127.0.0.1<br>hip-02-port: 5350</code>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="background: rgb(39,38,46);">
<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">Settings</p>
<h3 class="fw-bold">Node Settings</h3><small>%appdata%/FireWallet/node.txt</small>
</div>
</div>
<div class="py-5 p-lg-5">
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
<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);">1.</span></div>
<h5 class="fw-bold card-title">Connect to a remote Node</h5>
<p class="text-muted card-text mb-4">You can run FireWallet on a different computer to the one running HSD. This can be useful if you already have an always on node.</p><code>IP: 127.0.0.1</code>
</div>
</div>
</div>
<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">Set the Network</h5>
<p class="text-muted card-text mb-4">You can test FireWallet on a local test Handshake chain. Just set Network to 1</p><code>Network: 0</code>
</div>
</div>
</div>
<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">Change your HSD API key</h5>
<p class="text-muted card-text mb-4">Forgotten your key? Or accidentally leaked it online? You can change it to anything you want here. Make sure you only use letters and numbers, no spaces or weird characters.</p><code>Key: my-secret-api-key</code>
</div>
</div>
</div>
<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);">4.</span></div>
<h5 class="fw-bold card-title">Run HSD inside FireWallet</h5>
<p class="text-muted card-text mb-4">You can enable and disable the internal HSD node. This allows you to disable it if you are running Bob already.</p><code>HSD: True<br>HSD: False</code>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 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);">5.</span></div>
<h5 class="fw-bold card-title">Use a custom HSD start command</h5>
<p class="text-muted card-text mb-4">You can customize how HSD will launch if you use an internal node. Just add the key `HSD-command` to your node.txt settings file.</p><code style="font-size: 13px;">HSD-command: {default-dir} --agent=FireWallet --index-tx --index-address --api-key {key} --prefix {Bob}</code>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="background: rgb(39,38,46);">
<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">Settings</p>
<h3 class="fw-bold">Theme Settings</h3><small>%appdata%/FireWallet/theme.txt</small>
</div>
</div>
<div class="py-5 p-lg-5">
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
<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);">1.</span></div>
<h5 class="fw-bold card-title">Change the main colours</h5>
<p class="text-muted card-text mb-4">The main apps colours are set using these settings. Make sure you set them in hex starting with #</p><code>background: #000000<br>foreground: #8e05c2<br>background-alt: #3e065f<br>foreground-alt: #ffffff</code>
</div>
</div>
</div>
<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">Enable transparency</h5>
<p class="text-muted card-text mb-4">You can add transparency to FireWallet. Choose mica, percent or key transparency mode. Mica mimics the windows 10/11 apps. Percent sets the opacity of everything. Key allows you to set any 1 hex to transparent.</p><code>transparent-mode: off<br>transparency-key: #000000<br>transparency-percent: 90</code>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container py-5">
<div class="mx-auto" style="max-width: 900px;">
<div class="row row-cols-1 row-cols-md-2 d-flex justify-content-center">
<div class="col mb-4">
<div class="card bg-primary-light">
<div class="card-body text-center px-4 py-5 px-md-5">
<p class="fw-bold text-primary card-text mb-2">Need Help?</p>
<h5 class="fw-bold card-title mb-3">Just ask Nathan.Woodburn/&nbsp; in any Handshake chat or join the discord server.<br><a href="https://l.woodburn.au/discord" target="_blank">https://l.woodburn/discord</a></h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-dark">
<div class="container py-4 py-lg-5">
<hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2024 FireWallet</p>
</div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bold-and-dark.js"></script>
</body>
</html>