From 500558f4fe01abeb29a5c22e5c62d42bab36d96c Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Wed, 13 May 2020 11:55:47 +0200
Subject: [PATCH 01/74] init

---
 packages/page-claims/src/index.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index e1e531a42a67..9463887cbdfe 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -24,17 +24,19 @@ import translate from './translate';
 
 enum Step {
   Account = 0,
-  Sign = 1,
-  Claim = 2,
+  SignETH = 1,
+  SignAttest = 2,
+  Claim = 3,
 }
 
 interface Props extends AppProps, ApiProps, I18nProps, TxModalProps {}
 
 interface State extends TxModalState {
+  attestSignature?: string | null;
   didCopy: boolean;
   ethereumAddress: EthereumAddress | null;
+  ethereumSignature?: EcdsaSignature | null;
   claim?: Balance | null;
-  signature?: EcdsaSignature | null;
   step: Step;
 }
 
@@ -83,7 +85,7 @@ class ClaimsApp extends TxModal<Props, State> {
       claim: null,
       didCopy: false,
       ethereumAddress: null,
-      signature: null,
+      ethereumSignature: null,
       step: 0
     };
     this.state = this.defaultState;
@@ -99,7 +101,7 @@ class ClaimsApp extends TxModal<Props, State> {
 
   public render (): React.ReactNode {
     const { api, systemChain = '', t } = this.props;
-    const { accountId, didCopy, ethereumAddress, signature, step } = this.state;
+    const { accountId, didCopy, ethereumAddress, ethereumSignature: signature, step } = this.state;
 
     const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
     const payload = accountId
@@ -132,12 +134,12 @@ class ClaimsApp extends TxModal<Props, State> {
                   <Button
                     icon='sign-in'
                     label={t('Continue')}
-                    onClick={this.setStep(Step.Sign)}
+                    onClick={this.setStep(Step.SignETH)}
                   />
                 </Button.Group>
               )}
             </Card>
-            {(step >= Step.Sign && !!accountId) && (
+            {(step >= Step.SignETH && !!accountId) && (
               <Card>
                 <h3>{t('2. Sign ETH transaction')}</h3>
                 <CopyToClipboard
@@ -165,13 +167,13 @@ class ClaimsApp extends TxModal<Props, State> {
                   placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
                   rows={10}
                 />
-                {(step === Step.Sign) && (
+                {(step === Step.SignETH) && (
                   <Button.Group>
                     <Button
                       icon='sign-in'
                       isDisabled={!accountId || !signature}
                       label={t('Confirm claim')}
-                      onClick={this.setStep(Step.Claim)}
+                      onClick={this.setStep(Step.SignAttest)}
                     />
                   </Button.Group>
                 )}
@@ -192,7 +194,7 @@ class ClaimsApp extends TxModal<Props, State> {
   }
 
   protected isDisabled = (): boolean => {
-    const { accountId, signature } = this.state;
+    const { accountId, ethereumSignature: signature } = this.state;
 
     return !accountId || !signature;
   }
@@ -204,7 +206,7 @@ class ClaimsApp extends TxModal<Props, State> {
   protected txMethod = (): string => 'claims.claim';
 
   protected txParams = (): [string | null, EcdsaSignature | null] => {
-    const { accountId, signature } = this.state;
+    const { accountId, ethereumSignature: signature } = this.state;
 
     return [
       accountId ? accountId.toString() : null,
@@ -230,8 +232,8 @@ class ClaimsApp extends TxModal<Props, State> {
 
     this.setState(({ step }: State): Pick<State, never> => ({
       ...(
-        step > Step.Sign
-          ? { step: Step.Sign }
+        step > Step.SignETH
+          ? { step: Step.SignETH }
           : {}
       ),
       ...recoverFromJSON(signatureJson)

From f17564dba69095e71b1318e470282014253819b3 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Wed, 13 May 2020 13:45:56 +0200
Subject: [PATCH 02/74] Attest component

---
 packages/page-claims/src/Attest.tsx | 110 ++++++++++++++++++++++++++++
 packages/page-claims/src/Claim.tsx  |   3 +-
 packages/page-claims/src/index.tsx  |  39 +++++++---
 3 files changed, 140 insertions(+), 12 deletions(-)
 create mode 100644 packages/page-claims/src/Attest.tsx

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
new file mode 100644
index 000000000000..48e09300beba
--- /dev/null
+++ b/packages/page-claims/src/Attest.tsx
@@ -0,0 +1,110 @@
+// Copyright 2017-2020 @polkadot/app-claims authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Signer } from '@polkadot/api/types';
+import { web3FromSource } from '@polkadot/extension-dapp';
+import { KeyringPair } from '@polkadot/keyring/types';
+import { Button, Card } from '@polkadot/react-components';
+import keyring from '@polkadot/ui-keyring';
+import { stringToHex, stringToU8a, u8aToHex } from '@polkadot/util';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { useTranslation } from './translate';
+
+interface Props {
+  accountId: string;
+  className?: string;
+  data: string;
+  onNextStep: (signature: string) => void;
+}
+
+function Attest ({ accountId, className, data, onNextStep }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  // const [attestSignature, setAttestSignature] = useState<string | null>(null);
+  const [currentPair, setCurrentPair] = useState<KeyringPair | null>(null);
+  const [signer, setSigner] = useState<Signer | null >(null);
+
+  useEffect((): void => {
+    const isInjected = currentPair?.meta.isInjected || false;
+
+    // for injected, retrieve the signer
+    if (currentPair && isInjected) {
+      const { meta: { source } } = currentPair;
+
+      web3FromSource(source)
+        .catch((): null => null)
+        .then((injected): void => setSigner(
+          injected?.signer || null
+        ));
+    }
+  }, [currentPair]);
+
+  useEffect(() => {
+    setCurrentPair(keyring.getPair(accountId || ''));
+  }, [accountId]);
+
+  const _signAttest = useCallback(
+    (): void => {
+      if (!currentPair) {
+        return;
+      }
+
+      if (signer?.signRaw) {
+        signer
+          .signRaw({
+            address: currentPair.address,
+            data: stringToHex(data),
+            type: 'bytes'
+          })
+          .then(({ signature }): void => onNextStep(signature));
+      } else {
+        onNextStep(u8aToHex(
+          currentPair.sign(stringToU8a(data))
+        ));
+      }
+    },
+    [currentPair, data, onNextStep, signer]
+  );
+
+  return (
+    <Card className={className}>
+      <h3>{t('3. Sign attestation')}</h3>
+      <div>
+        {t('Clicking the following button will let you sign the hash of the attestation available at the following address: XXX')}
+                  :
+      </div>
+      <Button.Group>
+        <Button
+          icon='sign-in'
+          isDisabled={!accountId}
+          label={t('Sign attestation')}
+          onClick={_signAttest}
+        />
+      </Button.Group>
+
+    </Card>
+  );
+}
+
+export default React.memo(styled(Attest)`
+  /* font-size: 1.15rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 12rem;
+  align-items: center;
+  margin: 0 1rem; */
+
+  h3 {
+    font-family: monospace;
+    font-size: 1.5rem;
+    max-width: 100%;
+    margin: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`);
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 34a56435b226..af8e41561727 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -15,12 +15,13 @@ import { useTranslation } from './translate';
 import { addrToChecksum } from './util';
 
 interface Props {
+  attestSignature?: string | null;
   button: React.ReactNode;
   className?: string;
   ethereumAddress: EthereumAddress | null;
 }
 
-function Claim ({ button, className, ethereumAddress }: Props): React.ReactElement<Props> | null {
+function Claim ({ attestSignature, button, className, ethereumAddress }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 9463887cbdfe..29e0775852d4 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -18,6 +18,7 @@ import { u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
 import ClaimDisplay from './Claim';
+import AttestDisplay from './Attest';
 import { recoverFromJSON } from './util';
 
 import translate from './translate';
@@ -101,13 +102,15 @@ class ClaimsApp extends TxModal<Props, State> {
 
   public render (): React.ReactNode {
     const { api, systemChain = '', t } = this.props;
-    const { accountId, didCopy, ethereumAddress, ethereumSignature: signature, step } = this.state;
+    const { accountId, attestSignature, didCopy, ethereumAddress, ethereumSignature, step } = this.state;
 
     const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
     const payload = accountId
       ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}`
       : '';
 
+    console.log('ethereumSignature', ethereumSignature);
+
     return (
       <main>
         <header />
@@ -163,7 +166,7 @@ class ClaimsApp extends TxModal<Props, State> {
                   :
                 </div>
                 <Signature
-                  onChange={this.onChangeSignature}
+                  onChange={this.onChangeEthereumSignature}
                   placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
                   rows={10}
                 />
@@ -171,18 +174,29 @@ class ClaimsApp extends TxModal<Props, State> {
                   <Button.Group>
                     <Button
                       icon='sign-in'
-                      isDisabled={!accountId || !signature}
-                      label={t('Confirm claim')}
+                      isDisabled={!accountId || !ethereumSignature}
+                      label={t('Confirm Ethereum Signature')}
                       onClick={this.setStep(Step.SignAttest)}
                     />
                   </Button.Group>
                 )}
               </Card>
             )}
+            {(step >= Step.SignAttest && !!accountId && !!ethereumSignature) && (
+              <AttestDisplay
+                accountId={accountId}
+                data={'0x00'}
+                onNextStep={(signature: string): void => {
+                  this.setState({ attestSignature: signature });
+                  this.setStep(Step.Claim);
+                }}
+              />
+            )}
           </Column>
           <Column showEmptyText={false}>
-            {(step >= Step.Claim) && (
+            {(step >= Step.Claim && !!attestSignature) && (
               <ClaimDisplay
+                attestSignature={attestSignature}
                 button={this.renderTxButton()}
                 ethereumAddress={ethereumAddress}
               />
@@ -194,9 +208,9 @@ class ClaimsApp extends TxModal<Props, State> {
   }
 
   protected isDisabled = (): boolean => {
-    const { accountId, ethereumSignature: signature } = this.state;
+    const { accountId, ethereumSignature } = this.state;
 
-    return !accountId || !signature;
+    return !accountId || !ethereumSignature;
   }
 
   protected isUnsigned = (): boolean => true;
@@ -206,11 +220,11 @@ class ClaimsApp extends TxModal<Props, State> {
   protected txMethod = (): string => 'claims.claim';
 
   protected txParams = (): [string | null, EcdsaSignature | null] => {
-    const { accountId, ethereumSignature: signature } = this.state;
+    const { accountId, ethereumSignature } = this.state;
 
     return [
       accountId ? accountId.toString() : null,
-      signature || null
+      ethereumSignature || null
     ];
   }
 
@@ -227,16 +241,19 @@ class ClaimsApp extends TxModal<Props, State> {
     });
   }
 
-  protected onChangeSignature = (event: React.SyntheticEvent<Element>): void => {
+  protected onChangeEthereumSignature = (event: React.SyntheticEvent<Element>): void => {
     const { value: signatureJson } = event.target as HTMLInputElement;
 
+    const { ethereumAddress, signature } = recoverFromJSON(signatureJson);
+
     this.setState(({ step }: State): Pick<State, never> => ({
       ...(
         step > Step.SignETH
           ? { step: Step.SignETH }
           : {}
       ),
-      ...recoverFromJSON(signatureJson)
+      ethereumAddress,
+      ethereumSignature: signature
     }));
   }
 

From e2531ef22e0cf0d8b9a4cff543c8465c4cef420e Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 13:57:38 +0200
Subject: [PATCH 03/74] Add top notification bar

---
 packages/apps/src/Apps.tsx            |  2 ++
 packages/apps/src/overlays/Attest.tsx | 48 +++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 packages/apps/src/overlays/Attest.tsx

diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 78945c1c11ce..5cad9275abea 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -14,6 +14,7 @@ import { useApi } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';
 
 import AccountsOverlay from './overlays/Accounts';
+import AttestOverlay from './overlays/Attest';
 import ConnectingOverlay from './overlays/Connecting';
 import { SideBarTransition, SIDEBAR_MENU_THRESHOLD } from './constants';
 import Content from './Content';
@@ -93,6 +94,7 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
         </Signer>
         <ConnectingOverlay />
         <AccountsOverlay />
+        <AttestOverlay />
         <div id={PORTAL_ID} />
       </div>
       <WarmUp />
diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx
new file mode 100644
index 000000000000..eb1a6a06f8f7
--- /dev/null
+++ b/packages/apps/src/overlays/Attest.tsx
@@ -0,0 +1,48 @@
+// Copyright 2017-2020 @polkadot/apps authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import { useApi, useAccounts, useCall } from '@polkadot/react-hooks';
+import { Option } from '@polkadot/types';
+import { EthereumAddress } from '@polkadot/types/interfaces';
+import { Link } from 'react-router-dom';
+
+import { useTranslation } from '../translate';
+import BaseOverlay from './Base';
+
+interface Props {
+  className?: string;
+}
+
+function Attest ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { allAccounts } = useAccounts();
+  const { api } = useApi();
+
+  // Find accounts that need attest. They are accounts that
+  // - already preclaimed,
+  // - didn't sign the attest yet.
+  // `claims.preclaims` returns Some() for these accounts.
+  const needAttest = useCall<[Option<EthereumAddress>]>(api.query.claims?.preclaims.multi, [allAccounts])?.filter((opt) => opt.isSome);
+
+  if (!needAttest?.length) {
+    return null;
+  }
+
+  return (
+    <BaseOverlay className={className}
+      icon='warning sign'
+      type='error'>
+      <div>
+        {t(
+          '{{number}} of your accounts need to sign the attest before receiving DOTs. Please sign the attest ',
+          { replace: { number: needAttest.length } }
+        )}
+        <Link to='/claims'>{t('here.')}</Link>
+      </div>
+    </BaseOverlay>
+  );
+}
+
+export default React.memo(Attest);

From 7d44d18070ea9a307ba18e558e0eef976c3b061f Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 14:04:59 +0200
Subject: [PATCH 04/74] better english

---
 packages/apps/src/overlays/Attest.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx
index eb1a6a06f8f7..51130aa7203f 100644
--- a/packages/apps/src/overlays/Attest.tsx
+++ b/packages/apps/src/overlays/Attest.tsx
@@ -36,8 +36,8 @@ function Attest ({ className }: Props): React.ReactElement<Props> | null {
       type='error'>
       <div>
         {t(
-          '{{number}} of your accounts need to sign the attest before receiving DOTs. Please sign the attest ',
-          { replace: { number: needAttest.length } }
+          '{{number}} account {{need}} to sign the attest before receiving DOTs. Please sign the attest ',
+          { replace: { need: needAttest.length === 1 ? 'needs' : 'need', number: needAttest.length } }
         )}
         <Link to='/claims'>{t('here.')}</Link>
       </div>

From 5ac355846ad005745ec60753bfb3483d396e597d Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Wed, 13 May 2020 15:02:31 +0200
Subject: [PATCH 05/74] back to 3 steps

---
 packages/page-claims/src/Claim.tsx |  3 +-
 packages/page-claims/src/index.tsx | 54 +++++++++++-------------------
 2 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index af8e41561727..34a56435b226 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -15,13 +15,12 @@ import { useTranslation } from './translate';
 import { addrToChecksum } from './util';
 
 interface Props {
-  attestSignature?: string | null;
   button: React.ReactNode;
   className?: string;
   ethereumAddress: EthereumAddress | null;
 }
 
-function Claim ({ attestSignature, button, className, ethereumAddress }: Props): React.ReactElement<Props> | null {
+function Claim ({ button, className, ethereumAddress }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 29e0775852d4..98cc2ee23130 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -25,9 +25,8 @@ import translate from './translate';
 
 enum Step {
   Account = 0,
-  SignETH = 1,
-  SignAttest = 2,
-  Claim = 3,
+  Sign = 1,
+  Claim = 2,
 }
 
 interface Props extends AppProps, ApiProps, I18nProps, TxModalProps {}
@@ -36,7 +35,7 @@ interface State extends TxModalState {
   attestSignature?: string | null;
   didCopy: boolean;
   ethereumAddress: EthereumAddress | null;
-  ethereumSignature?: EcdsaSignature | null;
+  signature?: EcdsaSignature | null;
   claim?: Balance | null;
   step: Step;
 }
@@ -86,7 +85,7 @@ class ClaimsApp extends TxModal<Props, State> {
       claim: null,
       didCopy: false,
       ethereumAddress: null,
-      ethereumSignature: null,
+      signature: null,
       step: 0
     };
     this.state = this.defaultState;
@@ -102,14 +101,14 @@ class ClaimsApp extends TxModal<Props, State> {
 
   public render (): React.ReactNode {
     const { api, systemChain = '', t } = this.props;
-    const { accountId, attestSignature, didCopy, ethereumAddress, ethereumSignature, step } = this.state;
+    const { accountId, attestSignature, didCopy, ethereumAddress, signature, step } = this.state;
 
     const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
     const payload = accountId
       ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}`
       : '';
 
-    console.log('ethereumSignature', ethereumSignature);
+    console.log('signature', signature);
 
     return (
       <main>
@@ -137,12 +136,12 @@ class ClaimsApp extends TxModal<Props, State> {
                   <Button
                     icon='sign-in'
                     label={t('Continue')}
-                    onClick={this.setStep(Step.SignETH)}
+                    onClick={this.setStep(Step.Sign)}
                   />
                 </Button.Group>
               )}
             </Card>
-            {(step >= Step.SignETH && !!accountId) && (
+            {(step >= Step.Sign && !!accountId) && (
               <Card>
                 <h3>{t('2. Sign ETH transaction')}</h3>
                 <CopyToClipboard
@@ -166,32 +165,22 @@ class ClaimsApp extends TxModal<Props, State> {
                   :
                 </div>
                 <Signature
-                  onChange={this.onChangeEthereumSignature}
+                  onChange={this.onChangeSignature}
                   placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
                   rows={10}
                 />
-                {(step === Step.SignETH) && (
+                {(step === Step.Sign) && (
                   <Button.Group>
                     <Button
                       icon='sign-in'
-                      isDisabled={!accountId || !ethereumSignature}
+                      isDisabled={!accountId || !signature}
                       label={t('Confirm Ethereum Signature')}
-                      onClick={this.setStep(Step.SignAttest)}
+                      onClick={this.setStep(Step.Claim)}
                     />
                   </Button.Group>
                 )}
               </Card>
             )}
-            {(step >= Step.SignAttest && !!accountId && !!ethereumSignature) && (
-              <AttestDisplay
-                accountId={accountId}
-                data={'0x00'}
-                onNextStep={(signature: string): void => {
-                  this.setState({ attestSignature: signature });
-                  this.setStep(Step.Claim);
-                }}
-              />
-            )}
           </Column>
           <Column showEmptyText={false}>
             {(step >= Step.Claim && !!attestSignature) && (
@@ -208,9 +197,9 @@ class ClaimsApp extends TxModal<Props, State> {
   }
 
   protected isDisabled = (): boolean => {
-    const { accountId, ethereumSignature } = this.state;
+    const { accountId, signature } = this.state;
 
-    return !accountId || !ethereumSignature;
+    return !accountId || !signature;
   }
 
   protected isUnsigned = (): boolean => true;
@@ -220,11 +209,11 @@ class ClaimsApp extends TxModal<Props, State> {
   protected txMethod = (): string => 'claims.claim';
 
   protected txParams = (): [string | null, EcdsaSignature | null] => {
-    const { accountId, ethereumSignature } = this.state;
+    const { accountId, signature } = this.state;
 
     return [
       accountId ? accountId.toString() : null,
-      ethereumSignature || null
+      signature || null
     ];
   }
 
@@ -241,19 +230,16 @@ class ClaimsApp extends TxModal<Props, State> {
     });
   }
 
-  protected onChangeEthereumSignature = (event: React.SyntheticEvent<Element>): void => {
+  protected onChangeSignature = (event: React.SyntheticEvent<Element>): void => {
     const { value: signatureJson } = event.target as HTMLInputElement;
 
-    const { ethereumAddress, signature } = recoverFromJSON(signatureJson);
-
     this.setState(({ step }: State): Pick<State, never> => ({
       ...(
-        step > Step.SignETH
-          ? { step: Step.SignETH }
+        step > Step.Sign
+          ? { step: Step.Sign }
           : {}
       ),
-      ethereumAddress,
-      ethereumSignature: signature
+      ...recoverFromJSON(signatureJson)
     }));
   }
 

From 295a8a5f5701b799c49652758e9d026b574b7685 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Wed, 13 May 2020 15:06:23 +0200
Subject: [PATCH 06/74] clean up

---
 packages/page-claims/src/index.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 98cc2ee23130..c312ba119d00 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -32,11 +32,11 @@ enum Step {
 interface Props extends AppProps, ApiProps, I18nProps, TxModalProps {}
 
 interface State extends TxModalState {
-  attestSignature?: string | null;
+  attest?: string | null;
+  claim?: Balance | null;
   didCopy: boolean;
   ethereumAddress: EthereumAddress | null;
   signature?: EcdsaSignature | null;
-  claim?: Balance | null;
   step: Step;
 }
 
@@ -101,15 +101,13 @@ class ClaimsApp extends TxModal<Props, State> {
 
   public render (): React.ReactNode {
     const { api, systemChain = '', t } = this.props;
-    const { accountId, attestSignature, didCopy, ethereumAddress, signature, step } = this.state;
+    const { accountId, attest, didCopy, ethereumAddress, signature, step } = this.state;
 
     const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
     const payload = accountId
       ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}`
       : '';
 
-    console.log('signature', signature);
-
     return (
       <main>
         <header />
@@ -174,7 +172,7 @@ class ClaimsApp extends TxModal<Props, State> {
                     <Button
                       icon='sign-in'
                       isDisabled={!accountId || !signature}
-                      label={t('Confirm Ethereum Signature')}
+                      label={t('Confirm claim')}
                       onClick={this.setStep(Step.Claim)}
                     />
                   </Button.Group>
@@ -183,9 +181,8 @@ class ClaimsApp extends TxModal<Props, State> {
             )}
           </Column>
           <Column showEmptyText={false}>
-            {(step >= Step.Claim && !!attestSignature) && (
+            {(step >= Step.Claim) && (
               <ClaimDisplay
-                attestSignature={attestSignature}
                 button={this.renderTxButton()}
                 ethereumAddress={ethereumAddress}
               />

From 4abc5df6f6ed63e158b40360144afec12d7b063d Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Wed, 13 May 2020 15:52:04 +0200
Subject: [PATCH 07/74] in the middle of the refactoring

---
 packages/page-claims/src/index.tsx | 60 ++++++++++++++++++------------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index c312ba119d00..c338405fd4c7 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -6,7 +6,7 @@ import { Balance, EcdsaSignature, EthereumAddress } from '@polkadot/types/interf
 import { AppProps, I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -20,8 +20,10 @@ import { decodeAddress } from '@polkadot/util-crypto';
 import ClaimDisplay from './Claim';
 import AttestDisplay from './Attest';
 import { recoverFromJSON } from './util';
+import { useTranslation } from './translate';
 
 import translate from './translate';
+import { useApi } from '@polkadot/react-hooks';
 
 enum Step {
   Account = 0,
@@ -36,6 +38,7 @@ interface State extends TxModalState {
   claim?: Balance | null;
   didCopy: boolean;
   ethereumAddress: EthereumAddress | null;
+  isPreclaimed: boolean;
   signature?: EcdsaSignature | null;
   step: Step;
 }
@@ -75,33 +78,39 @@ const Signature = styled.textarea`
   }
 `;
 
-// FIXME Not React.FC yet
-class ClaimsApp extends TxModal<Props, State> {
-  constructor (props: Props) {
-    super(props);
-
-    this.defaultState = {
-      ...this.defaultState,
-      claim: null,
-      didCopy: false,
-      ethereumAddress: null,
-      signature: null,
+
+const ClaimsApp = (props: Props) => {
+  // constructor (props: Props) {
+  //   super(props);
+
+  //   this.defaultState = {
+  //     ...this.defaultState,
+  
+      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);
+      const [step, setStep] = useState<Step>(Step.Account);
+      const [accountId, setAccountId] = useState<string | null>(null);
+      const { api, systemChain } = useApi();
+      const { t } = useTranslation();
       step: 0
-    };
-    this.state = this.defaultState;
-  }
+  //   };
+  //   this.state = this.defaultState;
+  // }
 
-  public componentDidUpdate (): void {
-    if (this.state.didCopy) {
+  useEffect(() => {
+    if (didCopy) {
       setTimeout((): void => {
-        this.setState({ didCopy: false });
+        setDidCopy(false);
       }, 1000);
     }
-  }
+  },[didCopy])
 
-  public render (): React.ReactNode {
-    const { api, systemChain = '', t } = this.props;
-    const { accountId, attest, didCopy, ethereumAddress, signature, step } = this.state;
+
+  // public render (): React.ReactNode {
+  //   const { api, systemChain = '', t } = props;
+  //   const { accountId, attest, didCopy, ethereumAddress, signature, step } = this.state;
 
     const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
     const payload = accountId
@@ -123,7 +132,7 @@ class ClaimsApp extends TxModal<Props, State> {
                 }
               })}</h3>
               <InputAddress
-                defaultValue={this.state.accountId}
+                defaultValue={accountId}
                 help={t('The account you want to claim to.')}
                 label={t('claim to account')}
                 onChange={this.onChangeAccount}
@@ -191,7 +200,7 @@ class ClaimsApp extends TxModal<Props, State> {
         </Columar>
       </main>
     );
-  }
+  // }
 
   protected isDisabled = (): boolean => {
     const { accountId, signature } = this.state;
@@ -215,6 +224,9 @@ class ClaimsApp extends TxModal<Props, State> {
   }
 
   protected onChangeAccount = (accountId: string | null): void => {
+    const { api } = this.props;
+    const isPreclaimed = await (api.query.claims?.preclaims(accountId)).isSome;
+
     this.setState(({ step }: State): Pick<State, never> => {
       return {
         ...(

From eb9a3f266d00e7af77c361566aadf0f97390ff97 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 16:15:02 +0200
Subject: [PATCH 08/74] Make TS pass

---
 packages/page-claims/src/index.tsx | 299 ++++++++++++++---------------
 1 file changed, 140 insertions(+), 159 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index c338405fd4c7..3ade115229bf 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -2,11 +2,12 @@
 // This software may be modified and distributed under the terms
 // 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 { AppProps, I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -18,11 +19,9 @@ import { u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
 import ClaimDisplay from './Claim';
-import AttestDisplay from './Attest';
 import { recoverFromJSON } from './util';
-import { useTranslation } from './translate';
+import translate, { useTranslation } from './translate';
 
-import translate from './translate';
 import { useApi } from '@polkadot/react-hooks';
 
 enum Step {
@@ -31,17 +30,7 @@ enum Step {
   Claim = 2,
 }
 
-interface Props extends AppProps, ApiProps, I18nProps, TxModalProps {}
-
-interface State extends TxModalState {
-  attest?: string | null;
-  claim?: Balance | null;
-  didCopy: boolean;
-  ethereumAddress: EthereumAddress | null;
-  isPreclaimed: boolean;
-  signature?: EcdsaSignature | null;
-  step: Step;
-}
+interface Props extends AppProps, ApiProps, I18nProps, TxModalProps { }
 
 // FIXME no embedded components (hossible to tweak)
 const Payload = styled.pre`
@@ -78,23 +67,22 @@ const Signature = styled.textarea`
   }
 `;
 
-
 const ClaimsApp = (props: Props) => {
   // constructor (props: Props) {
   //   super(props);
 
   //   this.defaultState = {
   //     ...this.defaultState,
-  
-      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);
-      const [step, setStep] = useState<Step>(Step.Account);
-      const [accountId, setAccountId] = useState<string | null>(null);
-      const { api, systemChain } = useApi();
-      const { t } = useTranslation();
-      step: 0
+
+  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);
+  const [step, setStep] = useState<Step>(Step.Account);
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const { api, systemChain } = useApi();
+  const { t } = useTranslation();
+
   //   };
   //   this.state = this.defaultState;
   // }
@@ -105,162 +93,155 @@ const ClaimsApp = (props: Props) => {
         setDidCopy(false);
       }, 1000);
     }
-  },[didCopy])
+  }, [didCopy]);
+
+  const goToStepSign = useCallback(() => {
+    setStep(Step.Sign);
+  }, []);
+
+  const goToStepClaim = useCallback(() => {
+    setStep(Step.Claim);
+  }, []);
+
+  const onChangeAccount = useCallback(async (newAccountId) => {
+    const isPreclaimed = (await api.query.claims?.preclaims<Option<EthereumAddress>>(newAccountId)).isSome;
+
+    setAccountId(newAccountId);
+    // FIXME Amaury It should not be Step.Sign
+    goToStepSign();
+  }, [api, goToStepSign]);
+
+  const onChangeSignature = useCallback((event: React.SyntheticEvent<Element>) => {
+    const { value: signatureJson } = event.target as HTMLInputElement;
+
+    const { ethereumAddress, signature } = recoverFromJSON(signatureJson);
+
+    setEthereumAddress(ethereumAddress);
+    setSignature(signature);
+    step > Step.Sign && goToStepSign();
+  }, [goToStepSign, step]);
 
+  const onCopy = useCallback(() => {
+    setDidCopy(true);
+  }, []);
 
   // public render (): React.ReactNode {
   //   const { api, systemChain = '', t } = props;
   //   const { accountId, attest, didCopy, ethereumAddress, signature, step } = this.state;
 
-    const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
-    const payload = accountId
-      ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}`
-      : '';
-
-    return (
-      <main>
-        <header />
-        <h1>
-          <Trans>claim your <em>{TokenUnit.abbr}</em> tokens</Trans>
-        </h1>
-        <Columar>
-          <Column>
-            <Card withBottomMargin>
-              <h3>{t('1. Select your {{chain}} account', {
-                replace: {
-                  chain: systemChain
-                }
-              })}</h3>
-              <InputAddress
-                defaultValue={accountId}
-                help={t('The account you want to claim to.')}
-                label={t('claim to account')}
-                onChange={this.onChangeAccount}
-                type='all'
+  const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
+  const payload = accountId
+    ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}`
+    : '';
+
+  return (
+    <main>
+      <header />
+      <h1>
+        <Trans>claim your <em>{TokenUnit.abbr}</em> tokens</Trans>
+      </h1>
+      <Columar>
+        <Column>
+          <Card withBottomMargin>
+            <h3>{t('1. Select your {{chain}} account', {
+              replace: {
+                chain: systemChain
+              }
+            })}</h3>
+            <InputAddress
+              defaultValue={accountId}
+              help={t('The account you want to claim to.')}
+              label={t('claim to account')}
+              onChange={onChangeAccount}
+              type='all'
+            />
+            {(step === Step.Account) && (
+              <Button.Group>
+                <Button
+                  icon='sign-in'
+                  label={t('Continue')}
+                  onClick={goToStepSign}
+                />
+              </Button.Group>
+            )}
+          </Card>
+          {(step >= Step.Sign && !!accountId) && (
+            <Card>
+              <h3>{t('2. Sign ETH transaction')}</h3>
+              <CopyToClipboard
+                onCopy={onCopy}
+                text={payload}
+              >
+                <Payload
+                  data-for='tx-payload'
+                  data-tip
+                >
+                  {payload}
+                </Payload>
+              </CopyToClipboard>
+              <Tooltip
+                place='right'
+                text={didCopy ? t('copied') : t('click to copy')}
+                trigger='tx-payload'
+              />
+              <div>
+                {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')}
+                  :
+              </div>
+              <Signature
+                onChange={onChangeSignature}
+                placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
+                rows={10}
               />
-              {(step === Step.Account) && (
+              {(step === Step.Sign) && (
                 <Button.Group>
                   <Button
                     icon='sign-in'
-                    label={t('Continue')}
-                    onClick={this.setStep(Step.Sign)}
+                    isDisabled={!accountId || !signature}
+                    label={t('Confirm claim')}
+                    onClick={goToStepClaim}
                   />
                 </Button.Group>
               )}
             </Card>
-            {(step >= Step.Sign && !!accountId) && (
-              <Card>
-                <h3>{t('2. Sign ETH transaction')}</h3>
-                <CopyToClipboard
-                  onCopy={this.onCopy}
-                  text={payload}
-                >
-                  <Payload
-                    data-for='tx-payload'
-                    data-tip
-                  >
-                    {payload}
-                  </Payload>
-                </CopyToClipboard>
-                <Tooltip
-                  place='right'
-                  text={didCopy ? t('copied') : t('click to copy')}
-                  trigger='tx-payload'
-                />
-                <div>
-                  {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')}
-                  :
-                </div>
-                <Signature
-                  onChange={this.onChangeSignature}
-                  placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
-                  rows={10}
-                />
-                {(step === Step.Sign) && (
-                  <Button.Group>
-                    <Button
-                      icon='sign-in'
-                      isDisabled={!accountId || !signature}
-                      label={t('Confirm claim')}
-                      onClick={this.setStep(Step.Claim)}
-                    />
-                  </Button.Group>
-                )}
-              </Card>
-            )}
-          </Column>
-          <Column showEmptyText={false}>
-            {(step >= Step.Claim) && (
-              <ClaimDisplay
-                button={this.renderTxButton()}
-                ethereumAddress={ethereumAddress}
-              />
-            )}
-          </Column>
-        </Columar>
-      </main>
-    );
+          )}
+        </Column>
+        <Column showEmptyText={false}>
+          {(step >= Step.Claim) && (
+            <ClaimDisplay
+              // button={this.renderTxButton()}
+              ethereumAddress={ethereumAddress}
+            />
+          )}
+        </Column>
+      </Columar>
+    </main>
+  );
   // }
 
-  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 isDisabled = (): boolean => {
+  //   const { accountId, signature } = this.state;
 
-  protected txParams = (): [string | null, EcdsaSignature | null] => {
-    const { accountId, signature } = this.state;
+  //   return !accountId || !signature;
+  // }
 
-    return [
-      accountId ? accountId.toString() : null,
-      signature || null
-    ];
-  }
+  // protected isUnsigned = (): boolean => true;
 
-  protected onChangeAccount = (accountId: string | null): void => {
-    const { api } = this.props;
-    const isPreclaimed = await (api.query.claims?.preclaims(accountId)).isSome;
-
-    this.setState(({ step }: State): Pick<State, never> => {
-      return {
-        ...(
-          step > Step.Account
-            ? this.defaultState
-            : {}
-        ),
-        accountId
-      };
-    });
-  }
+  // protected submitLabel = (): React.ReactNode => this.props.t('Redeem');
 
-  protected onChangeSignature = (event: React.SyntheticEvent<Element>): void => {
-    const { value: signatureJson } = event.target as HTMLInputElement;
+  // protected txMethod = (): string => 'claims.claim';
 
-    this.setState(({ step }: State): Pick<State, never> => ({
-      ...(
-        step > Step.Sign
-          ? { step: Step.Sign }
-          : {}
-      ),
-      ...recoverFromJSON(signatureJson)
-    }));
-  }
+  // protected txParams = (): [string | null, EcdsaSignature | null] => {
+  //   const { accountId, signature } = this.state;
 
-  private onCopy = (): void => {
-    this.setState({ didCopy: true });
-  }
+  //   return [
+  //     accountId ? accountId.toString() : null,
+  //     signature || null
+  //   ];
+  // }
 
-  private setStep = (step: Step): () => void =>
-    (): void => {
-      this.setState({ step });
-    }
-}
+  // }
+};
 
 export default withMulti(
   ClaimsApp,

From 00c514dada5f70d33121ea6c1403f4f71962c7eb Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 16:23:17 +0200
Subject: [PATCH 09/74] Clea up some comments

---
 packages/page-claims/src/index.tsx | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 3ade115229bf..06335e7b5d0b 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -67,13 +67,7 @@ const Signature = styled.textarea`
   }
 `;
 
-const ClaimsApp = (props: Props) => {
-  // constructor (props: Props) {
-  //   super(props);
-
-  //   this.defaultState = {
-  //     ...this.defaultState,
-
+const ClaimsApp = (props: Props): React.ReactElement => {
   const [claim, setClaim] = useState<Balance | null>(null);
   const [didCopy, setDidCopy] = useState(false);
   const [ethereumAddress, setEthereumAddress] = useState<EthereumAddress | null>(null);
@@ -83,10 +77,6 @@ const ClaimsApp = (props: Props) => {
   const { api, systemChain } = useApi();
   const { t } = useTranslation();
 
-  //   };
-  //   this.state = this.defaultState;
-  // }
-
   useEffect(() => {
     if (didCopy) {
       setTimeout((): void => {
@@ -125,10 +115,6 @@ const ClaimsApp = (props: Props) => {
     setDidCopy(true);
   }, []);
 
-  // public render (): React.ReactNode {
-  //   const { api, systemChain = '', t } = props;
-  //   const { accountId, attest, didCopy, ethereumAddress, signature, step } = this.state;
-
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
   const payload = accountId
     ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}`
@@ -217,6 +203,9 @@ const ClaimsApp = (props: Props) => {
       </Columar>
     </main>
   );
+
+  // FIXME Amaury Below are from the old component
+  // How to use TxModalNew?
   // }
 
   // protected isDisabled = (): boolean => {

From 6f983db327061b80f6cbd712af0d5317dc1efc16 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Wed, 13 May 2020 16:51:09 +0200
Subject: [PATCH 10/74] isPreclaimed

---
 packages/page-claims/src/index.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 06335e7b5d0b..59ba433ff6ef 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -74,8 +74,9 @@ const ClaimsApp = (props: Props): React.ReactElement => {
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);
   const [step, setStep] = useState<Step>(Step.Account);
   const [accountId, setAccountId] = useState<string | null>(null);
-  const { api, systemChain } = useApi();
+  const { api, isApiReady, systemChain } = useApi();
   const { t } = useTranslation();
+  const [isPreclaimed, setIsPreclaimed] = useState(false);
 
   useEffect(() => {
     if (didCopy) {
@@ -85,6 +86,16 @@ const ClaimsApp = (props: Props): React.ReactElement => {
     }
   }, [didCopy]);
 
+  useEffect(() => {
+    if (isApiReady && accountId) {
+      api.query.claims
+        .preclaims<Option<EthereumAddress>>(accountId)
+        .then((opt): void => {
+          setIsPreclaimed(opt.isSome);
+        });
+    }
+  }, [accountId, api.query.claims, isApiReady]);
+
   const goToStepSign = useCallback(() => {
     setStep(Step.Sign);
   }, []);
@@ -93,13 +104,11 @@ const ClaimsApp = (props: Props): React.ReactElement => {
     setStep(Step.Claim);
   }, []);
 
-  const onChangeAccount = useCallback(async (newAccountId) => {
-    const isPreclaimed = (await api.query.claims?.preclaims<Option<EthereumAddress>>(newAccountId)).isSome;
-
+  const onChangeAccount = useCallback((newAccountId) => {
     setAccountId(newAccountId);
     // FIXME Amaury It should not be Step.Sign
     goToStepSign();
-  }, [api, goToStepSign]);
+  }, [goToStepSign]);
 
   const onChangeSignature = useCallback((event: React.SyntheticEvent<Element>) => {
     const { value: signatureJson } = event.target as HTMLInputElement;
@@ -151,7 +160,7 @@ const ClaimsApp = (props: Props): React.ReactElement => {
               </Button.Group>
             )}
           </Card>
-          {(step >= Step.Sign && !!accountId) && (
+          {(step >= Step.Sign && !!accountId && !isPreclaimed) && (
             <Card>
               <h3>{t('2. Sign ETH transaction')}</h3>
               <CopyToClipboard

From ef7a17315732bc6f3519ec1dfb7510f1b1077e52 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Wed, 13 May 2020 17:24:24 +0200
Subject: [PATCH 11/74] isOldClaimProcess

---
 packages/page-claims/src/index.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 59ba433ff6ef..254cd145d320 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -68,6 +68,7 @@ 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);
@@ -78,6 +79,14 @@ const ClaimsApp = (props: Props): React.ReactElement => {
   const { t } = useTranslation();
   const [isPreclaimed, setIsPreclaimed] = useState(false);
 
+  useEffect(() => {
+    if (isApiReady && typeof api.query.claims.claimAttest !== undefined) {
+      setIsOldClaimProcess(false);
+    }
+
+    console.log('isOldclaimProcess', isOldClaimProcess);
+  }, [api, isApiReady, isOldClaimProcess]);
+
   useEffect(() => {
     if (didCopy) {
       setTimeout((): void => {
@@ -125,6 +134,7 @@ const ClaimsApp = (props: Props): React.ReactElement => {
   }, []);
 
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
+  const statement = isPreclaimed;
   const payload = accountId
     ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}`
     : '';

From 8420502b7422aacd3a9f38f828ad0df885cf7f51 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 17:25:52 +0200
Subject: [PATCH 12/74] Attest vs Claim (#2737)

* Choose between Claim and Attest

* fix lint
---
 packages/page-claims/src/Attest.tsx | 100 ++++++++--------------------
 packages/page-claims/src/Claim.tsx  |  30 +++++++--
 packages/page-claims/src/index.tsx  |  17 +++--
 3 files changed, 65 insertions(+), 82 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 48e09300beba..a728dbc6f8ce 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -2,101 +2,50 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Signer } from '@polkadot/api/types';
-import { web3FromSource } from '@polkadot/extension-dapp';
-import { KeyringPair } from '@polkadot/keyring/types';
-import { Button, Card } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-import { stringToHex, stringToU8a, u8aToHex } from '@polkadot/util';
-
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
+import { Button, Card, TxButton } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
+import { addrToChecksum } from './util';
 
 interface Props {
   accountId: string;
   className?: string;
-  data: string;
-  onNextStep: (signature: string) => void;
 }
 
-function Attest ({ accountId, className, data, onNextStep }: Props): React.ReactElement<Props> | null {
+function Attest ({ accountId, className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  // const [attestSignature, setAttestSignature] = useState<string | null>(null);
-  const [currentPair, setCurrentPair] = useState<KeyringPair | null>(null);
-  const [signer, setSigner] = useState<Signer | null >(null);
-
-  useEffect((): void => {
-    const isInjected = currentPair?.meta.isInjected || false;
-
-    // for injected, retrieve the signer
-    if (currentPair && isInjected) {
-      const { meta: { source } } = currentPair;
-
-      web3FromSource(source)
-        .catch((): null => null)
-        .then((injected): void => setSigner(
-          injected?.signer || null
-        ));
-    }
-  }, [currentPair]);
-
-  useEffect(() => {
-    setCurrentPair(keyring.getPair(accountId || ''));
-  }, [accountId]);
-
-  const _signAttest = useCallback(
-    (): void => {
-      if (!currentPair) {
-        return;
-      }
-
-      if (signer?.signRaw) {
-        signer
-          .signRaw({
-            address: currentPair.address,
-            data: stringToHex(data),
-            type: 'bytes'
-          })
-          .then(({ signature }): void => onNextStep(signature));
-      } else {
-        onNextStep(u8aToHex(
-          currentPair.sign(stringToU8a(data))
-        ));
-      }
-    },
-    [currentPair, data, onNextStep, signer]
-  );
 
   return (
-    <Card className={className}>
-      <h3>{t('3. Sign attestation')}</h3>
-      <div>
-        {t('Clicking the following button will let you sign the hash of the attestation available at the following address: XXX')}
-                  :
+    <Card>
+      <div className={className}>
+        {t('By signing this transaction, you agree with attestation available at the following address: XXX')}
+        <h3>{addrToChecksum(accountId)}</h3>
+        <Button.Group>
+          <TxButton
+            accountId={accountId}
+            icon='send'
+            isPrimary
+            label={t('Attest')}
+            params={['Default']} // Replace with actual
+            tx='claims.attest'
+          />
+        </Button.Group>
       </div>
-      <Button.Group>
-        <Button
-          icon='sign-in'
-          isDisabled={!accountId}
-          label={t('Sign attestation')}
-          onClick={_signAttest}
-        />
-      </Button.Group>
-
     </Card>
   );
 }
 
+// FIXME Same styles as ./Claim.tsx
 export default React.memo(styled(Attest)`
-  /* font-size: 1.15rem;
+  font-size: 1.15rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-height: 12rem;
   align-items: center;
-  margin: 0 1rem; */
+  margin: 0 1rem;
 
   h3 {
     font-family: monospace;
@@ -107,4 +56,11 @@ export default React.memo(styled(Attest)`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  h2 {
+    margin: 0.5rem 0 2rem;
+    font-family: monospace;
+    font-size: 2.5rem;
+    font-weight: 200;
+  }
 `);
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 34a56435b226..124277d540ef 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -7,7 +7,7 @@ import { BalanceOf, EthereumAddress } from '@polkadot/types/interfaces';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Card } from '@polkadot/react-components';
+import { Button, Card, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
@@ -15,12 +15,26 @@ import { useTranslation } from './translate';
 import { addrToChecksum } from './util';
 
 interface Props {
-  button: React.ReactNode;
+  accountId: string;
   className?: string;
   ethereumAddress: EthereumAddress | null;
+  ethereumSignature: string | null;
+  // Do we sign with `claims.claimAttest` instead of `claims.claim`?
+  isClaimAttest: boolean;
 }
 
-function Claim ({ button, className, ethereumAddress }: Props): React.ReactElement<Props> | null {
+// Depending on isClaimAttest, construct the correct tx.
+function constructTx (accountId: string, ethereumSignature: string | null, isClaimAttest: boolean): {
+  params: any[];
+  tx: string;
+} {
+  return isClaimAttest
+    // FIXME How to get the StatementKind?
+    ? { params: [accountId, ethereumSignature, 'Default'], tx: 'claims.claimAttest' }
+    : { params: [accountId, ethereumSignature], tx: 'claims.claimAttest' };
+}
+
+function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isClaimAttest }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
@@ -67,7 +81,15 @@ function Claim ({ button, className, ethereumAddress }: Props): React.ReactEleme
             <>
               {t('has a valid claim for')}
               <h2><FormatBalance value={claimValue} /></h2>
-              <Button.Group>{button}</Button.Group>
+              <Button.Group>
+                <TxButton
+                  accountId={accountId}
+                  icon='send'
+                  isPrimary
+                  label={t('Claim')}
+                  {...constructTx(accountId, ethereumSignature, isClaimAttest)}
+                />
+              </Button.Group>
             </>
           )
           : (
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 254cd145d320..aecfcd92a8f6 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -14,10 +14,10 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import { Button, Card, Columar, Column, InputAddress, Tooltip } from '@polkadot/react-components';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
-import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
 import { u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
+import AttestDisplay from './Attest';
 import ClaimDisplay from './Claim';
 import { recoverFromJSON } from './util';
 import translate, { useTranslation } from './translate';
@@ -30,7 +30,7 @@ enum Step {
   Claim = 2,
 }
 
-interface Props extends AppProps, ApiProps, I18nProps, TxModalProps { }
+interface Props extends AppProps, ApiProps, I18nProps { }
 
 // FIXME no embedded components (hossible to tweak)
 const Payload = styled.pre`
@@ -213,10 +213,15 @@ const ClaimsApp = (props: Props): React.ReactElement => {
         </Column>
         <Column showEmptyText={false}>
           {(step >= Step.Claim) && (
-            <ClaimDisplay
-              // button={this.renderTxButton()}
-              ethereumAddress={ethereumAddress}
-            />
+            isPreclaimed
+              ? <AttestDisplay accountId={accountId} />
+              : <ClaimDisplay
+                accountId={accountId}
+                ethereumAddress={ethereumAddress}
+                ethereumSignature={signature}
+                // Use claims.claimAttest is chain supports it
+                isClaimAttest={!!api.query.claims.claimAttest}
+              />
           )}
         </Column>
       </Columar>

From f011f10bc4eee6cefe64db76832df0fbaa5d8608 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 18:01:11 +0200
Subject: [PATCH 13/74] fix flow between claim and attest (#2738)

---
 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(

From 5643a670729b56fdfeee69befa61792a277fb0fe Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 18:28:44 +0200
Subject: [PATCH 14/74] Jaco's comments + Fetch StatementKind (#2741)

---
 packages/page-claims/src/Claim.tsx | 15 +++++++-----
 packages/page-claims/src/index.tsx | 38 ++++++++++--------------------
 2 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 8bb54f497a4f..04d7ceabc9ce 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -3,12 +3,12 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Option } from '@polkadot/types';
-import { BalanceOf, EthereumAddress } from '@polkadot/types/interfaces';
+import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Card, TxButton } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from './translate';
@@ -24,14 +24,14 @@ interface Props {
 }
 
 // Depending on isOldClaimProcess, construct the correct tx.
-function constructTx (accountId: string, ethereumSignature: string | null, isOldClaimProcess: boolean): {
+function constructTx (accountId: string, ethereumSignature: string | null, kind: StatementKind | undefined, isOldClaimProcess: boolean): {
   params: any[];
   tx: string;
 } {
   return isOldClaimProcess
     // FIXME How to get the StatementKind?
-    ? { params: [accountId, ethereumSignature], tx: 'claims.claimAttest' }
-    : { params: [accountId, ethereumSignature, 'Default'], tx: 'claims.claimAttest' };
+    ? { params: [accountId, ethereumSignature], tx: 'claims.claim' }
+    : { params: [accountId, ethereumSignature, kind], tx: 'claims.claimAttest' };
 }
 
 function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess }: Props): React.ReactElement<Props> | null {
@@ -40,6 +40,9 @@ function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOl
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
   const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
   const [isBusy, setIsBusy] = useState(false);
+  const statementKind = useCall<StatementKind | undefined>(ethereumAddress && !isOldClaimProcess && api.query.claims.signing, [ethereumAddress], {
+    transform: (option: Option<StatementKind>) => option.unwrapOr(undefined)
+  });
 
   const _fetchClaim = useCallback(
     (address: EthereumAddress): void => {
@@ -87,7 +90,7 @@ function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOl
                   icon='send'
                   isPrimary
                   label={t('Claim')}
-                  {...constructTx(accountId, ethereumSignature, isOldClaimProcess)}
+                  {...constructTx(accountId, ethereumSignature, statementKind, isOldClaimProcess)}
                 />
               </Button.Group>
             </>
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index ce11392628aa..b5938c075898 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -22,7 +22,7 @@ import ClaimDisplay from './Claim';
 import { recoverFromJSON } from './util';
 import translate, { useTranslation } from './translate';
 
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 enum Step {
   Account = 0,
@@ -68,23 +68,18 @@ const Signature = styled.textarea`
 `;
 
 const ClaimsApp = (props: Props): React.ReactElement => {
-  const [isOldClaimProcess, setIsOldClaimProcess] = useState(true);
   const [didCopy, setDidCopy] = useState(false);
   const [ethereumAddress, setEthereumAddress] = useState<EthereumAddress | null>(null);
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);
   const [step, setStep] = useState<Step>(Step.Account);
   const [accountId, setAccountId] = useState<string | null>(null);
-  const { api, isApiReady, systemChain } = useApi();
+  const { api, systemChain } = useApi();
   const { t } = useTranslation();
-  const [isPreclaimed, setIsPreclaimed] = useState(false);
+  const isPreclaimed = useCall<boolean>(api.query.claims.preclaims, [accountId], {
+    transform: (option: Option<EthereumAddress>) => option.isSome
+  });
 
-  useEffect(() => {
-    if (isApiReady && typeof api.query.claims.claimAttest !== 'undefined') {
-      setIsOldClaimProcess(false);
-    }
-
-    console.log('isOldclaimProcess', isOldClaimProcess);
-  }, [api, isApiReady, isOldClaimProcess]);
+  const isOldClaimProcess = !api.query.claims.claimAttest;
 
   useEffect(() => {
     if (didCopy) {
@@ -102,21 +97,15 @@ const ClaimsApp = (props: Props): React.ReactElement => {
     setStep(Step.Claim);
   }, []);
 
+  // Everytime we get a new preclaimed value (e.g. after we change account), we
+  // decide on which step to show.
   useEffect(() => {
-    if (isApiReady && accountId) {
-      api.query.claims
-        .preclaims<Option<EthereumAddress>>(accountId)
-        .then((opt): void => {
-          setIsPreclaimed(opt.isSome);
-
-          if (opt.isSome) {
-            goToStepClaim();
-          } else {
-            goToStepSign();
-          }
-        });
+    if (isPreclaimed) {
+      goToStepClaim();
+    } else {
+      goToStepSign();
     }
-  }, [accountId, api.query.claims, goToStepClaim, goToStepSign, isApiReady]);
+  });
 
   const onChangeAccount = useCallback((newAccountId) => {
     setAccountId(newAccountId);
@@ -137,7 +126,6 @@ const ClaimsApp = (props: Props): React.ReactElement => {
   }, []);
 
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
-  const statement = isPreclaimed;
   const payload = accountId
     ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}`
     : '';

From 9fa046d624971597ed87d52ceab921331f87845b Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 13 May 2020 19:03:25 +0200
Subject: [PATCH 15/74] Fix small bug in flow

---
 packages/page-claims/src/Attest.tsx | 2 +-
 packages/page-claims/src/Claim.tsx  | 1 -
 packages/page-claims/src/index.tsx  | 5 ++---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index f247f4b9dab4..2bae926b3309 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -28,7 +28,7 @@ function Attest ({ accountId, className }: Props): React.ReactElement<Props> | n
             icon='send'
             isPrimary
             label={t('Attest')}
-            params={['Default']} // Replace with actual
+            params={['dsafdsalkfj']} // Replace with actual
             tx='claims.attest'
           />
         </Button.Group>
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 04d7ceabc9ce..3ca7b27c86bd 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -29,7 +29,6 @@ function constructTx (accountId: string, ethereumSignature: string | null, kind:
   tx: string;
 } {
   return isOldClaimProcess
-    // FIXME How to get the StatementKind?
     ? { params: [accountId, ethereumSignature], tx: 'claims.claim' }
     : { params: [accountId, ethereumSignature, kind], tx: 'claims.claimAttest' };
 }
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index b5938c075898..21b9a314b8fb 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -105,7 +105,7 @@ const ClaimsApp = (props: Props): React.ReactElement => {
     } else {
       goToStepSign();
     }
-  });
+  }, [goToStepClaim, goToStepSign, isPreclaimed]);
 
   const onChangeAccount = useCallback((newAccountId) => {
     setAccountId(newAccountId);
@@ -118,8 +118,7 @@ const ClaimsApp = (props: Props): React.ReactElement => {
 
     setEthereumAddress(ethereumAddress);
     setSignature(signature);
-    step > Step.Sign && goToStepSign();
-  }, [goToStepSign, step]);
+  }, []);
 
   const onCopy = useCallback(() => {
     setDidCopy(true);

From 63ab76c594bfda65201f5353d183a8bbdd94c43c Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Wed, 13 May 2020 20:00:40 +0200
Subject: [PATCH 16/74] Add condition for the warning banner (#2742)

* prevent crash for older chains

* with useEffect

* should work

* back to something simple

* remove hoc
---
 packages/apps/src/overlays/Attest.tsx | 3 ++-
 packages/page-claims/src/index.tsx    | 9 ++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx
index 51130aa7203f..abacf1471f83 100644
--- a/packages/apps/src/overlays/Attest.tsx
+++ b/packages/apps/src/overlays/Attest.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { useApi, useAccounts, useCall } from '@polkadot/react-hooks';
 import { Option } from '@polkadot/types';
 import { EthereumAddress } from '@polkadot/types/interfaces';
+
 import { Link } from 'react-router-dom';
 
 import { useTranslation } from '../translate';
@@ -24,7 +25,7 @@ function Attest ({ className }: Props): React.ReactElement<Props> | null {
   // - already preclaimed,
   // - didn't sign the attest yet.
   // `claims.preclaims` returns Some() for these accounts.
-  const needAttest = useCall<[Option<EthereumAddress>]>(api.query.claims?.preclaims.multi, [allAccounts])?.filter((opt) => opt.isSome);
+  const needAttest = useCall<[Option<EthereumAddress>]>(api.query?.claims?.preclaims?.multi, [allAccounts])?.filter((opt) => opt.isSome);
 
   if (!needAttest?.length) {
     return null;
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 21b9a314b8fb..7b3334afe091 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -11,7 +11,6 @@ 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 { withApi, withMulti } from '@polkadot/react-api/hoc';
 import { Button, Card, Columar, Column, InputAddress, Tooltip } from '@polkadot/react-components';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import { u8aToHex, u8aToString } from '@polkadot/util';
@@ -20,7 +19,7 @@ import { decodeAddress } from '@polkadot/util-crypto';
 import AttestDisplay from './Attest';
 import ClaimDisplay from './Claim';
 import { recoverFromJSON } from './util';
-import translate, { useTranslation } from './translate';
+import { useTranslation } from './translate';
 
 import { useApi, useCall } from '@polkadot/react-hooks';
 
@@ -218,8 +217,4 @@ const ClaimsApp = (props: Props): React.ReactElement => {
   );
 };
 
-export default withMulti(
-  ClaimsApp,
-  translate,
-  withApi
-);
+export default ClaimsApp;

From 8d99149f8ac17b9163cd101aa946cdb940695b9a Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Wed, 13 May 2020 20:16:09 +0200
Subject: [PATCH 17/74] fix CI

---
 packages/page-claims/src/index.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 7b3334afe091..896cf31d2d69 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -4,8 +4,6 @@
 
 import { Option } from '@polkadot/types';
 import { EcdsaSignature, EthereumAddress } from '@polkadot/types/interfaces';
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
 
 import React, { useState, useCallback, useEffect } from 'react';
 import { Trans } from 'react-i18next';
@@ -29,8 +27,6 @@ enum Step {
   Claim = 2,
 }
 
-interface Props extends AppProps, ApiProps, I18nProps { }
-
 // FIXME no embedded components (hossible to tweak)
 const Payload = styled.pre`
   cursor: copy;
@@ -66,7 +62,7 @@ const Signature = styled.textarea`
   }
 `;
 
-const ClaimsApp = (props: Props): React.ReactElement => {
+const ClaimsApp = (): React.ReactElement => {
   const [didCopy, setDidCopy] = useState(false);
   const [ethereumAddress, setEthereumAddress] = useState<EthereumAddress | null>(null);
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);

From 94d496c9e1c28c700419092e9e02297e211f5843 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Thu, 14 May 2020 10:43:53 +0200
Subject: [PATCH 18/74] Add ETH address field for non preclaimed addresses
 (#2746)

* Eth field

* fix

* remove stray logs
---
 packages/page-claims/src/Claim.tsx |  8 ++-
 packages/page-claims/src/index.tsx | 80 ++++++++++++++++++++----------
 2 files changed, 56 insertions(+), 32 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<Props> | null {
+function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess, statementKind }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
   const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
   const [isBusy, setIsBusy] = useState(false);
-  const statementKind = useCall<StatementKind | undefined>(ethereumAddress && !isOldClaimProcess && api.query.claims.signing, [ethereumAddress], {
-    transform: (option: Option<StatementKind>) => 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<EthereumAddress>) => 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<StatementKind | undefined>(ethereumAddress && api.query.claims.signing, [ethereumAddress], {
+    transform: (option: Option<StatementKind>) => 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) && (
             <Card>
               <h3>{t('2. Sign ETH transaction')}</h3>
-              <CopyToClipboard
-                onCopy={onCopy}
-                text={payload}
-              >
-                <Payload
-                  data-for='tx-payload'
-                  data-tip
+              {
+                // We only need to know the Ethereum addrss for the new process
+                // to know the StatementKind for users to sign
+                !isOldClaimProcess && <Input
+                  autoFocus
+                  className='full'
+                  help={t('The the Ethereum address you used during the pre-sale (starting by "0x")')}
+                  label={t('Pre-sale ethereum address')}
+                  onChange={onChangeEthereumAddress}
+                  value={ethereumAddress || ''}
+                />}
+              {(!!ethereumAddress || isOldClaimProcess) && <>
+                <CopyToClipboard
+                  onCopy={onCopy}
+                  text={payload}
                 >
-                  {payload}
-                </Payload>
-              </CopyToClipboard>
-              <Tooltip
-                place='right'
-                text={didCopy ? t('copied') : t('click to copy')}
-                trigger='tx-payload'
-              />
-              <div>
-                {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
+                    data-for='tx-payload'
+                    data-tip
+                  >
+                    {payload}
+                  </Payload>
+                </CopyToClipboard>
+                <Tooltip
+                  place='right'
+                  text={didCopy ? t('copied') : t('click to copy')}
+                  trigger='tx-payload'
+                />
+                <div>
+                  {/* 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')}
                   :
-              </div>
-              <Signature
-                onChange={onChangeSignature}
-                placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
-                rows={10}
-              />
+                </div>
+                <Signature
+                  onChange={onChangeSignature}
+                  placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
+                  rows={10}
+                />
+              </>}
               {(step === Step.Sign) && (
                 <Button.Group>
                   <Button
@@ -205,6 +230,7 @@ const ClaimsApp = (): React.ReactElement => {
                 ethereumAddress={ethereumAddress}
                 ethereumSignature={signature}
                 isOldClaimProcess={isOldClaimProcess}
+                statementKind={statementKind}
               />
           )}
         </Column>

From 93a3466e4fe5dbb0fcd61ce866401032d32700f3 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Thu, 14 May 2020 10:49:54 +0200
Subject: [PATCH 19/74] Update packages/page-claims/src/index.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index d73e8db94cd6..54c45ef1c5e2 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -62,7 +62,7 @@ const Signature = styled.textarea`
   }
 `;
 
-const ClaimsApp = (): React.ReactElement => {
+function ClaimsApp (): React.ReactElement {
   const [didCopy, setDidCopy] = useState(false);
   const [ethereumAddress, setEthereumAddress] = useState<EthereumAddress | null>(null);
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);

From 52ae0ef1b22870e49baf0f6f4d95d9aaec422b9a Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Thu, 14 May 2020 10:50:07 +0200
Subject: [PATCH 20/74] Update packages/page-claims/src/index.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 54c45ef1c5e2..67c871f8a5c0 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -239,4 +239,4 @@ function ClaimsApp (): React.ReactElement {
   );
 };
 
-export default ClaimsApp;
+export default React.memo(ClaimsApp);

From 882b1412b79ae0d1fe50ec7a3a36179f0b4168c2 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Thu, 14 May 2020 10:50:28 +0200
Subject: [PATCH 21/74] Update packages/apps/src/overlays/Attest.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/apps/src/overlays/Attest.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx
index abacf1471f83..794e664683b2 100644
--- a/packages/apps/src/overlays/Attest.tsx
+++ b/packages/apps/src/overlays/Attest.tsx
@@ -25,7 +25,7 @@ function Attest ({ className }: Props): React.ReactElement<Props> | null {
   // - already preclaimed,
   // - didn't sign the attest yet.
   // `claims.preclaims` returns Some() for these accounts.
-  const needAttest = useCall<[Option<EthereumAddress>]>(api.query?.claims?.preclaims?.multi, [allAccounts])?.filter((opt) => opt.isSome);
+  const needAttest = useCall<[Option<EthereumAddress>]>(isApiReady && api.query.claims?.preclaims?.multi, [allAccounts])?.filter((opt) => opt.isSome);
 
   if (!needAttest?.length) {
     return null;

From 1a40a0246862afbe471ad8a790a9194125831f74 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Thu, 14 May 2020 11:26:13 +0200
Subject: [PATCH 22/74] Show the amount of token that will be claimed (#2747)

* show amount in attest

* fix isApiReady

* fix lint
---
 packages/apps/src/overlays/Attest.tsx |  2 +-
 packages/page-claims/src/Attest.tsx   | 47 ++++++++++++++++++++++++---
 packages/page-claims/src/index.tsx    | 18 +++++++---
 3 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx
index 794e664683b2..f42ec3652d7c 100644
--- a/packages/apps/src/overlays/Attest.tsx
+++ b/packages/apps/src/overlays/Attest.tsx
@@ -19,7 +19,7 @@ interface Props {
 function Attest ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { allAccounts } = useAccounts();
-  const { api } = useApi();
+  const { api, isApiReady } = useApi();
 
   // Find accounts that need attest. They are accounts that
   // - already preclaimed,
diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 2bae926b3309..5c95a402b70f 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -2,33 +2,70 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Card, TxButton } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
+import { Option } from '@polkadot/types';
+import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
 import { useTranslation } from './translate';
-import { addrToChecksum } from './util';
+import { useApi } from '@polkadot/react-hooks';
 
 interface Props {
   accountId: string;
   className?: string;
+  ethereumAddress: EthereumAddress | null;
+  statementKind?: StatementKind;
 }
 
-function Attest ({ accountId, className }: Props): React.ReactElement<Props> | null {
+function Attest ({ accountId, className, ethereumAddress, statementKind }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
+  const { api } = useApi();
+  const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
+  const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
+  const [isBusy, setIsBusy] = useState(false);
+
+  const _fetchClaim = useCallback(
+    (address: EthereumAddress): void => {
+      setIsBusy(true);
+
+      api.query.claims
+        .claims<Option<BalanceOf>>(address)
+        .then((claim): void => {
+          setClaimValue(claim.unwrapOr(null));
+          setIsBusy(false);
+        })
+        .catch((): void => setIsBusy(false));
+    },
+    [api]
+  );
+
+  useEffect((): void => {
+    setClaimAddress(ethereumAddress);
+
+    ethereumAddress && _fetchClaim(ethereumAddress);
+  }, [_fetchClaim, ethereumAddress]);
+
+  if (isBusy || !claimAddress) {
+    return null;
+  }
+
+  const hasClaim = claimValue && claimValue.gten(0);
 
   return (
     <Card isSuccess>
       <div className={className}>
         {t('By signing this transaction, you agree with the attestation available at the following address: XXX')}
-        <h3>{addrToChecksum(accountId)}</h3>
+        {hasClaim &&
+          <h3>{t('Attestation for: ')} <FormatBalance value={claimValue} /></h3>}
         <Button.Group>
           <TxButton
             accountId={accountId}
             icon='send'
             isPrimary
             label={t('Attest')}
-            params={['dsafdsalkfj']} // Replace with actual
+            params={[statementKind]} // Replace with actual
             tx='claims.attest'
           />
         </Button.Group>
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 67c871f8a5c0..c6bd0188a29d 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -71,7 +71,13 @@ function ClaimsApp (): React.ReactElement {
   const { api, systemChain } = useApi();
   const { t } = useTranslation();
   const isPreclaimed = useCall<boolean>(api.query.claims.preclaims, [accountId], {
-    transform: (option: Option<EthereumAddress>) => option.isSome
+    transform: (option: Option<EthereumAddress>) => {
+      if (option.isSome) {
+        setEthereumAddress(option.unwrap());
+      }
+
+      return option.isSome;
+    }
   });
 
   const isOldClaimProcess = !api.tx.claims.claimAttest;
@@ -170,7 +176,7 @@ function ClaimsApp (): React.ReactElement {
             <Card>
               <h3>{t('2. Sign ETH transaction')}</h3>
               {
-                // We only need to know the Ethereum addrss for the new process
+                // We only need to know the Ethereum address for the new process
                 // to know the StatementKind for users to sign
                 !isOldClaimProcess && <Input
                   autoFocus
@@ -224,7 +230,11 @@ function ClaimsApp (): React.ReactElement {
         <Column showEmptyText={false}>
           {(step >= Step.Claim) && (
             isPreclaimed
-              ? <AttestDisplay accountId={accountId} />
+              ? <AttestDisplay
+                accountId={accountId}
+                ethereumAddress={ethereumAddress}
+                statementKind={statementKind}
+              />
               : <ClaimDisplay
                 accountId={accountId}
                 ethereumAddress={ethereumAddress}
@@ -237,6 +247,6 @@ function ClaimsApp (): React.ReactElement {
       </Columar>
     </main>
   );
-};
+}
 
 export default React.memo(ClaimsApp);

From c5cf84bd10e63da22bca89ef11298fef2a8dd441 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Thu, 14 May 2020 14:42:55 +0200
Subject: [PATCH 23/74] Use counter instead of overlay (#2750)

* Use counter instead of overlay

* Add warning to claim (#2752)

* add warning

* css cleanup

* fix unused const

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
---
 packages/apps-routing/src/claims.ts    |  5 +-
 packages/apps/src/Apps.tsx             |  2 -
 packages/apps/src/overlays/Attest.tsx  | 49 -------------------
 packages/page-claims/src/Warning.tsx   | 67 ++++++++++++++++++++++++++
 packages/page-claims/src/index.tsx     |  5 +-
 packages/page-claims/src/useCounter.ts | 21 ++++++++
 6 files changed, 95 insertions(+), 54 deletions(-)
 delete mode 100644 packages/apps/src/overlays/Attest.tsx
 create mode 100644 packages/page-claims/src/Warning.tsx
 create mode 100644 packages/page-claims/src/useCounter.ts

diff --git a/packages/apps-routing/src/claims.ts b/packages/apps-routing/src/claims.ts
index 082e0867c4b6..705e80d59f63 100644
--- a/packages/apps-routing/src/claims.ts
+++ b/packages/apps-routing/src/claims.ts
@@ -4,7 +4,7 @@
 
 import { Route } from './types';
 
-import Claims from '@polkadot/app-claims';
+import Claims, { useCounter } from '@polkadot/app-claims';
 
 export default function create (t: (key: string, text: string, options: { ns: string }) => string): Route {
   return {
@@ -16,6 +16,7 @@ export default function create (t: (key: string, text: string, options: { ns: st
     },
     icon: 'star',
     name: 'claims',
-    text: t('nav.claims', 'Claim Tokens', { ns: 'apps-routing' })
+    text: t('nav.claims', 'Claim Tokens', { ns: 'apps-routing' }),
+    useCounter
   };
 }
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 5cad9275abea..78945c1c11ce 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -14,7 +14,6 @@ import { useApi } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';
 
 import AccountsOverlay from './overlays/Accounts';
-import AttestOverlay from './overlays/Attest';
 import ConnectingOverlay from './overlays/Connecting';
 import { SideBarTransition, SIDEBAR_MENU_THRESHOLD } from './constants';
 import Content from './Content';
@@ -94,7 +93,6 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
         </Signer>
         <ConnectingOverlay />
         <AccountsOverlay />
-        <AttestOverlay />
         <div id={PORTAL_ID} />
       </div>
       <WarmUp />
diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx
deleted file mode 100644
index f42ec3652d7c..000000000000
--- a/packages/apps/src/overlays/Attest.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-import { useApi, useAccounts, useCall } from '@polkadot/react-hooks';
-import { Option } from '@polkadot/types';
-import { EthereumAddress } from '@polkadot/types/interfaces';
-
-import { Link } from 'react-router-dom';
-
-import { useTranslation } from '../translate';
-import BaseOverlay from './Base';
-
-interface Props {
-  className?: string;
-}
-
-function Attest ({ className }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const { allAccounts } = useAccounts();
-  const { api, isApiReady } = useApi();
-
-  // Find accounts that need attest. They are accounts that
-  // - already preclaimed,
-  // - didn't sign the attest yet.
-  // `claims.preclaims` returns Some() for these accounts.
-  const needAttest = useCall<[Option<EthereumAddress>]>(isApiReady && api.query.claims?.preclaims?.multi, [allAccounts])?.filter((opt) => opt.isSome);
-
-  if (!needAttest?.length) {
-    return null;
-  }
-
-  return (
-    <BaseOverlay className={className}
-      icon='warning sign'
-      type='error'>
-      <div>
-        {t(
-          '{{number}} account {{need}} to sign the attest before receiving DOTs. Please sign the attest ',
-          { replace: { need: needAttest.length === 1 ? 'needs' : 'need', number: needAttest.length } }
-        )}
-        <Link to='/claims'>{t('here.')}</Link>
-      </div>
-    </BaseOverlay>
-  );
-}
-
-export default React.memo(Attest);
diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx
new file mode 100644
index 000000000000..f965d9fac934
--- /dev/null
+++ b/packages/page-claims/src/Warning.tsx
@@ -0,0 +1,67 @@
+// Copyright 2017-2020 @polkadot/app-claims authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+// Copyright 2017-2020 @polkadot/app-settings authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Option } from '@polkadot/types';
+import { EthereumAddress } from '@polkadot/types/interfaces';
+import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+import { Card } from '@polkadot/react-components';
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { useTranslation } from './translate';
+
+export interface Props{
+  className?: string;
+}
+
+function Warning ({ className }: Props): React.ReactElement<Props> | null {
+  const { allAccounts } = useAccounts();
+  const { api, isApiReady } = useApi();
+  const { t } = useTranslation();
+
+  // Find accounts that need attest. They are accounts that
+  // - already preclaimed,
+  // - didn't sign the attest yet.
+  // `claims.preclaims` returns Some() for these accounts.
+  const preclaimsArray = useCall<[Option<EthereumAddress>]>(isApiReady && api.query.claims?.preclaims?.multi, [allAccounts]) || [];
+  const needAttestArray: string [] = [];
+
+  preclaimsArray.forEach((opt, index) => {
+    if (opt.isSome) {
+      needAttestArray.push(allAccounts[index]);
+    }
+  });
+
+  if (!needAttestArray || !needAttestArray.length) {
+    return null;
+  }
+
+  return (
+    <Card isError>
+      <div className={className}>
+        {
+          t(
+            'You need to sign an attestation for the following account(s): {{needAttestArray}}',
+            { replace: { needAttestArray } }
+          )
+        }
+      </div>
+    </Card>
+  );
+}
+
+export default React.memo(styled(Warning)`
+  font-size: 1.15rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 8rem;
+  align-items: center;
+  margin: 0 1rem;
+`);
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index c6bd0188a29d..82b60aa4de71 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -10,6 +10,7 @@ import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { Button, Card, Columar, Column, InputAddress, Tooltip, Input } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import { u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
@@ -18,8 +19,9 @@ import AttestDisplay from './Attest';
 import ClaimDisplay from './Claim';
 import { recoverFromJSON } from './util';
 import { useTranslation } from './translate';
+import Warning from './Warning';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+export { default as useCounter } from './useCounter';
 
 enum Step {
   Account = 0,
@@ -144,6 +146,7 @@ function ClaimsApp (): React.ReactElement {
   return (
     <main>
       <header />
+      {!isOldClaimProcess && <Warning />}
       <h1>
         <Trans>claim your <em>{TokenUnit.abbr}</em> tokens</Trans>
       </h1>
diff --git a/packages/page-claims/src/useCounter.ts b/packages/page-claims/src/useCounter.ts
new file mode 100644
index 000000000000..0d9294ce6153
--- /dev/null
+++ b/packages/page-claims/src/useCounter.ts
@@ -0,0 +1,21 @@
+// Copyright 2017-2020 @polkadot/app-settings authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Option } from '@polkadot/types';
+import { EthereumAddress } from '@polkadot/types/interfaces';
+
+import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+
+export default function useCounter (): number {
+  const { allAccounts } = useAccounts();
+  const { api, isApiReady } = useApi();
+
+  // Find accounts that need attest. They are accounts that
+  // - already preclaimed,
+  // - didn't sign the attest yet.
+  // `claims.preclaims` returns Some() for these accounts.
+  const needAttest = useCall<[Option<EthereumAddress>]>(isApiReady && api.query.claims?.preclaims?.multi, [allAccounts])?.filter((opt) => opt.isSome);
+
+  return needAttest ? needAttest.length : 0;
+}

From 29869d55bf77ca9999f4817164d3f8bc01452fc6 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Thu, 14 May 2020 15:17:25 +0200
Subject: [PATCH 24/74] Update packages/page-claims/src/Warning.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/Warning.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx
index f965d9fac934..980fa208a49f 100644
--- a/packages/page-claims/src/Warning.tsx
+++ b/packages/page-claims/src/Warning.tsx
@@ -29,16 +29,15 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
   // - already preclaimed,
   // - didn't sign the attest yet.
   // `claims.preclaims` returns Some() for these accounts.
-  const preclaimsArray = useCall<[Option<EthereumAddress>]>(isApiReady && api.query.claims?.preclaims?.multi, [allAccounts]) || [];
-  const needAttestArray: string [] = [];
-
-  preclaimsArray.forEach((opt, index) => {
-    if (opt.isSome) {
-      needAttestArray.push(allAccounts[index]);
-    }
+  const needsAttestArray = useCall<string[]>(api.query.claims.preclaims?.multi, [allAccounts], {
+     transform: (preclaims: Option<EthereumAddress>[]) =>
+       preclaims
+         .map((opt, index) => [opt.isSome, allAccounts[index]])
+         .filter(([isSome]) => isSome)
+         .map(([, address)) => address) 
   });
-
-  if (!needAttestArray || !needAttestArray.length) {
+  
+  if (!needsAttestArray || !needsAttestArray.length) {
     return null;
   }
 

From f9128cc2cb85f5c4e8c9cae2c9c2cb6846e01592 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Thu, 14 May 2020 15:17:40 +0200
Subject: [PATCH 25/74] Update packages/page-claims/src/index.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 82b60aa4de71..74d1bfba4971 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -15,10 +15,10 @@ import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import { u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
+import { useTranslation } from './translate';
+import { recoverFromJSON } from './util';
 import AttestDisplay from './Attest';
 import ClaimDisplay from './Claim';
-import { recoverFromJSON } from './util';
-import { useTranslation } from './translate';
 import Warning from './Warning';
 
 export { default as useCounter } from './useCounter';

From 813a5f25b7b2067aa5b3a21b3ed1ba4acf0d8e85 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Thu, 14 May 2020 15:18:10 +0200
Subject: [PATCH 26/74] Update packages/page-claims/src/index.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 74d1bfba4971..0a9ac8b4a078 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -134,13 +134,13 @@ function ClaimsApp (): React.ReactElement {
     setDidCopy(true);
   }, []);
 
-  const statementKind = useCall<StatementKind | undefined>(ethereumAddress && api.query.claims.signing, [ethereumAddress], {
-    transform: (option: Option<StatementKind>) => option.unwrapOr(undefined)
-  }) || '';
+  const statementKind = useCall<string>(ethereumAddress && api.query.claims.signing, [ethereumAddress], {
+    transform: (option: Option<StatementKind>) => option.unwrapOr('').toString()
+  });
 
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
   const payload = accountId
-    ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementKind}`
+    ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementKind || ''}`
     : '';
 
   return (

From 28de108cfa347de8be41717f8f6221474a3ada0c Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Thu, 14 May 2020 15:18:46 +0200
Subject: [PATCH 27/74] Update packages/page-claims/src/index.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/index.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 0a9ac8b4a078..b2387403980e 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -181,14 +181,16 @@ function ClaimsApp (): React.ReactElement {
               {
                 // We only need to know the Ethereum address for the new process
                 // to know the StatementKind for users to sign
-                !isOldClaimProcess && <Input
-                  autoFocus
-                  className='full'
-                  help={t('The the Ethereum address you used during the pre-sale (starting by "0x")')}
-                  label={t('Pre-sale ethereum address')}
-                  onChange={onChangeEthereumAddress}
-                  value={ethereumAddress || ''}
-                />}
+                !isOldClaimProcess && (
+                  <Input
+                    autoFocus
+                    className='full'
+                    help={t('The the Ethereum address you used during the pre-sale (starting by "0x")')}
+                    label={t('Pre-sale ethereum address')}
+                    onChange={onChangeEthereumAddress}
+                    value={ethereumAddress || ''}
+                  />
+                )}
               {(!!ethereumAddress || isOldClaimProcess) && <>
                 <CopyToClipboard
                   onCopy={onCopy}

From 34fe9d19a5f1e42e11e9446e926292dddf0c9a31 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Thu, 14 May 2020 15:19:09 +0200
Subject: [PATCH 28/74] Update packages/page-claims/src/index.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index b2387403980e..9653b5e8b5ce 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -9,7 +9,7 @@ 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, Input } from '@polkadot/react-components';
+import { Button, Card, Columar, Column, Input, InputAddress, Tooltip } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import { u8aToHex, u8aToString } from '@polkadot/util';

From cadb81fa9b0491fdaae1321b39715f4a4ccaa376 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Thu, 14 May 2020 15:21:44 +0200
Subject: [PATCH 29/74] address comment shortcut

---
 packages/page-claims/src/index.tsx | 54 ++++++++++++++++--------------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 9653b5e8b5ce..f07e7a8cc401 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -191,34 +191,36 @@ function ClaimsApp (): React.ReactElement {
                     value={ethereumAddress || ''}
                   />
                 )}
-              {(!!ethereumAddress || isOldClaimProcess) && <>
-                <CopyToClipboard
-                  onCopy={onCopy}
-                  text={payload}
-                >
-                  <Payload
-                    data-for='tx-payload'
-                    data-tip
+              {(!!ethereumAddress || isOldClaimProcess) && (
+                <>
+                  <CopyToClipboard
+                    onCopy={onCopy}
+                    text={payload}
                   >
-                    {payload}
-                  </Payload>
-                </CopyToClipboard>
-                <Tooltip
-                  place='right'
-                  text={didCopy ? t('copied') : t('click to copy')}
-                  trigger='tx-payload'
-                />
-                <div>
-                  {/* 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')}
+                    <Payload
+                      data-for='tx-payload'
+                      data-tip
+                    >
+                      {payload}
+                    </Payload>
+                  </CopyToClipboard>
+                  <Tooltip
+                    place='right'
+                    text={didCopy ? t('copied') : t('click to copy')}
+                    trigger='tx-payload'
+                  />
+                  <div>
+                    {/* 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')}
                   :
-                </div>
-                <Signature
-                  onChange={onChangeSignature}
-                  placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
-                  rows={10}
-                />
-              </>}
+                  </div>
+                  <Signature
+                    onChange={onChangeSignature}
+                    placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
+                    rows={10}
+                  />
+                </>
+              )}
               {(step === Step.Sign) && (
                 <Button.Group>
                   <Button

From 64dfb3dc661d6df307be5123260ebef826a75455 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Thu, 14 May 2020 16:01:11 +0200
Subject: [PATCH 30/74] set Ethereum address outside transfor and fix typos

---
 packages/page-claims/src/Warning.tsx | 18 +++++++++---------
 packages/page-claims/src/index.tsx   | 18 +++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx
index 980fa208a49f..b1d8d6e65f94 100644
--- a/packages/page-claims/src/Warning.tsx
+++ b/packages/page-claims/src/Warning.tsx
@@ -22,7 +22,7 @@ export interface Props{
 
 function Warning ({ className }: Props): React.ReactElement<Props> | null {
   const { allAccounts } = useAccounts();
-  const { api, isApiReady } = useApi();
+  const { api } = useApi();
   const { t } = useTranslation();
 
   // Find accounts that need attest. They are accounts that
@@ -30,13 +30,13 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
   // - didn't sign the attest yet.
   // `claims.preclaims` returns Some() for these accounts.
   const needsAttestArray = useCall<string[]>(api.query.claims.preclaims?.multi, [allAccounts], {
-     transform: (preclaims: Option<EthereumAddress>[]) =>
-       preclaims
-         .map((opt, index) => [opt.isSome, allAccounts[index]])
-         .filter(([isSome]) => isSome)
-         .map(([, address)) => address) 
+    transform: (preclaims: Option<EthereumAddress>[]) =>
+      preclaims
+        .map((opt, index) => [opt.isSome, allAccounts[index]])
+        .filter(([isSome]) => isSome)
+        .map(([, address]) => address as string)
   });
-  
+
   if (!needsAttestArray || !needsAttestArray.length) {
     return null;
   }
@@ -46,8 +46,8 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
       <div className={className}>
         {
           t(
-            'You need to sign an attestation for the following account(s): {{needAttestArray}}',
-            { replace: { needAttestArray } }
+            'You need to sign an attestation for the following account(s): {{needsAttestArray}}',
+            { replace: { needsAttestArray } }
           )
         }
       </div>
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index f07e7a8cc401..f8c87f7466b0 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -5,7 +5,7 @@
 import { Option } from '@polkadot/types';
 import { EcdsaSignature, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -70,18 +70,18 @@ function ClaimsApp (): React.ReactElement {
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);
   const [step, setStep] = useState<Step>(Step.Account);
   const [accountId, setAccountId] = useState<string | null>(null);
+  const [isPreclaimed, setIsPreclaimed] = useState(false);
   const { api, systemChain } = useApi();
   const { t } = useTranslation();
-  const isPreclaimed = useCall<boolean>(api.query.claims.preclaims, [accountId], {
-    transform: (option: Option<EthereumAddress>) => {
-      if (option.isSome) {
-        setEthereumAddress(option.unwrap());
-      }
-
-      return option.isSome;
-    }
+  const preclaimEthereumAddress = useCall<EthereumAddress | ''>(api.query.claims.preclaims, [accountId], {
+    transform: (option: Option<EthereumAddress>) => option.unwrapOr('')
   });
 
+  useEffect(() => {
+    setIsPreclaimed(!!preclaimEthereumAddress);
+    setEthereumAddress(preclaimEthereumAddress || null);
+  }, [preclaimEthereumAddress]);
+
   const isOldClaimProcess = !api.tx.claims.claimAttest;
 
   useEffect(() => {

From c4c8cae815c1738068dbdb763feb9bc5608b0020 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Thu, 14 May 2020 16:08:04 +0200
Subject: [PATCH 31/74] lint

---
 packages/page-claims/src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index f8c87f7466b0..f28c3dc7519d 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -5,7 +5,7 @@
 import { Option } from '@polkadot/types';
 import { EcdsaSignature, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';

From 407cab2b1f4fed90bb5151d691f01cdbca3e8e35 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Thu, 14 May 2020 16:25:09 +0200
Subject: [PATCH 32/74] extract claims.preclaims to a hook

---
 packages/page-claims/src/Warning.tsx          | 19 ++-----------
 packages/page-claims/src/useCounter.ts        | 14 ++--------
 .../src/usePreclaimPolkadotAddresses.ts       | 27 +++++++++++++++++++
 3 files changed, 31 insertions(+), 29 deletions(-)
 create mode 100644 packages/page-claims/src/usePreclaimPolkadotAddresses.ts

diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx
index b1d8d6e65f94..9882a9cb64e6 100644
--- a/packages/page-claims/src/Warning.tsx
+++ b/packages/page-claims/src/Warning.tsx
@@ -6,36 +6,21 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Option } from '@polkadot/types';
-import { EthereumAddress } from '@polkadot/types/interfaces';
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { Card } from '@polkadot/react-components';
 
 import React from 'react';
 import styled from 'styled-components';
 
 import { useTranslation } from './translate';
+import usePreclaimPolkadotAddresses from './usePreclaimPolkadotAddresses';
 
 export interface Props{
   className?: string;
 }
 
 function Warning ({ className }: Props): React.ReactElement<Props> | null {
-  const { allAccounts } = useAccounts();
-  const { api } = useApi();
   const { t } = useTranslation();
-
-  // Find accounts that need attest. They are accounts that
-  // - already preclaimed,
-  // - didn't sign the attest yet.
-  // `claims.preclaims` returns Some() for these accounts.
-  const needsAttestArray = useCall<string[]>(api.query.claims.preclaims?.multi, [allAccounts], {
-    transform: (preclaims: Option<EthereumAddress>[]) =>
-      preclaims
-        .map((opt, index) => [opt.isSome, allAccounts[index]])
-        .filter(([isSome]) => isSome)
-        .map(([, address]) => address as string)
-  });
+  const needsAttestArray = usePreclaimPolkadotAddresses();
 
   if (!needsAttestArray || !needsAttestArray.length) {
     return null;
diff --git a/packages/page-claims/src/useCounter.ts b/packages/page-claims/src/useCounter.ts
index 0d9294ce6153..9fe91eb3128a 100644
--- a/packages/page-claims/src/useCounter.ts
+++ b/packages/page-claims/src/useCounter.ts
@@ -2,20 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Option } from '@polkadot/types';
-import { EthereumAddress } from '@polkadot/types/interfaces';
-
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+import usePreclaimPolkadotAddresses from './usePreclaimPolkadotAddresses';
 
 export default function useCounter (): number {
-  const { allAccounts } = useAccounts();
-  const { api, isApiReady } = useApi();
-
-  // Find accounts that need attest. They are accounts that
-  // - already preclaimed,
-  // - didn't sign the attest yet.
-  // `claims.preclaims` returns Some() for these accounts.
-  const needAttest = useCall<[Option<EthereumAddress>]>(isApiReady && api.query.claims?.preclaims?.multi, [allAccounts])?.filter((opt) => opt.isSome);
+  const needAttest = usePreclaimPolkadotAddresses();
 
   return needAttest ? needAttest.length : 0;
 }
diff --git a/packages/page-claims/src/usePreclaimPolkadotAddresses.ts b/packages/page-claims/src/usePreclaimPolkadotAddresses.ts
new file mode 100644
index 000000000000..1141a09fa819
--- /dev/null
+++ b/packages/page-claims/src/usePreclaimPolkadotAddresses.ts
@@ -0,0 +1,27 @@
+// Copyright 2017-2020 @polkadot/app-settings authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Option } from '@polkadot/types';
+import { EthereumAddress } from '@polkadot/types/interfaces';
+
+import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+
+export default function usePreclaimPolkadotAddresses (): string[] {
+  const { allAccounts } = useAccounts();
+  const { api } = useApi();
+
+  // Find accounts that need attest. They are accounts that
+  // - already preclaimed,
+  // - didn't sign the attest yet.
+  // `claims.preclaims` returns the ethereum address for these accounts.
+  const needAttest = useCall<string[]>(api.query.claims?.preclaims?.multi, [allAccounts], {
+    transform: (preclaims: Option<EthereumAddress>[]) =>
+      preclaims
+        .map((opt, index) => [opt.isSome, allAccounts[index]])
+        .filter(([isSome]) => isSome)
+        .map(([, address]) => address as string)
+  });
+
+  return needAttest || [];
+}

From fb97c82f4aeda221d66dfa2c0e2b258ca4fb7bbc Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Thu, 14 May 2020 17:05:29 +0200
Subject: [PATCH 33/74] address comments EthereumAddress type and avoid casting

---
 packages/page-claims/src/index.tsx                       | 4 ++--
 packages/page-claims/src/usePreclaimPolkadotAddresses.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index f28c3dc7519d..037e82f1c82c 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -125,10 +125,10 @@ function ClaimsApp (): React.ReactElement {
 
   const onChangeEthereumAddress = useCallback((value: string) => {
     // FIXME We surely need a better check than just a trim
-    const trimmedAddress = value.trim() as unknown as EthereumAddress;
+    const trimmedAddress = api.createType('EthereumAddress', value.trim());
 
     setEthereumAddress(trimmedAddress);
-  }, []);
+  }, [api]);
 
   const onCopy = useCallback(() => {
     setDidCopy(true);
diff --git a/packages/page-claims/src/usePreclaimPolkadotAddresses.ts b/packages/page-claims/src/usePreclaimPolkadotAddresses.ts
index 1141a09fa819..58c7da4f24ed 100644
--- a/packages/page-claims/src/usePreclaimPolkadotAddresses.ts
+++ b/packages/page-claims/src/usePreclaimPolkadotAddresses.ts
@@ -18,9 +18,9 @@ export default function usePreclaimPolkadotAddresses (): string[] {
   const needAttest = useCall<string[]>(api.query.claims?.preclaims?.multi, [allAccounts], {
     transform: (preclaims: Option<EthereumAddress>[]) =>
       preclaims
-        .map((opt, index) => [opt.isSome, allAccounts[index]])
+        .map((opt, index): [boolean, string] => [opt.isSome, allAccounts[index]])
         .filter(([isSome]) => isSome)
-        .map(([, address]) => address as string)
+        .map(([, address]) => address)
   });
 
   return needAttest || [];

From df2f77f2a0237b9696956a5ed05480a6d50d0cfd Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Fri, 15 May 2020 09:52:35 +0200
Subject: [PATCH 34/74] Missing isUnsigned

---
 packages/page-claims/src/Claim.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index ba983d75d44a..12cd2f4aa796 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -86,6 +86,7 @@ function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOl
                   accountId={accountId}
                   icon='send'
                   isPrimary
+                  isUnsigned
                   label={t('Claim')}
                   {...constructTx(accountId, ethereumSignature, statementKind, isOldClaimProcess)}
                 />

From e2920f9bbf50b738aaff17ea1175171ebad5c023 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 15 May 2020 10:16:38 +0200
Subject: [PATCH 35/74] use AddressMini in warning

---
 packages/page-claims/src/Warning.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx
index 9882a9cb64e6..46b0bf79439f 100644
--- a/packages/page-claims/src/Warning.tsx
+++ b/packages/page-claims/src/Warning.tsx
@@ -6,7 +6,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Card } from '@polkadot/react-components';
+import { AddressMini, Card } from '@polkadot/react-components';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -31,10 +31,18 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
       <div className={className}>
         {
           t(
-            'You need to sign an attestation for the following account(s): {{needsAttestArray}}',
-            { replace: { needsAttestArray } }
+            'You need to sign an attestation for the following {{account}}:',
+            { replace: { account: needsAttestArray.length > 1 ? 'accounts' : 'account' } }
           )
         }
+        {
+          needsAttestArray.map((address) => {
+            return <AddressMini
+              key={address}
+              value={address}
+            />;
+          })
+        }
       </div>
     </Card>
   );
@@ -48,4 +56,8 @@ export default React.memo(styled(Warning)`
   min-height: 8rem;
   align-items: center;
   margin: 0 1rem;
+
+  .ui--AddressMini-address {
+    max-width: 20rem;
+  }
 `);

From 5dd8108d94ff2ac111cd9e7c6a861b357924fc5a Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 15 May 2020 11:29:29 +0200
Subject: [PATCH 36/74] use a proper step for eth address field

---
 packages/page-claims/src/index.tsx | 118 +++++++++++++++++------------
 1 file changed, 68 insertions(+), 50 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 037e82f1c82c..fa635d25f731 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -25,8 +25,9 @@ export { default as useCounter } from './useCounter';
 
 enum Step {
   Account = 0,
-  Sign = 1,
-  Claim = 2,
+  ETHAddress = 1,
+  Sign = 2,
+  Claim = 3,
 }
 
 // FIXME no embedded components (hossible to tweak)
@@ -100,15 +101,23 @@ function ClaimsApp (): React.ReactElement {
     setStep(Step.Claim);
   }, []);
 
+  const goToStepEthereumAddress = useCallback(() => {
+    console.log('isOldClaimProcess', isOldClaimProcess);
+
+    if (ethereumAddress || isOldClaimProcess) {
+      goToStepSign();
+    } else {
+      setStep(Step.ETHAddress);
+    }
+  }, [ethereumAddress, goToStepSign, isOldClaimProcess]);
+
   // Everytime we get a new preclaimed value (e.g. after we change account), we
   // decide on which step to show.
   useEffect(() => {
     if (isPreclaimed) {
       goToStepClaim();
-    } else {
-      goToStepSign();
     }
-  }, [goToStepClaim, goToStepSign, isPreclaimed]);
+  }, [ethereumAddress, goToStepClaim, goToStepSign, isPreclaimed]);
 
   const onChangeAccount = useCallback((newAccountId) => {
     setAccountId(newAccountId);
@@ -170,57 +179,66 @@ function ClaimsApp (): React.ReactElement {
                 <Button
                   icon='sign-in'
                   label={t('Continue')}
-                  onClick={goToStepSign}
+                  onClick={goToStepEthereumAddress}
                 />
               </Button.Group>
             )}
           </Card>
-          {(step >= Step.Sign && !!accountId && !isPreclaimed) && (
-            <Card>
-              <h3>{t('2. Sign ETH transaction')}</h3>
-              {
-                // We only need to know the Ethereum address for the new process
-                // to know the StatementKind for users to sign
-                !isOldClaimProcess && (
-                  <Input
-                    autoFocus
-                    className='full'
-                    help={t('The the Ethereum address you used during the pre-sale (starting by "0x")')}
-                    label={t('Pre-sale ethereum address')}
-                    onChange={onChangeEthereumAddress}
-                    value={ethereumAddress || ''}
-                  />
+          {
+          // 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
+            (step >= Step.ETHAddress && !isPreclaimed && !isOldClaimProcess) && (
+              <Card withBottomMargin>
+                <h3>{t('2. Enter the ETH address from the sale.')}</h3>
+                <Input
+                  autoFocus
+                  className='full'
+                  help={t('The the Ethereum address you used during the pre-sale (starting by "0x")')}
+                  label={t('Pre-sale ethereum address')}
+                  onChange={onChangeEthereumAddress}
+                  value={ethereumAddress || ''}
+                />
+                {(step === Step.ETHAddress) && (
+                  <Button.Group>
+                    <Button
+                      icon='sign-in'
+                      label={t('Continue')}
+                      onClick={goToStepSign}
+                    />
+                  </Button.Group>
                 )}
-              {(!!ethereumAddress || isOldClaimProcess) && (
-                <>
-                  <CopyToClipboard
-                    onCopy={onCopy}
-                    text={payload}
-                  >
-                    <Payload
-                      data-for='tx-payload'
-                      data-tip
-                    >
-                      {payload}
-                    </Payload>
-                  </CopyToClipboard>
-                  <Tooltip
-                    place='right'
-                    text={didCopy ? t('copied') : t('click to copy')}
-                    trigger='tx-payload'
-                  />
-                  <div>
-                    {/* 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')}
+              </Card>
+            )}
+          {(step >= Step.Sign && !isPreclaimed) && (
+            <Card>
+              <h3>{t('{{step}}. Sign with you ETH address',
+                { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
+              <CopyToClipboard
+                onCopy={onCopy}
+                text={payload}
+              >
+                <Payload
+                  data-for='tx-payload'
+                  data-tip
+                >
+                  {payload}
+                </Payload>
+              </CopyToClipboard>
+              <Tooltip
+                place='right'
+                text={didCopy ? t('copied') : t('click to copy')}
+                trigger='tx-payload'
+              />
+              <div>
+                {/* 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')}
                   :
-                  </div>
-                  <Signature
-                    onChange={onChangeSignature}
-                    placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
-                    rows={10}
-                  />
-                </>
-              )}
+              </div>
+              <Signature
+                onChange={onChangeSignature}
+                placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
+                rows={10}
+              />
               {(step === Step.Sign) && (
                 <Button.Group>
                   <Button

From 0f6ea73d9ea17c5910a0d36e4188975047c42291 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Fri, 15 May 2020 12:35:05 +0200
Subject: [PATCH 37/74] Add loading state

---
 packages/page-claims/src/index.tsx | 86 +++++++++++++++++++-----------
 1 file changed, 56 insertions(+), 30 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index fa635d25f731..95ea8bc5e9bd 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -30,6 +30,8 @@ enum Step {
   Claim = 3,
 }
 
+const PRECLAIMS_LOADING = 'PRECLAIMS_LOADING';
+
 // FIXME no embedded components (hossible to tweak)
 const Payload = styled.pre`
   cursor: copy;
@@ -71,18 +73,44 @@ function ClaimsApp (): React.ReactElement {
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);
   const [step, setStep] = useState<Step>(Step.Account);
   const [accountId, setAccountId] = useState<string | null>(null);
-  const [isPreclaimed, setIsPreclaimed] = useState(false);
   const { api, systemChain } = useApi();
   const { t } = useTranslation();
-  const preclaimEthereumAddress = useCall<EthereumAddress | ''>(api.query.claims.preclaims, [accountId], {
-    transform: (option: Option<EthereumAddress>) => option.unwrapOr('')
-  });
 
+  // This preclaimEthereumAddress holds the result of `api.query.claims.preclaims`:
+  // - an `EthereumAddress` when there's a preclaim
+  // - null if no preclaim
+  // - `PRECLAIMS_LOADING` if we're fetching the results
+  const [preclaimEthereumAddress, setPreclaimEthereumAddress] = useState<EthereumAddress | null | typeof PRECLAIMS_LOADING>(PRECLAIMS_LOADING);
+  const isPreclaimed = !!preclaimEthereumAddress && preclaimEthereumAddress !== PRECLAIMS_LOADING;
+
+  // Everytime we change account, reset everything, and check if the accountId
+  // has a preclaim.
   useEffect(() => {
-    setIsPreclaimed(!!preclaimEthereumAddress);
-    setEthereumAddress(preclaimEthereumAddress || null);
-  }, [preclaimEthereumAddress]);
+    if (!accountId) {
+      return;
+    }
+
+    setStep(Step.Account);
+    setEthereumAddress(null);
+    setPreclaimEthereumAddress(PRECLAIMS_LOADING);
 
+    if (!api.query.claims?.preclaims) {
+      return setPreclaimEthereumAddress(null);
+    }
+
+    api.query.claims
+      .preclaims<Option<EthereumAddress>>(accountId)
+      .then((preclaim): void => {
+        if (preclaim.isSome) {
+          setEthereumAddress(preclaim.unwrap());
+        }
+
+        setPreclaimEthereumAddress(preclaim.unwrapOr(null));
+      })
+      .catch((): void => setPreclaimEthereumAddress(null));
+  }, [accountId, api.query.claims]);
+
+  // Old claim process used `api.tx.claims.claim`, and didn't have attest
   const isOldClaimProcess = !api.tx.claims.claimAttest;
 
   useEffect(() => {
@@ -101,27 +129,16 @@ function ClaimsApp (): React.ReactElement {
     setStep(Step.Claim);
   }, []);
 
-  const goToStepEthereumAddress = useCallback(() => {
-    console.log('isOldClaimProcess', isOldClaimProcess);
-
-    if (ethereumAddress || isOldClaimProcess) {
+  // Depending on the account, decide which step to show.
+  const handleAccountStep = useCallback(() => {
+    if (isPreclaimed) {
+      goToStepClaim();
+    } else if (ethereumAddress || isOldClaimProcess) {
       goToStepSign();
     } else {
       setStep(Step.ETHAddress);
     }
-  }, [ethereumAddress, goToStepSign, isOldClaimProcess]);
-
-  // Everytime we get a new preclaimed value (e.g. after we change account), we
-  // decide on which step to show.
-  useEffect(() => {
-    if (isPreclaimed) {
-      goToStepClaim();
-    }
-  }, [ethereumAddress, goToStepClaim, goToStepSign, isPreclaimed]);
-
-  const onChangeAccount = useCallback((newAccountId) => {
-    setAccountId(newAccountId);
-  }, []);
+  }, [ethereumAddress, goToStepClaim, goToStepSign, isPreclaimed, isOldClaimProcess]);
 
   const onChangeSignature = useCallback((event: React.SyntheticEvent<Element>) => {
     const { value: signatureJson } = event.target as HTMLInputElement;
@@ -143,7 +160,9 @@ function ClaimsApp (): React.ReactElement {
     setDidCopy(true);
   }, []);
 
-  const statementKind = useCall<string>(ethereumAddress && api.query.claims.signing, [ethereumAddress], {
+  // If it's 1/ not preclaimed and 2/ not the old claiming process, fetch the
+  // statement kind to sign.
+  const statementKind = useCall<string>(!isPreclaimed && !isOldClaimProcess && ethereumAddress && api.query.claims.signing, [ethereumAddress], {
     transform: (option: Option<StatementKind>) => option.unwrapOr('').toString()
   });
 
@@ -152,6 +171,8 @@ function ClaimsApp (): React.ReactElement {
     ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementKind || ''}`
     : '';
 
+  console.log('step', step);
+
   return (
     <main>
       <header />
@@ -171,22 +192,26 @@ function ClaimsApp (): React.ReactElement {
               defaultValue={accountId}
               help={t('The account you want to claim to.')}
               label={t('claim to account')}
-              onChange={onChangeAccount}
+              onChange={setAccountId}
               type='all'
             />
             {(step === Step.Account) && (
               <Button.Group>
                 <Button
                   icon='sign-in'
-                  label={t('Continue')}
-                  onClick={goToStepEthereumAddress}
+                  isDisabled={preclaimEthereumAddress === PRECLAIMS_LOADING}
+                  label={preclaimEthereumAddress === PRECLAIMS_LOADING
+                    ? t('Loading')
+                    : t('Continue')
+                  }
+                  onClick={handleAccountStep}
                 />
               </Button.Group>
             )}
           </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
+            // 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
             (step >= Step.ETHAddress && !isPreclaimed && !isOldClaimProcess) && (
               <Card withBottomMargin>
                 <h3>{t('2. Enter the ETH address from the sale.')}</h3>
@@ -202,6 +227,7 @@ function ClaimsApp (): React.ReactElement {
                   <Button.Group>
                     <Button
                       icon='sign-in'
+                      isDisabled={!ethereumAddress}
                       label={t('Continue')}
                       onClick={goToStepSign}
                     />

From 3f16fea26d47faf8b2bea830d8b081d235cae2f0 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Fri, 15 May 2020 12:40:07 +0200
Subject: [PATCH 38/74] remove log

---
 packages/page-claims/src/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 95ea8bc5e9bd..7abccdf509e6 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -171,8 +171,6 @@ function ClaimsApp (): React.ReactElement {
     ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementKind || ''}`
     : '';
 
-  console.log('step', step);
-
   return (
     <main>
       <header />

From 5d3552917f4d4dedde456df252eab347109471ee Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Fri, 15 May 2020 13:00:00 +0200
Subject: [PATCH 39/74] unwrapOrNull

---
 packages/page-claims/src/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 7abccdf509e6..6d23a68bda03 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -101,10 +101,7 @@ function ClaimsApp (): React.ReactElement {
     api.query.claims
       .preclaims<Option<EthereumAddress>>(accountId)
       .then((preclaim): void => {
-        if (preclaim.isSome) {
-          setEthereumAddress(preclaim.unwrap());
-        }
-
+        setEthereumAddress(preclaim.unwrapOr(null))
         setPreclaimEthereumAddress(preclaim.unwrapOr(null));
       })
       .catch((): void => setPreclaimEthereumAddress(null));

From 6dba5b52b93fb13bb3baac33827bc3b4fdc12dcd Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Fri, 15 May 2020 13:06:54 +0200
Subject: [PATCH 40/74] Update packages/page-claims/src/Warning.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/Warning.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx
index 46b0bf79439f..62af0ec8a11f 100644
--- a/packages/page-claims/src/Warning.tsx
+++ b/packages/page-claims/src/Warning.tsx
@@ -36,12 +36,12 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
           )
         }
         {
-          needsAttestArray.map((address) => {
-            return <AddressMini
+          needsAttestArray.map((address) => (
+            <AddressMini
               key={address}
               value={address}
-            />;
-          })
+            />
+          ))
         }
       </div>
     </Card>

From 1d0e8fdbc1cacc5935d4ac65609528ecf1707cd9 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 15 May 2020 13:12:44 +0200
Subject: [PATCH 41/74] fix for account plural translation

---
 packages/page-claims/src/Warning.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx
index 62af0ec8a11f..48253e8cafe3 100644
--- a/packages/page-claims/src/Warning.tsx
+++ b/packages/page-claims/src/Warning.tsx
@@ -30,12 +30,10 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
     <Card isError>
       <div className={className}>
         {
-          t(
-            'You need to sign an attestation for the following {{account}}:',
-            { replace: { account: needsAttestArray.length > 1 ? 'accounts' : 'account' } }
-          )
-        }
-        {
+          needsAttestArray.length > 1
+            ? t('You need to sign an attestation for the following accounts:')
+            : t('You need to sign an attestation for the following account:')
+        }{
           needsAttestArray.map((address) => (
             <AddressMini
               key={address}

From 73d38e0d563b58a5e5cf58b1c0562611ae61f256 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 15 May 2020 13:13:36 +0200
Subject: [PATCH 42/74] lint

---
 packages/page-claims/src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 6d23a68bda03..7e0f63ff51ef 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -101,7 +101,7 @@ function ClaimsApp (): React.ReactElement {
     api.query.claims
       .preclaims<Option<EthereumAddress>>(accountId)
       .then((preclaim): void => {
-        setEthereumAddress(preclaim.unwrapOr(null))
+        setEthereumAddress(preclaim.unwrapOr(null));
         setPreclaimEthereumAddress(preclaim.unwrapOr(null));
       })
       .catch((): void => setPreclaimEthereumAddress(null));

From 1d8a01efb0cb09cdbe2ae2c356320bd328558ca8 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 18 May 2020 10:44:36 +0200
Subject: [PATCH 43/74] Add getStatement function

---
 packages/page-claims/src/Attest.tsx |  5 +++--
 packages/page-claims/src/Claim.tsx  | 12 ++++++++----
 packages/page-claims/src/util.ts    |  8 +++++++-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 5c95a402b70f..5aacd0151d65 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -11,6 +11,7 @@ import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/inter
 
 import { useTranslation } from './translate';
 import { useApi } from '@polkadot/react-hooks';
+import { getStatement } from './util';
 
 interface Props {
   accountId: string;
@@ -47,7 +48,7 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
     ethereumAddress && _fetchClaim(ethereumAddress);
   }, [_fetchClaim, ethereumAddress]);
 
-  if (isBusy || !claimAddress) {
+  if (isBusy || !claimAddress || !statementKind) {
     return null;
   }
 
@@ -65,7 +66,7 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
             icon='send'
             isPrimary
             label={t('Attest')}
-            params={[statementKind]} // Replace with actual
+            params={[getStatement(statementKind)]}
             tx='claims.attest'
           />
         </Button.Group>
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 12cd2f4aa796..3043c1254f63 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -12,7 +12,7 @@ import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from './translate';
-import { addrToChecksum } from './util';
+import { addrToChecksum, getStatement } from './util';
 
 interface Props {
   accountId: string;
@@ -26,12 +26,16 @@ interface Props {
 
 // Depending on isOldClaimProcess, construct the correct tx.
 function constructTx (accountId: string, ethereumSignature: string | null, kind: StatementKind | undefined, isOldClaimProcess: boolean): {
-  params: any[];
-  tx: string;
+  params?: any[];
+  tx?: string;
 } {
+  if (!ethereumSignature || !kind) {
+    return {};
+  }
+
   return isOldClaimProcess
     ? { params: [accountId, ethereumSignature], tx: 'claims.claim' }
-    : { params: [accountId, ethereumSignature, kind], tx: 'claims.claimAttest' };
+    : { params: [accountId, ethereumSignature, getStatement(kind)], tx: 'claims.claimAttest' };
 }
 
 function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess, statementKind }: Props): React.ReactElement<Props> | null {
diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index a8b453ea7777..9415ff2a1cb5 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { EthereumAddress, EcdsaSignature } from '@polkadot/types/interfaces';
+import { EthereumAddress, EcdsaSignature, StatementKind } from '@polkadot/types/interfaces';
 
 import secp256k1 from 'secp256k1/elliptic';
 import { registry } from '@polkadot/react-api';
@@ -108,3 +108,9 @@ export function recoverFromJSON (signatureJson: string | null): RecoveredSignatu
     };
   }
 }
+
+// From a StatementKind, get the hardcoded actual statement to sign
+export function getStatement (kind: StatementKind): string {
+  // FIXME Wait for actual legal statements
+  return kind.toString();
+}

From 8df104f8e210b178b258e2010cb77def47c511ff Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 18 May 2020 11:10:49 +0200
Subject: [PATCH 44/74] nits

---
 packages/page-claims/src/Attest.tsx | 9 ++++++---
 packages/page-claims/src/Claim.tsx  | 8 +++++---
 packages/page-claims/src/index.tsx  | 2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 5aacd0151d65..00a111f0446f 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Card, TxButton } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
@@ -27,6 +27,8 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
   const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
   const [isBusy, setIsBusy] = useState(false);
 
+  const statement = useMemo(() => statementKind && getStatement(statementKind), [statementKind]);
+
   const _fetchClaim = useCallback(
     (address: EthereumAddress): void => {
       setIsBusy(true);
@@ -48,7 +50,7 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
     ethereumAddress && _fetchClaim(ethereumAddress);
   }, [_fetchClaim, ethereumAddress]);
 
-  if (isBusy || !claimAddress || !statementKind) {
+  if (isBusy || !claimAddress) {
     return null;
   }
 
@@ -64,9 +66,10 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
           <TxButton
             accountId={accountId}
             icon='send'
+            isDisabled={!statement}
             isPrimary
             label={t('Attest')}
-            params={[getStatement(statementKind)]}
+            params={[statement]}
             tx='claims.attest'
           />
         </Button.Group>
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 3043c1254f63..5d7bcec291c3 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -24,11 +24,13 @@ interface Props {
   statementKind?: StatementKind;
 }
 
-// Depending on isOldClaimProcess, construct the correct tx.
-function constructTx (accountId: string, ethereumSignature: string | null, kind: StatementKind | undefined, isOldClaimProcess: boolean): {
+interface ConstructTx {
   params?: any[];
   tx?: string;
-} {
+}
+
+// Depending on isOldClaimProcess, construct the correct tx.
+function constructTx (accountId: string, ethereumSignature: string | null, kind: StatementKind | undefined, isOldClaimProcess: boolean): ConstructTx {
   if (!ethereumSignature || !kind) {
     return {};
   }
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 7e0f63ff51ef..5bbcc76432df 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -105,7 +105,7 @@ function ClaimsApp (): React.ReactElement {
         setPreclaimEthereumAddress(preclaim.unwrapOr(null));
       })
       .catch((): void => setPreclaimEthereumAddress(null));
-  }, [accountId, api.query.claims]);
+  }, [accountId, api.query.claims, api.query.claims.preclaims]);
 
   // Old claim process used `api.tx.claims.claim`, and didn't have attest
   const isOldClaimProcess = !api.tx.claims.claimAttest;

From 19b8b3b53b695b767aa780d2904f927d9f7fa984 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 18 May 2020 11:19:08 +0200
Subject: [PATCH 45/74] Fix lint

---
 packages/page-claims/src/Attest.tsx | 2 +-
 packages/page-claims/src/index.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 00a111f0446f..968b2f87e854 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -5,12 +5,12 @@
 import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Card, TxButton } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
 import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
 import { useTranslation } from './translate';
-import { useApi } from '@polkadot/react-hooks';
 import { getStatement } from './util';
 
 interface Props {
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 5bbcc76432df..5d03db5c25e3 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -94,7 +94,7 @@ function ClaimsApp (): React.ReactElement {
     setEthereumAddress(null);
     setPreclaimEthereumAddress(PRECLAIMS_LOADING);
 
-    if (!api.query.claims?.preclaims) {
+    if (!api.query.claims || !api.query.claims.preclaims) {
       return setPreclaimEthereumAddress(null);
     }
 

From f62c9627cbd4164d57141cdcde8d859b808467a0 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 18 May 2020 13:31:07 +0200
Subject: [PATCH 46/74] Update packages/page-claims/src/Warning.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-claims/src/Warning.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx
index 48253e8cafe3..3a026b0bccd0 100644
--- a/packages/page-claims/src/Warning.tsx
+++ b/packages/page-claims/src/Warning.tsx
@@ -2,10 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-// Copyright 2017-2020 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
 import { AddressMini, Card } from '@polkadot/react-components';
 
 import React from 'react';

From 875c367dcc9221a8d62435875b06efac9d779190 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 22 May 2020 10:38:49 +0200
Subject: [PATCH 47/74] add statement

---
 packages/page-claims/src/index.tsx     | 18 +++++++++++++++++-
 packages/page-claims/src/md/regular.md |  1 +
 packages/page-claims/src/md/saft.md    |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 packages/page-claims/src/md/regular.md
 create mode 100644 packages/page-claims/src/md/saft.md

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 5d03db5c25e3..68fe9f369056 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -20,6 +20,9 @@ import { recoverFromJSON } from './util';
 import AttestDisplay from './Attest';
 import ClaimDisplay from './Claim';
 import Warning from './Warning';
+import ReactMd from 'react-markdown';
+import statementRegular from './md/regular.md';
+import statementAlternative from './md/saft.md';
 
 export { default as useCounter } from './useCounter';
 
@@ -31,6 +34,8 @@ enum Step {
 }
 
 const PRECLAIMS_LOADING = 'PRECLAIMS_LOADING';
+const DEFAULT_STATEMENT = 'Default';
+const ALTERNATIVE_STATEMENT = 'Alternative';
 
 // FIXME no embedded components (hossible to tweak)
 const Payload = styled.pre`
@@ -163,6 +168,12 @@ function ClaimsApp (): React.ReactElement {
     transform: (option: Option<StatementKind>) => option.unwrapOr('').toString()
   });
 
+  const statement = statementKind
+    ? statementKind === ALTERNATIVE_STATEMENT
+      ? statementAlternative
+      : statementRegular
+    : null;
+
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
   const payload = accountId
     ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementKind || ''}`
@@ -234,6 +245,12 @@ function ClaimsApp (): React.ReactElement {
             <Card>
               <h3>{t('{{step}}. Sign with you ETH address',
                 { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
+              <div>Please read the following statement carefully:</div>
+              {statement && <ReactMd
+                className='statement'
+                escapeHtml={false}
+                source={statement}
+              />}
               <CopyToClipboard
                 onCopy={onCopy}
                 text={payload}
@@ -251,7 +268,6 @@ function ClaimsApp (): React.ReactElement {
                 trigger='tx-payload'
               />
               <div>
-                {/* 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')}
                   :
               </div>
diff --git a/packages/page-claims/src/md/regular.md b/packages/page-claims/src/md/regular.md
new file mode 100644
index 000000000000..5e4b2ec5f8ba
--- /dev/null
+++ b/packages/page-claims/src/md/regular.md
@@ -0,0 +1 @@
+statements - regular
\ No newline at end of file
diff --git a/packages/page-claims/src/md/saft.md b/packages/page-claims/src/md/saft.md
new file mode 100644
index 000000000000..5e4b2ec5f8ba
--- /dev/null
+++ b/packages/page-claims/src/md/saft.md
@@ -0,0 +1 @@
+statements - regular
\ No newline at end of file

From 22873dab4f0fa9f4041845fb37d956067583fbaa Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 22 May 2020 12:42:51 +0200
Subject: [PATCH 48/74] statement component

---
 packages/page-claims/src/Attest.tsx    | 16 +++++----
 packages/page-claims/src/Claim.tsx     |  4 +--
 packages/page-claims/src/Statement.tsx | 38 ++++++++++++++++++++
 packages/page-claims/src/index.tsx     | 29 +++++----------
 packages/page-claims/src/util.ts       | 50 ++++++++++++++++++++++++--
 5 files changed, 106 insertions(+), 31 deletions(-)
 create mode 100644 packages/page-claims/src/Statement.tsx

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 968b2f87e854..b941c12ef7f2 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useEffect, useCallback, useMemo, useState } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Card, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
@@ -10,8 +10,9 @@ import { FormatBalance } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
 import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
+import Statement from './Statement';
 import { useTranslation } from './translate';
-import { getStatement } from './util';
+import { getStatementSentence } from './util';
 
 interface Props {
   accountId: string;
@@ -27,8 +28,6 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
   const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
   const [isBusy, setIsBusy] = useState(false);
 
-  const statement = useMemo(() => statementKind && getStatement(statementKind), [statementKind]);
-
   const _fetchClaim = useCallback(
     (address: EthereumAddress): void => {
       setIsBusy(true);
@@ -55,21 +54,24 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
   }
 
   const hasClaim = claimValue && claimValue.gten(0);
+  const statementSentence = getStatementSentence(statementKind);
 
   return (
     <Card isSuccess>
       <div className={className}>
-        {t('By signing this transaction, you agree with the attestation available at the following address: XXX')}
+        <Statement
+          kind={statementKind}
+        />
         {hasClaim &&
           <h3>{t('Attestation for: ')} <FormatBalance value={claimValue} /></h3>}
         <Button.Group>
           <TxButton
             accountId={accountId}
             icon='send'
-            isDisabled={!statement}
+            isDisabled={!statementSentence}
             isPrimary
             label={t('Attest')}
-            params={[statement]}
+            params={[statementSentence]}
             tx='claims.attest'
           />
         </Button.Group>
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 5d7bcec291c3..57f0a1e84d40 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -12,7 +12,7 @@ import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from './translate';
-import { addrToChecksum, getStatement } from './util';
+import { addrToChecksum, getStatementSentence } from './util';
 
 interface Props {
   accountId: string;
@@ -37,7 +37,7 @@ function constructTx (accountId: string, ethereumSignature: string | null, kind:
 
   return isOldClaimProcess
     ? { params: [accountId, ethereumSignature], tx: 'claims.claim' }
-    : { params: [accountId, ethereumSignature, getStatement(kind)], tx: 'claims.claimAttest' };
+    : { params: [accountId, ethereumSignature, getStatementSentence(kind)], tx: 'claims.claimAttest' };
 }
 
 function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess, statementKind }: Props): React.ReactElement<Props> | null {
diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
new file mode 100644
index 000000000000..b8cf69b158c3
--- /dev/null
+++ b/packages/page-claims/src/Statement.tsx
@@ -0,0 +1,38 @@
+// Copyright 2017-2020 @polkadot/app-claims authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { StatementKind } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import ReactMd from 'react-markdown';
+import styled from 'styled-components';
+
+import { getStatementMd, getStatementUrl } from './util';
+import { useTranslation } from './translate';
+
+export interface Props{
+  className?: string;
+  kind: StatementKind;
+}
+
+function Statement ({ className, kind }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const statementUrl = getStatementUrl(kind);
+
+  return (
+    <div className={className}>
+      {t('Please read the following statement carefully, it is also available at ')}
+      <a href={statementUrl}>{statementUrl}</a>
+      <ReactMd
+        className='statement'
+        escapeHtml={false}
+        source={getStatementMd(kind)}
+      />
+    </div>
+  );
+}
+
+export default React.memo(styled(Statement)`
+  
+`);
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 68fe9f369056..f5bb688901db 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -16,13 +16,11 @@ import { u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
 import { useTranslation } from './translate';
-import { recoverFromJSON } from './util';
+import { recoverFromJSON, getStatementSentence } from './util';
 import AttestDisplay from './Attest';
 import ClaimDisplay from './Claim';
+import Statement from './Statement';
 import Warning from './Warning';
-import ReactMd from 'react-markdown';
-import statementRegular from './md/regular.md';
-import statementAlternative from './md/saft.md';
 
 export { default as useCounter } from './useCounter';
 
@@ -34,8 +32,6 @@ enum Step {
 }
 
 const PRECLAIMS_LOADING = 'PRECLAIMS_LOADING';
-const DEFAULT_STATEMENT = 'Default';
-const ALTERNATIVE_STATEMENT = 'Alternative';
 
 // FIXME no embedded components (hossible to tweak)
 const Payload = styled.pre`
@@ -164,19 +160,15 @@ function ClaimsApp (): React.ReactElement {
 
   // If it's 1/ not preclaimed and 2/ not the old claiming process, fetch the
   // statement kind to sign.
-  const statementKind = useCall<string>(!isPreclaimed && !isOldClaimProcess && ethereumAddress && api.query.claims.signing, [ethereumAddress], {
+  const _statementKind = useCall<string>(!isPreclaimed && !isOldClaimProcess && ethereumAddress && api.query.claims.signing, [ethereumAddress], {
     transform: (option: Option<StatementKind>) => option.unwrapOr('').toString()
   });
-
-  const statement = statementKind
-    ? statementKind === ALTERNATIVE_STATEMENT
-      ? statementAlternative
-      : statementRegular
-    : null;
+  const statementKind = api.createType('StatementKind', _statementKind);
+  const statementSentence = statementKind ? getStatementSentence(statementKind) : '';
 
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
   const payload = accountId
-    ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementKind || ''}`
+    ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementSentence}`
     : '';
 
   return (
@@ -245,12 +237,9 @@ function ClaimsApp (): React.ReactElement {
             <Card>
               <h3>{t('{{step}}. Sign with you ETH address',
                 { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
-              <div>Please read the following statement carefully:</div>
-              {statement && <ReactMd
-                className='statement'
-                escapeHtml={false}
-                source={statement}
-              />}
+              <Statement
+                kind={statementKind}
+              />
               <CopyToClipboard
                 onCopy={onCopy}
                 text={payload}
diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index 9415ff2a1cb5..7675d1101d3f 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -9,6 +9,9 @@ import { registry } from '@polkadot/react-api';
 import { assert, hexToU8a, stringToU8a, u8aToBuffer, u8aConcat } from '@polkadot/util';
 import { keccakAsHex, keccakAsU8a } from '@polkadot/util-crypto';
 
+import statementRegular from './md/regular.md';
+import statementAlternative from './md/saft.md';
+
 interface RecoveredSignature {
   error: Error | null;
   ethereumAddress: EthereumAddress | null;
@@ -20,6 +23,11 @@ interface SignatureParts {
   signature: Buffer;
 }
 
+const DEFAULT_STATEMENT_URL = 'https://statement.polkadot.network/regular.md';
+const ALTERNATIVE_STATEMENT_URL = 'https://statement.polkadot.network/saft.md';
+const DEFAULT_STATEMENT_HASH = '0x00';
+const ALTERNATIVE_STATEMENT_HASH = '0x00';
+
 // converts an Ethereum address to a checksum representation
 export function addrToChecksum (_address: string): string {
   const address = _address.toLowerCase();
@@ -109,8 +117,46 @@ export function recoverFromJSON (signatureJson: string | null): RecoveredSignatu
   }
 }
 
+export function getStatementUrl (kind?: StatementKind): string {
+  if (!kind) {
+    return '';
+  }
+
+  if (kind.isDefault) {
+    return DEFAULT_STATEMENT_URL;
+  } else {
+    return ALTERNATIVE_STATEMENT_URL;
+  }
+}
+
 // From a StatementKind, get the hardcoded actual statement to sign
-export function getStatement (kind: StatementKind): string {
+export function getStatementSentence (kind?: StatementKind): string {
   // FIXME Wait for actual legal statements
-  return kind.toString();
+
+  if (!kind) {
+    return '';
+  }
+
+  const url = getStatementUrl(kind);
+  let hash = '0x00';
+
+  if (kind.isDefault) {
+    hash = DEFAULT_STATEMENT_HASH;
+  } else {
+    hash = ALTERNATIVE_STATEMENT_HASH;
+  }
+
+  return `FIXME with the actual legal statement ${hash} ${url}`;
+}
+
+export function getStatementMd (kind?: StatementKind): string {
+  if (!kind) {
+    return '';
+  }
+
+  if (kind.isDefault) {
+    return statementRegular;
+  } else {
+    return statementAlternative;
+  }
 }

From 4715412be6890677e1198529bac831031c0e9062 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 22 May 2020 13:11:07 +0200
Subject: [PATCH 49/74] address comment unWrapOr

---
 packages/page-claims/src/index.tsx |  6 ++---
 packages/page-claims/src/util.ts   | 38 +++++++++++++-----------------
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index f5bb688901db..5b7558221d34 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -160,10 +160,10 @@ function ClaimsApp (): React.ReactElement {
 
   // If it's 1/ not preclaimed and 2/ not the old claiming process, fetch the
   // statement kind to sign.
-  const _statementKind = useCall<string>(!isPreclaimed && !isOldClaimProcess && ethereumAddress && api.query.claims.signing, [ethereumAddress], {
-    transform: (option: Option<StatementKind>) => option.unwrapOr('').toString()
+  const statementKind = useCall<StatementKind | null>(!isPreclaimed && !isOldClaimProcess && ethereumAddress && api.query.claims.signing, [ethereumAddress], {
+    transform: (option: Option<StatementKind>) => option.unwrapOr(null)
   });
-  const statementKind = api.createType('StatementKind', _statementKind);
+
   const statementSentence = statementKind ? getStatementSentence(statementKind) : '';
 
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index 7675d1101d3f..6aceccfd3101 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -117,46 +117,40 @@ export function recoverFromJSON (signatureJson: string | null): RecoveredSignatu
   }
 }
 
-export function getStatementUrl (kind?: StatementKind): string {
-  if (!kind) {
-    return '';
-  }
-
-  if (kind.isDefault) {
+export function getStatementUrl (kind?: StatementKind | null): string {
+  if (kind?.isDefault) {
     return DEFAULT_STATEMENT_URL;
-  } else {
+  } else if (kind?.isAlternative) {
     return ALTERNATIVE_STATEMENT_URL;
+  } else {
+    return '';
   }
 }
 
 // From a StatementKind, get the hardcoded actual statement to sign
-export function getStatementSentence (kind?: StatementKind): string {
+export function getStatementSentence (kind?: StatementKind | null): string {
   // FIXME Wait for actual legal statements
 
-  if (!kind) {
-    return '';
-  }
-
   const url = getStatementUrl(kind);
   let hash = '0x00';
 
-  if (kind.isDefault) {
+  if (kind?.isDefault) {
     hash = DEFAULT_STATEMENT_HASH;
-  } else {
+  } else if (kind?.isAlternative) {
     hash = ALTERNATIVE_STATEMENT_HASH;
+  } else {
+    return '';
   }
 
-  return `FIXME with the actual legal statement ${hash} ${url}`;
+  return `FIXME with the actual legal statement sentence ${hash} ${url}`;
 }
 
-export function getStatementMd (kind?: StatementKind): string {
-  if (!kind) {
-    return '';
-  }
-
-  if (kind.isDefault) {
+export function getStatementMd (kind?: StatementKind | null): string {
+  if (kind?.isDefault) {
     return statementRegular;
-  } else {
+  } else if (kind?.isAlternative) {
     return statementAlternative;
+  } else {
+    return '';
   }
 }

From 91f17de2f6376c2a7ee37ca73cc9a825cd611718 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 22 May 2020 13:18:10 +0200
Subject: [PATCH 50/74] test styling with long md

---
 packages/page-claims/src/Statement.tsx |  12 ++-
 packages/page-claims/src/md/regular.md | 139 ++++++++++++++++++++++++-
 packages/page-claims/src/md/saft.md    | 139 ++++++++++++++++++++++++-
 3 files changed, 287 insertions(+), 3 deletions(-)

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index b8cf69b158c3..e148ef282807 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -34,5 +34,15 @@ function Statement ({ className, kind }: Props): React.ReactElement<Props> | nul
 }
 
 export default React.memo(styled(Statement)`
-  
+  .statement{
+    border: 1px solid #c2c2c2;
+    background: #f2f2f2;
+    height: 15rem;
+    overflow-y: scroll;
+    padding: 1rem;
+    width: 100%;
+    margin: 1rem 0;
+    white-space: normal;
+    word-break: break-all;
+  }
 `);
diff --git a/packages/page-claims/src/md/regular.md b/packages/page-claims/src/md/regular.md
index 5e4b2ec5f8ba..9a3eec74850d 100644
--- a/packages/page-claims/src/md/regular.md
+++ b/packages/page-claims/src/md/regular.md
@@ -1 +1,138 @@
-statements - regular
\ No newline at end of file
+# Lorem Ipsum for Brackets
+An extension for [Brackets](https://github.com/adobe/brackets/) to generate
+Lorem Ipsum text automatically.
+
+### How to Install
+1. Select **Brackets > File > Extension Manager...**
+2. Search for this extension.
+3. Click on the **Install** button.
+
+### How to Use Lorem Ipsum
+For plaintext Lorem Ipsum, type `lorem` then press the `Ctrl-Shift-L` keyboard shortcut.
+The default keyboard shortcut is the same for all supported platforms.
+
+You can also add options to the `lorem` command with an underscore character
+followed by the option name. For example: `lorem_wrap40.` Multiple options
+can also be chained together. For example, typing `lorem_html_wrap40` and
+then pressing the **Tab** key will give you html formatted Lorem Ipsum text
+and a word wrap width of 40 characters.  Using an unrecognized option will
+insert an error message into the document.  Using more than one underscore
+character in a row (e.g. `lorem__html___p3`) will insert an error message
+into the document.
+
+**Note:** Options to the far right of the chain always have the highest
+priority. If two options in the chain conflict with each other, the option
+on the right will have precedence. For example, the command `lorem_nowrap_wrap40`
+will insert Lorem Ipsum text with a word wrap width of 40 characters and the
+command `lorem_wrap40_nowrap` will insert Lorem Ipsum text with no word wrapping.
+
+##### List of Current Options
+**_p[count]:** Inserts a certain number of random Lorem Ipsum paragraphs into
+the current document. The `count` option indicates how many paragraphs to insert.
+For example, `lorem_p3` will insert three paragraphs into the document.
+If the `count` option is not provided, one paragraph will be inserted.
+If the type of Lorem Ipsum text is not specified, the extension will generate
+paragraphs by default.
+
+**_s[count]:** Inserts a certain number of random Lorem Ipsum sentences into
+the current document. The `count` option indicates how many sentences to insert.
+For example, `lorem_s3` will insert three sentences into the document.
+If the `count` option is not provided, one sentence will be inserted.
+
+**_w[count]:** Inserts a certain number of random Lorem Ipsum words into the
+current document. The `count` option indicates how many words to insert.
+For example, `lorem_w40` will insert 40 random words into the document.
+If the `count` option is not provided, one word will be inserted.
+
+**_short:** Makes all sentences or paragraphs short length.
+
+**_medium:** Makes all sentences or paragraphs medium length.
+If no size options are provided, the extension will use `_medium`
+as the default option.
+
+**_long:** Makes all sentences or paragraphs long length.
+
+**_vlong:** Makes all sentences or paragraphs very long length.
+
+**_nowrap:** Inserts Lorem Ipsum text without any word wrapping.
+
+**_wrap[width]:** Word wraps Lorem Ipsum text using the specified `width`
+For example, `lorem_wrap40` will wrap the text at 40 characters. If a word wrap
+option is not provided, the extension will use `_wrap80` as the default option.
+If you want to turn word wrap off, use the `_nowrap` option.  This option has
+no effect on the `_link`, `_ol`, or `_ul` options.
+
+**_link[count]:** Inserts a certain number of random Lorem Ipsum HTML links into
+the current document. The HTML link will always point to http://www.brackets.io.
+The `count` option indicates how many links to insert. For example, `lorem_link3`
+will insert three links, separated by page breaks, into the document. If the
+`count` option is not provided, one link will be inserted. To avoid badly
+formatted HTML, the `_link` option ignores any `_wrap` options and is always
+set to `_nowrap`.
+
+**_ol[count], _ul[count]:** Inserts a random Lorem Ipsum HTML list into
+the current document. Use `_ol` for an ordered list and `_ul` for an unordered
+list. The `count` option indicates how many list items to insert. For example,
+`lorem_ol3` will insert an ordered list with three list items into the document.
+If the `count` option is not provided, a list with one item will be inserted.
+To avoid badly formatted HTML, both of these options ignore any `_wrap` options
+and are always set to `_nowrap`.
+
+**_orig[count]:** This option will insert the original Lorem Ipsum paragraph
+into the current document. The `count` option indicates how many paragraphs to
+insert. For example, `lorem_orig3` will insert three original Lorem Ipsum paragraphs
+into the document. If the `count` option is not provided, one original Lorem Ipsum
+paragraph will be inserted. Only the `_nowrap`, `_wrap`, and `_html` options will
+work with this option.
+
+**_fortune[count]:** For when you get sick of nonsensical Latin phrases, this
+option will insert random fortunes (similar to the Unix fortune program) into
+the current document.  The `count` option indicates how many fortunes to insert.
+For example, `lorem_fortune3` will insert three fortunes into the document. If
+the `count` option is not provided, one fortune will be inserted.
+
+**_html:** Wraps Lorem Ipsum text in `<p></p>` tags so it displays correctly in
+HTML. For options `_p`, `_s`, and `_fortune` each individual paragraph, sentence,
+or fortune is wrapped. For options `_w` and `_link`, the entire collection of
+words or links is wrapped. This option is not available for lists since lists
+are not inline elements.
+
+**_?, _help:** Displays help for the Lorem Ipsum extension.  If this option is used,
+all other options will be ignored and no Lorem Ipsum text will be generated.
+
+**Note:** Any option that has a number associated with it (e.g. `_p3`, `_wrap40`)
+can also be entered with the number portion in front of the option
+(i.e. `_3p`, `_40wrap`) and it will work the same way.
+
+### Extension Preferences
+
+**`brackets-lorem-ipsum.onLoremCommand`** *(string)*<br/>
+This value determines the command used for the `lorem` command. Value is any valid `lorem`
+command including the default value of `"lorem"`.
+
+**`brackets-lorem-ipsum.onNoCommand`** *(string)*<br/>
+This value determines command used when there is no command at all. Value is any valid `lorem`
+command or the default value of `"nothing"`.
+
+For more information on setting preferences see [How to Use Brackets - Preferences](https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences)
+
+### Custom Key Bindings
+
+If you would like to change the current default keyboard shortcut and add your own
+customized keyboard shortcut to generate Lorem Ipsum, set your shortcut key to the
+following command id: `lkcampbell.loremIpsum`.
+
+For example, if you want the shortcut `Alt-Shift-X` to generate Lorem Ipsum,
+type the following entry into the `overrides` section of your `keyboardmap.json`
+file:
+
+`"Alt-Shift-X": "lkcampbell.loremIpsum"`
+
+For more information on setting Custom Key Bindings see
+[User Key Bindings](https://github.com/adobe/brackets/wiki/User-Key-Bindings).
+
+### License
+MIT-licensed -- see `main.js` for details.
+
+### Compatibility
+Tested on Brackets Release 1.8 on Mac OS 10.12.3 (Sierra) and Windows 10.
diff --git a/packages/page-claims/src/md/saft.md b/packages/page-claims/src/md/saft.md
index 5e4b2ec5f8ba..9a3eec74850d 100644
--- a/packages/page-claims/src/md/saft.md
+++ b/packages/page-claims/src/md/saft.md
@@ -1 +1,138 @@
-statements - regular
\ No newline at end of file
+# Lorem Ipsum for Brackets
+An extension for [Brackets](https://github.com/adobe/brackets/) to generate
+Lorem Ipsum text automatically.
+
+### How to Install
+1. Select **Brackets > File > Extension Manager...**
+2. Search for this extension.
+3. Click on the **Install** button.
+
+### How to Use Lorem Ipsum
+For plaintext Lorem Ipsum, type `lorem` then press the `Ctrl-Shift-L` keyboard shortcut.
+The default keyboard shortcut is the same for all supported platforms.
+
+You can also add options to the `lorem` command with an underscore character
+followed by the option name. For example: `lorem_wrap40.` Multiple options
+can also be chained together. For example, typing `lorem_html_wrap40` and
+then pressing the **Tab** key will give you html formatted Lorem Ipsum text
+and a word wrap width of 40 characters.  Using an unrecognized option will
+insert an error message into the document.  Using more than one underscore
+character in a row (e.g. `lorem__html___p3`) will insert an error message
+into the document.
+
+**Note:** Options to the far right of the chain always have the highest
+priority. If two options in the chain conflict with each other, the option
+on the right will have precedence. For example, the command `lorem_nowrap_wrap40`
+will insert Lorem Ipsum text with a word wrap width of 40 characters and the
+command `lorem_wrap40_nowrap` will insert Lorem Ipsum text with no word wrapping.
+
+##### List of Current Options
+**_p[count]:** Inserts a certain number of random Lorem Ipsum paragraphs into
+the current document. The `count` option indicates how many paragraphs to insert.
+For example, `lorem_p3` will insert three paragraphs into the document.
+If the `count` option is not provided, one paragraph will be inserted.
+If the type of Lorem Ipsum text is not specified, the extension will generate
+paragraphs by default.
+
+**_s[count]:** Inserts a certain number of random Lorem Ipsum sentences into
+the current document. The `count` option indicates how many sentences to insert.
+For example, `lorem_s3` will insert three sentences into the document.
+If the `count` option is not provided, one sentence will be inserted.
+
+**_w[count]:** Inserts a certain number of random Lorem Ipsum words into the
+current document. The `count` option indicates how many words to insert.
+For example, `lorem_w40` will insert 40 random words into the document.
+If the `count` option is not provided, one word will be inserted.
+
+**_short:** Makes all sentences or paragraphs short length.
+
+**_medium:** Makes all sentences or paragraphs medium length.
+If no size options are provided, the extension will use `_medium`
+as the default option.
+
+**_long:** Makes all sentences or paragraphs long length.
+
+**_vlong:** Makes all sentences or paragraphs very long length.
+
+**_nowrap:** Inserts Lorem Ipsum text without any word wrapping.
+
+**_wrap[width]:** Word wraps Lorem Ipsum text using the specified `width`
+For example, `lorem_wrap40` will wrap the text at 40 characters. If a word wrap
+option is not provided, the extension will use `_wrap80` as the default option.
+If you want to turn word wrap off, use the `_nowrap` option.  This option has
+no effect on the `_link`, `_ol`, or `_ul` options.
+
+**_link[count]:** Inserts a certain number of random Lorem Ipsum HTML links into
+the current document. The HTML link will always point to http://www.brackets.io.
+The `count` option indicates how many links to insert. For example, `lorem_link3`
+will insert three links, separated by page breaks, into the document. If the
+`count` option is not provided, one link will be inserted. To avoid badly
+formatted HTML, the `_link` option ignores any `_wrap` options and is always
+set to `_nowrap`.
+
+**_ol[count], _ul[count]:** Inserts a random Lorem Ipsum HTML list into
+the current document. Use `_ol` for an ordered list and `_ul` for an unordered
+list. The `count` option indicates how many list items to insert. For example,
+`lorem_ol3` will insert an ordered list with three list items into the document.
+If the `count` option is not provided, a list with one item will be inserted.
+To avoid badly formatted HTML, both of these options ignore any `_wrap` options
+and are always set to `_nowrap`.
+
+**_orig[count]:** This option will insert the original Lorem Ipsum paragraph
+into the current document. The `count` option indicates how many paragraphs to
+insert. For example, `lorem_orig3` will insert three original Lorem Ipsum paragraphs
+into the document. If the `count` option is not provided, one original Lorem Ipsum
+paragraph will be inserted. Only the `_nowrap`, `_wrap`, and `_html` options will
+work with this option.
+
+**_fortune[count]:** For when you get sick of nonsensical Latin phrases, this
+option will insert random fortunes (similar to the Unix fortune program) into
+the current document.  The `count` option indicates how many fortunes to insert.
+For example, `lorem_fortune3` will insert three fortunes into the document. If
+the `count` option is not provided, one fortune will be inserted.
+
+**_html:** Wraps Lorem Ipsum text in `<p></p>` tags so it displays correctly in
+HTML. For options `_p`, `_s`, and `_fortune` each individual paragraph, sentence,
+or fortune is wrapped. For options `_w` and `_link`, the entire collection of
+words or links is wrapped. This option is not available for lists since lists
+are not inline elements.
+
+**_?, _help:** Displays help for the Lorem Ipsum extension.  If this option is used,
+all other options will be ignored and no Lorem Ipsum text will be generated.
+
+**Note:** Any option that has a number associated with it (e.g. `_p3`, `_wrap40`)
+can also be entered with the number portion in front of the option
+(i.e. `_3p`, `_40wrap`) and it will work the same way.
+
+### Extension Preferences
+
+**`brackets-lorem-ipsum.onLoremCommand`** *(string)*<br/>
+This value determines the command used for the `lorem` command. Value is any valid `lorem`
+command including the default value of `"lorem"`.
+
+**`brackets-lorem-ipsum.onNoCommand`** *(string)*<br/>
+This value determines command used when there is no command at all. Value is any valid `lorem`
+command or the default value of `"nothing"`.
+
+For more information on setting preferences see [How to Use Brackets - Preferences](https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences)
+
+### Custom Key Bindings
+
+If you would like to change the current default keyboard shortcut and add your own
+customized keyboard shortcut to generate Lorem Ipsum, set your shortcut key to the
+following command id: `lkcampbell.loremIpsum`.
+
+For example, if you want the shortcut `Alt-Shift-X` to generate Lorem Ipsum,
+type the following entry into the `overrides` section of your `keyboardmap.json`
+file:
+
+`"Alt-Shift-X": "lkcampbell.loremIpsum"`
+
+For more information on setting Custom Key Bindings see
+[User Key Bindings](https://github.com/adobe/brackets/wiki/User-Key-Bindings).
+
+### License
+MIT-licensed -- see `main.js` for details.
+
+### Compatibility
+Tested on Brackets Release 1.8 on Mac OS 10.12.3 (Sierra) and Windows 10.

From 95b847b78c36ba1e778c91eadcc9556828f761ae Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 22 May 2020 14:00:14 +0200
Subject: [PATCH 51/74] add md to jest

---
 jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jest.config.js b/jest.config.js
index 342de2be8841..fd2faa5b792b 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,7 @@ module.exports = Object.assign({}, config, {
   moduleNameMapper: {
     ...internalModules,
     '\\.(css|less)$': 'empty/object',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object'
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$': 'empty/object'
   },
   transformIgnorePatterns: [
     '<rootDir>/node_modules'

From bc65398df80b0ebfca8074ee3be3082b2c7e9811 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Fri, 22 May 2020 14:06:50 +0200
Subject: [PATCH 52/74] Update packages/page-claims/src/Statement.tsx

Co-authored-by: Amaury Martiny <amaury.martiny@protonmail.com>
---
 packages/page-claims/src/Statement.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index e148ef282807..a946e63c1cbe 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -23,7 +23,7 @@ function Statement ({ className, kind }: Props): React.ReactElement<Props> | nul
   return (
     <div className={className}>
       {t('Please read the following statement carefully, it is also available at ')}
-      <a href={statementUrl}>{statementUrl}</a>
+      <a href={statementUrl} target="_blank">{statementUrl}</a>
       <ReactMd
         className='statement'
         escapeHtml={false}

From 20b79cfd365d00832c4e97ecca6507eb12e651af Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 22 May 2020 14:07:52 +0200
Subject: [PATCH 53/74] copy text before

---
 packages/page-claims/src/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 5b7558221d34..ade186e385d7 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -240,6 +240,10 @@ function ClaimsApp (): React.ReactElement {
               <Statement
                 kind={statementKind}
               />
+              <div>
+                {t('Copy the following string and sign it with the Ethreum 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')}
+                  :
+              </div>
               <CopyToClipboard
                 onCopy={onCopy}
                 text={payload}
@@ -256,10 +260,6 @@ function ClaimsApp (): React.ReactElement {
                 text={didCopy ? t('copied') : t('click to copy')}
                 trigger='tx-payload'
               />
-              <div>
-                {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')}
-                  :
-              </div>
               <Signature
                 onChange={onChangeSignature}
                 placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}

From 4e05d2884826d9614b4049d51f841629e7dcdfa1 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Fri, 22 May 2020 14:22:09 +0200
Subject: [PATCH 54/74] lint

---
 packages/page-claims/src/Statement.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index a946e63c1cbe..b23067360f3e 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -23,7 +23,9 @@ function Statement ({ className, kind }: Props): React.ReactElement<Props> | nul
   return (
     <div className={className}>
       {t('Please read the following statement carefully, it is also available at ')}
-      <a href={statementUrl} target="_blank">{statementUrl}</a>
+      <a href={statementUrl}
+        rel='noopener noreferrer'
+        target='_blank'>{statementUrl}</a>
       <ReactMd
         className='statement'
         escapeHtml={false}

From 5fd559edd830af2a08925a333ade3704b2be0f81 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Fri, 22 May 2020 15:36:34 +0200
Subject: [PATCH 55/74] Remove EthreumAddress type to avoid unexpected
 behaviors (#2796)

* remove EthreumAddress type

* createType when needed

* revert

* typo
---
 packages/page-claims/src/index.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index ade186e385d7..5ef852e519de 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -70,7 +70,7 @@ const Signature = styled.textarea`
 
 function ClaimsApp (): React.ReactElement {
   const [didCopy, setDidCopy] = useState(false);
-  const [ethereumAddress, setEthereumAddress] = useState<EthereumAddress | null>(null);
+  const [ethereumAddress, setEthereumAddress] = useState<string | undefined | null>(null);
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);
   const [step, setStep] = useState<Step>(Step.Account);
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -81,7 +81,7 @@ function ClaimsApp (): React.ReactElement {
   // - an `EthereumAddress` when there's a preclaim
   // - null if no preclaim
   // - `PRECLAIMS_LOADING` if we're fetching the results
-  const [preclaimEthereumAddress, setPreclaimEthereumAddress] = useState<EthereumAddress | null | typeof PRECLAIMS_LOADING>(PRECLAIMS_LOADING);
+  const [preclaimEthereumAddress, setPreclaimEthereumAddress] = useState<string | null | undefined | typeof PRECLAIMS_LOADING>(PRECLAIMS_LOADING);
   const isPreclaimed = !!preclaimEthereumAddress && preclaimEthereumAddress !== PRECLAIMS_LOADING;
 
   // Everytime we change account, reset everything, and check if the accountId
@@ -102,8 +102,8 @@ function ClaimsApp (): React.ReactElement {
     api.query.claims
       .preclaims<Option<EthereumAddress>>(accountId)
       .then((preclaim): void => {
-        setEthereumAddress(preclaim.unwrapOr(null));
-        setPreclaimEthereumAddress(preclaim.unwrapOr(null));
+        setEthereumAddress(preclaim.unwrapOr(null)?.toString());
+        setPreclaimEthereumAddress(preclaim.unwrapOr(null)?.toString());
       })
       .catch((): void => setPreclaimEthereumAddress(null));
   }, [accountId, api.query.claims, api.query.claims.preclaims]);
@@ -143,16 +143,15 @@ function ClaimsApp (): React.ReactElement {
 
     const { ethereumAddress, signature } = recoverFromJSON(signatureJson);
 
-    setEthereumAddress(ethereumAddress);
+    setEthereumAddress(ethereumAddress?.toString());
     setSignature(signature);
   }, []);
 
   const onChangeEthereumAddress = useCallback((value: string) => {
     // FIXME We surely need a better check than just a trim
-    const trimmedAddress = api.createType('EthereumAddress', value.trim());
 
-    setEthereumAddress(trimmedAddress);
-  }, [api]);
+    setEthereumAddress(value.trim());
+  }, []);
 
   const onCopy = useCallback(() => {
     setDidCopy(true);
@@ -160,7 +159,8 @@ function ClaimsApp (): React.ReactElement {
 
   // If it's 1/ not preclaimed and 2/ not the old claiming process, fetch the
   // statement kind to sign.
-  const statementKind = useCall<StatementKind | null>(!isPreclaimed && !isOldClaimProcess && ethereumAddress && api.query.claims.signing, [ethereumAddress], {
+  const _ethereumAddress = ethereumAddress ? api.createType('EthereumAddress', ethereumAddress) : null;
+  const statementKind = useCall<StatementKind | null>(!isPreclaimed && !isOldClaimProcess && _ethereumAddress && api.query.claims.signing, [_ethereumAddress], {
     transform: (option: Option<StatementKind>) => option.unwrapOr(null)
   });
 

From fadf3db1ceadda6c986e23efc244b855372451f8 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Fri, 22 May 2020 17:07:48 +0200
Subject: [PATCH 56/74] Enhance UX for claim process (#2797)

* update content

* init

* comment
---
 packages/page-claims/src/Statement.tsx |   2 +-
 packages/page-claims/src/index.tsx     |  84 ++++----
 packages/page-claims/src/md/regular.md | 264 ++++++++++++-------------
 packages/page-claims/src/md/saft.md    | 162 +++------------
 4 files changed, 197 insertions(+), 315 deletions(-)

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index b23067360f3e..76a1115cf4a2 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -22,7 +22,7 @@ function Statement ({ className, kind }: Props): React.ReactElement<Props> | nul
 
   return (
     <div className={className}>
-      {t('Please read the following statement carefully, it is also available at ')}
+      {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at: ')}
       <a href={statementUrl}
         rel='noopener noreferrer'
         target='_blank'>{statementUrl}</a>
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 5ef852e519de..f96ab1b14ee3 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -235,46 +235,52 @@ function ClaimsApp (): React.ReactElement {
             )}
           {(step >= Step.Sign && !isPreclaimed) && (
             <Card>
-              <h3>{t('{{step}}. Sign with you ETH address',
-                { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
-              <Statement
-                kind={statementKind}
-              />
-              <div>
-                {t('Copy the following string and sign it with the Ethreum 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')}
-                  :
-              </div>
-              <CopyToClipboard
-                onCopy={onCopy}
-                text={payload}
-              >
-                <Payload
-                  data-for='tx-payload'
-                  data-tip
-                >
-                  {payload}
-                </Payload>
-              </CopyToClipboard>
-              <Tooltip
-                place='right'
-                text={didCopy ? t('copied') : t('click to copy')}
-                trigger='tx-payload'
-              />
-              <Signature
-                onChange={onChangeSignature}
-                placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
-                rows={10}
-              />
-              {(step === Step.Sign) && (
-                <Button.Group>
-                  <Button
-                    icon='sign-in'
-                    isDisabled={!accountId || !signature}
-                    label={t('Confirm claim')}
-                    onClick={goToStepClaim}
+              {(isOldClaimProcess || !!statementKind)
+                ? <>
+                  <h3>{t('{{step}}. Sign with you ETH address',
+                    { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
+                  {!isOldClaimProcess && (<Statement
+                    kind={statementKind}
+                  />) }
+                  <div>
+                    {t('Copy the following string and sign it with the Ethreum 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')}
+                    :
+                  </div>
+                  <CopyToClipboard
+                    onCopy={onCopy}
+                    text={payload}
+                  >
+                    <Payload
+                      data-for='tx-payload'
+                      data-tip
+                    >
+                      {payload}
+                    </Payload>
+                  </CopyToClipboard>
+                  <Tooltip
+                    place='right'
+                    text={didCopy ? t('copied') : t('click to copy')}
+                    trigger='tx-payload'
+                  />
+                  <Signature
+                    onChange={onChangeSignature}
+                    placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
+                    rows={10}
                   />
-                </Button.Group>
-              )}
+                  {(step === Step.Sign) && (
+                    <Button.Group>
+                      <Button
+                        icon='sign-in'
+                        isDisabled={!accountId || !signature}
+                        label={t('Confirm claim')}
+                        onClick={goToStepClaim}
+                      />
+                    </Button.Group>
+                  )}
+                </>
+                : <div>
+                    The Ethereum address you submitted could not be found in the genesis.
+                </div>}
             </Card>
           )}
         </Column>
diff --git a/packages/page-claims/src/md/regular.md b/packages/page-claims/src/md/regular.md
index 9a3eec74850d..774b3c4a2f3f 100644
--- a/packages/page-claims/src/md/regular.md
+++ b/packages/page-claims/src/md/regular.md
@@ -1,138 +1,126 @@
-# Lorem Ipsum for Brackets
-An extension for [Brackets](https://github.com/adobe/brackets/) to generate
-Lorem Ipsum text automatically.
-
-### How to Install
-1. Select **Brackets > File > Extension Manager...**
-2. Search for this extension.
-3. Click on the **Install** button.
-
-### How to Use Lorem Ipsum
-For plaintext Lorem Ipsum, type `lorem` then press the `Ctrl-Shift-L` keyboard shortcut.
-The default keyboard shortcut is the same for all supported platforms.
-
-You can also add options to the `lorem` command with an underscore character
-followed by the option name. For example: `lorem_wrap40.` Multiple options
-can also be chained together. For example, typing `lorem_html_wrap40` and
-then pressing the **Tab** key will give you html formatted Lorem Ipsum text
-and a word wrap width of 40 characters.  Using an unrecognized option will
-insert an error message into the document.  Using more than one underscore
-character in a row (e.g. `lorem__html___p3`) will insert an error message
-into the document.
-
-**Note:** Options to the far right of the chain always have the highest
-priority. If two options in the chain conflict with each other, the option
-on the right will have precedence. For example, the command `lorem_nowrap_wrap40`
-will insert Lorem Ipsum text with a word wrap width of 40 characters and the
-command `lorem_wrap40_nowrap` will insert Lorem Ipsum text with no word wrapping.
-
-##### List of Current Options
-**_p[count]:** Inserts a certain number of random Lorem Ipsum paragraphs into
-the current document. The `count` option indicates how many paragraphs to insert.
-For example, `lorem_p3` will insert three paragraphs into the document.
-If the `count` option is not provided, one paragraph will be inserted.
-If the type of Lorem Ipsum text is not specified, the extension will generate
-paragraphs by default.
-
-**_s[count]:** Inserts a certain number of random Lorem Ipsum sentences into
-the current document. The `count` option indicates how many sentences to insert.
-For example, `lorem_s3` will insert three sentences into the document.
-If the `count` option is not provided, one sentence will be inserted.
-
-**_w[count]:** Inserts a certain number of random Lorem Ipsum words into the
-current document. The `count` option indicates how many words to insert.
-For example, `lorem_w40` will insert 40 random words into the document.
-If the `count` option is not provided, one word will be inserted.
-
-**_short:** Makes all sentences or paragraphs short length.
-
-**_medium:** Makes all sentences or paragraphs medium length.
-If no size options are provided, the extension will use `_medium`
-as the default option.
-
-**_long:** Makes all sentences or paragraphs long length.
-
-**_vlong:** Makes all sentences or paragraphs very long length.
-
-**_nowrap:** Inserts Lorem Ipsum text without any word wrapping.
-
-**_wrap[width]:** Word wraps Lorem Ipsum text using the specified `width`
-For example, `lorem_wrap40` will wrap the text at 40 characters. If a word wrap
-option is not provided, the extension will use `_wrap80` as the default option.
-If you want to turn word wrap off, use the `_nowrap` option.  This option has
-no effect on the `_link`, `_ol`, or `_ul` options.
-
-**_link[count]:** Inserts a certain number of random Lorem Ipsum HTML links into
-the current document. The HTML link will always point to http://www.brackets.io.
-The `count` option indicates how many links to insert. For example, `lorem_link3`
-will insert three links, separated by page breaks, into the document. If the
-`count` option is not provided, one link will be inserted. To avoid badly
-formatted HTML, the `_link` option ignores any `_wrap` options and is always
-set to `_nowrap`.
-
-**_ol[count], _ul[count]:** Inserts a random Lorem Ipsum HTML list into
-the current document. Use `_ol` for an ordered list and `_ul` for an unordered
-list. The `count` option indicates how many list items to insert. For example,
-`lorem_ol3` will insert an ordered list with three list items into the document.
-If the `count` option is not provided, a list with one item will be inserted.
-To avoid badly formatted HTML, both of these options ignore any `_wrap` options
-and are always set to `_nowrap`.
-
-**_orig[count]:** This option will insert the original Lorem Ipsum paragraph
-into the current document. The `count` option indicates how many paragraphs to
-insert. For example, `lorem_orig3` will insert three original Lorem Ipsum paragraphs
-into the document. If the `count` option is not provided, one original Lorem Ipsum
-paragraph will be inserted. Only the `_nowrap`, `_wrap`, and `_html` options will
-work with this option.
-
-**_fortune[count]:** For when you get sick of nonsensical Latin phrases, this
-option will insert random fortunes (similar to the Unix fortune program) into
-the current document.  The `count` option indicates how many fortunes to insert.
-For example, `lorem_fortune3` will insert three fortunes into the document. If
-the `count` option is not provided, one fortune will be inserted.
-
-**_html:** Wraps Lorem Ipsum text in `<p></p>` tags so it displays correctly in
-HTML. For options `_p`, `_s`, and `_fortune` each individual paragraph, sentence,
-or fortune is wrapped. For options `_w` and `_link`, the entire collection of
-words or links is wrapped. This option is not available for lists since lists
-are not inline elements.
-
-**_?, _help:** Displays help for the Lorem Ipsum extension.  If this option is used,
-all other options will be ignored and no Lorem Ipsum text will be generated.
-
-**Note:** Any option that has a number associated with it (e.g. `_p3`, `_wrap40`)
-can also be entered with the number portion in front of the option
-(i.e. `_3p`, `_40wrap`) and it will work the same way.
-
-### Extension Preferences
-
-**`brackets-lorem-ipsum.onLoremCommand`** *(string)*<br/>
-This value determines the command used for the `lorem` command. Value is any valid `lorem`
-command including the default value of `"lorem"`.
-
-**`brackets-lorem-ipsum.onNoCommand`** *(string)*<br/>
-This value determines command used when there is no command at all. Value is any valid `lorem`
-command or the default value of `"nothing"`.
-
-For more information on setting preferences see [How to Use Brackets - Preferences](https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences)
-
-### Custom Key Bindings
-
-If you would like to change the current default keyboard shortcut and add your own
-customized keyboard shortcut to generate Lorem Ipsum, set your shortcut key to the
-following command id: `lkcampbell.loremIpsum`.
-
-For example, if you want the shortcut `Alt-Shift-X` to generate Lorem Ipsum,
-type the following entry into the `overrides` section of your `keyboardmap.json`
-file:
-
-`"Alt-Shift-X": "lkcampbell.loremIpsum"`
-
-For more information on setting Custom Key Bindings see
-[User Key Bindings](https://github.com/adobe/brackets/wiki/User-Key-Bindings).
-
-### License
-MIT-licensed -- see `main.js` for details.
-
-### Compatibility
-Tested on Brackets Release 1.8 on Mac OS 10.12.3 (Sierra) and Windows 10.
+Statement
+  
+  Please read these terms and conditions carefully.
+By submitting this statement, you are deemed to have accepted these Terms
+and Conditions. If you do not agree to these terms, please refrain from
+accessing or proceeding.
+By submitting this statement signed with the private key of either (i) the Ethereum
+address to which future DOTs would be allocated pursuant to a signed DOT allocation
+agreement made by and between the Web 3.0 Technologies Foundation (the
+“Foundation”) and the Contributor (as defined below) (the “DOT Allocation
+Agreement”), or (ii) the Polkadot address corresponding to the Ethereum address to
+which future DOTs would be allocated pursuant to the DOT Allocation Agreement (the
+applicable submitted key described in clauses (i) or (ii), the “Key”), and for good and
+valuable consideration, the receipt and sufficiency of which are hereby acknowledged,
+and with the intent to be legally bound hereby, the natural person or legal entity
+submitting the Key (the “Contributor”) hereby represents, warrants and covenants, in
+each case, as applicable, to, and for the benefit of, the Foundation (each, a
+“Certification” and, collectively, the “Certifications”) that:
+
+- if the Contributor is a legal entity:
+
+  - the Contributor (i) is duly organized (or applicable legal equivalent),
+    validly existing and in good standing (or applicable legal equivalent)
+    under the laws of its jurisdiction or organization (or applicable legal
+    equivalent), and (ii) has all requisite organizational power and authority
+    (x) to make each of the Certifications, (ii) to perform each of its
+    obligations hereunder and under the DOT Allocation Agreement, (iii) to
+    submit the Key and (iv) to consummate all of the transactions
+    contemplated by any of the foregoing clauses (i) through and including
+    (iii) to be consummated by it;
+
+  - none of (i) the making by the Contributor of each of the Certifications, (ii)
+    the performance by the Contributor of each of its obligations hereunder
+    and under the DOT Allocation Agreement, (iii) the submission by the
+    Contributor of the Key or (iv) the consummation of any of the
+    transactions contemplated by any of the foregoing clauses (i) through
+    and including (iii) to be consummated by it, will conflict with or violate (x)
+    any of the terms of any organizational document of the Contributor, or
+    (y) any applicable law of the Contributor’s jurisdiction of organization;
+
+  - each of (i) the making by the Contributor of each of the Certifications, (ii)
+    the performance by the Contributor of each of its obligations hereunder
+    and under the DOT Allocation Agreement, (iii) the submission the
+    Contributor of the Key or (iv) the consummation of any of the
+    transactions contemplated by any of the foregoing clauses (i) through
+    and including (iii), has been duly authorized and approved by all requisite
+    organizational action of the Contributor, such authorization remains in
+    full force and effect on and as of the date hereof;
+
+- the Contributor is the original purchaser of DOT allocations under the DOT
+Allocation Agreement;
+
+- the Contributor continues to and will continue to own both the Ethereum
+address and the Polkadot address used to create the Polkadot address;
+
+- the Contributor is a party to and is legally bound by the DOT Allocation
+Agreement and any terms or agreements incorporated by reference therein and
+agrees that this Certification is valid, legally binding and enforceable against
+the Contributor;
+
+- the Contributor is neither a citizen, resident nor tax resident of the United States
+of America (hereinafter referred to as the “U.S.”) or otherwise a “U.S. person”
+(as defined in Rule 902 of Regulation S under the U.S. Securities Act of 1933,
+as amended (the “U.S. Securities Act”)), and the Contributor is not otherwise
+present or located in the U.S. on the date hereof;
+
+- the Contributor understands that neither the DOT Allocation Agreement nor any
+DOTs to be allocated thereunder have been, or will be, registered under the
+U.S. Securities Act, and that each of the DOT Allocation Agreement and the
+DOTs to be allocated thereunder constitute securities under the U.S. Securities
+Act;
+
+- the Contributor purchased DOT allocations pursuant to the DOT Allocation
+Agreement solely for the Contributor’s own benefit and account, for the
+purposes of personal consumption and utilization of DOTs on the Polkadot
+Network and not for any speculative purpose or with an expectation of profit,
+and not with a view to, or for resale in connection with, a public offering or other
+distribution of DOTs, whether in exchange for other any other digital asset, any
+currency, any security or otherwise, and all of the foregoing remains true,
+accurate and complete on and as of the date hereof;
+
+- (i) the documents provided by the Contributor to the Foundation to verify the
+identity of the Contributor for the purpose of the completion by the Foundation,
+or its duly authorized agent or designee, of know-your-customer (“KYC”) and
+anti-money laundering (“AML”) checks conducted in accordance with
+applicable law at the time of the Contributor’s entry into the DOT Allocation
+Agreement (collectively, the “Original Identity Verification Documents”) remain
+true and accurate in all respects on and as of the date hereof, or (ii) if any
+Original Identity Verification Document is not true and accurate on and as of
+the date hereof, the Contributor has submitted to the Foundation replacement
+identity verification documentation (collectively, the “Replacement Identity
+Verification Documents,” and, together with the Original Identity Verification
+Documents, collectively, the “Identity Verification Documentation”), in each
+case, that are (x) true and accurate on and as of the date hereof and (y)
+sufficient (as reasonably determined by the Foundation) to permit the
+Foundation or its agent or designee to conduct KYC and AML checks;
+
+- the Contributor hereby authorizes the Foundation, or its duly authorized agent
+or designee, to use the Identity Verification Documentation to conduct such new
+KYC and AML checks as may be deemed by the Foundation to be necessary
+or advisable in order to comply with applicable law;
+
+- the Contributor understands and agrees that the Foundation (i) will not honor
+any sale or other transfers of any DOT allocation agreements (including the
+DOT Allocation Agreement) or any allocations for future DOTs thereunder, (ii)
+is relying upon the Certifications (without independent investigation) to comply
+with applicable law and (iii) the inaccuracy or incompleteness of any of the
+Certifications will result in material financial, reputational and legal harm to the
+Foundation and the Polkadot Network; and
+
+- each of the representations and warranties made by it in or otherwise pursuant
+to the DOT Allocation Agreement remain true, correct and complete on and as
+of the date hereof (except, in each case, to the extent that any such
+representation or warranty expressly relates to an earlier date, in which case
+such representation or warranty shall be true, correct and complete on and as
+of such earlier date).
+
+- Applicable law and jurisdiction: These terms and conditions shall be governed
+by and construed in accordance with the substantive laws of Switzerland
+without any reference to its conflict of law provisions. The provisions of the
+United Nation Convention on contracts for the International Sale of Goods
+(CISG) shall not apply.
+
+- Any disputes arising out of or in connection with these terms and conditions
+and contracts entered into thereunder shall be submitted to the sole and
+exclusive jurisdiction of the courts of the city of Zug, Switzerland.
diff --git a/packages/page-claims/src/md/saft.md b/packages/page-claims/src/md/saft.md
index 9a3eec74850d..de52144c452a 100644
--- a/packages/page-claims/src/md/saft.md
+++ b/packages/page-claims/src/md/saft.md
@@ -1,138 +1,26 @@
-# Lorem Ipsum for Brackets
-An extension for [Brackets](https://github.com/adobe/brackets/) to generate
-Lorem Ipsum text automatically.
+SAFT statement
+
+Please read these terms and conditions carefully.
+
+By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding.
+
+By submitting this statement signed with the private key of either (i) the Ethereum address to which future DOTs would be allocated pursuant to a signed Simple Agreement for Future Tokens (the “SAFT”) made by and between the Web 3.0 Technologies Foundation (the “Foundation”) and the Contributor (as defined below) (the “DOT Allocation Agreement”), or (ii) the Polkadot address corresponding to the Ethereum address to which future DOTs would be allocated pursuant to the SAFT (the applicable submitted key described in clauses (i) or (ii), the “Key”), and for good and valuable consideration, the receipt and sufficiency of which are hereby acknowledged, and with the intent to be legally bound hereby, the natural person or legal entity submitting the Key (the “Contributor”) hereby represents, warrants and covenants, in each case, as applicable, to, and for the benefit of, the Foundation (each, a “Certification” and, collectively, the “Certifications”) that:
+
+    if the Contributor is a legal entity:
+        the Contributor (i) is duly organized (or applicable legal equivalent), validly existing and in good standing (or applicable legal equivalent) under the laws of its jurisdiction or organization (or applicable legal equivalent), and (ii) has all requisite organizational power and authority (x) to make each of the Certifications, (ii) to perform each of its obligations under the SAFT, (iii) to submit the Key and (iv) to consummate all of the transactions contemplated by any of the foregoing clauses (i) through and including (iii) to be consummated by it;
+        none of (i) the making by the Contributor of each of the Certifications, (ii) the performance by the Contributor of each of its obligations hereunder and under the SAFT, (iii) the submission by the Contributor of the Key or (iv) the consummation of any of the transactions contemplated by any of the foregoing clauses (i) through and including (iii) to be consummated by it, will conflict with or violate (x) any of the terms of any organizational document of the Contributor, or (y) any applicable law of the Contributor’s jurisdiction of organization;
+        each of (i) the making by the Contributor of each of the Certifications, (ii) the performance by the Contributor of each of its obligations hereunder and under the SAFT, (iii) the submission the Contributor of the Key or (iv) the consummation of any of the transactions contemplated by any of the foregoing clauses (i) through and including (iii), has been duly authorized and approved by all requisite organizational action of the Contributor, such authorization remains in full force and effect on and as of the date hereof;
+    the Contributor is the original purchaser of DOT allocations under the SAFT;
+    the Contributor continues to and will continue to own both the Ethereum address and the Polkadot address used to create the Polkadot address;
+    the Contributor is a party to and is legally bound by the SAFT and any terms or agreements incorporated by reference therein and agrees that this Certification is valid, legally binding and enforceable against the Contributor;
+    the Contributor is an “accredited investor” (as defined in Rule 501 of Regulation D under the U.S. Securities Act of 1933, as amended (the “U.S. Securities Act”)), on and as of the date hereof;
+    the Contributor understands that neither the SAFT nor any DOTs to be allocated thereunder have been, or will be, registered under the U.S. Securities Act, and that each of the SAFT and the DOTs to be allocated thereunder constitute securities under the U.S. Securities Act;
+    the Contributor purchased DOT allocations pursuant to the SAFT solely for the Contributor’s own benefit and account, for the purposes of personal consumption and utilization of DOTs on the Polkadot Network and not for any speculative purpose or with an expectation of profit, and not with a view to, or for resale in connection with, a public offering or other distribution of DOTs, whether in exchange for other any other digital asset, any currency, any security or otherwise, and all of the foregoing remains true, accurate and complete on and as of the date hereof;
+    the Contributor purchased DOT allocations solely for its own benefit and account, including through the consumption and utilization of DOTs on the Polkadot Network, and not with a view to, or for resale in connection with, a public offering or other distribution of DOTs, whether in exchange for other any other digital asset, any currency, any security or otherwise;
+    (i) the documents provided by the Contributor to the Foundation to verify the identity of the Contributor for the purpose of the completion by the Foundation, or its duly authorized agent or designee, of know-your-customer (“KYC”) and anti-money laundering (“AML”) checks conducted in accordance with applicable law at the time of the Contributor’s entry into the DOT Allocation Agreement (collectively, the “Original Identity Verification Documents”) remain true and accurate in all respects on and as of the date hereof, or (ii) if any Original Identity Verification Document is not true and accurate on and as of the date hereof, the Contributor has submitted to the Foundation replacement identity verification documentation (collectively, the “Replacement Identity Verification Documents,” and, together with the Original Identity Verification Documents, collectively, the “Identity Verification Documentation”), in each case, that are (x) true and accurate on and as of the date hereof and (y) sufficient (as reasonably determined by the Foundation) to permit the Foundation or its agent or designee to conduct KYC and AML checks;
+    the Contributor hereby authorizes the Foundation, or its duly authorized agent or designee, to use the Identity Verification Documentation to conduct such new KYC and AML checks as may be deemed by the Foundation to be necessary or advisable in order to comply with applicable law;
+    the Contributor understands and agrees that the Foundation (i) will not honor any sale or other transfers of any DOT allocation agreements (including the SAFT) or any allocations for future DOTs thereunder, (ii) is relying upon the Certifications (without independent investigation) to comply with applicable law and (iii) the inaccuracy or incompleteness of any of the Certifications will result in material financial, reputational and legal harm to the Foundation and the Polkadot Network; and
+    the Contributor hereby certifies that each of the representations and warranties made by it in or otherwise pursuant to the SAFT remains true, correct and complete on and as of the date hereof (except, in each case, to the extent that any such representation or warranty expressly relates to an earlier date, in which case such representation or warranty shall be true, correct and complete on and as of such earlier date).
+    Applicable law and jurisdiction: These terms and conditions shall be governed by and construed in accordance with the substantive laws of Switzerland without any reference to its conflict of law provisions. The provisions of the United Nation Convention on contracts for the International Sale of Goods (CISG) shall not apply.
+    Any disputes arising out of or in connection with these terms and conditions and contracts entered into thereunder shall be submitted to the sole and exclusive jurisdiction of the courts of the city of Zug, Switzerland.
 
-### How to Install
-1. Select **Brackets > File > Extension Manager...**
-2. Search for this extension.
-3. Click on the **Install** button.
-
-### How to Use Lorem Ipsum
-For plaintext Lorem Ipsum, type `lorem` then press the `Ctrl-Shift-L` keyboard shortcut.
-The default keyboard shortcut is the same for all supported platforms.
-
-You can also add options to the `lorem` command with an underscore character
-followed by the option name. For example: `lorem_wrap40.` Multiple options
-can also be chained together. For example, typing `lorem_html_wrap40` and
-then pressing the **Tab** key will give you html formatted Lorem Ipsum text
-and a word wrap width of 40 characters.  Using an unrecognized option will
-insert an error message into the document.  Using more than one underscore
-character in a row (e.g. `lorem__html___p3`) will insert an error message
-into the document.
-
-**Note:** Options to the far right of the chain always have the highest
-priority. If two options in the chain conflict with each other, the option
-on the right will have precedence. For example, the command `lorem_nowrap_wrap40`
-will insert Lorem Ipsum text with a word wrap width of 40 characters and the
-command `lorem_wrap40_nowrap` will insert Lorem Ipsum text with no word wrapping.
-
-##### List of Current Options
-**_p[count]:** Inserts a certain number of random Lorem Ipsum paragraphs into
-the current document. The `count` option indicates how many paragraphs to insert.
-For example, `lorem_p3` will insert three paragraphs into the document.
-If the `count` option is not provided, one paragraph will be inserted.
-If the type of Lorem Ipsum text is not specified, the extension will generate
-paragraphs by default.
-
-**_s[count]:** Inserts a certain number of random Lorem Ipsum sentences into
-the current document. The `count` option indicates how many sentences to insert.
-For example, `lorem_s3` will insert three sentences into the document.
-If the `count` option is not provided, one sentence will be inserted.
-
-**_w[count]:** Inserts a certain number of random Lorem Ipsum words into the
-current document. The `count` option indicates how many words to insert.
-For example, `lorem_w40` will insert 40 random words into the document.
-If the `count` option is not provided, one word will be inserted.
-
-**_short:** Makes all sentences or paragraphs short length.
-
-**_medium:** Makes all sentences or paragraphs medium length.
-If no size options are provided, the extension will use `_medium`
-as the default option.
-
-**_long:** Makes all sentences or paragraphs long length.
-
-**_vlong:** Makes all sentences or paragraphs very long length.
-
-**_nowrap:** Inserts Lorem Ipsum text without any word wrapping.
-
-**_wrap[width]:** Word wraps Lorem Ipsum text using the specified `width`
-For example, `lorem_wrap40` will wrap the text at 40 characters. If a word wrap
-option is not provided, the extension will use `_wrap80` as the default option.
-If you want to turn word wrap off, use the `_nowrap` option.  This option has
-no effect on the `_link`, `_ol`, or `_ul` options.
-
-**_link[count]:** Inserts a certain number of random Lorem Ipsum HTML links into
-the current document. The HTML link will always point to http://www.brackets.io.
-The `count` option indicates how many links to insert. For example, `lorem_link3`
-will insert three links, separated by page breaks, into the document. If the
-`count` option is not provided, one link will be inserted. To avoid badly
-formatted HTML, the `_link` option ignores any `_wrap` options and is always
-set to `_nowrap`.
-
-**_ol[count], _ul[count]:** Inserts a random Lorem Ipsum HTML list into
-the current document. Use `_ol` for an ordered list and `_ul` for an unordered
-list. The `count` option indicates how many list items to insert. For example,
-`lorem_ol3` will insert an ordered list with three list items into the document.
-If the `count` option is not provided, a list with one item will be inserted.
-To avoid badly formatted HTML, both of these options ignore any `_wrap` options
-and are always set to `_nowrap`.
-
-**_orig[count]:** This option will insert the original Lorem Ipsum paragraph
-into the current document. The `count` option indicates how many paragraphs to
-insert. For example, `lorem_orig3` will insert three original Lorem Ipsum paragraphs
-into the document. If the `count` option is not provided, one original Lorem Ipsum
-paragraph will be inserted. Only the `_nowrap`, `_wrap`, and `_html` options will
-work with this option.
-
-**_fortune[count]:** For when you get sick of nonsensical Latin phrases, this
-option will insert random fortunes (similar to the Unix fortune program) into
-the current document.  The `count` option indicates how many fortunes to insert.
-For example, `lorem_fortune3` will insert three fortunes into the document. If
-the `count` option is not provided, one fortune will be inserted.
-
-**_html:** Wraps Lorem Ipsum text in `<p></p>` tags so it displays correctly in
-HTML. For options `_p`, `_s`, and `_fortune` each individual paragraph, sentence,
-or fortune is wrapped. For options `_w` and `_link`, the entire collection of
-words or links is wrapped. This option is not available for lists since lists
-are not inline elements.
-
-**_?, _help:** Displays help for the Lorem Ipsum extension.  If this option is used,
-all other options will be ignored and no Lorem Ipsum text will be generated.
-
-**Note:** Any option that has a number associated with it (e.g. `_p3`, `_wrap40`)
-can also be entered with the number portion in front of the option
-(i.e. `_3p`, `_40wrap`) and it will work the same way.
-
-### Extension Preferences
-
-**`brackets-lorem-ipsum.onLoremCommand`** *(string)*<br/>
-This value determines the command used for the `lorem` command. Value is any valid `lorem`
-command including the default value of `"lorem"`.
-
-**`brackets-lorem-ipsum.onNoCommand`** *(string)*<br/>
-This value determines command used when there is no command at all. Value is any valid `lorem`
-command or the default value of `"nothing"`.
-
-For more information on setting preferences see [How to Use Brackets - Preferences](https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences)
-
-### Custom Key Bindings
-
-If you would like to change the current default keyboard shortcut and add your own
-customized keyboard shortcut to generate Lorem Ipsum, set your shortcut key to the
-following command id: `lkcampbell.loremIpsum`.
-
-For example, if you want the shortcut `Alt-Shift-X` to generate Lorem Ipsum,
-type the following entry into the `overrides` section of your `keyboardmap.json`
-file:
-
-`"Alt-Shift-X": "lkcampbell.loremIpsum"`
-
-For more information on setting Custom Key Bindings see
-[User Key Bindings](https://github.com/adobe/brackets/wiki/User-Key-Bindings).
-
-### License
-MIT-licensed -- see `main.js` for details.
-
-### Compatibility
-Tested on Brackets Release 1.8 on Mac OS 10.12.3 (Sierra) and Windows 10.

From 3c2a0f7cb4723062314d769fe58441b8a5bdfad4 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Fri, 22 May 2020 18:16:19 +0200
Subject: [PATCH 57/74] Add HTML components for statements (#2798)

* Add HTML components for statements

* Update packages/page-claims/src/statements/saft.tsx
---
 packages/page-claims/src/Statement.tsx        |  15 +-
 packages/page-claims/src/md/regular.md        | 126 ---------------
 packages/page-claims/src/md/saft.md           |  26 ---
 .../page-claims/src/statements/regular.tsx    | 144 +++++++++++++++++
 packages/page-claims/src/statements/saft.tsx  | 148 ++++++++++++++++++
 packages/page-claims/src/util.ts              |  17 +-
 6 files changed, 301 insertions(+), 175 deletions(-)
 delete mode 100644 packages/page-claims/src/md/regular.md
 delete mode 100644 packages/page-claims/src/md/saft.md
 create mode 100644 packages/page-claims/src/statements/regular.tsx
 create mode 100644 packages/page-claims/src/statements/saft.tsx

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index 76a1115cf4a2..919326a3ee30 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -5,13 +5,14 @@
 import { StatementKind } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import ReactMd from 'react-markdown';
 import styled from 'styled-components';
 
-import { getStatementMd, getStatementUrl } from './util';
+import RegularStatement from './statements/regular';
+import SaftStatement from './statements/saft';
 import { useTranslation } from './translate';
+import { getStatementUrl } from './util';
 
-export interface Props{
+export interface Props {
   className?: string;
   kind: StatementKind;
 }
@@ -26,11 +27,9 @@ function Statement ({ className, kind }: Props): React.ReactElement<Props> | nul
       <a href={statementUrl}
         rel='noopener noreferrer'
         target='_blank'>{statementUrl}</a>
-      <ReactMd
-        className='statement'
-        escapeHtml={false}
-        source={getStatementMd(kind)}
-      />
+      <div className='statement'>
+        {kind.isDefault ? <RegularStatement /> : <SaftStatement />}
+      </div>
     </div>
   );
 }
diff --git a/packages/page-claims/src/md/regular.md b/packages/page-claims/src/md/regular.md
deleted file mode 100644
index 774b3c4a2f3f..000000000000
--- a/packages/page-claims/src/md/regular.md
+++ /dev/null
@@ -1,126 +0,0 @@
-Statement
-  
-  Please read these terms and conditions carefully.
-By submitting this statement, you are deemed to have accepted these Terms
-and Conditions. If you do not agree to these terms, please refrain from
-accessing or proceeding.
-By submitting this statement signed with the private key of either (i) the Ethereum
-address to which future DOTs would be allocated pursuant to a signed DOT allocation
-agreement made by and between the Web 3.0 Technologies Foundation (the
-“Foundation”) and the Contributor (as defined below) (the “DOT Allocation
-Agreement”), or (ii) the Polkadot address corresponding to the Ethereum address to
-which future DOTs would be allocated pursuant to the DOT Allocation Agreement (the
-applicable submitted key described in clauses (i) or (ii), the “Key”), and for good and
-valuable consideration, the receipt and sufficiency of which are hereby acknowledged,
-and with the intent to be legally bound hereby, the natural person or legal entity
-submitting the Key (the “Contributor”) hereby represents, warrants and covenants, in
-each case, as applicable, to, and for the benefit of, the Foundation (each, a
-“Certification” and, collectively, the “Certifications”) that:
-
-- if the Contributor is a legal entity:
-
-  - the Contributor (i) is duly organized (or applicable legal equivalent),
-    validly existing and in good standing (or applicable legal equivalent)
-    under the laws of its jurisdiction or organization (or applicable legal
-    equivalent), and (ii) has all requisite organizational power and authority
-    (x) to make each of the Certifications, (ii) to perform each of its
-    obligations hereunder and under the DOT Allocation Agreement, (iii) to
-    submit the Key and (iv) to consummate all of the transactions
-    contemplated by any of the foregoing clauses (i) through and including
-    (iii) to be consummated by it;
-
-  - none of (i) the making by the Contributor of each of the Certifications, (ii)
-    the performance by the Contributor of each of its obligations hereunder
-    and under the DOT Allocation Agreement, (iii) the submission by the
-    Contributor of the Key or (iv) the consummation of any of the
-    transactions contemplated by any of the foregoing clauses (i) through
-    and including (iii) to be consummated by it, will conflict with or violate (x)
-    any of the terms of any organizational document of the Contributor, or
-    (y) any applicable law of the Contributor’s jurisdiction of organization;
-
-  - each of (i) the making by the Contributor of each of the Certifications, (ii)
-    the performance by the Contributor of each of its obligations hereunder
-    and under the DOT Allocation Agreement, (iii) the submission the
-    Contributor of the Key or (iv) the consummation of any of the
-    transactions contemplated by any of the foregoing clauses (i) through
-    and including (iii), has been duly authorized and approved by all requisite
-    organizational action of the Contributor, such authorization remains in
-    full force and effect on and as of the date hereof;
-
-- the Contributor is the original purchaser of DOT allocations under the DOT
-Allocation Agreement;
-
-- the Contributor continues to and will continue to own both the Ethereum
-address and the Polkadot address used to create the Polkadot address;
-
-- the Contributor is a party to and is legally bound by the DOT Allocation
-Agreement and any terms or agreements incorporated by reference therein and
-agrees that this Certification is valid, legally binding and enforceable against
-the Contributor;
-
-- the Contributor is neither a citizen, resident nor tax resident of the United States
-of America (hereinafter referred to as the “U.S.”) or otherwise a “U.S. person”
-(as defined in Rule 902 of Regulation S under the U.S. Securities Act of 1933,
-as amended (the “U.S. Securities Act”)), and the Contributor is not otherwise
-present or located in the U.S. on the date hereof;
-
-- the Contributor understands that neither the DOT Allocation Agreement nor any
-DOTs to be allocated thereunder have been, or will be, registered under the
-U.S. Securities Act, and that each of the DOT Allocation Agreement and the
-DOTs to be allocated thereunder constitute securities under the U.S. Securities
-Act;
-
-- the Contributor purchased DOT allocations pursuant to the DOT Allocation
-Agreement solely for the Contributor’s own benefit and account, for the
-purposes of personal consumption and utilization of DOTs on the Polkadot
-Network and not for any speculative purpose or with an expectation of profit,
-and not with a view to, or for resale in connection with, a public offering or other
-distribution of DOTs, whether in exchange for other any other digital asset, any
-currency, any security or otherwise, and all of the foregoing remains true,
-accurate and complete on and as of the date hereof;
-
-- (i) the documents provided by the Contributor to the Foundation to verify the
-identity of the Contributor for the purpose of the completion by the Foundation,
-or its duly authorized agent or designee, of know-your-customer (“KYC”) and
-anti-money laundering (“AML”) checks conducted in accordance with
-applicable law at the time of the Contributor’s entry into the DOT Allocation
-Agreement (collectively, the “Original Identity Verification Documents”) remain
-true and accurate in all respects on and as of the date hereof, or (ii) if any
-Original Identity Verification Document is not true and accurate on and as of
-the date hereof, the Contributor has submitted to the Foundation replacement
-identity verification documentation (collectively, the “Replacement Identity
-Verification Documents,” and, together with the Original Identity Verification
-Documents, collectively, the “Identity Verification Documentation”), in each
-case, that are (x) true and accurate on and as of the date hereof and (y)
-sufficient (as reasonably determined by the Foundation) to permit the
-Foundation or its agent or designee to conduct KYC and AML checks;
-
-- the Contributor hereby authorizes the Foundation, or its duly authorized agent
-or designee, to use the Identity Verification Documentation to conduct such new
-KYC and AML checks as may be deemed by the Foundation to be necessary
-or advisable in order to comply with applicable law;
-
-- the Contributor understands and agrees that the Foundation (i) will not honor
-any sale or other transfers of any DOT allocation agreements (including the
-DOT Allocation Agreement) or any allocations for future DOTs thereunder, (ii)
-is relying upon the Certifications (without independent investigation) to comply
-with applicable law and (iii) the inaccuracy or incompleteness of any of the
-Certifications will result in material financial, reputational and legal harm to the
-Foundation and the Polkadot Network; and
-
-- each of the representations and warranties made by it in or otherwise pursuant
-to the DOT Allocation Agreement remain true, correct and complete on and as
-of the date hereof (except, in each case, to the extent that any such
-representation or warranty expressly relates to an earlier date, in which case
-such representation or warranty shall be true, correct and complete on and as
-of such earlier date).
-
-- Applicable law and jurisdiction: These terms and conditions shall be governed
-by and construed in accordance with the substantive laws of Switzerland
-without any reference to its conflict of law provisions. The provisions of the
-United Nation Convention on contracts for the International Sale of Goods
-(CISG) shall not apply.
-
-- Any disputes arising out of or in connection with these terms and conditions
-and contracts entered into thereunder shall be submitted to the sole and
-exclusive jurisdiction of the courts of the city of Zug, Switzerland.
diff --git a/packages/page-claims/src/md/saft.md b/packages/page-claims/src/md/saft.md
deleted file mode 100644
index de52144c452a..000000000000
--- a/packages/page-claims/src/md/saft.md
+++ /dev/null
@@ -1,26 +0,0 @@
-SAFT statement
-
-Please read these terms and conditions carefully.
-
-By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding.
-
-By submitting this statement signed with the private key of either (i) the Ethereum address to which future DOTs would be allocated pursuant to a signed Simple Agreement for Future Tokens (the “SAFT”) made by and between the Web 3.0 Technologies Foundation (the “Foundation”) and the Contributor (as defined below) (the “DOT Allocation Agreement”), or (ii) the Polkadot address corresponding to the Ethereum address to which future DOTs would be allocated pursuant to the SAFT (the applicable submitted key described in clauses (i) or (ii), the “Key”), and for good and valuable consideration, the receipt and sufficiency of which are hereby acknowledged, and with the intent to be legally bound hereby, the natural person or legal entity submitting the Key (the “Contributor”) hereby represents, warrants and covenants, in each case, as applicable, to, and for the benefit of, the Foundation (each, a “Certification” and, collectively, the “Certifications”) that:
-
-    if the Contributor is a legal entity:
-        the Contributor (i) is duly organized (or applicable legal equivalent), validly existing and in good standing (or applicable legal equivalent) under the laws of its jurisdiction or organization (or applicable legal equivalent), and (ii) has all requisite organizational power and authority (x) to make each of the Certifications, (ii) to perform each of its obligations under the SAFT, (iii) to submit the Key and (iv) to consummate all of the transactions contemplated by any of the foregoing clauses (i) through and including (iii) to be consummated by it;
-        none of (i) the making by the Contributor of each of the Certifications, (ii) the performance by the Contributor of each of its obligations hereunder and under the SAFT, (iii) the submission by the Contributor of the Key or (iv) the consummation of any of the transactions contemplated by any of the foregoing clauses (i) through and including (iii) to be consummated by it, will conflict with or violate (x) any of the terms of any organizational document of the Contributor, or (y) any applicable law of the Contributor’s jurisdiction of organization;
-        each of (i) the making by the Contributor of each of the Certifications, (ii) the performance by the Contributor of each of its obligations hereunder and under the SAFT, (iii) the submission the Contributor of the Key or (iv) the consummation of any of the transactions contemplated by any of the foregoing clauses (i) through and including (iii), has been duly authorized and approved by all requisite organizational action of the Contributor, such authorization remains in full force and effect on and as of the date hereof;
-    the Contributor is the original purchaser of DOT allocations under the SAFT;
-    the Contributor continues to and will continue to own both the Ethereum address and the Polkadot address used to create the Polkadot address;
-    the Contributor is a party to and is legally bound by the SAFT and any terms or agreements incorporated by reference therein and agrees that this Certification is valid, legally binding and enforceable against the Contributor;
-    the Contributor is an “accredited investor” (as defined in Rule 501 of Regulation D under the U.S. Securities Act of 1933, as amended (the “U.S. Securities Act”)), on and as of the date hereof;
-    the Contributor understands that neither the SAFT nor any DOTs to be allocated thereunder have been, or will be, registered under the U.S. Securities Act, and that each of the SAFT and the DOTs to be allocated thereunder constitute securities under the U.S. Securities Act;
-    the Contributor purchased DOT allocations pursuant to the SAFT solely for the Contributor’s own benefit and account, for the purposes of personal consumption and utilization of DOTs on the Polkadot Network and not for any speculative purpose or with an expectation of profit, and not with a view to, or for resale in connection with, a public offering or other distribution of DOTs, whether in exchange for other any other digital asset, any currency, any security or otherwise, and all of the foregoing remains true, accurate and complete on and as of the date hereof;
-    the Contributor purchased DOT allocations solely for its own benefit and account, including through the consumption and utilization of DOTs on the Polkadot Network, and not with a view to, or for resale in connection with, a public offering or other distribution of DOTs, whether in exchange for other any other digital asset, any currency, any security or otherwise;
-    (i) the documents provided by the Contributor to the Foundation to verify the identity of the Contributor for the purpose of the completion by the Foundation, or its duly authorized agent or designee, of know-your-customer (“KYC”) and anti-money laundering (“AML”) checks conducted in accordance with applicable law at the time of the Contributor’s entry into the DOT Allocation Agreement (collectively, the “Original Identity Verification Documents”) remain true and accurate in all respects on and as of the date hereof, or (ii) if any Original Identity Verification Document is not true and accurate on and as of the date hereof, the Contributor has submitted to the Foundation replacement identity verification documentation (collectively, the “Replacement Identity Verification Documents,” and, together with the Original Identity Verification Documents, collectively, the “Identity Verification Documentation”), in each case, that are (x) true and accurate on and as of the date hereof and (y) sufficient (as reasonably determined by the Foundation) to permit the Foundation or its agent or designee to conduct KYC and AML checks;
-    the Contributor hereby authorizes the Foundation, or its duly authorized agent or designee, to use the Identity Verification Documentation to conduct such new KYC and AML checks as may be deemed by the Foundation to be necessary or advisable in order to comply with applicable law;
-    the Contributor understands and agrees that the Foundation (i) will not honor any sale or other transfers of any DOT allocation agreements (including the SAFT) or any allocations for future DOTs thereunder, (ii) is relying upon the Certifications (without independent investigation) to comply with applicable law and (iii) the inaccuracy or incompleteness of any of the Certifications will result in material financial, reputational and legal harm to the Foundation and the Polkadot Network; and
-    the Contributor hereby certifies that each of the representations and warranties made by it in or otherwise pursuant to the SAFT remains true, correct and complete on and as of the date hereof (except, in each case, to the extent that any such representation or warranty expressly relates to an earlier date, in which case such representation or warranty shall be true, correct and complete on and as of such earlier date).
-    Applicable law and jurisdiction: These terms and conditions shall be governed by and construed in accordance with the substantive laws of Switzerland without any reference to its conflict of law provisions. The provisions of the United Nation Convention on contracts for the International Sale of Goods (CISG) shall not apply.
-    Any disputes arising out of or in connection with these terms and conditions and contracts entered into thereunder shall be submitted to the sole and exclusive jurisdiction of the courts of the city of Zug, Switzerland.
-
diff --git a/packages/page-claims/src/statements/regular.tsx b/packages/page-claims/src/statements/regular.tsx
new file mode 100644
index 000000000000..51a4b8f80ecf
--- /dev/null
+++ b/packages/page-claims/src/statements/regular.tsx
@@ -0,0 +1,144 @@
+// Copyright 2017-2020 @polkadot/app-claims authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+
+// Copy-pasted from https://statement.polkadot.network/regular.html
+function RegularStatement (): React.ReactElement {
+  return (
+    <>
+      <p className='bold_text'>Statement</p>
+
+      <p className='bold_text'>Please read these terms and conditions carefully.</p>
+      <p className='bold_text'>By submitting this statement, you are deemed to have accepted these Terms
+      and Conditions. If you do not agree to these terms, please refrain from
+accessing or proceeding.</p>
+      <p>By submitting this statement signed with the private key of either (i) the Ethereum
+      address to which future DOTs would be allocated pursuant to a signed DOT allocation
+      agreement made by and between the Web 3.0 Technologies Foundation (the
+      “Foundation”) and the Contributor (as defined below) (the “DOT Allocation
+      Agreement”), or (ii) the Polkadot address corresponding to the Ethereum address to
+      which future DOTs would be allocated pursuant to the DOT Allocation Agreement (the
+      applicable submitted key described in clauses (i) or (ii), the “Key”), and for good and
+      valuable consideration, the receipt and sufficiency of which are hereby acknowledged,
+      and with the intent to be legally bound hereby, the natural person or legal entity
+      submitting the Key (the “Contributor”) hereby represents, warrants and covenants, in
+      each case, as applicable, to, and for the benefit of, the Foundation (each, a
+“Certification” and, collectively, the “Certifications”) that:</p>
+      <ul>
+        <li>if the Contributor is a legal entity:
+          <ul>
+            <li>the Contributor (i) is duly organized (or applicable legal equivalent),
+            validly existing and in good standing (or applicable legal equivalent)
+            under the laws of its jurisdiction or organization (or applicable legal
+            equivalent), and (ii) has all requisite organizational power and authority
+            (x) to make each of the Certifications, (ii) to perform each of its
+            obligations hereunder and under the DOT Allocation Agreement, (iii) to
+            submit the Key and (iv) to consummate all of the transactions
+            contemplated by any of the foregoing clauses (i) through and including
+    (iii) to be consummated by it;</li>
+
+            <li>none of (i) the making by the Contributor of each of the Certifications, (ii)
+            the performance by the Contributor of each of its obligations hereunder
+            and under the DOT Allocation Agreement, (iii) the submission by the
+            Contributor of the Key or (iv) the consummation of any of the
+            transactions contemplated by any of the foregoing clauses (i) through
+            and including (iii) to be consummated by it, will conflict with or violate (x)
+            any of the terms of any organizational document of the Contributor, or
+    (y) any applicable law of the Contributor’s jurisdiction of organization;</li>
+
+            <li>each of (i) the making by the Contributor of each of the Certifications, (ii)
+            the performance by the Contributor of each of its obligations hereunder
+            and under the DOT Allocation Agreement, (iii) the submission the
+            Contributor of the Key or (iv) the consummation of any of the
+            transactions contemplated by any of the foregoing clauses (i) through
+            and including (iii), has been duly authorized and approved by all requisite
+            organizational action of the Contributor, such authorization remains in
+    full force and effect on and as of the date hereof;</li>
+          </ul>
+        </li>
+
+        <li>the Contributor is the original purchaser of DOT allocations under the DOT
+Allocation Agreement;</li>
+
+        <li>the Contributor continues to and will continue to own both the Ethereum
+address and the Polkadot address used to create the Polkadot address;</li>
+
+        <li>the Contributor is a party to and is legally bound by the DOT Allocation
+        Agreement and any terms or agreements incorporated by reference therein and
+        agrees that this Certification is valid, legally binding and enforceable against
+the Contributor;</li>
+
+        <li>the Contributor is neither a citizen, resident nor tax resident of the United States
+        of America (hereinafter referred to as the “U.S.”) or otherwise a “U.S. person”
+        (as defined in Rule 902 of Regulation S under the U.S. Securities Act of 1933,
+        as amended (the “U.S. Securities Act”)), and the Contributor is not otherwise
+present or located in the U.S. on the date hereof;</li>
+
+        <li>the Contributor understands that neither the DOT Allocation Agreement nor any
+        DOTs to be allocated thereunder have been, or will be, registered under the
+        U.S. Securities Act, and that each of the DOT Allocation Agreement and the
+        DOTs to be allocated thereunder constitute securities under the U.S. Securities
+Act;</li>
+
+        <li>the Contributor purchased DOT allocations pursuant to the DOT Allocation
+        Agreement solely for the Contributor’s own benefit and account, for the
+        purposes of personal consumption and utilization of DOTs on the Polkadot
+        Network and not for any speculative purpose or with an expectation of profit,
+        and not with a view to, or for resale in connection with, a public offering or other
+        distribution of DOTs, whether in exchange for other any other digital asset, any
+        currency, any security or otherwise, and all of the foregoing remains true,
+accurate and complete on and as of the date hereof;</li>
+
+        <li>(i) the documents provided by the Contributor to the Foundation to verify the
+        identity of the Contributor for the purpose of the completion by the Foundation,
+        or its duly authorized agent or designee, of know-your-customer (“KYC”) and
+        anti-money laundering (“AML”) checks conducted in accordance with
+        applicable law at the time of the Contributor’s entry into the DOT Allocation
+        Agreement (collectively, the “Original Identity Verification Documents”) remain
+        true and accurate in all respects on and as of the date hereof, or (ii) if any
+        Original Identity Verification Document is not true and accurate on and as of
+        the date hereof, the Contributor has submitted to the Foundation replacement
+        identity verification documentation (collectively, the “Replacement Identity
+        Verification Documents,” and, together with the Original Identity Verification
+        Documents, collectively, the “Identity Verification Documentation”), in each
+        case, that are (x) true and accurate on and as of the date hereof and (y)
+        sufficient (as reasonably determined by the Foundation) to permit the
+Foundation or its agent or designee to conduct KYC and AML checks;</li>
+
+        <li>the Contributor hereby authorizes the Foundation, or its duly authorized agent
+        or designee, to use the Identity Verification Documentation to conduct such new
+        KYC and AML checks as may be deemed by the Foundation to be necessary
+or advisable in order to comply with applicable law;</li>
+
+        <li>the Contributor understands and agrees that the Foundation (i) will not honor
+        any sale or other transfers of any DOT allocation agreements (including the
+        DOT Allocation Agreement) or any allocations for future DOTs thereunder, (ii)
+        is relying upon the Certifications (without independent investigation) to comply
+        with applicable law and (iii) the inaccuracy or incompleteness of any of the
+        Certifications will result in material financial, reputational and legal harm to the
+Foundation and the Polkadot Network; and</li>
+
+        <li>each of the representations and warranties made by it in or otherwise pursuant
+        to the DOT Allocation Agreement remain true, correct and complete on and as
+        of the date hereof (except, in each case, to the extent that any such
+        representation or warranty expressly relates to an earlier date, in which case
+        such representation or warranty shall be true, correct and complete on and as
+of such earlier date).</li>
+
+        <li>Applicable law and jurisdiction: These terms and conditions shall be governed
+        by and construed in accordance with the substantive laws of Switzerland
+        without any reference to its conflict of law provisions. The provisions of the
+        United Nation Convention on contracts for the International Sale of Goods
+(CISG) shall not apply.</li>
+
+        <li>Any disputes arising out of or in connection with these terms and conditions
+        and contracts entered into thereunder shall be submitted to the sole and
+exclusive jurisdiction of the courts of the city of Zug, Switzerland.</li>
+      </ul>
+    </>
+  );
+}
+
+export default React.memo(RegularStatement);
diff --git a/packages/page-claims/src/statements/saft.tsx b/packages/page-claims/src/statements/saft.tsx
new file mode 100644
index 000000000000..df7c72018831
--- /dev/null
+++ b/packages/page-claims/src/statements/saft.tsx
@@ -0,0 +1,148 @@
+// Copyright 2017-2020 @polkadot/app-claims authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+
+// Copy-pasted from https://statement.polkadot.network/saft.html
+function SaftStatement (): React.ReactElement {
+  return (
+    <>
+      <p className='bold_text'>SAFT statement</p>
+
+      <p className='bold_text'>Please read these terms and conditions carefully.
+
+      </p><p className='bold_text'>By submitting this statement, you are deemed to have accepted these Terms
+      and Conditions. If you do not agree to these terms, please refrain from
+accessing or proceeding.</p>
+
+      <p>By submitting this statement signed with the private key of either (i) the Ethereum
+      address to which future DOTs would be allocated pursuant to a signed Simple
+      Agreement for Future Tokens (the “SAFT”) made by and between the Web 3.0
+      Technologies Foundation (the “Foundation”) and the Contributor (as defined below)
+      (the “DOT Allocation Agreement”), or (ii) the Polkadot address corresponding to the
+      Ethereum address to which future DOTs would be allocated pursuant to the SAFT (the
+      applicable submitted key described in clauses (i) or (ii), the “Key”), and for good and
+      valuable consideration, the receipt and sufficiency of which are hereby acknowledged,
+      and with the intent to be legally bound hereby, the natural person or legal entity
+      submitting the Key (the “Contributor”) hereby represents, warrants and covenants, in
+      each case, as applicable, to, and for the benefit of, the Foundation (each, a
+“Certification” and, collectively, the “Certifications”) that:</p>
+
+      <ul>
+        <li>if the Contributor is a legal entity:
+
+          <ul>
+            <li>the Contributor (i) is duly organized (or applicable legal equivalent),
+            validly existing and in good standing (or applicable legal equivalent)
+            under the laws of its jurisdiction or organization (or applicable legal
+            equivalent), and (ii) has all requisite organizational power and authority
+            (x) to make each of the Certifications, (ii) to perform each of its
+            obligations under the SAFT, (iii) to submit the Key and (iv) to
+            consummate all of the transactions contemplated by any of the foregoing
+  clauses (i) through and including (iii) to be consummated by it;</li>
+
+            <li>none of (i) the making by the Contributor of each of the Certifications, (ii)
+            the performance by the Contributor of each of its obligations hereunder
+            and under the SAFT, (iii) the submission by the Contributor of the Key
+            or (iv) the consummation of any of the transactions contemplated by any
+            of the foregoing clauses (i) through and including (iii) to be consummated
+            by it, will conflict with or violate (x) any of the terms of any organizational
+            document of the Contributor, or (y) any applicable law of the
+  Contributor’s jurisdiction of organization;</li>
+
+            <li>each of (i) the making by the Contributor of each of the Certifications, (ii)
+            the performance by the Contributor of each of its obligations hereunder
+            and under the SAFT, (iii) the submission the Contributor of the Key or
+            (iv) the consummation of any of the transactions contemplated by any of
+            the foregoing clauses (i) through and including (iii), has been duly
+            authorized and approved by all requisite organizational action of the
+            Contributor, such authorization remains in full force and effect on and as
+  of the date hereof;</li>
+          </ul>
+        </li>
+
+        <li>the Contributor is the original purchaser of DOT allocations under the SAFT;</li>
+
+        <li>the Contributor continues to and will continue to own both the Ethereum
+address and the Polkadot address used to create the Polkadot address;</li>
+
+        <li>the Contributor is a party to and is legally bound by the SAFT and any terms or
+        agreements incorporated by reference therein and agrees that this Certification
+is valid, legally binding and enforceable against the Contributor;</li>
+
+        <li>the Contributor is an “accredited investor” (as defined in Rule 501 of Regulation
+        D under the U.S. Securities Act of 1933, as amended (the “U.S. Securities
+Act”)), on and as of the date hereof;</li>
+
+        <li>the Contributor understands that neither the SAFT nor any DOTs to be
+        allocated thereunder have been, or will be, registered under the U.S. Securities
+        Act, and that each of the SAFT and the DOTs to be allocated thereunder
+constitute securities under the U.S. Securities Act;</li>
+
+        <li>the Contributor purchased DOT allocations pursuant to the SAFT solely for the
+        Contributor’s own benefit and account, for the purposes of personal
+        consumption and utilization of DOTs on the Polkadot Network and not for any
+        speculative purpose or with an expectation of profit, and not with a view to, or
+        for resale in connection with, a public offering or other distribution of DOTs,
+        whether in exchange for other any other digital asset, any currency, any security
+        or otherwise, and all of the foregoing remains true, accurate and complete on
+and as of the date hereof;</li>
+
+        <li>the Contributor purchased DOT allocations solely for its own benefit and
+        account, including through the consumption and utilization of DOTs on the
+        Polkadot Network, and not with a view to, or for resale in connection with, a
+        public offering or other distribution of DOTs, whether in exchange for other any
+other digital asset, any currency, any security or otherwise;</li>
+
+        <li>(i) the documents provided by the Contributor to the Foundation to verify the
+        identity of the Contributor for the purpose of the completion by the Foundation,
+        or its duly authorized agent or designee, of know-your-customer (“KYC”) and
+        anti-money laundering (“AML”) checks conducted in accordance with
+        applicable law at the time of the Contributor’s entry into the DOT Allocation
+        Agreement (collectively, the “Original Identity Verification Documents”) remain
+        true and accurate in all respects on and as of the date hereof, or (ii) if any
+        Original Identity Verification Document is not true and accurate on and as of
+        the date hereof, the Contributor has submitted to the Foundation replacement
+        identity verification documentation (collectively, the “Replacement Identity
+        Verification Documents,” and, together with the Original Identity Verification
+        Documents, collectively, the “Identity Verification Documentation”), in each
+        case, that are (x) true and accurate on and as of the date hereof and (y)
+        sufficient (as reasonably determined by the Foundation) to permit the
+Foundation or its agent or designee to conduct KYC and AML checks;</li>
+
+        <li>the Contributor hereby authorizes the Foundation, or its duly authorized agent
+        or designee, to use the Identity Verification Documentation to conduct such new
+        KYC and AML checks as may be deemed by the Foundation to be necessary
+or advisable in order to comply with applicable law;</li>
+
+        <li>the Contributor understands and agrees that the Foundation (i) will not honor
+        any sale or other transfers of any DOT allocation agreements (including the
+        SAFT) or any allocations for future DOTs thereunder, (ii) is relying upon the
+        Certifications (without independent investigation) to comply with applicable law
+        and (iii) the inaccuracy or incompleteness of any of the Certifications will result
+        in material financial, reputational and legal harm to the Foundation and the
+Polkadot Network; and</li>
+
+        <li>the Contributor hereby certifies that each of the representations and warranties
+        made by it in or otherwise pursuant to the SAFT remains true, correct and
+        complete on and as of the date hereof (except, in each case, to the extent that
+        any such representation or warranty expressly relates to an earlier date, in
+        which case such representation or warranty shall be true, correct and complete
+on and as of such earlier date).</li>
+
+        <li>Applicable law and jurisdiction: These terms and conditions shall be governed
+        by and construed in accordance with the substantive laws of Switzerland
+        without any reference to its conflict of law provisions. The provisions of the
+        United Nation Convention on contracts for the International Sale of Goods
+(CISG) shall not apply.</li>
+
+        <li>Any disputes arising out of or in connection with these terms and conditions and
+        contracts entered into thereunder shall be submitted to the sole and exclusive
+jurisdiction of the courts of the city of Zug, Switzerland.</li>
+      </ul>
+    </>
+  );
+}
+
+export default React.memo(SaftStatement);
diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index 6aceccfd3101..f4dc7e377022 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -9,9 +9,6 @@ import { registry } from '@polkadot/react-api';
 import { assert, hexToU8a, stringToU8a, u8aToBuffer, u8aConcat } from '@polkadot/util';
 import { keccakAsHex, keccakAsU8a } from '@polkadot/util-crypto';
 
-import statementRegular from './md/regular.md';
-import statementAlternative from './md/saft.md';
-
 interface RecoveredSignature {
   error: Error | null;
   ethereumAddress: EthereumAddress | null;
@@ -23,8 +20,8 @@ interface SignatureParts {
   signature: Buffer;
 }
 
-const DEFAULT_STATEMENT_URL = 'https://statement.polkadot.network/regular.md';
-const ALTERNATIVE_STATEMENT_URL = 'https://statement.polkadot.network/saft.md';
+const DEFAULT_STATEMENT_URL = 'https://statement.polkadot.network/regular.html';
+const ALTERNATIVE_STATEMENT_URL = 'https://statement.polkadot.network/saft.html';
 const DEFAULT_STATEMENT_HASH = '0x00';
 const ALTERNATIVE_STATEMENT_HASH = '0x00';
 
@@ -144,13 +141,3 @@ export function getStatementSentence (kind?: StatementKind | null): string {
 
   return `FIXME with the actual legal statement sentence ${hash} ${url}`;
 }
-
-export function getStatementMd (kind?: StatementKind | null): string {
-  if (kind?.isDefault) {
-    return statementRegular;
-  } else if (kind?.isAlternative) {
-    return statementAlternative;
-  } else {
-    return '';
-  }
-}

From 8860ca274fab2c932720748ea1b49d87acc5fb2d Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Sun, 24 May 2020 13:32:44 +0200
Subject: [PATCH 58/74] Update to final statements

---
 jest.config.js                                |  2 +-
 packages/page-claims/src/Attest.tsx           | 39 +++--------
 packages/page-claims/src/Claim.tsx            | 69 +++++++++++--------
 packages/page-claims/src/Statement.tsx        | 41 ++++++++---
 packages/page-claims/src/index.tsx            | 11 +--
 .../src/statements/{ => polkadot}/regular.tsx |  0
 .../src/statements/{ => polkadot}/saft.tsx    |  0
 packages/page-claims/src/util.ts              | 53 +++++++-------
 8 files changed, 115 insertions(+), 100 deletions(-)
 rename packages/page-claims/src/statements/{ => polkadot}/regular.tsx (100%)
 rename packages/page-claims/src/statements/{ => polkadot}/saft.tsx (100%)

diff --git a/jest.config.js b/jest.config.js
index fd2faa5b792b..342de2be8841 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,7 @@ module.exports = Object.assign({}, config, {
   moduleNameMapper: {
     ...internalModules,
     '\\.(css|less)$': 'empty/object',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$': 'empty/object'
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object'
   },
   transformIgnorePatterns: [
     '<rootDir>/node_modules'
diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index b941c12ef7f2..59cad2f27e68 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -10,18 +10,20 @@ import { FormatBalance } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
 import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
+import { ClaimStyles } from './Claim';
 import Statement from './Statement';
 import { useTranslation } from './translate';
-import { getStatementSentence } from './util';
+import { getStatement } from './util';
 
 interface Props {
   accountId: string;
   className?: string;
   ethereumAddress: EthereumAddress | null;
   statementKind?: StatementKind;
+  systemChain: string;
 }
 
-function Attest ({ accountId, className, ethereumAddress, statementKind }: Props): React.ReactElement<Props> | null {
+function Attest ({ accountId, className, ethereumAddress, statementKind, systemChain }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
@@ -54,16 +56,18 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
   }
 
   const hasClaim = claimValue && claimValue.gten(0);
-  const statementSentence = getStatementSentence(statementKind);
+  const statementSentence = getStatement(systemChain, statementKind)?.sentence;
 
   return (
     <Card isSuccess>
       <div className={className}>
         <Statement
           kind={statementKind}
+          systemChain={systemChain}
         />
         {hasClaim &&
-          <h3>{t('Attestation for: ')} <FormatBalance value={claimValue} /></h3>}
+          <h3><FormatBalance label={t('Attestation for:')}
+            value={claimValue} /></h3>}
         <Button.Group>
           <TxButton
             accountId={accountId}
@@ -81,29 +85,4 @@ function Attest ({ accountId, className, ethereumAddress, statementKind }: Props
 }
 
 // FIXME Same styles as ./Claim.tsx
-export default React.memo(styled(Attest)`
-  font-size: 1.15rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 12rem;
-  align-items: center;
-  margin: 0 1rem;
-
-  h3 {
-    font-family: monospace;
-    font-size: 1.5rem;
-    max-width: 100%;
-    margin: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  h2 {
-    margin: 0.5rem 0 2rem;
-    font-family: monospace;
-    font-size: 2.5rem;
-    font-weight: 200;
-  }
-`);
+export default React.memo(styled(Attest)`${ClaimStyles}`);
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 57f0a1e84d40..dd0bc58a3bae 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -12,7 +12,7 @@ import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from './translate';
-import { addrToChecksum, getStatementSentence } from './util';
+import { addrToChecksum, getStatement } from './util';
 
 interface Props {
   accountId: string;
@@ -22,6 +22,7 @@ interface Props {
   // Do we sign with `claims.claimAttest` (new) instead of `claims.claim` (old)?
   isOldClaimProcess: boolean;
   statementKind?: StatementKind;
+  systemChain: string;
 }
 
 interface ConstructTx {
@@ -30,17 +31,23 @@ interface ConstructTx {
 }
 
 // Depending on isOldClaimProcess, construct the correct tx.
-function constructTx (accountId: string, ethereumSignature: string | null, kind: StatementKind | undefined, isOldClaimProcess: boolean): ConstructTx {
+function constructTx (
+  systemChain: string,
+  accountId: string,
+  ethereumSignature: string | null,
+  kind: StatementKind | undefined,
+  isOldClaimProcess: boolean
+): ConstructTx {
   if (!ethereumSignature || !kind) {
     return {};
   }
 
   return isOldClaimProcess
     ? { params: [accountId, ethereumSignature], tx: 'claims.claim' }
-    : { params: [accountId, ethereumSignature, getStatementSentence(kind)], tx: 'claims.claimAttest' };
+    : { params: [accountId, ethereumSignature, getStatement(systemChain, kind)?.sentence], tx: 'claims.claimAttest' };
 }
 
-function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess, statementKind }: Props): React.ReactElement<Props> | null {
+function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess, statementKind, systemChain }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
@@ -94,7 +101,7 @@ function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOl
                   isPrimary
                   isUnsigned
                   label={t('Claim')}
-                  {...constructTx(accountId, ethereumSignature, statementKind, isOldClaimProcess)}
+                  {...constructTx(systemChain, accountId, ethereumSignature, statementKind, isOldClaimProcess)}
                 />
               </Button.Group>
             </>
@@ -109,29 +116,31 @@ function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOl
   );
 }
 
-export default React.memo(styled(Claim)`
-  font-size: 1.15rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 12rem;
-  align-items: center;
-  margin: 0 1rem;
-
-  h3 {
-    font-family: monospace;
-    font-size: 1.5rem;
-    max-width: 100%;
-    margin: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+export const ClaimStyles = `
+font-size: 1.15rem;
+display: flex;
+flex-direction: column;
+justify-content: center;
+min-height: 12rem;
+align-items: center;
+margin: 0 1rem;
+
+h3 {
+  font-family: monospace;
+  font-size: 1.5rem;
+  max-width: 100%;
+  margin: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  h2 {
-    margin: 0.5rem 0 2rem;
-    font-family: monospace;
-    font-size: 2.5rem;
-    font-weight: 200;
-  }
-`);
+h2 {
+  margin: 0.5rem 0 2rem;
+  font-family: monospace;
+  font-size: 2.5rem;
+  font-weight: 200;
+}
+`;
+
+export default React.memo(styled(Claim)`${ClaimStyles}`);
diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index 919326a3ee30..94ae8fe98b9c 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -7,28 +7,53 @@ import { StatementKind } from '@polkadot/types/interfaces';
 import React from 'react';
 import styled from 'styled-components';
 
-import RegularStatement from './statements/regular';
-import SaftStatement from './statements/saft';
+import PolkadotRegular from './statements/polkadot/regular';
+import PolkadotSaft from './statements/polkadot/saft';
 import { useTranslation } from './translate';
-import { getStatementUrl } from './util';
+import { getStatement } from './util';
 
 export interface Props {
   className?: string;
-  kind: StatementKind;
+  kind?: StatementKind;
+  systemChain: string;
 }
 
-function Statement ({ className, kind }: Props): React.ReactElement<Props> | null {
+// Get the full hardcoded text for a statement
+function StatementFullText ({ kind, systemChain }: { kind?: StatementKind; systemChain: string }): React.ReactElement | null {
   const { t } = useTranslation();
-  const statementUrl = getStatementUrl(kind);
+
+  switch (systemChain) {
+    case 'Polkadot CC1': {
+      if (!kind) {
+        return null;
+      }
+
+      // FIXME isRegular
+      return kind.isDefault
+        ? <PolkadotRegular />
+        : <PolkadotSaft />;
+    }
+
+    default:
+      return <p>{t('Warning: we did not find any attest statement for {{chain}}', { replace: { chain: systemChain } })}</p>;
+  }
+}
+
+function Statement ({ className, kind, systemChain }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const statementUrl = getStatement(systemChain, kind)?.url;
 
   return (
     <div className={className}>
-      {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at: ')}
+      {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at:')}
       <a href={statementUrl}
         rel='noopener noreferrer'
         target='_blank'>{statementUrl}</a>
       <div className='statement'>
-        {kind.isDefault ? <RegularStatement /> : <SaftStatement />}
+        <StatementFullText
+          kind={kind}
+          systemChain={systemChain}
+        />
       </div>
     </div>
   );
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index f96ab1b14ee3..755219592b31 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -16,7 +16,7 @@ import { u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
 import { useTranslation } from './translate';
-import { recoverFromJSON, getStatementSentence } from './util';
+import { recoverFromJSON, getStatement } from './util';
 import AttestDisplay from './Attest';
 import ClaimDisplay from './Claim';
 import Statement from './Statement';
@@ -164,7 +164,7 @@ function ClaimsApp (): React.ReactElement {
     transform: (option: Option<StatementKind>) => option.unwrapOr(null)
   });
 
-  const statementSentence = statementKind ? getStatementSentence(statementKind) : '';
+  const statementSentence = statementKind ? getStatement(systemChain, statementKind)?.sentence : '';
 
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
   const payload = accountId
@@ -241,7 +241,8 @@ function ClaimsApp (): React.ReactElement {
                     { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
                   {!isOldClaimProcess && (<Statement
                     kind={statementKind}
-                  />) }
+                    systemChain={systemChain}
+                  />)}
                   <div>
                     {t('Copy the following string and sign it with the Ethreum 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')}
                     :
@@ -279,7 +280,7 @@ function ClaimsApp (): React.ReactElement {
                   )}
                 </>
                 : <div>
-                    The Ethereum address you submitted could not be found in the genesis.
+                  The Ethereum address you submitted could not be found in the genesis.
                 </div>}
             </Card>
           )}
@@ -291,6 +292,7 @@ function ClaimsApp (): React.ReactElement {
                 accountId={accountId}
                 ethereumAddress={ethereumAddress}
                 statementKind={statementKind}
+                systemChain={systemChain}
               />
               : <ClaimDisplay
                 accountId={accountId}
@@ -298,6 +300,7 @@ function ClaimsApp (): React.ReactElement {
                 ethereumSignature={signature}
                 isOldClaimProcess={isOldClaimProcess}
                 statementKind={statementKind}
+                systemChain={systemChain}
               />
           )}
         </Column>
diff --git a/packages/page-claims/src/statements/regular.tsx b/packages/page-claims/src/statements/polkadot/regular.tsx
similarity index 100%
rename from packages/page-claims/src/statements/regular.tsx
rename to packages/page-claims/src/statements/polkadot/regular.tsx
diff --git a/packages/page-claims/src/statements/saft.tsx b/packages/page-claims/src/statements/polkadot/saft.tsx
similarity index 100%
rename from packages/page-claims/src/statements/saft.tsx
rename to packages/page-claims/src/statements/polkadot/saft.tsx
diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index f4dc7e377022..113efd6867b8 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -20,11 +20,6 @@ interface SignatureParts {
   signature: Buffer;
 }
 
-const DEFAULT_STATEMENT_URL = 'https://statement.polkadot.network/regular.html';
-const ALTERNATIVE_STATEMENT_URL = 'https://statement.polkadot.network/saft.html';
-const DEFAULT_STATEMENT_HASH = '0x00';
-const ALTERNATIVE_STATEMENT_HASH = '0x00';
-
 // converts an Ethereum address to a checksum representation
 export function addrToChecksum (_address: string): string {
   const address = _address.toLowerCase();
@@ -114,30 +109,34 @@ export function recoverFromJSON (signatureJson: string | null): RecoveredSignatu
   }
 }
 
-export function getStatementUrl (kind?: StatementKind | null): string {
-  if (kind?.isDefault) {
-    return DEFAULT_STATEMENT_URL;
-  } else if (kind?.isAlternative) {
-    return ALTERNATIVE_STATEMENT_URL;
-  } else {
-    return '';
-  }
+export interface Statement {
+  hash: string;
+  sentence: string;
+  url: string;
 }
 
-// From a StatementKind, get the hardcoded actual statement to sign
-export function getStatementSentence (kind?: StatementKind | null): string {
-  // FIXME Wait for actual legal statements
-
-  const url = getStatementUrl(kind);
-  let hash = '0x00';
+export function getStatement (network: string, kind?: StatementKind | null): Statement | undefined {
+  switch (network) {
+    case 'Polkadot CC1': {
+      if (!kind) {
+        return undefined;
+      }
+
+      // FIXME isRegular
+      return kind.isDefault
+        ? {
+          hash: 'Qmc1XYqT6S39WNp2UeiRUrZichUWUPpGEThDE6dAb3f6Ny',
+          sentence: 'I hereby agree to the terms of the statement whose SHA-256 multihash is Qmc1XYqT6S39WNp2UeiRUrZichUWUPpGEThDE6dAb3f6Ny. (This may be found at the URL: https://statement.polkadot.network/regular.html)',
+          url: 'https://statement.polkadot.network/regular.html'
+        }
+        : {
+          hash: 'Qmawwbu1KeZ46peRspbsTUot8Lq6KcHutuiUKJ142N4Reg',
+          sentence: 'I hereby agree to the terms of the statement whose SHA-256 multihash is Qmawwbu1KeZ46peRspbsTUot8Lq6KcHutuiUKJ142N4Reg. (This may be found at the URL: https://statement.polkadot.network/saft.html)',
+          url: 'https://statement.polkadot.network/saft.html'
+        };
+    }
 
-  if (kind?.isDefault) {
-    hash = DEFAULT_STATEMENT_HASH;
-  } else if (kind?.isAlternative) {
-    hash = ALTERNATIVE_STATEMENT_HASH;
-  } else {
-    return '';
+    default:
+      return undefined;
   }
-
-  return `FIXME with the actual legal statement sentence ${hash} ${url}`;
 }

From 9f04541b73fefc993844dbc0978f9390af33e884 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Sun, 24 May 2020 13:42:19 +0200
Subject: [PATCH 59/74] More nits

---
 packages/page-claims/src/Attest.tsx |  1 -
 packages/page-claims/src/index.tsx  | 88 ++++++++++++++---------------
 2 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 59cad2f27e68..a1cb9a524f0f 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -84,5 +84,4 @@ function Attest ({ accountId, className, ethereumAddress, statementKind, systemC
   );
 }
 
-// FIXME Same styles as ./Claim.tsx
 export default React.memo(styled(Attest)`${ClaimStyles}`);
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 755219592b31..d36de02f2457 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -236,52 +236,50 @@ function ClaimsApp (): React.ReactElement {
           {(step >= Step.Sign && !isPreclaimed) && (
             <Card>
               {(isOldClaimProcess || !!statementKind)
-                ? <>
-                  <h3>{t('{{step}}. Sign with you ETH address',
-                    { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
-                  {!isOldClaimProcess && (<Statement
-                    kind={statementKind}
-                    systemChain={systemChain}
-                  />)}
-                  <div>
-                    {t('Copy the following string and sign it with the Ethreum 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')}
-                    :
-                  </div>
-                  <CopyToClipboard
-                    onCopy={onCopy}
-                    text={payload}
-                  >
-                    <Payload
-                      data-for='tx-payload'
-                      data-tip
+                ? (
+                  <>
+                    <h3>{t('{{step}}. Sign with you ETH address',
+                      { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
+                    {!isOldClaimProcess && (<Statement
+                      kind={statementKind}
+                      systemChain={systemChain}
+                    />)}
+                    <div>{t('Copy the following string and sign it with the Ethreum 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:')}</div>
+                    <CopyToClipboard
+                      onCopy={onCopy}
+                      text={payload}
                     >
-                      {payload}
-                    </Payload>
-                  </CopyToClipboard>
-                  <Tooltip
-                    place='right'
-                    text={didCopy ? t('copied') : t('click to copy')}
-                    trigger='tx-payload'
-                  />
-                  <Signature
-                    onChange={onChangeSignature}
-                    placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
-                    rows={10}
-                  />
-                  {(step === Step.Sign) && (
-                    <Button.Group>
-                      <Button
-                        icon='sign-in'
-                        isDisabled={!accountId || !signature}
-                        label={t('Confirm claim')}
-                        onClick={goToStepClaim}
-                      />
-                    </Button.Group>
-                  )}
-                </>
-                : <div>
-                  The Ethereum address you submitted could not be found in the genesis.
-                </div>}
+                      <Payload
+                        data-for='tx-payload'
+                        data-tip
+                      >
+                        {payload}
+                      </Payload>
+                    </CopyToClipboard>
+                    <Tooltip
+                      place='right'
+                      text={didCopy ? t('copied') : t('click to copy')}
+                      trigger='tx-payload'
+                    />
+                    <Signature
+                      onChange={onChangeSignature}
+                      placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
+                      rows={10}
+                    />
+                    {(step === Step.Sign) && (
+                      <Button.Group>
+                        <Button
+                          icon='sign-in'
+                          isDisabled={!accountId || !signature}
+                          label={t('Confirm claim')}
+                          onClick={goToStepClaim}
+                        />
+                      </Button.Group>
+                    )}
+                  </>
+                )
+                : <div>{t('This Ethereum address does not have a claim.')}</div>
+              }
             </Card>
           )}
         </Column>

From 8f12a36d7d2b422318b78122795904afb90d2c50 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Sun, 24 May 2020 13:49:28 +0200
Subject: [PATCH 60/74] Nits

---
 packages/page-claims/src/index.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index d36de02f2457..67d55085b354 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -102,8 +102,10 @@ function ClaimsApp (): React.ReactElement {
     api.query.claims
       .preclaims<Option<EthereumAddress>>(accountId)
       .then((preclaim): void => {
-        setEthereumAddress(preclaim.unwrapOr(null)?.toString());
-        setPreclaimEthereumAddress(preclaim.unwrapOr(null)?.toString());
+        const address = preclaim.unwrapOr(null)?.toString();
+
+        setEthereumAddress(address);
+        setPreclaimEthereumAddress(address);
       })
       .catch((): void => setPreclaimEthereumAddress(null));
   }, [accountId, api.query.claims, api.query.claims.preclaims]);
@@ -159,8 +161,7 @@ function ClaimsApp (): React.ReactElement {
 
   // If it's 1/ not preclaimed and 2/ not the old claiming process, fetch the
   // statement kind to sign.
-  const _ethereumAddress = ethereumAddress ? api.createType('EthereumAddress', ethereumAddress) : null;
-  const statementKind = useCall<StatementKind | null>(!isPreclaimed && !isOldClaimProcess && _ethereumAddress && api.query.claims.signing, [_ethereumAddress], {
+  const statementKind = useCall<StatementKind | null>(!isPreclaimed && !isOldClaimProcess && !!ethereumAddress && api.query.claims.signing, [ethereumAddress], {
     transform: (option: Option<StatementKind>) => option.unwrapOr(null)
   });
 

From f94b9d690456761df2e1cd3b61047073e3a7c5eb Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Sun, 24 May 2020 15:21:50 +0200
Subject: [PATCH 61/74] OnSuccess

---
 packages/page-claims/src/Attest.tsx | 41 ++++++++++++-------------
 packages/page-claims/src/Claim.tsx  | 47 ++++++++++++++---------------
 packages/page-claims/src/index.tsx  |  6 ++++
 3 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index a1cb9a524f0f..88e2f3b15063 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -2,9 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Card, TxButton } from '@polkadot/react-components';
+import { TxCallback } from '@polkadot/react-components/Status/types';
 import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
@@ -19,39 +20,34 @@ interface Props {
   accountId: string;
   className?: string;
   ethereumAddress: EthereumAddress | null;
+  onSuccess?: TxCallback;
   statementKind?: StatementKind;
   systemChain: string;
 }
 
-function Attest ({ accountId, className, ethereumAddress, statementKind, systemChain }: Props): React.ReactElement<Props> | null {
+function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKind, systemChain }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
-  const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
   const [isBusy, setIsBusy] = useState(false);
 
-  const _fetchClaim = useCallback(
-    (address: EthereumAddress): void => {
-      setIsBusy(true);
-
-      api.query.claims
-        .claims<Option<BalanceOf>>(address)
-        .then((claim): void => {
-          setClaimValue(claim.unwrapOr(null));
-          setIsBusy(false);
-        })
-        .catch((): void => setIsBusy(false));
-    },
-    [api]
-  );
-
   useEffect((): void => {
-    setClaimAddress(ethereumAddress);
+    if (!ethereumAddress) {
+      return;
+    }
+
+    setIsBusy(true);
 
-    ethereumAddress && _fetchClaim(ethereumAddress);
-  }, [_fetchClaim, ethereumAddress]);
+    api.query.claims
+      .claims<Option<BalanceOf>>(ethereumAddress)
+      .then((claim): void => {
+        setClaimValue(claim.unwrapOr(null));
+        setIsBusy(false);
+      })
+      .catch((): void => setIsBusy(false));
+  }, [api, ethereumAddress]);
 
-  if (isBusy || !claimAddress) {
+  if (isBusy) {
     return null;
   }
 
@@ -75,6 +71,7 @@ function Attest ({ accountId, className, ethereumAddress, statementKind, systemC
             isDisabled={!statementSentence}
             isPrimary
             label={t('Attest')}
+            onSuccess={onSuccess}
             params={[statementSentence]}
             tx='claims.attest'
           />
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index dd0bc58a3bae..c7a9d3db920c 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -5,9 +5,10 @@
 import { Option } from '@polkadot/types';
 import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Card, TxButton } from '@polkadot/react-components';
+import { TxCallback } from '@polkadot/react-components/Status/types';
 import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
@@ -21,6 +22,7 @@ interface Props {
   ethereumSignature: string | null;
   // Do we sign with `claims.claimAttest` (new) instead of `claims.claim` (old)?
   isOldClaimProcess: boolean;
+  onSuccess?: TxCallback;
   statementKind?: StatementKind;
   systemChain: string;
 }
@@ -47,35 +49,29 @@ function constructTx (
     : { params: [accountId, ethereumSignature, getStatement(systemChain, kind)?.sentence], tx: 'claims.claimAttest' };
 }
 
-function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess, statementKind, systemChain }: Props): React.ReactElement<Props> | null {
+function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOldClaimProcess, onSuccess, statementKind, systemChain }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
-  const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
   const [isBusy, setIsBusy] = useState(false);
 
-  const _fetchClaim = useCallback(
-    (address: EthereumAddress): void => {
-      setIsBusy(true);
-
-      api.query.claims
-        .claims<Option<BalanceOf>>(address)
-        .then((claim): void => {
-          setClaimValue(claim.unwrapOr(null));
-          setIsBusy(false);
-        })
-        .catch((): void => setIsBusy(false));
-    },
-    [api]
-  );
-
   useEffect((): void => {
-    setClaimAddress(ethereumAddress);
-
-    ethereumAddress && _fetchClaim(ethereumAddress);
-  }, [_fetchClaim, ethereumAddress]);
-
-  if (isBusy || !claimAddress) {
+    if (!ethereumAddress) {
+      return;
+    }
+
+    setIsBusy(true);
+
+    api.query.claims
+      .claims<Option<BalanceOf>>(ethereumAddress)
+      .then((claim): void => {
+        setClaimValue(claim.unwrapOr(null));
+        setIsBusy(false);
+      })
+      .catch((): void => setIsBusy(false));
+  }, [api, ethereumAddress]);
+
+  if (!ethereumAddress || isBusy) {
     return null;
   }
 
@@ -88,7 +84,7 @@ function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOl
     >
       <div className={className}>
         {t('Your Ethereum account')}
-        <h3>{addrToChecksum(claimAddress.toString())}</h3>
+        <h3>{addrToChecksum(ethereumAddress.toString())}</h3>
         {hasClaim && claimValue
           ? (
             <>
@@ -101,6 +97,7 @@ function Claim ({ accountId, className, ethereumAddress, ethereumSignature, isOl
                   isPrimary
                   isUnsigned
                   label={t('Claim')}
+                  onSuccess={onSuccess}
                   {...constructTx(systemChain, accountId, ethereumSignature, statementKind, isOldClaimProcess)}
                 />
               </Button.Group>
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 67d55085b354..ea713c4ce9b1 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -121,6 +121,10 @@ function ClaimsApp (): React.ReactElement {
     }
   }, [didCopy]);
 
+  const goToStepAccount = useCallback(() => {
+    setStep(Step.Account);
+  }, []);
+
   const goToStepSign = useCallback(() => {
     setStep(Step.Sign);
   }, []);
@@ -290,6 +294,7 @@ function ClaimsApp (): React.ReactElement {
               ? <AttestDisplay
                 accountId={accountId}
                 ethereumAddress={ethereumAddress}
+                onSuccess={goToStepAccount}
                 statementKind={statementKind}
                 systemChain={systemChain}
               />
@@ -298,6 +303,7 @@ function ClaimsApp (): React.ReactElement {
                 ethereumAddress={ethereumAddress}
                 ethereumSignature={signature}
                 isOldClaimProcess={isOldClaimProcess}
+                onSuccess={goToStepAccount}
                 statementKind={statementKind}
                 systemChain={systemChain}
               />

From 5e09c6e586721f70cb529475f4fd09815a12b944 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Sun, 24 May 2020 22:28:46 +0200
Subject: [PATCH 62/74] prevent display of empty statement when attested

---
 packages/page-claims/src/Attest.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 88e2f3b15063..523adf435006 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -54,6 +54,10 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
   const hasClaim = claimValue && claimValue.gten(0);
   const statementSentence = getStatement(systemChain, statementKind)?.sentence;
 
+  if (!hasClaim || !statementSentence) {
+    return null;
+  }
+
   return (
     <Card isSuccess>
       <div className={className}>
@@ -61,9 +65,8 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
           kind={statementKind}
           systemChain={systemChain}
         />
-        {hasClaim &&
-          <h3><FormatBalance label={t('Attestation for:')}
-            value={claimValue} /></h3>}
+        <h3><FormatBalance label={t('Attestation for:')}
+          value={claimValue} /></h3>
         <Button.Group>
           <TxButton
             accountId={accountId}

From 7d7995be7eef0b51617a90d75c5b292b167490ea Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 25 May 2020 11:02:03 +0200
Subject: [PATCH 63/74] Small fixmes

---
 packages/page-claims/src/Attest.tsx    | 4 ++--
 packages/page-claims/src/Statement.tsx | 3 +--
 packages/page-claims/src/util.ts       | 3 +--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 523adf435006..06eee6105916 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -65,7 +65,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
           kind={statementKind}
           systemChain={systemChain}
         />
-        <h3><FormatBalance label={t('Attestation for:')}
+        <h3><FormatBalance label={t<string>('Attestation for:')}
           value={claimValue} /></h3>
         <Button.Group>
           <TxButton
@@ -73,7 +73,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
             icon='send'
             isDisabled={!statementSentence}
             isPrimary
-            label={t('Attest')}
+            label={t<string>('Attest')}
             onSuccess={onSuccess}
             params={[statementSentence]}
             tx='claims.attest'
diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index 94ae8fe98b9c..2c23ed32dba6 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -28,8 +28,7 @@ function StatementFullText ({ kind, systemChain }: { kind?: StatementKind; syste
         return null;
       }
 
-      // FIXME isRegular
-      return kind.isDefault
+      return kind.isRegular
         ? <PolkadotRegular />
         : <PolkadotSaft />;
     }
diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index 33f748a43c68..78f113adb3a0 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -122,8 +122,7 @@ export function getStatement (network: string, kind?: StatementKind | null): Sta
         return undefined;
       }
 
-      // FIXME isRegular
-      return kind.isDefault
+      return kind.isRegular
         ? {
           hash: 'Qmc1XYqT6S39WNp2UeiRUrZichUWUPpGEThDE6dAb3f6Ny',
           sentence: 'I hereby agree to the terms of the statement whose SHA-256 multihash is Qmc1XYqT6S39WNp2UeiRUrZichUWUPpGEThDE6dAb3f6Ny. (This may be found at the URL: https://statement.polkadot.network/regular.html)',

From e4377ba572daba28f9229aec9f1028c8b1e71721 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 25 May 2020 12:12:24 +0200
Subject: [PATCH 64/74] Update packages/page-claims/src/index.tsx

---
 packages/page-claims/src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index b3303eb2054d..53d5c463e9dd 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -243,7 +243,7 @@ function ClaimsApp (): React.ReactElement {
               {(isOldClaimProcess || !!statementKind)
                 ? (
                   <>
-                    <h3>{t<string>('{{step}}. Sign with you ETH address',
+                    <h3>{t<string>('{{step}}. Sign with your ETH address',
                       { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
                     {!isOldClaimProcess && (<Statement
                       kind={statementKind}

From 1a7827eea9981ebb6b2a4bffb510903a36bb3d17 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Mon, 25 May 2020 13:40:36 +0200
Subject: [PATCH 65/74] fix isError not being red as expected

---
 packages/react-components/src/Card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/Card.tsx b/packages/react-components/src/Card.tsx
index 5ec26db0612f..eb0fd7954106 100644
--- a/packages/react-components/src/Card.tsx
+++ b/packages/react-components/src/Card.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 function Card ({ children, className = '', isError, isSuccess, withBottomMargin }: Props): React.ReactElement<Props> {
   return (
-    <article className={`ui--Card ${className} ${(isError && !isSuccess) ? 'error' : ''}, ${(!isError && isSuccess) ? 'success' : ''} ${withBottomMargin ? 'withBottomMargin' : ''}`}>
+    <article className={`ui--Card ${className} ${(isError && !isSuccess) ? 'error' : ''} ${(!isError && isSuccess) ? 'success' : ''} ${withBottomMargin ? 'withBottomMargin' : ''}`}>
       {children}
     </article>
   );

From 0b2430d01d819781a93466d76074bf123a68d270 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Mon, 25 May 2020 15:44:11 +0200
Subject: [PATCH 66/74] remove word-break

---
 packages/page-claims/src/Statement.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index 2c23ed32dba6..e0ef1dba7f57 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -68,6 +68,5 @@ export default React.memo(styled(Statement)`
     width: 100%;
     margin: 1rem 0;
     white-space: normal;
-    word-break: break-all;
   }
 `);

From 9d3b773bb60679c3c93d82d53a6f14f9f149e936 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Mon, 25 May 2020 15:55:48 +0200
Subject: [PATCH 67/74] statement text in black

---
 packages/page-claims/src/Statement.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index e0ef1dba7f57..944113c3dcef 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -68,5 +68,9 @@ export default React.memo(styled(Statement)`
     width: 100%;
     margin: 1rem 0;
     white-space: normal;
+
+    p {
+      color: #4e4e4e !important
+    }
   }
 `);

From f34926553ec9e31439a40bc25758569ec7426ecd Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Mon, 25 May 2020 15:57:46 +0200
Subject: [PATCH 68/74] attestation for -> accounc balance

---
 packages/page-claims/src/Attest.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 06eee6105916..b680fc0d9e74 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -65,7 +65,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
           kind={statementKind}
           systemChain={systemChain}
         />
-        <h3><FormatBalance label={t<string>('Attestation for:')}
+        <h3><FormatBalance label={t<string>('Account balance:')}
           value={claimValue} /></h3>
         <Button.Group>
           <TxButton

From 3c0a4c326345cf527fa7a9721d5ba7694cb7a15d Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Mon, 25 May 2020 15:58:24 +0200
Subject: [PATCH 69/74] Update packages/page-claims/src/Statement.tsx

Co-authored-by: Logan Saether <x@logansaether.com>
---
 packages/page-claims/src/Statement.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index 944113c3dcef..14159c375738 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -44,7 +44,7 @@ function Statement ({ className, kind, systemChain }: Props): React.ReactElement
 
   return (
     <div className={className}>
-      {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at:')}
+      {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at: ')}
       <a href={statementUrl}
         rel='noopener noreferrer'
         target='_blank'>{statementUrl}</a>

From 1e14a20aa31e8057bcfe0c6e2ba31b6f9805f2c9 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Mon, 25 May 2020 16:06:04 +0200
Subject: [PATCH 70/74] margin left instead of space

---
 packages/page-claims/src/Statement.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index 14159c375738..73bebac67a4f 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -44,8 +44,9 @@ function Statement ({ className, kind, systemChain }: Props): React.ReactElement
 
   return (
     <div className={className}>
-      {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at: ')}
-      <a href={statementUrl}
+      {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at:')}
+      <a className='statementUrl'
+        href={statementUrl}
         rel='noopener noreferrer'
         target='_blank'>{statementUrl}</a>
       <div className='statement'>
@@ -73,4 +74,8 @@ export default React.memo(styled(Statement)`
       color: #4e4e4e !important
     }
   }
+
+  .statementUrl{
+    margin-left: 0.3rem
+  }
 `);

From 93b4777d38439b051ecd110d36f3261f0425f432 Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Mon, 25 May 2020 16:28:13 +0200
Subject: [PATCH 71/74] I agree

---
 packages/page-claims/src/Attest.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index b680fc0d9e74..5416278c0fdb 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -73,7 +73,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
             icon='send'
             isDisabled={!statementSentence}
             isPrimary
-            label={t<string>('Attest')}
+            label={t<string>('I agree')}
             onSuccess={onSuccess}
             params={[statementSentence]}
             tx='claims.attest'

From a800d9ceb862090088e6b4472d2e62ee165e705d Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 25 May 2020 18:22:56 +0200
Subject: [PATCH 72/74] Use iframe

---
 packages/page-claims/src/Statement.tsx        |  21 +--
 .../src/statements/polkadot/regular.tsx       | 144 -----------------
 .../src/statements/polkadot/saft.tsx          | 148 ------------------
 3 files changed, 11 insertions(+), 302 deletions(-)
 delete mode 100644 packages/page-claims/src/statements/polkadot/regular.tsx
 delete mode 100644 packages/page-claims/src/statements/polkadot/saft.tsx

diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index 73bebac67a4f..3101c8d44d85 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -7,8 +7,6 @@ import { StatementKind } from '@polkadot/types/interfaces';
 import React from 'react';
 import styled from 'styled-components';
 
-import PolkadotRegular from './statements/polkadot/regular';
-import PolkadotSaft from './statements/polkadot/saft';
 import { useTranslation } from './translate';
 import { getStatement } from './util';
 
@@ -19,18 +17,16 @@ export interface Props {
 }
 
 // Get the full hardcoded text for a statement
-function StatementFullText ({ kind, systemChain }: { kind?: StatementKind; systemChain: string }): React.ReactElement | null {
+function StatementFullText ({ statementUrl, systemChain }: { statementUrl?: string; systemChain: string }): React.ReactElement | null {
   const { t } = useTranslation();
 
   switch (systemChain) {
     case 'Polkadot CC1': {
-      if (!kind) {
+      if (!statementUrl) {
         return null;
       }
 
-      return kind.isRegular
-        ? <PolkadotRegular />
-        : <PolkadotSaft />;
+      return <iframe src={statementUrl} />;
     }
 
     default:
@@ -51,7 +47,7 @@ function Statement ({ className, kind, systemChain }: Props): React.ReactElement
         target='_blank'>{statementUrl}</a>
       <div className='statement'>
         <StatementFullText
-          kind={kind}
+          statementUrl={statementUrl}
           systemChain={systemChain}
         />
       </div>
@@ -64,14 +60,19 @@ export default React.memo(styled(Statement)`
     border: 1px solid #c2c2c2;
     background: #f2f2f2;
     height: 15rem;
-    overflow-y: scroll;
     padding: 1rem;
     width: 100%;
     margin: 1rem 0;
     white-space: normal;
 
     p {
-      color: #4e4e4e !important
+      color: #4e4e4e !important;
+    }
+
+    iframe {
+      border: 0;
+      height: 100%;
+      width: 100%;
     }
   }
 
diff --git a/packages/page-claims/src/statements/polkadot/regular.tsx b/packages/page-claims/src/statements/polkadot/regular.tsx
deleted file mode 100644
index 51a4b8f80ecf..000000000000
--- a/packages/page-claims/src/statements/polkadot/regular.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-claims authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-
-// Copy-pasted from https://statement.polkadot.network/regular.html
-function RegularStatement (): React.ReactElement {
-  return (
-    <>
-      <p className='bold_text'>Statement</p>
-
-      <p className='bold_text'>Please read these terms and conditions carefully.</p>
-      <p className='bold_text'>By submitting this statement, you are deemed to have accepted these Terms
-      and Conditions. If you do not agree to these terms, please refrain from
-accessing or proceeding.</p>
-      <p>By submitting this statement signed with the private key of either (i) the Ethereum
-      address to which future DOTs would be allocated pursuant to a signed DOT allocation
-      agreement made by and between the Web 3.0 Technologies Foundation (the
-      “Foundation”) and the Contributor (as defined below) (the “DOT Allocation
-      Agreement”), or (ii) the Polkadot address corresponding to the Ethereum address to
-      which future DOTs would be allocated pursuant to the DOT Allocation Agreement (the
-      applicable submitted key described in clauses (i) or (ii), the “Key”), and for good and
-      valuable consideration, the receipt and sufficiency of which are hereby acknowledged,
-      and with the intent to be legally bound hereby, the natural person or legal entity
-      submitting the Key (the “Contributor”) hereby represents, warrants and covenants, in
-      each case, as applicable, to, and for the benefit of, the Foundation (each, a
-“Certification” and, collectively, the “Certifications”) that:</p>
-      <ul>
-        <li>if the Contributor is a legal entity:
-          <ul>
-            <li>the Contributor (i) is duly organized (or applicable legal equivalent),
-            validly existing and in good standing (or applicable legal equivalent)
-            under the laws of its jurisdiction or organization (or applicable legal
-            equivalent), and (ii) has all requisite organizational power and authority
-            (x) to make each of the Certifications, (ii) to perform each of its
-            obligations hereunder and under the DOT Allocation Agreement, (iii) to
-            submit the Key and (iv) to consummate all of the transactions
-            contemplated by any of the foregoing clauses (i) through and including
-    (iii) to be consummated by it;</li>
-
-            <li>none of (i) the making by the Contributor of each of the Certifications, (ii)
-            the performance by the Contributor of each of its obligations hereunder
-            and under the DOT Allocation Agreement, (iii) the submission by the
-            Contributor of the Key or (iv) the consummation of any of the
-            transactions contemplated by any of the foregoing clauses (i) through
-            and including (iii) to be consummated by it, will conflict with or violate (x)
-            any of the terms of any organizational document of the Contributor, or
-    (y) any applicable law of the Contributor’s jurisdiction of organization;</li>
-
-            <li>each of (i) the making by the Contributor of each of the Certifications, (ii)
-            the performance by the Contributor of each of its obligations hereunder
-            and under the DOT Allocation Agreement, (iii) the submission the
-            Contributor of the Key or (iv) the consummation of any of the
-            transactions contemplated by any of the foregoing clauses (i) through
-            and including (iii), has been duly authorized and approved by all requisite
-            organizational action of the Contributor, such authorization remains in
-    full force and effect on and as of the date hereof;</li>
-          </ul>
-        </li>
-
-        <li>the Contributor is the original purchaser of DOT allocations under the DOT
-Allocation Agreement;</li>
-
-        <li>the Contributor continues to and will continue to own both the Ethereum
-address and the Polkadot address used to create the Polkadot address;</li>
-
-        <li>the Contributor is a party to and is legally bound by the DOT Allocation
-        Agreement and any terms or agreements incorporated by reference therein and
-        agrees that this Certification is valid, legally binding and enforceable against
-the Contributor;</li>
-
-        <li>the Contributor is neither a citizen, resident nor tax resident of the United States
-        of America (hereinafter referred to as the “U.S.”) or otherwise a “U.S. person”
-        (as defined in Rule 902 of Regulation S under the U.S. Securities Act of 1933,
-        as amended (the “U.S. Securities Act”)), and the Contributor is not otherwise
-present or located in the U.S. on the date hereof;</li>
-
-        <li>the Contributor understands that neither the DOT Allocation Agreement nor any
-        DOTs to be allocated thereunder have been, or will be, registered under the
-        U.S. Securities Act, and that each of the DOT Allocation Agreement and the
-        DOTs to be allocated thereunder constitute securities under the U.S. Securities
-Act;</li>
-
-        <li>the Contributor purchased DOT allocations pursuant to the DOT Allocation
-        Agreement solely for the Contributor’s own benefit and account, for the
-        purposes of personal consumption and utilization of DOTs on the Polkadot
-        Network and not for any speculative purpose or with an expectation of profit,
-        and not with a view to, or for resale in connection with, a public offering or other
-        distribution of DOTs, whether in exchange for other any other digital asset, any
-        currency, any security or otherwise, and all of the foregoing remains true,
-accurate and complete on and as of the date hereof;</li>
-
-        <li>(i) the documents provided by the Contributor to the Foundation to verify the
-        identity of the Contributor for the purpose of the completion by the Foundation,
-        or its duly authorized agent or designee, of know-your-customer (“KYC”) and
-        anti-money laundering (“AML”) checks conducted in accordance with
-        applicable law at the time of the Contributor’s entry into the DOT Allocation
-        Agreement (collectively, the “Original Identity Verification Documents”) remain
-        true and accurate in all respects on and as of the date hereof, or (ii) if any
-        Original Identity Verification Document is not true and accurate on and as of
-        the date hereof, the Contributor has submitted to the Foundation replacement
-        identity verification documentation (collectively, the “Replacement Identity
-        Verification Documents,” and, together with the Original Identity Verification
-        Documents, collectively, the “Identity Verification Documentation”), in each
-        case, that are (x) true and accurate on and as of the date hereof and (y)
-        sufficient (as reasonably determined by the Foundation) to permit the
-Foundation or its agent or designee to conduct KYC and AML checks;</li>
-
-        <li>the Contributor hereby authorizes the Foundation, or its duly authorized agent
-        or designee, to use the Identity Verification Documentation to conduct such new
-        KYC and AML checks as may be deemed by the Foundation to be necessary
-or advisable in order to comply with applicable law;</li>
-
-        <li>the Contributor understands and agrees that the Foundation (i) will not honor
-        any sale or other transfers of any DOT allocation agreements (including the
-        DOT Allocation Agreement) or any allocations for future DOTs thereunder, (ii)
-        is relying upon the Certifications (without independent investigation) to comply
-        with applicable law and (iii) the inaccuracy or incompleteness of any of the
-        Certifications will result in material financial, reputational and legal harm to the
-Foundation and the Polkadot Network; and</li>
-
-        <li>each of the representations and warranties made by it in or otherwise pursuant
-        to the DOT Allocation Agreement remain true, correct and complete on and as
-        of the date hereof (except, in each case, to the extent that any such
-        representation or warranty expressly relates to an earlier date, in which case
-        such representation or warranty shall be true, correct and complete on and as
-of such earlier date).</li>
-
-        <li>Applicable law and jurisdiction: These terms and conditions shall be governed
-        by and construed in accordance with the substantive laws of Switzerland
-        without any reference to its conflict of law provisions. The provisions of the
-        United Nation Convention on contracts for the International Sale of Goods
-(CISG) shall not apply.</li>
-
-        <li>Any disputes arising out of or in connection with these terms and conditions
-        and contracts entered into thereunder shall be submitted to the sole and
-exclusive jurisdiction of the courts of the city of Zug, Switzerland.</li>
-      </ul>
-    </>
-  );
-}
-
-export default React.memo(RegularStatement);
diff --git a/packages/page-claims/src/statements/polkadot/saft.tsx b/packages/page-claims/src/statements/polkadot/saft.tsx
deleted file mode 100644
index df7c72018831..000000000000
--- a/packages/page-claims/src/statements/polkadot/saft.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-claims authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-
-// Copy-pasted from https://statement.polkadot.network/saft.html
-function SaftStatement (): React.ReactElement {
-  return (
-    <>
-      <p className='bold_text'>SAFT statement</p>
-
-      <p className='bold_text'>Please read these terms and conditions carefully.
-
-      </p><p className='bold_text'>By submitting this statement, you are deemed to have accepted these Terms
-      and Conditions. If you do not agree to these terms, please refrain from
-accessing or proceeding.</p>
-
-      <p>By submitting this statement signed with the private key of either (i) the Ethereum
-      address to which future DOTs would be allocated pursuant to a signed Simple
-      Agreement for Future Tokens (the “SAFT”) made by and between the Web 3.0
-      Technologies Foundation (the “Foundation”) and the Contributor (as defined below)
-      (the “DOT Allocation Agreement”), or (ii) the Polkadot address corresponding to the
-      Ethereum address to which future DOTs would be allocated pursuant to the SAFT (the
-      applicable submitted key described in clauses (i) or (ii), the “Key”), and for good and
-      valuable consideration, the receipt and sufficiency of which are hereby acknowledged,
-      and with the intent to be legally bound hereby, the natural person or legal entity
-      submitting the Key (the “Contributor”) hereby represents, warrants and covenants, in
-      each case, as applicable, to, and for the benefit of, the Foundation (each, a
-“Certification” and, collectively, the “Certifications”) that:</p>
-
-      <ul>
-        <li>if the Contributor is a legal entity:
-
-          <ul>
-            <li>the Contributor (i) is duly organized (or applicable legal equivalent),
-            validly existing and in good standing (or applicable legal equivalent)
-            under the laws of its jurisdiction or organization (or applicable legal
-            equivalent), and (ii) has all requisite organizational power and authority
-            (x) to make each of the Certifications, (ii) to perform each of its
-            obligations under the SAFT, (iii) to submit the Key and (iv) to
-            consummate all of the transactions contemplated by any of the foregoing
-  clauses (i) through and including (iii) to be consummated by it;</li>
-
-            <li>none of (i) the making by the Contributor of each of the Certifications, (ii)
-            the performance by the Contributor of each of its obligations hereunder
-            and under the SAFT, (iii) the submission by the Contributor of the Key
-            or (iv) the consummation of any of the transactions contemplated by any
-            of the foregoing clauses (i) through and including (iii) to be consummated
-            by it, will conflict with or violate (x) any of the terms of any organizational
-            document of the Contributor, or (y) any applicable law of the
-  Contributor’s jurisdiction of organization;</li>
-
-            <li>each of (i) the making by the Contributor of each of the Certifications, (ii)
-            the performance by the Contributor of each of its obligations hereunder
-            and under the SAFT, (iii) the submission the Contributor of the Key or
-            (iv) the consummation of any of the transactions contemplated by any of
-            the foregoing clauses (i) through and including (iii), has been duly
-            authorized and approved by all requisite organizational action of the
-            Contributor, such authorization remains in full force and effect on and as
-  of the date hereof;</li>
-          </ul>
-        </li>
-
-        <li>the Contributor is the original purchaser of DOT allocations under the SAFT;</li>
-
-        <li>the Contributor continues to and will continue to own both the Ethereum
-address and the Polkadot address used to create the Polkadot address;</li>
-
-        <li>the Contributor is a party to and is legally bound by the SAFT and any terms or
-        agreements incorporated by reference therein and agrees that this Certification
-is valid, legally binding and enforceable against the Contributor;</li>
-
-        <li>the Contributor is an “accredited investor” (as defined in Rule 501 of Regulation
-        D under the U.S. Securities Act of 1933, as amended (the “U.S. Securities
-Act”)), on and as of the date hereof;</li>
-
-        <li>the Contributor understands that neither the SAFT nor any DOTs to be
-        allocated thereunder have been, or will be, registered under the U.S. Securities
-        Act, and that each of the SAFT and the DOTs to be allocated thereunder
-constitute securities under the U.S. Securities Act;</li>
-
-        <li>the Contributor purchased DOT allocations pursuant to the SAFT solely for the
-        Contributor’s own benefit and account, for the purposes of personal
-        consumption and utilization of DOTs on the Polkadot Network and not for any
-        speculative purpose or with an expectation of profit, and not with a view to, or
-        for resale in connection with, a public offering or other distribution of DOTs,
-        whether in exchange for other any other digital asset, any currency, any security
-        or otherwise, and all of the foregoing remains true, accurate and complete on
-and as of the date hereof;</li>
-
-        <li>the Contributor purchased DOT allocations solely for its own benefit and
-        account, including through the consumption and utilization of DOTs on the
-        Polkadot Network, and not with a view to, or for resale in connection with, a
-        public offering or other distribution of DOTs, whether in exchange for other any
-other digital asset, any currency, any security or otherwise;</li>
-
-        <li>(i) the documents provided by the Contributor to the Foundation to verify the
-        identity of the Contributor for the purpose of the completion by the Foundation,
-        or its duly authorized agent or designee, of know-your-customer (“KYC”) and
-        anti-money laundering (“AML”) checks conducted in accordance with
-        applicable law at the time of the Contributor’s entry into the DOT Allocation
-        Agreement (collectively, the “Original Identity Verification Documents”) remain
-        true and accurate in all respects on and as of the date hereof, or (ii) if any
-        Original Identity Verification Document is not true and accurate on and as of
-        the date hereof, the Contributor has submitted to the Foundation replacement
-        identity verification documentation (collectively, the “Replacement Identity
-        Verification Documents,” and, together with the Original Identity Verification
-        Documents, collectively, the “Identity Verification Documentation”), in each
-        case, that are (x) true and accurate on and as of the date hereof and (y)
-        sufficient (as reasonably determined by the Foundation) to permit the
-Foundation or its agent or designee to conduct KYC and AML checks;</li>
-
-        <li>the Contributor hereby authorizes the Foundation, or its duly authorized agent
-        or designee, to use the Identity Verification Documentation to conduct such new
-        KYC and AML checks as may be deemed by the Foundation to be necessary
-or advisable in order to comply with applicable law;</li>
-
-        <li>the Contributor understands and agrees that the Foundation (i) will not honor
-        any sale or other transfers of any DOT allocation agreements (including the
-        SAFT) or any allocations for future DOTs thereunder, (ii) is relying upon the
-        Certifications (without independent investigation) to comply with applicable law
-        and (iii) the inaccuracy or incompleteness of any of the Certifications will result
-        in material financial, reputational and legal harm to the Foundation and the
-Polkadot Network; and</li>
-
-        <li>the Contributor hereby certifies that each of the representations and warranties
-        made by it in or otherwise pursuant to the SAFT remains true, correct and
-        complete on and as of the date hereof (except, in each case, to the extent that
-        any such representation or warranty expressly relates to an earlier date, in
-        which case such representation or warranty shall be true, correct and complete
-on and as of such earlier date).</li>
-
-        <li>Applicable law and jurisdiction: These terms and conditions shall be governed
-        by and construed in accordance with the substantive laws of Switzerland
-        without any reference to its conflict of law provisions. The provisions of the
-        United Nation Convention on contracts for the International Sale of Goods
-(CISG) shall not apply.</li>
-
-        <li>Any disputes arising out of or in connection with these terms and conditions and
-        contracts entered into thereunder shall be submitted to the sole and exclusive
-jurisdiction of the courts of the city of Zug, Switzerland.</li>
-      </ul>
-    </>
-  );
-}
-
-export default React.memo(SaftStatement);

From e5d7d604b53f504397e4e37532a5ba85c65cf78e Mon Sep 17 00:00:00 2001
From: thib <thibaut.sardan@gmail.com>
Date: Mon, 25 May 2020 19:34:41 +0200
Subject: [PATCH 73/74] update saft to
 QmXEkMahfhHJPzT3RjkXiZVFi77ZeVeuxtAjhojGRNYckz

---
 packages/page-claims/src/util.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index 78f113adb3a0..28c9a1e6d95b 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -129,8 +129,8 @@ export function getStatement (network: string, kind?: StatementKind | null): Sta
           url: 'https://statement.polkadot.network/regular.html'
         }
         : {
-          hash: 'Qmawwbu1KeZ46peRspbsTUot8Lq6KcHutuiUKJ142N4Reg',
-          sentence: 'I hereby agree to the terms of the statement whose SHA-256 multihash is Qmawwbu1KeZ46peRspbsTUot8Lq6KcHutuiUKJ142N4Reg. (This may be found at the URL: https://statement.polkadot.network/saft.html)',
+          hash: 'QmXEkMahfhHJPzT3RjkXiZVFi77ZeVeuxtAjhojGRNYckz',
+          sentence: 'I hereby agree to the terms of the statement whose SHA-256 multihash is QmXEkMahfhHJPzT3RjkXiZVFi77ZeVeuxtAjhojGRNYckz. (This may be found at the URL: https://statement.polkadot.network/saft.html)',
           url: 'https://statement.polkadot.network/saft.html'
         };
     }

From 96981576a1ff25b522c83d05ebdd6b167a313bcd Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Tue, 26 May 2020 11:40:52 +0200
Subject: [PATCH 74/74] remove hash and duplications (#2814)

---
 packages/page-claims/src/util.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/page-claims/src/util.ts b/packages/page-claims/src/util.ts
index 28c9a1e6d95b..36dc75f953ca 100644
--- a/packages/page-claims/src/util.ts
+++ b/packages/page-claims/src/util.ts
@@ -110,7 +110,6 @@ export function recoverFromJSON (signatureJson: string | null): RecoveredSignatu
 }
 
 export interface Statement {
-  hash: string;
   sentence: string;
   url: string;
 }
@@ -122,17 +121,18 @@ export function getStatement (network: string, kind?: StatementKind | null): Sta
         return undefined;
       }
 
-      return kind.isRegular
-        ? {
-          hash: 'Qmc1XYqT6S39WNp2UeiRUrZichUWUPpGEThDE6dAb3f6Ny',
-          sentence: 'I hereby agree to the terms of the statement whose SHA-256 multihash is Qmc1XYqT6S39WNp2UeiRUrZichUWUPpGEThDE6dAb3f6Ny. (This may be found at the URL: https://statement.polkadot.network/regular.html)',
-          url: 'https://statement.polkadot.network/regular.html'
-        }
-        : {
-          hash: 'QmXEkMahfhHJPzT3RjkXiZVFi77ZeVeuxtAjhojGRNYckz',
-          sentence: 'I hereby agree to the terms of the statement whose SHA-256 multihash is QmXEkMahfhHJPzT3RjkXiZVFi77ZeVeuxtAjhojGRNYckz. (This may be found at the URL: https://statement.polkadot.network/saft.html)',
-          url: 'https://statement.polkadot.network/saft.html'
-        };
+      const url = kind.isRegular
+        ? 'https://statement.polkadot.network/regular.html'
+        : 'https://statement.polkadot.network/saft.html';
+
+      const hash = kind.isRegular
+        ? 'Qmc1XYqT6S39WNp2UeiRUrZichUWUPpGEThDE6dAb3f6Ny'
+        : 'QmXEkMahfhHJPzT3RjkXiZVFi77ZeVeuxtAjhojGRNYckz';
+
+      return {
+        sentence: `I hereby agree to the terms of the statement whose SHA-256 multihash is ${hash}. (This may be found at the URL: ${url})`,
+        url
+      };
     }
 
     default: