feat(webapp): show tradingview chart

Signed-off-by: Philipp Hoenisch <philipp@coblox.tech>
get10101 · Feb 7, 2024 · 8465356 · 8465356
1 parent 3ffb258
commit 8465356
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 37 deletions.
diff --git 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
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Load file or HTML string example</title>
+</head>
+<body>
+<div class="tradingview-widget-container">
+    <div id="tradingview_4418d" style="background-color: white">
+    </div>
+    <div class="tradingview-widget-copyright">
+        <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
+<span class="blue-text">Chart by TradingView.com</span>
+        </a>
+    </div>
+    <script type="text/javascript" src="https://s3.tradingview.com/tv.js">
+    </script>
+    <script type="text/javascript">
+        new TradingView.widget({
+            "width": "100%",
+            "symbol": "BITMEX:XBTUSD",
+            "interval": "D",
+            "timezone": "Etc/UTC",
+            "theme": "light",
+            "style": "1",
+            "locale": "en",
+            "widgetbar": true,
+            "hide_side_toolbar": false,
+            "toolbar_bg": "#ffffff",
+            "backgroundColor": "rgb(255,255,255)",
+            "enable_publishing": false,
+            "save_image": false,
+            "container_id": "tradingview_4418d",
+            "disabled_features": [],
+            "enabled_features": [],
+        });
+    </script>
+</div>
+</body>
+</html>
diff --git 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<TradeScreen> 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,50 +66,61 @@ class _TradeScreenState extends State<TradeScreen> 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")),
+                ],
+              ),
             ),
           ),
         ],
       ),
     );
   }
 
-  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<TradeScreen> 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
@@ -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<TradingViewWidgetHtml> createState() => _TradingViewWidgetHtmlState();
+}
+
+class _TradingViewWidgetHtmlState extends State<TradingViewWidgetHtml> {
+  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: <Widget>[
+      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
@@ -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
@@ -26,6 +26,9 @@
   <meta name="apple-mobile-web-app-title" content="frontend">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
+  <!-- Websupoort for WebView -->
+  <script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
+
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png"/>