diff --git a/src/assets/svgs/canvas-perks/congrat-bg-mobile.svg b/src/assets/svgs/canvas-perks/congrat-bg-mobile.svg new file mode 100644 index 000000000..64ac6dba4 --- /dev/null +++ b/src/assets/svgs/canvas-perks/congrat-bg-mobile.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/canvas-perks/congrat-bg.svg b/src/assets/svgs/canvas-perks/congrat-bg.svg new file mode 100644 index 000000000..ad9b7e8f5 --- /dev/null +++ b/src/assets/svgs/canvas-perks/congrat-bg.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/canvas-perks/congrat-circle-1-mobile.svg b/src/assets/svgs/canvas-perks/congrat-circle-1-mobile.svg deleted file mode 100644 index 3fc548978..000000000 --- a/src/assets/svgs/canvas-perks/congrat-circle-1-mobile.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/svgs/canvas-perks/congrat-circle-1.svg b/src/assets/svgs/canvas-perks/congrat-circle-1.svg deleted file mode 100644 index 5f130b683..000000000 --- a/src/assets/svgs/canvas-perks/congrat-circle-1.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/svgs/canvas-perks/congrat-circle-2-mobile.svg b/src/assets/svgs/canvas-perks/congrat-circle-2-mobile.svg deleted file mode 100644 index 30ef3891a..000000000 --- a/src/assets/svgs/canvas-perks/congrat-circle-2-mobile.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/svgs/canvas-perks/congrat-circle-2.svg b/src/assets/svgs/canvas-perks/congrat-circle-2.svg deleted file mode 100644 index b568d9c49..000000000 --- a/src/assets/svgs/canvas-perks/congrat-circle-2.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/svgs/canvas-perks/congrat-circle-3-mobile.svg b/src/assets/svgs/canvas-perks/congrat-circle-3-mobile.svg deleted file mode 100644 index b997841bb..000000000 --- a/src/assets/svgs/canvas-perks/congrat-circle-3-mobile.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/svgs/canvas-perks/congrat-circle-3.svg b/src/assets/svgs/canvas-perks/congrat-circle-3.svg deleted file mode 100644 index a53a4b2e4..000000000 --- a/src/assets/svgs/canvas-perks/congrat-circle-3.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/svgs/canvas-perks/congrat-circle-4-mobile.svg b/src/assets/svgs/canvas-perks/congrat-circle-4-mobile.svg deleted file mode 100644 index d9bd3d9f0..000000000 --- a/src/assets/svgs/canvas-perks/congrat-circle-4-mobile.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/pages/canvas/Dashboard/BadgeWall/Avatar/NFTAvatar.tsx b/src/pages/canvas/Dashboard/BadgeWall/Avatar/NFTAvatar.tsx index 5ae06c1e7..73bdb9201 100644 --- a/src/pages/canvas/Dashboard/BadgeWall/Avatar/NFTAvatar.tsx +++ b/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 ( - + { animate={{ scale: [1, 0.8, 1] }} transition={{ ease: "easeOut", duration: 4, repeat: Infinity }} > - NFT avatar + + NFT avatar + ) } diff --git a/src/pages/canvas/Dashboard/CropAvatarDialog/index.tsx b/src/pages/canvas/Dashboard/CropAvatarDialog/index.tsx index f266a435d..aef458ca7 100644 --- a/src/pages/canvas/Dashboard/CropAvatarDialog/index.tsx +++ b/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], // }) diff --git a/src/pages/canvas/Dashboard/ENSSubdomainDialog/ClaimENS.tsx b/src/pages/canvas/Dashboard/ENSSubdomainDialog/ClaimENS.tsx index 9d90bfbc3..6283fb6a5 100644 --- a/src/pages/canvas/Dashboard/ENSSubdomainDialog/ClaimENS.tsx +++ b/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 = () => { {perk.claimed ? ( - - - This perk has been claimed - - + ) : ( Claim Now diff --git a/src/pages/canvas/Dashboard/ENSSubdomainDialog/CongratsENS.tsx b/src/pages/canvas/Dashboard/ENSSubdomainDialog/CongratsENS.tsx index ed52dfc58..3fe3b97db 100644 --- a/src/pages/canvas/Dashboard/ENSSubdomainDialog/CongratsENS.tsx +++ b/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`], }} > diff --git a/src/pages/canvas/Dashboard/ENSSubdomainDialog/CreateENS.tsx b/src/pages/canvas/Dashboard/ENSSubdomainDialog/CreateENS.tsx index b62a23d70..f509dcbb8 100644 --- a/src/pages/canvas/Dashboard/ENSSubdomainDialog/CreateENS.tsx +++ b/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 = () => { - Confirm + {EDIT_SUBDOMAIN_COPY[ENSSubdomainDialogType].actionText} ) diff --git a/src/pages/canvas/Dashboard/NFTsDialog/SetUpNFTProfile.tsx b/src/pages/canvas/Dashboard/NFTsDialog/SetUpNFTProfile.tsx index b50468893..c0891d2af 100644 --- a/src/pages/canvas/Dashboard/NFTsDialog/SetUpNFTProfile.tsx +++ b/src/pages/canvas/Dashboard/NFTsDialog/SetUpNFTProfile.tsx @@ -11,6 +11,7 @@ import usePerkStore from "@/stores/perksStore" import PerksBadge from "../../components/PerksBadge" import PerksButton from "../../components/PerksButton" +import PerksClaimedLabel from "../../components/PerksClaimedLabel" import NFTAvatar from "../BadgeWall/Avatar/NFTAvatar" const ADVERTISING_NFT_LIST = [ @@ -20,7 +21,8 @@ const ADVERTISING_NFT_LIST = [ ] const SetUpNFTProfile = props => { - const { changeNFTsDialogType } = useCanvasProfileStore() + // NFTsDialogAllowBack means from PerksDialog then prevent from re-claiming + const { changeNFTsDialogType, NFTsDialogAllowBack } = useCanvasProfileStore() const { isMobile } = useCheckViewport() const { perks } = usePerkStore() @@ -70,9 +72,14 @@ const SetUpNFTProfile = props => { - - Claim Now - + + {NFTPerk.claimed && NFTsDialogAllowBack ? ( + + ) : ( + + Claim Now + + )} ) } diff --git a/src/pages/canvas/Dashboard/NFTsDialog/ViewNFTs/index.tsx b/src/pages/canvas/Dashboard/NFTsDialog/ViewNFTs/index.tsx index 72a3cb438..22d002a09 100644 --- a/src/pages/canvas/Dashboard/NFTsDialog/ViewNFTs/index.tsx +++ b/src/pages/canvas/Dashboard/NFTsDialog/ViewNFTs/index.tsx @@ -93,6 +93,7 @@ const ViewNFTs = () => { tokenID: selectedNFT.tokenId, contract: selectedNFT.contractAddress, contractType: selectedNFT.contractType, + nftAvatarClaimed: true, }) queryClient.setQueryData(["NFTAvatarImageURL", walletCurrentAddress], { image: selectedNFT.imageUrl }) // queryClient.invalidateQueries({ diff --git a/src/pages/canvas/Dashboard/PerksDialog/index.tsx b/src/pages/canvas/Dashboard/PerksDialog/index.tsx index 848587193..3eaa47113 100644 --- a/src/pages/canvas/Dashboard/PerksDialog/index.tsx +++ b/src/pages/canvas/Dashboard/PerksDialog/index.tsx @@ -1,4 +1,5 @@ import { useQueryClient } from "@tanstack/react-query" +import "@tanstack/react-query" import { useEffect } from "react" import { Stack } from "@mui/material" @@ -21,9 +22,11 @@ const PerksDialog = () => { const ensSubdomain = queryClient.getQueryData(["ensSubdomain", walletCurrentAddress]) + const avatarObj = queryClient.getQueryData(["canvasAvatar", walletCurrentAddress]) + useEffect(() => { - generatePerks({ walletCurrentAddress, userBadges, ensClaimed: !!ensSubdomain }) - }, [walletCurrentAddress, userBadges, ensSubdomain]) + generatePerks({ walletCurrentAddress, userBadges, ensClaimed: !!ensSubdomain, nftClaimed: Boolean((avatarObj as any)?.nftAvatarClaimed) }) + }, [walletCurrentAddress, userBadges, ensSubdomain, avatarObj]) const actionList = [ { diff --git a/src/pages/canvas/components/Dialog/index.tsx b/src/pages/canvas/components/Dialog/index.tsx index 3cbf276af..350db6bda 100644 --- a/src/pages/canvas/components/Dialog/index.tsx +++ b/src/pages/canvas/components/Dialog/index.tsx @@ -12,7 +12,7 @@ const ScrollDialog = props => { sx={[ { "& .MuiBackdrop-root": { - backgroundColor: allowBack ? "transparent" : "rgba(16, 16, 16, 0.60)", + backgroundColor: "rgba(16, 16, 16, 0.60)", }, "& .MuiDialog-paper": { position: "relative", @@ -20,7 +20,7 @@ const ScrollDialog = props => { width: fullWidth ? "100%" : "auto", minWidth: "64rem", maxWidth: "120rem", - padding: roof ? "5.9rem 3.2rem 3.2rem" : "3rem 3.2rem 3.2rem", + padding: roof ? "7.2rem 3.2rem 3.2rem" : "2.4rem 3.2rem 3.2rem", borderRadius: "1.6rem", }, }, diff --git a/src/pages/canvas/components/PerksClaimedLabel/index.tsx b/src/pages/canvas/components/PerksClaimedLabel/index.tsx new file mode 100644 index 000000000..f693ea962 --- /dev/null +++ b/src/pages/canvas/components/PerksClaimedLabel/index.tsx @@ -0,0 +1,30 @@ +import { Box, Typography } from "@mui/material" + +const PerksClaimedLabel = props => { + const { sx, children } = props + return ( + + + {children ?? "This perk has been claimed"} + + + ) +} + +export default PerksClaimedLabel diff --git a/src/stores/perksStore.ts b/src/stores/perksStore.ts index 990631972..861603d8e 100644 --- a/src/stores/perksStore.ts +++ b/src/stores/perksStore.ts @@ -36,9 +36,9 @@ interface EnsSubdomainStore { const usePerkStore = create()(set => ({ perks: [], generatePerks: async props => { - const { walletCurrentAddress, userBadges, ensClaimed } = props + const { walletCurrentAddress, userBadges, ensClaimed, nftClaimed } = props - console.log(userBadges, "userBadges") + // console.log(userBadges, "userBadges") const perkList = [ { @@ -102,7 +102,7 @@ const usePerkStore = create()(set => ({ ], } }, - claimed: false, + claimed: nftClaimed, }, ] const perkListWithClaimable = perkList.map(perk => {