oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

style wallet selection modal, move out content

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-07-10 21:24:02 +02:00
parent 57db99049f
commit 0d6875f065
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 99 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/src/components/organisms/WalletSelector.module.scss
View File

@ -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;
}

83
client/src/components/organisms/WalletSelector.tsx
View File

@ -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>
</>

16
client/src/data/wallets.json Normal file
View File

@ -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."
}
]
}