Feat/footer add

packages/ui/.eslintrc.json

@@ -32,6 +32,8 @@
   },
   "rules": {
     "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
+    "@typescript-eslint/no-unused-vars": "warn",
+    "unused-imports/no-unused-imports": "warn",
    "import/order": [
       "error",
       {
@@ -83,15 +85,13 @@
     ],
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/sort-type-constituents": "error",
     "no-console": ["error", { "allow": ["warn", "error"] }],
     "react/self-closing-comp": ["error", { "component": true, "html": true }],
     "react-hooks/exhaustive-deps": "error",
     "react-hooks/rules-of-hooks": "error",
     "react/display-name": "off",
     "react/prop-types": "off",
-    "unused-imports/no-unused-imports": "error",
     "unused-imports/no-unused-vars": [
       "warn",
       {

packages/ui/app/_components/CustomTooltip.tsx

@@ -0,0 +1,36 @@
+import { Info } from 'lucide-react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@ui/components/ui/tooltip';
+
+const CustomTooltip = ({
+  content,
+  color
+}: {
+  content: string;
+  color?: string;
+}) => (
+  <TooltipProvider delayDuration={0}>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className={`w-4 h-4 inline-flex items-center justify-center rounded-full text-xs cursor-help ${color}`}
+        >
+          <Info />
+        </div>
+      </TooltipTrigger>
+      <TooltipContent
+        className="bg-grayUnselect text-white border-white/10 max-w-sm"
+        sideOffset={5}
+      >
+        <p>{content}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+export default CustomTooltip;

packages/ui/app/_components/Navbar.tsx

@@ -12,7 +12,7 @@ import { http, createConfig, useChainId } from 'wagmi';
 import { base, mode } from 'wagmi/chains';
 import { coinbaseWallet } from 'wagmi/connectors';
 
-import { useStore } from 'ui/store/Store';
+import { useStore } from '@ui/store/Store';
 
 import ConnectButton from './ConnectButton';
 import DynamicSubNav from './DynamicSubNav';

packages/ui/app/_components/dashboards/CollateralSwapPopup.tsx

@@ -47,7 +47,7 @@ import MaxDeposit from './MaxDeposit';
 import SwapTo from './SwapTo';
 import { SlippageDropdown } from '../SlippageDropdown';
 
-import { collateralSwapAbi } from '@ionicprotocol/sdk';
+import { collateralSwapAbi } from '@ionicprotocol/sdk/src';
 
 createConfig({
   integrator: 'ionic',

packages/ui/app/_components/dashboards/InfoRows.tsx

@@ -19,9 +19,10 @@ import BorrowPopover from '../markets/BorrowPopover';
 import SupplyPopover from '../markets/SupplyPopover';
 import { PopupMode } from '../popup/page';
 
-import type { FlywheelReward } from 'types/dist';
 import type { Address } from 'viem';
 
+import type { FlywheelReward } from '@ionicprotocol/types';
+
 export enum InfoMode {
   SUPPLY = 0,
   BORROW = 1

packages/ui/app/_components/markets/FeaturedMarketTile.tsx

@@ -2,8 +2,7 @@
 'use client';
 import type { Dispatch, SetStateAction } from 'react';
 
-import { useStore } from 'ui/store/Store';
-
+import { useStore } from '@ui/store/Store';
 import { handleSwitchOriginChain } from '@ui/utils/NetworkChecker';
 
 import WrapEthSwaps from './WrapEthSwaps';

packages/ui/app/_components/markets/NetworkSelector.tsx

@@ -1,99 +1,145 @@
-/* eslint-disable @next/next/no-img-element */
-'use client';
-/* eslint-disable  @typescript-eslint/no-explicit-any */
 import React from 'react';
 
-import dynamic from 'next/dynamic';
+import Image from 'next/image';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-
-import { useStore } from 'ui/store/Store';
+import { usePathname, useSearchParams } from 'next/navigation';
 
+import { Button } from '@ui/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@ui/components/ui/tooltip';
 import { pools } from '@ui/constants/index';
+import { useStore } from '@ui/store/Store';
+
 interface INetworkSelector {
-  chain?: string;
   dropdownSelectedChain: number;
   nopool?: boolean;
   enabledChains?: number[];
   upcomingChains?: string[];
 }
+const NETWORK_ORDER = ['Mode', 'Base', 'Optimism', 'Fraxtal', 'Lisk', 'BoB'];
 
 function NetworkSelector({
   dropdownSelectedChain,
   nopool = false,
   enabledChains,
-  chain,
   upcomingChains
 }: INetworkSelector) {
   const pathname = usePathname();
+  const searchParams = useSearchParams();
   const setDropChain = useStore((state) => state.setDropChain);
+
+  const orderedNetworks = NETWORK_ORDER.map((networkName) =>
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    Object.entries(pools).find(([_, pool]) => pool.name === networkName)
+  ).filter(
+    (entry): entry is [string, any] =>
+      entry !== undefined &&
+      (!enabledChains || enabledChains.includes(+entry[0]))
+  );
+
+  const getUrlWithParams = (chainId: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('chain', chainId);
+    if (!nopool && !params.has('pool')) {
+      params.set('pool', '0');
+    }
+    if (nopool && params.has('pool')) {
+      params.delete('pool');
+    }
+    return `${pathname}?${params.toString()}`;
+  };
+
   return (
-    <div
-      className={`  left-0    md:min-w-max w-full  text-lime origin-top   shadow-xl shadow-black/10 rounded-b-md flex flex-wrap gap-x-1  items-center `}
-    >
-      <Link
-        className={`flex justify-start gap-2 items-center p-2 mb-1 text-xs md:text-base w-max text-white rounded-md  ${+chain! === +dropdownSelectedChain ? ' bg-graySelecte bg-grayone' : 'bg-grayon bg-graylite'} border border-gray-800 `}
-        href={`${pathname}?chain=${dropdownSelectedChain}${nopool ? '' : '&pool=0'}`}
-      >
-        <img
-          alt="checkmark--v1"
-          className={`w-4 h-4 stroke-lime`}
-          src={`/img/logo/${pools[dropdownSelectedChain].name.toUpperCase()}.png`}
-        />{' '}
-        {pools[dropdownSelectedChain].name}
-      </Link>
-      {Object.entries(pools)
-        .filter(([chainId]) =>
-          enabledChains
-            ? enabledChains?.includes(+chainId) &&
-              +chainId !== dropdownSelectedChain
-            : +chainId !== dropdownSelectedChain
-        )
-        .sort((a, b) => {
-          const sortingOrder = ['Mode', 'Base', 'Optimism', 'Fraxtal', 'Bob'];
-          const indexA = sortingOrder.indexOf(a[1].name);
-          const indexB = sortingOrder.indexOf(b[1].name);
+    <div className="flex flex-wrap gap-2">
+      {orderedNetworks.map(([chainId, network], idx) => {
+        const isSelected = +chainId === +dropdownSelectedChain;
+
+        return (
+          <TooltipProvider key={idx}>
+            <Tooltip delayDuration={100}>
+              <TooltipTrigger asChild>
+                <div>
+                  <Button
+                    variant={isSelected ? 'secondary' : 'ghost'}
+                    asChild
+                    className={`h-9 rounded-md ${isSelected ? 'min-w-[80px] p-2' : 'min-w-[32px] p-1 '}`}
+                  >
+                    <Link
+                      href={getUrlWithParams(chainId)}
+                      onClick={() => setDropChain(chainId)}
+                      className="flex items-center justify-center gap-2"
+                    >
+                      <Image
+                        alt={network.name}
+                        className="w-6 h-6"
+                        src={`/img/logo/${network.name.toUpperCase()}.png`}
+                        width={24}
+                        height={24}
+                      />
+                      {isSelected && (
+                        <span className="text-sm">{network.name}</span>
+                      )}
+                    </Link>
+                  </Button>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent className="flex items-center gap-2 bg-background">
+                <Image
+                  alt={network.name}
+                  className="w-4 h-4"
+                  src={`/img/logo/${network.name.toUpperCase()}.png`}
+                  width={16}
+                  height={16}
+                />
+                <p>{network.name}</p>
+                <span className="text-emerald-400 text-xs">Active</span>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        );
+      })}
 
-          if (indexA === -1 || indexB === -1) {
-            return 0; // if the network name is not found, don't change the order
-          }
-          return indexA - indexB;
-        })
-        .map(([chainId, network], idx: number) => (
-          <Link
-            className={`flex flex-wrap justify-start gap-2 items-center p-2 mb-1 text-xs md:text-sm w-max text-white rounded-md   bg-graySelected border border-gray-800 `}
-            href={`${pathname}?chain=${chainId}${nopool ? '' : '&pool=0'}`}
-            key={idx}
-            onClick={() => setDropChain(chainId)}
-          >
-            <img
-              alt="checkmark--v1"
-              className={`w-4 h-4 stroke-lime`}
-              src={`/img/logo/${network.name.toUpperCase()}.png`}
-            />{' '}
-            {network.name}
-          </Link>
-        ))}
-      {!!upcomingChains &&
-        upcomingChains.map((upcomingChain, idx) => (
-          <div
-            className={`flex flex-wrap justify-start gap-2 items-center p-2 mb-1 text-xs md:text-sm w-max text-white rounded-md  relative border border-gray-800 `}
-            // href={`${pathname}?chain=${dropdownSelectedChain}${nopool ? '' : '&pool=0'}`}
-            key={idx}
-          >
-            <img
-              alt="checkmark--v1"
-              className={`w-4 h-4 stroke-lime `}
-              src={`/img/logo/${upcomingChain.toUpperCase()}.png`}
-            />{' '}
-            {upcomingChain}
-            <div
-              className={`absolute   right-0 w-full h-full bg-gray-700/50  `}
-            />
-          </div>
-        ))}
+      {upcomingChains?.map((upcomingChain, idx) => (
+        <TooltipProvider key={idx}>
+          <Tooltip delayDuration={100}>
+            <TooltipTrigger asChild>
+              <div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="p-1 h-8 min-w-[32px] opacity-75 cursor-not-allowed hover:opacity-75"
+                  disabled
+                >
+                  <Image
+                    alt={upcomingChain}
+                    className="w-6 h-6 grayscale-[30%]"
+                    src={`/img/logo/${upcomingChain.toUpperCase()}.png`}
+                    width={24}
+                    height={24}
+                  />
+                </Button>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent className="flex items-center gap-2 bg-background">
+              <Image
+                alt={upcomingChain}
+                className="w-4 h-4 grayscale-[30%]"
+                src={`/img/logo/${upcomingChain.toUpperCase()}.png`}
+                width={16}
+                height={16}
+              />
+              <p>{upcomingChain}</p>
+              <span className="text-yellow-400 text-xs">Coming Soon</span>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ))}
     </div>
   );
 }
 
-export default dynamic(() => Promise.resolve(NetworkSelector), { ssr: false });
+export default NetworkSelector;

packages/ui/app/_components/markets/PoolRows.tsx

@@ -4,8 +4,6 @@ import { useEffect, useMemo, type Dispatch, type SetStateAction } from 'react';
 
 import Link from 'next/link';
 
-import { useStore } from 'ui/store/Store';
-
 import {
   FLYWHEEL_TYPE_MAP,
   pools,
@@ -15,6 +13,7 @@ import { useMultiIonic } from '@ui/context/MultiIonicContext';
 import { useBorrowCapsDataForAsset } from '@ui/hooks/ionic/useBorrowCapsDataForAsset';
 import type { LoopMarketData } from '@ui/hooks/useLoopMarkets';
 import { useMerklApr } from '@ui/hooks/useMerklApr';
+import { useStore } from '@ui/store/Store';
 import type { MarketData } from '@ui/types/TokensDataMap';
 import { handleSwitchOriginChain } from '@ui/utils/NetworkChecker';
 

packages/ui/app/_components/xION/Quote.tsx

@@ -3,12 +3,13 @@
 import { useEffect } from 'react';
 
 import { Options } from '@layerzerolabs/lz-v2-utilities';
-import { xErc20LayerZeroAbi } from 'sdk/src';
 import { formatEther, type Hex, type Address } from 'viem';
 import { useReadContract } from 'wagmi';
 
 import { BridgingContractAddress, getToken } from '@ui/utils/getStakingTokens';
 
+import { xErc20LayerZeroAbi } from '@ionicprotocol/sdk';
+
 export const lzOptions = Options.newOptions()
   .addExecutorLzReceiveOption(100_000, 0)
   .toHex();

packages/ui/app/dashboard/page.tsx

@@ -513,10 +513,7 @@ export default function Dashboard() {
             pool={pool || '0'}
             setOpen={setOpen}
           /> */}
-              <NetworkSelector
-                chain={chain as string}
-                dropdownSelectedChain={+chain}
-              />
+              <NetworkSelector dropdownSelectedChain={+chain} />
             </div>
           </div>
           {/* <div className={`w-full mt-2  col-span-5`}>