From ec9deb87f2be6677478eb4b185f31945174a49ba Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:31:58 -0500
Subject: [PATCH 1/3] fix: denom info modal rendering

---
 components/factory/modals/denomInfo.tsx | 56 +++++--------------------
 1 file changed, 10 insertions(+), 46 deletions(-)

diff --git a/components/factory/modals/denomInfo.tsx b/components/factory/modals/denomInfo.tsx
index 16bccc91..064531e3 100644
--- a/components/factory/modals/denomInfo.tsx
+++ b/components/factory/modals/denomInfo.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { TruncatedAddressWithCopy } from '@/components/react/addressCopy';
 import { FaExternalLinkAlt } from 'react-icons/fa';
 import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
-import { useRouter } from 'next/router';
 
 export const DenomInfoModal: React.FC<{
   denom: MetadataSDKType | null;
@@ -28,50 +27,13 @@ export const DenomInfoModal: React.FC<{
         </form>
         <h3 className="text-xl font-semibold text-[#161616] dark:text-white mb-6">Denom Details</h3>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div>
-            <InfoItem label="NAME" value={denom?.name ?? 'No name available'} />
-            <InfoItem label="SYMBOL" value={denom?.symbol ?? 'No symbol available'} />
-            {denom?.description && (
-              <InfoItem
-                label="DESCRIPTION"
-                value={denom?.description ?? 'No description available'}
-              />
-            )}
-            {denom?.denom_units[1]?.exponent && (
-              <InfoItem
-                label="EXPONENT"
-                value={denom?.denom_units[1]?.exponent?.toString() ?? '0'}
-              />
-            )}
-          </div>
-          <div>
-            {denom?.denom_units?.map(
-              (
-                unit: {
-                  denom: string;
-                  aliases?: string[];
-                  exponent?: number;
-                },
-                index: number
-              ) => (
-                <div key={index} className="mb-4">
-                  <InfoItem label="DENOM" value={unit?.denom} />
-                  <InfoItem label="ALIASES" value={unit?.aliases?.join(', ') || 'No aliases'} />
-                </div>
-              )
-            )}
-          </div>
-        </div>
-        <h4 className="text-lg font-semibold text-[#161616] dark:text-white mt-6  mb-4">
-          Additional Information
-        </h4>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <InfoItem label="Name" value={denom?.name ?? 'No name available'} />
+          <InfoItem label="Symbol" value={denom?.symbol ?? 'No symbol available'} />
           <InfoItem
-            label="BASE"
-            value={denom?.base ? decodeURIComponent(denom.base) : ''}
-            isAddress={true}
+            label="Description"
+            value={denom?.description ?? 'No description available'}
+            className="col-span-2 row-span-2"
           />
-          <InfoItem label="DISPLAY" value={denom?.display ?? 'No display available'} />
         </div>
       </div>
       <form method="dialog" className="modal-backdrop" onSubmit={onClose}>
@@ -85,15 +47,17 @@ function InfoItem({
   label,
   value,
   isAddress = false,
+  className = '',
 }: {
   label: string;
   value: string;
   isAddress?: boolean;
+  className?: string;
 }) {
   return (
-    <div className="mb-4 flex flex-col">
+    <div className={`mb-4 flex flex-col ${className}`}>
       <p className="text-sm font-semibold text-[#00000099] dark:text-[#FFFFFF99] mb-2">{label}</p>
-      <div className="bg-base-300 rounded-[16px] p-4 flex-grow">
+      <div className="bg-base-300 rounded-[16px] p-4 flex-grow h-full">
         {isAddress ? (
           <div className="flex items-center">
             <TruncatedAddressWithCopy address={value} slice={8} />
@@ -104,7 +68,7 @@ function InfoItem({
               rel="noopener noreferrer"
               className="ml-2 text-primary hover:text-primary/50"
             >
-              <FaExternalLinkAlt aria-hidden="true" />{' '}
+              <FaExternalLinkAlt aria-hidden="true" />
               <span className="sr-only">External link</span>
             </a>
           </div>

From 27fc1f317b52a96584c74b63889232d1f9b61925 Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:41:48 -0500
Subject: [PATCH 2/3] fix: long description render

---
 components/factory/modals/denomInfo.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/factory/modals/denomInfo.tsx b/components/factory/modals/denomInfo.tsx
index 064531e3..7ec740fa 100644
--- a/components/factory/modals/denomInfo.tsx
+++ b/components/factory/modals/denomInfo.tsx
@@ -28,7 +28,7 @@ export const DenomInfoModal: React.FC<{
         <h3 className="text-xl font-semibold text-[#161616] dark:text-white mb-6">Denom Details</h3>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <InfoItem label="Name" value={denom?.name ?? 'No name available'} />
-          <InfoItem label="Symbol" value={denom?.symbol ?? 'No symbol available'} />
+          <InfoItem label="Ticker" value={denom?.display.toUpperCase() ?? 'No ticker available'} />
           <InfoItem
             label="Description"
             value={denom?.description ?? 'No description available'}
@@ -73,7 +73,7 @@ function InfoItem({
             </a>
           </div>
         ) : (
-          <p className="text-[#161616] dark:text-white truncate" title={value}>
+          <p className="text-[#161616] dark:text-white" title={value}>
             {value}
           </p>
         )}

From 1d95cfe9e8092ce9db33b35dfd1334abce73ef09 Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:58:14 -0500
Subject: [PATCH 3/3] fix: token list test and denom info name truncate

---
 .../bank/components/__tests__/tokenList.test.tsx     |  7 +++----
 components/factory/modals/denomInfo.tsx              | 12 ++++++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/bank/components/__tests__/tokenList.test.tsx b/components/bank/components/__tests__/tokenList.test.tsx
index 79096175..9e33b14b 100644
--- a/components/bank/components/__tests__/tokenList.test.tsx
+++ b/components/bank/components/__tests__/tokenList.test.tsx
@@ -83,10 +83,9 @@ describe('TokenList', () => {
 
     await waitFor(() => {
       expect(screen.getByLabelText('Close modal')).toBeInTheDocument();
-      expect(screen.getByText('NAME')).toBeInTheDocument();
-      expect(screen.getByText('SYMBOL')).toBeInTheDocument();
-      expect(screen.getByText('DESCRIPTION')).toBeInTheDocument();
-      expect(screen.getByText('EXPONENT')).toBeInTheDocument();
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Ticker')).toBeInTheDocument();
+      expect(screen.getByText('Description')).toBeInTheDocument();
     });
   });
 
diff --git a/components/factory/modals/denomInfo.tsx b/components/factory/modals/denomInfo.tsx
index 7ec740fa..3632cd4e 100644
--- a/components/factory/modals/denomInfo.tsx
+++ b/components/factory/modals/denomInfo.tsx
@@ -9,6 +9,10 @@ export const DenomInfoModal: React.FC<{
   isOpen?: boolean;
   onClose?: () => void;
 }> = ({ denom, modalId, isOpen, onClose }) => {
+  let nameIsAddress = false;
+  if (denom?.name.startsWith('factory/manifest1')) {
+    nameIsAddress = true;
+  }
   return (
     <dialog
       id={modalId}
@@ -27,7 +31,11 @@ export const DenomInfoModal: React.FC<{
         </form>
         <h3 className="text-xl font-semibold text-[#161616] dark:text-white mb-6">Denom Details</h3>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <InfoItem label="Name" value={denom?.name ?? 'No name available'} />
+          <InfoItem
+            label="Name"
+            value={denom?.name ?? 'No name available'}
+            isAddress={nameIsAddress}
+          />
           <InfoItem label="Ticker" value={denom?.display.toUpperCase() ?? 'No ticker available'} />
           <InfoItem
             label="Description"
@@ -60,7 +68,7 @@ function InfoItem({
       <div className="bg-base-300 rounded-[16px] p-4 flex-grow h-full">
         {isAddress ? (
           <div className="flex items-center">
-            <TruncatedAddressWithCopy address={value} slice={8} />
+            <TruncatedAddressWithCopy address={value} slice={17} />
             <a
               href={`${process.env.NEXT_PUBLIC_TESTNET_EXPLORER_URL}/account/${value}`}
               target="_blank"