fix: claimed NFT perk

src/pages/canvas/Dashboard/BadgeWall/Avatar/NFTAvatar.tsx

@@ -1,15 +1,31 @@
 import { motion } from "framer-motion"
+import { useState } from "react"
 import Img from "react-cool-img"
 
-import { Box } from "@mui/material"
+import { Box, Stack } from "@mui/material"
+
+import useCheckViewport from "@/hooks/useCheckViewport"
 
 const MotionBox = motion(Box)
 
 const NFTAvatar = props => {
   const { src, sx } = props
+  const { isMobile } = useCheckViewport()
+
+  const [imgStyle, setImgStyle] = useState({ width: "100%", height: "auto" })
+
+  const handleLoadNFTImage = event => {
+    const { naturalWidth, naturalHeight } = event.target
+
+    if (naturalWidth > naturalHeight) {
+      setImgStyle({ width: "100%", height: "auto" })
+    } else {
+      setImgStyle({ width: "auto", height: "100%" })
+    }
+  }
 
   return (
-    <Box sx={{ position: "relative", ...sx }}>
+    <Box sx={{ position: "relative", width: "100%", ...sx }}>
       <MotionBox
         sx={{
           position: "absolute",
@@ -22,14 +38,17 @@ const NFTAvatar = props => {
         animate={{ scale: [1, 0.8, 1] }}
         transition={{ ease: "easeOut", duration: 4, repeat: Infinity }}
       ></MotionBox>
-      <Img
-        src={src}
-        alt="NFT avatar"
-        style={{ aspectRatio: "1 / 1", width: "100%", borderRadius: "0.8rem", objectFit: "contain" }}
-        placeholder="/imgs/canvas/avatarPlaceholder.svg"
-        error="/imgs/canvas/NFTCardPlaceholder.svg"
-        retry={{ count: 2, delay: 1, acc: "*" }}
-      ></Img>
+      <Stack justifyContent="center" alignItems="center" sx={{ width: "100%", aspectRatio: "1/1" }}>
+        <Img
+          src={src}
+          alt="NFT avatar"
+          style={{ borderRadius: isMobile ? "0.8rem" : "2.4rem", ...imgStyle }}
+          placeholder="/imgs/canvas/avatarPlaceholder.svg"
+          error="/imgs/canvas/NFTCardPlaceholder.svg"
+          retry={{ count: 2, delay: 1, acc: "*" }}
+          onLoad={handleLoadNFTImage}
+        ></Img>
+      </Stack>
     </Box>
   )
 }

src/pages/canvas/Dashboard/CropAvatarDialog/index.tsx

@@ -65,7 +65,11 @@ const CropAvatarDialog = () => {
     },
     onSuccess: data => {
       handleCloseCropAvatarDialog()
-      queryClient.setQueryData(["canvasAvatar", walletCurrentAddress], { avatar: data })
+      const canvasAvatar = queryClient.getQueryData(["canvasAvatar", walletCurrentAddress])
+      queryClient.setQueryData(["canvasAvatar", walletCurrentAddress], {
+        avatar: data,
+        nftAvatarClaimed: Boolean((canvasAvatar as any)?.nftAvatarClaimed),
+      })
       // queryClient.invalidateQueries({
       //   queryKey: ["canvasAvatar", walletCurrentAddress],
       // })

src/pages/canvas/Dashboard/ENSSubdomainDialog/ClaimENS.tsx

@@ -11,6 +11,7 @@ import { truncateAddress } from "@/utils"
 
 import PerksBadge from "../../components/PerksBadge"
 import PerksButton from "../../components/PerksButton"
+import PerksClaimedLabel from "../../components/PerksClaimedLabel"
 
 const ClaimENS = () => {
   const { walletCurrentAddress } = useRainbowContext()
@@ -124,28 +125,7 @@ const ClaimENS = () => {
         </Stack>
       </Box>
       {perk.claimed ? (
-        <Box
-          sx={{
-            backgroundColor: "rgba(144, 248, 234, 0.20)",
-
-            borderRadius: "2.8rem",
-            width: "100%",
-            mt: "6.4rem",
-          }}
-        >
-          <Typography
-            sx={{
-              fontSize: ["1.6rem", "2rem"],
-              height: ["4rem", "5.6rem"],
-              lineHeight: ["4rem", "5.6rem"],
-              fontWeight: 600,
-              color: "#90F8EA",
-              cursor: "not-allowed",
-            }}
-          >
-            This perk has been claimed
-          </Typography>
-        </Box>
+        <PerksClaimedLabel sx={{ mt: "6.4rem" }}></PerksClaimedLabel>
       ) : (
         <PerksButton disabled={!perk.claimable} onClick={handleGoToConfirm}>
           Claim Now

src/pages/canvas/Dashboard/ENSSubdomainDialog/CongratsENS.tsx

@@ -2,13 +2,8 @@ import { useQueryClient } from "@tanstack/react-query"
 
 import { Box, Stack, Typography } from "@mui/material"
 
-import CongratCircle1MobileSvg from "@/assets/svgs/canvas-perks/congrat-circle-1-mobile.svg"
-import CongratCircle1Svg from "@/assets/svgs/canvas-perks/congrat-circle-1.svg"
-import CongratCircle2MobileSvg from "@/assets/svgs/canvas-perks/congrat-circle-2-mobile.svg"
-import CongratCircle2Svg from "@/assets/svgs/canvas-perks/congrat-circle-2.svg"
-import CongratCircle3MobileSvg from "@/assets/svgs/canvas-perks/congrat-circle-3-mobile.svg"
-import CongratCircle3Svg from "@/assets/svgs/canvas-perks/congrat-circle-3.svg"
-import CongratCircle4MobileSvg from "@/assets/svgs/canvas-perks/congrat-circle-4-mobile.svg"
+import CongratBgMobileSvg from "@/assets/svgs/canvas-perks/congrat-bg-mobile.svg"
+import CongratBgSvg from "@/assets/svgs/canvas-perks/congrat-bg.svg"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useCanvasProfileStore, { ENSSubdomainDialogTypeEnum } from "@/stores/canvasProfileStore"
 
@@ -61,11 +56,7 @@ const CongratsENS = () => {
           left: 0,
           width: "100%",
           height: "100%",
-          filter: ["blur(100px) opacity(0.8)", "blur(100px) opacity(0.6)"],
-          background: [
-            `url(${CongratCircle1MobileSvg}) top left / 47% no-repeat, url(${CongratCircle2MobileSvg}) top left 10% / 65% no-repeat, url(${CongratCircle3MobileSvg}) top 40% right 20px / 50% no-repeat, url(${CongratCircle4MobileSvg}) top right / 30% no-repeat`,
-            `url(${CongratCircle1Svg}) top left / 424px no-repeat, url(${CongratCircle2Svg}) top left 20% / 292px no-repeat, url(${CongratCircle3Svg}) top 30% right / 325px no-repeat`,
-          ],
+          background: [`url(${CongratBgMobileSvg}) center / contain  no-repeat`, `url(${CongratBgSvg}) top / 100% no-repeat`],
         }}
       ></Box>
     </>

src/pages/canvas/Dashboard/ENSSubdomainDialog/CreateENS.tsx

@@ -21,10 +21,12 @@ const EDIT_SUBDOMAIN_COPY = {
   [ENSSubdomainDialogTypeEnum.CREATE_SUBDOMAIN]: {
     title: "Create your subdomain name",
     description: "Your Canvas username will be replaced by your subdomain, which you can change for free anytime.",
+    actionText: "Create for free",
   },
   [ENSSubdomainDialogTypeEnum.UPDATE_SUBDOMAIN]: {
     title: "Change your subdomain name",
     description: "You can change for free anytime.",
+    actionText: "Change for free",
   },
 }
 
@@ -144,7 +146,7 @@ const CreateENS = () => {
         </Box>
       </Stack>
       <PerksButton sx={{ mt: "6.8rem" }} loading={isPending} disabled={validating || !!helpText || !subdomainName} onClick={handleClaimENSSubdomain}>
-        Confirm
+        {EDIT_SUBDOMAIN_COPY[ENSSubdomainDialogType].actionText}
       </PerksButton>
     </>
   )