[optin/reporting]: List of completed opt-ins

[cryptoBeliever]

The opt-in reporting tool should present all completed (paid requests from pre-launch and post-launch) opt-ins.

I. The list of completed opt-ins should contain the following columns:

a) "Type" - "PRE" - for pre-launch, "POST" - for post-launch b) "Label" - additional info about NEM address "label" e.g. "Binance" c) "NEM Address" - in a single row can be multiple addresses for opt-in type 'merge' and 'multi'. Address should link to explorer https://explorer.nemtool.com. There should be an option to easy copy address. d) "Hash": NEM transaction hashes

• if there is no on-chain opt-in we show "off-chain"
• otherwise, we show a list (which can be multiple for each NEM address in case of multisig) of hashes related to the address. Each hash is preceded by a timestamp (presented based on local browser timezone) There should be an option to easy copy hash. e) "Balance" - balance for each NEM address. If we have multiple entries per row we should show bolded the sum in an additional row. f) "Symbol Address" - in a single row can be multiple addresses for opt-in type 'merge' and 'multi'. Should be linked to https://symbol.fyi/. There should be an option to easy copy address. g) "Hash" - Symbol transaction payout hashes. Each hash is preceded by a timestamp (presented based on local browser timezone). There should be an option to easy copy hash. h) "Balance" - balance for each Symbol address. If we have multiple entries we should show the sum below.

On top of the screen should be an option to:

• Search by NEM/Symbol address/Hash (one input).
• export data to CSV
• filter by opt-in type (pre-launch, post-launch)

Pagination: 200 elements per page. Infinite scroll. Order: We should order descending by opt-in id

2. Wireframe:

3. CSV columns: a) # - opt-in number e.g. "1" b) "Type" - Post-launch or Pre-launch c) "Label" - e.g. "Binance" d) "NEM Address" e.g. "NATRUSTUAB5LAWDSOWDUPQUFYRTGZTJZDGML2JKP" e) "Height" - NEM transaction height - if we have multiple opt-in tx for NEM address (multisig) we should export latests. f) "Hash" "18b358c9fb99469614e6b5f3114e911c0ec14e656126db55209daed59a9451a2" - if multiple then comma separated g) "Timestamp" e.g. "2010-12-11 12:02:53" - if we have multiple opt-in tx for NEM address (multisig) we should export latests. Timestamp in user local time. h) "Timestamp UTC" e.g. "2010-12-11 14:02:53" - UTC timestamp for NEM transaction i) "Balance" e.g. "99584654.050913" j) "Symbol Address" e.g. "NCIG65BEOUJPH2AP7ELHOPYIH7FANQEH5CCOBEI" k) "Height" - Symbol payout transaction height l) "Hash" Symbol hash e.g. "e24ed6ae1591353e2515940b18d1b0f5eb233f4544d2630d8fdd6a1923235a8b" m) "Timestamp" e.g. "2010-12-11 12:02:53" - timestamp for Symbol transaction. Timestamp in user local time. n) "Timestamp UTC" - UTC timestamp for Symbol transaction o) "Balance" - Symbol tx balance e.g. "9584654.150913"

Example CSV: optin-completed.csv

Completed DB: completed.zip

[0x6861746366574]

Looks good, @cryptoBeliever!

UX/UI

• Always capitalize the first letter of each word in a title. For example, NEM address should be NEM Address.
• Change the header of NEM opt-in transactions and Symbol payout transactions to 'Hash'.
• NEM Balance and Symbol balance can read 'Balance'.
• Remove the Total text in the Address column, and instead add a border around the Total in the Balance column.
• For the front-end, make sure to format the numbers according to the accounting standard: two decimal points; a thousands separator (For example, 100000 becomes 100,000.00) and negative numbers are displayed in parentheses. When downloading to .csv, numbers should be displayed in absolute.
• For pagination, I'd not display tabs but instead allow for endless scrolling. Start with 1000 entries loaded, and then allow to scroll (sorted by timestamp).

Labelling

• We will want to have an additional column that labels off-chain addresses (for example, Binance or Huobi) and known accounts (for example, the old NATRUST NEM account and its subsequent Symbol accounts would all be labelled NEM Group Trust).
• You'll want to make sure the exported Hash provides a link to the explorer.
• You will want an additional column for 'timestamp' - not as important for pre-launch transactions, but pretty critical for the postlaunch ones.

[cryptoBeliever]

We will want to have an additional column that labels off-chain addresses (for example, Binance or Huobi) and known accounts (for example, the old NATRUST NEM account and its subsequent Symbol accounts would all be labeled NEM Group Trust).

@0x6861746366574, @gimre-xymcity commented on that- all exchanges are opt-in on-chain. That off-chain are Trust and some private devs' addresses. Do we want to label them? I think in such a case @gimre-xymcity has to add it too into DB or we can hardcode it to CSV export (since it will not change and it's only for pre-launch).

You will want an additional column for 'timestamp' - not as important for pre-launch transactions, but pretty critical for the postlaunch ones.

@0x6861746366574 Is this payment timestamp on Symbol chain or NEM opt-in chain timestamp?

[0x6861746366574]

@0x6861746366574, @gimre-xymcity commented on that- all exchanges are opt-in on-chain. That off-chain are Trust and some private devs' addresses. Do we want to label them? I think in such a case @gimre-xymcity has to add it too into DB or we can hardcode it to CSV export (since it will not change and it's only for pre-launch).

Yep, we'll want to label these.

@0x6861746366574 Is this payment timestamp on Symbol chain or NEM opt-in chain timestamp?

Ah, good point. You'll want to record both the request timestamp (when the request was initiated on NEM), as well as the payout timestamp (when funds were sent to the user on Symbol).

[yilmazbahadir]

@0x6861746366574 What type of user wants to see the whole list? (Considering we have search and the CSV export functionalities in place)

For pagination, I'd not display tabs but instead allow for endless scrolling. Start with 1000 entries loaded, and then allow to scroll (sorted by timestamp).

[0x6861746366574]

@0x6861746366574 What type of user wants to see the whole list? (Considering we have search and the CSV export functionalities in place)

It's not a type of user, just a UX pattern to follow. Modern UI will have us scroll or pull down to load more results from large datasets. Think about how Twitter, TikTok, etc. all work.

Pages were very much a UX pattern in the 00's and 10's for large datasets, but have slowly been replaced by doomscrolling.

You'd typically want to load up 1000-5000 records and then when you scroll to the end of the page automatically load more (much like Twitter). This UX pattern should be consistent for our explorer, too (cc @AnthonyLaw).

For something like an NFT marketplace, pagination is more suitable: anytime you want a user to linger on an element or anytime you're looking to mimic an eCommerce store you would use pagination.

You're still showing users the same content (whether it's paginated vs infinite scroll there are still 1000 records on the first 'load' before a user has to do something to fetch more requests), the only difference is what UX pattern you're following.

[AnthonyLaw]

For pagination, I'd not display tabs but instead allow for endless scrolling. Start with 1000 entries loaded, and then allow to scroll (sorted by timestamp).

http://post-launch-opt-in.symbolblockchain.io/completed.html is using endless scrolling. I thought it was difficult to find / track content, but pagination should work better when we looking for specific content.

You'd typically want to load up 1000-5000 records and then when you scroll to the end of the page automatically load more (much like Twitter). This UX pattern should be consistent for our explorer, too (cc @AnthonyLaw).

do you like upgrade Symbol Explorer to change to infinite scrolling as well?

[cryptoBeliever]

Found issues (http://ec2-35-171-24-22.compute-1.amazonaws.com:5001/):

1. [x] Enter should call Search action when focus in search input.
2. [x] The copy button doesn't work
3. [x] When I search address with whitespace e.g. ' NCES7OKBYZRCSTSNRX45H6E67J6OXABKNT6IRD2P' nothing is filtered. Missing trim before using it in a query?
4. [x] when I put the lowercase address in the search bar and will search the result is a blank page e.g. nanodestsn7gu76qplgmj7bcgcaa2phvbzzuui62
5. [x] we can replace Opt-in Type to label as we have on pending view in the status column
6. [x] problems with mobile view presentation and scaling
7. [x] can we detect there is no more pages and don't try to load more? For example filter by "NANODESTSN7GU76QPLGMJ7BCGCAA2PHVBZZUUI62" and when we scroll we trying load more.
8. [x] search-header is shorter than the table header
9. [x] CSV - Symbol timestamp is one month ahead. e.g. it's 2021-04-16 00:06:25 where it should be 2021-03-16 00:06:25
10. [x] CSV - NEM timestamp is one month ahead. e.g. it's 2021-02-08 21:48:12 where it should be 2021-01-08 21:48:12
11. [x] CSV - We showing timestamps in UTC so I would change column name from "Timestamp" to "Timestamp [UTC]"
12. [x] CSV - There should be no "off-chain" situation in Symbol hash column. In the merge case value should be empty.
13. [x] Mobile view - "...more" for balances shows on pop-up balances that are aligned left. We should align right for balances.
14. [x] View - timestamps on view should be presented in local user timestamp.
15. [x] CSV - columns order should be as in the issue description (changed after latest changes)
16. [x] CSV - should contain columns with user local timezone timestamps and UTC timestamps (separate columns) as in the issue description and an example CSV
17. [x] Mobile view - @yilmazbahadir will verify if it's possible to fit the search and filter by type in one line. By moving download CSV button on the right of tabs selection. Applies to both Completed and in-progress views.
18. [x] Change sorting by opt-in id desc. We want present the latest opt-ins first.
19. [x] When scrolling 1-2px of data is visible over the header.
20. [x] CSV - Change "Post-launch" to "POST" and "Pre-launch" to "PRE" to be consistent with the view.
21. [x] View - When we filter by address/hash single row that is presented is very high for some reason.
22. [x] Mobile view - copy buttons blinking when trying to copy. Copy doesn't work.
23. [x] When the user clears the search input then we should apply to search automatically and refresh the view.

[cryptoBeliever]

All done.