feat: responsive testconnection

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

@@ -1,5 +1,8 @@
+import { useTranslation } from "react-i18next";
+
 type Props = {
   alias: string;
+  accountName: string;
   satoshis: string;
   fiat?: string;
   color: string;
@@ -8,14 +11,23 @@ type Props = {
 
 export default function TestConnectionResultCard({
   alias,
+  accountName,
   satoshis,
   fiat,
   color,
   currency,
 }: Props) {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "welcome.test_connection",
+  });
   return (
     <div className={`${color} rounded-lg py-6 dark:bg-gray-600`}>
-      <p className="font-normal text-black ml-6 dark:text-white">{alias}</p>
+      <p className="font-normal text-black ml-6 dark:text-white break-words">
+        {t("account_name", { accountName })}
+      </p>
+      <p className="font-normal text-black ml-6 dark:text-white">
+        {t("alias", { alias })}
+      </p>
       <p className="text-2xl font-bold text-black ml-6 mt-2 dark:text-white">
         {satoshis}
       </p>

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

@@ -123,7 +123,8 @@ export default function TestConnection() {
                 <div className="mt-6">
                   <TestConnectionResultCard
                     color="bg-gray-100"
-                    alias={`${accountInfo.name} - ${accountInfo.alias}`}
+                    accountName={accountInfo.name}
+                    alias={accountInfo.alias}
                     satoshis={
                       typeof accountInfo.balance === "number"
                         ? getFormattedInCurrency(

src/i18n/locales/en/translation.json

@@ -26,7 +26,9 @@
         "contact_support": "If you need help please contact [email protected]",
         "actions": {
           "delete_edit_account": "Delete invalid account and edit again"
-        }
+        },
+        "account_name": "Account Name: {{accountName}}",
+        "alias": "Alias: {{alias}}"
       },
       "pin_extension": {
         "title": "Pin your Alby extension",