diff --git a/components/NftDetailsPage/NftDetailTabs/index.tsx b/components/NftDetailsPage/NftDetailTabs/index.tsx new file mode 100644 index 0000000..6a3734e --- /dev/null +++ b/components/NftDetailsPage/NftDetailTabs/index.tsx @@ -0,0 +1,44 @@ +import { Tab } from "@headlessui/react"; +import React from "react"; + +const NftsDetailTabs = () => { + return ( + + + + selected + ? "font-extrabold text-gray-900 p-3 rounded-md bg-white dark:bg-darkPrimary transition-all dark:text-white" + : "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all" + } + > + Overview + + + selected + ? "font-extrabold text-gray-900 p-3 rounded-md bg-white dark:text-white dark:bg-darkPrimary transition-all" + : "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all" + } + > + Bids + + + selected + ? "font-extrabold text-gray-900 p-3 rounded-md bg-white dark:text-white dark:bg-darkPrimary transition-all" + : "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all" + } + > + History + + + + ); +}; + +export default NftsDetailTabs; diff --git a/components/NftDetailsPage/index.tsx b/components/NftDetailsPage/index.tsx new file mode 100644 index 0000000..0529dba --- /dev/null +++ b/components/NftDetailsPage/index.tsx @@ -0,0 +1,211 @@ +/* eslint-disable @next/next/link-passhref */ +/* eslint-disable @next/next/no-img-element */ +import NftPreview from "@components/CreateNftPage/NftPreview"; +import useClickOutside from "@components/hooks/useClickOutside"; +import useNfTs from "@components/hooks/useNFTs"; +import NFTCard from "@components/modules/__modules__/Card/NFTCard"; +import ListViewBuilder from "@components/modules/__modules__/ListViewBuilder"; +import ShareContainer from "@components/modules/__modules__/ShareContainer"; +import ShowWidget from "@components/modules/__modules__/ShowWidget"; +import { + DotsVector, + HeartVector, + VShare, +} from "@components/modules/__modules__/_vectors"; +import Header from "@components/modules/__noAuth/Header"; +import { Tab } from "@headlessui/react"; +import { sharePageLinkAtom } from "@lib/atoms"; +import { NFTData, NFTMetaData } from "@lib/models/GeneralModel"; +import { backendApiService } from "@lib/services/BackendApiService"; +import { List } from "antd"; +import Link from "next/link"; +import React, { FC, useEffect, useState } from "react"; +import { useRecoilState } from "recoil"; +import NftBid from "./modules/NftBid"; +import NftOverView from "./modules/NftOverview"; +import NftsDetailTabs from "./NftDetailTabs"; + +interface IProps { + nft: NFTData; +} + +const NftDetailsPage: FC = ({ nft }) => { + const [ownerNfts, setOwnerNfts] = useState<{ + nfts: NFTData[]; + metadata: NFTMetaData | null; + isLoading: boolean; + }>({ + nfts: [], + isLoading: true, + metadata: null, + }); + const [isNftOptions, setIsNftOptions] = useState(false); + const [isShareContainer, setIsShareContaner] = + useRecoilState(sharePageLinkAtom); + + const { onLoadMore, shouldShowLoadMoreButton } = useNfTs(); + + const reportRef = useClickOutside(() => setIsNftOptions(false)); + + useEffect(() => { + if (nft) + (async () => { + setOwnerNfts({ + ...ownerNfts, + isLoading: true, + }); + const response = await backendApiService.findNFts({ + walletAddress: nft.owner.walletAddress, + }); + + setOwnerNfts({ + nfts: response.nfts, + metadata: response.meta, + isLoading: false, + }); + })(); + }, []); + + const toggleNftOptions = () => { + setIsNftOptions(!isNftOptions); + }; + + const toggleShareContainer = () => { + setIsShareContaner(!isShareContainer); + }; + + return ( + <> +
+
+
+
+
+ {nft.name} +
+ + + + + + + +
+
+

{nft.name}

+ +
+ {nft.owner.username} +
+

+ Current owner +

+

+ {nft.owner.username} +

+
+
+ + +
+
+

+ + + + 0 +

+

+ + + + Share +

+
+

+ +

+ +
+ +
+ +
+

Report this NFT

+
+
+ +
+
+

+ Price +

+

{nft.price} MATIC

+
+ + +
+
+
+
+

+ More from The Owner +

+
+
+ ( + + + + )} + hasMore={false} + showLoadMoreButton={shouldShowLoadMoreButton} + loading={ownerNfts.isLoading} + loadingMore={false} + onLoadMore={onLoadMore} + /> +
+
+ + ); +}; + +export default NftDetailsPage; diff --git a/components/NftDetailsPage/modules/NftBid/index.tsx b/components/NftDetailsPage/modules/NftBid/index.tsx new file mode 100644 index 0000000..857af15 --- /dev/null +++ b/components/NftDetailsPage/modules/NftBid/index.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { VFlash } from "@components/modules/__modules__/_vectors"; +import { Tab } from "@headlessui/react"; + +const NftBid = () => { + return ( + +
+

+ +

+

+ No active bids yet. Be the first to make a bid! +

+
+ + ); +}; + +export default NftBid; diff --git a/components/NftDetailsPage/modules/NftOverview/index.tsx b/components/NftDetailsPage/modules/NftOverview/index.tsx new file mode 100644 index 0000000..a7d95e7 --- /dev/null +++ b/components/NftDetailsPage/modules/NftOverview/index.tsx @@ -0,0 +1,64 @@ +/* eslint-disable @next/next/link-passhref */ +import React, { FC } from "react"; +import { Tab } from "@headlessui/react"; +import { NFTData } from "@lib/models/GeneralModel"; +import { + PolygonVectorOutLine, + PolygonVectorSolid, +} from "@components/modules/__modules__/_vectors/polygonVector"; +import { VEye } from "@components/modules/__modules__/_vectors"; +import Link from "next/link"; + +interface IProps { + nft: NFTData; +} + +const NftOverView: FC = ({ nft }) => { + return ( + +
+

Description

+

+ {nft.description} +

+
+
+

Latet Bids

+
+ No bids yet. +
+
+
+

Details

+ +
+ + ); +}; + +export default NftOverView; diff --git a/components/modules/__modules__/Card/NFTCard/index.tsx b/components/modules/__modules__/Card/NFTCard/index.tsx index 381d18b..19207bc 100644 --- a/components/modules/__modules__/Card/NFTCard/index.tsx +++ b/components/modules/__modules__/Card/NFTCard/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @next/next/link-passhref */ /* eslint-disable @next/next/no-img-element */ import React, { FC, useState } from "react"; import { VerifiedImg } from "@lib/Resources"; @@ -7,6 +8,7 @@ import { NFTData } from "@lib/models/GeneralModel"; import ShowWidget from "../../ShowWidget"; import useClickOutside from "@components/hooks/useClickOutside"; import ChangePriceModal from "../../ChangePriceModal"; +import Link from "next/link"; interface Props { likes?: number; @@ -58,73 +60,75 @@ const NFTCard: FC = ({ onMouseOut={onOverNFTCardOut} className="h-fit w-full mobile:w-full transition-all flex-none border hover:border-2 border-slate-200 dark:border-gray-500 relative p-2 mobile:mr-0 rounded-xl snap-center" > -
- - {nft?.name} - - - {previewName} - + +
+ + {nft?.name} + + + {previewName} + -
-
-

Polygon

+ > +
+

Polygon

-
- - {likes} +
+ + {likes} +
-
- -
- {isEditable ? ( -
    -
  • setIsChangePriceModal(true)} - className="p-2 cursor-pointer hover:bg-gray-100 rounded-lg dark:hover:bg-darkLight" - > - Change Price -
    • -
  • - Remove from sale -
    • -
  • - Transfer -
    • -
- ) : ( -
    -
  • - Report -
    • -
  • - Share -
    • -
- )} -
- -
+ +
+ {isEditable ? ( +
    +
  • setIsChangePriceModal(true)} + className="p-2 cursor-pointer hover:bg-gray-100 rounded-lg dark:hover:bg-darkLight" + > + Change Price +
    • +
  • + Remove from sale +
    • +
  • + Transfer +
    • +
+ ) : ( +
    +
  • + Report +
    • +
  • + Share +
    • +
+ )} +
+ +
+
@@ -186,13 +190,20 @@ const NFTCard: FC = ({
- + {!isAuction ? ( - ) : ( - )} diff --git a/components/modules/__modules__/Card/SkeletonLoader/index.tsx b/components/modules/__modules__/Card/SkeletonLoader/index.tsx index e5e7804..ad4b439 100644 --- a/components/modules/__modules__/Card/SkeletonLoader/index.tsx +++ b/components/modules/__modules__/Card/SkeletonLoader/index.tsx @@ -1,4 +1,5 @@ import React, { FC } from "react"; +import NFTCardFallback from "../../NFTCardFallback"; interface Props { className?: string; diff --git a/components/modules/__modules__/ListViewBuilder/LoadNftsFallback/index.tsx b/components/modules/__modules__/ListViewBuilder/LoadNftsFallback/index.tsx new file mode 100644 index 0000000..380a7ee --- /dev/null +++ b/components/modules/__modules__/ListViewBuilder/LoadNftsFallback/index.tsx @@ -0,0 +1,21 @@ +import React, { FC } from "react"; +import NFTCardFallback from "../../NFTCardFallback"; + +const LoadNftsFallback: FC = () => { + return ( +
+ {Array.from({ length: 4 }).map((_, index) => { + return ( +
+ +
+ ); + })} +
+ ); +}; + +export default LoadNftsFallback; diff --git a/components/modules/__modules__/ListViewBuilder/index.tsx b/components/modules/__modules__/ListViewBuilder/index.tsx index 9de7374..032deec 100644 --- a/components/modules/__modules__/ListViewBuilder/index.tsx +++ b/components/modules/__modules__/ListViewBuilder/index.tsx @@ -5,6 +5,8 @@ import useMediaQuery from "@components/hooks/useMediaQuery"; import { List } from "antd"; import { LoadMore } from "@components/modules/__modules__/Card/LoadMore"; import SkeletonLoader from "@components/modules/__modules__/Card/SkeletonLoader"; +import NFTCardFallback from "../NFTCardFallback"; +import LoadNftsFallback from "./LoadNftsFallback"; export const ListView: FC = ({ loading, @@ -32,7 +34,10 @@ export const ListView: FC = ({ return (
, + spinning: loading, + }} loadMore={ loadMore || (
@@ -48,7 +53,7 @@ export const ListView: FC = ({ dataSource={items.slice(0, preloaderLimit())} renderItem={() => ( - + )} /> diff --git a/components/modules/__modules__/NFTCardFallback/index.tsx b/components/modules/__modules__/NFTCardFallback/index.tsx index 3fe71cc..94a8471 100644 --- a/components/modules/__modules__/NFTCardFallback/index.tsx +++ b/components/modules/__modules__/NFTCardFallback/index.tsx @@ -1,25 +1,17 @@ +import { List } from "antd"; import React from "react"; const NFTCardFallback = () => { return ( - <> - {Array.from({ length: 10 }).map((_, index) => { - return ( -
-
-
-
-
-
-
-
-
- ); - })} - +
+
+
+
+
+
+
+
+
); }; diff --git a/components/modules/__secured/Profile/module/shareContainer/index.tsx b/components/modules/__modules__/ShareContainer/index.tsx similarity index 84% rename from components/modules/__secured/Profile/module/shareContainer/index.tsx rename to components/modules/__modules__/ShareContainer/index.tsx index 927e10c..74fa181 100644 --- a/components/modules/__secured/Profile/module/shareContainer/index.tsx +++ b/components/modules/__modules__/ShareContainer/index.tsx @@ -7,21 +7,17 @@ import { } from "@components/modules/__modules__/_vectors"; import useClickOutside from "@components/hooks/useClickOutside"; import { useRecoilState } from "recoil"; -import { shareProfileLinkAtom } from "@lib/atoms"; +import { sharePageLinkAtom } from "@lib/atoms"; -type openModel = { - isShareOpen: boolean; -}; - -const ShareContainer: FC = () => { - const [isShareOpen, setIsShareOpen] = useRecoilState(shareProfileLinkAtom); +const ShareContainer: FC = () => { + const [isShareOpen, setIsShareOpen] = useRecoilState(sharePageLinkAtom); const ref = useClickOutside(() => setIsShareOpen(true)); return (

Share link to this page diff --git a/components/modules/__modules__/_vectors/index.tsx b/components/modules/__modules__/_vectors/index.tsx index 92fe243..00f76cd 100644 --- a/components/modules/__modules__/_vectors/index.tsx +++ b/components/modules/__modules__/_vectors/index.tsx @@ -35,7 +35,7 @@ import { BsFillCheckCircleFill as VCheckFill, } from "react-icons/bs"; import { AiOutlineMail as VEmail } from "react-icons/ai"; -import { IoShareOutline as VShare } from "react-icons/io5"; +import { IoShareOutline as VShare, IoFlash as VFlash } from "react-icons/io5"; import { ImInfinite as VInfinite } from "react-icons/im"; import { MdOutlineTimelapse as VTimeLapse } from "react-icons/md"; import { RiUserLine as VUser } from "react-icons/ri"; @@ -43,6 +43,7 @@ import { TiFlash as Vflash } from "react-icons/ti"; import { BiTransfer as VTransaction } from "react-icons/bi"; import { CgSpinnerTwo as VSpinner } from "react-icons/cg"; import { GoPrimitiveDot as VSingleDot } from "react-icons/go"; +import { FiEye as VEye } from "react-icons/fi"; export { CoinBaseVector, @@ -84,4 +85,6 @@ export { VCheckFill, VSingleDot, VFilter, + VEye, + VFlash, }; diff --git a/components/modules/__modules__/_vectors/polygonVector.tsx b/components/modules/__modules__/_vectors/polygonVector.tsx new file mode 100644 index 0000000..5f2a4f6 --- /dev/null +++ b/components/modules/__modules__/_vectors/polygonVector.tsx @@ -0,0 +1,49 @@ +import { classNameInterface } from "@lib/@Types"; +import React, { FC } from "react"; + +const defaultProps: classNameInterface = { + className: "h-6 w-6", +}; + +const PolygonVectorOutLine: FC = ({ className }) => { + return ( + + + + ); +}; + +const PolygonVectorSolid: FC = ({ className }) => { + return ( + + + + ); +}; + +PolygonVectorOutLine.defaultProps = defaultProps; +PolygonVectorSolid.defaultProps = defaultProps; + +export { PolygonVectorOutLine, PolygonVectorSolid }; diff --git a/components/modules/__noAuth/ConnectWalletsBox/index.tsx b/components/modules/__noAuth/ConnectWalletsBox/index.tsx index f31efc5..1a060b5 100644 --- a/components/modules/__noAuth/ConnectWalletsBox/index.tsx +++ b/components/modules/__noAuth/ConnectWalletsBox/index.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { Button } from "antd"; import { CrossVector } from "@components/modules/__modules__/_vectors"; -import ConnectWallets from "@components/modules/__secured"; +import ConnectWallets from "@components/modules/__secured/ConnectWalletsModal"; import { useRecoilValue, useRecoilState } from "recoil"; import { walletAtom } from "@lib/atoms"; diff --git a/components/modules/__noAuth/ExploreNFTs/index.tsx b/components/modules/__noAuth/ExploreNFTs/index.tsx index f6087cb..adade3e 100644 --- a/components/modules/__noAuth/ExploreNFTs/index.tsx +++ b/components/modules/__noAuth/ExploreNFTs/index.tsx @@ -5,7 +5,7 @@ import ShowWidget from "@components/modules/__modules__/ShowWidget"; import { VFilter, VSingleDot } from "@components/modules/__modules__/_vectors"; import { nftsState } from "@lib/atoms"; import { NFTData } from "@lib/models/GeneralModel"; -import { List } from "antd"; +import { List, Skeleton } from "antd"; import React, { useState, useRef } from "react"; import { useRecoilValue } from "recoil"; import ListViewBuilder from "@components/modules/__modules__/ListViewBuilder"; @@ -40,88 +40,57 @@ const ExploreNFTs = () => { }; return ( -

-
-

- Explore NFTs -

- -
-
- - - -
-

- Polygon -

-
- - -
-

- MATIC -

-
- - -
-
- - -
-
- -
+ //
+
+

+ Explore NFTs +

+ +
+
- + +
-

- DESC +

+ Polygon

-

- ASC +

+ + +
+

+ MATIC

-
+
+ + +
+
@@ -132,25 +101,62 @@ const ExploreNFTs = () => {
- - -
- ( - - - - )} - hasMore={false} - showLoadMoreButton={shouldShowLoadMoreButton} - loading={currentNfts.isLoading} - loadingMore={false} - onLoadMore={onLoadMore} - /> + + +
+

+ DESC +

+

+ ASC +

+
+ + +
+
+
-
-
+ + +
+ ( + + + + )} + hasMore={false} + showLoadMoreButton={shouldShowLoadMoreButton} + loading={currentNfts.isLoading} + loadingMore={false} + onLoadMore={onLoadMore} + /> +
+
+ // {/*
*/} ); }; diff --git a/components/modules/__noAuth/Header/Menu/index.tsx b/components/modules/__noAuth/Header/Menu/index.tsx index 9238053..073a000 100644 --- a/components/modules/__noAuth/Header/Menu/index.tsx +++ b/components/modules/__noAuth/Header/Menu/index.tsx @@ -37,6 +37,11 @@ export const MenuList = ({ walletAddress, className }: IMenuListProps) => { Sign in )} + +
  • + Create +
    • + ); }; diff --git a/components/modules/__noAuth/Header/SwitchThemeButton/index.tsx b/components/modules/__noAuth/Header/SwitchThemeButton/index.tsx index 8320c90..86efd7f 100644 --- a/components/modules/__noAuth/Header/SwitchThemeButton/index.tsx +++ b/components/modules/__noAuth/Header/SwitchThemeButton/index.tsx @@ -1,13 +1,11 @@ import { useTheme } from "@components/context/ThemeProvider"; import { MoonVector, VSun } from "@components/modules/__modules__/_vectors"; -import React, { useState } from "react"; +import React from "react"; const SwitchThemeButton = () => { - const [isLightTheme, setIsLightTheme] = useState(true); const { setTheme, theme } = useTheme(); const toggleTheme = () => { - setIsLightTheme(!isLightTheme); theme === "light" ? setTheme("dark") : setTheme("light"); }; @@ -16,7 +14,7 @@ const SwitchThemeButton = () => { className="border border-gray-300 transition-all duration-300 ease-in-out hover:border-gray-400 px-3 py-3 mx-1 rounded-full dark:text-white" onClick={toggleTheme} > - {isLightTheme ? ( + {theme === "light" ? ( ) : ( diff --git a/components/modules/__secured/index.tsx b/components/modules/__secured/ConnectWalletsModal/index.tsx similarity index 78% rename from components/modules/__secured/index.tsx rename to components/modules/__secured/ConnectWalletsModal/index.tsx index 1e4c4d6..5084b79 100644 --- a/components/modules/__secured/index.tsx +++ b/components/modules/__secured/ConnectWalletsModal/index.tsx @@ -1,5 +1,5 @@ import React, { FC } from "react"; -import ConnectWalletsModal from "../__modules__/model"; +import ConnectWalletsModal from "../../__modules__/model"; type openMenuT = { openWalletMenu: boolean; diff --git a/components/modules/__secured/Profile/CreatedContainer/index.tsx b/components/modules/__secured/Profile/CreatedContainer/index.tsx index 479e285..9cb383a 100644 --- a/components/modules/__secured/Profile/CreatedContainer/index.tsx +++ b/components/modules/__secured/Profile/CreatedContainer/index.tsx @@ -31,7 +31,7 @@ const CreatedContainer = ({ const { onLoadMore, shouldShowLoadMoreButton } = useNfTs(); return ( -
    +
    ( diff --git a/components/modules/__secured/Profile/OwnedContainer/index.tsx b/components/modules/__secured/Profile/OwnedContainer/index.tsx index acce856..a4b549a 100644 --- a/components/modules/__secured/Profile/OwnedContainer/index.tsx +++ b/components/modules/__secured/Profile/OwnedContainer/index.tsx @@ -30,7 +30,7 @@ const OwnedContainer = ({ ); return ( -
    +
    ( diff --git a/components/modules/__secured/Profile/index.tsx b/components/modules/__secured/Profile/index.tsx index b77356f..8409cbe 100644 --- a/components/modules/__secured/Profile/index.tsx +++ b/components/modules/__secured/Profile/index.tsx @@ -7,11 +7,11 @@ import { VShare, } from "@components/modules/__modules__/_vectors"; import { Tab } from "@headlessui/react"; -import ShareContainer from "./module/shareContainer"; +import ShareContainer from "../../__modules__/ShareContainer"; import { useRecoilState, useRecoilValue } from "recoil"; import { currentAccountState, - shareProfileLinkAtom, + sharePageLinkAtom, subscribesAtom, walletAddressAtom, } from "@lib/atoms"; @@ -30,7 +30,6 @@ import { UserAccount } from "@lib/models/UserAccount"; import { NFTData, NFTMetaData } from "@lib/models/GeneralModel"; import { backendApiService } from "@lib/services/BackendApiService"; import ProfileReportOption from "./module/ProfileReportOptions"; -import ShowWidget from "@components/modules/__modules__/ShowWidget"; interface IProps { searchedUserProfile: UserAccount; @@ -42,7 +41,7 @@ function ProfileContainer({ searchedUserProfile }: IProps) { const isSubscribesOpen = useRecoilValue(subscribesAtom); const [isSubscribesDisplayed, setIsSubscribesDisplayed] = useRecoilState(subscribesAtom); - const [isShareOpen, setIsShareOpen] = useRecoilState(shareProfileLinkAtom); + const [isShareOpen, setIsShareOpen] = useRecoilState(sharePageLinkAtom); const currentConnectedUser = useRecoilValue(currentAccountState); const [isCurrentConnectedUserProfile, setIsCurrentConnectUserProfile] = useState(true); @@ -172,13 +171,19 @@ function ProfileContainer({ searchedUserProfile }: IProps) { setIsPageReport={setIsPageReportModal} isCurrentConnectedUserProfile={isCurrentConnectedUserProfile} /> - +
    -
    +
    diff --git a/components/modules/__secured/Profile/saleContainer/index.tsx b/components/modules/__secured/Profile/saleContainer/index.tsx index 101d598..a3f0a57 100644 --- a/components/modules/__secured/Profile/saleContainer/index.tsx +++ b/components/modules/__secured/Profile/saleContainer/index.tsx @@ -32,7 +32,7 @@ export const SaleContainer = ({ const { onLoadMore, shouldShowLoadMoreButton } = useNfTs(); return ( -
    +
    ( diff --git a/lib/@Types/index.ts b/lib/@Types/index.ts index bcacfe8..8f43053 100644 --- a/lib/@Types/index.ts +++ b/lib/@Types/index.ts @@ -8,7 +8,7 @@ export const defaultVectorProps: classNameInterface = { className: "h-6 w-6", }; -export interface updateProfileInterface { +export interface IUpdateProfile { walletAddress: string; username?: string; userBio?: string; diff --git a/lib/atoms/index.ts b/lib/atoms/index.ts index 00d7e9f..87bde2f 100644 --- a/lib/atoms/index.ts +++ b/lib/atoms/index.ts @@ -33,8 +33,8 @@ export const profileMenuAtom = atom({ default: true, }); -export const shareProfileLinkAtom = atom({ - key: "shareProfileLinkAtom", +export const sharePageLinkAtom = atom({ + key: "sharePageLinkAtom", default: true, }); diff --git a/lib/services/BackendApiService.ts b/lib/services/BackendApiService.ts index ab3be3c..e9da4c0 100644 --- a/lib/services/BackendApiService.ts +++ b/lib/services/BackendApiService.ts @@ -2,7 +2,7 @@ import { UserAccount } from "@lib/models/UserAccount"; import http from "@lib/http"; import * as Sentry from "@sentry/nextjs"; import { orderObject } from "@lib/Utils"; -import { updateProfileInterface } from "@lib/@Types"; +import { IUpdateProfile } from "@lib/@Types"; import { IGetRequestNFTsParams, NftCardData, @@ -52,7 +52,7 @@ class BackendApiService { coverThumbnailUrl, coverUrl, signature, - }: updateProfileInterface): Promise { + }: IUpdateProfile): Promise { try { const profileEndpoint = "/users/profile"; const response = await http.put( diff --git a/pages/profile/[slug].tsx b/pages/profile/[slug].tsx index 2967c80..a63ded5 100644 --- a/pages/profile/[slug].tsx +++ b/pages/profile/[slug].tsx @@ -3,6 +3,7 @@ import React, { useEffect } from "react"; import cookieParser from "@lib/cookieParser"; import { backendApiService } from "@lib/services/BackendApiService"; import UploadFileProcessing from "@components/modules/__modules__/Card/UploadFileProcessing"; +import Head from "next/head"; function Profile({ user, loaded }) { if (!user && !loaded) { @@ -20,10 +21,22 @@ function Profile({ user, loaded }) {
    ); } + return ( - - - + <> + + {user?.username || "Profile"} + + + + + + + + + + + ); } diff --git a/pages/token/[slug].tsx b/pages/token/[slug].tsx new file mode 100644 index 0000000..d61af9f --- /dev/null +++ b/pages/token/[slug].tsx @@ -0,0 +1,97 @@ +import NftDetailsPage from "@components/NftDetailsPage"; +import Head from "next/head"; +import React from "react"; + +const NftDetails = () => { + const nft = { + id: "17", + tokenUri: "dlwlfxaqkuw950gf3hegq", + creatorId: "2", + creatorAddress: "0xdBc8997C1273bD8bc5af15f16df26C4FA03c0852", + ownerId: "2", + ownerAddress: "0xdBc8997C1273bD8bc5af15f16df26C4FA03c0852", + dropId: null, + mintTransactionHash: + "0x00b19f9513d1e814f0eed5ad5e8ace8650ec8b3b216407be150f5d7fee600a95", + tokenID: 56, + name: "Big_k", + priority: 0, + description: "Multicolor bored mokey", + fileSize: 137658, + listed: true, + listedOnchain: true, + verified: false, + image: + "https://ipfs.infura.io/ipfs/QmQsH4aNapeAhLHvwaiACkj2q8LimvYYMsPogv3sFZeD83", + url: "https://ipfs.infura.io/ipfs/QmQsH4aNapeAhLHvwaiACkj2q8LimvYYMsPogv3sFZeD83", + urlCompressed: + "https://ipfs.infura.io/ipfs/QmQsH4aNapeAhLHvwaiACkj2q8LimvYYMsPogv3sFZeD83", + urlThumbnail: + "https://ipfs.infura.io/ipfs/QmQsH4aNapeAhLHvwaiACkj2q8LimvYYMsPogv3sFZeD83", + price: 0.5, + storageFee: 0.0001, + storageFeeTransaction: + "0xa5fd3d040e39891d104e1dcf1fe6a08268751db272a3fa66341086f78336c96c", + fileType: "image/jpeg", + isVideo: false, + active: true, + createdAt: "2022-07-13T19:18:36.000Z", + updatedAt: "2022-07-13T19:32:35.020Z", + owner: { + id: "2", + walletAddress: "0xdBc8997C1273bD8bc5af15f16df26C4FA03c0852", + username: "Jonathan_z001", + usernameLowercase: "jonathan_z001", + avatarUrl: + "https://ipfs.infura.io/ipfs/QmTu1R9BCnLMvQMxTG3Hs5Fj9SV8kwtkc4Besj6GLwKKvz", + avatarUrlThumbnail: null, + avatarUrlCompressed: null, + coverUrl: + "https://ipfs.infura.io/ipfs/QmeLDaSeBp71RyKoe37FbYTuVHMCiDHAyKuSNGsuvTH5oj", + coverThumbnailUrl: + "https://ipfs.infura.io/ipfs/QmeLDaSeBp71RyKoe37FbYTuVHMCiDHAyKuSNGsuvTH5oj", + userBio: "NFT Creator", + banned: false, + verified: false, + active: true, + salesCount: 0, + buysCount: 0, + buysTotalAmount: 0, + notAllowedToMint: false, + nftsCount: 6, + nftsOwnCount: 0, + salesTotalAmount: 0, + createdAt: "2022-06-07T12:08:34.944Z", + updatedAt: "2022-07-13T19:32:35.024Z", + }, + }; + + return ( +
    + + {nft.name} + + + + + + + + +
    + ); +}; + +// export const getServerSideProps = async (context: { +// params: { slug: any }; +// req: any; +// }) => { +// const { slug } = context.params; + +// try { +// } catch (err) { +// console.log(err); +// } +// }; + +export default NftDetails; diff --git a/styles/globals.css b/styles/globals.css index 2570616..7481bbc 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -85,3 +85,8 @@ input[type="number"]::-webkit-outer-spin-button { background-position: 1000px 0; } } + +/* hide default spin div container as w're using a custom fallback */ +.ant-spin-blur { + display: none; +}