update

src/containers/Welcome.tsx

@@ -1,10 +1,34 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import styled from 'styled-components';
 import QRCode from 'react-qr-code';
 import QRReader from 'react-qr-reader'
 import useConnection from '../hooks/useConnection';
 
+const Wrapper = styled.div`
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Link = styled.input`
+  width: 300px;
+  border: none;
+  background: none;
+`;
+
 const Welcome: React.FC<{}> = () => {
+  const linkRef = useRef<any>();
   const { connect, clientInfo } = useConnection();
+  const link = useMemo(
+    () => `${location.protocol}//${location.host}${location.pathname}#${btoa(JSON.stringify(clientInfo))}`,
+    [clientInfo],
+  )
 
   const onScan = useCallback(
     (result) => {
@@ -15,6 +39,16 @@ const Welcome: React.FC<{}> = () => {
     [],
   );
 
+  const copy = useCallback(() => {
+    const text = linkRef.current;
+    if (!text) return;
+    text.focus();
+    text.select();
+    let successful = document.execCommand('copy');
+    let msg = successful ? 'successful' : 'unsuccessful';
+    alert('Copy text command was ' + msg);
+  }, [linkRef]);
+
   useEffect(() => {
     const hash = window.location.hash;
     if (hash) {
@@ -26,8 +60,7 @@ const Welcome: React.FC<{}> = () => {
   }, []);
 
   return (
-    <>
-      <div>{location.protocol}//{location.host}{location.pathname}#{btoa(JSON.stringify(clientInfo))}</div>
+    <Wrapper>
       <QRCode
         value={JSON.stringify(clientInfo)}
         size={300}
@@ -38,7 +71,8 @@ const Welcome: React.FC<{}> = () => {
         onError={(result) => { console.error(result) }}
         style={{ width: '300px', height: '300px' }}
       />
-    </>
+      <Link ref={linkRef} onFocus={copy} value={link} /> 
+    </Wrapper>
   );
 }