From bc586627594fad6cd3c166e11c9bc43c3a244c4b Mon Sep 17 00:00:00 2001 From: Sam Hellawell Date: Thu, 17 Oct 2024 21:20:43 +0100 Subject: [PATCH] Success sate, instructions update --- .../page-migration/src/Migration/index.tsx | 99 ++++++++++++++++++- packages/react-components/src/MarkSuccess.tsx | 29 ++++++ 2 files changed, 125 insertions(+), 3 deletions(-) create mode 100644 packages/react-components/src/MarkSuccess.tsx diff --git a/packages/page-migration/src/Migration/index.tsx b/packages/page-migration/src/Migration/index.tsx index cf20174ee33b..c2d470f37233 100644 --- a/packages/page-migration/src/Migration/index.tsx +++ b/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(null); const [cheqdId, setCheqdId] = useState(''); + const [success, setSuccess] = useState(false); const [selectFromDropdown, setSelectFromDropdown] = useState(false); const [cheqdAddresses, setCheqdAddresses] = useState([]); 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 ? ( +
+ ('Your token migration transaction has been submitted successfully.')} + /> + +

+ TRANSACTION COMPLETE +

+ +

+ 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. +

+

+ ) : (
- 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. +

+ +

+ Before you start the process make sure you have a cheqd account. If you do not currently have one, see instructions on how to create one. +

+ +

+ To migrate your $DOCK tokens: +

+
    +
  1. + Select your Dock account. If it isn't there follow these instructions. +
    2. +
  2. + 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 see how to set up your Keplr wallet for cheqd. +
    3. +
  3. + Accept T&Cs and click Submit +
    4. +
  4. + Authorize the transaction by entering your account password. Click Sign & Submit +
    5. +
+ +

+ 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 Swap Ratio: 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. +

+ +

+ The migration service will only be available until February 28, 2025. +
+ Please follow these instructions carefully and contact our team with any questions at support@dock.io.

- By submitting this transaction you agree to the migration terms and conditions. + By submitting this transaction you agree to the migration terms and conditions.


@@ -157,6 +249,7 @@ function MigrationApp ({ className }): React.ReactElement { extrinsic={extrinsic} icon='sign-in-alt' isDisabled={!isValid} + onSuccess={handleSuccess} label={t('Submit Transaction')} /> diff --git a/packages/react-components/src/MarkSuccess.tsx b/packages/react-components/src/MarkSuccess.tsx new file mode 100644 index 000000000000..560320a99116 --- /dev/null +++ b/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 { + return ( +
+ {withIcon && }{content}{children} +
+ ); +} + +export default React.memo(styled(MarkSuccess)` + .ui--Icon { + color: rgb(33 124 0); + margin-right: 0.5rem; + } +`);