chore: ArNS Marketplace UI #880
+2,831
−13
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -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 { BookCopy, CircleCheck, Star } from 'lucide-react'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| import { useEffect, useState } from 'react'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| import { ReactNode } from 'react-markdown'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| import { Link, useNavigate } from 'react-router-dom'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
@@ -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"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| {row.getValue('role') === 'owner' ? ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <Tooltip | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| message={ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
@@ -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 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| row.original.name | |
| lowerCaseDomain(row.original.name) |
Comment on lines
533
to
551
Contributor
There was a problem hiding this comment.
🛠️ 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.
Contributor
There was a problem hiding this comment.
Instead of encoding URI component, we have a lowerCaseDomain utility for the names
Contributor
There was a problem hiding this comment.
🧩 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,90 @@ | ||||||||||||||||||||||||||||||||||||||||
| import { fetchActiveListings } from '@blockydevs/arns-marketplace-data'; | ||||||||||||||||||||||||||||||||||||||||
| import { | ||||||||||||||||||||||||||||||||||||||||
| ActiveListingTable, | ||||||||||||||||||||||||||||||||||||||||
| Card, | ||||||||||||||||||||||||||||||||||||||||
| type Domain, | ||||||||||||||||||||||||||||||||||||||||
| Pagination, | ||||||||||||||||||||||||||||||||||||||||
| useCursorPagination, | ||||||||||||||||||||||||||||||||||||||||
| } from '@blockydevs/arns-marketplace-ui'; | ||||||||||||||||||||||||||||||||||||||||
| import { useGlobalState } from '@src/state'; | ||||||||||||||||||||||||||||||||||||||||
| import { | ||||||||||||||||||||||||||||||||||||||||
| BLOCKYDEVS_ACTIVITY_PROCESS_ID, | ||||||||||||||||||||||||||||||||||||||||
| getCurrentListingArioPrice, | ||||||||||||||||||||||||||||||||||||||||
| marketplaceQueryKeys, | ||||||||||||||||||||||||||||||||||||||||
| } from '@src/utils/marketplace'; | ||||||||||||||||||||||||||||||||||||||||
| import { useQuery } from '@tanstack/react-query'; | ||||||||||||||||||||||||||||||||||||||||
| import { useNavigate } from 'react-router-dom'; | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| const PAGE_SIZE = 20; | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| const ActiveListingsTab = () => { | ||||||||||||||||||||||||||||||||||||||||
| const navigate = useNavigate(); | ||||||||||||||||||||||||||||||||||||||||
| const [{ aoClient }] = useGlobalState(); | ||||||||||||||||||||||||||||||||||||||||
| const pagination = useCursorPagination(PAGE_SIZE); | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| const queryActiveListings = useQuery({ | ||||||||||||||||||||||||||||||||||||||||
| refetchInterval: 15 * 1000, | ||||||||||||||||||||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. Another question of if we need this refetch interval - its a costly query. Especially since this is a paginated query. There was a problem hiding this comment. If we want to show users newly added listings in real time, then this interval is necessary. If it’s not that important for us, we can skip it here. |
||||||||||||||||||||||||||||||||||||||||
| structuralSharing: false, | ||||||||||||||||||||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. you are using isPending below - i don't know much about this param I'll admit but i think we do want this. There was a problem hiding this comment. |
||||||||||||||||||||||||||||||||||||||||
| queryKey: marketplaceQueryKeys.listings.list('active', { | ||||||||||||||||||||||||||||||||||||||||
| page: pagination.page, | ||||||||||||||||||||||||||||||||||||||||
| pageSize: pagination.pageSize, | ||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+27
to
+29
Contributor
There was a problem hiding this comment. should probably have cursor in here as well, since the page number and size may be the same with a different cursor. |
||||||||||||||||||||||||||||||||||||||||
| }), | ||||||||||||||||||||||||||||||||||||||||
| queryFn: () => { | ||||||||||||||||||||||||||||||||||||||||
| return fetchActiveListings({ | ||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
24
to
33
Contributor
There was a problem hiding this comment. Guard the query until aoClient is ready. Without enabled, the query may run with aoClient undefined and fail. const queryActiveListings = useQuery({
refetchInterval: 15 * 1000,
structuralSharing: false,
+ enabled: Boolean(aoClient),
queryKey: marketplaceQueryKeys.listings.list('active', {
page: pagination.page,
pageSize: pagination.pageSize,
}),📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||||||||||
| ao: aoClient, | ||||||||||||||||||||||||||||||||||||||||
| activityProcessId: BLOCKYDEVS_ACTIVITY_PROCESS_ID, | ||||||||||||||||||||||||||||||||||||||||
| limit: pagination.pageSize, | ||||||||||||||||||||||||||||||||||||||||
| cursor: pagination.cursor, | ||||||||||||||||||||||||||||||||||||||||
| }); | ||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||
| select: (data) => { | ||||||||||||||||||||||||||||||||||||||||
| pagination.storeNextCursor(data.nextCursor, !!data.hasMore); | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| return { | ||||||||||||||||||||||||||||||||||||||||
| ...data, | ||||||||||||||||||||||||||||||||||||||||
| items: data.items.map((item): Domain => { | ||||||||||||||||||||||||||||||||||||||||
| const currentPrice = getCurrentListingArioPrice(item); | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| return { | ||||||||||||||||||||||||||||||||||||||||
| name: item.name, | ||||||||||||||||||||||||||||||||||||||||
| endDate: item.expiresAt ?? undefined, | ||||||||||||||||||||||||||||||||||||||||
| ownershipType: item.ownershipType, | ||||||||||||||||||||||||||||||||||||||||
| price: { | ||||||||||||||||||||||||||||||||||||||||
| type: item.type === 'english' ? 'bid' : 'buyout', | ||||||||||||||||||||||||||||||||||||||||
| symbol: 'ARIO', | ||||||||||||||||||||||||||||||||||||||||
| value: Number(currentPrice), | ||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||
| type: { | ||||||||||||||||||||||||||||||||||||||||
| value: item.type, | ||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||
| action: () => { | ||||||||||||||||||||||||||||||||||||||||
| navigate(`/listings/${item.orderId}`); | ||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||||||||||||||||
| }), | ||||||||||||||||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||
coderabbitai[bot] marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||||||||||||||||||||||||||||||||||||
| }); | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| const { totalItems } = queryActiveListings.data ?? {}; | ||||||||||||||||||||||||||||||||||||||||
| const totalPages = pagination.getTotalPages(totalItems); | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| return ( | ||||||||||||||||||||||||||||||||||||||||
| <Card className="flex flex-col gap-8"> | ||||||||||||||||||||||||||||||||||||||||
| <ActiveListingTable | ||||||||||||||||||||||||||||||||||||||||
| data={queryActiveListings.data?.items ?? []} | ||||||||||||||||||||||||||||||||||||||||
| isPending={queryActiveListings.isPending} | ||||||||||||||||||||||||||||||||||||||||
| error={queryActiveListings.error?.message} | ||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||
| {!queryActiveListings.isPending && ( | ||||||||||||||||||||||||||||||||||||||||
| <Pagination | ||||||||||||||||||||||||||||||||||||||||
| totalPages={totalPages} | ||||||||||||||||||||||||||||||||||||||||
| activeIndex={pagination.page} | ||||||||||||||||||||||||||||||||||||||||
| onPageChange={pagination.setPage} | ||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||
| )} | ||||||||||||||||||||||||||||||||||||||||
| </Card> | ||||||||||||||||||||||||||||||||||||||||
| ); | ||||||||||||||||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| export default ActiveListingsTab; | ||||||||||||||||||||||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { fetchCompletedListings } from '@blockydevs/arns-marketplace-data'; | ||
| import { | ||
| Card, | ||
| CompletedListingTable, | ||
| type Domain, | ||
| Pagination, | ||
| useCursorPagination, | ||
| } from '@blockydevs/arns-marketplace-ui'; | ||
| import { useGlobalState } from '@src/state'; | ||
| import { | ||
| BLOCKYDEVS_ACTIVITY_PROCESS_ID, | ||
| getCurrentListingArioPrice, | ||
| marketplaceQueryKeys, | ||
| } from '@src/utils/marketplace'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| const PAGE_SIZE = 20; | ||
|
|
||
| const CompletedListingsTab = () => { | ||
| const navigate = useNavigate(); | ||
| const [{ aoClient }] = useGlobalState(); | ||
| const pagination = useCursorPagination(PAGE_SIZE); | ||
|
|
||
| const queryCompletedListings = useQuery({ | ||
| refetchInterval: 15 * 1000, | ||
| enabled: Boolean(aoClient), | ||
| queryKey: marketplaceQueryKeys.listings.list('completed', { | ||
| page: pagination.page, | ||
| pageSize: pagination.pageSize, | ||
| }), | ||
| queryFn: () => { | ||
| return fetchCompletedListings({ | ||
| ao: aoClient, | ||
| activityProcessId: BLOCKYDEVS_ACTIVITY_PROCESS_ID, | ||
| limit: pagination.pageSize, | ||
| cursor: pagination.cursor, | ||
| }); | ||
| }, | ||
|
Comment on lines
24
to
39
Contributor
There was a problem hiding this comment. refetch question on this one
|
||
| select: (data) => { | ||
| pagination.storeNextCursor(data.nextCursor, !!data.hasMore); | ||
coderabbitai[bot] marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| return { | ||
| ...data, | ||
| items: data.items.map((item): Domain => { | ||
| const currentPrice = getCurrentListingArioPrice(item); | ||
|
|
||
| return { | ||
| name: item.name, | ||
| createdAt: item.createdAt, | ||
| endDate: item.endedAt, | ||
| ownershipType: item.ownershipType, | ||
| price: { | ||
| type: item.type === 'english' ? 'bid' : 'buyout', | ||
| symbol: 'ARIO', | ||
| value: Number(currentPrice), | ||
| }, | ||
| type: { | ||
| value: item.type, | ||
| }, | ||
| action: () => { | ||
| navigate(`/listings/${item.orderId}`); | ||
| }, | ||
| }; | ||
| }), | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| const { totalItems } = queryCompletedListings.data ?? {}; | ||
| const totalPages = pagination.getTotalPages(totalItems); | ||
|
|
||
| return ( | ||
| <Card className="flex flex-col gap-8"> | ||
| <CompletedListingTable | ||
| data={queryCompletedListings.data?.items ?? []} | ||
| isPending={queryCompletedListings.isPending} | ||
| error={queryCompletedListings.error?.message} | ||
| /> | ||
| {!queryCompletedListings.isPending && ( | ||
| <Pagination | ||
| totalPages={totalPages} | ||
| activeIndex={pagination.page} | ||
| onPageChange={pagination.setPage} | ||
| /> | ||
| )} | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| export default CompletedListingsTab; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
might be why some styling is off
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import '@src/index.css';it's moved to main.tsx and should override the package stylesare you able to provide examples with screenshots of things that don’t look the way they should?