Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Send/SendToken.js
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import { WalletContext } from '@utils/context'; | import { WalletContext } from '@utils/context'; | ||||
import { | import { | ||||
Form, | Form, | ||||
notification, | notification, | ||||
message, | message, | ||||
Row, | Row, | ||||
Col, | Col, | ||||
Alert, | Alert, | ||||
Descriptions, | Descriptions, | ||||
} from 'antd'; | } from 'antd'; | ||||
import Paragraph from 'antd/lib/typography/Paragraph'; | import Paragraph from 'antd/lib/typography/Paragraph'; | ||||
import PrimaryButton, { | import PrimaryButton, { | ||||
SecondaryButton, | SecondaryButton, | ||||
} from '@components/Common/PrimaryButton'; | } from '@components/Common/PrimaryButton'; | ||||
import { CashLoader } from '@components/Common/CustomIcons'; | |||||
import { | import { | ||||
FormItemWithMaxAddon, | FormItemWithMaxAddon, | ||||
FormItemWithQRCodeAddon, | FormItemWithQRCodeAddon, | ||||
} from '@components/Common/EnhancedInputs'; | } from '@components/Common/EnhancedInputs'; | ||||
import useBCH from '@hooks/useBCH'; | import useBCH from '@hooks/useBCH'; | ||||
import { BalanceHeader } from '@components/Common/BalanceHeader'; | import { BalanceHeader } from '@components/Common/BalanceHeader'; | ||||
import { Redirect } from 'react-router-dom'; | import { Redirect } from 'react-router-dom'; | ||||
import useWindowDimensions from '@hooks/useWindowDimensions'; | import useWindowDimensions from '@hooks/useWindowDimensions'; | ||||
import { isMobile, isIOS, isSafari } from 'react-device-detect'; | import { isMobile, isIOS, isSafari } from 'react-device-detect'; | ||||
import { Img } from 'react-image'; | import { Img } from 'react-image'; | ||||
import makeBlockie from 'ethereum-blockies-base64'; | import makeBlockie from 'ethereum-blockies-base64'; | ||||
import BigNumber from 'bignumber.js'; | import BigNumber from 'bignumber.js'; | ||||
import { | import { | ||||
currency, | currency, | ||||
parseAddress, | parseAddress, | ||||
isValidTokenPrefix, | isValidTokenPrefix, | ||||
} from '@components/Common/Ticker.js'; | } from '@components/Common/Ticker.js'; | ||||
import { Event } from '@utils/GoogleAnalytics'; | import { Event } from '@utils/GoogleAnalytics'; | ||||
import { | import { | ||||
getWalletState, | getWalletState, | ||||
convertEtokenToSimpleledger, | convertEtokenToSimpleledger, | ||||
} from '@utils/cashMethods'; | } from '@utils/cashMethods'; | ||||
import { TokenReceivedNotificationIcon } from '@components/Common/CustomIcons'; | import { TokenReceivedNotificationIcon } from '@components/Common/CustomIcons'; | ||||
import { ApiError } from '@components/Common/ApiError'; | |||||
const SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => { | const SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => { | ||||
const { wallet, apiError } = React.useContext(WalletContext); | const { wallet, apiError } = React.useContext(WalletContext); | ||||
const walletState = getWalletState(wallet); | const walletState = getWalletState(wallet); | ||||
const { tokens, slpBalancesAndUtxos } = walletState; | const { tokens, slpBalancesAndUtxos } = walletState; | ||||
const token = tokens.find(token => token.tokenId === tokenId); | const token = tokens.find(token => token.tokenId === tokenId); | ||||
const [tokenStats, setTokenStats] = useState(null); | const [tokenStats, setTokenStats] = useState(null); | ||||
▲ Show 20 Lines • Show All 310 Lines • ▼ Show 20 Lines | return ( | ||||
> | > | ||||
{apiError || | {apiError || | ||||
sendTokenAmountError || | sendTokenAmountError || | ||||
sendTokenAddressError ? ( | sendTokenAddressError ? ( | ||||
<> | <> | ||||
<SecondaryButton> | <SecondaryButton> | ||||
Send {token.info.tokenName} | Send {token.info.tokenName} | ||||
</SecondaryButton> | </SecondaryButton> | ||||
{apiError && <CashLoader />} | |||||
</> | </> | ||||
) : ( | ) : ( | ||||
<PrimaryButton onClick={() => submit()}> | <PrimaryButton onClick={() => submit()}> | ||||
Send {token.info.tokenName} | Send {token.info.tokenName} | ||||
</PrimaryButton> | </PrimaryButton> | ||||
)} | )} | ||||
</div> | </div> | ||||
{queryStringText && ( | {queryStringText && ( | ||||
<Alert | <Alert | ||||
message={`You are sending a transaction to an address including query parameters "${queryStringText}." Token transactions do not support query parameters and they will be ignored.`} | message={`You are sending a transaction to an address including query parameters "${queryStringText}." Token transactions do not support query parameters and they will be ignored.`} | ||||
type="warning" | type="warning" | ||||
/> | /> | ||||
)} | )} | ||||
{apiError && ( | {apiError && <ApiError />} | ||||
<p | |||||
style={{ | |||||
color: 'red', | |||||
}} | |||||
> | |||||
<b> | |||||
An error occured on our end. | |||||
Reconnecting... | |||||
</b> | |||||
</p> | |||||
)} | |||||
</Form> | </Form> | ||||
{tokenStats !== null && ( | {tokenStats !== null && ( | ||||
<Descriptions | <Descriptions | ||||
column={1} | column={1} | ||||
bordered | bordered | ||||
title={`Token info for "${token.info.tokenName}"`} | title={`Token info for "${token.info.tokenName}"`} | ||||
> | > | ||||
<Descriptions.Item label="Decimals"> | <Descriptions.Item label="Decimals"> | ||||
▲ Show 20 Lines • Show All 62 Lines • Show Last 20 Lines |