museum-of-war / web Goto Github PK

Because we are preparing new drops we will have a lot of NFTs on this page soon. So we need to add a switcher between compact and detail views and fix some other points on this page. I described everything in detail in Figma.

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=887%3A34101

This button is essential!

Additional information is here: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/website?node-id=38%3A6107
After the drop we need to add this banner (1) and this sticky footer (2). Both buttons will move users to your flow.

It's very important to make clear for users how to buy NFTs

Need to add a new page.
This page has an unusual behaviour with horizontal scrolling on desktop. But I'm sure there are some JS-solutions to implement this. Everything is described in Figma. And there is a video, just in case, with a short explanation (video is in Ukrainian): https://drive.google.com/file/d/1Y6ee3-MukfJEGerLWq7b9XhmW5yCwUFz/view?usp=sharing
I alsways available to discuss and look at the front-end's draft: @serhiirevva in TG.

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=1168%3A41209

We need to add the 'About us' page and make some additional changes on the 'Home' page.
This task includes 4 subtasks

1. updating the header
2. updating the footer
3. updating the 'Home' page
4. adding the 'About us' page
   It's important that the 'Home' page must look like it's shown in this task (without other sections and with the correct order of sections).
   Other details are described in Figma.
   Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=1823%3A53086

We need to:

• Add previews (.webp files as example) for Auction (as for Warline)
• Reduce file sizes of animations (if it possible) and CPU usage

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=3101%3A75290
We need to add the link to the Github page with the list of wallets and a transactions history on the 'About' page.

For the Auction:

• Change this color around the container to # 212121
• Change the default filter to All Types
• For sold add the word Sold (instead of the line with the bet and time)

For the footer:

• Fix this padding/margin (on any layout in the Figma you can see that it is larger)
• Check why the text here is not centered vertically (it seems to be slightly shifted to the top, a couple of pixels)
  

• add owner when auction ends
• add price in $
• add bids history
• add tokens from auction to "My NFTs"

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=1042%3A35617

We need to be prepared for a new longer description structure.
Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2432%3A71285

Need to add the ability to buy a particular NFT for, at least, 3rd drop.
Changes belong to the 'Home', 'Warline' and 'Warline details' pages.
Figma with additional comments: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2728%3A70102

We need to add the 'Artists' section.
Everything is described in the comments in Figma.
Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2449%3A67686

We need to update a few things on the My tokens page. I'm currently not able to see this page. So firstly, just check if those issues still exist. All of them I showed in Figma as comments. All of the opened comments are our tasks to fix. Comments belong to desktop, tablet, and mobile views

Here is the link: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/website?node-id=36%3A11336
Just zoom out to see all screens from the screenshot.

We're launching the process of upgrading NFTs. When a user has more than 1 edition of the same NFT, we group them and provide users a possibility to upgrade them and get new unique NFTs for that.
Details are described in Figma.
There are 4 sub-tasks:

1. Add groups on the My NFTs page
2. Add an entry point to upgrading on the My NFT details page (should have been developed within the Task 1)
3. Add the Upgrade page where a user can select the level to which he wants to upgrade.
4. Succes state after upgrading

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=1200%3A46909

Steps to reproduce:

• open Warline
• click "See Details" on first element
• click next (right arrow)

Expected result: image will change
Actual result: image remains the same

Query parameters must be used to open modal window with description by item number.
https://metahistory.gallery/warline/4 - this link must open new page with info about NFT.
See "Warline details": https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=881%3A58546

When a user selects a particular collection on the 'Auction' page, we start showing only auctions from this collection and add the block with information about this collection. This block will be optional. The first collection that will have such a block, it's the 'Avatars' collection. We can start preparing the layout for this and the actual content will be prepared a bit later.
Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=1883%3A56312

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2793%3A73318

We need to add the possibility to generate a QR code to enter museums.
So, we need to update:

• footer
• my NFT details page
  And add the 'verify QR code' page.
  When we have a list of museums we will ad it too. For now, we can just hide that button.
  Additional comments are in Figma

We need to create documentation and improve code style. We have a lot of commits from different developers. In addition, sometimes new people come. Now it is very difficult to understand the current code. We need to make it easier somehow...

Button don't disappear if you click on the video (to reproduce you should click on the video, but outside the button).

We need to make some updates for the Auction:

1. Change All Categories to All Collections
2. Add the state for the 'Auction details' page when there are no bids and only a fixed price. In this case, the Buy Now button should call the permission for payment without the 'Place bid' modal.
3. Update the 'Editions' sections. Now we show there how many editions are left for sale.
   Details are in Figma.
   Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=1717%3A52249

We need to check and fix a few components. All fixes I showed and described in Figma as comments. All of the opened comments are our tasks to fix.
Here is the link on the mobile styleguide: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/website?node-id=28%3A5298
Try to implement a hover for outlined buttons via box-shadow to not move the text inside.

We need to update the 'Auction' page to make the structure clear and provide the ability to see the list of all collections.
Details are described in Figma.
Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2415%3A65071

We need to add 2 new sections on the main page and change the place of the 'In press' section.
In these new blocks, there are links to other websites. All of them are attached in the comments in Figma.
Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2773%3A73541

These two articles we need to add to the 'In press' section:

1. https://www.forbes.com/sites/abrambrown/2022/03/26/exclusive-inside-the-ukrainian-governments-nft-sale-and-the-3-young-entrepreneurs-who-helped-create-it/?sh=755e00d32ea6
2. https://www.theblockcrypto.com/linked/146645/ukraines-digital-transformation-ministry-approves-charity-nft-project-benefiting-war-efforts

We need to create a bit custom page for the 'Kalush' auction. There is only 1 art, so it will be a hybrid page: the collection page + the auction details page.
Details are in Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2464%3A70586

We need to update a few things on the Warline page. All of them I showed in Figma as comments. All of the opened comments are our tasks to fix. Comments belong to desktop, tablet, and mobile views.

Here is the link: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/website?node-id=38%3A6107
Just zoom out to see all screens from the screenshot.

Steps to reproduce:

• click "See Details" on the last event of the day (like №23):
  
• click next button (right arrow)

Actual result: error (Application error: a client-side exception has occurred (see the browser console for more information).)

Expected result: next event is shown

Related to last subtask of #32 - we need to add the remaining components for the "My NFTs" page ("See all", "Buy more")

Added the page for artists where they can contact us if they want to take a part in creating art for our museum.
Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2745%3A71808

We also can change the redirect from the current sub-domain art.metahistory.gallery to this page.

All events from 24 (day 2) redirect to the wrong event details page on mobile, we need to fix it!

Before launching an auction's functionality it's important to improve our signing-in experience.
I described everything in detail in Figma. Apart from the current WalletConnect solution, we need to add MetaMask as it is on the biggest marketplaces like OpenSea and Rarible. And add a proxy modal where we can explain for users that they need ETH wallets to do it.

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=887%3A32207

In this first task, 5 subtasks are gathered. They are described in detail in Figma. Also, please, pay attention to the comments in Figma. I fixed important details in this way.

• Updates in the header
• Updates in the footer
• Updates on My NFTs page
• Transforming the modal window with NFT details to a page (this variation is for the Warline section)
• #89

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=881%3A50250

Please, pay attention to the layout and the design. It's not an MVP anymore. We are creating a Museum. So we need to make our front-end similar to the design as much as you can :)

It seems that GoogleBot cannot see our pages - most likely, this is due to the fact that instead of links we use transitions when clicking on elements. Moreover, onClick transitions do not allow links to be opened in a new window, as could be done by clicking the middle mouse button or the right mouse button. We should replace page transitions from onClick to links (Link from 'next/link') and use passHref to pass the href to the <a> tag.
Example:

Within this task, we need to add:

1. the section with partners
2. the counter of total raised funds
3. the counter of days of the war
4. Update the first screen on the 'Home' page.
   Details are described in Figma (and in comments in Figma)

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=1660%3A49819

Need to load image by animationSrc after preview was loaded (update src onLoad)

We're adding the auction feature to the website.
I divided this task into 5 pieces:

1. Updating the header
2. Updating the Home page (all animations are still being prepared)
3. Adding the Auction list page
4. Adding the Auction page (pay attention that the layout of this page is very similar to the layout of the Warline details page from the TASK 1. Please, sync among front-end developers to not make such kind of page from scratch twice.
5. Adding the Place bid modal window
   Everything else is described in Figma.
   Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=1042%3A35617

We need to improve metadata for better parsing:

Metadata can also be added for Warline and auction items.

(see ogp.me)

Example:

If you open Home page in a new tab, then warline-animation.gif and auction.gif won't be post-loaded.

We need to update a few things in 2 payment modal windows. All of them I showed in Figma as comments. All of the opened comments are our tasks to fix. Comments belong to desktop, tablet, and mobile views

Here is the link: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/website?node-id=257%3A17574
Just zoom out to see all screens from the screenshot.

We are preparing the NFT collection as a sub-project of Meta History. For this, we need to create a small website that will be a platform to play with tokens.
Here you can read a short presentation about the collection: https://www.figma.com/file/rQK4q0VwVQNumQBoj545yO/NFT?node-id=484%3A39208

Here you can find the design (desktop + mobile) for the website: https://www.figma.com/file/rQK4q0VwVQNumQBoj545yO/NFT?node-id=484%3A39207
All the details are described in Figma. All the components and styles are prepared above the screens.

The website includes:

• Main page
• My NFTs page
• NFT details page
• Get a basic NFT modal window
• Change NFT's property modal window
• Got a new value modal window

We need to check our website in different browsers and fix some bugs.
Here is an example for Safari - an empty space can be seen:

We need to fix one thing in this modal on desktop and change the view on tablet and mobile. All fixes I showed and described in Figma as comments. All of the opened comments are our tasks to fix.

Here is the link: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/website?node-id=43%3A14358
Just zoom out to see all screens from the screenshot.

• paragraphs must be added
• urls should be clickable
• emails should be clickable (href="mailto:...")

Now we have alt="Logo" for all images. We need to use better alt text.

On the 'Warline' page we need to make some updates:

1. Add filters and sorting
2. Update the text in the sticky footer (on both pages)
3. Update the text in the 'Buy NFTs' modal window
   Everything is described in detail in Figma.
   Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=2114%3A58849

It is worth adding another server to be able to check the changes before merging into the main branch.
We can try to set up GitHub Pages (as far as I understand, it will be absolutely free) or set up Azure / AWS server.

See design in Figma

Related to #36

There are some things that need to be fixed:

1. There should be 3 NFT per line
2. The width of this column should be smaller. And the width of the right part, on the contrary, is greater than necessary
3. The banner in Figma looks a little different. It has a shadow and is indented from the bottom of the screen. (and on the main page the same, on the main page you also need to fix the look of this sticky banner)
4. Here some extra padding / margin

Figma: https://www.figma.com/file/7ZAqEFONiXTkT4wbtDR8Lv/metahistory.galery-website?node-id=887%3A34101