Skip to content

Commit

Permalink
fix: token creation form layout and theme (#109)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fmorency
fmorency authored Dec 4, 2024
1 parent 9e2b820 commit ca111aa
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 99 deletions.
60 changes: 19 additions & 41 deletions components/factory/forms/ConfirmationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,23 +94,28 @@ export default function ConfirmationForm({
</div>

<div className="space-y-6">
<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.
</div>
{/* Token Information */}
<div>
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Token Information</h2>
<h2 className="text-xl font-semibold mb-4 ">Token Information</h2>
<div className="grid grid-cols-2 gap-4">
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Symbol</label>
<div className="dark:text-[#FFFFFF99]">{formData.symbol || formData.display}</div>
<div className="bg-base-300 p-4 rounded-[12px]">
<label className="text-sm text-gray-500 dark:text-gray-400">Symbol</label>
<div className="">{formData.symbol || formData.display}</div>
</div>
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Subdenom</label>
<div className="dark:text-[#FFFFFF99]">{formData.subdenom}</div>
<div className="bg-base-300 p-4 rounded-[12px]">
<label className="text-sm text-gray-500 dark:text-gray-400">Logo URL</label>
<div className="">{formData.uri || 'N/A'}</div>
</div>
</div>
<div className="mt-4 dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Description</label>
<div className="mt-4 bg-base-300 p-4 rounded-[12px]">
<label className="text-sm text-gray-500 dark:text-gray-400">Description</label>
<div
className="overflow-hidden text-ellipsis whitespace-nowrap dark:text-[#FFFFFF99]"
className="overflow-hidden text-ellipsis whitespace-nowrap "
title={formData.description}
>
{formData.description.length > 200
Expand All @@ -119,42 +124,15 @@ export default function ConfirmationForm({
</div>
</div>
</div>

{/* Denom Units */}
<div>
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Denom Units</h2>
<div className="grid grid-cols-2 gap-4">
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Base Denom</label>
<div className="dark:text-[#FFFFFF99]">{fullDenom}</div>
</div>
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Display Denom</label>
<div className="dark:text-[#FFFFFF99]">{formData.subdenom.slice(1)}</div>
</div>
</div>
</div>

{/* Advanced Details */}
<div>
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Advanced Details</h2>
<div className="grid grid-cols-2 gap-4">
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">URI</label>
<div className="dark:text-[#FFFFFF99]">{formData.uri || 'N/A'}</div>
</div>
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">URI Hash</label>
<div className="dark:text-[#FFFFFF99]">{formData.uriHash || 'N/A'}</div>
</div>
</div>
</div>
</div>
</div>

{/* Buttons */}
<div className="flex gap-6 mt-6 mx-auto w-full">
<button onClick={prevStep} className="btn btn-neutral w-[calc(50%-12px)]">
<button
onClick={prevStep}
className="btn btn-neutral dark:text-white text-black w-[calc(50%-12px)]"
>
Edit Token Metadata
</button>
<button
Expand Down
2 changes: 1 addition & 1 deletion components/factory/forms/CreateDenom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export default function CreateDenom({
</div>
<div className="flex gap-6 mt-6 mx-auto w-full">
<Link href="/factory" legacyBehavior>
<button className="btn btn-neutral py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<button className="btn btn-neutral dark:text-white text-black py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<span className="hidden sm:inline">Back: Factory Page</span>
<span className="sm:hidden">Back</span>
</button>
Expand Down
24 changes: 4 additions & 20 deletions components/factory/forms/Success.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ export default function Success({

return (
<section className="lg:max-h-[90vh] max-h-screen lg:mt-1 mt-12 flex items-center justify-center">
<div className="max-w-2xl mx-auto bg-base-300 shadow-lg rounded-lg p-8 text-white">
<div className="max-w-2xl mx-auto bg-base-300 shadow-lg rounded-lg p-8">
<h1 className="text-3xl font-bold mb-4">Success!</h1>
<p className="text-lg mb-2 text-pretty">
Your token was successfully created and the metadata was set.
</p>
<p className="text-md text-gray-300 mb-6 text-pretty">
<p className="text-md text-[#808080] mb-6 text-pretty">
You can now mint, burn, or change the admin of your tokens and send them to other wallets.
</p>

<div className="text-md text-gray-300 mb-6 text-pretty">
<div className="text-md text-[#808080] mb-6 text-pretty">
The full denom of your token is:{' '}
<span className="font-semibold">
<TruncatedAddressWithCopy address={fullDenom} slice={24} />
Expand All @@ -39,29 +39,13 @@ export default function Success({
<h3 className="text-md font-light text-gray-400">SYMBOL</h3>
<p className="text-lg font-medium">{formData.symbol}</p>
</div>
<div>
<h3 className="text-md font-light text-gray-400">DISPLAY</h3>
<p className="text-lg font-medium">{formData.display}</p>
</div>
<div>
<h3 className="text-md font-light text-gray-400">SUBDENOM</h3>
<p className="text-lg font-medium">{formData.subdenom}</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>
<p className="text-lg font-medium">{formData.description}</p>
</div>
<div>
<h3 className="text-md font-light text-gray-400">BASE EXPONENT</h3>
<p className="text-lg font-medium">0</p>
</div>
<div>
<h3 className="text-md font-light text-gray-400">DISPLAY EXPONENT</h3>
<p className="text-lg font-medium">{formData.denomUnits[1].exponent}</p>
</div>
{formData.uri && (
<div className="col-span-1 md:col-span-2">
<h3 className="text-md font-light text-gray-400">URI</h3>
<h3 className="text-md font-light text-gray-400">Logo URL</h3>
<p className="text-lg font-medium">{formData.uri}</p>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion components/factory/forms/TokenDetailsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export default function TokenDetails({
<div className="flex gap-6 mt-6 mx-auto w-full">
<button
onClick={prevStep}
className="btn btn-neutral py-2.5 sm:py-3.5 w-[calc(50%-12px)]"
className="btn btn-neutral dark:text-white text-black py-2.5 sm:py-3.5 w-[calc(50%-12px)]"
>
Previous
</button>
Expand Down
28 changes: 2 additions & 26 deletions components/factory/forms/__tests__/ConfirmationForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,39 +22,15 @@ function renderWithProps(props = {}) {
describe('ConfirmationForm Component', () => {
afterEach(cleanup);

// TODO: Fix hardcoded values in component
test('renders form with correct details', () => {
renderWithProps();
expect(screen.getByText('Token Information')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.name)).toBeInTheDocument();

expect(screen.getByText('Symbol')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.symbol)).toBeInTheDocument();

expect(screen.getByText('Subdenom')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.subdenom)).toBeInTheDocument();

expect(screen.getByText('Description')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.description)).toBeInTheDocument();

expect(screen.getByText('Denom Units')).toBeInTheDocument();
expect(screen.getByText('Base Denom')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.denomUnits[0].denom)).toBeInTheDocument();

expect(screen.getByText('Display Denom')).toBeInTheDocument();
expect(screen.getByText(`${mockTokenFormData.subdenom}`)).toBeInTheDocument();
});

// TODO: Fix advanced details in component
test('toggles advanced details correctly', () => {
renderWithProps();
const toggleButton = screen.getByText('Advanced Details');
fireEvent.click(toggleButton);

expect(screen.getByText('URI')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.uri)).toBeInTheDocument();

expect(screen.getByText('URI Hash')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.uriHash)).toBeInTheDocument();
expect(screen.getByText('Logo URL')).toBeInTheDocument();
expect(screen.getByText(`${mockTokenFormData.uri}`)).toBeInTheDocument();
});
});
10 changes: 0 additions & 10 deletions components/factory/forms/__tests__/Success.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,7 @@ describe('Success Component', () => {
expect(screen.getByText(mockTokenFormData.name)).toBeInTheDocument();
expect(screen.getByText('SYMBOL')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.symbol)).toBeInTheDocument();
expect(screen.getByText('DISPLAY')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.display)).toBeInTheDocument();
expect(screen.getByText('SUBDENOM')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.subdenom)).toBeInTheDocument();
expect(screen.getByText('DESCRIPTION')).toBeInTheDocument();
expect(screen.getByText(mockTokenFormData.description)).toBeInTheDocument();
expect(screen.getByText('BASE EXPONENT')).toBeInTheDocument();
expect(screen.getByText('0')).toBeInTheDocument();
expect(screen.getByText('DISPLAY EXPONENT')).toBeInTheDocument();
expect(
screen.getByText(mockTokenFormData.denomUnits[1].exponent.toString())
).toBeInTheDocument();
});
});

0 comments on commit ca111aa

Please sign in to comment.