feat: add about page and footer component

README.md

@@ -2,6 +2,8 @@
 
 Alby's super simple self-custodial PoS powered by Nostr Wallet Connect.
 
+[Try it now!](https://getalby.github.io/pos/)
+
 Easily save to your homescreen as a PWA and share with your team with a single link or QR code.
 
 ## Development

src/App.tsx

@@ -6,6 +6,7 @@ import { New } from "./pages/wallet/New";
 import { Pay } from "./pages/wallet/Pay";
 import { Paid } from "./pages/wallet/Paid";
 import { Share } from "./pages/wallet/Share";
+import { About } from "./pages/About";
 
 function App() {
   return (
@@ -22,6 +23,7 @@ function App() {
             <Route path="paid" Component={Paid} />
             <Route path="share" Component={Share} />
           </Route>
+          <Route path="/about" Component={About} />
           <Route path="/*" Component={NotFound} />
         </Routes>
       </HashRouter>

src/components/Footer.tsx

@@ -0,0 +1,10 @@
+import { AlbyLogo } from "../components/icons/AlbyLogo";
+
+export function Footer() {
+  return (
+    <div className="mb-4 flex w-full justify-center items-center gap-1">
+      <span className="block text-sm">Made with love by</span>
+      <AlbyLogo className="w-12 h-6" />
+    </div>
+  );
+}

src/components/Navbar.tsx

@@ -5,6 +5,7 @@ import {
   PopiconsShareDuotone,
   PopiconsLeftSidebarTopNavDuotone,
   PopiconsLogoutDuotone,
+  PopiconsBulbDuotone,
 } from "@popicons/react";
 import { localStorageKeys } from "../constants";
 
@@ -36,6 +37,16 @@ export function Navbar() {
                 <PopiconsLogoutDuotone className="w-4 h-4" /> Log out
               </Link>
             </li>
+            <li>
+              <Link
+                to="/about"
+                onClick={() => {
+                  window.localStorage.removeItem(localStorageKeys.nwcUrl);
+                }}
+              >
+                <PopiconsBulbDuotone className="w-4 h-4" /> About BuzzPay
+              </Link>
+            </li>
           </ul>
         </div>
       </div>

src/components/icons/AlbyLogo.tsx

@@ -0,0 +1,110 @@
+type Props = {
+  className?: string;
+};
+
+export function AlbyLogo({ className }: Props) {
+  return (
+    <svg
+      width="1094"
+      height="525"
+      viewBox="0 0 1094 525"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <ellipse
+        opacity="0.1"
+        cx="162.28"
+        cy="480.52"
+        rx="79.0085"
+        ry="14.5862"
+        fill="black"
+      />
+      <path
+        d="M238.442 409.511C279.259 409.511 297.837 319.131 297.837 284.862C297.837 258.151 279.407 241.964 255.177 241.964C231.098 241.964 211.55 252.318 211.307 265.14C211.306 298.978 205.351 409.511 238.442 409.511Z"
+        fill="white"
+        stroke="black"
+        stroke-width="12.1552"
+      />
+      <path
+        d="M89.3601 409.511C48.5429 409.511 29.9648 319.131 29.9648 284.862C29.9648 258.151 48.3954 241.964 72.6254 241.964C96.7043 241.964 116.252 252.318 116.495 265.14C116.496 298.978 122.451 409.511 89.3601 409.511Z"
+        fill="white"
+        stroke="black"
+        stroke-width="12.1552"
+      />
+      <path
+        d="M55.4933 273.998L55.4931 273.997C55.4493 273.578 55.5342 273.336 55.621 273.178C55.7235 272.991 55.9181 272.769 56.2449 272.583C56.9218 272.198 57.8698 272.129 58.7524 272.645C89.0685 290.415 124.036 300.603 162.053 300.603C200.077 300.603 235.693 290.217 266.204 272.137C267.081 271.617 268.026 271.681 268.705 272.064C269.033 272.248 269.23 272.47 269.333 272.658C269.421 272.817 269.507 273.06 269.465 273.479C264.745 320.252 239.375 358.921 205.275 376.72L205.274 376.72C194.011 382.6 186.267 392.814 179.465 401.785C179.343 401.946 179.221 402.106 179.1 402.266L179.099 402.268C173.571 409.561 168.567 416.092 162.452 420.905C156.337 416.092 151.333 409.561 145.805 402.268L145.804 402.266C145.683 402.106 145.561 401.946 145.439 401.785C138.637 392.814 130.893 382.6 119.63 376.72L119.629 376.72C85.659 358.989 60.3532 320.545 55.4933 273.998Z"
+        fill="#FFDF6F"
+        stroke="black"
+        stroke-width="12.0934"
+      />
+      <ellipse
+        cx="162.685"
+        cy="273.072"
+        rx="106.965"
+        ry="35.6551"
+        fill="black"
+        stroke="black"
+        stroke-width="12.1552"
+      />
+      <path
+        d="M76.7888 333.038C76.7888 333.038 129.549 350.865 163.496 350.865C197.442 350.865 250.202 333.038 250.202 333.038"
+        stroke="black"
+        stroke-width="12.1552"
+        stroke-linecap="round"
+      />
+      <circle
+        cx="24.1868"
+        cy="24.1868"
+        r="24.1868"
+        transform="matrix(-1 0 0 1 86.2664 96.417)"
+        fill="black"
+      />
+      <path
+        d="M58.0485 116.976L103.197 162.125"
+        stroke="black"
+        stroke-width="12.0934"
+      />
+      <circle cx="259.606" cy="120.604" r="24.1868" fill="black" />
+      <path
+        d="M264.04 116.976L218.891 162.125"
+        stroke="black"
+        stroke-width="12.0934"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M68.9449 264.934C55.909 258.728 48.3223 244.792 50.8637 230.58C61.7713 169.58 107.228 123.829 161.649 123.829C216.201 123.829 261.746 169.802 272.512 231.023C275.016 245.261 267.368 259.191 254.287 265.346C226.298 278.518 195.035 285.881 162.052 285.881C128.726 285.881 97.1564 278.364 68.9449 264.934Z"
+        fill="#FFDF6F"
+      />
+      <path
+        d="M272.512 231.023L266.557 232.07L272.512 231.023ZM68.9449 264.934L66.3459 270.394L68.9449 264.934ZM56.816 231.644C67.3556 172.702 110.923 129.876 161.649 129.876V117.782C103.534 117.782 56.1869 166.458 44.9114 229.515L56.816 231.644ZM161.649 129.876C212.497 129.876 256.154 172.911 266.557 232.07L278.468 229.976C267.339 166.693 219.905 117.782 161.649 117.782V129.876ZM251.713 259.875C224.512 272.676 194.126 279.834 162.052 279.834V291.927C195.943 291.927 228.084 284.36 256.862 270.818L251.713 259.875ZM162.052 279.834C129.645 279.834 98.9608 272.526 71.544 259.474L66.3459 270.394C95.3521 284.202 127.808 291.927 162.052 291.927V279.834ZM266.557 232.07C268.565 243.486 262.452 254.821 251.713 259.875L256.862 270.818C272.283 263.56 281.468 247.037 278.468 229.976L266.557 232.07ZM44.9114 229.515C41.8661 246.546 50.9775 263.077 66.3459 270.394L71.544 259.474C60.8406 254.379 54.7785 243.038 56.816 231.644L44.9114 229.515Z"
+        fill="black"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M92.2042 249.769C81.711 245.495 75.4866 234.331 79.1225 223.6C90.3356 190.507 123.045 166.559 161.649 166.559C200.253 166.559 232.962 190.507 244.175 223.6C247.811 234.331 241.587 245.495 231.094 249.769C209.662 258.497 186.217 263.306 161.649 263.306C137.081 263.306 113.636 258.497 92.2042 249.769Z"
+        fill="black"
+      />
+      <ellipse
+        cx="189.464"
+        cy="218.158"
+        rx="20.1557"
+        ry="16.1246"
+        fill="white"
+      />
+      <ellipse
+        cx="131.763"
+        cy="218.167"
+        rx="20.1557"
+        ry="16.1246"
+        fill="white"
+      />
+      <path
+        d="M557.311 263.36H514.751L535.551 204.16L557.311 263.36ZM507.391 134.4L425.791 352H483.711L498.751 309.12H573.951L589.631 355.2L646.911 349.44L565.631 134.4H507.391ZM721.131 352V126.08L662.891 129.6V352H721.131ZM782.494 352L811.294 322.88V126.08L753.054 129.6V352H782.494ZM792.414 257.28C798.6 250.88 804.36 245.76 809.694 241.92C815.027 238.08 820.254 236.16 825.374 236.16C831.56 236.16 836.68 237.547 840.734 240.32C845 243.093 848.2 247.253 850.334 252.8C852.68 258.133 853.854 264.747 853.854 272.64C853.854 280.533 852.68 287.36 850.334 293.12C847.987 298.88 844.894 303.253 841.054 306.24C837.214 309.227 832.84 310.72 827.934 310.72C822.387 310.72 816.627 309.227 810.654 306.24C804.68 303.04 798.6 298.56 792.414 292.8L776.094 327.04C782.067 333.867 788.04 339.413 794.014 343.68C800.2 347.733 806.387 350.72 812.574 352.64C818.974 354.56 825.374 355.52 831.774 355.52C848.2 355.52 862.494 352.427 874.654 346.24C887.027 340.053 896.627 330.773 903.454 318.4C910.494 306.027 914.014 290.667 914.014 272.32C914.014 253.76 910.494 238.507 903.454 226.56C896.627 214.613 887.24 205.76 875.294 200C863.347 194.24 849.694 191.36 834.334 191.36C826.44 191.36 818.76 192.747 811.294 195.52C803.827 198.293 797 201.92 790.814 206.4C784.84 210.667 779.934 215.147 776.094 219.84L792.414 257.28ZM971.616 352.64C970.55 355.627 967.776 358.613 963.296 361.6C958.816 364.587 953.696 367.36 947.936 369.92C942.39 372.48 937.056 374.827 931.936 376.96L951.456 422.08C961.696 419.733 971.616 416.107 981.216 411.2C990.816 406.293 999.243 400.32 1006.5 393.28C1013.75 386.24 1018.98 378.56 1022.18 370.24L1090.34 196.8H1032.42L1002.66 284.48L970.976 191.04L917.216 206.4L972.896 349.12L971.616 352.64Z"
+        fill="black"
+      />
+    </svg>
+  );
+}

src/pages/About.tsx

@@ -0,0 +1,36 @@
+import { Backbar } from "../components/Backbar";
+import { Footer } from "../components/Footer";
+
+export function About() {
+  return (
+    <>
+      <Backbar />
+      <div className="flex grow gap-5 flex-col justify-start items-center max-w-lg">
+        <h1 className="text-xl">About</h1>
+        <p>
+          BuzzPay is a simple PoS powered by Nostr Wallet Connect. It has only
+          limited access to your wallet: It can receive payments but not send
+          them. Once you've connected your wallet can easily share your PoS link
+          with your co-workers.
+        </p>
+        <p>
+          BuzzPay also works great as a PWA. Try it out by saving it to your
+          homescreen!
+        </p>
+        <p>
+          Do you have any feature requests, issues or would like to
+          contribute?&nbsp;
+          <a
+            href="https://github.com/getAlby/pos"
+            target="_blank"
+            className="link"
+          >
+            visit BuzzPay on Github
+          </a>
+          .
+        </p>
+      </div>
+      <Footer />
+    </>
+  );
+}

src/pages/Home.tsx

@@ -9,6 +9,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { BuzzPay } from "../components/icons/BuzzPay";
 import { localStorageKeys } from "../constants";
+import { Footer } from "../components/Footer";
 
 export function Home() {
   const navigate = useNavigate();
@@ -35,8 +36,8 @@ export function Home() {
 
   return (
     <>
-      <div className="flex justify-center items-center w-full h-full bg-primary">
-        <div className="flex flex-col justify-center items-center max-w-lg">
+      <div className="flex flex-col justify-center items-center w-full h-full bg-primary">
+        <div className="flex flex-1 flex-col justify-center items-center max-w-lg">
           <BuzzPay className="mb-8" />
 
           <p className="text-center mb-24">
@@ -82,6 +83,7 @@ export function Home() {
             Import wallet URL
           </button>
         </div>
+        <Footer />
       </div>
     </>
   );