update codeblock and move to new file

src/components/CodeBlock.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { IconButton } from './Container';
+import CopyIcon from './icons/CopyIcon';
+import React, { useState } from 'react';
+import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+import TickIcon from './icons/TickIcon';
+import EnteSpinner from './EnteSpinner';
+
+const Wrapper = styled.div`
+    position: relative;
+`;
+const CopyButtonWrapper = styled(IconButton)`
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    background: none !important;
+    margin: 10px;
+`;
+
+export const CodeWrapper = styled.div<{ height?: string }>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #1a1919;
+    height: ${(props) => props.height};
+    padding: 37px 40px 20px 20px;
+    color: white;
+    margin: 20px 0;
+    width: 100%;
+`;
+
+const FreeFlowText = styled.div`
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    min-width: 30%;
+    text-align: left;
+`;
+
+type Iprops = React.PropsWithChildren<{
+    code: string;
+    height?: string;
+}>;
+export const CodeBlock = (props: Iprops) => {
+    const [copied, setCopied] = useState<boolean>(false);
+
+    const copyToClipboardHelper = (text: string) => () => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+    };
+    const RenderCopiedMessage = (props) => {
+        const { style, ...rest } = props;
+        return (
+            <Tooltip
+                {...rest}
+                style={{ ...style, zIndex: 2001 }}
+                id="button-tooltip">
+                copied
+            </Tooltip>
+        );
+    };
+    return (
+        <Wrapper>
+            <CodeWrapper height={props?.height || 'auto'}>
+                {props.code ? (
+                    <FreeFlowText>{props.code}</FreeFlowText>
+                ) : (
+                    <EnteSpinner />
+                )}
+            </CodeWrapper>
+            {props.code && (
+                <OverlayTrigger
+                    show={copied}
+                    placement="bottom"
+                    trigger={'click'}
+                    overlay={RenderCopiedMessage}
+                    delay={{ show: 200, hide: 800 }}>
+                    <CopyButtonWrapper
+                        onClick={copyToClipboardHelper(props.code)}
+                        style={{
+                            background: 'none',
+                            ...(copied ? { color: '#51cd7c' } : {}),
+                        }}>
+                        {copied ? <TickIcon /> : <CopyIcon />}
+                    </CopyButtonWrapper>
+                </OverlayTrigger>
+            )}
+        </Wrapper>
+    );
+};

src/components/RecoveryKeyModal.tsx

@@ -3,30 +3,11 @@ import { downloadAsFile } from 'utils/file';
 import { getRecoveryKey } from 'utils/crypto';
 import constants from 'utils/strings/constants';
 import MessageDialog from './MessageDialog';
-import EnteSpinner from './EnteSpinner';
-import styled from 'styled-components';
+import { CodeBlock } from './CodeBlock';
 const bip39 = require('bip39');
 // mobile client library only supports english.
 bip39.setDefaultWordlist('english');
-export const CodeBlock = styled.div<{ height: number }>`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #1a1919;
-    height: ${(props) => props.height}px;
-    padding-left: 30px;
-    padding-right: 20px;
-    color: white;
-    margin: 20px 0;
-    width: 100%;
-`;
 
-export const FreeFlowText = styled.div`
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    min-width: 30%;
-    text-align: left;
-`;
 interface Props {
     show: boolean;
     onHide: () => void;
@@ -76,13 +57,7 @@ function RecoveryKeyModal({ somethingWentWrong, ...props }: Props) {
                 },
             }}>
             <p>{constants.RECOVERY_KEY_DESCRIPTION}</p>
-            <CodeBlock height={150}>
-                {recoveryKey ? (
-                    <FreeFlowText>{recoveryKey}</FreeFlowText>
-                ) : (
-                    <EnteSpinner />
-                )}
-            </CodeBlock>
+            <CodeBlock height={'150px'} code={recoveryKey} />
             <p>{constants.KEY_NOT_STORED_DISCLAIMER}</p>
         </MessageDialog>
     );

src/pages/two-factor/setup/index.tsx

@@ -1,6 +1,5 @@
 import EnteSpinner from 'components/EnteSpinner';
 import LogoImg from 'components/LogoImg';
-import { CodeBlock, FreeFlowText } from 'components/RecoveryKeyModal';
 import { DeadCenter } from 'pages/gallery';
 import React, { useContext, useEffect, useState } from 'react';
 import { Button, Card } from 'react-bootstrap';
@@ -16,6 +15,7 @@ import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
 import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
 import { PAGES } from 'constants/pages';
 import { TwoFactorSecret } from 'types/user';
+import { CodeBlock } from 'components/CodeBlock';
 
 enum SetupMode {
     QR_CODE,
@@ -121,15 +121,10 @@ export default function SetupTwoFactor() {
                                         constants.TWO_FACTOR_MANUAL_CODE_INSTRUCTION
                                     }
                                 </p>
-                                <CodeBlock height={100}>
-                                    {!twoFactorSecret ? (
-                                        <EnteSpinner />
-                                    ) : (
-                                        <FreeFlowText>
-                                            {twoFactorSecret.secretCode}
-                                        </FreeFlowText>
-                                    )}
-                                </CodeBlock>
+                                <CodeBlock
+                                    height={'100px'}
+                                    code={twoFactorSecret.secretCode}
+                                />
                                 <Button
                                     block
                                     variant="link"