From e000f4cd49b4e95b10641aee240708d0f484ffb5 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Fri, 16 Sep 2022 23:34:48 +0100
Subject: [PATCH] Add donate page

---
 VoidCat/spa/src/App.js                        |  5 ++-
 .../src/Components/HomePage/FooterLinks.js    |  2 ++
 VoidCat/spa/src/Pages/Donate.js               | 33 +++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 VoidCat/spa/src/Pages/Donate.js

diff --git a/VoidCat/spa/src/App.js b/VoidCat/spa/src/App.js
index 5631574..7ad0c14 100644
--- a/VoidCat/spa/src/App.js
+++ b/VoidCat/spa/src/App.js
@@ -1,3 +1,5 @@
+import './App.css';
+
 import {BrowserRouter, Routes, Route} from "react-router-dom";
 import {Provider} from "react-redux";
 import store from "./Store";
@@ -7,8 +9,8 @@ import {Admin} from "./Admin/Admin";
 import {UserLogin} from "./Pages/UserLogin";
 import {Profile} from "./Pages/Profile";
 import {Header} from "./Components/Shared/Header";
+import {Donate} from "./Pages/Donate";
 
-import './App.css';
 
 function App() {
     return (
@@ -22,6 +24,7 @@ function App() {
                         <Route exact path="/u/:id" element={<Profile/>}/>
                         <Route exact path="/admin" element={<Admin/>}/>
                         <Route exact path="/:id" element={<FilePreview/>}/>
+                        <Route exact path="/donate" element={<Donate/>}/>
                     </Routes>
                 </BrowserRouter>
             </Provider>
diff --git a/VoidCat/spa/src/Components/HomePage/FooterLinks.js b/VoidCat/spa/src/Components/HomePage/FooterLinks.js
index 97bd083..9205c84 100644
--- a/VoidCat/spa/src/Components/HomePage/FooterLinks.js
+++ b/VoidCat/spa/src/Components/HomePage/FooterLinks.js
@@ -1,6 +1,7 @@
 import "./FooterLinks.css"
 import StrikeLogo from "../../image/strike.png";
 import {useSelector} from "react-redux";
+import {Link} from "react-router-dom";
 
 export function FooterLinks() {
     const profile = useSelector(state => state.login.profile);
@@ -16,6 +17,7 @@ export function FooterLinks() {
             <a href="https://github.com/v0l/void.cat" target="_blank">
                 GitHub
             </a>
+            <Link to="/donate">Donate</Link>
             {profile?.roles?.includes("Admin") ? <a href="/admin">Admin</a> : null}
         </div>
     );
diff --git a/VoidCat/spa/src/Pages/Donate.js b/VoidCat/spa/src/Pages/Donate.js
new file mode 100644
index 0000000..a4e6ee2
--- /dev/null
+++ b/VoidCat/spa/src/Pages/Donate.js
@@ -0,0 +1,33 @@
+import {useState} from "react";
+
+export function Donate() {
+    const Hostname = "pay.v0l.io";
+    const StoreId = "CxjchLEkirhBWU17KeJrAe71g5TzrxsvsfLuFwrnyp5Q";
+
+    const [currency, setCurrency] = useState("USD");
+    const [price, setPrice] = useState(1);
+
+    return (
+        <div className="page">
+            <h2>Donate with Bitcoin</h2>
+            <form method="POST" action={`https://${Hostname}/api/v1/invoices`} className="flex">
+                <input type="hidden" name="storeId" value={StoreId}/>
+                <input type="hidden" name="checkoutDesc" value="Donation"/>
+                <div className="flex">
+                    <input name="price" type="number" min="1" step="1" value={price}
+                           onChange={(e) => setPrice(parseFloat(e.target.value))}/>
+                    <select name="currency" value={currency} onChange={(e) => setCurrency(e.target.value)}>
+                        <option>USD</option>
+                        <option>GBP</option>
+                        <option>EUR</option>
+                        <option>BTC</option>
+                    </select>
+                </div>
+                <input type="image"
+                       name="submit"
+                       src={`https://${Hostname}/img/paybutton/pay.svg`}
+                       alt="Pay with BTCPay Server, a Self-Hosted Bitcoin Payment Processor"/>
+            </form>
+        </div>
+    );
+}
\ No newline at end of file