Skip to content

Commit

Permalink
Fix content (#170) (#171)
Browse files Browse the repository at this point in the history 
* Add claim step 0

* Fix csm claim url

* Change claim png

* Fix

* Fix claim step content
  • Loading branch information
@yashirooooo
yashirooooo committed Jun 4, 2021
1 parent f1c1777 commit 88eaef1
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 49 deletions.
6 changes: 5 additions & 1 deletion packages/apps/public/locales/zh/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1489,5 +1489,9 @@
"Send CSM": "发送CSM",
"Send Candy": "发送糖果",
"Candy": "糖果",
"Claim CRU": "认领CRU"
"Claim CRU": "认领CRU",
"The remaining claim limit is ": "剩余认领上限为",
", If your claim amount is greater than the claim limit, please wait for the limit update": ", 如果你的认领数量大于认领上限, 请等待认领上限更新",
"0. Please make sure you have the authority to make signature with the private key of the wallet account, using an exchange account to sent a transfer (withdrawal) transaction will be invalidated and cause asset loss.": "0. 请确认您使用的是带私钥签名权限的钱包(metamask, imtoken等)进行转账，使用交易所账户发起转账(提币)交易, 均会失效, 造成资产损失.",
" You are responsible for the consequences!": " 后果自负!"
}
66 changes: 42 additions & 24 deletions packages/page-claims/src/claims/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,13 @@ import Warning from './Warning';
// @ts-ignore
import { httpPost } from './http';
import HttpStatus from './HttpStatus';
import { formatBalance } from '@polkadot/util';

export { default as useCounter } from '../useCounter';
import claimPng from '../images/claim-addr.png';

enum Step {
Transfer = -1,
Account = 0,
ETHAddress = 1,
Sign = 2,
Expand Down Expand Up @@ -81,7 +84,7 @@ function Claims (): React.ReactElement<Props> {
const [didCopy, setDidCopy] = useState(false);
const [ethereumAddress, setEthereumAddress] = useState<string | undefined | null>(null);
const [signature, setSignature] = useState<EcdsaSignature | null>(null);
const [step, setStep] = useState<Step>(Step.Account);
const [step, setStep] = useState<Step>(Step.Transfer);
const [accountId, setAccountId] = useState<string | null>(null);
const { api, systemChain } = useApi();
const { t } = useTranslation();
Expand All @@ -99,6 +102,7 @@ function Claims (): React.ReactElement<Props> {
// - `PRECLAIMS_LOADING` if we're fetching the results
const [preclaimEthereumAddress, setPreclaimEthereumAddress] = useState<string | null | undefined | typeof PRECLAIMS_LOADING>(PRECLAIMS_LOADING);
const isPreclaimed = !!preclaimEthereumAddress && preclaimEthereumAddress !== PRECLAIMS_LOADING;
const claimLimit = useCall<BalanceOf>(api.query.claims.claimLimit);

// Everytime we change account, reset everything, and check if the accountId
// has a preclaim.
Expand Down Expand Up @@ -140,6 +144,14 @@ function Claims (): React.ReactElement<Props> {

const goToStepAccount = useCallback(() => {
setStep(Step.Account);
setEthereumTxHash("");
setEthereumTxHashValid(false);
}, []);

const goToStepTransfer = useCallback(() => {
setStep(Step.Transfer);
setEthereumTxHash("");
setEthereumTxHashValid(false);
}, []);

const goToStepSign = useCallback(() => {
Expand Down Expand Up @@ -276,15 +288,23 @@ function Claims (): React.ReactElement<Props> {
</h1>
<Columar>
<Columar.Column>
<Card withBottomMargin>
{/* <h3>{t<string>(`0. Please confirm that you are using your wallet to transfer funds instead of using the exchange transfer`)}</h3>
<img src={'https://wiki.crust.network/docs/assets/claims/new_claim_addr.png'} /> */}

{(step === Step.Transfer) && (<Card withBottomMargin>
<h3><span>{t<string>(`0. Please make sure you have the authority to make signature with the private key of the wallet account, using an exchange account to sent a transfer (withdrawal) transaction will be invalidated and cause asset loss.`)}</span><span style={{ 'fontWeight': 'bold', 'color': 'red' }}>{t<string>(` You are responsible for the consequences!`)}</span></h3>
<img style={{'marginLeft': 'auto', 'marginRight': 'auto', 'display': 'block' }} src={claimPng as string} />
<Button.Group>
<Button
icon='sign-in-alt'
label={t<string>('Continue')}
onClick={goToStepAccount}
/>
</Button.Group>
</Card>)}
{(step >= Step.Account) && (<Card withBottomMargin>
<h3>{t<string>(`1. Select your {{chain}} account and enter`, {
replace: {
chain: systemChain
}
})} <a href='https://etherscan.io/token/0x32a7C02e79c4ea1008dD6564b35F131428673c41'>{t('ERC20 CRU')}</a> {t<string>('transfer tx hash')} </h3>
})} <a href='https://etherscan.io/token/0x32a7C02e79c4ea1008dD6564b35F131428673c41'>{t('ERC20 CRU')}</a> {t<string>('transfer tx hash')}, <span>{t<string>(`The remaining claim limit is `)}<span style={{'color': '#ff8812', 'textDecoration': 'underline', 'fontStyle': 'italic'}}>{formatBalance(claimLimit, { withUnit: 'CRU' })}</span><span>{t<string>(`, If your claim amount is greater than the claim limit, please wait for the limit update`)}</span></span> </h3>
<InputAddress
defaultValue={accountId}
help={t<string>('The account you want to claim to.')}
Expand All @@ -303,28 +323,26 @@ function Claims (): React.ReactElement<Props> {
onChange={onChangeEthereumTxHash}
placeholder={t<string>('0x prefixed hex, e.g. 0x1234 or ascii data')}
value={ethereumTxHash || ''}
/>
{(step === Step.Account) && (
<Button.Group>
<Button
icon='sign-in-alt'
isBusy={isBusy}
isDisabled={preclaimEthereumAddress === PRECLAIMS_LOADING || ethereumTxHash === null || ethereumTxHash === '' || !isValid}
label={preclaimEthereumAddress === PRECLAIMS_LOADING
? t<string>('Loading')
: t<string>('Continue')
}
onClick={handleAccountStep}
/>
</Button.Group>
)}
/>
{(step === Step.Account) && (<Button.Group>
<Button
icon='sign-in-alt'
isBusy={isBusy}
isDisabled={preclaimEthereumAddress === PRECLAIMS_LOADING || ethereumTxHash === null || ethereumTxHash === '' || !isValid}
label={preclaimEthereumAddress === PRECLAIMS_LOADING
? t<string>('Loading')
: t<string>('Continue')
}
onClick={handleAccountStep}
/>
</Button.Group>)}
<HttpStatus
isStatusOpen={statusOpen}
message={result}
setStatusOpen={setStatusOpen}
status={status}
/>
</Card>
</Card>)}
{
// We need to know the ethereuem address only for the new process
// to be able to know the statement kind so that the users can sign it
Expand Down Expand Up @@ -402,7 +420,7 @@ function Claims (): React.ReactElement<Props> {
? <AttestDisplay
accountId={accountId}
ethereumAddress={ethereumAddress}
onSuccess={goToStepAccount}
onSuccess={goToStepTransfer}
statementKind={statementKind}
systemChain={systemChain}
/>
Expand All @@ -411,7 +429,7 @@ function Claims (): React.ReactElement<Props> {
ethereumAddress={ethereumAddress}
ethereumSignature={signature}
isOldClaimProcess={isOldClaimProcess}
onSuccess={goToStepAccount}
onSuccess={goToStepTransfer}
statementKind={statementKind}
ethereumTxHash={ethereumTxHash}
/>
Expand Down
Binary file added packages/page-claims/src/images/claim-addr.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion packages/page-claims/src/maxwellCsmClaims/Claim.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { FormatCsmBalance } from '@polkadot/react-query';

import { useTranslation } from '../translate';
import { addrToChecksum, getStatement } from './util';

interface Props {
accountId: string;
className?: string;
Expand Down
70 changes: 47 additions & 23 deletions packages/page-claims/src/maxwellCsmClaims/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,13 @@ import Warning from './Warning';
// @ts-ignore
import { httpPost } from './http';
import HttpStatus from './HttpStatus';
import claimPng from '../images/claim-addr.png';
import { formatBalance } from '@polkadot/util';

export { default as useCounter } from '../useCounter';

enum Step {
Transfer = -1,
Account = 0,
ETHAddress = 1,
Sign = 2,
Expand Down Expand Up @@ -80,7 +83,7 @@ function CSMClaims (): React.ReactElement<Props> {
const [didCopy, setDidCopy] = useState(false);
const [ethereumAddress, setEthereumAddress] = useState<string | undefined | null>(null);
const [signature, setSignature] = useState<EcdsaSignature | null>(null);
const [step, setStep] = useState<Step>(Step.Account);
const [step, setStep] = useState<Step>(Step.Transfer);
const [accountId, setAccountId] = useState<string | null>(null);
const { api, systemChain } = useApi();
const { t } = useTranslation();
Expand All @@ -91,6 +94,7 @@ function CSMClaims (): React.ReactElement<Props> {
const [isBusy, setIsBusy] = useState<boolean>(false);
const [isValid, setIsValid] = useState(false);
const [ethereumTxHash, setEthereumTxHash] = useState<string | undefined | null>(null);
const csmClaimLimit = useCall<BalanceOf>(api.query.claims.csmClaimLimit);

// This preclaimEthereumAddress holds the result of `api.query.claims.preclaims`:
// - an `EthereumAddress` when there's a preclaim
Expand Down Expand Up @@ -139,6 +143,14 @@ function CSMClaims (): React.ReactElement<Props> {

const goToStepAccount = useCallback(() => {
setStep(Step.Account);
setEthereumTxHash("");
setEthereumTxHashValid(false);
}, []);

const goToStepTransfer = useCallback(() => {
setStep(Step.Transfer);
setEthereumTxHash("");
setEthereumTxHashValid(false);
}, []);

const goToStepSign = useCallback(() => {
Expand Down Expand Up @@ -189,7 +201,7 @@ function CSMClaims (): React.ReactElement<Props> {
})
.catch((): void => setIsBusy(false));
}
}, [ethereumAddress, goToStepClaim, goToStepSign, isPreclaimed, isOldClaimProcess, ethereumTxHash]);
}, [ethereumAddress, goToStepAccount, goToStepClaim, goToStepSign, isPreclaimed, isOldClaimProcess, ethereumTxHash]);

const onChangeEthereumTxHash = useCallback((hex: string) => {
let [isValid, value] = convertInput(hex);
Expand Down Expand Up @@ -267,7 +279,7 @@ function CSMClaims (): React.ReactElement<Props> {
const payload = accountId
? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementSentence}${ethereumTxHash?.substring(2)}`
: '';

return (
<main>
{!isOldClaimProcess && <Warning />}
Expand All @@ -276,13 +288,26 @@ function CSMClaims (): React.ReactElement<Props> {
</h1>
<Columar>
<Columar.Column>
<Card withBottomMargin>
{(step === Step.Transfer) && (<Card withBottomMargin>
<h3><span>{t<string>(`0. Please make sure you have the authority to make signature with the private key of the wallet account, using an exchange account to sent a transfer (withdrawal) transaction will be invalidated and cause asset loss.`)}</span><span style={{ 'fontWeight': 'bold', 'color': 'red' }}>{t<string>(` You are responsible for the consequences!`)}</span></h3>
<img style={{'marginLeft': 'auto', 'marginRight': 'auto', 'display': 'block', 'width': '360px' }} src={claimPng as string} />
<Button.Group>
<Button
icon='sign-in-alt'
label={t<string>('Continue')}
onClick={goToStepAccount}
/>
</Button.Group>
</Card>)}
{(step >= Step.Account) && (<Card withBottomMargin>
<h3>{t<string>(`1. Select your {{chain}} account and enter`, {
replace: {
chain: systemChain
}
})} <a href='https://rinkeby.etherscan.io/token/0x7a1c61c526dae21c23b50a490c18d04f8077608f'>{t('ERC20 CSM')}</a> {t<string>('transfer tx hash')} </h3>
<InputAddress
})} <a href='https://rinkeby.etherscan.io/token/0x7a1c61c526dae21c23b50a490c18d04f8077608f'>{t('ERC20 CSM')}</a> {t<string>('transfer tx hash')}, <span>{t<string>(`The remaining claim limit is `)}<span style={{'color': '#ff8812', 'textDecoration': 'underline', 'fontStyle': 'italic'}}>{formatBalance(csmClaimLimit, { decimals: 12, withUnit: 'CSM' })}</span><span>{t<string>(`, If your claim amount is greater than the claim limit, please wait for the limit update`)}</span></span>
</h3>

<InputAddress
defaultValue={accountId}
help={t<string>('The account you want to claim to.')}
isDisabled={ethereumTxHashValid}
Expand All @@ -301,27 +326,26 @@ function CSMClaims (): React.ReactElement<Props> {
placeholder={t<string>('0x prefixed hex, e.g. 0x1234 or ascii data')}
value={ethereumTxHash || ''}
/>
{(step === Step.Account) && (
<Button.Group>
<Button
icon='sign-in-alt'
isBusy={isBusy}
isDisabled={preclaimEthereumAddress === PRECLAIMS_LOADING || ethereumTxHash === null || ethereumTxHash === '' || !isValid}
label={preclaimEthereumAddress === PRECLAIMS_LOADING
? t<string>('Loading')
: t<string>('Continue')
}
onClick={handleAccountStep}
/>
</Button.Group>
)}
{(step === Step.Account) && (<Button.Group>
<Button
icon='sign-in-alt'
isBusy={isBusy}
isDisabled={preclaimEthereumAddress === PRECLAIMS_LOADING || ethereumTxHash === null || ethereumTxHash === '' || !isValid}
label={preclaimEthereumAddress === PRECLAIMS_LOADING
? t<string>('Loading')
: t<string>('Continue')
}
onClick={handleAccountStep}
/>
</Button.Group>)}

<HttpStatus
isStatusOpen={statusOpen}
message={result}
setStatusOpen={setStatusOpen}
status={status}
/>
</Card>
</Card>)}
{
// We need to know the ethereuem address only for the new process
// to be able to know the statement kind so that the users can sign it
Expand Down Expand Up @@ -399,7 +423,7 @@ function CSMClaims (): React.ReactElement<Props> {
? <AttestDisplay
accountId={accountId}
ethereumAddress={ethereumAddress}
onSuccess={goToStepAccount}
onSuccess={goToStepTransfer}
statementKind={statementKind}
systemChain={systemChain}
/>
Expand All @@ -408,7 +432,7 @@ function CSMClaims (): React.ReactElement<Props> {
ethereumAddress={ethereumAddress}
ethereumSignature={signature}
isOldClaimProcess={isOldClaimProcess}
onSuccess={goToStepAccount}
onSuccess={goToStepTransfer}
statementKind={statementKind}
ethereumTxHash={ethereumTxHash}
/>
Expand Down

0 comments on commit 88eaef1

Please sign in to comment.