swarmcity / SwarmCityConcept

This is the high level description of what needs to be built
9 stars 1 forks source link

As a user, I can shift my SWT between two Ethereum networks, so I can do transactions without worrying about gas prices and Ethereum’s scaling problem. #32

Open matthewcarano opened 5 years ago

matthewcarano commented 5 years ago

Abstract

Swarm City is using Ethereum to create a decentralized sharing economy.

Since Ethereum is in its early prototyping stage, transactions on the Ethereum Mainnet are slow and costly.

The Swarm City dapp and smart contracts use the Kovan network, where transaction costs are free, and transactions are mined faster.

In order to give the Swarm City ecosystem on Kovan real value, the SWT tokencontract on Mainnet will be bridged to Kovan.

SWT tokens can be sent to a contract on Mainnet. The same amount of SWT are created in a token contract on Kovan.

How it could work in practice

As it is in everything Swarm City, the user experience is most important. We don't want our users to experience the complexity of blockchain technology, or notice the bridging.

In the wallet view, a new account is shown. The first one is the "Cash" account, with Kovan SWT balance. The other one is called "Reserves". In it, the Mainnet user balance is shown.

The user can "send" tokens from their Reserves account to their Cash account.

The user can "receive" tokens in their Reserves account from their Cash account.

The user signs a token transfer transaction, which is sent to the api sendSignedTransaction function.

A pending transactionLogItem is added to the transaction history.

How it could work in theory

Swarm City uses a bridge set up by POA.

What it looks like

Userflow: https://projects.invisionapp.com/share/9YOMPH4FNEP#/screens/326102532 ( > in Invision, hold shift to see clickable areas)


route: /my-accounts

On the /my-accounts page, we see the user's two accounts; the top one is called "Cash", and below the name we see the amount of Kovan SWT the user has, in Swarm City yellow. The bottom account is called "Reserves", and below the name we see the amount of Mainnet SWT the user has, in blue.

When the user taps the "x", /hashtag-list page opens.

When the user taps the "Cash" section, /my-cash-account page opens. (see Season 0 "Pilot" for user flow: https://github.com/swarmcity/SwarmCityConcept#season-0-pilot-done)

When the user taps the "Reserves" section, /my-reserves-account page opens.

route: /my-reserves-account

On the /my-reserves-account page, we see an "x" in the top right corner. When tapped, /my-accounts page opens.

Below that is copy showing the amount of SWT as well as the letters "SWT" written in blue. The USD equivalent is shown next to an approx. equal sign, written in gray, below the blue SWT amount. Below this section is a horizontal line.

In the approximate middle of the page, we see two buttons aligned horizontally. The left button has copy that reads. "Send". The right button has copy that reads "add to reserves".

When "send" is tapped, /my-reserves-account-send page opens (see below).

When "add to reserves" is tapped, /my-reserves-account-receive opens. (see below).

In the approximate bottom third of the page there is a horizontal line, and below that the copy: "show address on etherscan.", which links to the user's public address on Etherscan. Transactions involving the Reserves account appear below it.

route:/my-reserves-account-send

On the /my-reserves-account-send page, we see an "x" in the top right corner. When tapped, the /my-reserves-account page opens.

Below that is the amount of SWT as well as the letters “SWT” written in blue. The USD equivalent is shown next to an approx. equal sign, written in gray, below the blue SWT amount. Underneath this section is a horizontal line.

Below the horizontal line are two fields stacked. The top one reads "Amount". Next to that field is the copy: "SWT". The field changes design and copy, depending on user actions. This is the default view.

(See the design changes, based on user action below.)

The bottom field reads "To". In this field a user can choose "Cash" (which would demonstrate the user's intention to send funds to the Bridge contract), or enter another Ethereum address (which would demonstrate the user's intention to send SWT to an Ethereum address). Cash is the input by default. The field changes design and copy, depending on user actions. Above is the default view.

(See the design changes, based on user action below.)

At the bottom of the page is an "x", as well as a blue arrow. When the "x" is tapped, the /my-reserves-account page opens.

When the "blue arrow" is tapped, the /my-reserves-account-send-confirm page opens. (see below)

route: /my-reserves-account-send, user dependent design and copy changes

This illustration displays changes to the "Amount" and "Cash" input fields based on user actions.

Amount Flow:

  1. When a user taps into the "Amount" field, the line beneath the field highlights blue.
  2. When a user inputs into the field, the field descriptor copy ("Amount") shifts above the field, and turns blue. The input appears in bold.
  3. When a user taps outside of the field after inputting, the line un-highlights, and the field descriptor copy turns gray.

Cash Flow:

  1. When a user taps into the "Cash" field, the line beneath the field highlights blue.
  2. When a user inputs into the field, the field descriptor copy ("To") turns blue. "Cash" disappears. The input appears in bold.
  3. When a user taps outside of the field after inputting, the line un-highlights, and the field descriptor copy ("To") turns gray.

route: /my-reserves-account-receive

On the /my-reserves-account-receive page, we see an "x" in the top right corner. When tapped, the /my-reserves-account page opens. Underneath this section is a horizontal line.

Below that is copy that says “Reserves”, with the amount of SWT as well as the letters “SWT” written in blue underneath it. The USD equivalent is shown next to an approx. equal sign below the blue SWT amount.

Underneath the amount section is a horizontal line.

Below the horizontal line is one field that reads "Amount", with the letters "SWT" beside it. The field changes design and copy, depending on user actions. Above is the default view.

(See the design changes, based on user action in this section above: route: /my-reserves-account-send, user dependent design and copy changes.)

At the bottom of the page is another "x", as well as a blue arrow.

When the "x" is tapped, the /my-reserves-wallet page opens.

When the "blue arrow" is tapped, the /my-reserves-account-receive-confirm, page opens.

route: /my-reserves-account-send-confirm

route: /my-reserves-account-send-sent

When a user taps the blue checkmark on /my-reserves-account-send, the /my-reserves-account-send-confirm page opens (blue screen above).

When the user selects the "x" on /my-reserves-account-send-confirm, the /my-reserves-account-send page opens.

When the user selects the blue checkmark on /my-reserves-account-send-confirm, the /my-reserves-account-send-sent page opens. (green screen above)

On the /my-reserves-account-send-sent page, when the user taps the gray arrow, the /my-accounts page opens.

route: /my-reserves-account-receive-confirm

route: /my-reserves-account-receive-sent

When a user taps the blue checkmark on /my-reserves-account-receive, the /my-reserves-account-receive-confirm page opens (blue screen above).

When the user selects the “x” on /my-reserves-account-receive-confirm, the /my-reserves-account-receive page opens.

When the user selects the blue checkmark on /my-reserves-account-receive-confirm, the /my-reserves-account-receive-sent page opens. (green screen above)

On the /my-reserves-account-receive-sent page, when the user taps the gray arrow, the /my-accounts page opens.

Documentation / references

na