spec change for free/pro users

Author: treeoflife2

defillama-openapi.json

@@ -18,6 +18,10 @@ const isProUser = computed(() => {
   return !!apiKey.value?.trim()
 })
 
+const emit = defineEmits<{
+  (e: 'apiKeyChange', key: string | null): void
+}>()
+
 /** Load API key from API key manager on mount */
 onMounted(() => {
   const stored = getApiKey(WORKSPACE_ID)
@@ -26,6 +30,9 @@ onMounted(() => {
     previousApiKey.value = stored.key || ''
   }
   isInitialized.value = true
+  
+  // Emit initial state
+  emit('apiKeyChange', apiKey.value.trim() || null)
 })
 
 /** Save API key when it changes */
@@ -52,6 +59,9 @@ const handleApiKeyChange = async () => {
 
   // Update previous value
   previousApiKey.value = apiKey.value
+  
+  // Emit the change
+  emit('apiKeyChange', trimmedKey || null)
 }
 
 /** Debounced API key change handler */

examples/web/src/components/ApiKeyInput.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts">
 import { ApiReference } from '@scalar/api-reference'
 import { apiReferenceConfigurationSchema } from '@scalar/types/api-reference'
-import { reactive } from 'vue'
+import { ref } from 'vue'
 
 // Import the defillama-openapi.json file
 import specContent from '../../../../defillama-openapi.json'
 import ApiKeyInput from '../components/ApiKeyInput.vue'
 import SlotPlaceholder from '../components/SlotPlaceholder.vue'
 
-const configuration = reactive(
+// Create a deep copy of the spec to avoid mutating the original
+const getUpdatedSpec = (baseUrl: string) => {
+  const spec = JSON.parse(JSON.stringify(specContent))
+  
+  // Update the base server URL
+  spec.servers = [{
+    url: baseUrl
+  }]
+  
+  return spec
+}
+
+// Track the current base URL to prevent unnecessary reloads
+const currentBaseUrl = ref<string>('https://api.llama.fi')
+
+const configuration = ref(
   apiReferenceConfigurationSchema.parse({
     isEditable: false,
     // Add path routing option
@@ -17,13 +32,28 @@ const configuration = reactive(
           pathRouting: { basePath: '/path-routing' },
         }
       : {}),
-    content: specContent,
+    content: getUpdatedSpec(currentBaseUrl.value),
   }),
 )
+
+// Handle API key changes from the input component
+const handleApiKeyChange = (apiKey: string | null) => {
+  const newBaseUrl = apiKey ? 'https://pro-api.llama.fi' : 'https://api.llama.fi'
+  
+  // Only update if the base URL would actually change
+  if (currentBaseUrl.value !== newBaseUrl) {
+    currentBaseUrl.value = newBaseUrl
+    configuration.value = apiReferenceConfigurationSchema.parse({
+      ...configuration.value,
+      content: getUpdatedSpec(newBaseUrl),
+    })
+  }
+}
 </script>
+
 <template>
   <div class="standalone-api-reference-page">
-    <ApiKeyInput />
+    <ApiKeyInput @api-key-change="handleApiKeyChange" />
     <ApiReference :configuration="configuration">
       <template #footer><SlotPlaceholder>footer</SlotPlaceholder></template>
     </ApiReference>

examples/web/src/pages/StandaloneApiReferencePage.vue

@@ -3,7 +3,9 @@ import type { Oauth2Flow, Server } from '@scalar/oas-utils/entities/spec'
 import { shouldUseProxy } from '@scalar/oas-utils/helpers'
 
 /** Oauth2 security schemes which are not implicit */
-type NonImplicitFlow = Exclude<Oauth2Flow, { type: 'implicit' }>
+type NonImplicitFlow = Exclude<Oauth2Flow, { type: 'implicit' }> & {
+  'x-scalar-security-body'?: Record<string, string>
+}
 
 type PKCEState = {
   codeVerifier: string

packages/api-client/src/views/Request/libs/oauth2.ts

@@ -54,7 +54,7 @@ function handleChange(i: number) {
 // Restore selected client from localStorage
 onMounted(() => {
   const storedClient = localStorage.getItem(
-    REFERENCE_LS_KEYS.SELECTED_CLIENT_DEPRECATED,
+    REFERENCE_LS_KEYS.SELECTED_CLIENT,
   )
   if (storedClient) {
     setHttpClient(JSON.parse(storedClient))

packages/api-reference/src/components/Content/ClientLibraries/ClientLibraries.vue

@@ -167,7 +167,7 @@ const setHttpClient = (newState: Partial<HttpClientState>) => {
   })
 
   // Save to localStorage
-  safeLocalStorage().setItem(REFERENCE_LS_KEYS.SELECTED_CLIENT_DEPRECATED, JSON.stringify(httpClient))
+  safeLocalStorage().setItem(REFERENCE_LS_KEYS.SELECTED_CLIENT, JSON.stringify(httpClient))
 }
 
 /** Keep track of the available and the selected HTTP client(s) */

packages/api-reference/src/stores/useHttpClientStore.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod'
+
+export const DescriptionSchema = z.object({
+  /**
+   * A description for security scheme. CommonMark syntax MAY be used for rich text representation.
+   */
+  description: z.string().optional(),
+})

packages/openapi-types/src/schemas/3.1/processed/description-object.ts

@@ -1,11 +1,6 @@
 import { z } from 'zod'
-
-const DescriptionSchema = z.object({
-  /**
-   * A description for security scheme. CommonMark syntax MAY be used for rich text representation.
-   */
-  description: z.string().optional(),
-})
+import { DescriptionSchema } from './description-object'
+import { XScalarSecurityBody } from '../../extensions/x-scalar-security-body'
 
 export const ApiKeyInValues = ['query', 'header', 'cookie'] as const
 
@@ -80,18 +75,20 @@ const tokenUrl = z.string().default('')
  *
  * Configuration details for a supported OAuth Flow
  */
-export const OAuthFlowObjectSchema = z.object({
-  /**
-   * The URL to be used for obtaining refresh tokens. This MUST be in the form of a URL. The OAuth2 standard requires
-   * the use of TLS.
-   */
-  refreshUrl: z.string().optional(),
-  /**
-   * REQUIRED. The available scopes for the OAuth2 security scheme. A map
-   * between the scope name and a short description for it. The map MAY be empty.
-   */
-  scopes: z.record(z.string(), z.string().optional()).optional().default({}).catch({}),
-})
+export const OAuthFlowObjectSchema = z
+  .object({
+    /**
+     * The URL to be used for obtaining refresh tokens. This MUST be in the form of a URL. The OAuth2 standard requires
+     * the use of TLS.
+     */
+    refreshUrl: z.string().optional(),
+    /**
+     * REQUIRED. The available scopes for the OAuth2 security scheme. A map
+     * between the scope name and a short description for it. The map MAY be empty.
+     */
+    scopes: z.record(z.string(), z.string().optional()).optional().default({}).catch({}),
+  })
+  .merge(XScalarSecurityBody)
 
 export const ImplicitFlowSchema = OAuthFlowObjectSchema.extend({
   type: z.literal('implicit').optional(),

packages/openapi-types/src/schemas/3.1/processed/security-scheme-object.ts

@@ -1,16 +1,15 @@
 import { z } from 'zod'
 
 /**
- * An OpenAPI extension to set any additional body parameters for the OAuth token request
+ * An OpenAPI extension to specify additional request body parameters for OAuth2 flows
  *
  * @example
  * ```yaml
- * x-scalar-security-body: {
- *   audience: 'https://api.example.com',
- *   resource: 'user-profile'
- * }
+ * x-scalar-security-body:
+ *   audience: 'https://api.example.com'
+ *   custom_param: 'custom_value'
  * ```
  */
 export const XScalarSecurityBody = z.object({
-  'x-scalar-security-body': z.record(z.string(), z.string()).optional(),
+  'x-scalar-security-body': z.record(z.string()).optional(),
 })

packages/openapi-types/src/schemas/extensions/x-scalar-security-body.ts

@@ -462,6 +462,17 @@ const _apiReferenceConfigurationSchema = apiClientConfigurationSchema.merge(
     operationsSorter: z
       .union([z.literal('alpha'), z.literal('method'), z.function().args(z.any(), z.any()).returns(z.number())])
       .optional(),
+    /**
+     * Callback fired when the API key changes
+     * @param apiKey - The new API key value or null if removed
+     * @param currentBaseUrl - The current base URL being used
+     * @returns void or Promise<void>
+     */
+    onApiKeyChange: z
+      .function()
+      .args(z.string().nullable(), z.string())
+      .returns(z.void().or(z.void().promise()))
+      .optional(),
   }),
 )