Add explainer tooltip to connect UI

nimiq · Dec 1, 2022 · ea69e27 · ea69e27
1 parent 48f2c19
commit ea69e27
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 10 deletions.
diff --git a/src/request/connect/Connect.css b/src/request/connect/Connect.css
@@ -48,6 +48,32 @@
     line-height: 1.375;
 }
 
+.tooltip {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.tooltip .nq-icon {
+    display: block;
+    opacity: 0.3;
+}
+
+.tooltip-box {
+    width: 28rem;
+    text-align: left;
+    right: -2.5rem;
+}
+
+.tooltip-box p {
+    margin: 0;
+    font-size: 2rem;
+    line-height: 1.3;
+}
+
+.tooltip-box p + p {
+    margin-top: 1rem;
+}
+
 .password-box {
     margin-top: 1rem;
 }
diff --git a/src/request/connect/index.html b/src/request/connect/index.html
@@ -56,6 +56,7 @@
     <link rel="stylesheet" bundle-toplevel href="../../components/PasswordInput.css">
     <link rel="stylesheet" bundle-toplevel href="../../components/PasswordBox.css">
 
+    <link rel="stylesheet" href="../../components/Tooltip.css">
     <link rel="stylesheet" href="../../components/LoginFileAccountIcon.css">
     <link rel="stylesheet" href="Connect.css">
 </head>
@@ -87,10 +88,24 @@ <h1 class="nq-h1">
 
                 <div class="flex-grow"></div>
 
-                <p class="bottom-explainer">
+                <div class="bottom-explainer">
                     The connection is for approving only.<br>
                     Your funds remain unaffected.
-                </p>
+                    <div class="tooltip top" tabindex="0">
+                        <svg class="nq-icon"><use xlink:href="../../../node_modules/@nimiq/style/nimiq-style.icons.svg#nq-info-circle-small"/></svg>
+                        <div class="tooltip-box">
+                            <p data-i18n="connect-tooltip-multisig-1">
+                                Your account will be used to verify your identity only.
+                            </p>
+                            <p data-i18n="connect-tooltip-multisig-2">
+                                The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.
+                            </p>
+                            <p data-i18n="connect-tooltip-multisig-3">
+                                The first address of your account will be visible to all participants in your shared wallet.
+                            </p>
+                        </div>
+                    </div>
+                </div>
             </div>
 
             <div class="page-footer nq-card-footer">

diff --git a/src/translations/de.json b/src/translations/de.json
@@ -244,5 +244,8 @@
     "sign-swap-total-fees": "Gebühren gesamt",
     "sign-swap-your-bank": "Deine Bank",
 
-    "connect-heading-prefix": "Log in to"
+    "connect-heading-prefix": "Log in to",
+    "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.",
+    "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.",
+    "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet."
 }
diff --git a/src/translations/en.json b/src/translations/en.json
@@ -244,5 +244,8 @@
     "sign-swap-total-fees": "Total fees",
     "sign-swap-your-bank": "Your bank",
 
-    "connect-heading-prefix": "Log in to"
+    "connect-heading-prefix": "Log in to",
+    "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.",
+    "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.",
+    "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet."
 }
diff --git a/src/translations/es.json b/src/translations/es.json
@@ -244,5 +244,8 @@
     "sign-swap-total-fees": "Cuotas totales",
     "sign-swap-your-bank": "Su banco",
 
-    "connect-heading-prefix": "Log in to"
+    "connect-heading-prefix": "Log in to",
+    "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.",
+    "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.",
+    "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet."
 }
diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -244,5 +244,8 @@
     "sign-swap-total-fees": "Total des frais",
     "sign-swap-your-bank": "Votre banque",
 
-    "connect-heading-prefix": "Log in to"
+    "connect-heading-prefix": "Log in to",
+    "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.",
+    "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.",
+    "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet."
 }
diff --git a/src/translations/nl.json b/src/translations/nl.json
@@ -244,5 +244,8 @@
     "sign-swap-total-fees": "Totale kosten",
     "sign-swap-your-bank": "Jouw bank",
 
-    "connect-heading-prefix": "Log in to"
+    "connect-heading-prefix": "Log in to",
+    "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.",
+    "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.",
+    "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet."
 }
diff --git a/src/translations/ru.json b/src/translations/ru.json
@@ -244,5 +244,8 @@
     "sign-swap-total-fees": "Итого",
     "sign-swap-your-bank": "Ваш банк",
 
-    "connect-heading-prefix": "Log in to"
+    "connect-heading-prefix": "Log in to",
+    "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.",
+    "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.",
+    "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet."
 }
diff --git a/src/translations/uk.json b/src/translations/uk.json
@@ -244,5 +244,8 @@
     "sign-swap-total-fees": "Сумарна комісія",
     "sign-swap-your-bank": "Ваш банк",
 
-    "connect-heading-prefix": "Log in to"
+    "connect-heading-prefix": "Log in to",
+    "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.",
+    "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.",
+    "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet."
 }
diff --git a/src/translations/zh.json b/src/translations/zh.json
@@ -244,5 +244,8 @@
     "sign-swap-total-fees": "总费用",
     "sign-swap-your-bank": "你的银行",
 
-    "connect-heading-prefix": "Log in to"
+    "connect-heading-prefix": "Log in to",
+    "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.",
+    "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.",
+    "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet."
 }