Add the permission status to the UI

Emurgo · Jan 26, 2022 · 24aceaa · 24aceaa
1 parent 718c81a
commit 24aceaa
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/packages/yoroi-extension/app/components/dapp-connector/Layout/DappConnectorNavbar.js b/packages/yoroi-extension/app/components/dapp-connector/Layout/DappConnectorNavbar.js
@@ -3,6 +3,7 @@ import { Component } from 'react';
 import { observer } from 'mobx-react';
 import styles from './DappConnectorNavbar.scss'
 import type { Node } from 'react';
+import classnames from 'classnames';
 
 type Props = {|
 
@@ -16,13 +17,16 @@ export default class DappConnectorNavbar extends Component<Props> {
   }
 
   componentDidMount() {
+    this.checkAccess()
+  }
+
+  checkAccess() {
     chrome.permissions.contains({
       permissions: ['tabs', 'activeTab'],
       origins: [
         '*://*/*'
       ]
     }, (result) => {
-      console.log({result})
       this.setState({ hasPermission: result })
     });
   }
@@ -34,6 +38,7 @@ export default class DappConnectorNavbar extends Component<Props> {
         '*://*/*'
       ]
     }, (granted) => {
+      this.setState({ hasPermission: granted })
       if (granted) {
         alert('you have the permissions')
       } else {
@@ -49,6 +54,7 @@ export default class DappConnectorNavbar extends Component<Props> {
         '*://*/*'
       ]
     }, (removed) => {
+      this.setState({ hasPermission: removed })
       if (removed) {
         alert('permissions removed')
       } else {
@@ -62,14 +68,11 @@ export default class DappConnectorNavbar extends Component<Props> {
     return (
       <div className={styles.component}>
         <h1 className={styles.header}>Dapp connector</h1>
-        <p>{this.state.hasPermission? 'Has permission' : 'Has no permission'}</p>
-        <br />
-        <br />
-        <button onClick={this.getPermission} type='button'>Get Permission</button>
-        <br />
-        <br />
-        <br />
-        <button onClick={this.removePermission} type='button'>Remove Permission</button>
+        <div className={styles.permissionsContainer}>
+          <p className={styles.hasPermission}>{this.state.hasPermission? 'Has permission' : 'Has no permission'}</p>
+          <button className={classnames([styles.permission, styles.getPermission])} onClick={this.getPermission.bind(this)} type='button'>Get Permission</button>
+          <button className={classnames([styles.permission, styles.removePermission])} onClick={this.removePermission.bind(this)} type='button'>Remove Permission</button>
+        </div>
       </div>
     )
   }

diff --git a/packages/yoroi-extension/app/components/dapp-connector/Layout/DappConnectorNavbar.scss b/packages/yoroi-extension/app/components/dapp-connector/Layout/DappConnectorNavbar.scss
@@ -1,6 +1,9 @@
 .component {
     background-color: #FFFFFF;
     box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.06);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
     .header {
         color: #38393D;
@@ -11,4 +14,37 @@
         line-height: 28px;
         padding: 32px 40px;
     }
+
+    .permissionsContainer {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        padding-right: 40px;
+
+        .hasPermission {
+            padding: 8px 16px;
+            font-size: 12px;
+            background-color: var(--yoroi-palette-gray-400);
+            color: var(--yoroi-palette-gray-800);
+            border-radius: 8px;
+            margin-right: 10px;
+        }
+
+        .permission {
+            margin-right: 10px;
+            padding: 8px 16px;
+            font-size: 12px;
+            border-radius: 8px;
+        }
+
+        .getPermission {
+            background-color: var(--yoroi-palette-secondary-300);
+            color: #fff;
+        }
+
+        .removePermission {
+            background-color: var(--yoroi-palette-error-200);
+            color: #fff;
+        }
+    }
 }