Merge pull request #1041 from liquity/upgrade-connectkit

chore: upgrade ConnectKit & friends
liquity · Mar 28, 2024 · e38edf3 · e38edf3
2 parents 0fe4c95 + 6cf2a9c
commit e38edf3
Show file tree

Hide file tree

Showing 66 changed files with 4,125 additions and 3,402 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -19,7 +19,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: yarn
         env:
           # Workaround for https://github.com/actions/setup-node/issues/317

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,49 +13,46 @@
     "@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.3",
     "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.3.4",
+    "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-copy-to-clipboard": "5.0.0",
-    "@types/react-dom": "17.0.2",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.2.60",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@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",
-    "@types/testing-library__react": "10.2.0",
-    "@types/testing-library__user-event": "4.2.0",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react-swc": "^3.0.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
     "cross-env": "7.0.3",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
-    "jsdom": "21",
-    "node-fetch": "^3.3.1",
+    "happy-dom": "^13.6.2",
     "npm-run-all": "4.1.5",
-    "rollup-plugin-polyfill-node": "^0.12.0",
     "source-map-explorer": "2.5.2",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.2",
-    "vitest": "^0.31.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vite-plugin-node-polyfills": "^0.21.0",
+    "vitest": "^1.3.1",
     "yalc": "1.0.0-pre.53"
   },
   "scripts": {

diff --git a/packages/dev-frontend/src/App.test.tsx b/packages/dev-frontend/src/App.test.tsx
@@ -1,4 +1,6 @@
-import { render, fireEvent } from "@testing-library/react";
+import { expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { userEvent, PointerEventsCheckLevel } from "@testing-library/user-event";
 
 import { Decimal, LUSD_MINIMUM_NET_DEBT, Trove } from "@liquity/lib-base";
 
@@ -11,19 +13,25 @@ const trove = Trove.create(params);
  * Just a quick and dirty testcase to prove that the approach can work in our CI pipeline.
  */
 test("there's no smoke", async () => {
-  const { getByText, getByLabelText, findByText } = render(<App />);
+  render(<App />);
 
-  fireEvent.click(await findByText(/connect wallet/i));
-  fireEvent.click(getByText(/browser wallet/i));
+  await userEvent.click(await screen.findByText(/connect wallet/i));
 
-  expect(await findByText(/you can borrow lusd by opening a trove/i)).toBeInTheDocument();
+  // pointer-events check fails under happy-dom, for whatever reason
+  await userEvent.click(await screen.findByText(/browser wallet/i), {
+    pointerEventsCheck: PointerEventsCheckLevel.Never
+  });
 
-  fireEvent.click(getByText(/open trove/i));
-  fireEvent.click(getByLabelText(/collateral/i));
-  fireEvent.change(getByLabelText(/^collateral$/i), { target: { value: `${trove.collateral}` } });
-  fireEvent.click(getByLabelText(/^borrow$/i));
-  fireEvent.change(getByLabelText(/^borrow$/i), { target: { value: `${trove.debt}` } });
-  fireEvent.click(await findByText(/confirm/i));
+  expect(await screen.findByText(/you can borrow lusd by opening a trove/i)).toBeInTheDocument();
 
-  expect(await findByText(/adjust/i)).toBeInTheDocument();
+  await userEvent.click(screen.getByText(/open trove/i));
+  await userEvent.click(screen.getByLabelText(/collateral/i));
+  await userEvent.clear(screen.getByLabelText(/collateral/i));
+  await userEvent.type(screen.getByLabelText(/collateral/i), `${trove.collateral}`);
+  await userEvent.click(screen.getByLabelText(/borrow/i));
+  await userEvent.clear(screen.getByLabelText(/borrow/i));
+  await userEvent.type(screen.getByLabelText(/borrow/i), `${trove.debt}`);
+  await userEvent.click(await screen.findByText(/confirm/i));
+
+  expect(await screen.findByText(/adjust/i)).toBeInTheDocument();
 });
diff --git a/packages/dev-frontend/src/App.tsx b/packages/dev-frontend/src/App.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import { createClient, WagmiConfig } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider, createConfig, fallback, http } from "wagmi";
+import { injected } from "wagmi/connectors";
 import { mainnet, goerli, sepolia, localhost } from "wagmi/chains";
-import { ConnectKitProvider } from "connectkit";
-import { Flex, Heading, ThemeProvider, Paragraph, Link } from "theme-ui";
+import { ConnectKitProvider, getDefaultConfig, getDefaultConnectors } 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 +79,97 @@ const UnsupportedNetworkFallback: React.FC = () => (
   </Flex>
 );
 
+const queryClient = new QueryClient();
+
+const appName = "Liquity";
+const appDescription = "Decentralized borrowing protocol";
+
 const App = () => {
   const config = useAsyncValue(getConfig);
   const loader = <AppLoader />;
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeUIProvider theme={theme}>
       {config.loaded && (
-        <WagmiConfig
-          client={createClient(
-            getDefaultClient({
-              appName: "Liquity",
+        <WagmiProvider
+          config={createConfig(
+            getDefaultConfig({
+              appName,
+              appDescription,
+              walletConnectProjectId: config.value.walletConnectProjectId,
+
               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
+
+              connectors:
+                isDemoMode || import.meta.env.MODE === "test"
+                  ? [injected()]
+                  : getDefaultConnectors({
+                      app: {
+                        name: appName,
+                        description: appDescription
+                      },
+                      walletConnectProjectId: config.value.walletConnectProjectId
+                    }),
+
+              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()
+                ]),
+
+                [goerli.id]: fallback([
+                  ...(config.value.infuraApiKey
+                    ? [http(`https://goerli.infura.io/v3/${config.value.infuraApiKey}`)]
+                    : []),
+                  ...(config.value.alchemyApiKey
+                    ? [http(`https://eth-goerli.g.alchemy.com/v2/${config.value.alchemyApiKey}`)]
+                    : []),
+                  http()
+                ]),
+
+                [sepolia.id]: fallback([
+                  ...(config.value.infuraApiKey
+                    ? [http(`https://sepolia.infura.io/v3/${config.value.infuraApiKey}`)]
+                    : []),
+                  ...(config.value.alchemyApiKey
+                    ? [http(`https://eth-sepolia.g.alchemy.com/v2/${config.value.alchemyApiKey}`)]
+                    : []),
+                  http()
+                ]),
+
+                [localhost.id]: 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/LiquityFrontend.tsx b/packages/dev-frontend/src/LiquityFrontend.tsx
@@ -25,6 +25,7 @@ import { BondsProvider } from "./components/Bonds/context/BondsProvider";
 type LiquityFrontendProps = {
   loader?: React.ReactNode;
 };
+
 export const LiquityFrontend: React.FC<LiquityFrontendProps> = ({ loader }) => {
   const { account, provider, liquity } = useLiquity();
 

diff --git a/packages/dev-frontend/src/components/ActionDescription.tsx b/packages/dev-frontend/src/components/ActionDescription.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Text } from "theme-ui";
 
-export const ActionDescription: React.FC = ({ children }) => (
+export const ActionDescription: React.FC<React.PropsWithChildren> = ({ children }) => (
   <Box
     sx={{
       display: "flex",
@@ -20,6 +20,6 @@ export const ActionDescription: React.FC = ({ children }) => (
   </Box>
 );
 
-export const Amount: React.FC = ({ children }) => (
+export const Amount: React.FC<React.PropsWithChildren> = ({ children }) => (
   <Text sx={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{children}</Text>
 );
diff --git a/packages/dev-frontend/src/components/AppLoader.tsx b/packages/dev-frontend/src/components/AppLoader.tsx
@@ -2,7 +2,7 @@ import { Flex, Spinner, Heading } from "theme-ui";
 
 export const AppLoader = () => (
   <Flex sx={{ alignItems: "center", justifyContent: "center", height: "100vh" }}>
-    <Spinner sx={{ m: 2, color: "text" }} size="32px" />
+    <Spinner sx={{ m: 2, color: "text" }} size={32} />
     <Heading>Loading...</Heading>
   </Flex>
 );
diff --git a/packages/dev-frontend/src/components/Badge.tsx b/packages/dev-frontend/src/components/Badge.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Flex } from "theme-ui";
 
-export const Badge: React.FC = ({ children }) => {
+export const Badge: React.FC<React.PropsWithChildren> = ({ children }) => {
   return <Flex variant="layout.badge">{children}</Flex>;
 };
diff --git a/packages/dev-frontend/src/components/Bonds/context/BondAddressesContext.tsx b/packages/dev-frontend/src/components/Bonds/context/BondAddressesContext.tsx
@@ -33,7 +33,7 @@ export const useBondAddresses = (): Addresses => {
   return context;
 };
 
-export const BondAddressesProvider: React.FC = ({ children }) => {
+export const BondAddressesProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
   const chainId = useChainId();
 
   const addresses: Addresses =

diff --git a/packages/dev-frontend/src/components/Bonds/context/BondViewProvider.tsx b/packages/dev-frontend/src/components/Bonds/context/BondViewProvider.tsx
@@ -40,7 +40,7 @@ const transition = (view: BondView, event: BondEvent): BondView => {
 
 export const EXAMPLE_NFT = "./bonds/egg-nft.png";
 
-export const BondViewProvider: React.FC = props => {
+export const BondViewProvider: React.FC<React.PropsWithChildren> = props => {
   const { children } = props;
   const [view, setView] = useState<BondView>("IDLE");
   const viewRef = useRef<BondView>(view);

diff --git a/packages/dev-frontend/src/components/Bonds/context/BondsProvider.tsx b/packages/dev-frontend/src/components/Bonds/context/BondsProvider.tsx
@@ -1,7 +1,7 @@
 import { BondAddressesProvider } from "./BondAddressesContext";
 import { BondViewProvider } from "./BondViewProvider";
 
-export const BondsProvider: React.FC = ({ children }) => {
+export const BondsProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <BondAddressesProvider>
       <BondViewProvider>{children}</BondViewProvider>

diff --git a/packages/dev-frontend/src/components/Bonds/views/InfiniteEstimation.tsx b/packages/dev-frontend/src/components/Bonds/views/InfiniteEstimation.tsx
@@ -2,9 +2,9 @@ import { Decimal, Decimalish } from "@liquity/lib-base";
 import { InfoIcon } from "../../InfoIcon";
 import * as l from "../lexicon";
 
-type InfiniteEstimateProps = {
+type InfiniteEstimateProps = React.PropsWithChildren<{
   estimate: Decimalish;
-};
+}>;
 
 export const InfiniteEstimate: React.FC<InfiniteEstimateProps> = ({ estimate, children }) => {
   if (estimate.toString() !== Decimal.INFINITY.toString()) return <>{children ?? estimate}</>;

diff --git a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx
@@ -31,7 +31,7 @@ export const Cancel: React.FC = () => {
         </Button>
         <Button variant="primary" onClick={handleConfirmPressed} disabled={isProcessingTransaction}>
           {!isProcessingTransaction && <>Confirm</>}
-          {isProcessingTransaction && <Spinner size="28px" sx={{ color: "white" }} />}
+          {isProcessingTransaction && <Spinner size={28} sx={{ color: "white" }} />}
         </Button>
       </Flex>
     </>

diff --git a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx
@@ -31,7 +31,7 @@ export const Claim: React.FC = () => {
         </Button>
         <Button variant="primary" onClick={handleConfirmPressed} disabled={isProcessingTransaction}>
           {!isProcessingTransaction && <>Confirm</>}
-          {isProcessingTransaction && <Spinner size="28px" sx={{ color: "white" }} />}
+          {isProcessingTransaction && <Spinner size={28} sx={{ color: "white" }} />}
         </Button>
       </Flex>
     </>

diff --git a/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx b/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx
@@ -314,14 +314,14 @@ export const Details: React.FC<DetailsProps> = ({ onBack }) => {
           <Button onClick={handleApprovePressed} disabled={isApprovingOrConfirming}>
             {!isApprovingOrConfirming && <>Approve</>}
             {isApprovingOrConfirming && (
-              <Spinner size="28px" sx={{ color: "white", position: "absolute" }} />
+              <Spinner size={28} sx={{ color: "white", position: "absolute" }} />
             )}
           </Button>
         )}
         {isInfiniteBondApproved && (
           <Button onClick={handleConfirmPressed} disabled={isApprovingOrConfirming}>
             {!isApprovingOrConfirming && <>Confirm</>}
-            {isApprovingOrConfirming && <Spinner size="28px" sx={{ color: "white" }} />}
+            {isApprovingOrConfirming && <Spinner size={28} sx={{ color: "white" }} />}
           </Button>
         )}
       </Flex>

diff --git a/packages/dev-frontend/src/components/Bonds/views/creating/Information.tsx b/packages/dev-frontend/src/components/Bonds/views/creating/Information.tsx
@@ -16,7 +16,7 @@ import { useWizard } from "../../../Wizard/Context";
 import { useBondView } from "../../context/BondViewContext";
 import { Details } from "./Details";
 
-const InformationContainer: React.FC = ({ children }) => {
+const InformationContainer: React.FC<React.PropsWithChildren> = ({ children }) => {
   const { dispatchEvent } = useBondView();
   const handleDismiss = () => dispatchEvent("ABORT_PRESSED");