(feat) add hyperlink api reference (#1855)

* initial commit

* pre-commit

* bug fix

* requested changes

* requested changes

Author: aditya520

apps/api-reference/src/components/EvmApi/run-button.tsx

@@ -88,7 +88,27 @@ export const RunButton = <ParameterName extends string>(
       {status.type === StatusType.Results && (
         <div>
           <h3 className="mb-2 text-lg font-bold">Results</h3>
-          <Code language="json">{stringifyResponse(status.data)}</Code>
+          {props.type === EvmApiType.Write &&
+          status.data &&
+          typeof status.data === "object" &&
+          "hash" in status.data &&
+          typeof status.data.hash === "string" ? (
+            <>
+              <p>{`Tx Hash: ${status.data.hash}`}</p>
+              {"link" in status.data &&
+                typeof status.data.link === "string" && (
+                  <InlineLink
+                    href={status.data.link}
+                    target="_blank"
+                    className="text-sm text-blue-500 hover:underline"
+                  >
+                    Open in explorer↗
+                  </InlineLink>
+                )}
+            </>
+          ) : (
+            <Code language="json">{stringifyResponse(status.data)}</Code>
+          )}
         </div>
       )}
       {status.type === StatusType.Error && (
@@ -175,7 +195,17 @@ const useRunButton = <ParameterName extends string>({
             })
               .then(({ request }) => writeContract(config, request))
               .then((result) => {
-                setStatus(Results(result));
+                const explorer = config.chains.find(
+                  (chain) => chain.id === config.state.chainId,
+                )?.blockExplorers?.default;
+                setStatus(
+                  Results({
+                    hash: result,
+                    link: explorer
+                      ? new URL(`/tx/${result}`, explorer.url).toString()
+                      : undefined,
+                  }),
+                );
               })
               .catch((error: unknown) => {
                 setStatus(ErrorStatus(error));