Concept design: Wyvern OTC

[protinam]

Note: this is an easier task than #1 - please do one at a time, and if you're not familiar with Wyvern start with this one.

What

The Wyvern Protocol supports the sale of any Ethereum asset — check out all the assets listed on the Wyvern Exchange. The Exchange UI, however, is designed for power user usage and complex asset specifications and isn't well-suited for quick trustless OTC trading.

Design a set of mobile/desktop UI mockups and UX flow descriptions for a one-page Wyvern OTC application, with flow well-optimized for prenegotiated OTC transactions.

An example concept design can be found here, although your submission should be more extensive.

Submit your concept design as a PR to this repository, following the folder structure of the template linked above, including functionality descriptions and UI mockups.

Both some prior graphic design experience and a basic knowledge of Ethereum will probably be required to complete this task.

Requirements

(suggested minimum, creative freedom welcome)

1. The UX should have the following flow, on a single page:
   1. Users selects whether to buy or sell an asset
   2. User specifies the asset they wish to buy or sell
      1. Buy-side: user selects schema (e.g. CryptoKitties) then asset (e.g. NFT ID)
      2. Sell-side: user selects schema (e.g. CryptoKitties) then picks from assets they own (displayed in a grid)
   3. User specifies a token, price, and expiration
   4. User clicks "Confirm", depositing the asset if necessary and placing the order
   5. Redirect to an order-specific page displaying the asset, price, and expiration. User can copy URL to send to their trading partner.
2. The asset page should have two-click buy functionality
   1. User clicks "buy", prompting a confirmation modal which checks balances
   2. User clicks "confirm" assuming all is order, then sends the transaction through Metamask
3. Mobile-friendly design, elements should resize naturally

For design inspiration, take a look at the Airswap Token Trader - although the flow will be very different. If you're not familiar with Wyvern yet, play around with the Wyvern Exchange; this is a simplified version of the Exchange UX.

Extension Ideas

1. Additional options: user can select a specific buyer, user can select auction instead of fixed-price sale, user can select whether or not to broadcast their order publicly (or have a secret link, the default).

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 150.0 DAI (150.0 USD @ $1.0/DAI) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $7,732.52 more funded OSS Work available on the Gitcoin Issue Explorer

[protinam]

Hiya @tntengen - let me know if this issue makes sense & if you have any questions.

[gitcoinbot]

@tntengen Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• warning (3 days)
• auto removal (6 days)

[gitcoinbot]

@tntengen Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• warning (3 days)
• auto removal (6 days)

[gitcoinbot]

@Jbry123 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[Jbry123]

I think i will be able to do both tickets, if not with some help or handing it off to someone else.

[gitcoinbot]

@Jbry123 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@Jbry123 due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[vs77bb]

Hi @Jbry123 we're going to 'Stop Work' on this issue due to inactivity and send it back to 'Open'. If you end up working this issue, please click 'Start Work' again and provide more updates on your progress!

[willsputra]

I can give this a shot if no one's on it 🙂

[Jbry123]

Yeah go ahead! To reiterate from the funder, this ticket is for a graphic design mock up, if you want to code it it might be a different ticket.

[willsputra]

@Jbry123 noted thanks! yep will do a design mockup for this one

@protinam is this bounty still available? shows up as 'Soft Expired' on Gitcoin. I think I can come up with a draft by tomorrow.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

1. @willsputra

has committed to working on this project to be completed 9 hours ago.

@protinam, please see the below comments / questions regarding approach for this ticket from the bounty hunter(s):

• @willsputra: Will provide a first draft today!

[willsputra]

@protinam first try :)
https://xd.adobe.com/view/0d5197f9-95ab-4f05-58c0-76a37aee1408-7b60/

will provide the other pages (sell-side, mobile size) soon. let me know if you have any feedback :)

[protinam]

@willsputra Great start! The bounty is definitely still available, I don't see any way to "extend" it on Gitcoin but I'll pay out the already-escrowed amount.

A few questions/notes:

• On the order page (page 5), can we add a few-sentence English description of what executing the order will do, e.g "If you match this order, you will pay 0.1 ETH and immediately receive Kitty #932" (in addition to the existing fields)? The more clarity for the user the better.
• In the dropdown (page 3), for sell-side orders, we can identify assets the user already owns and show them first in the menu.
• Looking forward to the notifications/account mockup (especially for mobile). Wyvern supports both buy and sell-side orders (as you already have mocked up), so we can show users any offers made for assets they own in some kind of thumbnail format, which they could then go to and match if desired.

[Jbry123]

@protinam I’m still interested in coding up his designs if you want to create another ticket, thanks!

[willsputra]

@protinam Thanks for the feedback! Here's the updated one:
https://xd.adobe.com/view/0d5197f9-95ab-4f05-58c0-76a37aee1408-7b60/

p1: Home
p2-5: Buy-side Flow
p6: Notifications
p7-9: Sell-side Flow

To-do: Mobile pages, Account

[protinam]

@protinam Thanks for the feedback! Here's the updated one (...)

Thanks, looks great - looking forward to seeing the mobile versions & account page.

@protinam I’m still interested in coding up his designs if you want to create another ticket, thanks!

Indeed, once the UI designs are done I will post a separate bounty.

[gitcoinbot]

@willsputra Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[willsputra]

(for gitcoinbot) working on it! will get the mobile and account ready by tomorrow

[willsputra]

mobile version:
https://xd.adobe.com/view/eafa4f9a-9c54-43dc-45b1-b9e1754a42b0-9ccb/

[willsputra]

also added the first draft of accounts (p10):
https://xd.adobe.com/view/0d5197f9-95ab-4f05-58c0-76a37aee1408-7b60/

[protinam]

mobile version:
https://xd.adobe.com/view/eafa4f9a-9c54-43dc-45b1-b9e1754a42b0-9ccb/

Looks good, I wonder if we should consider swiping navigation instead of popups - what do you think?

Also interested to see the account page on mobile, that's pretty important - perhaps the user can swipe left-right between asset types and scroll up/down through assets they own?

also added the first draft of accounts (p10):
https://xd.adobe.com/view/0d5197f9-95ab-4f05-58c0-76a37aee1408-7b60/

Great start, can we add:

• Simple text-only search bar to filter assets
• Clickable link on each asset next to the name to redirect to an external view (in this case, the CryptoKitties kitty page)
• Sort dropdown menu ("most recent", "most valuable", etc)

[gitcoinbot]

@willsputra Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@willsputra due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[willsputra]

on it

[vs77bb]

👍 👍 👍

[gitcoinbot]

@willsputra Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[willsputra]

sorry been a bit busy these past few weeks.

Great start, can we add:
Simple text-only search bar to filter assets
Clickable link on each asset next to the name to redirect to an external view (in this case, the CryptoKitties kitty page)
Sort dropdown menu ("most recent", "most valuable", etc)

added here
https://xd.adobe.com/view/0d5197f9-95ab-4f05-58c0-76a37aee1408-7b60/screen/3681ab1e-80f4-49c2-b7fc-94c3f0804bfc/Web-1920-14

Looks good, I wonder if we should consider swiping navigation instead of popups - what do you think?
Also interested to see the account page on mobile, that's pretty important - perhaps the user can swipe left-right between asset types and scroll up/down through assets they own?

exploring this too. I'll get back to you later today!

[gitcoinbot]

@willsputra Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@willsputra due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• warning (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days