Skip to content

Commit c18215d

Browse files
WaDadidoun0izn0izhthieu1110
authored
feat(nft-launchpad): Add Collection Creation form front (#1477)
Co-authored-by: n0izn0iz <n0izn0iz@users.noreply.github.com> Co-authored-by: Yo HA <tronghieu.ha@gmail.com>
1 parent eaa00f6 commit c18215d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+4315
-345
lines changed

‎assets/icons/cross.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117
"graphql-request": "^5",
118118
"html-to-draftjs": "^1.5.0",
119119
"immutable": "^4.0.0",
120+
"keccak256": "^1.0.6",
120121
"kubernetes-models": "^4.3.1",
121122
"leaflet": "^1.9.4",
122123
"leaflet.markercluster": "^1.5.3",

‎packages/components/FilePreview/SelectedFilesPreview/ItemView.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { FC } from "react";
2+
import { TouchableOpacity, Image, StyleProp, ViewStyle } from "react-native";
3+
4+
import { BrandText } from "../../BrandText";
5+
import { PrimaryBox } from "../../boxes/PrimaryBox";
6+
7+
import { neutral77, secondaryColor } from "@/utils/style/colors";
8+
import { fontSemibold11, fontSemibold13 } from "@/utils/style/fonts";
9+
import { layout } from "@/utils/style/layout";
10+
11+
export const itemSize = 120;
12+
export const ItemView: FC<{
13+
label: string;
14+
subLabel?: string;
15+
uri: string;
16+
onPress: () => void;
17+
style?: StyleProp<ViewStyle>;
18+
}> = ({ label, subLabel, uri, onPress, style }) => {
19+
return (
20+
<TouchableOpacity
21+
style={[
22+
{
23+
height: itemSize,
24+
width: itemSize,
25+
justifyContent: "flex-end",
26+
alignItems: "center",
27+
marginHorizontal: layout.spacing_x1,
28+
},
29+
style,
30+
]}
31+
onPress={onPress}
32+
>
33+
<PrimaryBox
34+
style={{
35+
height: itemSize,
36+
width: itemSize,
37+
}}
38+
>
39+
<Image
40+
source={{ uri }}
41+
style={{
42+
height: itemSize - 2,
43+
width: itemSize - 2,
44+
borderRadius: 8,
45+
}}
46+
/>
47+
</PrimaryBox>
48+
49+
<PrimaryBox
50+
style={{
51+
paddingHorizontal: layout.spacing_x1,
52+
paddingVertical: layout.spacing_x0_5,
53+
width: itemSize - 10,
54+
bottom: -20,
55+
alignItems: "center",
56+
justifyContent: "center",
57+
position: "absolute",
58+
}}
59+
>
60+
<BrandText
61+
style={[fontSemibold13, { color: secondaryColor }]}
62+
numberOfLines={1}
63+
>
64+
{label}
65+
</BrandText>
66+
{subLabel && (
67+
<BrandText
68+
style={[fontSemibold11, { color: neutral77 }]}
69+
numberOfLines={1}
70+
ellipsizeMode="middle"
71+
>
72+
{subLabel}
73+
</BrandText>
74+
)}
75+
</PrimaryBox>
76+
</TouchableOpacity>
77+
);
78+
};

‎packages/components/FilePreview/SelectedFilesPreview/SelectedFilesPreview.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { FC } from "react";
2+
import { View } from "react-native";
3+
4+
import { itemSize, ItemView } from "./ItemView";
5+
import { BrandText } from "../../BrandText";
6+
import { PrimaryBox } from "../../boxes/PrimaryBox";
7+
8+
import { DeleteButton } from "@/components/FilePreview/DeleteButton";
9+
import { GridList } from "@/components/layout/GridList";
10+
import { neutral33, neutral55 } from "@/utils/style/colors";
11+
import { fontSemibold20 } from "@/utils/style/fonts";
12+
import { layout } from "@/utils/style/layout";
13+
import { LocalFileData } from "@/utils/types/files";
14+
15+
export const SelectedFilesPreview: FC<{
16+
files: LocalFileData[];
17+
onPressItem: (file: LocalFileData, itemIndex: number) => void;
18+
onPressDeleteItem: (itemIndex: number) => void;
19+
}> = ({ files, onPressItem, onPressDeleteItem }) => {
20+
return (
21+
<View
22+
style={{
23+
justifyContent: "flex-end",
24+
height: "100%",
25+
}}
26+
>
27+
{files.length ? (
28+
<GridList<LocalFileData>
29+
data={files}
30+
keyExtractor={(item) => item.url}
31+
renderItem={({ item, index }, elemWidth) => (
32+
<View
33+
style={{
34+
height: itemSize + 6, // +6 to show DeleteButton
35+
justifyContent: "flex-end",
36+
}}
37+
>
38+
<DeleteButton
39+
onPress={() => onPressDeleteItem(index)}
40+
style={{ top: 0, right: 0 }}
41+
/>
42+
<ItemView
43+
uri={URL.createObjectURL(item.file)}
44+
label={`#${index + 1}`}
45+
subLabel={item.file.name}
46+
onPress={() => {
47+
onPressItem(item, index);
48+
}}
49+
style={{ width: elemWidth }}
50+
/>
51+
</View>
52+
)}
53+
minElemWidth={itemSize}
54+
gap={layout.spacing_x2_5}
55+
noFixedHeight
56+
/>
57+
) : (
58+
<PrimaryBox
59+
style={{
60+
height: 267,
61+
width: "100%",
62+
justifyContent: "center",
63+
alignItems: "center",
64+
borderColor: neutral33,
65+
}}
66+
>
67+
<BrandText style={[fontSemibold20, { color: neutral55 }]}>
68+
Selected files preview
69+
</BrandText>
70+
</PrimaryBox>
71+
)}
72+
</View>
73+
);
74+
};

‎packages/components/NetworkSelector/NetworkSelectorWithLabel.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { FC, useState } from "react";
2+
import { StyleProp, View, ViewStyle } from "react-native";
3+
4+
import { NetworkSelectorMenu } from "./NetworkSelectorMenu";
5+
import { BrandText } from "../BrandText";
6+
import { SVG } from "../SVG";
7+
import { TertiaryBox } from "../boxes/TertiaryBox";
8+
import { Label } from "../inputs/TextInputCustom";
9+
10+
import chevronDownSVG from "@/assets/icons/chevron-down.svg";
11+
import chevronUpSVG from "@/assets/icons/chevron-up.svg";
12+
import { NetworkIcon } from "@/components/NetworkIcon";
13+
import { CustomPressable } from "@/components/buttons/CustomPressable";
14+
import { SpacerRow } from "@/components/spacer";
15+
import { useDropdowns } from "@/hooks/useDropdowns";
16+
import { useSelectedNetworkInfo } from "@/hooks/useSelectedNetwork";
17+
import { NetworkFeature, NetworkKind } from "@/networks";
18+
import { neutral17, neutral77, secondaryColor } from "@/utils/style/colors";
19+
import { fontSemibold14 } from "@/utils/style/fonts";
20+
import { layout } from "@/utils/style/layout";
21+
22+
export const NetworkSelectorWithLabel: FC<{
23+
label: string;
24+
style?: StyleProp<ViewStyle>;
25+
forceNetworkId?: string;
26+
forceNetworkKind?: NetworkKind;
27+
forceNetworkFeatures?: NetworkFeature[];
28+
}> = ({
29+
style,
30+
forceNetworkId,
31+
forceNetworkKind,
32+
forceNetworkFeatures,
33+
label,
34+
}) => {
35+
const [isDropdownOpen, setDropdownState, ref] = useDropdowns();
36+
const [hovered, setHovered] = useState(false);
37+
const selectedNetworkInfo = useSelectedNetworkInfo();
38+
39+
return (
40+
<View
41+
style={[
42+
style,
43+
{
44+
width: "100%",
45+
zIndex: 100,
46+
},
47+
]}
48+
ref={ref}
49+
>
50+
<CustomPressable
51+
onHoverIn={() => setHovered(true)}
52+
onHoverOut={() => setHovered(false)}
53+
onPress={() => setDropdownState(!isDropdownOpen)}
54+
>
55+
<Label style={{ marginBottom: layout.spacing_x1_5 }} hovered={hovered}>
56+
{label}
57+
</Label>
58+
59+
<TertiaryBox
60+
style={[
61+
{
62+
width: "100%",
63+
height: 40,
64+
flexDirection: "row",
65+
paddingHorizontal: 12,
66+
backgroundColor: neutral17,
67+
alignItems: "center",
68+
},
69+
hovered && { borderColor: secondaryColor },
70+
]}
71+
>
72+
<View
73+
style={{
74+
flexDirection: "row",
75+
justifyContent: "space-between",
76+
alignItems: "center",
77+
flex: 1,
78+
}}
79+
>
80+
<View
81+
style={{
82+
flexDirection: "row",
83+
alignItems: "center",
84+
}}
85+
>
86+
<NetworkIcon
87+
networkId={selectedNetworkInfo?.id || ""}
88+
size={16}
89+
/>
90+
<SpacerRow size={1} />
91+
92+
<BrandText
93+
style={[
94+
fontSemibold14,
95+
{
96+
marginRight: layout.spacing_x1,
97+
color: selectedNetworkInfo ? secondaryColor : neutral77,
98+
},
99+
]}
100+
>
101+
{selectedNetworkInfo?.displayName}
102+
</BrandText>
103+
</View>
104+
105+
<SVG
106+
source={isDropdownOpen ? chevronUpSVG : chevronDownSVG}
107+
width={16}
108+
height={16}
109+
color={secondaryColor}
110+
/>
111+
</View>
112+
</TertiaryBox>
113+
114+
{isDropdownOpen && (
115+
<NetworkSelectorMenu
116+
onSelect={() => {}}
117+
optionsMenuwidth={416}
118+
style={{ width: "100%", marginTop: layout.spacing_x0_75 }}
119+
forceNetworkId={forceNetworkId}
120+
forceNetworkKind={forceNetworkKind}
121+
forceNetworkFeatures={forceNetworkFeatures}
122+
/>
123+
)}
124+
</CustomPressable>
125+
</View>
126+
);
127+
};

‎packages/components/inputs/FileUploaderSmall/FileUploaderSmall.web.tsx‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import React, {
66
useRef,
77
useState,
88
} from "react";
9-
import { View } from "react-native";
9+
import { StyleSheet, View } from "react-native";
1010

1111
import {
1212
FileUploaderSmallHandle,
@@ -56,6 +56,8 @@ export const FileUploaderSmall = forwardRef<
5656
const hiddenFileInputRef = useRef<HTMLInputElement>(null);
5757
const [hovered, setHovered] = useState(false);
5858
const [addedFiles, setAddedFiles] = useState<LocalFileData[]>([]);
59+
const flatBoxStyle = StyleSheet.flatten(boxStyle);
60+
const minHeight = flatBoxStyle.minHeight || 80;
5961

6062
useImperativeHandle(forwardRef, () => ({
6163
resetFiles: () => {
@@ -163,41 +165,47 @@ export const FileUploaderSmall = forwardRef<
163165
style={[
164166
{
165167
width: "100%",
166-
minHeight: 80,
168+
minHeight,
167169
flex: 1,
168170
paddingHorizontal: layout.spacing_x1_5,
169-
alignItems: "center",
170-
flexDirection: "row",
171-
justifyContent: "center",
172171
borderRadius: 12,
173172
borderWidth: 1,
174173
},
175174
hovered && { borderColor: secondaryColor },
176175
boxStyle,
177176
]}
178177
>
179-
<View style={{ height: 32, width: 32 }}>
180-
<SVGorImageIcon
181-
icon={filesCount > 0 ? filesSVG : addSVG}
182-
iconSize={32}
183-
/>
184-
</View>
185-
186-
<SpacerRow size={1} />
187-
<BrandText
188-
style={[fontSemibold14, { color: secondaryColor }]}
189-
numberOfLines={1}
178+
<View
179+
style={{
180+
alignItems: "center",
181+
flexDirection: "row",
182+
justifyContent: "center",
183+
minHeight,
184+
}}
190185
>
191-
{!multiple && filesCount && filesCount === addedFiles.length
192-
? addedFiles[0].file.name
193-
: !multiple && !filesCount
194-
? "Select file"
195-
: multiple && filesCount
196-
? `${pluralize("file", filesCount, true)} selected`
197-
: multiple && !filesCount
198-
? "Select files"
199-
: ""}
200-
</BrandText>
186+
<View style={{ height: 32, width: 32 }}>
187+
<SVGorImageIcon
188+
icon={filesCount > 0 ? filesSVG : addSVG}
189+
iconSize={32}
190+
/>
191+
</View>
192+
193+
<SpacerRow size={1} />
194+
<BrandText
195+
style={[fontSemibold14, { color: secondaryColor }]}
196+
numberOfLines={1}
197+
>
198+
{!multiple && filesCount && filesCount === addedFiles.length
199+
? addedFiles[0].file.name
200+
: !multiple && !filesCount
201+
? "Select file"
202+
: multiple && filesCount
203+
? `${pluralize("file", filesCount, true)} selected`
204+
: multiple && !filesCount
205+
? "Select files"
206+
: ""}
207+
</BrandText>
208+
</View>
201209
</PrimaryBox>
202210
)}
203211

0 commit comments

Comments
 (0)