-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #993 from Verifieddanny/fix-953
fix: Refont domain registration step 2
- Loading branch information
Showing
3 changed files
with
730 additions
and
694 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,66 @@ | ||
| import React, { FunctionComponent, useState } from "react"; | ||
| import styles from "../../styles/components/profilePic.module.css"; | ||
| import NftCard from "../UI/nftCard"; | ||
| import { debounce } from "../../utils/debounceService"; | ||
| import WarningMessage from "../UI/warningMessage"; | ||
| import PfpSkeleton from "./skeletons/pfpSkeleton"; | ||
|
|
||
| type PfpGalleryProps = { | ||
| userNfts: StarkscanNftProps[]; | ||
| isLoading?: boolean; | ||
| selectPfp: (nft: StarkscanNftProps) => void; | ||
| selectedPfp?: StarkscanNftProps | null; | ||
| }; | ||
|
|
||
| const PfpGallery: FunctionComponent<PfpGalleryProps> = ({ | ||
| userNfts, | ||
| isLoading = false, | ||
| selectPfp, | ||
| selectedPfp, | ||
| }) => { | ||
| const [isHovered, setIsHovered] = useState<string | null>(null); | ||
|
|
||
| const handleMouseEnter = debounce((id: string) => setIsHovered(id), 50); | ||
| const handleMouseLeave = debounce(() => setIsHovered(null), 50); | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <p className={styles.subtitle}>Your NFTs</p> | ||
| <h2 className={styles.title}>Choose your NFT Profile picture</h2> | ||
| <div className={styles.nftSection}> | ||
| {isLoading ? ( | ||
| <PfpSkeleton /> | ||
| ) : userNfts && userNfts.length > 0 ? ( | ||
| userNfts.map((nft, index) => { | ||
| if (!nft.image_url) return null; | ||
| return ( | ||
| <div | ||
| key={index} | ||
| onMouseEnter={() => handleMouseEnter(nft.token_id)} | ||
| onMouseLeave={handleMouseLeave} | ||
| > | ||
| <NftCard | ||
| image={nft.image_url as string} | ||
| name={nft.name as string} | ||
| selectPicture={() => selectPfp(nft)} | ||
| isHovered={isHovered === nft.token_id} | ||
| isSelected={selectedPfp?.token_id === nft.token_id} | ||
| /> | ||
| </div> | ||
| ); | ||
| }) | ||
| ) : ( | ||
| <div className="flex flex-col align-middle items-center"> | ||
| <img src="/visuals/notFound.webp" alt="Not found" width={201} /> | ||
| <WarningMessage> | ||
| You don't own any whitelisted NFTs yet | ||
| </WarningMessage> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default PfpGallery; | ||
| import React, { FunctionComponent, useState } from "react"; | ||
| import styles from "../../styles/components/profilePic.module.css"; | ||
| import NftCard from "../UI/nftCard"; | ||
| import { debounce } from "../../utils/debounceService"; | ||
| import WarningMessage from "../UI/warningMessage"; | ||
| import PfpSkeleton from "./skeletons/pfpSkeleton"; | ||
|
|
||
| type PfpGalleryProps = { | ||
| userNfts: StarkscanNftProps[]; | ||
| isLoading?: boolean; | ||
| selectPfp: (nft: StarkscanNftProps) => void; | ||
| selectedPfp?: StarkscanNftProps | null; | ||
| }; | ||
|
|
||
| const PfpGallery: FunctionComponent<PfpGalleryProps> = ({ | ||
| userNfts, | ||
| isLoading = false, | ||
| selectPfp, | ||
| selectedPfp, | ||
| }) => { | ||
| const [isHovered, setIsHovered] = useState<string | null>(null); | ||
|
|
||
| const handleMouseEnter = debounce((id: string) => setIsHovered(id), 50); | ||
| const handleMouseLeave = debounce(() => setIsHovered(null), 50); | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <h2 className={styles.title}>Choose your NFT Profile picture</h2> | ||
| <div className={styles.nftSection}> | ||
| {isLoading ? ( | ||
| <PfpSkeleton /> | ||
| ) : userNfts && userNfts.length > 0 ? ( | ||
| userNfts.map((nft, index) => { | ||
| if (!nft.image_url) return null; | ||
| return ( | ||
| <div | ||
| key={index} | ||
| onMouseEnter={() => handleMouseEnter(nft.token_id)} | ||
| onMouseLeave={handleMouseLeave} | ||
| > | ||
| <NftCard | ||
| image={nft.image_url as string} | ||
| name={nft.name as string} | ||
| selectPicture={() => selectPfp(nft)} | ||
| isHovered={isHovered === nft.token_id} | ||
| isSelected={selectedPfp?.token_id === nft.token_id} | ||
| /> | ||
| </div> | ||
| ); | ||
| }) | ||
| ) : ( | ||
| <div className="flex flex-col align-middle items-center"> | ||
| <img src="/visuals/notFound.webp" alt="Not found" width={201} /> | ||
| <WarningMessage> | ||
| You don't own any whitelisted NFTs yet | ||
| </WarningMessage> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default PfpGallery; |
Oops, something went wrong.