@tomo-inc/wallet-connect-kit 0.0.1

package/README.md

@@ -0,0 +1,149 @@
+# Wallet Connect SDK
+
+A lightweight React SDK to integrate crypto wallet connection into your app. It ships with a configurable wallet list modal and basic account actions. The current focus is EVM, built on top of `@tomo-inc/wallet-adaptor-base`, and supports custom wallets and chain configuration.
+
+## Quick Start
+
+```tsx
+// App.tsx — wrap your app with provider (comments in English)
+import React from "react";
+import { WalletConnectProvider } from "@tomo-inc/wallet-connect-kit";
+
+export default function App() {
+  return (
+    <WalletConnectProvider>
+      <YourApp />
+    </WalletConnectProvider>
+  );
+}
+```
+
+### Open modal, connect and disconnect
+
+```tsx
+import React from "react";
+import { useWalletConnect } from "@tomo-inc/wallet-connect-kit";
+
+export function ConnectButton() {
+  const { openModal, isConnected, disconnect } = useWalletConnect();
+
+  return (
+    <button onClick={() => (isConnected ? disconnect() : openModal())}>
+      {isConnected ? "Disconnect" : "Connect Wallet"}
+    </button>
+  );
+}
+```
+
+### Read account and sign
+
+```tsx
+import React from "react";
+import { useAccount } from "@tomo-inc/wallet-connect-kit";
+
+export function AccountInfo() {
+  const { address, chainId, signMessage, signInWithWallet } = useAccount();
+
+  const onSignMessage = async () => {
+    // Message signing for verification
+    const sig = await signMessage?.({ message: "Hello Tomo" });
+    console.log("signature:", sig);
+  };
+
+  const onSignin = async () => {
+    // SIW (sign-in with wallet) to get a token
+    const token = await signInWithWallet();
+    console.log("token:", token);
+  };
+
+  return (
+    <div>
+      <div>Address: {address}</div>
+      <div>ChainId: {chainId}</div>
+      <button onClick={onSignMessage}>Sign Message</button>
+      <button onClick={onSignin}>Sign In With Wallet</button>
+    </div>
+  );
+}
+```
+
+### Optional: custom wallets and chains
+
+```tsx
+import React from "react";
+import {
+  WalletConnectProvider,
+  type Chain,
+} from "@tomo-inc/wallet-connect-kit";
+
+const config = {
+  // Custom wallet connectors (merge with defaults)
+  connectors: [
+    {
+      id: "my-wallet",
+      name: "My Wallet",
+      namespace: "my.wallet",
+      icon: "https://example.com/icon.png",
+      iconBackground: "#000",
+      downloadUrls: { chrome: "https://example.com/install" },
+    },
+  ],
+  // Supported chains by chain type (compatible with viem/Chain for EVM)
+  chains: {
+    evm: [
+      {
+        id: 1,
+        name: "Ethereum",
+        nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+        rpcUrls: { default: { http: ["https://eth.merkle.io"] } },
+        blockExplorers: {
+          default: { name: "Etherscan", url: "https://etherscan.io" },
+        },
+      } as Chain,
+    ],
+    // aptos: [...],
+    // solana: [...],
+  },
+  // Optional: WalletConnect protocol configuration
+  // walletConnectConfig: { ... },
+
+  // Optional: Embedded wallet configuration for social login
+  embeddedWalletConfig: {
+    apiKey: "your-api-key",
+    // ... other embedded wallet settings
+  },
+
+  // Optional: Product type for UI theme (default: "tomo")
+  prodType: "mydoge", // or "tomo"
+};
+
+export function AppWithConfig() {
+  return (
+    <WalletConnectProvider config={config}>
+      <YourApp />
+    </WalletConnectProvider>
+  );
+}
+```
+
+## Exports
+
+- `WalletConnectProvider` - Main provider component with optional `config` prop
+- `useWalletConnect` - Hook for modal control and connection state: `{ isOpenModal, openModal, closeModal, isConnected, isConnecting, error, connect, disconnect }`
+- `useAccount` - Hook for account info and actions: `{ address, balance, chainType, chainId, currentWallet, currentProvider, switchChain, signMessage, signInWithWallet }`
+- Types: `WalletConnectConfig`, `Chain`, `WalletProvider`, `UseAccount`, `UseWalletConnect`, `ChainType`, `ModalView`
+- Views: `MyDogeSocialLoginView` - Custom MyDoge-styled social login view with Twitter, Google login and email support
+
+### WalletConnectProvider Config
+
+The `config` prop accepts:
+
+- `connectors?: WalletConfig[]` - Custom wallet connectors to merge with defaults
+- `chains?: Partial<Record<ChainType, EvmChain[] | any[]>>` - Supported chains by chain type (e.g., `{ evm: [...], aptos: [...], solana: [...] }`)
+- `walletConnectConfig?: WalletConnectProtocolConfig` - WalletConnect protocol configuration
+- `embeddedWalletConfig?: InitConfig` - Embedded wallet configuration for social login features (API key, OAuth settings, etc.)
+- `prodType?: ProdTypeEnum` - Product type to determine UI theme (`"tomo"` or `"mydoge"`). Controls which social login view is displayed by default
+
+**Note:** When `prodType` is set to `"mydoge"`, the SDK will automatically use the MyDoge-styled UI theme for social login features. Set it to `"tomo"` or leave it unset for the default Tomo theme.
+
+For more comprehensive examples, see `EXAMPLE.md` in the same directory.

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@tomo-inc/wallet-connect-kit",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": {
+      "import": "./dist/wallet-connect-kit.css"
+    }
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.5",
+    "copy-to-clipboard": "^3.3.3",
+    "qr-code-styling": "^1.9.2",
+    "qrcode": "^1.5.4",
+    "viem": "2.38.2",
+    "@tomo-inc/embedded-wallet-providers": "0.0.2",
+    "@tomo-inc/wallet-adaptor-base": "0.0.4",
+    "@tomo-inc/tomo-ui": "0.0.3"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@tailwindcss/cli": "^4.1.13",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/node": "^24.6.0",
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "autoprefixer": "^10.4.21",
+    "eruda": "^3.4.1",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "postcss": "^8.5.6",
+    "postcss-prefix-selector": "^1.16.1",
+    "react": "^18.3.3",
+    "react-dom": "^18.3.0",
+    "tailwindcss": "^4.1.15",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.0",
+    "vite-plugin-node-polyfills": "^0.24.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "npx nx dev wallet-connect-kit",
+    "build": "npx nx build wallet-connect-kit"
+  }
+}