-
Notifications
You must be signed in to change notification settings - Fork 162
Updates wallet connection and chain switch flows to support wagmi #6899
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
base: develop
Are you sure you want to change the base?
Changes from all commits
6f34021
dedfc39
ad60313
d91df2b
402f4e3
710e45f
bcb0b7c
94b0315
23c79e5
f0b8de1
934055b
e8a69c8
089d755
52e946f
b38b58c
c3f8b40
2a91034
297f37e
8997067
43d4099
67add44
a21f65d
53a64c3
bced543
ba62e2f
2f96fde
890a01a
d9758de
7cc606f
db9ee71
0427ba4
d558250
3290e51
92cdb05
d1f4db5
e41f908
4a43a83
9369c63
ed43ef7
fcffca2
25fc3ca
937faff
301e2de
fed4cf6
c3c05e4
4ae9c38
755901c
9f7c19f
6d8ac96
a38597e
ed6d34b
c1d4c46
aa51eb1
07b506e
d24dac5
a010563
bb4ed75
5477802
c00e977
003b223
06579fe
1e9ff5e
111043c
0f9baca
4cd995d
ee26bc8
0b874db
58bc37b
3a44b39
b8e73ca
f296e7f
07d55cc
44186bb
9b52f23
d036bc5
b553547
1a8c787
a18e9bd
700b6bc
c0ab938
1213c19
4c15cf4
253bddf
42e0a70
320c7b2
8d88cf0
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,7 +1,8 @@ | ||||||||||||||
| import { RPC_URLS } from '@cowprotocol/common-const' | ||||||||||||||
| import { LAUNCH_DARKLY_VIEM_MIGRATION, RPC_URLS } from '@cowprotocol/common-const' | ||||||||||||||
| import { SupportedChainId } from '@cowprotocol/cow-sdk' | ||||||||||||||
|
|
||||||||||||||
| import { safe, injected } from '@wagmi/connectors' | ||||||||||||||
| import { CreateAppKit } from '@reown/appkit/react' | ||||||||||||||
| import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' | ||||||||||||||
| import { Chain, http } from 'viem' | ||||||||||||||
| import { | ||||||||||||||
| arbitrum, | ||||||||||||||
|
|
@@ -17,7 +18,10 @@ import { | |||||||||||||
| polygon, | ||||||||||||||
| sepolia, | ||||||||||||||
| } from 'viem/chains' | ||||||||||||||
| import { createConfig, Transport } from 'wagmi' | ||||||||||||||
| import { Transport } from 'wagmi' | ||||||||||||||
|
|
||||||||||||||
| // TODO change | ||||||||||||||
| const projectId = 'be9f19dedc14dc05c554d97f92aed71d' | ||||||||||||||
|
|
||||||||||||||
|
Comment on lines
+23
to
25
Contributor
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. 🧩 Analysis chain🏁 Script executed: cat -n libs/wallet/src/wagmi/config.tsRepository: cowprotocol/cowswap Length of output: 3557 🏁 Script executed: rg "REOWN|projectId" -i --type ts --type tsx -A 2 -B 2 | head -100Repository: cowprotocol/cowswap Length of output: 90 🏁 Script executed: fd "\.env" -o "env.example" | head -20Repository: cowprotocol/cowswap Length of output: 204 🏁 Script executed: rg "be9f19dedc14dc05c554d97f92aed71d"Repository: cowprotocol/cowswap Length of output: 147 🏁 Script executed: find . -name ".env*" -o -name "vite.config*" | head -20Repository: cowprotocol/cowswap Length of output: 636 🏁 Script executed: rg "VITE_|process.env" --type ts -l | head -10Repository: cowprotocol/cowswap Length of output: 435 🏁 Script executed: rg "reown|appkit" -i --type ts -B 3 -A 3 | grep -i "env\|const\|config" | head -30Repository: cowprotocol/cowswap Length of output: 2551 🏁 Script executed: cat .envRepository: cowprotocol/cowswap Length of output: 45 🏁 Script executed: cat .env.local.exampleRepository: cowprotocol/cowswap Length of output: 557 🏁 Script executed: grep -r "REOWN\|PROJECT_ID" .env* 2>/dev/null | head -20Repository: cowprotocol/cowswap Length of output: 45 🏁 Script executed: cat apps/cowswap-frontend/vite.config.mtsRepository: cowprotocol/cowswap Length of output: 7102 🏁 Script executed: cat tools/getReactProcessEnv.tsRepository: cowprotocol/cowswap Length of output: 479 🏁 Script executed: rg "projectId" --type ts -B 5 -A 5 | head -50Repository: cowprotocol/cowswap Length of output: 3027 🏁 Script executed: find . -path "*/libs/wallet*" -name "*.ts" -o -name "*.tsx" | head -20Repository: cowprotocol/cowswap Length of output: 1038 Remove the TODO and load projectId from environment variable before shipping. The Example-// TODO change
-const projectId = 'be9f19dedc14dc05c554d97f92aed71d'
+const projectId = import.meta.env.VITE_REOWN_PROJECT_ID
+if (!projectId) {
+ throw new Error('Missing VITE_REOWN_PROJECT_ID')
+}Per coding guidelines: Remove linter scaffolding ( 📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||
| const SUPPORTED_CHAIN_IDS = Object.values(SupportedChainId).filter((v) => typeof v === 'number') | ||||||||||||||
|
|
||||||||||||||
|
|
@@ -36,14 +40,49 @@ const SUPPORTED_CHAINS: Record<SupportedChainId, Chain> = { | |||||||||||||
| [SupportedChainId.SEPOLIA]: sepolia, | ||||||||||||||
| } | ||||||||||||||
|
|
||||||||||||||
| export const config = createConfig({ | ||||||||||||||
| chains: SUPPORTED_CHAIN_IDS.map((chainId) => SUPPORTED_CHAINS[chainId]) as [Chain, ...Chain[]], | ||||||||||||||
| const metadata = { | ||||||||||||||
| name: 'CoW Swap', | ||||||||||||||
| description: | ||||||||||||||
| 'CoW Swap finds the lowest prices from all decentralized exchanges and DEX aggregators & saves you more with p2p trading and protection from MEV', | ||||||||||||||
| url: 'https://swap.cow.fi', | ||||||||||||||
| icons: ['https://swap.cow.fi/favicon-light-mode.png'], | ||||||||||||||
| } | ||||||||||||||
|
|
||||||||||||||
| const networks = Object.values(SUPPORTED_CHAINS) as [Chain, ...Chain[]] | ||||||||||||||
|
|
||||||||||||||
| export const wagmiAdapter = new WagmiAdapter({ | ||||||||||||||
| networks, | ||||||||||||||
| transports: SUPPORTED_CHAIN_IDS.reduce( | ||||||||||||||
| (acc, chainId) => { | ||||||||||||||
| acc[chainId] = http(RPC_URLS[chainId]) | ||||||||||||||
| return acc | ||||||||||||||
| }, | ||||||||||||||
| {} as Record<SupportedChainId, Transport>, | ||||||||||||||
| ), | ||||||||||||||
| connectors: [safe(), injected()], | ||||||||||||||
| projectId, | ||||||||||||||
| }) | ||||||||||||||
|
|
||||||||||||||
| export const appKitParams: CreateAppKit = { | ||||||||||||||
| adapters: [wagmiAdapter], | ||||||||||||||
| // TODO M-7 COW-572 | ||||||||||||||
| // this will become false once the feature flag is removed | ||||||||||||||
| allowUnsupportedChain: !LAUNCH_DARKLY_VIEM_MIGRATION, | ||||||||||||||
| defaultNetwork: networks[0], | ||||||||||||||
| enableEIP6963: true, | ||||||||||||||
| enableWalletGuide: false, | ||||||||||||||
| featuredWalletIds: [ | ||||||||||||||
| 'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // metamask | ||||||||||||||
| '18388be9ac2d02726dbac9777c96efaac06d744b2f6d580fccdd4127a6d01fd1', // rabby | ||||||||||||||
| 'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa', // coinbase | ||||||||||||||
| ], | ||||||||||||||
| features: { | ||||||||||||||
| analytics: false, | ||||||||||||||
| email: false, | ||||||||||||||
| socials: false, | ||||||||||||||
| }, | ||||||||||||||
| metadata, | ||||||||||||||
| networks, | ||||||||||||||
| projectId, | ||||||||||||||
| termsConditionsUrl: | ||||||||||||||
| 'https://cow.fi/legal/cowswap-terms?utm_source=swap.cow.fi&utm_medium=web&utm_content=wallet-modal-terms-link', | ||||||||||||||
| } | ||||||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { useCallback } from 'react' | ||
|
|
||
| import { Command } from '@cowprotocol/types' | ||
|
|
||
| import { useDisconnect } from 'wagmi' | ||
|
|
||
| export function useDisconnectWallet(onDisconnect?: Command): () => Promise<void> { | ||
| const { mutateAsync: disconnect } = useDisconnect() | ||
|
|
||
| return useCallback(async () => { | ||
| await disconnect() | ||
|
|
||
| onDisconnect?.() | ||
| }, [disconnect, onDisconnect]) | ||
| } |
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.
🧩 Analysis chain
🏁 Script executed:
Repository: cowprotocol/cowswap
Length of output: 257
🏁 Script executed:
Repository: cowprotocol/cowswap
Length of output: 268
🏁 Script executed:
Repository: cowprotocol/cowswap
Length of output: 5412
🌐 Web query:
@reown/appkit/react v1.8.17 useAppKit hook open() method behavior toggle or open only💡 Result:
In
@reown/appkit/reactv1.8.17,useAppKit().open()is open-only (idempotent), not a toggle—you close the modal withuseAppKit().close(). The modal’s current visibility is exposed viauseAppKitState()(open: boolean). [1] [2]If you want toggle behavior, implement it yourself:
Sources: [useAppKit / open+close] [1], [useAppKitState / open boolean] [2].
[1] (docs.reown.com)
[2] (docs.reown.com)
Citations:
🏁 Script executed:
Repository: cowprotocol/cowswap
Length of output: 1143
🏁 Script executed:
Repository: cowprotocol/cowswap
Length of output: 1630
Fix toggle semantics and stabilize the callback.
When the flag is on, the hook returns a new inline function that only calls
open(). Since@reown/appkit/react@1.8.17treatsopen()as open-only (not a toggle), callers expecting close-on-second-click lose that behavior. Additionally, creating a new function each render creates referential instability for memoized children.Use
useAppKitState()andclose()to properly implement toggle semantics, wrapped inuseCallbackfor stability:♻️ Suggested refactor
export function useToggleWalletModal(): Command { - const { open } = useAppKit() + const { open, close } = useAppKit() + const { open: isOpen } = useAppKitState() const toggleModal = useToggleModal(ApplicationModal.WALLET) - if (LAUNCH_DARKLY_VIEM_MIGRATION) { - return () => open() - } - - return toggleModal + return useCallback(() => { + if (LAUNCH_DARKLY_VIEM_MIGRATION) { + isOpen ? close() : open() + return + } + toggleModal() + }, [open, close, isOpen, toggleModal]) }🤖 Prompt for AI Agents