as a player, i want to know that a transaction is going on, and i have to wait

[johannbarbie]

events that make user wait:

[ ] Creating an Account: transaction initiated by generate page will raiseAccountCreated event in AccountFactory contract when mined.

possible message: your personal account being deployed to ethereum blockchain. waiting for transaction to be mined successfully.

[ ] Recover an Account: recovery transaction will raiseAccountRecovered event in AccountFactory contract when mined.

possible message: control of personal account being modified on the ethereum blockchain. waiting for transaction to be mined successfully.

[ ] Joining a Table: 2 transactions, second tx will raise Transfer event in Nutz contract, and Join event in Table contracts.

possible message: transferring your buy-in to table smart contract. waiting for transaction to be mined successfully.

[ ] Purchase NTZ: only relevant if my balance to low, and i want to play. pending tx on dashboard and error modal on join are covering this already, i think.

[ ] Leave a Table: this happens in the background, it either takes a few seconds (settle), or up to 10 minutes (dispute) until a player get's his money back. in that time, he might need the funds to join another table. player might be confused, but problem not highest priority, i'd say.

wouldn't know where to place a message about funds pending to be returned. maybe indicate in the lobby, that the user is still in the lineup of some table. sort that table to the very top of the list.

[zobroj]

Notification Types

So I'm thinking there could be two types of notifications:

1. PERSIST - affect players ability to join table, etc. they will stay visible until resolved. a. ACCOUNT_CREATING b. ACCOUNT_RECOVERING c. TABLE_JOINING d. FUNDS_LOW (? different saga model - track account )
2. TEMP - do not affect overall game play, but are useful to know. Last 3s (?) and can be dismissed by user. a. FUNDS_TRANSFERED_ETH (credit or debit) b. FUNDS_TRANSFERED_NTZ (credit or debit) c. TABLE_LEFT

Each Notification should have an info symbol ( i ) that will show a modal or tooltip with more information.

Actions

dismissNotification(txId) <- remove quick notification from notification state in store

Saga

`addNotification(type, category, text, info, txId)` <- add notification to notification state in store
`removeNotification(txId)` <- remove notification from notification state in store

function* notificationSaga() {
  yield takeEvery(ACCOUNT_INIT, addNotification('persistent', ''
  yield takeEvery(ACCOUNT_CREATED, removeNotification(... 
}

Selector result

// notifications: getNotifications()
notifications: [
  {
    id: '0xwif9d6f2042b07f59625ec499589d869976d9e56ee987129edab9b87b3dafsda',
    type: 'persistent',
    category: 'Account Creation',
    text: 'Waiting for transaction to be mined',
    info: <Info />,
  },
  {
    id: '0xb9c6f2042b07f59625ec499589d869976d9e56ee987129edab9b87b3ba75d34d',
    type: 'quick',
    category: 'Pending Transaction',
    text: 'You\'ve received 40ETH',
    info: <Info />,
  }, 
]

Wireframe

Future considerations

• syncing between devices w/ same account
• getting stored tx from localState

Example Packages

These are just example of how other do toast. I believe we should just create our own quick simple system to match our UI design.

• Toast: https://tomchentw.github.io/react-toastr/
• Sticky: http://rawgit.com/captivationsoftware/react-sticky/master/examples/stacked/index.html
• SnackBar: https://github.com/pburtchaell/react-notification https://raw.githubusercontent.com/pburtchaell/react-notification/master/docs/example-b.gif

[HelgeWieding]

maybe we can use some of these -> http://react-s-alert.jsdemo.be/

[zobroj]

My wallet address: 0xffdc059f2d9c99c399afd26a8e0112a05176f9a0 (ether only?)

Join Table:

{
  type: 'acebusters/AccountProvider/CONTRACT_TX_SEND',
  payload: {
    args: [
      80000000000000,  // stake in NTZ
      '0xc6e5607f670ea75d31537e150fe43a5c26cefc5d', // account: { signerAddr }
      2,
      ''
    ],
    methodName: 'join',
    key: '.join([80000000000000,"0xc6e5607f670ea75d31537e150fe43a5c26cefc5d",2,""])',
    dest: '0x33675e3578125fe19f033150506148e9f3f48d33', // tableId
    data: '0x928438cd000000000000000000000000000000000000000000000000000048c273950000000000000000000000000000c6e5607f670ea75d31537e150fe43a5c26cefc5d0000000000000000000000000000000000000000000000000000000000000002',
    privKey: '2c3f5198842e05d359a44f88ebe54d9e16205ace151d0dc67035c2b0ea2b07d8'
  }
}

Table Joined

{
  type: 'acebusters/AccountProvider/CONTRACT_EVENTS',
  payload: [
    {
      address: '0x367b75f1c23a9e6bde655eb81df49dbb28a311f2',
      blockNumber: 603826,
      transactionIndex: 0,
      transactionHash: '0xdd5b75208ec50eac534f3e5cd2beb8300471ede2bfb49e7d62a65f3a5b383d1e',
      blockHash: '0xae3d464cfce2486d049ded09a9ba843997313b9964c26f5de7fc361205c58873',
      logIndex: 0,
      removed: false,
      event: 'Approval',
      args: {
        owner: '0xffdc059f2d9c99c399afd26a8e0112a05176f9a0',
        spender: '0x33675e3578125fe19f033150506148e9f3f48d33', // tableId
        value: '80000000000000'
      },
      timestamp: 1499194886
    }
  ],
  meta: {
    proxy: '0xffdc059f2d9c99c399afd26a8e0112a05176f9a0'
  }
}