From 121688d5b36bc7cfdcfd3ec41b386f5c4dd2020d Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Wed, 3 Jan 2024 09:45:16 +0530 Subject: [PATCH 01/28] partial commit: pending Design --- packages/components/AssetsPagination.tsx | 177 +++++ .../FilePreview/SelectedFilesPreview.tsx | 65 ++ .../components/inputs/TextInputCustom.tsx | 3 + packages/components/navigation/Navigator.tsx | 9 + .../selectFileUploader/SelectFileUploader.tsx | 122 +++ .../SelectFileUploader.type.ts | 17 + .../SelectFileUploader.web.tsx | 239 ++++++ .../selectFileUploader/formatFile.ts | 34 + .../components/selectFileUploader/index.ts | 1 + .../Launchpad/CreateCollection.type.ts | 36 + .../Launchpad/LaunchpadApplyScreen.tsx | 7 +- .../Launchpad/LaunchpadCreateScreen.tsx | 149 ++++ .../components/ ConfigureRoyaltyDetails.tsx | 94 +++ .../screens/Launchpad/components/Assets.tsx | 148 ++++ .../components/CollectionDetails.tsx | 729 ++++++++++++++++++ .../components/ExistingWhitelist.tsx | 48 ++ .../Launchpad/components/NewWhitelist.tsx | 180 +++++ packages/screens/Launchpad/components/Uri.tsx | 110 +++ packages/utils/navigation.ts | 4 + 19 files changed, 2170 insertions(+), 2 deletions(-) create mode 100644 packages/components/AssetsPagination.tsx create mode 100644 packages/components/FilePreview/SelectedFilesPreview.tsx create mode 100644 packages/components/selectFileUploader/SelectFileUploader.tsx create mode 100644 packages/components/selectFileUploader/SelectFileUploader.type.ts create mode 100644 packages/components/selectFileUploader/SelectFileUploader.web.tsx create mode 100644 packages/components/selectFileUploader/formatFile.ts create mode 100644 packages/components/selectFileUploader/index.ts create mode 100644 packages/screens/Launchpad/CreateCollection.type.ts create mode 100644 packages/screens/Launchpad/LaunchpadCreateScreen.tsx create mode 100644 packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx create mode 100644 packages/screens/Launchpad/components/Assets.tsx create mode 100644 packages/screens/Launchpad/components/CollectionDetails.tsx create mode 100644 packages/screens/Launchpad/components/ExistingWhitelist.tsx create mode 100644 packages/screens/Launchpad/components/NewWhitelist.tsx create mode 100644 packages/screens/Launchpad/components/Uri.tsx diff --git a/packages/components/AssetsPagination.tsx b/packages/components/AssetsPagination.tsx new file mode 100644 index 0000000000..fb9f133ef2 --- /dev/null +++ b/packages/components/AssetsPagination.tsx @@ -0,0 +1,177 @@ +import React from "react"; +import { StyleSheet, TextInput, TouchableOpacity, View } from "react-native"; + +import { BrandText } from "./BrandText"; +import { SVG } from "./SVG"; +import { SEARCH_BAR_INPUT_HEIGHT } from "./Search/SearchBarInput"; +import { Box } from "./boxes/Box"; +import { LegacyTertiaryBox } from "./boxes/LegacyTertiaryBox"; +import { TertiaryBox } from "./boxes/TertiaryBox"; +import { SpacerRow } from "./spacer"; +import chevronLeftDoubleSVG from "../../assets/icons/chevron-left-double.svg"; +import chevronLeftSVG from "../../assets/icons/chevron-left.svg"; +import chevronRightDoubleSVG from "../../assets/icons/chevron-right-double.svg"; +import chevronRightSVG from "../../assets/icons/chevron-right.svg"; +import { + neutral17, + neutral33, + neutral77, + primaryColor, +} from "../utils/style/colors"; +import { fontSemibold14 } from "../utils/style/fonts"; +import { layout } from "../utils/style/layout"; + +interface PaginationProps { + currentPage: number; + maxPage: number; + itemsPerPage: number; + dropdownOptions: number[]; + setItemsPerPage: (item: number) => void; + onChangePage: (page: number) => void; +} + +export const AssetsPagination = ({ + currentPage, + maxPage, + dropdownOptions, + itemsPerPage, + setItemsPerPage, + onChangePage, +}: PaginationProps) => { + const handleChangePage = (pageIndex: number) => { + if (pageIndex < 0) { + pageIndex = 0; + } else if (pageIndex >= maxPage) { + pageIndex = maxPage - 1; + } + if (pageIndex !== currentPage) { + onChangePage(pageIndex); + } + }; + + return ( + + + + + Page {currentPage + 1} of {maxPage} + + + + | Go to page: + + { + handleChangePage(Number(text)); + }} + /> + + + + + + + handleChangePage(0)}> + + + + + + handleChangePage(currentPage - 1)}> + + + + + + + + + + + {maxPage} + + + + + + + handleChangePage(currentPage + 1)}> + + + + + + handleChangePage(maxPage - 1)}> + + + + + + + + ); +}; + +// FIXME: remove StyleSheet.create +// eslint-disable-next-line no-restricted-syntax +const styles = StyleSheet.create({ + container: { + flexDirection: "row", + justifyContent: "space-around", + width: "100%", + paddingHorizontal: layout.spacing_x2, + }, + section: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + }, + grayText: { + ...fontSemibold14, + color: neutral77, + paddingRight: layout.spacing_x1, + lineHeight: 14, + }, +}); diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx new file mode 100644 index 0000000000..141b189f1f --- /dev/null +++ b/packages/components/FilePreview/SelectedFilesPreview.tsx @@ -0,0 +1,65 @@ +import React, { useState } from "react"; +import { View } from "react-native"; + +import { useIsMobile } from "../../hooks/useIsMobile"; +import { neutral33, neutral55 } from "../../utils/style/colors"; +import { fontSemibold20 } from "../../utils/style/fonts"; +import { AssetsPagination } from "../AssetsPagination"; +import { BrandText } from "../BrandText"; +import { Box } from "../boxes/Box"; +import { SpacerColumn } from "../spacer"; + +export const SelectedFilesPreview: React.FC<{ + assets?: string[]; +}> = ({ assets }) => { + const isMobile = useIsMobile(); + const [itemsPerPage, setItemsPerPage] = useState(50); + const [pageIndex, setPageIndex] = useState(0); + const total = assets?.length || 28; + if (isMobile) { + return null; + } + const maxPage = Math.max(Math.ceil(total / itemsPerPage), 1); + return ( + + + + + Select assets to preview + + + + + + + + + ); +}; diff --git a/packages/components/inputs/TextInputCustom.tsx b/packages/components/inputs/TextInputCustom.tsx index 122356a607..e5ae671ca3 100644 --- a/packages/components/inputs/TextInputCustom.tsx +++ b/packages/components/inputs/TextInputCustom.tsx @@ -72,6 +72,7 @@ export interface TextInputCustomProps rules?: Omit; defaultValue?: PathValue>; subtitle?: React.ReactElement; + sublabel?: React.ReactElement; hideLabel?: boolean; errorStyle?: ViewStyle; valueModifier?: (value: string) => string; @@ -141,6 +142,7 @@ export const TextInputCustom = ({ defaultValue, rules, subtitle, + sublabel, labelStyle, iconSVG, onPressChildren, @@ -250,6 +252,7 @@ export const TextInputCustom = ({ {subtitle} + {sublabel && <>{sublabel}} )} diff --git a/packages/components/navigation/Navigator.tsx b/packages/components/navigation/Navigator.tsx index 2931eeb0ec..11689a4484 100644 --- a/packages/components/navigation/Navigator.tsx +++ b/packages/components/navigation/Navigator.tsx @@ -15,6 +15,7 @@ import { GuardiansScreen } from "../../screens/Guardians/GuardiansScreen"; import { HashtagFeedScreen } from "../../screens/HashtagFeed/HashtagFeedScreen"; import { HomeScreen } from "../../screens/Home/HomeScreen"; import { LaunchpadApplyScreen } from "../../screens/Launchpad/LaunchpadApplyScreen"; +import { LaunchpadCreateScreen } from "../../screens/Launchpad/LaunchpadCreateScreen"; import { LaunchpadScreen } from "../../screens/Launchpad/LaunchpadScreen"; import { MintCollectionScreen } from "../../screens/Launchpad/MintCollectionScreen"; import { CollectionScreen } from "../../screens/Marketplace/CollectionScreen"; @@ -204,6 +205,14 @@ export const Navigator: React.FC = () => { title: screenTitle("Launchpad (Apply)"), }} /> + null, + title: screenTitle("Launchpad (Apply)"), + }} + /> Only the .web version is used + +export const SelectFileUploader: React.FC = ({ + label, + style, + isImageCover, + fileHeight = 256, +}) => { + const [files, setFiles] = useState([]); + + return ( + + {!!label && } + +
+ {files?.length ? ( + <> + { + setFiles([]); + // TODO: Delete file here + }} + style={{ top: 12, right: 12 }} + /> + + + ) : ( + + + + + + + + Select files + + + + + )} +
+ + + ); +}; diff --git a/packages/components/selectFileUploader/SelectFileUploader.type.ts b/packages/components/selectFileUploader/SelectFileUploader.type.ts new file mode 100644 index 0000000000..9c9b5cd5ee --- /dev/null +++ b/packages/components/selectFileUploader/SelectFileUploader.type.ts @@ -0,0 +1,17 @@ +import React, { Dispatch, SetStateAction } from "react"; +import { StyleProp, ViewStyle } from "react-native"; + +import { LocalFileData } from "../../utils/types/files"; + +export interface SelectFileUploaderProps { + onUpload: (files: LocalFileData[]) => void; + label?: string; + style?: StyleProp; + isImageCover?: boolean; + fileHeight?: number; + multiple?: boolean; + mimeTypes?: string[]; + children?: ({ onPress }: { onPress: () => void }) => React.ReactNode; + maxUpload?: number; + setIsLoading?: Dispatch>; +} diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx new file mode 100644 index 0000000000..293c808eee --- /dev/null +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -0,0 +1,239 @@ +import React, { FC, SyntheticEvent, useRef, useState } from "react"; +import { TouchableOpacity, View } from "react-native"; + +import { SelectFileUploaderProps } from "./SelectFileUploader.type"; +import { formatFile } from "./formatFile"; +import addSVG from "../../../assets/icons/add-circle.svg"; +import { useFeedbacks } from "../../context/FeedbacksProvider"; +import { + gradientColorBlue, + gradientColorDarkerBlue, + gradientColorTurquoise, + neutral17, + primaryColor, + withAlpha, +} from "../../utils/style/colors"; +import { fontSemibold14 } from "../../utils/style/fonts"; +import { layout } from "../../utils/style/layout"; +import { BrandText } from "../BrandText"; +import { DeleteButton } from "../FilePreview/DeleteButton"; +import { SVGorImageIcon } from "../SVG/SVGorImageIcon"; +import { Box } from "../boxes/Box"; +import { Label } from "../inputs/TextInputCustom"; + +export const SelectFileUploader: FC = ({ + label, + style, + onUpload, + // multiple is not used at true for now, needs to refactor in parents + multiple, + mimeTypes, + children, + maxUpload, + isImageCover, + fileHeight = 256, + setIsLoading, +}) => { + const { setToastError } = useFeedbacks(); + const hiddenFileInput = useRef(null); + const [file, setFile] = useState(""); + + const handleFiles = async (files: File[]) => { + const _files = multiple ? files : [files[0]]; + let supportedFiles = [...files].filter( + (file) => mimeTypes?.includes(file.type), + ); + + if (maxUpload && supportedFiles.length) { + supportedFiles = supportedFiles.slice(0, maxUpload); + } + + if (supportedFiles.length === 0) { + setToastError({ + title: "Unsupported file type.", + message: "Sorry we couldn't upload file.", + }); + return; + } else if (multiple && supportedFiles.length !== _files.length) { + setToastError({ + title: "Unsupported file type.", + message: "Sorry we couldn't upload some files at the moment.", + }); + } + if (!multiple) { + setFile(URL.createObjectURL(_files[0])); + } + + const formattedFiles = await Promise.all( + supportedFiles.map(async (file) => await formatFile(file)), + ); + + onUpload(formattedFiles); + }; + + const handleChange = async (event: SyntheticEvent) => { + setIsLoading?.(true); + const targetEvent = event.target as HTMLInputElement; + + if (targetEvent.files && targetEvent.files[0]) { + await handleFiles(targetEvent?.files as unknown as File[]); + } + setIsLoading?.(false); + }; + + const handleClick = () => { + hiddenFileInput?.current?.click?.(); + }; + + const dropHandler = async (ev: any) => { + setIsLoading?.(true); + ev.preventDefault(); + if (ev.dataTransfer.items) { + const files = [...ev.dataTransfer.items] + .filter((item: any) => item.kind === "file") + .map((item: any) => item.getAsFile()); + await handleFiles(files); + } else { + await handleFiles(ev.dataTransfer.files); + } + setIsLoading?.(false); + }; + + const dragOverHandler = (ev: SyntheticEvent) => { + ev.preventDefault(); + }; + + const InputComponent = ( + + ); + + if (children) { + return ( + <> + {children({ onPress: handleClick })} + {InputComponent} + + ); + } + + return ( + <> + + {!!label && } + +
+ {file ? ( + <> + { + setFile(""); + onUpload([]); + }} + style={{ top: 12, right: 12 }} + /> + Uploaded file + + ) : ( + + + + + + {/* */} + + + + Select files + + + + + + )} +
+ + + {InputComponent} + + ); +}; diff --git a/packages/components/selectFileUploader/formatFile.ts b/packages/components/selectFileUploader/formatFile.ts new file mode 100644 index 0000000000..449bff02fb --- /dev/null +++ b/packages/components/selectFileUploader/formatFile.ts @@ -0,0 +1,34 @@ +import { + AUDIO_MIME_TYPES, + IMAGE_MIME_TYPES, + VIDEO_MIME_TYPES, +} from "./../../utils/mime"; +import { getAudioData } from "../../utils/audio"; +import { FileType, LocalFileData } from "../../utils/types/files"; +import { getVideoData } from "../../utils/video"; + +export const formatFile = async (file: File): Promise => { + let fileType: FileType = "file"; + let audioMetadata; + let videoMetadata; + + if (AUDIO_MIME_TYPES.includes(file.type)) { + fileType = "audio"; + audioMetadata = await getAudioData(file); + } else if (VIDEO_MIME_TYPES.includes(file.type)) { + fileType = "video"; + videoMetadata = await getVideoData(file); + } else if (IMAGE_MIME_TYPES.includes(file.type)) { + fileType = "image"; + } + return { + file, + fileName: file.name, + url: file.path || URL.createObjectURL(file), + mimeType: file.type, + size: file.size, + fileType, + audioMetadata, + videoMetadata, + }; +}; diff --git a/packages/components/selectFileUploader/index.ts b/packages/components/selectFileUploader/index.ts new file mode 100644 index 0000000000..06a521bec6 --- /dev/null +++ b/packages/components/selectFileUploader/index.ts @@ -0,0 +1 @@ +export * from "./SelectFileUploader"; diff --git a/packages/screens/Launchpad/CreateCollection.type.ts b/packages/screens/Launchpad/CreateCollection.type.ts new file mode 100644 index 0000000000..d9f2263ca9 --- /dev/null +++ b/packages/screens/Launchpad/CreateCollection.type.ts @@ -0,0 +1,36 @@ +export interface NewCollectionFormValues { + nftApiKey?: string; +} + +export interface NewCollectionFormForEistingBaseUrlValues { + baseTokenUri?: string; + coverImageUrl?: string; +} + +export interface NewCollectionDetailsFormValues { + name?: string; + description?: string; + symbol?: string; + externalLink?: string; + websiteLink?: string; + twitterProfileUrl?: string; + twitterFollowers: string; + discordName?: string; + email?: string; +} + +export interface ExistingWhitelistDetailsFormValues { + whitelistAddress: string; +} +export interface NewWhitelistDetailsFormValues { + unitPrice: string; + memberLimit: string; + perAddresaLimit: string; + startTime: string; + endTime: string; +} + +export interface NewConfigureRoyaltyDetailsFormValues { + PaymentAddress: string; + SharePercentage: string; +} diff --git a/packages/screens/Launchpad/LaunchpadApplyScreen.tsx b/packages/screens/Launchpad/LaunchpadApplyScreen.tsx index 07ebc946a1..6a445b40fc 100644 --- a/packages/screens/Launchpad/LaunchpadApplyScreen.tsx +++ b/packages/screens/Launchpad/LaunchpadApplyScreen.tsx @@ -7,6 +7,7 @@ import { LaunchpadButtonProps, } from "./components/LaunchpadButton"; import { BrandText } from "../../components/BrandText"; +import { OmniLink } from "../../components/OmniLink"; import { ScreenContainer } from "../../components/ScreenContainer"; import { SpacerColumn, SpacerRow } from "../../components/spacer"; import { ScreenFC } from "../../utils/navigation"; @@ -23,7 +24,7 @@ const BUTTONS: LaunchpadButtonProps[] = [ title: "Create", description: "Upload your assets, enter collection metadata and deploy your collection.", - buttonTitle: "Coming soon", + buttonTitle: "Open", }, { title: "My Collections", @@ -55,7 +56,9 @@ export const LaunchpadApplyScreen: ScreenFC<"LaunchpadApply"> = () => { url="https://airtable.com/shr1kU7kXW0267gNV" /> - + + + diff --git a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx new file mode 100644 index 0000000000..e419d673d9 --- /dev/null +++ b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx @@ -0,0 +1,149 @@ +import React, { useState } from "react"; +import { StyleSheet, View } from "react-native"; + +import { ConfigureRoyaltyDetails } from "./components/ ConfigureRoyaltyDetails"; +import { Assets } from "./components/Assets"; +import { CollectionDetails } from "./components/CollectionDetails"; +import { ExistingWhitelist } from "./components/ExistingWhitelist"; +import { NewWhitelist } from "./components/NewWhitelist"; +import { Uri } from "./components/Uri"; +import { BrandText } from "../../components/BrandText"; +import { ScreenContainer } from "../../components/ScreenContainer"; +import { PrimaryButton } from "../../components/buttons/PrimaryButton"; +import { SpacerColumn } from "../../components/spacer"; +import { Tabs } from "../../components/tabs/Tabs"; +import { ScreenFC } from "../../utils/navigation"; +import { neutral77 } from "../../utils/style/colors"; +import { fontSemibold14, fontSemibold28 } from "../../utils/style/fonts"; +import { layout } from "../../utils/style/layout"; + +const CreateCollectionTabItems = { + assets: { + name: "Upload assets & metadata", + }, + uri: { + name: "Use an existing base URI", + }, +}; + +const CreateWhitelistTabItems = { + nowhitelist: { + name: "No whitelist", + }, + existinghitelist: { + name: "Existing whitelist", + }, + newhitelist: { + name: "New whitelist", + }, +}; + +const CreateRoyaltyTabItems = { + noroyalty: { + name: "No royalty", + }, + configureroyaltydetails: { + name: "Configure royalty details", + }, +}; + +export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { + const [selectedTab, setSelectedTab] = + useState("assets"); + + const [selectedWhitelistTab, setSelectedWhitelistTab] = + useState("nowhitelist"); + + const [selectedRoyaltyTab, setSelectedRoyaltyTab] = + useState("noroyalty"); + return ( + + + + Create Collection + + + Make sure you check out documentation on how to create your collection + + + + + {selectedTab === "assets" && } + {selectedTab === "uri" && } + + + + + {selectedWhitelistTab === "existinghitelist" && } + {selectedWhitelistTab === "newhitelist" && } + + + + {selectedRoyaltyTab === "configureroyaltydetails" && ( + + )} + + + + + + + + + ); +}; + +// FIXME: remove StyleSheet.create +// eslint-disable-next-line no-restricted-syntax +const styles = StyleSheet.create({ + descriptionText: StyleSheet.flatten([ + fontSemibold14, + { + color: neutral77, + }, + ]), +}); diff --git a/packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx b/packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx new file mode 100644 index 0000000000..48e7443647 --- /dev/null +++ b/packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx @@ -0,0 +1,94 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { StyleSheet, View } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SpacerColumn } from "../../../components/spacer"; +import { + neutral00, + neutral33, + neutral55, + neutral77, +} from "../../../utils/style/colors"; +import { + fontSemibold13, + fontSemibold14, + fontSemibold20, +} from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { NewConfigureRoyaltyDetailsFormValues } from "../CreateCollection.type"; + +export const ConfigureRoyaltyDetails: React.FC = () => { + const { control } = useForm({ + defaultValues: { + PaymentAddress: "", + SharePercentage: "", + }, + mode: "onBlur", + }); + + return ( + + + + Royalty Details + + + Information about royalty + + + + rules={{ required: true }} + label="Payment Address " + placeHolder="teritori123456789qwertyuiopasdfghjklzxcvbnm" + name="PaymentAddress" + sublabel={ + + + Address to receive royalties + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Share Percentage " + placeHolder="8%" + name="SharePercentage" + sublabel={ + + + Percentage of royalties to be paid + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + ); +}; + +// FIXME: remove StyleSheet.create +// eslint-disable-next-line no-restricted-syntax +const styles = StyleSheet.create({ + container: { + maxWidth: 416, + }, + labelStyle: { + maxWidth: 416, + }, +}); diff --git a/packages/screens/Launchpad/components/Assets.tsx b/packages/screens/Launchpad/components/Assets.tsx new file mode 100644 index 0000000000..b1cdb5365c --- /dev/null +++ b/packages/screens/Launchpad/components/Assets.tsx @@ -0,0 +1,148 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { + SafeAreaView, + StyleSheet, + View, + useWindowDimensions, +} from "react-native"; + +import { SelectedFilesPreview } from "../../../components/FilePreview/SelectedFilesPreview"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SelectFileUploader } from "../../../components/selectFileUploader"; +import { useIsMobile } from "../../../hooks/useIsMobile"; +import { IMAGE_MIME_TYPES } from "../../../utils/mime"; +import { ARTICLE_THUMBNAIL_IMAGE_HEIGHT } from "../../../utils/social-feed"; +import { neutral00, neutral33 } from "../../../utils/style/colors"; +import { layout } from "../../../utils/style/layout"; +import { NewCollectionFormValues } from "../CreateCollection.type"; + +export const Assets: React.FC = () => { + const isMobile = useIsMobile(); + const { width: currentWidth } = useWindowDimensions(); + + const { control } = useForm({ + defaultValues: { + nftApiKey: "", + }, + mode: "onBlur", + }); + //TODO: Not handled for now + // const { mutate: openGraphMutate, data: openGraphData } = useOpenGraph(); + const isLarge = currentWidth > 1400; + return ( + + + {/* ===== Left container */} + + + {/* Left container */} + + + rules={{ required: true }} + label="NFT.Storage API Key" + placeHolder="My Awesome Collection" + name="nftApiKey" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + {}} + mimeTypes={IMAGE_MIME_TYPES} + /> + {}} + mimeTypes={IMAGE_MIME_TYPES} + /> + + + + {isLarge && ( + + )} + + {/* ===== Right container */} + + + + + + ); +}; + +// eslint-disable-next-line no-restricted-syntax +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#000000", + flexDirection: "row", + zIndex: 999, + borderBottomWidth: 1, + borderColor: neutral33, + }, +}); diff --git a/packages/screens/Launchpad/components/CollectionDetails.tsx b/packages/screens/Launchpad/components/CollectionDetails.tsx new file mode 100644 index 0000000000..2ebd748b3d --- /dev/null +++ b/packages/screens/Launchpad/components/CollectionDetails.tsx @@ -0,0 +1,729 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { StyleSheet, View } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SelectFileUploader } from "../../../components/selectFileUploader"; +import { SpacerColumn } from "../../../components/spacer"; +import { IMAGE_MIME_TYPES } from "../../../utils/mime"; +import { ARTICLE_THUMBNAIL_IMAGE_HEIGHT } from "../../../utils/social-feed"; +import { + neutral00, + neutral33, + neutral55, + neutral77, +} from "../../../utils/style/colors"; +import { + fontSemibold13, + fontSemibold14, + fontSemibold20, +} from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { NewCollectionDetailsFormValues } from "../CreateCollection.type"; + +export const CollectionDetails: React.FC = () => { + const { control } = useForm({ + defaultValues: { + name: "", + description: "", + symbol: "", + externalLink: "", + websiteLink: "", + twitterProfileUrl: "", + twitterFollowers: "", + discordName: "", + email: "", + }, + mode: "onBlur", + }); + + return ( + + + Collection details + + + Information about your collection + + + + rules={{ required: true }} + label="Name" + placeHolder="My Awesome Collection" + name="name" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Description" + placeHolder="My Awesome Collection Description" + name="description" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Symbol" + placeHolder="Symbol" + name="symbol" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + {}} + mimeTypes={IMAGE_MIME_TYPES} + /> + + rules={{ required: false }} + label="What network is your project on? *" + placeHolder="Select Network" + name="externalLink" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: false }} + label="External Link" + placeHolder="https://collection..." + name="externalLink" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: false }} + label="Website Link" + placeHolder="https://website..." + name="websiteLink" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Twitter Profile *" + placeHolder="https://twitter..." + name="twitterProfileUrl" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="How many Twitter followers does your project have? " + placeHolder="10,000" + name="twitterFollowers" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Discord name of your main contact: " + placeHolder="nickname#0000" + name="discordName" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Main contact email address: " + placeHolder="contact@email.com" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + {/* + + onPressDropdownButton(dropdownRef)} + > + + {itemsPerPage} + + + + + + {isDropdownOpen(dropdownRef) && ( + + {dropdownOptions.map((item, index) => ( + { + setItemsPerPage(item); + closeOpenedDropdown(); + }} + key={index} + style={[ + { + flexDirection: "row", + alignItems: "center", + marginBottom: layout.spacing_x1_5, + }, + ]} + > + + {item} + + + ))} + + )} + */} + {/* + rules={{ required: true }} + label="Is your project a derivative project? " + placeHolder="contact@email.com" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> */} + + rules={{ required: true }} + label="Project type:" + placeHolder="Multiple answers allowed" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Describe your project: " + sublabel={ + + + 1. What's your concept? + + + 2. How is it different? + + + 3. What's your goal? + + + } + placeHolder="Describe here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Have you previously applied for the same project before? " + placeHolder="Select Option" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Describe your team:" + sublabel={ + + + 1. How many core members are you? ( Working on the project daily ) + + + 2. Who does what in your team? + + + 3. Past accomplishments or projects? + + + 4. How did you guys meet? + + + 5. Please add Linkedin links for all your members. + + + } + placeHolder="Describe here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Team links and attachments " + sublabel={ + + + Please provide any relevant links regarding your team. You can + also post a google drive link. + + + } + placeHolder="Type here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Do you have any partners on the project? " + sublabel={ + + + If yes, who are they? What do they do for you? + + + } + placeHolder="Type here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="What have you invested in this project so far?" + sublabel={ + + + 1. How much upfront capital has been invested? + + + 2. Have you raised outside funding for the project? + + + 3. How long has the project been worked on? + + + 4. Is there a proof of concept or demo to show? + + + } + placeHolder="Type here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: false }} + label="Investment links and attachments " + sublabel={ + + + Please provide any relevant links regarding your investment. You + can also post a google drive link. + + + } + placeHolder="Type here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Whitepaper and roadmap: " + sublabel={ + + + Please provide any relevant links regarding your whitepaper and + roadmap. You can also post a google drive link. + + + } + placeHolder="Type here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Please describe your artwork: " + sublabel={ + + + 1. Is it completely original? + + + 2. Who is the artist? + + + 3. How did your team meet the artist? + + + } + placeHolder="Type here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Is your collection ready for the mint? " + sublabel={ + + + 1. Is it completely original? + + + 2. Who is the artist? + + + 3. How did your team meet the artist? + + + } + placeHolder="Select Option" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="What is your expected collection supply?" + placeHolder="Type here..." + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="What is your expected public sale mint price? " + sublabel={ + + + Just type the number in your Network currency: + + + } + placeHolder="0" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="What is your expected mint date? " + placeHolder="dd.mm.yyyy | hh:mm PM" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="If selected for the launchpad, You will escrow mint proceeds for this time period: " + placeHolder="Select Option" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Are you dox or have you planned to dox?" + placeHolder="Select Option" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="If selected for the launchpad, you will comply with all the requirements below: " + sublabel={ + + + 1. One team member will KYC. + + + 2. Sign a formal legal partnership agreement. + + + 3. Escrow funds with Teritori following the mint. + + + } + placeHolder="dd.mm.yyyy | hh:mm PM" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="We'd love to offer TeritoriDAO members 10% of your whitelist supply if your project is willing. Please let us know how many whitelist spots you'd be willing to allocate our DAO: " + placeHolder="0" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + labelStyle={styles.labelStyle} + /> + + + + Minting details + + + Information about your minting settings + + + + rules={{ required: true }} + label="Number of Tokens" + placeHolder="0" + name="name" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Unit Price" + placeHolder="0" + name="name" + sublabel={ + + + Price of each token (min. 50 TORI) + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Per Address Limit" + placeHolder="0" + name="name" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Start Time" + placeHolder="--.--.---- --:--" + name="name" + sublabel={ + + + Start time for the minting + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + ); +}; + +// FIXME: remove StyleSheet.create +// eslint-disable-next-line no-restricted-syntax +const styles = StyleSheet.create({ + container: { + maxWidth: 416, + }, + labelStyle: { + maxWidth: 416, + }, +}); diff --git a/packages/screens/Launchpad/components/ExistingWhitelist.tsx b/packages/screens/Launchpad/components/ExistingWhitelist.tsx new file mode 100644 index 0000000000..87fde21327 --- /dev/null +++ b/packages/screens/Launchpad/components/ExistingWhitelist.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { StyleSheet, View } from "react-native"; + +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SpacerColumn } from "../../../components/spacer"; +import { neutral00 } from "../../../utils/style/colors"; +import { layout } from "../../../utils/style/layout"; +import { ExistingWhitelistDetailsFormValues } from "../CreateCollection.type"; + +export const ExistingWhitelist: React.FC = () => { + const { control } = useForm({ + defaultValues: { + whitelistAddress: "", + }, + mode: "onBlur", + }); + + return ( + + + + rules={{ required: true }} + label="Whitelist Address" + placeHolder="teritori123456789qwertyuiopasdfghjklzxcvbnm" + name="whitelistAddress" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + ); +}; + +// FIXME: remove StyleSheet.create +// eslint-disable-next-line no-restricted-syntax +const styles = StyleSheet.create({ + container: { + maxWidth: 416, + }, + labelStyle: { + maxWidth: 416, + }, +}); diff --git a/packages/screens/Launchpad/components/NewWhitelist.tsx b/packages/screens/Launchpad/components/NewWhitelist.tsx new file mode 100644 index 0000000000..1d94899814 --- /dev/null +++ b/packages/screens/Launchpad/components/NewWhitelist.tsx @@ -0,0 +1,180 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { StyleSheet, View } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SelectFileUploader } from "../../../components/selectFileUploader"; +import { SpacerColumn } from "../../../components/spacer"; +import { IMAGE_MIME_TYPES } from "../../../utils/mime"; +import { ARTICLE_THUMBNAIL_IMAGE_HEIGHT } from "../../../utils/social-feed"; +import { + neutral00, + neutral33, + neutral55, + neutral77, +} from "../../../utils/style/colors"; +import { + fontSemibold13, + fontSemibold14, + fontSemibold20, +} from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { NewWhitelistDetailsFormValues } from "../CreateCollection.type"; + +export const NewWhitelist: React.FC = () => { + const { control } = useForm({ + defaultValues: { + unitPrice: "", + memberLimit: "", + perAddresaLimit: "", + startTime: "", + endTime: "", + }, + mode: "onBlur", + }); + + return ( + + + + Whitelist Minting Details + + + Information about your minting settings + + + + rules={{ required: true }} + label="Unit Price " + placeHolder="0" + name="unitPrice" + sublabel={ + + + Token price for whitelisted addressess (min. 25 TORI) + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Member Limit " + placeHolder="0" + name="memberLimit" + sublabel={ + + + Maximum number of whitelisted addresses + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Per Address Limit" + placeHolder="0" + name="perAddresaLimit" + sublabel={ + + + Maximum number of tokens per whitelisted address + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Start Time " + placeHolder="0" + name="startTime" + sublabel={ + + + Start time for minting tokens to whitelisted addresses + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="End Time " + placeHolder="0" + name="endTime" + sublabel={ + + + End time for minting tokens to whitelisted addresses + + + } + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + + Whitelist File + + + TXT file that contains the whitelisted addresses + + + {}} + mimeTypes={IMAGE_MIME_TYPES} + /> + + ); +}; + +// FIXME: remove StyleSheet.create +// eslint-disable-next-line no-restricted-syntax +const styles = StyleSheet.create({ + container: { + maxWidth: 416, + }, + labelStyle: { + maxWidth: 416, + }, +}); diff --git a/packages/screens/Launchpad/components/Uri.tsx b/packages/screens/Launchpad/components/Uri.tsx new file mode 100644 index 0000000000..f59c2c7ef9 --- /dev/null +++ b/packages/screens/Launchpad/components/Uri.tsx @@ -0,0 +1,110 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { SafeAreaView, StyleSheet, View } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { useIsMobile } from "../../../hooks/useIsMobile"; +import { neutral00, neutral33, neutral77 } from "../../../utils/style/colors"; +import { fontSemibold14 } from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { + NewCollectionDetailsFormValues, + NewCollectionFormForEistingBaseUrlValues, +} from "../CreateCollection.type"; + +export const Uri: React.FC = () => { + const { control } = useForm< + NewCollectionFormForEistingBaseUrlValues | NewCollectionDetailsFormValues + >({ + defaultValues: { + baseTokenUri: "", + coverImageUrl: "", + name: "", + description: "", + symbol: "", + externalLink: "", + websiteLink: "", + twitterProfileUrl: "", + twitterFollowers: "", + discordName: "", + email: "", + }, + mode: "onBlur", + }); + const isMobile = useIsMobile(); + + return ( + + + + + Though Teritori's tr721 contract allows for off-chain metadata + storage, it is recommended to use a decentralized storage solution, + such as IPFS. You may head over to NFT.Storage and upload your + assets & metadata manually to get a base URI for your collection. + + + + + rules={{ required: true }} + label="Base Token URI" + placeHolder="ipfs://" + name="baseTokenUri" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Cover Image URL" + placeHolder="ipfs://" + name="coverImageUrl" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + + + + ); +}; + +// eslint-disable-next-line no-restricted-syntax +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#000000", + flexDirection: "row", + justifyContent: "center", + zIndex: 999, + }, +}); diff --git a/packages/utils/navigation.ts b/packages/utils/navigation.ts index 0b7a54f20a..d83d893bd5 100644 --- a/packages/utils/navigation.ts +++ b/packages/utils/navigation.ts @@ -27,6 +27,8 @@ export type RootStackParamList = { Launchpad: undefined; LaunchpadApply: undefined; + LaunchpadCreate: undefined; + MintCollection: { id: string }; TNSHome: { modal: string; name?: string } | undefined; @@ -120,6 +122,8 @@ const navConfig: { // ==== Launchpad Launchpad: "launchpad", LaunchpadApply: "launchpad/apply", + LaunchpadCreate: "launchpad/create", + // Mint NFT collection MintCollection: "collection/:id/mint", // ==== Teritori Name Service From 22d3c7bf63f183e106fa5107901f918a098d1ae2 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Fri, 5 Jan 2024 16:20:21 +0530 Subject: [PATCH 02/28] partial commit: new figma design partially updated --- .../FilePreview/SelectedFilesPreview.tsx | 102 ++- packages/components/SelectionDropdown.tsx | 152 ++++ .../modals/collection/MetadataUpdateModal.tsx | 152 ++++ .../selectFileUploader/SelectFileUploader.tsx | 9 +- .../SelectFileUploader.type.ts | 1 + .../SelectFileUploader.web.tsx | 9 +- .../Launchpad/CreateCollection.type.ts | 36 +- .../Launchpad/LaunchpadCreateScreen.tsx | 295 ++++--- .../components/ ConfigureRoyaltyDetails.tsx | 23 +- .../components/{Assets.tsx => AssetsTab.tsx} | 101 ++- .../components/CollectionDetails.tsx | 729 ------------------ .../components/ExistingWhitelist.tsx | 19 +- .../components/LaunchpadAdditional.tsx | 164 ++++ .../components/LaunchpadAssetsandMetadata.tsx | 77 ++ .../Launchpad/components/LaunchpadBasic.tsx | 141 ++++ .../Launchpad/components/LaunchpadDetails.tsx | 171 ++++ .../Launchpad/components/LaunchpadMinting.tsx | 163 ++++ .../components/LaunchpadTeamandCondition.tsx | 194 +++++ .../screens/Launchpad/components/NavBar.tsx | 73 ++ .../Launchpad/components/NewWhitelist.tsx | 26 +- .../components/{Uri.tsx => UriTab.tsx} | 64 +- 21 files changed, 1668 insertions(+), 1033 deletions(-) create mode 100644 packages/components/SelectionDropdown.tsx create mode 100644 packages/components/modals/collection/MetadataUpdateModal.tsx rename packages/screens/Launchpad/components/{Assets.tsx => AssetsTab.tsx} (64%) delete mode 100644 packages/screens/Launchpad/components/CollectionDetails.tsx create mode 100644 packages/screens/Launchpad/components/LaunchpadAdditional.tsx create mode 100644 packages/screens/Launchpad/components/LaunchpadAssetsandMetadata.tsx create mode 100644 packages/screens/Launchpad/components/LaunchpadBasic.tsx create mode 100644 packages/screens/Launchpad/components/LaunchpadDetails.tsx create mode 100644 packages/screens/Launchpad/components/LaunchpadMinting.tsx create mode 100644 packages/screens/Launchpad/components/LaunchpadTeamandCondition.tsx create mode 100644 packages/screens/Launchpad/components/NavBar.tsx rename packages/screens/Launchpad/components/{Uri.tsx => UriTab.tsx} (57%) diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx index 141b189f1f..e36c4ada4e 100644 --- a/packages/components/FilePreview/SelectedFilesPreview.tsx +++ b/packages/components/FilePreview/SelectedFilesPreview.tsx @@ -1,25 +1,25 @@ import React, { useState } from "react"; -import { View } from "react-native"; +import { TouchableOpacity, View } from "react-native"; -import { useIsMobile } from "../../hooks/useIsMobile"; -import { neutral33, neutral55 } from "../../utils/style/colors"; -import { fontSemibold20 } from "../../utils/style/fonts"; +import { neutral33, neutral55, secondaryColor } from "../../utils/style/colors"; +import { fontSemibold13, fontSemibold20 } from "../../utils/style/fonts"; +import { LocalFileData } from "../../utils/types/files"; import { AssetsPagination } from "../AssetsPagination"; import { BrandText } from "../BrandText"; import { Box } from "../boxes/Box"; +import { PrimaryBox } from "../boxes/PrimaryBox"; import { SpacerColumn } from "../spacer"; export const SelectedFilesPreview: React.FC<{ - assets?: string[]; -}> = ({ assets }) => { - const isMobile = useIsMobile(); + assets: LocalFileData[]; + onSelect: (item: LocalFileData) => void; +}> = ({ assets, onSelect }) => { const [itemsPerPage, setItemsPerPage] = useState(50); const [pageIndex, setPageIndex] = useState(0); const total = assets?.length || 28; - if (isMobile) { - return null; - } + const maxPage = Math.max(Math.ceil(total / itemsPerPage), 1); + return ( - - - Select assets to preview - - + {assets.length > 0 ? ( + <> + + {assets.map((item, index) => ( + { + onSelect(item); + }} + > + + Uploaded file + + + + {index + 1} + + + + ))} + + + ) : ( + + + Select assets to preview + + + )} void; + dropdownOptions: string[]; + placeHolder?: string; + setItem: (item: string) => void; + item?: string; + label?: string; +} + +export const SelectionDropdown = ({ + style, + onDropdownClosed, + dropdownOptions, + placeHolder, + item, + label, + setItem, +}: SelectionDropdownProps) => { + const { onPressDropdownButton, isDropdownOpen, closeOpenedDropdown } = + useDropdowns(); + const dropdownRef = useRef(null); + + const isDropdownOpened = isDropdownOpen(dropdownRef); + + useEffect(() => { + if (!isDropdownOpened) { + onDropdownClosed?.(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isDropdownOpened]); + + return ( + + + {label} + + + + onPressDropdownButton(dropdownRef)} + > + + {item ? item : placeHolder} + + + + + + {isDropdownOpen(dropdownRef) && ( + + {dropdownOptions.map((item, index) => ( + { + closeOpenedDropdown(); + setItem(item); + }} + key={index} + style={[ + { + flexDirection: "row", + alignItems: "center", + marginBottom: layout.spacing_x1_5, + }, + ]} + > + + {item} + + + ))} + + )} + + ); +}; diff --git a/packages/components/modals/collection/MetadataUpdateModal.tsx b/packages/components/modals/collection/MetadataUpdateModal.tsx new file mode 100644 index 0000000000..9005cdfe28 --- /dev/null +++ b/packages/components/modals/collection/MetadataUpdateModal.tsx @@ -0,0 +1,152 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { View } from "react-native"; + +import { NewMetadataDetailsFormValues } from "../../../screens/Launchpad/CreateCollection.type"; +import { neutral77, secondaryColor } from "../../../utils/style/colors"; +import { fontSemibold16, fontSemibold20 } from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { LocalFileData } from "../../../utils/types/files"; +import { BrandText } from "../../BrandText"; +import { Box } from "../../boxes/Box"; +import { PrimaryButton } from "../../buttons/PrimaryButton"; +import { TextInputCustom } from "../../inputs/TextInputCustom"; +import { Separator } from "../../separators/Separator"; +import ModalBase from "../ModalBase"; + +export const MetadataUpdateModal: React.FC<{ + onClose: () => void; + isVisible: boolean; + item: LocalFileData; +}> = ({ onClose, isVisible, item }) => { + const { control } = useForm({ + defaultValues: { + name: "", + description: "", + externalURL: "", + youtubeURL: "", + attributes: "", + }, + mode: "onBlur", + }); + + return ( + + + Uploaded file + + + + Update Metadata + + + Asset filename: {item?.fileName} + + + + } + hideMainSeparator + childrenBottom={ + + + + + + + } + > + + + + + name="name" + label="Name" + control={control} + placeHolder="Token name" + containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} + variant="labelOutside" + /> + + name="description" + label="Description" + control={control} + placeHolder="Token description" + containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} + variant="labelOutside" + /> + + name="externalURL" + label="External URL" + control={control} + placeHolder="https://" + containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} + variant="labelOutside" + /> + + name="youtubeURL" + label="COMMENT ?" + control={control} + placeHolder="https://" + containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} + variant="labelOutside" + /> + + name="attributes" + label="Attributes" + control={control} + placeHolder="Enter trait types and values" + containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} + variant="labelOutside" + /> + + + ); +}; diff --git a/packages/components/selectFileUploader/SelectFileUploader.tsx b/packages/components/selectFileUploader/SelectFileUploader.tsx index 46956a2288..8a2e350e0b 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.tsx @@ -26,6 +26,7 @@ export const SelectFileUploader: React.FC = ({ style, isImageCover, fileHeight = 256, + containerHeight = 80, }) => { const [files, setFiles] = useState([]); @@ -40,7 +41,7 @@ export const SelectFileUploader: React.FC = ({ flexDirection: "row", alignItems: "center", justifyContent: "center", - height: files?.length ? fileHeight : 80, + height: files?.length ? fileHeight : containerHeight, borderRadius: 12, }} > @@ -78,7 +79,7 @@ export const SelectFileUploader: React.FC = ({ style={{ flex: 1, width: "100%", - height: files?.length ? fileHeight : 80, + height: files?.length ? fileHeight : containerHeight, alignItems: "center", padding: layout.spacing_x2_5, borderRadius: 12, @@ -96,8 +97,8 @@ export const SelectFileUploader: React.FC = ({ > void }) => React.ReactNode; maxUpload?: number; setIsLoading?: Dispatch>; + containerHeight?: number; } diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index 293c808eee..981d4a89d8 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -32,6 +32,7 @@ export const SelectFileUploader: FC = ({ maxUpload, isImageCover, fileHeight = 256, + containerHeight = 80, setIsLoading, }) => { const { setToastError } = useFeedbacks(); @@ -137,7 +138,7 @@ export const SelectFileUploader: FC = ({ flexDirection: "row", alignItems: "center", justifyContent: "center", - height: file ? fileHeight : 80, + height: file ? fileHeight : containerHeight, borderRadius: 12, }} > @@ -177,7 +178,7 @@ export const SelectFileUploader: FC = ({ style={{ flex: 1, width: "100%", - height: file ? fileHeight : 80, + height: file ? fileHeight : containerHeight, alignItems: "center", padding: layout.spacing_x2_5, borderRadius: 12, @@ -195,8 +196,8 @@ export const SelectFileUploader: FC = ({ > { + switch (step) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + case 5: + return ; + case 6: + return ; + default: + return <>; + } }; export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { - const [selectedTab, setSelectedTab] = - useState("assets"); + const navigation = useAppNavigation(); - const [selectedWhitelistTab, setSelectedWhitelistTab] = - useState("nowhitelist"); + const [selectedStep, setSelectedStep] = useState(1); + const [isLoading, setLoading] = useState(false); - const [selectedRoyaltyTab, setSelectedRoyaltyTab] = - useState("noroyalty"); + const onSubmit = () => { + setLoading(true); + setTimeout(() => { + setLoading(false); + }, 1000); + }; + const stepOptions = [ + { key: 1, title: "Basic" }, + { key: 2, title: "Details" }, + { key: 3, title: "Team & Investments" }, + { key: 4, title: "Additional" }, + { key: 5, title: "Minting" }, + { key: 6, title: "Assets & Metadata" }, + ]; return ( - + } + forceNetworkFeatures={[NetworkFeature.SocialFeed]} + headerChildren={Launchpad Submission Form} + onBackPress={() => navigation.navigate("LaunchpadApply")} + > - - Create Collection - - - Make sure you check out documentation on how to create your collection - - - - - {selectedTab === "assets" && } - {selectedTab === "uri" && } + > + {stepOptions.map((item, index) => ( + { + setSelectedStep(item.key); + }} + key={index} + style={[ + { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + paddingHorizontal: layout.spacing_x2, + paddingVertical: layout.spacing_x1, + }, + ]} + > + + + {item.key} + + + + {item.title} + + {stepOptions.length !== index + 1 && ( + + )} + + ))} + - - - - {selectedWhitelistTab === "existinghitelist" && } - {selectedWhitelistTab === "newhitelist" && } + + + - + - - {selectedRoyaltyTab === "configureroyaltydetails" && ( - - )} - - - - - + > + {selectedStep !== 1 && ( + { + setSelectedStep(selectedStep - 1); + }} + /> + )} + { + if (stepOptions.length === selectedStep) { + onSubmit(); + } else { + setSelectedStep(selectedStep + 1); + } + }} + /> + ); }; - -// FIXME: remove StyleSheet.create -// eslint-disable-next-line no-restricted-syntax -const styles = StyleSheet.create({ - descriptionText: StyleSheet.flatten([ - fontSemibold14, - { - color: neutral77, - }, - ]), -}); diff --git a/packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx b/packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx index 48e7443647..b45d55aa58 100644 --- a/packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx +++ b/packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx @@ -1,16 +1,11 @@ import React from "react"; import { useForm } from "react-hook-form"; -import { StyleSheet, View } from "react-native"; +import { View } from "react-native"; import { BrandText } from "../../../components/BrandText"; import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { SpacerColumn } from "../../../components/spacer"; -import { - neutral00, - neutral33, - neutral55, - neutral77, -} from "../../../utils/style/colors"; +import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; import { fontSemibold13, fontSemibold14, @@ -29,8 +24,7 @@ export const ConfigureRoyaltyDetails: React.FC = () => { }); return ( - - + Royalty Details @@ -81,14 +75,3 @@ export const ConfigureRoyaltyDetails: React.FC = () => { ); }; - -// FIXME: remove StyleSheet.create -// eslint-disable-next-line no-restricted-syntax -const styles = StyleSheet.create({ - container: { - maxWidth: 416, - }, - labelStyle: { - maxWidth: 416, - }, -}); diff --git a/packages/screens/Launchpad/components/Assets.tsx b/packages/screens/Launchpad/components/AssetsTab.tsx similarity index 64% rename from packages/screens/Launchpad/components/Assets.tsx rename to packages/screens/Launchpad/components/AssetsTab.tsx index b1cdb5365c..23564cc0e8 100644 --- a/packages/screens/Launchpad/components/Assets.tsx +++ b/packages/screens/Launchpad/components/AssetsTab.tsx @@ -1,25 +1,23 @@ -import React from "react"; +import React, { useState } from "react"; import { useForm } from "react-hook-form"; -import { - SafeAreaView, - StyleSheet, - View, - useWindowDimensions, -} from "react-native"; +import { SafeAreaView, View } from "react-native"; import { SelectedFilesPreview } from "../../../components/FilePreview/SelectedFilesPreview"; import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { MetadataUpdateModal } from "../../../components/modals/collection/MetadataUpdateModal"; import { SelectFileUploader } from "../../../components/selectFileUploader"; -import { useIsMobile } from "../../../hooks/useIsMobile"; import { IMAGE_MIME_TYPES } from "../../../utils/mime"; -import { ARTICLE_THUMBNAIL_IMAGE_HEIGHT } from "../../../utils/social-feed"; import { neutral00, neutral33 } from "../../../utils/style/colors"; import { layout } from "../../../utils/style/layout"; +import { LocalFileData } from "../../../utils/types/files"; import { NewCollectionFormValues } from "../CreateCollection.type"; -export const Assets: React.FC = () => { - const isMobile = useIsMobile(); - const { width: currentWidth } = useWindowDimensions(); +export const AssetsTab: React.FC = () => { + const [files, setFiles] = useState([]); + const [selectedFile, setSelectedFile] = useState(); + + const [medataUpdateModalVisible, setMedataUpdateModalVisible] = + useState(false); const { control } = useForm({ defaultValues: { @@ -27,25 +25,21 @@ export const Assets: React.FC = () => { }, mode: "onBlur", }); - //TODO: Not handled for now - // const { mutate: openGraphMutate, data: openGraphData } = useOpenGraph(); - const isLarge = currentWidth > 1400; return ( {/* ===== Left container */} { }} > {/* Left container */} - + rules={{ required: true }} label="NFT.Storage API Key" @@ -84,40 +74,39 @@ export const Assets: React.FC = () => { /> {}} + multiple + onUpload={(files) => { + setFiles(files); + }} mimeTypes={IMAGE_MIME_TYPES} /> {}} mimeTypes={IMAGE_MIME_TYPES} /> - {isLarge && ( - - )} + + {/* ===== Right container */} { margin: layout.spacing_x2, }} > - + { + setMedataUpdateModalVisible(true); + setSelectedFile(item); + }} + /> + + {selectedFile && ( + setMedataUpdateModalVisible(false)} + isVisible={medataUpdateModalVisible} + item={selectedFile} + /> + )} ); }; - -// eslint-disable-next-line no-restricted-syntax -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "#000000", - flexDirection: "row", - zIndex: 999, - borderBottomWidth: 1, - borderColor: neutral33, - }, -}); diff --git a/packages/screens/Launchpad/components/CollectionDetails.tsx b/packages/screens/Launchpad/components/CollectionDetails.tsx deleted file mode 100644 index 2ebd748b3d..0000000000 --- a/packages/screens/Launchpad/components/CollectionDetails.tsx +++ /dev/null @@ -1,729 +0,0 @@ -import React from "react"; -import { useForm } from "react-hook-form"; -import { StyleSheet, View } from "react-native"; - -import { BrandText } from "../../../components/BrandText"; -import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; -import { SelectFileUploader } from "../../../components/selectFileUploader"; -import { SpacerColumn } from "../../../components/spacer"; -import { IMAGE_MIME_TYPES } from "../../../utils/mime"; -import { ARTICLE_THUMBNAIL_IMAGE_HEIGHT } from "../../../utils/social-feed"; -import { - neutral00, - neutral33, - neutral55, - neutral77, -} from "../../../utils/style/colors"; -import { - fontSemibold13, - fontSemibold14, - fontSemibold20, -} from "../../../utils/style/fonts"; -import { layout } from "../../../utils/style/layout"; -import { NewCollectionDetailsFormValues } from "../CreateCollection.type"; - -export const CollectionDetails: React.FC = () => { - const { control } = useForm({ - defaultValues: { - name: "", - description: "", - symbol: "", - externalLink: "", - websiteLink: "", - twitterProfileUrl: "", - twitterFollowers: "", - discordName: "", - email: "", - }, - mode: "onBlur", - }); - - return ( - - - Collection details - - - Information about your collection - - - - rules={{ required: true }} - label="Name" - placeHolder="My Awesome Collection" - name="name" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Description" - placeHolder="My Awesome Collection Description" - name="description" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Symbol" - placeHolder="Symbol" - name="symbol" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - {}} - mimeTypes={IMAGE_MIME_TYPES} - /> - - rules={{ required: false }} - label="What network is your project on? *" - placeHolder="Select Network" - name="externalLink" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: false }} - label="External Link" - placeHolder="https://collection..." - name="externalLink" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: false }} - label="Website Link" - placeHolder="https://website..." - name="websiteLink" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Twitter Profile *" - placeHolder="https://twitter..." - name="twitterProfileUrl" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="How many Twitter followers does your project have? " - placeHolder="10,000" - name="twitterFollowers" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Discord name of your main contact: " - placeHolder="nickname#0000" - name="discordName" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Main contact email address: " - placeHolder="contact@email.com" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - {/* - - onPressDropdownButton(dropdownRef)} - > - - {itemsPerPage} - - - - - - {isDropdownOpen(dropdownRef) && ( - - {dropdownOptions.map((item, index) => ( - { - setItemsPerPage(item); - closeOpenedDropdown(); - }} - key={index} - style={[ - { - flexDirection: "row", - alignItems: "center", - marginBottom: layout.spacing_x1_5, - }, - ]} - > - - {item} - - - ))} - - )} - */} - {/* - rules={{ required: true }} - label="Is your project a derivative project? " - placeHolder="contact@email.com" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> */} - - rules={{ required: true }} - label="Project type:" - placeHolder="Multiple answers allowed" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="Describe your project: " - sublabel={ - - - 1. What's your concept? - - - 2. How is it different? - - - 3. What's your goal? - - - } - placeHolder="Describe here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="Have you previously applied for the same project before? " - placeHolder="Select Option" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="Describe your team:" - sublabel={ - - - 1. How many core members are you? ( Working on the project daily ) - - - 2. Who does what in your team? - - - 3. Past accomplishments or projects? - - - 4. How did you guys meet? - - - 5. Please add Linkedin links for all your members. - - - } - placeHolder="Describe here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="Team links and attachments " - sublabel={ - - - Please provide any relevant links regarding your team. You can - also post a google drive link. - - - } - placeHolder="Type here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="Do you have any partners on the project? " - sublabel={ - - - If yes, who are they? What do they do for you? - - - } - placeHolder="Type here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="What have you invested in this project so far?" - sublabel={ - - - 1. How much upfront capital has been invested? - - - 2. Have you raised outside funding for the project? - - - 3. How long has the project been worked on? - - - 4. Is there a proof of concept or demo to show? - - - } - placeHolder="Type here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: false }} - label="Investment links and attachments " - sublabel={ - - - Please provide any relevant links regarding your investment. You - can also post a google drive link. - - - } - placeHolder="Type here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="Whitepaper and roadmap: " - sublabel={ - - - Please provide any relevant links regarding your whitepaper and - roadmap. You can also post a google drive link. - - - } - placeHolder="Type here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="Please describe your artwork: " - sublabel={ - - - 1. Is it completely original? - - - 2. Who is the artist? - - - 3. How did your team meet the artist? - - - } - placeHolder="Type here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="Is your collection ready for the mint? " - sublabel={ - - - 1. Is it completely original? - - - 2. Who is the artist? - - - 3. How did your team meet the artist? - - - } - placeHolder="Select Option" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="What is your expected collection supply?" - placeHolder="Type here..." - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="What is your expected public sale mint price? " - sublabel={ - - - Just type the number in your Network currency: - - - } - placeHolder="0" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - - rules={{ required: true }} - label="What is your expected mint date? " - placeHolder="dd.mm.yyyy | hh:mm PM" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="If selected for the launchpad, You will escrow mint proceeds for this time period: " - placeHolder="Select Option" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Are you dox or have you planned to dox?" - placeHolder="Select Option" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="If selected for the launchpad, you will comply with all the requirements below: " - sublabel={ - - - 1. One team member will KYC. - - - 2. Sign a formal legal partnership agreement. - - - 3. Escrow funds with Teritori following the mint. - - - } - placeHolder="dd.mm.yyyy | hh:mm PM" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="We'd love to offer TeritoriDAO members 10% of your whitelist supply if your project is willing. Please let us know how many whitelist spots you'd be willing to allocate our DAO: " - placeHolder="0" - name="email" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - labelStyle={styles.labelStyle} - /> - - - - Minting details - - - Information about your minting settings - - - - rules={{ required: true }} - label="Number of Tokens" - placeHolder="0" - name="name" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Unit Price" - placeHolder="0" - name="name" - sublabel={ - - - Price of each token (min. 50 TORI) - - - } - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Per Address Limit" - placeHolder="0" - name="name" - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - rules={{ required: true }} - label="Start Time" - placeHolder="--.--.---- --:--" - name="name" - sublabel={ - - - Start time for the minting - - - } - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} - /> - - ); -}; - -// FIXME: remove StyleSheet.create -// eslint-disable-next-line no-restricted-syntax -const styles = StyleSheet.create({ - container: { - maxWidth: 416, - }, - labelStyle: { - maxWidth: 416, - }, -}); diff --git a/packages/screens/Launchpad/components/ExistingWhitelist.tsx b/packages/screens/Launchpad/components/ExistingWhitelist.tsx index 87fde21327..140bf28665 100644 --- a/packages/screens/Launchpad/components/ExistingWhitelist.tsx +++ b/packages/screens/Launchpad/components/ExistingWhitelist.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useForm } from "react-hook-form"; -import { StyleSheet, View } from "react-native"; +import { View } from "react-native"; import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { SpacerColumn } from "../../../components/spacer"; @@ -17,7 +17,11 @@ export const ExistingWhitelist: React.FC = () => { }); return ( - + rules={{ required: true }} @@ -35,14 +39,3 @@ export const ExistingWhitelist: React.FC = () => { ); }; - -// FIXME: remove StyleSheet.create -// eslint-disable-next-line no-restricted-syntax -const styles = StyleSheet.create({ - container: { - maxWidth: 416, - }, - labelStyle: { - maxWidth: 416, - }, -}); diff --git a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx new file mode 100644 index 0000000000..96e1ae4501 --- /dev/null +++ b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx @@ -0,0 +1,164 @@ +import React, { useState } from "react"; +import { useForm } from "react-hook-form"; +import { View } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { SelectionDropdown } from "../../../components/SelectionDropdown"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SpacerColumn } from "../../../components/spacer"; +import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; +import { + fontSemibold13, + fontSemibold14, + fontSemibold20, +} from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { NewCollectionAdditionalFormValues } from "../CreateCollection.type"; + +export const LaunchpadAdditional: React.FC = () => { + const dropdownOptions = ["Yes", "No"]; + + const [item, setItem] = useState(""); + + const { control } = useForm({ + defaultValues: { + artwork: "", + collectionSupply: "", + mintPrice: "", + mintDate: "", + whitelistSpotPercentage: "", + }, + mode: "onBlur", + }); + + return ( + + + Additional Information + + + Fill the additional information + + + + rules={{ required: true }} + label="Please describe your artwork: " + sublabel={ + + + 1. Is it completely original? + + + 2. Who is the artist? + + + 3. How did your team meet the artist? + + + } + placeHolder="Describe here..." + name="artwork" + control={control} + variant="labelOutside" + multiline + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + + + rules={{ required: true }} + label="What is your expected collection supply?" + placeHolder="Type here..." + name="collectionSupply" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="What is your expected public sale mint price?" + sublabel={ + + + Just type the number in your Network currency: + + + } + placeHolder="0" + name="mintPrice" + control={control} + variant="labelOutside" + multiline + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="What is your expected mint date? " + placeHolder="dd.mm.yyyy | hh:mm PM" + name="mintDate" + control={control} + variant="labelOutside" + multiline + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + + + + + rules={{ required: true }} + label="We'd love to offer TeritoriDAO members 10% of your whitelist supply if your project is willing. Please let us know how many whitelist spots you'd be willing to allocate our DAO: " + placeHolder="0" + name="whitelistSpotPercentage" + control={control} + variant="labelOutside" + multiline + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + labelStyle={{ maxWidth: 416 }} + /> + + + ); +}; diff --git a/packages/screens/Launchpad/components/LaunchpadAssetsandMetadata.tsx b/packages/screens/Launchpad/components/LaunchpadAssetsandMetadata.tsx new file mode 100644 index 0000000000..e030332bbf --- /dev/null +++ b/packages/screens/Launchpad/components/LaunchpadAssetsandMetadata.tsx @@ -0,0 +1,77 @@ +import React, { useState } from "react"; +import { View } from "react-native"; + +import { AssetsTab } from "./AssetsTab"; +import { UriTab } from "./UriTab"; +import { BrandText } from "../../../components/BrandText"; +import { SpacerColumn } from "../../../components/spacer"; +import { Tabs } from "../../../components/tabs/Tabs"; +import { neutral77, primaryColor } from "../../../utils/style/colors"; +import { fontSemibold14, fontSemibold28 } from "../../../utils/style/fonts"; + +const AssetsandMetadataTabItems = { + assets: { + name: "Upload assets & metadata", + }, + uri: { + name: "Use an existing base URI", + }, +}; + +export const LaunchpadAssetsandMetadata: React.FC = () => { + const [selectedTab, setSelectedTab] = + useState("assets"); + + return ( + + + Assets & Metadata + + + + + Make sure you check out{" "} + + documentation + {" "} + on how to create your collection + + + + + + + {selectedTab === "assets" && } + {selectedTab === "uri" && } + + ); +}; diff --git a/packages/screens/Launchpad/components/LaunchpadBasic.tsx b/packages/screens/Launchpad/components/LaunchpadBasic.tsx new file mode 100644 index 0000000000..abe6f276a8 --- /dev/null +++ b/packages/screens/Launchpad/components/LaunchpadBasic.tsx @@ -0,0 +1,141 @@ +import React, { useState } from "react"; +import { useForm } from "react-hook-form"; +import { View } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { SelectionDropdown } from "../../../components/SelectionDropdown"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SelectFileUploader } from "../../../components/selectFileUploader"; +import { SpacerColumn } from "../../../components/spacer"; +import { IMAGE_MIME_TYPES } from "../../../utils/mime"; +import { ARTICLE_THUMBNAIL_IMAGE_HEIGHT } from "../../../utils/social-feed"; +import { + neutral00, + neutral77, + primaryColor, +} from "../../../utils/style/colors"; +import { fontSemibold14, fontSemibold28 } from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { NewCollectionBasicFormValues } from "../CreateCollection.type"; + +export const LaunchpadBasic: React.FC = () => { + const dropdownOptions = ["Yes", "No"]; + + const [item, setItem] = useState(""); + + const { control } = useForm({ + defaultValues: { + name: "", + description: "", + symbol: "", + externalLink: "", + }, + mode: "onBlur", + }); + + return ( + + + Create Collection + + + + + Make sure you check out{" "} + + documentation + {" "} + on how to create your collection + + + + + + rules={{ required: true }} + label="Name" + placeHolder="My Awesome Collection" + name="name" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Description" + placeHolder="My Awesome Collection Description" + name="description" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Symbol" + placeHolder="Symbol" + name="symbol" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + {}} + mimeTypes={IMAGE_MIME_TYPES} + /> + + rules={{ required: false }} + label="External Link" + placeHolder="https://collection..." + name="externalLink" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + + ); +}; diff --git a/packages/screens/Launchpad/components/LaunchpadDetails.tsx b/packages/screens/Launchpad/components/LaunchpadDetails.tsx new file mode 100644 index 0000000000..cc429afe27 --- /dev/null +++ b/packages/screens/Launchpad/components/LaunchpadDetails.tsx @@ -0,0 +1,171 @@ +import React, { useState } from "react"; +import { useForm } from "react-hook-form"; +import { View } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { SelectionDropdown } from "../../../components/SelectionDropdown"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SpacerColumn } from "../../../components/spacer"; +import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; +import { + fontSemibold13, + fontSemibold14, + fontSemibold20, +} from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { NewCollectionDetailsFormValues } from "../CreateCollection.type"; + +export const LaunchpadDetails: React.FC = () => { + const dropdownOptions = ["Yes", "No"]; + + const [item, setItem] = useState(""); + + const { control } = useForm({ + defaultValues: { + websiteLink: "", + twitterProfileUrl: "", + twitterFollowers: "", + discordName: "", + email: "", + projectDesciption: "", + }, + mode: "onBlur", + }); + + return ( + + + Collection details + + + Information about your collection + + + + + rules={{ required: false }} + label="Website Link" + placeHolder="https://website..." + name="websiteLink" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Twitter Profile *" + placeHolder="https://twitter..." + name="twitterProfileUrl" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="How many Twitter followers does your project have? " + placeHolder="10,000" + name="twitterFollowers" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Discord name of your main contact: " + placeHolder="nickname#0000" + name="discordName" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Main contact email address: " + placeHolder="contact@email.com" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + + + rules={{ required: true }} + label="Project type:" + placeHolder="Multiple answers allowed" + name="email" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Describe your project: " + sublabel={ + + + 1. What's your concept? + + + 2. How is it different? + + + 3. What's your goal? + + + } + placeHolder="Describe here..." + name="email" + control={control} + variant="labelOutside" + multiline + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + + + ); +}; diff --git a/packages/screens/Launchpad/components/LaunchpadMinting.tsx b/packages/screens/Launchpad/components/LaunchpadMinting.tsx new file mode 100644 index 0000000000..76918e7908 --- /dev/null +++ b/packages/screens/Launchpad/components/LaunchpadMinting.tsx @@ -0,0 +1,163 @@ +import React, { useState } from "react"; +import { useForm } from "react-hook-form"; +import { View } from "react-native"; + +import { ConfigureRoyaltyDetails } from "./ ConfigureRoyaltyDetails"; +import { ExistingWhitelist } from "./ExistingWhitelist"; +import { NavBar } from "./NavBar"; +import { NewWhitelist } from "./NewWhitelist"; +import { BrandText } from "../../../components/BrandText"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SpacerColumn } from "../../../components/spacer"; +import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; +import { + fontSemibold13, + fontSemibold14, + fontSemibold20, +} from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { NewCollectionMintFormValues } from "../CreateCollection.type"; + +const CreateWhitelistTabItems = { + nowhitelist: { + name: "No whitelist", + }, + existinghitelist: { + name: "Existing whitelist", + }, + newhitelist: { + name: "New whitelist", + }, +}; + +const CreateRoyaltyTabItems = { + noroyalty: { + name: "No royalty", + }, + configureroyaltydetails: { + name: "Configure royalty details", + }, +}; + +export const LaunchpadMinting: React.FC = () => { + const { control } = useForm({ + defaultValues: { + token: "", + unitPrice: "", + perAddressLimit: "", + startTime: "", + }, + mode: "onBlur", + }); + + const [selectedWhitelistTab, setSelectedWhitelistTab] = + useState("nowhitelist"); + + const [selectedRoyaltyTab, setSelectedRoyaltyTab] = + useState("noroyalty"); + + return ( + + + Minting details + + + Information about your minting settings + + + + + rules={{ required: true }} + label="Number of Tokens " + placeHolder="0" + name="token" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Unit Price" + placeHolder="0" + name="unitPrice" + control={control} + variant="labelOutside" + sublabel={ + + + Price of each token (min. 50 TORI) + + + } + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Per Address Limit " + placeHolder="0" + name="perAddressLimit" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + rules={{ required: true }} + label="Start Time " + placeHolder="--.--.---- --:--" + name="startTime" + control={control} + variant="labelOutside" + sublabel={ + + + Start time for the minting + + + } + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + {selectedWhitelistTab === "existinghitelist" && } + {selectedWhitelistTab === "newhitelist" && } + + + + {selectedRoyaltyTab === "configureroyaltydetails" && ( + + )} + + + ); +}; diff --git a/packages/screens/Launchpad/components/LaunchpadTeamandCondition.tsx b/packages/screens/Launchpad/components/LaunchpadTeamandCondition.tsx new file mode 100644 index 0000000000..dfe84ce879 --- /dev/null +++ b/packages/screens/Launchpad/components/LaunchpadTeamandCondition.tsx @@ -0,0 +1,194 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { View } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { SpacerColumn } from "../../../components/spacer"; +import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; +import { + fontSemibold13, + fontSemibold14, + fontSemibold20, +} from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { NewCollectionTeamandConditionFormValues } from "../CreateCollection.type"; + +export const LaunchpadTeamandCondition: React.FC = () => { + const { control } = useForm({ + defaultValues: { + teamDesciption: "", + teamLink: "", + partner: "", + investDesciption: "", + investLink: "", + roadmap: "", + }, + mode: "onBlur", + }); + + return ( + + + Team & Investments + + + Fill the information about the team and investors + + + + + rules={{ required: true }} + label="Describe your team: " + sublabel={ + + + 1. How many core members are you? ( Working on the project daily + + + 2. Who does what in your team? + + + 3. Past accomplishments or projects? + + + 4. How did you guys meet? + + + 5. Please add Linkedin links for all your members. + + + } + placeHolder="Describe here..." + name="teamDesciption" + control={control} + variant="labelOutside" + multiline + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: false }} + label="Team links and attachments " + sublabel={ + + + Please provide any relevant links regarding your team. You can + also post a google drive link. + + + } + placeHolder="Type here..." + name="teamDesciption" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Do you have any partners on the project? " + sublabel={ + + + If yes, who are they? What do they do for you? + + + } + placeHolder="Type here..." + name="partner" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="What have you invested in this project so far? " + sublabel={ + + + 1. How much upfront capital has been invested? + + + 2. Have you raised outside funding for the project? + + + 3. How long has the project been worked on? + + + 4. Is there a proof of concept or demo to show? + + + } + placeHolder="Type here..." + name="investDesciption" + control={control} + variant="labelOutside" + multiline + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: false }} + label="Investment links and attachments " + sublabel={ + + + Please provide any relevant links regarding your investment. You + can also post a google drive link. + + + } + placeHolder="Type here..." + name="investLink" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + rules={{ required: true }} + label="Whitepaper and roadmap: " + sublabel={ + + + Please provide any relevant links regarding your whitepaper and + roadmap. You can also post a google drive link. + + + } + placeHolder="Type here..." + name="roadmap" + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + + + ); +}; diff --git a/packages/screens/Launchpad/components/NavBar.tsx b/packages/screens/Launchpad/components/NavBar.tsx new file mode 100644 index 0000000000..0f132cf554 --- /dev/null +++ b/packages/screens/Launchpad/components/NavBar.tsx @@ -0,0 +1,73 @@ +import React from "react"; +import { View, TouchableOpacity } from "react-native"; + +import { BrandText } from "../../../components/BrandText"; +import { neutral33 } from "../../../utils/style/colors"; + +export interface NavDefinition { + name: string; +} + +export const NavBar = ({ + items, + onSelect, + selected, +}: { + items: T; + selected: keyof T; + onSelect: (key: keyof T) => void; +}) => { + return ( + + + {getKeys(items).map((key) => { + return ( + { + onSelect(key); + }} + style={{ + height: "100%", + borderRightColor: neutral33, + borderRightWidth: 1, + flex: 1, + }} + > + + + {items[key].name} + + + + ); + })} + + + ); +}; +const getKeys = Object.keys as (obj: T) => (keyof T)[]; diff --git a/packages/screens/Launchpad/components/NewWhitelist.tsx b/packages/screens/Launchpad/components/NewWhitelist.tsx index 1d94899814..a46edb37e3 100644 --- a/packages/screens/Launchpad/components/NewWhitelist.tsx +++ b/packages/screens/Launchpad/components/NewWhitelist.tsx @@ -1,19 +1,15 @@ import React from "react"; import { useForm } from "react-hook-form"; -import { StyleSheet, View } from "react-native"; +import { View } from "react-native"; import { BrandText } from "../../../components/BrandText"; import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { SelectFileUploader } from "../../../components/selectFileUploader"; +import { Separator } from "../../../components/separators/Separator"; import { SpacerColumn } from "../../../components/spacer"; import { IMAGE_MIME_TYPES } from "../../../utils/mime"; import { ARTICLE_THUMBNAIL_IMAGE_HEIGHT } from "../../../utils/social-feed"; -import { - neutral00, - neutral33, - neutral55, - neutral77, -} from "../../../utils/style/colors"; +import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; import { fontSemibold13, fontSemibold14, @@ -35,8 +31,7 @@ export const NewWhitelist: React.FC = () => { }); return ( - - + Whitelist Minting Details @@ -145,7 +140,7 @@ export const NewWhitelist: React.FC = () => { }} /> - + Whitelist File @@ -167,14 +162,3 @@ export const NewWhitelist: React.FC = () => { ); }; - -// FIXME: remove StyleSheet.create -// eslint-disable-next-line no-restricted-syntax -const styles = StyleSheet.create({ - container: { - maxWidth: 416, - }, - labelStyle: { - maxWidth: 416, - }, -}); diff --git a/packages/screens/Launchpad/components/Uri.tsx b/packages/screens/Launchpad/components/UriTab.tsx similarity index 57% rename from packages/screens/Launchpad/components/Uri.tsx rename to packages/screens/Launchpad/components/UriTab.tsx index f59c2c7ef9..0dce264eab 100644 --- a/packages/screens/Launchpad/components/Uri.tsx +++ b/packages/screens/Launchpad/components/UriTab.tsx @@ -1,42 +1,32 @@ import React from "react"; import { useForm } from "react-hook-form"; -import { SafeAreaView, StyleSheet, View } from "react-native"; +import { SafeAreaView, View } from "react-native"; import { BrandText } from "../../../components/BrandText"; import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; -import { useIsMobile } from "../../../hooks/useIsMobile"; -import { neutral00, neutral33, neutral77 } from "../../../utils/style/colors"; +import { SpacerColumn } from "../../../components/spacer"; +import { neutral00, neutral77 } from "../../../utils/style/colors"; import { fontSemibold14 } from "../../../utils/style/fonts"; import { layout } from "../../../utils/style/layout"; -import { - NewCollectionDetailsFormValues, - NewCollectionFormForEistingBaseUrlValues, -} from "../CreateCollection.type"; +import { NewCollectionFormForEistingBaseUrlValues } from "../CreateCollection.type"; -export const Uri: React.FC = () => { - const { control } = useForm< - NewCollectionFormForEistingBaseUrlValues | NewCollectionDetailsFormValues - >({ +export const UriTab: React.FC = () => { + const { control } = useForm({ defaultValues: { baseTokenUri: "", coverImageUrl: "", - name: "", - description: "", - symbol: "", - externalLink: "", - websiteLink: "", - twitterProfileUrl: "", - twitterFollowers: "", - discordName: "", - email: "", }, mode: "onBlur", }); - const isMobile = useIsMobile(); return ( - + { assets & metadata manually to get a base URI for your collection. - - + + + + rules={{ required: true }} label="Base Token URI" placeHolder="ipfs://" @@ -74,10 +59,7 @@ export const Uri: React.FC = () => { borderRadius: 12, }} /> - + rules={{ required: true }} label="Cover Image URL" placeHolder="ipfs://" @@ -91,20 +73,8 @@ export const Uri: React.FC = () => { }} /> - ); }; - -// eslint-disable-next-line no-restricted-syntax -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "#000000", - flexDirection: "row", - justifyContent: "center", - zIndex: 999, - }, -}); From e67a14796ec2dacaad307709a3e8380ff95658d6 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Fri, 5 Jan 2024 16:56:58 +0530 Subject: [PATCH 03/28] fix: PR comments fixed --- packages/components/AssetsPagination.tsx | 11 +++++++++-- packages/components/inputs/TextInputCustom.tsx | 2 +- .../selectFileUploader/SelectFileUploader.web.tsx | 11 +++-------- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/components/AssetsPagination.tsx b/packages/components/AssetsPagination.tsx index fb9f133ef2..290cd50bcd 100644 --- a/packages/components/AssetsPagination.tsx +++ b/packages/components/AssetsPagination.tsx @@ -63,7 +63,7 @@ export const AssetsPagination = ({ style={[ { flexDirection: "row", - paddingHorizontal: 12, + paddingHorizontal: layout.spacing_x1_5, backgroundColor: neutral17, width: 80, height: SEARCH_BAR_INPUT_HEIGHT, @@ -84,13 +84,15 @@ export const AssetsPagination = ({ { outlineStyle: "none" } as any, ]} onChangeText={(text) => { - handleChangePage(Number(text)); + handleChangePage(+text); }} /> + + handleChangePage(0)}> @@ -98,12 +100,15 @@ export const AssetsPagination = ({ + + handleChangePage(currentPage - 1)}> + @@ -142,7 +147,9 @@ export const AssetsPagination = ({ + + handleChangePage(maxPage - 1)}> diff --git a/packages/components/inputs/TextInputCustom.tsx b/packages/components/inputs/TextInputCustom.tsx index e5ae671ca3..677abd3287 100644 --- a/packages/components/inputs/TextInputCustom.tsx +++ b/packages/components/inputs/TextInputCustom.tsx @@ -252,7 +252,7 @@ export const TextInputCustom = ({ {subtitle} - {sublabel && <>{sublabel}} + {sublabel && sublabel} )} diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index 981d4a89d8..5105853400 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -41,9 +41,7 @@ export const SelectFileUploader: FC = ({ const handleFiles = async (files: File[]) => { const _files = multiple ? files : [files[0]]; - let supportedFiles = [...files].filter( - (file) => mimeTypes?.includes(file.type), - ); + let supportedFiles = files.filter((file) => mimeTypes?.includes(file.type)); if (maxUpload && supportedFiles.length) { supportedFiles = supportedFiles.slice(0, maxUpload); @@ -65,10 +63,7 @@ export const SelectFileUploader: FC = ({ setFile(URL.createObjectURL(_files[0])); } - const formattedFiles = await Promise.all( - supportedFiles.map(async (file) => await formatFile(file)), - ); - + const formattedFiles = await Promise.all(supportedFiles.map(formatFile)); onUpload(formattedFiles); }; @@ -90,7 +85,7 @@ export const SelectFileUploader: FC = ({ setIsLoading?.(true); ev.preventDefault(); if (ev.dataTransfer.items) { - const files = [...ev.dataTransfer.items] + const files = ev.dataTransfer.items .filter((item: any) => item.kind === "file") .map((item: any) => item.getAsFile()); await handleFiles(files); From 8067bef647ad4f58d7bdc0cbbe87992deb04f373 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Mon, 8 Jan 2024 18:59:40 +0530 Subject: [PATCH 04/28] partial commit: 80% Figma done --- assets/icons/files.svg | 6 + packages/components/AssetsPagination.tsx | 136 ++++++++----- .../FilePreview/SelectedFilesPreview.tsx | 180 ++++++++++++------ .../SelectFileUploader.web.tsx | 143 +++++++++----- .../Launchpad/LaunchpadCreateScreen.tsx | 20 +- 5 files changed, 328 insertions(+), 157 deletions(-) create mode 100644 assets/icons/files.svg diff --git a/assets/icons/files.svg b/assets/icons/files.svg new file mode 100644 index 0000000000..5bf9dcca81 --- /dev/null +++ b/assets/icons/files.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/components/AssetsPagination.tsx b/packages/components/AssetsPagination.tsx index 290cd50bcd..3940a67c23 100644 --- a/packages/components/AssetsPagination.tsx +++ b/packages/components/AssetsPagination.tsx @@ -1,11 +1,10 @@ import React from "react"; -import { StyleSheet, TextInput, TouchableOpacity, View } from "react-native"; +import { TextInput, TouchableOpacity, View } from "react-native"; import { BrandText } from "./BrandText"; import { SVG } from "./SVG"; import { SEARCH_BAR_INPUT_HEIGHT } from "./Search/SearchBarInput"; import { Box } from "./boxes/Box"; -import { LegacyTertiaryBox } from "./boxes/LegacyTertiaryBox"; import { TertiaryBox } from "./boxes/TertiaryBox"; import { SpacerRow } from "./spacer"; import chevronLeftDoubleSVG from "../../assets/icons/chevron-left-double.svg"; @@ -25,7 +24,6 @@ interface PaginationProps { currentPage: number; maxPage: number; itemsPerPage: number; - dropdownOptions: number[]; setItemsPerPage: (item: number) => void; onChangePage: (page: number) => void; } @@ -33,7 +31,6 @@ interface PaginationProps { export const AssetsPagination = ({ currentPage, maxPage, - dropdownOptions, itemsPerPage, setItemsPerPage, onChangePage, @@ -50,15 +47,50 @@ export const AssetsPagination = ({ }; return ( - + - - + + Page {currentPage + 1} of {maxPage} - - | Go to page: + + + | Go to page: + - + handleChangePage(0)}> - + - + handleChangePage(currentPage - 1)}> - + - + - + - {maxPage} + {currentPage + 1} @@ -143,42 +201,34 @@ export const AssetsPagination = ({ handleChangePage(currentPage + 1)}> - + - + handleChangePage(maxPage - 1)}> - + - + ); }; - -// FIXME: remove StyleSheet.create -// eslint-disable-next-line no-restricted-syntax -const styles = StyleSheet.create({ - container: { - flexDirection: "row", - justifyContent: "space-around", - width: "100%", - paddingHorizontal: layout.spacing_x2, - }, - section: { - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - }, - grayText: { - ...fontSemibold14, - color: neutral77, - paddingRight: layout.spacing_x1, - lineHeight: 14, - }, -}); diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx index e36c4ada4e..7b3599abf6 100644 --- a/packages/components/FilePreview/SelectedFilesPreview.tsx +++ b/packages/components/FilePreview/SelectedFilesPreview.tsx @@ -1,8 +1,9 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { TouchableOpacity, View } from "react-native"; import { neutral33, neutral55, secondaryColor } from "../../utils/style/colors"; import { fontSemibold13, fontSemibold20 } from "../../utils/style/fonts"; +import { layout } from "../../utils/style/layout"; import { LocalFileData } from "../../utils/types/files"; import { AssetsPagination } from "../AssetsPagination"; import { BrandText } from "../BrandText"; @@ -14,11 +15,20 @@ export const SelectedFilesPreview: React.FC<{ assets: LocalFileData[]; onSelect: (item: LocalFileData) => void; }> = ({ assets, onSelect }) => { - const [itemsPerPage, setItemsPerPage] = useState(50); - const [pageIndex, setPageIndex] = useState(0); - const total = assets?.length || 28; + const [currentPage, setCurrentPage] = useState(0); + const [totalPage, setTotalPage] = useState(1); - const maxPage = Math.max(Math.ceil(total / itemsPerPage), 1); + const itemsPerPage = 14; // Number of items to display per page + + useEffect(() => { + if (assets) { + setTotalPage(Math.ceil(assets.length / itemsPerPage)); + } + }, [assets]); + + const indexOfLastItem = currentPage * itemsPerPage + itemsPerPage; + const indexOfFirstItem = indexOfLastItem - itemsPerPage; + const currentItems = assets.slice(indexOfFirstItem, indexOfLastItem); return ( - {assets.length > 0 ? ( + {currentItems.length > 0 ? ( <> - - {assets.map((item, index) => ( - { - onSelect(item); - }} - > - + + {currentItems.slice(0, 7).map((item, index) => ( + { + onSelect(item); }} > - Uploaded file - - + Uploaded file + + + + {currentPage * itemsPerPage + index + 1} + + + + ))} + + + {currentItems.slice(7).map((item, index) => ( + { + onSelect(item); }} > - - {index + 1} - - - - ))} + Uploaded file + + + + {currentPage * itemsPerPage + index + 1 + 7} + + + + ))} + ) : ( @@ -97,23 +158,24 @@ export const SelectedFilesPreview: React.FC<{ )} - - - - + {assets.length > 0 && ( + + {}} + onChangePage={(page) => setCurrentPage(page)} + /> + + + )} ); }; diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index 5105853400..dfb8f9812d 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -4,6 +4,7 @@ import { TouchableOpacity, View } from "react-native"; import { SelectFileUploaderProps } from "./SelectFileUploader.type"; import { formatFile } from "./formatFile"; import addSVG from "../../../assets/icons/add-circle.svg"; +import filesSVG from "../../../assets/icons/files.svg"; import { useFeedbacks } from "../../context/FeedbacksProvider"; import { gradientColorBlue, @@ -11,10 +12,12 @@ import { gradientColorTurquoise, neutral17, primaryColor, + secondaryColor, withAlpha, } from "../../utils/style/colors"; import { fontSemibold14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; +import { LocalFileData } from "../../utils/types/files"; import { BrandText } from "../BrandText"; import { DeleteButton } from "../FilePreview/DeleteButton"; import { SVGorImageIcon } from "../SVG/SVGorImageIcon"; @@ -37,11 +40,13 @@ export const SelectFileUploader: FC = ({ }) => { const { setToastError } = useFeedbacks(); const hiddenFileInput = useRef(null); - const [file, setFile] = useState(""); + const [files, setFiles] = useState([]); const handleFiles = async (files: File[]) => { const _files = multiple ? files : [files[0]]; - let supportedFiles = files.filter((file) => mimeTypes?.includes(file.type)); + let supportedFiles = [...files].filter( + (file) => mimeTypes?.includes(file.type), + ); if (maxUpload && supportedFiles.length) { supportedFiles = supportedFiles.slice(0, maxUpload); @@ -59,11 +64,15 @@ export const SelectFileUploader: FC = ({ message: "Sorry we couldn't upload some files at the moment.", }); } - if (!multiple) { - setFile(URL.createObjectURL(_files[0])); - } + // if (!multiple) { + // setFile(URL.createObjectURL(_files[0])); + // } + + const formattedFiles = await Promise.all( + supportedFiles.map(async (file) => await formatFile(file)), + ); - const formattedFiles = await Promise.all(supportedFiles.map(formatFile)); + setFiles(formattedFiles); onUpload(formattedFiles); }; @@ -85,7 +94,7 @@ export const SelectFileUploader: FC = ({ setIsLoading?.(true); ev.preventDefault(); if (ev.dataTransfer.items) { - const files = ev.dataTransfer.items + const files = [...ev.dataTransfer.items] .filter((item: any) => item.kind === "file") .map((item: any) => item.getAsFile()); await handleFiles(files); @@ -133,21 +142,22 @@ export const SelectFileUploader: FC = ({ flexDirection: "row", alignItems: "center", justifyContent: "center", - height: file ? fileHeight : containerHeight, + height: + files.length > 0 && !multiple ? fileHeight : containerHeight, borderRadius: 12, }} > - {file ? ( + {files.length > 0 && !multiple ? ( <> { - setFile(""); + setFiles([]); onUpload([]); }} style={{ top: 12, right: 12 }} /> = ({ style={{ flex: 1, width: "100%", - height: file ? fileHeight : containerHeight, + height: + files.length > 0 && !multiple + ? fileHeight + : containerHeight, alignItems: "center", padding: layout.spacing_x2_5, borderRadius: 12, borderWidth: 1, }} > - + {files.length > 0 && multiple ? ( - + + + + + {files.length} files selected + + + - - {/* */} - - + - Select files - + + + + + Select files + + + - - + )} )} diff --git a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx index beadc03967..1574cbae02 100644 --- a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx +++ b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx @@ -47,10 +47,19 @@ const StepContent = ({ step }: { step: number }) => { } }; +const stepOptions = [ + { key: 1, title: "Basic" }, + { key: 2, title: "Details" }, + { key: 3, title: "Team & Investments" }, + { key: 4, title: "Additional" }, + { key: 5, title: "Minting" }, + { key: 6, title: "Assets & Metadata" }, +]; + export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { const navigation = useAppNavigation(); - const [selectedStep, setSelectedStep] = useState(1); + const [selectedStep, setSelectedStep] = useState(6); const [isLoading, setLoading] = useState(false); const onSubmit = () => { @@ -59,14 +68,7 @@ export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { setLoading(false); }, 1000); }; - const stepOptions = [ - { key: 1, title: "Basic" }, - { key: 2, title: "Details" }, - { key: 3, title: "Team & Investments" }, - { key: 4, title: "Additional" }, - { key: 5, title: "Minting" }, - { key: 6, title: "Assets & Metadata" }, - ]; + return ( Date: Tue, 9 Jan 2024 14:26:03 +0530 Subject: [PATCH 05/28] partial commit: 90% Figma done --- packages/components/AssetsPagination.tsx | 87 +++++++++++++------ .../FilePreview/SelectedFilesPreview.tsx | 11 ++- .../Launchpad/LaunchpadCreateScreen.tsx | 1 + .../Launchpad/components/AssetsTab.tsx | 1 - 4 files changed, 68 insertions(+), 32 deletions(-) diff --git a/packages/components/AssetsPagination.tsx b/packages/components/AssetsPagination.tsx index 3940a67c23..0d05a895d2 100644 --- a/packages/components/AssetsPagination.tsx +++ b/packages/components/AssetsPagination.tsx @@ -23,16 +23,12 @@ import { layout } from "../utils/style/layout"; interface PaginationProps { currentPage: number; maxPage: number; - itemsPerPage: number; - setItemsPerPage: (item: number) => void; onChangePage: (page: number) => void; } export const AssetsPagination = ({ currentPage, maxPage, - itemsPerPage, - setItemsPerPage, onChangePage, }: PaginationProps) => { const handleChangePage = (pageIndex: number) => { @@ -104,7 +100,7 @@ export const AssetsPagination = ({ ]} > { - handleChangePage(+text); + onSubmitEditing={(value) => { + handleChangePage(+value.nativeEvent.text - 1); }} /> @@ -145,7 +141,6 @@ export const AssetsPagination = ({ - handleChangePage(currentPage - 1)}> @@ -160,7 +155,44 @@ export const AssetsPagination = ({ + + + { + handleChangePage( + currentPage + 1 >= maxPage ? currentPage - 1 : currentPage, + ); + }} + > + + + {currentPage + 1 >= maxPage ? currentPage : currentPage + 1} + + + + - { + handleChangePage( + currentPage + 2 > maxPage ? currentPage : currentPage + 1, + ); }} > - - - {currentPage + 1} + + {currentPage + 2 > maxPage ? maxPage : currentPage + 2} - - + + @@ -212,7 +246,6 @@ export const AssetsPagination = ({ - handleChangePage(maxPage - 1)}> diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx index 7b3599abf6..00c8f811ac 100644 --- a/packages/components/FilePreview/SelectedFilesPreview.tsx +++ b/packages/components/FilePreview/SelectedFilesPreview.tsx @@ -33,11 +33,16 @@ export const SelectedFilesPreview: React.FC<{ return ( - + {currentItems.length > 0 ? ( <> @@ -169,8 +174,6 @@ export const SelectedFilesPreview: React.FC<{ {}} onChangePage={(page) => setCurrentPage(page)} /> diff --git a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx index 1574cbae02..971bc5ceac 100644 --- a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx +++ b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx @@ -89,6 +89,7 @@ export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { flexDirection: "row", alignItems: "center", minHeight: 56, + minWidth: 1290, backgroundColor: neutral17, justifyContent: "center", marginHorizontal: layout.spacing_x3, diff --git a/packages/screens/Launchpad/components/AssetsTab.tsx b/packages/screens/Launchpad/components/AssetsTab.tsx index 23564cc0e8..f2948e33c6 100644 --- a/packages/screens/Launchpad/components/AssetsTab.tsx +++ b/packages/screens/Launchpad/components/AssetsTab.tsx @@ -57,7 +57,6 @@ export const AssetsTab: React.FC = () => { margin: layout.spacing_x2, }} > - {/* Left container */} rules={{ required: true }} From 12924ef17eee985e81e6c957892a680609f10e3d Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Tue, 9 Jan 2024 14:43:19 +0530 Subject: [PATCH 06/28] fix : typo fix "NewCollectionFormForEistingBaseUrlValues' to 'ExistingBaseUrlValues' --- packages/screens/Launchpad/CreateCollection.type.ts | 2 +- packages/screens/Launchpad/components/UriTab.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/screens/Launchpad/CreateCollection.type.ts b/packages/screens/Launchpad/CreateCollection.type.ts index b0aa313e99..29bbf9ab9a 100644 --- a/packages/screens/Launchpad/CreateCollection.type.ts +++ b/packages/screens/Launchpad/CreateCollection.type.ts @@ -2,7 +2,7 @@ export interface NewCollectionFormValues { nftApiKey?: string; } -export interface NewCollectionFormForEistingBaseUrlValues { +export interface ExistingBaseUrlValues { baseTokenUri?: string; coverImageUrl?: string; } diff --git a/packages/screens/Launchpad/components/UriTab.tsx b/packages/screens/Launchpad/components/UriTab.tsx index 0dce264eab..1e125fc5c2 100644 --- a/packages/screens/Launchpad/components/UriTab.tsx +++ b/packages/screens/Launchpad/components/UriTab.tsx @@ -8,10 +8,10 @@ import { SpacerColumn } from "../../../components/spacer"; import { neutral00, neutral77 } from "../../../utils/style/colors"; import { fontSemibold14 } from "../../../utils/style/fonts"; import { layout } from "../../../utils/style/layout"; -import { NewCollectionFormForEistingBaseUrlValues } from "../CreateCollection.type"; +import { ExistingBaseUrlValues } from "../CreateCollection.type"; export const UriTab: React.FC = () => { - const { control } = useForm({ + const { control } = useForm({ defaultValues: { baseTokenUri: "", coverImageUrl: "", @@ -46,7 +46,7 @@ export const UriTab: React.FC = () => { - + rules={{ required: true }} label="Base Token URI" placeHolder="ipfs://" @@ -59,7 +59,7 @@ export const UriTab: React.FC = () => { borderRadius: 12, }} /> - + rules={{ required: true }} label="Cover Image URL" placeHolder="ipfs://" From 85e0f89ea1b9454de85f33ea0e7a739250144acd Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Tue, 9 Jan 2024 14:51:32 +0530 Subject: [PATCH 07/28] fix : PR comments solved --- packages/components/SelectionDropdown.tsx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/components/SelectionDropdown.tsx b/packages/components/SelectionDropdown.tsx index e256aaddc3..03460d2482 100644 --- a/packages/components/SelectionDropdown.tsx +++ b/packages/components/SelectionDropdown.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +import React, { useRef } from "react"; import { TouchableOpacity, View, ViewStyle } from "react-native"; import chevronDownSVG from "./../../assets/icons/chevron-down.svg"; @@ -28,8 +28,6 @@ interface SelectionDropdownProps { } export const SelectionDropdown = ({ - style, - onDropdownClosed, dropdownOptions, placeHolder, item, @@ -40,15 +38,6 @@ export const SelectionDropdown = ({ useDropdowns(); const dropdownRef = useRef(null); - const isDropdownOpened = isDropdownOpen(dropdownRef); - - useEffect(() => { - if (!isDropdownOpened) { - onDropdownClosed?.(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isDropdownOpened]); - return ( Date: Tue, 9 Jan 2024 15:17:11 +0530 Subject: [PATCH 08/28] fix : assets & metadata tab image preview border added --- .../FilePreview/SelectedFilesPreview.tsx | 16 ++++++++++++---- .../screens/Launchpad/LaunchpadCreateScreen.tsx | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx index 00c8f811ac..b3f2e8015f 100644 --- a/packages/components/FilePreview/SelectedFilesPreview.tsx +++ b/packages/components/FilePreview/SelectedFilesPreview.tsx @@ -60,10 +60,14 @@ export const SelectedFilesPreview: React.FC<{ onSelect(item); }} > - Uploaded file - + - Uploaded file - + = () => { const navigation = useAppNavigation(); - const [selectedStep, setSelectedStep] = useState(6); + const [selectedStep, setSelectedStep] = useState(1); const [isLoading, setLoading] = useState(false); const onSubmit = () => { From 63acc923c6dcee647d12768ef0253f5572ca2904 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Wed, 10 Jan 2024 11:25:01 +0530 Subject: [PATCH 09/28] fix : design updated as per zooma comment on figma --- .../FilePreview/SelectedFilesPreview.tsx | 34 +++--- .../CustomeNetworkSelector.tsx | 105 ++++++++++++++++++ packages/components/SelectionDropdown.tsx | 18 ++- .../Launchpad/components/LaunchpadBasic.tsx | 20 ++-- .../Launchpad/components/NewWhitelist.tsx | 4 +- 5 files changed, 137 insertions(+), 44 deletions(-) create mode 100644 packages/components/NetworkSelector/CustomeNetworkSelector.tsx diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx index b3f2e8015f..a23aae1a0b 100644 --- a/packages/components/FilePreview/SelectedFilesPreview.tsx +++ b/packages/components/FilePreview/SelectedFilesPreview.tsx @@ -40,7 +40,6 @@ export const SelectedFilesPreview: React.FC<{ {currentItems.length > 0 ? ( @@ -60,25 +59,23 @@ export const SelectedFilesPreview: React.FC<{ onSelect(item); }} > - Uploaded file - + + - Uploaded file - + + ; + forceNetworkId?: string; + forceNetworkKind?: NetworkKind; + forceNetworkFeatures?: NetworkFeature[]; +}> = ({ + style, + forceNetworkId, + forceNetworkKind, + forceNetworkFeatures, + label, +}) => { + const { onPressDropdownButton, isDropdownOpen } = useDropdowns(); + const dropdownRef = useRef(null); + const selectedNetworkInfo = useSelectedNetworkInfo(); + + return ( + + + {label} + + + + onPressDropdownButton(dropdownRef)} + > + + {selectedNetworkInfo?.displayName} + + + + + + {isDropdownOpen(dropdownRef) && ( + + )} + + ); +}; diff --git a/packages/components/SelectionDropdown.tsx b/packages/components/SelectionDropdown.tsx index 03460d2482..62930e4360 100644 --- a/packages/components/SelectionDropdown.tsx +++ b/packages/components/SelectionDropdown.tsx @@ -61,16 +61,14 @@ export const SelectionDropdown = ({ { - const dropdownOptions = ["Yes", "No"]; - - const [item, setItem] = useState(""); - const { control } = useForm({ defaultValues: { name: "", @@ -105,7 +101,7 @@ export const LaunchpadBasic: React.FC = () => { /> { borderRadius: 12, }} /> - diff --git a/packages/screens/Launchpad/components/NewWhitelist.tsx b/packages/screens/Launchpad/components/NewWhitelist.tsx index a46edb37e3..4b769e3cb7 100644 --- a/packages/screens/Launchpad/components/NewWhitelist.tsx +++ b/packages/screens/Launchpad/components/NewWhitelist.tsx @@ -8,7 +8,7 @@ import { SelectFileUploader } from "../../../components/selectFileUploader"; import { Separator } from "../../../components/separators/Separator"; import { SpacerColumn } from "../../../components/spacer"; import { IMAGE_MIME_TYPES } from "../../../utils/mime"; -import { ARTICLE_THUMBNAIL_IMAGE_HEIGHT } from "../../../utils/social-feed"; +import { ARTICLE_THUMBNAIL_IMAGE_MAX_HEIGHT } from "../../../utils/social-feed"; import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; import { fontSemibold13, @@ -150,7 +150,7 @@ export const NewWhitelist: React.FC = () => { Date: Thu, 11 Jan 2024 09:38:10 +0530 Subject: [PATCH 10/28] fix : missing design fix on metadata model --- .../components/modals/collection/MetadataUpdateModal.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/components/modals/collection/MetadataUpdateModal.tsx b/packages/components/modals/collection/MetadataUpdateModal.tsx index 9005cdfe28..6e778fc244 100644 --- a/packages/components/modals/collection/MetadataUpdateModal.tsx +++ b/packages/components/modals/collection/MetadataUpdateModal.tsx @@ -46,13 +46,15 @@ export const MetadataUpdateModal: React.FC<{ width: 56, height: 56, borderWidth: 1, + borderColor: neutral77, }} > Uploaded file From 65dc7872e4fd2024dbbbc2979515dc662c62a84f Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Thu, 11 Jan 2024 15:37:01 +0530 Subject: [PATCH 11/28] fix: 11-jan-2024 pr review comments fixed --- .../FilePreview/SelectedFilesPreview.tsx | 20 +++++++++---------- ...Selector.tsx => CustomNetworkSelector.tsx} | 2 +- .../modals/collection/MetadataUpdateModal.tsx | 7 +++---- .../selectFileUploader/SelectFileUploader.tsx | 4 ++-- .../SelectFileUploader.web.tsx | 15 ++++---------- .../Launchpad/components/LaunchpadBasic.tsx | 4 ++-- .../screens/Launchpad/components/NavBar.tsx | 11 +++++++--- .../screens/Launchpad/components/UriTab.tsx | 6 +++--- 8 files changed, 33 insertions(+), 36 deletions(-) rename packages/components/NetworkSelector/{CustomeNetworkSelector.tsx => CustomNetworkSelector.tsx} (98%) diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx index a23aae1a0b..70efc975a3 100644 --- a/packages/components/FilePreview/SelectedFilesPreview.tsx +++ b/packages/components/FilePreview/SelectedFilesPreview.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { TouchableOpacity, View } from "react-native"; +import { Image, TouchableOpacity, View } from "react-native"; import { neutral33, neutral55, secondaryColor } from "../../utils/style/colors"; import { fontSemibold13, fontSemibold20 } from "../../utils/style/fonts"; @@ -11,6 +11,8 @@ import { Box } from "../boxes/Box"; import { PrimaryBox } from "../boxes/PrimaryBox"; import { SpacerColumn } from "../spacer"; +const RowSplitValue = 7; + export const SelectedFilesPreview: React.FC<{ assets: LocalFileData[]; onSelect: (item: LocalFileData) => void; @@ -46,7 +48,7 @@ export const SelectedFilesPreview: React.FC<{ <> - {currentItems.slice(0, 7).map((item, index) => ( + {currentItems.slice(0, RowSplitValue).map((item, index) => ( - Uploaded file @@ -97,7 +98,7 @@ export const SelectedFilesPreview: React.FC<{ ))} - {currentItems.slice(7).map((item, index) => ( + {currentItems.slice(RowSplitValue).map((item, index) => ( - Uploaded file @@ -142,7 +142,7 @@ export const SelectedFilesPreview: React.FC<{ - {currentPage * itemsPerPage + index + 1 + 7} + {currentPage * itemsPerPage + index + 1 + RowSplitValue} diff --git a/packages/components/NetworkSelector/CustomeNetworkSelector.tsx b/packages/components/NetworkSelector/CustomNetworkSelector.tsx similarity index 98% rename from packages/components/NetworkSelector/CustomeNetworkSelector.tsx rename to packages/components/NetworkSelector/CustomNetworkSelector.tsx index e93164aeb3..677aecde95 100644 --- a/packages/components/NetworkSelector/CustomeNetworkSelector.tsx +++ b/packages/components/NetworkSelector/CustomNetworkSelector.tsx @@ -14,7 +14,7 @@ import { BrandText } from "../BrandText"; import { SVG } from "../SVG"; import { TertiaryBox } from "../boxes/TertiaryBox"; -export const CustomeNetworkSelector: React.FC<{ +export const CustomNetworkSelector: React.FC<{ label?: string; style?: StyleProp; forceNetworkId?: string; diff --git a/packages/components/modals/collection/MetadataUpdateModal.tsx b/packages/components/modals/collection/MetadataUpdateModal.tsx index 6e778fc244..93def17325 100644 --- a/packages/components/modals/collection/MetadataUpdateModal.tsx +++ b/packages/components/modals/collection/MetadataUpdateModal.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useForm } from "react-hook-form"; -import { View } from "react-native"; +import { Image, View } from "react-native"; import { NewMetadataDetailsFormValues } from "../../../screens/Launchpad/CreateCollection.type"; import { neutral77, secondaryColor } from "../../../utils/style/colors"; @@ -49,14 +49,13 @@ export const MetadataUpdateModal: React.FC<{ borderColor: neutral77, }} > - Uploaded file diff --git a/packages/components/selectFileUploader/SelectFileUploader.tsx b/packages/components/selectFileUploader/SelectFileUploader.tsx index 8a2e350e0b..02cf69a472 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.tsx @@ -34,7 +34,7 @@ export const SelectFileUploader: React.FC = ({ {!!label && } -
= ({ )} -
+ ); diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index dfb8f9812d..227ddc9feb 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -1,5 +1,5 @@ import React, { FC, SyntheticEvent, useRef, useState } from "react"; -import { TouchableOpacity, View } from "react-native"; +import { TouchableOpacity, View, Image } from "react-native"; import { SelectFileUploaderProps } from "./SelectFileUploader.type"; import { formatFile } from "./formatFile"; @@ -64,13 +64,8 @@ export const SelectFileUploader: FC = ({ message: "Sorry we couldn't upload some files at the moment.", }); } - // if (!multiple) { - // setFile(URL.createObjectURL(_files[0])); - // } - const formattedFiles = await Promise.all( - supportedFiles.map(async (file) => await formatFile(file)), - ); + const formattedFiles = await Promise.all(supportedFiles.map(formatFile)); setFiles(formattedFiles); onUpload(formattedFiles); @@ -156,16 +151,14 @@ export const SelectFileUploader: FC = ({ }} style={{ top: 12, right: 12 }} /> - Uploaded file ) : ( diff --git a/packages/screens/Launchpad/components/LaunchpadBasic.tsx b/packages/screens/Launchpad/components/LaunchpadBasic.tsx index 4276bfc186..e7d89b6cfd 100644 --- a/packages/screens/Launchpad/components/LaunchpadBasic.tsx +++ b/packages/screens/Launchpad/components/LaunchpadBasic.tsx @@ -3,7 +3,7 @@ import { useForm } from "react-hook-form"; import { View } from "react-native"; import { BrandText } from "../../../components/BrandText"; -import { CustomeNetworkSelector } from "../../../components/NetworkSelector/CustomeNetworkSelector"; +import { CustomNetworkSelector } from "../../../components/NetworkSelector/CustomNetworkSelector"; import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { SelectFileUploader } from "../../../components/selectFileUploader"; import { SpacerColumn } from "../../../components/spacer"; @@ -125,7 +125,7 @@ export const LaunchpadBasic: React.FC = () => { }} /> - diff --git a/packages/screens/Launchpad/components/NavBar.tsx b/packages/screens/Launchpad/components/NavBar.tsx index 0f132cf554..4f8c77b1ac 100644 --- a/packages/screens/Launchpad/components/NavBar.tsx +++ b/packages/screens/Launchpad/components/NavBar.tsx @@ -2,7 +2,12 @@ import React from "react"; import { View, TouchableOpacity } from "react-native"; import { BrandText } from "../../../components/BrandText"; -import { neutral33 } from "../../../utils/style/colors"; +import { + neutral33, + primaryColor, + primaryTextColor, + secondaryColor, +} from "../../../utils/style/colors"; export interface NavDefinition { name: string; @@ -47,14 +52,14 @@ export const NavBar = ({ > { }); return ( - + { - + ); }; From b1d3868640bac471357f97b9239bd0e398f0ddd4 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Fri, 12 Jan 2024 11:49:42 +0530 Subject: [PATCH 12/28] fix : PR comments fixed --- packages/components/AssetsPagination.tsx | 396 ++++++++++-------- packages/components/SelectionDropdown.tsx | 1 + ...etails.tsx => ConfigureRoyaltyDetails.tsx} | 0 .../Launchpad/components/LaunchpadMinting.tsx | 2 +- 4 files changed, 214 insertions(+), 185 deletions(-) rename packages/screens/Launchpad/components/{ ConfigureRoyaltyDetails.tsx => ConfigureRoyaltyDetails.tsx} (100%) diff --git a/packages/components/AssetsPagination.tsx b/packages/components/AssetsPagination.tsx index 0d05a895d2..6d8292d2a2 100644 --- a/packages/components/AssetsPagination.tsx +++ b/packages/components/AssetsPagination.tsx @@ -26,242 +26,270 @@ interface PaginationProps { onChangePage: (page: number) => void; } -export const AssetsPagination = ({ +const LeftContainer = ({ currentPage, maxPage, onChangePage, }: PaginationProps) => { - const handleChangePage = (pageIndex: number) => { - if (pageIndex < 0) { - pageIndex = 0; - } else if (pageIndex >= maxPage) { - pageIndex = maxPage - 1; - } - if (pageIndex !== currentPage) { - onChangePage(pageIndex); - } - }; - return ( - - - + + - - Page {currentPage + 1} of {maxPage} - - - + + + - - | Go to page: - - + + { + onChangePage(+value.nativeEvent.text - 1); + }} + /> + + + + ); +}; + +const RightContainer = ({ + currentPage, + maxPage, + onChangePage, +}: PaginationProps) => { + return ( + + + onChangePage(0)}> + - { - handleChangePage(+value.nativeEvent.text - 1); - }} - /> + - - + + - + onChangePage(currentPage - 1)}> + + + + + - - handleChangePage(0)}> - { + onChangePage( + currentPage + 1 >= maxPage ? currentPage - 1 : currentPage, + ); + }} + > + - - + + {currentPage + 1 >= maxPage ? currentPage : currentPage + 1} + + - + + - handleChangePage(currentPage - 1)}> - + { + onChangePage( + currentPage + 2 > maxPage ? currentPage : currentPage + 1, + ); + }} + > + - - + + {currentPage + 2 > maxPage ? maxPage : currentPage + 2} + + - + + - onChangePage(currentPage + 1)}> + - { - handleChangePage( - currentPage + 1 >= maxPage ? currentPage - 1 : currentPage, - ); - }} - > - - - {currentPage + 1 >= maxPage ? currentPage : currentPage + 1} - - - - - + + + + - onChangePage(maxPage - 1)}> + - { - handleChangePage( - currentPage + 2 > maxPage ? currentPage : currentPage + 1, - ); - }} - > - - - {currentPage + 2 > maxPage ? maxPage : currentPage + 2} - - - - - + + + + + + ); +}; - handleChangePage(currentPage + 1)}> - - - - - +export const AssetsPagination = ({ + currentPage, + maxPage, + onChangePage, +}: PaginationProps) => { + const handleChangePage = (pageIndex: number) => { + if (pageIndex < 0) { + pageIndex = 0; + } else if (pageIndex >= maxPage) { + pageIndex = maxPage - 1; + } + if (pageIndex !== currentPage) { + onChangePage(pageIndex); + } + }; - handleChangePage(maxPage - 1)}> - - - - - - + return ( + + + + + + ); }; diff --git a/packages/components/SelectionDropdown.tsx b/packages/components/SelectionDropdown.tsx index 62930e4360..ff0b942f52 100644 --- a/packages/components/SelectionDropdown.tsx +++ b/packages/components/SelectionDropdown.tsx @@ -17,6 +17,7 @@ import { } from "../utils/style/colors"; import { fontSemibold13, fontSemibold14 } from "../utils/style/fonts"; import { layout } from "../utils/style/layout"; + interface SelectionDropdownProps { style?: ViewStyle; onDropdownClosed?: () => void; diff --git a/packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx b/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx similarity index 100% rename from packages/screens/Launchpad/components/ ConfigureRoyaltyDetails.tsx rename to packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx diff --git a/packages/screens/Launchpad/components/LaunchpadMinting.tsx b/packages/screens/Launchpad/components/LaunchpadMinting.tsx index 76918e7908..0163ce5f84 100644 --- a/packages/screens/Launchpad/components/LaunchpadMinting.tsx +++ b/packages/screens/Launchpad/components/LaunchpadMinting.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { ConfigureRoyaltyDetails } from "./ ConfigureRoyaltyDetails"; +import { ConfigureRoyaltyDetails } from "./ConfigureRoyaltyDetails"; import { ExistingWhitelist } from "./ExistingWhitelist"; import { NavBar } from "./NavBar"; import { NewWhitelist } from "./NewWhitelist"; From 194638bb5171fa633aac9c19e0cdf837f841a844 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Fri, 12 Jan 2024 15:49:02 +0530 Subject: [PATCH 13/28] fix: replaced Box component with the respective PrimaryBox,SecondaryBox or TertiaryBox --- packages/components/AssetsPagination.tsx | 22 +--- .../FilePreview/SelectedFilesPreview.tsx | 6 +- packages/components/SelectionDropdown.tsx | 6 +- .../modals/collection/MetadataUpdateModal.tsx | 7 +- .../selectFileUploader/SelectFileUploader.tsx | 123 ------------------ .../SelectFileUploader.web.tsx | 20 +-- .../components/selectFileUploader/index.ts | 2 +- .../Launchpad/LaunchpadCreateScreen.tsx | 9 +- .../components/LaunchpadAdditional.tsx | 1 - 9 files changed, 24 insertions(+), 172 deletions(-) delete mode 100644 packages/components/selectFileUploader/SelectFileUploader.tsx diff --git a/packages/components/AssetsPagination.tsx b/packages/components/AssetsPagination.tsx index 6d8292d2a2..e591cc6b08 100644 --- a/packages/components/AssetsPagination.tsx +++ b/packages/components/AssetsPagination.tsx @@ -4,19 +4,13 @@ import { TextInput, TouchableOpacity, View } from "react-native"; import { BrandText } from "./BrandText"; import { SVG } from "./SVG"; import { SEARCH_BAR_INPUT_HEIGHT } from "./Search/SearchBarInput"; -import { Box } from "./boxes/Box"; import { TertiaryBox } from "./boxes/TertiaryBox"; import { SpacerRow } from "./spacer"; import chevronLeftDoubleSVG from "../../assets/icons/chevron-left-double.svg"; import chevronLeftSVG from "../../assets/icons/chevron-left.svg"; import chevronRightDoubleSVG from "../../assets/icons/chevron-right-double.svg"; import chevronRightSVG from "../../assets/icons/chevron-right.svg"; -import { - neutral17, - neutral33, - neutral77, - primaryColor, -} from "../utils/style/colors"; +import { neutral17, neutral77, primaryColor } from "../utils/style/colors"; import { fontSemibold14 } from "../utils/style/fonts"; import { layout } from "../utils/style/layout"; @@ -162,22 +156,19 @@ const RightContainer = ({ ); }} > - {currentPage + 1 >= maxPage ? currentPage : currentPage + 1} - + @@ -201,22 +192,19 @@ const RightContainer = ({ ); }} > - {currentPage + 2 > maxPage ? maxPage : currentPage + 2} - + diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx index 70efc975a3..3ae6859d52 100644 --- a/packages/components/FilePreview/SelectedFilesPreview.tsx +++ b/packages/components/FilePreview/SelectedFilesPreview.tsx @@ -7,7 +7,6 @@ import { layout } from "../../utils/style/layout"; import { LocalFileData } from "../../utils/types/files"; import { AssetsPagination } from "../AssetsPagination"; import { BrandText } from "../BrandText"; -import { Box } from "../boxes/Box"; import { PrimaryBox } from "../boxes/PrimaryBox"; import { SpacerColumn } from "../spacer"; @@ -151,11 +150,10 @@ export const SelectedFilesPreview: React.FC<{ ) : ( - Select assets to preview - + )} {assets.length > 0 && ( diff --git a/packages/components/SelectionDropdown.tsx b/packages/components/SelectionDropdown.tsx index ff0b942f52..0b4ee81fd3 100644 --- a/packages/components/SelectionDropdown.tsx +++ b/packages/components/SelectionDropdown.tsx @@ -17,6 +17,7 @@ import { } from "../utils/style/colors"; import { fontSemibold13, fontSemibold14 } from "../utils/style/fonts"; import { layout } from "../utils/style/layout"; +import { PrimaryBox } from "./boxes/PrimaryBox"; interface SelectionDropdownProps { style?: ViewStyle; @@ -99,7 +100,7 @@ export const SelectionDropdown = ({ {isDropdownOpen(dropdownRef) && ( - @@ -133,7 +135,7 @@ export const SelectionDropdown = ({ ))} - + )} ); diff --git a/packages/components/modals/collection/MetadataUpdateModal.tsx b/packages/components/modals/collection/MetadataUpdateModal.tsx index 93def17325..feba9e4cb5 100644 --- a/packages/components/modals/collection/MetadataUpdateModal.tsx +++ b/packages/components/modals/collection/MetadataUpdateModal.tsx @@ -8,7 +8,7 @@ import { fontSemibold16, fontSemibold20 } from "../../../utils/style/fonts"; import { layout } from "../../../utils/style/layout"; import { LocalFileData } from "../../../utils/types/files"; import { BrandText } from "../../BrandText"; -import { Box } from "../../boxes/Box"; +import { PrimaryBox } from "../../boxes/PrimaryBox"; import { PrimaryButton } from "../../buttons/PrimaryButton"; import { TextInputCustom } from "../../inputs/TextInputCustom"; import { Separator } from "../../separators/Separator"; @@ -41,11 +41,10 @@ export const MetadataUpdateModal: React.FC<{ flexDirection: "row", }} > - @@ -57,7 +56,7 @@ export const MetadataUpdateModal: React.FC<{ borderRadius: 8, }} /> - + Update Metadata diff --git a/packages/components/selectFileUploader/SelectFileUploader.tsx b/packages/components/selectFileUploader/SelectFileUploader.tsx deleted file mode 100644 index 02cf69a472..0000000000 --- a/packages/components/selectFileUploader/SelectFileUploader.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React, { useState } from "react"; -import { View, Image, TouchableOpacity } from "react-native"; - -import { SelectFileUploaderProps } from "./SelectFileUploader.type"; -import plusSVG from "../../../../assets/icons/plus.svg"; -import { - gradientColorBlue, - gradientColorDarkerBlue, - gradientColorTurquoise, - neutral17, - primaryColor, - withAlpha, -} from "../../utils/style/colors"; -import { fontSemibold14 } from "../../utils/style/fonts"; -import { layout } from "../../utils/style/layout"; -import { BrandText } from "../BrandText"; -import { DeleteButton } from "../FilePreview/DeleteButton"; -import { SVG } from "../SVG"; -import { Box } from "../boxes/Box"; -import { Label } from "../inputs/TextInputCustom"; - -//FIXME: Doesn't work for now => Only the .web version is used - -export const SelectFileUploader: React.FC = ({ - label, - style, - isImageCover, - fileHeight = 256, - containerHeight = 80, -}) => { - const [files, setFiles] = useState([]); - - return ( - - {!!label && } - - - {files?.length ? ( - <> - { - setFiles([]); - // TODO: Delete file here - }} - style={{ top: 12, right: 12 }} - /> - - - ) : ( - - - - - - - - Select files - - - - - )} - - - - ); -}; diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index 227ddc9feb..6fef22030b 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -7,13 +7,9 @@ import addSVG from "../../../assets/icons/add-circle.svg"; import filesSVG from "../../../assets/icons/files.svg"; import { useFeedbacks } from "../../context/FeedbacksProvider"; import { - gradientColorBlue, - gradientColorDarkerBlue, - gradientColorTurquoise, neutral17, primaryColor, secondaryColor, - withAlpha, } from "../../utils/style/colors"; import { fontSemibold14 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; @@ -21,7 +17,7 @@ import { LocalFileData } from "../../utils/types/files"; import { BrandText } from "../BrandText"; import { DeleteButton } from "../FilePreview/DeleteButton"; import { SVGorImageIcon } from "../SVG/SVGorImageIcon"; -import { Box } from "../boxes/Box"; +import { PrimaryBox } from "../boxes/PrimaryBox"; import { Label } from "../inputs/TextInputCustom"; export const SelectFileUploader: FC = ({ @@ -162,17 +158,7 @@ export const SelectFileUploader: FC = ({ /> ) : ( - = ({ /> )} - + )} diff --git a/packages/components/selectFileUploader/index.ts b/packages/components/selectFileUploader/index.ts index 06a521bec6..f3d279c73f 100644 --- a/packages/components/selectFileUploader/index.ts +++ b/packages/components/selectFileUploader/index.ts @@ -1 +1 @@ -export * from "./SelectFileUploader"; +export * from "./SelectFileUploader.web"; diff --git a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx index ebc2188526..5b59b9a6fe 100644 --- a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx +++ b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx @@ -11,7 +11,7 @@ import ChevronRightSvg from "../../../assets/icons/chevron-right.svg"; import { BrandText } from "../../components/BrandText"; import { SVG } from "../../components/SVG"; import { ScreenContainer } from "../../components/ScreenContainer"; -import { Box } from "../../components/boxes/Box"; +import { PrimaryBox } from "../../components/boxes/PrimaryBox"; import { PrimaryButton } from "../../components/buttons/PrimaryButton"; import { SecondaryButton } from "../../components/buttons/SecondaryButton"; import { SpacerColumn } from "../../components/spacer"; @@ -84,7 +84,7 @@ export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { marginTop: layout.spacing_x3, }} > - = () => { backgroundColor: neutral17, justifyContent: "center", marginHorizontal: layout.spacing_x3, + borderWidth: 0, }} > {stepOptions.map((item, index) => ( @@ -159,10 +160,12 @@ export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { )} ))} - + + diff --git a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx index 96e1ae4501..f43c0191c4 100644 --- a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx +++ b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx @@ -119,7 +119,6 @@ export const LaunchpadAdditional: React.FC = () => { name="mintDate" control={control} variant="labelOutside" - multiline containerStyle={{ marginBottom: layout.spacing_x3 }} boxMainContainerStyle={{ backgroundColor: neutral00, From c634b96e52b8283432e1e4c67c78437286fb1cd2 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Tue, 16 Jan 2024 14:04:25 +0530 Subject: [PATCH 14/28] fix: create a TextInput component for each type of form --- .../Launchpad/CreateCollection.type.ts | 7 +- .../Launchpad/LaunchpadCreateScreen.tsx | 4 +- .../Launchpad/components/AssetsTab.tsx | 19 ++-- .../components/LaunchpadAdditional.tsx | 59 +++---------- .../Launchpad/components/LaunchpadBasic.tsx | 53 ++++-------- .../Launchpad/components/LaunchpadDetails.tsx | 86 +++++-------------- .../Launchpad/components/LaunchpadMinting.tsx | 67 +++++---------- ...ion.tsx => LaunchpadTeamandInvestment.tsx} | 72 ++++------------ .../screens/Launchpad/components/UriTab.tsx | 35 +++----- .../TextInputLaunchpadAdditionalValues.tsx | 49 +++++++++++ .../inputs/TextInputLaunchpadAssetsValues.tsx | 42 +++++++++ .../inputs/TextInputLaunchpadBasicValues.tsx | 42 +++++++++ .../TextInputLaunchpadDetailsValues.tsx | 46 ++++++++++ .../inputs/TextInputLaunchpadMintValues.tsx | 48 +++++++++++ .../inputs/TextInputLaunchpadTeamValues.tsx | 45 ++++++++++ .../inputs/TextInputLaunchpadUrlValues.tsx | 42 +++++++++ 16 files changed, 429 insertions(+), 287 deletions(-) rename packages/screens/Launchpad/components/{LaunchpadTeamandCondition.tsx => LaunchpadTeamandInvestment.tsx} (66%) create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx diff --git a/packages/screens/Launchpad/CreateCollection.type.ts b/packages/screens/Launchpad/CreateCollection.type.ts index 29bbf9ab9a..94e6093e24 100644 --- a/packages/screens/Launchpad/CreateCollection.type.ts +++ b/packages/screens/Launchpad/CreateCollection.type.ts @@ -1,8 +1,8 @@ -export interface NewCollectionFormValues { +export interface NewCollectionAssetsFormValues { nftApiKey?: string; } -export interface ExistingBaseUrlValues { +export interface ExistingBaseUrlFormValues { baseTokenUri?: string; coverImageUrl?: string; } @@ -19,6 +19,7 @@ export interface NewCollectionDetailsFormValues { twitterFollowers: string; discordName?: string; email?: string; + projectType?: string; projectDesciption?: string; } @@ -28,7 +29,7 @@ export interface NewCollectionMintFormValues { perAddressLimit: string; startTime?: string; } -export interface NewCollectionTeamandConditionFormValues { +export interface TeamandInvestmentFormValues { teamDesciption?: string; teamLink?: string; partner?: string; diff --git a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx index 5b59b9a6fe..294cd9c9f5 100644 --- a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx +++ b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx @@ -6,7 +6,7 @@ import { LaunchpadAssetsandMetadata } from "./components/LaunchpadAssetsandMetad import { LaunchpadBasic } from "./components/LaunchpadBasic"; import { LaunchpadDetails } from "./components/LaunchpadDetails"; import { LaunchpadMinting } from "./components/LaunchpadMinting"; -import { LaunchpadTeamandCondition } from "./components/LaunchpadTeamandCondition"; +import { LaunchpadTeamandInvestment } from "./components/LaunchpadTeamandInvestment"; import ChevronRightSvg from "../../../assets/icons/chevron-right.svg"; import { BrandText } from "../../components/BrandText"; import { SVG } from "../../components/SVG"; @@ -35,7 +35,7 @@ const StepContent = ({ step }: { step: number }) => { case 2: return ; case 3: - return ; + return ; case 4: return ; case 5: diff --git a/packages/screens/Launchpad/components/AssetsTab.tsx b/packages/screens/Launchpad/components/AssetsTab.tsx index f2948e33c6..5b729d0f1f 100644 --- a/packages/screens/Launchpad/components/AssetsTab.tsx +++ b/packages/screens/Launchpad/components/AssetsTab.tsx @@ -2,15 +2,15 @@ import React, { useState } from "react"; import { useForm } from "react-hook-form"; import { SafeAreaView, View } from "react-native"; +import { TextInputLaunchpadAssetsValues } from "./inputs/TextInputLaunchpadAssetsValues"; import { SelectedFilesPreview } from "../../../components/FilePreview/SelectedFilesPreview"; -import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { MetadataUpdateModal } from "../../../components/modals/collection/MetadataUpdateModal"; import { SelectFileUploader } from "../../../components/selectFileUploader"; import { IMAGE_MIME_TYPES } from "../../../utils/mime"; -import { neutral00, neutral33 } from "../../../utils/style/colors"; +import { neutral33 } from "../../../utils/style/colors"; import { layout } from "../../../utils/style/layout"; import { LocalFileData } from "../../../utils/types/files"; -import { NewCollectionFormValues } from "../CreateCollection.type"; +import { NewCollectionAssetsFormValues } from "../CreateCollection.type"; export const AssetsTab: React.FC = () => { const [files, setFiles] = useState([]); @@ -19,7 +19,7 @@ export const AssetsTab: React.FC = () => { const [medataUpdateModalVisible, setMedataUpdateModalVisible] = useState(false); - const { control } = useForm({ + const { control } = useForm({ defaultValues: { nftApiKey: "", }, @@ -58,19 +58,14 @@ export const AssetsTab: React.FC = () => { }} > - - rules={{ required: true }} + + { @@ -40,8 +39,9 @@ export const LaunchpadAdditional: React.FC = () => { Fill the additional information - - rules={{ required: true }} + + @@ -59,13 +59,6 @@ export const LaunchpadAdditional: React.FC = () => { placeHolder="Describe here..." name="artwork" control={control} - variant="labelOutside" - multiline - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> { label="Is your collection ready for the mint? *" /> - - rules={{ required: true }} + - - rules={{ required: true }} + @@ -103,27 +90,14 @@ export const LaunchpadAdditional: React.FC = () => { placeHolder="0" name="mintPrice" control={control} - variant="labelOutside" - multiline - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + { label="Are you dox or have you planned to dox? *" /> - - rules={{ required: true }} + diff --git a/packages/screens/Launchpad/components/LaunchpadBasic.tsx b/packages/screens/Launchpad/components/LaunchpadBasic.tsx index e7d89b6cfd..2b69e37311 100644 --- a/packages/screens/Launchpad/components/LaunchpadBasic.tsx +++ b/packages/screens/Launchpad/components/LaunchpadBasic.tsx @@ -2,18 +2,14 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; +import { TextInputLaunchpadBasicValues } from "./inputs/TextInputLaunchpadBasicValues"; import { BrandText } from "../../../components/BrandText"; import { CustomNetworkSelector } from "../../../components/NetworkSelector/CustomNetworkSelector"; -import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { SelectFileUploader } from "../../../components/selectFileUploader"; import { SpacerColumn } from "../../../components/spacer"; import { IMAGE_MIME_TYPES } from "../../../utils/mime"; import { ARTICLE_THUMBNAIL_IMAGE_MAX_HEIGHT } from "../../../utils/social-feed"; -import { - neutral00, - neutral77, - primaryColor, -} from "../../../utils/style/colors"; +import { neutral77, primaryColor } from "../../../utils/style/colors"; import { fontSemibold14, fontSemibold28 } from "../../../utils/style/fonts"; import { layout } from "../../../utils/style/layout"; import { NewCollectionBasicFormValues } from "../CreateCollection.type"; @@ -60,45 +56,31 @@ export const LaunchpadBasic: React.FC = () => { - - rules={{ required: true }} + + - - rules={{ required: true }} + + - - rules={{ required: true }} + + + { onUpload={(files) => {}} mimeTypes={IMAGE_MIME_TYPES} /> - - rules={{ required: false }} + + { @@ -28,6 +27,7 @@ export const LaunchpadDetails: React.FC = () => { discordName: "", email: "", projectDesciption: "", + projectType: "", }, mode: "onBlur", }); @@ -42,70 +42,43 @@ export const LaunchpadDetails: React.FC = () => { - - rules={{ required: false }} + - - rules={{ required: true }} - label="Twitter Profile *" + + - - rules={{ required: true }} + + - - rules={{ required: true }} + + - - rules={{ required: true }} + + { label="Is your project a derivative project? *" /> - - rules={{ required: true }} + - - rules={{ required: true }} + @@ -147,15 +113,9 @@ export const LaunchpadDetails: React.FC = () => { } placeHolder="Describe here..." - name="email" + name="projectDesciption" control={control} - variant="labelOutside" - multiline - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} + required /> { - - rules={{ required: true }} + - - rules={{ required: true }} + + @@ -99,46 +90,34 @@ export const LaunchpadMinting: React.FC = () => { } - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} + placeHolder="0" + name="unitPrice" + control={control} /> - - rules={{ required: true }} + + + Start time for the minting + + + } placeHolder="0" name="perAddressLimit" control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + + - - Start time for the minting - - - } - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> + { - const { control } = useForm({ +export const LaunchpadTeamandInvestment: React.FC = () => { + const { control } = useForm({ defaultValues: { teamDesciption: "", teamLink: "", @@ -37,13 +36,14 @@ export const LaunchpadTeamandCondition: React.FC = () => { - - rules={{ required: true }} + 1. How many core members are you? ( Working on the project daily + ) 2. Who does what in your team? @@ -62,17 +62,9 @@ export const LaunchpadTeamandCondition: React.FC = () => { placeHolder="Describe here..." name="teamDesciption" control={control} - variant="labelOutside" - multiline - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: false }} + @@ -85,16 +77,10 @@ export const LaunchpadTeamandCondition: React.FC = () => { placeHolder="Type here..." name="teamDesciption" control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + @@ -106,16 +92,10 @@ export const LaunchpadTeamandCondition: React.FC = () => { placeHolder="Type here..." name="partner" control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + @@ -136,17 +116,9 @@ export const LaunchpadTeamandCondition: React.FC = () => { placeHolder="Type here..." name="investDesciption" control={control} - variant="labelOutside" - multiline - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: false }} + @@ -159,16 +131,9 @@ export const LaunchpadTeamandCondition: React.FC = () => { placeHolder="Type here..." name="investLink" control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + @@ -181,12 +146,7 @@ export const LaunchpadTeamandCondition: React.FC = () => { placeHolder="Type here..." name="roadmap" control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} + required /> diff --git a/packages/screens/Launchpad/components/UriTab.tsx b/packages/screens/Launchpad/components/UriTab.tsx index dda8bc4daf..cbafc028e2 100644 --- a/packages/screens/Launchpad/components/UriTab.tsx +++ b/packages/screens/Launchpad/components/UriTab.tsx @@ -2,16 +2,16 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; +import { TextInputLaunchpadUrlValues } from "./inputs/TextInputLaunchpadUrlValues"; import { BrandText } from "../../../components/BrandText"; -import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { SpacerColumn } from "../../../components/spacer"; -import { neutral00, neutral77 } from "../../../utils/style/colors"; +import { neutral77 } from "../../../utils/style/colors"; import { fontSemibold14 } from "../../../utils/style/fonts"; import { layout } from "../../../utils/style/layout"; -import { ExistingBaseUrlValues } from "../CreateCollection.type"; +import { ExistingBaseUrlFormValues } from "../CreateCollection.type"; export const UriTab: React.FC = () => { - const { control } = useForm({ + const { control } = useForm({ defaultValues: { baseTokenUri: "", coverImageUrl: "", @@ -46,31 +46,20 @@ export const UriTab: React.FC = () => { - - rules={{ required: true }} + - - rules={{ required: true }} + + diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx new file mode 100644 index 0000000000..c16c73d21f --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps< + NewCollectionAdditionalFormValues extends FieldValues, +> extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + required?: boolean; + sublabel?: React.ReactElement; + multiline?: boolean; +} + +export const TextInputLaunchpadAdditionalValues = < + NewCollectionAdditionalFormValues extends FieldValues, +>({ + control, + required = false, + name, + label, + placeHolder, + sublabel, + multiline = false, +}: TextInputCustomProps) => { + return ( + + rules={{ required }} + label={label} + placeHolder={placeHolder} + name={name} + sublabel={sublabel} + control={control} + multiline={multiline} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx new file mode 100644 index 0000000000..aa0d758d27 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps + extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + required: boolean; +} + +export const TextInputLaunchpadAssetsValues = < + ExistingBaseUrlFormValues extends FieldValues, +>({ + control, + required, + name, + label, + placeHolder, +}: TextInputCustomProps) => { + return ( + + rules={{ required }} + label={label} + placeHolder={placeHolder} + name={name} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx new file mode 100644 index 0000000000..cf4654e0fe --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps + extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + required: boolean; +} + +export const TextInputLaunchpadBasicValues = < + NewCollectionBasicFormValues extends FieldValues, +>({ + control, + required, + name, + label, + placeHolder, +}: TextInputCustomProps) => { + return ( + + rules={{ required }} + label={label} + placeHolder={placeHolder} + name={name} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx new file mode 100644 index 0000000000..7fa716c129 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps< + NewCollectionDetailsFormValues extends FieldValues, +> extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + required?: boolean; + sublabel?: React.ReactElement; +} + +export const TextInputLaunchpadDetailsValues = < + NewCollectionDetailsFormValues extends FieldValues, +>({ + control, + required = false, + name, + label, + placeHolder, + sublabel, +}: TextInputCustomProps) => { + return ( + + rules={{ required }} + label={label} + placeHolder={placeHolder} + name={name} + sublabel={sublabel} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx new file mode 100644 index 0000000000..a4ed304a36 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps + extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + required?: boolean; + sublabel?: React.ReactElement; + multiline?: boolean; +} + +export const TextInputLaunchpadMintValues = < + NewCollectionMintFormValues extends FieldValues, +>({ + control, + required = false, + name, + label, + placeHolder, + sublabel, + multiline = false, +}: TextInputCustomProps) => { + return ( + + rules={{ required }} + label={label} + placeHolder={placeHolder} + name={name} + sublabel={sublabel} + control={control} + multiline={multiline} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx new file mode 100644 index 0000000000..5ee74a0fe1 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps + extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + required?: boolean; + sublabel?: React.ReactElement; +} + +export const TextInputLaunchpadTandIValues = < + TeamandInvestmentFormValues extends FieldValues, +>({ + control, + required = false, + name, + label, + placeHolder, + sublabel, +}: TextInputCustomProps) => { + return ( + + rules={{ required }} + label={label} + placeHolder={placeHolder} + name={name} + sublabel={sublabel} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx new file mode 100644 index 0000000000..77a7a12c45 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps + extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + required: boolean; +} + +export const TextInputLaunchpadUrlValues = < + ExistingBaseUrlFormValues extends FieldValues, +>({ + control, + required, + name, + label, + placeHolder, +}: TextInputCustomProps) => { + return ( + + rules={{ required }} + label={label} + placeHolder={placeHolder} + name={name} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; From 0ef989debf1d457414d44f8c3570e4b9ac2ddc83 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Tue, 16 Jan 2024 15:24:11 +0530 Subject: [PATCH 15/28] fix: removed unused props on TextInputLaunchpad form --- .../Launchpad/components/AssetsTab.tsx | 3 +- .../components/LaunchpadAdditional.tsx | 5 -- .../Launchpad/components/LaunchpadBasic.tsx | 4 -- .../Launchpad/components/LaunchpadDetails.tsx | 12 ++--- .../Launchpad/components/LaunchpadMinting.tsx | 4 -- .../components/LaunchpadTeamandInvestment.tsx | 1 + .../screens/Launchpad/components/UriTab.tsx | 6 +-- .../TextInputLaunchpadAdditionalValues.tsx | 4 +- .../inputs/TextInputLaunchpadAssetsValues.tsx | 4 +- .../inputs/TextInputLaunchpadBasicValues.tsx | 4 +- .../TextInputLaunchpadMetadataValues.tsx | 35 ++++++++++++++ .../inputs/TextInputLaunchpadMintValues.tsx | 7 +-- .../inputs/TextInputLaunchpadTeamValues.tsx | 3 ++ .../inputs/TextInputLaunchpadUrlValues.tsx | 4 +- .../modals}/MetadataUpdateModal.tsx | 48 ++++++++----------- 15 files changed, 74 insertions(+), 70 deletions(-) create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx rename packages/{components/modals/collection => screens/Launchpad/components/modals}/MetadataUpdateModal.tsx (66%) diff --git a/packages/screens/Launchpad/components/AssetsTab.tsx b/packages/screens/Launchpad/components/AssetsTab.tsx index 5b729d0f1f..47b0c9e038 100644 --- a/packages/screens/Launchpad/components/AssetsTab.tsx +++ b/packages/screens/Launchpad/components/AssetsTab.tsx @@ -3,8 +3,8 @@ import { useForm } from "react-hook-form"; import { SafeAreaView, View } from "react-native"; import { TextInputLaunchpadAssetsValues } from "./inputs/TextInputLaunchpadAssetsValues"; +import { MetadataUpdateModal } from "./modals/MetadataUpdateModal"; import { SelectedFilesPreview } from "../../../components/FilePreview/SelectedFilesPreview"; -import { MetadataUpdateModal } from "../../../components/modals/collection/MetadataUpdateModal"; import { SelectFileUploader } from "../../../components/selectFileUploader"; import { IMAGE_MIME_TYPES } from "../../../utils/mime"; import { neutral33 } from "../../../utils/style/colors"; @@ -59,7 +59,6 @@ export const AssetsTab: React.FC = () => { > { @@ -70,7 +69,6 @@ export const LaunchpadAdditional: React.FC = () => { /> { /> @@ -93,7 +90,6 @@ export const LaunchpadAdditional: React.FC = () => { /> { /> { { /> { /> { /> { /> { /> @@ -115,7 +116,6 @@ export const LaunchpadDetails: React.FC = () => { placeHolder="Describe here..." name="projectDesciption" control={control} - required /> { { /> @@ -96,7 +94,6 @@ export const LaunchpadMinting: React.FC = () => { /> @@ -111,7 +108,6 @@ export const LaunchpadMinting: React.FC = () => { /> { placeHolder="Describe here..." name="teamDesciption" control={control} + multiline /> { diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx index c16c73d21f..5a593dccb2 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx @@ -13,7 +13,6 @@ interface TextInputCustomProps< placeHolder: string; control: Control; name: Path; - required?: boolean; sublabel?: React.ReactElement; multiline?: boolean; } @@ -22,7 +21,6 @@ export const TextInputLaunchpadAdditionalValues = < NewCollectionAdditionalFormValues extends FieldValues, >({ control, - required = false, name, label, placeHolder, @@ -31,7 +29,7 @@ export const TextInputLaunchpadAdditionalValues = < }: TextInputCustomProps) => { return ( - rules={{ required }} + rules={{ required: true }} label={label} placeHolder={placeHolder} name={name} diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx index aa0d758d27..5f9c8efbda 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx @@ -12,21 +12,19 @@ interface TextInputCustomProps placeHolder: string; control: Control; name: Path; - required: boolean; } export const TextInputLaunchpadAssetsValues = < ExistingBaseUrlFormValues extends FieldValues, >({ control, - required, name, label, placeHolder, }: TextInputCustomProps) => { return ( - rules={{ required }} + rules={{ required: true }} label={label} placeHolder={placeHolder} name={name} diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx index cf4654e0fe..e58f2e3235 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx @@ -12,21 +12,19 @@ interface TextInputCustomProps placeHolder: string; control: Control; name: Path; - required: boolean; } export const TextInputLaunchpadBasicValues = < NewCollectionBasicFormValues extends FieldValues, >({ control, - required, name, label, placeHolder, }: TextInputCustomProps) => { return ( - rules={{ required }} + rules={{ required: true }} label={label} placeHolder={placeHolder} name={name} diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx new file mode 100644 index 0000000000..65ed1e2803 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps + extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; +} + +export const TextInputLaunchpadMetadataValues = < + NewMetadataDetailsFormValues extends FieldValues, +>({ + control, + name, + label, + placeHolder, +}: TextInputCustomProps) => { + return ( + + rules={{ required: false }} + label={label} + placeHolder={placeHolder} + name={name} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx index a4ed304a36..ffa3eed599 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx @@ -12,31 +12,26 @@ interface TextInputCustomProps placeHolder: string; control: Control; name: Path; - required?: boolean; sublabel?: React.ReactElement; - multiline?: boolean; } export const TextInputLaunchpadMintValues = < NewCollectionMintFormValues extends FieldValues, >({ control, - required = false, name, label, placeHolder, sublabel, - multiline = false, }: TextInputCustomProps) => { return ( - rules={{ required }} + rules={{ required: true }} label={label} placeHolder={placeHolder} name={name} sublabel={sublabel} control={control} - multiline={multiline} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x3 }} boxMainContainerStyle={{ diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx index 5ee74a0fe1..34a841406c 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx @@ -14,6 +14,7 @@ interface TextInputCustomProps name: Path; required?: boolean; sublabel?: React.ReactElement; + multiline?: boolean; } export const TextInputLaunchpadTandIValues = < @@ -25,6 +26,7 @@ export const TextInputLaunchpadTandIValues = < label, placeHolder, sublabel, + multiline = false, }: TextInputCustomProps) => { return ( @@ -34,6 +36,7 @@ export const TextInputLaunchpadTandIValues = < name={name} sublabel={sublabel} control={control} + multiline={multiline} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x3 }} boxMainContainerStyle={{ diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx index 77a7a12c45..aae15770ea 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx @@ -12,21 +12,19 @@ interface TextInputCustomProps placeHolder: string; control: Control; name: Path; - required: boolean; } export const TextInputLaunchpadUrlValues = < ExistingBaseUrlFormValues extends FieldValues, >({ control, - required, name, label, placeHolder, }: TextInputCustomProps) => { return ( - rules={{ required }} + rules={{ required: false }} label={label} placeHolder={placeHolder} name={name} diff --git a/packages/components/modals/collection/MetadataUpdateModal.tsx b/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx similarity index 66% rename from packages/components/modals/collection/MetadataUpdateModal.tsx rename to packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx index feba9e4cb5..03803c6e3f 100644 --- a/packages/components/modals/collection/MetadataUpdateModal.tsx +++ b/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx @@ -2,17 +2,17 @@ import React from "react"; import { useForm } from "react-hook-form"; import { Image, View } from "react-native"; -import { NewMetadataDetailsFormValues } from "../../../screens/Launchpad/CreateCollection.type"; -import { neutral77, secondaryColor } from "../../../utils/style/colors"; -import { fontSemibold16, fontSemibold20 } from "../../../utils/style/fonts"; -import { layout } from "../../../utils/style/layout"; -import { LocalFileData } from "../../../utils/types/files"; -import { BrandText } from "../../BrandText"; -import { PrimaryBox } from "../../boxes/PrimaryBox"; -import { PrimaryButton } from "../../buttons/PrimaryButton"; -import { TextInputCustom } from "../../inputs/TextInputCustom"; -import { Separator } from "../../separators/Separator"; -import ModalBase from "../ModalBase"; +import { BrandText } from "../../../../components/BrandText"; +import { PrimaryBox } from "../../../../components/boxes/PrimaryBox"; +import { PrimaryButton } from "../../../../components/buttons/PrimaryButton"; +import ModalBase from "../../../../components/modals/ModalBase"; +import { Separator } from "../../../../components/separators/Separator"; +import { neutral77, secondaryColor } from "../../../../utils/style/colors"; +import { fontSemibold16, fontSemibold20 } from "../../../../utils/style/fonts"; +import { layout } from "../../../../utils/style/layout"; +import { LocalFileData } from "../../../../utils/types/files"; +import { NewMetadataDetailsFormValues } from "../../CreateCollection.type"; +import { TextInputLaunchpadMetadataValues } from "../inputs/TextInputLaunchpadMetadataValues"; export const MetadataUpdateModal: React.FC<{ onClose: () => void; @@ -106,45 +106,39 @@ export const MetadataUpdateModal: React.FC<{ > - + - + + - + + - + + - + + From 77608ef043f15fb0c1e13a846eb87b52bebe6543 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Wed, 17 Jan 2024 10:59:39 +0530 Subject: [PATCH 16/28] fix: create a specific TextInput component NewWhitelistValues, ExistingWhitelistValues and RoyaltyValues --- .../components/ConfigureRoyaltyDetails.tsx | 25 +++------ .../components/ExistingWhitelist.tsx | 14 ++--- .../Launchpad/components/NewWhitelist.tsx | 53 ++++--------------- .../inputs/TextInputLaunchpadAssetsValues.tsx | 15 +++--- ...tInputLaunchpadExistingWhitelistValues.tsx | 41 ++++++++++++++ .../TextInputLaunchpadNewWhitelistValues.tsx | 44 +++++++++++++++ .../TextInputLaunchpadRoyaltyValues.tsx | 44 +++++++++++++++ 7 files changed, 157 insertions(+), 79 deletions(-) create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx diff --git a/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx b/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx index b45d55aa58..0e440bec36 100644 --- a/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx +++ b/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx @@ -2,16 +2,15 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; +import { TextInputLaunchpadRoyaltyValues } from "./inputs/TextInputLaunchpadRoyaltyValues"; import { BrandText } from "../../../components/BrandText"; -import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { SpacerColumn } from "../../../components/spacer"; -import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; +import { neutral55, neutral77 } from "../../../utils/style/colors"; import { fontSemibold13, fontSemibold14, fontSemibold20, } from "../../../utils/style/fonts"; -import { layout } from "../../../utils/style/layout"; import { NewConfigureRoyaltyDetailsFormValues } from "../CreateCollection.type"; export const ConfigureRoyaltyDetails: React.FC = () => { @@ -32,8 +31,8 @@ export const ConfigureRoyaltyDetails: React.FC = () => { Information about royalty - - rules={{ required: true }} + + { } control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + + { } control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> ); diff --git a/packages/screens/Launchpad/components/ExistingWhitelist.tsx b/packages/screens/Launchpad/components/ExistingWhitelist.tsx index 140bf28665..70aad9ad7d 100644 --- a/packages/screens/Launchpad/components/ExistingWhitelist.tsx +++ b/packages/screens/Launchpad/components/ExistingWhitelist.tsx @@ -2,10 +2,8 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; +import { TextInputLaunchpadExistingWhitelistValues } from "./inputs/TextInputLaunchpadExistingWhitelistValues"; import { SpacerColumn } from "../../../components/spacer"; -import { neutral00 } from "../../../utils/style/colors"; -import { layout } from "../../../utils/style/layout"; import { ExistingWhitelistDetailsFormValues } from "../CreateCollection.type"; export const ExistingWhitelist: React.FC = () => { @@ -23,18 +21,12 @@ export const ExistingWhitelist: React.FC = () => { }} > - - rules={{ required: true }} + + ); diff --git a/packages/screens/Launchpad/components/NewWhitelist.tsx b/packages/screens/Launchpad/components/NewWhitelist.tsx index 4b769e3cb7..60aab6b340 100644 --- a/packages/screens/Launchpad/components/NewWhitelist.tsx +++ b/packages/screens/Launchpad/components/NewWhitelist.tsx @@ -2,14 +2,14 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; +import { TextInputLaunchpadNewWhitelistValues } from "./inputs/TextInputLaunchpadNewWhitelistValues"; import { BrandText } from "../../../components/BrandText"; -import { TextInputCustom } from "../../../components/inputs/TextInputCustom"; import { SelectFileUploader } from "../../../components/selectFileUploader"; import { Separator } from "../../../components/separators/Separator"; import { SpacerColumn } from "../../../components/spacer"; import { IMAGE_MIME_TYPES } from "../../../utils/mime"; import { ARTICLE_THUMBNAIL_IMAGE_MAX_HEIGHT } from "../../../utils/social-feed"; -import { neutral00, neutral55, neutral77 } from "../../../utils/style/colors"; +import { neutral55, neutral77 } from "../../../utils/style/colors"; import { fontSemibold13, fontSemibold14, @@ -39,8 +39,7 @@ export const NewWhitelist: React.FC = () => { Information about your minting settings - - rules={{ required: true }} + { } control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + + { } control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + + { } control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + + { } control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> - - rules={{ required: true }} + + { } control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} - boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, - }} /> diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx index 5f9c8efbda..ee0b290e5e 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx @@ -6,24 +6,25 @@ import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; -interface TextInputCustomProps - extends Omit { +interface TextInputCustomProps< + NewCollectionAssetsFormValues extends FieldValues, +> extends Omit { label: string; placeHolder: string; - control: Control; - name: Path; + control: Control; + name: Path; } export const TextInputLaunchpadAssetsValues = < - ExistingBaseUrlFormValues extends FieldValues, + NewCollectionAssetsFormValues extends FieldValues, >({ control, name, label, placeHolder, -}: TextInputCustomProps) => { +}: TextInputCustomProps) => { return ( - + rules={{ required: true }} label={label} placeHolder={placeHolder} diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx new file mode 100644 index 0000000000..9d912701a1 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps< + ExistingWhitelistDetailsFormValues extends FieldValues, +> extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; +} + +export const TextInputLaunchpadExistingWhitelistValues = < + ExistingWhitelistDetailsFormValues extends FieldValues, +>({ + control, + name, + label, + placeHolder, +}: TextInputCustomProps) => { + return ( + + rules={{ required: true }} + label={label} + placeHolder={placeHolder} + name={name} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx new file mode 100644 index 0000000000..d28d6e77a8 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps< + NewWhitelistDetailsFormValues extends FieldValues, +> extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + sublabel?: React.ReactElement; +} + +export const TextInputLaunchpadNewWhitelistValues = < + NewWhitelistDetailsFormValues extends FieldValues, +>({ + control, + name, + label, + placeHolder, + sublabel, +}: TextInputCustomProps) => { + return ( + + rules={{ required: true }} + label={label} + placeHolder={placeHolder} + name={name} + sublabel={sublabel} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx new file mode 100644 index 0000000000..babde37c12 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; +import { neutral00 } from "../../../../utils/style/colors"; +import { layout } from "../../../../utils/style/layout"; + +interface TextInputCustomProps< + NewConfigureRoyaltyDetailsFormValues extends FieldValues, +> extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + sublabel?: React.ReactElement; +} + +export const TextInputLaunchpadRoyaltyValues = < + NewConfigureRoyaltyDetailsFormValues extends FieldValues, +>({ + control, + name, + label, + placeHolder, + sublabel, +}: TextInputCustomProps) => { + return ( + + rules={{ required: true }} + label={label} + placeHolder={placeHolder} + name={name} + sublabel={sublabel} + control={control} + variant="labelOutside" + containerStyle={{ marginBottom: layout.spacing_x3 }} + boxMainContainerStyle={{ + backgroundColor: neutral00, + borderRadius: 12, + }} + /> + ); +}; From cb7e814528d3ad08ec8ca655efba3cd15d83a682 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Wed, 17 Jan 2024 11:10:50 +0530 Subject: [PATCH 17/28] fix: lint error fixed --- packages/components/SelectionDropdown.tsx | 3 +-- packages/screens/Launchpad/components/NavBar.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/SelectionDropdown.tsx b/packages/components/SelectionDropdown.tsx index 0b4ee81fd3..deda6e8b9f 100644 --- a/packages/components/SelectionDropdown.tsx +++ b/packages/components/SelectionDropdown.tsx @@ -5,7 +5,7 @@ import chevronDownSVG from "./../../assets/icons/chevron-down.svg"; import chevronUpSVG from "./../../assets/icons/chevron-up.svg"; import { BrandText } from "./BrandText"; import { SVG } from "./SVG"; -import { Box } from "./boxes/Box"; +import { PrimaryBox } from "./boxes/PrimaryBox"; import { TertiaryBox } from "./boxes/TertiaryBox"; import { useDropdowns } from "../context/DropdownsProvider"; import { @@ -17,7 +17,6 @@ import { } from "../utils/style/colors"; import { fontSemibold13, fontSemibold14 } from "../utils/style/fonts"; import { layout } from "../utils/style/layout"; -import { PrimaryBox } from "./boxes/PrimaryBox"; interface SelectionDropdownProps { style?: ViewStyle; diff --git a/packages/screens/Launchpad/components/NavBar.tsx b/packages/screens/Launchpad/components/NavBar.tsx index 4f8c77b1ac..4440394005 100644 --- a/packages/screens/Launchpad/components/NavBar.tsx +++ b/packages/screens/Launchpad/components/NavBar.tsx @@ -9,7 +9,7 @@ import { secondaryColor, } from "../../../utils/style/colors"; -export interface NavDefinition { +interface NavDefinition { name: string; } From 05453bbb6be7dded849cc61673e942c82b0c8996 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Thu, 18 Jan 2024 13:13:22 +0530 Subject: [PATCH 18/28] fix: droupdown and textinput height issue fixed in all screen --- .../NetworkSelector/CustomNetworkSelector.tsx | 4 +- packages/components/SelectionDropdown.tsx | 150 +++++++++--------- .../components/inputs/TextInputCustom.tsx | 1 + .../SelectFileUploader.web.tsx | 2 +- .../components/LaunchpadAdditional.tsx | 20 ++- .../Launchpad/components/LaunchpadBasic.tsx | 2 +- .../Launchpad/components/LaunchpadDetails.tsx | 11 +- .../screens/Launchpad/components/NavBar.tsx | 1 + .../Launchpad/components/NewWhitelist.tsx | 3 +- .../TextInputLaunchpadAdditionalValues.tsx | 7 +- .../inputs/TextInputLaunchpadAssetsValues.tsx | 6 +- .../inputs/TextInputLaunchpadBasicValues.tsx | 6 +- .../TextInputLaunchpadDetailsValues.tsx | 6 +- ...tInputLaunchpadExistingWhitelistValues.tsx | 6 +- .../TextInputLaunchpadMetadataValues.tsx | 3 + .../inputs/TextInputLaunchpadMintValues.tsx | 6 +- .../TextInputLaunchpadNewWhitelistValues.tsx | 6 +- .../TextInputLaunchpadRoyaltyValues.tsx | 6 +- .../inputs/TextInputLaunchpadTeamValues.tsx | 6 +- .../inputs/TextInputLaunchpadUrlValues.tsx | 6 +- 20 files changed, 129 insertions(+), 129 deletions(-) diff --git a/packages/components/NetworkSelector/CustomNetworkSelector.tsx b/packages/components/NetworkSelector/CustomNetworkSelector.tsx index 677aecde95..906bcf63ed 100644 --- a/packages/components/NetworkSelector/CustomNetworkSelector.tsx +++ b/packages/components/NetworkSelector/CustomNetworkSelector.tsx @@ -58,7 +58,7 @@ export const CustomNetworkSelector: React.FC<{ - - + onPressDropdownButton(dropdownRef)} > - onPressDropdownButton(dropdownRef)} > - {item ? item : placeHolder} - - - - - - {isDropdownOpen(dropdownRef) && ( - - {dropdownOptions.map((item, index) => ( - { - closeOpenedDropdown(); - setItem(item); - }} - key={index} + - + + + + + {isDropdownOpen(dropdownRef) && ( + + {dropdownOptions.map((item, index) => ( + { + closeOpenedDropdown(); + setItem(item); + }} + key={index} + style={[ + { + flexDirection: "row", + alignItems: "center", + marginBottom: layout.spacing_x1_5, + }, + ]} > - {item} - - - ))} - - )} + + {item} + + + ))} + + )} + ); }; diff --git a/packages/components/inputs/TextInputCustom.tsx b/packages/components/inputs/TextInputCustom.tsx index 677abd3287..ef95e3184e 100644 --- a/packages/components/inputs/TextInputCustom.tsx +++ b/packages/components/inputs/TextInputCustom.tsx @@ -261,6 +261,7 @@ export const TextInputCustom = ({ style={style} mainContainerStyle={[ styles.mainContainer, + boxMainContainerStyle, noBrokenCorners && styles.noCropBorderBg, hovered && { borderColor: secondaryColor }, ]} diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index 6fef22030b..9b4225297b 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -121,7 +121,7 @@ export const SelectFileUploader: FC = ({ return ( <> - + {!!label && }
{ const dropdownOptions = ["Yes", "No"]; - const [item, setItem] = useState(""); + const [isReadyForMint, setIsReadyForMint] = useState(""); + const [isEscrowMintProceeds, setIsEscrowMintProceeds] = useState(""); + const [isDox, setIsDox] = useState(""); const { control } = useForm({ defaultValues: { @@ -58,13 +60,14 @@ export const LaunchpadAdditional: React.FC = () => { placeHolder="Describe here..." name="artwork" control={control} + multiline /> @@ -99,17 +102,19 @@ export const LaunchpadAdditional: React.FC = () => { { placeHolder="0" name="whitelistSpotPercentage" control={control} - multiline /> diff --git a/packages/screens/Launchpad/components/LaunchpadBasic.tsx b/packages/screens/Launchpad/components/LaunchpadBasic.tsx index 93e6038463..e0d73ba926 100644 --- a/packages/screens/Launchpad/components/LaunchpadBasic.tsx +++ b/packages/screens/Launchpad/components/LaunchpadBasic.tsx @@ -83,7 +83,7 @@ export const LaunchpadBasic: React.FC = () => { fileHeight={ARTICLE_THUMBNAIL_IMAGE_MAX_HEIGHT} isImageCover style={{ - marginVertical: layout.spacing_x3, + marginBottom: layout.spacing_x2, width: 416, }} containerHeight={48} diff --git a/packages/screens/Launchpad/components/LaunchpadDetails.tsx b/packages/screens/Launchpad/components/LaunchpadDetails.tsx index f519534c80..c9404ef3a6 100644 --- a/packages/screens/Launchpad/components/LaunchpadDetails.tsx +++ b/packages/screens/Launchpad/components/LaunchpadDetails.tsx @@ -17,7 +17,8 @@ import { NewCollectionDetailsFormValues } from "../CreateCollection.type"; export const LaunchpadDetails: React.FC = () => { const dropdownOptions = ["Yes", "No"]; - const [item, setItem] = useState(""); + const [isDerivativeProject, setIsDerivativeProject] = useState(""); + const [isPreviouslyApplied, setIsPreviouslyApplied] = useState(""); const { control } = useForm({ defaultValues: { @@ -84,8 +85,8 @@ export const LaunchpadDetails: React.FC = () => { @@ -121,8 +122,8 @@ export const LaunchpadDetails: React.FC = () => { diff --git a/packages/screens/Launchpad/components/NavBar.tsx b/packages/screens/Launchpad/components/NavBar.tsx index 4440394005..d21c9b4873 100644 --- a/packages/screens/Launchpad/components/NavBar.tsx +++ b/packages/screens/Launchpad/components/NavBar.tsx @@ -64,6 +64,7 @@ export const NavBar = ({ paddingHorizontal: 12, textAlign: "center", }} + // numberOfLines={1} > {items[key].name} diff --git a/packages/screens/Launchpad/components/NewWhitelist.tsx b/packages/screens/Launchpad/components/NewWhitelist.tsx index 60aab6b340..84e9bc1b08 100644 --- a/packages/screens/Launchpad/components/NewWhitelist.tsx +++ b/packages/screens/Launchpad/components/NewWhitelist.tsx @@ -122,9 +122,10 @@ export const NewWhitelist: React.FC = () => { fileHeight={ARTICLE_THUMBNAIL_IMAGE_MAX_HEIGHT} isImageCover style={{ - marginVertical: layout.spacing_x3, + marginBottom: layout.spacing_x2, width: 416, }} + containerHeight={48} onUpload={(files) => {}} mimeTypes={IMAGE_MIME_TYPES} /> diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx index 5a593dccb2..a82e6af414 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps< @@ -31,16 +30,16 @@ export const TextInputLaunchpadAdditionalValues = < rules={{ required: true }} label={label} + labelStyle={{ maxWidth: 416 }} placeHolder={placeHolder} name={name} sublabel={sublabel} control={control} multiline={multiline} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx index ee0b290e5e..3327ac7e65 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps< @@ -31,10 +30,9 @@ export const TextInputLaunchpadAssetsValues = < name={name} control={control} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx index e58f2e3235..38ce6da799 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps @@ -30,10 +29,9 @@ export const TextInputLaunchpadBasicValues = < name={name} control={control} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx index 7fa716c129..d0aa10b287 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps< @@ -36,10 +35,9 @@ export const TextInputLaunchpadDetailsValues = < sublabel={sublabel} control={control} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx index 9d912701a1..915daf5b6b 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps< @@ -31,10 +30,9 @@ export const TextInputLaunchpadExistingWhitelistValues = < name={name} control={control} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx index 65ed1e2803..165c861ac5 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx @@ -30,6 +30,9 @@ export const TextInputLaunchpadMetadataValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} + boxMainContainerStyle={{ + minHeight: 40, + }} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx index ffa3eed599..cc23e07c04 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps @@ -33,10 +32,9 @@ export const TextInputLaunchpadMintValues = < sublabel={sublabel} control={control} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx index d28d6e77a8..d418aa5646 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps< @@ -34,10 +33,9 @@ export const TextInputLaunchpadNewWhitelistValues = < sublabel={sublabel} control={control} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx index babde37c12..d953f05e23 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps< @@ -34,10 +33,9 @@ export const TextInputLaunchpadRoyaltyValues = < sublabel={sublabel} control={control} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx index 34a841406c..4784c0e4dc 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps @@ -38,10 +37,9 @@ export const TextInputLaunchpadTandIValues = < control={control} multiline={multiline} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx index aae15770ea..27c57b5f73 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx @@ -3,7 +3,6 @@ import { Control, FieldValues, Path } from "react-hook-form"; import { TextInputProps } from "react-native"; import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { neutral00 } from "../../../../utils/style/colors"; import { layout } from "../../../../utils/style/layout"; interface TextInputCustomProps @@ -30,10 +29,9 @@ export const TextInputLaunchpadUrlValues = < name={name} control={control} variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x3 }} + containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ - backgroundColor: neutral00, - borderRadius: 12, + minHeight: 40, }} /> ); From a141fc8bbe19705aaa41d0b91d686dc66b3ce582 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Thu, 18 Jan 2024 13:43:50 +0530 Subject: [PATCH 19/28] fix: line issue fixed on navbar --- packages/screens/Launchpad/components/NavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/screens/Launchpad/components/NavBar.tsx b/packages/screens/Launchpad/components/NavBar.tsx index d21c9b4873..566c560db7 100644 --- a/packages/screens/Launchpad/components/NavBar.tsx +++ b/packages/screens/Launchpad/components/NavBar.tsx @@ -64,7 +64,7 @@ export const NavBar = ({ paddingHorizontal: 12, textAlign: "center", }} - // numberOfLines={1} + numberOfLines={1} > {items[key].name} From 5f96c4e30924976a9effa6b34ec373f0bfd53cc9 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Fri, 19 Jan 2024 17:22:46 +0530 Subject: [PATCH 20/28] fix: refactor dropdown UI to match with figma --- .../components/MultipleSelectionDropdown.tsx | 180 ++++++++++++++++++ packages/components/SelectionDropdown.tsx | 78 +++++--- .../components/LaunchpadAdditional.tsx | 4 +- .../Launchpad/components/LaunchpadDetails.tsx | 32 +++- 4 files changed, 256 insertions(+), 38 deletions(-) create mode 100644 packages/components/MultipleSelectionDropdown.tsx diff --git a/packages/components/MultipleSelectionDropdown.tsx b/packages/components/MultipleSelectionDropdown.tsx new file mode 100644 index 0000000000..ab041c9fec --- /dev/null +++ b/packages/components/MultipleSelectionDropdown.tsx @@ -0,0 +1,180 @@ +import React, { useRef } from "react"; +import { TouchableOpacity, View, ViewStyle } from "react-native"; + +import chevronDownSVG from "./../../assets/icons/chevron-down.svg"; +import chevronUpSVG from "./../../assets/icons/chevron-up.svg"; +import { BrandText } from "./BrandText"; +import { SVG } from "./SVG"; +import { PrimaryBox } from "./boxes/PrimaryBox"; +import { TertiaryBox } from "./boxes/TertiaryBox"; +import { Separator } from "./separators/Separator"; +import { SpacerColumn } from "./spacer"; +import { useDropdowns } from "../context/DropdownsProvider"; +import { CheckboxDappStore } from "../screens/DAppStore/components/CheckboxDappStore"; +import { + additionalRed, + neutral17, + neutral44, + neutral55, + neutral77, + secondaryColor, +} from "../utils/style/colors"; +import { fontMedium14, fontSemibold14 } from "../utils/style/fonts"; +import { layout } from "../utils/style/layout"; + +interface MultipleSelectionDropdownProps { + style?: ViewStyle; + onDropdownClosed?: () => void; + dropdownOptions: string[]; + placeHolder?: string; + setItems: (item: string) => void; + items: string[]; + label?: string; + sublabel?: React.ReactElement; +} + +export const MultipleSelectionDropdown = ({ + style, + dropdownOptions, + placeHolder, + items, + label, + setItems, + sublabel, +}: MultipleSelectionDropdownProps) => { + const { onPressDropdownButton, isDropdownOpen } = useDropdowns(); + const dropdownRef = useRef(null); + + return ( + + + + {label} + + + + * + + + + {sublabel && sublabel} + + + + onPressDropdownButton(dropdownRef)} + > + + {items?.length > 0 ? items.join(", ") : placeHolder} + + + + + + {isDropdownOpen(dropdownRef) && ( + + {dropdownOptions.map((item, index) => ( + { + setItems(item); + }} + key={index} + style={{ + paddingTop: layout.spacing_x1_5, + width: "100%", + }} + > + + + + + {item} + + + {dropdownOptions.length - 1 !== index && ( + <> + + + + )} + + ))} + + )} + + + ); +}; diff --git a/packages/components/SelectionDropdown.tsx b/packages/components/SelectionDropdown.tsx index 1242b7b911..1ec85c9723 100644 --- a/packages/components/SelectionDropdown.tsx +++ b/packages/components/SelectionDropdown.tsx @@ -7,15 +7,18 @@ import { BrandText } from "./BrandText"; import { SVG } from "./SVG"; import { PrimaryBox } from "./boxes/PrimaryBox"; import { TertiaryBox } from "./boxes/TertiaryBox"; +import { Separator } from "./separators/Separator"; +import { SpacerColumn } from "./spacer"; import { useDropdowns } from "../context/DropdownsProvider"; import { + additionalRed, neutral17, - neutral33, + neutral44, + neutral55, neutral77, - neutralA3, secondaryColor, } from "../utils/style/colors"; -import { fontSemibold13, fontSemibold14 } from "../utils/style/fonts"; +import { fontMedium14, fontSemibold14 } from "../utils/style/fonts"; import { layout } from "../utils/style/layout"; interface SelectionDropdownProps { @@ -52,18 +55,33 @@ export const SelectionDropdown = ({ style, ]} > - - {label} - + + {label} + + + + * + + @@ -109,13 +127,13 @@ export const SelectionDropdown = ({ @@ -126,19 +144,21 @@ export const SelectionDropdown = ({ setItem(item); }} key={index} - style={[ - { - flexDirection: "row", - alignItems: "center", - marginBottom: layout.spacing_x1_5, - }, - ]} + style={{ + paddingTop: layout.spacing_x1_5, + width: "100%", + }} > - + {item} + + {dropdownOptions.length - 1 !== index && ( + <> + + + + )} ))} diff --git a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx index c469356ab1..cfd56a154d 100644 --- a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx +++ b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx @@ -68,7 +68,7 @@ export const LaunchpadAdditional: React.FC = () => { placeHolder="Select Option" item={isReadyForMint} setItem={setIsReadyForMint} - label="Is your collection ready for the mint? *" + label="Is your collection ready for the mint?" /> { placeHolder="Select Option" item={isDox} setItem={setIsDox} - label="Are you dox or have you planned to dox? *" + label="Are you dox or have you planned to dox?" style={{ zIndex: 1 }} /> diff --git a/packages/screens/Launchpad/components/LaunchpadDetails.tsx b/packages/screens/Launchpad/components/LaunchpadDetails.tsx index c9404ef3a6..4c3dc27b8a 100644 --- a/packages/screens/Launchpad/components/LaunchpadDetails.tsx +++ b/packages/screens/Launchpad/components/LaunchpadDetails.tsx @@ -4,6 +4,7 @@ import { View } from "react-native"; import { TextInputLaunchpadDetailsValues } from "./inputs/TextInputLaunchpadDetailsValues"; import { BrandText } from "../../../components/BrandText"; +import { MultipleSelectionDropdown } from "../../../components/MultipleSelectionDropdown"; import { SelectionDropdown } from "../../../components/SelectionDropdown"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -16,9 +17,11 @@ import { NewCollectionDetailsFormValues } from "../CreateCollection.type"; export const LaunchpadDetails: React.FC = () => { const dropdownOptions = ["Yes", "No"]; + const projectOptions = ["PFP", "Utility", "Metaverse", "P2E", "Other"]; const [isDerivativeProject, setIsDerivativeProject] = useState(""); const [isPreviouslyApplied, setIsPreviouslyApplied] = useState(""); + const [projectTypes, setProjectTypes] = useState([]); const { control } = useForm({ defaultValues: { @@ -87,15 +90,29 @@ export const LaunchpadDetails: React.FC = () => { placeHolder="Select Option" item={isDerivativeProject} setItem={setIsDerivativeProject} - label="Is your project a derivative project? *" + label="Is your project a derivative project?" + style={{ zIndex: 3 }} /> - { + // eslint-disable-next-line no-unused-expressions + projectTypes.includes(item) + ? setProjectTypes(projectTypes.filter((data) => data !== item)) + : setProjectTypes([...projectTypes, item]); + }} label="Project type:" - placeHolder="Multiple answers allowed" - name="projectType" - control={control} + sublabel={ + + + Multiple answers allowed + + + } + style={{ zIndex: 2 }} /> { placeHolder="Select Option" item={isPreviouslyApplied} setItem={setIsPreviouslyApplied} - label="Have you previously applied for the same project before? *" + label="Have you previously applied for the same project before?" + style={{ zIndex: 1 }} /> From 511776378aa065834f34cf72e3db44f0e98cfaed Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Wed, 24 Jan 2024 13:39:08 +0530 Subject: [PATCH 21/28] fix: PR comment resolved --- .../AssetsPagination/AssetsPagination.tsx | 50 +++++ .../AssetsPagination/LeftContainer.tsx | 86 ++++++++ .../AssetsPagination/PaginationProps.type.ts | 5 + .../AssetsPagination/RightContainer.tsx} | 151 ++------------ .../FilePreview/SelectedFilesPreview.tsx | 186 ------------------ .../SelectedFilesPreview/ItemView.tsx | 63 ++++++ .../SelectedFilesPreview.tsx | 104 ++++++++++ .../Launchpad/components/AssetsTab.tsx | 2 +- .../components/LaunchpadAdditional.tsx | 2 +- .../Launchpad/components/LaunchpadDetails.tsx | 16 +- .../dropdowns/DropdownProps.type.ts | 22 +++ .../components/dropdowns/LabelText.tsx | 39 ++++ .../dropdowns}/MultipleSelectionDropdown.tsx | 66 ++----- .../dropdowns}/SelectionDropdown.tsx | 63 ++---- 14 files changed, 422 insertions(+), 433 deletions(-) create mode 100644 packages/components/FilePreview/AssetsPagination/AssetsPagination.tsx create mode 100644 packages/components/FilePreview/AssetsPagination/LeftContainer.tsx create mode 100644 packages/components/FilePreview/AssetsPagination/PaginationProps.type.ts rename packages/components/{AssetsPagination.tsx => FilePreview/AssetsPagination/RightContainer.tsx} (52%) delete mode 100644 packages/components/FilePreview/SelectedFilesPreview.tsx create mode 100644 packages/components/FilePreview/SelectedFilesPreview/ItemView.tsx create mode 100644 packages/components/FilePreview/SelectedFilesPreview/SelectedFilesPreview.tsx create mode 100644 packages/screens/Launchpad/components/dropdowns/DropdownProps.type.ts create mode 100644 packages/screens/Launchpad/components/dropdowns/LabelText.tsx rename packages/{components => screens/Launchpad/components/dropdowns}/MultipleSelectionDropdown.tsx (70%) rename packages/{components => screens/Launchpad/components/dropdowns}/SelectionDropdown.tsx (70%) diff --git a/packages/components/FilePreview/AssetsPagination/AssetsPagination.tsx b/packages/components/FilePreview/AssetsPagination/AssetsPagination.tsx new file mode 100644 index 0000000000..bae8529296 --- /dev/null +++ b/packages/components/FilePreview/AssetsPagination/AssetsPagination.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { View } from "react-native"; + +import { LeftContainer } from "./LeftContainer"; +import { PaginationProps } from "./PaginationProps.type"; +import { RightContainer } from "./RightContainer"; +import { layout } from "../../../utils/style/layout"; +import { SpacerRow } from "../../spacer"; + +export const AssetsPagination = ({ + currentPage, + maxPage, + onChangePage, +}: PaginationProps) => { + const handleChangePage = (pageIndex: number) => { + if (pageIndex < 0) { + pageIndex = 0; + } else if (pageIndex >= maxPage) { + pageIndex = maxPage - 1; + } + if (pageIndex !== currentPage) { + onChangePage(pageIndex); + } + }; + + return ( + + + + + + + + ); +}; diff --git a/packages/components/FilePreview/AssetsPagination/LeftContainer.tsx b/packages/components/FilePreview/AssetsPagination/LeftContainer.tsx new file mode 100644 index 0000000000..d248ac976f --- /dev/null +++ b/packages/components/FilePreview/AssetsPagination/LeftContainer.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import { TextInput, View } from "react-native"; + +import { PaginationProps } from "./PaginationProps.type"; +import { neutral17, neutral77 } from "../../../utils/style/colors"; +import { fontSemibold14 } from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { BrandText } from "../../BrandText"; +import { SEARCH_BAR_INPUT_HEIGHT } from "../../Search/SearchBarInput"; +import { TertiaryBox } from "../../boxes/TertiaryBox"; + +export const LeftContainer = ({ + currentPage, + maxPage, + onChangePage, +}: PaginationProps) => { + return ( + + + + Page {currentPage + 1} of {maxPage} + + + + + | Go to page: + + + { + onChangePage(+value.nativeEvent.text - 1); + }} + /> + + + + ); +}; diff --git a/packages/components/FilePreview/AssetsPagination/PaginationProps.type.ts b/packages/components/FilePreview/AssetsPagination/PaginationProps.type.ts new file mode 100644 index 0000000000..19b20ea30a --- /dev/null +++ b/packages/components/FilePreview/AssetsPagination/PaginationProps.type.ts @@ -0,0 +1,5 @@ +export interface PaginationProps { + currentPage: number; + maxPage: number; + onChangePage: (page: number) => void; +} diff --git a/packages/components/AssetsPagination.tsx b/packages/components/FilePreview/AssetsPagination/RightContainer.tsx similarity index 52% rename from packages/components/AssetsPagination.tsx rename to packages/components/FilePreview/AssetsPagination/RightContainer.tsx index e591cc6b08..d6c3f10bf0 100644 --- a/packages/components/AssetsPagination.tsx +++ b/packages/components/FilePreview/AssetsPagination/RightContainer.tsx @@ -1,102 +1,19 @@ import React from "react"; -import { TextInput, TouchableOpacity, View } from "react-native"; +import { TouchableOpacity, View } from "react-native"; -import { BrandText } from "./BrandText"; -import { SVG } from "./SVG"; -import { SEARCH_BAR_INPUT_HEIGHT } from "./Search/SearchBarInput"; -import { TertiaryBox } from "./boxes/TertiaryBox"; -import { SpacerRow } from "./spacer"; -import chevronLeftDoubleSVG from "../../assets/icons/chevron-left-double.svg"; -import chevronLeftSVG from "../../assets/icons/chevron-left.svg"; -import chevronRightDoubleSVG from "../../assets/icons/chevron-right-double.svg"; -import chevronRightSVG from "../../assets/icons/chevron-right.svg"; -import { neutral17, neutral77, primaryColor } from "../utils/style/colors"; -import { fontSemibold14 } from "../utils/style/fonts"; -import { layout } from "../utils/style/layout"; +import { PaginationProps } from "./PaginationProps.type"; +import chevronLeftDoubleSVG from "../../../../assets/icons/chevron-left-double.svg"; +import chevronLeftSVG from "../../../../assets/icons/chevron-left.svg"; +import chevronRightDoubleSVG from "../../../../assets/icons/chevron-right-double.svg"; +import chevronRightSVG from "../../../../assets/icons/chevron-right.svg"; +import { primaryColor } from "../../../utils/style/colors"; +import { fontSemibold14 } from "../../../utils/style/fonts"; +import { BrandText } from "../../BrandText"; +import { SVG } from "../../SVG"; +import { TertiaryBox } from "../../boxes/TertiaryBox"; +import { SpacerRow } from "../../spacer"; -interface PaginationProps { - currentPage: number; - maxPage: number; - onChangePage: (page: number) => void; -} - -const LeftContainer = ({ - currentPage, - maxPage, - onChangePage, -}: PaginationProps) => { - return ( - - - - Page {currentPage + 1} of {maxPage} - - - - - | Go to page: - - - { - onChangePage(+value.nativeEvent.text - 1); - }} - /> - - - - ); -}; - -const RightContainer = ({ +export const RightContainer = ({ currentPage, maxPage, onChangePage, @@ -239,45 +156,3 @@ const RightContainer = ({ ); }; - -export const AssetsPagination = ({ - currentPage, - maxPage, - onChangePage, -}: PaginationProps) => { - const handleChangePage = (pageIndex: number) => { - if (pageIndex < 0) { - pageIndex = 0; - } else if (pageIndex >= maxPage) { - pageIndex = maxPage - 1; - } - if (pageIndex !== currentPage) { - onChangePage(pageIndex); - } - }; - - return ( - - - - - - - - ); -}; diff --git a/packages/components/FilePreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview.tsx deleted file mode 100644 index 3ae6859d52..0000000000 --- a/packages/components/FilePreview/SelectedFilesPreview.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { Image, TouchableOpacity, View } from "react-native"; - -import { neutral33, neutral55, secondaryColor } from "../../utils/style/colors"; -import { fontSemibold13, fontSemibold20 } from "../../utils/style/fonts"; -import { layout } from "../../utils/style/layout"; -import { LocalFileData } from "../../utils/types/files"; -import { AssetsPagination } from "../AssetsPagination"; -import { BrandText } from "../BrandText"; -import { PrimaryBox } from "../boxes/PrimaryBox"; -import { SpacerColumn } from "../spacer"; - -const RowSplitValue = 7; - -export const SelectedFilesPreview: React.FC<{ - assets: LocalFileData[]; - onSelect: (item: LocalFileData) => void; -}> = ({ assets, onSelect }) => { - const [currentPage, setCurrentPage] = useState(0); - const [totalPage, setTotalPage] = useState(1); - - const itemsPerPage = 14; // Number of items to display per page - - useEffect(() => { - if (assets) { - setTotalPage(Math.ceil(assets.length / itemsPerPage)); - } - }, [assets]); - - const indexOfLastItem = currentPage * itemsPerPage + itemsPerPage; - const indexOfFirstItem = indexOfLastItem - itemsPerPage; - const currentItems = assets.slice(indexOfFirstItem, indexOfLastItem); - - return ( - - - {currentItems.length > 0 ? ( - <> - - - {currentItems.slice(0, RowSplitValue).map((item, index) => ( - { - onSelect(item); - }} - > - - - - - - - {currentPage * itemsPerPage + index + 1} - - - - ))} - - - {currentItems.slice(RowSplitValue).map((item, index) => ( - { - onSelect(item); - }} - > - - - - - - - {currentPage * itemsPerPage + index + 1 + RowSplitValue} - - - - ))} - - - - ) : ( - - - Select assets to preview - - - )} - - {assets.length > 0 && ( - - setCurrentPage(page)} - /> - - - )} - - ); -}; diff --git a/packages/components/FilePreview/SelectedFilesPreview/ItemView.tsx b/packages/components/FilePreview/SelectedFilesPreview/ItemView.tsx new file mode 100644 index 0000000000..c200e1cf42 --- /dev/null +++ b/packages/components/FilePreview/SelectedFilesPreview/ItemView.tsx @@ -0,0 +1,63 @@ +import React from "react"; +import { TouchableOpacity, Image } from "react-native"; + +import { secondaryColor } from "../../../utils/style/colors"; +import { fontSemibold13 } from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; +import { BrandText } from "../../BrandText"; +import { PrimaryBox } from "../../boxes/PrimaryBox"; + +export const ItemView = ({ + label, + uri, + onPress, +}: { + label: number; + uri: string; + onPress: () => void; +}) => { + return ( + + + + + + + + {label} + + + + ); +}; diff --git a/packages/components/FilePreview/SelectedFilesPreview/SelectedFilesPreview.tsx b/packages/components/FilePreview/SelectedFilesPreview/SelectedFilesPreview.tsx new file mode 100644 index 0000000000..ce164b8719 --- /dev/null +++ b/packages/components/FilePreview/SelectedFilesPreview/SelectedFilesPreview.tsx @@ -0,0 +1,104 @@ +import React, { useEffect, useState } from "react"; +import { View } from "react-native"; + +import { ItemView } from "./ItemView"; +import { neutral33, neutral55 } from "../../../utils/style/colors"; +import { fontSemibold20 } from "../../../utils/style/fonts"; +import { LocalFileData } from "../../../utils/types/files"; +import { BrandText } from "../../BrandText"; +import { PrimaryBox } from "../../boxes/PrimaryBox"; +import { SpacerColumn } from "../../spacer"; +import { AssetsPagination } from "../AssetsPagination/AssetsPagination"; + +const RowSplitValue = 7; +const itemsPerPage = 14; // Number of items to display per page + +export const SelectedFilesPreview: React.FC<{ + assets: LocalFileData[]; + onSelect: (item: LocalFileData) => void; +}> = ({ assets, onSelect }) => { + const [currentPage, setCurrentPage] = useState(0); + const [totalPage, setTotalPage] = useState(1); + + useEffect(() => { + if (assets) { + setTotalPage(Math.ceil(assets.length / itemsPerPage)); + } + }, [assets]); + + const indexOfLastItem = currentPage * itemsPerPage + itemsPerPage; + const indexOfFirstItem = indexOfLastItem - itemsPerPage; + const currentItems = assets.slice(indexOfFirstItem, indexOfLastItem); + + return ( + + + {currentItems.length > 0 ? ( + <> + + {currentItems.slice(0, RowSplitValue).map((item, index) => ( + { + onSelect(item); + }} + /> + ))} + + + {currentItems.slice(RowSplitValue).map((item, index) => ( + { + onSelect(item); + }} + /> + ))} + + + ) : ( + + + Select assets to preview + + + )} + + {assets.length > 0 && ( + + setCurrentPage(page)} + /> + + + )} + + ); +}; diff --git a/packages/screens/Launchpad/components/AssetsTab.tsx b/packages/screens/Launchpad/components/AssetsTab.tsx index 47b0c9e038..f456ecc8ef 100644 --- a/packages/screens/Launchpad/components/AssetsTab.tsx +++ b/packages/screens/Launchpad/components/AssetsTab.tsx @@ -4,7 +4,7 @@ import { SafeAreaView, View } from "react-native"; import { TextInputLaunchpadAssetsValues } from "./inputs/TextInputLaunchpadAssetsValues"; import { MetadataUpdateModal } from "./modals/MetadataUpdateModal"; -import { SelectedFilesPreview } from "../../../components/FilePreview/SelectedFilesPreview"; +import { SelectedFilesPreview } from "../../../components/FilePreview/SelectedFilesPreview/SelectedFilesPreview"; import { SelectFileUploader } from "../../../components/selectFileUploader"; import { IMAGE_MIME_TYPES } from "../../../utils/mime"; import { neutral33 } from "../../../utils/style/colors"; diff --git a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx index cfd56a154d..1d1a074652 100644 --- a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx +++ b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx @@ -2,9 +2,9 @@ import React, { useState } from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; +import { SelectionDropdown } from "./dropdowns/SelectionDropdown"; import { TextInputLaunchpadAdditionalValues } from "./inputs/TextInputLaunchpadAdditionalValues"; import { BrandText } from "../../../components/BrandText"; -import { SelectionDropdown } from "../../../components/SelectionDropdown"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; import { diff --git a/packages/screens/Launchpad/components/LaunchpadDetails.tsx b/packages/screens/Launchpad/components/LaunchpadDetails.tsx index 4c3dc27b8a..95701bea92 100644 --- a/packages/screens/Launchpad/components/LaunchpadDetails.tsx +++ b/packages/screens/Launchpad/components/LaunchpadDetails.tsx @@ -2,10 +2,10 @@ import React, { useState } from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; +import { MultipleSelectionDropdown } from "./dropdowns/MultipleSelectionDropdown"; +import { SelectionDropdown } from "./dropdowns/SelectionDropdown"; import { TextInputLaunchpadDetailsValues } from "./inputs/TextInputLaunchpadDetailsValues"; import { BrandText } from "../../../components/BrandText"; -import { MultipleSelectionDropdown } from "../../../components/MultipleSelectionDropdown"; -import { SelectionDropdown } from "../../../components/SelectionDropdown"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; import { @@ -13,6 +13,7 @@ import { fontSemibold14, fontSemibold20, } from "../../../utils/style/fonts"; +import { layout } from "../../../utils/style/layout"; import { NewCollectionDetailsFormValues } from "../CreateCollection.type"; export const LaunchpadDetails: React.FC = () => { @@ -99,14 +100,15 @@ export const LaunchpadDetails: React.FC = () => { placeHolder="Select Option" items={projectTypes} setItems={(item) => { - // eslint-disable-next-line no-unused-expressions - projectTypes.includes(item) - ? setProjectTypes(projectTypes.filter((data) => data !== item)) - : setProjectTypes([...projectTypes, item]); + if (projectTypes.includes(item)) { + setProjectTypes(projectTypes.filter((data) => data !== item)); + } else { + setProjectTypes([...projectTypes, item]); + } }} label="Project type:" sublabel={ - + Multiple answers allowed diff --git a/packages/screens/Launchpad/components/dropdowns/DropdownProps.type.ts b/packages/screens/Launchpad/components/dropdowns/DropdownProps.type.ts new file mode 100644 index 0000000000..1a60de0b94 --- /dev/null +++ b/packages/screens/Launchpad/components/dropdowns/DropdownProps.type.ts @@ -0,0 +1,22 @@ +import { ViewStyle } from "react-native"; + +export interface SelectionDropdownProps { + style?: ViewStyle; + onDropdownClosed?: () => void; + dropdownOptions: string[]; + placeHolder?: string; + setItem: (item: string) => void; + item?: string; + label: string; +} + +export interface MultipleSelectionDropdownProps { + style?: ViewStyle; + onDropdownClosed?: () => void; + dropdownOptions: string[]; + placeHolder?: string; + setItems: (item: string) => void; + items: string[]; + label: string; + sublabel?: React.ReactElement; +} diff --git a/packages/screens/Launchpad/components/dropdowns/LabelText.tsx b/packages/screens/Launchpad/components/dropdowns/LabelText.tsx new file mode 100644 index 0000000000..40c6a65c17 --- /dev/null +++ b/packages/screens/Launchpad/components/dropdowns/LabelText.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import { View } from "react-native"; + +import { BrandText } from "../../../../components/BrandText"; +import { additionalRed, neutral77 } from "../../../../utils/style/colors"; +import { fontSemibold14 } from "../../../../utils/style/fonts"; +import { layout } from "../../../../utils/style/layout"; + +export const LabelText = ({ label }: { label: string }) => { + return ( + + + {label} + + + + * + + + ); +}; diff --git a/packages/components/MultipleSelectionDropdown.tsx b/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx similarity index 70% rename from packages/components/MultipleSelectionDropdown.tsx rename to packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx index ab041c9fec..6647419cae 100644 --- a/packages/components/MultipleSelectionDropdown.tsx +++ b/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx @@ -1,37 +1,27 @@ import React, { useRef } from "react"; -import { TouchableOpacity, View, ViewStyle } from "react-native"; +import { TouchableOpacity, View } from "react-native"; import chevronDownSVG from "./../../assets/icons/chevron-down.svg"; import chevronUpSVG from "./../../assets/icons/chevron-up.svg"; -import { BrandText } from "./BrandText"; -import { SVG } from "./SVG"; -import { PrimaryBox } from "./boxes/PrimaryBox"; -import { TertiaryBox } from "./boxes/TertiaryBox"; -import { Separator } from "./separators/Separator"; -import { SpacerColumn } from "./spacer"; -import { useDropdowns } from "../context/DropdownsProvider"; -import { CheckboxDappStore } from "../screens/DAppStore/components/CheckboxDappStore"; +import { MultipleSelectionDropdownProps } from "./DropdownProps.type"; +import { LabelText } from "./LabelText"; +import { BrandText } from "../../../../components/BrandText"; +import { SVG } from "../../../../components/SVG"; +import { PrimaryBox } from "../../../../components/boxes/PrimaryBox"; +import { TertiaryBox } from "../../../../components/boxes/TertiaryBox"; +import { Separator } from "../../../../components/separators/Separator"; +import { SpacerColumn } from "../../../../components/spacer"; +import { useDropdowns } from "../../../../context/DropdownsProvider"; import { - additionalRed, neutral17, neutral44, neutral55, neutral77, secondaryColor, -} from "../utils/style/colors"; -import { fontMedium14, fontSemibold14 } from "../utils/style/fonts"; -import { layout } from "../utils/style/layout"; - -interface MultipleSelectionDropdownProps { - style?: ViewStyle; - onDropdownClosed?: () => void; - dropdownOptions: string[]; - placeHolder?: string; - setItems: (item: string) => void; - items: string[]; - label?: string; - sublabel?: React.ReactElement; -} +} from "../../../../utils/style/colors"; +import { fontMedium14, fontSemibold14 } from "../../../../utils/style/fonts"; +import { layout } from "../../../../utils/style/layout"; +import { CheckboxDappStore } from "../../../DAppStore/components/CheckboxDappStore"; export const MultipleSelectionDropdown = ({ style, @@ -57,33 +47,7 @@ export const MultipleSelectionDropdown = ({ style, ]} > - - - {label} - - - - * - - + {sublabel && sublabel} diff --git a/packages/components/SelectionDropdown.tsx b/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx similarity index 70% rename from packages/components/SelectionDropdown.tsx rename to packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx index 1ec85c9723..c1266fae67 100644 --- a/packages/components/SelectionDropdown.tsx +++ b/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx @@ -1,35 +1,26 @@ import React, { useRef } from "react"; -import { TouchableOpacity, View, ViewStyle } from "react-native"; +import { TouchableOpacity, View } from "react-native"; import chevronDownSVG from "./../../assets/icons/chevron-down.svg"; import chevronUpSVG from "./../../assets/icons/chevron-up.svg"; -import { BrandText } from "./BrandText"; -import { SVG } from "./SVG"; -import { PrimaryBox } from "./boxes/PrimaryBox"; -import { TertiaryBox } from "./boxes/TertiaryBox"; -import { Separator } from "./separators/Separator"; -import { SpacerColumn } from "./spacer"; -import { useDropdowns } from "../context/DropdownsProvider"; +import { SelectionDropdownProps } from "./DropdownProps.type"; +import { LabelText } from "./LabelText"; +import { BrandText } from "../../../../components/BrandText"; +import { SVG } from "../../../../components/SVG"; +import { PrimaryBox } from "../../../../components/boxes/PrimaryBox"; +import { TertiaryBox } from "../../../../components/boxes/TertiaryBox"; +import { Separator } from "../../../../components/separators/Separator"; +import { SpacerColumn } from "../../../../components/spacer"; +import { useDropdowns } from "../../../../context/DropdownsProvider"; import { - additionalRed, neutral17, neutral44, neutral55, neutral77, secondaryColor, -} from "../utils/style/colors"; -import { fontMedium14, fontSemibold14 } from "../utils/style/fonts"; -import { layout } from "../utils/style/layout"; - -interface SelectionDropdownProps { - style?: ViewStyle; - onDropdownClosed?: () => void; - dropdownOptions: string[]; - placeHolder?: string; - setItem: (item: string) => void; - item?: string; - label?: string; -} +} from "../../../../utils/style/colors"; +import { fontMedium14, fontSemibold14 } from "../../../../utils/style/fonts"; +import { layout } from "../../../../utils/style/layout"; export const SelectionDropdown = ({ style, @@ -55,33 +46,7 @@ export const SelectionDropdown = ({ style, ]} > - - - {label} - - - - * - - + Date: Wed, 24 Jan 2024 13:46:49 +0530 Subject: [PATCH 22/28] fix: import error fixed --- .../components/dropdowns/MultipleSelectionDropdown.tsx | 4 ++-- .../Launchpad/components/dropdowns/SelectionDropdown.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx b/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx index 6647419cae..9111366bcf 100644 --- a/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx +++ b/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx @@ -1,8 +1,8 @@ import React, { useRef } from "react"; import { TouchableOpacity, View } from "react-native"; -import chevronDownSVG from "./../../assets/icons/chevron-down.svg"; -import chevronUpSVG from "./../../assets/icons/chevron-up.svg"; +import chevronDownSVG from "./../../../../../assets/icons/chevron-down.svg"; +import chevronUpSVG from "./../../../../../assets/icons/chevron-up.svg"; import { MultipleSelectionDropdownProps } from "./DropdownProps.type"; import { LabelText } from "./LabelText"; import { BrandText } from "../../../../components/BrandText"; diff --git a/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx b/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx index c1266fae67..a5b5352459 100644 --- a/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx +++ b/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx @@ -1,8 +1,8 @@ import React, { useRef } from "react"; import { TouchableOpacity, View } from "react-native"; -import chevronDownSVG from "./../../assets/icons/chevron-down.svg"; -import chevronUpSVG from "./../../assets/icons/chevron-up.svg"; +import chevronDownSVG from "./../../../../../assets/icons/chevron-down.svg"; +import chevronUpSVG from "./../../../../../assets/icons/chevron-up.svg"; import { SelectionDropdownProps } from "./DropdownProps.type"; import { LabelText } from "./LabelText"; import { BrandText } from "../../../../components/BrandText"; From 60c562de78605b4263fabd8a50500c8c04574ec0 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Wed, 24 Jan 2024 14:16:18 +0530 Subject: [PATCH 23/28] fix: dropdown exit issue fixed --- .../Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx | 1 + .../screens/Launchpad/components/dropdowns/SelectionDropdown.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx b/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx index 9111366bcf..50fd833bd9 100644 --- a/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx +++ b/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx @@ -46,6 +46,7 @@ export const MultipleSelectionDropdown = ({ }, style, ]} + ref={dropdownRef} > diff --git a/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx b/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx index a5b5352459..84ed8f9ad5 100644 --- a/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx +++ b/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx @@ -45,6 +45,7 @@ export const SelectionDropdown = ({ }, style, ]} + ref={dropdownRef} > From 5988a735f890b638e87d7a37302b5e67abb65cf4 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Wed, 24 Jan 2024 15:23:39 +0530 Subject: [PATCH 24/28] fix: fixed lint error in SelectFileUploader.web.tsx --- .../components/selectFileUploader/SelectFileUploader.web.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index 9b4225297b..3427497900 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -40,8 +40,8 @@ export const SelectFileUploader: FC = ({ const handleFiles = async (files: File[]) => { const _files = multiple ? files : [files[0]]; - let supportedFiles = [...files].filter( - (file) => mimeTypes?.includes(file.type), + let supportedFiles = [...files].filter((file) => + mimeTypes?.includes(file.type), ); if (maxUpload && supportedFiles.length) { From c625c7f371b452f2b5627bfe5e1f83d4ec359ec3 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Wed, 24 Jan 2024 16:34:02 +0530 Subject: [PATCH 25/28] fix: updated TextInput, FileSelector and Button UI to match with figma --- packages/screens/Launchpad/LaunchpadCreateScreen.tsx | 4 ++-- packages/screens/Launchpad/components/AssetsTab.tsx | 4 ++-- .../components/inputs/TextInputLaunchpadAdditionalValues.tsx | 5 ++--- .../components/inputs/TextInputLaunchpadAssetsValues.tsx | 5 ++--- .../components/inputs/TextInputLaunchpadBasicValues.tsx | 5 ++--- .../components/inputs/TextInputLaunchpadDetailsValues.tsx | 5 ++--- .../inputs/TextInputLaunchpadExistingWhitelistValues.tsx | 5 ++--- .../components/inputs/TextInputLaunchpadMetadataValues.tsx | 5 ++--- .../components/inputs/TextInputLaunchpadMintValues.tsx | 5 ++--- .../inputs/TextInputLaunchpadNewWhitelistValues.tsx | 5 ++--- .../components/inputs/TextInputLaunchpadRoyaltyValues.tsx | 5 ++--- .../components/inputs/TextInputLaunchpadTeamValues.tsx | 5 ++--- .../components/inputs/TextInputLaunchpadUrlValues.tsx | 5 ++--- .../Launchpad/components/modals/MetadataUpdateModal.tsx | 2 +- 14 files changed, 27 insertions(+), 38 deletions(-) diff --git a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx index 294cd9c9f5..19999d7753 100644 --- a/packages/screens/Launchpad/LaunchpadCreateScreen.tsx +++ b/packages/screens/Launchpad/LaunchpadCreateScreen.tsx @@ -190,7 +190,7 @@ export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { {selectedStep !== 1 && ( { @@ -200,7 +200,7 @@ export const LaunchpadCreateScreen: ScreenFC<"LaunchpadCreate"> = () => { )} { style={{ marginVertical: layout.spacing_x3, width: 416, - maxHeight: 100, }} + containerHeight={100} multiple onUpload={(files) => { setFiles(files); @@ -83,8 +83,8 @@ export const AssetsTab: React.FC = () => { style={{ marginVertical: layout.spacing_x3, width: 416, - maxHeight: 100, }} + containerHeight={100} multiple onUpload={(files) => {}} mimeTypes={IMAGE_MIME_TYPES} diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx index a82e6af414..59092e692f 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx @@ -38,9 +38,8 @@ export const TextInputLaunchpadAdditionalValues = < multiline={multiline} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx index 3327ac7e65..8b8e56ac13 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx @@ -31,9 +31,8 @@ export const TextInputLaunchpadAssetsValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx index 38ce6da799..7f9c1c1355 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx @@ -30,9 +30,8 @@ export const TextInputLaunchpadBasicValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx index d0aa10b287..d4f034c26a 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx @@ -36,9 +36,8 @@ export const TextInputLaunchpadDetailsValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx index 915daf5b6b..111c0e75df 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx @@ -31,9 +31,8 @@ export const TextInputLaunchpadExistingWhitelistValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx index 165c861ac5..94bb1983b1 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx @@ -30,9 +30,8 @@ export const TextInputLaunchpadMetadataValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx index cc23e07c04..3190cb122a 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx @@ -33,9 +33,8 @@ export const TextInputLaunchpadMintValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx index d418aa5646..475c428aaf 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx @@ -34,9 +34,8 @@ export const TextInputLaunchpadNewWhitelistValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx index d953f05e23..acb2ac9dcd 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx @@ -34,9 +34,8 @@ export const TextInputLaunchpadRoyaltyValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx index 4784c0e4dc..8b15c0cf41 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadTeamValues.tsx @@ -38,9 +38,8 @@ export const TextInputLaunchpadTandIValues = < multiline={multiline} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx index 27c57b5f73..ace3eaecd2 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx @@ -30,9 +30,8 @@ export const TextInputLaunchpadUrlValues = < control={control} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ - minHeight: 40, - }} + boxMainContainerStyle={{ minHeight: 0 }} + height={40} /> ); }; diff --git a/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx b/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx index 03803c6e3f..46efdc8c2c 100644 --- a/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx +++ b/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx @@ -84,7 +84,7 @@ export const MetadataUpdateModal: React.FC<{ }} > Date: Thu, 25 Jan 2024 12:08:00 +0530 Subject: [PATCH 26/28] fix: refactor the common components(textInput, file selector and dropdown) --- .../NetworkSelector/CustomNetworkSelector.tsx | 22 +++------ .../NetworkSelector/NetworkSelectorMenu.tsx | 11 ++++- .../SelectFileUploader.type.ts | 1 + .../SelectFileUploader.web.tsx | 10 ++++- .../Launchpad/components/AssetsTab.tsx | 7 ++- .../components/ConfigureRoyaltyDetails.tsx | 8 ++-- .../components/ExistingWhitelist.tsx | 5 ++- .../components/LaunchpadAdditional.tsx | 17 ++++--- .../Launchpad/components/LaunchpadBasic.tsx | 18 +++++--- .../Launchpad/components/LaunchpadDetails.tsx | 14 +++--- .../Launchpad/components/LaunchpadMinting.tsx | 14 +++--- .../components/LaunchpadTeamandInvestment.tsx | 14 +++--- .../Launchpad/components/NewWhitelist.tsx | 17 ++++--- .../screens/Launchpad/components/UriTab.tsx | 30 ++++++------- .../components/dropdowns/LabelText.tsx | 39 ---------------- .../dropdowns/MultipleSelectionDropdown.tsx | 6 ++- .../dropdowns/SelectionDropdown.tsx | 6 ++- ...dTeamValues.tsx => TextInputLaunchpad.tsx} | 23 +++++----- .../TextInputLaunchpadAdditionalValues.tsx | 45 ------------------- .../inputs/TextInputLaunchpadAssetsValues.tsx | 38 ---------------- .../inputs/TextInputLaunchpadBasicValues.tsx | 37 --------------- .../TextInputLaunchpadDetailsValues.tsx | 43 ------------------ ...tInputLaunchpadExistingWhitelistValues.tsx | 38 ---------------- .../TextInputLaunchpadMetadataValues.tsx | 37 --------------- .../inputs/TextInputLaunchpadMintValues.tsx | 40 ----------------- .../TextInputLaunchpadNewWhitelistValues.tsx | 41 ----------------- .../TextInputLaunchpadRoyaltyValues.tsx | 41 ----------------- .../inputs/TextInputLaunchpadUrlValues.tsx | 37 --------------- .../components/modals/MetadataUpdateModal.tsx | 17 ++++--- 29 files changed, 140 insertions(+), 536 deletions(-) delete mode 100644 packages/screens/Launchpad/components/dropdowns/LabelText.tsx rename packages/screens/Launchpad/components/inputs/{TextInputLaunchpadTeamValues.tsx => TextInputLaunchpad.tsx} (70%) delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx delete mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx diff --git a/packages/components/NetworkSelector/CustomNetworkSelector.tsx b/packages/components/NetworkSelector/CustomNetworkSelector.tsx index 906bcf63ed..39e06e15bd 100644 --- a/packages/components/NetworkSelector/CustomNetworkSelector.tsx +++ b/packages/components/NetworkSelector/CustomNetworkSelector.tsx @@ -13,9 +13,10 @@ import { layout } from "../../utils/style/layout"; import { BrandText } from "../BrandText"; import { SVG } from "../SVG"; import { TertiaryBox } from "../boxes/TertiaryBox"; +import { Label } from "../inputs/TextInputCustom"; export const CustomNetworkSelector: React.FC<{ - label?: string; + label: string; style?: StyleProp; forceNetworkId?: string; forceNetworkKind?: NetworkKind; @@ -38,27 +39,17 @@ export const CustomNetworkSelector: React.FC<{ { width: "100%", zIndex: 100, - minHeight: 50, }, ]} > - + + ; -}> = ({ forceNetworkId, forceNetworkKind, forceNetworkFeatures, style }) => { + optionsMenuwidth?: number; +}> = ({ + forceNetworkId, + forceNetworkKind, + forceNetworkFeatures, + style, + optionsMenuwidth = 172, +}) => { const { closeOpenedDropdown } = useDropdowns(); const { resetMediaPlayer } = useMediaPlayer(); const dispatch = useAppDispatch(); @@ -76,7 +83,7 @@ export const NetworkSelectorMenu: FC<{ return ( >; containerHeight?: number; + isRequired?: boolean; } diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index 3427497900..65f93c0855 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -33,6 +33,7 @@ export const SelectFileUploader: FC = ({ fileHeight = 256, containerHeight = 80, setIsLoading, + isRequired = true, }) => { const { setToastError } = useFeedbacks(); const hiddenFileInput = useRef(null); @@ -122,7 +123,14 @@ export const SelectFileUploader: FC = ({ return ( <> - {!!label && } + {!!label && ( + + )}
{ }} > - + required label="NFT.Storage API Key" placeHolder="My Awesome Collection" name="nftApiKey" @@ -77,6 +78,7 @@ export const AssetsTab: React.FC = () => { setFiles(files); }} mimeTypes={IMAGE_MIME_TYPES} + isRequired={false} /> { multiple onUpload={(files) => {}} mimeTypes={IMAGE_MIME_TYPES} + isRequired={false} /> diff --git a/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx b/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx index 0e440bec36..f51da85c9b 100644 --- a/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx +++ b/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpadRoyaltyValues } from "./inputs/TextInputLaunchpadRoyaltyValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -32,7 +32,8 @@ export const ConfigureRoyaltyDetails: React.FC = () => { - + required label="Payment Address " placeHolder="teritori123456789qwertyuiopasdfghjklzxcvbnm" name="PaymentAddress" @@ -46,7 +47,8 @@ export const ConfigureRoyaltyDetails: React.FC = () => { control={control} /> - + required label="Share Percentage " placeHolder="8%" name="SharePercentage" diff --git a/packages/screens/Launchpad/components/ExistingWhitelist.tsx b/packages/screens/Launchpad/components/ExistingWhitelist.tsx index 70aad9ad7d..83ec05f5bb 100644 --- a/packages/screens/Launchpad/components/ExistingWhitelist.tsx +++ b/packages/screens/Launchpad/components/ExistingWhitelist.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpadExistingWhitelistValues } from "./inputs/TextInputLaunchpadExistingWhitelistValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { SpacerColumn } from "../../../components/spacer"; import { ExistingWhitelistDetailsFormValues } from "../CreateCollection.type"; @@ -22,7 +22,8 @@ export const ExistingWhitelist: React.FC = () => { > - + required label="Whitelist Address" placeHolder="teritori123456789qwertyuiopasdfghjklzxcvbnm" name="whitelistAddress" diff --git a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx index 1d1a074652..013c7f71fd 100644 --- a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx +++ b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx @@ -3,7 +3,7 @@ import { useForm } from "react-hook-form"; import { View } from "react-native"; import { SelectionDropdown } from "./dropdowns/SelectionDropdown"; -import { TextInputLaunchpadAdditionalValues } from "./inputs/TextInputLaunchpadAdditionalValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -42,7 +42,8 @@ export const LaunchpadAdditional: React.FC = () => { - + required label="Please describe your artwork: " sublabel={ @@ -71,14 +72,16 @@ export const LaunchpadAdditional: React.FC = () => { label="Is your collection ready for the mint?" /> - + required label="What is your expected collection supply?" placeHolder="Type here..." name="collectionSupply" control={control} /> - + required label="What is your expected public sale mint price?" sublabel={ @@ -92,7 +95,8 @@ export const LaunchpadAdditional: React.FC = () => { control={control} /> - + required label="What is your expected mint date? " placeHolder="dd.mm.yyyy | hh:mm PM" name="mintDate" @@ -117,7 +121,8 @@ export const LaunchpadAdditional: React.FC = () => { style={{ zIndex: 1 }} /> - + required label="We'd love to offer TeritoriDAO members 10% of your whitelist supply if your project is willing. Please let us know how many whitelist spots you'd be willing to allocate our DAO: " placeHolder="0" name="whitelistSpotPercentage" diff --git a/packages/screens/Launchpad/components/LaunchpadBasic.tsx b/packages/screens/Launchpad/components/LaunchpadBasic.tsx index e0d73ba926..e0b032abac 100644 --- a/packages/screens/Launchpad/components/LaunchpadBasic.tsx +++ b/packages/screens/Launchpad/components/LaunchpadBasic.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpadBasicValues } from "./inputs/TextInputLaunchpadBasicValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { BrandText } from "../../../components/BrandText"; import { CustomNetworkSelector } from "../../../components/NetworkSelector/CustomNetworkSelector"; import { SelectFileUploader } from "../../../components/selectFileUploader"; @@ -57,29 +57,32 @@ export const LaunchpadBasic: React.FC = () => { - label="Name" placeHolder="My Awesome Collection" name="name" control={control} + required /> - label="Description" placeHolder="My Awesome Collection Description" name="description" control={control} + required /> - label="Symbol" placeHolder="Symbol" name="symbol" control={control} + required /> { mimeTypes={IMAGE_MIME_TYPES} /> - label="External Link" placeHolder="https://collection..." name="externalLink" control={control} + required /> diff --git a/packages/screens/Launchpad/components/LaunchpadDetails.tsx b/packages/screens/Launchpad/components/LaunchpadDetails.tsx index 95701bea92..184a1af948 100644 --- a/packages/screens/Launchpad/components/LaunchpadDetails.tsx +++ b/packages/screens/Launchpad/components/LaunchpadDetails.tsx @@ -4,7 +4,7 @@ import { View } from "react-native"; import { MultipleSelectionDropdown } from "./dropdowns/MultipleSelectionDropdown"; import { SelectionDropdown } from "./dropdowns/SelectionDropdown"; -import { TextInputLaunchpadDetailsValues } from "./inputs/TextInputLaunchpadDetailsValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -47,14 +47,14 @@ export const LaunchpadDetails: React.FC = () => { - label="Website Link" placeHolder="https://website..." name="websiteLink" control={control} /> - required label="Twitter Profile " placeHolder="https://twitter..." @@ -62,7 +62,7 @@ export const LaunchpadDetails: React.FC = () => { control={control} /> - required label="How many Twitter followers does your project have? " placeHolder="10,000" @@ -70,7 +70,7 @@ export const LaunchpadDetails: React.FC = () => { control={control} /> - required label="Discord name of your main contact: " placeHolder="nickname#0000" @@ -78,7 +78,7 @@ export const LaunchpadDetails: React.FC = () => { control={control} /> - required label="Main contact email address: " placeHolder="contact@email.com" @@ -117,7 +117,7 @@ export const LaunchpadDetails: React.FC = () => { style={{ zIndex: 2 }} /> - required label="Describe your project: " sublabel={ diff --git a/packages/screens/Launchpad/components/LaunchpadMinting.tsx b/packages/screens/Launchpad/components/LaunchpadMinting.tsx index c758afafe1..f075eff129 100644 --- a/packages/screens/Launchpad/components/LaunchpadMinting.tsx +++ b/packages/screens/Launchpad/components/LaunchpadMinting.tsx @@ -6,7 +6,7 @@ import { ConfigureRoyaltyDetails } from "./ConfigureRoyaltyDetails"; import { ExistingWhitelist } from "./ExistingWhitelist"; import { NavBar } from "./NavBar"; import { NewWhitelist } from "./NewWhitelist"; -import { TextInputLaunchpadMintValues } from "./inputs/TextInputLaunchpadMintValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -72,14 +72,16 @@ export const LaunchpadMinting: React.FC = () => { - + required label="Number of Tokens " placeHolder="0" name="token" control={control} /> - + required label="Unit Price" sublabel={ @@ -93,7 +95,8 @@ export const LaunchpadMinting: React.FC = () => { control={control} /> - + required label="Per Address Limit " sublabel={ @@ -107,7 +110,8 @@ export const LaunchpadMinting: React.FC = () => { control={control} /> - + required label="Start Time " placeHolder="--.--.---- --:--" name="startTime" diff --git a/packages/screens/Launchpad/components/LaunchpadTeamandInvestment.tsx b/packages/screens/Launchpad/components/LaunchpadTeamandInvestment.tsx index 31362a795b..9387576cc3 100644 --- a/packages/screens/Launchpad/components/LaunchpadTeamandInvestment.tsx +++ b/packages/screens/Launchpad/components/LaunchpadTeamandInvestment.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpadTandIValues } from "./inputs/TextInputLaunchpadTeamValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -36,7 +36,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { - required label="Describe your team: " sublabel={ @@ -65,7 +65,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { multiline /> - label="Team links and attachments " sublabel={ @@ -80,7 +80,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { control={control} /> - required label="Do you have any partners on the project? " sublabel={ @@ -95,7 +95,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { control={control} /> - required label="What have you invested in this project so far? " sublabel={ @@ -119,7 +119,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { control={control} /> - label="Investment links and attachments " sublabel={ @@ -134,7 +134,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { control={control} /> - label="Whitepaper and roadmap: " sublabel={ diff --git a/packages/screens/Launchpad/components/NewWhitelist.tsx b/packages/screens/Launchpad/components/NewWhitelist.tsx index 84e9bc1b08..8c05cb6b3d 100644 --- a/packages/screens/Launchpad/components/NewWhitelist.tsx +++ b/packages/screens/Launchpad/components/NewWhitelist.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpadNewWhitelistValues } from "./inputs/TextInputLaunchpadNewWhitelistValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { BrandText } from "../../../components/BrandText"; import { SelectFileUploader } from "../../../components/selectFileUploader"; import { Separator } from "../../../components/separators/Separator"; @@ -39,7 +39,8 @@ export const NewWhitelist: React.FC = () => { Information about your minting settings - + required label="Unit Price " placeHolder="0" name="unitPrice" @@ -53,7 +54,8 @@ export const NewWhitelist: React.FC = () => { control={control} /> - + required label="Member Limit " placeHolder="0" name="memberLimit" @@ -67,7 +69,8 @@ export const NewWhitelist: React.FC = () => { control={control} /> - + required label="Per Address Limit" placeHolder="0" name="perAddresaLimit" @@ -81,7 +84,8 @@ export const NewWhitelist: React.FC = () => { control={control} /> - + required label="Start Time " placeHolder="0" name="startTime" @@ -95,7 +99,8 @@ export const NewWhitelist: React.FC = () => { control={control} /> - + required label="End Time " placeHolder="0" name="endTime" diff --git a/packages/screens/Launchpad/components/UriTab.tsx b/packages/screens/Launchpad/components/UriTab.tsx index c2984d9038..23377231c0 100644 --- a/packages/screens/Launchpad/components/UriTab.tsx +++ b/packages/screens/Launchpad/components/UriTab.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpadUrlValues } from "./inputs/TextInputLaunchpadUrlValues"; +import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral77 } from "../../../utils/style/colors"; @@ -45,21 +45,21 @@ export const UriTab: React.FC = () => { - - + + required + label="Base Token URI" + placeHolder="ipfs://" + name="baseTokenUri" + control={control} + /> - - + + required + name="coverImageUrl" + label="Cover Image URL" + placeHolder="ipfs://" + control={control} + /> diff --git a/packages/screens/Launchpad/components/dropdowns/LabelText.tsx b/packages/screens/Launchpad/components/dropdowns/LabelText.tsx deleted file mode 100644 index 40c6a65c17..0000000000 --- a/packages/screens/Launchpad/components/dropdowns/LabelText.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import { View } from "react-native"; - -import { BrandText } from "../../../../components/BrandText"; -import { additionalRed, neutral77 } from "../../../../utils/style/colors"; -import { fontSemibold14 } from "../../../../utils/style/fonts"; -import { layout } from "../../../../utils/style/layout"; - -export const LabelText = ({ label }: { label: string }) => { - return ( - - - {label} - - - - * - - - ); -}; diff --git a/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx b/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx index 50fd833bd9..7f39545588 100644 --- a/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx +++ b/packages/screens/Launchpad/components/dropdowns/MultipleSelectionDropdown.tsx @@ -4,11 +4,11 @@ import { TouchableOpacity, View } from "react-native"; import chevronDownSVG from "./../../../../../assets/icons/chevron-down.svg"; import chevronUpSVG from "./../../../../../assets/icons/chevron-up.svg"; import { MultipleSelectionDropdownProps } from "./DropdownProps.type"; -import { LabelText } from "./LabelText"; import { BrandText } from "../../../../components/BrandText"; import { SVG } from "../../../../components/SVG"; import { PrimaryBox } from "../../../../components/boxes/PrimaryBox"; import { TertiaryBox } from "../../../../components/boxes/TertiaryBox"; +import { Label } from "../../../../components/inputs/TextInputCustom"; import { Separator } from "../../../../components/separators/Separator"; import { SpacerColumn } from "../../../../components/spacer"; import { useDropdowns } from "../../../../context/DropdownsProvider"; @@ -48,7 +48,9 @@ export const MultipleSelectionDropdown = ({ ]} ref={dropdownRef} > - + {sublabel && sublabel} diff --git a/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx b/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx index 84ed8f9ad5..292dbc1e98 100644 --- a/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx +++ b/packages/screens/Launchpad/components/dropdowns/SelectionDropdown.tsx @@ -4,11 +4,11 @@ import { TouchableOpacity, View } from "react-native"; import chevronDownSVG from "./../../../../../assets/icons/chevron-down.svg"; import chevronUpSVG from "./../../../../../assets/icons/chevron-up.svg"; import { SelectionDropdownProps } from "./DropdownProps.type"; -import { LabelText } from "./LabelText"; import { BrandText } from "../../../../components/BrandText"; import { SVG } from "../../../../components/SVG"; import { PrimaryBox } from "../../../../components/boxes/PrimaryBox"; import { TertiaryBox } from "../../../../components/boxes/TertiaryBox"; +import { Label } from "../../../../components/inputs/TextInputCustom"; import { Separator } from "../../../../components/separators/Separator"; import { SpacerColumn } from "../../../../components/spacer"; import { useDropdowns } from "../../../../context/DropdownsProvider"; @@ -47,7 +47,9 @@ export const SelectionDropdown = ({ ]} ref={dropdownRef} > - + +interface TextInputCustomProps extends Omit { label: string; placeHolder: string; - control: Control; - name: Path; - required?: boolean; + control: Control; + name: Path; sublabel?: React.ReactElement; multiline?: boolean; + required?: boolean; } -export const TextInputLaunchpadTandIValues = < - TeamandInvestmentFormValues extends FieldValues, ->({ +export const TextInputLaunchpad = ({ control, - required = false, name, label, placeHolder, sublabel, multiline = false, -}: TextInputCustomProps) => { + required = false, +}: TextInputCustomProps) => { return ( - + rules={{ required }} + labelStyle={{ maxWidth: 416 }} label={label} placeHolder={placeHolder} - name={name} sublabel={sublabel} + name={name} control={control} - multiline={multiline} variant="labelOutside" containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ minHeight: 0 }} height={40} + multiline={multiline} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx deleted file mode 100644 index 59092e692f..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAdditionalValues.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps< - NewCollectionAdditionalFormValues extends FieldValues, -> extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; - sublabel?: React.ReactElement; - multiline?: boolean; -} - -export const TextInputLaunchpadAdditionalValues = < - NewCollectionAdditionalFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, - sublabel, - multiline = false, -}: TextInputCustomProps) => { - return ( - - rules={{ required: true }} - label={label} - labelStyle={{ maxWidth: 416 }} - placeHolder={placeHolder} - name={name} - sublabel={sublabel} - control={control} - multiline={multiline} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx deleted file mode 100644 index 8b8e56ac13..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadAssetsValues.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps< - NewCollectionAssetsFormValues extends FieldValues, -> extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; -} - -export const TextInputLaunchpadAssetsValues = < - NewCollectionAssetsFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, -}: TextInputCustomProps) => { - return ( - - rules={{ required: true }} - label={label} - placeHolder={placeHolder} - name={name} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx deleted file mode 100644 index 7f9c1c1355..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadBasicValues.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps - extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; -} - -export const TextInputLaunchpadBasicValues = < - NewCollectionBasicFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, -}: TextInputCustomProps) => { - return ( - - rules={{ required: true }} - label={label} - placeHolder={placeHolder} - name={name} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx deleted file mode 100644 index d4f034c26a..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadDetailsValues.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps< - NewCollectionDetailsFormValues extends FieldValues, -> extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; - required?: boolean; - sublabel?: React.ReactElement; -} - -export const TextInputLaunchpadDetailsValues = < - NewCollectionDetailsFormValues extends FieldValues, ->({ - control, - required = false, - name, - label, - placeHolder, - sublabel, -}: TextInputCustomProps) => { - return ( - - rules={{ required }} - label={label} - placeHolder={placeHolder} - name={name} - sublabel={sublabel} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx deleted file mode 100644 index 111c0e75df..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadExistingWhitelistValues.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps< - ExistingWhitelistDetailsFormValues extends FieldValues, -> extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; -} - -export const TextInputLaunchpadExistingWhitelistValues = < - ExistingWhitelistDetailsFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, -}: TextInputCustomProps) => { - return ( - - rules={{ required: true }} - label={label} - placeHolder={placeHolder} - name={name} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx deleted file mode 100644 index 94bb1983b1..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMetadataValues.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps - extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; -} - -export const TextInputLaunchpadMetadataValues = < - NewMetadataDetailsFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, -}: TextInputCustomProps) => { - return ( - - rules={{ required: false }} - label={label} - placeHolder={placeHolder} - name={name} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x1_5, width: "100%" }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx deleted file mode 100644 index 3190cb122a..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadMintValues.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps - extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; - sublabel?: React.ReactElement; -} - -export const TextInputLaunchpadMintValues = < - NewCollectionMintFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, - sublabel, -}: TextInputCustomProps) => { - return ( - - rules={{ required: true }} - label={label} - placeHolder={placeHolder} - name={name} - sublabel={sublabel} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx deleted file mode 100644 index 475c428aaf..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadNewWhitelistValues.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps< - NewWhitelistDetailsFormValues extends FieldValues, -> extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; - sublabel?: React.ReactElement; -} - -export const TextInputLaunchpadNewWhitelistValues = < - NewWhitelistDetailsFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, - sublabel, -}: TextInputCustomProps) => { - return ( - - rules={{ required: true }} - label={label} - placeHolder={placeHolder} - name={name} - sublabel={sublabel} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx deleted file mode 100644 index acb2ac9dcd..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRoyaltyValues.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps< - NewConfigureRoyaltyDetailsFormValues extends FieldValues, -> extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; - sublabel?: React.ReactElement; -} - -export const TextInputLaunchpadRoyaltyValues = < - NewConfigureRoyaltyDetailsFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, - sublabel, -}: TextInputCustomProps) => { - return ( - - rules={{ required: true }} - label={label} - placeHolder={placeHolder} - name={name} - sublabel={sublabel} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx deleted file mode 100644 index ace3eaecd2..0000000000 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadUrlValues.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import { Control, FieldValues, Path } from "react-hook-form"; -import { TextInputProps } from "react-native"; - -import { TextInputCustom } from "../../../../components/inputs/TextInputCustom"; -import { layout } from "../../../../utils/style/layout"; - -interface TextInputCustomProps - extends Omit { - label: string; - placeHolder: string; - control: Control; - name: Path; -} - -export const TextInputLaunchpadUrlValues = < - ExistingBaseUrlFormValues extends FieldValues, ->({ - control, - name, - label, - placeHolder, -}: TextInputCustomProps) => { - return ( - - rules={{ required: false }} - label={label} - placeHolder={placeHolder} - name={name} - control={control} - variant="labelOutside" - containerStyle={{ marginBottom: layout.spacing_x2 }} - boxMainContainerStyle={{ minHeight: 0 }} - height={40} - /> - ); -}; diff --git a/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx b/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx index 46efdc8c2c..dad20cd9ee 100644 --- a/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx +++ b/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx @@ -12,7 +12,7 @@ import { fontSemibold16, fontSemibold20 } from "../../../../utils/style/fonts"; import { layout } from "../../../../utils/style/layout"; import { LocalFileData } from "../../../../utils/types/files"; import { NewMetadataDetailsFormValues } from "../../CreateCollection.type"; -import { TextInputLaunchpadMetadataValues } from "../inputs/TextInputLaunchpadMetadataValues"; +import { TextInputLaunchpad } from "../inputs/TextInputLaunchpad"; export const MetadataUpdateModal: React.FC<{ onClose: () => void; @@ -106,35 +106,40 @@ export const MetadataUpdateModal: React.FC<{ > - + required name="name" label="Name" control={control} placeHolder="Token name" /> - + required name="description" label="Description" control={control} placeHolder="Token description" /> - + required name="externalURL" label="External URL" control={control} placeHolder="https://" /> - + required name="youtubeURL" label="Youtube URL" control={control} placeHolder="https://" /> - + required name="attributes" label="Attributes" control={control} From 6e6a63effb348a2c14c0cb8dd7e491d9254babb1 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Thu, 25 Jan 2024 13:35:12 +0530 Subject: [PATCH 27/28] fix: lint error fixed --- .../components/selectFileUploader/SelectFileUploader.web.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/selectFileUploader/SelectFileUploader.web.tsx b/packages/components/selectFileUploader/SelectFileUploader.web.tsx index 65f93c0855..0aa99fc04c 100644 --- a/packages/components/selectFileUploader/SelectFileUploader.web.tsx +++ b/packages/components/selectFileUploader/SelectFileUploader.web.tsx @@ -41,8 +41,8 @@ export const SelectFileUploader: FC = ({ const handleFiles = async (files: File[]) => { const _files = multiple ? files : [files[0]]; - let supportedFiles = [...files].filter((file) => - mimeTypes?.includes(file.type), + let supportedFiles = [...files].filter( + (file) => mimeTypes?.includes(file.type), ); if (maxUpload && supportedFiles.length) { From b088f5a825117d049b92f4350a3740a3dce19067 Mon Sep 17 00:00:00 2001 From: ChiragPansuriya-iView Date: Mon, 29 Jan 2024 10:59:15 +0530 Subject: [PATCH 28/28] fix: extract TextInputLaunchpad to TextInputLaunchpadRequired and TextInputLaunchpadRequiredSublabel --- .../Launchpad/components/AssetsTab.tsx | 5 ++- .../components/ConfigureRoyaltyDetails.tsx | 8 ++--- .../components/ExistingWhitelist.tsx | 5 ++- .../components/LaunchpadAdditional.tsx | 18 ++++------ .../Launchpad/components/LaunchpadBasic.tsx | 15 ++++---- .../Launchpad/components/LaunchpadDetails.tsx | 17 ++++----- .../Launchpad/components/LaunchpadMinting.tsx | 15 ++++---- .../components/LaunchpadTeamandInvestment.tsx | 21 +++++------ .../Launchpad/components/NewWhitelist.tsx | 17 ++++----- .../screens/Launchpad/components/UriTab.tsx | 8 ++--- .../components/inputs/TextInputLaunchpad.tsx | 2 -- .../inputs/TextInputLaunchpadRequired.tsx | 34 ++++++++++++++++++ .../TextInputLaunchpadRequiredSublabel.tsx | 35 +++++++++++++++++++ .../components/modals/MetadataUpdateModal.tsx | 17 ++++----- 14 files changed, 128 insertions(+), 89 deletions(-) create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadRequired.tsx create mode 100644 packages/screens/Launchpad/components/inputs/TextInputLaunchpadRequiredSublabel.tsx diff --git a/packages/screens/Launchpad/components/AssetsTab.tsx b/packages/screens/Launchpad/components/AssetsTab.tsx index b6dae84f6b..48831938ac 100644 --- a/packages/screens/Launchpad/components/AssetsTab.tsx +++ b/packages/screens/Launchpad/components/AssetsTab.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { useForm } from "react-hook-form"; import { SafeAreaView, View } from "react-native"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequired } from "./inputs/TextInputLaunchpadRequired"; import { MetadataUpdateModal } from "./modals/MetadataUpdateModal"; import { SelectedFilesPreview } from "../../../components/FilePreview/SelectedFilesPreview/SelectedFilesPreview"; import { SelectFileUploader } from "../../../components/selectFileUploader"; @@ -58,8 +58,7 @@ export const AssetsTab: React.FC = () => { }} > - - required + label="NFT.Storage API Key" placeHolder="My Awesome Collection" name="nftApiKey" diff --git a/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx b/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx index f51da85c9b..dab4f5a7af 100644 --- a/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx +++ b/packages/screens/Launchpad/components/ConfigureRoyaltyDetails.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequiredSublabel } from "./inputs/TextInputLaunchpadRequiredSublabel"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -32,8 +32,7 @@ export const ConfigureRoyaltyDetails: React.FC = () => { - - required + label="Payment Address " placeHolder="teritori123456789qwertyuiopasdfghjklzxcvbnm" name="PaymentAddress" @@ -47,8 +46,7 @@ export const ConfigureRoyaltyDetails: React.FC = () => { control={control} /> - - required + label="Share Percentage " placeHolder="8%" name="SharePercentage" diff --git a/packages/screens/Launchpad/components/ExistingWhitelist.tsx b/packages/screens/Launchpad/components/ExistingWhitelist.tsx index 83ec05f5bb..6ee0069eea 100644 --- a/packages/screens/Launchpad/components/ExistingWhitelist.tsx +++ b/packages/screens/Launchpad/components/ExistingWhitelist.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequired } from "./inputs/TextInputLaunchpadRequired"; import { SpacerColumn } from "../../../components/spacer"; import { ExistingWhitelistDetailsFormValues } from "../CreateCollection.type"; @@ -22,8 +22,7 @@ export const ExistingWhitelist: React.FC = () => { > - - required + label="Whitelist Address" placeHolder="teritori123456789qwertyuiopasdfghjklzxcvbnm" name="whitelistAddress" diff --git a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx index 013c7f71fd..c289628cab 100644 --- a/packages/screens/Launchpad/components/LaunchpadAdditional.tsx +++ b/packages/screens/Launchpad/components/LaunchpadAdditional.tsx @@ -3,7 +3,8 @@ import { useForm } from "react-hook-form"; import { View } from "react-native"; import { SelectionDropdown } from "./dropdowns/SelectionDropdown"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequired } from "./inputs/TextInputLaunchpadRequired"; +import { TextInputLaunchpadRequiredSublabel } from "./inputs/TextInputLaunchpadRequiredSublabel"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -42,8 +43,7 @@ export const LaunchpadAdditional: React.FC = () => { - - required + label="Please describe your artwork: " sublabel={ @@ -72,16 +72,14 @@ export const LaunchpadAdditional: React.FC = () => { label="Is your collection ready for the mint?" /> - - required + label="What is your expected collection supply?" placeHolder="Type here..." name="collectionSupply" control={control} /> - - required + label="What is your expected public sale mint price?" sublabel={ @@ -95,8 +93,7 @@ export const LaunchpadAdditional: React.FC = () => { control={control} /> - - required + label="What is your expected mint date? " placeHolder="dd.mm.yyyy | hh:mm PM" name="mintDate" @@ -121,8 +118,7 @@ export const LaunchpadAdditional: React.FC = () => { style={{ zIndex: 1 }} /> - - required + label="We'd love to offer TeritoriDAO members 10% of your whitelist supply if your project is willing. Please let us know how many whitelist spots you'd be willing to allocate our DAO: " placeHolder="0" name="whitelistSpotPercentage" diff --git a/packages/screens/Launchpad/components/LaunchpadBasic.tsx b/packages/screens/Launchpad/components/LaunchpadBasic.tsx index e0b032abac..467397df87 100644 --- a/packages/screens/Launchpad/components/LaunchpadBasic.tsx +++ b/packages/screens/Launchpad/components/LaunchpadBasic.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequired } from "./inputs/TextInputLaunchpadRequired"; import { BrandText } from "../../../components/BrandText"; import { CustomNetworkSelector } from "../../../components/NetworkSelector/CustomNetworkSelector"; import { SelectFileUploader } from "../../../components/selectFileUploader"; @@ -57,28 +57,25 @@ export const LaunchpadBasic: React.FC = () => { - + label="Name" placeHolder="My Awesome Collection" name="name" control={control} - required /> - + label="Description" placeHolder="My Awesome Collection Description" name="description" control={control} - required /> - + label="Symbol" placeHolder="Symbol" name="symbol" control={control} - required /> { mimeTypes={IMAGE_MIME_TYPES} /> - + label="External Link" placeHolder="https://collection..." name="externalLink" control={control} - required + required={false} /> { - + label="Website Link" placeHolder="https://website..." name="websiteLink" control={control} + required={false} /> - + required label="Twitter Profile " placeHolder="https://twitter..." @@ -62,7 +64,7 @@ export const LaunchpadDetails: React.FC = () => { control={control} /> - + required label="How many Twitter followers does your project have? " placeHolder="10,000" @@ -70,7 +72,7 @@ export const LaunchpadDetails: React.FC = () => { control={control} /> - + required label="Discord name of your main contact: " placeHolder="nickname#0000" @@ -78,7 +80,7 @@ export const LaunchpadDetails: React.FC = () => { control={control} /> - + required label="Main contact email address: " placeHolder="contact@email.com" @@ -117,8 +119,7 @@ export const LaunchpadDetails: React.FC = () => { style={{ zIndex: 2 }} /> - - required + label="Describe your project: " sublabel={ diff --git a/packages/screens/Launchpad/components/LaunchpadMinting.tsx b/packages/screens/Launchpad/components/LaunchpadMinting.tsx index f075eff129..b04de9401c 100644 --- a/packages/screens/Launchpad/components/LaunchpadMinting.tsx +++ b/packages/screens/Launchpad/components/LaunchpadMinting.tsx @@ -6,7 +6,8 @@ import { ConfigureRoyaltyDetails } from "./ConfigureRoyaltyDetails"; import { ExistingWhitelist } from "./ExistingWhitelist"; import { NavBar } from "./NavBar"; import { NewWhitelist } from "./NewWhitelist"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequired } from "./inputs/TextInputLaunchpadRequired"; +import { TextInputLaunchpadRequiredSublabel } from "./inputs/TextInputLaunchpadRequiredSublabel"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -72,16 +73,14 @@ export const LaunchpadMinting: React.FC = () => { - - required + label="Number of Tokens " placeHolder="0" name="token" control={control} /> - - required + label="Unit Price" sublabel={ @@ -95,8 +94,7 @@ export const LaunchpadMinting: React.FC = () => { control={control} /> - - required + label="Per Address Limit " sublabel={ @@ -110,8 +108,7 @@ export const LaunchpadMinting: React.FC = () => { control={control} /> - - required + label="Start Time " placeHolder="--.--.---- --:--" name="startTime" diff --git a/packages/screens/Launchpad/components/LaunchpadTeamandInvestment.tsx b/packages/screens/Launchpad/components/LaunchpadTeamandInvestment.tsx index 9387576cc3..65bab63cb5 100644 --- a/packages/screens/Launchpad/components/LaunchpadTeamandInvestment.tsx +++ b/packages/screens/Launchpad/components/LaunchpadTeamandInvestment.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequiredSublabel } from "./inputs/TextInputLaunchpadRequiredSublabel"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral55, neutral77 } from "../../../utils/style/colors"; @@ -36,8 +36,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { - - required + label="Describe your team: " sublabel={ @@ -62,10 +61,10 @@ export const LaunchpadTeamandInvestment: React.FC = () => { placeHolder="Describe here..." name="teamDesciption" control={control} - multiline /> - + + required={false} label="Team links and attachments " sublabel={ @@ -80,8 +79,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { control={control} /> - - required + label="Do you have any partners on the project? " sublabel={ @@ -95,8 +93,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { control={control} /> - - required + label="What have you invested in this project so far? " sublabel={ @@ -119,7 +116,8 @@ export const LaunchpadTeamandInvestment: React.FC = () => { control={control} /> - + + required={false} label="Investment links and attachments " sublabel={ @@ -134,7 +132,7 @@ export const LaunchpadTeamandInvestment: React.FC = () => { control={control} /> - + label="Whitepaper and roadmap: " sublabel={ @@ -147,7 +145,6 @@ export const LaunchpadTeamandInvestment: React.FC = () => { placeHolder="Type here..." name="roadmap" control={control} - required /> diff --git a/packages/screens/Launchpad/components/NewWhitelist.tsx b/packages/screens/Launchpad/components/NewWhitelist.tsx index 8c05cb6b3d..d3e859fcf7 100644 --- a/packages/screens/Launchpad/components/NewWhitelist.tsx +++ b/packages/screens/Launchpad/components/NewWhitelist.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequiredSublabel } from "./inputs/TextInputLaunchpadRequiredSublabel"; import { BrandText } from "../../../components/BrandText"; import { SelectFileUploader } from "../../../components/selectFileUploader"; import { Separator } from "../../../components/separators/Separator"; @@ -39,8 +39,7 @@ export const NewWhitelist: React.FC = () => { Information about your minting settings - - required + label="Unit Price " placeHolder="0" name="unitPrice" @@ -54,8 +53,7 @@ export const NewWhitelist: React.FC = () => { control={control} /> - - required + label="Member Limit " placeHolder="0" name="memberLimit" @@ -69,8 +67,7 @@ export const NewWhitelist: React.FC = () => { control={control} /> - - required + label="Per Address Limit" placeHolder="0" name="perAddresaLimit" @@ -84,8 +81,7 @@ export const NewWhitelist: React.FC = () => { control={control} /> - - required + label="Start Time " placeHolder="0" name="startTime" @@ -99,8 +95,7 @@ export const NewWhitelist: React.FC = () => { control={control} /> - - required + label="End Time " placeHolder="0" name="endTime" diff --git a/packages/screens/Launchpad/components/UriTab.tsx b/packages/screens/Launchpad/components/UriTab.tsx index 23377231c0..40f3a3a038 100644 --- a/packages/screens/Launchpad/components/UriTab.tsx +++ b/packages/screens/Launchpad/components/UriTab.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { View } from "react-native"; -import { TextInputLaunchpad } from "./inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequired } from "./inputs/TextInputLaunchpadRequired"; import { BrandText } from "../../../components/BrandText"; import { SpacerColumn } from "../../../components/spacer"; import { neutral77 } from "../../../utils/style/colors"; @@ -45,16 +45,14 @@ export const UriTab: React.FC = () => { - - required + label="Base Token URI" placeHolder="ipfs://" name="baseTokenUri" control={control} /> - - required + name="coverImageUrl" label="Cover Image URL" placeHolder="ipfs://" diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpad.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpad.tsx index 4990a8389c..2357b3bbc0 100644 --- a/packages/screens/Launchpad/components/inputs/TextInputLaunchpad.tsx +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpad.tsx @@ -22,7 +22,6 @@ export const TextInputLaunchpad = ({ label, placeHolder, sublabel, - multiline = false, required = false, }: TextInputCustomProps) => { return ( @@ -38,7 +37,6 @@ export const TextInputLaunchpad = ({ containerStyle={{ marginBottom: layout.spacing_x2 }} boxMainContainerStyle={{ minHeight: 0 }} height={40} - multiline={multiline} /> ); }; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRequired.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRequired.tsx new file mode 100644 index 0000000000..81cace33b9 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRequired.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputLaunchpad } from "./TextInputLaunchpad"; + +interface TextInputCustomProps + extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + sublabel?: React.ReactElement; + multiline?: boolean; + required?: boolean; +} + +export const TextInputLaunchpadRequired = ({ + control, + name, + label, + placeHolder, + required = true, +}: TextInputCustomProps) => { + return ( + + required={required} + label={label} + placeHolder={placeHolder} + name={name} + control={control} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRequiredSublabel.tsx b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRequiredSublabel.tsx new file mode 100644 index 0000000000..197ba39c15 --- /dev/null +++ b/packages/screens/Launchpad/components/inputs/TextInputLaunchpadRequiredSublabel.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { Control, FieldValues, Path } from "react-hook-form"; +import { TextInputProps } from "react-native"; + +import { TextInputLaunchpad } from "./TextInputLaunchpad"; + +interface TextInputCustomProps + extends Omit { + label: string; + placeHolder: string; + control: Control; + name: Path; + sublabel: React.ReactElement; + required?: boolean; +} + +export const TextInputLaunchpadRequiredSublabel = ({ + control, + name, + label, + placeHolder, + sublabel, + required = true, +}: TextInputCustomProps) => { + return ( + + required={required} + label={label} + placeHolder={placeHolder} + sublabel={sublabel} + name={name} + control={control} + /> + ); +}; diff --git a/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx b/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx index dad20cd9ee..557665803b 100644 --- a/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx +++ b/packages/screens/Launchpad/components/modals/MetadataUpdateModal.tsx @@ -12,7 +12,7 @@ import { fontSemibold16, fontSemibold20 } from "../../../../utils/style/fonts"; import { layout } from "../../../../utils/style/layout"; import { LocalFileData } from "../../../../utils/types/files"; import { NewMetadataDetailsFormValues } from "../../CreateCollection.type"; -import { TextInputLaunchpad } from "../inputs/TextInputLaunchpad"; +import { TextInputLaunchpadRequired } from "../inputs/TextInputLaunchpadRequired"; export const MetadataUpdateModal: React.FC<{ onClose: () => void; @@ -106,40 +106,35 @@ export const MetadataUpdateModal: React.FC<{ > - - required + name="name" label="Name" control={control} placeHolder="Token name" /> - - required + name="description" label="Description" control={control} placeHolder="Token description" /> - - required + name="externalURL" label="External URL" control={control} placeHolder="https://" /> - - required + name="youtubeURL" label="Youtube URL" control={control} placeHolder="https://" /> - - required + name="attributes" label="Attributes" control={control}