Implements a visual rendering of XRP network transactions via a 'code waterfall'. Transactions that are sent across the live network will be displayed here, each assigned a color corresponding to its type, and streamed vertically in the viewing area. Individual transactions are also rendered via a horizontal marquee anchored to the bottom of the container. Settings controlling the waterfall may be set using the gear icon in the upper right.
Run the following to import vue-xrp-waterfall into an existing Vue.js project:
$ yarn add vue-xrp-waterfall
Once installed, the transaction waterfall can be included simply by using & adding the component:
<template>
<div id="container">
<XRPWaterfall />
</div>
</template>
<script>
import XRPWaterfall from 'vue-xrp-waterfall'
import 'vue-xrp-waterfall/dist/vue-xrp-waterfall.css'
Vue.use(XRPWaterfall)
export default {
}
</script>
<style scoped>
#container{
/* Style container appropriately,
set dimensions or full screen.
The waterfall will automatically
be resized to fill container!
*/
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
See example/ directory for demo application. Run with:
$ yarn example
vue-xrp-waterfall is available under the MIT license.
Contributions are more than welcome! Just fork the repo and send a pull request.