WIP: update Basin + Wells SDK (#1070)

package.json

@@ -48,7 +48,7 @@
     "ui:test": "yarn workspace ui test",
     "test:browser": "yarn workspace tests test:browser",
     "ex": "yarn workspace @beanstalk/examples x",
-    "anvil-arbitrum": "yarn cli:anvil-arbitrum --fork-block-number 244125438 --code-size-limit 50000",
+    "anvil-arbitrum": "yarn cli:anvil-arbitrum --fork-block-number 250704543 --code-size-limit 50000",
     "anvil-mainnet": "yarn cli:anvil-mainnet",
     "anvil": "anvil --fork-url https://eth-mainnet.g.alchemy.com/v2/5ubn94zT7v7DnB5bNW1VOnoIbX5-AG2N --chain-id 1337",
     "anvil4tests": "anvil --fork-url https://eth-mainnet.g.alchemy.com/v2/Kk7ktCQL5wz4v4AG8bR2Gun8TAASQ-qi  --chain-id 1337 --fork-block-number 18629000"

projects/dex-ui/.env.local.example

@@ -1,5 +1,7 @@
-VITE_AQUIFER_ADDRESS=local/fork deployed address
+VITE_AQUIFER_ADDRESS_ETH="deployed address here"
+VITE_AQUIFER_ADDRESS_ARBITRUM="deployed address here"
 VITE_ALCHEMY_API_KEY="your key here"
+VITE_THEGRAPH_API_KEY="your key here"
+VITE_WALLET_CONNECT_PROJECT_ID="project key here"
 VITE_WELLS_ORIGIN_BLOCK=17138465
-VITE_LOAD_HISTORY_FROM_GRAPH=0
-VITE_WALLET_CONNECT_PROJECT_ID="project key here"
+VITE_LOAD_HISTORY_FROM_GRAPH=0

projects/dex-ui/.env.production

@@ -1,5 +1,10 @@
 // DO NOT ACTUALLY SAVE THINGS HERE
 // ONLY USE THIS FILE TO TRACK WHAT ENV VARS NEED TO 
 // BE ADDED TO NETLIFY CONFIG
+VITE_AQUIFER_ADDRESS_ETH=""
+VITE_AQUIFER_ADDRESS_ARBITRUM=""
 VITE_ALCHEMY_API_KEY=""
-VITE_WALLET_CONNECT_PROJECT_ID=""
+VITE_THEGRAPH_API_KEY=""
+VITE_WALLET_CONNECT_PROJECT_ID=""
+VITE_WELLS_ORIGIN_BLOCK=""
+VITE_LOAD_HISTORY_FROM_GRAPH=""

projects/dex-ui/.eslintrc

@@ -2,12 +2,21 @@
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": {},
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
     }
   },
   "extends": [
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
     // "plugin:@typescript-eslint/recommended",
+    // "plugin:import/errors",
+    // "plugin:import/warnings",
     "plugin:import/typescript"
   ],
   "parser": "@typescript-eslint/parser",
@@ -18,13 +27,7 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": [
-    "react",
-    "react-hooks",
-    "@typescript-eslint",
-    "import",
-    "jsx-a11y"
-  ],
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "import", "jsx-a11y"],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
@@ -39,6 +42,41 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/prop-types": 0,
-    "react/display-name": 0
+    "react/display-name": 0,
+    "import/order": [
+      "warn",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          ["parent", "sibling", "index"],
+          "object",
+          "type"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@beanstalk/sdk*",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "src/**",
+            "group": "internal"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react", "@beanstalk/sdk*"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "newlines-between": "always"
+      }
+    ]
   }
-}
+}

projects/dex-ui/package.json

@@ -30,6 +30,7 @@
     "connectkit": "1.7.2",
     "ethers": "^5.7.2",
     "graphql-request": "5.2.0",
+    "jotai": "2.9.3",
     "lightweight-charts": "4.1.3",
     "prettier": "3.2.5",
     "react": "^18.2.0",

projects/dex-ui/src/assets/images/tokens/index.tsx

@@ -1,12 +1,16 @@
-const glob = import.meta.glob("src/assets/images/tokens/*.svg", {
-  eager: true,
-  as: "url"
-  // import: "default"
-});
+const glob = import.meta.glob(
+  ["src/assets/images/tokens/*.svg", "src/assets/images/tokens/*.png"],
+  {
+    eager: true,
+    as: "url"
+  }
+);
 
 export const images: Record<string, string> = {};
 
 for (const key of Object.keys(glob)) {
-  let symbol = key.replace("/src/assets/images/tokens/", "").replace(".svg", "");
+  const parts = key.split("/");
+  const filename = parts[parts.length - 1];
+  const symbol = filename.replace(/\.(svg|png)$/, "");
   images[symbol] = glob[key];
 }

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

@@ -1,16 +1,18 @@
 import React from "react";
+
 import { Route, Routes } from "react-router-dom";
+
+import { Frame } from "src/components/Frame/Frame";
 import { NotFound } from "src/pages/404";
-import { Home } from "src/pages/Home";
+import { Build } from "src/pages/Build";
+import { Create } from "src/pages/Create";
 import { Dev } from "src/pages/Dev";
+import { Home } from "src/pages/Home";
+import { Liquidity } from "src/pages/Liquidity";
+import { Swap } from "src/pages/Swap";
 import { Well } from "src/pages/Well";
 import { Wells } from "src/pages/Wells";
-import { Frame } from "src/components/Frame/Frame";
-import { Build } from "src/pages/Build";
-import { Swap } from "src/pages/Swap";
 import { Settings } from "src/settings";
-import { Liquidity } from "src/pages/Liquidity";
-import { Create } from "src/pages/Create";
 
 export const App = ({}) => {
   const isNotProd = !Settings.PRODUCTION;
@@ -27,6 +29,7 @@ export const App = ({}) => {
         <Route path="/create" element={<Create />} />
         {isNotProd && <Route path="/dev" element={<Dev />} />}
         <Route path="*" element={<NotFound />} />
+        {false && <></>}
       </Routes>
     </Frame>
   );

projects/dex-ui/src/components/App/OnLoad.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect } from "react";
+
+import { useAccount } from "wagmi";
+
 import { useAllTokensBalance } from "src/tokens/useAllTokenBalance";
 import { FC } from "src/types";
-import { useAccount } from "wagmi";
 
 export const OnLoad: FC<{}> = ({ children }) => {
   const { address, chain } = useAccount();
@@ -13,20 +15,20 @@ export const OnLoad: FC<{}> = ({ children }) => {
     refetch();
   }, [address, chain?.id, refetch]);
 
-  // useEffect(() => {
-  //   const unwatch = watchAccount(config, {
-  //     onChange(account, prevAccount) {
-  //       // if (account.chain?.id !== chain?.id) {
-  //       //   console.log("CHECK ME");
-  //       // }
-  //       // if (prevAccount.address !== account.address) {
-  //       //   console.log(`CHANGED! - from(${prevAccount.address}) to => ${account.address}`);
-  //       // }
-  //     }
-  //   });
-
-  //   return () => unwatch();
-  // });
-
   return <>{children}</>;
 };
+
+// useEffect(() => {
+//   const unwatch = watchAccount(config, {
+//     onChange(account, prevAccount) {
+//       // if (account.chain?.id !== chain?.id) {
+//       //   console.log("CHECK ME");
+//       // }
+//       // if (prevAccount.address !== account.address) {
+//       //   console.log(`CHANGED! - from(${prevAccount.address}) to => ${account.address}`);
+//       // }
+//     }
+//   });
+
+//   return () => unwatch();
+// });

projects/dex-ui/src/components/App/Wrapper.tsx

@@ -1,16 +1,18 @@
 import React from "react";
-import { HashRouter } from "react-router-dom";
-import { FC } from "src/types";
-import { ConnectKitProvider } from "connectkit";
-import { WagmiProvider } from "wagmi";
+
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ConnectKitProvider } from "connectkit";
+import { HashRouter } from "react-router-dom";
+import { WagmiProvider } from "wagmi";
+
+import JotaiProvider from "src/state";
+import { FC } from "src/types";
 import { Avatar } from "src/utils/wagmi/Avatar";
-import { TokenProvider } from "src/tokens/TokenProvider";
-import { OnLoad } from "./OnLoad";
-import { SdkProvider } from "src/utils/sdk/SdkProvider";
 import { config } from "src/utils/wagmi/config";
 
+import { OnLoad } from "./OnLoad";
+
 export const Wrapper: FC<{}> = ({ children }) => {
   const queryClient = new QueryClient();
   return (
@@ -31,11 +33,9 @@ export const Wrapper: FC<{}> = ({ children }) => {
             }}
           >
             <ReactQueryDevtools initialIsOpen={false} />
-            <SdkProvider>
-              <TokenProvider>
-                <OnLoad>{children}</OnLoad>
-              </TokenProvider>
-            </SdkProvider>
+            <JotaiProvider>
+              <OnLoad>{children}</OnLoad>
+            </JotaiProvider>
           </ConnectKitProvider>
         </QueryClientProvider>
       </WagmiProvider>

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

@@ -1,10 +1,13 @@
 import React from "react";
-import { FC } from "src/types";
+
 import styled from "styled-components";
-import { BodyXS } from "./Typography";
+
 import x from "src/assets/images/x.svg";
-import { ImageButton } from "./ImageButton";
 import { size } from "src/breakpoints";
+import { FC } from "src/types";
+
+import { ImageButton } from "./ImageButton";
+import { BodyXS } from "./Typography";
 
 interface Composition {
   Header: typeof Header;
@@ -26,7 +29,12 @@ type Props = {
   toggleDrawer?: (isDrawerOpen: boolean) => void;
 };
 
-export const BottomDrawer: FC<Props> & Composition = ({ children, showDrawer, headerText, toggleDrawer }) => {
+export const BottomDrawer: FC<Props> & Composition = ({
+  children,
+  showDrawer,
+  headerText,
+  toggleDrawer
+}) => {
   return (
     <>
       <Container showDrawer={showDrawer} data-trace="true">

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

@@ -1,4 +1,7 @@
 import React, { ButtonHTMLAttributes, CSSProperties, forwardRef } from "react";
+
+import styled from "styled-components";
+
 import {
   CommonCssProps,
   CommonCssStyles,
@@ -7,7 +10,7 @@ import {
   makeCssStyle
 } from "src/utils/ui/styled";
 import { theme } from "src/utils/ui/theme";
-import styled from "styled-components";
+
 import { Spinner } from "./Spinner";
 
 export type ButtonVariant = "outlined" | "contained"; // | "text" (Add Text Variant later)