add shadcn and refactor the network switcher

ionicprotocol · Oct 30, 2024 · d43bb3c · d43bb3c
1 parent bee810e
commit d43bb3c
Show file tree

Hide file tree

Showing 20 changed files with 570 additions and 103 deletions.
diff --git a/packages/ui/app/_components/CustomTooltip.tsx b/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;
diff --git a/packages/ui/app/_components/Navbar.tsx b/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';

diff --git a/packages/ui/app/_components/markets/FeaturedMarketTile.tsx b/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';

diff --git a/packages/ui/app/_components/markets/NetworkSelector.tsx b/packages/ui/app/_components/markets/NetworkSelector.tsx
@@ -1,97 +1,118 @@
-/* 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);
-  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);
 
-          if (indexA === -1 || indexB === -1) {
-            return 0; // if the network name is not found, don't change the order
+  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="flex flex-wrap gap-2">
+      {orderedNetworks.map(([chainId, network], idx) => (
+        <Button
+          key={idx}
+          variant={
+            +chainId === +dropdownSelectedChain ? 'secondary' : 'outline'
           }
-          return indexA - indexB;
-        })
-        .map(([chainId, network], idx: number) => (
+          size="sm"
+          asChild
+          className="text-xs md:text-sm"
+        >
           <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}
+            href={getUrlWithParams(chainId)}
             onClick={() => setDropChain(chainId)}
           >
-            <img
-              alt="checkmark--v1"
-              className={`w-4 h-4 stroke-lime`}
+            <Image
+              alt={network.name}
+              className="w-4 h-4 mr-2"
               src={`/img/logo/${network.name.toUpperCase()}.png`}
-            />{' '}
+              width={16}
+              height={16}
+            />
             {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>
-        ))}
+        </Button>
+      ))}
+
+      {upcomingChains?.map((upcomingChain, idx) => (
+        <TooltipProvider key={idx}>
+          <Tooltip delayDuration={100}>
+            <TooltipTrigger asChild>
+              <div className="inline-block">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="text-xs md:text-sm relative opacity-50 cursor-not-allowed bg-gray-800"
+                  disabled
+                >
+                  <Image
+                    alt={upcomingChain}
+                    className="w-4 h-4 mr-2"
+                    src={`/img/logo/${upcomingChain.toUpperCase()}.png`}
+                    width={16}
+                    height={16}
+                  />
+                  {upcomingChain}
+                </Button>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Coming soon</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ))}
     </div>
   );
 }

diff --git a/packages/ui/app/_components/markets/PoolRows.tsx b/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';
 

diff --git a/packages/ui/app/_components/xION/Quote.tsx b/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();