From 6eb8623c0ec953e4834130ee7e21e33d743a2767 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hampus=20Sj=C3=B6berg?= <hampus.sjoberg@protonmail.com>
Date: Tue, 27 Apr 2021 17:04:08 +0200
Subject: [PATCH] Donation

---
 frontend/components/Block.tsx    | 46 ++++++++++++++++++++++++++++++
 frontend/components/Donation.tsx | 37 ++++++++++++++++++++++++
 frontend/pages/index.tsx         | 48 ++++----------------------------
 3 files changed, 88 insertions(+), 43 deletions(-)
 create mode 100644 frontend/components/Block.tsx
 create mode 100644 frontend/components/Donation.tsx

diff --git a/frontend/components/Block.tsx b/frontend/components/Block.tsx
new file mode 100644
index 0000000..f5d007e
--- /dev/null
+++ b/frontend/components/Block.tsx
@@ -0,0 +1,46 @@
+import React from "https://esm.sh/react@17.0.2";
+import styled from "https://esm.sh/styled-components";
+
+export const BlockContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 3px;
+  background-color: #434343;
+  box-shadow: #000 3px 3px 14px;
+  border-radius: 6px;
+  margin-bottom: 30px;
+`;
+
+export const BlockStyle = styled.div<{ signals?: boolean }>`
+  background: ${(props) =>
+    props.signals
+      ? "linear-gradient(45deg, rgba(18,209,0,1) 0%, rgba(9,89,0,1) 100%)"
+      : "linear-gradient(45deg, rgba(209,0,0,1) 0%, rgba(89,0,0,1) 100%)"};
+  border: 1px solid #434343;
+  width: 18px;
+  height: 18px;
+  margin: 3px;
+  border-radius: 4px;
+`;
+
+export const EmptyBlock = styled.div`
+  border: 1px solid #5a5a5a;
+  width: 18px;
+  height: 18px;
+  margin: 3px;
+  border-radius: 4px;
+`;
+
+export interface IBlockProps {
+  height: number;
+  signals: boolean | undefined;
+}
+
+export function Block({ height, signals }: IBlockProps) {
+  if (signals === undefined) {
+    return <EmptyBlock title={`Coming block ${height}`} />;
+  }
+  return <BlockStyle title={`Height: ${height}`} signals={signals}></BlockStyle>;
+}
diff --git a/frontend/components/Donation.tsx b/frontend/components/Donation.tsx
new file mode 100644
index 0000000..b1edc57
--- /dev/null
+++ b/frontend/components/Donation.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from "https://esm.sh/react@17.0.2";
+import styled from "https://esm.sh/styled-components";
+import { QRCode } from "https://esm.sh/react-qr-svg";
+
+const DONATION_LNURL_PAY = "LNURL1DP68GURN8GHJ7MRWVF5HGUEWVDHK6TMVDE6HYMRS9ASHQ6F0WCCJ7MRWW4EXCTE38Y6QYWETXD";
+
+export const DonateContainer = styled.div`
+  text-align: center;
+  margin-bottom: 100px;
+`;
+
+export const DonateText = styled.a`
+  text-align: center;
+  color: #404040;
+  text-shadow: #000 1px 1px 0px;
+  cursor: pointer;
+`;
+
+export function Donation() {
+  const [showQr, setShowQr] = useState(false);
+
+  return (
+    <DonateContainer>
+      {!showQr && <DonateText onClick={() => setShowQr(true)}>Donate via Lightning Network</DonateText>}
+      {showQr && (
+        <a href={DONATION_LNURL_PAY.toLowerCase()}>
+          <QRCode
+            bgColor="#FFFFFF"
+            fgColor="#000000"
+            value={DONATION_LNURL_PAY}
+            style={{ border: "8px solid #fff", width: 200 }}
+          />
+        </a>
+      )}
+    </DonateContainer>
+  );
+}
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index fe2c9b8..0a8450d 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -6,9 +6,11 @@ import { IBlock } from "../back/blocks.ts";
 
 import { Container } from "../components/Container.ts";
 import { Content } from "../components/Content.ts";
+import { BlockContainer, Block } from "../components/Block.tsx";
+import { Donation } from "../components/Donation.tsx";
 
 const Title = styled.h1`
-  margin-top: 85px;
+  margin-top: 40px;
   font-size: 42px;
   text-align: center;
   color: #d97b08;
@@ -47,49 +49,8 @@ const LockinInfo = styled.h2`
   text-shadow: #000 3px 3px 0px;
 `;
 
-const BlockContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding: 3px;
-  background-color: #434343;
-  box-shadow: #000 3px 3px 14px;
-  border-radius: 6px;
-  margin-bottom: 30px;
-`;
-
-const BlockStyle = styled.div<{ signals?: boolean }>`
-  background: ${(props) =>
-    props.signals
-      ? "linear-gradient(45deg, rgba(18,209,0,1) 0%, rgba(9,89,0,1) 100%)"
-      : "linear-gradient(45deg, rgba(209,0,0,1) 0%, rgba(89,0,0,1) 100%)"};
-  border: 1px solid #434343;
-  width: 18px;
-  height: 18px;
-  margin: 3px;
-  border-radius: 4px;
-`;
-const EmptyBlock = styled.div`
-  border: 1px solid #5a5a5a;
-  width: 18px;
-  height: 18px;
-  margin: 3px;
-  border-radius: 4px;
-`;
-interface IBlockProps {
-  height: number;
-  signals: boolean | undefined;
-}
-function Block({ height, signals }: IBlockProps) {
-  if (signals === undefined) {
-    return <EmptyBlock title={`Coming block ${height}`} />;
-  }
-  return <BlockStyle title={`Height: ${height}`} signals={signals}></BlockStyle>;
-}
-
 export default function Blocks() {
-  const [blocks, setBlocks] = useState<IBlock[] | undefined>([]);
+  const [blocks, setBlocks] = useState<IBlock[] | undefined>(undefined);
 
   useEffect(() => {
     (async () => {
@@ -153,6 +114,7 @@ export default function Blocks() {
             <Block key={i} height={block.height} signals={block.signals} />
           ))}
         </BlockContainer>
+        <Donation />
       </Content>
     </Container>
   );