Mark & treat built-in APIs differently to other public APIs

Author: pimterry

extra-apis/ethereum.json

@@ -7,7 +7,8 @@
 			"name": "CC0-1.0",
 			"url": "https://creativecommons.org/publicdomain/zero/1.0/legalcode"
 		},
-		"version": "0.0.0"
+		"version": "0.0.0",
+		"x-httptoolkit-builtin-api": true
 	},
 	"servers": [
 		{ "url": "http://localhost:8545" },

extra-apis/ipfs.json

@@ -7,7 +7,8 @@
     "x-providerName": "IPFS",
     "x-logo": {
       "url": "https://raw.githubusercontent.com/ipfs/ipfs-docs/55fe8bc6a53ba3b9023951fb4b432efbbc81fba5/docs/.vuepress/public/images/ipfs-logo.svg"
-    }
+    },
+    "x-httptoolkit-builtin-api": true
   },
   "servers": [
     {

src/components/view/http/http-details-pane.tsx

@@ -100,9 +100,12 @@ export class HttpDetailsPane extends React.Component<{
         } = uiStore!;
         const { requestBreakpoint, responseBreakpoint } = exchange;
 
-        // The full API details - only available for paid usage, so we drop this
-        // for non-paid users at this stage.
-        const apiExchange = isPaidUser ? exchange.api : undefined;
+        // The full API details - for paid APIs, and non-paid users, we don't show
+        // the detailed API data in any of the cards, we just show the name (below)
+        // in a collapsed API card.
+        const apiExchange = (isPaidUser || exchange.api?.isBuiltInApi)
+            ? exchange.api
+            : undefined;
 
         // We do still want the API name though, if there is one - we use this to
         // show non-paid users when API data might be available, iff this request
@@ -190,16 +193,16 @@ export class HttpDetailsPane extends React.Component<{
     ) {
         if (!apiName) return null;
 
-        if (!this.props.accountStore!.isPaidUser) {
-            // If you're not paid, but we do recognize this as a specific API
-            // operation, we show a placeholder:
+        if (!apiExchange) {
+            // If you're not a paid user, and it's a paid API, then we only have
+            // the basic API name here but no details, so we just show a placeholder:
             return <HttpApiPlaceholderCard
                 {...this.cardProps.api}
                 apiName={apiName}
             />;
         }
 
-        // If paid & we have a name, we must have full API details, show them:
+        // If paid/built-in API & we have a name, we must have full API details, show them:
         return <HttpApiCard
             {...this.cardProps.api}
             apiName={apiName}

src/model/api/api-interfaces.ts

@@ -20,6 +20,14 @@ export type ApiSpec =
     | OpenRpcDocument;
 
 export interface ApiExchange {
+
+    /**
+     * Built-in API specs are special: they're shown for free users too, and they're
+     * shown differently in the list (highlighting the operation, not the normal
+     * lower-level HTTP details).
+     */
+    readonly isBuiltInApi: boolean;
+
     readonly service: ApiService;
     readonly operation: ApiOperation;
     readonly request: ApiRequest;

src/model/api/jsonrpc.ts

@@ -71,10 +71,12 @@ interface MatchedOperation {
 export class JsonRpcApiExchange implements ApiExchange {
 
     constructor(
-        private _api: OpenRpcMetadata,
-        private _exchange: HttpExchange,
+        _api: OpenRpcMetadata,
+        _exchange: HttpExchange,
         private _rpcMethod: MatchedOperation | ErrorLike
     ) {
+        this.isBuiltInApi = _api.spec.info['x-httptoolkit-builtin-api'] === true;
+
         this.service = new JsonRpcApiService(_api);
 
         if (isErrorLike(_rpcMethod)) {
@@ -92,6 +94,8 @@ export class JsonRpcApiExchange implements ApiExchange {
         }
     }
 
+    readonly isBuiltInApi: boolean;
+
     readonly service: ApiService;
     readonly operation: ApiOperation;
     readonly request: ApiRequest;

src/model/api/openapi-schema.ts

@@ -105,6 +105,10 @@ export const openApiSchema = {
               "type": "string"
             }
           }
+        },
+        "x-httptoolkit-builtin-api": {
+          "type": "boolean",
+          "default": false
         }
       },
       "additionalProperties": false

src/model/api/openapi.ts

@@ -21,16 +21,14 @@ import {
 } from "../../types";
 import { firstMatch, empty, lastHeader } from '../../util';
 import { formatAjvError } from '../../util/json-schema';
-import { reportError } from '../../errors';
 
 import {
     ApiExchange,
     ApiService,
     ApiOperation,
     ApiRequest,
     ApiResponse,
-    ApiParameter,
-    ApiMetadata
+    ApiParameter
 } from './api-interfaces';
 import { OpenApiMetadata } from './build-api-metadata';
 import { fromMarkdown } from '../markdown';
@@ -278,6 +276,8 @@ function stripTags(input: string | undefined): string | undefined {
 
 export class OpenApiExchange implements ApiExchange {
     constructor(api: OpenApiMetadata, exchange: HttpExchange) {
+        this.isBuiltInApi = api.spec.info['x-httptoolkit-builtin-api'] === true;
+
         const { request } = exchange;
         this.service = new OpenApiService(api.spec);
 
@@ -295,6 +295,8 @@ export class OpenApiExchange implements ApiExchange {
     private _spec: OpenAPIObject;
     private _opSpec: MatchedOperation;
 
+    public readonly isBuiltInApi: boolean;
+
     public readonly service: ApiService;
     public readonly operation: ApiOperation;
     public readonly request: ApiRequest;