Merge pull request #490 from umarrg/website-screen

feat: websites where you can use alby
getAlby · Apr 25, 2022 · 91f83d1 · 91f83d1
1 parent 25bb995
commit 91f83d1
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "@headlessui/react": "^1.5.0",
     "@runcitadel/sdk": "^0.3.8",
     "@tailwindcss/forms": "^0.5.0",
+    "@tailwindcss/line-clamp": "^0.3.1",
     "axios": "^0.26.1",
     "bech32": "^2.0.0",
     "browser-polyfill": "^3.20.2",

diff --git a/src/app/screens/Publishers.tsx b/src/app/screens/Publishers.tsx
diff --git a/src/app/screens/Publishers/index.tsx b/src/app/screens/Publishers/index.tsx
@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import Container from "@components/Container";
+import PublishersTable from "@components/PublishersTable";
+
+import { Allowance } from "~/types";
+import utils from "~/common/lib/utils";
+import websites from "./websites.json";
+
+function Publishers() {
+  const [data, setData] = useState<Allowance[]>([]);
+  const navigate = useNavigate();
+
+  function navigateToPublisher(id: string) {
+    navigate(`/publishers/${id}`);
+  }
+
+  async function fetchData() {
+    try {
+      const response = await utils.call<{
+        allowances: Allowance[];
+      }>("listAllowances");
+      const allowances = response.allowances.map((allowance) => {
+        if (allowance.enabled && allowance.remainingBudget > 0) {
+          return {
+            ...allowance,
+            badge: {
+              label: "ACTIVE",
+              color: "green-bitcoin",
+              textColor: "white",
+            },
+          };
+        }
+        return allowance;
+      });
+      setData(allowances);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <Container>
+      <h2 className="mt-12 mb-2 text-2xl font-bold dark:text-white">
+        Your ⚡️ Websites
+      </h2>
+      <p className="mb-6 text-gray-500">
+        Websites where you have used Alby before
+      </p>
+      {data.length > 0 ? (
+        <PublishersTable
+          publishers={data}
+          navigateToPublisher={navigateToPublisher}
+        />
+      ) : (
+        <p>No websites yet.</p>
+      )}
+      <h2 className="mt-12 mb-2 text-2xl font-bold dark:text-white">
+        Other ⚡️ Websites
+      </h2>
+      <p className="mb-6 text-gray-500">Websites where you can use Alby</p>
+      <div className="mb-12">
+        {websites.map(({ title, items }) => (
+          <div className="mb-6" key={title}>
+            <h4 className="mb-4 text-xl font-bold">{title}</h4>
+            <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+              {items.map(({ title, subtitle, logo, url }) => (
+                <a key={url} href={url} target="_blank" rel="noreferrer">
+                  <div className="bg-white shadow-md flex p-4 h-32 rounded-lg hover:bg-gray-50 cursor-pointer w-full">
+                    <div className="flex space-x-3">
+                      <img
+                        src={logo}
+                        alt="image"
+                        className="h-14 w-14 rounded-xl shadow-md object-cover"
+                      />
+                      <div>
+                        <h2 className="font-medium font-serif text-base">
+                          {title}
+                        </h2>
+                        <p className="font-serif text-sm font-normal text-gray-500 line-clamp-3">
+                          {subtitle}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Container>
+  );
+}
+
+export default Publishers;
diff --git a/src/app/screens/Publishers/websites.json b/src/app/screens/Publishers/websites.json
@@ -0,0 +1,123 @@
+[
+  {
+    "title": "Trading",
+    "items": [
+      {
+        "title": "LNMarkets",
+        "subtitle": "Instant Bitcoin derivatives trading",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/lnmarketes.svg",
+        "url": "https://lnmarkets.com/"
+      },
+      {
+        "title": "Kollider",
+        "subtitle": "Instant Bitcoin derivatives trading",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/kollider_thumbnail.svg",
+        "url": "https://kollider.xyz/"
+      },
+      {
+        "title": "LOFT",
+        "subtitle": "Trade investment products in Bitcoin",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/loft-trade_thumbnail.svg",
+        "url": "https://loft.trade/"
+      }
+    ]
+  },
+  {
+    "title": "Gaming",
+    "items": [
+      {
+        "title": "LNGames",
+        "subtitle": "Simple Lightning Network games",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/lngames_thumbnail.svg",
+        "url": "https://lngames.net/"
+      },
+      {
+        "title": "Lightning Poker",
+        "subtitle": "Play Poker with Bitcoin",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/lightning-poker_thumbnail.svg",
+        "url": "https://lightning-poker.com/"
+      },
+      {
+        "title": "LNBlackJack",
+        "subtitle": "Play Blackjack with Bitcoin",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/lnblackjack_thumbnail.svg",
+        "url": "https://www.lnblackjack.com/"
+      },
+      {
+        "title": "Lightning Roulette",
+        "subtitle": "Play Roulette with Bitcoin",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/lightning-roulette_thumbnail.svg",
+        "url": "https://lightning-roulette.com/"
+      }
+    ]
+  },
+  {
+    "title": "Entertaiment",
+    "items": [
+      {
+        "title": "Stacker.News",
+        "subtitle": "Lightning powered Bitcoin news site",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/stacker-news_thumbnail.svg",
+        "url": "https://stacker.news/"
+      },
+      {
+        "title": "Wavlake",
+        "subtitle": "Lightning powered music player",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/wavlake.svg",
+        "url": "https://www.wavlake.com/"
+      },
+      {
+        "title": "Y'alls",
+        "subtitle": "Articles about the Lightning Network",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/yalls.svg",
+        "url": "https://yalls.org/"
+      }
+    ]
+  },
+  {
+    "title": "Shopping",
+    "items": [
+      {
+        "title": "Bitrefill",
+        "subtitle": "Buy vouchers, refill your phone or pay your bills",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/bitrefill_thumbnail.svg",
+        "url": "https://www.bitrefill.com/?hl=en"
+      },
+      {
+        "title": "Lightning Network Stores",
+        "subtitle": "Collection of stores and websites accepting Bitcoin payments",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/lightning-network-stores_thumbnail.svg",
+        "url": "https://lightningnetworkstores.com/"
+      }
+    ]
+  },
+  {
+    "title": "Miscellaneous",
+    "items": [
+      {
+        "title": "WebLN Experiments",
+        "subtitle": "A collection of Lightning web apps",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/twentyuno.svg",
+        "url": "https://webln.twentyuno.net/"
+      },
+      {
+        "title": "Sparkshot",
+        "subtitle": "Art created and funded by the community",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/sparkshot_thumbnail.svg",
+        "url": "https://sparkshot.io/"
+      },
+      {
+        "title": "Sats for Likes",
+        "subtitle": "Earn sats for accomplishing tasks",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/sats4likes.svg",
+        "url": "https://kriptode.com/satsforlikes/index.html"
+      },
+      {
+        "title": "Amboss Space",
+        "subtitle": "Lightning Network node explorer",
+        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/amboss-space_thumbnail.svg",
+        "url": "https://amboss.space/"
+      }
+    ]
+  }
+]
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1,9 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
-  darkMode: 'class',
+  darkMode: "class",
   content: ["./static/views/**/*.html", "./src/app/**/*.{js,ts,jsx,tsx}"],
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/line-clamp")],
   theme: {
     extend: {
       animation: {

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,7 @@
     "outDir": "built",
     "strict": true,
     "baseUrl": ".",
-    "paths": { 
+    "paths": {
       "~/*": ["./src/*"],
       "@components/*": ["./src/app/components/*"],
       "@screens/*": ["./src/app/screens/*"]

diff --git a/yarn.lock b/yarn.lock
@@ -4147,6 +4147,11 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tailwindcss/line-clamp@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.3.1.tgz#4d8441b509b87ece84e94f28a4aa9998413ab849"
+  integrity sha512-pNr0T8LAc3TUx/gxCfQZRe9NB2dPEo/cedPHzUGIPxqDMhgjwNm6jYxww4W5l0zAsAddxr+XfZcqttGiFDgrGg==
+
 "@testing-library/dom@^8.5.0":
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"