mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
style wallet selection modal, move out content
This commit is contained in:
parent
57db99049f
commit
0d6875f065
|
@ -16,14 +16,17 @@
|
||||||
background: $brand-white;
|
background: $brand-white;
|
||||||
border: 1px solid $brand-grey-lighter;
|
border: 1px solid $brand-grey-lighter;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
padding: $spacer $spacer / 1.5;
|
line-height: 1.5;
|
||||||
|
padding: $spacer / 1.5;
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
display: inline-block;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
text-align: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: border .2s ease-out;
|
transition: border .2s ease-out;
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $spacer;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
@media (min-width: $break-point--small) {
|
@media (min-width: $break-point--small) {
|
||||||
flex-basis: 48%;
|
flex-basis: 48%;
|
||||||
|
@ -34,20 +37,37 @@
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $brand-pink;
|
border-color: $brand-pink;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
.buttonActive {
|
||||||
display: block;
|
composes: button;
|
||||||
width: 100%;
|
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 {
|
.buttonTitle {
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
margin-bottom: $spacer / 2;
|
margin-bottom: $spacer / 2;
|
||||||
font-weight: $font-weight-bold;
|
font-weight: $font-weight-bold;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonDescription {
|
.buttonDescription {
|
||||||
font-size: $font-size-small;
|
font-size: $font-size-small;
|
||||||
color: $brand-grey;
|
font-weight: $font-weight-bold;
|
||||||
|
color: $brand-grey-light;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import Modal from '../atoms/Modal'
|
||||||
import { User } from '../../context'
|
import { User } from '../../context'
|
||||||
import styles from './WalletSelector.module.scss'
|
import styles from './WalletSelector.module.scss'
|
||||||
import Button from '../atoms/Button'
|
import Button from '../atoms/Button'
|
||||||
|
import content from '../../data/wallets.json'
|
||||||
|
|
||||||
export default class WalletSelector extends PureComponent<
|
export default class WalletSelector extends PureComponent<
|
||||||
{},
|
{},
|
||||||
|
@ -29,6 +30,50 @@ export default class WalletSelector extends PureComponent<
|
||||||
this.toggleModal()
|
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() {
|
public render() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -37,39 +82,23 @@ export default class WalletSelector extends PureComponent<
|
||||||
className={styles.openLink}
|
className={styles.openLink}
|
||||||
onClick={this.toggleModal}
|
onClick={this.toggleModal}
|
||||||
>
|
>
|
||||||
Select wallet
|
{content.title}
|
||||||
</Button>
|
</Button>
|
||||||
<Modal
|
<Modal
|
||||||
title="Select wallet"
|
title={content.title}
|
||||||
description="Select the wallet you want to use in the Commons Marketplace. By default, we create a burner wallet in your browser."
|
description={content.description}
|
||||||
isOpen={this.state.isModalOpen}
|
isOpen={this.state.isModalOpen}
|
||||||
toggleModal={this.toggleModal}
|
toggleModal={this.toggleModal}
|
||||||
>
|
>
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
<button
|
{content.buttons.map(({ title, description, icon }) => (
|
||||||
className={styles.button}
|
<this.WalletButton
|
||||||
onClick={this.loginBurnerWallet}
|
key={title}
|
||||||
>
|
title={title}
|
||||||
<span className={styles.buttonTitle}>
|
icon={icon}
|
||||||
BurnerWallet
|
description={description}
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
</>
|
</>
|
||||||
|
|
16
client/src/data/wallets.json
Normal file
16
client/src/data/wallets.json
Normal 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."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user