From 60e828d47c232d2fe80d0d032515daf4cb991245 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Wed, 11 Sep 2024 14:49:33 +0800
Subject: [PATCH 01/18] =?UTF-8?q?=F0=9F=8E=A8=20Rename=20error=20ref=20in?=
 =?UTF-8?q?=20affiliation=20link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 83795ebc4..ddfce90f6 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -7,7 +7,7 @@
         <UFormGroup
           label="Product ID/URL"
           :required="true"
-          :error="error"
+          :error="productIdError"
         >
           <UInput
             v-model="productIdInput"
@@ -291,7 +291,10 @@ const customChannels = computed(
     }))
 )
 
-const error = ref('')
+const productIdError = ref('')
+watch(productId, () => {
+  productIdError.value = ''
+})
 
 const isLoadingProductData = ref(false)
 const productData = ref<any>(undefined)
@@ -385,19 +388,19 @@ async function fetchProductData () {
     } else {
       const { data: classData, error: classFetchError } = await useFetch(`${LIKE_CO_API}/likernft/book/store/${productId.value}`)
       if (classFetchError.value) {
-        error.value = 'Cannot fetch class data.'
+        productIdError.value = 'Cannot fetch class data.'
       } else {
         return classData.value
       }
     }
   } catch {
-    error.value = 'Cannot fetch product data.'
+    productIdError.value = 'Cannot fetch product data.'
   }
   return undefined
 }
 
 async function createAffiliationLink () {
-  error.value = ''
+  productIdError.value = ''
   productData.value = undefined
 
   if (!productId.value) {

From ceecc9c45b2641cc0e4bd6611fbbe66aa2abeca0 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Wed, 11 Sep 2024 15:06:09 +0800
Subject: [PATCH 02/18] =?UTF-8?q?=F0=9F=A5=85=20Guard=20undefined=20produc?=
 =?UTF-8?q?t=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index ddfce90f6..1e7e35e92 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -319,7 +319,7 @@ const priceIndexOptions = computed(() => {
   }))
 })
 
-const tableTitle = computed(() => `${productName.value} Affiliation Links`)
+const tableTitle = computed(() => `${productName.value ? `${productName.value} ` : ''}Affiliation Links`)
 const tableColumns = [
   {
     key: 'channel',

From 9327b0473dc795f644dda88661f7ed7a66e7fec3 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Wed, 11 Sep 2024 16:11:32 +0800
Subject: [PATCH 03/18] =?UTF-8?q?=F0=9F=8E=A8=20Rename=20queryDefault=20to?=
 =?UTF-8?q?=20linkQueryDefault?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 1e7e35e92..cc1eb4dbd 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -233,7 +233,7 @@ const productId = computed(() => {
 })
 
 const linkQueryInput = ref('')
-const defaultQuery = computed(() => {
+const linkQueryDefault = computed(() => {
   const isUseLikerLandLink = linkSetting.value === 'liker_land'
   let utmSource = isUseLikerLandLink ? 'likerland' : 'stripe'
   if (isCustomLink.value) {
@@ -246,13 +246,13 @@ const defaultQuery = computed(() => {
 })
 const linkQuery = computed(() => {
   if (linkQueryInput.value) {
-    return { ...defaultQuery.value, ...Object.fromEntries(new URLSearchParams(linkQueryInput.value.trim())) }
+    return { ...linkQueryDefault.value, ...Object.fromEntries(new URLSearchParams(linkQueryInput.value.trim())) }
   }
   const input = productIdInput.value?.trim() || ''
   if (input.startsWith('http')) {
-    return { ...defaultQuery.value, ...Object.fromEntries(new URL(input).searchParams) }
+    return { ...linkQueryDefault.value, ...Object.fromEntries(new URL(input).searchParams) }
   }
-  return defaultQuery.value
+  return linkQueryDefault.value
 })
 const linkQueryTableRows = computed(() => Object.entries(linkQuery.value).map(([key, value]) => ({
   key,
@@ -342,8 +342,8 @@ const tableRows = computed(() => {
       utm_campaign: `${channel.id}_bookpress`
     }
     const qrUtmSourceQuery: Record<string, string> = {}
-    if (linkQuery.value.utm_source === defaultQuery.value.utm_source) {
-      qrUtmSourceQuery.utm_source = `${defaultQuery.value.utm_source}-qr`
+    if (linkQuery.value.utm_source === linkQueryDefault.value.utm_source) {
+      qrUtmSourceQuery.utm_source = `${linkQueryDefault.value.utm_source}-qr`
     }
     const urlConfig = {
       [isCollection.value ? 'collectionId' : 'classId']: productId.value,

From d8cae2fafd365728f60f15b9dcb138646714b586 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Wed, 11 Sep 2024 16:51:21 +0800
Subject: [PATCH 04/18] =?UTF-8?q?=F0=9F=8E=A8=20Update=20link=20query=20pr?=
 =?UTF-8?q?ecedence?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index cc1eb4dbd..d83d926df 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -245,14 +245,18 @@ const linkQueryDefault = computed(() => {
   }
 })
 const linkQuery = computed(() => {
-  if (linkQueryInput.value) {
-    return { ...linkQueryDefault.value, ...Object.fromEntries(new URLSearchParams(linkQueryInput.value.trim())) }
-  }
+  const mergedQuery = { ...linkQueryDefault.value }
+
   const input = productIdInput.value?.trim() || ''
   if (input.startsWith('http')) {
-    return { ...linkQueryDefault.value, ...Object.fromEntries(new URL(input).searchParams) }
+    Object.assign(mergedQuery, Object.fromEntries(new URL(input).searchParams))
   }
-  return linkQueryDefault.value
+
+  if (linkQueryInput.value) {
+    Object.assign(mergedQuery, Object.fromEntries(new URLSearchParams(linkQueryInput.value)))
+  }
+
+  return mergedQuery
 })
 const linkQueryTableRows = computed(() => Object.entries(linkQuery.value).map(([key, value]) => ({
   key,

From 40644fce9199ed6622270ee8ffd68ed6b707e73c Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Wed, 11 Sep 2024 17:51:58 +0800
Subject: [PATCH 05/18] =?UTF-8?q?=F0=9F=90=9B=20Rewrite=20affiliation=20li?=
 =?UTF-8?q?nk=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 constant/index.ts          |  4 +++-
 pages/affiliation-link.vue | 38 ++++++++++++++++++++++----------------
 utils/index.ts             | 17 +++++++++++------
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/constant/index.ts b/constant/index.ts
index 8f6683701..2db4f5d62 100644
--- a/constant/index.ts
+++ b/constant/index.ts
@@ -9,8 +9,10 @@ export const NFT_DEFAULT_MINT_AMOUNT = 50
 
 export const LIKE_ADDRESS_REGEX = /^like1[ac-hj-np-z02-9]{38}$/
 
+export const AFFILIATION_CHANNEL_DEFAULT = 'liker_land'
+
 export const AFFILIATION_CHANNELS = [
-  { id: 'liker_land', name: 'Liker Land' },
+  { id: AFFILIATION_CHANNEL_DEFAULT, name: 'Liker Land' },
   { id: '@bookpunch', name: '一拳書店' },
   { id: '@boundarybooks', name: '界限書店' },
   { id: '@breakthrough_publish', name: '突破書廊' },
diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index d83d926df..5e2062a2d 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -134,9 +134,10 @@
             :ui="{ body: { padding: '' } }"
           >
             <template #header>
-              <h3 class="text-sm font-bold">
-                Link Query Parameters
-              </h3>
+              <h3
+                class="text-sm font-bold"
+                v-text="'Common Link Query Parameters'"
+              />
             </template>
 
             <UTable
@@ -206,7 +207,9 @@
 
 <script setup lang="ts">
 import { type FileExtension } from '@likecoin/qr-code-styling'
-import { AFFILIATION_CHANNELS } from '~/constant'
+
+import { AFFILIATION_CHANNEL_DEFAULT, AFFILIATION_CHANNELS } from '~/constant'
+
 import { useCollectionStore } from '~/stores/collection'
 import { getPurchaseLink } from '~/utils'
 
@@ -330,6 +333,10 @@ const tableColumns = [
     label: 'Channel',
     sortable: true
   },
+  {
+    key: 'utmCampaign',
+    label: 'UTM Campaign'
+  },
   {
     key: 'link',
     label: 'Link',
@@ -342,30 +349,29 @@ const tableRows = computed(() => {
   }
   const channels = [...customChannels.value, ...AFFILIATION_CHANNELS]
   return channels.map((channel) => {
-    const utmCampaignQuery = {
-      utm_campaign: `${channel.id}_bookpress`
-    }
-    const qrUtmSourceQuery: Record<string, string> = {}
-    if (linkQuery.value.utm_source === linkQueryDefault.value.utm_source) {
-      qrUtmSourceQuery.utm_source = `${linkQueryDefault.value.utm_source}-qr`
+    let utmCampaign = 'bookpress'
+    if (channel.id !== AFFILIATION_CHANNEL_DEFAULT) {
+      utmCampaign = `${convertChannelIdToLikerId(channel.id)}_${utmCampaign}`
     }
     const urlConfig = {
       [isCollection.value ? 'collectionId' : 'classId']: productId.value,
       channel: channel.id,
       priceIndex: priceIndex.value,
       customLink: isCustomLink.value ? customLinkInput.value : undefined,
-      isUseLikerLandLink: linkSetting.value === 'liker_land'
+      isUseLikerLandLink: linkSetting.value === 'liker_land',
+      query: {
+        utm_campaign: utmCampaign,
+        ...linkQuery.value
+      }
     }
     return {
       id: channel.id,
       channel: channel.name,
-      url: getPurchaseLink({
-        ...urlConfig,
-        query: { ...utmCampaignQuery, ...linkQuery.value }
-      }),
+      utmCampaign,
+      url: getPurchaseLink(urlConfig),
       qrCodeUrl: getPurchaseLink({
         ...urlConfig,
-        query: { ...utmCampaignQuery, ...linkQuery.value, ...qrUtmSourceQuery }
+        isForQRCode: linkQuery.value.utm_source === linkQueryDefault.value.utm_source
       })
     }
   })
diff --git a/utils/index.ts b/utils/index.ts
index 6af315dda..7274acf8a 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -117,7 +117,8 @@ export function getPurchaseLink ({
   coupon,
   customLink,
   isUseLikerLandLink,
-  query
+  isForQRCode,
+  query: queryInput
 }:{
   classId?: string
   collectionId?: string
@@ -126,25 +127,29 @@ export function getPurchaseLink ({
   coupon?: string
   customLink?: string
   isUseLikerLandLink?: boolean
+  isForQRCode?: boolean
   query?: Record<string, string>
 }) {
-  const payload: Record<string, string> = {
+  const query: Record<string, string> = {
     from: channel || ''
   }
   if (classId) {
-    payload.price_index = priceIndex.toString()
+    query.price_index = priceIndex.toString()
   }
-  if (coupon) { payload.coupon = coupon }
+  if (coupon) { query.coupon = coupon }
   if (customLink) {
     const url = new URL(customLink)
-    Object.entries(payload).forEach(([key, value]) => {
+    Object.entries(query).forEach(([key, value]) => {
       url.searchParams.set(key, value)
     })
     return url.toString()
   }
+  if (isForQRCode && queryInput?.utm_medium) {
+    query.utm_medium = `${queryInput.utm_medium}-qr`
+  }
 
   const { LIKE_CO_API, LIKER_LAND_URL } = useRuntimeConfig().public
-  const queryString = `?${new URLSearchParams({ ...query, ...payload }).toString()}`
+  const queryString = `?${new URLSearchParams({ ...queryInput, ...query }).toString()}`
   if (collectionId) {
     return isUseLikerLandLink
       ? `${LIKER_LAND_URL}/nft/collection/${collectionId}${queryString}`

From 980d87c50d03a741153d0e4965b073fe7f5b9222 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Wed, 11 Sep 2024 18:17:59 +0800
Subject: [PATCH 06/18] =?UTF-8?q?=F0=9F=92=AC=20Update=20field=20label=20i?=
 =?UTF-8?q?n=20affiliation=20link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 5e2062a2d..4d2bc1d78 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -17,13 +17,13 @@
           />
         </UFormGroup>
 
-        <UFormGroup label="Link Settings">
+        <UFormGroup label="Landing Page">
           <USelect v-model="linkSetting" :options="linkSettings" option-attribute="name" />
         </UFormGroup>
 
         <UFormGroup
           v-if="isCustomLink"
-          label="Custom Link"
+          label="Custom Page Link"
           :required="true"
         >
           <UInput
@@ -270,15 +270,15 @@ const isCollection = computed(() => productId.value?.startsWith('col_'))
 
 const linkSettings = ref([
   {
-    name: 'Use Liker Land Link (Product page)',
+    name: 'Liker Land Product Page',
     value: 'liker_land'
   },
   {
-    name: 'Direct Link (Stripe)',
+    name: 'Stripe Checkout Page',
     value: 'direct'
   },
   {
-    name: 'Custom Link',
+    name: 'Custom Page',
     value: 'custom'
   }
 ])

From 9e483d5e4d6a3c4476179843785ca589622ef1a6 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 13 Sep 2024 11:11:21 +0800
Subject: [PATCH 07/18] =?UTF-8?q?=F0=9F=A5=85=20Guard=20custom=20channel?=
 =?UTF-8?q?=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue | 74 +++++++++++++++++++++++++++++++-------
 stores/static-data.ts      | 50 ++++++++++++++++++++++++++
 utils/api.ts               | 18 ++++++++++
 utils/index.ts             |  8 +++++
 4 files changed, 137 insertions(+), 13 deletions(-)
 create mode 100644 stores/static-data.ts
 create mode 100644 utils/api.ts

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 4d2bc1d78..8629b73ea 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -13,6 +13,7 @@
             v-model="productIdInput"
             class="font-mono"
             placeholder="https://liker.land/nft/class/likenft1ku4ra0e7dgknhd0wckrkxspuultynl4mgkxa3j08xeshfr2l0ujqmmvy83"
+            name="product_id"
             :required="true"
           />
         </UFormGroup>
@@ -30,15 +31,21 @@
             v-model="customLinkInput"
             class="font-mono"
             placeholder="https://books.liker.land"
+            name="custom_link"
             :required="true"
           />
         </UFormGroup>
 
-        <UFormGroup label="Custom Channels" hint="Optional">
+        <UFormGroup
+          label="Channel ID(s)"
+          hint="Optional"
+          :error="customChannelInputError"
+        >
           <UInput
             v-model="customChannelInput"
             class="font-mono"
-            placeholder="Channel ID(s), separated by commas (e.g. store01, store02)"
+            placeholder="Channel ID(s), separated by commas (e.g. @store01, @store02)"
+            name="channel_ids"
           />
         </UFormGroup>
 
@@ -47,6 +54,7 @@
             v-model="linkQueryInput"
             class="font-mono"
             placeholder="utm_source=instagram&utm_medium=social"
+            name="query_params"
           />
         </UFormGroup>
 
@@ -152,6 +160,13 @@
         </div>
 
         <UTable :columns="tableColumns" :rows="tableRows">
+          <template #channelId-data="{ row }">
+            <div v-text="row.channelName" />
+            <div
+              class="text-gray-400 dark:text-gray-700 text-xs font-mono"
+              v-text="row.channelId"
+            />
+          </template>
           <template #link-data="{ row }">
             <div class="flex items-center gap-2">
               <UButton
@@ -211,10 +226,13 @@ import { type FileExtension } from '@likecoin/qr-code-styling'
 import { AFFILIATION_CHANNEL_DEFAULT, AFFILIATION_CHANNELS } from '~/constant'
 
 import { useCollectionStore } from '~/stores/collection'
+import { useStaticDataStore } from '~/stores/static-data'
+
 import { getPurchaseLink } from '~/utils'
 
 const { LIKE_CO_API } = useRuntimeConfig().public
 const collectionStore = useCollectionStore()
+const staticDataStore = useStaticDataStore()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -290,18 +308,25 @@ const customChannelInput = ref('')
 const customChannels = computed(
   () => customChannelInput.value
     .split(',')
-    .map(channel => channel.trim())
+    .map(channelId => channelId.trim())
     .filter(Boolean)
-    .map(channel => ({
-      id: channel,
-      name: channel
-    }))
+    .map((channelId) => {
+      const channelInfo = staticDataStore.getChannelInfoById(channelId)
+      return {
+        id: channelId,
+        name: channelInfo?.displayName || channelId
+      }
+    })
 )
 
 const productIdError = ref('')
 watch(productId, () => {
   productIdError.value = ''
 })
+const customChannelInputError = ref('')
+watch(customChannelInput, () => {
+  customChannelInputError.value = ''
+})
 
 const isLoadingProductData = ref(false)
 const productData = ref<any>(undefined)
@@ -329,7 +354,7 @@ const priceIndexOptions = computed(() => {
 const tableTitle = computed(() => `${productName.value ? `${productName.value} ` : ''}Affiliation Links`)
 const tableColumns = [
   {
-    key: 'channel',
+    key: 'channelId',
     label: 'Channel',
     sortable: true
   },
@@ -365,8 +390,8 @@ const tableRows = computed(() => {
       }
     }
     return {
-      id: channel.id,
-      channel: channel.name,
+      channelId: channel.id,
+      channelName: channel.name,
       utmCampaign,
       url: getPurchaseLink(urlConfig),
       qrCodeUrl: getPurchaseLink({
@@ -412,11 +437,34 @@ async function fetchProductData () {
 async function createAffiliationLink () {
   productIdError.value = ''
   productData.value = undefined
+  customChannelInputError.value = ''
 
   if (!productId.value) {
     return
   }
 
+  // Validate custom channels
+  if (customChannels.value.length) {
+    const invalidChannel = customChannels.value.find(channel => !validateChannelId(channel.id))
+    if (invalidChannel) {
+      customChannelInputError.value = `Invalid channel "${invalidChannel.id}", please enter a valid channel ID starting with "@"`
+      return
+    }
+
+    const results = await Promise.all(customChannels.value.map(async (channel) => {
+      const channelInfo = await staticDataStore.lazyFetchChannelInfoById(channel.id)
+      return {
+        ...channel,
+        isRegistered: !!channelInfo
+      }
+    }))
+    const unregisteredChannel = results.find(channel => !channel.isRegistered)
+    if (unregisteredChannel) {
+      customChannelInputError.value = `Channel ID "${unregisteredChannel.id}" is not registered`
+      return
+    }
+  }
+
   isLoadingProductData.value = true
   const data = await fetchProductData()
   isLoadingProductData.value = false
@@ -458,7 +506,7 @@ function printAllQRCodes () {
   try {
     sessionStorage.setItem(
       'nft_book_press_batch_qrcode',
-      convertArrayOfObjectsToCSV(tableRows.value.map(({ channel, qrCodeUrl, ...link }) => ({ key: channel, ...link, url: qrCodeUrl })))
+      convertArrayOfObjectsToCSV(tableRows.value.map(({ channelId, qrCodeUrl, ...link }) => ({ key: channelId, ...link, url: qrCodeUrl })))
     )
     window.open('/batch-qrcode?print=1', 'batch_qrcode', 'popup,menubar=no,location=no,status=no')
   } catch (error) {
@@ -480,7 +528,7 @@ function shortenAllLinks () {
   try {
     sessionStorage.setItem(
       'nft_book_press_batch_shorten_url',
-      convertArrayOfObjectsToCSV(tableRows.value.map(({ channel, ...link }) => ({ key: channel, ...link })))
+      convertArrayOfObjectsToCSV(tableRows.value.map(({ channelId, ...link }) => ({ key: channelId, ...link })))
     )
     router.push({ name: 'batch-bitly', query: { print: 1 } })
   } catch (error) {
@@ -513,7 +561,7 @@ async function downloadAllQRCodes () {
     const qrCodeResults = await Promise.all(tableRows.value.map(async (link) => {
       const qrCode = new QRCodeStyling(getQRCodeOptions({ data: link.qrCodeUrl }))
       const dataResults = await Promise.all(DOWNLOAD_QRCODE_FILE_TYPES.map(type => qrCode.getRawData(type.value)))
-      const filename = getQRCodeFilename(link.channel)
+      const filename = getQRCodeFilename(link.channelId)
       return DOWNLOAD_QRCODE_FILE_TYPES.map(({ value: ext }, index) => {
         const data = dataResults[index]
         if (!data) {
diff --git a/stores/static-data.ts b/stores/static-data.ts
new file mode 100644
index 000000000..6082851cf
--- /dev/null
+++ b/stores/static-data.ts
@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+
+import { FetchLikerInfoByIdResult } from 'utils/api'
+
+export const useStaticDataStore = defineStore('static-data', () => {
+  const likerUserInfoMap = ref({} as Record<string, FetchLikerInfoByIdResult>)
+
+  const getLikerUserInfoById = computed(() => (likerId: string) => {
+    return likerUserInfoMap.value[likerId]
+  })
+
+  const getChannelInfoById = computed(() => (channelId: string) => {
+    const likerId = convertChannelIdToLikerId(channelId)
+    return getLikerUserInfoById.value(likerId)
+  })
+
+  async function lazyFetchLikerUserInfoById (likerId: string) {
+    if (likerUserInfoMap.value[likerId]) {
+      return likerUserInfoMap.value[likerId]
+    }
+
+    try {
+      const result = await fetchLikerInfoById(likerId)
+      if (result.error.value) {
+        throw result.error.value
+      }
+      const userInfo = result.data.value
+      if (!userInfo) {
+        throw new Error('Missing data in `fetchLikerInfoById`')
+      }
+      likerUserInfoMap.value[likerId] = userInfo
+      return userInfo
+    } catch {
+      return null
+    }
+  }
+
+  async function lazyFetchChannelInfoById (channelId: string) {
+    const likerId = convertChannelIdToLikerId(channelId)
+    const result = await lazyFetchLikerUserInfoById(likerId)
+    return result
+  }
+
+  return {
+    getLikerUserInfoById,
+    getChannelInfoById,
+    lazyFetchLikerUserInfoById,
+    lazyFetchChannelInfoById
+  }
+})
diff --git a/utils/api.ts b/utils/api.ts
new file mode 100644
index 000000000..58fbb6e99
--- /dev/null
+++ b/utils/api.ts
@@ -0,0 +1,18 @@
+export interface FetchLikerInfoByIdResult {
+  user: string
+  displayName: string
+  avatar: string
+  wallet: string
+  cosmosWallet: string
+  likeWallet: string
+  isSubscribedCivicLiker: boolean
+  civicLikerSince: number
+  description: string
+}
+
+export async function fetchLikerInfoById (likerId: string) {
+  const { LIKE_CO_API } = useRuntimeConfig().public
+  const url = `${LIKE_CO_API}/users/id/${likerId}/min`
+  const result = await useFetch<FetchLikerInfoByIdResult>(url)
+  return result
+}
diff --git a/utils/index.ts b/utils/index.ts
index 7274acf8a..e45752f61 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -159,3 +159,11 @@ export function getPurchaseLink ({
     ? `${LIKER_LAND_URL}/nft/class/${classId}${queryString}`
     : `${LIKE_CO_API}/likernft/book/purchase/${classId}/new${queryString}`
 }
+
+export function validateChannelId (channelId: string) {
+  return channelId.startsWith('@')
+}
+
+export function convertChannelIdToLikerId (channelId: string) {
+  return channelId.replace(/^@/, '')
+}

From 9ed811f22e67716d89deada8473706341b8ece1c Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 13 Sep 2024 15:06:03 +0800
Subject: [PATCH 08/18] =?UTF-8?q?=F0=9F=9A=B8=20Prefill=20channel=20Id=20w?=
 =?UTF-8?q?ith=20current=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue          | 51 +++++++++++++++++++++++++----
 pages/nft-book-store/user/index.vue | 40 ++++++++++------------
 stores/user.ts                      | 39 ++++++++++++++++++++--
 utils/index.ts                      |  4 +++
 4 files changed, 104 insertions(+), 30 deletions(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 8629b73ea..0d2a08e28 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -41,12 +41,23 @@
           hint="Optional"
           :error="customChannelInputError"
         >
-          <UInput
-            v-model="customChannelInput"
-            class="font-mono"
-            placeholder="Channel ID(s), separated by commas (e.g. @store01, @store02)"
-            name="channel_ids"
-          />
+          <div class="flex gap-2">
+            <UInput
+              v-model="customChannelInput"
+              class="grow font-mono"
+              placeholder="Channel ID(s), separated by commas (e.g. @store01, @store02)"
+              name="channel_ids"
+            />
+            <UButton
+              v-show="!customChannelInput && likerInfo"
+              class="relative"
+              label="Prefill from Account"
+              color="gray"
+              variant="outline"
+              size="2xs"
+              @click="prefillChannelIdIfNecessary"
+            />
+          </div>
         </UFormGroup>
 
         <UFormGroup label="Query Parameters" hint="Optional">
@@ -167,6 +178,9 @@
               v-text="row.channelId"
             />
           </template>
+          <template #utmCampaign-data="{ row }">
+            <UKbd class="font-mono" :value="row.utmCampaign" />
+          </template>
           <template #link-data="{ row }">
             <div class="flex items-center gap-2">
               <UButton
@@ -221,18 +235,25 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { type FileExtension } from '@likecoin/qr-code-styling'
 
 import { AFFILIATION_CHANNEL_DEFAULT, AFFILIATION_CHANNELS } from '~/constant'
 
 import { useCollectionStore } from '~/stores/collection'
 import { useStaticDataStore } from '~/stores/static-data'
+import { useUserStore } from '~/stores/user'
+import { useWalletStore } from '~/stores/wallet'
 
 import { getPurchaseLink } from '~/utils'
 
 const { LIKE_CO_API } = useRuntimeConfig().public
 const collectionStore = useCollectionStore()
 const staticDataStore = useStaticDataStore()
+const userStore = useUserStore()
+const { likerInfo } = storeToRefs(userStore)
+const walletStore = useWalletStore()
+const { wallet } = storeToRefs(walletStore)
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -602,9 +623,27 @@ async function downloadAllQRCodes () {
   }
 }
 
+async function prefillChannelIdIfNecessary () {
+  try {
+    await userStore.lazyFetchLikerInfo()
+    if (!customChannelInput.value) {
+      customChannelInput.value = convertLikerIdToChannelId(likerInfo.value.user)
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+  }
+}
+
 onMounted(() => {
   if (productId.value) {
     nextTick(createAffiliationLink)
   }
+
+  prefillChannelIdIfNecessary()
+})
+
+watch(wallet, () => {
+  prefillChannelIdIfNecessary()
 })
 </script>
diff --git a/pages/nft-book-store/user/index.vue b/pages/nft-book-store/user/index.vue
index 3bba13b17..5cf359255 100644
--- a/pages/nft-book-store/user/index.vue
+++ b/pages/nft-book-store/user/index.vue
@@ -37,20 +37,20 @@
             <UButton
               icon="i-heroicons-arrow-path"
               variant="outline"
-              :disabled="isLikerIdLoading"
+              :disabled="isFetchingLikerInfo"
               @click="refreshLikerIdInfo"
             />
           </utooltip>
         </template>
 
-        <UFormGroup v-if="likerIdInfo?.user" label="Your affiliation channel ID" size="xl">
-          <UInput placeholder="Affiliation ID" :value="`@${likerIdInfo?.user}`" disabled />
+        <UFormGroup v-if="likerInfo?.user" label="Your affiliation channel ID" size="xl">
+          <UInput placeholder="Affiliation ID" :value="channelId" disabled />
           <template v-if="!connectStatus.isReady" #help>
             Please setup your stripe account below to participate in the book affiliation program.
           </template>
           <template v-else #help>
             Append <UKbd class="font-mono">
-              ?from=@{{ likerIdInfo?.user }}
+              ?from={{ channelId }}
             </UKbd> in any book store page to earn commission from book sales.
           </template>
         </UFormGroup>
@@ -58,7 +58,7 @@
         <p v-else>
           You have not setup your channel ID yet.
         </p>
-        <template v-if="!likerIdInfo?.user" #footer>
+        <template v-if="!likerInfo?.user" #footer>
           <UButton
             label="Setup your ID"
             size="lg"
@@ -293,16 +293,21 @@ const collectionStore = useCollectionStore()
 const userStore = useUserStore()
 const { wallet } = storeToRefs(walletStore)
 const { token } = storeToRefs(bookStoreApiStore)
-const { bookUser, isUpdatingBookUserProfile } = storeToRefs(userStore)
+const { bookUser, isUpdatingBookUserProfile, likerInfo, isFetchingLikerInfo } = storeToRefs(userStore)
 const toast = useToast()
 
 const error = ref('')
 const isLoading = ref(false)
 const connectStatus = ref<any>({})
-const likerIdInfo = ref<any>({})
 const commissionHistory = ref<any>([])
 const isEnableNotificationEmails = ref(true)
-const isLikerIdLoading = ref(false)
+
+const channelId = computed(() => {
+  if (likerInfo.value?.user) {
+    return convertLikerIdToChannelId(likerInfo.value?.user)
+  }
+  return ''
+})
 
 watch(bookUser, (user) => {
   isEnableNotificationEmails.value = user?.isEnableNotificationEmails || false
@@ -319,7 +324,7 @@ const isAllowChangingNotificationEmailSettings = computed(() =>
 onMounted(async () => {
   await Promise.all([
     loadCommissionHistory(),
-    loadLikerId(),
+    fetchLikerInfo(),
     refreshStripeConnectStatus(),
     userStore.lazyFetchBookUserProfile()
   ])
@@ -376,22 +381,13 @@ async function loadCommissionHistory () {
   }
 }
 
-async function loadLikerId ({ nocache = false } = {}) {
+async function fetchLikerInfo ({ nocache = false } = {}) {
   try {
-    isLikerIdLoading.value = true
-    const timestamp = nocache ? `?ts=${Math.round(new Date().getTime() / 1000)}` : ''
-    const url = `${LIKE_CO_API}/users/addr/${wallet.value}/min${timestamp}`
-    const { data, error: fetchError } = await useFetch(url)
-
-    if (fetchError.value && fetchError.value?.statusCode !== 404) {
-      throw new Error(fetchError.value.toString())
-    }
-    likerIdInfo.value = (data.value as any) || {}
+    await userStore.fetchLikerInfo({ nocache })
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.error(e)
     error.value = (e as Error).toString()
-  } finally {
-    isLikerIdLoading.value = false
   }
 }
 
@@ -532,7 +528,7 @@ async function updateUserProfile () {
 }
 
 async function refreshLikerIdInfo () {
-  await loadLikerId({ nocache: true })
+  await fetchLikerInfo({ nocache: true })
 }
 
 </script>
diff --git a/stores/user.ts b/stores/user.ts
index f7c847e42..c5ab31532 100644
--- a/stores/user.ts
+++ b/stores/user.ts
@@ -1,5 +1,7 @@
 import { defineStore, storeToRefs } from 'pinia'
+
 import { useBookStoreApiStore } from './book-store-api'
+import { useWalletStore } from './wallet'
 
 export const useUserStore = defineStore('user', () => {
   const { LIKE_CO_API } = useRuntimeConfig().public
@@ -7,8 +9,13 @@ export const useUserStore = defineStore('user', () => {
   const bookStoreApiStore = useBookStoreApiStore()
   const { token } = storeToRefs(bookStoreApiStore)
 
-  const bookUser = ref(null as any)
+  const walletStore = useWalletStore()
+  const { wallet } = storeToRefs(walletStore)
+
+  const bookUser = ref<any>(null)
   const isUpdatingBookUserProfile = ref(false)
+  const likerInfo = ref<any>(null)
+  const isFetchingLikerInfo = ref(false)
 
   async function fetchBookUserProfile () {
     const { error, data } = await useFetch(
@@ -53,11 +60,39 @@ export const useUserStore = defineStore('user', () => {
     }
   }
 
+  async function fetchLikerInfo ({ nocache = false } = {}) {
+    try {
+      isFetchingLikerInfo.value = true
+      const timestamp = nocache ? `?ts=${Math.round(new Date().getTime() / 1000)}` : ''
+      const url = `${LIKE_CO_API}/users/addr/${wallet.value}/min${timestamp}`
+      const { data, error: fetchError } = await useFetch(url)
+
+      if (fetchError.value && fetchError.value?.statusCode !== 404) {
+        throw new Error(fetchError.value.toString())
+      }
+      likerInfo.value = (data.value as any) || {}
+      return likerInfo.value
+    } finally {
+      isFetchingLikerInfo.value = false
+    }
+  }
+
+  async function lazyFetchLikerInfo () {
+    if (!likerInfo.value && wallet.value) {
+      await fetchLikerInfo()
+    }
+    return likerInfo.value
+  }
+
   return {
     bookUser,
     isUpdatingBookUserProfile,
+    likerInfo,
+    isFetchingLikerInfo,
     fetchBookUserProfile,
     lazyFetchBookUserProfile,
-    updateBookUserProfile
+    updateBookUserProfile,
+    fetchLikerInfo,
+    lazyFetchLikerInfo
   }
 })
diff --git a/utils/index.ts b/utils/index.ts
index e45752f61..eba2ffd10 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -167,3 +167,7 @@ export function validateChannelId (channelId: string) {
 export function convertChannelIdToLikerId (channelId: string) {
   return channelId.replace(/^@/, '')
 }
+
+export function convertLikerIdToChannelId (likerId: string) {
+  return `@${likerId}`
+}

From 3af596173cb98eb1f702a3fe46c77da7d140cda7 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 13 Sep 2024 17:53:45 +0800
Subject: [PATCH 09/18] =?UTF-8?q?=F0=9F=8E=A8=20Rename=20fetchLikerInfo=20?=
 =?UTF-8?q?to=20fetchUserLikerInfo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue          |  2 +-
 pages/nft-book-store/user/index.vue | 16 ++++++++--------
 stores/static-data.ts               | 12 ++++++------
 stores/user.ts                      | 18 +++++++++---------
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 0d2a08e28..43e822b48 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -625,7 +625,7 @@ async function downloadAllQRCodes () {
 
 async function prefillChannelIdIfNecessary () {
   try {
-    await userStore.lazyFetchLikerInfo()
+    await userStore.lazyFetchUserLikerInfo()
     if (!customChannelInput.value) {
       customChannelInput.value = convertLikerIdToChannelId(likerInfo.value.user)
     }
diff --git a/pages/nft-book-store/user/index.vue b/pages/nft-book-store/user/index.vue
index 5cf359255..1b094ac80 100644
--- a/pages/nft-book-store/user/index.vue
+++ b/pages/nft-book-store/user/index.vue
@@ -37,8 +37,8 @@
             <UButton
               icon="i-heroicons-arrow-path"
               variant="outline"
-              :disabled="isFetchingLikerInfo"
-              @click="refreshLikerIdInfo"
+              :disabled="isFetchingUserLikerInfo"
+              @click="refreshUserLikerInfo"
             />
           </utooltip>
         </template>
@@ -293,7 +293,7 @@ const collectionStore = useCollectionStore()
 const userStore = useUserStore()
 const { wallet } = storeToRefs(walletStore)
 const { token } = storeToRefs(bookStoreApiStore)
-const { bookUser, isUpdatingBookUserProfile, likerInfo, isFetchingLikerInfo } = storeToRefs(userStore)
+const { bookUser, isUpdatingBookUserProfile, likerInfo, isFetchingUserLikerInfo } = storeToRefs(userStore)
 const toast = useToast()
 
 const error = ref('')
@@ -324,7 +324,7 @@ const isAllowChangingNotificationEmailSettings = computed(() =>
 onMounted(async () => {
   await Promise.all([
     loadCommissionHistory(),
-    fetchLikerInfo(),
+    fetchUserLikerInfo(),
     refreshStripeConnectStatus(),
     userStore.lazyFetchBookUserProfile()
   ])
@@ -381,9 +381,9 @@ async function loadCommissionHistory () {
   }
 }
 
-async function fetchLikerInfo ({ nocache = false } = {}) {
+async function fetchUserLikerInfo ({ nocache = false } = {}) {
   try {
-    await userStore.fetchLikerInfo({ nocache })
+    await userStore.fetchUserLikerInfo({ nocache })
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e)
@@ -527,8 +527,8 @@ async function updateUserProfile () {
   }
 }
 
-async function refreshLikerIdInfo () {
-  await fetchLikerInfo({ nocache: true })
+async function refreshUserLikerInfo () {
+  await fetchUserLikerInfo({ nocache: true })
 }
 
 </script>
diff --git a/stores/static-data.ts b/stores/static-data.ts
index 6082851cf..0b8da6258 100644
--- a/stores/static-data.ts
+++ b/stores/static-data.ts
@@ -5,16 +5,16 @@ import { FetchLikerInfoByIdResult } from 'utils/api'
 export const useStaticDataStore = defineStore('static-data', () => {
   const likerUserInfoMap = ref({} as Record<string, FetchLikerInfoByIdResult>)
 
-  const getLikerUserInfoById = computed(() => (likerId: string) => {
+  const getLikerInfoById = computed(() => (likerId: string) => {
     return likerUserInfoMap.value[likerId]
   })
 
   const getChannelInfoById = computed(() => (channelId: string) => {
     const likerId = convertChannelIdToLikerId(channelId)
-    return getLikerUserInfoById.value(likerId)
+    return getLikerInfoById.value(likerId)
   })
 
-  async function lazyFetchLikerUserInfoById (likerId: string) {
+  async function lazyFetchLikerInfoById (likerId: string) {
     if (likerUserInfoMap.value[likerId]) {
       return likerUserInfoMap.value[likerId]
     }
@@ -37,14 +37,14 @@ export const useStaticDataStore = defineStore('static-data', () => {
 
   async function lazyFetchChannelInfoById (channelId: string) {
     const likerId = convertChannelIdToLikerId(channelId)
-    const result = await lazyFetchLikerUserInfoById(likerId)
+    const result = await lazyFetchLikerInfoById(likerId)
     return result
   }
 
   return {
-    getLikerUserInfoById,
+    getLikerInfoById,
     getChannelInfoById,
-    lazyFetchLikerUserInfoById,
+    lazyFetchLikerInfoById,
     lazyFetchChannelInfoById
   }
 })
diff --git a/stores/user.ts b/stores/user.ts
index c5ab31532..529ca6ac3 100644
--- a/stores/user.ts
+++ b/stores/user.ts
@@ -15,7 +15,7 @@ export const useUserStore = defineStore('user', () => {
   const bookUser = ref<any>(null)
   const isUpdatingBookUserProfile = ref(false)
   const likerInfo = ref<any>(null)
-  const isFetchingLikerInfo = ref(false)
+  const isFetchingUserLikerInfo = ref(false)
 
   async function fetchBookUserProfile () {
     const { error, data } = await useFetch(
@@ -60,9 +60,9 @@ export const useUserStore = defineStore('user', () => {
     }
   }
 
-  async function fetchLikerInfo ({ nocache = false } = {}) {
+  async function fetchUserLikerInfo ({ nocache = false } = {}) {
     try {
-      isFetchingLikerInfo.value = true
+      isFetchingUserLikerInfo.value = true
       const timestamp = nocache ? `?ts=${Math.round(new Date().getTime() / 1000)}` : ''
       const url = `${LIKE_CO_API}/users/addr/${wallet.value}/min${timestamp}`
       const { data, error: fetchError } = await useFetch(url)
@@ -73,13 +73,13 @@ export const useUserStore = defineStore('user', () => {
       likerInfo.value = (data.value as any) || {}
       return likerInfo.value
     } finally {
-      isFetchingLikerInfo.value = false
+      isFetchingUserLikerInfo.value = false
     }
   }
 
-  async function lazyFetchLikerInfo () {
+  async function lazyFetchUserLikerInfo () {
     if (!likerInfo.value && wallet.value) {
-      await fetchLikerInfo()
+      await fetchUserLikerInfo()
     }
     return likerInfo.value
   }
@@ -88,11 +88,11 @@ export const useUserStore = defineStore('user', () => {
     bookUser,
     isUpdatingBookUserProfile,
     likerInfo,
-    isFetchingLikerInfo,
+    isFetchingUserLikerInfo,
     fetchBookUserProfile,
     lazyFetchBookUserProfile,
     updateBookUserProfile,
-    fetchLikerInfo,
-    lazyFetchLikerInfo
+    fetchUserLikerInfo,
+    lazyFetchUserLikerInfo
   }
 })

From 5e3e0c619c5a638e65d0d43bb84565486549bfbb Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 13 Sep 2024 22:22:33 +0800
Subject: [PATCH 10/18] =?UTF-8?q?=F0=9F=A5=85=20Guard=20wallet=20for=20pre?=
 =?UTF-8?q?fillChannelIdIfNecessary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 43e822b48..cfdf09a84 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -644,6 +644,8 @@ onMounted(() => {
 })
 
 watch(wallet, () => {
-  prefillChannelIdIfNecessary()
+  if (wallet.value) {
+    prefillChannelIdIfNecessary()
+  }
 })
 </script>

From 089fb6d64b73bf1e01c226b3baa371564488e6a6 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 13 Sep 2024 23:06:37 +0800
Subject: [PATCH 11/18] =?UTF-8?q?=F0=9F=8E=A8=20Respect=20session=20wallet?=
 =?UTF-8?q?=20for=20affiliation=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue          | 25 ++++++++-----------------
 pages/nft-book-store/user/index.vue |  5 +----
 stores/user.ts                      | 20 +++++++++++++-------
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index cfdf09a84..2015a04e0 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -55,7 +55,7 @@
               color="gray"
               variant="outline"
               size="2xs"
-              @click="prefillChannelIdIfNecessary"
+              @click="prefillChannelIdIfPossible"
             />
           </div>
         </UFormGroup>
@@ -243,7 +243,6 @@ import { AFFILIATION_CHANNEL_DEFAULT, AFFILIATION_CHANNELS } from '~/constant'
 import { useCollectionStore } from '~/stores/collection'
 import { useStaticDataStore } from '~/stores/static-data'
 import { useUserStore } from '~/stores/user'
-import { useWalletStore } from '~/stores/wallet'
 
 import { getPurchaseLink } from '~/utils'
 
@@ -252,8 +251,6 @@ const collectionStore = useCollectionStore()
 const staticDataStore = useStaticDataStore()
 const userStore = useUserStore()
 const { likerInfo } = storeToRefs(userStore)
-const walletStore = useWalletStore()
-const { wallet } = storeToRefs(walletStore)
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -623,15 +620,9 @@ async function downloadAllQRCodes () {
   }
 }
 
-async function prefillChannelIdIfNecessary () {
-  try {
-    await userStore.lazyFetchUserLikerInfo()
-    if (!customChannelInput.value) {
-      customChannelInput.value = convertLikerIdToChannelId(likerInfo.value.user)
-    }
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error)
+function prefillChannelIdIfPossible () {
+  if (!customChannelInput.value && likerInfo.value) {
+    customChannelInput.value = convertLikerIdToChannelId(likerInfo.value.user)
   }
 }
 
@@ -640,12 +631,12 @@ onMounted(() => {
     nextTick(createAffiliationLink)
   }
 
-  prefillChannelIdIfNecessary()
+  prefillChannelIdIfPossible()
 })
 
-watch(wallet, () => {
-  if (wallet.value) {
-    prefillChannelIdIfNecessary()
+watch(likerInfo, () => {
+  if (likerInfo.value) {
+    prefillChannelIdIfPossible()
   }
 })
 </script>
diff --git a/pages/nft-book-store/user/index.vue b/pages/nft-book-store/user/index.vue
index 1b094ac80..2a39f8dfc 100644
--- a/pages/nft-book-store/user/index.vue
+++ b/pages/nft-book-store/user/index.vue
@@ -280,19 +280,16 @@
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '~/stores/user'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
-import { useWalletStore } from '~/stores/wallet'
 import { useNftStore } from '~/stores/nft'
 import { useCollectionStore } from '~/stores/collection'
 
 const { LIKER_LAND_URL, LIKE_CO_API, LIKE_CO_HOST } = useRuntimeConfig().public
 
 const nftStore = useNftStore()
-const walletStore = useWalletStore()
 const bookStoreApiStore = useBookStoreApiStore()
 const collectionStore = useCollectionStore()
 const userStore = useUserStore()
-const { wallet } = storeToRefs(walletStore)
-const { token } = storeToRefs(bookStoreApiStore)
+const { token, wallet } = storeToRefs(bookStoreApiStore)
 const { bookUser, isUpdatingBookUserProfile, likerInfo, isFetchingUserLikerInfo } = storeToRefs(userStore)
 const toast = useToast()
 
diff --git a/stores/user.ts b/stores/user.ts
index 529ca6ac3..9323b3462 100644
--- a/stores/user.ts
+++ b/stores/user.ts
@@ -1,16 +1,12 @@
 import { defineStore, storeToRefs } from 'pinia'
 
 import { useBookStoreApiStore } from './book-store-api'
-import { useWalletStore } from './wallet'
 
 export const useUserStore = defineStore('user', () => {
   const { LIKE_CO_API } = useRuntimeConfig().public
 
   const bookStoreApiStore = useBookStoreApiStore()
-  const { token } = storeToRefs(bookStoreApiStore)
-
-  const walletStore = useWalletStore()
-  const { wallet } = storeToRefs(walletStore)
+  const { token, isAuthenticated, wallet } = storeToRefs(bookStoreApiStore)
 
   const bookUser = ref<any>(null)
   const isUpdatingBookUserProfile = ref(false)
@@ -70,7 +66,7 @@ export const useUserStore = defineStore('user', () => {
       if (fetchError.value && fetchError.value?.statusCode !== 404) {
         throw new Error(fetchError.value.toString())
       }
-      likerInfo.value = (data.value as any) || {}
+      likerInfo.value = (data.value as any) || null
       return likerInfo.value
     } finally {
       isFetchingUserLikerInfo.value = false
@@ -78,12 +74,22 @@ export const useUserStore = defineStore('user', () => {
   }
 
   async function lazyFetchUserLikerInfo () {
-    if (!likerInfo.value && wallet.value) {
+    if (isAuthenticated.value && !likerInfo.value) {
       await fetchUserLikerInfo()
     }
     return likerInfo.value
   }
 
+  watch(isAuthenticated, () => {
+    if (isAuthenticated.value) {
+      lazyFetchUserLikerInfo()
+      lazyFetchBookUserProfile()
+    } else {
+      bookUser.value = null
+      likerInfo.value = null
+    }
+  })
+
   return {
     bookUser,
     isUpdatingBookUserProfile,

From 4da875e9a7a076c2c0e94309514302930f58b513 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 13 Sep 2024 23:54:54 +0800
Subject: [PATCH 12/18] =?UTF-8?q?=F0=9F=9A=B8=20Force=20refresh=20user=20L?=
 =?UTF-8?q?iker=20info=20on=20enter=20user=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/nft-book-store/user/index.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/pages/nft-book-store/user/index.vue b/pages/nft-book-store/user/index.vue
index 2a39f8dfc..660049e28 100644
--- a/pages/nft-book-store/user/index.vue
+++ b/pages/nft-book-store/user/index.vue
@@ -321,7 +321,7 @@ const isAllowChangingNotificationEmailSettings = computed(() =>
 onMounted(async () => {
   await Promise.all([
     loadCommissionHistory(),
-    fetchUserLikerInfo(),
+    refreshUserLikerInfo(),
     refreshStripeConnectStatus(),
     userStore.lazyFetchBookUserProfile()
   ])
@@ -378,9 +378,9 @@ async function loadCommissionHistory () {
   }
 }
 
-async function fetchUserLikerInfo ({ nocache = false } = {}) {
+async function refreshUserLikerInfo () {
   try {
-    await userStore.fetchUserLikerInfo({ nocache })
+    await userStore.fetchUserLikerInfo({ nocache: true })
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e)
@@ -524,8 +524,4 @@ async function updateUserProfile () {
   }
 }
 
-async function refreshUserLikerInfo () {
-  await fetchUserLikerInfo({ nocache: true })
-}
-
 </script>

From f0857e346575ba086c727f0affed14e374f44865 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Sat, 14 Sep 2024 00:01:29 +0800
Subject: [PATCH 13/18] =?UTF-8?q?=F0=9F=8E=A8=20Rename=20static=20data=20s?=
 =?UTF-8?q?tore=20to=20liker=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue          | 8 ++++----
 stores/{static-data.ts => liker.ts} | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename stores/{static-data.ts => liker.ts} (95%)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 2015a04e0..22cb91ceb 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -241,14 +241,14 @@ import { type FileExtension } from '@likecoin/qr-code-styling'
 import { AFFILIATION_CHANNEL_DEFAULT, AFFILIATION_CHANNELS } from '~/constant'
 
 import { useCollectionStore } from '~/stores/collection'
-import { useStaticDataStore } from '~/stores/static-data'
+import { useLikerStore } from '~/stores/liker'
 import { useUserStore } from '~/stores/user'
 
 import { getPurchaseLink } from '~/utils'
 
 const { LIKE_CO_API } = useRuntimeConfig().public
 const collectionStore = useCollectionStore()
-const staticDataStore = useStaticDataStore()
+const likerStore = useLikerStore()
 const userStore = useUserStore()
 const { likerInfo } = storeToRefs(userStore)
 const route = useRoute()
@@ -329,7 +329,7 @@ const customChannels = computed(
     .map(channelId => channelId.trim())
     .filter(Boolean)
     .map((channelId) => {
-      const channelInfo = staticDataStore.getChannelInfoById(channelId)
+      const channelInfo = likerStore.getChannelInfoById(channelId)
       return {
         id: channelId,
         name: channelInfo?.displayName || channelId
@@ -470,7 +470,7 @@ async function createAffiliationLink () {
     }
 
     const results = await Promise.all(customChannels.value.map(async (channel) => {
-      const channelInfo = await staticDataStore.lazyFetchChannelInfoById(channel.id)
+      const channelInfo = await likerStore.lazyFetchChannelInfoById(channel.id)
       return {
         ...channel,
         isRegistered: !!channelInfo
diff --git a/stores/static-data.ts b/stores/liker.ts
similarity index 95%
rename from stores/static-data.ts
rename to stores/liker.ts
index 0b8da6258..44477860b 100644
--- a/stores/static-data.ts
+++ b/stores/liker.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 
 import { FetchLikerInfoByIdResult } from 'utils/api'
 
-export const useStaticDataStore = defineStore('static-data', () => {
+export const useLikerStore = defineStore('liker', () => {
   const likerUserInfoMap = ref({} as Record<string, FetchLikerInfoByIdResult>)
 
   const getLikerInfoById = computed(() => (likerId: string) => {

From 9d091c7175b1bea7a17e3e4c5f29fd4af5b496bc Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Sat, 14 Sep 2024 00:41:03 +0800
Subject: [PATCH 14/18] =?UTF-8?q?=F0=9F=8E=A8=20Reuse=20liker=20info=20for?=
 =?UTF-8?q?=20user=20liker=20info?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/affiliation-link.vue          | 12 +++---
 pages/nft-book-store/user/index.vue | 10 ++---
 stores/liker.ts                     | 64 ++++++++++++++++++++++++-----
 stores/user.ts                      | 36 +++++++++-------
 utils/api.ts                        | 14 +++++--
 5 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index 22cb91ceb..e3d483031 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -49,7 +49,7 @@
               name="channel_ids"
             />
             <UButton
-              v-show="!customChannelInput && likerInfo"
+              v-show="!customChannelInput && userLikerInfo"
               class="relative"
               label="Prefill from Account"
               color="gray"
@@ -250,7 +250,7 @@ const { LIKE_CO_API } = useRuntimeConfig().public
 const collectionStore = useCollectionStore()
 const likerStore = useLikerStore()
 const userStore = useUserStore()
-const { likerInfo } = storeToRefs(userStore)
+const { userLikerInfo } = storeToRefs(userStore)
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -621,8 +621,8 @@ async function downloadAllQRCodes () {
 }
 
 function prefillChannelIdIfPossible () {
-  if (!customChannelInput.value && likerInfo.value) {
-    customChannelInput.value = convertLikerIdToChannelId(likerInfo.value.user)
+  if (!customChannelInput.value && userLikerInfo.value) {
+    customChannelInput.value = convertLikerIdToChannelId(userLikerInfo.value.user)
   }
 }
 
@@ -634,8 +634,8 @@ onMounted(() => {
   prefillChannelIdIfPossible()
 })
 
-watch(likerInfo, () => {
-  if (likerInfo.value) {
+watch(userLikerInfo, () => {
+  if (userLikerInfo.value) {
     prefillChannelIdIfPossible()
   }
 })
diff --git a/pages/nft-book-store/user/index.vue b/pages/nft-book-store/user/index.vue
index 660049e28..d6ebb18c8 100644
--- a/pages/nft-book-store/user/index.vue
+++ b/pages/nft-book-store/user/index.vue
@@ -43,7 +43,7 @@
           </utooltip>
         </template>
 
-        <UFormGroup v-if="likerInfo?.user" label="Your affiliation channel ID" size="xl">
+        <UFormGroup v-if="userLikerInfo?.user" label="Your affiliation channel ID" size="xl">
           <UInput placeholder="Affiliation ID" :value="channelId" disabled />
           <template v-if="!connectStatus.isReady" #help>
             Please setup your stripe account below to participate in the book affiliation program.
@@ -58,7 +58,7 @@
         <p v-else>
           You have not setup your channel ID yet.
         </p>
-        <template v-if="!likerInfo?.user" #footer>
+        <template v-if="!userLikerInfo?.user" #footer>
           <UButton
             label="Setup your ID"
             size="lg"
@@ -290,7 +290,7 @@ const bookStoreApiStore = useBookStoreApiStore()
 const collectionStore = useCollectionStore()
 const userStore = useUserStore()
 const { token, wallet } = storeToRefs(bookStoreApiStore)
-const { bookUser, isUpdatingBookUserProfile, likerInfo, isFetchingUserLikerInfo } = storeToRefs(userStore)
+const { bookUser, isUpdatingBookUserProfile, userLikerInfo, isFetchingUserLikerInfo } = storeToRefs(userStore)
 const toast = useToast()
 
 const error = ref('')
@@ -300,8 +300,8 @@ const commissionHistory = ref<any>([])
 const isEnableNotificationEmails = ref(true)
 
 const channelId = computed(() => {
-  if (likerInfo.value?.user) {
-    return convertLikerIdToChannelId(likerInfo.value?.user)
+  if (userLikerInfo.value?.user) {
+    return convertLikerIdToChannelId(userLikerInfo.value?.user)
   }
   return ''
 })
diff --git a/stores/liker.ts b/stores/liker.ts
index 44477860b..90530325d 100644
--- a/stores/liker.ts
+++ b/stores/liker.ts
@@ -1,12 +1,17 @@
 import { defineStore } from 'pinia'
 
-import { FetchLikerInfoByIdResult } from 'utils/api'
+import { FetchLikerInfoResult } from 'utils/api'
 
 export const useLikerStore = defineStore('liker', () => {
-  const likerUserInfoMap = ref({} as Record<string, FetchLikerInfoByIdResult>)
+  const likerInfoMapById = ref({} as Record<string, FetchLikerInfoResult>)
+  const likerInfoMapByWallet = ref({} as Record<string, FetchLikerInfoResult>)
 
   const getLikerInfoById = computed(() => (likerId: string) => {
-    return likerUserInfoMap.value[likerId]
+    return likerInfoMapById.value[likerId] || null
+  })
+
+  const getLikerInfoByWallet = computed(() => (wallet: string) => {
+    return likerInfoMapByWallet.value[wallet] || null
   })
 
   const getChannelInfoById = computed(() => (channelId: string) => {
@@ -14,27 +19,60 @@ export const useLikerStore = defineStore('liker', () => {
     return getLikerInfoById.value(likerId)
   })
 
+  async function fetchLikerInfoById (likerId: string) {
+    try {
+      const result = await useFetchLikerInfoById(likerId)
+      if (result.error.value) {
+        throw result.error.value
+      }
+      const likerInfo = result.data.value
+      if (!likerInfo) {
+        throw new Error('Missing data in `fetchLikerInfoById`')
+      }
+      likerInfoMapById.value[likerId] = likerInfo
+      likerInfoMapByWallet.value[likerInfo.likeWallet] = likerInfo
+      return likerInfo
+    } catch {
+      return null
+    }
+  }
+
   async function lazyFetchLikerInfoById (likerId: string) {
-    if (likerUserInfoMap.value[likerId]) {
-      return likerUserInfoMap.value[likerId]
+    if (likerInfoMapById.value[likerId]) {
+      return likerInfoMapById.value[likerId]
     }
 
+    const likerInfo = await fetchLikerInfoById(likerId)
+    return likerInfo
+  }
+
+  async function fetchLikerInfoByWallet (wallet: string, { nocache = false } = {}) {
     try {
-      const result = await fetchLikerInfoById(likerId)
+      const result = await useFetchLikerInfoByWallet(wallet, { nocache })
       if (result.error.value) {
         throw result.error.value
       }
-      const userInfo = result.data.value
-      if (!userInfo) {
-        throw new Error('Missing data in `fetchLikerInfoById`')
+      const likerInfo = result.data.value
+      if (!likerInfo) {
+        throw new Error('Missing data in `fetchLikerInfoByWallet`')
       }
-      likerUserInfoMap.value[likerId] = userInfo
-      return userInfo
+      likerInfoMapByWallet.value[wallet] = likerInfo
+      likerInfoMapById.value[likerInfo.user] = likerInfo
+      return likerInfo
     } catch {
       return null
     }
   }
 
+  async function lazyFetchLikerInfoByWallet (wallet: string) {
+    if (likerInfoMapByWallet.value[wallet]) {
+      return likerInfoMapByWallet.value[wallet]
+    }
+
+    const likerInfo = await fetchLikerInfoByWallet(wallet)
+    return likerInfo
+  }
+
   async function lazyFetchChannelInfoById (channelId: string) {
     const likerId = convertChannelIdToLikerId(channelId)
     const result = await lazyFetchLikerInfoById(likerId)
@@ -43,8 +81,12 @@ export const useLikerStore = defineStore('liker', () => {
 
   return {
     getLikerInfoById,
+    getLikerInfoByWallet,
     getChannelInfoById,
+    fetchLikerInfoById,
     lazyFetchLikerInfoById,
+    fetchLikerInfoByWallet,
+    lazyFetchLikerInfoByWallet,
     lazyFetchChannelInfoById
   }
 })
diff --git a/stores/user.ts b/stores/user.ts
index 9323b3462..1aef38c8d 100644
--- a/stores/user.ts
+++ b/stores/user.ts
@@ -1,16 +1,23 @@
 import { defineStore, storeToRefs } from 'pinia'
 
 import { useBookStoreApiStore } from './book-store-api'
+import { useLikerStore } from './liker'
 
 export const useUserStore = defineStore('user', () => {
   const { LIKE_CO_API } = useRuntimeConfig().public
 
   const bookStoreApiStore = useBookStoreApiStore()
   const { token, isAuthenticated, wallet } = storeToRefs(bookStoreApiStore)
+  const likerStore = useLikerStore()
 
   const bookUser = ref<any>(null)
   const isUpdatingBookUserProfile = ref(false)
-  const likerInfo = ref<any>(null)
+  const userLikerInfo = computed(() => {
+    if (isAuthenticated.value && wallet.value) {
+      return likerStore.getLikerInfoByWallet(wallet.value)
+    }
+    return null
+  })
   const isFetchingUserLikerInfo = ref(false)
 
   async function fetchBookUserProfile () {
@@ -57,27 +64,27 @@ export const useUserStore = defineStore('user', () => {
   }
 
   async function fetchUserLikerInfo ({ nocache = false } = {}) {
+    if (!isAuthenticated.value) {
+      return null
+    }
     try {
       isFetchingUserLikerInfo.value = true
-      const timestamp = nocache ? `?ts=${Math.round(new Date().getTime() / 1000)}` : ''
-      const url = `${LIKE_CO_API}/users/addr/${wallet.value}/min${timestamp}`
-      const { data, error: fetchError } = await useFetch(url)
-
-      if (fetchError.value && fetchError.value?.statusCode !== 404) {
-        throw new Error(fetchError.value.toString())
-      }
-      likerInfo.value = (data.value as any) || null
-      return likerInfo.value
+      const likerInfo = await likerStore.fetchLikerInfoByWallet(wallet.value, { nocache })
+      return likerInfo
     } finally {
       isFetchingUserLikerInfo.value = false
     }
   }
 
   async function lazyFetchUserLikerInfo () {
-    if (isAuthenticated.value && !likerInfo.value) {
-      await fetchUserLikerInfo()
+    if (!isAuthenticated.value) {
+      return null
+    }
+    if (userLikerInfo.value) {
+      return userLikerInfo.value
     }
-    return likerInfo.value
+    const likerInfo = await fetchUserLikerInfo()
+    return likerInfo
   }
 
   watch(isAuthenticated, () => {
@@ -86,14 +93,13 @@ export const useUserStore = defineStore('user', () => {
       lazyFetchBookUserProfile()
     } else {
       bookUser.value = null
-      likerInfo.value = null
     }
   })
 
   return {
     bookUser,
     isUpdatingBookUserProfile,
-    likerInfo,
+    userLikerInfo,
     isFetchingUserLikerInfo,
     fetchBookUserProfile,
     lazyFetchBookUserProfile,
diff --git a/utils/api.ts b/utils/api.ts
index 58fbb6e99..2223cf0f8 100644
--- a/utils/api.ts
+++ b/utils/api.ts
@@ -1,4 +1,4 @@
-export interface FetchLikerInfoByIdResult {
+export interface FetchLikerInfoResult {
   user: string
   displayName: string
   avatar: string
@@ -10,9 +10,17 @@ export interface FetchLikerInfoByIdResult {
   description: string
 }
 
-export async function fetchLikerInfoById (likerId: string) {
+export async function useFetchLikerInfoById (likerId: string) {
   const { LIKE_CO_API } = useRuntimeConfig().public
   const url = `${LIKE_CO_API}/users/id/${likerId}/min`
-  const result = await useFetch<FetchLikerInfoByIdResult>(url)
+  const result = await useFetch<FetchLikerInfoResult>(url)
+  return result
+}
+
+export async function useFetchLikerInfoByWallet (wallet: string, { nocache = false } = {}) {
+  const { LIKE_CO_API } = useRuntimeConfig().public
+  const timestamp = nocache ? `?ts=${Math.round(new Date().getTime() / 1000)}` : ''
+  const url = `${LIKE_CO_API}/users/addr/${wallet}/min${timestamp}`
+  const result = await useFetch<FetchLikerInfoResult>(url)
   return result
 }

From 5c4e8194ec0e3be1b5a76becb467e10e7addda5e Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Sat, 14 Sep 2024 03:03:56 +0800
Subject: [PATCH 15/18] =?UTF-8?q?=F0=9F=A5=85=20Use=20qrcode=20for=20QR=20?=
 =?UTF-8?q?code=20if=20utm=20medium=20is=20empty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 utils/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/utils/index.ts b/utils/index.ts
index eba2ffd10..3493bf243 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -144,8 +144,8 @@ export function getPurchaseLink ({
     })
     return url.toString()
   }
-  if (isForQRCode && queryInput?.utm_medium) {
-    query.utm_medium = `${queryInput.utm_medium}-qr`
+  if (isForQRCode) {
+    query.utm_medium = queryInput?.utm_medium ? `${queryInput.utm_medium}-qr` : 'qrcode'
   }
 
   const { LIKE_CO_API, LIKER_LAND_URL } = useRuntimeConfig().public

From 18557855fe840d2cb6b73e596f7dfdd19adb1f44 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Sat, 14 Sep 2024 05:07:48 +0800
Subject: [PATCH 16/18] =?UTF-8?q?=F0=9F=A5=85=20Guard=20channel=20Stripe?=
 =?UTF-8?q?=20Connect=20status?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/StripeConnectCard.vue              |  4 +-
 pages/affiliation-link.vue                    | 29 ++++++----
 pages/nft-book-store/collection/new.vue       |  4 +-
 .../collection/status/[collectionId].vue      |  6 +-
 pages/nft-book-store/new.vue                  |  4 +-
 pages/nft-book-store/status/[classId].vue     |  6 +-
 stores/stripe.ts                              | 56 +++++++++++++------
 7 files changed, 69 insertions(+), 40 deletions(-)

diff --git a/components/StripeConnectCard.vue b/components/StripeConnectCard.vue
index acd45d7ed..16a3337e2 100644
--- a/components/StripeConnectCard.vue
+++ b/components/StripeConnectCard.vue
@@ -148,7 +148,7 @@ const { LIKE_CO_API } = useRuntimeConfig().public
 
 const stripeStore = useStripeStore()
 
-const { fetchStripeConnectStatus } = stripeStore
+const { fetchStripeConnectStatusByWallet } = stripeStore
 const isStripeConnectChecked = defineModel('isStripeConnectChecked')
 const isUsingDefaultAccount = defineModel('isUsingDefaultAccount')
 
@@ -220,7 +220,7 @@ async function onStripeConnectWalletInput (input: any) {
     await useFetch(
       `${LIKE_CO_API}/likernft/book/user/connect/status?wallet=${inputValue}`
     )
-    await fetchStripeConnectStatus(inputValue)
+    await fetchStripeConnectStatusByWallet(inputValue)
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(error)
diff --git a/pages/affiliation-link.vue b/pages/affiliation-link.vue
index e3d483031..5b1f1ed65 100644
--- a/pages/affiliation-link.vue
+++ b/pages/affiliation-link.vue
@@ -242,6 +242,7 @@ import { AFFILIATION_CHANNEL_DEFAULT, AFFILIATION_CHANNELS } from '~/constant'
 
 import { useCollectionStore } from '~/stores/collection'
 import { useLikerStore } from '~/stores/liker'
+import { useStripeStore } from '~/stores/stripe'
 import { useUserStore } from '~/stores/user'
 
 import { getPurchaseLink } from '~/utils'
@@ -249,6 +250,7 @@ import { getPurchaseLink } from '~/utils'
 const { LIKE_CO_API } = useRuntimeConfig().public
 const collectionStore = useCollectionStore()
 const likerStore = useLikerStore()
+const stripeStore = useStripeStore()
 const userStore = useUserStore()
 const { userLikerInfo } = storeToRefs(userStore)
 const route = useRoute()
@@ -469,16 +471,23 @@ async function createAffiliationLink () {
       return
     }
 
-    const results = await Promise.all(customChannels.value.map(async (channel) => {
-      const channelInfo = await likerStore.lazyFetchChannelInfoById(channel.id)
-      return {
-        ...channel,
-        isRegistered: !!channelInfo
-      }
-    }))
-    const unregisteredChannel = results.find(channel => !channel.isRegistered)
-    if (unregisteredChannel) {
-      customChannelInputError.value = `Channel ID "${unregisteredChannel.id}" is not registered`
+    try {
+      await Promise.all(customChannels.value.map(async (channel) => {
+        const channelInfo = await likerStore.lazyFetchChannelInfoById(channel.id)
+        if (!channelInfo) {
+          throw new Error(`Channel ID "${channel.id}" has not registered for Liker ID`)
+        }
+
+        const stripeConnectStatus = await stripeStore.fetchStripeConnectStatusByWallet(channelInfo.likeWallet)
+        if (!stripeConnectStatus?.hasAccount) {
+          throw new Error(`Channel ID "${channel.id}" has not connected to Stripe`)
+        }
+        if (!stripeConnectStatus?.isReady) {
+          throw new Error(`Channel ID "${channel.id}" has not completed Stripe Connect setup`)
+        }
+      }))
+    } catch (error) {
+      customChannelInputError.value = (error as Error).message
       return
     }
   }
diff --git a/pages/nft-book-store/collection/new.vue b/pages/nft-book-store/collection/new.vue
index d763b47ea..e19751460 100644
--- a/pages/nft-book-store/collection/new.vue
+++ b/pages/nft-book-store/collection/new.vue
@@ -444,7 +444,7 @@ const { wallet, signer } = storeToRefs(walletStore)
 const { connect } = walletStore
 const { newNFTBookCollection } = collectionStore
 const { getClassMetadataById, lazyFetchClassMetadataById } = nftStore
-const { fetchStripeConnectStatus, stripeConnectStatusWalletMap } = stripeStore
+const { fetchStripeConnectStatusByWallet, stripeConnectStatusWalletMap } = stripeStore
 
 const router = useRouter()
 const route = useRoute()
@@ -543,7 +543,7 @@ config({
 onMounted(async () => {
   try {
     isLoading.value = true
-    await fetchStripeConnectStatus(wallet.value)
+    await fetchStripeConnectStatusByWallet(wallet.value)
 
     if (stripeConnectStatusWalletMap[wallet.value]?.isReady) {
       isStripeConnectChecked.value = true
diff --git a/pages/nft-book-store/collection/status/[collectionId].vue b/pages/nft-book-store/collection/status/[collectionId].vue
index a75696b7e..7e1a1b2d4 100644
--- a/pages/nft-book-store/collection/status/[collectionId].vue
+++ b/pages/nft-book-store/collection/status/[collectionId].vue
@@ -491,7 +491,7 @@ const { token } = storeToRefs(bookStoreApiStore)
 const { wallet } = storeToRefs(store)
 const { updateNFTBookCollectionById } = collectionStore
 const { getClassMetadataById, lazyFetchClassMetadataById } = nftStore
-const { fetchStripeConnectStatus, stripeConnectStatusWalletMap } = stripeStore
+const { fetchStripeConnectStatusByWallet, stripeConnectStatusWalletMap } = stripeStore
 
 const route = useRoute()
 const router = useRouter()
@@ -830,7 +830,7 @@ onMounted(async () => {
       stripeConnectWallet.value = classStripeWallet
       if (classStripeWallet !== wallet.value) {
         isUsingDefaultAccount.value = false
-        await fetchStripeConnectStatus(classStripeWallet)
+        await fetchStripeConnectStatusByWallet(classStripeWallet)
       }
     }
     coupons.value = classCoupons || {}
@@ -850,7 +850,7 @@ onMounted(async () => {
 
     ordersData.value = orders.value
 
-    await fetchStripeConnectStatus(wallet.value)
+    await fetchStripeConnectStatusByWallet(wallet.value)
     collectionListingInfo.value.classIds.forEach((classId: string) => lazyFetchClassMetadataById(classId))
   } catch (err) {
     console.error(err)
diff --git a/pages/nft-book-store/new.vue b/pages/nft-book-store/new.vue
index 3a2f7b70c..24a8214d5 100644
--- a/pages/nft-book-store/new.vue
+++ b/pages/nft-book-store/new.vue
@@ -493,7 +493,7 @@ const stripeStore = useStripeStore()
 const { connect } = walletStore
 const { wallet, signer } = storeToRefs(walletStore)
 const { newBookListing, updateEditionPrice } = bookStoreApiStore
-const { fetchStripeConnectStatus, stripeConnectStatusWalletMap } = stripeStore
+const { fetchStripeConnectStatusByWallet, stripeConnectStatusWalletMap } = stripeStore
 
 const router = useRouter()
 const route = useRoute()
@@ -616,7 +616,7 @@ config({
 onMounted(async () => {
   try {
     isLoading.value = true
-    await fetchStripeConnectStatus(wallet.value)
+    await fetchStripeConnectStatusByWallet(wallet.value)
 
     if (stripeConnectStatusWalletMap[wallet.value]?.isReady) {
       isStripeConnectChecked.value = true
diff --git a/pages/nft-book-store/status/[classId].vue b/pages/nft-book-store/status/[classId].vue
index 2fb330322..934d01260 100644
--- a/pages/nft-book-store/status/[classId].vue
+++ b/pages/nft-book-store/status/[classId].vue
@@ -727,7 +727,7 @@ const { token } = storeToRefs(bookStoreApiStore)
 const { wallet } = storeToRefs(store)
 const { updateBookListingSetting } = bookStoreApiStore
 const { lazyFetchClassMetadataById } = nftStore
-const { fetchStripeConnectStatus, stripeConnectStatusWalletMap } = stripeStore
+const { fetchStripeConnectStatusByWallet, stripeConnectStatusWalletMap } = stripeStore
 
 const route = useRoute()
 const router = useRouter()
@@ -1116,7 +1116,7 @@ onMounted(async () => {
       stripeConnectWallet.value = classStripeWallet
       if (classStripeWallet !== wallet.value) {
         isUsingDefaultAccount.value = false
-        await fetchStripeConnectStatus(classStripeWallet)
+        await fetchStripeConnectStatusByWallet(classStripeWallet)
       }
     }
     mustClaimToView.value = classMustClaimToView
@@ -1139,7 +1139,7 @@ onMounted(async () => {
 
     ordersData.value = orders.value
 
-    await fetchStripeConnectStatus(wallet.value)
+    await fetchStripeConnectStatusByWallet(wallet.value)
     lazyFetchClassMetadataById(classId.value as string)
   } catch (err) {
     console.error(err)
diff --git a/stores/stripe.ts b/stores/stripe.ts
index 4593eb156..b131804a7 100644
--- a/stores/stripe.ts
+++ b/stores/stripe.ts
@@ -1,35 +1,55 @@
 import { defineStore, storeToRefs } from 'pinia'
+
 import { useBookStoreApiStore } from '~/stores/book-store-api'
 
+interface StripeConnectStatus {
+  hasAccount: boolean
+  isReady: boolean
+  email?: string
+  stripeConnectAccountId?: string
+}
+
+function getStripeConnectStatusDefault (): StripeConnectStatus {
+  return {
+    isReady: false,
+    hasAccount: false,
+    email: '',
+    stripeConnectAccountId: ''
+  }
+}
+
 export const useStripeStore = defineStore('stripe-connect', () => {
   const { LIKE_CO_API } = useRuntimeConfig().public
 
   const bookStoreApiStore = useBookStoreApiStore()
   const { token } = storeToRefs(bookStoreApiStore)
 
-  const stripeConnectStatusWalletMap = ref({} as Record<string, any>)
+  const stripeConnectStatusWalletMap = ref({} as Record<string, StripeConnectStatus>)
 
-  async function fetchStripeConnectStatus (wallet: string) {
-    stripeConnectStatusWalletMap.value[wallet] = { isReady: false }
-    const { data, error } = await useFetch(`${LIKE_CO_API}/likernft/book/user/connect/status?wallet=${wallet}`,
-      {
-        headers: {
-          authorization: `Bearer ${token.value}`
-        }
-      }
-    )
-    stripeConnectStatusWalletMap.value[wallet] = (data?.value as any) || {}
-    if (error.value) {
-      if (error.value.statusCode !== 404) {
-        throw new Error(error.value?.data.toString())
+  async function fetchStripeConnectStatusByWallet (wallet: string) {
+    if (!stripeConnectStatusWalletMap.value[wallet]) {
+      stripeConnectStatusWalletMap.value[wallet] = getStripeConnectStatusDefault()
+    }
+    const { data, error } = await useFetch<StripeConnectStatus>(`${LIKE_CO_API}/likernft/book/user/connect/status`, {
+      headers: {
+        authorization: `Bearer ${token.value}`
+      },
+      query: {
+        wallet
       }
-      // eslint-disable-next-line no-console
-      console.error('STRIPE_CONNECT_INFO_NOT_FOUND')
+    })
+    if (error.value && error.value.statusCode !== 404) {
+      throw new Error(error.value?.data.toString())
+    }
+    if (!data.value) {
+      return stripeConnectStatusWalletMap.value[wallet]
     }
+    stripeConnectStatusWalletMap.value[wallet] = data?.value
+    return data.value
   }
 
   return {
-    fetchStripeConnectStatus,
-    stripeConnectStatusWalletMap
+    stripeConnectStatusWalletMap,
+    fetchStripeConnectStatusByWallet
   }
 })

From aaea43940866314763626aab852a5913c4e806d6 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Sat, 14 Sep 2024 11:40:52 +0800
Subject: [PATCH 17/18] =?UTF-8?q?=F0=9F=8E=A8=20Use=20getter=20to=20obtain?=
 =?UTF-8?q?=20Stripe=20Connect=20status?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/StripeConnectCard.vue              | 53 +++++++++----------
 pages/nft-book-store/collection/new.vue       |  6 +--
 .../collection/status/[collectionId].vue      |  3 +-
 pages/nft-book-store/new.vue                  |  6 +--
 pages/nft-book-store/status/[classId].vue     |  3 +-
 stores/stripe.ts                              |  5 ++
 6 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/components/StripeConnectCard.vue b/components/StripeConnectCard.vue
index 16a3337e2..563fbb277 100644
--- a/components/StripeConnectCard.vue
+++ b/components/StripeConnectCard.vue
@@ -34,7 +34,7 @@
               </template>
             </URadio>
             <div
-              v-if="isDefaultAccountReady"
+              v-if="defaultAccountConnectStatus.isReady"
               class="flex flex-col items-start w-full"
             >
               <div
@@ -46,7 +46,10 @@
                   variant="outline"
                   title="Has Stripe Account"
                 />
-                <div>{{ ` Email: ${props.stripeConnectStatusWalletMap[props.loginAddress]?.email}` }}</div>
+                <div
+                  v-if="defaultAccountConnectStatus.email"
+                  v-text="`Email: ${defaultAccountConnectStatus.email}`"
+                />
               </div>
             </div>
             <span v-else>
@@ -85,35 +88,27 @@
             </div>
             <UProgress v-if="isStripeConnectLoading" class="my-[6px]" animation="carousel" />
             <div
-              v-else-if="
-                connectStatusByInputWallet
-              "
+              v-else-if="inputWallet && inputAccountConnectStatus"
               class="flex flex-col gap-[8px] mt-[12px] px-[6px] py-[4px] w-[80%]"
             >
-              <div
-                v-if="isInputAccountReady"
-              >
+              <div v-if="inputAccountConnectStatus.isReady">
                 <UAlert
                   icon="i-heroicons-check"
                   color="primary"
                   variant="outline"
                   title="Has Stripe Account"
                 />
-                <span
-                  v-if="
-                    connectStatusByInputWallet
-                      ?.email
-                  "
-                >{{
-                  ` Email: ${connectStatusByInputWallet?.email}`
-                }}</span>
+                <div
+                  v-if="inputAccountConnectStatus.email"
+                  v-text="`Email: ${inputAccountConnectStatus.email}`"
+                />
               </div>
               <UAlert
                 v-else
                 icon="i-heroicons-x-mark"
                 color="red"
                 variant="outline"
-                title="No stripe account connected to this wallet yet."
+                title="No Stripe account connected to this wallet yet."
               />
             </div>
           </div>
@@ -141,6 +136,8 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
 import { LIKE_ADDRESS_REGEX } from '~/constant'
 import { useStripeStore } from '~/stores/stripe'
 
@@ -149,6 +146,8 @@ const { LIKE_CO_API } = useRuntimeConfig().public
 const stripeStore = useStripeStore()
 
 const { fetchStripeConnectStatusByWallet } = stripeStore
+const { getStripeConnectStatusByWallet } = storeToRefs(stripeStore)
+
 const isStripeConnectChecked = defineModel('isStripeConnectChecked')
 const isUsingDefaultAccount = defineModel('isUsingDefaultAccount')
 
@@ -161,10 +160,6 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  stripeConnectStatusWalletMap: {
-    type: Object,
-    default: () => {}
-  },
   stripeConnectWallet: {
     type: String,
     default: ''
@@ -183,18 +178,16 @@ const emit = defineEmits<{
 const inputWallet = ref('')
 const stripeConnectInputError = ref('')
 const isStripeConnectLoading = ref(false)
-const isDefaultAccountReady = computed(() => props.stripeConnectStatusWalletMap[props.loginAddress]?.isReady)
-const isInputAccountReady = computed(() => props.stripeConnectStatusWalletMap[inputWallet.value]?.isReady)
+const defaultAccountConnectStatus = computed(() => getStripeConnectStatusByWallet.value(props.loginAddress))
+const inputAccountConnectStatus = computed(() => getStripeConnectStatusByWallet.value(inputWallet.value))
 
 const isStripeConnectWalletReadyToSave = computed(() => {
   if (!isStripeConnectChecked.value) { return false }
-  if (isUsingDefaultAccount.value && !isDefaultAccountReady.value) { return false }
-  if ((!isUsingDefaultAccount.value && !isInputAccountReady.value) || stripeConnectInputError.value) { return false }
+  if (isUsingDefaultAccount.value && !defaultAccountConnectStatus.value.isReady) { return false }
+  if ((!isUsingDefaultAccount.value && !inputAccountConnectStatus.value.isReady) || stripeConnectInputError.value) { return false }
   return true
 })
 
-const connectStatusByInputWallet = computed(() => props.stripeConnectStatusWalletMap[inputWallet.value])
-
 watch(() => props.stripeConnectWallet, (wallet) => {
   if (wallet && !isUsingDefaultAccount.value) {
     inputWallet.value = wallet
@@ -211,8 +204,10 @@ async function onStripeConnectWalletInput (input: any) {
     stripeConnectInputError.value = 'You have entered an invalid wallet address'
     return
   }
-  if (props.stripeConnectStatusWalletMap[inputValue]) {
-    return props.stripeConnectStatusWalletMap[inputValue]
+
+  const status = getStripeConnectStatusByWallet.value(inputValue)
+  if (status) {
+    return status
   }
 
   isStripeConnectLoading.value = true
diff --git a/pages/nft-book-store/collection/new.vue b/pages/nft-book-store/collection/new.vue
index e19751460..e8eb3b070 100644
--- a/pages/nft-book-store/collection/new.vue
+++ b/pages/nft-book-store/collection/new.vue
@@ -214,7 +214,6 @@
         v-model:is-stripe-connect-checked="isStripeConnectChecked"
         v-model:is-using-default-account="isUsingDefaultAccount"
         :stripe-connect-wallet="stripeConnectWallet"
-        :stripe-connect-status-wallet-map="stripeConnectStatusWalletMap"
         :should-disable-setting="shouldDisableStripeConnectSetting"
         :login-address="wallet"
 
@@ -444,7 +443,8 @@ const { wallet, signer } = storeToRefs(walletStore)
 const { connect } = walletStore
 const { newNFTBookCollection } = collectionStore
 const { getClassMetadataById, lazyFetchClassMetadataById } = nftStore
-const { fetchStripeConnectStatusByWallet, stripeConnectStatusWalletMap } = stripeStore
+const { fetchStripeConnectStatusByWallet } = stripeStore
+const { getStripeConnectStatusByWallet } = storeToRefs(stripeStore)
 
 const router = useRouter()
 const route = useRoute()
@@ -545,7 +545,7 @@ onMounted(async () => {
     isLoading.value = true
     await fetchStripeConnectStatusByWallet(wallet.value)
 
-    if (stripeConnectStatusWalletMap[wallet.value]?.isReady) {
+    if (getStripeConnectStatusByWallet.value(wallet.value).isReady) {
       isStripeConnectChecked.value = true
       stripeConnectWallet.value = wallet.value
     }
diff --git a/pages/nft-book-store/collection/status/[collectionId].vue b/pages/nft-book-store/collection/status/[collectionId].vue
index 7e1a1b2d4..3a3433318 100644
--- a/pages/nft-book-store/collection/status/[collectionId].vue
+++ b/pages/nft-book-store/collection/status/[collectionId].vue
@@ -174,7 +174,6 @@
         v-model:is-stripe-connect-checked="isStripeConnectChecked"
         v-model:is-using-default-account="isUsingDefaultAccount"
         :stripe-connect-wallet="stripeConnectWallet"
-        :stripe-connect-status-wallet-map="stripeConnectStatusWalletMap"
         :should-disable-setting="shouldDisableStripeConnectSetting"
         :login-address="wallet"
 
@@ -491,7 +490,7 @@ const { token } = storeToRefs(bookStoreApiStore)
 const { wallet } = storeToRefs(store)
 const { updateNFTBookCollectionById } = collectionStore
 const { getClassMetadataById, lazyFetchClassMetadataById } = nftStore
-const { fetchStripeConnectStatusByWallet, stripeConnectStatusWalletMap } = stripeStore
+const { fetchStripeConnectStatusByWallet } = stripeStore
 
 const route = useRoute()
 const router = useRouter()
diff --git a/pages/nft-book-store/new.vue b/pages/nft-book-store/new.vue
index 24a8214d5..289d5e4f4 100644
--- a/pages/nft-book-store/new.vue
+++ b/pages/nft-book-store/new.vue
@@ -255,7 +255,6 @@
         v-model:is-stripe-connect-checked="isStripeConnectChecked"
         v-model:is-using-default-account="isUsingDefaultAccount"
         :stripe-connect-wallet="stripeConnectWallet"
-        :stripe-connect-status-wallet-map="stripeConnectStatusWalletMap"
         :should-disable-setting="shouldDisableStripeConnectSetting"
         :login-address="wallet"
 
@@ -493,7 +492,8 @@ const stripeStore = useStripeStore()
 const { connect } = walletStore
 const { wallet, signer } = storeToRefs(walletStore)
 const { newBookListing, updateEditionPrice } = bookStoreApiStore
-const { fetchStripeConnectStatusByWallet, stripeConnectStatusWalletMap } = stripeStore
+const { fetchStripeConnectStatusByWallet } = stripeStore
+const { getStripeConnectStatusByWallet } = storeToRefs(stripeStore)
 
 const router = useRouter()
 const route = useRoute()
@@ -618,7 +618,7 @@ onMounted(async () => {
     isLoading.value = true
     await fetchStripeConnectStatusByWallet(wallet.value)
 
-    if (stripeConnectStatusWalletMap[wallet.value]?.isReady) {
+    if (getStripeConnectStatusByWallet.value(wallet.value).isReady) {
       isStripeConnectChecked.value = true
       stripeConnectWallet.value = wallet.value
     }
diff --git a/pages/nft-book-store/status/[classId].vue b/pages/nft-book-store/status/[classId].vue
index 934d01260..f261dfdfc 100644
--- a/pages/nft-book-store/status/[classId].vue
+++ b/pages/nft-book-store/status/[classId].vue
@@ -262,7 +262,6 @@
         v-model:is-stripe-connect-checked="isStripeConnectChecked"
         v-model:is-using-default-account="isUsingDefaultAccount"
         :stripe-connect-wallet="stripeConnectWallet"
-        :stripe-connect-status-wallet-map="stripeConnectStatusWalletMap"
         :should-disable-setting="shouldDisableStripeConnectSetting"
         :login-address="wallet"
 
@@ -727,7 +726,7 @@ const { token } = storeToRefs(bookStoreApiStore)
 const { wallet } = storeToRefs(store)
 const { updateBookListingSetting } = bookStoreApiStore
 const { lazyFetchClassMetadataById } = nftStore
-const { fetchStripeConnectStatusByWallet, stripeConnectStatusWalletMap } = stripeStore
+const { fetchStripeConnectStatusByWallet } = stripeStore
 
 const route = useRoute()
 const router = useRouter()
diff --git a/stores/stripe.ts b/stores/stripe.ts
index b131804a7..43e1dd2fe 100644
--- a/stores/stripe.ts
+++ b/stores/stripe.ts
@@ -26,6 +26,10 @@ export const useStripeStore = defineStore('stripe-connect', () => {
 
   const stripeConnectStatusWalletMap = ref({} as Record<string, StripeConnectStatus>)
 
+  const getStripeConnectStatusByWallet = computed(() => (wallet: string) => {
+    return stripeConnectStatusWalletMap.value[wallet] || getStripeConnectStatusDefault()
+  })
+
   async function fetchStripeConnectStatusByWallet (wallet: string) {
     if (!stripeConnectStatusWalletMap.value[wallet]) {
       stripeConnectStatusWalletMap.value[wallet] = getStripeConnectStatusDefault()
@@ -50,6 +54,7 @@ export const useStripeStore = defineStore('stripe-connect', () => {
 
   return {
     stripeConnectStatusWalletMap,
+    getStripeConnectStatusByWallet,
     fetchStripeConnectStatusByWallet
   }
 })

From 7e034c7c522b1fc5c1f252865ad56fb63cc937f9 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Tue, 24 Sep 2024 10:42:59 +0800
Subject: [PATCH 18/18] =?UTF-8?q?=F0=9F=8E=A8=20Use=20a=20computed=20map?=
 =?UTF-8?q?=20for=20wallet=20to=20Liker=20ID?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 stores/liker.ts | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/stores/liker.ts b/stores/liker.ts
index 90530325d..c90358c46 100644
--- a/stores/liker.ts
+++ b/stores/liker.ts
@@ -4,14 +4,20 @@ import { FetchLikerInfoResult } from 'utils/api'
 
 export const useLikerStore = defineStore('liker', () => {
   const likerInfoMapById = ref({} as Record<string, FetchLikerInfoResult>)
-  const likerInfoMapByWallet = ref({} as Record<string, FetchLikerInfoResult>)
+
+  const likerIdMapByWallet = computed(() => {
+    return Object.entries(likerInfoMapById.value).reduce((acc, [likerId, likerInfo]) => {
+      acc[likerInfo.likeWallet] = likerId
+      return acc
+    }, {} as Record<string, string>)
+  })
 
   const getLikerInfoById = computed(() => (likerId: string) => {
     return likerInfoMapById.value[likerId] || null
   })
 
   const getLikerInfoByWallet = computed(() => (wallet: string) => {
-    return likerInfoMapByWallet.value[wallet] || null
+    return getLikerInfoById.value(likerIdMapByWallet.value[wallet])
   })
 
   const getChannelInfoById = computed(() => (channelId: string) => {
@@ -30,7 +36,6 @@ export const useLikerStore = defineStore('liker', () => {
         throw new Error('Missing data in `fetchLikerInfoById`')
       }
       likerInfoMapById.value[likerId] = likerInfo
-      likerInfoMapByWallet.value[likerInfo.likeWallet] = likerInfo
       return likerInfo
     } catch {
       return null
@@ -56,7 +61,6 @@ export const useLikerStore = defineStore('liker', () => {
       if (!likerInfo) {
         throw new Error('Missing data in `fetchLikerInfoByWallet`')
       }
-      likerInfoMapByWallet.value[wallet] = likerInfo
       likerInfoMapById.value[likerInfo.user] = likerInfo
       return likerInfo
     } catch {
@@ -65,8 +69,9 @@ export const useLikerStore = defineStore('liker', () => {
   }
 
   async function lazyFetchLikerInfoByWallet (wallet: string) {
-    if (likerInfoMapByWallet.value[wallet]) {
-      return likerInfoMapByWallet.value[wallet]
+    const likerId = likerIdMapByWallet.value[wallet]
+    if (likerId) {
+      return lazyFetchLikerInfoById(likerId)
     }
 
     const likerInfo = await fetchLikerInfoByWallet(wallet)
@@ -80,6 +85,8 @@ export const useLikerStore = defineStore('liker', () => {
   }
 
   return {
+    likerInfoMapById,
+    likerIdMapByWallet,
     getLikerInfoById,
     getLikerInfoByWallet,
     getChannelInfoById,