swarmcity/SwarmCityConcept

As a user I get notified, so I can quickly navigate to the actionnable items.

Opened this issue · 0 comments

kikipluche commented

Abstract:

Swarm City makes it easy for users to interact with Ethereum, without them knowing it.

Most of the navigation is done through the notification list. Users are only prompted to interact with it when there are actionable items.

How it could work:

A list of notifications is kept on a user's client. The API stores new incoming notifications until they are delivered to the client.

A notification has a timestamp, avatarhash, username, description, a click-through link, and a status.

Status options are "unread", "read", or "archived".

A notification's status changes after the user leaves the notification view from "unread" to "read".

Read notifications are shown for 24hrs, and after that moved to an "archive" list.

From the archive list, a user can delete their notifications.

Notifications are not encrypted, as they only serve to notify publicly visible transactions / actions.

Chat notifications will not show specific content.
Example:

{    
   'type': 'B', // A=Account, B=Wallet, C=Deal, D=Chat
   'operation': 'add', // add, remove, update'
   'copy': '+12 SWT received'
   'link': '/my-wallet',
   'dateTime': dateTime,
   'avatarhash': avatarhash,
   'username': 'Kiki Pluche',
   'status': 'unread', // unread, read, archived,
}

Spam prevention:
Notifications can only be sent / received in empty slots the clients create when they "expect" a notification. All other incoming notifications will be ignored.

Triggers for Notifications

In general we only send a notification for actions the user did not trigger themself. The notifications are divided into types/categories:

A) ACCOUNT-notification
These notifications all link to /my-profile/ on click.

  • Account created (This could teach the user about the notification functionality even though there's no real notification yet.)
  • Account is restored

B) WALLET-notification:
These notifications all link to /my-wallet/ on click.

  • Balance changed
    • Received
  • Failed send transaction with error

C) DEALS-notifications:
These notifications all link to the relevant deal on click.

  • Deal state change updates
    • New reply on request
    • Replier selected
    • Replier declined
    • Replier funds
    • Deal payout
    • Deal conflict
    • Deal cancelled

D) CHAT-notifications
These notifications all link to the relevant chat view on click.

  • Incoming chat message
  • Chat member added (hashtagmaintainer in case of conflict)

How the API could work:

New notifications are stored on the API with the user's address as a unique key. When the client connects, the notifications are updated in LocalStorage. When the notification is delivered to the client, it is removed from the API.

API Category: Messaging

Subscription UserNotification
Parameters
deviceId
address

Returns
the new notification list

Event
userNotificationChanged

Returns
the new notification listitem

What it looks like:

Userflow: https://invis.io/ABGM89SX3V5#/300150129_-Hashtag--contractaddress-_ACCOUNT_NOTIF-Flow_I
( > in Invision, hold shift to see clickable areas)

When a notification is received, the user will see the notification-icon next to his avatar (bottom right corner). The notification-icon has 2 appearances:

  • a regular notification: grey4 circle with a number (the number of new notifications)
  • a chat-notification: blue circle with chat-icon

Tapping the icon itself will lead to the notifications-view (the notifications-view can also be accessed by tapping the notifications-button on /my-profile/).

On the notifications-view, the user sees:

  • a black X-mark (back-button)
  • a list of read and unread notifications, chronologically ordered with the newest on top (this will automatically put the unread notifications on top).
  • a mini-button, copy "see archive"

An unread notification consists of:

  • Datetime
  • avatar of the person doing the action describe in the notification
  • description
  • blue dot (indicating that the notification is unread)
  • a grey dividerline

An read notification consists of the same things, with two exceptions:

  • the description is in grey2 instead of grey4
  • the dot is now grey2 instead of blue

Tapping the black X-mark will send the user back to where he came from. Tapping one of the notifications will lead to where the action is that this notification describes.

In the example the notification "Brenda reacted to your request “A ride to the coffee shop on 3th and Grand Av anyone?”." will lead to the deal “A ride to the coffee shop on 3th and Grand Av anyone?”.

Tapping the "see archive" button will lead to the notifications-archive-view.

The notifications-archive-view consists of:

  • a back-arrow-icon (back-button)
  • a list of archived notifications. Each notification consists of:
    • Datetime
    • avatar of the person doing the action describe in the notification
    • description
    • blue delete-icon
    • a grey dividerline

Tapping the back-arrow-icon will lead the user back to the notifications-view. Tapping the delete-icon will remove this notification from the archive.

Exact copy for each notification:

  • Account created (this could teach the user about the notification functionality even though there's no real notification yet) - copy: You have successfully created an account.
  • Account is restored - copy: You have successfully restored your account.
  • Balance changed
    • Received - copy: You received [amount] SWT from [sender].
  • Failed send transaction with error - copy: Transaction failed. Error: "[error]"
  • Deal state change updates
    • New reply on request - copy: [replier] replied to your request.
    • Replier selected - copy: You were selected by [Seeker] for "[description]".
    • Replier declined - copy: [selectee] declined your deal.
    • Replier funds - copy: [Provider] accepted and funded "[description]". You are now in a deal.
    • Deal payout - copy: You have been paid for "[description]".
    • Deal conflict - copy: "[description]" was put into conflict.
    • Deal cancelled - copy: "[description]" was cancelled.
  • Incoming chat message - copy: New chat message for "[Description]".
  • Chat member added (hashtagmaintainer in case of conflict) - copy: [hashtagmaintainer]was added to the chat.

Desktop view:

Invisionlinks with login (for inspect mode!):
mobile: https://projects.invisionapp.com/d/main#/console/13838256/300150129/inspect
desktop: https://projects.invisionapp.com/d/main#/console/14147648/300150058/inspect

Documentation / references

With ♡ from Swarm City