91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import React, { PureComponent, MouseEvent } from 'react'
|
|
import Dotdotdot from 'react-dotdotdot'
|
|
import { toDataUrl } from 'ethereum-blockies'
|
|
import styles from './Account.module.scss'
|
|
import WalletSelector from '../organisms/WalletSelector'
|
|
import content from '../../data/web3message.json'
|
|
import { ReactComponent as Caret } from '../../img/caret.svg'
|
|
import { User } from '../../context'
|
|
import Button from './Button'
|
|
|
|
export default class Account extends PureComponent<
|
|
{},
|
|
{ isAccountInfoOpen: boolean }
|
|
> {
|
|
public static contextType = User
|
|
|
|
public state = {
|
|
isAccountInfoOpen: false
|
|
}
|
|
|
|
private toggleAccountInfo(event: MouseEvent) {
|
|
event.preventDefault()
|
|
this.setState({ isAccountInfoOpen: !this.state.isAccountInfoOpen })
|
|
}
|
|
|
|
public render() {
|
|
const { account, isBurner, loginMetamask, isWeb3Capable } = this.context
|
|
const { isAccountInfoOpen } = this.state
|
|
const seedphrase = localStorage.getItem('seedphrase') as string
|
|
const blockies = account && toDataUrl(account)
|
|
|
|
return (
|
|
<div className={styles.account}>
|
|
{account ? (
|
|
<>
|
|
<img
|
|
className={styles.blockies}
|
|
src={blockies}
|
|
alt="Blockies"
|
|
/>
|
|
<Dotdotdot className={styles.accountId} clamp={2}>
|
|
{account}
|
|
</Dotdotdot>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className={styles.blockies} />
|
|
<em className={styles.noAccount}>
|
|
No account selected
|
|
</em>
|
|
<Button
|
|
link
|
|
className={styles.unlock}
|
|
onClick={() => loginMetamask()}
|
|
>
|
|
Unlock Account
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
<div className={styles.accountType}>
|
|
{isBurner ? (
|
|
<button
|
|
className={styles.toggle}
|
|
onClick={(event) => this.toggleAccountInfo(event)}
|
|
title="Show More Account Info"
|
|
>
|
|
<Caret
|
|
className={isAccountInfoOpen ? styles.open : ''}
|
|
/>{' '}
|
|
Burner Wallet
|
|
</button>
|
|
) : (
|
|
'MetaMask'
|
|
)}
|
|
{isWeb3Capable && <WalletSelector />}
|
|
</div>
|
|
|
|
{isBurner && isAccountInfoOpen && (
|
|
<div className={styles.seedphrase}>
|
|
<code>{seedphrase}</code>
|
|
<p className={styles.seedphraseHelp}>
|
|
{content.seedphrase}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
}
|