mobile: history op screen improvements (#709)

* mobile: make History Op usernames clickable

* stop disabling tab swipe on history op

apps/daimo-mobile/src/view/screen/HistoryOpScreen.tsx

@@ -8,12 +8,14 @@ import {
   OpStatus,
   PaymentLinkOpEvent,
   amountToDollars,
+  canSendTo,
   getAccountName,
   timeString,
 } from "@daimo/common";
 import { ChainConfig, daimoChainFromId } from "@daimo/contract";
 import React, { createContext, useCallback, useContext } from "react";
 import { Linking, StyleSheet, View } from "react-native";
+import { TouchableHighlight } from "react-native-gesture-handler";
 
 import { NoteDisplay } from "./link/NoteScreen";
 import { getCachedEAccount } from "../../logic/addr";
@@ -28,8 +30,8 @@ import { ContactBubble } from "../shared/ContactBubble";
 import { PendingDot } from "../shared/PendingDot";
 import { ScreenHeader } from "../shared/ScreenHeader";
 import Spacer from "../shared/Spacer";
-import { useDisableTabSwipe, useNav } from "../shared/nav";
-import { color, ss } from "../shared/style";
+import { navToAccountPage, useNav } from "../shared/nav";
+import { color, ss, touchHighlightUnderlay } from "../shared/style";
 import {
   TextBody,
   TextBodyCaps,
@@ -51,8 +53,6 @@ export function HistoryOpScreen(props: Props) {
 
 function HistoryOpScreenInner({ account, op }: Props) {
   const toggleBottomSheet = useContext(ToggleBottomSheetContext);
-  const nav = useNav();
-  useDisableTabSwipe(nav);
 
   // Load the latest version of this op. If the user opens the detail screen
   // while the op is pending, and it confirms, the screen should update.
@@ -171,7 +171,7 @@ function TransferBody({
   const chainName = chainConfig.chainL2.name.toUpperCase();
 
   return (
-    <View style={ss.container.padH16}>
+    <View>
       <TextCenter>
         <TextH3 color={color.grayDark}>{verb}</TextH3>
       </TextCenter>
@@ -201,9 +201,20 @@ function OpRow({ op, otherAcc }: { op: OpEvent; otherAcc: EAccount }) {
 
   const date = timeString(op.timestamp);
 
+  const nav = useNav();
+
+  const viewAccount = useCallback(() => {
+    navToAccountPage(otherAcc, nav);
+  }, [nav, otherAcc]);
+
   return (
     <View style={styles.transferBorder}>
-      <View style={styles.transferRowWrap}>
+      <TouchableHighlight
+        onPress={viewAccount}
+        disabled={!canSendTo(otherAcc)}
+        {...touchHighlightUnderlay.subtle}
+        style={styles.transferRowWrap}
+      >
         <View style={styles.transferRow}>
           <View style={styles.transferOtherAccount}>
             <ContactBubble
@@ -216,7 +227,7 @@ function OpRow({ op, otherAcc }: { op: OpEvent; otherAcc: EAccount }) {
           </View>
           <TextPara color={textLight}>{date}</TextPara>
         </View>
-      </View>
+      </TouchableHighlight>
     </View>
   );
 }

apps/daimo-mobile/src/view/shared/HistoryList.tsx

@@ -22,7 +22,7 @@ import { getAmountText } from "./Amount";
 import { ContactBubble } from "./ContactBubble";
 import { PendingDot } from "./PendingDot";
 import Spacer from "./Spacer";
-import { useNav } from "./nav";
+import { navToAccountPage, useNav } from "./nav";
 import { color, ss, touchHighlightUnderlay } from "./style";
 import { DaimoText, TextBody, TextCenter, TextLight } from "./text";
 import { getCachedEAccount } from "../../logic/addr";
@@ -207,15 +207,11 @@ function DisplayOpRow({
   const nav = useNav();
   const viewOp = useCallback(
     (isLinkToOp: boolean) => {
-      // Workaround: react-navigation typescript types are broken.
-      // currentTab is eg "SendNav", is NOT in fact a ParamListTab:
-      const currentTab = nav.getState().routes[0].name;
-      const newTab = currentTab.startsWith("Send") ? "SendTab" : "HomeTab";
       if (isLinkToOp || !canSendTo(otherAcc)) {
         toggleBottomSheet(true);
         onSelectHistoryOp(displayOp);
       } else {
-        nav.navigate(newTab, { screen: "Account", params: { eAcc: otherAcc } });
+        navToAccountPage(otherAcc, nav);
       }
     },
     [nav, displayOp, linkTo, otherAcc]

apps/daimo-mobile/src/view/shared/nav.ts

@@ -213,3 +213,12 @@ export function useFocusOnScreenTransitionEnd(
     return unsubscribe;
   }, [isFocused, autoFocus]);
 }
+
+// Open account page within the same tab.
+export function navToAccountPage(account: EAccount, nav: MainNav) {
+  // Workaround: react-navigation typescript types are broken.
+  // currentTab is eg "SendNav", is NOT in fact a ParamListTab:
+  const currentTab = nav.getState().routes[0].name;
+  const newTab = currentTab.startsWith("Send") ? "SendTab" : "HomeTab";
+  nav.navigate(newTab, { screen: "Account", params: { eAcc: account } });
+}