Move wallet tips to separate page

src/router/index.ts

@@ -14,6 +14,7 @@ import PublicTimeline from "@/views/PublicTimeline.vue"
 import TagTimeline from "@/views/TagTimeline.vue"
 import SearchResultList from "@/views/SearchResultList.vue"
 import SubscriptionPage from "@/views/SubscriptionPage.vue"
+import EthereumPage from "@/views/Ethereum.vue"
 
 import { useCurrentUser } from "@/store/user"
 
@@ -46,6 +47,12 @@ const routes: Array<RouteRecordRaw> = [
     component: AboutPublicPage,
     meta: { onlyGuest: true },
   },
+  {
+    path: "/ethereum",
+    name: "ethereum",
+    component: EthereumPage,
+    meta: { onlyGuest: true },
+  },
   {
     path: "/about",
     name: "about",

src/views/Ethereum.vue

@@ -0,0 +1,15 @@
+<template>
+  <static-page>
+    <template #heading>Ethereum</template>
+    <template #text>
+      <div v-html="text"></div>
+    </template>
+  </static-page>
+</template>
+
+<script setup lang="ts">
+import StaticPage from "@/components/StaticPage.vue"
+import { renderMarkdown } from "@/utils/markdown"
+
+const text = 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.")
+</script>

src/views/LandingPage.vue

@@ -35,9 +35,8 @@
         </div>
         <div class="wallet-required">
           <img :src="require('@/assets/forkawesome/ethereum.svg')">
-          <a @click="walletTipVisible = !walletTipVisible">Ethereum Wallet</a> is required
+          <router-link :to="{ name: 'ethereum' }">Ethereum Wallet</router-link> is required
         </div>
-        <div class="wallet-tip" v-if="walletTipVisible" v-html="walletTip"></div>
         <button
           type="submit"
           :disabled="!username"
@@ -62,9 +61,6 @@ import Loader from "@/components/Loader.vue"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
 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 },
@@ -73,7 +69,6 @@ export default class LandingPage extends Vue {
 
   username = ""
   inviteCode: string | null = null
-  walletTipVisible = false
   isLoading = false
   loginErrorMessage: string | null = null
   registrationErrorMessage: string | null = null
@@ -88,10 +83,6 @@ 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) {
@@ -349,13 +340,6 @@ button {
       text-decoration: underline;
     }
   }
-
-  .wallet-tip {
-    :deep(a) {
-      color: $text-color;
-      text-decoration: underline;
-    }
-  }
 }
 
 .registration-form-loader {