[BRG-546] show error when extension not installed (#23)

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "bridge-landing",
 	"description": "Echo Bridge Landing",
-	"version": "1.16.0",
+	"version": "1.16.1",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/echoprotocol/bridge-website.git"

src/actions/WidgetActions.js

@@ -91,6 +91,11 @@ class WidgetActions extends BaseActionsClass {
 				dispatch(this.setValue('error', 'Amount should be more than 0', false));
 				return;
 			}
+			if (!window.echojslib) {
+				dispatch(this.setValue('error', 'Install Bridge Extension to proceed', false));
+				dispatch(this.setValue('downloadLink', 'https://chrome.google.com/webstore/detail/echo-bridge/ginklfodpcgldnicehmlpehfmgjhbdcl', false));
+				return;
+			}
 			const access = await window.echojslib.extension.getAccess();
 
 			if (!access) {

src/assets/scss/components/_toast.scss

@@ -1,4 +1,4 @@
-.toast  {
+.toast {
 	@include futura-medium();
 	align-items: center;
 	justify-content: center;
@@ -7,6 +7,7 @@
 	bottom: 0;
 	left: 0;
 	display: flex;
+	flex-direction: column;
 	height: 77px;
 	font-size: 16px;
 
@@ -16,7 +17,8 @@
 		color: #bb3e51;
 	}
 
-	&-content {
-		padding-top: 20px;
-	}
 }
+
+.toast-content {
+	padding-top: 20px;
+}

src/components/QRCodeWidget/index.jsx

@@ -23,6 +23,7 @@ class QRCodeWidget extends React.Component {
 			account, error,
 			currency,
 			isConnected,
+			downloadLink,
 		} = this.props;
 		return (
 			<div className="widget-page">
@@ -83,6 +84,10 @@ class QRCodeWidget extends React.Component {
 							<div className="toast-content">
 								{error}
 							</div>
+							{
+								downloadLink &&
+								<a className="toast-link" href={downloadLink}>Download</a>
+							}
 						</div>
 					}
 
@@ -95,12 +100,17 @@ class QRCodeWidget extends React.Component {
 
 }
 
+QRCodeWidget.defaultProps = {
+	downloadLink: null,
+};
+
 QRCodeWidget.propTypes = {
 	pay: PropTypes.func.isRequired,
 	isConnected: PropTypes.bool.isRequired,
 	account: PropTypes.string.isRequired,
 	currency: PropTypes.object.isRequired,
 	error: PropTypes.string.isRequired,
+	downloadLink: PropTypes.string,
 };
 
 export default QRCodeWidget;

src/containers/QRCodeWidget/index.jsx

@@ -47,6 +47,7 @@ class QRCodeWidget extends React.Component {
 			error,
 			isConnected,
 			pay,
+			downloadLink,
 		} = this.props;
 		return (
 			<QRCodeWidgetComponent
@@ -55,12 +56,16 @@ class QRCodeWidget extends React.Component {
 				currency={currency}
 				error={error}
 				isConnected={isConnected}
+				downloadLink={downloadLink}
 			/>
 		);
 	}
 
 }
 
+QRCodeWidget.defaultProps = {
+	downloadLink: null,
+};
 QRCodeWidget.propTypes = {
 	match: PropTypes.object.isRequired,
 	pay: PropTypes.func.isRequired,
@@ -69,13 +74,15 @@ QRCodeWidget.propTypes = {
 	currency: PropTypes.object.isRequired,
 	error: PropTypes.string.isRequired,
 	isConnected: PropTypes.bool.isRequired,
+	downloadLink: PropTypes.string,
 };
 
 export default withRouter(connect(
 	(state) => ({
 		currency: state.widget.get('currency'),
 		error: state.widget.get('error'),
 		isConnected: state.global.get('isConnected'),
+		downloadLink: state.widget.get('downloadLink'),
 	}),
 	(dispatch) => ({
 		pay: (account) => dispatch(WidgetActions.payWithBridge(account)),