From bf23336749bf72c61f23fecf0ad7a7c9da39da1e Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 17:38:09 +0200
Subject: [PATCH] fix flow between claim and attest

---
 packages/page-claims/src/Attest.tsx |  4 +-
 packages/page-claims/src/Claim.tsx  | 18 ++++-----
 packages/page-claims/src/index.tsx  | 63 +++++++++--------------------
 3 files changed, 30 insertions(+), 55 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index a728dbc6f8ce..f247f4b9dab4 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -18,9 +18,9 @@ function Attest ({ accountId, className }: Props): React.ReactElement<Props> | n
   const { t } = useTranslation();
 
   return (
-    <Card>
+    <Card isSuccess>
       <div className={className}>
-        {t('By signing this transaction, you agree with attestation available at the following address: XXX')}
+        {t('By signing this transaction, you agree with the attestation available at the following address: XXX')}
         <h3>{addrToChecksum(accountId)}</h3>
         <Button.Group>
           <TxButton
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 124277d540ef..8bb54f497a4f 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -19,22 +19,22 @@ interface Props {
   className?: string;
   ethereumAddress: EthereumAddress | null;
   ethereumSignature: string | null;
-  // Do we sign with `claims.claimAttest` instead of `claims.claim`?
-  isClaimAttest: boolean;
+  // Do we sign with `claims.claimAttest` (new) instead of `claims.claim` (old)?
+  isOldClaimProcess: boolean;
 }
 
-// Depending on isClaimAttest, construct the correct tx.
-function constructTx (accountId: string, ethereumSignature: string | null, isClaimAttest: boolean): {
+// Depending on isOldClaimProcess, construct the correct tx.
+function constructTx (accountId: string, ethereumSignature: string | null, isOldClaimProcess: boolean): {
   params: any[];
   tx: string;
 } {
-  return isClaimAttest
+  return isOldClaimProcess
     // FIXME How to get the StatementKind?
-    ? { params: [accountId, ethereumSignature, 'Default'], tx: 'claims.claimAttest' }
-    : { params: [accountId, ethereumSignature], tx: 'claims.claimAttest' };
+    ? { params: [accountId, ethereumSignature], tx: 'claims.claimAttest' }
+    : { params: [accountId, ethereumSignature, 'Default'], tx: 'claims.claimAttest' };
 }
 
-function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isClaimAttest }: Props): React.ReactElement<Props> | null {
+function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
@@ -87,7 +87,7 @@ function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isCl
                   icon='send'
                   isPrimary
                   label={t('Claim')}
-                  {...constructTx(accountId, ethereumSignature, isClaimAttest)}
+                  {...constructTx(accountId, ethereumSignature, isOldClaimProcess)}
                 />
               </Button.Group>
             </>
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index aecfcd92a8f6..ce11392628aa 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Option } from '@polkadot/types';
-import { Balance, EcdsaSignature, EthereumAddress } from '@polkadot/types/interfaces';
+import { EcdsaSignature, EthereumAddress } from '@polkadot/types/interfaces';
 import { AppProps, I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
 
@@ -69,7 +69,6 @@ const Signature = styled.textarea`
 
 const ClaimsApp = (props: Props): React.ReactElement => {
   const [isOldClaimProcess, setIsOldClaimProcess] = useState(true);
-  const [claim, setClaim] = useState<Balance | null>(null);
   const [didCopy, setDidCopy] = useState(false);
   const [ethereumAddress, setEthereumAddress] = useState<EthereumAddress | null>(null);
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);
@@ -80,7 +79,7 @@ const ClaimsApp = (props: Props): React.ReactElement => {
   const [isPreclaimed, setIsPreclaimed] = useState(false);
 
   useEffect(() => {
-    if (isApiReady && typeof api.query.claims.claimAttest !== undefined) {
+    if (isApiReady && typeof api.query.claims.claimAttest !== 'undefined') {
       setIsOldClaimProcess(false);
     }
 
@@ -95,29 +94,33 @@ const ClaimsApp = (props: Props): React.ReactElement => {
     }
   }, [didCopy]);
 
+  const goToStepSign = useCallback(() => {
+    setStep(Step.Sign);
+  }, []);
+
+  const goToStepClaim = useCallback(() => {
+    setStep(Step.Claim);
+  }, []);
+
   useEffect(() => {
     if (isApiReady && accountId) {
       api.query.claims
         .preclaims<Option<EthereumAddress>>(accountId)
         .then((opt): void => {
           setIsPreclaimed(opt.isSome);
+
+          if (opt.isSome) {
+            goToStepClaim();
+          } else {
+            goToStepSign();
+          }
         });
     }
-  }, [accountId, api.query.claims, isApiReady]);
-
-  const goToStepSign = useCallback(() => {
-    setStep(Step.Sign);
-  }, []);
-
-  const goToStepClaim = useCallback(() => {
-    setStep(Step.Claim);
-  }, []);
+  }, [accountId, api.query.claims, goToStepClaim, goToStepSign, isApiReady]);
 
   const onChangeAccount = useCallback((newAccountId) => {
     setAccountId(newAccountId);
-    // FIXME Amaury It should not be Step.Sign
-    goToStepSign();
-  }, [goToStepSign]);
+  }, []);
 
   const onChangeSignature = useCallback((event: React.SyntheticEvent<Element>) => {
     const { value: signatureJson } = event.target as HTMLInputElement;
@@ -219,41 +222,13 @@ const ClaimsApp = (props: Props): React.ReactElement => {
                 accountId={accountId}
                 ethereumAddress={ethereumAddress}
                 ethereumSignature={signature}
-                // Use claims.claimAttest is chain supports it
-                isClaimAttest={!!api.query.claims.claimAttest}
+                isOldClaimProcess={isOldClaimProcess}
               />
           )}
         </Column>
       </Columar>
     </main>
   );
-
-  // FIXME Amaury Below are from the old component
-  // How to use TxModalNew?
-  // }
-
-  // protected isDisabled = (): boolean => {
-  //   const { accountId, signature } = this.state;
-
-  //   return !accountId || !signature;
-  // }
-
-  // protected isUnsigned = (): boolean => true;
-
-  // protected submitLabel = (): React.ReactNode => this.props.t('Redeem');
-
-  // protected txMethod = (): string => 'claims.claim';
-
-  // protected txParams = (): [string | null, EcdsaSignature | null] => {
-  //   const { accountId, signature } = this.state;
-
-  //   return [
-  //     accountId ? accountId.toString() : null,
-  //     signature || null
-  //   ];
-  // }
-
-  // }
 };
 
 export default withMulti(