109 follow button

components/CurateMenuItem.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { CurationContractStates } from '@artbycity/sdk/dist/web/curations'
+import { type CurationContractStates } from '@artbycity/sdk/dist/web/curations'
 import ArdbTransaction from 'ardb/lib/models/transaction'
 import { InjectedArweaveSigner } from 'warp-contracts-plugin-deploy'
 

components/FeedItemCard.vue

@@ -106,7 +106,7 @@
 <script setup lang="ts">
 import { VImg } from 'vuetify/lib/components/index.mjs'
 import {
-  CollaborativeWhitelistCurationState
+  type CollaborativeWhitelistCurationState
 } from '@artbycity/sdk/dist/web/curations'
 
 const img = ref<VImg>()
@@ -127,8 +127,12 @@ const { data, pending } = useLazyAsyncData(props.id, async () => {
   const checkId = await abc.transactions.get(props.id)
 
   if (checkId) {
-    if (checkId.tags.find(o => o.name === 'Entity-Type')?.value === 'curation'){
+    if (
+      checkId.tags.find(o => o.name === 'Entity-Type')?.value === 'curation'
+    ) {
+
       isCuration.value = true
+
       try {
         const curation = abc
           .curations

components/FollowButton.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-hover #="{ isHovering, props }">
+    <v-btn
+      v-bind="props"
+      variant="outlined"
+      density="compact"
+      elevation="2"
+      :color="textColor"
+      :disabled="pending || loading"
+      :loading="pending || loading"
+      :prepend-icon="followActionIcon(isHovering)"
+      @click="onFollowClick"
+    >
+      {{ followActionText(isHovering) }}
+      <template #loader>
+        <v-progress-circular
+          width="3"
+          size="15"
+          indeterminate
+        />
+        {{ followActionText(isHovering) }}
+      </template>      
+    </v-btn>
+  </v-hover>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ address: string, owner: string }>()
+const abc = useArtByCity()
+const errorFlag = ref(false)
+const creatingContract = ref(false)
+const loading = ref(false)
+
+const resetErrorFlag = () => {
+  errorFlag.value = false
+}
+
+const {
+  data: following,
+  pending,
+  refresh
+} = useLazyAsyncData(`follows-for-${props.owner}`, async () => {
+  return await abc.following.following(props.owner)
+})
+
+const isFollowing = computed(() => {
+  if (!following.value) { return false }
+
+  return following.value.includes(props.address)
+})
+
+const followActionIcon = (isHovering?: boolean) => {
+  if (errorFlag.value) { return 'mdi-alert' }
+  if (isHovering && isFollowing.value) { return 'mdi-account-minus' }
+
+  return isFollowing.value
+    ? 'mdi-account-check' : 'mdi-account-plus'
+}
+
+const followActionText = (isHovering?: boolean) => {
+  if (pending.value) { return '' }
+  if (creatingContract.value) { return 'Creating Contract' }
+  if (loading.value) { return 'Submitting' }
+  if (errorFlag.value) { return 'ERROR' }
+  if (isHovering && isFollowing.value) { return 'Unfollow' }
+
+  return isFollowing.value
+    ? 'Following' : 'Follow'
+}
+
+const textColor = computed(() => {
+  return errorFlag.value
+    ? '#FF5252' : ''
+})
+
+const onFollowClick = debounce(async () => {
+  loading.value = true
+  const contract = await abc.connect().following.getContract(props.owner)
+
+  if (!contract) {
+    try {
+      creatingContract.value = true
+      await abc.connect().following.create({ following: [] })
+      creatingContract.value = false
+    } catch (createContractError) {
+      errorFlag.value = true
+      console.log('Error on creating follow contract: ', createContractError)
+    }
+  }
+
+  try {
+    if (!isFollowing.value) {
+      await abc.connect().following.follow(props.address)
+    } else {
+      await abc.connect().following.unfollow(props.address)
+    }
+    await refresh()
+  } catch (error) {
+    errorFlag.value = true
+    console.log('Error when attempting to follow/unfollow.', error)
+  }
+
+  loading.value = false
+  if (errorFlag.value) {
+    setTimeout(resetErrorFlag, 2000)
+  }
+})
+</script>

nuxt.config.ts

@@ -69,8 +69,9 @@ export default defineNuxtConfig({
             whitelist: 'N4JmgBHUu5ZHbcgaOUsKAydcVlQTSi5L7pwvq_NPZuA',
             collaborative: 'KNrobEq1MzK7121Tzd-J61trXcxKZujqPQ_B3ojZeb8',
             collaborativeWhitelist:
-              '06Llbzymx4RI8Y0Ygen1grv4hM7MwjmmcCdCqeU9mAI'
+              '06Llbzymx4RI8Y0Ygen1grv4hM7MwjmmcCdCqeU9mAI'            
           },
+          following: 'uPPmKBhY4L4MKAaGi2pCDU30nnEo9VtMb9Sw-zSApFY',
           galleryHero: 'ZDIykujDgVmzKFtTcjx9pNoIi26Ew-eQTKzS02PU8kY'
         }
       }