From 53cd5285a6a1bfb209931a8af21b53788ed17117 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Fri, 3 Jun 2022 12:22:04 +0000
Subject: [PATCH] Add wallet privacy tips

---
 src/views/LandingPage.vue | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
index 25648e5..7e9ff64 100644
--- a/src/views/LandingPage.vue
+++ b/src/views/LandingPage.vue
@@ -35,12 +35,9 @@
         </div>
         <div class="wallet-required">
           <img :src="require('@/assets/forkawesome/ethereum.svg')">
-          <a
-            href="https://ethereum.org/en/wallets/find-wallet/?filters=has_explore_dapps"
-            target="_blank"
-            rel="noreferrer"
-          >Ethereum Wallet</a> is required
+          <a @click="walletTipVisible = !walletTipVisible">Ethereum Wallet</a> is required
         </div>
+        <div class="wallet-tip" v-if="walletTipVisible" v-html="walletTip"></div>
         <button
           type="submit"
           :disabled="!username"
@@ -64,10 +61,10 @@ import { InstanceInfo } from "@/api/instance"
 import Loader from "@/components/Loader.vue"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
-import {
-  getWallet,
-  createEip4361_SignedMessage,
-} from "@/utils/ethereum"
+import { createEip4361_SignedMessage, getWallet } from "@/utils/ethereum"
+import { renderMarkdown } from "@/utils/markdown"
+
+const WALLET_TIP = renderMarkdown("In order to register on this server, you need an [Ethereum wallet](https://ethereum.org/en/wallets/find-wallet/?filters=has_explore_dapps). [MetaMask](https://metamask.io/) is a good choice for beginners. Your wallet address will be stored for authentication purposes and will not be exposed unless you later complete an address verification procedure. In that case, your address will be publicly associated with your account. To protect your privacy, it is recommended that you create a fresh address and don't link it to your other activities. This can be achieved by using a [mixer](https://tornado.cash/) or an exchange [that doesn't require identity verification](http://kycnot.me/). For general privacy recommendations, visit [PrivacyGuides](https://www.privacyguides.org/tools/) website.")
 
 @Options({
   components: { Loader },
@@ -76,6 +73,7 @@ export default class LandingPage extends Vue {
 
   username = ""
   inviteCode: string | null = null
+  walletTipVisible = false
   isLoading = false
   loginErrorMessage: string | null = null
   registrationErrorMessage: string | null = null
@@ -90,6 +88,10 @@ export default class LandingPage extends Vue {
     return this.store.instance
   }
 
+  get walletTip(): string {
+    return WALLET_TIP
+  }
+
   async register() {
     this.registrationErrorMessage = null
     if (!this.store.instance) {
@@ -259,6 +261,7 @@ button {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  gap: 15px;
   min-width: $wide-sidebar-width - 50px;
   padding: 25px 40px;
   position: relative;
@@ -267,14 +270,10 @@ button {
   .form-title {
     font-size: 24px;
     font-weight: bold;
-    margin-bottom: 25px;
+    margin-bottom: 10px;
     text-align: center;
   }
 
-  .form-control {
-    margin-bottom: 15px;
-  }
-
   input,
   .addon {
     background-color: #201f1f;
@@ -339,7 +338,6 @@ button {
     flex-direction: row;
     gap: 0.4em;
     justify-content: center;
-    margin-bottom: 15px;
 
     img {
       filter: $btn-text-hover-colorizer;
@@ -351,6 +349,13 @@ button {
       text-decoration: underline;
     }
   }
+
+  .wallet-tip {
+    :deep(a) {
+      color: $text-color;
+      text-decoration: underline;
+    }
+  }
 }
 
 .registration-form-loader {