feat: display misalignment when achievements are not consecutive

src/components/common/AchievementItem.tsx

@@ -36,7 +36,7 @@ export const AchievementItem: React.FC<{
   group: AchievementSection["groups"][number]
   layoutId: string
   size?: number
-  characterId?: number
+  characterId?: string
   isOwner: boolean
 }> = ({ group, layoutId, size, characterId, isOwner }) => {
   const date = useDate()
@@ -95,6 +95,11 @@ export const AchievementItem: React.FC<{
               position="middle-start"
               color="red"
               className="inline-flex max-w-full justify-center items-center"
+              styles={() => ({
+                indicator: {
+                  "z-index": "1",
+                },
+              })}
             >
               <span className="capitalize text-xs font-medium truncate max-w-full inline-block">
                 {group.info.title}

src/components/common/AchievementModal.tsx

@@ -9,6 +9,7 @@ import { useRouter } from "next/router"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
 import { useDate } from "~/hooks/useDate"
 import { useTranslation } from "next-i18next"
+import { cn } from "~/lib/utils"
 
 export const AchievementModal: React.FC<{
   opened: boolean
@@ -16,7 +17,7 @@ export const AchievementModal: React.FC<{
   group: AchievementSection["groups"][number]
   layoutId: string
   isOwner: boolean
-  characterId?: number
+  characterId?: string
 }> = ({ opened, setOpened, group, layoutId, isOwner, characterId }) => {
   const date = useDate()
   const { t } = useTranslation("common")
@@ -33,7 +34,6 @@ export const AchievementModal: React.FC<{
     ? group.items.filter((item) => item.status === "COMMING").pop()
     : null
 
-  const router = useRouter()
   const mintAchievement = useMintAchievement()
 
   const mint = async (tokenId: number) => {
@@ -146,7 +146,7 @@ export const AchievementModal: React.FC<{
         <div className="mt-8 hidden sm:block h-24">
           <Stepper
             active={
-              group.items.filter((item) => item.status === "MINTED").length
+              group.items.findLastIndex((item) => item.status === "MINTED") + 1
             }
             color="var(--theme-color)"
             size="sm"
@@ -176,31 +176,36 @@ export const AchievementModal: React.FC<{
             })}
           >
             {group.items.map((item) => {
+              const icon = (
+                <>
+                  <div
+                    className={cn("text-[0px]", {
+                      grayscale: item.status !== "MINTED",
+                    })}
+                  >
+                    <Badge media={item.info.media} size={42} />
+                  </div>
+                  {item.status === "MINTABLE" && isOwner && (
+                    <Button
+                      className="absolute -bottom-10"
+                      size="sm"
+                      variant="primary"
+                      rounded="full"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        mint(item.info.tokenId)
+                      }}
+                      isLoading={mintAchievement.isLoading}
+                    >
+                      Mint
+                    </Button>
+                  )}
+                </>
+              )
               return (
                 <Stepper.Step
-                  icon={
-                    <>
-                      <div className="grayscale text-[0px]">
-                        <Badge media={item.info.media} size={42} />
-                      </div>
-                      {item.status === "MINTABLE" && isOwner && (
-                        <Button
-                          className="absolute -bottom-10"
-                          size="sm"
-                          variant="primary"
-                          rounded="full"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            mint(item.info.tokenId)
-                          }}
-                          isLoading={mintAchievement.isLoading}
-                        >
-                          Mint
-                        </Button>
-                      )}
-                    </>
-                  }
-                  completedIcon={<Badge media={item.info.media} size={42} />}
+                  icon={icon}
+                  completedIcon={icon}
                   label={
                     item.info.attributes.find(
                       (attr) => attr.trait_type === "tier",

src/models/site.model.ts

@@ -627,7 +627,7 @@ export type AchievementSection = {
   }[]
 }
 
-export async function getAchievements(characterId: number) {
+export async function getAchievements(characterId: string) {
   const crossbellAchievements = (await indexer.getAchievements(characterId))
     ?.list as AchievementSection[] | undefined
   const xLogAchievements: AchievementSection[] = [
@@ -703,7 +703,7 @@ export async function getAchievements(characterId: number) {
 }
 
 export async function mintAchievement(input: {
-  characterId: number
+  characterId: string
   achievementId: number
 }) {
   return indexer.mintAchievement(input.characterId, input.achievementId)

src/pages/dashboard/[subdomain]/achievements.tsx

@@ -1,14 +1,13 @@
 import { DashboardLayout } from "~/components/dashboard/DashboardLayout"
 import { DashboardMain } from "~/components/dashboard/DashboardMain"
 import type { ReactElement } from "react"
-import { useGetAchievements } from "~/queries/site"
-import { useDate } from "~/hooks/useDate"
-import { useTranslation } from "next-i18next"
+import { useGetAchievements, useGetSite } from "~/queries/site"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/dashboard/DashboardLayout.server"
 import { GetServerSideProps } from "next"
 import { serverSidePropsHandler } from "~/lib/server-side-props"
 import { useAccountState } from "@crossbell/connect-kit"
 import { AchievementItem } from "~/components/common/AchievementItem"
+import { useRouter } from "next/router"
 
 export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
   async (ctx) => {
@@ -23,13 +22,11 @@ export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
 )
 
 export default function AchievementsPage() {
-  const date = useDate()
-  const { t } = useTranslation("dashboard")
+  const router = useRouter()
+  const subdomain = router.query.subdomain as string
+  const site = useGetSite(subdomain)
 
-  const currentCharacterId = useAccountState(
-    (s) => s.computed.account?.characterId,
-  )
-  const achievement = useGetAchievements(currentCharacterId || 0)
+  const achievement = useGetAchievements(site.data?.metadata?.proof)
 
   return (
     <DashboardMain title="Achievements">
@@ -52,7 +49,7 @@ export default function AchievementsPage() {
                       key={group.info.name}
                       layoutId="achievements"
                       size={80}
-                      characterId={currentCharacterId}
+                      characterId={site.data?.metadata?.proof}
                       isOwner={true}
                     />
                   ))}

src/queries/site.ts

@@ -384,7 +384,7 @@ export const useGetTips = (
   })
 }
 
-export const useGetAchievements = (characterId: number) => {
+export const useGetAchievements = (characterId?: string) => {
   return useQuery(["getAchievements", characterId], async () => {
     if (!characterId) {
       return null