Add menu item for ethereum address verification

src/api/users.ts

@@ -1,9 +1,10 @@
 import { BACKEND_URL } from "@/constants"
 import { PAGE_SIZE, http } from "./common"
 
-interface ProfileField {
+export interface ProfileField {
   name: string;
   value: string;
+  verified_at: string | null;
 }
 
 interface Source {
@@ -20,6 +21,7 @@ export interface Profile {
   note: string | null;
   avatar: string | null;
   header: string | null;
+  identity_proofs: ProfileField[],
   fields: ProfileField[];
 
   followers_count: number;
@@ -145,3 +147,28 @@ export async function updateProfile(
     return profileOrError
   }
 }
+
+export async function getIdentityClaim(authToken: string): Promise<string> {
+  const url = `${BACKEND_URL}/api/v1/accounts/identity_proof`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  return data.claim
+}
+
+export async function createIdentityProof(
+  authToken: string,
+  signature: string,
+): Promise<Profile> {
+  const url = `${BACKEND_URL}/api/v1/accounts/identity_proof`
+  const response = await http(url, {
+    method: "POST",
+    json: { signature: signature.replace(/0x/, "") },
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  } else {
+    return data
+  }
+}

src/assets/forkawesome/check.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1536" height="1536" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m1536 409.27c0 24.774-9.9097 49.548-27.747 67.386l-852.23 852.23c-17.837 17.837-42.612 27.747-67.386 27.747s-49.548-9.9097-67.386-27.747l-493.5-493.5c-17.837-17.837-27.747-42.612-27.747-67.386s9.9097-49.548 27.747-67.386l134.77-134.77c17.837-17.837 42.612-27.747 67.386-27.747s49.548 9.9097 67.386 27.747l291.34 292.34 650.08-651.07c17.837-17.837 42.612-27.747 67.386-27.747s49.548 9.9097 67.386 27.747l134.77 134.77c17.837 17.837 27.747 42.612 27.747 67.386z" stroke-width=".99097"/></svg>

src/utils/ethereum.ts

@@ -40,6 +40,15 @@ export async function getWalletAddress(provider: Web3Provider): Promise<string |
   return walletAddress.toLowerCase()
 }
 
+// EIP-191 signature
+export async function getWalletSignature(
+  signer: Signer,
+  message: string,
+): Promise<string> {
+  const signature = await signer.signMessage(message)
+  return signature
+}
+
 function generateRandomString(len: number): string {
   const arr = new Uint8Array(len / 2)
   window.crypto.getRandomValues(arr)

src/views/Profile.vue

@@ -41,7 +41,15 @@
                   Atom feed
                 </a>
               </li>
-               <li v-if="canConnectWallet()">
+              <li v-if="isCurrentUser()">
+                <a
+                  title="Verify ethereum address"
+                  @click="hideProfileMenu(); verifyEthereumAddress()"
+                >
+                  Verify ethereum address
+                </a>
+              </li>
+              <li v-if="canConnectWallet()">
                 <a
                   title="Connect wallet"
                   @click="hideProfileMenu(); connectWallet()"
@@ -95,11 +103,22 @@
           </div>
         </div>
         <div class="bio" v-html="profile.note"></div>
-        <div class="extra-fields" v-if="profile.fields.length > 0">
+        <div class="extra-fields" v-if="fields.length > 0">
-          <dl v-for="field in profile.fields" :key="field.name">
+          <div
-            <dt>{{ field.name }}</dt>
+            v-for="field in fields"
-            <dd v-html="field.value"></dd>
+            class="field"
-          </dl>
+            :class="{'verified': field.verified_at}"
+            :key="field.name"
+          >
+            <div class="name">{{ field.name }}</div>
+            <div class="value" v-html="field.value"></div>
+            <div class="verified-icon" v-if="field.verified_at">
+              <img
+                :src="require('@/assets/forkawesome/check.svg')"
+                title="Verified"
+              >
+            </div>
+          </div>
         </div>
         <div class="stats">
           <component
@@ -147,7 +166,6 @@
 <script lang="ts">
 import { Options, Vue, setup } from "vue-class-component"
 
-import { Profile, getProfile } from "@/api/users"
 import { Post, getProfileTimeline } from "@/api/posts"
 import {
   follow,
@@ -163,6 +181,13 @@ import {
   isSubscriptionConfigured,
   makeSubscriptionPayment,
 } from "@/api/subscriptions"
+import {
+  createIdentityProof,
+  getIdentityClaim,
+  getProfile,
+  Profile,
+  ProfileField,
+} from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
 import PostList from "@/components/PostList.vue"
 import ProfileListItem from "@/components/ProfileListItem.vue"
@@ -170,7 +195,7 @@ import Sidebar from "@/components/Sidebar.vue"
 import { BACKEND_URL } from "@/constants"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
-import { getWallet } from "@/utils/ethereum"
+import { getWallet, getWalletSignature } from "@/utils/ethereum"
 
 @Options({
   components: {
@@ -237,6 +262,13 @@ export default class ProfileView extends Vue {
     return this.store.getActorAddress(this.profile)
   }
 
+  get fields(): ProfileField[] {
+    if (!this.profile) {
+      return []
+    }
+    return this.profile.identity_proofs.concat(this.profile.fields)
+  }
+
   isCurrentUser(): boolean {
     if (!this.store.currentUser || !this.profile) {
       return false
@@ -358,11 +390,27 @@ export default class ProfileView extends Vue {
     return `${BACKEND_URL}/feeds/${this.profile.username}`
   }
 
+  async verifyEthereumAddress(): Promise<void> {
+    if (!this.profile || !this.isCurrentUser()) {
+      return
+    }
+    const signer = await getWallet()
+    if (!signer) {
+      return
+    }
+    const authToken = this.store.ensureAuthToken()
+    const message = await getIdentityClaim(authToken)
+    const signature = await getWalletSignature(signer, message)
+    const profile = await createIdentityProof(authToken, signature)
+    this.profile.identity_proofs = profile.identity_proofs
+  }
+
   canConnectWallet(): boolean {
     return Boolean(this.store.instance?.blockchain_contract_address) && !this.walletConnected
   }
 
   async connectWallet() {
+    // Part of subscription UI
     const signer = await getWallet()
     if (!signer) {
       return
@@ -576,32 +624,45 @@ $avatar-size: 170px;
 .bio {
   padding: 0 $block-inner-padding $block-inner-padding;
   white-space: pre-line;
+
+  :deep(a) {
+    @include block-link;
+  }
 }
 
 .extra-fields {
   border-bottom: 1px solid $separator-color;
   margin-bottom: $block-inner-padding;
 
-  dl {
+  .field {
+    border-top: 1px solid $separator-color;
     display: flex;
+    gap: $block-inner-padding / 2;
+    padding: $block-inner-padding / 2 $block-inner-padding;
 
-    dt,
+    .name {
-    dd {
-      border-top: 1px solid $separator-color;
-      padding: $block-inner-padding / 2 $block-inner-padding;
-    }
-
-    dt {
       font-weight: bold;
       min-width: 120px;
       width: 120px;
     }
 
-    dd {
+    .value {
       flex-grow: 1;
       overflow-x: hidden;
       text-overflow: ellipsis;
     }
+
+    &.verified .value {
+      font-weight: bold;
+    }
+
+    /* stylelint-disable-next-line selector-max-compound-selectors */
+    .verified-icon img {
+      filter: $text-colorizer;
+      height: 1em;
+      min-width: 1em;
+      width: 1em;
+    }
   }
 }