diff --git a/src/components/Web3message.module.scss b/src/components/Web3message.module.scss new file mode 100644 index 0000000..0067977 --- /dev/null +++ b/src/components/Web3message.module.scss @@ -0,0 +1,44 @@ +@import '../styles/variables'; + +.message { + margin-bottom: $spacer; + color: $brand-grey-light; + padding-left: 1.5rem; + position: relative; +} + +// default: red square +.indicator { + display: inline-block; + width: $font-size-small; + height: $font-size-small; + background: $red; + margin-right: $spacer / 8; + position: absolute; + left: 0; + top: .3rem; +} + +// yellow triangle +.indicatorCloseEnough { + composes: indicator; + background: none; + width: 0; + height: 0; + border-left: $font-size-small / 1.75 solid transparent; + border-right: $font-size-small / 1.75 solid transparent; + border-bottom: $font-size-small solid $yellow; +} + +// green circle +.indicatorActive { + composes: indicator; + border-radius: 50%; + background: $green; +} + +.account { + font-family: $font-family-monospace; + display: inline-block; + margin-left: $spacer / 8; +} diff --git a/src/components/Web3message.tsx b/src/components/Web3message.tsx new file mode 100644 index 0000000..ddb1d7a --- /dev/null +++ b/src/components/Web3message.tsx @@ -0,0 +1,48 @@ +import React, { PureComponent } from 'react' +import Button from '../components/atoms/Button' +import styles from './Web3message.module.scss' + +export default class Web3message extends PureComponent { + public render() { + // let indicatorClasses = styles.indicatorCloseEnough + + // if (this.props.activeAccount) { + // indicatorClasses = styles.indicatorActive + // } + + return ( + <> + {/* IF no Web3 */} +
+ No Web3 Browser. For + publishing an asset you need to use a Web3-capable plugin or + browser, like{' '} + + MetaMask + + . +
+ + {/* IF connected and account locked */} +
+ Account + locked. For publishing an asset you need to unlock your Web3 + account. + +
+ + {/* IF connected and unlocked */} +
+ Connected with + account + + 0xfehz2u89n... + +
+ + ) + } +} diff --git a/src/components/atoms/Button.module.scss b/src/components/atoms/Button.module.scss index c298a64..8805c03 100644 --- a/src/components/atoms/Button.module.scss +++ b/src/components/atoms/Button.module.scss @@ -4,6 +4,7 @@ border: 0; cursor: pointer; outline: 0; + margin: 0; display: inline-block; width: fit-content; padding: $spacer / 4 $spacer; diff --git a/src/routes/Publish.tsx b/src/routes/Publish.tsx index 82222d0..4a8fdf8 100644 --- a/src/routes/Publish.tsx +++ b/src/routes/Publish.tsx @@ -5,6 +5,7 @@ import Form from '../components/atoms/Form/Form' import Input from '../components/atoms/Form/Input' import { User } from '../context/User' import AssetModel from '../models/AssetModel' +import Web3message from '../components/Web3message' import form from '../data/form-publish.json' @@ -117,6 +118,8 @@ class Publish extends Component<{}, PublishState> { return ( + +