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

feedback for wallet interaction within price widget

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-30 11:03:26 +02:00
parent 8efbe74e51
commit 5bc7b65265
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/molecules/FormFields/Price/Advanced.tsx
View File

@ -1,21 +1,20 @@
import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react' import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
import { InputProps } from '../../../atoms/Input' import { InputProps } from '../../../atoms/Input'
import InputElement from '../../../atoms/Input/InputElement'
import stylesIndex from './index.module.css' import stylesIndex from './index.module.css'
import styles from './Advanced.module.css' import styles from './Advanced.module.css'
import Label from '../../../atoms/Input/Label'
import { MetadataPublishForm } from '../../../../@types/MetaData' import { MetadataPublishForm } from '../../../../@types/MetaData'
import Cost from './Cost'
import Conversion from '../../../atoms/Price/Conversion'
import FormHelp from '../../../atoms/Input/Help' import FormHelp from '../../../atoms/Input/Help'
import Wallet from '../../Wallet' import Wallet from '../../Wallet'
import { useOcean } from '@oceanprotocol/react' import { useOcean } from '@oceanprotocol/react'
import Alert from '../../../atoms/Alert' import Alert from '../../../atoms/Alert'
import Coin from './Coin' import Coin from './Coin'
import { isCorrectNetwork } from '../../../../utils/wallet'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
export default function Advanced(props: InputProps): ReactElement { export default function Advanced(props: InputProps): ReactElement {
const { appConfig } = useSiteMetadata()
const { price } = props.form.values as MetadataPublishForm const { price } = props.form.values as MetadataPublishForm
const { balance } = useOcean() const { account, balance, chainId } = useOcean()
const cost = '1' const cost = '1'
const weightOnDataToken = '90' // in % const weightOnDataToken = '90' // in %
@ -24,9 +23,18 @@ export default function Advanced(props: InputProps): ReactElement {
const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10) const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10)
const [error, setError] = useState<string>() const [error, setError] = useState<string>()
const correctNetwork = isCorrectNetwork(chainId)
const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
c.toUpperCase()
)
// Check: account, network & insuffciant balance
useEffect(() => { useEffect(() => {
if (balance.ocean < ocean) { if (!account) {
setError(`No account detected. Please connect your wallet.`)
} else if (!correctNetwork) {
setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
} else if (balance.ocean < ocean) {
setError(`Insufficiant balance. You need at least ${ocean} OCEAN`) setError(`Insufficiant balance. You need at least ${ocean} OCEAN`)
} else { } else {
setError(undefined) setError(undefined)

1
src/components/molecules/FormFields/Price/Coin.tsx
View File

@ -4,7 +4,6 @@ import styles from './Coin.module.css'
import InputElement from '../../../atoms/Input/InputElement' import InputElement from '../../../atoms/Input/InputElement'
import { ReactComponent as Logo } from '../../../../images/logo.svg' import { ReactComponent as Logo } from '../../../../images/logo.svg'
import Conversion from '../../../atoms/Price/Conversion' import Conversion from '../../../atoms/Price/Conversion'
import Label from '../../../atoms/Input/Label'
export default function Coin({ export default function Coin({
symbol, symbol,

4
src/components/molecules/Wallet/Feedback.tsx
View File

@ -21,7 +21,7 @@ export default function Web3Feedback({
const isOceanConnectionError = status === -1 const isOceanConnectionError = status === -1
const correctNetwork = isCorrectNetwork(chainId) const correctNetwork = isCorrectNetwork(chainId)
const showFeedback = !account || isOceanConnectionError || !correctNetwork const showFeedback = !account || isOceanConnectionError || !correctNetwork
const networkName = appConfig.network.replace(/^\w/, (c: string) => const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
c.toUpperCase() c.toUpperCase()
) )
@ -50,7 +50,7 @@ export default function Web3Feedback({
: isOceanConnectionError : isOceanConnectionError
? 'Please try again.' ? 'Please try again.'
: !correctNetwork : !correctNetwork
? `Please connect to ${networkName}.` ? `Please connect to ${desiredNetworkName}.`
: isBalanceInsufficient === true : isBalanceInsufficient === true
? 'You do not have enough OCEAN in your wallet to purchase this asset.' ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
: 'Something went wrong.' : 'Something went wrong.'