diff --git a/.changeset/dirty-panthers-enjoy.md b/.changeset/dirty-panthers-enjoy.md new file mode 100644 index 00000000..516dc0c8 --- /dev/null +++ b/.changeset/dirty-panthers-enjoy.md @@ -0,0 +1,5 @@ +--- +'@node-real/walletkit': patch +--- + +feat: Upgrade wagmi & viem to 2.x diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000..26ea8cd7 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,13 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "example-nextjs": "0.0.1", + "example-vite": "0.0.1", + "@node-real/walletkit": "2.0.0", + "website": "0.0.1" + }, + "changesets": [ + "dirty-panthers-enjoy" + ] +} diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md deleted file mode 100644 index a75ac524..00000000 --- a/examples/nextjs/README.md +++ /dev/null @@ -1,40 +0,0 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. - -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 0be038a1..8390e60e 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -12,15 +12,16 @@ "dependencies": { "@node-real/walletkit": "workspace:*", "next": "^14", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "viem": "^1.19.9", - "wagmi": "^1.4.7" + "react": "^18", + "react-dom": "^18", + "viem": "^2", + "wagmi": "^2", + "@tanstack/react-query": "^5.51.1" }, "devDependencies": { - "@types/node": "^20.10.0", - "@types/react": "^18.2.39", - "@types/react-dom": "^18.2.17", - "typescript": "^5.3.2" + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "typescript": "^5.5.3" } } diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx index f4bb463e..02dfb412 100644 --- a/examples/nextjs/pages/_app.tsx +++ b/examples/nextjs/pages/_app.tsx @@ -1,30 +1,32 @@ import '@node-real/walletkit/styles.css'; import '@/styles/globals.css'; -import type { AppProps } from 'next/app'; -import { chains } from './chains'; -import { WagmiConfig, createConfig } from 'wagmi'; +import { bsc, mainnet, opBNB } from 'wagmi/chains'; + +import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { + defaultWagmiConfig, SwitchNetworkModal, WalletKitButton, WalletKitOptions, WalletKitProvider, - getDefaultConfig, + ProfileModal, + ConnectModal, } from '@node-real/walletkit'; -import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets'; +import { WagmiProvider } from 'wagmi'; +import { AppProps } from 'next/app'; -const config = createConfig( - getDefaultConfig({ - autoConnect: true, - appName: 'WalletKit', +const queryClient = new QueryClient(); - // 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 - walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767', +const config = defaultWagmiConfig({ + appName: 'WalletKit', + chains: [bsc, mainnet, opBNB], + connectors: [trustWallet(), metaMask(), walletConnect()], - chains, - connectors: [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 + walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767', +}); const options: WalletKitOptions = { initialChainId: 1, @@ -32,12 +34,29 @@ const options: WalletKitOptions = { export default function App({ Component, pageProps }: AppProps) { return ( - - - - - - - + + + + + + + + + + {/* + Profile modal shows some basic information about the current account, + If you don't need this modal, you can remove it. + */} + + + {/* + 👇 Here's the SwitchNetworkModal + If the user switches to a network that is not supported by our dApp, + this modal will be displayed to remind the user to switch to our supported networks. + */} + + + + ); } diff --git a/examples/nextjs/pages/_document.tsx b/examples/nextjs/pages/_document.tsx index 9b9870d8..ef37a5de 100644 --- a/examples/nextjs/pages/_document.tsx +++ b/examples/nextjs/pages/_document.tsx @@ -5,7 +5,6 @@ export default function Document() { return ( - WalletKit Next.js Example diff --git a/examples/nextjs/pages/chains.ts b/examples/nextjs/pages/chains.ts deleted file mode 100644 index 8171bbe7..00000000 --- a/examples/nextjs/pages/chains.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { bsc, mainnet } from 'wagmi/chains'; - -export const chains = [ - { - id: 204, - name: 'opBNB Mainnet', - network: 'opBNB Mainnet', - nativeCurrency: { - name: 'tcBNB', - symbol: 'tcBNB', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://opbnb-mainnet-rpc.bnbchain.org'], - }, - public: { - http: ['https://opbnb-mainnet-rpc.bnbchain.org'], - }, - }, - blockExplorers: { - etherscan: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, - default: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, - }, - }, - { - id: 97, - name: 'BSC Testnet', - network: 'BSC Testnet', - nativeCurrency: { - name: 'tBNB', - symbol: 'tBNB', - decimals: 18, - }, - rpcUrls: { - default: { - http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], - }, - public: { - http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], - }, - }, - blockExplorers: { - etherscan: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, - default: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, - }, - }, - bsc, - mainnet, -]; diff --git a/examples/vite/package.json b/examples/vite/package.json index 76bdc1a1..a8fb2855 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -11,16 +11,17 @@ }, "dependencies": { "@node-real/walletkit": "workspace:*", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "viem": "^1.19.9", - "wagmi": "^1.4.7" + "react": "^18", + "react-dom": "^18", + "viem": "^2", + "wagmi": "^2", + "@tanstack/react-query": "^5.51.1" }, "devDependencies": { - "@types/react": "^18.2.39", - "@types/react-dom": "^18.2.17", + "@types/react": "^18", + "@types/react-dom": "^18", "@vitejs/plugin-react": "^4.2.0", - "typescript": "^5.3.2", + "typescript": "^5.5.3", "vconsole": "^3.15.1", "vite": "^4.5.0" } diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 0b236fe8..6059af0d 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -1,28 +1,31 @@ import '@node-real/walletkit/styles.css'; -import { WagmiConfig, createConfig } from 'wagmi'; -import { chains } from './chains'; +import './global.css'; +import { bsc, mainnet, opBNB } from 'wagmi/chains'; + +import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { + ConnectModal, + defaultWagmiConfig, + ProfileModal, + SwitchNetworkModal, WalletKitButton, - WalletKitProvider, - getDefaultConfig, WalletKitOptions, - SwitchNetworkModal, + WalletKitProvider, } from '@node-real/walletkit'; -import { trustWallet, metaMask, walletConnect } from '@node-real/walletkit/wallets'; +import { WagmiProvider } from 'wagmi'; -const config = createConfig( - getDefaultConfig({ - autoConnect: true, - appName: 'WalletKit', +const queryClient = new QueryClient(); - // 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 - walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767', +const config = defaultWagmiConfig({ + appName: 'WalletKit', + chains: [mainnet, bsc, opBNB], + connectors: [trustWallet(), metaMask(), walletConnect()], - chains, - connectors: [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 + walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767', +}); const options: WalletKitOptions = { initialChainId: 1, @@ -30,16 +33,15 @@ const options: WalletKitOptions = { export default function App() { return ( - - - - {/* - 👇 Here's the SwitchNetworkModal - If the user switches to a network that is not supported by our dApp, - this modal will be displayed to remind the user to switch to our supported networks. - */} - - - + + + + + + + + + + ); } diff --git a/examples/vite/src/chains.ts b/examples/vite/src/chains.ts deleted file mode 100644 index 8171bbe7..00000000 --- a/examples/vite/src/chains.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { bsc, mainnet } from 'wagmi/chains'; - -export const chains = [ - { - id: 204, - name: 'opBNB Mainnet', - network: 'opBNB Mainnet', - nativeCurrency: { - name: 'tcBNB', - symbol: 'tcBNB', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://opbnb-mainnet-rpc.bnbchain.org'], - }, - public: { - http: ['https://opbnb-mainnet-rpc.bnbchain.org'], - }, - }, - blockExplorers: { - etherscan: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, - default: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, - }, - }, - { - id: 97, - name: 'BSC Testnet', - network: 'BSC Testnet', - nativeCurrency: { - name: 'tBNB', - symbol: 'tBNB', - decimals: 18, - }, - rpcUrls: { - default: { - http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], - }, - public: { - http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], - }, - }, - blockExplorers: { - etherscan: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, - default: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, - }, - }, - bsc, - mainnet, -]; diff --git a/packages/walletkit/CHANGELOG.md b/packages/walletkit/CHANGELOG.md index 240c0506..a20b1bee 100644 --- a/packages/walletkit/CHANGELOG.md +++ b/packages/walletkit/CHANGELOG.md @@ -1,227 +1,7 @@ # @node-real/walletkit -## 1.1.2 +## 2.0.1-alpha.0 ### Patch Changes -- 4725a51: Add `openModalOnWrongNetwork` option to customize whether display SwitchNetworkModal if - on the wrong network - -## 1.1.1 - -### Patch Changes - -- b11c309: Fixed binance web3 wallet disconnect after refresh page. -- b11c309: Remove unused code - -## 1.0.13-alpha.0 - -### Patch Changes - -- 237726b: Fixed binance web3 wallet disconnect after refresh page. -- 8b9e4fe: Remove unused code - -## 1.0.12 - -### Patch Changes - -- f81777b: Support embedding modal into page. -- f81777b: Fixed ssr issue - -## 1.0.12-alpha.1 - -### Patch Changes - -- 3a9e8f0: Fixed ssr issue - -## 1.0.12-alpha.0 - -### Patch Changes - -- 2e73c6b: Support embedding modal into page. - -## 1.0.11 - -### Patch Changes - -- 3279ead: Add a new wallet option `render` to support customize the content of each option. -- 3279ead: feat: Add `isDisabled` option to wallet. - -## 1.0.11-alpha.0 - -### Patch Changes - -- 06ecbd6: Add a new wallet option `render` to support customize the content of each option. -- 06ecbd6: feat: Add `isDisabled` option to wallet. - -## 1.0.10 - -### Patch Changes - -- 792d346: Fixed automatic disconnection issue caused by WalletConnect. -- 792d346: Update docs -- 792d346: Support binance web3 wallet on mobile -- 792d346: Add bitget wallet -- 792d346: Add upgrade tips for binance web3 wallet. - -## 1.0.10-alpha.3 - -### Patch Changes - -- 83d9533: Add upgrade tips for binance web3 wallet. - -## 1.0.10-alpha.2 - -### Patch Changes - -- d24d147: Fixed automatic disconnection issue caused by WalletConnect. -- d24d147: Update docs - -## 1.0.10-alpha.1 - -### Patch Changes - -- d86926f: Add bitget wallet - -## 1.0.10-alpha.0 - -### Patch Changes - -- 991d126: Support binance web3 wallet on mobile - -## 1.0.9 - -### Patch Changes - -- 65c4817: Modify walletkit scope. - -## 1.0.9-alpha.4 - -### Patch Changes - -- e06d4b3: refactor: Add env variables. - -## 1.0.9-alpha.3 - -### Patch Changes - -- a9a34af: Add particle wallet - -## 1.0.9-alpha.2 - -### Patch Changes - -- a6de228: Add `closeModalAfterSwitchingNetwork`. - -## 1.0.9-alpha.1 - -### Patch Changes - -- f3ebc1b: Setting `reloadOnDisconnect` = false in default for CoinbaseWallet. - -## 1.0.9-alpha.0 - -### Patch Changes - -- 53b65ec: Fixed switching network failure in coinbaseWallet. - -## 1.0.8 - -### Patch Changes - -- ebae213: Fixed modal flickering issue in grid layout. - -## 1.0.7 - -### Patch Changes - -- 084a397: Fixed theme configuration naming error issue -- 084a397: Fixed TrustWallet will automatically reconnect after reloading the page. -- 084a397: refactor: update the `installed` field that detect whether wallet is installed to a - function -- 084a397: Fixed multiple wallets conficts resulting in undetectable issues. -- 084a397: Fixed `WalletConnect` automatic connection issue in the follow scenario: connect the - WalletConnect -> close browser -> reopen browser -> disconnect -> select WalletConnect, will - automatically connect. -- 084a397: Fixed trustwallet losing account status after refreshing -- 084a397: Fixed conflict issue between trustwallet and metaMask. -- 084a397: Add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of - adding network. - -## 1.0.7-alpha.6 - -### Patch Changes - -- c431545: Add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of - adding network. - -## 1.0.7-alpha.5 - -### Patch Changes - -- f851750: Fixed TrustWallet will automatically reconnect after reloading the page. - -## 1.0.7-alpha.4 - -### Patch Changes - -- 78c9fc8: Fixed multiple wallets conficts resulting in undetectable issues. - -## 1.0.7-alpha.3 - -### Patch Changes - -- e418a56: Update the `installed` field that detect whether wallet is installed to a function -- e418a56: Fixed conflict issue between trustwallet and metaMask. - -## 1.0.7-alpha.2 - -### Patch Changes - -- 52e9976: Fixed trustwallet losing account status after refreshing - -## 1.0.7-alpha.1 - -### Patch Changes - -- 3dd2578: Fixed `WalletConnect` automatic connection issue in the follow scenario: connect the - WalletConnect -> close browser -> reopen browser -> disconnect -> select WalletConnect, will - automatically connect. - -## 1.0.6 - -### Patch Changes - -- 9fd73b8: - - Add chains type declaration for `dev example` -- 9fd73b8: - - Fixed typescript declaration files export path error, remove `dev` from tsconfig.json includes - field - -## 1.0.5 - -### Patch Changes - -- 12ebee8: - - - Add Binance Web3 Wallet & Coinbase Wallet & OKX Wallet & MathWallet support. - - - Add showQRCode & getQRCodeUri configuration items to support display a QR code when a wallet is - not installed. - - - UI adapted to mobile end and multiple wallets. - - - Fixed the hover effect did not disappear after clicking button on the mobile end. - - - Fixed walletConnect popup and QR code display being very slow issue. - - - Disabled page scrolling when opening walletkit modal. - - - For a smoother development experience, remove `examples/test` and create a dev demo in - `packages/walletkit`. - - - Update walletConnect `relayUrl` to `wss://relay.walletconnect.org`. - -- 4a88b07: - - Remove default `initialChainId` to support the case only connecting a wallet and not switching a - network. +- 919b9ba: feat: Upgrade wagmi & viem to 2.x diff --git a/packages/walletkit/__dev__/App.tsx b/packages/walletkit/__dev__/App.tsx index b4b8f8ab..0f02686d 100644 --- a/packages/walletkit/__dev__/App.tsx +++ b/packages/walletkit/__dev__/App.tsx @@ -1,58 +1,53 @@ import { useState } from 'react'; -import { chains } from './chains'; -import { WagmiConfig, createConfig } from 'wagmi'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { WagmiProvider } from 'wagmi'; import VConsole from 'vconsole'; import { + ConnectModal, + ProfileModal, + SwitchNetworkModal, ThemeMode, WalletKitButton, WalletKitOptions, WalletKitProvider, - getDefaultConfig, - useModal, + defaultWagmiConfig, + useConnectModal, useProfileModal, useSwitchNetworkModal, } from '@/index'; - import { binanceWeb3Wallet, bitgetWallet, coinbaseWallet, - mathWallet, metaMask, okxWallet, tokenPocket, trustWallet, walletConnect, } from '@/wallets'; -import { SwitchNetworkModal } from '@/components/SwitchNetworkModal'; -import { WalletKitEmbeddedModal } from '@/components/WalletKitEmbeddedModal'; +import { chains } from './chains'; + +const queryClient = new QueryClient(); new VConsole(); -const config = createConfig( - getDefaultConfig({ - autoConnect: false, - appName: 'WalletKit', - chains, - connectors: [ - binanceWeb3Wallet(), - bitgetWallet(), - coinbaseWallet(), - metaMask(), - okxWallet(), - tokenPocket({ - isDisabled: true, - }), - trustWallet(), - walletConnect(), - mathWallet(), - ], - }), -); +const config = defaultWagmiConfig({ + appName: 'WalletKit', + chains, + connectors: [ + binanceWeb3Wallet(), + bitgetWallet(), + coinbaseWallet(), + metaMask(), + okxWallet(), + tokenPocket(), + trustWallet(), + walletConnect(), + ], +}); const options: WalletKitOptions = { initialChainId: 204, - closeModalAfterSwitchingNetwork: true, }; export default function App() { @@ -60,28 +55,33 @@ export default function App() { const nextMode = mode === 'light' ? 'dark' : 'light'; return ( - -
mode: {mode}
- -
+ + + +
mode: {mode}
+ +
+ + + - - - - - - + + + + + + ); } function Example() { - const modal = useModal(); + const connectModal = useConnectModal(); const profileModal = useProfileModal(); const switchNetworkModal = useSwitchNetworkModal(); return ( <> - + diff --git a/packages/walletkit/__dev__/chains.ts b/packages/walletkit/__dev__/chains.ts index afee383c..b2067fd4 100644 --- a/packages/walletkit/__dev__/chains.ts +++ b/packages/walletkit/__dev__/chains.ts @@ -1,54 +1,9 @@ -import { Chain, bsc, mainnet } from 'wagmi/chains'; +import { bsc, bscTestnet, mainnet, opBNB } from 'wagmi/chains'; -export const chains: Chain[] = [ - { - id: 204, - name: 'opBNB Mainnet', - network: 'opBNB Mainnet', - nativeCurrency: { - name: 'tcBNB', - symbol: 'tcBNB', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://opbnb-mainnet-rpc.bnbchain.org'], - }, - public: { - http: ['https://opbnb-mainnet-rpc.bnbchain.org'], - }, - }, - blockExplorers: { - etherscan: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, - default: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, - }, - }, - { - id: 97, - name: 'BSC Testnet', - network: 'BSC Testnet', - nativeCurrency: { - name: 'tBNB', - symbol: 'tBNB', - decimals: 18, - }, - rpcUrls: { - default: { - http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], - }, - public: { - http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], - }, - }, - blockExplorers: { - etherscan: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, - default: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, - }, - }, +export const chains = [ { id: 1017, name: 'BNB Greenfield', - network: 'BNB Greenfield', nativeCurrency: { name: 'tBNB', symbol: 'tBNB', @@ -67,6 +22,8 @@ export const chains: Chain[] = [ default: { name: 'Greenfield Scan', url: `https://greenfieldscan.com` }, }, }, + opBNB, + bscTestnet, bsc, mainnet, ]; diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json index 4f0de70c..9c159856 100644 --- a/packages/walletkit/package.json +++ b/packages/walletkit/package.json @@ -1,6 +1,6 @@ { "name": "@node-real/walletkit", - "version": "1.1.2", + "version": "2.0.1-alpha.0", "author": "node-real", "private": false, "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.", @@ -35,29 +35,32 @@ "build": "vite build" }, "peerDependencies": { + "@tanstack/react-query": "^5", "react": ">=17", "react-dom": ">=17", - "viem": "^1.0.0", - "wagmi": "^1.0.0" + "viem": "^2", + "wagmi": "^2" }, "devDependencies": { + "@tanstack/react-query": "^5.51.1", "@types/qrcode": "^1.5.5", - "@types/react": "^18.2.39", - "@types/react-dom": "^18.2.17", - "@vanilla-extract/css": "^1.14.0", - "@vanilla-extract/vite-plugin": "^3.9.2", - "@vitejs/plugin-react": "^4.2.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "@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.3.2", + "typescript": "^5.5.3", "vconsole": "^3.15.1", - "viem": "^1.19.9", - "vite": "^4.5.0", - "vite-plugin-dts": "^3.6.3", - "wagmi": "^1.4.7" + "viem": "^2.17.4", + "vite": "^4.5.3", + "vite-plugin-dts": "^3.9.1", + "wagmi": "^2.10.10" }, "dependencies": { + "@metamask/jazzicon": "^2.0.0", "qrcode": "^1.5.3" } } diff --git a/packages/walletkit/src/base/icons/ChainSpinnerIcon.tsx b/packages/walletkit/src/base/icons/ChainSpinnerIcon.tsx index 9addb981..5a457d1c 100644 --- a/packages/walletkit/src/base/icons/ChainSpinnerIcon.tsx +++ b/packages/walletkit/src/base/icons/ChainSpinnerIcon.tsx @@ -1,4 +1,5 @@ -import { SVGIconProps, cssVar } from '../..'; +import { cssVar } from '@/index'; +import { SVGIconProps } from '@/types'; export const ChainSpinnerIcon = (props: SVGIconProps) => { const stopColor = cssVar('primaryActive'); diff --git a/packages/walletkit/src/chains/index.tsx b/packages/walletkit/src/chains/index.tsx index 5441e11a..f11853ee 100644 --- a/packages/walletkit/src/chains/index.tsx +++ b/packages/walletkit/src/chains/index.tsx @@ -1,8 +1,9 @@ import { BscIcon } from './icons/BscIcon'; import { ComboIcon } from './icons/ComboIcon'; import { EthereumIcon } from './icons/EthereumIcon'; +import { ChainProps } from './types'; -const chainsConfig = [ +export const chainsConfig: ChainProps[] = [ { id: 1, name: 'Ethereum', @@ -44,7 +45,3 @@ const chainsConfig = [ logo: , }, ]; - -export function getSupportedChains() { - return chainsConfig; -} diff --git a/packages/walletkit/src/components/Avatar/index.tsx b/packages/walletkit/src/components/Avatar/index.tsx index 2840f314..c9cb2999 100644 --- a/packages/walletkit/src/components/Avatar/index.tsx +++ b/packages/walletkit/src/components/Avatar/index.tsx @@ -1,44 +1,36 @@ import { BoxProps, Box } from '@/base/components/Box'; import { cx } from '@/index'; -import { Address, useEnsAddress, useEnsAvatar, useEnsName } from 'wagmi'; -import { clsAvatar, clsAvatarImg, clsAvatarDefault } from './styles.css'; +import { clsAvatar, clsAvatarDefault } from './styles.css'; +import { Address } from 'viem'; +import { useEffect, useRef } from 'react'; +import jazzicon from '@metamask/jazzicon'; export interface AvatarProps extends BoxProps { address?: Address; - name?: string | undefined; } export function Avatar(props: AvatarProps) { - const { className, address, name, ...restProps } = props; + const { className, address, ...restProps } = props; - const { data: ensAddress } = useEnsAddress({ - chainId: 1, - name, - }); + const avatarRef = useRef(null); - const { data: ensName } = useEnsName({ - chainId: 1, - address: address ?? ensAddress ?? undefined, - }); + useEffect(() => { + const element = avatarRef.current; + if (element && address) { + const seed = parseInt(address.slice(2, 10), 16); + const icon = jazzicon(element.clientWidth, seed); - const { data: ensAvatar } = useEnsAvatar({ - chainId: 1, - name: ensName, - }); + if (element.firstChild) { + element.removeChild(element.firstChild); + } - const ens = { - address: ensAddress ?? address, - name: ensName ?? name, - avatar: ensAvatar ?? undefined, - }; + element.appendChild(icon); + } + }, [address]); return ( - - {ens.avatar ? ( - - ) : ( - - )} + + ); } diff --git a/packages/walletkit/src/components/DisconnectButton/index.tsx b/packages/walletkit/src/components/DisconnectButton/index.tsx index a2625c6e..2c460de2 100644 --- a/packages/walletkit/src/components/DisconnectButton/index.tsx +++ b/packages/walletkit/src/components/DisconnectButton/index.tsx @@ -3,9 +3,7 @@ import { ExitIcon } from '@/base/icons/ExitIcon'; import { cx } from '@/index'; import { useConnect, useDisconnect } from 'wagmi'; import { clsContainer } from './styles.css'; -import { useProfileModal } from '@/components/ProfileModal/ProfileModalProvider/context'; -import { useSwitchNetworkModal } from '@/components/SwitchNetworkModal/SwitchNetworkProvider/context'; -import { useWalletKitModal } from '@/components/WalletKitModal/WalletKitModalProvider/context'; +import { useCloseAllModals } from '@/hooks/useCloseAllModals'; export type DisconnectButtonProps = ButtonProps; @@ -35,17 +33,3 @@ export function DisconnectButton(props: DisconnectButtonProps) { ); } - -function useCloseAllModals() { - const walletkitModal = useWalletKitModal(); - const switchNetworkModal = useSwitchNetworkModal(); - const profileModal = useProfileModal(); - - return { - onCloseAllModals() { - walletkitModal.onClose(); - switchNetworkModal.onClose(); - profileModal.onClose(); - }, - }; -} diff --git a/packages/walletkit/src/components/Navbar/index.tsx b/packages/walletkit/src/components/Navbar/index.tsx index defdad3e..b786c777 100644 --- a/packages/walletkit/src/components/Navbar/index.tsx +++ b/packages/walletkit/src/components/Navbar/index.tsx @@ -4,23 +4,20 @@ import { BackIcon } from '@/base/icons/BackIcon'; import { CloseIcon } from '@/base/icons/CloseIcon'; import { cx } from '@/index'; import { clsNavbar } from './styles.css'; -import { useRouter } from '../RouteProvider/context'; export interface NavbarProps extends BoxProps { + showBack?: boolean; + onBack?: () => void; onClose?: () => void; } export function Navbar(props: NavbarProps) { - const { className, onClose, ...restProps } = props; - - const { history, back } = useRouter(); - - const showBack = history.length > 1; + const { className, showBack, onBack, onClose, ...restProps } = props; return ( {showBack && ( - } onClick={back} /> + } onClick={onBack} /> )} } onClick={onClose} /> diff --git a/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx b/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx index 84a99ba2..a9975cef 100644 --- a/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx +++ b/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx @@ -4,9 +4,9 @@ import { Button } from '@/base/components/Button'; import { DownArrowIcon } from '@/base/icons/DownArrowIcon'; import { Avatar } from '@/components/Avatar'; import { useChainConfig } from '@/hooks/useChainConfig'; -import { cx } from '@/index'; -import { truncateENSName, formatBalance, truncateAddress } from '@/utils/account'; -import { useAccount, useBalance, useEnsName, useNetwork } from 'wagmi'; +import { cx, useProfileModal, useSwitchNetworkModal } from '@/index'; +import { formatBalance, truncateAddress, truncateName } from '@/utils/account'; +import { useAccount } from 'wagmi'; import { clsWalletkitButton } from '../styles.css'; import { clsInfo, @@ -18,33 +18,25 @@ import { clsSeparator, clsAddress, } from './styles.css'; -import { useSwitchNetworkModal } from '@/components/SwitchNetworkModal/SwitchNetworkProvider/context'; -import { useProfileModal } from '@/components/ProfileModal/ProfileModalProvider/context'; +import { useChainIsSupported } from '@/hooks/useChainIsSupported'; +import { useWalletKitBalance } from '@/hooks/useWalletKitBalance'; export function ConnectedInfo() { - const { address } = useAccount(); + const { address, chain } = useAccount(); - const { onOpen: onOpenSwitchNetworkModal } = useSwitchNetworkModal(); - const { onOpen: onOpenProfileModal } = useProfileModal(); + const switchNetworkModal = useSwitchNetworkModal(); + const profileModal = useProfileModal(); - const { data: ensName } = useEnsName({ - chainId: 1, - address: address, - }); - - const { data: balance } = useBalance({ - address, - }); - - const { chain } = useNetwork(); + const { balance } = useWalletKitBalance(address); const chainConfig = useChainConfig(chain); + const isSupported = useChainIsSupported(); return ( - {chain?.unsupported ? ( + {!isSupported ? ( diff --git a/packages/walletkit/src/components/WalletKitButton/ConnectButton/index.tsx b/packages/walletkit/src/components/WalletKitButton/ConnectButton/index.tsx index 05e58fd0..d07c090f 100644 --- a/packages/walletkit/src/components/WalletKitButton/ConnectButton/index.tsx +++ b/packages/walletkit/src/components/WalletKitButton/ConnectButton/index.tsx @@ -1,12 +1,12 @@ import { ButtonProps, Button } from '@/base/components/Button'; import { useIsMounted } from '@/base/hooks/useIsMounted'; import { cx } from '@/index'; -import React, { useCallback } from 'react'; +import React from 'react'; import { useAccount } from 'wagmi'; import { ConnectedInfo } from './ConnectedInfo'; import { clsWalletkitButton } from './styles.css'; -import { useWalletKitModal } from '@/components/WalletKitModal/WalletKitModalProvider/context'; import { Action } from '@/components/WalletKitProvider/context'; +import { useConnectModal } from '@/modals/ConnectModal/context'; export interface ConnectButtonProps extends ButtonProps { action?: Action; @@ -15,21 +15,18 @@ export interface ConnectButtonProps extends ButtonProps { export const ConnectButton = React.forwardRef((props: ConnectButtonProps, ref: any) => { const { className, action, onClick, ...restProps } = props; - const { onOpen } = useWalletKitModal(); - const { isConnected } = useAccount(); + const connectModal = useConnectModal(); + const { address } = useAccount(); const isMounted = useIsMounted(); - const onClickButton = useCallback( - (e: React.MouseEvent) => { - onOpen({ - action, - }); - onClick?.(e); - }, - [action, onClick, onOpen], - ); + const onOpenConnectModal = (e: React.MouseEvent) => { + connectModal.onOpen({ + action, + }); + onClick?.(e); + }; - if (isConnected) { + if (address) { if (isMounted) { return ; } else { @@ -41,7 +38,7 @@ export const ConnectButton = React.forwardRef((props: ConnectButtonProps, ref: a