Change account verification to the new COMM verification

src/components/verify-account/Step1.tsx

@@ -0,0 +1,39 @@
+import { Button, Input } from 'antd'
+import { FC, useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Step1Props {
+  onClaim: (agent: string) => void
+  onAbort: () => void
+}
+
+const isValidAgentName = (agent: string) => {
+  return agent.length > 3
+}
+
+export const Step1: FC<Step1Props> = ({ onClaim, onAbort }) => {
+  const [agent, setAgent] = useState<string>('')
+  const { t } = useTranslation()
+  const claim = useCallback(() => onClaim(agent), [onClaim, agent])
+  return (
+    <div>
+      <h3>{t('account.linking.step1.title')}</h3>
+      <p>{t('account.linking.step1.description')}</p>
+      <div className="input-agent-name">
+        <Input value={agent} onChange={(e) => setAgent(e.target.value)} />
+      </div>
+      <div className="verify-steps-buttons">
+        <Button className="button-default" onClick={onAbort}>
+          {t('buttons.abort')}
+        </Button>
+        <Button
+          className="claim-button"
+          onClick={claim}
+          disabled={!isValidAgentName(agent)}
+        >
+          {t('account.linking.step1.action')}
+        </Button>
+      </div>
+    </div>
+  )
+}

src/components/verify-account/Step2.tsx

@@ -0,0 +1,46 @@
+import { FC, useCallback } from 'react'
+import { Button, Input } from 'antd'
+import { Trans, useTranslation } from 'react-i18next'
+
+interface Step2Props {
+  verificationMessage: string | undefined
+  verificationAgent: string | undefined
+  onNext: () => void
+  onAbort: () => void
+}
+
+export const Step2: FC<Step2Props> = ({
+  verificationMessage,
+  verificationAgent,
+  onNext,
+  onAbort,
+}) => {
+  const { t } = useTranslation()
+  const copyToken = useCallback(async () => {
+    await navigator.clipboard.writeText(verificationMessage!)
+    onNext()
+  }, [onNext, verificationMessage])
+  return (
+    <div>
+      <h3>{t('account.linking.step2.title')}</h3>
+      <p>
+        <Trans
+          i18nKey="account.linking.step2.description"
+          values={{ agent: verificationAgent }}
+          components={{ span: <span className="verify-account-agent" /> }}
+        />
+      </p>
+      <div className="input-agent-token">
+        <Input value={verificationMessage} disabled />
+      </div>
+      <div className="verify-steps-buttons">
+        <Button className="button-default" onClick={onAbort}>
+          {t('buttons.abort')}
+        </Button>
+        <Button className="positive-action-button" onClick={copyToken}>
+          {t('account.linking.step2.action')}
+        </Button>
+      </div>
+    </div>
+  )
+}

src/components/verify-account/Step3.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+interface Step3Props {
+  onBack: () => void
+}
+
+export const Step3: FC<Step3Props> = ({ onBack }) => {
+  const { t } = useTranslation()
+  return (
+    <div>
+      <h3>{t('account.linking.step3.title')}</h3>
+      <p>{t('account.linking.step3.description')}</p>
+      <div className="verify-steps-buttons">
+        <Button className="button-default" onClick={onBack}>
+          {t('buttons.back')}
+        </Button>
+      </div>
+    </div>
+  )
+}