-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(alby): add to apps section #632
- Loading branch information
1 parent
e1a4a09
commit 5022d1e
Showing
11 changed files
with
331 additions
and
85 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import { InformationCircleIcon, PlusIcon } from "@heroicons/react/24/outline"; | ||
| import { FC } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { AppStatus } from "../..//models/app-status"; | ||
| import { App } from "../..//models/app.model"; | ||
| import AppIcon from "../../components/AppIcon"; | ||
| import { toast } from "react-toastify"; | ||
| import { instance } from "../../utils/interceptor"; | ||
|
|
||
| export type Props = { | ||
| appInfo: App; | ||
| appStatusInfo: AppStatus; | ||
| onOpenDetails: (app: App) => void; | ||
| }; | ||
|
|
||
| export const AppCard: FC<Props> = ({ appInfo, onOpenDetails }) => { | ||
| const { id, name } = appInfo; | ||
| const { t } = useTranslation(); | ||
|
|
||
| const addAlbyAccountHandler = async () => { | ||
| const resp = await instance.get("/system/connection-info"); | ||
|
|
||
| if ( | ||
| resp.status !== 200 || | ||
| !resp.data.lnd_admin_macaroon || | ||
| !resp.data.lnd_rest_onion | ||
| ) { | ||
| toast.error(t(`appInfo.${id}.action.connection_info_error`)); | ||
| return; | ||
| } | ||
|
|
||
| const { lnd_admin_macaroon, lnd_rest_onion } = resp.data; | ||
|
|
||
| if (!window.alby) { | ||
| toast.error(t(`appInfo.${id}.action.connection.hint`)); | ||
| } | ||
|
|
||
| try { | ||
| await window.alby.enable(); | ||
|
|
||
| const result = await window.alby.addAccount({ | ||
| name: "⚡️ Raspiblitz", | ||
| connector: "lnd", | ||
| config: { | ||
| adminkey: lnd_admin_macaroon, | ||
| url: lnd_rest_onion, | ||
| }, | ||
| }); | ||
|
|
||
| if (result.success) { | ||
| toast.success(t(`appInfo.${id}.action.connection.success`)); | ||
| } else { | ||
| toast.error(t(`appInfo.${id}.action.connection.error`)); | ||
| } | ||
| } catch (e) { | ||
| toast.error(t(`appInfo.${id}.action.connection.error`)); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="bd-card transition-colors dark:bg-gray-800"> | ||
| <div className="relative mt-2 flex h-4/6 w-full flex-row items-center"> | ||
| {/* Icon */} | ||
| <div className="mt-4 flex w-1/4 items-center justify-center p-2"> | ||
| <AppIcon appId={id} className="max-h-12" /> | ||
| </div> | ||
| {/* Content */} | ||
| <div className="mt-4 flex w-3/4 flex-col items-start justify-center text-xl"> | ||
| <h4>{name}</h4> | ||
| <p className="overflow-ellipsis text-base text-gray-500 dark:text-gray-200"> | ||
| {t(`appInfo.${id}.shortDescription`)} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 py-4"> | ||
| {window.alby && ( | ||
| <button | ||
| className="bd-button flex w-1/2 items-center justify-center p-2 disabled:pointer-events-none" | ||
| onClick={addAlbyAccountHandler} | ||
| > | ||
| <PlusIcon className="inline h-6 w-6" /> | ||
| {t(`appInfo.${id}.action.addAccount`)} | ||
| </button> | ||
| )} | ||
|
|
||
| {!window.alby && ( | ||
| <a | ||
| className="bd-button flex w-1/2 items-center justify-center p-2 disabled:pointer-events-none" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| href="https://getalby.com" | ||
| > | ||
| {t(`appInfo.${id}.action.install`)} | ||
| </a> | ||
| )} | ||
|
|
||
| <button | ||
| className="flex w-1/2 items-center justify-center rounded p-2 shadow-md hover:bg-gray-300 dark:bg-gray-500 dark:hover:bg-gray-300 dark:hover:text-black" | ||
| onClick={() => onOpenDetails(appInfo)} | ||
| > | ||
| <InformationCircleIcon className="inline h-6 w-6" /> | ||
| {t("apps.info")} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AppCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,168 @@ | ||
| import { ChevronLeftIcon, PlusIcon } from "@heroicons/react/24/outline"; | ||
| import { FC, useEffect, useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import AppIcon from "../../components/AppIcon"; | ||
| import LoadingSpinner from "../../components/LoadingSpinner/LoadingSpinner"; | ||
| import { App } from "../../models/app.model"; | ||
| import { availableApps } from "../../utils/availableApps"; | ||
| import ImageCarousel from "./ImageCarousel"; | ||
| import { toast } from "react-toastify"; | ||
| import { instance } from "../../utils/interceptor"; | ||
|
|
||
| export type Props = { | ||
| app: App; | ||
| onClose: () => void; | ||
| }; | ||
|
|
||
| export const AppInfo: FC<Props> = ({ app, onClose }) => { | ||
| const { t } = useTranslation(); | ||
| const [isLoading, setIsLoading] = useState(true); | ||
| const [imgs, setImgs] = useState<string[]>([]); | ||
| const { id, name } = app; | ||
| const { author, repository } = availableApps.get(id)!; | ||
|
|
||
| useEffect(() => { | ||
| setIsLoading(true); | ||
|
|
||
| async function loadAppImages() { | ||
| const promises = await Promise.allSettled([ | ||
| import(`../../assets/apps/preview/${id}/1.png`), | ||
| import(`../../assets/apps/preview/${id}/2.png`), | ||
| import(`../../assets/apps/preview/${id}/3.png`), | ||
| ]); | ||
|
|
||
| promises.forEach((promise, i) => { | ||
| if (promise.status === "fulfilled") { | ||
| setImgs((prev) => { | ||
| prev[i] = promise.value.default; | ||
| return prev; | ||
| }); | ||
| } else { | ||
| // Ignore if image not available | ||
| } | ||
| }); | ||
| setIsLoading(false); | ||
| } | ||
|
|
||
| loadAppImages(); | ||
| }, [id]); | ||
|
|
||
| if (isLoading) { | ||
| return ( | ||
| <main className="page-container content-container flex w-full items-center justify-center bg-gray-100 dark:bg-gray-700 dark:text-white"> | ||
| <LoadingSpinner /> | ||
| </main> | ||
| ); | ||
| } | ||
|
|
||
| const addAlbyAccountHandler = async () => { | ||
| const resp = await instance.get("/system/connection-info"); | ||
|
|
||
| if ( | ||
| resp.status !== 200 || | ||
| !resp.data.lnd_admin_macaroon || | ||
| !resp.data.lnd_rest_onion | ||
| ) { | ||
| toast.error(t(`appInfo.${id}.action.connection_info_error`)); | ||
| return; | ||
| } | ||
|
|
||
| const { lnd_admin_macaroon, lnd_rest_onion } = resp.data; | ||
|
|
||
| if (!window.alby) { | ||
| toast.error(t(`appInfo.${id}.action.connection.hint`)); | ||
| } | ||
|
|
||
| try { | ||
| await window.alby.enable(); | ||
|
|
||
| const result = await window.alby.addAccount({ | ||
| name: "⚡️ Raspiblitz", | ||
| connector: "lnd", | ||
| config: { | ||
| adminkey: lnd_admin_macaroon, | ||
| url: lnd_rest_onion, | ||
| }, | ||
| }); | ||
|
|
||
| if (result.success) { | ||
| toast.success(t(`appInfo.${id}.action.connection.success`)); | ||
| } else { | ||
| toast.error(t(`appInfo.${id}.action.connection.error`)); | ||
| } | ||
| } catch (e) { | ||
| toast.error(t(`appInfo.${id}.action.connection.error`)); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <main className="page-container content-container w-full bg-gray-100 dark:bg-gray-700 dark:text-white"> | ||
| {/* Back Button */} | ||
| <section className="w-full px-5 py-9 dark:text-gray-200"> | ||
| <button | ||
| onClick={onClose} | ||
| className="flex items-center text-xl font-bold outline-none" | ||
| > | ||
| <ChevronLeftIcon className="inline-block h-5 w-5" /> | ||
| {t("navigation.back")} | ||
| </button> | ||
| </section> | ||
|
|
||
| {/* Image box with title */} | ||
| <section className="mb-5 flex w-full flex-wrap items-center justify-center"> | ||
| <AppIcon appId={id} className="max-h-12" /> | ||
| <h1 className="px-5 text-2xl dark:text-white">{name}</h1> | ||
| {window.alby && ( | ||
| <button | ||
| className="bd-button flex rounded p-2 disabled:pointer-events-none" | ||
| onClick={addAlbyAccountHandler} | ||
| > | ||
| <PlusIcon className="inline h-6 w-6" /> | ||
| {t(`appInfo.${id}.action.addAccount`)} | ||
| </button> | ||
| )} | ||
|
|
||
| {!window.alby && ( | ||
| <a | ||
| className="bd-button flex rounded p-2 disabled:pointer-events-none" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| href="https://getalby.com" | ||
| > | ||
| {t(`appInfo.${id}.action.install`)} | ||
| </a> | ||
| )} | ||
| </section> | ||
|
|
||
| <section className="text-center"> | ||
| {!isLoading && <ImageCarousel imgs={imgs} />} | ||
| </section> | ||
|
|
||
| {/* App Description */} | ||
| <section className="flex w-full items-center justify-center p-5"> | ||
| <article className="bd-card w-full"> | ||
| <h3 className="text-lg">{name}</h3> | ||
| <h4 className="my-2 text-gray-500 dark:text-gray-300"> | ||
| {t("apps.about")} | ||
| </h4> | ||
| <p>{t(`appInfo.${id}.about`)}</p> | ||
| <h4 className="my-2 text-gray-500 dark:text-gray-300"> | ||
| {t("apps.author")} | ||
| </h4> | ||
| <p>{author}</p> | ||
| <h4 className="my-2 text-gray-500 dark:text-gray-300"> | ||
| {t("apps.source")} | ||
| </h4> | ||
| <a | ||
| href={repository} | ||
| className="text-blue-400 underline dark:text-blue-300" | ||
| > | ||
| {repository} | ||
| </a> | ||
| </article> | ||
| </section> | ||
| </main> | ||
| ); | ||
| }; | ||
|
|
||
| export default AppInfo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.