Merge pull request #288 from infinitydotxyz/slug

Slug

pages/collection/[name]/index.tsx

@@ -22,6 +22,7 @@ import { CartType, useCartContext } from 'src/utils/context/CartContext';
 import { ERC721CollectionCartItem, ERC721TokenCartItem } from 'src/utils/types';
 import { borderColor, brandTextColor, hoverColor, iconButtonStyle, selectedColor } from 'src/utils/ui-constants';
 import { twMerge } from 'tailwind-merge';
+import { useNetwork } from 'wagmi';
 
 interface CollectionDashboardProps {
  collection: Collection & Partial<CollectionStats>;
@@ -47,7 +48,10 @@ export default function ItemsPage(props: CollectionDashboardProps) {
  collSelection
  } = useAppContext();
 
- const chainId = collection.chainId as ChainId;
+ const { chain } = useNetwork();
+ const { selectedChain } = useAppContext();
+ const chainId = (chain?.id || selectedChain || collection.chainId) as ChainId;
+
  const { setRef } = useScrollInfo();
  const { isDesktop } = useScreenSize();
 
@@ -531,9 +535,10 @@ export default function ItemsPage(props: CollectionDashboardProps) {
  <div className={`${showCart ? 'w-0' : 'flex md:w-1/3'} transition-width duration-100`}>
  <CollectionItemsPageSidebar
  key={collectionAddress}
- collectionChainId={collection.chainId as ChainId}
+ collectionChainId={chainId}
  collectionAddress={collection.address}
  collectionImage={collection.metadata.profileImage}
+ collectionSlug={collection.slug}
  />
  </div>
  )}
@@ -545,14 +550,15 @@ export default function ItemsPage(props: CollectionDashboardProps) {
  <CollectionManualBidList
  key={collectionAddress}
  collectionAddress={collection.address}
- collectionChainId={collection.chainId as ChainId}
+ collectionChainId={chainId}
  />
  )}
 
  {selectedCollectionTab === CollectionPageTabs.Analytics && (
  <CollectionCharts
  key={collectionAddress}
  collectionAddress={collection.address}
+ collectionSlug={collection.slug}
  collectionChainId={chainId}
  collectionImage={collection.metadata.profileImage}
  collectionName={collection.metadata.name}

pages/trending/index.tsx

@@ -167,14 +167,11 @@ const TrendingPageCard = ({ collection, onClickBuy, isCollSelected, isCollSelect
  <div className="flex items-center font-bold font-heading">
  {isDesktop && <div className="text-lg mr-8 text-right">{index + 1}</div>}
 
- <NextLink href={`/collection/${collection?.chainId}:${collection?.address}`}>
+ <NextLink href={`/collection/${collection?.slug}`}>
  <EZImage className="w-14 h-14 rounded-lg overflow-clip" src={collection?.metadata?.profileImage} />
  </NextLink>
 
- <NextLink
- href={`/collection/${collection?.chainId}:${collection?.address}`}
- className="ml-2 whitespace-normal"
- >
+ <NextLink href={`/collection/${collection?.slug}`} className="ml-2 whitespace-normal">
  {collection?.metadata?.name}
  {collection?.hasBlueCheck && <BlueCheckInline />}
  </NextLink>

src/components/astra/token-grid/token-card-modal.tsx

@@ -55,8 +55,11 @@ const useFetchAssetInfo = (chainId: string, collection: string, tokenId: string)
  };
 };
 
-const useCollectionInfo = (chainId: string, collection: string) => {
- const COLLECTION_FLOOR_CREATOR_API_ENDPOINT = `/collections/${chainId}:${collection}/floorandtokencount`;
+const useCollectionInfo = (chainId: string, collectionAddress: string, collectionSlug: string) => {
+ let COLLECTION_FLOOR_CREATOR_API_ENDPOINT = `/collections/${chainId}:${collectionAddress}/floorandtokencount`;
+ if (collectionSlug) {
+ COLLECTION_FLOOR_CREATOR_API_ENDPOINT = `/collections/${collectionSlug}/floorandtokencount`;
+ }
  const collectionFloor = useFetch<{ floorPrice: number; tokenCount: number }>(COLLECTION_FLOOR_CREATOR_API_ENDPOINT);
 
  return {
@@ -71,7 +74,8 @@ export const TokenCardModal = ({ data, modalOpen, isNFTSelected }: Props): JSX.E
 
  const collectionFloorAndTokenCount: { floorPrice?: number; tokenCount?: number } = useCollectionInfo(
  data.chainId,
- data.collectionAddress
+ data.collectionAddress,
+ data.collectionSlug ?? ''
  );
 
  const [salesAndOrdersChartData, setSalesAndOrdersChartData] = useState<NftSaleAndOrder[]>([]);

src/components/astra/token-grid/token-grid.tsx

@@ -115,6 +115,7 @@ const GridItem = ({ data, onClick, selected, isSelectable, collectionFloorPrice
  const basicTokenInfo: BasicTokenInfo = {
  tokenId: data?.tokenId ?? '',
  collectionAddress: data?.address ?? '',
+ collectionSlug: data?.collectionSlug ?? '',
  chainId: data?.chainId ?? '',
  collectionFloorPrice
  };

src/components/charts/chart-details.tsx

@@ -22,6 +22,7 @@ interface Props {
  setIndex: (index: number) => void;
  valueClassName?: string;
  collectionAddress: string;
+ collectionSlug: string;
  collectionImage: string;
  collectionName?: string;
 }
@@ -31,6 +32,7 @@ export const OrdersChartDetails = ({
  index,
  setIndex,
  collectionAddress,
+ collectionSlug,
  collectionImage,
  collectionName
 }: Props) => {
@@ -43,6 +45,7 @@ export const OrdersChartDetails = ({
  order={order}
  scroll={true}
  collectionAddress={collectionAddress}
+ collectionSlug={collectionSlug}
  collectionImage={collectionImage}
  collectionName={collectionName}
  />
@@ -71,10 +74,11 @@ interface Props2 {
  scroll?: boolean;
  collectionImage?: string;
  collectionAddress: string;
+ collectionSlug: string;
  collectionName?: string;
 }
 
-const OrderDetailViewer = ({ order, collectionAddress, collectionName }: Props2) => {
+const OrderDetailViewer = ({ order, collectionAddress, collectionName, collectionSlug }: Props2) => {
  const router = useRouter();
  const [modalOpen, setModalOpen] = useState(false);
  const { chain } = useNetwork();
@@ -84,6 +88,7 @@ const OrderDetailViewer = ({ order, collectionAddress, collectionName }: Props2)
  const basicTokenInfo: BasicTokenInfo = {
  tokenId: order?.tokenId ?? '',
  collectionAddress: collectionAddress ?? '',
+ collectionSlug: collectionSlug ?? '',
  chainId
  };
 
@@ -144,6 +149,7 @@ export const SalesChartDetails = ({ data }: Props3) => {
  const basicTokenInfo: BasicTokenInfo = {
  tokenId: data?.tokenId ?? '',
  collectionAddress: data?.collectionAddress ?? '',
+ collectionSlug: data?.collectionSlug ?? '',
  chainId
  };
 

src/components/charts/sales-chart.tsx

@@ -32,6 +32,7 @@ export interface SalesChartData {
  id: string;
  timestamp: number;
  collectionAddress: string;
+ collectionSlug: string;
  collectionName: string;
  tokenId: string;
  tokenImage: string;
@@ -161,6 +162,7 @@ function SalesChart({ width, height, data, hideOutliers }: SalesChartProps) {
  const basicTokenInfo: BasicTokenInfo = {
  tokenId: selectedSale?.tokenId ?? '',
  collectionAddress: selectedSale?.collectionAddress ?? '',
+ collectionSlug: selectedSale?.collectionSlug ?? '',
  chainId
  };
 
@@ -186,6 +188,7 @@ function SalesChart({ width, height, data, hideOutliers }: SalesChartProps) {
  id: '',
  timestamp: 0,
  collectionAddress: '',
+ collectionSlug: '',
  collectionName: '',
  tokenId: '',
  tokenImage: '',

src/components/collection/collection-charts.tsx

@@ -15,6 +15,7 @@ const infoBoxStyle = 'flex items-center justify-center opacity-60 font-bold text
 export type CollectionChartsProps = {
  className?: string;
  collectionAddress: string;
+ collectionSlug: string;
  collectionChainId: ChainId;
  collectionImage: string;
  collectionName?: string;
@@ -23,6 +24,7 @@ export type CollectionChartsProps = {
 export const CollectionCharts = ({
  className = '',
  collectionAddress,
+ collectionSlug,
  collectionChainId,
  collectionImage,
  collectionName
@@ -84,6 +86,7 @@ export const CollectionCharts = ({
  salePrice: sale.salePriceEth,
  tokenImage: sale.tokenImage,
  collectionAddress,
+ collectionSlug,
  tokenId: sale.tokenId,
  timestamp: sale.timestamp
  } as SalesChartData;
@@ -182,6 +185,7 @@ export const CollectionCharts = ({
  valueClassName={secondaryTextColor}
  setIndex={setSelectedListingIndex}
  collectionAddress={collectionAddress}
+ collectionSlug={collectionSlug}
  collectionImage={collectionImage}
  collectionName={collectionName}
  />
@@ -205,6 +209,7 @@ export const CollectionCharts = ({
  valueClassName={secondaryTextColor}
  setIndex={setSelectedBidIndex}
  collectionAddress={collectionAddress}
+ collectionSlug={collectionSlug}
  collectionImage={collectionImage}
  collectionName={collectionName}
  />

src/components/collection/collection-items-page-sidebar.tsx

@@ -17,12 +17,14 @@ export type Props = {
  collectionChainId: ChainId;
  collectionAddress: string;
  collectionImage: string;
+ collectionSlug: string;
 };
 
 export const CollectionItemsPageSidebar = ({
  className = '',
  collectionChainId,
  collectionAddress,
+ collectionSlug,
  collectionImage
 }: Props) => {
  const [salesChartData, setSalesChartData] = useState<SalesChartData[]>([]);
@@ -47,6 +49,7 @@ export const CollectionItemsPageSidebar = ({
  salePrice: sale.salePriceEth,
  tokenImage: sale.tokenImage,
  collectionAddress,
+ collectionSlug,
  tokenId: sale.tokenId,
  timestamp: sale.timestamp
  } as SalesChartData;
@@ -129,7 +132,11 @@ export const CollectionItemsPageSidebar = ({
 
  <div>
  {recentSalesOrdersData.length > 0 && (
- <CollectionRecentSalesOrders data={recentSalesOrdersData} collectionAddress={collectionAddress} />
+ <CollectionRecentSalesOrders
+ data={recentSalesOrdersData}
+ collectionAddress={collectionAddress}
+ collectionSlug={collectionSlug}
+ />
  )}
  </div>
  </div>

src/components/collection/collection-recent-sales-orders.tsx

@@ -26,9 +26,10 @@ import { StatusIcon } from '../common/status-icon';
 interface Props {
  data: CollectionSaleAndOrder[];
  collectionAddress: string;
+ collectionSlug: string;
 }
 
-export const CollectionRecentSalesOrders = ({ data, collectionAddress }: Props) => {
+export const CollectionRecentSalesOrders = ({ data, collectionAddress, collectionSlug }: Props) => {
  const [salesSelected, setSalesSelected] = useState(true);
  const [listingsSelected, setListingsSelected] = useState(true);
  const [bidsSelected, setBidsSelected] = useState(true);
@@ -42,6 +43,7 @@ export const CollectionRecentSalesOrders = ({ data, collectionAddress }: Props)
  const basicTokenInfo: BasicTokenInfo = {
  tokenId: selectedItem?.tokenId ?? '',
  collectionAddress: collectionAddress,
+ collectionSlug: collectionSlug,
  chainId
  };
 

src/components/common/card.tsx

@@ -49,6 +49,7 @@ export const GridCard = ({
  const basicTokenInfo: BasicTokenInfo = {
  tokenId: data?.tokenId ?? '',
  collectionAddress: data?.address ?? '',
+ collectionSlug: data?.collectionSlug ?? '',
  chainId: data?.chainId ?? '',
  collectionFloorPrice,
  lastSalePriceEth: data?.lastSalePriceEth,
@@ -116,21 +117,15 @@ export const GridCard = ({
 
  <div className={twMerge('mt-1 mb-1 px-2')}>
  {!isCollectionPage && (
- <div
- className="flex items-center space-x-1 cursor-pointer"
- onClick={(e) => {
- e.stopPropagation();
- router.push(`/collection/${data?.chainId}:${data?.address}`);
- }}
- >
- <div className={twMerge('truncate text-xs', hoverColorBrandText)}>{title}</div>
+ <div className="flex items-center space-x-1">
+ <div className={twMerge('truncate text-xs')}>{title}</div>
  {hasBlueCheck ? <BlueCheck className={'h-3 w-3'} /> : ''}
  </div>
  )}
 
  <div className="flex items-center text-xs mt-0.5">
  <div
- className="truncate hover:text-blue-500"
+ className={twMerge('truncate', hoverColorBrandText)}
  onClick={(e) => {
  e.stopPropagation();
  const { pathname, query } = router;

src/components/common/search/collection-nft-search-input.tsx

@@ -16,9 +16,10 @@ interface Props {
 }
 
 export const CollectionNftSearchInput = ({ expanded, collectionAddress, collectionFloorPrice, chainId }: Props) => {
+ const parsedCollectionAddress = collectionAddress.split(':')[0]; // to handle cases like artblocks where address is in the form of 0xabcd...1234:0:1000
  const { search, setSubTypeQuery, setQuery } = useSearchState<SearchType.Collection, 'address', 'nft'>({
  type: SearchType.Collection,
- query: collectionAddress,
+ query: parsedCollectionAddress,
  searchBy: 'address',
  limit: 10,
  subType: 'nft',
@@ -50,7 +51,8 @@ export const CollectionNftSearchInput = ({ expanded, collectionAddress, collecti
  }, [router.query, basicTokenInfo]);
 
  useEffect(() => {
- setQuery(collectionAddress);
+ const parsedCollectionAddress = collectionAddress.split(':')[0]; // to handle cases like artblocks where address is in the form of 0xabcd...1234:0:1000
+ setQuery(parsedCollectionAddress);
  }, [collectionAddress]);
 
  return (

src/components/common/search/search-input.tsx

@@ -64,13 +64,12 @@ export function SearchInput({
  const basicTokenInfo: BasicTokenInfo = {
  tokenId: (selected as NftSearchResultData).tokenId,
  collectionAddress: (selected as NftSearchResultData).collectionAddress,
- chainId: (selected as NftSearchResultData).chainId
+ chainId: (selected as NftSearchResultData).chainId,
+ collectionSlug: ''
  };
  setSelectedToken?.(basicTokenInfo);
  } else if (selected) {
- const pathname = `/collection/${(selected as CollectionSearchDto).chainId}:${
- (selected as CollectionSearchDto).address
- }`;
+ const pathname = `/collection/${(selected as CollectionSearchDto).slug}`;
  router.push(
  {
  pathname

src/components/orderbook/manual-orderbook-item.tsx

@@ -72,6 +72,7 @@ const SingleCollectionCell = ({ order, image, title, canShowAssetModal, isCollBi
  const basicTokenInfo: BasicTokenInfo = {
  tokenId: tokenIdOrAttribute ?? '',
  collectionAddress: collectionAddress ?? '',
+ collectionSlug: collectionSlug ?? '',
  chainId: chainId ?? ChainId.Mainnet
  };
 

src/components/orderbook/orderbook-item.tsx

@@ -153,6 +153,7 @@ const SingleCollectionCell = ({
  basicTokenInfo = {
  tokenId: tokenId,
  collectionAddress: orderNft?.collectionAddress ?? '',
+ collectionSlug: orderNft?.collectionSlug ?? '',
  chainId: orderNft?.chainId ?? ChainId.Mainnet
  };
  }

src/utils/types.ts

@@ -141,6 +141,7 @@ export interface SearchResponse {
 export interface BasicTokenInfo {
  chainId: string;
  collectionAddress: string;
+ collectionSlug: string;
  tokenId: string;
  collectionFloorPrice?: string | number | null | undefined;
  collectionCreator?: string;
@@ -438,6 +439,7 @@ export interface CollectionHistoricalSale {
  tokenImage: string;
  tokenId: string;
  collectionAddress: string;
+ collectionSlug: string;
  collectionName: string;
  chainId: string;
  txHash: string;