WIP: onboarding for node_required accounts

src/app/router/Options/Options.tsx

@@ -34,6 +34,7 @@ import NostrSettings from "~/app/screens/Accounts/NostrSettings";
 
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
+import NodeSetup from "~/app/screens/Onboard/NodeSetup";
 import ReceiveInvoice from "~/app/screens/ReceiveInvoice";
 import ScanQRCode from "~/app/screens/ScanQRCode";
 import SendToBitcoinAddress from "~/app/screens/SendToBitcoinAddress";
@@ -81,6 +82,7 @@ function Options() {
             <Route path="lnurlAuth" element={<LNURLAuth />} />
             <Route path="settings" element={<Settings />} />
             <Route path="scanQRCode" element={<ScanQRCode />} />
+            <Route path="node-setup" element={<NodeSetup />} />
             <Route path="accounts">
               <Route index element={<Accounts />} />
               <Route path=":id" element={<AccountDetailLayout />}>

src/app/router/Welcome/Welcome.tsx

@@ -10,6 +10,7 @@ import Toaster from "~/app/components/Toast/Toaster";
 import { AccountProvider } from "~/app/context/AccountContext";
 import { SettingsProvider } from "~/app/context/SettingsContext";
 import { getConnectorRoutes, renderRoutes } from "~/app/router/connectorRoutes";
+import NodeSetup from "~/app/screens/Onboard/NodeSetup";
 import ChooseConnectorPath from "~/app/screens/connectors/ChooseConnectorPath";
 import i18n from "~/i18n/i18nConfig";
 
@@ -44,6 +45,7 @@ function Welcome() {
               </Route>
               <Route path="test-connection" element={<TestConnection />} />
               <Route path="pin-extension" element={<PinExtension />} />
+              <Route path="node-setup" element={<NodeSetup />} />
             </Route>
           </Routes>
         </Router>

src/app/screens/Onboard/NodeSetup/index.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import Button from "~/app/components/Button";
+import utils from "~/common/lib/utils";
+
+export default function NodeSetup() {
+  const { t: tCommon } = useTranslation("common");
+  return (
+    <div className="flex flex-col items-center mx-auto mt-14 max-w-2xl">
+      <h1 className="text-3xl font-bold text-center mb-4">Meet Alby Account</h1>
+      <p className="text-gray-600 text-center">
+        Your Alby Account{" "}
+        <span className="font-semibold">connects to your own wallet</span> and
+        gives your wallet super powers like a unique lightning address and the
+        ability to connect to various bitcoin apps.
+      </p>
+      <img
+        className="object-cover w-full h-full"
+        src="/assets/images/wallet.png"
+      />
+      <div className="flex mt-6">
+        <Button
+          label={tCommon("actions.continue")}
+          primary
+          flex
+          onClick={() =>
+            utils.openUrl("https://getalby.com/onboarding/node/new")
+          }
+        />
+      </div>
+    </div>
+  );
+}

src/app/screens/Onboard/TestConnection/index.tsx

@@ -29,7 +29,9 @@ export default function TestConnection() {
 
     try {
       const response = await api.getAccountInfo();
-      if (response.name) {
+      if (response.info.node_required) {
+        navigate("/node-setup");
+      } else if (response.name) {
         navigate("/pin-extension");
       } else {
         setErrorMessage(t("connection_error"));

src/app/screens/Options/TestConnection/index.tsx

@@ -14,7 +14,7 @@ import type { AccountInfo } from "~/types";
 
 export default function TestConnection() {
   const { getFormattedInCurrency } = useSettings();
-  const { setAccountId, fetchAccountInfo } = useAccount();
+  const { account, setAccountId, fetchAccountInfo } = useAccount();
   const { getAccounts } = useAccounts();
 
   const [accountInfo, setAccountInfo] = useState<{
@@ -130,6 +130,16 @@ export default function TestConnection() {
                     }
                   />
                 </div>
+                {account?.nodeRequired && (
+                  <div className="flex mt-6">
+                    <Button
+                      label={"Continue to Setup Node"}
+                      primary
+                      flex
+                      onClick={() => navigate("/node-setup")}
+                    />
+                  </div>
+                )}
               </div>
             )}
             {loading && (