Project proposal - techonologies and implementation details

[dakaizou]

Please describe your choices of technology (if applicable, please distinguish between frontend and backend).

Please model key workflows as UML Sequence Diagrams.

[dakaizou]

https://www.cylynx.io/blog/a-comparison-of-javascript-graph-network-visualisation-libraries/ https://ialab.it.monash.edu/webcola/ https://cprimozic.net/blog/speeding-up-webcola-with-webassembly/

[dakaizou]

• nodejs
• typescript
• sigmajs
• graphology
• https://www.blockchain.com/api/blockchain_api
• react
• html
• css
• http
• ajax
• github pages
• github action

[dakaizou]

@startuml
actor User
participant "Landing Page"
participant Graph
collections "Tx Store"
database "Local Storage"
participant blockchain.com
autoactivate on

group Visit
User -> "Landing Page": get index
"Landing Page" -> Graph: request
Graph -> "Tx Store": get labeled addresses
"Tx Store" -> "Local Storage": get labeled addresses
return return labeled addresses
"Tx Store" -> "blockchain.com": get transactions
return return transactions
return return labeled addresses\nwith transactions
return draw the first labeled\naddress with transactions
return show network graph
end

group Search
User -> "Landing Page": search <b>address</b>
"Landing Page" -> Graph: set target <b>address</b>
Graph -> "Tx Store": get target <b>address</b>\nwith transactions
"Tx Store" -> "Local Storage": get target <b>address</b>
return return target <b>address</b>
"Tx Store" -> "blockchain.com": get transactions
return return transactions
return return target <b>address</b>\nwith transactions
return draw the target\n<b>address</b> with transactions
return show network graph
end

group Label
User -> "Landing Page": label <b>address</b>
"Landing Page" -> Graph: label <b>address</b>
Graph -> "Tx Store": label <b>address</b>
"Tx Store" -> "Local Storage": label <b>address</b>
return return status
return return status
return render label status
return show label status
end

@enduml

[dakaizou]

[dakaizou]

This project needs to provide a starting point for analytics. In order to understand the data better, data visualization is one of the most important tool to help us discover information from them. The web application client side technology is one of the most mature tech stack to visualize data and create interactive feature-rich graphical user interface. This characteristic fits well with the other requirement of this project "being able to label and monitor suspicious wallet addresses". Further, browsers are maintained by a lot of people, and they are an unparalleled compatibility layer for cross platform application.

Thus, we decided to create an single-page application (SPA), since most of the requirements of this project can be fulfilled without a dedicated web server backend. If necessary, we can utilize the local storage for persistent data like labeled addresses.

Moreover, we want to visualize transactions and wallet addresses as a graph, so it is intuitive to operate. sigma.js makes working on graphs a lot eaiser in JavaScript/TypeScript, so we went with the sigma.js eco system(Node.js, React, sigma.js, graphology, html, css).