scroll-tech · Holybasil · Aug 23, 2024 · Aug 22, 2024
diff --git a/src/constants/canvas.ts b/src/constants/canvas.ts
@@ -5,3 +5,5 @@ export enum BADGES_VISIBLE_TYPE {
 
 export const BADGE_INTEGRATION_GUIDE =
   "https://scrollzkp.notion.site/Introducing-Scroll-Canvas-Badge-Integration-Guide-8656463ab63b42e8baf924763ed8c9d5"
+
+export const EXPLORE_BADGES_URL = "/canvas-and-badges#discover"
diff --git a/src/pages/bridge/components/MintBadge/index.tsx b/src/pages/bridge/components/MintBadge/index.tsx
@@ -8,13 +8,12 @@ import BadgeDetailDialog from "@/pages/canvas/Dashboard/BadgeDetailDialog"
 import { checkIfHasBadgeByAddress } from "@/services/canvasService"
 import useCanvasStore, { BadgeDetailDialogType } from "@/stores/canvasStore"
 
-//TODO: Scroll hasn’t issued a badge according to the badge yet, so there’s no need to display Scrolly
+// not in use, an example for third party badges
 const MintBadge = () => {
   const { changeBadgeDetailDialog, changeSelectedBadge, profileMinted } = useCanvasStore()
   const badge: Badge = ETHEREUM_YEAR_BADGE
   const [canBeMint, setCanBeMint] = useState(false)
   const { chainId, provider, walletCurrentAddress } = useRainbowContext()
-  //   const { hasMintedProfile } = useCanvasContext()
 
   const isL2 = useMemo(() => chainId === CHAIN_ID.L2, [chainId])
 
@@ -41,7 +40,7 @@ const MintBadge = () => {
     if (profileMinted) {
       changeBadgeDetailDialog(BadgeDetailDialogType.MINT)
     } else {
-      changeBadgeDetailDialog(BadgeDetailDialogType.NO_PROFILE)
+      changeBadgeDetailDialog(BadgeDetailDialogType.NO_CANVAS)
     }
   }
 

diff --git a/src/pages/canvas-badge/Badges/BadgeList/BadgeMasonry.tsx b/src/pages/canvas-badge/Badges/BadgeList/BadgeMasonry.tsx
@@ -4,10 +4,6 @@ import { AutoSizer, CellMeasurer, CellMeasurerCache, Masonry, WindowScroller } f
 
 import useCheckViewport from "@/hooks/useCheckViewport"
 
-// import { makeStyles } from "tss-react/mui"
-
-// import { keyframes } from "@mui/system"
-
 type createCellPositionerParams = {
   cellMeasurerCache: CellMeasurerCache
   columnCount: number
@@ -21,18 +17,6 @@ type resetParams = {
   spacer: number
 }
 
-// const Fade = keyframes`
-//   to {opacity:1;transform: translateY(0);}
-// `
-
-// const useStyles = makeStyles()(theme => ({
-//   item: {
-//     opacity: 0,
-//     transform: "translateY(20px)",
-//     animation: `${Fade} 0.2s forwards`,
-//   },
-// }))
-
 function createCellPositioner({ cellMeasurerCache, columnCount, columnWidth, spacer = 0 }: createCellPositionerParams) {
   let columnHeights
 

diff --git a/src/pages/canvas-badge/Badges/BadgeList/index.tsx b/src/pages/canvas-badge/Badges/BadgeList/index.tsx
@@ -147,8 +147,5 @@ const BadgeList = props => {
       )}
     </Box>
   )
-  // }
-
-  // return <>{renderList()}</>
 }
 export default BadgeList
diff --git a/src/pages/canvas-badge/Header/MotionCounter.tsx b/src/pages/canvas-badge/Header/MotionCounter.tsx
diff --git a/src/pages/canvas/Dashboard/ActionBox/index.tsx b/src/pages/canvas/Dashboard/ActionBox/index.tsx
@@ -14,6 +14,7 @@ import { ReactComponent as ShareSvg } from "@/assets/svgs/canvas/share.svg"
 import { ReactComponent as ExternalLinkSvg } from "@/assets/svgs/common/external-link.svg"
 import { ReactComponent as TwitterSvg } from "@/assets/svgs/nft/twitter.svg"
 import { BADGE_INTEGRATION_GUIDE } from "@/constants"
+import { EXPLORE_BADGES_URL } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import Button from "@/pages/canvas/components/Button"
@@ -241,7 +242,7 @@ const ActionBox = () => {
               key: "explore",
               label: "Explore badges",
               onClick: () => {
-                navigate("/canvas-and-badges#discover")
+                navigate(EXPLORE_BADGES_URL)
               },
             },
             {
@@ -321,7 +322,6 @@ const ActionBox = () => {
 
   const handleMouseEnter = item => {
     if (item.external) {
-      console.log(item, "???")
       setIsHovering(item.key)
     }
   }

diff --git a/src/pages/canvas/Dashboard/BadgeDetailDialog/index.tsx b/src/pages/canvas/Dashboard/BadgeDetailDialog/index.tsx
@@ -22,13 +22,6 @@ import { generateShareTwitterURL, ipfsToBrowserURL, requireEnv, sentryDebug } fr
 import BadgeDesc from "../../components/BadgeDesc"
 import UpgradeAction from "./UpgradeAction"
 
-const StyledScrollButton = styled(ScrollButton)(({ theme }) => ({
-  // width: "24rem",
-  // height: "4.8rem",
-  // fontSize: "1.8rem",
-  // fontWeight: 600,
-}))
-
 const ButtonContainer = styled(forwardRef<any, any>((props, ref) => <Box {...props} ref={ref} />))(({ theme }) => ({
   position: "relative",
   display: "flex",
@@ -123,7 +116,6 @@ const BadgeDetailDialog = () => {
     changeIsBadgeMinting(selectedBadge.badgeContract, true)
     try {
       const result = await mintBadge(provider, walletCurrentAddress, selectedBadge)
-      // const result: any = await testAsyncFunc("0x11cfb299dda2ae8b1fccf9a055394de9a7f953e8b8f115295dc0f2325e8b2130")
       if (result) {
         await queryVisibleBadges(provider, walletCurrentAddress)
         alertWarning(
@@ -169,7 +161,6 @@ const BadgeDetailDialog = () => {
     try {
       const metadata = await upgradeBadgeAndRefreshUserBadges(provider, selectedBadge)
       const checkedBadge = await checkBadgeUpgradable(provider, selectedBadge)
-      // const checkedBadge: any = await testAsyncFunc({ upgradable: false })
       changeSelectedBadge({ ...selectedBadge, ...metadata, upgradable: checkedBadge.upgradable })
       alertWarning(`You have successfully upgraded ${selectedBadge.name} to ${metadata.name}`, "success")
     } catch (e) {
@@ -183,15 +174,15 @@ const BadgeDetailDialog = () => {
   const renderMintTip = () => {
     return (
       <>
-        {[BadgeDetailDialogType.NO_PROFILE].includes(badgeDetailDialogVisible) && (
+        {[BadgeDetailDialogType.NO_CANVAS].includes(badgeDetailDialogVisible) && (
           <Stack className="tip" direction="row" gap="0.8rem" alignItems="center" sx={{ mb: [0, "2.4rem"], px: [0, "4rem"] }}>
             <InfoOutlinedIcon sx={{ color: "#FAD880", fontSize: ["1.8rem", "2.4rem"] }} />
             <Typography sx={{ color: "#FAD880", fontSize: ["1.6rem", "1.8rem"], lineHeight: ["2.4rem", "2.8rem"] }}>
               You need a Scroll Canvas in order to mint your {selectedBadge.name} Badge.
             </Typography>
           </Stack>
         )}
-        {[BadgeDetailDialogType.MINT, BadgeDetailDialogType.MINT_WITH_BACK].includes(badgeDetailDialogVisible) && selectedBadge.airdrop && (
+        {[BadgeDetailDialogType.MINT].includes(badgeDetailDialogVisible) && selectedBadge.airdrop && (
           <Stack className="tip" direction="row" gap="0.8rem" alignItems="center" sx={{ mb: [0, "2.4rem"], px: [0, "4rem"] }}>
             <InfoOutlinedIcon sx={{ color: "#85E0D1", fontSize: ["1.8rem", "2.4rem"] }} />
             <Typography sx={{ color: "#85E0D1", fontSize: ["1.6rem", "1.8rem"], lineHeight: ["2.4rem", "2.8rem"] }}>
@@ -208,7 +199,6 @@ const BadgeDetailDialog = () => {
       sx={{ zIndex: theme => theme.zIndex.modal + 1 }}
       disablePortal={isMobile}
       open={badgeDetailDialogVisible !== BadgeDetailDialogType.HIDDEN}
-      allowBack={[BadgeDetailDialogType.MINT_WITH_BACK].includes(badgeDetailDialogVisible)}
       roof={
         selectedBadge.upgradable && (
           <UpgradeAction
@@ -238,9 +228,7 @@ const BadgeDetailDialog = () => {
             borderRadius: "0.8rem",
           }}
         />
-        {[BadgeDetailDialogType.MINT, BadgeDetailDialogType.MINT_WITH_BACK, BadgeDetailDialogType.VIEW, BadgeDetailDialogType.NO_PROFILE].includes(
-          badgeDetailDialogVisible,
-        ) && (
+        {[BadgeDetailDialogType.MINT, BadgeDetailDialogType.VIEW, BadgeDetailDialogType.NO_CANVAS].includes(badgeDetailDialogVisible) && (
           <>
             <Typography
               sx={{
@@ -286,42 +274,42 @@ const BadgeDetailDialog = () => {
         {!isMobile && renderMintTip()}
 
         <ButtonContainer ref={actionsRef}>
-          {[BadgeDetailDialogType.MINT, BadgeDetailDialogType.MINT_WITH_BACK].includes(badgeDetailDialogVisible) && (
-            <StyledScrollButton
+          {[BadgeDetailDialogType.MINT].includes(badgeDetailDialogVisible) && (
+            <ScrollButton
               className="mintBtn"
               loading={isBadgeMinting.get(selectedBadge.badgeContract)}
               gloomy={selectedBadge.airdrop}
               color="primary"
               onClick={handleMint}
             >
               {isBadgeMinting.get(selectedBadge.badgeContract) ? "Minting" : "Mint badge"}
-            </StyledScrollButton>
+            </ScrollButton>
           )}
           {isMobile && renderMintTip()}
 
-          {[BadgeDetailDialogType.NO_PROFILE].includes(badgeDetailDialogVisible) && (
-            <StyledScrollButton className="viewBtn" color="primary" target="_blank" onClick={handleViewCanvas}>
+          {[BadgeDetailDialogType.NO_CANVAS].includes(badgeDetailDialogVisible) && (
+            <ScrollButton className="viewBtn" color="primary" target="_blank" onClick={handleViewCanvas}>
               View Scroll Canvas
-            </StyledScrollButton>
+            </ScrollButton>
           )}
 
-          {[BadgeDetailDialogType.MINT, BadgeDetailDialogType.MINT_WITH_BACK].includes(badgeDetailDialogVisible) && (
-            <StyledScrollButton className="detailBtn" width="24rem" color="tertiary" onClick={handleViewBadgeContract}>
+          {[BadgeDetailDialogType.MINT].includes(badgeDetailDialogVisible) && (
+            <ScrollButton className="detailBtn" width="24rem" color="tertiary" onClick={handleViewBadgeContract}>
               View details
-            </StyledScrollButton>
+            </ScrollButton>
           )}
           {[BadgeDetailDialogType.VIEW].includes(badgeDetailDialogVisible) && (
-            <StyledScrollButton className="detailBtn" width="24rem" color="tertiary" onClick={handleViewBadge}>
+            <ScrollButton className="detailBtn" width="24rem" color="tertiary" onClick={handleViewBadge}>
               View details
-            </StyledScrollButton>
+            </ScrollButton>
           )}
 
           {[BadgeDetailDialogType.VIEW].includes(badgeDetailDialogVisible) && (
             <Link external href={shareBadgeURL} className="shareBtn">
               <SvgIcon sx={{ width: "3.2rem", height: "3.2rem", color: "primary.contrastText" }} component={ShareSvg} inheritViewBox></SvgIcon>
             </Link>
           )}
-          {[BadgeDetailDialogType.MINT, BadgeDetailDialogType.MINT_WITH_BACK].includes(badgeDetailDialogVisible) && (
+          {[BadgeDetailDialogType.MINT].includes(badgeDetailDialogVisible) && (
             <Link external href={shareBadgeContractURL} className="shareBtn">
               <SvgIcon sx={{ width: "3.2rem", height: "3.2rem", color: "primary.contrastText" }} component={ShareSvg} inheritViewBox></SvgIcon>
             </Link>

diff --git a/src/pages/canvas/Dashboard/BadgeWall/Badge.tsx b/src/pages/canvas/Dashboard/BadgeWall/Badge.tsx
@@ -71,7 +71,6 @@ const Badge = ({ badge, index, badgewidth }) => {
         onClick={handleShowBadgeDetailDialog}
       >
         <MuiBadge invisible={!upgradableBadge} color="primary" variant="dot">
-          {/* <BadgeGlowBox></BadgeGlowBox> */}
           <Img
             alt={badge.metadata?.name}
             style={{ width: "100%", borderRadius: "0.8rem" }}

diff --git a/src/pages/canvas/Dashboard/BadgeWall/index.tsx b/src/pages/canvas/Dashboard/BadgeWall/index.tsx
@@ -7,8 +7,6 @@ import { styled } from "@mui/system"
 
 import { getAvatarURL } from "@/apis/canvas"
 import Skeleton from "@/components/Skeleton"
-// import { ReactComponent as DefaultAvatarSvg } from "@/assets/svgs/canvas/default-avatar.svg"
-// import { BADGES_VISIBLE_TYPE } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useCanvasStore from "@/stores/canvasStore"
 import { sentryDebug } from "@/utils"
@@ -79,8 +77,6 @@ const BadgeWall: React.FC<BadgeWallProps> = props => {
   const { badgewidth, gridNum, windowDimensions } = props
   const divRef = useRef<HTMLDivElement>(null)
 
-  // console.log(badgewidth, "badgewidth")
-
   const { profileMinted, canvasUsername, queryUsernameLoading, userBadges, orderedAttachedBadges } = useCanvasStore()
   const [badges, setBadges] = useState<BadgePosition[]>([])
   const { walletCurrentAddress } = useRainbowContext()
@@ -107,22 +103,6 @@ const BadgeWall: React.FC<BadgeWallProps> = props => {
     let cursor = { x: divRect.left, y: divRect.top - badgewidth }
     let direction = 0 // 0: right, 1: down, 2: left, 3: up
     const limits = { left: divRect.left, right: divRect.right, top: divRect.top - badgewidth, bottom: divRect.bottom }
-    // const tempBadges = [
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    //   ...badges,
-    // ]
 
     badges.slice(0, 48).forEach(badge => {
       positions.push({ metadata: badge, left: cursor.x, top: cursor.y })
@@ -165,8 +145,6 @@ const BadgeWall: React.FC<BadgeWallProps> = props => {
   const generatedBadges = (): BadgePosition[] => {
     if (divRef.current) {
       const divRect = divRef.current.getBoundingClientRect()
-      // console.log(divRect, "divRect")
-
       return generateBadgePositions(divRect, badgewidth, visibleBadges)
     }
     return []

diff --git a/src/pages/canvas/Dashboard/BadgesDialog/index.tsx b/src/pages/canvas/Dashboard/BadgesDialog/index.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useMemo } from "react"
+import { Fragment } from "react"
 import Img from "react-cool-img"
 
 import { List } from "@mui/material"
@@ -11,20 +11,10 @@ import useCheckViewport from "@/hooks/useCheckViewport"
 import useSnackbar from "@/hooks/useSnackbar"
 import Button from "@/pages/canvas/components/Button"
 import Dialog from "@/pages/canvas/components/Dialog"
-import Empty from "@/pages/canvas/components/Empty"
-import useCanvasStore, { BadgeDetailDialogType, BadgesDialogType } from "@/stores/canvasStore"
+import useCanvasStore, { BadgesDialogType } from "@/stores/canvasStore"
 
 import BadgeItem from "./BadgeItem"
 
-// const BADGES_COPY = {
-//   [BadgesDialogType.MINT]: {
-//     title: "Mint eligible badges",
-//   },
-//   [BadgesDialogType.UPGRADE]: {
-//     title: "Upgrade badges",
-//   },
-// }
-
 const StyledList = styled(List)(({ theme }) => ({
   width: "57.6rem",
   height: "53.8rem",
@@ -59,29 +49,12 @@ const BadgesDialog = props => {
   const { isMobile } = useCheckViewport()
   const alertWarning = useSnackbar()
 
-  const {
-    isBadgeUpgrading,
-    badgesDialogVisible,
-    changeBadgesDialogVisible,
-    changeBadgeDetailDialog,
-    changeSelectedBadge,
-    upgradeBadgeAndRefreshUserBadges,
-  } = useCanvasStore()
-
-  const dialogTitle = useMemo(
-    () => (badgesDialogVisible === BadgesDialogType.MINT ? "Mint eligible badges" : "Upgrade badges"),
-    [badgesDialogVisible],
-  )
+  const { isBadgeUpgrading, badgesDialogVisible, changeBadgesDialogVisible, upgradeBadgeAndRefreshUserBadges } = useCanvasStore()
 
   const handleClose = () => {
     changeBadgesDialogVisible(BadgesDialogType.HIDDEN)
   }
 
-  const handleViewBadge = async badge => {
-    changeSelectedBadge(badge)
-    changeBadgeDetailDialog(BadgeDetailDialogType.MINT_WITH_BACK)
-  }
-
   const handleUpgradeBadge = async badge => {
     await upgradeBadgeAndRefreshUserBadges(provider, badge)
     alertWarning(
@@ -97,7 +70,7 @@ const BadgesDialog = props => {
 
   if (loading) {
     return (
-      <Dialog title={dialogTitle} open={!!badgesDialogVisible} onClose={handleClose}>
+      <Dialog title="Upgrade badges" open={!!badgesDialogVisible} onClose={handleClose}>
         <StyledList>
           <LoadingPage
             height="100%"
@@ -108,38 +81,25 @@ const BadgesDialog = props => {
     )
   }
 
-  // only for mint dialog
-  if (!badges.length) {
-    return (
-      <Dialog onClose={handleClose} open={!!badgesDialogVisible}>
-        <Empty title="No eligible badges for minting" sx={{ width: "57.6rem", height: ["auto", "62.7rem"] }}></Empty>
-      </Dialog>
-    )
-  }
-
   return (
-    <Dialog title={dialogTitle} open={!!badgesDialogVisible} onClose={handleClose}>
+    <Dialog title="Upgrade badges" open={!!badgesDialogVisible} onClose={handleClose}>
       <StyledList>
         {badges.map((badge, index) => (
           <Fragment key={index}>
-            {badgesDialogVisible === BadgesDialogType.MINT ? (
-              <BadgeItem badge={badge} onClick={() => handleViewBadge(badge)} />
-            ) : (
-              <BadgeItem
-                badge={badge}
-                action={
-                  <Button
-                    color="secondary"
-                    variant="contained"
-                    sx={{ borderRadius: "0.8rem", width: ["100%", "18.5rem"], fontSize: "1.6rem", padding: 0, borderColor: "#fff !important" }}
-                    loading={isBadgeUpgrading.get(badge.id)}
-                    onClick={handleUpgradeBadge}
-                  >
-                    Upgrade now
-                  </Button>
-                }
-              />
-            )}
+            <BadgeItem
+              badge={badge}
+              action={
+                <Button
+                  color="secondary"
+                  variant="contained"
+                  sx={{ borderRadius: "0.8rem", width: ["100%", "18.5rem"], fontSize: "1.6rem", padding: 0, borderColor: "#fff !important" }}
+                  loading={isBadgeUpgrading.get(badge.id)}
+                  onClick={handleUpgradeBadge}
+                >
+                  Upgrade now
+                </Button>
+              }
+            />
           </Fragment>
         ))}
       </StyledList>