Show description as tooltip

crypto-bug-hunters · Oct 28, 2024 · fe0020b · fe0020b
1 parent e720639
commit fe0020b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/frontend/src/app/explore/page.tsx b/frontend/src/app/explore/page.tsx
@@ -12,14 +12,19 @@ import {
     Anchor,
     SimpleGrid,
     Group,
+    Tooltip,
 } from "@mantine/core";
 import Link from "next/link";
 import { useLatestState } from "../../model/reader";
 import { AppBounty } from "../../model/state";
 import { BountyStatusBadgeGroup } from "../../components/bountyStatus";
 import { HasConnectedAccount } from "../../components/hasConnectedAccount";
 import { useBlockTimestamp } from "../../hooks/block";
-import { getBountyStatus, getBountyTotalPrize } from "../../utils/bounty";
+import {
+    getBountyStatus,
+    getBountyTotalPrize,
+    getBountyDescription,
+} from "../../utils/bounty";
 import { useErc20Metadata, formatErc20Amount } from "../../utils/erc20";
 
 const Bounty: FC<{
@@ -45,27 +50,28 @@ const Bounty: FC<{
                     />
                 </Card.Section>
                 <Box>
-                    <Stack>
-                        <Group my="sm">
-                            <Text truncate="end" fw={700} size="lg">
+                    <Tooltip
+                        label={getBountyDescription(bounty.description, 200)}
+                        multiline={true}
+                        w={220}
+                    >
+                        <Stack>
+                            <Text truncate="end" fw={700} size="lg" mt="sm">
                                 {bounty.name}
                             </Text>
                             <BountyStatusBadgeGroup
                                 bountyStatus={bountyStatus}
                             />
-                        </Group>
-                        <Text>
-                            Total Prize:{" "}
-                            {formatErc20Amount(
-                                token,
-                                totalPrize,
-                                erc20Metadata,
-                            )}
-                        </Text>
-                    </Stack>
-                    <Text truncate="end" size="xs" c="dimmend">
-                        {bounty.description}
-                    </Text>
+                            <Text>
+                                Total Prize:{" "}
+                                {formatErc20Amount(
+                                    token,
+                                    totalPrize,
+                                    erc20Metadata,
+                                )}
+                            </Text>
+                        </Stack>
+                    </Tooltip>
                 </Box>
             </Card>
         </Anchor>

diff --git a/frontend/src/utils/bounty.tsx b/frontend/src/utils/bounty.tsx
@@ -35,3 +35,11 @@ export const getBountyTotalPrize = (bounty: AppBounty) => {
         return BigInt(0);
     }
 };
+
+export const getBountyDescription = (description: string, length: number) => {
+    if (description.length <= length) {
+        return description;
+    } else {
+        return description.slice(0, length) + " [...]";
+    }
+};