paths fix

foilxyz · Feb 7, 2025 · edac914 · edac914
1 parent e351afc
commit edac914
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 23 deletions.
diff --git a/...rc/app/pool/[id]/periods/[epoch]/page.tsx → ...arkets/[id]/periods/[epoch]/pool/page.tsx b/...rc/app/pool/[id]/periods/[epoch]/page.tsx → ...arkets/[id]/periods/[epoch]/pool/page.tsx
diff --git a/...c/app/trade/[id]/periods/[epoch]/page.tsx → ...rkets/[id]/periods/[epoch]/trade/page.tsx b/...c/app/trade/[id]/periods/[epoch]/page.tsx → ...rkets/[id]/periods/[epoch]/trade/page.tsx
diff --git a/packages/app/src/app/resources/[id]/page.tsx b/packages/app/src/app/resources/[id]/page.tsx
@@ -51,7 +51,7 @@ const EpochsTable = ({ data }: EpochsTableProps) => {
           return (
             <Link
               key={epoch.id}
-              href={`/trade/${epoch.market.chainId}:${epoch.market.address}/periods/${epoch.epochId}`}
+              href={`/markets/${epoch.market.chainId}:${epoch.market.address}/periods/${epoch.epochId}/trade`}
               className="block hover:no-underline border-b border-border"
             >
               <div className="flex items-center justify-between cursor-pointer px-4 py-1.5 hover:bg-secondary">
@@ -173,6 +173,7 @@ const MarketContent = ({ params }: { params: { id: string } }) => {
                 <div className="min-h-[50vh] border border-border flex w-full h-full rounded-sm shadow overflow-hidden pr-2 pb-2 bg-background">
                   <div className="absolute bottom-10 left-14 z-10 flex gap-3">
                     <IntervalSelector
+                      size="sm"
                       selectedInterval={selectedInterval}
                       setSelectedInterval={setSelectedInterval}
                     />

diff --git a/packages/app/src/components/IntervalSelector.tsx b/packages/app/src/components/IntervalSelector.tsx
@@ -21,11 +21,13 @@ const intervals = [
 interface IntervalSelectorProps {
   selectedInterval: TimeInterval;
   setSelectedInterval: (interval: TimeInterval) => void;
+  size?: 'default' | 'sm' | 'lg' | 'icon';
 }
 
 const IntervalSelector = ({
   selectedInterval,
   setSelectedInterval,
+  size,
 }: IntervalSelectorProps) => {
   const [open, setOpen] = useState(false);
 
@@ -40,7 +42,7 @@ const IntervalSelector = ({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          size="sm"
+          size={size ?? 'default'}
           className="justify-between"
         >
           {selectedIntervalLabel}

diff --git a/packages/app/src/components/PeriodHeader.tsx b/packages/app/src/components/PeriodHeader.tsx
@@ -150,9 +150,7 @@ const PeriodHeader = () => {
           </div>
         </div>
         <div className="flex items-center gap-4">
-          <Label className="hidden lg:block whitespace-nowrap">
-            Price Units
-          </Label>
+          <Label className="whitespace-nowrap ml-2 lg:ml-0">Price Units</Label>
           <MarketUnitsToggle />
         </div>
       </div>

diff --git a/packages/app/src/components/PriceToggles.tsx b/packages/app/src/components/PriceToggles.tsx
@@ -69,7 +69,7 @@ const PriceToggles = ({
         disabled={seriesDisabled.trailing}
       >
         <Circle className="w-3 h-3" color={BLUE} strokeWidth={3} />
-        Trailing Average Price
+        Trailing Avg. Price
       </ToggleGroupItem>
     </ToggleGroup>
   );

diff --git a/packages/app/src/components/layout/Header.tsx b/packages/app/src/components/layout/Header.tsx
@@ -38,17 +38,21 @@ const isActive = (path: string, pathname: string) => {
   if (path === '/') {
     return pathname === path || pathname.startsWith('/resources');
   }
+  if (path === 'trade' || path === 'pool') {
+    return pathname.endsWith(path);
+  }
   return pathname.startsWith(path);
 };
 
-const getMarketHref = (path: string, market: any, withEpochs: boolean) => {
+const getMarketHref = (path: string, market: any) => {
   if (path === 'earn') {
-    return `/${path}/${market.chainId}:${market.address}`;
+    return `/earn/${market.chainId}:${market.address}`;
   }
-  if (withEpochs) {
-    return `/markets/?contractId=${market.chainId}:${market.address}`;
+  if (path === 'subscribe') {
+    return `/subscribe/${market.chainId}:${market.address}`;
   }
-  return `/${path}/${market.chainId}:${market.address}/periods/${market.currentEpoch?.epochId}`;
+  // For trade and pool paths
+  return `/markets/${market.chainId}:${market.address}/periods/${market.currentEpoch?.epochId}/${path}`;
 };
 
 const handleLinkClick = (setStateFunction: (value: boolean) => void) => () => {
@@ -76,7 +80,7 @@ function MobileMarketLinks({
         {publicMarkets.map((market) => (
           <Link
             key={market.id}
-            href={getMarketHref(path, market, false)}
+            href={getMarketHref(path, market)}
             onClick={() => onClose?.()}
             className="text-sm w-full block rounded-md px-3 py-1.5 hover:bg-gray-50"
           >
@@ -150,7 +154,7 @@ function MobileMarketLinks({
                         <Link
                           key={`${epoch.marketChainId}:${epoch.marketAddress}:${epoch.epochId}`}
                           className="text-sm w-full block rounded-md px-3 py-1.5 hover:bg-gray-50"
-                          href={`/${path}/${epoch.marketChainId}:${epoch.marketAddress}/periods/${epoch.epochId}`}
+                          href={`/markets/${epoch.marketChainId}:${epoch.marketAddress}/periods/${epoch.epochId}/${path}`}
                           onClick={() => onClose?.()}
                         >
                           {formatDuration(
@@ -161,7 +165,7 @@ function MobileMarketLinks({
                       ))
                     )}
                     <Link
-                      href={`/markets/?resource=${resource.slug}`}
+                      href="/markets"
                       onClick={() => onClose?.()}
                       className="text-xs text-muted-foreground hover:text-foreground flex items-center justify-end mt-2 px-3 py-1"
                     >
@@ -183,6 +187,7 @@ const ResourcePopover = ({ label, path }: { label: string; path: string }) => {
   const [hoveredResource, setHoveredResource] = useState<number | null>(null);
   const { data: resources, isLoading } = useResources();
   const [open, setOpen] = useState(false);
+  const pathname = usePathname();
 
   useEffect(() => {
     if (resources && resources.length > 0 && !hoveredResource) {
@@ -201,9 +206,12 @@ const ResourcePopover = ({ label, path }: { label: string; path: string }) => {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button variant="ghost" className="text-base">
+        <Button
+          variant="ghost"
+          className={`text-base ${isActive(path, pathname) ? 'bg-secondary' : ''}`}
+        >
           <span>{label}</span>
-          <ChevronDown className="text-muted-foreground" />
+          <ChevronDown className="text-muted-foreground -mr-1" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -289,7 +297,7 @@ const ResourcePopover = ({ label, path }: { label: string; path: string }) => {
                           <Link
                             key={`${epoch.marketChainId}:${epoch.marketAddress}:${epoch.epochId}`}
                             className="text-sm w-full block rounded-md px-3 py-1.5 hover:bg-secondary"
-                            href={`/${path}/${epoch.marketChainId}:${epoch.marketAddress}/periods/${epoch.epochId}`}
+                            href={`/markets/${epoch.marketChainId}:${epoch.marketAddress}/periods/${epoch.epochId}/${path}`}
                             onClick={handleLinkClick(setOpen)}
                           >
                             {formatDuration(
@@ -300,7 +308,7 @@ const ResourcePopover = ({ label, path }: { label: string; path: string }) => {
                         ))
                       )}
                       <Link
-                        href={`/markets/?resource=${hoveredResourceData.slug}`}
+                        href="/markets"
                         onClick={handleLinkClick(setOpen)}
                         className="text-xs text-muted-foreground hover:text-foreground flex items-center justify-end mt-2 px-3 py-1"
                       >
@@ -462,7 +470,7 @@ const Header = () => {
               <Button
                 variant="ghost"
                 size="lg"
-                className={isActive('/trade', pathname) ? 'bg-secondary' : ''}
+                className={isActive('trade', pathname) ? 'bg-secondary' : ''}
               >
                 Trade
               </Button>
@@ -481,7 +489,7 @@ const Header = () => {
               <Button
                 variant="ghost"
                 size="lg"
-                className={isActive('/pool', pathname) ? 'bg-secondary' : ''}
+                className={isActive('pool', pathname) ? 'bg-secondary' : ''}
               >
                 Pool
               </Button>

diff --git a/packages/app/src/components/marketsTable.tsx b/packages/app/src/components/marketsTable.tsx
@@ -180,13 +180,13 @@ const MarketsTable = () => {
                 ))}
                 <TableCell className="text-right">
                   <Link
-                    href={`/trade/${row.original.chainId}:${row.original.marketAddress}/periods/${row.original.epochId}`}
+                    href={`/markets/${row.original.chainId}:${row.original.marketAddress}/periods/${row.original.epochId}/trade`}
                     className="mr-2"
                   >
                     <Button size="sm">Trade</Button>
                   </Link>
                   <Link
-                    href={`/pool/${row.original.chainId}:${row.original.marketAddress}/periods/${row.original.epochId}`}
+                    href={`/markets/${row.original.chainId}:${row.original.marketAddress}/periods/${row.original.epochId}/pool`}
                   >
                     <Button size="sm">Pool</Button>
                   </Link>

diff --git a/packages/website/src/components/home/features.tsx b/packages/website/src/components/home/features.tsx
@@ -72,7 +72,7 @@ export const Features = () => {
             </div>
 
             <Button asChild className="rounded-2xl p-6 font-semibold">
-              <a href="https://app.foil.xyz/trade/8453:0x20ba5e24ad8a5b9502d4882607f0c8526a1f3205/periods/1">
+              <a href="https://app.foil.xyz/markets/8453:0x20ba5e24ad8a5b9502d4882607f0c8526a1f3205/periods/1/trade">
                 Trade
               </a>
             </Button>