Verification: Make verified project traceable

[MoeNick]

Me as PM in io, want to automatically go through a process and make may project treacable (make new campaign) in Trace to get funds.

[MoeNick]

[mohammadranjbarz]

• [x] #2436 Implement create campaign endpoint for verified projects (Estimation 5)
• [x] #2437 Implement inquiry if user can create verified campaign (sending ipfs link and txHash)

[markoprljic]

Here's a prototype with new design https://www.figma.com/proto/FBqHg0UfeuaIueDEZG0tBS/Giveth.io?page-id=6055%3A2055&node-id=6055%3A3372&viewport=457%2C-452%2C0.3704049289226532&scaling=min-zoom&starting-point-node-id=6055%3A3372

[MoeNick]

Thanks @markoprljic for being JIT. I just wanna mention @WhyldWanderer here to get to know things about this task.

[aminlatifi]

Here's a prototype with new design https://www.figma.com/proto/FBqHg0UfeuaIueDEZG0tBS/Giveth.io?page-id=6055%3A2055&node-id=6055%3A3372&viewport=457%2C-452%2C0.3704049289226532&scaling=min-zoom&starting-point-node-id=6055%3A3372

It's designed to be one of giveth.io pages, but that's cool. We can start making giveth.io and giveth trace have similar design. I think we should implement it in giveth trace application and try to share component between projects. @mateodaza @markoprljic @MoeNick @RamRamez @MohammadPCh

[RamRamez]

Here's a prototype with new design https://www.figma.com/proto/FBqHg0UfeuaIueDEZG0tBS/Giveth.io?page-id=6055%3A2055&node-id=6055%3A3372&viewport=457%2C-452%2C0.3704049289226532&scaling=min-zoom&starting-point-node-id=6055%3A3372

@markoprljic There is a "GIV" icon that is repeated in the background, but I can't download it and Figma gives me an error "Export Failed!". It would be great if you could send me the SVG file of that icon.

[MoeNick]

@divine-comedian you can your comments here. @RamRamez appreciate if u can provide us a link to start testing.

[divine-comedian]

Yes specifically in the text where it says `Please confirm your project to get traceable' this should read 'Please confirm your project to make it traceable'

Some stuff around the font-weight and also missing context for project information - it's a bit hard to explain without being able to take a screenshot of what I'm exactly trying to talk about.

[divine-comedian]

Okay! MoeNick passed me the netlify link so I have some more concrete changes - mostly to the CSS. If we could modify this form to be more consistent with the style of the cards we already use in Giveth.io - Perhaps something more like this -

Removing the top-margin from the from the photo baner, rounding some corners, adjusting text

Below are the values I used for the attached photo - these are just suggestions

body {
    margin: 0;
    padding: 0;
    background-color: #c6dfe3;
}

Background-color is Botticeli which lines up with the neutral colors outlined in the branding guide

And Small modifications to the left hand text

#verification .custom-title {
    font-family: TeX-Gyre-Adventor,sans-serif;
    font-size: 40px;
    line-height: 61px;
    color: #fed670;
    text-align: left;
    letter-spacing: 0.8px;
    margin-bottom: 20px;
}

then adding some small 12px border radius to the card and the top of the image element, also removing the top margin from the photo so it lines up with the card, instead of leaving a small gap.

Another Issue is that we're missing a column in the middle describing what each block of text is relating to the project we want to make traceable

[MoeNick]

https://develop.giveth.io/verification/[slug] Slug should be an IO project on staging.

[MoeNick]

@RamRamez @mohammadranjbarz Cant get profile email address, location and picture.

[mohammadranjbarz]

@RamRamez @mohammadranjbarz Cant get profile email address, location and picture.

I send the email already https://feathers.develop.giveth.io/verifiedCampaigns?slug=testing-another-project&userAddress=0x826976d7c600d45fb8287ca1d7c76fc8eb732030

and I sent another PR to send location as well Giveth/feathers-giveth#596

[MoeNick]

@mohammadranjbarz when I go through this https://develop.giveth.io/verification/myfirstprojectonio and made my project traceable, why can't find it in traceable projects on io, its only 1 project there. Do we need to change any verification parameter on our side?

[mohammadranjbarz]

@mohammadranjbarz when I go through this https://develop.giveth.io/verification/myfirstprojectonio and made my project traceable, why can't find it in traceable projects on io, its only 1 project there. Do we need to change any verification parameter on our side?

@mateodaza You call trace.giveth.io in your staging ENV, please use this url in giveth.io staging, for getting verified projects https://feathers.develop.giveth.io/campaigns?verified=true

[mohammadranjbarz]

@RamRamez @MoeNick Now we send the location and the url fields when project verification

[MoeNick]

@WhyldWanderer @divine-comedian This is ready on develop, would u pls test it brutally! use below address. https://develop.giveth.io/verification/[slug] Slug should be an IO project on staging.

[divine-comedian]

wow this thing is amazing! nice work you guys!!

so on entry I entered the slug of a project I own on next.giveth.io and the first loading page says ...

this threatens to be a bit confusing because I think that I've done something wrong ... I'm already connected with the project owner wallet and I have entered with the correct project slug.. is there a way to auto-detect or give the user a clear indication of which button they need to press.

I would suggest some placement and text modifications -

change the switch wallet button to CONNECT WALLET since it just is loading onboardJS to connect to a wallet. Make it smaller and tuck it in the top right corner. Change the main text to - "Connect to the wallet address you used to make your project. When you're ready, click Next." and then just have one button with NEXT to provide a clear flow.

Very likely you'll have to have a clickable ? symbol or something next to wallet address explaining what a wallet address is and where to find it, maybe 1 sentence of text and a link to the giveth docs.. I can draft these..

The 'report an issue' template is a bit bare bones, we could provide a better space for the user to clearly define any issues they find...

some small things on the text as well, for headers like 'Make your project traceable' and Confirm your Project to make it traceable.. some inconsistency with capitalizations.. I can submit a PR for this if you can point me to the component...

and finally I go through the rest of the flow and end up on giveth TRACE with my project(campaign) but as a user I have no clue what to do now.. I would suggest on entry from project verification to provide a one-time modal explaining how I can interact with my new traceable project and provide links to documentation..

[MoeNick]

I completely support this idea @divine-comedian , I have problems with this flow too. what do you think @RamRamez I think we can move it to done, and create new issue for it.

[RamRamez]

I think auto detecting if user connected correct wallet, is not a good idea and it may not have a good UX. Consider the user opens the url for the first time and we suddenly show him a notification that the wallet address is wrong. We should let the user take action then validate him.

And about "Connect wallet" button, we already have it. If the MetaMask is locked, we show the user "Connect wallet". Actually we have three scenarios: 1. No default wallet 2. Default wallet is set but locked 3. Default wallet is set and active Each scenario is different here.

Improving the text and titles and guiding user through this journey is great.

[divine-comedian]

okay so if a wallet is already connected then CONNECT WALLET becomes NEXT? If that's the case then we could keep that button front and center. We should have the switch wallet button top-right and a bit smaller