From b63f1c571c1004cf6732e007f484c0d93463a0db Mon Sep 17 00:00:00 2001 From: thib Date: Thu, 14 May 2020 09:40:30 +0200 Subject: [PATCH 1/3] Eth field --- packages/page-claims/src/Claim.tsx | 8 ++- packages/page-claims/src/index.tsx | 79 ++++++++++++++++++++---------- 2 files changed, 56 insertions(+), 31 deletions(-) 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..8daaec6f1e19 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'; @@ -115,15 +115,27 @@ 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 && !isOldClaimProcess && 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}` : ''; + console.log('statementKind', statementKind); + return (
@@ -158,31 +170,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) && (