deltadao / mvg-portal Goto Github PK

Motivation / Problem

The MVG Portal needs to be adjusted for the Handover to Gaia-X.

Heading

• Change "MVG Portal Demonstrator" to "Minimal Viable Gaia-X"
• Change "A platform to find, publish and consume Data Services in the Gaia-X Test Network." to "A portal to publish, find and consume service offerings in a Gaia-X test network".
• Remove Headline "This MVG portal demonstrator was built for the 2nd Gaia-X hackathon."
• Change DLT paragraph to "The principle of a federated data infrastructure is a perfect fit for Distributed Ledger Technology. Ocean Protocol offers a free open-source technology stack, leveraging DLT and open-source components like Kubernetes, Docker, React, etc. to give control to the consumers, service providers and federators of an ecosystem. This Minimal Viable Gaia-X demonstrator is built using Ocean Protocol components to showcase how a Minimal Viable Gaia-X and Federation Services on DLT can work, today."
• Change Video to architecture graphic -> #48 (comment)
• Change "Compute-to-Data and its benefits" to "The Compute-to-Data paradigm"
• Change "All data services" to "All service offerings"

Profile Page

• Remove "Liquidity in Own Assets"
• Remove "Total Liquidity"
• Optional Remove 3Box Profile Overall, it does not work and just include Sales and Published

Misc

• Optional Remove Currency Conversion

Appearance Settings are shown (Light/Darkmode) but have no impact on the MVG portal

Please remove the settings from the dropdown.

I see the close button is super small when the image is zoomed in on big screens, maybe we can keep it only for mobile views since for the desktops we already have the cursor showing the "zoom out" icon to go back

Originally posted by @LucaMilanese90 in #103 (comment)

For the algorithm BIDS Example Application for CtD
https://portal.minimal-gaia-x.eu/asset/did:op:8eD56443192e1160185922384F20199513FaDEC9 the whitelisted data asset associated with it BIDS Data - Heartbeat Detection Task
https://portal.minimal-gaia-x.eu/asset/did:op:16229fE8e0Ebb09224E21E3dDA23D584Ea33f201 is not shown in the GUI.

The other way around it is shown. This should be fixed to demonstrate the utility of algorithms and how they are used.

Algo:

Data:

Motivation / Problem

The footer currently is really small and cannot handle more information as is. We want to introduce some new content to the footer which would need more space.

Solution

• prepare a footer design on figma
• implement the new footer design

Motivation / Problem

We need to remove the YT video from the landing page due to privacy implications.

Solution

For now, we should simply remove the video player and use a placeholder image. We can use the CtD section image.

Notes

Since this is the only place where we actually displayed any video, we should also remove all related dependencies.

Motivation / Problem

Network metadata might be fetched / generated incorrectly. Look at the fix in
oceanprotocol/market@b2330fd

Solution

Merge/Implement the changes into the demonstrator

Motivation / Problem

We have already demonstrators with various use-cases live and in use. These demos can and should be linked from the MVG landing page. We need to prepare a basic design to integrate 2 (or more in future) portals for now.

Solution

• prepare design on figma
• implement the design

Motivation / Problem

• From an UX perspective it is not fully clear, that the image is extendable / resizeable
• The resized picture (bigger) needs better resolution

Solution

• add the zoom-in cursor on hover
• Use bigger resolution for CtD graphic

Additional context

Please add the graphic below in a comment @MeikeMolitor

Motivation / Problem

For the hackathon we decided to only use GX Chain in the MVG portal

Solution

• remove rinkeby
• remove ropsten

Motivation / Problem

Currently we are inconsistent with some wording on the demonstrator. This needs to be addressed for the MVP.

Solution

• check and adjust wording on the portal
• check and adjust wording for most used / featured services

Motivation / Problem

We want to overhaul the frontpage desing of the MVG demo portal to provide a more structured UX during the 2nd hackathon. The goal is especially to guide users to our educational resources.

Solution

The new design is prepared on Figma:
https://www.figma.com/file/ahgY3xyuL2Ac8zZkjzx43i/MVG-Portal?node-id=1%3A2
Prototype is available here:
https://www.figma.com/proto/ahgY3xyuL2Ac8zZkjzx43i/MVG-Portal?page-id=0%3A1&node-id=1%3A2&viewport=241%2C48%2C0.77&scaling=min-zoom&starting-point-node-id=1%3A2

Additional context

Some additional notes to consider:

• Focus on Desktop Design first
• Mobile design does not need to be "perfect"
• We need a way to enlarge images on click (CtD image) -> maybe this can be achieved with gatsby-image already, if not look for an alternative (e.g. some prepared "image modal" package)
• The image modal design (visible on click) is only thought of as guidance (does not need to fit 100%)
• The calls to action should link to our education hub: https://academy.delta-dao.com (will be enabled in the next days)
• youtube video is this one: https://www.youtube.com/watch?v=R49CXPTRamg

As a consumer I want to retrieve my results from the Gaia-X Portal using my SSI to sign in. For this reason I trigger the results overview right under the "Buy Compute Job" Dialogue on the right hand side.

Problem:

The results windows just closes randomly and I have a hard time to select my result in due time. This happens after just a few seconds. After opening it again, it takes a bit longer until it randomly just closes.

Reproduction:
Brave, MetaMask, Resource: https://portal.minimal-gaia-x.eu/asset/did:op:87152E582e3B05Cc6940E9763b9e0c22eA812448
This behavior can be reproduced with ANY asset in all Portals.

Summary

If access to an asset is denied the UI / error message does not reflect that

This has been fixed on the mvp branch > see #45 , fix should applied to main aswell

Current Behavior

1. Head to https://deploy-preview-73--mvg-portal-deltadao.netlify.app/asset/did:op:E800D793B1cc637431E9895fdCe649438acC3db8
2. Access to data / algo is restricted to a few accounts
3. User is able to click Buy Compute Job
4. Toast Error is shown
   

Expected Behavior

1. Head to https://deploy-preview-73--mvg-portal-deltadao.netlify.app/asset/did:op:E800D793B1cc637431E9895fdCe649438acC3db8
2. Access to data / algo is restricted to a few accounts
3. Button "Buy Compute Job" should be disabled & a message indicating restricted access should be shown
4. Toast Error should reflect that access was denied

Motivation / Problem

Have a look at oceanprotocol/market@9f2cbaa

Solution

Merge/Implement XSS fix changes into the demonstrator

For now we can remove the terms from the MVG portal. These are focussed on Ocean Market & OPF. We will come up with different terms for the hackathon or simply remove them entirely for now.

This includes:

• remove terms page (.md file)
• adjust publish form terms field to be a simple checkbox "I accept the terms and conditions" - where terms and conditions can link to the page later again

The UI refresh bug is still present. Reminder for later.

In preparation for the hackathon we should make some minor adjustments:

1. Remove "Approve Token" setting from UserPreferences dropdown
2. Change the "warning" on top of the portal to something like Development build of the MVG portal for the Gaia-X hackathon #2
3. Cookie Banner background color could be less transparent for better readability
4. We need to remove the CX network for now

Motivation / Problem

Currently, only the first step is added in Figma. But the next step(s) should be added as well as they might differ in their layout, texts need to be added and it is not clear how the faucet will be displayed yet.

Solution

• Design all steps in Figma.
• Also add final texts to all steps (#110)

Motivation / Problem

Onboarding is cumbersome for new users not used to using MetaMask or other wallets. This should be
easy, comfortable and available from the landing page within 2 minutes.

Solution

Include a three step onboarding process at the very top of the landing page, here

1. Download Metamask
2. Add the GX test network to MetaMask with a click on this icon
3. Add your address here and receive GX and Ocean tokens.
4. Ready to publish and consume.

• #110
• #111
• #112
• #113

Alternatives

Provide a step by step guide with the information and onboarding tutorial. In any case the user should never be bothered with finding the information on his/her own.

Additional context

We might need to fill and provide own faucets for this with a smaller token amount (25 to 50) and 0.2 GX.

thought(non-blocking): I prefer to work with multiple base values. When dealing with pixel-perfect positioning, we can add additional base values. But in my experience, it can be very difficult to maintain magic numbers across multiple projects. Using base values also gives non-designers a grid to follow when designing new elements.

We need to discuss this in-depth after the hackathon @moritzkirstein Let's merge this PR.

Originally posted by @oceanByte in #8 (review)

Motivation / Problem

The Featured Assets section should become more of an intro to different use-cases that are already implemented in various demos.

Solution

• change the section title to "Featured Use Cases"
• Adjust featured assets config
• Adjust names of assets to reflect the specific use case
• Change "All data sets and algorithms" to "All Data Services"

Motivation / Problem

Content on Frontpage is currently missing

Solution

Add content for all 4 sections

• Education Hub => Academy
• Gaia-X Intro
• MVG
• CtD

Motivation / Problem

We currently have a section outlining CtD benefits with a link to the academy.
This should be adjusted to be more "introductory", something along the lines of "The CtD paradigm", or "This demonstrator utilizes CtD" -> see #74 for final wording decisions.

The graphic(s) - for both paragraphs - needs to be (re)designed according to GX media guidelines.

Solution

• discuss and decide on final content
• change content
• adjust graphic design
• change graphics
• remove the cta

Motivation / Problem

Onboarding Step components should be implemented according to #107

Solution

Implement one component per step that can be displayed by the onboarding section component, see #112

• Step 1: MetaMask
• Step 2: Connect account
• Step 3: Connect to network
• Step 4: Add testnet tokens
• Step 5: Claim testnet tokens
• Step 6: Success

Additional context

• Status checks for each step should be done dynamically by the step components (e.g. check if user is connected to gx testnet)
• Step component should support optional images (screenshots) to be displayed according to figma design

Summary

The free asset did:op:59205be7D61a5137685F9f15167DD8dEA65ff351 (data is free, algo is free) can not be consumed due to an error in the frontend. Error message states "insufficient tokens".

Current Behavior

Can be reproduced on MVG and UDL portal
https://udl.portal.minimal-gaia-x.eu/asset/did:op:59205be7D61a5137685F9f15167DD8dEA65ff351
https://portal.minimal-gaia-x.eu/asset/did:op:59205be7D61a5137685F9f15167DD8dEA65ff351

Expected Behavior

Consume button should not be greyed out and error message should not be presented.

Reported by Roberto Garcia, UDL.

Motivation / Problem

We currently do not support T&C in the demo and therefore should remove this alltogether for the MVP

Solution

• Remove the /terms page
• Remove links to the /terms page
• Remove T&C related inputs
• Check if publishing still works & find a workaround if not

Motivation / Problem

As a Gaia-X Consumer I want to consume a given data service offering the very first time. Often, in most cases actually, the initial transaction fails in the frontend and I am presented a "red" error without further explanation.

Solution

Try again until it works.

Reproduction

Apple, Brave, MetaMask, Resource: https://forever.portal.minimal-gaia-x.eu/asset/did:op:17fB3b4B571351bf8368c6c7Bfe9766F548C7201

Note: It does not happen every time and on every service, but overall this is not working properly and affects user experience.

Alternatives

Improvement Proposal: Change the error message to "Transaction error. Please try again."

Alternative 2

Fix the underlying issue.

Motivation / Problem

It is a best practice to serve (meta)data from the same URL both to humans (whose browsers usually request HTML) and to machine clients (which would usually request something like JSON-LD).
The recommended way of doing so is HTTP content negotiation, via the Content-type header.
Both the frontend (this repository) and the backend should support requests for machine-friendly formats. AFAIK the current backend doesn't do so; at least a search for "Content-type" returns no result.

Solution

A request like the following should yield JSON-LD:

wget --header 'Accept: application/ld+json' -O - https://portal.minimal-gaia-x.eu/asset/did:op:A77d3A3215E904F5a8cE4e6E76C4394241917223

Motivation / Problem

The current title was discussed and should be changed

Solution

Change title to "Web3.0 Ecosystem Demonstrator"

Summary

powered by section is visible on the search page:

and on publish page:

Expected Behavior

powered by Ocean Protocol should only be visible on the frontpage for now.

Fix:

• remove powered by from other pages

Summary

white screen when clicking edit metadata: https://portal.minimal-gaia-x.eu/asset/did:op:De7A1AB5db11de81513B837f69dEC8581DDB1035

Current Behavior

white screen, nothing to see

Expected Behavior

metadata edit mask appears and metadata can be edited

Steps to Reproduce

1. go to data set: https://portal.minimal-gaia-x.eu/asset/did:op:De7A1AB5db11de81513B837f69dEC8581DDB1035
2. login metamask account: 0xa76Fa6837A6ffc9F123F2193717A5965c68B0cbA
3. click edit metadata
   

Motivation / Problem

It should be visible that the portal is a prototype instantiation. Maybe a Link to the Gaia-X Lab could be displayed, too.

Solution

Reintroduce the announcement component - displayed on all pages.

Motivation / Problem

We want to deploy the MVP on a k8 cluster. Therefore the repository needs to be containerized.

Solution

• Add Dockerfile and test image building
• Add k8 deployment file

Motivation / Problem

The CtD paragraph needs better wording and clearer link to Gaia-X.

Solution

WIP Proposal (needs to be refined/improved):
"A core concept of Gaia-X is data sovereignty. The strongest form of data sovereignty is technical data sovereignty, meaning the owner of a data service has full control of the data usage at all times. The enable this the Minimal Viable Gaia-X supports the Compute-to-Data (CtD) approach. Compute-to-Data is the functionality that solves the current trade-off between the benefits of using private data and the risks of exposing it. It allows data consumers to run compute jobs on private data while the data stays on-premise, without the need to create a copy on a third-party system."

Summary

Result links link to https://portal.minimal-gaia-x.eu/[object Object] but should link to the computation results and logs.

Current Behavior

Link of compute results on the profile history page is wrong.

Expected Behavior

Compute results are listed in history and available after signing.

Motivation / Problem

The academy section is no longer needed on the MVP

Solution

• Remove the section from the landing page
• Content can be removed, too

Motivation / Problem

Announcement Banner in live version displays "wrong" info ("Development build...")

Footer could be adjusted: "Built by deltaDAO"

Solution

Adjust text content of announcement & footer

Motivation / Problem

When the user is connected through a different network compared to the asset displayed, the button to automatically switch to the correct network looks like it can't be clicked.

Motivation / Problem

We want to implement a new onboarding feature according to #107

Solution

Add a new section to the landing page which will hold the n-step onboarding as defined in #107
Section should be composed of

• Intro header (text)
• progress bar
• current step component (see #113)
• step "pagination"

Additional Context

• The section should be a new component
• Design can be found in #110
• The current step # should be stored in and retrieved from local storage (maybe make use of existing UserPreferences provider)
• Enable support for n steps (easy addition / deletion of steps in the future)

Motivation / Problem

Currently an announcement related to the hackathons is displayed. Not needed in the final MVP

Solution

• Remove the announcement banner on top of the page
• We should keep the structure in the content json for further announcements, but put placeholders as content

Motivation / Problem

Current title ("MVG Portal Demonstrator") is not sufficient for the MVP version

Solution

Change to "Minimal Viable Gaia-X"

Motivation / Problem

CTAs (Buttons) look a little off in hover state. Reason is that the "shadow" simply gets smaller instead of the button getting "pressed" down and therefore minimizing shadow.

Solution

Maybe add movement to the button to imitate "press"

Alternatives

Other solutions are welcome if they work ;P

Motivation / Problem

We want to display some quotes regarding the MVG on the portal landing page.

Solution

• prepare design on figma
• implement design

Keys are used by React to identify changes in a given iterable (e.g. array) that we want to render. So keys need to provide elements a fixed identity. Identity is given via a unique identifier (in comparison to the other elements in the iterable).

We don’t recommend using indexes for keys if the order of items may change
React Documentation on Keys

The suggested solution of using something like portal-link-${i} does not work as the issue happens when the list is changed (reordered, new entries added before last ones, entries deleted). So it would cause the same issue as all elements share the same prefix while the index changes.

Generate a unique id for every item and use it as key when rendering the list (see medium article)
See Index as a key is an anti-pattern

Using index as the key is considered an anti-pattern. Therefore, I recommend updating the given iterable and adding an id property populated with a random value using nanoid.

Exception from the rule

In some cases using an index might be okay though if we do not want to create ids for all iterables that we want to render. For this case all three statements must be true:

1. the list and items are static–they are not computed and do not
2. the items in the list have no ids;
3. the list is never reordered or filtered.

An in-depth description of how keys are used in React here: https://reactjs.org/docs/reconciliation.html#recursing-on-children

Originally posted by @oceanByte in #58 (comment)

Motivation / Problem

development currently has some changes needed on the main branch before upcoming hackathon

Solution

Prepare merge of development into main & fix any merge conflicts in PR

Motivation / Problem

It is currently difficult for users to find all the resources of the Minimal Viable Gaia-X as the links are not being presented on the landing page. This should be as easy as possible for users and first-time visitors.

Solution

Include links to the following resources in the top and footer navigation:

• Catalogue https://catalogue.minimal-gaia-x.eu/
• Exchange Logging https://exchangelog.minimal-gaia-x.eu/
• Stats Page https://stats.minimal-gaia-x.eu/
• Onboarding https://onboarding-portal.lab.gaia-x.eu/
• Additonal on footer: Link to the Gaia-X Page https://gaia-x.eu/

Challenge: Link texts need to very brief, so i propose:

Catalogue, Logging, Stats, Identity for the top navigation. I am aware that this might create issues with the mobile navigation thus moving the links in the upper section of the page might be an alternative to the top navigation.

Top navigation

Alternative

Footer (does not replace the top nav, we need the links in the top nav)

Alternatives

Create a section like the features assets section that leads to the additional pages and teasers them briefly and describes their functionality.

Additional context

User centricity needs to be in focus. As we lack a structured user testing panel we need to change the perspective to the one of a newcomer frequently.

Motivation / Problem

The Gaia-X "X image" needs to be removed on the MVP

Solution

• Remove the image without replacing it for now, displaying only text.
• Create and add info graphic regarding the Gaia-X Web3.0 ecosystem [optional]

Motivation / Problem

Academy content being removed leaves the site feeling "empty" now that we are used to the blue "hero banner".

Solution

Reintroduce the design of the blue hero banner again, without filling it with academy content or CTA for now.

• Design on figma
• Implement design

Additional context

Figma: https://www.figma.com/file/g3UYzab0B5h4ddS3pbLKlD/MVG-Portal?node-id=64%3A50

Motivation / Problem

We are currently working on the onboarding feature (#107). User journey, wireframes, and requirements are defined, but the texts are missing yet. The texts are a key component of this feature. They guide the user and explain what is happening in the background (make the invisible visible).

Solution

• Add texts to the Figma Design and ask for early feedback.
• Ask for final feedback on the texts once the feature is enabled.