From 99155edf2fa59064e725cd051653415fd70c9217 Mon Sep 17 00:00:00 2001
From: Camila Sosa Morales <camisosa@fleek.xyz>
Date: Mon, 9 Jan 2023 17:01:38 -0500
Subject: [PATCH] fix: broken json (#66)

* fix: fix broken json error. saving the description correctly

* fix: fix pr review comments

* fix: fix text display when theres no breakline

* fix: fix break lines text on details view. Move the \n replacing to the lib
---
 ui/src/integrations/ethereum/lib/fleek-erc721.ts |  8 +++++---
 ui/src/views/detail/detail.tsx                   | 10 +++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui/src/integrations/ethereum/lib/fleek-erc721.ts b/ui/src/integrations/ethereum/lib/fleek-erc721.ts
index b5ac626..220cac7 100644
--- a/ui/src/integrations/ethereum/lib/fleek-erc721.ts
+++ b/ui/src/integrations/ethereum/lib/fleek-erc721.ts
@@ -10,7 +10,7 @@ export const FleekERC721 = {
     const response = await contract.mint(
       params.owner,
       params.name,
-      params.description,
+      params.description.replaceAll(/\n/g, '\\n'), //replace break lines with \\n so it doesn't break the json,
       params.image,
       params.externalUrl,
       params.ens,
@@ -27,7 +27,9 @@ export const FleekERC721 = {
     const response = await contract.tokenURI(Number(tokenId));
 
     const parsed = JSON.parse(
-      Buffer.from(response.slice(29), 'base64').toString('utf-8')
+      Buffer.from(response.slice(29), 'base64')
+        .toString('utf-8')
+        .replaceAll(/\n/g, '\\n') // replace escaped newlines
     );
 
     return parsed;
@@ -35,7 +37,7 @@ export const FleekERC721 = {
 
   async lastTokenId(): Promise<number> {
     // TODO: fetch last token id
-    return 6;
+    return 7;
   },
 };
 
diff --git a/ui/src/views/detail/detail.tsx b/ui/src/views/detail/detail.tsx
index 23c8a7d..a0772ca 100644
--- a/ui/src/views/detail/detail.tsx
+++ b/ui/src/views/detail/detail.tsx
@@ -69,7 +69,15 @@ export const MintedSiteDetail = () => {
                       heading="Description"
                       minH={120}
                       maxH="auto"
-                      children={<p>{description}</p>}
+                      children={
+                        <p
+                          style={{
+                            whiteSpace: 'pre-line',
+                          }}
+                        >
+                          {description}
+                        </p>
+                      }
                     />
                     <AccordionItem
                       heading="Attributes"