Show current Snap ID

Author: Mrtenz

packages/snaps-sandbox/src/App.tsx

@@ -1,4 +1,4 @@
-import { Flex, HStack } from '@chakra-ui/react';
+import { HStack } from '@chakra-ui/react';
 import type { FunctionComponent } from 'react';
 
 import { Sandbox } from './components';
@@ -7,14 +7,6 @@ import { Sidebar } from './features/sidebar';
 export const App: FunctionComponent = () => (
   <HStack gap="0">
     <Sidebar />
-    <Flex
-      justify="center"
-      flexGrow="1"
-      maxWidth="100%"
-      minHeight="100vh"
-      paddingY="24"
-    >
-      <Sandbox />
-    </Flex>
+    <Sandbox />
   </HStack>
 );

packages/snaps-sandbox/src/components/Sandbox.tsx

@@ -1,9 +1,10 @@
-import { Box, Container, Grid, Heading, HStack } from '@chakra-ui/react';
+import { Box, Container, Grid, Heading, HStack, Stack } from '@chakra-ui/react';
 import type { FunctionComponent } from 'react';
 
 import { Request } from './Request';
 import { RequestButton } from './RequestButton';
 import { Response } from './Response';
+import { Status } from './Status.js';
 
 /**
  * The main component of the Snaps Sandbox.
@@ -12,35 +13,42 @@ import { Response } from './Response';
  */
 export const Sandbox: FunctionComponent = () => {
   return (
-    <Container width={['100%', null, null, '10/12']}>
-      <Grid
-        templateColumns="1fr 1fr"
-        templateRows="auto 1fr"
-        gap="4"
-        height="100%"
-      >
-        <HStack gap="3">
-          <Heading as="h3" size="lg">
-            Request
-          </Heading>
-          <RequestButton />
-        </HStack>
+    <Box width="100%" height="100vh" paddingY="6">
+      <Stack height="100%">
+        <Box marginX="6" alignSelf="flex-end">
+          <Status />
+        </Box>
+        <Container width={['100%', null, null, '10/12']} flexGrow="1">
+          <Grid
+            templateColumns="1fr 1fr"
+            templateRows="auto 1fr"
+            gap="4"
+            height="100%"
+          >
+            <HStack gap="3">
+              <Heading as="h3" size="lg">
+                Request
+              </Heading>
+              <RequestButton />
+            </HStack>
 
-        <Heading as="h3" size="lg">
-          Response
-        </Heading>
+            <Heading as="h3" size="lg">
+              Response
+            </Heading>
 
-        <Box
-          height="100%"
-          borderRightWidth="1px"
-          borderRightStyle="solid"
-          borderColor="gray.200"
-        >
-          <Request />
-        </Box>
+            <Box
+              height="100%"
+              borderRightWidth="1px"
+              borderRightStyle="solid"
+              borderColor="gray.200"
+            >
+              <Request />
+            </Box>
 
-        <Response />
-      </Grid>
-    </Container>
+            <Response />
+          </Grid>
+        </Container>
+      </Stack>
+    </Box>
   );
 };

packages/snaps-sandbox/src/components/Status.test.tsx

@@ -0,0 +1,60 @@
+import { act } from '@testing-library/react';
+import { createStore } from 'jotai';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+import { Status } from './Status.js';
+import { LOCAL_SNAP_ID } from '../constants';
+import { useSnaps } from '../hooks';
+import { settingsAtom } from '../state';
+import { render } from '../test-utils';
+
+vi.mock('../hooks');
+
+describe('Status', () => {
+  beforeEach(() => {
+    vi.mocked(useSnaps).mockReturnValue({
+      loading: false,
+      snaps: [],
+    });
+  });
+
+  it('renders the status component', async () => {
+    const { getByText } = await act(() => render(<Status />));
+
+    expect(getByText('local:http...lhost:3000')).toBeInTheDocument();
+  });
+
+  it('renders "No" if the Snap is not connected', async () => {
+    const { getByText } = await act(() => render(<Status />));
+
+    expect(getByText('No')).toBeInTheDocument();
+  });
+
+  it('renders "Yes" if the Snap is connected', async () => {
+    vi.mocked(useSnaps).mockReturnValue({
+      loading: false,
+      snaps: [LOCAL_SNAP_ID],
+    });
+
+    const { getByText } = await act(() => render(<Status />));
+
+    expect(getByText('Yes')).toBeInTheDocument();
+  });
+
+  it(`renders the full snap ID if it's less than 20 characters`, async () => {
+    const store = createStore();
+    store.set(settingsAtom, {
+      snapId: 'npm:short-id',
+      useCurrentSnapId: false,
+    });
+
+    vi.mocked(useSnaps).mockReturnValue({
+      loading: false,
+      snaps: ['local:http://localhost:3000'],
+    });
+
+    const { getAllByText } = await act(() => render(<Status />));
+
+    expect(getAllByText('npm:short-id')).toHaveLength(2);
+  });
+});

packages/snaps-sandbox/src/components/Status.tsx

@@ -0,0 +1,70 @@
+import {
+  Badge,
+  DataList,
+  HoverCard,
+  HStack,
+  Portal,
+  Stack,
+  Text,
+} from '@chakra-ui/react';
+import type { FunctionComponent } from 'react';
+import { FiAlertCircle, FiCheckCircle, FiXCircle } from 'react-icons/fi';
+
+import { useSnaps } from '../hooks';
+import { useSnapId } from '../hooks/useSnapId';
+
+export const Status: FunctionComponent = () => {
+  const snapId = useSnapId();
+  const { loading, snaps } = useSnaps();
+
+  const isConnected = !loading && snaps.includes(snapId);
+
+  const isTruncated = snapId.length > 20;
+  const truncated = isTruncated
+    ? `${snapId.slice(0, 10)}...${snapId.slice(-10)}`
+    : snapId;
+
+  return (
+    <HoverCard.Root size="sm">
+      <HoverCard.Trigger asChild>
+        <Badge size="lg">
+          {isConnected ? <FiCheckCircle /> : <FiAlertCircle />}
+          {truncated}
+        </Badge>
+      </HoverCard.Trigger>
+      <Portal>
+        <HoverCard.Positioner>
+          <HoverCard.Content>
+            <HoverCard.Arrow />
+            <Stack>
+              <DataList.Root>
+                <DataList.Item>
+                  <DataList.ItemLabel>Snap ID</DataList.ItemLabel>
+                  <DataList.ItemValue>{snapId}</DataList.ItemValue>
+                </DataList.Item>
+                <DataList.Item>
+                  <DataList.ItemLabel>Connected</DataList.ItemLabel>
+                  <DataList.ItemValue>
+                    <HStack gap="1">
+                      {isConnected ? (
+                        <>
+                          <FiCheckCircle aria-label="Connected" />{' '}
+                          <Text aria-hidden="true">Yes</Text>
+                        </>
+                      ) : (
+                        <>
+                          <FiXCircle aria-label="Disconnected" />{' '}
+                          <Text aria-hidden="true">No</Text>
+                        </>
+                      )}
+                    </HStack>
+                  </DataList.ItemValue>
+                </DataList.Item>
+              </DataList.Root>
+            </Stack>
+          </HoverCard.Content>
+        </HoverCard.Positioner>
+      </Portal>
+    </HoverCard.Root>
+  );
+};