fix: OnboardingScreen checkbox > lock icon

daimo-eth · Aug 11, 2023 · 87365c6 · 87365c6
1 parent 5d32ac3
commit 87365c6
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 17 deletions.
diff --git a/apps/daimo-mobile/src/action/useCreateAccount.ts b/apps/daimo-mobile/src/action/useCreateAccount.ts
@@ -79,13 +79,13 @@ export function useCreateAccount(name: string): ActHandle {
 function getKeySecurityMessage(hwSecLevel: ExpoEnclave.HardwareSecurityLevel) {
   switch (hwSecLevel) {
     case "SOFTWARE":
-      return "Key generated";
+      return "🔒  Key generated in Secure Enclave";
     case "TRUSTED_ENVIRONMENT":
       return "Key generarated in trusted hardware";
     case "HARDWARE_ENCLAVE":
       return Platform.OS === "ios"
-        ? "☑ Key generated in Secure Enclave"
-        : "☑ Key generated in Secure Element";
+        ? "🔒  Key generated in Secure Enclave"
+        : "🔒  Key generated in hardware enclave";
   }
 }
 

diff --git a/apps/daimo-mobile/src/debugLog.ts b/apps/daimo-mobile/src/debugLog.ts
@@ -25,7 +25,7 @@ function createLogFunc(type: string, oldLog: (...args: any[]) => void) {
       }
     });
     let line = [timestamp, type, ...parts].join(" ");
-    if (line.length > 500) line = line.slice(0, 500) + "...";
+    if (line.length > 5000) line = line.slice(0, 5000) + "...";
     logs.push(line);
 
     // Don't let the buffer get too long

diff --git a/apps/daimo-mobile/src/view/screen/OnboardingScreen.tsx b/apps/daimo-mobile/src/view/screen/OnboardingScreen.tsx
@@ -30,6 +30,7 @@ import { InputBig, OctName } from "../shared/Input";
 import Spacer from "../shared/Spacer";
 import { color, ss } from "../shared/style";
 import {
+  EmojiToOcticon,
   TextBody,
   TextCenter,
   TextError,
@@ -226,7 +227,11 @@ function CreateAccountPage() {
             </View>
             <TextCenter>
               {status === "error" && <TextError>{message}</TextError>}
-              {status !== "error" && <TextLight>{message}</TextLight>}
+              {status !== "error" && (
+                <TextLight>
+                  <EmojiToOcticon size={16} text={message} />
+                </TextLight>
+              )}
             </TextCenter>
           </View>
         </View>
@@ -292,18 +297,16 @@ function NamePicker({
   return (
     <View>
       <Spacer h={64} />
-      <View>
-        <InputBig
-          placeholder="choose a name"
-          value={name}
-          onChange={onChange}
-          center
-        />
-        <Spacer h={8} />
-        <TextLight>
-          <TextCenter>{status}</TextCenter>
-        </TextLight>
-      </View>
+      <InputBig
+        placeholder="choose a name"
+        value={name}
+        onChange={onChange}
+        center
+      />
+      <Spacer h={8} />
+      <TextLight>
+        <TextCenter>{status}</TextCenter>
+      </TextLight>
       <Spacer h={8} />
       <ButtonBig
         type="primary"

diff --git a/apps/daimo-mobile/src/view/shared/text.tsx b/apps/daimo-mobile/src/view/shared/text.tsx
@@ -1,3 +1,5 @@
+import { Octicons } from "@expo/vector-icons";
+import { ReactNode } from "react";
 import { Text, TextProps } from "react-native";
 
 import { ss } from "./style";
@@ -37,3 +39,27 @@ export function TextRight(props: TextProps) {
 export function TextError(props: TextProps) {
   return <Text {...props} style={ss.text.error} />;
 }
+
+type OcticonName = React.ComponentProps<typeof Octicons>["name"];
+
+const emojiToOcticon: Record<string, OcticonName> = {
+  "🔒": "lock",
+};
+
+export function EmojiToOcticon({ text, size }: { text: string; size: number }) {
+  // Split by emoji
+  const regex = new RegExp(Object.keys(emojiToOcticon).join("|"), "g");
+
+  // Replace certain emojis with octicons
+  const parts: ReactNode[] = [];
+  let match, last;
+  for (last = 0; (match = regex.exec(text)) != null; last = regex.lastIndex) {
+    const joiningPart = text.substring(last, match.index);
+    parts.push(<Text key={last}>{joiningPart}</Text>);
+    const octiconName = emojiToOcticon[match[0]];
+    parts.push(<Octicons key={last + 1} size={size} name={octiconName} />);
+  }
+  parts.push(<Text key={last}>{text.substring(last)}</Text>);
+
+  return <>{parts}</>;
+}