feat: update dex-ui components

projects/dex-ui/src/components/Swap/SwapRoot.tsx

@@ -307,8 +307,10 @@ export const SwapRoot = () => {
     try {
       // sanity check
       if (recipient === NULL_ADDRESS) throw new Error("FATAL: recipient is the NULL_ADDRESS!");
-      const gasEstimate = quote?.gas;
-      const tx = await quote!.doSwap({ gasLimit: gasEstimate?.mul(1.2).toBigNumber() });
+      if (!quote) throw new Error("FATAL: quote is missing");
+
+      const gasEstimate = quote.gas;
+      const tx = await quote.doSwap({ gasLimit: gasEstimate?.mul(1.2).toBigNumber() });
       toast.confirming(tx);
 
       const receipt = await tx.wait();

projects/dex-ui/src/components/Wallet.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect } from "react";
 
 import { ConnectKitButton, useModal as useConnectKitModal } from "connectkit";
+import { useAtom } from "jotai";
 import styled from "styled-components";
 import { useAccount } from "wagmi";
 
+import { sdkAtom } from "src/state/atoms";
+
 import { ButtonPrimary } from "./Button";
 
 type ActionWalletButtonProps = {
@@ -19,7 +22,7 @@ export const WalletButton = () => {
 
   return (
     <ConnectKitButton.Custom>
-      {({ isConnected, show, truncatedAddress, ensName }) => {
+      {({ isConnected, show, truncatedAddress, ensName, chain }) => {
         return (
           <>
             <StyledConnectButton onClick={show}>
@@ -85,7 +88,12 @@ const StyledConnectButton = styled.button`
  */
 const useUpdateWalletModalStyles = () => {
   const { address } = useAccount();
-  const { open, setOpen } = useConnectKitModal();
+  const { open, setOpen } = useConnectKitModal({
+    onConnect: () => {
+      console.log("connecting....");
+    }
+  });
+  const [sdk, setSdk] = useAtom(sdkAtom);
 
   useEffect(() => {
     if (address || !open) return;

projects/dex-ui/src/pages/Wells.tsx

@@ -41,12 +41,10 @@ export const Wells = () => {
   const { hasPositions, getPositionWithWell, isLoading: positionsLoading } = useLPPositionSummary();
   const { isLoading: apysLoading } = useBeanstalkSiloAPYs();
   const { data: tokenPrices, isLoading: tokenPricesLoading } = useTokenPrices(wells);
+
   const { data: wellFnNames, isLoading: wellNamesLoading } = useWellFunctionNames(wells);
 
-  const tableData = useMemo(
-    () => makeTableData(sdk, wells, wellStats, tokenPrices),
-    [sdk, tokenPrices, wellStats, wells]
-  );
+  const tableData = makeTableData(sdk, wells, wellStats, tokenPrices);
 
   const loading = useLagLoading(
     isLoading ||
@@ -230,9 +228,10 @@ const makeTableData = (
     };
   });
 
+  // console.log("data: ", data);
   const whitelistedSort = data.sort(getSortByWhitelisted(sdk));
 
-  const sortedByLiquidity = whitelistedSort.sort((a, b) => {
+  whitelistedSort.sort((a, b) => {
     if (!a.liquidityUSDInferred) return 1;
     if (!b.liquidityUSDInferred) return -1;
 
@@ -241,12 +240,12 @@ const makeTableData = (
     return diff.gt(0) ? -1 : 1;
   });
 
-  const sortedByHasReserves = sortedByLiquidity.sort((a, b) => {
+  whitelistedSort.sort((a, b) => {
     if (a.hasReserves === b.hasReserves) return 0;
     return a.hasReserves && !b.hasReserves ? -1 : 1;
   });
 
-  return sortedByHasReserves;
+  return whitelistedSort;
 };
 
 const getSortByWhitelisted =

projects/dex-ui/src/state/providers/SdkProvider.tsx

@@ -32,6 +32,10 @@ function BeanstalkSdkSetter({ children }: { children: React.ReactNode }) {
   const provider = useEthersProvider();
   const chainId = provider.network.chainId;
 
+  useEffect(() => {
+    setSdk(null);
+  }, [chainId]);
+
   useEffect(() => {
     setSdk(getSDK(provider as JsonRpcProvider, signer, chainId));
   }, [provider, signer, chainId, setSdk]);

projects/dex-ui/src/state/providers/WellsProvider.tsx

@@ -28,8 +28,8 @@ export const useWellsQuery = () => {
   const query = useChainScopedQuery({
     queryKey: queryKeys.wells(sdk),
     queryFn: async () => {
-      Log.module("wells").debug("Fetching wells...");
       const wellAddresses = await findWells(sdk, aquifer);
+
       try {
         setWellsLoading(true);
         Log.module("wells").debug("Well addresses: ", wellAddresses);
@@ -65,13 +65,14 @@ export const useWellsQuery = () => {
         return [];
       }
     },
+    enabled: !!sdk && !!aquifer,
     retry: false,
     staleTime: Infinity
   });
 
   useEffect(() => {
     setWells({ data: query.data || [], error: query.error, isLoading: query.isLoading });
-  }, [query, setWells]);
+  }, [query.data, query.error, query.isLoading, setWells]);
 
   return query;
 };

projects/dex-ui/src/utils/query/useScopedQuery.ts

@@ -5,6 +5,7 @@ import { useAccount, useChainId } from "wagmi";
 
 import { AddressIsh } from "src/types";
 
+
 const makeScopedQueryKey = (chainId: number, address: AddressIsh, queryKey: QueryKey) => {
   const scope = [chainId, address || "no-address"];
   return [scope, ...(typeof queryKey === "string" ? [queryKey] : queryKey)];

projects/dex-ui/src/wells/wellLoader.ts

@@ -21,7 +21,14 @@ const WELL_BLACKLIST: Record<number, WellAddresses> = {
     "0xbea0009b5b96D87643DFB7392293f18af7C041F4".toLowerCase(), // bean:wstETH duplicate
     "0x5997111CbBAA0f4C613Ae678Ba4803e764140266".toLowerCase() // usdc:frax duplicate
   ],
-  [ChainId.ARBITRUM_MAINNET]: []
+  [ChainId.ARBITRUM_MAINNET]: [
+    "0x0adf75da6980fee8f848d52a7af1f8d6f34a8169".toLowerCase(), // bean:WETH duplicate,
+    "0xb968de36ce9c61371a82a78b715af660c2209d11".toLowerCase(), // bean:wstETH duplicate
+    "0x8d74ff8e729b4e78898488775b619c05d1ecb5e5".toLowerCase(), // bean:weETH duplicate
+    "0x370062BE2d6Fc8d02948fEA75fAfe471F74854CF".toLowerCase(), // bean:WBTC duplicate
+    "0x157219b5D112F2D8aaFD3c7F3bA5D4c73343cc96".toLowerCase(), // bean:USDC duplicate
+    "0xF3e4FC5c53D5500989e68F81d070094525caC240".toLowerCase() // bean:USDT duplicate
+  ]
 };
 
 const loadFromChain = async (sdk: BeanstalkSDK, aquifer: Aquifer): Promise<WellAddresses> => {
@@ -46,19 +53,19 @@ const loadFromChain = async (sdk: BeanstalkSDK, aquifer: Aquifer): Promise<WellA
   return addresses;
 };
 
-const loadFromGraph = async (chainId: ChainId): Promise<WellAddresses> => {
+const loadFromGraph = async (_chainId: ChainId): Promise<WellAddresses> => {
   const data = await fetchFromSubgraphRequest(GetWellAddressesDocument, undefined);
   const results = await data();
 
-  const fallbackChainId = Address.getFallbackChainId(chainId);
-  const blacklist = WELL_BLACKLIST[chainId] || WELL_BLACKLIST[fallbackChainId];
+  const chainId = getChainIdOrFallbackChainId(_chainId);
+  const blacklist = WELL_BLACKLIST[chainId];
 
   return results.wells.map((w) => w.id).filter((addr) => !blacklist.includes(addr.toLowerCase()));
 };
 
 export const findWells = memoize(
   async (sdk: BeanstalkSDK, aquifer: Aquifer): Promise<WellAddresses> => {
-    const addresses = await Promise.any([
+    const result = await Promise.any([
       loadFromChain(sdk, aquifer)
         .then((res) => {
           Log.module("wells").debug("Used blockchain to load wells");
@@ -80,11 +87,16 @@ export const findWells = memoize(
       //     throw err;
       //   })
     ]);
-    if (addresses.length === 0) {
+
+    const wellLPAddresses = sdk.pools.getWells().map((w) => w.address.toLowerCase());
+    const resultAddresses = result.map((r) => r.toLowerCase());
+    const addresses = new Set([...wellLPAddresses, ...resultAddresses]);
+
+    if (!addresses.size) {
       throw new Error("No deployed wells found");
     }
 
-    return addresses;
+    return [...addresses];
   },
   // Override the default memoize caching with just a '1'
   // so it always caches, regardless of parameter passed