feat: derive explorer url from chain name (#354)

examples/react-app/.env.example

@@ -1,3 +1,3 @@
-# These are not read from the .env file, you must set them in your bash
+VITE_APP_WC_PROJECT_ID=
 VITE_CHAIN_ID_NAME=testnet
 VITE_PROVIDER_URL=https://testnet.fuel.network/v1/graphql

examples/react-app/src/components/contract-link.tsx

@@ -1,9 +1,9 @@
-import { COUNTER_CONTRACT_ID } from '../config';
+import { COUNTER_CONTRACT_ID, EXPLORER_URL } from '../config';
 
 export default function ContractLink() {
   return (
     <a
-      href={`https://app.fuel.network/contract/${COUNTER_CONTRACT_ID}`}
+      href={`${EXPLORER_URL}/contract/${COUNTER_CONTRACT_ID}`}
       target="_blank"
       rel="noopener noreferrer"
       className="underline text-end text-sm text-zinc-300/70"

examples/react-app/src/components/counter.tsx

@@ -6,6 +6,7 @@ import { Counter } from '../types';
 import type { CustomError } from '../utils/customError';
 
 import { COUNTER_CONTRACT_ID, DEFAULT_AMOUNT } from '../config';
+import { EXPLORER_URL } from '../config';
 import Button from './button';
 import ContractLink from './contract-link';
 import Feature from './feature';
@@ -89,7 +90,7 @@ export default function ContractCounter({ isSigning, setIsSigning }: Props) {
                 <p>
                   Counter incremented! View it on the{' '}
                   <a
-                    href={`https://app.fuel.network/tx/${tx.transactionId}`}
+                    href={`${EXPLORER_URL}/tx/${tx.transactionId}`}
                     className="underline"
                     target="_blank"
                     rel="noreferrer"

examples/react-app/src/components/transfer.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useWallet } from '../hooks/useWallet';
 import type { CustomError } from '../utils/customError';
 
-import { DEFAULT_AMOUNT } from '../config';
+import { DEFAULT_AMOUNT, EXPLORER_URL } from '../config';
 import Button from './button';
 import Feature from './feature';
 import Notification, { type Props as NotificationProps } from './notification';
@@ -67,7 +67,7 @@ export default function Transfer({ isSigning, setIsSigning }: Props) {
             <p>
               Transferred successfully! View it on the{' '}
               <a
-                href={`https://app.fuel.network/tx/${result?.id}`}
+                href={`${EXPLORER_URL}/tx/${result?.id}`}
                 className="underline"
                 target="_blank"
                 rel="noreferrer"

examples/react-app/src/config.ts

@@ -22,3 +22,14 @@ function getContractId() {
 }
 
 export const COUNTER_CONTRACT_ID = getContractId();
+
+export const EXPLORER_URL_MAP: Record<keyof typeof CHAIN_IDS.fuel, string> = {
+  testnet: 'https://app-testnet.fuel.network',
+  devnet: 'https://app-testnet.fuel.network',
+  mainnet: 'https://app-mainnet.fuel.network',
+};
+
+export const EXPLORER_LOCAL_URL = 'http://localhost:3001';
+
+export const EXPLORER_URL =
+  EXPLORER_URL_MAP[CHAIN_ID_NAME] || EXPLORER_LOCAL_URL;