fix: tf render cleanup (#202)

liftedinit · Jan 10, 2025 · 0d079ba · 0d079ba
1 parent af2a9db
commit 0d079ba
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 22 deletions.
diff --git a/components/factory/forms/ConfirmationForm.tsx b/components/factory/forms/ConfirmationForm.tsx
@@ -176,15 +176,15 @@ export default function ConfirmationForm({
             <div className="text-md">
               You will be required to sign two messages: the first to create the token on the
               blockchain, and the second to configure the token&#39;s metadata, including its name,
-              symbol, description, and other details.
+              ticker, description, and other details.
             </div>
           )}
           {/* Token Information */}
           <div>
             <h2 className="text-xl font-semibold mb-4 ">Token Information</h2>
             <div className="grid grid-cols-2 gap-4">
               <div className="bg-base-300 p-4 rounded-[12px]">
-                <label className="text-sm text-gray-500 dark:text-gray-400">Symbol</label>
+                <label className="text-sm text-gray-500 dark:text-gray-400">Ticker</label>
                 <div className="">{formData.symbol || formData.display}</div>
               </div>
               <div className="bg-base-300 p-4 rounded-[12px]">

diff --git a/components/factory/forms/Success.tsx b/components/factory/forms/Success.tsx
@@ -52,8 +52,8 @@ export default function Success({
               <p className="text-lg font-medium">{formData.name}</p>
             </div>
             <div>
-              <h3 className="text-md font-light text-gray-400">SYMBOL</h3>
-              <p className="text-lg font-medium">{formData.symbol}</p>
+              <h3 className="text-md font-light text-gray-400">TICKER</h3>
+              <p className="text-lg font-medium">{formData.display}</p>
             </div>
             <div className="col-span-1 md:col-span-2 max-h-28 overflow-y-auto">
               <h3 className="text-md font-light text-gray-400">DESCRIPTION</h3>

diff --git a/components/factory/forms/TokenDetailsForm.tsx b/components/factory/forms/TokenDetailsForm.tsx
@@ -31,6 +31,7 @@ export default function TokenDetails({
       .noProfanity(),
     name: Yup.string().required('Name is required').noProfanity(),
     uri: Yup.string()
+      .optional()
       .url('Must be a valid URL')
       .matches(/^https:\/\//i, 'URL must use HTTPS protocol')
       .matches(/\.(jpg|jpeg|png|gif)$/i, 'URL must point to an image file'),
@@ -44,7 +45,6 @@ export default function TokenDetails({
     formData.isGroup && formData.groupPolicyAddress ? formData.groupPolicyAddress : address;
 
   const fullDenom = `factory/${effectiveAddress}/u${formData.subdenom}`;
-  console.log(formData);
   // Automatically set denom units
   React.useEffect(() => {
     const denomUnits = [
@@ -70,17 +70,11 @@ export default function TokenDetails({
               <div className="flex items-center mx-auto w-full dark:bg-[#FFFFFF0F] bg-[#FFFFFFCC] p-6 sm:p-8 rounded-2xl shadow-lg">
                 <div className="w-full">
                   <h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] dark:text-[#FFFFFF99] dark:border-[#FFFFFF99] border-b-[black] pb-4">
-                    Token Metadata
+                    Token Metadata for{' '}
+                    <span className={'text-gray-500'}>${formData.subdenom.toUpperCase()}</span>
                   </h1>
                   <Form className="min-h-[330px] flex flex-col gap-4">
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                      <TextInput
-                        label="Subdenom"
-                        name="subdenom"
-                        disabled={true}
-                        value={`u${formData.subdenom}`}
-                        aria-label="Token subdenom"
-                      />
                       <TextInput
                         label="Name"
                         name="name"
@@ -90,9 +84,8 @@ export default function TokenDetails({
                           handleChange(e);
                         }}
                         aria-label="Token name"
+                        placeholder={'Enter the token name, e.g., "My token"'}
                       />
-                    </div>
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <TextInput
                         label="Ticker"
                         name="display"
@@ -104,11 +97,15 @@ export default function TokenDetails({
                           handleChange(e);
                         }}
                         aria-label="Token ticker"
+                        placeholder={'Enter the token ticker, e.g., "MTK"'}
                       />
+                    </div>
+                    <div className="grid grid-cols-1 gap-4">
                       <TextInput
                         label="Logo URL"
                         name="uri"
                         value={formData.uri}
+                        placeholder={'Enter the logo URL (optional)'}
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           updateField('uri', e.target.value);
                           handleChange(e);
@@ -125,6 +122,7 @@ export default function TokenDetails({
                         handleChange(e);
                       }}
                       aria-label="Token description"
+                      placeholder={'Enter the token description'}
                     />
                   </Form>
                 </div>

diff --git a/components/factory/forms/__tests__/ConfirmationForm.test.tsx b/components/factory/forms/__tests__/ConfirmationForm.test.tsx
@@ -24,7 +24,7 @@ describe('ConfirmationForm Component', () => {
 
   test('renders form with correct details', () => {
     renderWithProps();
-    expect(screen.getByText('Symbol')).toBeInTheDocument();
+    expect(screen.getByText('Ticker')).toBeInTheDocument();
     expect(screen.getByText(mockTokenFormData.symbol)).toBeInTheDocument();
 
     expect(screen.getByText('Description')).toBeInTheDocument();

diff --git a/components/factory/forms/__tests__/Success.test.tsx b/components/factory/forms/__tests__/Success.test.tsx
@@ -30,8 +30,8 @@ describe('Success Component', () => {
     renderWithChainProvider(<Success {...mockProps} />);
     expect(screen.getByText('NAME')).toBeInTheDocument();
     expect(screen.getByText(mockTokenFormData.name)).toBeInTheDocument();
-    expect(screen.getByText('SYMBOL')).toBeInTheDocument();
-    expect(screen.getByText(mockTokenFormData.symbol)).toBeInTheDocument();
+    expect(screen.getByText('TICKER')).toBeInTheDocument();
+    expect(screen.getByText(mockTokenFormData.display)).toBeInTheDocument();
     expect(screen.getByText('DESCRIPTION')).toBeInTheDocument();
     expect(screen.getByText(mockTokenFormData.description)).toBeInTheDocument();
   });

diff --git a/components/factory/forms/__tests__/TokenDetailsForm.test.tsx b/components/factory/forms/__tests__/TokenDetailsForm.test.tsx
@@ -21,7 +21,6 @@ describe('TokenDetailsForm Component', () => {
 
   test('renders form with correct details', () => {
     renderWithChainProvider(<TokenDetailsForm {...mockProps} />);
-    expect(screen.getByLabelText('Subdenom')).toBeInTheDocument();
     expect(screen.getByLabelText('Ticker')).toBeInTheDocument();
     expect(screen.getByLabelText('Name')).toBeInTheDocument();
     expect(screen.getByLabelText('Description')).toBeInTheDocument();
@@ -51,9 +50,6 @@ describe('TokenDetailsForm Component', () => {
       });
     });
 
-    const subdenomInput = screen.getByLabelText('Subdenom');
-    expect(subdenomInput).toBeDisabled();
-
     const descriptionInput = screen.getByLabelText('Description');
     fireEvent.change(descriptionInput, { target: { value: 'New Description' } });
     await waitFor(() => {