feat: add indexers site hyperlink (#2061)

* Feature: add indexers site hyperlink

* Fix: add an option taget on settings, change color to grey

public/locales/en/modules/indexer-manager.json

@@ -3,7 +3,10 @@
       "name": "Indexer manager status",
       "description": "Status about your indexers",
       "settings": {
-        "title": "Indexer manager status"
+        "title": "Indexer manager status",
+        "openIndexerSiteInNewTab": {
+          "label": "Open Indexer Site In New Tab"
+          }
         }
       },
       "indexersStatus": {

src/widgets/indexer-manager/IndexerManagerTile.tsx

@@ -1,4 +1,13 @@
-import { Button, Card, Flex, Group, ScrollArea, Text } from '@mantine/core';
+import {
+  Anchor,
+  Button,
+  Card,
+  Flex,
+  Group,
+  ScrollArea,
+  Text,
+  useMantineTheme,
+} from '@mantine/core';
 import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from '@tabler/icons-react';
 import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
@@ -12,7 +21,12 @@ import { IWidget } from '../widgets';
 const definition = defineWidget({
   id: 'indexer-manager',
   icon: IconReportSearch,
-  options: {},
+  options: {
+    openIndexerSiteInNewTab: {
+      type: 'switch',
+      defaultValue: true,
+    },
+  },
   gridstack: {
     minWidth: 1,
     minHeight: 1,
@@ -30,6 +44,7 @@ interface IndexerManagerWidgetProps {
 
 function IndexerManagerWidgetTile({ widget }: IndexerManagerWidgetProps) {
   const { t } = useTranslation('modules/indexer-manager');
+  const mantineTheme = useMantineTheme();
   const { data: sessionData } = useSession();
   const { name: configName } = useConfigContext();
   const utils = api.useUtils();
@@ -49,7 +64,7 @@ function IndexerManagerWidgetTile({ widget }: IndexerManagerWidgetProps) {
         configName: configName!,
       },
       {
-        staleTime: 1000 * 60 * 2,
+        refetchInterval: 1000 * 60 * 2,
       }
     );
   if (indexersLoading || !indexersData || statusesLoading) {
@@ -63,9 +78,15 @@ function IndexerManagerWidgetTile({ widget }: IndexerManagerWidgetProps) {
         <ScrollArea h="100%">
           {indexersData.map((indexer: any) => (
             <Group key={indexer.id} position="apart">
-              <Text color="dimmed" align="center" size="xs">
+              <Anchor
-                {indexer.name}
+                href={indexer.indexerUrls[0]}
-              </Text>
+                target={widget.properties.openIndexerSiteInNewTab ? '_blank' : '_self'}
+                c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'}
+              >
+                <Text color="dimmed" align="center" size="xs">
+                  {indexer.name}
+                </Text>
+              </Anchor>
               {!statusesData.find((status: any) => indexer.id === status.indexerId) &&
               indexer.enable ? (
                 <IconCircleCheck color="#2ecc71" />