Single coin view is shaping up

damoonrashidi · Apr 13, 2020 · ed60323 · ed60323
1 parent 0f29771
commit ed60323
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -20,8 +20,8 @@ The code for the v1 can be found in the `legacy/v1` branch, whats currently avai
 - [ ] Add wallets (both via pasting address or scanning QR code)
 - [ ] Remove wallet
 - [ ] Get wallet value
-- [ ] Single coin view
-- [ ] Single coin graph
+- [x] Single coin view
+- [x] Single coin graph
 - [ ] wallet view
 - [ ] Cool but pointless animations
 

diff --git a/lib/components/order-book.dart b/lib/components/order-book.dart
@@ -0,0 +1,68 @@
+import 'package:Bitalarm/entities/coin.entity.dart';
+import 'package:Bitalarm/entities/orderbook.entity.dart';
+import 'package:Bitalarm/services/coin.service.dart';
+import 'package:Bitalarm/shared/styles.dart';
+import 'package:flutter/material.dart';
+
+class OrderBook extends StatefulWidget {
+  final Coin coin;
+
+  OrderBook({this.coin});
+
+  @override
+  State<StatefulWidget> createState() => OrderBookState();
+}
+
+class OrderBookState extends State<OrderBook> {
+  var coinService = CoinService();
+  OrderBookModel model = OrderBookModel(asks: [], bids: []);
+
+  @override
+  void initState() {
+    super.initState();
+    _getOrderBook();
+  }
+
+  _getOrderBook() async {
+    model = await coinService.getOrderBook(widget.coin.symbol);
+    setState(() {});
+  }
+
+  _makeRows(List<dynamic> bidOrAsk, {Color color = Colors.red}) {
+    var list = bidOrAsk;
+    var style = TextStyle(color: color, fontSize: 11);
+
+    return list
+        .map((boa) => DataRow(cells: [
+              DataCell(Text(
+                boa[0].toString(),
+                style: style,
+              )),
+              DataCell(Text(boa[1].toStringAsFixed(4), style: style)),
+            ]))
+        .toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var askRows = _makeRows(model.asks, color: COLOR_SOFT_BLUE);
+    var bidRows = _makeRows(model.bids, color: COLOR_SOFT_RED);
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Expanded(
+            child: DataTable(columns: [
+          DataColumn(label: Text("USD")),
+          DataColumn(label: Text(widget.coin.symbol))
+        ], rows: askRows)),
+        Expanded(
+            child: DataTable(columns: [
+          DataColumn(label: Text("USD")),
+          DataColumn(label: Text(widget.coin.symbol))
+        ], rows: bidRows))
+      ],
+    );
+  }
+}
diff --git a/lib/entities/orderbook.entity.dart b/lib/entities/orderbook.entity.dart
@@ -1,6 +1,6 @@
-class OrderBook {
-  List<List<double>> asks;
-  List<List<double>> bids;
+class OrderBookModel {
+  final List<dynamic> asks;
+  final List<dynamic> bids;
 
-  OrderBook({this.asks, this.bids});
+  OrderBookModel({this.asks = const [], this.bids = const []});
 }
diff --git a/lib/screens/coin/coin-graph.dart b/lib/screens/coin/coin-graph.dart
@@ -42,24 +42,22 @@ class CoinChartPainter extends CustomPainter {
   @override
   bool shouldRepaint(CoinChartPainter old) => true;
 
-  double _y(double value, double max, double height) =>
-      height - value / max * height;
-
+  double _y(double value, double height) => height - value / _max * height;
   double _x(int index, double width) => index / data.length * width;
 
-  void _paintLabel(Canvas canvas, double value, double x, double y) {
+  void _paintLabel(Canvas canvas, double value, double x, double y, Size size) {
     var paint = Paint()..color = Colors.white;
     var position = Offset(x, y);
-    canvas.drawCircle(position, 4, paint);
+    canvas.drawCircle(position, 3, paint);
 
     var textPosition = Offset(x, y);
 
     if (value == _max) {
       textPosition = Offset(x + 10, y - 20);
     } else if (value == _min) {
-      textPosition = Offset(x + 10, y + 5);
+      textPosition = Offset(x + 20, y + 5);
     } else {
-      textPosition = Offset(x - 50, y + 10);
+      textPosition = Offset(size.width - 50, y + 10);
     }
 
     var span = new TextSpan(
@@ -72,25 +70,23 @@ class CoinChartPainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
+    if (data.length == 0) {
+      return;
+    }
     var width = size.width;
     var height = size.height;
 
     Path path = Path();
 
-    path.moveTo(0, _y(data[0], _max, height));
+    path.moveTo(0, _y(data[0], height));
     for (var i = 1; i < data.length; i++) {
+      var value = data[i];
       double x = _x(i, width);
-      double y = _y(data[i], _max, height);
+      double y = _y(value, height);
 
-      // path.relativeCubicTo(x, y, xc, yc, xc, yc);
       path.lineTo(x, y);
-      if (data[i] == _max || data[i] == _min || i == data.length - 1) {
-        _paintLabel(
-          canvas,
-          data[i],
-          x,
-          y,
-        );
+      if (value == _max || value == _min || i == data.length - 1) {
+        _paintLabel(canvas, value, x, y, size);
       }
     }
 

diff --git a/lib/screens/coin/coin-header.dart b/lib/screens/coin/coin-header.dart
@@ -22,8 +22,8 @@ class CoinHeader extends StatelessWidget {
       delegate: CoinHeaderDelegate(
           coin: coin,
           isFavorite: isFavorite,
-          minExtent: 120,
-          maxExtent: 320,
+          minExtent: 180,
+          maxExtent: 220,
           priceData: priceData),
     );
   }

diff --git a/lib/screens/coin/coin.screen.dart b/lib/screens/coin/coin.screen.dart
@@ -1,3 +1,4 @@
+import 'package:Bitalarm/components/order-book.dart';
 import 'package:Bitalarm/entities/coin.entity.dart';
 import 'package:Bitalarm/providers/favorites.provider.dart';
 import 'package:Bitalarm/screens/coin/coin-header.dart';
@@ -55,7 +56,10 @@ class CoinScreenState extends State<CoinScreen> {
         CoinHeader(
             coin: widget.coin,
             isFavorite: _isFavorite,
-            priceData: _historicalPriceData)
+            priceData: _historicalPriceData),
+        SliverList(
+          delegate: SliverChildListDelegate([OrderBook(coin: widget.coin)]),
+        )
       ]),
     ]));
   }

diff --git a/lib/screens/favorites/favorites.screen.dart b/lib/screens/favorites/favorites.screen.dart
@@ -32,8 +32,11 @@ class FavoritesScreenState extends State<FavoritesScreen> {
 
   @override
   Widget build(BuildContext context) {
-    var coinWidgets =
-        _favorites.map((coin) => CoinListItem(coin: coin)).toList();
+    var coinWidgets = _favorites
+        .map((coin) => Padding(
+            padding: EdgeInsets.fromLTRB(32, 8, 32, 8),
+            child: CoinListItem(coin: coin)))
+        .toList();
 
     return ScreenScaffold(
       title: "favorites",

diff --git a/lib/services/coin.service.dart b/lib/services/coin.service.dart
@@ -53,9 +53,7 @@ class CoinService {
         .substring(0, 19);
 
     String url =
-        "https://rest.coinapi.io/v1/ohlcv/BITSTAMP_SPOT_${symbol}_USD/history?period_id=1DAY&time_start=${startDate}&time_end=$nowTimestamp";
-
-    print(url);
+        "https://rest.coinapi.io/v1/ohlcv/BITSTAMP_SPOT_${symbol}_USD/history?period_id=1DAY&time_start=$startDate&time_end=$nowTimestamp";
 
     var options = buildCacheOptions(Duration(days: 1));
     options.headers['X-CoinAPI-Key'] = COIN_API_APIKEY;
@@ -69,10 +67,12 @@ class CoinService {
     }).toList();
   }
 
-  Future<OrderBook> getOrderBook(String symbol) async {
-    var api = "https://api.cryptowat.ch/markets/kraken/${symbol}usd/price";
-    var result = (await dio.get(api)).data['result'];
-    OrderBook orderbook = OrderBook(asks: result['asks'], bids: result['bids']);
-    return orderbook;
+  Future<OrderBookModel> getOrderBook(String symbol, {int limit = 50}) async {
+    var api =
+        "https://api.cryptowat.ch/markets/kraken/${symbol}usd/orderbook?limit=$limit";
+    var response = await dio.get(api);
+    Map<String, dynamic> result = response.data['result'];
+
+    return OrderBookModel(asks: result['asks'], bids: result['bids']);
   }
 }
diff --git a/lib/shared/styles.dart b/lib/shared/styles.dart
@@ -1,3 +1,6 @@
 import 'package:flutter/material.dart';
 
 const COLOR_HEADLINE = const Color(0x252525);
+
+const COLOR_SOFT_RED = const Color.fromRGBO(255, 104, 104, 1);
+const COLOR_SOFT_BLUE = const Color.fromRGBO(155, 99, 239, 1);