Add donate page

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>

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>
     );

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>
+    );
+}