Success sate, instructions update

packages/page-migration/src/Migration/index.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from '../translate';
 import { isValidCheqdAddress, getCheqdAddressError } from '@polkadot/react-components/InputAddressCheqd';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';
+import MarkSuccess from '@polkadot/react-components/MarkSuccess';
 
 function convertDockToCheqd(dockBalance) {
   const swapRatio = 18.5178;
@@ -24,6 +25,7 @@ function MigrationApp ({ className }): React.ReactElement {
   const { t } = useTranslation();
   const [senderId, setSenderId] = useState<string | null>(null);
   const [cheqdId, setCheqdId] = useState<string>('');
+  const [success, setSuccess] = useState<boolean>(false);
   const [selectFromDropdown, setSelectFromDropdown] = useState<boolean>(false);
   const [cheqdAddresses, setCheqdAddresses] = useState<string[]>([]);
   const { api } = useApi();
@@ -33,6 +35,16 @@ function MigrationApp ({ className }): React.ReactElement {
   const extrinsic = api && api.tx && api.tx.cheqdMigration && api.tx.cheqdMigration.migrate(values);
   const isValid = senderId && cheqdId && isValidCheqdAddress(cheqdId);
 
+  function handleSuccess() {
+    setSuccess(true);
+  }
+
+  function handleRestart() {
+    setSuccess(false);
+    setCheqdId('');
+    setSenderId(null);
+  }
+
   async function getKepirAddresses() {
     const chainId = 'cheqd-mainnet-1';
 
@@ -50,7 +62,39 @@ function MigrationApp ({ className }): React.ReactElement {
     }
   }, []);
 
-  return (
+  return success ? (
+    <div className={`staking--Overview ${className}`}>
+      <MarkSuccess
+        className='success centered'
+        content={t<string>('Your token migration transaction has been submitted successfully.')}
+      />
+
+      <p style={{
+        fontSize: '32px',
+        fontWeight: 500,
+        marginBottom: '20px',
+        textAlign: 'center',
+      }}>
+        TRANSACTION COMPLETE
+      </p>
+
+      <p style={{
+        fontSize: '18px',
+        marginBottom: '20px',
+        textAlign: 'center',
+        maxWidth: '70%',
+        margin: '0 auto',
+      }}>
+        Your token migration transaction has been submitted successfully. Migrating your Dock balance to cheqd will zero the balance on your Dock account. The migration will take up to 1-2 business days to complete, after that the converted [if possible add the converted amount in $CHEQ] $CHEQ amount will be available in the indicated cheqd wallet. 
+        <br /><br />
+        <Button
+          icon='sync'
+          label={t<string>('Migrate another account')}
+          onClick={handleRestart}
+        />
+      </p>
+    </div>
+  ) : (
     <div className={`staking--Overview ${className}`}>
       <MarkWarning
         className='warning centered'
@@ -61,7 +105,55 @@ function MigrationApp ({ className }): React.ReactElement {
         fontSize: '18px',
         marginBottom: '20px',
       }}>
-        The Dock network is migrating its functionality and all tokens to the cheqd blockchain. This migration will allow Dock to leverage cheqd’s advanced infrastructure and bring enhanced value to both ecosystems. Existing $DOCK tokens will be converted into $CHEQ tokens, ensuring a smooth transition for all token holders.
+        The Dock network is migrating its functionality and all tokens to the cheqd blockchain. This migration will allow Dock to leverage cheqd’s advanced infrastructure and bring enhanced value to both ecosystems. Existing $DOCK tokens will be converted into $CHEQ tokens, ensuring a smooth transition for all token holders. 
+      </p>
+
+      <p style={{
+        fontSize: '18px',
+        marginBottom: '20px',
+      }}>
+        Before you start the process make sure you have a cheqd account. If you do not currently have one, <a href="https://docs.cheqd.io/product/network/wallets" target="_blank">see instructions on how to create one</a>.
+      </p>
+
+      <p style={{
+        fontSize: '18px',
+      }}>
+        To migrate your $DOCK tokens:
+      </p>
+      <ol
+        style={{
+        fontSize: '18px',
+        marginBottom: '20px',
+        lineHeight: '34px',
+      }}>
+        <li>
+          Select your Dock account. If it isn't there follow <a href="https://docs.dock.io/dock-token/dock-token-migration/adding-account-to-the-dock-browser-wallet" target="_blank">these instructions</a>.
+        </li>
+        <li>
+        Enter your cheqd account manually or connect Keplr. Connecting Keplr will allow us to confirm that the tokens are going to the cheqd account that you control. If you cannot see your Keplr accounts in the dropdown <a href="https://docs.cheqd.io/product/network/wallets/keplr-setup" target="_blank">see how to set up your Keplr wallet for cheqd</a>.
+        </li>
+        <li>
+          Accept T&Cs and click <strong>Submit</strong>
+        </li>
+        <li>
+          Authorize the transaction by entering your account password. Click Sign & Submit
+        </li>
+      </ol>
+
+      <p style={{
+        fontSize: '18px',
+        marginBottom: '20px',
+      }}>
+        The entire amount of the account will be migrated at once. After the migration request is submitted your $DOCK tokens will be burnt and you will be sent the converted CHEQD amount with <strong>Swap Ratio</strong>: 18.5178 $DOCK to 1 $CHEQ. The migration will take up to 1-2 business days to complete, after that the converted $CHEQ amount will be available in the indicated cheqd wallet.
+      </p>
+
+      <p style={{
+        fontSize: '18px',
+        marginBottom: '20px',
+      }}>
+        The migration service will only be available until <strong>February 28, 2025</strong>.
+        <br />
+        Please follow these instructions carefully and contact our team with any questions at [email protected].
       </p>
 
       <InputAddress
@@ -146,7 +238,7 @@ function MigrationApp ({ className }): React.ReactElement {
       <p style={{
         fontSize: '18px',
       }}>
-        By submitting this transaction you agree to the <a href="https://docs.dock.io/dock-token/dock-token-migration">migration terms and conditions</a>.
+        By submitting this transaction you agree to the <a href="https://docs.dock.io/dock-token/dock-token-migration/migration-terms-and-conditions">migration terms and conditions</a>.
       </p>
 
       <br />
@@ -157,6 +249,7 @@ function MigrationApp ({ className }): React.ReactElement {
           extrinsic={extrinsic}
           icon='sign-in-alt'
           isDisabled={!isValid}
+          onSuccess={handleSuccess}
           label={t<string>('Submit Transaction')}
         />
       </Button.Group>

packages/react-components/src/MarkSuccess.tsx

@@ -0,0 +1,29 @@
+// Copyright 2017-2022 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Icon from './Icon';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  content?: React.ReactNode;
+  withIcon?: boolean;
+}
+
+function MarkSuccess ({ children, className = '', content, withIcon = true }: Props): React.ReactElement<Props> {
+  return (
+    <article className={`mark success ${className}`}>
+      {withIcon && <Icon icon='check' />}{content}{children}
+    </article>
+  );
+}
+
+export default React.memo(styled(MarkSuccess)`
+  .ui--Icon {
+    color: rgb(33 124 0);
+    margin-right: 0.5rem;
+  }
+`);