App: wallet connection changes (#850)

- Move from RainbowKit to ConnectKit, which seems to improve the WalletConnect reliability.
- The Safe Status response validation is now less strict.

Also:

- Borrow tx flow: the back link now redirects to the LST that was set

frontend/app/next.config.js

@@ -30,8 +30,8 @@ export default withBundleAnalyzer({
     CONTRACTS_COMMIT_HASH_FROM_BUILD,
   },
   webpack: (config) => {
-    // required for rainbowkit
-    config.externals.push("pino-pretty", "lokijs", "encoding");
+    // WalletConnect 2.0 imports these
+    config.resolve.fallback = { fs: false, net: false, tls: false };
     return config;
   },
   eslint: {

frontend/app/package.json

@@ -24,13 +24,13 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@liquity2/uikit": "workspace:*",
     "@next/bundle-analyzer": "^15.1.4",
-    "@rainbow-me/rainbowkit": "^2.2.3",
     "@react-spring/web": "^9.7.5",
     "@tanstack/react-query": "^5.64.1",
     "@vercel/analytics": "^1.4.1",
     "@wagmi/core": "^2.16.4",
     "abitype": "^1.0.8",
     "blo": "^1.2.0",
+    "connectkit": "^1.8.2",
     "dnum": "^2.14.0",
     "geist": "^1.3.1",
     "next": "^14.2.23",

frontend/app/src/comps/AppLayout/AccountButton.tsx

@@ -1,78 +1,95 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 
 import content from "@/src/content";
 import { useDemoMode } from "@/src/demo-mode";
-import { useAccount } from "@/src/services/Ethereum";
 import { css } from "@/styled-system/css";
 import { Button, IconAccount, shortenAddress, ShowAfter } from "@liquity2/uikit";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { a, useTransition } from "@react-spring/web";
+import { ConnectKitButton } from "connectkit";
 import { match, P } from "ts-pattern";
 import { MenuItem } from "./MenuItem";
 
 export function AccountButton() {
-  const account = useAccount();
   const demoMode = useDemoMode();
-
   if (demoMode.enabled) {
-    return <ButtonDemoMode />;
+    return <DemoModeAccountButton />;
   }
-
   return (
-    <ConnectButton.Custom>
-      {({ chain, openChainModal, openConnectModal }) => {
-        return match({ account, chain })
-          // wrong network
-          .with(
-            { chain: { unsupported: true } },
-            () => (
-              <Button
-                mode="primary"
-                label={content.accountButton.wrongNetwork}
-                onClick={openChainModal}
-              />
-            ),
-          )
-          // connected
-          .with(
-            { account: { address: P.nonNullable } },
-            ({ account }) => (
-              <ButtonConnected
-                label={account.ensName ?? shortenAddress(account.address, 3)}
-                onClick={account.disconnect}
-                title={account.address}
-              />
-            ),
-          )
-          // connecting
-          .with(
-            { account: { status: "connecting" } },
-            () => (
-              <div>
-                <ShowAfter delay={500}>
-                  <ButtonConnected
-                    label="connecting…"
-                    onClick={() => {
-                      account.disconnect();
-                    }}
-                  />
-                </ShowAfter>
-              </div>
-            ),
-          )
-          // disconnected
-          .otherwise(() => (
-            <Button
-              mode="primary"
-              label={content.accountButton.connectAccount}
-              onClick={openConnectModal}
-            />
-          ));
-      }}
-    </ConnectButton.Custom>
+    <ShowAfter delay={500}>
+      <ConnectKitButton.Custom>
+        {(props) => <CKButton {...props} />}
+      </ConnectKitButton.Custom>
+    </ShowAfter>
   );
 }
 
-function ButtonDemoMode() {
+function CKButton({
+  chain,
+  isConnected,
+  isConnecting,
+  address,
+  ensName,
+  show,
+}: Parameters<
+  NonNullable<
+    ComponentPropsWithRef<
+      typeof ConnectKitButton.Custom
+    >["children"]
+  >
+>[0]) {
+  const status = match({ chain, isConnected, isConnecting, address })
+    .returnType<
+      | { mode: "connected"; address: `0x${string}` }
+      | { mode: "connecting" | "disconnected" | "unsupported"; address?: never }
+    >()
+    .with(
+      P.union(
+        { chain: { unsupported: true } },
+        { isConnected: true, chain: P.nullish },
+      ),
+      () => ({ mode: "unsupported" }),
+    )
+    .with({ isConnected: true, address: P.nonNullable }, ({ address }) => ({
+      address,
+      mode: "connected",
+    }))
+    .with({ isConnecting: true }, () => ({ mode: "connecting" }))
+    .otherwise(() => ({ mode: "disconnected" }));
+
+  const transition = useTransition(status, {
+    keys: ({ mode }) => String(mode === "connected"),
+    from: { opacity: 0, transform: "scale(0.9)" },
+    enter: { opacity: 1, transform: "scale(1)" },
+    leave: { opacity: 0, immediate: true },
+    config: { mass: 1, tension: 2400, friction: 80 },
+  });
+
+  return transition((spring, { mode, address }) => (
+    <a.div style={spring}>
+      {mode === "connected"
+        ? (
+          <ButtonConnected
+            label={ensName ?? shortenAddress(address, 3)}
+            onClick={show}
+            title={address}
+          />
+        )
+        : (
+          <Button
+            mode="primary"
+            label={mode === "connecting"
+              ? "Connecting…"
+              : mode === "unsupported"
+              ? content.accountButton.wrongNetwork
+              : content.accountButton.connectAccount}
+            onClick={show}
+          />
+        )}
+    </a.div>
+  ));
+}
+
+function DemoModeAccountButton() {
   const { account, updateAccountConnected } = useDemoMode();
   const onClick = () => {
     updateAccountConnected(!account.isConnected);
@@ -88,7 +105,7 @@ function ButtonConnected({
   title,
 }: {
   label: ReactNode;
-  onClick: () => void;
+  onClick?: () => void;
   title?: string;
 }) {
   return (

frontend/app/src/comps/AppLayout/BottomBar.tsx

@@ -7,8 +7,8 @@ import { Amount } from "@/src/comps/Amount/Amount";
 import { Logo } from "@/src/comps/Logo/Logo";
 import { ACCOUNT_SCREEN } from "@/src/env";
 import { useLiquityStats } from "@/src/liquity-utils";
-import { useAccount } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { AnchorTextButton, HFlex, shortenAddress, TextButton, TokenIcon } from "@liquity2/uikit";
 import { blo } from "blo";

frontend/app/src/comps/Blocking/Blocking.tsx

@@ -3,8 +3,8 @@
 import type { ReactNode } from "react";
 
 import { BLOCKING_LIST, BLOCKING_VPNAPI } from "@/src/env";
-import { useAccount } from "@/src/services/Ethereum";
 import type { Address } from "@/src/types";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { useQuery } from "@tanstack/react-query";
 import * as v from "valibot";

frontend/app/src/comps/ConnectWarningBox/ConnectWarningBox.tsx

@@ -1,4 +1,4 @@
-import { useAccount } from "@/src/services/Ethereum";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { TextButton } from "@liquity2/uikit";
 

frontend/app/src/comps/StakePositionSummary/StakePositionSummary.tsx

@@ -5,8 +5,8 @@ import { useAppear } from "@/src/anim-utils";
 import { Amount } from "@/src/comps/Amount/Amount";
 import { TagPreview } from "@/src/comps/TagPreview/TagPreview";
 import { fmtnum } from "@/src/formatting";
-import { useAccount } from "@/src/services/Ethereum";
 import { useGovernanceStats, useGovernanceUser } from "@/src/subgraph-hooks";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { HFlex, IconStake, InfoTooltip, TokenIcon, useRaf } from "@liquity2/uikit";
 import { a } from "@react-spring/web";

frontend/app/src/content.tsx

@@ -6,6 +6,14 @@ import type { ReactNode as N } from "react";
 export default {
   // Used in the top bar and other places
   appName: "Liquity V2",
+  appDescription: `
+    Liquity V2 is a new borrowing protocol that lets users
+    deposit ETH or LSTs as collateral and mint the stablecoin BOLD.
+  `,
+  appUrl: "https://www.liquity.org/",
+  appIcon: (
+    typeof window === "undefined" ? "" : window.location.origin
+  ) + "/favicon.svg",
 
   // Menu bar
   menu: {

frontend/app/src/liquity-leverage.ts

@@ -6,9 +6,9 @@ import { getProtocolContract } from "@/src/contracts";
 import { dnum18 } from "@/src/dnum-utils";
 import { getBranch } from "@/src/liquity-utils";
 import { useDebouncedQueryKey } from "@/src/react-utils";
-import { useWagmiConfig } from "@/src/services/Ethereum";
 import { useQuery } from "@tanstack/react-query";
 import * as dn from "dnum";
+import { useConfig as useWagmiConfig } from "wagmi";
 import { readContract, readContracts } from "wagmi/actions";
 
 const DECIMAL_PRECISION = 10n ** 18n;

frontend/app/src/safe-utils.ts

@@ -38,13 +38,8 @@ export async function getSafeTransaction(safeTxHash: string): Promise<
 
 export const SafeStatusSchema = v.object({
   address: vAddress(),
-  nonce: v.number(),
   threshold: v.number(),
   owners: v.array(vAddress()),
-  masterCopy: vAddress(),
-  modules: v.array(vAddress()),
-  fallbackHandler: vAddress(),
-  guard: vAddress(),
   version: v.string(),
 });
 

frontend/app/src/screens/AccountScreen/AccountScreen.tsx

@@ -10,7 +10,7 @@ import { getBranchContract, getProtocolContract } from "@/src/contracts";
 import { CHAIN_ID } from "@/src/env";
 import { fmtnum } from "@/src/formatting";
 import { getBranches } from "@/src/liquity-utils";
-import { useAccount, useBalance } from "@/src/services/Ethereum";
+import { useAccount, useBalance } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import {
   addressesEqual,

frontend/app/src/screens/BorrowScreen/BorrowScreen.tsx

@@ -21,11 +21,11 @@ import { useInputFieldValue } from "@/src/form-utils";
 import { fmtnum } from "@/src/formatting";
 import { getLiquidationRisk, getLoanDetails, getLtv } from "@/src/liquity-math";
 import { getBranch, getBranches, getCollToken } from "@/src/liquity-utils";
-import { useAccount, useBalance } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
 import { useTransactionFlow } from "@/src/services/TransactionFlow";
 import { useNextOwnerIndex } from "@/src/subgraph-hooks";
 import { infoTooltipProps } from "@/src/uikit-utils";
+import { useAccount, useBalance } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import {
   Button,
@@ -390,7 +390,10 @@ export function BorrowScreen() {
               ) {
                 txFlow.start({
                   flowId: "openBorrowPosition",
-                  backLink: ["/borrow", "Back to editing"],
+                  backLink: [
+                    `/borrow/${collSymbol.toLowerCase()}`,
+                    "Back to editing",
+                  ],
                   successLink: ["/", "Go to the Dashboard"],
                   successMessage: "The position has been created successfully.",
 

frontend/app/src/screens/EarnPoolScreen/EarnPoolScreen.tsx

@@ -6,7 +6,7 @@ import { ScreenCard } from "@/src/comps/Screen/ScreenCard";
 import { Spinner } from "@/src/comps/Spinner/Spinner";
 import content from "@/src/content";
 import { getBranch, isEarnPositionActive, useEarnPool, useEarnPosition } from "@/src/liquity-utils";
-import { useAccount } from "@/src/services/Ethereum";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { HFlex, IconEarn, isCollateralSymbol, Tabs } from "@liquity2/uikit";
 import { a, useTransition } from "@react-spring/web";

frontend/app/src/screens/EarnPoolScreen/PanelClaimRewards.tsx

@@ -7,9 +7,9 @@ import { ConnectWarningBox } from "@/src/comps/ConnectWarningBox/ConnectWarningB
 import content from "@/src/content";
 import { DNUM_0 } from "@/src/dnum-utils";
 import { getCollToken } from "@/src/liquity-utils";
-import { useAccount } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
 import { useTransactionFlow } from "@/src/services/TransactionFlow";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { Button, HFlex, TokenIcon, VFlex } from "@liquity2/uikit";
 import * as dn from "dnum";

frontend/app/src/screens/EarnPoolScreen/PanelUpdateDeposit.tsx

@@ -10,9 +10,9 @@ import { DNUM_0, dnumMax } from "@/src/dnum-utils";
 import { parseInputFloat } from "@/src/form-utils";
 import { fmtnum } from "@/src/formatting";
 import { getCollToken, isEarnPositionActive } from "@/src/liquity-utils";
-import { useAccount, useBalance } from "@/src/services/Ethereum";
 import { useTransactionFlow } from "@/src/services/TransactionFlow";
 import { infoTooltipProps } from "@/src/uikit-utils";
+import { useAccount, useBalance } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { Button, Checkbox, HFlex, InfoTooltip, InputField, TextButton, TokenIcon } from "@liquity2/uikit";
 import * as dn from "dnum";

frontend/app/src/screens/EarnPoolsListScreen/EarnPoolsListScreen.tsx

@@ -6,7 +6,7 @@ import { EarnPositionSummary } from "@/src/comps/EarnPositionSummary/EarnPositio
 import { Screen } from "@/src/comps/Screen/Screen";
 import content from "@/src/content";
 import { getBranches, useEarnPosition } from "@/src/liquity-utils";
-import { useAccount } from "@/src/services/Ethereum";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { TokenIcon } from "@liquity2/uikit";
 import { a, useTransition } from "@react-spring/web";

frontend/app/src/screens/HomeScreen/HomeScreen.tsx

@@ -13,7 +13,7 @@ import {
   useBranchDebt,
   useEarnPool,
 } from "@/src/liquity-utils";
-import { useAccount } from "@/src/services/Ethereum";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { AnchorTextButton, IconBorrow, IconEarn, TokenIcon } from "@liquity2/uikit";
 import * as dn from "dnum";

frontend/app/src/screens/LeverageScreen/LeverageScreen.tsx

@@ -25,11 +25,11 @@ import { fmtnum } from "@/src/formatting";
 import { useCheckLeverageSlippage } from "@/src/liquity-leverage";
 import { getRedemptionRisk } from "@/src/liquity-math";
 import { getBranch, getBranches, getCollToken } from "@/src/liquity-utils";
-import { useAccount, useBalance } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
 import { useTransactionFlow } from "@/src/services/TransactionFlow";
 import { useNextOwnerIndex } from "@/src/subgraph-hooks";
 import { infoTooltipProps } from "@/src/uikit-utils";
+import { useAccount, useBalance } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import {
   ADDRESS_ZERO,

frontend/app/src/screens/LoanScreen/LoanScreen.tsx

@@ -9,11 +9,11 @@ import { getBranchContract } from "@/src/contracts";
 import { dnum18 } from "@/src/dnum-utils";
 import { fmtnum } from "@/src/formatting";
 import { getCollToken, getPrefixedTroveId, parsePrefixedTroveId, useLoan } from "@/src/liquity-utils";
-import { useAccount } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
 import { useStoredState } from "@/src/services/StoredState";
 import { useTransactionFlow } from "@/src/services/TransactionFlow";
 import { isPrefixedtroveId } from "@/src/types";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { addressesEqual, Button, InfoTooltip, Tabs, TokenIcon } from "@liquity2/uikit";
 import { a, useTransition } from "@react-spring/web";

frontend/app/src/screens/LoanScreen/PanelClosePosition.tsx

@@ -6,9 +6,9 @@ import { Field } from "@/src/comps/Field/Field";
 import content from "@/src/content";
 import { fmtnum } from "@/src/formatting";
 import { getBranch, getCollToken } from "@/src/liquity-utils";
-import { useAccount, useBalance } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
 import { useTransactionFlow } from "@/src/services/TransactionFlow";
+import { useAccount, useBalance } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { addressesEqual, Button, Dropdown, TokenIcon, TOKENS_BY_SYMBOL, VFlex } from "@liquity2/uikit";
 import * as dn from "dnum";

frontend/app/src/screens/LoanScreen/PanelInterestRate.tsx

@@ -13,10 +13,10 @@ import { fmtnum, formatRelativeTime } from "@/src/formatting";
 import { formatRisk } from "@/src/formatting";
 import { getLoanDetails } from "@/src/liquity-math";
 import { getBranch, getCollToken, useTroveRateUpdateCooldown } from "@/src/liquity-utils";
-import { useAccount } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
 import { useTransactionFlow } from "@/src/services/TransactionFlow";
 import { infoTooltipProps, riskLevelToStatusMode } from "@/src/uikit-utils";
+import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
 import { addressesEqual, Button, HFlex, IconSuggestion, InfoTooltip, StatusDot } from "@liquity2/uikit";
 import * as dn from "dnum";