1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

add wallet to advanced price widget, UI tweaks

This commit is contained in:
Matthias Kretschmann 2020-07-29 17:37:30 +02:00
parent 9b6de84a1c
commit 88f7b717d3
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 28 additions and 7 deletions

View File

@ -6,3 +6,8 @@
gap: calc(var(--spacer) / 2); gap: calc(var(--spacer) / 2);
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.wallet > button {
margin: calc(var(--spacer) / 2) auto var(--spacer) auto;
display: block;
}

View File

@ -8,14 +8,16 @@ import { MetadataPublishForm } from '../../../../@types/MetaData'
import Cost from './Cost' import Cost from './Cost'
import Conversion from '../../../atoms/Price/Conversion' import Conversion from '../../../atoms/Price/Conversion'
import FormHelp from '../../../atoms/Input/Help' import FormHelp from '../../../atoms/Input/Help'
import Wallet from '../../Wallet'
export default function Advanced(props: InputProps): ReactElement { export default function Advanced(props: InputProps): ReactElement {
const { price } = props.form.values as MetadataPublishForm const { price } = props.form.values as MetadataPublishForm
const [ocean, setOcean] = useState('1') const cost = '1'
const weight = '90' // in % const weight = '90' // in %
const [ocean, setOcean] = useState('1')
const tokensToMint = Number(ocean) * (Number(weight) / 100) const tokensToMint = Number(ocean) * (Number(weight) / 100)
const cost = Number(ocean) / Number(tokensToMint)
function handleOceanChange(event: ChangeEvent<HTMLInputElement>) { function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
setOcean(event.target.value) setOcean(event.target.value)
@ -30,6 +32,10 @@ export default function Advanced(props: InputProps): ReactElement {
liquidity pool will be created with Balancer. liquidity pool will be created with Balancer.
</FormHelp> </FormHelp>
<aside className={styles.wallet}>
<Wallet />
</aside>
<div> <div>
<div> <div>
<Label htmlFor="ocean">Ocean Tokens</Label> <Label htmlFor="ocean">Ocean Tokens</Label>

View File

@ -7,8 +7,8 @@ import Advanced from './Advanced'
export default function Price(props: InputProps): ReactElement { export default function Price(props: InputProps): ReactElement {
const tabs = [ const tabs = [
{ title: 'Simple', content: <Simple {...props} /> }, { title: 'Simple: Fixed', content: <Simple {...props} /> },
{ title: 'Advanced', content: <Advanced {...props} /> } { title: 'Advanced: Dynamic', content: <Advanced {...props} /> }
] ]
return ( return (

View File

@ -1,4 +1,4 @@
import React from 'react' import React, { FormEvent } from 'react'
import styles from './Account.module.css' import styles from './Account.module.css'
import { useOcean } from '@oceanprotocol/react' import { useOcean } from '@oceanprotocol/react'
import { toDataUrl } from 'ethereum-blockies' import { toDataUrl } from 'ethereum-blockies'
@ -26,8 +26,18 @@ const Account = React.forwardRef((props, ref: any) => {
const { accountId, status, connect, chainId } = useOcean() const { accountId, status, connect, chainId } = useOcean()
const hasSuccess = status === 1 && isCorrectNetwork(chainId) const hasSuccess = status === 1 && isCorrectNetwork(chainId)
async function handleActivation(e: FormEvent<HTMLButtonElement>) {
e.preventDefault()
await connectWallet(connect)
}
return accountId ? ( return accountId ? (
<button className={styles.button} aria-label="Account" ref={ref}> <button
className={styles.button}
aria-label="Account"
ref={ref}
onClick={(e) => e.preventDefault()}
>
<Blockies account={accountId} /> <Blockies account={accountId} />
<span className={styles.address} title={accountId}> <span className={styles.address} title={accountId}>
{accountTruncate(accountId)} {accountTruncate(accountId)}
@ -40,7 +50,7 @@ const Account = React.forwardRef((props, ref: any) => {
) : ( ) : (
<button <button
className={styles.button} className={styles.button}
onClick={async () => await connect()} onClick={(e) => handleActivation(e)}
// Need the `ref` here although we do not want // Need the `ref` here although we do not want
// the Tippy to show in this state. // the Tippy to show in this state.
ref={ref} ref={ref}