Skip to content

Commit

Permalink
Merge pull request #3618 from swaponline/fieldlabel-ts
Browse files Browse the repository at this point in the history 
FieldLabel: ts-ignore
  • Loading branch information
@alyavasilyeva
alyavasilyeva authored Nov 20, 2020
2 parents aaa3cfd + ee51d9e commit 98bad44
Show file tree
Hide file tree
Showing 17 changed files with 1,999 additions and 1,751 deletions.
27 changes: 18 additions & 9 deletions src/front/shared/components/forms/FieldLabel/FieldLabel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
import React from 'react'
import PropTypes from 'prop-types'
import { constants } from 'helpers'

import cx from 'classnames'

import cssModules from 'react-css-modules'
import styles from './FieldLabel.scss'


const isDark = localStorage.getItem(constants.localStorage.isDark)

const FieldLabel = ({ children, inRow, inDropDown, positionStatic }) => (
<div styleName={cx('label', { 'inRow': inRow }, { 'inDropDown': inDropDown }, { 'positionStatic': positionStatic }, { '--dark': isDark })} >{children}</div>
)

FieldLabel.propTypes = {
inRow: PropTypes.bool,
interface FieldLabelProps {
children: React.ReactNode
inRow?: boolean
inDropDown?: boolean
positionStatic?: boolean
}

const FieldLabel = ({ children, inRow, inDropDown, positionStatic }: FieldLabelProps) => (
<div
styleName={cx(
'label',
{ inRow: inRow },
{ inDropDown: inDropDown },
{ positionStatic: positionStatic },
{ '--dark': isDark }
)}
>
{children}
</div>
)

export default cssModules(FieldLabel, styles, { allowMultiple: true })
158 changes: 85 additions & 73 deletions src/front/shared/components/modals/AddCustomERC20/AddCustomERC20.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,19 @@ import ReactTooltip from 'react-tooltip'
import typeforce from 'swap.app/util/typeforce'
import Web3 from 'web3'

const serviceURLMainnet = 'https://api.etherscan.io/api?apikey=87F9B9IH33JPVRM5ZVFEK1DQTM64FUZFMV&module=proxy&action=eth_call'
const serviceURLTestnet = 'https://api-rinkeby.etherscan.io/api?apikey=87F9B9IH33JPVRM5ZVFEK1DQTM64FUZFMV&module=proxy&action=eth_call'
const serviceURL = (process.env.MAINNET) ? serviceURLMainnet : serviceURLTestnet
const serviceURLMainnet =
'https://api.etherscan.io/api?apikey=87F9B9IH33JPVRM5ZVFEK1DQTM64FUZFMV&module=proxy&action=eth_call'
const serviceURLTestnet =
'https://api-rinkeby.etherscan.io/api?apikey=87F9B9IH33JPVRM5ZVFEK1DQTM64FUZFMV&module=proxy&action=eth_call'
const serviceURL = process.env.MAINNET ? serviceURLMainnet : serviceURLTestnet

const nameSignature = '0x06fdde03'
const decimalsSignature = '0x313ce567'
const symbolSignature = '0x95d89b41'



@injectIntl
@cssModules({ ...styles, ...ownStyle }, { allowMultiple: true })
export default class AddCustomERC20 extends React.Component<any, any> {

props: any

static propTypes = {
Expand All @@ -58,7 +57,7 @@ export default class AddCustomERC20 extends React.Component<any, any> {
}
}

componentDidMount() { }
componentDidMount() {}

async getName(address) {
const response = await request.get(`${serviceURL}&to=${address}&data=${nameSignature}`)
Expand All @@ -67,7 +66,7 @@ export default class AddCustomERC20 extends React.Component<any, any> {

return symbol.replace(/\W/g, '')
}

async getSymbol(address) {
const response = await request.get(`${serviceURL}&to=${address}&data=${symbolSignature}`)
const hexSymbol = response.result
Expand Down Expand Up @@ -109,7 +108,7 @@ export default class AddCustomERC20 extends React.Component<any, any> {
notFound: true,
isShipped: false,
})
setTimeout( () => {
setTimeout(() => {
this.setState({
notFound: false,
})
Expand All @@ -120,8 +119,8 @@ export default class AddCustomERC20 extends React.Component<any, any> {
handleConfirm = async () => {
//@ts-ignore
const { tokenAddress, tokenSymbol, tokenDecimals } = this.state
actions.token.AddCustomERC20( tokenAddress, tokenSymbol, tokenDecimals )
actions.core.markCoinAsVisible( tokenSymbol.toUpperCase(), true )
actions.token.AddCustomERC20(tokenAddress, tokenSymbol, tokenDecimals)
actions.core.markCoinAsVisible(tokenSymbol.toUpperCase(), true)
//@ts-ignore
this.setState({
step: 'ready',
Expand All @@ -138,7 +137,7 @@ export default class AddCustomERC20 extends React.Component<any, any> {
return typeforce.isCoinAddress.ETH(tokenAddress)
}

handleError = err => {
handleError = (err) => {
console.error(err)
}

Expand All @@ -151,25 +150,20 @@ export default class AddCustomERC20 extends React.Component<any, any> {
tokenDecimals,
isShipped,
notFound,
//@ts-ignore
//@ts-ignore
} = this.state

const {
name,
data: {
currency,
},
data: { currency },
intl,
//@ts-ignore
//@ts-ignore
} = this.props

const linked = Link.all(this, 'tokenAddress')

const isDisabled =
!tokenAddress || isShipped
|| !this.addressIsCorrect()
const isDisabled = !tokenAddress || isShipped || !this.addressIsCorrect()


const localeLabel = defineMessages({
title: {
id: 'customERC20_Title',
Expand All @@ -184,59 +178,65 @@ export default class AddCustomERC20 extends React.Component<any, any> {
return (
/*
//@ts-ignore*/
<Modal name={name} title={`${intl.formatMessage(localeLabel.title)}`} disableClose={this.props.data.disableClose}>
<Modal
name={name}
title={`${intl.formatMessage(localeLabel.title)}`}
disableClose={this.props.data.disableClose}
>
<div styleName="erc20ModalHolder">
{ step === 'enterAddress' &&
{step === 'enterAddress' && (
<Fragment>
<div styleName="highLevel">
{/*
//@ts-ignore */}
<FieldLabel inRow>
<span style={{ fontSize: '16px' }}>
<FormattedMessage id="customERC20_Address" defaultMessage="Адрес контракта" />
</span>
</FieldLabel>
<Input
valueLink={linked.tokenAddress}
focusOnInit pattern="0-9a-zA-Z:"
focusOnInit
pattern="0-9a-zA-Z:"
placeholder={intl.formatMessage(localeLabel.addressPlaceholder)}
/>
{notFound &&
{notFound && (
<div styleName="rednote">
<FormattedMessage
id="customERC20_NotFound"
defaultMessage="По указаному адресу не найден токен ERC20" />
defaultMessage="По указаному адресу не найден токен ERC20"
/>
</div>
}
)}
{tokenAddress && !this.addressIsCorrect() && (
<div styleName="rednote">
<FormattedMessage
id="customERC20_IncorrectAddress"
defaultMessage="Вы ввели не коректный адрес" />
defaultMessage="Вы ввели не коректный адрес"
/>
</div>
)}
</div>
<Button styleName="buttonFullMargin" brand fullWidth disabled={isDisabled} onClick={this.handleSubmit}>
{isShipped
? (
<Fragment>
<FormattedMessage id="customERC20_Processing" defaultMessage="Обработка ..." />
</Fragment>
)
: (
<Fragment>
<FormattedMessage id="customERC20_NextStep" defaultMessage="Далее" />
</Fragment>
)
}
<Button
styleName="buttonFullMargin"
brand
fullWidth
disabled={isDisabled}
onClick={this.handleSubmit}
>
{isShipped ? (
<Fragment>
<FormattedMessage id="customERC20_Processing" defaultMessage="Обработка ..." />
</Fragment>
) : (
<Fragment>
<FormattedMessage id="customERC20_NextStep" defaultMessage="Далее" />
</Fragment>
)}
</Button>
</Fragment>
}
{ step === 'confirm' &&
)}
{step === 'confirm' && (
<Fragment>
<div styleName="lowLevel">
{/*
//@ts-ignore */}
<FieldLabel inRow>
<span style={{ fontSize: '16px' }}>
<FormattedMessage id="customERC20_Address" defaultMessage="Адрес контракта" />
Expand All @@ -245,18 +245,17 @@ export default class AddCustomERC20 extends React.Component<any, any> {
<div styleName="fakeInput">{tokenAddress}</div>
</div>
<div styleName="lowLevel">
{/*
//@ts-ignore */}
<FieldLabel inRow>
<span style={{ fontSize: '16px' }}>
<FormattedMessage id="customERC20_TokenTitle" defaultMessage="Название токена" />
<FormattedMessage
id="customERC20_TokenTitle"
defaultMessage="Название токена"
/>
</span>
</FieldLabel>
<div styleName="fakeInput">{tokenTitle}</div>
</div>
<div styleName="lowLevel">
{/*
//@ts-ignore */}
<FieldLabel inRow>
<span style={{ fontSize: '16px' }}>
<FormattedMessage id="customERC20_TokenSymbol" defaultMessage="Символ токена" />
Expand All @@ -265,48 +264,61 @@ export default class AddCustomERC20 extends React.Component<any, any> {
<div styleName="fakeInput">{tokenSymbol}</div>
</div>
<div styleName="lowLevel">
{/*
//@ts-ignore */}
<FieldLabel inRow>
<span style={{ fontSize: '16px' }}>
<FormattedMessage id="customERC20_TokenDecimals" defaultMessage="Знаков после запятой" />
<FormattedMessage
id="customERC20_TokenDecimals"
defaultMessage="Знаков после запятой"
/>
</span>
</FieldLabel>
<div styleName="fakeInput">{tokenDecimals}</div>
</div>
<Button styleName="buttonFullMargin" brand fullWidth disabled={isDisabled} onClick={this.handleConfirm}>
{isShipped
? (
<Fragment>
<FormattedMessage id="customERC20_Processing" defaultMessage="Обработка ..." />
</Fragment>
)
: (
<Fragment>
<FormattedMessage id="customERC20_ConfirmStep" defaultMessage="Добавить этот токен" />
</Fragment>
)
}
<Button
styleName="buttonFullMargin"
brand
fullWidth
disabled={isDisabled}
onClick={this.handleConfirm}
>
{isShipped ? (
<Fragment>
<FormattedMessage id="customERC20_Processing" defaultMessage="Обработка ..." />
</Fragment>
) : (
<Fragment>
<FormattedMessage
id="customERC20_ConfirmStep"
defaultMessage="Добавить этот токен"
/>
</Fragment>
)}
</Button>
</Fragment>
}
{ step === 'ready' &&
)}
{step === 'ready' && (
<Fragment>
<h4 styleName="readyTitle">
<FormattedMessage
id="customERC20_ReadyMessage"
defaultMessage="Токен успешно добавлен"
/>
</h4>
<Button styleName="buttonFullMargin" brand fullWidth disabled={isDisabled} onClick={this.handleReady}>
<Button
styleName="buttonFullMargin"
brand
fullWidth
disabled={isDisabled}
onClick={this.handleReady}
>
<Fragment>
<FormattedMessage id="customERC20_Ready" defaultMessage="Готово" />
</Fragment>
</Button>
</Fragment>
}
)}
</div>
</Modal>
)
}
}
}
Loading

0 comments on commit 98bad44

Please sign in to comment.