@coinbase/cdp-wagmi 0.0.0 → 0.0.5

package/README.md

@@ -0,0 +1,221 @@
+This package provides an embedded wallet connector for [Wagmi](https://wagmi.sh), which
+is a commonly used React Hooks library for Ethereum.
+
+Developers who use Wagmi in their application should be able to use the provided
+{@link createCDPEmbeddedWalletConnector} out of the box to integrate CDP embedded wallets
+into their existing environment.
+
+## Quickstart
+
+This guide will help you get started with `@coinbase/cdp-wagmi`. You'll learn how to install the package, set up the provider, and render your first component.
+
+### Installation
+
+First, add the package to your project using your preferred package manager.
+
+```bash
+# With pnpm
+pnpm add @coinbase/cdp-wagmi @coinbase/cdp-core @tanstack/react-query viem wagmi
+
+# With yarn
+yarn add @coinbase/cdp-wagmi @coinbase/cdp-core @tanstack/react-query viem wagmi
+
+# With npm
+npm install @coinbase/cdp-wagmi @coinbase/cdp-core @tanstack/react-query viem wagmi
+```
+
+### Gather your CDP Project information
+
+1. Sign in or create an account on the [CDP Portal](https://portal.cdp.coinbase.com)
+2. On your dashboard, select a project from the dropdown at the at the top, and copy the Project ID
+
+### Setup Provider
+
+Next, you must configure your WagmiProvider with the `CDPEmbeddedWalletConnector`.
+
+`CDPEmbeddedWalletConnector` provides the necessary context Wagmi to work correctly with
+the CDP Frontend SDK. The `providerConfig` must be provided and is responsible for
+configuring the EIP-1193 provider's transports which are used to broadcast non-Base
+transactions.
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App'; // Your main App component
+import { Config }from '@coinbase/cdp-core';
+import { createCDPEmbeddedWalletConector } from '@coinbase/cdp-wagmi';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { http }from "viem";
+import { baseSepolia, base } from 'viem/chains';
+import { WagmiProvider, createConfig, http } from 'wagmi';
+
+// Your CDP config
+const cdpConfig: Config = {
+  projectId: "your-project-id", // Copy your Project ID here.
+}
+
+const connector = createCDPEmbeddedWalletConnector({
+ cdpConfig: cdpConfig,
+ providerConfig:{
+  chains: [base, baseSepolia],
+  transports: {
+    [base.id]: http(),
+    [baseSepolia.id]: http()
+  }
+ }
+});
+
+const wagmiConfig = createConfig({
+  connectors: [connector],
+  chains: [base, baseSepolia],
+  transports: {
+    [base.id]: http(),
+    [baseSepolia.id]: http(),
+  },
+});
+
+const queryClient = new QueryClient(); // For use with react-query
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <WagmiProvider config={wagmiConfig} >
+      <QueryClientProvider client={ queryClient }>
+        <App />
+      </QueryClientProvider>
+    </WagmiProvider>
+  </React.StrictMode>,
+);
+```
+
+### Call Wagmi Hooks
+
+Now, your application should be able to successfully call Wagmi hooks. For example:
+
+```tsx
+import { useState } from "react";
+import { parseEther } from "viem";
+import { useAccount, useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
+
+/**
+ * The burn address (0x0000000000000000000000000000000000000000)
+ */
+const BURN_ADDRESS = "0x0000000000000000000000000000000000000000" as const;
+
+/**
+ * The amount to send in ETH (0.00001 ETH)
+ */
+const AMOUNT_TO_SEND = "0.00001";
+
+/**
+ * A component that demonstrates wagmi's useSendTransaction hook
+ * by sending 0.00001 ETH to the burn address.
+ *
+ * @returns A component that allows the user to send a transaction using wagmi.
+ */
+export default function WagmiTransaction() {
+  const { address } = useAccount();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { data: hash, sendTransaction, isPending, error } = useSendTransaction();
+
+  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  const handleSendTransaction = async () => {
+    if (!address) return;
+
+    setIsLoading(true);
+
+    try {
+      sendTransaction({
+        to: BURN_ADDRESS,
+        value: parseEther(AMOUNT_TO_SEND),
+      });
+    } catch (error) {
+      console.error("Failed to send transaction:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleReset = () => {
+    // Reset by refreshing the page or clearing state
+    window.location.reload();
+  };
+
+  return (
+    <div>
+      <div>
+        <p>
+          ⚠️ Warning: This will send {AMOUNT_TO_SEND} ETH to the burn address (0x0000...0000). 
+          This transaction cannot be reversed and the ETH will be permanently lost.
+        </p>
+      </div>
+
+      <div>
+        <div>
+          <div>Amount: {AMOUNT_TO_SEND} ETH</div>
+          <div>To (Burn Address): {BURN_ADDRESS.slice(0, 6)}...{BURN_ADDRESS.slice(-4)}</div>
+          <div>From: {address?.slice(0, 6)}...{address?.slice(-4)}</div>
+        </div>
+      </div>
+
+      {error && (
+        <div>
+          <strong>Error:</strong> {error.message}
+        </div>
+      )}
+
+      {!hash && !isPending && !isLoading && (
+        <button disabled={!address} onClick={handleSendTransaction}>
+          Send {AMOUNT_TO_SEND} ETH to Burn Address
+        </button>
+      )}
+
+      {(isPending || isConfirming) && (
+        <div>
+          <div>Sending transaction...</div>
+          {hash && (
+            <div>
+              Hash: {hash.slice(0, 10)}...{hash.slice(-8)}
+            </div>
+          )}
+        </div>
+      )}
+
+      {isSuccess && hash && (
+        <div>
+          <div>
+            <div>✅</div>
+          </div>
+
+          <div>
+            <div>Transaction Confirmed!</div>
+            <div>Your transaction has been successfully sent to the burn address</div>
+          </div>
+
+          <div>
+            <div>Amount: {AMOUNT_TO_SEND} ETH</div>
+            <div>To: {BURN_ADDRESS.slice(0, 6)}...{BURN_ADDRESS.slice(-4)}</div>
+            <div>
+              Block Explorer:{" "}
+              <a
+                href={`https://sepolia.basescan.org/tx/${hash}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {hash.slice(0, 10)}...{hash.slice(-8)}
+              </a>
+            </div>
+          </div>
+
+          <button onClick={handleReset}>
+            Send Another Transaction →
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+```

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+import { createCDPEmbeddedWalletConnector as r } from "./index2.js";
+export {
+  r as createCDPEmbeddedWalletConnector
+};

package/dist/esm/index2.js

@@ -0,0 +1,173 @@
+import { createCDPEmbeddedWallet as w, STANDARD_ERROR_CODES as g, EIP1193ProviderError as I, initialize as p } from "@coinbase/cdp-core";
+import { SwitchChainError as y, numberToHex as b, getAddress as f } from "viem";
+import { createConnector as D } from "wagmi";
+function Z(d) {
+  return D((a) => {
+    const v = d.providerConfig?.chains ?? a.chains ?? [];
+    let h, i, r, u, c, m;
+    async function C() {
+      m || (m = p(d.cdpConfig)), await m;
+    }
+    return {
+      /**
+       * Sets up the connector by binding the 1193's internal events to the connector's methods,
+       * is called as soon as app mounts.
+       *
+       * Core sdk must be initialised before 1193 provider is created,
+       * this.getProvider internally awaits the stored initPromise
+       */
+      async setup() {
+        const e = await this.getProvider();
+        r || (r = this.onDisconnect.bind(this), e.on("disconnect", r)), c || (c = this.onAccountsChanged.bind(this), e.on("accountsChanged", c)), i || (i = this.onChainChanged.bind(this), e.on("chainChanged", i)), u || (u = this.onConnect.bind(this), e.on("connect", u));
+      },
+      /**
+       * Connector function called when the user connects their wallet.
+       * On app mount, if the user was previously connected, this will be called
+       * with `isReconnecting` set to true.
+       *
+       * @param args - connect args
+       * @param args.chainId - {string} - the target chain id to connect to
+       * @param args.isReconnecting - {boolean} - whether the user was previously connected
+       * @returns The accounts and chain id of the now-connected user
+       */
+      async connect({
+        chainId: e,
+        isReconnecting: t
+      } = {}) {
+        let o = [];
+        t && (o = await this.getAccounts());
+        try {
+          if (!o?.length && !t && (o = await (await this.getProvider()).request({ method: "eth_requestAccounts" }), o.length === 0))
+            throw new Error("User has no evm addresses available or is not authenticated");
+          let n = await this.getChainId();
+          return e && n !== e && (n = (await this.switchChain({ chainId: e }).catch(
+            (l) => {
+              if (l.code === g.provider.userRejectedRequest) throw l;
+              return { id: n };
+            }
+          ))?.id ?? n), { accounts: o, chainId: n };
+        } catch (n) {
+          const s = n;
+          throw s.code === g.provider.userRejectedRequest ? new I(
+            g.provider.userRejectedRequest,
+            s.message
+          ) : s;
+        }
+      },
+      /**
+       * Disconnects the user, cleans up the connector's event listeners and calls
+       * the embedded wallet's destroy method
+       */
+      async disconnect() {
+        const e = await this.getProvider();
+        await e.request({ method: "wallet_disconnect" }), r && (e.removeListener("disconnect", r), r = void 0), c && (e.removeListener("accountsChanged", c), c = void 0), i && (e.removeListener("chainChanged", i), i = void 0);
+      },
+      /**
+       * Get the accounts of the user
+       *
+       * @returns {Address[]} The accounts of the user
+       */
+      async getAccounts() {
+        return await (await this.getProvider()).request({
+          method: "eth_accounts"
+        });
+      },
+      /**
+       * Get the chain id of the user
+       *
+       * @returns {number} The chain id of the user
+       */
+      async getChainId() {
+        const e = await this.getProvider();
+        return Number(await e.request({ method: "eth_chainId" }));
+      },
+      /**
+       * Get the provider, which internally is sensitive to the signed in user
+       *
+       * @returns {EIP1193Provider} The 1193 provider
+       */
+      async getProvider() {
+        return await C(), h || (h = w({
+          chains: v,
+          transports: d.providerConfig.transports
+        })), h.provider;
+      },
+      /**
+       * Checks if the user is authorized
+       *
+       * @returns {boolean} Whether the user is authorized
+       */
+      async isAuthorized() {
+        try {
+          return !!(await this.getAccounts()).length;
+        } catch {
+          return !1;
+        }
+      },
+      /**
+       * Below we have thin internal methods that ensure we emit the events to wagmi's
+       * internal event emitter, which it uses to update the wagmi store.
+       *
+       * We bind these to the EIP1193 provider's event emission in `setup()`
+       */
+      /**
+       * Handle accounts changed events ensuring we emit the events to wagmi
+       *
+       * @param accounts - {readonly string[]} - The accounts of the user (wagmi expects readonly string, not 0xstring)
+       */
+      onAccountsChanged(e) {
+        a.emitter.emit("change", {
+          accounts: e.map((t) => f(t))
+        });
+      },
+      /**
+       * Handle chain changed events ensuring we emit the events to wagmi
+       *
+       * @param chain - {string} - The chain of the user
+       */
+      onChainChanged(e) {
+        const t = Number(e);
+        a.emitter.emit("change", { chainId: t });
+      },
+      /**
+       * Handle connect events ensuring we emit the events to wagmi
+       *
+       * @param args - The connect info
+       * @param args.chainId - {string} - The chain id to connect to
+       */
+      async onConnect({ chainId: e }) {
+        const t = await this.getAccounts();
+        t.length !== 0 && a.emitter.emit("connect", { accounts: t, chainId: Number(e) });
+      },
+      /**
+       * Handle disconnect events ensuring we emit the events to wagmi
+       */
+      async onDisconnect() {
+        a.emitter.emit("disconnect");
+      },
+      /**
+       * Switches the user to the specified chain
+       *
+       * @param args - The switch chain args
+       * @param args.chainId - {number} - The chain id to switch to
+       * @returns {Promise<Chain>} The chain that was switched to
+       */
+      async switchChain({ chainId: e }) {
+        const t = v.find((n) => n.id === e);
+        if (!t) throw new y(new Error("Chain not configured"));
+        return await (await this.getProvider()).request({
+          method: "wallet_switchEthereumChain",
+          params: [{ chainId: b(e) }]
+        }), t;
+      },
+      // Below are temporary values while we dev
+      icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMiA3VjE3TDEyIDIyTDIyIDE3VjdMMTIgMloiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K",
+      id: "cdp",
+      name: "CDP",
+      type: "injected"
+    };
+  });
+}
+export {
+  Z as createCDPEmbeddedWalletConnector
+};

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+import { CDPEmbeddedWalletConfig } from '@coinbase/cdp-core';
+import { Config } from '@coinbase/cdp-core';
+import { createConnector } from 'wagmi';
+
+export declare function createCDPEmbeddedWalletConnector(parameters: {
+    cdpConfig: Config;
+    providerConfig: CDPEmbeddedWalletConfig;
+}): ReturnType<typeof createConnector>;
+
+export { }

package/package.json

@@ -1,8 +1,64 @@
 {
   "name": "@coinbase/cdp-wagmi",
-  "version": "0.0.0",
-  "description": "Placeholder package",
-  "main": "index.js",
-  "author": "Coinbase Inc.",
-  "license": "Apache-2.0"
-}
+  "version": "0.0.5",
+  "type": "module",
+  "files": [
+    "dist/**",
+    "!dist/**/*.tsbuildinfo"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": ">=18.2.0",
+    "viem": "^2.33.0",
+    "wagmi": "^2.16.0",
+    "@coinbase/cdp-core": "^0.0.5"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "jsdom": "^24.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vitest": "^3.2.2",
+    "@size-limit/preset-big-lib": "^11.2.0",
+    "@size-limit/webpack": "^11.2.0",
+    "@size-limit/webpack-why": "^11.2.0",
+    "size-limit": "^11.2.0",
+    "@coinbase/cdp-core": "^0.0.5"
+  },
+  "size-limit": [
+    {
+      "name": "full-package",
+      "path": "./dist/esm/index.js",
+      "import": "*",
+      "limit": "70 KB"
+    },
+    {
+      "name": "connector-only",
+      "path": "./dist/esm/index.js",
+      "import": "{ createCDPEmbeddedWalletConnector }",
+      "limit": "70 KB"
+    }
+  ],
+  "scripts": {
+    "build": "pnpm run clean && pnpm run check:types && vite build --config ../../vite.config.base.ts",
+    "build:watch": "vite build --config ../../vite.config.base.ts --watch",
+    "check:types": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "clean:all": "pnpm clean && rm -rf node_modules",
+    "size-limit": "size-limit",
+    "size-limit:why": "size-limit --why",
+    "test": "vitest",
+    "test:run": "vitest --run"
+  }
+}

package/index.js

@@ -1 +0,0 @@
-console.log("Temporary package");