Add Tooltip to JSX example (#2498)

This adds a `Tooltip` component in the JSX example snap for ease of testing.
MetaMask · Jun 19, 2024 · a435bff · a435bff
1 parent ceed17d
commit a435bff
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/packages/examples/packages/jsx/snap.manifest.json b/packages/examples/packages/jsx/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "hMfqZ8Nrz8lpBhxOdId3kaND5WZrwxQd5Sx+KxjY0K8=",
+    "shasum": "VFtSPt9oGHKJZJT0+xPNssG/2ihl+rXg5gQGFTnHfrk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/jsx/src/components/Counter.tsx b/packages/examples/packages/jsx/src/components/Counter.tsx
@@ -1,5 +1,5 @@
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
-import { Bold, Button, Box, Text } from '@metamask/snaps-sdk/jsx';
+import { Bold, Button, Box, Text, Tooltip } from '@metamask/snaps-sdk/jsx';
 
 /**
  * The props for the {@link Counter} component.
@@ -10,6 +10,18 @@ export type CounterProps = {
   count: number;
 };
 
+/**
+ * A tooltip content component, which explains how to use the counter.
+ * This component is used as the content of a {@link Tooltip} component.
+ *
+ * @returns The tooltip content component.
+ */
+export const TooltipContent = () => (
+  <Text>
+    Click the <Bold>increment</Bold> button to increase the count.
+  </Text>
+);
+
 /**
  * A counter component, which shows the current count, and a button to increment
  * it by one.
@@ -21,9 +33,11 @@ export type CounterProps = {
 export const Counter: SnapComponent<CounterProps> = ({ count }) => {
   return (
     <Box>
-      <Text>
-        <Bold>Count:</Bold> {String(count)}
-      </Text>
+      <Tooltip content={<TooltipContent />}>
+        <Text>
+          <Bold>Count:</Bold> {String(count)}
+        </Text>
+      </Tooltip>
       <Button name="increment">Increment</Button>
     </Box>
   );