Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/nft badges@thub 471 #75

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Feature/nft badges@thub 471 #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8fdf4d6
feat(nftdetailtemplate): add badges WIP THUB-471
Jenyfair Jan 25, 2023
cfc8c18
feat(soulboundtoken): home card order & opacity THUB-471
Jenyfair Jan 26, 2023
2ddcb0b
feat(nftcard): add badges THUB-471
Jenyfair Jan 26, 2023
79c1a85
fix(nftdetailtemplate): add missing mock data THUB-471
Jenyfair Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/molecules/ActionCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const ActionCard: React.FC<IActionCard> = ({
}) => {
return (
<Card
className={`justify-between flex flex-col items-center !py-s40 ${className}`}
className={`justify-between flex flex-col items-center !py-s40 ${className} ${disabled && `opacity-50`}` }
>
{imgComponent
? imgComponent
Expand Down
107 changes: 86 additions & 21 deletions components/molecules/NftCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { middleEllipsis } from "../../../utils/strings";
import Avatar from "../../atoms/Avatar";
import NftLoader from "../../atoms/NftLoader";
import Checkbox from "../../atoms/Checkbox";
import Image from "next/image";

const NftCard: React.FC<INftCard> = ({
creator,
Expand All @@ -19,6 +20,9 @@ const NftCard: React.FC<INftCard> = ({
isClickable,
onClick,
onChangeChecked,
isSecret,
isSoulbound,
isCapsule,
}) => {
const renderData = () => {
if (isLoading) {
Expand All @@ -32,7 +36,6 @@ const NftCard: React.FC<INftCard> = ({
return (
<React.Fragment>
<div className="flex flex-row items-center justify-between">

<div className="whitespace-nowrap overflow-hidden">
<div className="flex flex-row items-center">
{creator && (
Expand Down Expand Up @@ -70,25 +73,23 @@ const NftCard: React.FC<INftCard> = ({
</div>
)}
</div>
{
showPrice && (
<div className="flex flex-row justify-between items-center bg-gray-100 p-s16 rounded-xl mt-s20">
<Text
text={price !== "0" ? "Price" : ""}
weight="medium"
type="p2"
className="mr-s20"
/>
<Text
text={price && price !== "0" ? `${price} CAPS` : "NOT IN SELL"}
weight="medium"
type="p2"
className="break-all"
/>
</div>
)
}
</React.Fragment >
{showPrice && (
<div className="flex flex-row justify-between items-center bg-gray-100 p-s16 rounded-xl mt-s20">
<Text
text={price !== "0" ? "Price" : ""}
weight="medium"
type="p2"
className="mr-s20"
/>
<Text
text={price && price !== "0" ? `${price} CAPS` : "NOT IN SELL"}
weight="medium"
type="p2"
className="break-all"
/>
</div>
)}
</React.Fragment>
);
}
};
Expand All @@ -97,13 +98,77 @@ const NftCard: React.FC<INftCard> = ({
<div
className={`bg-gray-500 border-gray-200 border border-solid rounded-2xl p-[10px] md:p-s20 inline-block ${className}`}
>
<div className={`${isClickable && "cursor-pointer"}`} onClick={() => onClick && onClick()}>
<div
className={`${isClickable && "cursor-pointer"} relative`}
onClick={() => onClick && onClick()}
>
<ImagePreview
{...preview}
isLoading={isLoading}
loader={<NftLoader text="Loading" />}
imageClassName="rounded-xl"
/>
<div className="absolute bottom-s8 left-s8">
<div className="flex flex-row flex-wrap">
{isSoulbound && (
<div className="bg-purple-default opacity-50 rounded-[13px] p-s8 border-[2px] flex border-gray-200 mr-s8 mb-s8">
<div className="w-[14px] h-[18px]">
<Image
src="/nft-badge-icon.svg"
width="14"
height="18"
alt="nft-badge"
/>
</div>
<Text
type="label"
text="Soulbound"
weight="medium"
color="white-default"
className="ml-s8"
/>
</div>
)}
{isCapsule && (
<div className="bg-red-default opacity-50 rounded-[13px] p-s8 border-[2px] flex border-gray-200 mr-s8 mb-s8">
<div className="w-[14px] h-[18px]">
<Image
src="/nft-badge-icon.svg"
width="14"
height="18"
alt="nft-badge"
/>
</div>
<Text
type="label"
text="Capsule"
weight="medium"
color="white-default"
className="ml-s8"
/>
</div>
)}
{isSecret && (
<div className="bg-blue-500 opacity-50 rounded-[13px] p-s8 border-[2px] flex border-gray-200 mb-s8">
<div className="w-[14px] h-[18px]">
<Image
src="/nft-badge-icon.svg"
width="14"
height="18"
alt="nft-badge"
/>
</div>
<Text
type="label"
text="Secret"
weight="medium"
color="white-default"
className="ml-s8"
/>
</div>
)}
</div>
</div>
</div>
<div
className={`mb-s4 md:mb-s8 mt-[10px] md:mt-s28 overflow-hidden flex flex-col justify-between`}
Expand Down
3 changes: 3 additions & 0 deletions components/molecules/NftCard/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,7 @@ export interface INftCard {
showPrice?: boolean;
isClickable?: boolean;
onClick?: () => void;
isSoulbound?:boolean;
isCapsule?:boolean;
isSecret?:boolean;
}
14 changes: 7 additions & 7 deletions components/templates/CreateNftTemplate/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const CreateNftTemplate: React.FC<ICreateNftTemplate> = ({
disabled,
noTitle,
noQuantity,
isSoulBound,
isSoulbound,
hasBackBtn,
}) => {
const [isPreviewVisible, setIsPreviewVisible] = useState<boolean>();
Expand Down Expand Up @@ -118,14 +118,14 @@ const CreateNftTemplate: React.FC<ICreateNftTemplate> = ({

const onClickSubmit = () => {
handleSubmit((formResponse) => {
onSubmit({ result: formResponse, formData, isSoulBound: isSoulBound ?? false });
onSubmit({ result: formResponse, formData, isSoulbound: isSoulbound ?? false });
})();
};

return (
<React.Fragment>
<div className="flex flex-col justify-center h-[max-content]">
{isSoulBound && (
{isSoulbound && (
<div className="bg-gray-500 p-s20 flex-col rounded-[20px] mt-s24 mb-s40 max-w-[896px]">
<div className="bg-gray-700 rounded-[8px] px-s16 py-s8 inline-flex">
<Text
Expand Down Expand Up @@ -228,11 +228,11 @@ const CreateNftTemplate: React.FC<ICreateNftTemplate> = ({
type="primary"
className="rounded-[20px] absolute -left-s8 -top-s16 maxmd:hidden"
/>}
{!noTitle && !isSoulBound ? (
{!noTitle && !isSoulbound ? (
<Text text="Create your NFT" type="h3" weight="bold" />
) : (
!noTitle &&
isSoulBound && (
isSoulbound && (
<Text
text="Create your soulbound Token"
type="h3"
Expand Down Expand Up @@ -271,7 +271,7 @@ const CreateNftTemplate: React.FC<ICreateNftTemplate> = ({
type={noQuantity ? "disabled" : "primary"}
{...register("quantity")}
/>
{!isSoulBound && (
{!isSoulbound && (
<Input
id="royalty"
label="Royalty"
Expand Down Expand Up @@ -299,7 +299,7 @@ const CreateNftTemplate: React.FC<ICreateNftTemplate> = ({
<div className="flex flex-1 items-end">
<Button
color="gray-50"
text={isSoulBound ? "Create SBT" : "Create NFT"}
text={isSoulbound ? "Create SBT" : "Create NFT"}
type="primary"
size="medium"
className="mt-s20 md:mt-s32 bg-gray-300"
Expand Down
4 changes: 2 additions & 2 deletions components/templates/CreateNftTemplate/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ export interface INftFormResult {
export interface onSubmitParams {
result: INftFormResult;
formData: UseFormReturn<INftFormResult>;
isSoulBound:boolean
isSoulbound:boolean
}

export interface ICreateNftTemplate {
onSubmit: (params: onSubmitParams) => void;
disabled?: boolean;
noTitle?: boolean
noQuantity?: boolean;
isSoulBound?:boolean;
isSoulbound?:boolean;
hasBackBtn?:boolean;
}
6 changes: 4 additions & 2 deletions components/templates/NftDetailTemplate/NftDetailTemplate.mocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ const base: INftDetailTemplate = {
description: "Description mock for NFT Detail Template",
displayButton: true,
disabled: true,
buttonText: "Not for sale"

buttonText: "Not for sale",
isSoulbound:false,
isCapsule:true,
isSecret:false

};

Expand Down
44 changes: 35 additions & 9 deletions components/templates/NftDetailTemplate/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ const NftDetailTemplate: React.FC<INftDetailTemplate> = ({
buttonText,
disabled,
displayButton,
isSoulbound,
isCapsule,
isSecret,

}) => {
const [isZoomModalVisible, setIsZoomModalVisible] = useState<boolean>(false);
const router = useRouter();
Expand Down Expand Up @@ -51,6 +55,28 @@ const NftDetailTemplate: React.FC<INftDetailTemplate> = ({
imageClassName="rounded-[30px] max-w-[700px]"
className="border-[3px] md:border-[5px] border-solid border-[5px] rounded-[35px] border-gray-200"
/>
<div className="absolute bottom-s16 left-s16">
<div className="flex flex-row">
{isSoulbound && <div className="bg-purple-default opacity-50 rounded-[13px] p-s8 flex-1 border-[2px] flex border-gray-200 mr-s16">
<div className="w-[14px] h-[18px]">
<Image src="/nft-badge-icon.svg" width="14" height="18" alt="nft-badge" />
</div>
<Text type="label" text="Soulbound" weight="medium" color="white-default" className="ml-s8" />
</div>}
{isCapsule && <div className="bg-red-default opacity-50 rounded-[13px] p-s8 flex-1 border-[2px] flex border-gray-200 mr-s16">
<div className="w-[14px] h-[18px]">
<Image src="/nft-badge-icon.svg" width="14" height="18" alt="nft-badge" />
</div>
<Text type="label" text="Capsule" weight="medium" color="white-default" className="ml-s8" />
</div>}
{isSecret && <div className="bg-blue-500 opacity-50 rounded-[13px] p-s8 flex-1 border-[2px] flex border-gray-200">
<div className="w-[14px] h-[18px]">
<Image src="/nft-badge-icon.svg" width="14" height="18" alt="nft-badge" />
</div>
<Text type="label" text="Secret" weight="medium" color="white-default" className="ml-s8" />
</div>}
</div>
</div>
<div
className="absolute right-s16 bottom-s16 cursor-pointer"
onClick={() => setIsZoomModalVisible(true)}
Expand All @@ -66,7 +92,7 @@ const NftDetailTemplate: React.FC<INftDetailTemplate> = ({
<div className="flex grow">
<Text text={name} type="h5" weight="bold" className="break-all" />
</div>
{quantity && limit &&
{quantity &&
<div className="flex shrink rounded-[10px] bg-gray-200 p-s8 justify-center items-center">
<Image
src="/quantity.svg"
Expand All @@ -77,7 +103,7 @@ const NftDetailTemplate: React.FC<INftDetailTemplate> = ({
<Text
type="label"
weight="bold"
text={`${quantity}/${limit}`}
text={`${quantity}${limit ? `/${limit}`:''}`}
className="pl-s4"
/>
</div>}
Expand All @@ -93,13 +119,13 @@ const NftDetailTemplate: React.FC<INftDetailTemplate> = ({
<div className="flex flex-row py-s16 items-center">
{collectionLogo && (
<div className="pr-s8 min-w-[48px]">
<Image
src={collectionLogo}
alt={collectionName}
width="40"
height="40"
className="rounded-[12px]"
/>
<Image
src={collectionLogo}
alt={collectionName}
width="40"
height="40"
className="rounded-[12px]"
/>
</div>
)}
<Text text={collectionName} type="label" weight="bold" />
Expand Down
4 changes: 4 additions & 0 deletions components/templates/NftDetailTemplate/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,8 @@ export interface INftDetailTemplate {
onClick?: () => void;
buttonText?:string;
disabled?:boolean;
isSoulbound:boolean;
isCapsule:boolean;
isSecret:boolean;

}
6 changes: 3 additions & 3 deletions hooks/useCreateNft.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export interface CreatNftParams {
description: string;
royalty: number;
quantity: number;
isSoulBound: boolean;
isSoulbound: boolean;
collectionId?: number;
}

Expand Down Expand Up @@ -73,7 +73,7 @@ export const useCreateNft = () => {
royalty,
quantity,
collectionId,
isSoulBound,
isSoulbound,
}: CreatNftParams): Promise<NFTCreatedEvent | undefined> => {
setLoadingState("loading");
setError(undefined);
Expand All @@ -92,7 +92,7 @@ export const useCreateNft = () => {
royalty,
collectionId,
quantity,
isSoulBound,
isSoulbound,
})
).unwrap();
if (txHash) {
Expand Down
8 changes: 4 additions & 4 deletions pages/createnft.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { CREATE_BASIC_NFT } from "../constants/features";

const CreateNft: NextPage = () => {
const router = useRouter();
const isSoulBound: boolean = Boolean (router.query.isSoulBound);
const isSoulbound: boolean = Boolean (router.query.isSoulbound);
const { account, client } = useWalletConnectClient();
const isConnectingBlockchain = useSelector(
(state: RootState) => state.blockchain.isConnecting
Expand All @@ -39,11 +39,11 @@ const CreateNft: NextPage = () => {
setIsErrorModalVisible(Boolean(error));
}, [error]);

const onSubmit = async ({ result, formData, isSoulBound }: onSubmitParams) => {
const onSubmit = async ({ result, formData, isSoulbound }: onSubmitParams) => {
await createNft({
title: result.name,
...result,
isSoulBound
isSoulbound
});
formData.reset();
};
Expand Down Expand Up @@ -74,7 +74,7 @@ const CreateNft: NextPage = () => {
<CreateNftTemplate
onSubmit={onSubmit}
disabled={isConnectingBlockchain}
isSoulBound={isSoulBound}
isSoulbound={isSoulbound}
/>
</div>
</BaseTemplate>
Expand Down
Loading