feat: Split package into solana & wagmi (#178)

* feat: Split into four packages: ui, wagmi, solana and walletkit

* feat: Split packages & support solana

* feat: Split package into solana & wagmi

* feat: Split package into solana & wagmi

.changeset/eleven-chicken-walk.md

@@ -0,0 +1,7 @@
+---
+'@node-real/walletkit': patch
+'@node-real/walletkit-solana': patch
+'@node-real/walletkit-wagmi': patch
+---
+
+feat: Split package into solana & wagmi

.changeset/popular-terms-retire.md

@@ -0,0 +1,8 @@
+---
+'@node-real/walletkit': minor
+'@node-real/walletkit-solana': minor
+'@node-real/walletkit-wagmi': minor
+'@node-real/walletkit-ui': minor
+---
+
+feat: Split packages & support solana

examples/nextjs/pages/_app.tsx

@@ -2,17 +2,17 @@ import '@node-real/walletkit/styles.css';
 import '@/styles/globals.css';
 import { bsc, mainnet, opBNB } from 'wagmi/chains';
 
-import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets';
+import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wagmi/wallets';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   defaultWagmiConfig,
   SwitchNetworkModal,
-  WalletKitButton,
+  ConnectButton,
   WalletKitOptions,
   WalletKitProvider,
   ProfileModal,
   ConnectModal,
-} from '@node-real/walletkit';
+} from '@node-real/walletkit/wagmi';
 import { WagmiProvider } from 'wagmi';
 import { AppProps } from 'next/app';
 
@@ -21,7 +21,7 @@ const queryClient = new QueryClient();
 const config = defaultWagmiConfig({
   appName: 'WalletKit',
   chains: [bsc, mainnet, opBNB],
-  connectors: [trustWallet(), metaMask(), walletConnect()],
+  wallets: [trustWallet(), metaMask(), walletConnect()],
 
   // WalletConnect 2.0 requires a projectId which you can create quickly
   // and easily for free over at WalletConnect Cloud https://cloud.walletconnect.com/sign-in
@@ -39,7 +39,7 @@ export default function App({ Component, pageProps }: AppProps) {
         <WalletKitProvider options={options} mode="light">
           <Component {...pageProps} />
 
-          <WalletKitButton />
+          <ConnectButton />
 
           <ConnectModal />
 

examples/nextjs/pages/_document.tsx

@@ -1,5 +1,5 @@
 import { Html, Head, Main, NextScript } from 'next/document';
-import { EthereumScript } from '@node-real/walletkit';
+import { EthereumScript } from '@node-real/walletkit/wagmi';
 
 export default function Document() {
   return (

examples/vite/src/App.tsx

@@ -2,25 +2,25 @@ import '@node-real/walletkit/styles.css';
 import './global.css';
 import { bsc, mainnet, opBNB } from 'wagmi/chains';
 
-import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets';
+import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wagmi/wallets';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   ConnectModal,
   defaultWagmiConfig,
   ProfileModal,
   SwitchNetworkModal,
-  WalletKitButton,
+  ConnectButton,
   WalletKitOptions,
   WalletKitProvider,
-} from '@node-real/walletkit';
+} from '@node-real/walletkit/wagmi';
 import { WagmiProvider } from 'wagmi';
 
 const queryClient = new QueryClient();
 
 const config = defaultWagmiConfig({
   appName: 'WalletKit',
   chains: [mainnet, bsc, opBNB],
-  connectors: [trustWallet(), metaMask(), walletConnect()],
+  wallets: [trustWallet(), metaMask(), walletConnect()],
 
   // WalletConnect 2.0 requires a projectId which you can create quickly
   // and easily for free over at WalletConnect Cloud https://cloud.walletconnect.com/sign-in
@@ -36,7 +36,7 @@ export default function App() {
     <WagmiProvider config={config} reconnectOnMount={false}>
       <QueryClientProvider client={queryClient}>
         <WalletKitProvider options={options} mode="light">
-          <WalletKitButton />
+          <ConnectButton />
           <ConnectModal />
           <ProfileModal />
           <SwitchNetworkModal />

package.json

@@ -9,10 +9,9 @@
   "scripts": {
     "prepare": "husky install",
     "lint": "pnpm eslint .",
-    "dev": "pnpm --F @node-real/walletkit dev",
-    "build": "pnpm --F @node-real/walletkit build",
-    "dev:docs": "pnpm --F @node-real/walletkit build:watch & pnpm --F website dev",
+    "build": "pnpm --F @node-real/* build && pnpm cp:css",
     "build:docs": "pnpm build && pnpm --F website build",
+    "cp:css": "cat packages/wagmi/dist/style.css packages/solana/dist/style.css > packages/walletkit/dist/style.css",
     "ci:enter": "pnpm changeset pre enter alpha || true",
     "ci:exit": "pnpm changeset pre exit || true",
     "ci:version": "pnpm changeset version && cp README.md packages/walletkit/README.md",

packages/solana/__dev__/App.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import VConsole from 'vconsole';
+import {
+  defaultSolanaConfig,
+  WalletKitOptions,
+  WalletKitProvider,
+  ConnectButton,
+  ConnectModal,
+  ProfileModal,
+  ThemeMode,
+  useConnectModal,
+  useProfileModal,
+} from '@/index';
+import { phantomWallet, trustWallet, walletConnect } from '@/wallets/index';
+
+new VConsole();
+
+const config = defaultSolanaConfig({
+  autoConnect: true,
+  appName: 'WalletKit',
+  rpcUrl: 'https://api.devnet.solana.com',
+  wallets: [trustWallet(), phantomWallet(), walletConnect()],
+});
+
+const options: WalletKitOptions = {};
+
+export default function App() {
+  const [mode, setMode] = useState<ThemeMode>('light');
+  const nextMode = mode === 'light' ? 'dark' : 'light';
+
+  return (
+    <WalletKitProvider config={config} options={options} mode={mode} debugMode={true}>
+      <div>mode: {mode} </div>
+      <button onClick={() => setMode(nextMode)}>switch to {nextMode}</button>
+      <div style={{ height: 20 }} />
+
+      <ConnectButton />
+      <Example />
+
+      <ConnectModal />
+      <ProfileModal />
+    </WalletKitProvider>
+  );
+}
+
+function Example() {
+  const connectModal = useConnectModal();
+  const profileModal = useProfileModal();
+
+  return (
+    <>
+      <button onClick={() => connectModal.onOpen()}>Open Connect Modal</button>
+      <button onClick={() => profileModal.onOpen()}>Open Profile Modal</button>
+    </>
+  );
+}

packages/solana/__dev__/global.css

@@ -0,0 +1,14 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  margin: 0;
+  padding: 0;
+}

packages/solana/__dev__/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WalletKit Test Demo</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

packages/solana/__dev__/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './global.css';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

packages/solana/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@node-real/walletkit-solana",
+  "version": "2.2.0",
+  "author": "node-real",
+  "private": false,
+  "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.",
+  "homepage": "https://node-real.github.io/walletkit",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-real/walletkit.git",
+    "directory": "packages/solana"
+  },
+  "keywords": [
+    "walletkit"
+  ],
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./wallets": "./dist/wallets/index.js",
+    "./styles.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite __dev__ --config vite.config.ts --port 3333 --host 0.0.0.0 --open",
+    "build:watch": "vite build --watch --emptyOutDir=false",
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "@solana/web3.js": "^1",
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@solana/web3.js": "^1.95.2",
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vanilla-extract/css": "^1.15.3",
+    "@vanilla-extract/vite-plugin": "3.9.5",
+    "@vitejs/plugin-react": "^4.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.5.4",
+    "vconsole": "^3.15.1",
+    "vite": "^4.5.3",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "dependencies": {
+    "@metamask/jazzicon": "^2.0.0",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@walletconnect/solana-adapter": "^0.0.5",
+    "qrcode": "^1.5.3"
+  }
+}

packages/solana/src/core/components/WalletKitProvider/context.ts

@@ -0,0 +1,36 @@
+import { Action, DataSource } from '@/ui/types';
+import { Adapter, WalletProps } from '@/wallets';
+import { createContext, useContext } from 'react';
+
+type BaseOptions = DataSource['options'];
+
+export type WalletErrorProps = {
+  description?: string;
+  error?: any;
+};
+
+export interface WalletKitOptions extends BaseOptions {
+  onClickWallet?: (wallet: WalletProps, e?: React.MouseEvent) => undefined | boolean;
+}
+
+export interface WalletKitContextProps {
+  log: (...param: any) => void;
+  options: WalletKitOptions;
+  wallets: WalletProps[];
+
+  action: Action;
+  setAction: (action: Action) => void;
+
+  selectedWallet: WalletProps;
+  setSelectedWallet: (wallet: WalletProps) => void;
+
+  rpcUrl: string;
+  autoConnect: boolean;
+  adapters: Adapter[];
+}
+
+export const WalletKitContext = createContext({} as WalletKitContextProps);
+
+export function useWalletKit() {
+  return useContext(WalletKitContext);
+}