Merge pull request #217 from tloncorp/james/land-936-landscape-surfac…

…e-code-button

ui/package.json

@@ -61,9 +61,10 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.3",
     "react-hook-form": "^7.38.0",
-    "react-router-dom": "^6.11.2",
     "react-image-size": "^2.0.2",
+    "react-router-dom": "^6.11.2",
     "slugify": "^1.6.0",
+    "usehooks-ts": "^2.9.1",
     "zustand": "^3.7.2"
   },
   "devDependencies": {

ui/src/components/ShipCode.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent, useState } from 'react';
+import useAccessKey from '@/state/code';
+import { useCopy } from '@/logic/utils';
+
+export const ShipCode: FunctionComponent = () => {
+  const { code } = useAccessKey();
+  const [show, setShow] = useState(false);
+
+  const { didCopy, doCopy } = useCopy(code);
+
+  return show ? (
+    <div className="flex items-center justify-between rounded bg-gray-100 p-3">
+      <pre>{code}</pre>
+      <button className="small-button" onClick={doCopy}>
+        {didCopy ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  ) : (
+    <button className="button" onClick={() => setShow(true)}>
+      Show Access Key
+    </button>
+  );
+};

ui/src/logic/utils.ts

@@ -10,6 +10,8 @@ import { findLast } from 'lodash';
 import { hsla, parseToHsla, parseToRgba } from 'color2k';
 import _ from 'lodash';
 import { differenceInDays, endOfToday, format } from 'date-fns';
+import { useCopyToClipboard } from 'usehooks-ts';
+import { useCallback, useState } from 'react';
 
 export const useMockData = import.meta.env.MODE === 'mock';
 
@@ -150,3 +152,28 @@ export async function asyncWithDefault<T>(
     return def;
   }
 }
+
+export function useCopy(copied: string) {
+  const [didCopy, setDidCopy] = useState(false);
+  const [, copy] = useCopyToClipboard();
+
+  const doCopy = useCallback(async () => {
+    let success = false;
+    success = await copy(copied);
+    setDidCopy(success);
+
+    let timeout: NodeJS.Timeout;
+    if (success) {
+      timeout = setTimeout(() => {
+        setDidCopy(false);
+      }, 2000);
+    }
+
+    return () => {
+      setDidCopy(false);
+      clearTimeout(timeout);
+    };
+  }, [copied, copy]);
+
+  return { doCopy, didCopy };
+}

ui/src/preferences/about-system/AboutSystem.tsx

@@ -14,6 +14,7 @@ import { usePike, useLag } from '../../state/kiln';
 import useVereState from '../../state/vere';
 import { disableDefault, pluralize } from '@/logic/utils';
 import { UpdatePreferences } from './UpdatePreferences';
+import { ShipCode } from '@/components/ShipCode';
 
 function getHash(pike: Pike): string {
   const parts = pike.hash.split('.');
@@ -30,9 +31,9 @@ export const AboutSystem = () => {
   const lag = useLag();
 
   const vere = useVereState.getState();
-  const {isLatest, vereVersion, latestVereVersion, loaded} = vere;
+  const { isLatest, vereVersion, latestVereVersion, loaded } = vere;
 
-  const runtimeUpToDate = (!loaded || isLatest)
+  const runtimeUpToDate = !loaded || isLatest;
 
   return (
     <>
@@ -57,7 +58,10 @@ export const AboutSystem = () => {
                   <p className="text-orange-500">
                     System update failed because your runtime was out of date.
                   </p>
-                  <p>Your runtime version is {vereVersion}, the latest runtime version is {latestVereVersion}.</p>
+                  <p>
+                    Your runtime version is {vereVersion}, the latest runtime
+                    version is {latestVereVersion}.
+                  </p>
                   <p>Update your runtime or contact your hosting provider.</p>
                   <p>Once your runtime is up to date, click retry below.</p>
                   <Button variant="caution" onClick={freezeApps}>
@@ -145,24 +149,42 @@ export const AboutSystem = () => {
               )}
             </>
           ) : (
-              <>
-                  {runtimeUpToDate ?
-                   <>
-                       <p>Urbit Runtime Version {vereVersion}</p>
-                       <p>Your urbit is up to date.</p>
-                   </> :
-                   <>
-                       <p className="text-orange-500">Your runtime version is {vereVersion}, the latest runtime version is {latestVereVersion}.</p>
-                       <p className="text-orange-500">
-                           <a className="text-blue-500 font-bold" href="https://operators.urbit.org/manual/os/updates#runtime-updates">Update your runtime </a>
-                           or contact your hosting provider.</p>
-                   </>
-                  }
-              </>
+            <>
+              {runtimeUpToDate ? (
+                <>
+                  <p>Urbit Runtime Version {vereVersion}</p>
+                  <p>Your urbit is up to date.</p>
+                </>
+              ) : (
+                <>
+                  <p className="text-orange-500">
+                    Your runtime version is {vereVersion}, the latest runtime
+                    version is {latestVereVersion}.
+                  </p>
+                  <p className="text-orange-500">
+                    <a
+                      className="font-bold text-blue-500"
+                      href="https://operators.urbit.org/manual/os/updates#runtime-updates"
+                    >
+                      Update your runtime{' '}
+                    </a>
+                    or contact your hosting provider.
+                  </p>
+                </>
+              )}
+            </>
           )}
         </div>
       </div>
       <UpdatePreferences />
+      <div className="inner-section relative mt-4 space-y-8">
+        <h2 className="h3">Access Key</h2>
+        <p className="leading-5">
+          Reveal or show your Landscape Access Key below to sign in to other
+          browsers and mobile applications.
+        </p>
+        <ShipCode />
+      </div>
     </>
   );
 };

ui/src/state/code.ts

@@ -0,0 +1,30 @@
+import api from '../api';
+import { useState, useEffect } from 'react';
+import { deSig } from '@urbit/aura';
+
+export default function useAccessKey() {
+  const [code, setCode] = useState('');
+
+  useEffect(() => {
+    (
+      api.thread({
+        inputMark: 'noun',
+        outputMark: 'ship',
+        desk: 'base',
+        threadName: 'code',
+        body: '',
+      }) as Promise<string>
+    )
+      .then((res) => {
+        const result = deSig(res);
+        setCode(result);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
+  return {
+    code: code,
+  };
+}