chore: upgrade ConnectKit & friends

liquity · Feb 29, 2024 · 294141f · 294141f
1 parent f79fc03
commit 294141f
Show file tree

Hide file tree

Showing 15 changed files with 2,995 additions and 2,102 deletions.
diff --git a/packages/dev-frontend/package.json b/packages/dev-frontend/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@emotion/react": "^11.11.4",
     "@ethersproject/abi": "5.7.0",
     "@ethersproject/experimental": "5.7.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -12,29 +13,30 @@
     "@fortawesome/react-fontawesome": "0.1.14",
     "@liquity/chicken-bonds": "file:.yalc/@liquity/chicken-bonds",
     "@metamask/eth-sig-util": "5.0.1",
-    "@tippyjs/react": "4.2.5",
-    "connectkit": "^1.3.0",
+    "@tanstack/react-query": "^5.24.1",
+    "@tippyjs/react": "^4.2.6",
+    "connectkit": "^1.7.2",
     "ethers": "5.7.2",
     "lambert-w-function": "3.0.0",
-    "react": "17.0.2",
-    "react-circular-progressbar": "2.0.3",
-    "react-copy-to-clipboard": "5.0.3",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-circular-progressbar": "^2.1.0",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.15.1",
-    "react-router-dom": "5.2.0",
-    "recharts": "2.1.10",
-    "theme-ui": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0",
-    "wagmi": "^0.12.0"
+    "react-router-dom": "5.x",
+    "recharts": "^2.12.1",
+    "theme-ui": "^0.16.2",
+    "viem": "^2.7.15",
+    "wagmi": "^2.5.7"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@testing-library/dom": "7.30.0",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.5",
     "@testing-library/user-event": "12.8.3",
-    "@types/react": "17.0.3",
+    "@types/react": "^18.2.60",
     "@types/react-copy-to-clipboard": "5.0.0",
-    "@types/react-dom": "17.0.2",
+    "@types/react-dom": "^18.2.19",
     "@types/react-modal": "^3.13.1",
     "@types/react-router-dom": "5.1.7",
     "@types/testing-library__jest-dom": "5.9.5",
@@ -50,10 +52,10 @@
     "jsdom": "21",
     "node-fetch": "^3.3.1",
     "npm-run-all": "4.1.5",
-    "rollup-plugin-polyfill-node": "^0.12.0",
     "source-map-explorer": "2.5.2",
-    "typescript": "^5.0.4",
+    "typescript": "^5.3.3",
     "vite": "^4.3.2",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "vitest": "^0.31.0",
     "yalc": "1.0.0-pre.53"
   },

diff --git a/packages/dev-frontend/src/App.tsx b/packages/dev-frontend/src/App.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { createClient, WagmiConfig } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider, createConfig, fallback, http } from "wagmi";
 import { mainnet, goerli, sepolia, localhost } from "wagmi/chains";
-import { ConnectKitProvider } from "connectkit";
-import { Flex, Heading, ThemeProvider, Paragraph, Link } from "theme-ui";
+import { ConnectKitProvider, getDefaultConfig } from "connectkit";
+import { Flex, Heading, ThemeUIProvider, Paragraph, Link } from "theme-ui";
 
-import getDefaultClient from "./connectkit/defaultClient";
 import { LiquityProvider } from "./hooks/LiquityContext";
 import { WalletConnector } from "./components/WalletConnector";
 import { TransactionProvider } from "./components/Transaction";
@@ -78,45 +78,61 @@ const UnsupportedNetworkFallback: React.FC = () => (
   </Flex>
 );
 
+const queryClient = new QueryClient();
+
 const App = () => {
   const config = useAsyncValue(getConfig);
   const loader = <AppLoader />;
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeUIProvider theme={theme}>
       {config.loaded && (
-        <WagmiConfig
-          client={createClient(
-            getDefaultClient({
+        <WagmiProvider
+          config={createConfig(
+            getDefaultConfig({
               appName: "Liquity",
+
               chains:
                 isDemoMode || import.meta.env.MODE === "test"
                   ? [localhost]
                   : config.value.testnetOnly
                   ? [goerli, sepolia]
                   : [mainnet, goerli, sepolia],
+
               walletConnectProjectId: config.value.walletConnectProjectId,
-              infuraId: config.value.infuraApiKey,
-              alchemyId: config.value.alchemyApiKey
+
+              transports: {
+                [mainnet.id]: fallback([
+                  ...(config.value.infuraApiKey
+                    ? [http(`https://mainnet.infura.io/v3/${config.value.infuraApiKey}`)]
+                    : []),
+                  ...(config.value.alchemyApiKey
+                    ? [http(`https://eth-mainnet.g.alchemy.com/v2/${config.value.alchemyApiKey}`)]
+                    : []),
+                  http()
+                ])
+              }
             })
           )}
         >
-          <ConnectKitProvider options={{ hideBalance: true }}>
-            <WalletConnector loader={loader}>
-              <LiquityProvider
-                loader={loader}
-                unsupportedNetworkFallback={<UnsupportedNetworkFallback />}
-                unsupportedMainnetFallback={<UnsupportedMainnetFallback />}
-              >
-                <TransactionProvider>
-                  <LiquityFrontend loader={loader} />
-                </TransactionProvider>
-              </LiquityProvider>
-            </WalletConnector>
-          </ConnectKitProvider>
-        </WagmiConfig>
+          <QueryClientProvider client={queryClient}>
+            <ConnectKitProvider options={{ hideBalance: true }}>
+              <WalletConnector loader={loader}>
+                <LiquityProvider
+                  loader={loader}
+                  unsupportedNetworkFallback={<UnsupportedNetworkFallback />}
+                  unsupportedMainnetFallback={<UnsupportedMainnetFallback />}
+                >
+                  <TransactionProvider>
+                    <LiquityFrontend loader={loader} />
+                  </TransactionProvider>
+                </LiquityProvider>
+              </WalletConnector>
+            </ConnectKitProvider>
+          </QueryClientProvider>
+        </WagmiProvider>
       )}
-    </ThemeProvider>
+    </ThemeUIProvider>
   );
 };
 

diff --git a/packages/dev-frontend/src/components/InfoMessage.tsx b/packages/dev-frontend/src/components/InfoMessage.tsx
@@ -2,10 +2,10 @@ import { Box, Flex, Heading, Text } from "theme-ui";
 
 import { Icon } from "./Icon";
 
-type InfoMessageProps = {
+type InfoMessageProps = React.PropsWithChildren<{
   title: string;
   icon?: React.ReactNode;
-};
+}>;
 
 export const InfoMessage: React.FC<InfoMessageProps> = ({ title, children, icon }) => (
   <Box sx={{ mx: 1, mb: 3 }}>

diff --git a/packages/dev-frontend/src/components/Tooltip.tsx b/packages/dev-frontend/src/components/Tooltip.tsx
@@ -4,10 +4,11 @@ import React from "react";
 import { Box, Card, Link } from "theme-ui";
 import { Icon } from "./Icon";
 
-export type TooltipProps = Pick<TippyProps, "placement"> & {
-  message: React.ReactNode;
-  link?: string;
-};
+export type TooltipProps = Pick<TippyProps, "placement"> &
+  React.PropsWithChildren<{
+    message: React.ReactNode;
+    link?: string;
+  }>;
 
 export type LearnMoreLinkProps = Pick<TooltipProps, "link">;
 

diff --git a/packages/dev-frontend/src/components/Transaction.tsx b/packages/dev-frontend/src/components/Transaction.tsx
@@ -64,7 +64,7 @@ const TransactionContext = React.createContext<
   [TransactionState, (state: TransactionState) => void] | undefined
 >(undefined);
 
-export const TransactionProvider: React.FC = ({ children }) => {
+export const TransactionProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
   const transactionState = useState<TransactionState>({ type: "idle" });
   return (
     <TransactionContext.Provider value={transactionState}>{children}</TransactionContext.Provider>

diff --git a/packages/dev-frontend/src/components/WalletConnector.tsx b/packages/dev-frontend/src/components/WalletConnector.tsx
@@ -2,9 +2,9 @@ import { ConnectKitButton } from "connectkit";
 import { Box, Button, Flex } from "theme-ui";
 import { Icon } from "./Icon";
 
-type WalletConnectorProps = {
+type WalletConnectorProps = React.PropsWithChildren<{
   loader?: React.ReactNode;
-};
+}>;
 
 export const WalletConnector: React.FC<WalletConnectorProps> = ({ children }) => {
   return (