Skip to content

Commit 9a45d73

Browse files
youngkidwarrior0xBigBoss
youngkidwarrior
and
0xBigBoss
authored
Remove Rainbowkit, use Web3Modal (#474)
* Remove Rainbowkit, use Web3Modal * add envrc * use eip6963 headless eth provider * fix type error * whoopsie * give deposit transaction more time * remove unnecessary create web3 modal * remove old comment * wait longer for deposit tx --------- Co-authored-by: Big Boss <[email protected]>
1 parent f0bf22a commit 9a45d73

File tree

25 files changed

+730
-288
lines changed

25 files changed

+730
-288
lines changed

‎.envrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/bin/bash
2+
dotenv_if_exists .env
3+
dotenv_if_exists .env.local
4+
source_env_if_exists .envrc.private
5+
layout node

‎apps/next/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
"@my/supabase": "workspace:*",
1919
"@my/ui": "workspace:*",
2020
"@plaiceholder/next": "^3.0.0",
21-
"@rainbow-me/rainbowkit": "^2.0.4",
2221
"@supabase/auth-helpers-react": "^0.4.2",
2322
"@supabase/ssr": "^0.0.9",
2423
"@supabase/supabase-js": "2.41.1",

‎apps/next/pages/_app.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import '@rainbow-me/rainbowkit/styles.css'
21
import '../public/reset.css'
32
import '../styles/globals.css'
43

@@ -14,6 +13,15 @@ import Head from 'next/head'
1413
import type { ReactElement, ReactNode } from 'react'
1514
import type { SolitoAppProps } from 'solito'
1615
import { Provider } from 'app/provider'
16+
import { projectId, config as wagmiConfig } from 'app/provider/wagmi/config'
17+
import { createWeb3Modal } from '@web3modal/wagmi/react'
18+
import { baseMainnetClient } from '@my/wagmi'
19+
20+
createWeb3Modal({
21+
wagmiConfig,
22+
projectId,
23+
defaultChain: baseMainnetClient.chain,
24+
})
1725

1826
if (process.env.NODE_ENV === 'production') {
1927
require('../public/tamagui.css')

‎apps/next/pages/deposit/web3.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const Page: NextPageWithLayout = () => {
99
return (
1010
<>
1111
<Head>
12-
<title>Send | Desposit</title>
12+
<title>Send | Deposit</title>
1313
</Head>
1414
<DepositWeb3Screen />
1515
</>
@@ -19,7 +19,7 @@ export const Page: NextPageWithLayout = () => {
1919
export const getServerSideProps = userProtectedGetSSP()
2020

2121
Page.getLayout = (children) => (
22-
<HomeLayout TopNav={<TopNav header="Desposit" />}>{children}</HomeLayout>
22+
<HomeLayout TopNav={<TopNav header="Deposit" />}>{children}</HomeLayout>
2323
)
2424

2525
export default Page

‎packages/app/__mocks__/@rainbow-me/rainbowkit/index.ts

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎packages/app/__mocks__/@web3modal/wagmi/react/index.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const mockAppKit = {
2+
useWeb3Modal: jest.fn().mockReturnValue({
3+
open: jest.fn(),
4+
close: jest.fn(),
5+
}),
6+
}
7+
8+
export const useWeb3Modal = mockAppKit.useWeb3Modal
9+
10+
export default mockAppKit

‎packages/app/features/account/rewards/components/DistributionClaimButton.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
} from 'wagmi'
2727

2828
import { OpenConnectModalWrapper } from 'app/utils/OpenConnectModalWrapper'
29-
import { useConnectModal } from '@rainbow-me/rainbowkit'
29+
import { useWeb3Modal } from '@web3modal/wagmi/react'
3030

3131
interface DistributionsClaimButtonProps {
3232
distribution: UseDistributionsResultData[number]
@@ -59,7 +59,7 @@ export const DistributionClaimButton = ({ distribution }: DistributionsClaimButt
5959
index: share?.index !== undefined ? BigInt(share.index) : undefined,
6060
})
6161
const { isConnected, address: account, chain: accountChain } = useAccount()
62-
const { openConnectModal } = useConnectModal()
62+
const { open: openConnectModal } = useWeb3Modal()
6363
const { error: connectError } = useConnect()
6464
const { chains, switchChain, error: switchError } = useSwitchChain()
6565
const {
@@ -147,7 +147,7 @@ export const DistributionClaimButton = ({ distribution }: DistributionsClaimButt
147147
return (
148148
<>
149149
<OpenConnectModalWrapper>
150-
<Button onPress={openConnectModal}>
150+
<Button onPress={() => openConnectModal()}>
151151
<ButtonText col="$black">Connect Wallet to Claim</ButtonText>
152152
</Button>
153153
</OpenConnectModalWrapper>

‎packages/app/features/account/rewards/screen.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ jest.mock('app/routers/params', () => ({
4848
useRewardsScreenParams: () => [{ distributionNumber: 1 }, jest.fn()],
4949
}))
5050
jest.mock('wagmi')
51-
jest.mock('@rainbow-me/rainbowkit', () => ({
52-
useConnectModal: jest.fn().mockReturnValue({ openConnectModal: jest.fn() }),
51+
jest.mock('@web3modal/wagmi/react', () => ({
52+
useWeb3Modal: jest.fn().mockReturnValue({ open: jest.fn() }),
5353
}))
5454
jest.mock('@my/wagmi', () => ({
5555
__esModule: true,

‎packages/app/features/deposit/web3/screen.test.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,25 @@ import { Provider } from 'app/__mocks__/app/provider'
44
import * as wagmi from 'wagmi'
55
import * as myWagmi from '@my/wagmi'
66
import { DepositWeb3Screen } from './screen'
7-
import * as rainbowkit from '@rainbow-me/rainbowkit'
7+
import * as web3modal from '@web3modal/wagmi/react'
88

99
jest.mock('wagmi')
1010
jest.mock('@my/wagmi')
11-
jest.mock('@rainbow-me/rainbowkit')
11+
jest.mock('@web3modal/wagmi/react')
1212

1313
const { useAccount, useSendTransaction, useBalance, useSwitchAccount } =
1414
wagmi as unknown as typeof import('app/__mocks__/wagmi')
1515
const { useWriteErc20Transfer } = myWagmi as unknown as typeof import('app/__mocks__/@my/wagmi')
16-
const { useChainModal, useConnectModal } =
17-
rainbowkit as unknown as typeof import('app/__mocks__/@rainbow-me/rainbowkit')
16+
const { useWeb3Modal } =
17+
web3modal as unknown as typeof import('app/__mocks__/@web3modal/wagmi/react')
1818

1919
describe('DepositWeb3Screen', () => {
2020
afterEach(() => {
2121
useAccount.mockClear()
2222
useWriteErc20Transfer.mockClear()
2323
useSendTransaction.mockClear()
2424
useBalance.mockClear()
25-
useConnectModal.mockClear()
26-
useChainModal.mockClear()
25+
useWeb3Modal.mockClear()
2726
useSwitchAccount.mockClear()
2827
})
2928
it('renders the deposit web3 form when wallet is connected', async () => {
@@ -93,8 +92,8 @@ describe('DepositWeb3Screen', () => {
9392
useAccount.mockReturnValue({
9493
isConnected: false,
9594
})
96-
useConnectModal.mockReturnValue({
97-
openConnectModal: jest.fn(),
95+
useWeb3Modal.mockReturnValue({
96+
open: jest.fn(),
9897
})
9998

10099
render(
@@ -109,7 +108,7 @@ describe('DepositWeb3Screen', () => {
109108
expect(screen).toMatchSnapshot()
110109
const user = userEvent.setup()
111110
await user.press(screen.getByRole('button', { name: 'Connect to Deposit' }))
112-
expect(useConnectModal).toHaveBeenCalled()
111+
expect(useWeb3Modal).toHaveBeenCalled()
113112
})
114113
it('renders the switch network screen when base network is not selected', async () => {
115114
useAccount.mockReturnValue({
@@ -126,8 +125,8 @@ describe('DepositWeb3Screen', () => {
126125
},
127126
},
128127
})
129-
useChainModal.mockReturnValue({
130-
openChainModal: jest.fn(),
128+
useWeb3Modal.mockReturnValue({
129+
open: jest.fn(),
131130
})
132131
render(
133132
<Provider>
@@ -139,6 +138,6 @@ describe('DepositWeb3Screen', () => {
139138
expect(screen).toMatchSnapshot()
140139
const user = userEvent.setup()
141140
await user.press(switchNetworkButton)
142-
expect(useChainModal).toHaveBeenCalled()
141+
expect(useWeb3Modal).toHaveBeenCalled()
143142
})
144143
})

‎packages/app/features/deposit/web3/screen.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
isWeb,
1515
} from '@my/ui'
1616
import { baseMainnet, useWriteErc20Transfer } from '@my/wagmi'
17-
import { useChainModal, useConnectModal } from '@rainbow-me/rainbowkit'
17+
import { useWeb3Modal } from '@web3modal/wagmi/react'
1818
import { IconEthereum, IconRefresh } from 'app/components/icons'
1919
import { IconChainBase } from 'app/components/icons/IconChainBase'
2020
import { coins } from 'app/data/coins'
@@ -43,9 +43,8 @@ import { z } from 'zod'
4343
* 3. Sign transaction
4444
*/
4545
export function DepositWeb3Screen() {
46-
const { openConnectModal } = useConnectModal()
46+
const { open: openConnectModal } = useWeb3Modal()
4747
const { isConnected, chainId, chain } = useAccount()
48-
const { openChainModal } = useChainModal()
4948

5049
useEffect(() => {
5150
if (!isConnected) {
@@ -65,7 +64,7 @@ export function DepositWeb3Screen() {
6564
<Button
6665
accessible
6766
icon={<IconEthereum size={'$1'} color={'$color12'} />}
68-
onPress={openConnectModal}
67+
onPress={() => openConnectModal()}
6968
maxWidth={'$20'}
7069
>
7170
Connect to Deposit
@@ -86,7 +85,7 @@ export function DepositWeb3Screen() {
8685
<Button
8786
accessible
8887
icon={<IconChainBase size={'$1'} />}
89-
onPress={openChainModal}
88+
onPress={() => openConnectModal({ view: 'Networks' })}
9089
maxWidth={'$20'}
9190
>
9291
Switch
@@ -312,6 +311,7 @@ function DepositForm() {
312311
</Paragraph>
313312
</Fade>
314313
) : null}
314+
315315
<SubmitButton
316316
disabled={!canSubmit || isLoadingReceipt}
317317
iconAfter={isLoadingReceipt ? <Spinner size="small" /> : undefined}
@@ -392,17 +392,18 @@ function FailsafeChainId({ children }: { children: React.ReactNode }) {
392392
const [failsafeChainId, setFailsafeChainId] = useState<number>()
393393
const [error, setError] = useState<string>()
394394
const [ignoreError, setIgnoreError] = useState(false)
395-
const { openChainModal, chainModalOpen } = useChainModal()
395+
const { open: openWeb3Modal } = useWeb3Modal()
396396

397397
// biome-ignore lint/correctness/useExhaustiveDependencies: hack
398398
useEffect(() => {
399399
if (isWeb) {
400+
// @ts-expect-error wagmi connector ensures this is there
400401
window.ethereum
401402
.request({ method: 'eth_chainId' })
402403
.then((cid) => setFailsafeChainId(Number(cid)))
403404
.catch((e) => setError(e.message?.split('.').at(0) ?? e.toString()))
404405
}
405-
}, [chainId, chainModalOpen])
406+
}, [chainId, openWeb3Modal])
406407

407408
if (!isWeb) return children // we don't need to do anything on non-web
408409

@@ -452,7 +453,7 @@ function FailsafeChainId({ children }: { children: React.ReactNode }) {
452453
<Button
453454
accessible
454455
icon={<IconChainBase size={'$1'} />}
455-
onPress={openChainModal}
456+
onPress={() => openWeb3Modal({ view: 'Networks' })}
456457
maxWidth={'$20'}
457458
>
458459
Switch

‎packages/app/jest.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ const config: Config = {
165165

166166
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
167167
transformIgnorePatterns: [
168-
'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|moti|sentry-expo|native-base|react-native-svg|solito|@rainbow-me/rainbowkit|@wagmi|wagmi/*|viem|viem/*|@tamagui/animations-moti)',
168+
'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|moti|sentry-expo|native-base|react-native-svg|solito|@web3modal|@web3modal/*|@wagmi|wagmi/*|viem|viem/*|@tamagui/animations-moti)',
169169
],
170170

171171
moduleNameMapper: {

‎packages/app/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
"@my/wagmi": "workspace:*",
2020
"@noble/curves": "^1.2.0",
2121
"@openzeppelin/merkle-tree": "1.0.5",
22-
"@rainbow-me/rainbowkit": "^2.0.4",
2322
"@react-native-async-storage/async-storage": "1.21.0",
2423
"@scure/base": "^1.1.5",
2524
"@supabase/auth-helpers-nextjs": "^0.9.0",
@@ -36,7 +35,9 @@
3635
"@trpc/client": "11.0.0-next-beta.264",
3736
"@vonovak/react-native-theme-control": "^5.0.1",
3837
"@wagmi/chains": "^1.8.0",
38+
"@wagmi/connectors": "^5.0.15",
3939
"@wagmi/core": "^2.10.5",
40+
"@web3modal/wagmi": "^5.0.2",
4041
"base64-arraybuffer": "^1.0.2",
4142
"burnt": "^0.12.1",
4243
"cbor": "^9.0.1",

‎packages/app/provider/index.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { TamaguiProvider } from './tamagui'
77
import { UniversalThemeProvider } from './theme'
88
import { ToastProvider } from './toast'
99
import { WagmiProvider } from './wagmi'
10-
import { RainbowkitProvider } from './rainbowkit'
1110

1211
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
1312

@@ -42,10 +41,9 @@ const compose = (providers: React.FC<{ children: React.ReactNode }>[]) =>
4241

4342
const Providers = compose([
4443
WagmiProvider,
45-
RainbowkitProvider,
44+
QueryClientProvider,
4645
UniversalThemeProvider,
4746
SafeAreaProvider,
4847
TamaguiProvider,
4948
ToastProvider,
50-
QueryClientProvider,
5149
])

‎packages/app/provider/rainbowkit/RainbowkitProvider.native.tsx

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/app/provider/rainbowkit/RainbowkitProvider.tsx

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎packages/app/provider/rainbowkit/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/app/provider/wagmi/WagmiProvider.tsx

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,8 @@
1-
import { chains } from '@my/wagmi'
21
import type { FC, ReactNode } from 'react'
32
import { WagmiProvider as OGWagmiProvider } from 'wagmi'
3+
import { projectId, config } from './config'
44

5-
import {
6-
argentWallet,
7-
trustWallet,
8-
ledgerWallet,
9-
injectedWallet,
10-
} from '@rainbow-me/rainbowkit/wallets'
11-
import { getDefaultWallets, getDefaultConfig } from '@rainbow-me/rainbowkit'
12-
13-
const { wallets } = getDefaultWallets()
14-
15-
// use the awesome rainbowkit config on web
16-
export const config = getDefaultConfig({
17-
appName: '/send',
18-
appIcon:
19-
'https://github.com/0xsend/sendapp/blob/188fffab9b4d9ab6d332baad09ca14da3308f554/apps/next/public/favicon/apple-touch-icon.png',
20-
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? '',
21-
chains,
22-
wallets: [
23-
...wallets,
24-
{
25-
groupName: 'Other',
26-
wallets: [injectedWallet, argentWallet, trustWallet, ledgerWallet],
27-
},
28-
],
29-
ssr: true,
30-
})
5+
if (!projectId) throw new Error('Project ID is not defined')
316

327
export const WagmiProvider: FC<{ children: ReactNode }> = ({
338
children,

‎packages/app/provider/wagmi/config.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { chains } from '@my/wagmi'
2+
3+
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
4+
5+
export const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? ''
6+
7+
const metadata = {
8+
name: '/send',
9+
description: 'Send App',
10+
url: 'https://send.app',
11+
icons: [
12+
'https://raw.githubusercontent.com/0xsend/sendapp/188fffab9b4d9ab6d332baad09ca14da3308f554/apps/next/public/favicon/apple-touch-icon.png',
13+
],
14+
}
15+
16+
export const config = defaultWagmiConfig({
17+
chains,
18+
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? '',
19+
metadata,
20+
enableInjected: true,
21+
ssr: true,
22+
auth: {
23+
email: false,
24+
},
25+
})

‎packages/app/utils/OpenConnectModalWrapper.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Stack, Theme, type StackProps } from '@my/ui'
22

33
import { useAccount } from 'wagmi'
4-
import { useConnectModal } from '@rainbow-me/rainbowkit'
4+
import { useWeb3Modal } from '@web3modal/wagmi/react'
55

66
export const OpenConnectModalWrapper = ({ children, ...props }: StackProps) => {
77
const { address } = useAccount()
8-
const { openConnectModal } = useConnectModal()
8+
const { open: openConnectModal } = useWeb3Modal()
99

1010
const handleClick = (e) => {
1111
if (address || !openConnectModal) return

0 commit comments

Comments
 (0)