diff --git a/.yarn/patches/@solana-wallet-adapter-react-npm-0.15.39-86277fdcc0.patch b/.yarn/patches/@solana-wallet-adapter-react-npm-0.15.39-86277fdcc0.patch new file mode 100644 index 00000000..bed7f3f2 --- /dev/null +++ b/.yarn/patches/@solana-wallet-adapter-react-npm-0.15.39-86277fdcc0.patch @@ -0,0 +1,165 @@ +diff --git a/lib/cjs/WalletProvider.js b/lib/cjs/WalletProvider.js +index 9c3d07cabf94c064cf9750480a77a856ab799fda..9e7f01bd258288fe6705190842232f0c3788c619 100644 +--- a/lib/cjs/WalletProvider.js ++++ b/lib/cjs/WalletProvider.js +@@ -144,26 +144,30 @@ function WalletProvider({ children, wallets: adapters, autoConnect, localStorage + }); + }, [autoConnect, adapter]); + const isUnloadingRef = (0, react_1.useRef)(false); +- (0, react_1.useEffect)(() => { +- if (walletName === wallet_adapter_mobile_1.SolanaMobileWalletAdapterWalletName && getIsMobile(adaptersWithStandardAdapters)) { +- isUnloadingRef.current = false; +- return; +- } +- function handleBeforeUnload() { +- isUnloadingRef.current = true; +- } +- /** +- * Some wallets fire disconnection events when the window unloads. Since there's no way to +- * distinguish between a disconnection event received because a user initiated it, and one +- * that was received because they've closed the window, we have to track window unload +- * events themselves. Downstream components use this information to decide whether to act +- * upon or drop wallet events and errors. +- */ +- window.addEventListener('beforeunload', handleBeforeUnload); +- return () => { +- window.removeEventListener('beforeunload', handleBeforeUnload); +- }; +- }, [adaptersWithStandardAdapters, walletName]); ++ // beforeunload event removed to avoid bug with Chrome on Android ++ // We also only except to handle the MetaMask solana wallet standard provider ++ // which does not emit a disconnect event when the window is unloaded which ++ // the commented code block was trying to handle. ++ // (0, react_1.useEffect)(() => { ++ // if (walletName === wallet_adapter_mobile_1.SolanaMobileWalletAdapterWalletName && getIsMobile(adaptersWithStandardAdapters)) { ++ // isUnloadingRef.current = false; ++ // return; ++ // } ++ // function handleBeforeUnload() { ++ // isUnloadingRef.current = true; ++ // } ++ // /** ++ // * Some wallets fire disconnection events when the window unloads. Since there's no way to ++ // * distinguish between a disconnection event received because a user initiated it, and one ++ // * that was received because they've closed the window, we have to track window unload ++ // * events themselves. Downstream components use this information to decide whether to act ++ // * upon or drop wallet events and errors. ++ // */ ++ // window.addEventListener('beforeunload', handleBeforeUnload); ++ // return () => { ++ // window.removeEventListener('beforeunload', handleBeforeUnload); ++ // }; ++ // }, [adaptersWithStandardAdapters, walletName]); + const handleConnectError = (0, react_1.useCallback)(() => { + if (adapter) { + // If any error happens while connecting, unset the adapter. +diff --git a/lib/esm/WalletProvider.js b/lib/esm/WalletProvider.js +index d5dcd36332ead1ede05424537577158a033fa2f0..6eb1042aad4f52bf331023551dcbbc8b5e98877c 100644 +--- a/lib/esm/WalletProvider.js ++++ b/lib/esm/WalletProvider.js +@@ -95,26 +95,30 @@ export function WalletProvider({ children, wallets: adapters, autoConnect, local + }; + }, [autoConnect, adapter]); + const isUnloadingRef = useRef(false); +- useEffect(() => { +- if (walletName === SolanaMobileWalletAdapterWalletName && getIsMobile(adaptersWithStandardAdapters)) { +- isUnloadingRef.current = false; +- return; +- } +- function handleBeforeUnload() { +- isUnloadingRef.current = true; +- } +- /** +- * Some wallets fire disconnection events when the window unloads. Since there's no way to +- * distinguish between a disconnection event received because a user initiated it, and one +- * that was received because they've closed the window, we have to track window unload +- * events themselves. Downstream components use this information to decide whether to act +- * upon or drop wallet events and errors. +- */ +- window.addEventListener('beforeunload', handleBeforeUnload); +- return () => { +- window.removeEventListener('beforeunload', handleBeforeUnload); +- }; +- }, [adaptersWithStandardAdapters, walletName]); ++ // beforeunload event removed to avoid bug with Chrome on Android ++ // We also only except to handle the MetaMask solana wallet standard provider ++ // which does not emit a disconnect event when the window is unloaded which ++ // the commented code block was trying to handle. ++ // useEffect(() => { ++ // if (walletName === SolanaMobileWalletAdapterWalletName && getIsMobile(adaptersWithStandardAdapters)) { ++ // isUnloadingRef.current = false; ++ // return; ++ // } ++ // function handleBeforeUnload() { ++ // isUnloadingRef.current = true; ++ // } ++ // /** ++ // * Some wallets fire disconnection events when the window unloads. Since there's no way to ++ // * distinguish between a disconnection event received because a user initiated it, and one ++ // * that was received because they've closed the window, we have to track window unload ++ // * events themselves. Downstream components use this information to decide whether to act ++ // * upon or drop wallet events and errors. ++ // */ ++ // window.addEventListener('beforeunload', handleBeforeUnload); ++ // return () => { ++ // window.removeEventListener('beforeunload', handleBeforeUnload); ++ // }; ++ // }, [adaptersWithStandardAdapters, walletName]); + const handleConnectError = useCallback(() => { + if (adapter) { + // If any error happens while connecting, unset the adapter. +diff --git a/src/WalletProvider.tsx b/src/WalletProvider.tsx +index 7d4723ef7877ed1c2da3bd57f74ec7b12743e085..601470de23a877232ce11262cca1758990e64425 100644 +--- a/src/WalletProvider.tsx ++++ b/src/WalletProvider.tsx +@@ -124,26 +124,30 @@ export function WalletProvider({ + }; + }, [autoConnect, adapter]); + const isUnloadingRef = useRef(false); +- useEffect(() => { +- if (walletName === SolanaMobileWalletAdapterWalletName && getIsMobile(adaptersWithStandardAdapters)) { +- isUnloadingRef.current = false; +- return; +- } +- function handleBeforeUnload() { +- isUnloadingRef.current = true; +- } +- /** +- * Some wallets fire disconnection events when the window unloads. Since there's no way to +- * distinguish between a disconnection event received because a user initiated it, and one +- * that was received because they've closed the window, we have to track window unload +- * events themselves. Downstream components use this information to decide whether to act +- * upon or drop wallet events and errors. +- */ +- window.addEventListener('beforeunload', handleBeforeUnload); +- return () => { +- window.removeEventListener('beforeunload', handleBeforeUnload); +- }; +- }, [adaptersWithStandardAdapters, walletName]); ++ // beforeunload event removed to avoid bug with Chrome on Android ++ // We also only except to handle the MetaMask solana wallet standard provider ++ // which does not emit a disconnect event when the window is unloaded which ++ // the commented code block was trying to handle. ++ // useEffect(() => { ++ // if (walletName === SolanaMobileWalletAdapterWalletName && getIsMobile(adaptersWithStandardAdapters)) { ++ // isUnloadingRef.current = false; ++ // return; ++ // } ++ // function handleBeforeUnload() { ++ // isUnloadingRef.current = true; ++ // } ++ // /** ++ // * Some wallets fire disconnection events when the window unloads. Since there's no way to ++ // * distinguish between a disconnection event received because a user initiated it, and one ++ // * that was received because they've closed the window, we have to track window unload ++ // * events themselves. Downstream components use this information to decide whether to act ++ // * upon or drop wallet events and errors. ++ // */ ++ // window.addEventListener('beforeunload', handleBeforeUnload); ++ // return () => { ++ // window.removeEventListener('beforeunload', handleBeforeUnload); ++ // }; ++ // }, [adaptersWithStandardAdapters, walletName]); + const handleConnectError = useCallback(() => { + if (adapter) { + // If any error happens while connecting, unset the adapter. diff --git a/package.json b/package.json index 430ec374..e8d0d776 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,8 @@ "pre-push": "yarn lint" }, "resolutions": { - "bs58": "4.0.1" + "bs58": "4.0.1", + "@solana/wallet-adapter-react@npm:^0.15.39": "patch:@solana/wallet-adapter-react@npm%3A0.15.39#~/.yarn/patches/@solana-wallet-adapter-react-npm-0.15.39-86277fdcc0.patch" }, "devDependencies": { "@babel/core": "^7.28.4", diff --git a/playground/browser-playground/CHANGELOG.md b/playground/browser-playground/CHANGELOG.md index e0b0e7cd..e0278449 100644 --- a/playground/browser-playground/CHANGELOG.md +++ b/playground/browser-playground/CHANGELOG.md @@ -10,6 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Add disconnect buttons to cards ([#157](https://github.com/MetaMask/connect-monorepo/pull/157)) +- Add `data-testid` attributes to Solana components ([#174](https://github.com/MetaMask/connect-monorepo/pull/174)) +- Add `data-testid` attributes to Legacy EVM and Wagmi disconnect buttons ([#174](https://github.com/MetaMask/connect-monorepo/pull/174)) + +### Changed + +- Patch `@solana/wallet-adapter-react` to work with android native browser ([#174](https://github.com/MetaMask/connect-monorepo/pull/174)) ### Changed diff --git a/playground/browser-playground/package.json b/playground/browser-playground/package.json index 0ba4148c..55dad2b2 100644 --- a/playground/browser-playground/package.json +++ b/playground/browser-playground/package.json @@ -63,7 +63,7 @@ "@metamask/utils": "^11.8.1", "@open-rpc/meta-schema": "^1.14.9", "@open-rpc/schema-utils-js": "^2.0.5", - "@solana/wallet-adapter-react": "^0.15.35", + "@solana/wallet-adapter-react": "patch:@solana/wallet-adapter-react@npm%3A0.15.39#~/.yarn/patches/@solana-wallet-adapter-react-npm-0.15.39-86277fdcc0.patch", "@solana/wallet-adapter-react-ui": "^0.9.35", "@solana/wallet-standard-chains": "^1.1.1", "@solana/web3.js": "^1.98.0", diff --git a/playground/browser-playground/src/App.tsx b/playground/browser-playground/src/App.tsx index 9cb0395d..077147de 100644 --- a/playground/browser-playground/src/App.tsx +++ b/playground/browser-playground/src/App.tsx @@ -55,10 +55,11 @@ function App() { const { connected: solanaConnected, + connecting: solanaConnecting, + disconnecting: solanaDisconnecting, publicKey: solanaPublicKey, wallets, select, - connect: solanaConnect, } = useWallet(); const handleCheckboxChange = useCallback( diff --git a/playground/browser-playground/src/components/LegacyEVMCard.tsx b/playground/browser-playground/src/components/LegacyEVMCard.tsx index a3ceb6f7..4e0171f2 100644 --- a/playground/browser-playground/src/components/LegacyEVMCard.tsx +++ b/playground/browser-playground/src/components/LegacyEVMCard.tsx @@ -177,6 +177,7 @@ export function LegacyEVMCard({ {signedMessage && ( -
+

Signed Message

{signedMessage} @@ -189,13 +193,14 @@ export const SolanaWalletCard: React.FC = () => { {/* Transaction Section */} {connected && ( -

+

Transactions

{transactionSignature && ( -
+

Transaction Signature

{transactionSignature} @@ -225,7 +231,7 @@ export const SolanaWalletCard: React.FC = () => { {/* Error Display */} {error && ( -

+

{error}

)} diff --git a/playground/browser-playground/src/components/WagmiCard.tsx b/playground/browser-playground/src/components/WagmiCard.tsx index 91148529..bbd5eb88 100644 --- a/playground/browser-playground/src/components/WagmiCard.tsx +++ b/playground/browser-playground/src/components/WagmiCard.tsx @@ -64,6 +64,7 @@ export function WagmiCard() {