Skip to content

chore: ArNS Marketplace UI #880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dtfiedler wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

chore: ArNS Marketplace UI #880

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
034797e
feat: arns marketplace ui
md-blockydevs Sep 26, 2025
9ed1cc9
fix: coderabbit fixes
md-blockydevs Sep 26, 2025
b709a7c
feat: new url search params instead of plain string
mateusz-palosz Sep 29, 2025
17dec7e
feat: moved my ants link to top navigation
mateusz-palosz Oct 1, 2025
a0e4e16
feat: manage table with sell link
mateusz-palosz Oct 1, 2025
96b9fb6
feat: minor changes
mateusz-palosz Oct 3, 2025
f4c918c
feat: custom listing hooks
mateusz-palosz Oct 3, 2025
e809d93
feat: support last marketplace changes
md-blockydevs Oct 29, 2025
1baa4d6
Merge pull request #4 from blockydevs/feat-data-lib-integration-updat…
md-blockydevs Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: manage table with sell link
  • Loading branch information
@mateusz-palosz
mateusz-palosz committed Oct 1, 2025
commit a0e4e16d63dc61239df4e542d2e6e22ac61a9086
23 changes: 21 additions & 2 deletions src/components/data-display/tables/DomainsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import { ANTStateError } from '@src/utils/errors';
import { queryClient } from '@src/utils/network';
import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
import { capitalize } from 'lodash';
import { CircleCheck, Star } from 'lucide-react';
import { BookCopy, CircleCheck, Star } from 'lucide-react';
import { useEffect, useState } from 'react';
import { ReactNode } from 'react-markdown';
import { Link, useNavigate } from 'react-router-dom';
Expand Down Expand Up @@ -470,7 +470,7 @@ const DomainsTable = ({
case 'action': {
return (
<div className="flex justify-end w-full">
<span className="flex pr-3 w-fit gap-3">
<span className="flex pr-3 w-fit gap-3">
{row.getValue('role') === 'owner' ? (
<Tooltip
message={
Expand Down Expand Up @@ -530,6 +530,25 @@ const DomainsTable = ({
) : (
<></>
)}
{row.getValue('role') === 'owner' && (
<Tooltip
message="Sell"
icon={
<button
disabled={row.original.version < MIN_ANT_VERSION}
onClick={() =>
navigate(
`/my-ants/new-listing/${row.original.processId.toString()}?name=${
row.original.name
Copy link
Contributor

@atticusofsparta atticusofsparta Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a util for parsing url safe domains, good to use here.

Suggested change
row.original.name
lowerCaseDomain(row.original.name)

}`,
)
}
>
<BookCopy className="w-[18px] text-grey" />
</button>
}
/>
)}
Comment on lines 533 to 551
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 1, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Consider URL-encoding the name parameter in the query string.

The navigation constructs a URL with the domain name as a query parameter, but the name is not URL-encoded. If domain names contain special characters (spaces, ampersands, Unicode, etc.), this could result in malformed URLs.

Apply this diff to properly encode the name parameter:

                    <Tooltip
                      message="Sell"
                      icon={
                        <button
                          disabled={row.original.version < MIN_ANT_VERSION}
                          onClick={() =>
                            navigate(
-                             `/my-ants/new-listing/${row.original.processId.toString()}?name=${
-                               row.original.name
-                             }`,
+                             `/my-ants/new-listing/${row.original.processId}?name=${encodeURIComponent(
+                               row.original.name
+                             )}`,
                            )
                          }
                        >
                          <BookCopy className="w-[18px] text-grey" />
                        </button>
                      }
                    />

Note: The .toString() call on processId is also redundant since it's already a string, and has been removed in the suggestion above.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{row.getValue('role') === 'owner' && (
<Tooltip
message="Sell"
icon={
<button
disabled={row.original.version < MIN_ANT_VERSION}
onClick={() =>
navigate(
`/my-ants/new-listing/${row.original.processId.toString()}?name=${
row.original.name
}`,
)
}
>
<BookCopy className="w-[18px] text-grey" />
</button>
}
/>
)}
{row.getValue('role') === 'owner' && (
<Tooltip
message="Sell"
icon={
<button
disabled={row.original.version < MIN_ANT_VERSION}
onClick={() =>
navigate(
`/my-ants/new-listing/${row.original.processId}?name=${encodeURIComponent(
row.original.name
)}`,
)
}
>
<BookCopy className="w-[18px] text-grey" />
</button>
}
/>
)}
🤖 Prompt for AI Agents 
In src/components/data-display/tables/DomainsTable.tsx around lines 533 to 551,
the navigation URL builds a query string with row.original.name without
URL-encoding which can break for spaces/special chars; update the navigate call
to URL-encode the name (e.g., use encodeURIComponent(row.original.name)) and
remove the redundant .toString() on processId if it is already a string so the
resulting URL is well-formed and safe.

Copy link
Contributor

@atticusofsparta atticusofsparta Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of encoding URI component, we have a lowerCaseDomain utility for the names

Copy link
Contributor

@coderabbitai coderabbitai bot Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find and examine the lowerCaseDomain utility implementation
ast-grep --pattern 'function lowerCaseDomain($$$) {
  $$$
}'

# Also search for export statements
ast-grep --pattern 'export $_ lowerCaseDomain = $$$'

# Fallback with rg to locate the function
rg -nP 'lowerCaseDomain\s*[=:]' --type=ts --type=tsx -A 10

Length of output: 281

🏁 Script executed:

#!/bin/bash
# Search for usage patterns of lowerCaseDomain in navigation/URL construction
rg -nP 'lowerCaseDomain.*navigate|navigate.*lowerCaseDomain' --type=ts -B 2 -A 2

# Also check for lowerCaseDomain usage in Link components or URL building
rg -nP 'lowerCaseDomain.*to=|to=.*lowerCaseDomain' --type=ts -B 2 -A 2

# Look for any query string construction with lowerCaseDomain
rg -nP 'lowerCaseDomain.*\?.*=' --type=ts -B 2 -A 2

Length of output: 1848

🏁 Script executed:

#!/bin/bash
# Search for query string construction with name or domain parameters
rg -nP '\?name=' --type=ts -B 1 -A 1

# Also search for URLSearchParams or query parameter encoding
rg -nP 'encodeURIComponent.*name|URLSearchParams' --type=ts -B 2 -A 2

Length of output: 4825

@atticusofsparta, you're absolutely right—using lowerCaseDomain maintains consistency with how domain names are handled throughout the codebase. I can see it's used for path normalization in navigation elsewhere.

For the minimal fix respecting your approach, you could apply:

navigate(
  `/my-ants/new-listing/${row.original.processId}?name=${lowerCaseDomain(
    row.original.name
  )}`,
)

However, I noticed that newer components in this PR (like FixedListingPriceSection.tsx and DutchListingPriceSection.tsx) use URLSearchParams for building query strings, which automatically handles URL encoding:

const params = new URLSearchParams({
  name: lowerCaseDomain(row.original.name),
  // ... other params
});
navigate(`/my-ants/new-listing/${row.original.processId}?${params.toString()}`);

This pattern would be more robust for edge cases while still using lowerCaseDomain for normalization. Either way works, but the URLSearchParams approach aligns with the pattern established in the Listings feature components.

<ManageAssetButtons
id={lowerCaseDomain(row.getValue('name') as string)}
assetType="names"
Expand Down
Loading