-
Notifications
You must be signed in to change notification settings - Fork 13
[TASK-7005] fix: migrate web3Modal to reown-appkit #576
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
cc8d0e1
5e3c8a1
538da7d
1899f61
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -1,79 +1,94 @@ | ||||||||||||||||||||||||||
'use client' | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
import * as consts from '@/constants' | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
import { createWeb3Modal } from '@web3modal/wagmi/react' | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
import { WagmiProvider, createConfig, http } from 'wagmi' | ||||||||||||||||||||||||||
import { createAppKit } from '@reown/appkit/react' | ||||||||||||||||||||||||||
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' | ||||||||||||||||||||||||||
import { CreateConnectorFn, WagmiProvider, http } from 'wagmi' | ||||||||||||||||||||||||||
import { coinbaseWallet, injected, safe, walletConnect } from 'wagmi/connectors' | ||||||||||||||||||||||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' | ||||||||||||||||||||||||||
import { createClient } from 'viem' | ||||||||||||||||||||||||||
import { authConnector } from '@web3modal/wagmi' | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
// 0. Setup queryClient | ||||||||||||||||||||||||||
const queryClient = new QueryClient() | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
// 1. Get projectId at https://cloud.walletconnect.com | ||||||||||||||||||||||||||
// 1. Get projectId at https://cloud.reown.com | ||||||||||||||||||||||||||
const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID ?? '' | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
// 2. Create wagmiConfig | ||||||||||||||||||||||||||
const metadata = { | ||||||||||||||||||||||||||
name: 'Peanut Protocol', | ||||||||||||||||||||||||||
description: 'Peanut protocol - send crypto with links', | ||||||||||||||||||||||||||
url: 'https://peanut.to', // origin must match your domain & subdomain | ||||||||||||||||||||||||||
url: process.env.NEXT_PUBLIC_BASE_URL || 'https://peanut.to', // origin must match your domain & subdomain | ||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🔥🔥🔥🔥 |
||||||||||||||||||||||||||
icons: [''], | ||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
const config = createConfig({ | ||||||||||||||||||||||||||
chains: consts.chains, | ||||||||||||||||||||||||||
connectors: [ | ||||||||||||||||||||||||||
safe({ | ||||||||||||||||||||||||||
allowedDomains: [/app.safe.global$/, /.*\.blockscout\.com$/, /^(.*\.)?intersend\.io$/], | ||||||||||||||||||||||||||
shimDisconnect: true, | ||||||||||||||||||||||||||
}), | ||||||||||||||||||||||||||
walletConnect({ | ||||||||||||||||||||||||||
projectId, | ||||||||||||||||||||||||||
metadata, | ||||||||||||||||||||||||||
showQrModal: false, | ||||||||||||||||||||||||||
}), | ||||||||||||||||||||||||||
coinbaseWallet({ | ||||||||||||||||||||||||||
appName: 'Peanut Protocol', | ||||||||||||||||||||||||||
}), | ||||||||||||||||||||||||||
injected({ shimDisconnect: true }), | ||||||||||||||||||||||||||
// // @ts-ignore | ||||||||||||||||||||||||||
// authConnector({ | ||||||||||||||||||||||||||
// chains: consts.chains, | ||||||||||||||||||||||||||
// options: { | ||||||||||||||||||||||||||
// projectId, | ||||||||||||||||||||||||||
// }, | ||||||||||||||||||||||||||
// email: false, | ||||||||||||||||||||||||||
// // socials: ['google', 'github', 'apple', 'email', 'discord', 'facebook'] | ||||||||||||||||||||||||||
// }), | ||||||||||||||||||||||||||
], | ||||||||||||||||||||||||||
client({ chain }) { | ||||||||||||||||||||||||||
return createClient({ chain, transport: http() }) | ||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||
// 3. Create transports for each chain | ||||||||||||||||||||||||||
const transports = Object.fromEntries(consts.chains.map((chain) => [chain.id, http(chain.rpcUrls.default.http[0])])) | ||||||||||||||||||||||||||
Comment on lines
+24
to
+25
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Add error handling for RPC URL configuration Consider adding validation and error handling for RPC URLs to prevent runtime issues with invalid configurations. -const transports = Object.fromEntries(consts.chains.map((chain) => [chain.id, http(chain.rpcUrls.default.http[0])]))
+const transports = Object.fromEntries(
+ consts.chains.map((chain) => {
+ const rpcUrl = chain.rpcUrls.default.http[0]
+ if (!rpcUrl) {
+ throw new Error(`No RPC URL configured for chain ${chain.id}`)
+ }
+ return [chain.id, http(rpcUrl)]
+ })
+) 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
// 4. Create connectors | ||||||||||||||||||||||||||
const connectors: CreateConnectorFn[] = [ | ||||||||||||||||||||||||||
injected({ shimDisconnect: true }), | ||||||||||||||||||||||||||
safe({ | ||||||||||||||||||||||||||
allowedDomains: [/app.safe.global$/, /.*\.blockscout\.com$/, /^(.*\.)?intersend\.io$/], | ||||||||||||||||||||||||||
kushagrasarathe marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||||||||||||||||||
shimDisconnect: true, | ||||||||||||||||||||||||||
}), | ||||||||||||||||||||||||||
walletConnect({ | ||||||||||||||||||||||||||
projectId, | ||||||||||||||||||||||||||
metadata, | ||||||||||||||||||||||||||
showQrModal: false, | ||||||||||||||||||||||||||
}), | ||||||||||||||||||||||||||
coinbaseWallet({ | ||||||||||||||||||||||||||
appName: metadata.name, | ||||||||||||||||||||||||||
appLogoUrl: metadata.icons[0], | ||||||||||||||||||||||||||
}), | ||||||||||||||||||||||||||
] | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
// 5. Create WagmiAdapter with required properties | ||||||||||||||||||||||||||
const wagmiAdapter = new WagmiAdapter({ | ||||||||||||||||||||||||||
networks: consts.chains, | ||||||||||||||||||||||||||
projectId, | ||||||||||||||||||||||||||
transports, | ||||||||||||||||||||||||||
connectors, | ||||||||||||||||||||||||||
ssr: true, | ||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
// 3. Create modal (you have to run pnpm build for changes to take effect) | ||||||||||||||||||||||||||
createWeb3Modal({ | ||||||||||||||||||||||||||
wagmiConfig: config, | ||||||||||||||||||||||||||
// 6. Create AppKit | ||||||||||||||||||||||||||
createAppKit({ | ||||||||||||||||||||||||||
adapters: [wagmiAdapter], | ||||||||||||||||||||||||||
networks: consts.chains, | ||||||||||||||||||||||||||
metadata, | ||||||||||||||||||||||||||
projectId, | ||||||||||||||||||||||||||
enableAnalytics: true, // Optional - defaults to your Cloud configuration | ||||||||||||||||||||||||||
features: { | ||||||||||||||||||||||||||
analytics: true, | ||||||||||||||||||||||||||
email: false, | ||||||||||||||||||||||||||
socials: false, | ||||||||||||||||||||||||||
onramp: true, | ||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||
Comment on lines
+55
to
+65
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Potential duplication in createAppKit calls - createAppKit({
- adapters: [wagmiAdapter],
- ...
- })
-
+// Consider removing the duplicate call if not strictly needed.
|
||||||||||||||||||||||||||
themeVariables: { | ||||||||||||||||||||||||||
'--w3m-border-radius-master': '0px', | ||||||||||||||||||||||||||
// '--w3m-accent': 'white', | ||||||||||||||||||||||||||
'--w3m-color-mix': 'white', | ||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||
enableOnramp: true, | ||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
console.log('Created Web3modal') | ||||||||||||||||||||||||||
createAppKit({ | ||||||||||||||||||||||||||
adapters: [wagmiAdapter], | ||||||||||||||||||||||||||
networks: consts.chains, | ||||||||||||||||||||||||||
metadata, | ||||||||||||||||||||||||||
projectId, | ||||||||||||||||||||||||||
features: { | ||||||||||||||||||||||||||
analytics: true, | ||||||||||||||||||||||||||
email: false, | ||||||||||||||||||||||||||
socials: false, | ||||||||||||||||||||||||||
onramp: true, | ||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||
themeVariables: { | ||||||||||||||||||||||||||
'--w3m-border-radius-master': '0px', | ||||||||||||||||||||||||||
'--w3m-color-mix': 'white', | ||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
export function ContextProvider({ children }: { children: React.ReactNode }) { | ||||||||||||||||||||||||||
return ( | ||||||||||||||||||||||||||
<WagmiProvider config={config}> | ||||||||||||||||||||||||||
<WagmiProvider config={wagmiAdapter.wagmiConfig}> | ||||||||||||||||||||||||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider> | ||||||||||||||||||||||||||
</WagmiProvider> | ||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Codebase verification
Add error handling for wallet connection
The
open()
call in TokenSelector.tsx lacks error handling. While most usages ofopen()
in the codebase are direct calls, there is a precedent inRequest/Pay/Views/Initial.view.tsx
that uses.finally()
. Consider adding error handling using.catch()
to handle potential wallet connection failures gracefully and provide feedback to users.Example locations needing attention:
src/components/Global/TokenSelector/TokenSelector.tsx:189
- Add.catch()
handler for theopen()
call🔗 Analysis chain
Open wallet flow
Using “open()” to trigger the wallet connection from reown-appkit is straightforward. Ensure appropriate error handling or fallback in case the wallet configuration fails.
Let me gather more information about error handling around these
open()
calls.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
Length of output: 10560
Script:
Length of output: 167