✨ app: add more info to card activity details

exactly · Nov 27, 2024 · ad5b68c · ad5b68c
1 parent 03e15d7
commit ad5b68c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 12 deletions.
diff --git a/.changeset/short-poems-approve.md b/.changeset/short-poems-approve.md
@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+✨ add more info to card activity details
diff --git a/src/components/activity/details/CardActivity.tsx b/src/components/activity/details/CardActivity.tsx
@@ -35,8 +35,7 @@ export default function CardActivity({ item }: { item: CreditActivity | DebitAct
           <XStack gap="$s3" alignItems="center">
             <Text emphasized subHeadline color="$uiNeutralSecondary">
               {Number(amount).toLocaleString(undefined, { maximumFractionDigits: 8, minimumFractionDigits: 0 })}
-              &nbsp;
-              {currency}
+              &nbsp;{currency}
             </Text>
           </XStack>
         </YStack>

diff --git a/src/components/activity/details/OperationDetails.tsx b/src/components/activity/details/OperationDetails.tsx
@@ -1,5 +1,9 @@
+import chain from "@exactly/common/generated/chain";
 import type { CreditActivity, DebitActivity, InstallmentsActivity } from "@exactly/server/api/activity";
+import { SquareArrowOutUpRight } from "@tamagui/lucide-icons";
+import { format } from "date-fns";
 import { setStringAsync } from "expo-clipboard";
+import { openBrowserAsync } from "expo-web-browser";
 import React from "react";
 import { Alert } from "react-native";
 import { ms } from "react-native-size-matters";
@@ -19,6 +23,23 @@ export default function OperationDetails({ item }: { item: CreditActivity | Debi
         <Separator height={1} borderColor="$borderNeutralSoft" />
       </YStack>
       <YStack gap="$s3_5">
+        <XStack justifyContent="space-between">
+          <Text emphasized footnote color="$uiNeutralSecondary">
+            ID
+          </Text>
+          <Text
+            callout
+            color="$uiNeutralPrimary"
+            onPress={() => {
+              setStringAsync(item.id).catch(handleError);
+              Alert.alert("Copied!", "The operation ID has been copied to the clipboard.");
+            }}
+            hitSlop={ms(15)}
+          >
+            {shortenAddress(item.id, 8, 8)}
+          </Text>
+        </XStack>
+
         <XStack justifyContent="space-between">
           <Text emphasized footnote color="$uiNeutralSecondary">
             Total
@@ -42,7 +63,7 @@ export default function OperationDetails({ item }: { item: CreditActivity | Debi
               {item.mode > 1 && `${(item as InstallmentsActivity).borrow.installments.length}x`}&nbsp;
               {item.mode > 1 &&
                 Number(item.amount / (item as InstallmentsActivity).borrow.installments.length).toFixed(2)}
-              &nbsp;{item.currency}
+              &nbsp;USDC
             </Text>
           </XStack>
         )}
@@ -73,19 +94,37 @@ export default function OperationDetails({ item }: { item: CreditActivity | Debi
 
         <XStack justifyContent="space-between">
           <Text emphasized footnote color="$uiNeutralSecondary">
-            ID
+            Date
           </Text>
-          <Text
-            callout
-            color="$uiNeutralPrimary"
+          <Text callout color="$uiNeutralPrimary">
+            {format(item.timestamp, "yyyy-MM-dd")}
+          </Text>
+        </XStack>
+        <XStack justifyContent="space-between">
+          <Text emphasized footnote color="$uiNeutralSecondary">
+            Time
+          </Text>
+          <Text callout color="$uiNeutralPrimary">
+            {format(item.timestamp, "HH:mm:ss")}
+          </Text>
+        </XStack>
+
+        <XStack justifyContent="space-between">
+          <Text emphasized footnote color="$uiNeutralSecondary">
+            Transaction hash
+          </Text>
+          <XStack
+            alignItems="center"
+            gap="$s3"
             onPress={() => {
-              setStringAsync(item.id).catch(handleError);
-              Alert.alert("Copied!", "The operation ID has been copied to the clipboard.");
+              openBrowserAsync(`${chain.blockExplorers?.default.url}/tx/${item.transactionHash}`).catch(handleError);
             }}
-            hitSlop={ms(15)}
           >
-            {shortenAddress(item.id, 8, 8)}
-          </Text>
+            <Text textDecorationLine="underline" callout color="$uiNeutralPrimary">
+              {shortenAddress(item.transactionHash, 7, 7)}
+            </Text>
+            <SquareArrowOutUpRight size={ms(20)} color="$uiNeutralSecondary" />
+          </XStack>
         </XStack>
       </YStack>
     </YStack>