From 06ab4bfc795e43dc59147acd4d7ce2f7fefb4c11 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Thu, 12 Nov 2020 21:06:05 -0800
Subject: [PATCH] launch: click to copy base hash

Fixes https://github.com/urbit/landscape/issues/162
---
 pkg/interface/src/views/apps/launch/app.js | 130 +++++++++++----------
 1 file changed, 68 insertions(+), 62 deletions(-)

diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js
index aa6baba22..23019e1b1 100644
--- a/pkg/interface/src/views/apps/launch/app.js
+++ b/pkg/interface/src/views/apps/launch/app.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
 
@@ -10,6 +10,7 @@ import Tiles from './components/tiles';
 import Tile from './components/tiles/tile';
 import Welcome from './components/welcome';
 import Groups from './components/Groups';
+import { writeText } from '~/logic/lib/util';
 
 const ScrollbarLessBox = styled(Box)`
   scrollbar-width: none !important;
@@ -19,70 +20,75 @@ const ScrollbarLessBox = styled(Box)`
   }
 `;
 
-export default class LaunchApp extends React.Component {
-  render() {
-    const { props } = this;
+export default function LaunchApp(props) {
+  const [hashText, setHashText] = useState(props.baseHash);
 
-    return (
-      <>
-        <Helmet>
-          <title>OS1 - Home</title>
-        </Helmet>
-        <ScrollbarLessBox height='100%' overflowY='scroll'>
-          <Welcome firstTime={props.launch.firstTime} api={props.api} />
-          <Box
-            mx='2'
-            display='grid'
-            gridTemplateColumns='repeat(auto-fill, minmax(128px, 1fr))'
-            gridGap={3}
-            p={2}
-            pt={0}
-          >
-            <Tile
-              bg="transparent"
-              color="green"
-              to="/~landscape/home"
-              p={0}
-            >
-              <Box p={2} height='100%' width='100%' bg='green'>
-                <Row alignItems='center'>
-                  <Icon
-                    color="white"
-                    // fill="rgba(0,0,0,0)"
-                    icon="Boot"
-                  />
-                  <Text ml="1" mt='1px' color="white">DMs + Drafts</Text>
-                </Row>
-              </Box>
-            </Tile>
-            <Tiles
-              tiles={props.launch.tiles}
-              tileOrdering={props.launch.tileOrdering}
-              api={props.api}
-              location={props.userLocation}
-              weather={props.weather}
-            />
-            <Box display={["none", "block"]} width="100%" gridColumn="1 / -1"></Box>
-            <Groups groups={props.groups} associations={props.associations} />
-          </Box>
-        </ScrollbarLessBox>
+  return (
+    <>
+      <Helmet>
+        <title>OS1 - Home</title>
+      </Helmet>
+      <ScrollbarLessBox height='100%' overflowY='scroll'>
+        <Welcome firstTime={props.launch.firstTime} api={props.api} />
         <Box
-          position="absolute"
-          fontFamily="mono"
-          left="0"
-          bottom="0"
-          color="gray"
-          bg="white"
-          ml={3}
-          mb={3}
-          borderRadius={2}
-          fontSize={0}
+          mx='2'
+          display='grid'
+          gridTemplateColumns='repeat(auto-fill, minmax(128px, 1fr))'
+          gridGap={3}
           p={2}
+          pt={0}
         >
-          {props.baseHash}
+          <Tile
+            bg="transparent"
+            color="green"
+            to="/~landscape/home"
+            p={0}
+          >
+            <Box p={2} height='100%' width='100%' bg='green'>
+              <Row alignItems='center'>
+                <Icon
+                  color="white"
+                  // fill="rgba(0,0,0,0)"
+                  icon="Boot"
+                />
+                <Text ml="1" mt='1px' color="white">DMs + Drafts</Text>
+              </Row>
+            </Box>
+          </Tile>
+          <Tiles
+            tiles={props.launch.tiles}
+            tileOrdering={props.launch.tileOrdering}
+            api={props.api}
+            location={props.userLocation}
+            weather={props.weather}
+          />
+          <Box display={["none", "block"]} width="100%" gridColumn="1 / -1"></Box>
+          <Groups groups={props.groups} associations={props.associations} />
         </Box>
-      </>
-    );
-  }
+      </ScrollbarLessBox>
+      <Box
+        position="absolute"
+        fontFamily="mono"
+        left="0"
+        bottom="0"
+        color="gray"
+        bg="white"
+        ml={3}
+        mb={3}
+        borderRadius={2}
+        fontSize={0}
+        p={2}
+        cursor="pointer"
+        onClick={() => {
+          writeText(props.baseHash);
+          setHashText('copied');
+          setTimeout(() => {
+            setHashText(props.baseHash);
+          }, 2000);
+        }}
+      >
+        {hashText || props.baseHash}
+      </Box>
+    </>
+  );
 }
-