From 0d6875f06581713e35842b34031497967307b24f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 10 Jul 2019 21:24:02 +0200
Subject: [PATCH] style wallet selection modal, move out content

---
 .../organisms/WalletSelector.module.scss      | 34 ++++++--
 .../components/organisms/WalletSelector.tsx   | 83 +++++++++++++------
 client/src/data/wallets.json                  | 16 ++++
 3 files changed, 99 insertions(+), 34 deletions(-)
 create mode 100644 client/src/data/wallets.json

diff --git a/client/src/components/organisms/WalletSelector.module.scss b/client/src/components/organisms/WalletSelector.module.scss
index aa08bfe..2989d26 100644
--- a/client/src/components/organisms/WalletSelector.module.scss
+++ b/client/src/components/organisms/WalletSelector.module.scss
@@ -16,14 +16,17 @@
     background: $brand-white;
     border: 1px solid $brand-grey-lighter;
     border-radius: $border-radius;
-    padding: $spacer $spacer / 1.5;
+    line-height: 1.5;
+    padding: $spacer / 1.5;
     font-family: $font-family-base;
-    display: inline-block;
     display: flex;
     flex-wrap: wrap;
+    align-items: flex-start;
+    text-align: left;
     cursor: pointer;
     transition: border .2s ease-out;
     margin-bottom: $spacer;
+    position: relative;
 
     @media (min-width: $break-point--small) {
         flex-basis: 48%;
@@ -34,20 +37,37 @@
     &:focus {
         border-color: $brand-pink;
     }
+}
 
-    span {
-        display: block;
-        width: 100%;
-    }
+.buttonActive {
+    composes: button;
+    pointer-events: none;
+    background: $body-background;
+}
+
+.selected {
+    position: absolute;
+    right: $spacer / 3;
+    top: $spacer / 4;
+    color: $brand-grey-light;
+    font-weight: $font-weight-bold;
+}
+
+.buttonIcon {
+    font-size: $font-size-h4;
+    display: inline-block;
+    margin-right: $spacer / 4;
 }
 
 .buttonTitle {
     font-size: $font-size-base;
     margin-bottom: $spacer / 2;
     font-weight: $font-weight-bold;
+    margin-top: 0;
 }
 
 .buttonDescription {
     font-size: $font-size-small;
-    color: $brand-grey;
+    font-weight: $font-weight-bold;
+    color: $brand-grey-light;
 }
diff --git a/client/src/components/organisms/WalletSelector.tsx b/client/src/components/organisms/WalletSelector.tsx
index 93243e0..11327b5 100644
--- a/client/src/components/organisms/WalletSelector.tsx
+++ b/client/src/components/organisms/WalletSelector.tsx
@@ -3,6 +3,7 @@ import Modal from '../atoms/Modal'
 import { User } from '../../context'
 import styles from './WalletSelector.module.scss'
 import Button from '../atoms/Button'
+import content from '../../data/wallets.json'
 
 export default class WalletSelector extends PureComponent<
     {},
@@ -29,6 +30,50 @@ export default class WalletSelector extends PureComponent<
         this.toggleModal()
     }
 
+    private WalletButton = ({
+        title,
+        description,
+        icon
+    }: {
+        title: string
+        description: string
+        icon: string
+    }) => {
+        const active =
+            (title === 'Burner Wallet' && this.context.isBurner) ||
+            (title === 'MetaMask' && !this.context.isBurner)
+
+        return (
+            <button
+                className={active ? styles.buttonActive : styles.button}
+                onClick={
+                    title === 'MetaMask'
+                        ? this.loginMetamask
+                        : this.loginBurnerWallet
+                }
+            >
+                <div>
+                    <h3 className={styles.buttonTitle}>
+                        <span
+                            className={styles.buttonIcon}
+                            role="img"
+                            aria-label={title}
+                        >
+                            {icon}
+                        </span>
+                        {title}
+                    </h3>
+                    <span className={styles.buttonDescription}>
+                        {description}
+                    </span>
+                    {active && (
+                        <span className={styles.selected}>Selected</span>
+                    )}
+                </div>
+            </button>
+        )
+    }
+
     public render() {
         return (
             <>
@@ -37,39 +82,23 @@ export default class WalletSelector extends PureComponent<
                     className={styles.openLink}
                     onClick={this.toggleModal}
                 >
-                    Select wallet
+                    {content.title}
                 </Button>
                 <Modal
-                    title="Select wallet"
-                    description="Select the wallet you want to use in the Commons Marketplace. By default, we create a burner wallet in your browser."
+                    title={content.title}
+                    description={content.description}
                     isOpen={this.state.isModalOpen}
                     toggleModal={this.toggleModal}
                 >
                     <div className={styles.info}>
-                        <button
-                            className={styles.button}
-                            onClick={this.loginBurnerWallet}
-                        >
-                            <span className={styles.buttonTitle}>
-                                BurnerWallet
-                            </span>
-                            <span className={styles.buttonDescription}>
-                                Provides the easiest way to use Commons without
-                                further setup. But the wallet will be gone when
-                                you change browsers or clear your cache.
-                            </span>
-                        </button>
-                        <button
-                            className={styles.button}
-                            onClick={this.loginMetamask}
-                        >
-                            <span className={styles.buttonTitle}>MetaMask</span>
-                            <span className={styles.buttonDescription}>
-                                Provides the most secure experience attaching
-                                everything you do in Commons to an account you
-                                control. But you need to setup MetaMask first.
-                            </span>
-                        </button>
+                        {content.buttons.map(({ title, description, icon }) => (
+                            <this.WalletButton
+                                key={title}
+                                title={title}
+                                icon={icon}
+                                description={description}
+                            />
+                        ))}
                     </div>
                 </Modal>
             </>
diff --git a/client/src/data/wallets.json b/client/src/data/wallets.json
new file mode 100644
index 0000000..81ad512
--- /dev/null
+++ b/client/src/data/wallets.json
@@ -0,0 +1,16 @@
+{
+  "title": "Select wallet",
+  "description": "Select the wallet you want to use in the Commons Marketplace. By default, we create a burner wallet in your browser allowing you to use all functionality without further setup.",
+  "buttons": [
+    {
+      "title": "Burner Wallet",
+      "icon": "🔥",
+      "description": "Easiest way to use Commons without further setup. But the wallet will be gone when you change browsers or clear your cache."
+    },
+    {
+      "title": "MetaMask",
+      "icon": "🦊",
+      "description": "Most secure experience attaching everything you do in Commons to an account you control. But you need to setup MetaMask first."
+    }
+  ]
+}