From 84653565d23113b1b72ec4fb4cb0e9b928df7dd3 Mon Sep 17 00:00:00 2001 From: Philipp Hoenisch Date: Tue, 6 Feb 2024 15:53:50 +0100 Subject: [PATCH] feat(webapp): show tradingview chart Signed-off-by: Philipp Hoenisch --- CHANGELOG.md | 1 + webapp/frontend/assets/tradingview.html | 39 ++++++++ webapp/frontend/lib/trade/trade_screen.dart | 95 +++++++++++-------- .../lib/trade/tradingview/tradingview.dart | 43 +++++++++ webapp/frontend/pubspec.yaml | 1 + webapp/frontend/web/index.html | 3 + 6 files changed, 145 insertions(+), 37 deletions(-) create mode 100644 webapp/frontend/assets/tradingview.html create mode 100644 webapp/frontend/lib/trade/tradingview/tradingview.dart diff --git a/CHANGELOG.md b/CHANGELOG.md index a9a2083a2..a959d9990 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] - Feat(mobile): Add in-app survey feature. The coordinator can trigger surveys which will be shown in the app. +- Feat(webapp): show tradingview chart ## [1.8.5] - 2024-02-05 diff --git a/webapp/frontend/assets/tradingview.html b/webapp/frontend/assets/tradingview.html new file mode 100644 index 000000000..925365fd2 --- /dev/null +++ b/webapp/frontend/assets/tradingview.html @@ -0,0 +1,39 @@ + + + + Load file or HTML string example + + +
+
+
+
+ +Chart by TradingView.com + +
+ + +
+ + \ No newline at end of file diff --git a/webapp/frontend/lib/trade/trade_screen.dart b/webapp/frontend/lib/trade/trade_screen.dart index 388d48f91..061dacbf3 100644 --- a/webapp/frontend/lib/trade/trade_screen.dart +++ b/webapp/frontend/lib/trade/trade_screen.dart @@ -3,6 +3,7 @@ import 'package:get_10101/common/color.dart'; import 'package:get_10101/trade/order_history_table.dart'; import 'package:get_10101/trade/position_table.dart'; import 'package:get_10101/trade/trade_screen_order_form.dart'; +import 'package:get_10101/trade/tradingview/tradingview.dart'; class TradeScreen extends StatefulWidget { static const route = "/trade"; @@ -25,9 +26,9 @@ class _TradeScreenState extends State with SingleTickerProviderStat Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constraints) { if (constraints.maxWidth > 600) { - return _buildHorizontalWidget(constraints); + return SingleChildScrollView(child: _buildHorizontalWidget(constraints)); } else { - return _buildHVerticalWidget(constraints, constraints); + return SingleChildScrollView(child: _buildHVerticalWidget(constraints, constraints)); } }); } @@ -65,34 +66,45 @@ class _TradeScreenState extends State with SingleTickerProviderStat ), Expanded( flex: 2, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Visibility( - visible: false, - child: Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8), - child: Container( - height: double.infinity, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - color: Colors.grey[100], - ), - child: const Row( - children: [Expanded(child: Center(child: Text("Chart")))], + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Visibility( + visible: false, + child: Expanded( + child: Padding( + padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8), + child: Container( + height: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + color: Colors.grey[100], + ), + child: const Row( + children: [Expanded(child: Center(child: Text("Chart")))], + ), ), ), ), ), - ), - createTableWidget(const OpenPositionTable(), "Open Positions"), - const SizedBox( - height: 10, - ), - createTableWidget(const OrderHistoryTable(), "Order History"), - ], + const SizedBox(height: 500, child: TradingViewWidgetHtml(cryptoName: "BTCUSD")), + // CustomInAppBrowser(url: 'https://google.com',), + const SizedBox( + height: 10, + ), + SizedBox( + height: 150, + child: createTableWidget(const OpenPositionTable(), "Open Positions")), + const SizedBox( + height: 10, + ), + SizedBox( + height: 300, + child: createTableWidget(const OrderHistoryTable(), "Order History")), + ], + ), ), ), ], @@ -100,15 +112,15 @@ class _TradeScreenState extends State with SingleTickerProviderStat ); } - Expanded createTableWidget(Widget child, String title) { - return Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 8, right: 8), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - color: Colors.grey[100], - ), + Widget createTableWidget(Widget child, String title) { + return Padding( + padding: const EdgeInsets.only(left: 8, right: 8), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + color: Colors.grey[100], + ), + child: SingleChildScrollView( child: Column( children: [ Row( @@ -167,11 +179,20 @@ class _TradeScreenState extends State with SingleTickerProviderStat const SizedBox( height: 10, ), - createTableWidget(const OpenPositionTable(), "Open Positions"), + const SizedBox( + height: 500, child: TradingViewWidgetHtml(cryptoName: "BTCUSD")), + const SizedBox( + height: 10, + ), + SizedBox( + height: 150, + child: createTableWidget(const OpenPositionTable(), "Open Positions")), const SizedBox( height: 10, ), - createTableWidget(const OrderHistoryTable(), "Order History"), + SizedBox( + height: 300, + child: createTableWidget(const OrderHistoryTable(), "Order History")), ], ), )))); diff --git a/webapp/frontend/lib/trade/tradingview/tradingview.dart b/webapp/frontend/lib/trade/tradingview/tradingview.dart new file mode 100644 index 000000000..03f72edd5 --- /dev/null +++ b/webapp/frontend/lib/trade/tradingview/tradingview.dart @@ -0,0 +1,43 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_inappwebview/flutter_inappwebview.dart'; + +enum ProgressIndicatorType { circular, linear } + +class TradingViewWidgetHtml extends StatefulWidget { + const TradingViewWidgetHtml({ + required this.cryptoName, + super.key, + }); + + final String cryptoName; + @override + State createState() => _TradingViewWidgetHtmlState(); +} + +class _TradingViewWidgetHtmlState extends State { + final GlobalKey webViewKey = GlobalKey(); + InAppWebViewController? webViewController; + double progress = 0; + ProgressIndicatorType type = ProgressIndicatorType.circular; + + @override + void initState() { + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Column(children: [ + Expanded( + child: Stack(children: [ + InAppWebView( + key: webViewKey, + initialFile: "assets/tradingview.html", + onWebViewCreated: (controller) { + webViewController = controller; + }, + ), + ])), + ]); + } +} diff --git a/webapp/frontend/pubspec.yaml b/webapp/frontend/pubspec.yaml index 32c8e86c5..c49e00521 100644 --- a/webapp/frontend/pubspec.yaml +++ b/webapp/frontend/pubspec.yaml @@ -47,6 +47,7 @@ dependencies: logger: ^2.0.2+1 timeago: ^3.3.0 flutter_svg: ^2.0.5 + flutter_inappwebview: ^6.0.0 dev_dependencies: flutter_test: diff --git a/webapp/frontend/web/index.html b/webapp/frontend/web/index.html index fa4f09a73..d3fa9bbbd 100644 --- a/webapp/frontend/web/index.html +++ b/webapp/frontend/web/index.html @@ -26,6 +26,9 @@ + + +