feat: too much stuff to list

packages/badge/package.json

@@ -32,6 +32,8 @@
     "react": ">=17"
   },
   "dependencies": {
-    "@ethersproject/address": "^5.4.0"
+    "@ethersproject/bignumber": "^5.4.1",
+    "@ethersproject/units": "^5.4.0",
+    "@rainbowkit/utils": "workspace:^0.0.0"
   }
 }

packages/badge/src/components/EthAddress.tsx

@@ -1,39 +1,56 @@
 import React from 'react'
+import { isAddress, shortenAddress } from '@rainbowkit/utils'
 import styles from '../../styles/EthAddress.module.css'
-import { getAddress } from '@ethersproject/address'
+import { BaseProvider } from '@ethersproject/providers'
+import { useState, useEffect } from 'react'
+import { BigNumber } from '@ethersproject/bignumber'
+import { formatEther } from '@ethersproject/units'
 
 export interface EthAddressProps {
   addr: string
   shorten?: boolean
+  showBalance?: boolean
+  provider?: BaseProvider
+  networkId?: number
   profileIcon?: string
   classNames?: Partial<{
     profileIcon: string
     container: string
     address: string
+    balance: string
   }>
 }
 
-function isAddress(value: any): string | false {
-  try {
-    return getAddress(value)
-  } catch {
-    return false
-  }
-}
+export const EthAddress = ({ addr, shorten, profileIcon, showBalance, provider, ...props }: EthAddressProps) => {
+  shorten = shorten === undefined ? true : shorten
 
-export function shortenAddress(address: string, chars = 4): string {
-  const parsed = isAddress(address)
-  if (!parsed) {
-    throw Error(`Invalid 'address' parameter '${address}'.`)
-  }
-  return `${parsed.substring(0, chars + 2)}...${parsed.substring(42 - chars)}`
-}
+  const [bal, setBal] = useState('0')
+
+  const [symbol, setSymbol] = useState('eth')
+
+  useEffect(() => {
+    if (showBalance && provider && addr) {
+      provider.getBalance(addr).then((b: BigNumber) => {
+        const floatBal = parseFloat(formatEther(b))
+
+        if (floatBal > 9999) {
+          setBal(floatBal.toFixed(0))
+        } else setBal(floatBal.toPrecision(4))
 
-export const EthAddress = ({ addr, shorten, profileIcon, ...props }: EthAddressProps) => {
-  shorten = typeof shorten === 'undefined' ? true : shorten
+        provider.getNetwork().then(({ name }) => {
+          setSymbol(name)
+        })
+      })
+    }
+  }, [provider, showBalance, addr])
 
   return (
     <div className={`${styles.container} ${props.classNames?.container}`}>
+      {showBalance && (
+        <span className={`${styles.balance} ${props.classNames?.balance}`}>
+          {bal} {symbol.toUpperCase()}
+        </span>
+      )}
       <span className={`${styles.address} ${props.classNames?.address}`}>
         {(shorten && isAddress(addr) && shortenAddress(addr)) || addr}
       </span>

packages/badge/styles/EthAddress.module.css

@@ -1,4 +1,5 @@
-.address {
+.address,
+.balance {
   font-family: sans-serif;
   font-weight: 500;
   color: #252525;
@@ -21,3 +22,9 @@
   border: 50%;
   margin-left: 0.5rem;
 }
+
+.balance {
+  padding-right: 0.4rem;
+  margin-right: 0.4rem;
+  border-right: 2px solid #b4b4b4;
+}

packages/core/package.json

@@ -25,6 +25,8 @@
     "@ethersproject/providers": "^5.4.3",
     "@ethersproject/units": "^5.4.0",
     "@rainbowkit/utils": "workspace:*",
+    "@rainbowkit/badge": "workspace:*",
+    "@rainbowkit/hooks": "workspace:*",
     "@web3-react/abstract-connector": "^6.0.7",
     "@web3-react/core": "^6.1.9"
   },

packages/core/src/index.ts

@@ -1 +1,3 @@
-export * from '@rainbowkit/util'
+export * from '@rainbowkit/utils'
+export * from '@rainbowkit/hooks'
+export * from '@rainbowkit/badge'

packages/docs/components/badge.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import { EthAddress } from '@rainbowkit/badge'
-import { withWeb3React } from '@rainbowkit/util'
+import { setupProvider, withWeb3React } from '@rainbowkit/utils'
 import { useENS } from 'use-ens'
-import { useWeb3React } from '@web3-react/core'
+import { useWeb3React, Web3ReactProvider } from '@web3-react/core'
 import { useConnectOnMount } from '@rainbowkit/core'
 import { InjectedConnector } from '@web3-react/injected-connector'
 
-const injected = new InjectedConnector({})
+const injected = new InjectedConnector({ supportedChainIds: [1, 137, 56, 250] })
 
 const EthAddressPicExample = () => {
   const { library: provider, activate } = useWeb3React()
 
-  const data = useENS(provider, 'foda.eth', { cache: 'force-cache' })
+  const data = useENS({ provider, domain: 'foda.eth', fetchOptions: { cache: 'force-cache' } })
 
   useConnectOnMount(injected, true)
 
@@ -28,4 +28,32 @@ const EthAddressPicExample = () => {
   )
 }
 
-export const EthAddressPic = withWeb3React(EthAddressPicExample)
+export const EthAddressPic = () => (
+  <Web3ReactProvider getLibrary={setupProvider()}>
+    <EthAddressPicExample />
+  </Web3ReactProvider>
+)
+
+const EthAddressBalanceExample = () => {
+  const { library: provider, activate, account: address } = useWeb3React()
+
+  useConnectOnMount(injected, true)
+
+  return (
+    <>
+      <button
+        style={{ border: '3px solid black', padding: '0.4rem', margin: '20px 0', fontWeight: 'bold' }}
+        onClick={() => activate(injected)}
+      >
+        Activate connector
+      </button>
+      <EthAddress showBalance={true} provider={provider} addr={address} />
+    </>
+  )
+}
+
+export const EthAddressBalance = () => (
+  <Web3ReactProvider getLibrary={setupProvider()}>
+    <EthAddressBalanceExample />
+  </Web3ReactProvider>
+)

packages/docs/components/modal.tsx

@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from 'react'
-import { Wallet, useWalletModal } from '@rainbowkit/modal'
-import { withWeb3React } from '@rainbowkit/utils'
+import { useWalletModal } from '@rainbowkit/modal'
 import usePortal from 'react-useportal'
 import styles from '../styles/button.module.css'
+import { Web3ReactProvider } from '@web3-react/core'
+import { setupProvider } from '@rainbowkit/utils'
 
 const ModalExample = () => {
   const { Portal } = usePortal()
 
-  const { disconnect, isConnected, connect, Modal, isConnecting, address } = useWalletModal({
+  const { disconnect, isConnected, connect, Modal, isConnecting, address, connector } = useWalletModal({
     wallets: ['metamask', 'coinbase'],
-    chains: ['polygon', 'mainnet']
+    chains: ['mainnet', 'polygon', 'bsc', 'fantom']
   })
 
   return (
@@ -32,4 +33,8 @@ const ModalExample = () => {
     </>
   )
 }
-export const Modal = withWeb3React(ModalExample)
+export const Modal = () => (
+  <Web3ReactProvider getLibrary={setupProvider()}>
+    <ModalExample />
+  </Web3ReactProvider>
+)

packages/docs/package.json

@@ -5,9 +5,11 @@
     "@ethersproject/units": "^5.4.0",
     "@rainbowkit/badge": "workspace:*",
     "@rainbowkit/core": "workspace:*",
+    "@rainbowkit/hooks": "workspace:^0.0.0",
     "@rainbowkit/modal": "workspace:*",
     "@rainbowkit/utils": "workspace:*",
     "@web3-react/injected-connector": "^6.0.7",
+    "@web3-react/walletlink-connector": "^6.2.3",
     "framer-motion": "^4.1.17",
     "next": "^11.1.0",
     "nextra": "^1.1.0",
@@ -18,6 +20,7 @@
     "use-ens": "workspace:^0.0.0-wip.11"
   },
   "scripts": {
-    "dev": "next"
+    "dev": "next",
+    "build": "next build"
   }
 }

packages/docs/pages/docs/badge.mdx

@@ -1,5 +1,5 @@
 import { EthAddress } from '@rainbowkit/badge'
-import { EthAddressPic } from '../../components/badge'
+import { EthAddressPic, EthAddressBalance } from '../../components/badge'
 
 # `@rainbowkit/badge`
 
@@ -25,23 +25,35 @@ Without shortening:
 
 With profile icon:
 
-```jsx
+```tsx
 import React from 'react'
 import { EthAddress } from '@rainbowkit/badge'
 import { useENS } from 'use-ens'
-import { useConnectOnMount } from '@rainbowkit/core'
+import { useWeb3React } from '@web3-react/core'
 
 const EthAddressPicExample = () => {
-  const data = useENS(provider, 'foda.eth', { cache: 'force-cache' })
+  const { library: provider } = useWeb3React()
 
-  useConnectOnMount(injected, true)
+  const data = useENS(provider, 'foda.eth', { cache: 'force-cache' })
 
-  return (
-    <>
-      <EthAddress addr="foda.eth" profileIcon={data.records?.avatar as string} />
-    </>
-  )
+  return <EthAddress addr="foda.eth" profileIcon={data.records?.avatar as string} />
 }
 ```
 
 <EthAddressPic />
+
+With balance:
+
+```tsx
+import React from 'react'
+import { EthAddress } from '@rainbowkit/badge'
+import { useENS } from 'use-ens'
+
+const EthAddressBalanceExample = () => {
+  const { library: provider, activate, account: address } = useWeb3React()
+
+  return <EthAddress showBalance provider={provider} addr={address} />
+}
+```
+
+<EthAddressBalance />

packages/modal/rollup.config.js

@@ -4,5 +4,5 @@ import config from '../../rollup.config.js'
 export default {
   ...config,
   input: 'src/index.tsx',
-  plugins: [...config.plugins, postcss({ modules: true })]
+  plugins: [...config.plugins, postcss({ modules: true, minimize: false })]
 }

packages/modal/src/index.tsx

@@ -1,3 +1,3 @@
 export * from './useWalletModal'
 export * from './components/Modal'
-export * from '../../utils/src/types'
+export * from './types'

packages/modal/src/types.ts

@@ -1,6 +1,5 @@
 import type { Wallet } from '@rainbowkit/utils'
 import { Dispatch } from 'react'
-import type { ExternalProvider } from '@ethersproject/providers'
 
 export interface ModalProps {
   wallets: Wallet[]

packages/modal/src/useWalletModal.tsx

@@ -3,8 +3,24 @@ import { Web3Provider } from '@ethersproject/providers'
 import { useWeb3React } from '@web3-react/core'
 import { useState } from 'react'
 import { Modal as ModalUI } from './components/Modal'
-import { createConnector, Wallet, Chain, isAuthorized } from '@rainbowkit/utils'
-import { ModalProps } from './types'
+import { isAuthorized } from '@rainbowkit/utils'
+import type { Wallet, Chain } from '@rainbowkit/utils'
+import type { ModalProps } from './types'
+import { createConnector } from './utils'
+import { Web3ReactContextInterface } from '@web3-react/core/dist/types'
+
+export type WalletInterface = Omit<
+  Web3ReactContextInterface<Web3Provider>,
+  'activate' | 'deactivate' | 'library' | 'account' | 'active'
+> & {
+  Modal?: () => JSX.Element
+  connect: () => void
+  disconnect: () => void
+  provider: Web3Provider
+  isConnected: boolean
+  isConnecting: boolean
+  address: string
+}
 
 export const useWalletModal = ({
   modal: ModalComponent,
@@ -14,13 +30,14 @@ export const useWalletModal = ({
   modal?: React.ComponentType<ModalProps> | false
   wallets: (Wallet | string)[]
   chains?: Chain[]
-}) => {
+}): WalletInterface => {
   const {
     activate,
     deactivate,
     library: provider,
     active: isConnected,
-    account: address
+    account: address,
+    ...web3ReactProps
   } = useWeb3React<Web3Provider>()
 
   const wallets = selectedWallets.map((w) =>
@@ -34,17 +51,21 @@ export const useWalletModal = ({
   ) as Wallet[]
 
   const connectToWallet = async (name: string) => {
-    const options = wallets.find((w) => w.name === name).options || {}
+    const options = wallets.find((w) => w.name === name)?.options || {}
+
     const { instance } = await createConnector({ name: name, chains, options })
+
     await activate(instance)
   }
 
   useEffect(() => {
     const walletName = localStorage.getItem('rk-last-wallet')
 
-    isAuthorized().then((yes) => {
-      if (walletName && !isConnected && window.ethereum && yes) connectToWallet(walletName)
-    })
+    if (walletName && !isConnected && window.ethereum && selectedWallets.includes(walletName)) {
+      isAuthorized().then((yes) => {
+        if (yes) connectToWallet(walletName)
+      })
+    }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
@@ -76,8 +97,8 @@ export const useWalletModal = ({
       />
     )
 
-    return { Modal, connect, disconnect, provider, isConnected, isConnecting, address }
+    return { Modal, connect, disconnect, provider, isConnected, isConnecting, address, ...web3ReactProps }
   } else {
-    return { connect, disconnect, provider, isConnected, isConnecting, address }
+    return { connect, disconnect, provider, isConnected, isConnecting, address, ...web3ReactProps }
   }
 }