Merge pull request #3248 from getAlby/onboarding-cards

onboarding for node_required accounts
getAlby · Oct 10, 2024 · 92b5255 · 92b5255
2 parents 82d3863 + cf21f3b
commit 92b5255
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 12 deletions.
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
@@ -173,7 +173,7 @@ const DefaultView: FC<Props> = (props) => {
           </Alert>
         )}
         {account?.nodeRequired ? (
-          <Alert type="warn">
+          <Alert type="info">
             <div className="flex items-center gap-2">
               <div className="shrink-0">
                 <PopiconsCircleExclamationLine className="w-5 h-5" />
@@ -186,7 +186,7 @@ const DefaultView: FC<Props> = (props) => {
                     // eslint-disable-next-line react/jsx-key
                     <a
                       className="underline"
-                      href="https://getalby.com"
+                      href="https://getalby.com/onboarding/node/new"
                       target="_blank"
                       rel="noreferrer"
                     />,

diff --git a/src/app/screens/Options/TestConnection/index.tsx b/src/app/screens/Options/TestConnection/index.tsx
@@ -1,9 +1,13 @@
 import Button from "@components/Button";
 import Loading from "@components/Loading";
-import { PopiconsBadgeCheckSolid } from "@popicons/react";
+import {
+  PopiconsBadgeCheckSolid,
+  PopiconsCircleExclamationLine,
+} from "@popicons/react";
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import Alert from "~/app/components/Alert";
 import { useAccount } from "~/app/context/AccountContext";
 import { useAccounts } from "~/app/context/AccountsContext";
 import { useSettings } from "~/app/context/SettingsContext";
@@ -14,7 +18,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<{
@@ -78,7 +82,7 @@ export default function TestConnection() {
 
   return (
     <div>
-      <div className="relative mt-14 lg:grid lg:grid-cols-2 lg:gap-8 bg-white dark:bg-surface-02dp p-12 shadow rounded-lg">
+      <div className="relative mt-14 lg:grid lg:grid-cols-1 lg:gap-8 bg-white dark:bg-surface-02dp p-12 shadow rounded-lg">
         <div className="relative">
           <div>
             {errorMessage && (
@@ -113,9 +117,36 @@ export default function TestConnection() {
                 </div>
 
                 <p className="mt-6 dark:text-gray-400"></p>
-                <p className="mt-6 dark:text-neutral-400">{t("ready")}</p>
+                {account?.nodeRequired ? (
+                  <div className="mt-6">
+                    <Alert type="info">
+                      <div className="flex items-center gap-2">
+                        <div className="shrink-0">
+                          <PopiconsCircleExclamationLine className="w-5 h-5" />
+                        </div>
+                        <span className="text-sm">
+                          <Trans
+                            i18nKey={"node_required"}
+                            t={t}
+                            components={[
+                              // eslint-disable-next-line react/jsx-key
+                              <a
+                                className="underline"
+                                href="https://getalby.com/onboarding/node/new"
+                                target="_blank"
+                                rel="noreferrer"
+                              />,
+                            ]}
+                          />
+                        </span>
+                      </div>
+                    </Alert>
+                  </div>
+                ) : (
+                  <p className="mt-6 dark:text-neutral-400">{t("ready")}</p>
+                )}
 
-                <div className="mt-6">
+                <div className="mt-6 lg:grid lg:grid-cols-2">
                   <TestConnectionResultCard
                     color="bg-gray-100"
                     accountName={accountInfo.name}

diff --git a/src/i18n/locales/de/translation.json b/src/i18n/locales/de/translation.json
@@ -432,7 +432,6 @@
             "description": "Erstelle einen Master Key für Bitcoin, Nostr und Liquid oder importiere ein bestehendes Nostr-Konto."
           }
         },
-        "node_required": "Ihr Alby-Konto benötigt eine Brieftasche. Verbinde deine Brieftasche mit deinem Konto auf <0>getalby.com</0>",
         "upgrade_account": "Du verwendest die alte LNDHub-Einstellung. <0>Bitte verbinde dich erneut</0> mit deinem Alby-Konto, um Zugang zu den neuesten Funktionen zu erhalten."
       },
       "allowance_view": {

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -24,6 +24,7 @@
         "review_connection_details": "Please review your connection details.",
         "connection_taking_long": "Trying to connect takes longer than expected... Are your details correct? Is your node reachable?",
         "contact_support": "If you need help please contact support@getalby.com",
+        "node_required": "The extension is configured, but to be able to send and receive payments finish the wallet configuration for your <0>Alby account</0>.",
         "actions": {
           "delete_edit_account": "Delete invalid account and edit again"
         }
@@ -406,7 +407,7 @@
             "description": "Fund your account and receive via your lightning address or an invoice"
           }
         },
-        "node_required": "Your Alby Account needs a wallet. Connect a wallet to your account on <0>getalby.com</0>",
+        "node_required": "Your Alby Account does not have a wallet configured. To be able to send and receive payments finish the wallet configuration for your <0>Alby account</0>.",
         "upgrade_account": "You are using the old LNDHub setup. <0>Please re-connect</0> your Alby account to get access to the latest features."
       }
     },

diff --git a/src/i18n/locales/fi/translation.json b/src/i18n/locales/fi/translation.json
@@ -332,7 +332,6 @@
             "description": "Rahoita tiliäsi ja vastaanota Lightning-osoitteesi tai laskun kautta"
           }
         },
-        "node_required": "Alby-tilisi tarvitsee lompakon. Yhdistä lompakko tiliisi <0>getalby.com</0>:ssa",
         "upgrade_account": "Käytät vanhaa LNDHub-kokoonpanoa. <0>Yhdistä uudelleen</0> Alby-tilisi, jotta pääset käyttämään uusimpia ominaisuuksia.",
         "no_transactions": "Ei vielä tapahtumia tällä tilillä.",
         "block_removed": "Käytössä {{host}}. Ole hyvä ja lataa verkkosivusto uudelleen.",

diff --git a/src/i18n/locales/zh_Hans/translation.json b/src/i18n/locales/zh_Hans/translation.json
@@ -321,7 +321,6 @@
       "default_view": {
         "is_blocked_hint": "Alby 目前在 {{host}} 上被禁用",
         "block_removed": "启用了{{host}}。请重新加载网站。",
-        "node_required": "你的 Albby 账户需要设置一个钱包。前往 <0>getalby.com</0> 连接你的钱包",
         "actions": {
           "setup_keys": {},
           "get_started": {