Open Edition
@@ -216,7 +217,7 @@ const CategoryStep = (props: { confirm: (category: MetadataCategory) => void })
disabled={true}
className="type-btn"
size="large"
- onClick={() => props.confirm(MetadataCategory.Audio)}
+ onClick={() => props.confirm(AuctionCategory.Collection)}
>
Collection (Coming Soon)
@@ -231,21 +232,27 @@ const CategoryStep = (props: { confirm: (category: MetadataCategory) => void })
};
const SelectItemsStep = (props: {
- attributes: IMetadataExtension;
- setAttributes: (attr: IMetadataExtension) => void;
+ attributes: AuctionState;
+ setAttributes: (attr: AuctionState) => void;
confirm: () => void;
}) => {
- const [mainFile, setMainFile] = useState
()
- const [coverFile, setCoverFile] = useState()
- const [image, setImage] = useState("")
+ const items = useUserArts();
+ const [selectedItems, setSelectedItems] = useState>(new Set(props.attributes.items.map(item => item.pubkey.toBase58())));
useEffect(() => {
props.setAttributes({
...props.attributes,
- files: []
+ // TODO: add items
+ items: items.filter(item => selectedItems.has(item.pubkey.toBase58()))
})
- }, [])
+ }, [selectedItems]);
+ const breakpointColumnsObj = {
+ default: 4,
+ 1100: 3,
+ 700: 2,
+ 500: 1
+ };
return (
<>
@@ -256,6 +263,37 @@ const SelectItemsStep = (props: {
+
+ {items.map(m => {
+ const id = m.pubkey.toBase58();
+ const isSelected = selectedItems.has(id);
+
+ const onSelect = () => {
+ let list = [...selectedItems.keys()];
+ if (props.attributes.category !== AuctionCategory.Collection) {
+ list = [];
+ }
+
+ isSelected ?
+ setSelectedItems(new Set(list.filter(item => item !== id))) :
+ setSelectedItems(new Set([...list, id]));
+ };
+
+ return ;
+ })}
+
>
);
};
-const InfoStep = (props: {
- attributes: IMetadataExtension;
- setAttributes: (attr: IMetadataExtension) => void;
+const TermsStep = (props: {
+ attributes: AuctionState;
+ setAttributes: (attr: AuctionState) => void;
confirm: () => void;
}) => {
const [creators, setCreators] = useState>([]);
@@ -288,76 +325,61 @@ const InfoStep = (props: {
return (
<>
- Describe your creation
+ Specify the terms of your auction
- Provide detailed description of your creative process to engage with
- your audience.
+ Provide detailed auction parameters such as price, start time, etc.
-
- {props.attributes.image && (
-
- )}
-
-
+
+
+
@@ -368,81 +390,18 @@ const InfoStep = (props: {
onClick={props.confirm}
className="action-btn"
>
- Continue to royalties
+ Continue to Review
>
);
};
-const RoyaltiesStep = (props: {
- attributes: IMetadataExtension;
- setAttributes: (attr: IMetadataExtension) => void;
+const ReviewStep = (props: {
confirm: () => void;
-}) => {
- const file = props.attributes.image;
-
- return (
- <>
-
- Set royalties for the creation
-
- A royalty is a payment made by the seller of this item to the creator.
- It is charged after every successful auction.
-
-
-
-
- {file && (
-
- )}
-
-
-
-
-
-
-
-
- >
- );
-};
-
-const LaunchStep = (props: {
- confirm: () => void;
- attributes: IMetadataExtension;
+ attributes: AuctionState;
connection: Connection;
}) => {
- const files = props.attributes.files || [];
- const metadata = {
- ...(props.attributes as any),
- files: files.map(f => f?.name),
- };
const [cost, setCost] = useState(0);
useEffect(() => {
const rentCall = Promise.all([
@@ -457,46 +416,27 @@ const LaunchStep = (props: {
)
]);
- getAssetCostToStore([
- ...files,
- new File([JSON.stringify(metadata)], 'metadata.json'),
- ]).then(async lamports => {
- const sol = lamports / LAMPORT_MULTIPLIER;
+ // TODO: add
+ }, [setCost]);
- // TODO: cache this and batch in one call
- const [mintRent, metadataRent, nameSymbolRent] = await rentCall;
-
- const uriStr = 'x';
- let uriBuilder = '';
- for (let i = 0; i < MAX_URI_LENGTH; i++) {
- uriBuilder += uriStr;
- }
-
- const additionalSol =
- (metadataRent + nameSymbolRent + mintRent) / LAMPORT_MULTIPLIER;
-
- // TODO: add fees based on number of transactions and signers
- setCost(sol + additionalSol);
- });
- }, [...files, setCost]);
+ let item = props.attributes.items?.[0];
return (
<>
- Launch your creation
+ Review and list
- Provide detailed description of your creative process to engage with
- your audience.
+ Review your listing before publishing.
- {props.attributes.image && (
+ {item?.info && (
)}
@@ -504,9 +444,8 @@ const LaunchStep = (props: {
{cost ? (
- Pay with SOL
-
-
>
@@ -543,14 +474,14 @@ const LaunchStep = (props: {
};
const WaitingStep = (props: {
- mint: Function,
+ createAuction: () => Promise,
progress: number,
- confirm: Function,
+ confirm: () => void,
}) => {
useEffect(() => {
const func = async () => {
- await props.mint()
+ await props.createAuction()
props.confirm()
}
func()
@@ -563,9 +494,9 @@ const WaitingStep = (props: {
percent={props.progress}
/>
- Your creation is being uploaded to the decentralized web...
+ Your creation is being listed with Metaplex...
- This can take up to 1 minute.
+ This can take up to 30 seconds.
)
}
@@ -574,7 +505,7 @@ const Congrats = () => {
return <>
- Congratulations! Your creation is now live.
+ Congratulations! Your auction is now live.
diff --git a/packages/metavinci/src/views/styles.less b/packages/metavinci/src/views/styles.less
index f6be266..e176782 100644
--- a/packages/metavinci/src/views/styles.less
+++ b/packages/metavinci/src/views/styles.less
@@ -166,6 +166,7 @@
.action-field {
display: flex;
flex-direction: column;
+ text-align: left;
.field-title {
text-align: left;
@@ -185,9 +186,29 @@
margin: 12px 0px;
}
+ .field-info {
+ text-align: left;
+
+ color: rgba(255, 255, 255, 0.7);
+ }
+
margin-bottom: 30px;
}
+.field-date {
+ background: #282828;
+ border-radius: 8px;
+ padding: 10px;
+ border-width: 0px;
+ margin-bottom: 10px;
+}
+
+.selected-card {
+ border-width: 3px;
+ border-color: #5870EE !important;
+ border-style: solid;
+}
+
.royalties-input {
width: 100%;
height: 50px;