forked from getAlby/lightning-browser-extension
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: new onboarding * fix: links * fix: translations & buttons * fix: remove fixed width * fix: translations * fix: text color * fix: update link * fix: connector screen * feat: voltage connector * fix: default name * fix: react keys --------- Co-authored-by: Michael Bumann <[email protected]>
- Loading branch information
Showing
11 changed files
with
351 additions
and
77 deletions.
There are no files selected for viewing
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
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
149 changes: 113 additions & 36 deletions
149
src/app/screens/connectors/ChooseConnectorPath/index.tsx
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 |
|---|---|---|
| @@ -1,66 +1,143 @@ | ||
| import { | ||
| PopiconsCircleCheckLine, | ||
| PopiconsCircleExclamationLine, | ||
| PopiconsCircleXLine, | ||
| } from "@popicons/react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { Link } from "react-router-dom"; | ||
| import Button from "~/app/components/Button"; | ||
| import ConnectorPath from "~/app/components/ConnectorPath"; | ||
| import { getConnectorRoutes } from "~/app/router/connectorRoutes"; | ||
| import ConnectAlby from "~/app/screens/connectors/ConnectAlby"; | ||
| import i18n from "~/i18n/i18nConfig"; | ||
|
|
||
| import alby from "/static/assets/icons/alby.png"; | ||
|
|
||
| export default function ChooseConnectorPath() { | ||
| let connectorRoutes = getConnectorRoutes(); | ||
|
|
||
| i18n.on("languageChanged", () => { | ||
| connectorRoutes = getConnectorRoutes(); | ||
| }); | ||
| const { t } = useTranslation("translation", { | ||
| keyPrefix: "choose_path", | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="relative mt-10 lg:grid lg:gap-8 text-center"> | ||
| <div className="relative mt-10 lg:grid lg:gap-8"> | ||
| <div className="relative"> | ||
| <div className="grid lg:grid-cols-2 gap-10 mb-4"> | ||
| <h1 className="text-2xl font-bold dark:text-white text-center mb-8"> | ||
| {t("title")} | ||
| </h1> | ||
| <div className="grid lg:grid-cols-3 gap-5 mb-4"> | ||
| <ConnectorPath | ||
| title={t("alby.title")} | ||
| description={t("alby.description")} | ||
| title={t("other.title")} | ||
| icon={ | ||
| <div className="grid grid-cols-2 gap-1"> | ||
| <img | ||
| src="assets/icons/lnd.png" | ||
| className="w-[18px] h-[18px] rounded-md" | ||
| /> | ||
| <img | ||
| src="assets/icons/umbrel.png" | ||
| className="w-[18px] h-[18px] rounded-md" | ||
| /> | ||
| <img | ||
| src="assets/icons/btcpay.svg" | ||
| className="w-[18px] h-[18px] rounded-md" | ||
| /> | ||
| <img | ||
| src="assets/icons/core_ln.png" | ||
| className="w-[18px] h-[18px] rounded-md" | ||
| /> | ||
| </div> | ||
| } | ||
| description={t("other.description")} | ||
| content={ | ||
| <img src={alby} alt="logo" className="inline rounded-3xl w-32" /> | ||
| <> | ||
| <FeatureItem type="success">{t("other.point1")}</FeatureItem> | ||
| <FeatureItem type="success">{t("other.point2")}</FeatureItem> | ||
| <FeatureItem type="success">{t("other.point3")}</FeatureItem> | ||
| <FeatureItem type="disabled">{t("other.point4")}</FeatureItem> | ||
| </> | ||
| } | ||
| actions={ | ||
| <Link to="choose-connector" className="flex flex-1"> | ||
| <Button tabIndex={-1} label={t("other.connect")} primary flex /> | ||
| </Link> | ||
| } | ||
| actions={<ConnectAlby />} | ||
| /> | ||
| <ConnectorPath | ||
| title={t("other.title")} | ||
| description={t("other.description")} | ||
| title={t("voltage.title")} | ||
| icon={<img src="assets/icons/voltage.png" className="w-10 h-10" />} | ||
| description={t("voltage.description")} | ||
| content={ | ||
| <> | ||
| <FeatureItem type="success">{t("voltage.point1")}</FeatureItem> | ||
| <FeatureItem type="success">{t("voltage.point2")}</FeatureItem> | ||
| <FeatureItem type="success">{t("voltage.point3")}</FeatureItem> | ||
| <FeatureItem type="success">{t("voltage.point4")}</FeatureItem> | ||
| </> | ||
| } | ||
| actions={ | ||
| <Link | ||
| to="choose-connector" | ||
| className="flex flex-wrap gap-6 w-72 lg:w-80 mx-auto my-5 items-center" | ||
| tabIndex={-1} | ||
| to="/accounts/new/choose-connector/voltage" | ||
| rel="noreferrer noopener" | ||
| className="flex flex-1" | ||
| > | ||
| {connectorRoutes.slice(1, 8).map(({ path, title, logo }) => ( | ||
| <img | ||
| key={path} | ||
| title={title} | ||
| src={logo} | ||
| alt="logo" | ||
| className="inline rounded-lg w-12" | ||
| /> | ||
| ))} | ||
| <p className="text-gray-500 dark:text-neutral-400"> | ||
| {t("other.and_more")} | ||
| </p> | ||
| <Button | ||
| tabIndex={-1} | ||
| label={t("voltage.connect")} | ||
| primary | ||
| flex | ||
| /> | ||
| </Link> | ||
| } | ||
| actions={ | ||
| <Link to="choose-connector" className="flex flex-1"> | ||
| <Button tabIndex={-1} label={t("other.connect")} primary flex /> | ||
| </Link> | ||
| /> | ||
| <ConnectorPath | ||
| title={t("alby.title")} | ||
| icon={ | ||
| <img | ||
| src="assets/icons/alby.png" | ||
| className="w-10 h-10 rounded-md" | ||
| /> | ||
| } | ||
| description={t("alby.description")} | ||
| content={ | ||
| <> | ||
| <FeatureItem type="warning">{t("alby.point1")}</FeatureItem> | ||
| <FeatureItem type="warning">{t("alby.point2")}</FeatureItem> | ||
| <FeatureItem type="success">{t("alby.point3")}</FeatureItem> | ||
| <FeatureItem type="success">{t("alby.point4")}</FeatureItem> | ||
| </> | ||
| } | ||
| actions={<ConnectAlby />} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const FeatureItem = ({ | ||
| type, | ||
| children, | ||
| }: { | ||
| type: "success" | "disabled" | "warning"; | ||
| children: React.ReactNode; | ||
| }) => ( | ||
| <div className="flex flex-row items-center space-2"> | ||
| <div className="mr-2"> | ||
| {type == "success" && ( | ||
| <PopiconsCircleCheckLine | ||
| key="success" | ||
| className="text-green-600 dark:text-green-400 w-6 h-6" | ||
| /> | ||
| )} | ||
| {type == "disabled" && ( | ||
| <PopiconsCircleXLine | ||
| key="disabled" | ||
| className="text-gray-400 dark:text-neutral-500 w-6 h-6" | ||
| /> | ||
| )} | ||
| {type == "warning" && ( | ||
| <PopiconsCircleExclamationLine | ||
| key="warning" | ||
| className="text-orange-500 w-6 h-6" | ||
| /> | ||
| )} | ||
| </div> | ||
| <div className="grow">{children}</div> | ||
| </div> | ||
| ); |
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.