⚗️ Features of minimalistic UI

thomaseizinger commented 5 years ago

DoD:

[x] Decide on tech
[x] Create issues to move forward and that make sense

Replaces https://github.com/comit-network/comit-rs/issues/694. Child of #3.

thomaseizinger commented 5 years ago

Given the new scope, I propose the following feature-set:

Technical decisions:

we are building a web app
we use client side routing: this should make it pretty easy to:
1. extract information from a link that contains a new swap
2. create dedicated sub pages for various elements like listing swaps and one per action
no communication between two instances of the webapp. All information exchange happens through links and the messages between COMIT nodes

Pages

A page for listing all swaps. A page with a main table component that lists swaps + the essential data, I think each row should have links with the possible actions
One page per action. The page would summarize what will be done (e.g. send an ethereum tx to the network) and provide a button to execute it. Here is where integration with metamask etc could happen
A page for creating a new swap-request link. Provides a form for filling in all the details. Also needs integration with wallets to get new addresses.
A page for receiving a new swap. Links generated by the application should point to this one, e.g. something like /swap_request?alpha_ledger=.... The page would extract the information from the link and display it to the user. The user can decide whether to accept or decline it.

Links

We could make use of a custom protocol handler: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers

Open questions:

Can you talk to localhost from JS on any website? Yes you can. Even if the application is hosted on an https page: https://softwareengineering.stackexchange.com/a/336846/161526

This means we can even take the application (which is just a frontend) and host it a bazillion times on the Internet and it can still talk to a comit-node on localhost:8080 (or whatever we choose)

D4nte commented 5 years ago

React!

bonomat commented 5 years ago

Technical decisions:

...

extract information from a link that contains a new swap

create dedicated sub pages for various elements like listing swaps and one per action

no communication between two instances of the webapp. All information exchange happens through links and the messages between COMIT nodes

Yes, that sounds like the best solution for now.

Pages

A page for listing all swaps. A page with a main table component that lists swaps + the essential data, I think each row should have links with the possible actions

This could be even a bit more extensive and split up in multiple tables, e.g. On-going trades, past trades, open swap request

One page per action. The page would summarize what will be done (e.g. send an ethereum tx to the network) and provide a button to execute it. Here is where integration with metamask etc could happen

I like that. I'm thinking of a clean page with the least amount of information and actions ala the google search landing page.

A page for creating a new swap-request link. Provides a form for filling in all the details. Also needs integration with wallets to get new addresses.

I would see the integration with the wallet as nice to have and let the user fill out everything at the beginning.

A page for receiving a new swap. Links generated by the application should point to this one, e.g. something like /swap_request?alpha_ledger=.... The page would extract the information from the link and display it to the user. The user can decide whether to accept or decline it.

I'm not sure if I understand this point right. What I was thinking of was:

source	target	source amount	target amount	requesting node	action	status
BTC	ETH	1	10	Alice@space-comit	`accept/decline`

.... | ETH | BTC | 10 | 1 | Eve@earth-comit | fund BTC | funded |

after clicking on the action next to fund BTC you jump to a page on 2

Open questions:

Can you talk to localhost from JS on any website? Yes you can. Even if the application is hosted on an https page: https://softwareengineering.stackexchange.com/a/336846/161526

This means we can even take the application (which is just a frontend) and host it a bazillion times on the Internet and it can still talk to a comit-node on localhost:8080 (or whatever we choose)

This is a good moment to think about the importance of https://github.com/comit-network/comit-rs/issues/477

thomaseizinger commented 5 years ago

This could be even a bit more extensive and split up in multiple tables, e.g. On-going trades, past trades, open swap request

Intuitively, I would have gone for only a single page now with some basic styling to differentiate past trades from active ones (past ones could be greyed out and moved to the bottom). This makes the UX better because things don't suddenly disappear because they are moved to a different tab (which is not active yet). In general I'd say tabs are more a design solution for content that is orthogonal to each other.

I would see the integration with the wallet as nice to have and let the user fill out everything at the beginning.

It does bring a nice show effect to the whole thing though! I'd say keep it in mind and try to build it. Drop it if it would be too much work.

A page for receiving a new swap. Links generated by the application should point to this one, e.g. something like /swap_request?alpha_ledger=.... The page would extract the information from the link and display it to the user. The user can decide whether to accept or decline it.

I'm not sure if I understand this point right. What I was thinking of was:

My wording was bad here, I'll improve that. The page would be the landing page that is displayed when you click on such a link. From that page, you would then be sending a swap request as instructed by the other party.

This is a good moment to think about the importance of comit-network/comit-rs#477

Is it though? We are only connecting to it locally. I think #477 will be relevant once we have shared COMIT nodes, a la COMIT as a service.

D4nte commented 5 years ago

👍

thomaseizinger commented 5 years ago

Note for myself for creating issues:

specify tech for #2: react (with hooks!), styled-components, typescript
spike for deciding on state management (redux, only component state, other solutions?)
one to set up routing with dummy pages incl. navigation + decision on routing framework (reach-router vs. react-router)
one for creating client library that talks to the COMIT node
one for investigating CORS issue when talking to the COMIT node (web app tries to talk to a server from which it was not served)
one for building page 1: listing swaps
one per action for building the action page
one for creating a new swap request link
one for the landing page of creating a new swap
one for progressive enhancement if metamask is present

LLFourn commented 5 years ago

A page for creating a new swap-request link. Provides a form for filling in all the details. Also needs integration with wallets to get new addresses

Isn't the link going to be for making a swap request? i.e. if you click the link you will send a swap request to this guy. I don't see why you would need a wallet to create the link. You only need the identity when you send the swap request at the earliest.

thomaseizinger commented 5 years ago

Totally right, no need for wallet integration :)

On Fri, 15 Feb 2019, 17:11 Lloyd Fournier <notifications@github.com wrote:

A page for creating a new swap-request link. Provides a form for filling in all the details. Also needs integration with wallets to get new addresses

Isn't the link going to be for making a swap request? i.e. if you click the link you will send a swap request to this guy. I don't see why you would need a wallet to create the link. You only need the identity when you send the swap request at the earliest.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/coblox/COMIT-i/issues/2#issuecomment-463920431, or mute the thread https://github.com/notifications/unsubscribe-auth/AFO3NSHU3i6m2kTDj-PROtkT9iOZm4GXks5vNk-MgaJpZM4akj9N .

--

TenX Pte. Ltd. (Company Registration No.: 201525701M) is a private limited company incorporated in Singapore.

The contents of this e-mail (including any attachments) are confidential. If you are not the intended recipient of this e-mail, any disclosure, copying, distribution or use of its contents is strictly prohibited, and you should immediately notify the sender and delete it (including any attachments) from your system.

None of TenX Pte. Ltd. and its related corporations (the “TenX Companies”) shall be liable for any losses arising out of any errors or omissions in the contents resulting from email transmission or any illegal or unauthorised usage or tampering of its/their email system(s). Although this email is believed to be free of any virus or other defect that might affect any computer system into which this email is received or opened, it is the sole responsibility of the recipient to ensure that this email is virus free and no responsibility is accepted by any of the TenX Companies, whether jointly or severally, for any loss or damage arising in any way from use thereof.

D4nte commented 5 years ago

LGTM, proceed with opening the various spikes to continue the discussion. Re comit-network/comit-rs#477. I suggest to rewrite this issue and clarify the motivations.

thomaseizinger commented 5 years ago

Created an initial set of issues. I consider this to be done.

D4nte commented 5 years ago

I meant comit-network/comit-rs#477 in my previous comment

comit-network / comit-i