diff --git a/package.json b/package.json index 6178d03c5d..c46c79c967 100644 --- 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 deleted file mode 100644 index b5e132c30f..0000000000 --- a/src/app/screens/Publishers.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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"; - -function Publishers() { - const [data, setData] = useState([]); - 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 ( - -

- ⚡️ Websites -

- -
- ); -} - -export default Publishers; diff --git a/src/app/screens/Publishers/index.tsx b/src/app/screens/Publishers/index.tsx new file mode 100644 index 0000000000..2a7b6a821e --- /dev/null +++ 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([]); + 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 ( + +

+ Your ⚡️ Websites +

+

+ Websites where you have used Alby before +

+ {data.length > 0 ? ( + + ) : ( +

No websites yet.

+ )} +

+ Other ⚡️ Websites +

+

Websites where you can use Alby

+
+ {websites.map(({ title, items }) => ( +
+

{title}

+
+ {items.map(({ title, subtitle, logo, url }) => ( + +
+
+ image +
+

+ {title} +

+

+ {subtitle} +

+
+
+
+
+ ))} +
+
+ ))} +
+
+ ); +} + +export default Publishers; diff --git a/src/app/screens/Publishers/websites.json b/src/app/screens/Publishers/websites.json new file mode 100644 index 0000000000..d589fd3181 --- /dev/null +++ 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 index b0fd2812e5..f68fabe9c5 100644 --- 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 index 601b485efc..6e4172398b 100644 --- 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 index 8f6458bb11..138fc985d9 100644 --- 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"