Katana

.eslintrc.json

@@ -1,3 +1,11 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "prefer-const": "off",
+    "@next/next/no-img-element": "off",
+    "react/no-unescaped-entities": "off"
+  }
 }

app/context/network-context.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import React, { createContext, useContext, useState, ReactNode } from "react";
+import React, { createContext, useContext, useState, ReactNode, useEffect } from "react";
 import { networkOptions } from "@/app/lib/constants";
+import Cookie from "js-cookie"
 
 interface NetworkContextType {
   currentNetwork: NetworkOption | undefined;
@@ -16,6 +17,12 @@ export const NetworkProvider: React.FC<{ children: ReactNode }> = ({
 }) => {
   const [currentNetwork, setCurrentNetwork] = useState<NetworkOption>();
 
+  useEffect(()=>{
+    if(currentNetwork?.name){
+      Cookie.set("network",currentNetwork.name)
+    }
+  },[currentNetwork?.name])
+
   return (
     <NetworkContext.Provider
       value={{ currentNetwork, setCurrentNetwork, networks: networkOptions }}

app/globals.css

@@ -25,6 +25,18 @@ body {
   }
 }
 
+/* global.css */
+.no-spinner::-webkit-outer-spin-button,
+.no-spinner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.no-spinner {
+  -moz-appearance: textfield;
+}
+
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;

app/lib/constants.ts

@@ -1,3 +1,4 @@
+
 export const poolMap: Map<string, Pool> = new Map<string, Pool>([
   ["1", { id: 1, name: "Ethereum", shortName: "WETH" }],
   ["2", { id: 2, name: "Wrap Bitcoin", shortName: "WBTC" }],
@@ -30,15 +31,44 @@ export const networkOptions = [
     rpcUrl: "https://mainnet.optimism.io/",
     blockExplorerUrl: "https://optimistic.etherscan.io/",
   },
+  {
+    id: "katana",
+    name: "Katana",
+    icon: "/katana.png",
+    chainId: "0xB67D2",
+    rpcUrl: "https://rpc.katana.network",
+    blockExplorerUrl: "https://explorer.katanarpc.com/",
+  },
 ];
 
 export const BASE_NETWORK = "base";
 export const ARBITRUM_NETWORK = "arbitrum";
 export const OPTIMISM_NETWORK = "optimism";
+export const KATANA_NETWORK = "katana";
 
 export const SECS_PER_YEAR = 31556952;
 export const FEES = 0.01;
 export const oneMonthTimestampInterval = 2629743;
 export const referralCode =
   "0x0000000000000000000000000000000000000000000000000000000000000000";
-export const percentageClickValues = [10, 25, 50, 100]
+export const percentageClickValues = [10, 25, 50, 100];
+
+// Mock data for RemoveLiquidityTab
+export const mockRemoveLiquidityState = {
+  percentage: 0,
+  token0Amount: 0,
+  token1Amount: 0,
+  fees: {
+    token0: 0,
+    token1: 0,
+  },
+};
+
+// Mock data for FeesTab
+export const mockFeesTabState = {
+  unclaimedFees: 0.0002,
+  tokens: [
+    { symbol: "USDC", amount: 0.000068, usdValue: 0.000068 },
+    { symbol: "USDT", amount: 0.000151, usdValue: 0.0002 },
+  ],
+};

app/lib/definitions.ts

@@ -4,7 +4,14 @@ interface FeatureCardProps {
   icon: string;
   title: string;
   subtitle: string;
-  isSoon: boolean;
+  isSoon?: boolean;
+}
+
+interface WalletItem {
+  name: string;
+  icon: string;
+  onClick: string | null;
+  label?: string;
 }
 
 interface NetworkOption {
@@ -16,6 +23,23 @@ interface NetworkOption {
   blockExplorerUrl: string;
 }
 
+interface PoolsType {
+  id: string;
+  name: string;
+  icons: string[];
+  tvl: string;
+  tvlChange: number;
+  vol24h: string;
+  vol24hChange: number;
+  vol1w: string;
+  vol1wChange: number;
+  tx24h: number;
+  apr: string;
+  protocol_version: string;
+  swap_fee: number;
+  isSoon: boolean;
+}
+
 interface TabProps {
   tabs: {
     name: string;
@@ -230,9 +254,50 @@ interface NavItem {
   count: number | null;
   component: React.ComponentType<any>; // Accepts any component
   props?: Record<string, any>; // Optional props
-};
+}
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 interface PositionSectionProps {
   dataFetching: boolean;
 }
+
+// Types for modular liquidity management tabs
+
+interface LiquidityTabState {
+  activeTab: "add" | "remove" | "fees";
+}
+
+interface RemoveLiquidityState {
+  percentage: number;
+  token0Amount: number;
+  token1Amount: number;
+  fees: {
+    token0: number;
+    token1: number;
+  };
+}
+
+interface FeesTabState {
+  unclaimedFees: number;
+  tokens: Array<{
+    symbol: string;
+    amount: number;
+    usdValue: number;
+  }>;
+}
+
+interface RemoveLiquidityTabProps {
+  state: RemoveLiquidityState;
+  onChange: (state: RemoveLiquidityState) => void;
+  onConnectWallet: () => void;
+  isWalletConnected: boolean;
+  token0: { symbol: string; icon: string };
+  token1: { symbol: string; icon: string };
+}
+interface FeesTabProps {
+  state: FeesTabState;
+  onConnectWallet: () => void;
+  isWalletConnected: boolean;
+  token0: { symbol: string; icon: string };
+  token1: { symbol: string; icon: string };
+}

app/lib/extensions.ts

@@ -0,0 +1,85 @@
+// Utility for detecting installed wallet extensions and returning wallet options for the modal
+
+interface EthereumProvider {
+  isMetaMask?: boolean;
+}
+
+interface Window {
+  ethereum?: EthereumProvider;
+}
+
+// Returns an array of wallet sections (Installed, Not Installed, Others) with wallet info for the modal
+export const detectInstalledWallets = (): {
+  section: string;
+  items: WalletItem[];
+}[] => {
+  const installed: WalletItem[] = [];
+  const notInstalled: WalletItem[] = [];
+
+  // Detect MetaMask extension
+  if (
+    typeof window !== "undefined" &&
+    (window as Window).ethereum?.isMetaMask
+  ) {
+    installed.push({
+      icon: "/metamask-icon.svg",
+      name: "MetaMask",
+      label: "Installed",
+      onClick: "onMetaMask",
+    });
+  } else {
+    notInstalled.push({
+      icon: "/metamask-icon.svg",
+      name: "MetaMask",
+      label: "Not Installed",
+      onClick: "onMetaMask",
+    });
+  }
+
+  // Other wallet options (not detected, just shown as 'soon')
+  const others: WalletItem[] = [
+    {
+      icon: "/coinbase-wallet-icon.svg",
+      name: "Coinbase",
+      label: "soon",
+      onClick: "onCoinbase",
+    },
+    {
+      icon: "/trust-wallet-icon.png",
+      name: "Trust Wallet",
+      label: "soon",
+      onClick: "onTrustWallet",
+    },
+    {
+      icon: "/wallet-connect-icon.png",
+      name: "Wallet Connect",
+      label: "soon",
+      onClick: "onWalletConnect",
+    },
+  ];
+
+  const walletSections: { section: string; items: WalletItem[] }[] = [];
+
+  // Add installed wallets section if any
+  if (installed.length > 0) {
+    walletSections.push({
+      section: "Installed",
+      items: installed,
+    });
+  }
+  // Add not installed wallets section if any
+  if (notInstalled.length > 0) {
+    walletSections.push({
+      section: "Not Installed",
+      items: notInstalled,
+    });
+  }
+
+  // Always add others section
+  walletSections.push({
+    section: "Others",
+    items: others,
+  });
+
+  return walletSections;
+};

app/lib/helper.ts

@@ -69,4 +69,4 @@ export const check0xHex = (num: BigNumberish) => {
 
 export const capitalizeFirstLetter = (val: string) => {
   return val.charAt(0).toUpperCase() + val.slice(1);
-}
+};

app/lib/static-values.ts

@@ -127,13 +127,15 @@ export const tradeMenuSubLinks = [
   {
     title: "Perps",
     href: "/trade/future",
-    subtitle: "Leveraged perpetual contracts to trade crypto without expiration",
+    subtitle:
+      "Leveraged perpetual contracts to trade crypto without expiration",
     icon: "/perps-menu-icon.svg",
   },
   {
     title: "Options",
     href: "/trade/options",
-    subtitle: "Leveraged contracts for hedging, speculation, or income with controlled risk",
+    subtitle:
+      "Leveraged contracts for hedging, speculation, or income with controlled risk",
     icon: "/options-menu-icon.svg",
   },
   {
@@ -142,6 +144,64 @@ export const tradeMenuSubLinks = [
     subtitle: "Margin trade to buy/sell assets at spot prices",
     icon: "/spot-menu-icon.svg",
   },
+  {
+    title: "Farm",
+    href: "/trade/farm",
+    subtitle: "Top Crypto Liquidity Pools Ranked by Performance",
+    icon: "/leaves-icon.png",
+  },
+];
+
+export const mockPools: PoolsType[] = [
+  {
+    id: "1",
+    name: "USDC / USDT",
+    icons: ["/usdc-icon.svg", "/usdt-icon.svg"],
+    tvl: "$15.98m",
+    tvlChange: -2.03,
+    vol24h: "$3.63m",
+    vol24hChange: 19.58,
+    vol1w: "$11.00m",
+    vol1wChange: 50.19,
+    tx24h: 3764,
+    apr: "14.47%",
+    protocol_version: "V3",
+    swap_fee: 0.01,
+    isSoon: false,
+  },
+  // {
+  //   id: "2",
+  //   name: "AUSD / USDC",
+  //   icons: ["/ausd-icon.svg", "/usdc-icon.svg"],
+  //   tvl: "$12.14m",
+  //   tvlChange: 21.12,
+  //   vol24h: "$8.51m",
+  //   vol24hChange: 125.9,
+  //   vol1w: "$21.35m",
+  //   vol1wChange: 309.61,
+  //   tx24h: 7357,
+  //   apr: "56.45%",
+  //   protocol_version: "V3",
+  //   swap_fee: 0.01,
+  //   isSoon: true,
+  // },
+  // {
+  //   id: "3",
+  //   name: "BTCK / LBTC",
+  //   icons: ["/bitcoin.svg", "/lbtc-icon.svg"],
+  //   tvl: "$6.32m",
+  //   tvlChange: 253.57,
+  //   vol24h: "$449.75",
+  //   vol24hChange: -97.61,
+  //   vol1w: "$258.38k",
+  //   vol1wChange: 95.78,
+  //   tx24h: 156,
+  //   apr: "11.02%",
+  //   protocol_version: "V3",
+  //   swap_fee: 0.01,
+  //   isSoon: true,
+  // },
+  // Add more mock pools as needed
 ];
 
 export const defaultTokenOptions: Option[] = [
@@ -163,4 +223,4 @@ export const ethPoolObj: PoolTable = {
   isActive: false,
   version: 0,
   vToken: "ETH",
-}
+};

app/lib/web3-constants.ts

@@ -12,10 +12,11 @@ export const injected = new InjectedConnector({
     901, // lyraTestNet
     10, // optimism
     8453, // base
+    747474
   ],
 });
 
-export const allowedChainIds = [8453, 42161, 10];
+export const allowedChainIds = [8453, 42161, 10, 747474];
 
 export const getShortenedAddress = (address: string, start = 6, end = 4) => {
   if (address != "") {