Disconnect button (#293)

* disconnect button

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* styling

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

src/components/molecules/Wallet/Details.module.css

@@ -1,5 +1,6 @@
 .details {
   padding: calc(var(--spacer) / 4);
+  padding-right: calc(var(--spacer) / 2);
   min-width: 17rem;
 }
 
@@ -27,9 +28,28 @@
   border-top: 1px solid var(--border-color);
   margin-top: calc(var(--spacer) / 2);
   padding-top: calc(var(--spacer) / 2);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   font-size: var(--font-size-small);
   color: var(--color-secondary);
+  display: flex;
+  justify-content: space-between;
+}
+
+.actions span {
+  display: block;
+}
+
+.actions p {
+  margin: 0;
+}
+
+.actions button,
+.actions button:hover {
+  display: block;
+  font-size: var(--font-size-mini);
+  margin-top: calc(var(--spacer) / 4);
+  text-align: left;
+}
+
+.actions button:first-child {
+  margin-top: calc(var(--spacer) / 8);
 }

src/components/molecules/Wallet/Details.tsx

@@ -27,6 +27,7 @@ export default function Details(): ReactElement {
 
         <li className={styles.actions}>
           <span title="Connected provider">{getInjectedProviderName()}</span>
+          <p>
             <Button
               style="text"
               size="small"
@@ -37,6 +38,17 @@ export default function Details(): ReactElement {
             >
               Switch Wallet
             </Button>
+            <Button
+              style="text"
+              size="small"
+              onClick={() => {
+                logout()
+                location.reload()
+              }}
+            >
+              Disconnect
+            </Button>
+          </p>
         </li>
       </ul>
       <Web3Feedback />