From c29308b67d3ae24d73578ca47c5df0e97bc0d216 Mon Sep 17 00:00:00 2001
From: Alex Monso <amonsosanz@gmail.com>
Date: Thu, 10 Oct 2024 10:23:57 +0200
Subject: [PATCH] Process IPFS schema URLs in the Import Schema Preview and
 Schema Details screens

---
 ui/src/components/schemas/ImportSchemaPreview.tsx |  9 ++++++++-
 ui/src/components/schemas/SchemaDetails.tsx       | 10 ++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/schemas/ImportSchemaPreview.tsx b/ui/src/components/schemas/ImportSchemaPreview.tsx
index 11286c96e..44ddbb53b 100644
--- a/ui/src/components/schemas/ImportSchemaPreview.tsx
+++ b/ui/src/components/schemas/ImportSchemaPreview.tsx
@@ -1,4 +1,5 @@
 import { Button, Space, Typography } from "antd";
+import { processUrl } from "src/adapters/api/schemas";
 
 import IconBack from "src/assets/icons/arrow-narrow-left.svg?react";
 import { DownloadSchema } from "src/components/schemas/DownloadSchema";
@@ -33,6 +34,7 @@ export function ImportSchemaPreview({
     ? schemaHashResult.data
     : schemaHashResult.error.message;
   const version = jsonSchema.jsonSchemaProps.$metadata.version;
+  const processedSchemaUrl = processUrl(url, env);
 
   return (
     <SchemaViewer
@@ -63,7 +65,12 @@ export function ImportSchemaPreview({
 
           <Detail copyable={schemaHashResult.success} label="Hash" text={schemaHash} />
 
-          <Detail copyable href={url} label="URL" text={url} />
+          <Detail
+            copyable
+            href={processedSchemaUrl.success ? processedSchemaUrl.data : url}
+            label="URL"
+            text={url}
+          />
 
           <DownloadSchema env={env} fileName={jsonSchema.name} url={url} />
         </Space>
diff --git a/ui/src/components/schemas/SchemaDetails.tsx b/ui/src/components/schemas/SchemaDetails.tsx
index 5fad4e489..872f337ab 100644
--- a/ui/src/components/schemas/SchemaDetails.tsx
+++ b/ui/src/components/schemas/SchemaDetails.tsx
@@ -2,7 +2,7 @@ import { Button, Card, Space, Typography } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { generatePath, useNavigate, useParams } from "react-router-dom";
 
-import { getApiSchema } from "src/adapters/api/schemas";
+import { getApiSchema, processUrl } from "src/adapters/api/schemas";
 import { getJsonSchemaFromUrl, getSchemaJsonLdTypes } from "src/adapters/jsonSchemas";
 import CreditCardIcon from "src/assets/icons/credit-card-plus.svg?react";
 import { DownloadSchema } from "src/components/schemas/DownloadSchema";
@@ -171,6 +171,7 @@ export function SchemaDetails() {
           );
         } else {
           const { bigInt, createdAt, hash, url, version } = schema.data;
+          const processedSchemaUrl = processUrl(url, env);
           const [jsonSchema, jsonSchemaObject] = jsonSchemaTuple.data;
           const [jsonLdType, jsonLdContextObject] = contextTuple.data;
 
@@ -204,7 +205,12 @@ export function SchemaDetails() {
 
                   <Detail copyable label="Hash" text={hash} />
 
-                  <Detail copyable href={url} label="URL" text={url} />
+                  <Detail
+                    copyable
+                    href={processedSchemaUrl.success ? processedSchemaUrl.data : url}
+                    label="URL"
+                    text={url}
+                  />
 
                   <Detail label="Import date" text={formatDate(createdAt)} />