feat: new onboarding

package.json

@@ -42,6 +42,7 @@
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
     "@noble/curves": "^1.1.0",
     "@noble/secp256k1": "^2.0.0",
+    "@popicons/react": "^0.0.8",
     "@scure/bip32": "^1.3.1",
     "@scure/bip39": "^1.2.1",
     "@tailwindcss/forms": "^0.5.4",

src/app/components/ConnectorPath/index.tsx

@@ -3,16 +3,18 @@ type Props = {
   description: string;
   content: React.ReactNode;
   actions: React.ReactNode;
+  icon: React.ReactNode;
 };
 
-function ConnectorPath({ title, description, content, actions }: Props) {
+function ConnectorPath({ title, icon, description, content, actions }: Props) {
   return (
-    <div className="shadow-lg p-10 rounded-xl bg-white dark:bg-surface-02dp text-center">
-      <h1 className="text-2xl font-bold dark:text-white">{title}</h1>
-      <p className="text-gray-500 mt-4 dark:text-neutral-400 min-h-[48px]">
-        {description}
-      </p>
-      <div className="lg:h-56 py-4 flex flex-col justify-center items-center">
+    <div className="flex flex-col p-10 border border-neutral-200 dark:border-neutral-700 rounded-2xl bg-white dark:bg-surface-02dp">
+      <div className="flex flex-row items-center mb-4 space-x-3">
+        {icon}
+        <h1 className="text-xl font-bold dark:text-white">{title}</h1>
+      </div>
+      <p className="text-gray-800 dark:text-neutral-200 mb-6">{description}</p>
+      <div className="flex flex-col space-y-4 text-sm mb-8 dark:text-white">
         {content}
       </div>
       <div className="flex gap-4 flex-col sm:flex-row">{actions}</div>

src/app/components/LinkButton/index.tsx

@@ -8,9 +8,9 @@ type Props = {
 
 export default function LinkButton({ to, title, logo }: Props) {
   return (
-    <Link to={to} className="block">
-      <div className="p-4 bg-white dark:bg-surface-02dp h-64 lg:h-80 text-center shadow overflow-hidden border-b border-gray-300 dark:border-neutral-700 rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200">
-        <div className="my-4 lg:my-12">
+    <Link to={to}>
+      <div className="p-10 h-72 border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-surface-02dp text-center overflow-hidden rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200 flex flex-col justify-center space-y-4">
+        <div>
           <img src={logo} alt="logo" className="inline rounded-3xl w-32" />
         </div>
         <div>

src/app/router/connectorRoutes.tsx

@@ -14,6 +14,7 @@ import ConnectUmbrel from "@screens/connectors/ConnectUmbrel";
 import { Route } from "react-router-dom";
 import i18n from "~/i18n/i18nConfig";
 
+import ConnectVoltage from "~/app/screens/connectors/ConnectVoltage";
 import ConnectNWC from "~/app/screens/connectors/ConnectNWC";
 import ConnectCommando from "../screens/connectors/ConnectCommando";
 import btcpay from "/static/assets/icons/btcpay.svg";
@@ -32,6 +33,7 @@ import nwc from "/static/assets/icons/nwc.svg";
 import raspiblitz from "/static/assets/icons/raspiblitz.png";
 import start9 from "/static/assets/icons/start9.png";
 import umbrel from "/static/assets/icons/umbrel.png";
+import voltage from "/static/assets/icons/voltage.png";
 
 export const normalizeKey = (key: string) =>
   key as unknown as TemplateStringsArray;
@@ -97,6 +99,12 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.lnd.title"),
     logo: lnd,
   },
+  "voltage-lnd": {
+    path: "lnd",
+    element: <ConnectVoltage />,
+    title: i18n.t("translation:choose_connector.lnd.title"),
+    logo: lnd,
+  },
   lnc: {
     path: "lnc",
     element: <ConnectLnc />,
@@ -151,6 +159,12 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.btcpay.title"),
     logo: btcpay,
   },
+  voltage: {
+    path: "voltage",
+    element: <ConnectVoltage />,
+    title: i18n.t("translation:choose_connector.voltage.title"),
+    logo: voltage,
+  },
   nwc: {
     path: "nwc",
     element: <ConnectNWC />,
@@ -237,6 +251,7 @@ function getConnectorRoutes(): ConnectorRoute[] {
     connectorMap["lnd-hub-go"],
     connectorMap["eclair"],
     connectorMap["btcpay"],
+    connectorMap["voltage"],
     connectorMap[galoyPaths.blink],
     connectorMap[galoyPaths.bitcoinJungle],
     getDistribution("citadel"),

src/app/screens/connectors/ChooseConnector/index.tsx

@@ -14,28 +14,26 @@ export default function ChooseConnector({
 }: Props) {
   return (
     <>
-      <div className="relative mt-14 mb-4 lg:mb-14 lg:grid lg:gap-8 text-center">
-        <div className="relative">
-          <div className="mb-6 flex flex-col items-center w-full">
-            <h1 className="text-3xl font-bold dark:text-white max-md:w-64">
-              {title}
-            </h1>
-            {description && (
-              <p className="text-gray-500 mt-6 dark:text-neutral-400">
-                {description}
-              </p>
-            )}
-          </div>
-          <div className="flex flex-row flex-wrap justify-center -mb-4 -mx-2">
-            {connectorRoutes.map(({ path, title, logo }) => (
-              <div
-                key={path}
-                className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4 px-2"
-              >
-                <LinkButton to={path} title={title} logo={logo} />
-              </div>
-            ))}
-          </div>
+      <div className="mt-14 mb-4 lg:mb-14 lg:grid lg:gap-8 text-center">
+        <div className="mb-6 flex flex-col items-center w-full">
+          <h1 className="text-3xl font-bold dark:text-white max-md:w-64">
+            {title}
+          </h1>
+          {description && (
+            <p className="text-gray-500 mt-6 dark:text-neutral-400">
+              {description}
+            </p>
+          )}
+        </div>
+        <div className="flex flex-row flex-wrap justify-center -mb-4 -mx-2">
+          {connectorRoutes.map(({ path, title, logo }) => (
+            <div
+              key={path}
+              className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4 px-2"
+            >
+              <LinkButton to={path} title={title} logo={logo} />
+            </div>
+          ))}
         </div>
       </div>
     </>

src/app/screens/connectors/ChooseConnectorPath/index.tsx

@@ -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>
+);

src/app/screens/connectors/ConnectAlby/index.tsx

@@ -78,8 +78,8 @@ export default function ConnectAlby() {
       label={t("connect")}
       loading={loading}
       disabled={loading}
-      primary
       flex
+      outline
       onClick={connectAlby}
     />
   );