Add "Move followers" page

src/api/users.ts

@@ -250,6 +250,25 @@ interface UnsignedActivity {
   message: string,
 }
 
+export async function getUnsignedMove(
+  authToken: string,
+  fromActorId: string,
+  followersCsv: string,
+): Promise<UnsignedActivity> {
+  const url = `${BACKEND_URL}/api/v1/accounts/move_followers`
+  const response = await http(url, {
+    method: "POST",
+    authToken,
+    json: { from_actor_id: fromActorId, followers_csv: followersCsv },
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  } else {
+    return data
+  }
+}
+
 export async function getUnsignedUpdate(
   authToken: string,
 ): Promise<UnsignedActivity> {

src/composables/signed-activity.ts

@@ -1,8 +1,34 @@
-import { getUnsignedUpdate, sendSignedActivity } from "@/api/users"
+import {
+  getUnsignedMove,
+  getUnsignedUpdate,
+  sendSignedActivity,
+} from "@/api/users"
 import { useCurrentUser } from "@/store/user"
 import { getWallet, getWalletSignature } from "@/utils/ethereum"
 
-async function signActivity(): Promise<void> {
+async function signMoveActivity(fromActorId: string, followersCsv: string) {
+  const { ensureAuthToken } = useCurrentUser()
+  const signer = await getWallet()
+  if (!signer) {
+    return
+  }
+  const walletAddress = await signer.getAddress()
+  const authToken = ensureAuthToken()
+  const { params, message } = await getUnsignedMove(
+    authToken,
+    fromActorId,
+    followersCsv,
+  )
+  const signature = await getWalletSignature(signer, message)
+  await sendSignedActivity(
+    authToken,
+    params,
+    walletAddress,
+    signature,
+  )
+}
+
+async function signUpdateActivity(): Promise<void> {
   const { ensureAuthToken } = useCurrentUser()
   if (!confirm("This action will sign a message with your wallet and send it to your followers. Continue?")) {
     return
@@ -24,5 +50,8 @@ async function signActivity(): Promise<void> {
 }
 
 export function useSignedActivity() {
-  return { signActivity }
+  return {
+    signMoveActivity,
+    signUpdateActivity,
+  }
 }

src/router/index.ts

@@ -1,9 +1,11 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
 
 import AboutPage from "@/views/About.vue"
+import EthereumPage from "@/views/Ethereum.vue"
 import HomeTimeline from "@/views/HomeTimeline.vue"
 import IdentityProof from "@/views/IdentityProof.vue"
 import LandingPage from "@/views/LandingPage.vue"
+import MoveFollowers from "@/views/MoveFollowers.vue"
 import NotificationList from "@/views/NotificationList.vue"
 import ProfileDirectory from "@/views/ProfileDirectory.vue"
 import ProfileView from "@/views/Profile.vue"
@@ -16,7 +18,6 @@ import TagTimeline from "@/views/TagTimeline.vue"
 import SearchResultList from "@/views/SearchResultList.vue"
 import SubscriptionPage from "@/views/SubscriptionPage.vue"
 import SubscriptionsSettings from "@/views/SubscriptionsSettings.vue"
-import EthereumPage from "@/views/Ethereum.vue"
 
 import { useCurrentUser } from "@/store/user"
 
@@ -127,6 +128,12 @@ const routes: Array<RouteRecordRaw> = [
     component: ProfileForm,
     meta: { onlyAuthenticated: true },
   },
+  {
+    path: "/settings/move-followers",
+    name: "move-followers",
+    component: MoveFollowers,
+    meta: { onlyAuthenticated: true },
+  },
   {
     path: "/settings/identity-proof",
     name: "identity-proof",

src/views/MoveFollowers.vue

@@ -0,0 +1,71 @@
+<template>
+  <sidebar-layout>
+    <template #content>
+      <h1>Move followers</h1>
+      <form class="move-followers">
+        <div class="input-group">
+          <input
+            type="text"
+            id="from-actor-id"
+            placeholder="From actor ID"
+            v-model="fromActorId"
+          >
+        </div>
+        <div class="input-group">
+          <textarea
+            id="followers"
+            placeholder="Followers (CSV)"
+            v-model="followersCsv"
+          >
+          </textarea>
+        </div>
+        <button
+          type="submit"
+          class="btn"
+          :disabled="!canMove()"
+          @click.prevent="move()"
+        >
+          Move
+        </button>
+      </form>
+    </template>
+  </sidebar-layout>
+</template>
+
+<script setup lang="ts">
+import { $, $ref } from "vue/macros"
+import { useRouter } from "vue-router"
+
+import SidebarLayout from "@/components/SidebarLayout.vue"
+import { useSignedActivity } from "@/composables/signed-activity"
+import { useCurrentUser } from "@/store/user"
+
+const router = useRouter()
+const { currentUser } = $(useCurrentUser())
+const { signMoveActivity } = useSignedActivity()
+
+const fromActorId = $ref("")
+const followersCsv = $ref("")
+
+function canMove(): boolean {
+  return fromActorId.length > 0 && followersCsv.length > 0
+}
+
+async function move() {
+  if (currentUser === null) {
+    return
+  }
+  await signMoveActivity(fromActorId, followersCsv)
+  router.push({ name: "profile", params: { profileId: currentUser.id } })
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/mixins";
+@import "../styles/theme";
+
+form {
+  @include content-form;
+}
+</style>

src/views/Profile.vue

@@ -507,8 +507,8 @@ async function onSignActivity() {
   if (!profile || !isCurrentUser()) {
     return
   }
-  const { signActivity } = useSignedActivity()
-  await signActivity()
+  const { signUpdateActivity } = useSignedActivity()
+  await signUpdateActivity()
 }
 
 function isSubscriptionsFeatureEnabled(): boolean {