feat: add block explorer link

apps/staking/app/stake/node/[nodeId]/BlockExplorerLink.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { OpenNode } from '@session/sent-staking-js/client';
+import { LoadingText } from '@session/ui/components/loading-text';
+import { LinkOutIcon } from '@session/ui/icons/LinkOutIcon';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+
+export const BlockExplorerLink = ({ nodeId }: { nodeId: string }) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [nodes, setNodes] = useState<Array<OpenNode>>([]);
+  const dictionary = useTranslations('actionModules.node');
+
+  useEffect(() => {
+    fetch('/api/sent/nodes/open')
+      .then((res) => res.json())
+      .then((data) => setNodes(data.nodes))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  const node = useMemo(() => {
+    /* if (showMockNodes) {
+      return generateOpenNodes({ userAddress: address })[0];
+    } else if (showNoNodes) {
+      return {} as OpenNode;
+    } */
+    return nodes?.find((node) => node.service_node_pubkey === nodeId);
+  }, [nodes]);
+
+  return loading ? (
+    <LoadingText />
+  ) : node?.contract ? (
+    <Link href={`/explorer/${node?.contract}`}>
+      <span className="text-session-green fill-session-green inline-flex items-center gap-1 align-middle">
+        {dictionary('viewOnExplorer')}
+        <LinkOutIcon className="h-4 w-4" />
+      </span>
+    </Link>
+  ) : null;
+};

apps/staking/app/stake/node/[nodeId]/page.tsx

@@ -1,7 +1,6 @@
-import { LinkOutIcon } from '@session/ui/icons/LinkOutIcon';
 import { useTranslations } from 'next-intl';
-import Link from 'next/link';
 import ActionModule from '../../ActionModule';
+import { BlockExplorerLink } from './BlockExplorerLink';
 import NodeStaking from './NodeStaking';
 
 interface NodePageParams {
@@ -17,14 +16,7 @@ export default function NodePage({ params }: NodePageParams) {
     <ActionModule
       background={1}
       title={dictionary('title')}
-      headerAction={
-        <Link href={`/explorer/${nodeId}`}>
-          <span className="text-session-green fill-session-green inline-flex items-center gap-1 align-middle">
-            {dictionary('viewOnExplorer')}
-            <LinkOutIcon className="h-4 w-4" />
-          </span>
-        </Link>
-      }
+      headerAction={<BlockExplorerLink nodeId={nodeId} />}
     >
       <NodeStaking nodeId={nodeId} />
     </ActionModule>