@multiplatform.one/web3 7.19.0 → 7.21.0

package/src/connectkit/components/ConnectModal/ConnectUsing.tsx

@@ -1,80 +1,29 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useState } from "react";
 
 import { useContext, contentVariants, Alert } from "@multiplatform.one/connectkit";
 import { useWallet } from "../../wallets/useWallets";
 
 import ConnectWithInjector from "./ConnectWithInjector";
-import ConnectWithQRCode from "./ConnectWithQRCode";
-
-const states = {
-  QRCODE: "qrcode",
-  INJECTOR: "injector",
-};
 
 const ConnectUsing = () => {
   const context = useContext();
   const wallet = useWallet(context.connector.id);
 
-  // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it.
-  // wallet non-EVM wallets are always injected/extension (no WalletConnect URI) → never QR.
-  const isQrCode =
-    (wallet?.ecosystem ?? "evm") === "evm" &&
-    !wallet?.isInstalled &&
-    wallet?.getWalletConnectDeeplink;
-
-  const [status, setStatus] = useState(isQrCode ? states.QRCODE : states.INJECTOR);
-
-  useEffect(() => {
-    // if no provider, change to qrcode
-    const checkProvider = async () => {
-      const res = await wallet?.connector.getProvider();
-      if (!res) {
-        setStatus(states.QRCODE);
-        setTimeout(context.triggerResize, 10); // delay required here for modal to resize
-      }
-    };
-    if (status === states.INJECTOR && (wallet?.ecosystem ?? "evm") === "evm") checkProvider();
-  }, []);
-
   if (!wallet) return <Alert>Connector not found {context.connector.id}</Alert>;
 
+  // Every connector runs its own flow: an extension, a wallet app deeplink, or the
+  // wallet SDK's own popup or QR. An unavailable one shows the install call to action.
   return (
     <AnimatePresence>
-      {status === states.QRCODE && (
-        <motion.div
-          key={states.QRCODE}
-          initial={"initial"}
-          animate={"animate"}
-          exit={"exit"}
-          variants={contentVariants}
-        >
-          <ConnectWithQRCode
-            switchConnectMethod={(id?: string) => {
-              //if (id) setId(id);
-              setStatus(states.INJECTOR);
-              setTimeout(context.triggerResize, 10); // delay required here for modal to resize
-            }}
-          />
-        </motion.div>
-      )}
-      {status === states.INJECTOR && (
-        <motion.div
-          key={states.INJECTOR}
-          initial={"initial"}
-          animate={"animate"}
-          exit={"exit"}
-          variants={contentVariants}
-        >
-          <ConnectWithInjector
-            switchConnectMethod={(id?: string) => {
-              //if (id) setId(id);
-              setStatus(states.QRCODE);
-              setTimeout(context.triggerResize, 10); // delay required here for modal to resize
-            }}
-          />
-        </motion.div>
-      )}
+      <motion.div
+        key="injector"
+        initial={"initial"}
+        animate={"animate"}
+        exit={"exit"}
+        variants={contentVariants}
+      >
+        <ConnectWithInjector />
+      </motion.div>
     </AnimatePresence>
   );
 };

package/src/connectkit/components/ConnectModal/ConnectWithInjector/index.tsx

@@ -26,7 +26,6 @@ import {
   CustomQRCode,
   detectBrowser,
   isMetaMaskConnector,
-  isWalletConnectConnector,
   useIsMobile,
   useLocales,
   useContext,
@@ -81,9 +80,8 @@ const contentVariants: Variants = {
 };
 
 const ConnectWithInjector: React.FC<{
-  switchConnectMethod: (id?: string) => void;
   forceState?: typeof states;
-}> = ({ switchConnectMethod, forceState }) => {
+}> = ({ forceState }) => {
   const { connect } = useConnect({
     mutation: {
       onMutate: (connector?: any) => {
@@ -147,11 +145,11 @@ const ConnectWithInjector: React.FC<{
 
   const [showTryAgainTooltip, setShowTryAgainTooltip] = useState(false);
 
-  // The MetaMask SDK's mobile deeplink (metamask://connect/mwp?p=...), captured
+  // MetaMask Connect's mobile deeplink (metamask://connect/mwp?p=...), captured
   // from its display_uri event so we can offer it as a real tap target (see the
-  // CONNECTING render below). If the SDK never emits the event — e.g. it threw
-  // during init — this stays undefined and no tap target renders, so the modal
-  // sits on "Open <wallet>" forever; that failure mode is upstream of here.
+  // CONNECTING render below). If it never emits the event — e.g. it threw during
+  // init — this stays undefined and no tap target renders, so the modal sits on
+  // "Open <wallet>" forever; that failure mode is upstream of here.
   const [sdkDeeplink, setSdkDeeplink] = useState<string | undefined>(undefined);
   useEffect(() => {
     const connector = wallet?.connector;
@@ -178,7 +176,7 @@ const ConnectWithInjector: React.FC<{
 
   const browser = detectBrowser();
   const isMobile = useIsMobile();
-  // Tauri (and similar) shells: MetaMask SDK runs headless and emits display_uri;
+  // Tauri (and similar) shells: MetaMask Connect runs headless and emits display_uri;
   // render that URI as a QR here. Mobile keeps the anchor-tap deeplink path.
   const showEmbeddedDesktopMetaMaskQr =
     !isMobile &&
@@ -273,22 +271,6 @@ const ConnectWithInjector: React.FC<{
     );
   }
 
-  // TODO: Make this more generic
-  if (isWalletConnectConnector(wallet?.connector.id)) {
-    return (
-      <PageContent>
-        <Container>
-          <ModalHeading>Invalid State</ModalHeading>
-          <ModalContent>
-            <Alert>
-              WalletConnect does not have an injection flow. This state should never happen.
-            </Alert>
-          </ModalContent>
-        </Container>
-      </PageContent>
-    );
-  }
-
   return (
     <PageContent>
       <Container>
@@ -385,22 +367,6 @@ const ConnectWithInjector: React.FC<{
                   </ModalH1>
                   <ModalBody>{locales.injectionScreen_failed_p}</ModalBody>
                 </ModalContent>
-
-                {/* Reason: Coinbase Wallet does not expose a QRURI when extension is installed */}
-                {/*
-                {wallet?.getWalletConnectDeeplink &&
-                  wallet.id !== 'coinbaseWalletSDK' && (
-                    <>
-                      <OrDivider />
-                      <Button
-                        icon={<Scan />}
-                        onClick={() => switchConnectMethod(id)}
-                      >
-                        {locales.scanTheQRCode}
-                      </Button>
-                    </>
-                  )}
-                   */}
               </Content>
             )}
             {status === states.REJECTED && (
@@ -415,22 +381,6 @@ const ConnectWithInjector: React.FC<{
                   <ModalH1>{locales.injectionScreen_rejected_h1}</ModalH1>
                   <ModalBody>{locales.injectionScreen_rejected_p}</ModalBody>
                 </ModalContent>
-
-                {/* Reason: Coinbase Wallet does not expose a QRURI when extension is installed */}
-                {/*
-                {wallet?.getWalletConnectDeeplink &&
-                  wallet.id !== 'coinbaseWalletSDK' && (
-                    <>
-                      <OrDivider />
-                      <Button
-                        icon={<Scan />}
-                        onClick={() => switchConnectMethod(id)}
-                      >
-                        {locales.scanTheQRCode}
-                      </Button>
-                    </>
-                  )}
-                   */}
               </Content>
             )}
             {(status === states.CONNECTING || status === states.EXPIRING) && (
@@ -479,15 +429,15 @@ const ConnectWithInjector: React.FC<{
                 {showEmbeddedDesktopMetaMaskQr && (
                   <CustomQRCode value={deeplink} image={walletInfo.icon} imagePosition="center" />
                 )}
-                {/* The SDK auto-opens its deeplink, but browsers drop external-
-                    protocol navigations whose user activation expired while the
-                    SDK did its async setup (chunk import + relay round-trip) —
+                {/* MetaMask Connect auto-opens its deeplink, but browsers drop external-
+                    protocol navigations whose user activation expired while it
+                    did its async setup (chunk import + relay round-trip) —
                     silently, on slow networks especially. And a JS navigation
                     (location.href) to a universal link NEVER app-switches on
                     iOS: WebKit only follows universal links into the app from a
                     genuine same-tab anchor tap; JS-set locations land on the
                     metamask.app.link web fallback instead (observed inside
-                    ASWebAuthenticationSession). So once the SDK emits
+                    ASWebAuthenticationSession). So once it emits
                     display_uri we render it as a REAL anchor — same-tab,
                     because auth sheets can't open new tabs. */}
                 {isMobile && isMetaMaskConnector(wallet?.connector.id) && deeplink && (
@@ -557,16 +507,6 @@ const ConnectWithInjector: React.FC<{
                       <ModalH1>{locales.injectionScreen_install_h1}</ModalH1>
                       <ModalBody>{locales.injectionScreen_install_p}</ModalBody>
                     </ModalContent>
-                    {/**
-                    {(wallet.getWalletConnectDeeplink &&
-                    (!wallet.isInstalled && extensionUrl)) && <OrDivider />}
-
-                    {wallet.getWalletConnectDeeplink && (
-                      <Button icon={<Scan />} onClick={switchConnectMethod}>
-                        {locales.scanTheQRCode}
-                      </Button>
-                    )}
-                    */}
                     {!wallet.isInstalled && extensionUrl && (
                       <Button href={extensionUrl} icon={<BrowserIcon />}>
                         {locales.installTheExtension}

package/src/connectkit/components/ConnectModal/demo.tsx

@@ -17,11 +17,9 @@ import ConnectUsing from "./ConnectUsing";
 import DownloadApp from "../Pages/DownloadApp";
 import Profile from "../Pages/Profile";
 import SwitchNetworks from "../Pages/SwitchNetworks";
-import MobileConnectors from "../Pages/MobileConnectors";
 import SignInWithEthereum from "../Pages/SignInWithEthereum";
 
 import { ConnectKitButton } from "../ConnectButton";
-import { getAppName } from "../../defaultConfig";
 import { ConnectKitThemeProvider, styled, useModalState } from "@multiplatform.one/connectkit";
 import { keyframes } from "styled-components";
 import { Web3ContextProvider } from "../contexts/web3";
@@ -135,7 +133,6 @@ const ConnectModal: React.FC<{
     about: <About />,
     download: <DownloadApp />,
     connectors: <Connectors />,
-    mobileConnectors: <MobileConnectors />,
     connect: <ConnectUsing />,
     profile: <Profile closeModal={() => setIsOpen(false)} />,
     switchNetworks: <SwitchNetworks />,
@@ -203,23 +200,8 @@ const ConnectModal: React.FC<{
     }
   }, [isConnected]);
 
-  /* When pulling data into WalletConnect, it prioritises the og:title tag over the title tag */
-  useEffect(() => {
-    const appName = getAppName();
-    if (!appName || (!open && !inline)) return;
-
-    const title = document.createElement("meta");
-    title.setAttribute("property", "og:title");
-    title.setAttribute("content", appName);
-    document.head.prepend(title);
-
-    return () => {
-      document.head.removeChild(title);
-    };
-  }, [open, inline]);
-
   return (
-    <Web3ContextProvider enabled={isOpen}>
+    <Web3ContextProvider>
       <ConnectKitThemeProvider theme={theme} customTheme={customTheme} mode={mode}>
         <Container ref={ref}>
           {inline && onClose && (

package/src/connectkit/components/contexts/web3/index.tsx

@@ -8,13 +8,9 @@ import { Address, Chain } from "viem";
 import { useAccount } from "wagmi";
 
 import { useChains } from "../../../hooks/useChains";
-import { useWalletConnectUri } from "../../../hooks/connectors/useWalletConnectUri";
 import { useChainIsSupported } from "../../../hooks/useChainIsSupported";
 
 type Web3Context = {
-  connect: {
-    getUri: (id?: string) => string;
-  };
   dapp: {
     chains: Chain[];
   };
@@ -26,36 +22,18 @@ type Web3Context = {
 };
 
 const Web3Context = React.createContext({
-  connect: {
-    getUri: () => "",
-  },
   dapp: {
     chains: [],
   },
   account: undefined,
 } as Web3Context);
 
-export const Web3ContextProvider = ({
-  enabled,
-  children,
-}: {
-  enabled?: boolean;
-  children: React.ReactNode;
-}) => {
-  const { uri: walletConnectUri } = useWalletConnectUri({
-    enabled,
-  });
-
+export const Web3ContextProvider = ({ children }: { children: React.ReactNode }) => {
   const { address: currentAddress, chain } = useAccount();
   const chainIsSupported = useChainIsSupported(chain?.id);
   const chains = useChains();
 
   const value = {
-    connect: {
-      getUri: (id?: string) => {
-        return walletConnectUri;
-      },
-    },
     dapp: {
       chains,
     },

package/src/connectkit/connectors/aaveAccountConnector.spec.ts

@@ -0,0 +1,87 @@
+// @vitest-environment happy-dom
+import { createConfig, createStorage, http } from "@wagmi/core";
+import { mainnet } from "viem/chains";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { providerBuilt } = vi.hoisted(() => ({ providerBuilt: vi.fn() }));
+
+// The real module's constructor mounts Aave's iframe and starts AaveAccountSdk.connect().
+// Its own aaveAccountConnector() builds that provider as soon as it is called, which
+// is what the pre-fix defaultConnectors used.
+vi.mock("@aave/account", async () => {
+  const { injected } = await import("@wagmi/connectors/injected");
+  class EthereumProvider {
+    constructor(options?: unknown) {
+      providerBuilt(options);
+    }
+    request = vi.fn(async ({ method }: { method: string }) =>
+      method === "eth_chainId" ? "0x1" : ["0x0000000000000000000000000000000000000001"],
+    );
+    on = vi.fn();
+    removeListener = vi.fn();
+  }
+  return {
+    EthereumProvider,
+    aaveAccountConnector: (options?: unknown) => {
+      const provider = new EthereumProvider(options);
+      return injected({
+        shimDisconnect: false,
+        target: () => ({
+          id: "aaveAccountProvider",
+          name: "Aave Account",
+          provider: provider as never,
+        }),
+      });
+    },
+  };
+});
+vi.mock("@metamask/connect-evm", () => ({ createEVMClient: vi.fn(() => new Promise(() => {})) }));
+
+import getDefaultConfig from "../defaultConfig";
+import { aaveAccountConnector, aaveAccountConnectorId } from "./aaveAccountConnector";
+
+const memory = () => {
+  const store = new Map<string, string>();
+  return {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => void store.set(key, value),
+    removeItem: (key: string) => void store.delete(key),
+  };
+};
+
+describe("Aave Account connector", () => {
+  beforeEach(() => providerBuilt.mockClear());
+
+  it("is off by default in getDefaultConfig", () => {
+    const config = createConfig(getDefaultConfig({ appName: "test", chains: [mainnet] }));
+    expect(config.connectors.some((c) => c.id === aaveAccountConnectorId)).toBe(false);
+  });
+
+  it("builds no Aave provider when a config opts in, until the user connects", async () => {
+    const config = createConfig({
+      ...getDefaultConfig({ appName: "test", chains: [mainnet], enableAaveAccount: true }),
+      storage: createStorage({ storage: memory() }),
+    });
+    const aave = config.connectors.find((c) => c.id === aaveAccountConnectorId)!;
+    expect(aave).toBeDefined();
+    expect(await aave.getProvider()).toBeUndefined();
+    expect(await aave.isAuthorized()).toBe(false);
+    expect(providerBuilt).not.toHaveBeenCalled();
+
+    await aave.connect();
+    expect(providerBuilt).toHaveBeenCalledOnce();
+  });
+
+  it("builds the provider to reconnect when Aave Account was the last connector", async () => {
+    const storage = createStorage({ storage: memory() });
+    await storage.setItem("recentConnectorId", aaveAccountConnectorId);
+    const config = createConfig({
+      chains: [mainnet],
+      connectors: [aaveAccountConnector()],
+      transports: { [mainnet.id]: http() },
+      storage,
+    });
+    expect(await config.connectors[0].getProvider()).toBeDefined();
+    expect(providerBuilt).toHaveBeenCalledOnce();
+  });
+});

package/src/connectkit/connectors/aaveAccountConnector.ts

@@ -0,0 +1,43 @@
+// @aave/account's own aaveAccountConnector() builds its EthereumProvider while the
+// wagmi config is built. That constructor mounts Aave's hidden iframe and calls
+// AaveAccountSdk.connect() on every page load, and when the connect does not
+// finish the SDK rejects unhandled: "Aave Account is not connected" on every
+// Keycloak login page (MPO-378). This builds the provider only when the user picks
+// Aave Account, or when wagmi reconnects the Aave Account it connected last.
+import { EthereumProvider, type EthereumProviderOptions } from "@aave/account";
+import { injected } from "@wagmi/connectors/injected";
+import type { CreateConnectorFn } from "wagmi";
+
+export const aaveAccountConnectorId = "aaveAccountProvider";
+
+export function aaveAccountConnector(options?: EthereumProviderOptions): CreateConnectorFn {
+  let provider: EthereumProvider | undefined;
+  const ensureProvider = () => (provider ??= new EthereumProvider(options));
+  const base = injected({
+    shimDisconnect: false,
+    target: () => ({
+      id: aaveAccountConnectorId,
+      name: "Aave Account",
+      provider: () => provider as never,
+    }),
+  });
+
+  return (config) => {
+    const connector = base(config);
+    return {
+      ...connector,
+      async connect(parameters) {
+        ensureProvider();
+        return connector.connect.call(this, parameters);
+      },
+      async getProvider(parameters) {
+        if (
+          !provider &&
+          (await config.storage?.getItem("recentConnectorId")) === aaveAccountConnectorId
+        )
+          ensureProvider();
+        return connector.getProvider.call(this, parameters);
+      },
+    } as ReturnType<typeof base>;
+  };
+}

package/src/connectkit/connectors/embeddedDesktop.spec.ts

@@ -23,21 +23,21 @@ describe("metaMaskOptionsForEmbeddedDesktop", () => {
     window.open = originalOpen;
   });
 
-  it("disables deeplink navigation and SDK modal", () => {
+  it("disables deeplink navigation and the MetaMask Connect modal", () => {
     const opts = metaMaskOptionsForEmbeddedDesktop();
     expect(opts.useDeeplink).toBe(false);
     expect(opts.headless).toBe(true);
   });
 
-  it("openDeeplink opens https in a new window and ignores custom schemes", () => {
+  it("preferredOpenLink opens https in a new window and ignores custom schemes", () => {
     const open = vi.fn();
     window.open = open;
-    const { openDeeplink } = metaMaskOptionsForEmbeddedDesktop();
+    const { preferredOpenLink } = metaMaskOptionsForEmbeddedDesktop();
 
-    openDeeplink("metamask://connect?channelId=abc");
+    preferredOpenLink("metamask://connect?channelId=abc");
     expect(open).not.toHaveBeenCalled();
 
-    openDeeplink("https://metamask.app.link/connect?channelId=abc");
+    preferredOpenLink("https://metamask.app.link/connect?channelId=abc");
     expect(open).toHaveBeenCalledWith(
       "https://metamask.app.link/connect?channelId=abc",
       "_blank",

package/src/connectkit/connectors/embeddedDesktop.ts

@@ -1,6 +1,6 @@
 /**
  * Tauri (and similar) desktop shells load the *web* bundle inside a native
- * WebView. Browser extensions never inject there, so MetaMask must use the SDK
+ * WebView. Browser extensions never inject there, so MetaMask must use the
  * remote/QR path — never `window.location.href = metamask://…`, which would
  * navigate the whole WebView away from the app.
  *
@@ -22,21 +22,21 @@ export function isEmbeddedDesktopWebview(
 export type MetaMaskEmbeddedDesktopOptions = {
   /** Prefer https://metamask.app.link over metamask:// in the QR payload. */
   useDeeplink: false;
-  /** Suppress SDK InstallModal custom-elements (WKWebView-hostile); ConnectKit renders QR. */
+  /** Suppress MetaMask Connect's install modal (WKWebView-hostile); ConnectKit renders QR. */
   headless: true;
   /**
    * Never assign location.href for custom schemes. https universal links may
    * open in the system browser via window.open; custom schemes are ignored.
    */
-  openDeeplink: (url: string) => void;
+  preferredOpenLink: (url: string) => void;
 };
 
-/** MetaMask SDK options that are safe inside Tauri/WebView2/WKWebView. */
+/** MetaMask Connect options that are safe inside Tauri/WebView2/WKWebView. */
 export function metaMaskOptionsForEmbeddedDesktop(): MetaMaskEmbeddedDesktopOptions {
   return {
     useDeeplink: false,
     headless: true,
-    openDeeplink: (url: string) => {
+    preferredOpenLink: (url: string) => {
       if (typeof window === "undefined") return;
       // Custom schemes (metamask://) must not navigate the WebView.
       if (!/^https?:\/\//i.test(url)) return;