diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx index 3ca7b27c86bd..ba983d75d44a 100644 --- a/packages/page-claims/src/Claim.tsx +++ b/packages/page-claims/src/Claim.tsx @@ -8,7 +8,7 @@ import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/inter import React, { useCallback, useEffect, useState } from 'react'; import styled from 'styled-components'; import { Button, Card, TxButton } from '@polkadot/react-components'; -import { useApi, useCall } from '@polkadot/react-hooks'; +import { useApi } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; import { useTranslation } from './translate'; @@ -21,6 +21,7 @@ interface Props { ethereumSignature: string | null; // Do we sign with `claims.claimAttest` (new) instead of `claims.claim` (old)? isOldClaimProcess: boolean; + statementKind?: StatementKind; } // Depending on isOldClaimProcess, construct the correct tx. @@ -33,15 +34,12 @@ function constructTx (accountId: string, ethereumSignature: string | null, kind: : { params: [accountId, ethereumSignature, kind], tx: 'claims.claimAttest' }; } -function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess }: Props): React.ReactElement | null { +function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess, statementKind }: Props): React.ReactElement | null { const { t } = useTranslation(); const { api } = useApi(); const [claimValue, setClaimValue] = useState(null); const [claimAddress, setClaimAddress] = useState(null); const [isBusy, setIsBusy] = useState(false); - const statementKind = useCall(ethereumAddress && !isOldClaimProcess && api.query.claims.signing, [ethereumAddress], { - transform: (option: Option) => option.unwrapOr(undefined) - }); const _fetchClaim = useCallback( (address: EthereumAddress): void => { diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx index 896cf31d2d69..d73e8db94cd6 100644 --- a/packages/page-claims/src/index.tsx +++ b/packages/page-claims/src/index.tsx @@ -3,13 +3,13 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { Option } from '@polkadot/types'; -import { EcdsaSignature, EthereumAddress } from '@polkadot/types/interfaces'; +import { EcdsaSignature, EthereumAddress, StatementKind } from '@polkadot/types/interfaces'; import React, { useState, useCallback, useEffect } from 'react'; import { Trans } from 'react-i18next'; import styled from 'styled-components'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { Button, Card, Columar, Column, InputAddress, Tooltip } from '@polkadot/react-components'; +import { Button, Card, Columar, Column, InputAddress, Tooltip, Input } from '@polkadot/react-components'; import { TokenUnit } from '@polkadot/react-components/InputNumber'; import { u8aToHex, u8aToString } from '@polkadot/util'; import { decodeAddress } from '@polkadot/util-crypto'; @@ -74,7 +74,7 @@ const ClaimsApp = (): React.ReactElement => { transform: (option: Option) => option.isSome }); - const isOldClaimProcess = !api.query.claims.claimAttest; + const isOldClaimProcess = !api.tx.claims.claimAttest; useEffect(() => { if (didCopy) { @@ -115,13 +115,24 @@ const ClaimsApp = (): React.ReactElement => { setSignature(signature); }, []); + const onChangeEthereumAddress = useCallback((value: string) => { + // FIXME We surely need a better check than just a trim + const trimmedAddress = value.trim() as unknown as EthereumAddress; + + setEthereumAddress(trimmedAddress); + }, []); + const onCopy = useCallback(() => { setDidCopy(true); }, []); + const statementKind = useCall(ethereumAddress && api.query.claims.signing, [ethereumAddress], { + transform: (option: Option) => option.unwrapOr(undefined) + }) || ''; + const prefix = u8aToString(api.consts.claims.prefix.toU8a(true)); const payload = accountId - ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}` + ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementKind}` : ''; return ( @@ -158,31 +169,45 @@ const ClaimsApp = (): React.ReactElement => { {(step >= Step.Sign && !!accountId && !isPreclaimed) && (

{t('2. Sign ETH transaction')}

- - } + {(!!ethereumAddress || isOldClaimProcess) && <> + - {payload} - - - -
- {t('Copy the above string and sign an Ethereum transaction with the account you used during the pre-sale in the wallet of your choice, using the string as the payload, and then paste the transaction signature object below')} + + {payload} + + + +
+ {/* FIXME Thibaut We need to present the statement clearly */} + {t('Copy the above string and sign an Ethereum transaction with the account you used during the pre-sale in the wallet of your choice, using the string as the payload, and then paste the transaction signature object below')} : -
- +
+ + } {(step === Step.Sign) && (