revert react package changes

Author: taylorjdawson

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.5-alpha.7",
+  "version": "2.2.6-alpha.1",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -50,23 +50,20 @@
     "dist"
   ],
   "scripts": {
-    "build": "yarn clean && tsc",
-    "clean": "rimraf dist",
-    "prepublishOnly": "yarn build",
+    "build": "tsc",
     "dev": "tsc -w",
     "type-check": "tsc --noEmit"
   },
   "license": "MIT",
   "devDependencies": {
+    "@types/react": "^18.0.2",
     "@types/use-sync-external-store": "^0.0.3",
-    "rimraf": "^3.0.2",
+    "react": "^18.0.0",
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@types/react": "^18.0.15",
-    "@web3-onboard/common": "^2.1.7-alpha.4",
-    "@web3-onboard/core": "^2.6.0-alpha.7",
-    "react": "^18.2.0",
+    "@web3-onboard/core": "^2.7.0-alpha.1",
+    "@web3-onboard/common": "^2.1.7",
     "use-sync-external-store": "1.0.0"
   },
   "peerDependencies": {

packages/react/src/index.ts

@@ -1,11 +1,193 @@
-export {
-  useAccountCenter,
-  useAppState,
-  useConnectWallet,
-  useNotifications,
-  useSetChain,
-  useSetLocale,
-  useWallets
-} from './hooks'
-export { init, Web3OnboardProvider, Web3OnboardProviderProps } from './context'
+import { useState, useCallback } from 'react'
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'
 
+import Web3Onboard from '@web3-onboard/core'
+import type {
+  InitOptions,
+  OnboardAPI,
+  ConnectOptions,
+  DisconnectOptions,
+  WalletState,
+  ConnectedChain,
+  AccountCenter,
+  AppState,
+  CustomNotification,
+  Notification,
+  Notify,
+  UpdateNotification,
+  PreflightNotificationsOptions
+} from '@web3-onboard/core'
+import type { Chain, WalletInit } from '@web3-onboard/common'
+
+export let web3Onboard: OnboardAPI | null = null
+
+export const init = (options: InitOptions): OnboardAPI => {
+  web3Onboard = Web3Onboard(options)
+  return web3Onboard
+}
+
+const HOOK_ERROR_MESSAGE = 'Must initialize before using hooks.'
+
+const useAppState: {
+  (): AppState
+  <K extends keyof AppState>(stateKey?: K): AppState[K]
+} = (stateKey = undefined) => {
+  if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE)
+
+  const { select, get } = web3Onboard.state
+
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      const { unsubscribe } = stateKey
+        ? select(stateKey).subscribe(onStoreChange)
+        : select().subscribe(onStoreChange)
+
+      return () => unsubscribe
+    },
+    [stateKey]
+  )
+
+  const getSnapshot = useCallback(() => {
+    const snapshot = get()
+    return stateKey ? snapshot[stateKey] : snapshot
+  }, [stateKey])
+
+  const getServerSnapshot = () => get() || getSnapshot
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}
+
+export const useConnectWallet = (): [
+  { wallet: WalletState | null; connecting: boolean },
+  (options?: ConnectOptions) => Promise<void>,
+  (wallet: DisconnectOptions) => Promise<void>,
+  (addresses?: string[]) => Promise<void>,
+  (wallets: WalletInit[]) => void,
+  (wallet: WalletState, address?: string) => void
+] => {
+  if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE)
+
+  const { connectWallet, disconnectWallet } = web3Onboard
+
+  const wallets = useAppState('wallets')
+  const wallet = wallets[0] || null
+
+  const [connecting, setConnecting] = useState<boolean>(false)
+
+  const connect = useCallback(async (options?: ConnectOptions) => {
+    setConnecting(true)
+
+    await connectWallet(options)
+
+    setConnecting(false)
+  }, [])
+
+  const disconnect = useCallback(async ({ label }: DisconnectOptions) => {
+    setConnecting(true)
+
+    await disconnectWallet({ label })
+
+    setConnecting(false)
+  }, [])
+
+  const updateBalances = web3Onboard.state.actions.updateBalances
+  const setWalletModules = web3Onboard.state.actions.setWalletModules
+  const setPrimaryWallet = web3Onboard.state.actions.setPrimaryWallet
+
+  return [
+    { wallet, connecting },
+    connect,
+    disconnect,
+    updateBalances,
+    setWalletModules,
+    setPrimaryWallet
+  ]
+}
+
+type SetChainOptions = {
+  chainId: string
+  chainNamespace?: string
+}
+
+export const useSetChain = (
+  walletLabel?: string
+): [
+  {
+    chains: Chain[]
+    connectedChain: ConnectedChain | null
+    settingChain: boolean
+  },
+  (options: SetChainOptions) => Promise<boolean>
+] => {
+  if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE)
+
+  const { setChain } = web3Onboard
+
+  const { wallets, chains } = useAppState()
+
+  const getChain = () => {
+    const wallet = walletLabel
+      ? wallets.find(({ label }) => label === walletLabel)
+      : wallets[0]
+    return wallet && wallet.chains ? wallet.chains[0] : null
+  }
+
+  const connectedChain = getChain()
+
+  const [settingChain, setInProgress] = useState<boolean>(false)
+
+  const set = useCallback(async (options: SetChainOptions) => {
+    setInProgress(true)
+
+    const success = await setChain({ ...options, wallet: walletLabel })
+
+    setInProgress(false)
+
+    return success
+  }, [])
+
+  return [{ chains, connectedChain, settingChain }, set]
+}
+
+export const useWallets = (): WalletState[] => {
+  if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE)
+
+  return useAppState('wallets')
+}
+
+export const useNotifications = (): [
+  Notification[],
+  (updatedNotification: CustomNotification) => {
+    dismiss: () => void
+    update: UpdateNotification
+  },
+  (update: Partial<Notify>) => void,
+  (options: PreflightNotificationsOptions) => Promise<void | string>
+] => {
+  if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE)
+
+  const customNotification = web3Onboard.state.actions.customNotification
+  const updateNotify = web3Onboard.state.actions.updateNotify
+  const preflightNotifications =
+    web3Onboard.state.actions.preflightNotifications
+
+  return [
+    useAppState('notifications'),
+    customNotification,
+    updateNotify,
+    preflightNotifications
+  ]
+}
+
+export const useSetLocale = (): ((locale: string) => void) => {
+  if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE)
+
+  return web3Onboard.state.actions.setLocale
+}
+
+export const useAccountCenter = (): ((
+  update: AccountCenter | Partial<AccountCenter>
+) => void) => {
+  if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE)
+
+  return web3Onboard.state.actions.updateAccountCenter
+}

packages/react/tsconfig.json

@@ -3,7 +3,6 @@
   "include": ["src/**/*"],
 
   "compilerOptions": {
-    "jsx": "react",
     "outDir": "dist",
     "rootDir": "src",
     "declarationDir": "dist",