Uniswap v2 withdraw cow review pt3 (#67)

* chore: add base network * fix: uniswap pool link * change format for 4 decimals * chore: update pool dropdown menu messages * run linter * update default RPC
bleu · Dec 11, 2024 · b7af424 · b7af424
1 parent 4f18720
commit b7af424
Show file tree

Hide file tree

Showing 27 changed files with 285 additions and 142 deletions.
diff --git a/apps/claim-vesting/package.json b/apps/claim-vesting/package.json
@@ -12,7 +12,7 @@
     "@bleu/cow-hooks-ui": "workspace:*",
     "@bleu/tsconfig": "workspace:*",
     "@bleu.builders/ui": "0.1.133",
-    "@cowprotocol/cow-sdk": "^5.5.1",
+    "@cowprotocol/cow-sdk": "^5.8.0",
     "@cowprotocol/hook-dapp-lib": "1.3.1",
     "@ethersproject/providers": "5.7.2",
     "babel-plugin-react-compiler": "0.0.0-experimental-6067d4e-20240923",

diff --git a/apps/create-vesting/package.json b/apps/create-vesting/package.json
@@ -13,7 +13,7 @@
     "@bleu/tsconfig": "workspace:*",
     "@bleu.builders/ui": "0.1.133",
     "@bleu/utils": "workspace:*",
-    "@cowprotocol/cow-sdk": "^5.5.1",
+    "@cowprotocol/cow-sdk": "^5.8.0",
     "@cowprotocol/hook-dapp-lib": "1.3.1",
     "@hookform/resolvers": "3.9.0",
     "@radix-ui/react-icons": "1.3.0",

diff --git a/apps/create-vesting/src/utils/vestingFactoriesMapping.ts b/apps/create-vesting/src/utils/vestingFactoriesMapping.ts
@@ -13,4 +13,5 @@ export const vestingFactoriesMapping: Record<
   [SupportedChainId.GNOSIS_CHAIN]: "0x62E13BE78af77C86D38a027ae432F67d9EcD4c10",
   [SupportedChainId.ARBITRUM_ONE]: "0x62E13BE78af77C86D38a027ae432F67d9EcD4c10",
   [SupportedChainId.SEPOLIA]: undefined,
+  [SupportedChainId.BASE]: "0x62E13BE78af77C86D38a027ae432F67d9EcD4c10",
 };
diff --git a/apps/deposit-pool/package.json b/apps/deposit-pool/package.json
@@ -16,7 +16,7 @@
     "@bleu/cow-hooks-ui": "workspace:*",
     "@bleu/tsconfig": "workspace:*",
     "@bleu/utils": "workspace:*",
-    "@cowprotocol/cow-sdk": "^5.5.1",
+    "@cowprotocol/cow-sdk": "^5.8.0",
     "@cowprotocol/hook-dapp-lib": "1.3.1",
     "@cowprotocol/permit-utils": "0.3.1",
     "@ethersproject/providers": "5.7.2",

diff --git a/apps/deposit-pool/src/app/page.tsx b/apps/deposit-pool/src/app/page.tsx
@@ -4,6 +4,7 @@ import {
   type IPool,
   PoolsDropdownMenu,
   Spinner,
+  getBalancerCoWPoolLink,
   useIFrameContext,
 } from "@bleu/cow-hooks-ui";
 import { COW_NATIVE_TOKEN_ADDRESS } from "@bleu/utils";
@@ -157,6 +158,7 @@ export default function Page() {
         pools={allPools}
         selectedPool={selectedPool}
         isCheckDetailsCentered={false}
+        getPoolLink={getBalancerCoWPoolLink}
       />
       {selectedPool && (
         <div className="flex flex-col justify-center mt-2 w-full">

diff --git a/apps/withdraw-cow-amm/package.json b/apps/withdraw-cow-amm/package.json
@@ -18,7 +18,7 @@
     "@bleu.builders/ui": "0.1.133",
     "@bleu/utils": "workspace:*",
     "@cowprotocol/contracts": "1.6.0",
-    "@cowprotocol/cow-sdk": "^5.5.1",
+    "@cowprotocol/cow-sdk": "^5.8.0",
     "@cowprotocol/hook-dapp-lib": "1.3.1",
     "@cowprotocol/permit-utils": "0.3.1",
     "@ethersproject/providers": "5.7.2",

diff --git a/apps/withdraw-cow-amm/src/app/page.tsx b/apps/withdraw-cow-amm/src/app/page.tsx
@@ -6,6 +6,7 @@ import {
   PoolItemInfo,
   PoolsDropdownMenu,
   Spinner,
+  getBalancerCoWPoolLink,
   useBalancerUserPools,
   useIFrameContext,
 } from "@bleu/cow-hooks-ui";
@@ -110,6 +111,7 @@ export default function Page() {
         PoolItemInfo={PoolItemInfo}
         selectedPool={selectedPool}
         isCheckDetailsCentered
+        getPoolLink={getBalancerCoWPoolLink}
         tooltipText="Withdraw of staked liquidity or pool with low user balance are not supported"
       />
       <PoolForm selectedPool={selectedPool} />

diff --git a/apps/withdraw-uni-v2/package.json b/apps/withdraw-uni-v2/package.json
@@ -18,7 +18,7 @@
     "@bleu.builders/ui": "0.1.134",
     "@bleu/utils": "workspace:*",
     "@cowprotocol/contracts": "1.6.0",
-    "@cowprotocol/cow-sdk": "^5.5.1",
+    "@cowprotocol/cow-sdk": "^5.8.0",
     "@cowprotocol/hook-dapp-lib": "1.3.1",
     "@cowprotocol/permit-utils": "0.3.1",
     "@ethersproject/providers": "5.7.2",

diff --git a/apps/withdraw-uni-v2/public/manifest.json b/apps/withdraw-uni-v2/public/manifest.json
@@ -20,7 +20,7 @@
     "conditions": {
       "position": "pre",
       "walletCompatibility": ["EOA"],
-      "supportedNetworks": [1, 42161, 11155111]
+      "supportedNetworks": [1, 42161, 11155111, 8453]
     }
   }
 }
diff --git a/apps/withdraw-uni-v2/src/app/page.tsx b/apps/withdraw-uni-v2/src/app/page.tsx
@@ -4,6 +4,7 @@ import {
   type IPool,
   PoolsDropdownMenu,
   Spinner,
+  getUniswapV2PoolLink,
   useIFrameContext,
 } from "@bleu/cow-hooks-ui";
 import {
@@ -91,6 +92,7 @@ export default function Page() {
         isCheckDetailsCentered
         tooltipText="Withdraw of staked liquidity or pool with low user balance are not supported"
         fetchNewPoolCallback={fetchNewPoolCallback}
+        getPoolLink={getUniswapV2PoolLink}
       />
       <PoolForm selectedPool={selectedPool} />
     </div>

diff --git a/apps/withdraw-uni-v2/src/components/PoolItemInfo.tsx b/apps/withdraw-uni-v2/src/components/PoolItemInfo.tsx
@@ -7,7 +7,9 @@ export function PoolItemInfo({ pool }: { pool: IPool }) {
     <i className="flex text-right justify-end">
       {formatNumber(
         formatUnits(BigInt(pool.userBalance.walletBalance.toString()), 18),
-        2,
+        4,
+        "decimal",
+        "standard",
       )}
     </i>
   );

diff --git a/apps/withdraw-uni-v2/src/utils/getTokensList.ts b/apps/withdraw-uni-v2/src/utils/getTokensList.ts
@@ -12,16 +12,22 @@ const tokenListUrlMap = {
     "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/CoinGecko.json",
   ],
   [SupportedChainId.ARBITRUM_ONE]: [
+    "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/CowSwap.json",
     "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/ArbitrumOneUniswapTokensList.json",
     "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/ArbitrumOneCoingeckoTokensList.json",
   ],
   [SupportedChainId.GNOSIS_CHAIN]: [
+    "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/CowSwap.json",
     "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/GnosisCoingeckoTokensList.json",
     "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/GnosisUniswapTokensList.json",
   ],
   [SupportedChainId.SEPOLIA]: [
     "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/CowSwapSepolia.json",
   ],
+  [SupportedChainId.BASE]: [
+    "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/CowSwap.json",
+    "https://raw.githubusercontent.com/cowprotocol/token-lists/refs/heads/main/src/public/CoinGecko.8453.json",
+  ],
 };
 
 export async function getTokensList(

diff --git a/apps/withdraw-uni-v2/src/utils/uniswapRouterMap.ts b/apps/withdraw-uni-v2/src/utils/uniswapRouterMap.ts
@@ -10,4 +10,5 @@ export const uniswapRouterMap: Record<SupportedChainId, Address | undefined> = {
   [SupportedChainId.MAINNET]: "0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D",
   [SupportedChainId.SEPOLIA]: "0xeE567Fe1712Faf6149d80dA1E6934E354124CfE3",
   [SupportedChainId.GNOSIS_CHAIN]: undefined,
+  [SupportedChainId.BASE]: "0x4752ba5dbc23f44d87826276bf6fd6b1c372ad24",
 } as const;
diff --git a/apps/withdraw-uni-v2/src/utils/uniswapSupportedChains.ts b/apps/withdraw-uni-v2/src/utils/uniswapSupportedChains.ts
@@ -8,6 +8,7 @@ export const ALL_SUPPORTED_CHAIN_IDS = [
   SupportedChainId.MAINNET,
   SupportedChainId.ARBITRUM_ONE,
   SupportedChainId.SEPOLIA,
+  SupportedChainId.BASE,
 ];
 
 export const isChainIdSupported = (chainId: SupportedChainId) =>

diff --git a/packages/cow-hooks-ui/package.json b/packages/cow-hooks-ui/package.json
@@ -10,7 +10,7 @@
     "@bleu/tsconfig": "workspace:*",
     "@bleu/utils": "workspace:*",
     "@cowprotocol/contracts": "1.6.0",
-    "@cowprotocol/cow-sdk": "^5.5.1",
+    "@cowprotocol/cow-sdk": "^5.8.0",
     "@cowprotocol/hook-dapp-lib": "1.3.1",
     "@cowprotocol/permit-utils": "0.3.1",
     "@ethersproject/constants": "^5.7.0",

diff --git a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@bleu.builders/ui";
-import { BalancerChainName } from "@bleu/utils";
+import type { SupportedChainId } from "@cowprotocol/cow-sdk";
 import * as Dialog from "@radix-ui/react-dialog";
 import {
   ArrowLeftIcon,
@@ -37,6 +37,7 @@ interface PoolsDropdownMenuProps {
   tooltipText?: string;
   fetchNewPoolCallback?: (poolAddress: Address) => Promise<IPool | undefined>;
   onFetchNewPoolSuccess?: (pool: IPool | undefined) => void;
+  getPoolLink: (chainId: SupportedChainId, selectedPool: IPool) => string;
 }
 
 export function PoolsDropdownMenu({
@@ -48,7 +49,9 @@ export function PoolsDropdownMenu({
   tooltipText,
   fetchNewPoolCallback = (_poolAddress: Address) => Promise.resolve(undefined),
   onFetchNewPoolSuccess = () => {},
+  getPoolLink,
 }: PoolsDropdownMenuProps) {
+  const { context } = useIFrameContext();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const [typedAddress, setTypedAddress] = useState("");
@@ -64,17 +67,9 @@ export function PoolsDropdownMenu({
   }, [open, search]);
 
   const poolLink = useMemo(() => {
-    if (!selectedPool) return;
-    const chainName =
-      selectedPool?.chain === BalancerChainName[1]
-        ? "ethereum"
-        : selectedPool?.chain.toLowerCase();
-    const baseUrl =
-      selectedPool?.chain === BalancerChainName[11155111]
-        ? "https://test.balancer.fi/pools"
-        : "https://balancer.fi/pools";
-    return `${baseUrl}/${chainName}/cow/${selectedPool?.id.toLowerCase()}`;
-  }, [selectedPool]);
+    if (!selectedPool || !context?.chainId) return;
+    return getPoolLink(context.chainId, selectedPool);
+  }, [selectedPool, context, getPoolLink]);
 
   // Filter pools based on search
   const filteredPools = useMemo(() => {
@@ -146,12 +141,16 @@ export function PoolsDropdownMenu({
         </div>
       );
     if (errorNewPool)
-      return <span className="text-destructive">Error loading new pool.</span>;
+      return (
+        <span className="text-destructive">
+          Error loading new pool, usually this means that the provided address
+          is not a pool.
+        </span>
+      );
 
     return (
       <>
         <p>No results found.</p>
-        <p>Try placing your LP token address on the search bar.</p>
       </>
     );
   };

diff --git a/packages/cow-hooks-ui/src/TokenLogo.tsx b/packages/cow-hooks-ui/src/TokenLogo.tsx
@@ -46,6 +46,7 @@ const chainIdToName: Record<SupportedChainId, string> = {
   [SupportedChainId.GNOSIS_CHAIN]: "xdai",
   [SupportedChainId.SEPOLIA]: "ethereum",
   [SupportedChainId.ARBITRUM_ONE]: "arbitrum",
+  [SupportedChainId.BASE]: "base",
 };
 
 export function trustTokenLogoUrl(

diff --git a/packages/cow-hooks-ui/src/index.tsx b/packages/cow-hooks-ui/src/index.tsx
@@ -29,3 +29,4 @@ export * from "./utils/poolDataConverter";
 export * from "./RootLayout";
 export * from "./withdraw";
 export * from "./GlobalError";
+export * from "./utils/getPoolLink";
diff --git a/packages/cow-hooks-ui/src/utils/clients.ts b/packages/cow-hooks-ui/src/utils/clients.ts
@@ -24,4 +24,8 @@ export const publicClientMapping = {
     chain: sepolia,
     transport: http(RPC_URL_MAPPING[SupportedChainId.SEPOLIA]),
   }),
+  [SupportedChainId.BASE]: createPublicClient({
+    chain: mainnet,
+    transport: http(RPC_URL_MAPPING[SupportedChainId.BASE]),
+  }),
 };
diff --git a/packages/cow-hooks-ui/src/utils/getPoolLink.ts b/packages/cow-hooks-ui/src/utils/getPoolLink.ts
@@ -0,0 +1,39 @@
+import { BalancerChainName } from "@bleu/utils";
+import { SupportedChainId } from "@cowprotocol/cow-sdk";
+import type { IPool } from "..";
+
+export function getBalancerCoWPoolLink(
+  chainId: SupportedChainId,
+  selectedPool: IPool,
+) {
+  const chainName = BalancerChainName[chainId];
+  const baseUrl =
+    chainId === SupportedChainId.SEPOLIA
+      ? "https://test.balancer.fi/pools"
+      : "https://balancer.fi/pools";
+  return `${baseUrl}/${chainName}/cow/${selectedPool.id.toLowerCase()}`;
+}
+
+/**
+ * #CHAIN-INTEGRATION
+ * This needs to be changed if you want to support a new chain
+ */
+export const UniswapV2ChainName: Record<SupportedChainId, string> = {
+  [SupportedChainId.MAINNET]: "ethereum",
+  [SupportedChainId.SEPOLIA]: "sepolia",
+  [SupportedChainId.ARBITRUM_ONE]: "arbitrum",
+  [SupportedChainId.GNOSIS_CHAIN]: "",
+  [SupportedChainId.BASE]: "base",
+};
+
+export function getUniswapV2PoolLink(
+  chainId: SupportedChainId,
+  selectedPool: IPool,
+) {
+  if (chainId === SupportedChainId.GNOSIS_CHAIN) {
+    throw new Error("Uniswap V2 is not supported on Gnosis Chain");
+  }
+  const chainName = UniswapV2ChainName[chainId];
+
+  return `https://app.uniswap.org/explore/pools/${chainName}/${selectedPool.id.toLowerCase()}`;
+}
diff --git a/packages/utils/balancerApi.ts b/packages/utils/balancerApi.ts
@@ -15,13 +15,15 @@ export const BALANCER_API_URL: Record<SupportedChainId, string> = {
   [SupportedChainId.SEPOLIA]: TEST_URL,
   [SupportedChainId.ARBITRUM_ONE]: BASE_URL,
   [SupportedChainId.GNOSIS_CHAIN]: BASE_URL,
+  [SupportedChainId.BASE]: BASE_URL,
 };
 
 export const BALANCER_GQL_CLIENT: Record<SupportedChainId, GraphQLClient> = {
   [SupportedChainId.MAINNET]: new GraphQLClient(BASE_URL),
   [SupportedChainId.SEPOLIA]: new GraphQLClient(TEST_URL),
   [SupportedChainId.ARBITRUM_ONE]: new GraphQLClient(BASE_URL),
   [SupportedChainId.GNOSIS_CHAIN]: new GraphQLClient(BASE_URL),
+  [SupportedChainId.BASE]: new GraphQLClient(BASE_URL),
 };
 
 export const SUPPORTED_CHAIN_ID_TO_CHAIN_ID: Record<SupportedChainId, ChainId> =
@@ -30,11 +32,13 @@ export const SUPPORTED_CHAIN_ID_TO_CHAIN_ID: Record<SupportedChainId, ChainId> =
     [SupportedChainId.SEPOLIA]: ChainId.SEPOLIA,
     [SupportedChainId.ARBITRUM_ONE]: ChainId.ARBITRUM_ONE,
     [SupportedChainId.GNOSIS_CHAIN]: ChainId.GNOSIS_CHAIN,
+    [SupportedChainId.BASE]: ChainId.BASE,
   };
 
 export const BalancerChainName: Record<SupportedChainId, string> = {
   [SupportedChainId.MAINNET]: "MAINNET",
   [SupportedChainId.SEPOLIA]: "SEPOLIA",
   [SupportedChainId.ARBITRUM_ONE]: "ARBITRUM",
   [SupportedChainId.GNOSIS_CHAIN]: "GNOSIS",
+  [SupportedChainId.BASE]: "BASE",
 };
diff --git a/packages/utils/chainInfo.ts b/packages/utils/chainInfo.ts
@@ -68,6 +68,17 @@ export const CHAIN_INFO: ChainInfoMap = {
     urlAlias: "arb1",
     color: "#29B6AF",
   },
+  [SupportedChainId.BASE]: {
+    docs: "https://docs.cow.fi",
+    explorer: "https://basescan.org",
+    infoLink: COW_PROTOCOL_LINK,
+    label: "Base",
+    name: "base",
+    addressPrefix: "base",
+    explorerTitle: "BaseScan",
+    urlAlias: "base",
+    color: "#62688F",
+  },
 };
 
 export const CHAIN_INFO_ARRAY: BaseChainInfo[] = Object.values(CHAIN_INFO);

diff --git a/packages/utils/cowApi.ts b/packages/utils/cowApi.ts
@@ -12,6 +12,7 @@ export const COW_API_URL_BY_CHAIN_ID = {
   [SupportedChainId.GNOSIS_CHAIN]: `${COW_API_BASE_URL}xdai`,
   [SupportedChainId.SEPOLIA]: `${COW_API_BASE_URL}sepolia`,
   [SupportedChainId.ARBITRUM_ONE]: `${COW_API_BASE_URL}arbitrum_one`,
+  [SupportedChainId.BASE]: `${COW_API_BASE_URL}base`,
 };
 
 export interface INativePrice {
@@ -53,6 +54,10 @@ export const USDC: Record<
     address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
     decimals: 6,
   },
+  [SupportedChainId.BASE]: {
+    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+    decimals: 6,
+  },
 };
 
 export async function getCowProtocolUsdPrice({

diff --git a/packages/utils/cowExplorer.ts b/packages/utils/cowExplorer.ts
@@ -23,6 +23,7 @@ function _getExplorerUrlByEnvironment(): Record<SupportedChainId, string> {
     [SupportedChainId.GNOSIS_CHAIN]: `${baseUrl}/gc`,
     [SupportedChainId.ARBITRUM_ONE]: `${baseUrl}/arb1`,
     [SupportedChainId.SEPOLIA]: `${baseUrl}/sepolia`,
+    [SupportedChainId.BASE]: `${baseUrl}l/base`,
   };
 }
 

diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@balancer/sdk": "0.26.1",
-    "@cowprotocol/cow-sdk": "^5.5.1",
+    "@cowprotocol/cow-sdk": "^5.8.0",
     "@weiroll/weiroll.js": "^0.3.0",
     "ethers": "5.7.2",
     "graphql-request": "^6.1.0",

diff --git a/packages/utils/transactionFactory/rpcs.ts b/packages/utils/transactionFactory/rpcs.ts
@@ -1,5 +1,5 @@
 import { SupportedChainId } from "@cowprotocol/cow-sdk";
-import { arbitrum, gnosis, mainnet } from "viem/chains";
+import { arbitrum, base, gnosis, mainnet } from "viem/chains";
 /**
  * #CHAIN-INTEGRATION
  * This needs to be changed if you want to support a new chain
@@ -12,6 +12,7 @@ export const RPC_URL_MAPPING =
         [SupportedChainId.ARBITRUM_ONE]: arbitrum.rpcUrls.default.http[0],
         [SupportedChainId.SEPOLIA]:
           "https://ethereum-sepolia-rpc.publicnode.com",
+        [SupportedChainId.BASE]: base.rpcUrls.default.http[0],
       }
     : {
         [SupportedChainId.MAINNET]:
@@ -22,4 +23,6 @@ export const RPC_URL_MAPPING =
           "https://lb.drpc.org/ogrpc?network=arbitrum&dkey=AnOfyGnZ_0nWpS-OOwQzqAnACrGNjLcR77k8TgFkVp5j",
         [SupportedChainId.SEPOLIA]:
           "https://lb.drpc.org/ogrpc?network=sepolia&dkey=AnOfyGnZ_0nWpS-OOwQzqAnACrGNjLcR77k8TgFkVp5j",
+        [SupportedChainId.BASE]:
+          "https://lb.drpc.org/ogrpc?network=base&dkey=AnOfyGnZ_0nWpS-OOwQzqAnACrGNjLcR77k8TgFkVp5j",
       };