Fix claim step (#176)

* Fix claim step * Fix * Fix step 0
crustio · Jun 11, 2021 · 4a83dfc · 4a83dfc
1 parent 20e1241
commit 4a83dfc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 44 deletions.
diff --git a/packages/apps/public/locales/zh/translation.json b/packages/apps/public/locales/zh/translation.json
@@ -1492,7 +1492,8 @@
   "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等)进行转账，使用交易所账户发起转账(提币)交易, 均会失效, 造成资产损失.",
+  "0. Please make sure you have the authority to make signature with the private key of the wallet account ": "0. 请确认您使用的是带私钥签名权限的钱包(metamask, imtoken等)进行转账 ",
+  ", using an exchange account to sent a transfer (withdrawal) transaction will be invalidated and cause asset loss.": ", 使用交易所账户发起转账(提币)交易, 均会失效, 造成资产损失.",
   " You are responsible for the consequences!": " 后果自负!",
   "nav.csmStaking": "CSM质押",
   "CSM Staking": "CSM质押",
@@ -1502,5 +1503,6 @@
   "Daily Rewards": "每日奖励",
   "Storage Data": "存储文件大小",
   "Effective stake": "总有效质押",
-  "Daily Rewards per 1K CSM": "每1000CSM每日奖励"
+  "Daily Rewards per 1K CSM": "每1000CSM每日奖励",
+  "address: ": "地址: "
 }
diff --git a/packages/page-claims/src/claims/index.tsx b/packages/page-claims/src/claims/index.tsx
@@ -84,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.Transfer);
+  const [step, setStep] = useState<Step>(Step.Account);
   const [accountId, setAccountId] = useState<string | null>(null);
   const { api, systemChain } = useApi();
   const { t } = useTranslation();
@@ -148,12 +148,6 @@ function Claims (): React.ReactElement<Props> {
     setEthereumTxHashValid(false);
   }, []);
 
-  const goToStepTransfer = useCallback(() => {
-    setStep(Step.Transfer);
-    setEthereumTxHash("");
-    setEthereumTxHashValid(false);
-  }, []);
-
   const goToStepSign = useCallback(() => {
     setStep(Step.Sign);
   }, []);
@@ -288,18 +282,11 @@ function Claims (): React.ReactElement<Props> {
       </h1>
       <Columar>
         <Columar.Column>
-          {(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>
+          <Card withBottomMargin>
+            <h3><span style={{"wordWrap": "break-word", "wordBreak": "break-all"}}>{t<string>(`0. Please make sure you have the authority to make signature with the private key of the wallet account `)}<span style={{ 'fontWeight': 'bold' }}>({t<string>('address: ')}<a href='https://etherscan.io/address/0x17a9037cdfb24ffcc13697d03c3bcd4dff34732b' target="_blank">0x17A9037cdFB24FfcC13697d03C3bcd4DFF34732b</a>)</span><span>{t<string>(', 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></span></h3>
+            <img style={{'marginLeft': 'auto', 'marginRight': 'auto', 'display': 'block', "width": "150px" }} src={claimPng as string} />
+          </Card>
+          {(<Card withBottomMargin>
             <h3>{t<string>(`1. Select your {{chain}} account and enter`, {
                 replace: {
                   chain: systemChain
@@ -415,12 +402,13 @@ function Claims (): React.ReactElement<Props> {
           )}
         </Columar.Column>
         <Columar.Column>
+
           {(step >= Step.Claim) && (
             isPreclaimed
               ? <AttestDisplay
                 accountId={accountId}
                 ethereumAddress={ethereumAddress}
-                onSuccess={goToStepTransfer}
+                onSuccess={goToStepAccount}
                 statementKind={statementKind}
                 systemChain={systemChain}
               />
@@ -429,7 +417,7 @@ function Claims (): React.ReactElement<Props> {
                 ethereumAddress={ethereumAddress}
                 ethereumSignature={signature}
                 isOldClaimProcess={isOldClaimProcess}
-                onSuccess={goToStepTransfer}
+                onSuccess={goToStepAccount}
                 statementKind={statementKind}
                 ethereumTxHash={ethereumTxHash}
               />

diff --git a/packages/page-claims/src/maxwellCsmClaims/index.tsx b/packages/page-claims/src/maxwellCsmClaims/index.tsx
@@ -83,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.Transfer);
+  const [step, setStep] = useState<Step>(Step.Account);
   const [accountId, setAccountId] = useState<string | null>(null);
   const { api, systemChain } = useApi();
   const { t } = useTranslation();
@@ -147,12 +147,6 @@ function CSMClaims (): React.ReactElement<Props> {
     setEthereumTxHashValid(false);
   }, []);
 
-  const goToStepTransfer = useCallback(() => {
-    setStep(Step.Transfer);
-    setEthereumTxHash("");
-    setEthereumTxHashValid(false);
-  }, []);
-
   const goToStepSign = useCallback(() => {
     setStep(Step.Sign);
   }, []);
@@ -288,18 +282,11 @@ function CSMClaims (): React.ReactElement<Props> {
       </h1>
       <Columar>
         <Columar.Column>
-          {(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>
+          <Card withBottomMargin>
+            <h3><span style={{"wordWrap": "break-word", "wordBreak": "break-all"}}>{t<string>(`0. Please make sure you have the authority to make signature with the private key of the wallet account `)}<span style={{ 'fontWeight': 'bold' }}>({t<string>('address: ')}<a href='https://etherscan.io/address/0x17a9037cdfb24ffcc13697d03c3bcd4dff34732b' target="_blank">0x17A9037cdFB24FfcC13697d03C3bcd4DFF34732b</a>)</span><span>{t<string>(', 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></span></h3>
+            <img style={{'marginLeft': 'auto', 'marginRight': 'auto', 'display': 'block', "width": "150px" }} src={claimPng as string} />
+          </Card>
+          {(<Card withBottomMargin>
             <h3>{t<string>(`1. Select your {{chain}} account and enter`, {
                 replace: {
                   chain: systemChain
@@ -423,7 +410,7 @@ function CSMClaims (): React.ReactElement<Props> {
               ? <AttestDisplay
                 accountId={accountId}
                 ethereumAddress={ethereumAddress}
-                onSuccess={goToStepTransfer}
+                onSuccess={goToStepAccount}
                 statementKind={statementKind}
                 systemChain={systemChain}
               />
@@ -432,7 +419,7 @@ function CSMClaims (): React.ReactElement<Props> {
                 ethereumAddress={ethereumAddress}
                 ethereumSignature={signature}
                 isOldClaimProcess={isOldClaimProcess}
-                onSuccess={goToStepTransfer}
+                onSuccess={goToStepAccount}
                 statementKind={statementKind}
                 ethereumTxHash={ethereumTxHash}
               />