ionicprotocol · vidvidvid · Dec 17, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
diff --git a/packages/ui/app/_components/ActionButton.tsx b/packages/ui/app/_components/ActionButton.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import Link from 'next/link';
+
+interface ActionButtonProps {
+  half?: boolean;
+  action?: () => void;
+  href?: string;
+  disabled?: boolean;
+  label: string;
+  bg?: string;
+  leftIcon?: LucideIcon;
+  rightIcon?: LucideIcon;
+  iconSize?: number;
+  target?: '_blank' | '_self';
+}
+
+const baseStyles = `rounded-md py-2.5 px-4 capitalize truncate 
+  disabled:opacity-50 hover:opacity-80 
+  inline-flex items-center justify-center gap-2`;
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  half,
+  action,
+  href,
+  disabled,
+  label,
+  bg = 'bg-accent',
+  leftIcon: LeftIcon,
+  rightIcon: RightIcon,
+  iconSize = 12,
+  target
+}) => {
+  const classes = `${baseStyles} ${bg} text-black ${half ? 'w-1/2' : 'w-full'}`;
+  const content = (
+    <>
+      {LeftIcon && <LeftIcon size={iconSize} />}
+      <span>{label}</span>
+      {RightIcon && <RightIcon size={iconSize} />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className={classes}
+        target={target}
+        {...(disabled
+          ? { 'aria-disabled': true, onClick: (e) => e.preventDefault() }
+          : {})}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      className={classes}
+      onClick={action}
+      disabled={disabled}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default ActionButton;
diff --git a/...i/app/_components/markets/RewardsIcon.tsx → packages/ui/app/_components/AssetIcons.tsx b/...i/app/_components/markets/RewardsIcon.tsx → packages/ui/app/_components/AssetIcons.tsx
@@ -1,7 +1,8 @@
 import Image from 'next/image';
 
 type RewardIconsProps = {
-  rewards: string[]; // Array of reward types like 'op', 'ionic', 'turtle', 'kelp', etc.
+  rewards: string[];
+  size?: number;
 };
 
 const iconMap = {
@@ -15,7 +16,7 @@ const iconMap = {
   lsk: '/img/symbols/32/color/lsk.png'
 };
 
-export const RewardIcons = ({ rewards }: RewardIconsProps) => {
+export const AssetIcons = ({ rewards, size = 16 }: RewardIconsProps) => {
   const getIconPath = (reward: string) => {
     if (reward in iconMap) {
       return iconMap[reward as keyof typeof iconMap];
@@ -34,12 +35,12 @@ export const RewardIcons = ({ rewards }: RewardIconsProps) => {
             zIndex: rewards.length - index // Higher z-index for earlier icons
           }}
         >
-          <div className="size-4 flex items-center justify-center">
+          <div className="flex items-center justify-center">
             <Image
               src={getIconPath(reward)}
               alt={reward}
-              width={16}
-              height={16}
+              width={size}
+              height={size}
               className="rounded-full"
             />
           </div>

diff --git a/packages/ui/app/_components/CommonTable.tsx b/packages/ui/app/_components/CommonTable.tsx
@@ -83,14 +83,19 @@ const SortableHeader = ({
 }) => {
   const isSortable = column.getCanSort();
   const sorted = column.getIsSorted();
+  const hasSortingFunction = column.columnDef.sortingFn !== undefined;
 
   const getSortIcon = () => {
-    if (!isSortable) return null;
+    if (!isSortable || !hasSortingFunction) return null;
     if (sorted === 'asc') return <ArrowUpIcon className="w-4 h-4" />;
     if (sorted === 'desc') return <ArrowDownIcon className="w-4 h-4" />;
     return <CaretSortIcon className="w-4 h-4 text-white/40" />;
   };
 
+  if (!hasSortingFunction) {
+    return <div className="flex items-center gap-2">{children}</div>;
+  }
+
   return (
     <button
       className={`flex items-center gap-2 ${!isSortable ? 'cursor-default' : 'hover:text-white'}`}
@@ -132,7 +137,7 @@ function CommonTable<T extends object>({
               return sortFn(rowA.getValue(col.id), rowB.getValue(col.id));
             }
           : col.sortingFn,
-      enableSorting: col.enableSorting !== false
+      enableSorting: col.enableSorting !== false && col.sortingFn !== undefined
     })
   );
 

diff --git a/packages/ui/app/_components/DynamicSubNav.tsx b/packages/ui/app/_components/DynamicSubNav.tsx
@@ -1,27 +1,37 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { useSearchParams } from 'next/navigation';
-
-import { mode } from 'viem/chains';
-
+import { useSearchParams, usePathname } from 'next/navigation';
+import { mode, base } from 'viem/chains';
 import { pools } from '@ui/constants/index';
 
 function DynamicSubNav() {
-  // const router = useRouter();
   const searchParams = useSearchParams();
+  const pathname = usePathname();
   const chain = searchParams.get('chain');
   const chainId = chain === null ? mode.id : chain;
 
+  const getBgColor = () => {
+    if (pathname === '/earn') {
+      return pools[base.id]?.bg;
+    }
+    return pools[+chainId]?.bg ?? pools[mode.id]?.bg;
+  };
+
+  const getTextColor = () => {
+    if (pathname === '/earn') {
+      return pools[base.id]?.text;
+    }
+    return pools[+chainId]?.text ?? pools[mode.id]?.text;
+  };
+
   function clone() {
     return (
-      <div
-        className={`thread min-w-max h-max group-hover:pause p-2 text-center animate-slide flex-shrink-0  `}
-      >
+      <div className="thread min-w-max h-max group-hover:pause p-2 text-center animate-slide flex-shrink-0">
         {Array.from({ length: 5 }).map((_, index) => (
           <span
             key={index}
-            className={`pl-14`}
+            className="pl-14"
           >
             veION COMING SOON! Supply & Borrow Assets to earn $ION. Accumulate &
             Lock $ION to increase Emissions to your favorite Assets and Maximize
@@ -31,13 +41,12 @@ function DynamicSubNav() {
       </div>
     );
   }
+
   return (
     <div
-      className={`${`${pools[+chainId]?.bg ?? pools[mode.id]?.bg} ${
-        pools[+chainId]?.text ?? pools[mode.id]?.text
-      }`} absolute w-full z-20 top-full left-0 text-center text-sm font-medium `}
+      className={`${getBgColor()} ${getTextColor()} absolute w-full z-20 top-full left-0 text-center text-sm font-medium`}
     >
-      <div className={`h-max w-full flex group z-20 givep overflow-x-hidden`}>
+      <div className="h-max w-full flex group z-20 givep overflow-x-hidden">
         {clone()}
         {clone()}
       </div>
@@ -46,9 +55,3 @@ function DynamicSubNav() {
 }
 
 export default dynamic(() => Promise.resolve(DynamicSubNav), { ssr: false });
-
-{
-  /* Hello, {pools[+chainId].name ?? 'Mode'}! Season 2 is LIVE - New
-      multipliers, new ways to earn points! See your Season 1 $ION eligibility
-      on the Claim page (Open till 6th of July). */
-}
diff --git a/packages/ui/app/_components/dialogs/manage/ManageDialogTabs.tsx b/packages/ui/app/_components/dialogs/manage/ManageDialogTabs.tsx
@@ -143,83 +143,81 @@ const ManageDialogTabs = ({
     };
 
     return (
-      <div className="tabs-container">
-        <Tabs
-          defaultValue={currentActiveTab}
-          onValueChange={handleTabChange}
-          value={currentActiveTab}
-        >
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="supply">Supply</TabsTrigger>
-            <TabsTrigger
-              value="borrow"
-              disabled={isBorrowDisabled}
-            >
-              Borrow
-            </TabsTrigger>
-            <TabsTrigger
-              value="repay"
-              disabled={isBorrowDisabled}
-            >
-              Repay
-            </TabsTrigger>
-            <TabsTrigger value="withdraw">Withdraw</TabsTrigger>
-          </TabsList>
-
-          <TabsContent
-            value="supply"
-            className="mt-2"
+      <Tabs
+        defaultValue={currentActiveTab}
+        onValueChange={handleTabChange}
+        value={currentActiveTab}
+      >
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="supply">Supply</TabsTrigger>
+          <TabsTrigger
+            value="borrow"
+            disabled={isBorrowDisabled}
           >
-            <SupplyTab
-              maxAmount={maxSupplyAmount?.bigNumber ?? 0n}
-              isLoadingMax={isLoadingMaxSupply}
-              totalStats={{
-                capAmount: supplyCapAsNumber,
-                totalAmount: totalSupplyAsNumber,
-                capFiat: supplyCapAsFiat,
-                totalFiat: selectedMarketData.totalSupplyFiat
-              }}
-              setSwapWidgetOpen={setSwapWidgetOpen}
-            />
-          </TabsContent>
-          <TabsContent value="borrow">
-            <BorrowTab
-              maxAmount={maxBorrowAmount?.bigNumber ?? 0n}
-              isLoadingMax={isLoadingMaxBorrowAmount}
-              totalStats={{
-                capAmount: borrowCapAsNumber,
-                totalAmount: totalBorrowAsNumber,
-                capFiat: borrowCapAsFiat,
-                totalFiat: selectedMarketData.totalBorrowFiat
-              }}
-            />
-          </TabsContent>
-          <TabsContent value="repay">
-            <RepayTab
-              maxAmount={maxRepayAmount ?? 0n}
-              isLoadingMax={isLoadingMaxRepayAmount}
-              totalStats={{
-                capAmount: borrowCapAsNumber,
-                totalAmount: totalBorrowAsNumber,
-                capFiat: borrowCapAsFiat,
-                totalFiat: selectedMarketData.totalBorrowFiat
-              }}
-            />
-          </TabsContent>
-          <TabsContent value="withdraw">
-            <WithdrawTab
-              maxAmount={maxWithdrawAmount ?? 0n}
-              isLoadingMax={isLoadingMaxWithdrawAmount}
-              totalStats={{
-                capAmount: supplyCapAsNumber,
-                totalAmount: totalSupplyAsNumber,
-                capFiat: supplyCapAsFiat,
-                totalFiat: selectedMarketData.totalSupplyFiat
-              }}
-            />
-          </TabsContent>
-        </Tabs>
-      </div>
+            Borrow
+          </TabsTrigger>
+          <TabsTrigger
+            value="repay"
+            disabled={isBorrowDisabled}
+          >
+            Repay
+          </TabsTrigger>
+          <TabsTrigger value="withdraw">Withdraw</TabsTrigger>
+        </TabsList>
+
+        <TabsContent
+          value="supply"
+          className="mt-2"
+        >
+          <SupplyTab
+            maxAmount={maxSupplyAmount?.bigNumber ?? 0n}
+            isLoadingMax={isLoadingMaxSupply}
+            totalStats={{
+              capAmount: supplyCapAsNumber,
+              totalAmount: totalSupplyAsNumber,
+              capFiat: supplyCapAsFiat,
+              totalFiat: selectedMarketData.totalSupplyFiat
+            }}
+            setSwapWidgetOpen={setSwapWidgetOpen}
+          />
+        </TabsContent>
+        <TabsContent value="borrow">
+          <BorrowTab
+            maxAmount={maxBorrowAmount?.bigNumber ?? 0n}
+            isLoadingMax={isLoadingMaxBorrowAmount}
+            totalStats={{
+              capAmount: borrowCapAsNumber,
+              totalAmount: totalBorrowAsNumber,
+              capFiat: borrowCapAsFiat,
+              totalFiat: selectedMarketData.totalBorrowFiat
+            }}
+          />
+        </TabsContent>
+        <TabsContent value="repay">
+          <RepayTab
+            maxAmount={maxRepayAmount ?? 0n}
+            isLoadingMax={isLoadingMaxRepayAmount}
+            totalStats={{
+              capAmount: borrowCapAsNumber,
+              totalAmount: totalBorrowAsNumber,
+              capFiat: borrowCapAsFiat,
+              totalFiat: selectedMarketData.totalBorrowFiat
+            }}
+          />
+        </TabsContent>
+        <TabsContent value="withdraw">
+          <WithdrawTab
+            maxAmount={maxWithdrawAmount ?? 0n}
+            isLoadingMax={isLoadingMaxWithdrawAmount}
+            totalStats={{
+              capAmount: supplyCapAsNumber,
+              totalAmount: totalSupplyAsNumber,
+              capFiat: supplyCapAsFiat,
+              totalFiat: selectedMarketData.totalSupplyFiat
+            }}
+          />
+        </TabsContent>
+      </Tabs>
     );
   };