Merge branch 'main' of github.com:FuelLabs/fuel-explorer into pn/chore/portal-links

Author: pedronauck

.github/workflows/helm-publish.yml

@@ -29,7 +29,7 @@ jobs:
         uses: bsord/helm-push@v4.1.0
         with:
           useOCIRegistry: true
-          registry-url: oci://ghcr.io/fuellabs/helmrelease
+          registry-url: oci://ghcr.io/fuellabs/helmcharts
           username: ${{ github.repository_owner }}
           access-token: ${{ secrets.GITHUB_TOKEN }}
           force: true

helm/fuel-explorer/Chart.yaml

@@ -15,7 +15,7 @@ type: application
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
-version: 0.1.1
+version: 0.1.3
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to

helm/fuel-explorer/templates/service.yaml

@@ -1,13 +1,15 @@
 apiVersion: v1
 kind: Service
 metadata:
-  name: { { include "fuel-explorer.fullname" . } }
-  labels: { { - include "fuel-explorer.labels" . | nindent 4 } }
+  name: {{ include "fuel-explorer.fullname" . }}
+  labels:
+    {{- include "fuel-explorer.labels" . | nindent 4 }}
 spec:
-  type: { { .Values.service.type } }
+  type: {{ .Values.service.type }}
   ports:
-    - port: { { .Values.service.port } }
+    - port: {{ .Values.service.port }}
       targetPort: http
       protocol: TCP
       name: http
-  selector: { { - include "fuel-explorer.selectorLabels" . | nindent 4 } }
+  selector:
+    {{- include "fuel-explorer.selectorLabels" . | nindent 4 }}

packages/app-explorer/.env.example

@@ -1 +1,4 @@
 FUEL_PROVIDER=https://beta-5.fuel.network/graphql
+# Explorer API URL
+FUEL_EXPLORER_API=
+FUEL_EXPLORER_API_KEY=

packages/app-explorer/.env.production

@@ -1,6 +1,7 @@
 import { createExecutor, createSchema } from '@fuel-explorer/graphql';
 import { ContextDomain } from '@fuel-explorer/graphql/src/domains/Context';
 import { createYoga } from 'graphql-yoga';
+import { NextResponse } from 'next/server';
 import { requireEnv } from '~/systems/utils/requireEnv';
 
 const { FUEL_PROVIDER: url } = requireEnv(['FUEL_PROVIDER']);
@@ -29,8 +30,17 @@ const { handleRequest } = createYoga({
   },
 });
 
+const authenticatiohMiddleware = async (request: Request, ctx: Object) => {
+  if (process.env.FUEL_EXPLORER_API) {
+    return new NextResponse('Unauthorized', {
+      status: 401,
+    });
+  }
+  return handleRequest(request, ctx);
+};
+
 export {
-  handleRequest as GET,
-  handleRequest as POST,
-  handleRequest as OPTIONS,
+  authenticatiohMiddleware as GET,
+  authenticatiohMiddleware as POST,
+  authenticatiohMiddleware as OPTIONS,
 };

packages/app-explorer/src/app/api/graphql/route.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '@fuels/ui';
-import { cx, useRadixTheme } from '@fuels/ui';
+import { cx, useTheme } from '@fuels/ui';
 import {
   JsonView,
   collapseAllNested,
@@ -14,14 +14,14 @@ export type JsonViewerProps = BaseProps<{
 
 export function JsonViewer({ data, className, ...props }: JsonViewerProps) {
   const classes = styles();
-  const ctx = useRadixTheme();
+  const { theme } = useTheme();
   return (
     <JsonView
       data={data}
       shouldExpandNode={collapseAllNested}
       style={
         {
-          ...(ctx.appearance === 'dark' ? darkStyles : defaultStyles),
+          ...(theme === 'dark' ? darkStyles : defaultStyles),
           container: cx(classes.json(), className),
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } as any

packages/app-explorer/src/systems/Core/components/JsonViewer/JsonViewer.tsx

@@ -1,16 +1,27 @@
 import { resolve } from 'url';
-import { getSdk } from '@fuel-explorer/graphql';
+import { getSdk } from '@fuel-explorer/graphql/src/sdk';
 import { GraphQLClient } from 'graphql-request';
 
+const { FUEL_EXPLORER_API, FUEL_EXPLORER_API_KEY } = process.env;
 const VERCEL_URL = process.env.VERCEL_URL || process.env.NEXT_PUBLIC_VERCEL_URL;
 const VERCEL_ENV =
   process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV || 'development';
 
 const getBaseUrl = () => {
-  if (VERCEL_ENV !== 'development') return `https://${VERCEL_URL}`;
-  return 'http://localhost:3000';
+  if (FUEL_EXPLORER_API && FUEL_EXPLORER_API_KEY) return FUEL_EXPLORER_API;
+  if (VERCEL_ENV !== 'development')
+    return resolve(`https://${VERCEL_URL}`, '/api/graphql');
+  return 'http://localhost:3000/api/graphql';
+};
+const getHeaders = () => {
+  if (FUEL_EXPLORER_API_KEY) {
+    return { Authorization: `Bearer ${FUEL_EXPLORER_API_KEY}` };
+  }
+  return undefined;
 };
 
-const API_URL = resolve(getBaseUrl(), '/api/graphql');
-const client = new GraphQLClient(API_URL, { fetch });
+const client = new GraphQLClient(getBaseUrl(), {
+  fetch,
+  headers: getHeaders(),
+});
 export const sdk = getSdk(client);

packages/app-explorer/src/systems/Core/utils/sdk.ts

@@ -1,9 +1,9 @@
-import { ReceiptType } from '@fuel-explorer/graphql';
+import { ReceiptType } from '@fuel-explorer/graphql/src/sdk';
 import type {
   Maybe,
   OperationReceipt,
   TransactionReceiptFragment,
-} from '@fuel-explorer/graphql';
+} from '@fuel-explorer/graphql/src/sdk';
 import type { BaseProps } from '@fuels/ui';
 import {
   Address,

packages/app-explorer/src/systems/Transaction/component/TxScripts/TxScripts.tsx

@@ -14,6 +14,7 @@ import { IconGasStation } from '@tabler/icons-react';
 import Link from 'next/link';
 import { Routes } from '~/routes';
 
+import { isValidAddress } from '~/systems/Core/utils/address';
 import { TX_INTENT_MAP } from '../../../Transaction/component/TxIcon/TxIcon';
 import type { TransactionNode } from '../../../Transaction/types';
 
@@ -29,9 +30,10 @@ export function TxCard({
   ...props
 }: TxCardProps) {
   const fee = bn(tx.fee);
+  const isValidTxID = isValidAddress(tx.id);
 
   return (
-    <Link scroll={true} href={Routes.txSimple(tx.id)}>
+    <Link scroll={true} href={Routes.txSimple(tx.id)} prefetch={isValidTxID}>
       <Card {...props} className={cx(className)}>
         <Card.Body className="flex flex-col gap-4 laptop:flex-row laptop:justify-between">
           <Box className="flex gap-3 h-[26px]">

packages/app-explorer/src/systems/Transactions/components/TxCard/TxCard.tsx

@@ -1,3 +1,4 @@
 node_moduels
 .turbo
 dist
+.env

packages/graphql/.dockerignore

@@ -3,7 +3,13 @@ import type { CodegenConfig } from '@graphql-codegen/cli';
 const config: CodegenConfig = {
   overwrite: true,
   documents: ['./src/queries/**.graphql'],
-  schema: `http://localhost:${process.env.SERVER_PORT}/graphql`,
+  schema: {
+    [`http://localhost:${process.env.SERVER_PORT}/graphql`]: {
+      headers: {
+        Authorization: `Bearer ${process.env.FUEL_EXPLORER_API_KEY}`,
+      },
+    },
+  },
   generates: {
     'src/generated/types.ts': {
       plugins: [

packages/graphql/codegen.ts

@@ -0,0 +1 @@
+export * from './generated/types';

packages/graphql/src/sdk.ts

@@ -11,13 +11,24 @@ import { requireEnv } from './utils/requireEnv';
 const { FUEL_PROVIDER } = requireEnv([
   ['FUEL_PROVIDER', 'https://beta-5.fuel.network/graphql'],
 ]);
+const { FUEL_EXPLORER_API_KEY } = process.env;
 
 // Create a server:
 const app = express();
 
 app.use(cors<cors.CorsRequest>());
 app.use(express.json());
 
+if (FUEL_EXPLORER_API_KEY) {
+  app.use((req, res, next) => {
+    if (req.headers.authorization !== `Bearer ${FUEL_EXPLORER_API_KEY}`) {
+      res.status(401).send('Unauthorized');
+      return;
+    }
+    next();
+  });
+}
+
 app.get(
   '/graphql',
   expressPlayground({

packages/graphql/src/server.ts

@@ -5,12 +5,13 @@ import { updateThemeAppearanceClass, useThemeContext } from '@radix-ui/themes';
 const THEME_KEY = 'fuel-ui-theme';
 
 export function useTheme() {
-  const { appearance: theme } = useThemeContext();
+  const { appearance: theme, onAppearanceChange } = useThemeContext();
 
   function toggleTheme() {
     const current = localStorage.getItem(THEME_KEY);
     const next = current === 'light' ? 'dark' : 'light';
     updateThemeAppearanceClass(next);
+    onAppearanceChange(next);
     localStorage.setItem(THEME_KEY, next);
   }