From f86e2058344510256b918292227ae5f245c4b825 Mon Sep 17 00:00:00 2001 From: Roland Bewick Date: Sat, 6 Jan 2024 18:48:05 +0700 Subject: [PATCH] feat: add about page and footer component --- README.md | 2 + src/App.tsx | 2 + src/components/Footer.tsx | 10 +++ src/components/Navbar.tsx | 11 +++ src/components/icons/AlbyLogo.tsx | 110 ++++++++++++++++++++++++++++++ src/pages/About.tsx | 36 ++++++++++ src/pages/Home.tsx | 6 +- 7 files changed, 175 insertions(+), 2 deletions(-) create mode 100644 src/components/Footer.tsx create mode 100644 src/components/icons/AlbyLogo.tsx create mode 100644 src/pages/About.tsx diff --git a/README.md b/README.md index 51f1df3..59760bb 100644 --- a/README.md +++ b/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 diff --git a/src/App.tsx b/src/App.tsx index c1da622..24c34d8 100644 --- a/src/App.tsx +++ b/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() { + diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..8795f24 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,10 @@ +import { AlbyLogo } from "../components/icons/AlbyLogo"; + +export function Footer() { + return ( +
+ Made with love by + +
+ ); +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 950cd84..6271372 100644 --- a/src/components/Navbar.tsx +++ b/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() { Log out +
  • + { + window.localStorage.removeItem(localStorageKeys.nwcUrl); + }} + > + About BuzzPay + +
    • diff --git a/src/components/icons/AlbyLogo.tsx b/src/components/icons/AlbyLogo.tsx new file mode 100644 index 0000000..06a6e9e --- /dev/null +++ b/src/components/icons/AlbyLogo.tsx @@ -0,0 +1,110 @@ +type Props = { + className?: string; +}; + +export function AlbyLogo({ className }: Props) { + return ( + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/pages/About.tsx b/src/pages/About.tsx new file mode 100644 index 0000000..177f123 --- /dev/null +++ b/src/pages/About.tsx @@ -0,0 +1,36 @@ +import { Backbar } from "../components/Backbar"; +import { Footer } from "../components/Footer"; + +export function About() { + return ( + <> + +
    +

    About

    +

    + 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. +

    +

    + BuzzPay also works great as a PWA. Try it out by saving it to your + homescreen! +

    +

    + Do you have any feature requests, issues or would like to + contribute?  + + visit BuzzPay on Github + + . +

    +
    +