Skip to content

Commit

Permalink
feat: Split package into solana & wagmi (#178)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
wenty22 authored Aug 5, 2024
1 parent fcf0e97 commit 0e08437
Show file tree
Hide file tree
Showing 275 changed files with 11,273 additions and 2,296 deletions.
7 changes: 7 additions & 0 deletions .changeset/eleven-chicken-walk.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@node-real/walletkit': patch
'@node-real/walletkit-solana': patch
'@node-real/walletkit-wagmi': patch
---

feat: Split package into solana & wagmi
8 changes: 8 additions & 0 deletions .changeset/popular-terms-retire.md
Original file line number Diff line number Diff line change
@@ -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
10 changes: 5 additions & 5 deletions examples/nextjs/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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
Expand All @@ -39,7 +39,7 @@ export default function App({ Component, pageProps }: AppProps) {
<WalletKitProvider options={options} mode="light">
<Component {...pageProps} />

<WalletKitButton />
<ConnectButton />

<ConnectModal />

Expand Down
2 changes: 1 addition & 1 deletion examples/nextjs/pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
10 changes: 5 additions & 5 deletions examples/vite/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 />
Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
56 changes: 56 additions & 0 deletions packages/solana/__dev__/App.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
14 changes: 14 additions & 0 deletions packages/solana/__dev__/global.css
Original file line number Diff line number Diff line change
@@ -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;
}
13 changes: 13 additions & 0 deletions packages/solana/__dev__/index.html
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions packages/solana/__dev__/main.tsx
Original file line number Diff line number Diff line change
@@ -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>,
);
62 changes: 62 additions & 0 deletions packages/solana/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
36 changes: 36 additions & 0 deletions packages/solana/src/core/components/WalletKitProvider/context.ts
Original file line number Diff line number Diff line change
@@ -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);
}
Loading

0 comments on commit 0e08437

Please sign in to comment.