-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: make trading view work using 3rd party dependency
- Loading branch information
Showing
3 changed files
with
161 additions
and
87 deletions.
There are no files selected for viewing
186 changes: 101 additions & 85 deletions
186
mobile/lib/features/trade/tradingview_candlestick.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,113 +1,129 @@ | ||
import 'dart:io'; | ||
|
||
import 'package:flutter/material.dart'; | ||
import 'package:get_10101/common/global_keys.dart'; | ||
import 'package:get_10101/common/snack_bar.dart'; | ||
import 'package:get_10101/main.dart'; | ||
import 'package:flutter_inappwebview/flutter_inappwebview.dart'; | ||
import 'package:url_launcher/url_launcher.dart'; | ||
import 'package:webview_flutter/webview_flutter.dart'; | ||
import 'package:get_10101/main.dart'; | ||
|
||
class TradingViewCandlestick extends StatefulWidget { | ||
const TradingViewCandlestick({super.key}); | ||
const TradingViewCandlestick({ | ||
super.key, | ||
}); | ||
|
||
@override | ||
State<StatefulWidget> createState() => _TradingViewCandlestickState(); | ||
State<TradingViewCandlestick> createState() => _TradingViewCandlestickState(); | ||
} | ||
|
||
class _TradingViewCandlestickState extends State<TradingViewCandlestick> { | ||
late final WebViewController controller; | ||
final GlobalKey webViewKey = GlobalKey(); | ||
InAppWebViewController? webViewController; | ||
|
||
static bool enabled() => Platform.isAndroid || Platform.isIOS; | ||
double progress = 0; | ||
/// place holder if loading fails | ||
late String html = """<html lang="en"><body><p>Tradingview chart not found</p></body></html>"""; | ||
// this url doesn't matter, it just has to exist | ||
final baseUrl = WebUri("https://10101.finance/"); | ||
|
||
@override | ||
void initState() { | ||
super.initState(); | ||
|
||
const Color bg = appBackgroundColor; | ||
String rgba = "rgba(${bg.red}, ${bg.green}, ${bg.blue}, ${255.0 / bg.alpha})"; | ||
String html = ''' | ||
<html> | ||
<head> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
</head> | ||
<body> | ||
<style> | ||
body { | ||
overflow: hidden; | ||
} | ||
String rgba = | ||
"rgba(${bg.red}, ${bg.green}, ${bg.blue}, ${255.0 / bg.alpha})"; | ||
html = ''' | ||
<html lang="en"> | ||
<head> | ||
<title></title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<style> | ||
body { | ||
overflow: hidden; | ||
} | ||
html, body, #container, .tradingview-widget-container { | ||
background-color: $rgba; | ||
} | ||
iframe { | ||
height: 100% !important; | ||
} | ||
.tradingview-widget-copyright { | ||
display: none; | ||
} | ||
</style> | ||
</head> | ||
html, body, #container, .tradingview-widget-container { | ||
background-color: $rgba; | ||
} | ||
<body> | ||
iframe { | ||
height: 100% !important; | ||
<div id="container"> | ||
<!-- TradingView Widget BEGIN --> | ||
<div class="tradingview-widget-container" style="height:100%;width:100%"> | ||
<div class="tradingview-widget-container__widget" style="height:100%;width:100%"></div> | ||
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div> | ||
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async> | ||
{ | ||
"autosize": true, | ||
"symbol": "BITMEX:XBT", | ||
"interval": "D", | ||
"timezone": "Etc/UTC", | ||
"theme": "light", | ||
"style": "1", | ||
"locale": "en", | ||
"enable_publishing": false, | ||
"backgroundColor": "$rgba", | ||
"hide_top_toolbar": true, | ||
"hide_legend": true, | ||
"allow_symbol_change": false, | ||
"save_image": false, | ||
"calendar": false, | ||
"support_host": "https://www.tradingview.com" | ||
} | ||
.tradingview-widget-copyright { | ||
display: none; | ||
} | ||
</style> | ||
<div id="container"> | ||
<!-- TradingView Widget BEGIN --> | ||
<div class="tradingview-widget-container" style="height:100%;width:100%"> | ||
<div class="tradingview-widget-container__widget" style="height:100%;width:100%"></div> | ||
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div> | ||
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async> | ||
{ | ||
"autosize": true, | ||
"symbol": "BITMEX:XBT", | ||
"interval": "D", | ||
"timezone": "Etc/UTC", | ||
"theme": "light", | ||
"style": "1", | ||
"locale": "en", | ||
"enable_publishing": false, | ||
"backgroundColor": "$rgba", | ||
"hide_top_toolbar": true, | ||
"hide_legend": true, | ||
"allow_symbol_change": false, | ||
"save_image": false, | ||
"calendar": false, | ||
"support_host": "https://www.tradingview.com" | ||
} | ||
</script> | ||
</div> | ||
</div> | ||
<!-- TradingView Widget END --> | ||
</body> | ||
</script> | ||
</div> | ||
</div> | ||
<!-- TradingView Widget END --> | ||
</body> | ||
</html> | ||
'''; | ||
} | ||
|
||
if (enabled()) { | ||
controller = WebViewController() | ||
..setJavaScriptMode(JavaScriptMode.unrestricted) | ||
..enableZoom(false) | ||
..setNavigationDelegate(NavigationDelegate( | ||
onNavigationRequest: (req) async { | ||
final uri = Uri.parse(req.url); | ||
|
||
if (uri.scheme == "about") { | ||
return NavigationDecision.navigate; | ||
} | ||
@override | ||
Widget build(BuildContext context) { | ||
return Stack( | ||
children: [ | ||
InAppWebView( | ||
key: webViewKey, | ||
onWebViewCreated: (controller) { | ||
webViewController = controller; | ||
webViewController! | ||
.loadData(data: html, baseUrl: baseUrl, historyUrl: baseUrl); | ||
}, | ||
shouldOverrideUrlLoading: (controller, navigationAction) async { | ||
var uri = navigationAction.request.url!; | ||
|
||
if (await canLaunchUrl(uri)) { | ||
await launchUrl(uri, mode: LaunchMode.externalApplication); | ||
} else { | ||
showSnackBar(ScaffoldMessenger.of(rootNavigatorKey.currentContext!), | ||
"Failed to open link to TradingView"); | ||
if (uri | ||
.toString() | ||
.startsWith("https://www.tradingview.com/chart")) { | ||
// this is the link to the external chart, we want to open this in an external window | ||
if (await canLaunchUrl(uri)) { | ||
// Launch the App | ||
await launchUrl(uri, mode: LaunchMode.externalApplication); | ||
// and cancel the request | ||
return NavigationActionPolicy.CANCEL; | ||
} | ||
} | ||
|
||
return NavigationDecision.prevent; | ||
return NavigationActionPolicy.ALLOW; | ||
}, | ||
onProgressChanged: (controller, progress) { | ||
setState(() { | ||
this.progress = progress / 100; | ||
}); | ||
}, | ||
)) | ||
..loadHtmlString(html); | ||
} | ||
), | ||
progress < 1.0 ? LinearProgressIndicator(value: progress) : Container(), | ||
], | ||
); | ||
} | ||
|
||
@override | ||
Widget build(BuildContext context) => enabled() | ||
? WebViewWidget(controller: controller) | ||
: const Text("TradingView chart only supported on IOS and Android"); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters