feat: account kit

.gitignore

@@ -11,6 +11,7 @@ yarn.lock
 lerna-debug.log
 yarn-error.log
 .turbo
+*.tgz
 
 # We don't want projects created from templates to ignore their lockfiles, but we don't
 # want to check them in here, so we'll ignore them from the root.

packages/account-kit/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["../../.eslintrc", "plugin:react/recommended", "plugin:react-hooks/recommended"],
+  "plugins": ["react", "react-hooks"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

packages/account-kit/README.md

@@ -0,0 +1,13 @@
+# MUD Account Kit
+
+UI kit to streamline signing in to MUD apps.
+
+## Installation
+
+```
+npm install @latticexyz/account-kit
+```
+
+## Usage
+
+TODO

packages/account-kit/inline-import.d.ts

@@ -0,0 +1,4 @@
+declare module "*?inline" {
+  const content: string;
+  export default content;
+}

packages/account-kit/mprocs.yaml

@@ -0,0 +1,10 @@
+procs:
+  client:
+    shell: pnpm vite dev playground
+  anvil:
+    # To hydrate `anvil-state.json`, swap the command below and then deploy a MUD world to it.
+    # shell: anvil --dump-state playground/anvil-state.json
+    shell: anvil --block-time 2 --load-state playground/anvil-state.json
+  mud:
+    cwd: ../..
+    shell: pnpm run dev --filter=!@latticexyz/account-kit

packages/account-kit/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@latticexyz/account-kit",
+  "version": "2.0.4",
+  "description": "MUD account kit for easy user onboarding",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/latticexyz/mud.git",
+    "directory": "packages/account-kit"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./dist/tsup/index.js",
+    "./internal": "./dist/tsup/internal.js",
+    "./bundle": "./dist/vite/bundle.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm run build:js",
+    "build:js": "tsup & vite build",
+    "clean": "pnpm run clean:js",
+    "clean:js": "rimraf dist",
+    "dev": "tsup --watch & vite build --watch",
+    "playground": "mprocs",
+    "test": "tsc --noEmit && vitest",
+    "test:ci": "tsc --noEmit && vitest --run"
+  },
+  "dependencies": {
+    "@latticexyz/common": "workspace:*",
+    "@latticexyz/config": "workspace:*",
+    "@latticexyz/protocol-parser": "workspace:*",
+    "@latticexyz/store": "workspace:*",
+    "@latticexyz/world": "workspace:*",
+    "@latticexyz/world-modules": "workspace:*",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@rainbow-me/rainbowkit": "^2.0.2",
+    "@reservoir0x/relay-sdk": "^0.4.0",
+    "@tanstack/react-query": "^5.28.8",
+    "abitype": "1.0.0",
+    "debug": "^4.3.4",
+    "execa": "^7.0.0",
+    "p-retry": "^5.1.2",
+    "permissionless": "^0.1.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
+    "react-merge-refs": "^2.1.1",
+    "react-router-dom": "^6.11.0",
+    "tailwind-merge": "^1.12.0",
+    "usehooks-ts": "^3.0.2",
+    "viem": "2.9.20",
+    "wagmi": "^2.8.0",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/debug": "^4.1.7",
+    "@types/react": "18.2.22",
+    "@types/react-dom": "18.2.7",
+    "@types/ws": "^8.5.4",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "mprocs": "^0.6.4",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.4.3",
+    "tsup": "^6.7.0",
+    "vite": "^4.3.6",
+    "vite-plugin-dts": "^3.8.3",
+    "vitest": "0.34.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/account-kit/playground/App.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { AccountButton, useAccountModal } from "../src/exports";
+import { useLocalStorage } from "usehooks-ts";
+
+export function App() {
+  const { openAccountModal } = useAccountModal();
+
+  const [openModal, setOpenModal] = useLocalStorage<boolean>("mud:accountKitPlayground:openModalOnMount", false);
+
+  useEffect(() => {
+    if (openModal) {
+      openAccountModal();
+    }
+  }, [openAccountModal, openModal]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5em" }}>
+      <div>
+        <AccountButton />
+      </div>
+      <div>
+        <label style={{ display: "flex", gap: "0.25em" }}>
+          <input type="checkbox" checked={openModal} onChange={(event) => setOpenModal(event.currentTarget.checked)} />
+          Open modal on mount
+        </label>
+      </div>
+    </div>
+  );
+}

packages/account-kit/playground/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Account Kit playground</title>
+  </head>
+  <body>
+    <div id="react-root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

packages/account-kit/playground/index.tsx

@@ -0,0 +1,71 @@
+import "./polyfills";
+import "@rainbow-me/rainbowkit/styles.css";
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { WagmiProvider, createConfig } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { RainbowKitProvider, lightTheme, midnightTheme } from "@rainbow-me/rainbowkit";
+import { garnet, mudFoundry, redstone } from "@latticexyz/common/chains";
+import { AccountModal } from "../src/AccountModal";
+import { AccountKitConfigProvider } from "../src/AccountKitConfigProvider";
+import { App } from "./App";
+import { Hex, createClient, http } from "viem";
+import { chains } from "../src/exports/chains";
+
+const queryClient = new QueryClient();
+
+const wagmiConfig = createConfig({
+  chains: [mudFoundry, ...chains],
+  client: ({ chain }) =>
+    createClient({
+      chain,
+      // We intentionally don't use fallback+webSocket here because if a chain's RPC config
+      // doesn't include a `webSocket` entry, it doesn't seem to fallback and instead just
+      // ~never makes any requests and all queries seem to sit idle.
+      transport: http(),
+    }),
+});
+
+const testWorlds = {
+  [mudFoundry.id]: "0x8d8b6b8414e1e3dcfd4168561b9be6bd3bf6ec4b",
+  [garnet.id]: "0x352bd50fc7cbb8a1b3e5f84cf6f4e7d84792acd1",
+  [redstone.id]: "0x51778368cd250e4e3800a8fb20c32474c5f1c8cd",
+} as Partial<Record<string, Hex>>;
+
+const searchParams = new URLSearchParams(window.location.search);
+const chainId = parseInt(searchParams.get("chainId") ?? "") || mudFoundry.id;
+const worldAddress = testWorlds[chainId];
+if (!worldAddress) {
+  throw new Error(`Account Kit playground is not configured with a test world address for chain ID ${chainId}`);
+}
+
+const accountKitConfig = {
+  chainId,
+  worldAddress,
+  erc4337: false,
+  appInfo: {
+    termsOfUse: "#terms",
+    privacyPolicy: "#privacy",
+  },
+} as const;
+
+const root = ReactDOM.createRoot(document.querySelector("#react-root")!);
+root.render(
+  <StrictMode>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider
+          theme={{
+            lightMode: lightTheme({ borderRadius: "none" }),
+            darkMode: midnightTheme({ borderRadius: "none" }),
+          }}
+        >
+          <AccountKitConfigProvider config={accountKitConfig}>
+            <App />
+            <AccountModal />
+          </AccountKitConfigProvider>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  </StrictMode>,
+);

packages/account-kit/playground/polyfills.ts

@@ -0,0 +1,6 @@
+// See https://www.rainbowkit.com/docs/installation#vite
+
+window.global = window.global ?? window;
+window.process = window.process ?? { env: {} };
+
+export {};

packages/account-kit/playground/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["."]
+}

packages/account-kit/playground/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    esbuildOptions: {
+      target: "es2020",
+      // Node.js global to browser globalThis
+      define: {
+        global: "globalThis",
+      },
+    },
+  },
+});

packages/account-kit/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};