@btc-vision/walletconnect 1.5.4 → 1.5.6

package/browser/wallets/unisat/controller.d.ts

@@ -1,6 +1,6 @@
 import { type Unisat, UnisatChainType, UnisatSigner } from '@btc-vision/transaction';
-import { type WalletBase } from '../types';
 import { AbstractRpcProvider } from 'opnet';
+import { type WalletBase } from '../types';
 declare class UnisatWallet implements WalletBase {
     private walletBase;
     private accountsChangedHookWrapper?;

package/build/provider/WalletConnectProvider.js

@@ -9,6 +9,7 @@ import '../utils/theme.css';
 import { WalletController } from '../wallets';
 const AUTO_RECONNECT_RETRIES = 5;
 const WalletConnectProvider = ({ theme, children }) => {
+    const [pageLoaded, setPageLoaded] = useState(false);
     const [connectError, setConnectError] = useState(undefined);
     const timeoutRef = useRef(null);
     const [network, setNetwork] = useState(DefaultWalletConnectNetwork);
@@ -27,6 +28,18 @@ const WalletConnectProvider = ({ theme, children }) => {
             clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setConnectError(undefined), 5000);
     }, []);
+    useEffect(() => {
+        const onPageLoad = () => {
+            setPageLoaded(true);
+        };
+        if (document.readyState === 'complete') {
+            onPageLoad();
+        }
+        else {
+            window.addEventListener('load', onPageLoad, false);
+            return () => window.removeEventListener('load', onPageLoad);
+        }
+    }, []);
     useEffect(() => {
         if (connectError) {
             clearConnectError();
@@ -109,7 +122,7 @@ const WalletConnectProvider = ({ theme, children }) => {
             }
         };
         await reconnect();
-    }, [selectedWallet, connectToWallet]);
+    }, [selectedWallet, connectToWallet, pageLoaded]);
     useEffect(() => {
         void attemptReconnect();
     }, [attemptReconnect]);
@@ -136,10 +149,10 @@ const WalletConnectProvider = ({ theme, children }) => {
                 isConnected: wallet.controller.isConnected(),
             };
         });
-    }, [supportedWallets, network]);
+    }, [supportedWallets, network, pageLoaded]);
     const availableWallets = useMemo(() => {
         return supportedWallets.filter((wallet) => wallet.controller.isInstalled());
-    }, [supportedWallets, network]);
+    }, [supportedWallets, network, pageLoaded]);
     useEffect(() => {
         const walletType = walletAddress ? WalletController.getWalletType() : null;
         setWalletType(walletType);
@@ -183,6 +196,6 @@ const WalletConnectProvider = ({ theme, children }) => {
             walletType,
         }, children: [children, modalOpen && (_jsx("div", { className: `wallet-connect-modal-backdrop ${currentTheme}`, children: _jsxs("div", { className: "wallet-connect-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "wallet-connect-modal-title", children: [_jsxs("div", { className: "wallet-connect-header", children: [_jsx("span", { children: "Connect Wallet" }), _jsx("button", { className: "close", onClick: () => closeConnectModal(), children: _jsx("span", { className: "close-icon", children: _jsx("svg", { width: "30px", height: "30px", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { className: "close-x-path", d: "M16 8L8 16M8.00001 8L16 16", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) })] }), connectError && (_jsx("div", { className: "wallet-connect-error", children: _jsx("p", { className: "error-message", children: connectError }) })), availableWallets.length > 0 ? (_jsx("div", { className: "wallet-list", children: availableWallets.map((wallet) => (_jsxs("button", { onClick: () => connectToWallet(wallet.name), disabled: connecting || !wallet.controller.isInstalled(), className: `wallet-button ${wallet.controller.isInstalled()
                                     ? 'wallet-installed'
-                                    : 'wallet-not-installed'}`, children: [wallet.icon ? (_jsx("div", { className: "wallet-icon", title: wallet.name, children: _jsx("img", { src: wallet.icon, alt: wallet.name }) })) : (_jsx("div", { className: "wallet-name", children: wallet.name })), wallet.controller.isConnected() ? (_jsx("div", { className: "wallet-connected", children: "(Connected)" })) : (_jsx(_Fragment, {})), wallet.controller.isInstalled() ? (_jsx(_Fragment, {})) : (_jsx("div", { className: "wallet-not-installed", children: "(Not Installed)" }))] }, wallet.name))) })) : (_jsxs("div", { children: [_jsx("p", { children: "No wallets available" }), _jsx("p", { children: "Supporting the following wallets" }), _jsx("div", { className: "wallet-list", children: supportedWallets.map((wallet) => (_jsx("a", { href: `https://chromewebstore.google.com/search/${wallet.name}`, children: wallet.icon ? (_jsx("div", { className: "wallet-icon", title: wallet.name, children: _jsx("img", { src: wallet.icon, alt: wallet.name }) })) : (_jsx("div", { className: "wallet-name", children: wallet.name })) }))) })] }))] }) }))] }));
+                                    : 'wallet-not-installed'}`, children: [wallet.icon ? (_jsx("div", { className: "wallet-icon", title: wallet.name, children: _jsx("img", { src: wallet.icon, alt: wallet.name }) })) : (_jsx("div", { className: "wallet-name", children: wallet.name })), wallet.controller.isConnected() ? (_jsx("div", { className: "wallet-connected", children: "(Connected)" })) : (_jsx(_Fragment, {})), wallet.controller.isInstalled() ? (_jsx(_Fragment, {})) : (_jsx("div", { className: "wallet-not-installed", children: "(Not Installed)" }))] }, wallet.name))) })) : pageLoaded ? (_jsxs("div", { children: [_jsx("p", { children: "No wallets available" }), _jsx("p", { children: "Supporting the following wallets" }), _jsx("div", { className: "wallet-list", children: supportedWallets.map((wallet) => (_jsx("a", { href: `https://chromewebstore.google.com/search/${wallet.name}`, children: wallet.icon ? (_jsx("div", { className: "wallet-icon", title: wallet.name, children: _jsx("img", { src: wallet.icon, alt: wallet.name }) })) : (_jsx("div", { className: "wallet-name", children: wallet.name })) }))) })] })) : (_jsxs("div", { className: "wallet-waiting-plugin", children: [_jsx("p", { children: "Loading plugins..." }), _jsx("p", { children: "Please wait" })] }))] }) }))] }));
 };
 export default WalletConnectProvider;

package/build/wallets/unisat/controller.d.ts

@@ -1,6 +1,6 @@
 import { type Unisat, UnisatChainType, UnisatSigner } from '@btc-vision/transaction';
-import { type WalletBase } from '../types';
 import { AbstractRpcProvider } from 'opnet';
+import { type WalletBase } from '../types';
 declare class UnisatWallet implements WalletBase {
     private walletBase;
     private accountsChangedHookWrapper?;

package/build/wallets/unisat/controller.js

@@ -1,8 +1,8 @@
-import { UnisatChainType, UnisatSigner } from '@btc-vision/transaction';
+import { networks } from '@btc-vision/bitcoin';
+import { UnisatChainType, UnisatSigner, } from '@btc-vision/transaction';
+import { AbstractRpcProvider, JSONRpcProvider } from 'opnet';
 import {} from '../types';
 import {} from './interface';
-import { AbstractRpcProvider, JSONRpcProvider } from 'opnet';
-import { networks } from '@btc-vision/bitcoin';
 const notInstalledError = 'UNISAT is not installed';
 class UnisatWallet {
     constructor() {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@btc-vision/walletconnect",
     "type": "module",
-    "version": "1.5.4",
+    "version": "1.5.6",
     "author": "impredmet",
     "description": "The OP_NET Wallet Connect library helps your dApp connect to any compatible wallet.",
     "engines": {
@@ -82,19 +82,19 @@
         "react-dom": "^19.1.1",
         "stream-browserify": "^3.0.0",
         "stream-http": "^3.2.0",
-        "typescript-eslint": "^8.41.0",
+        "typescript-eslint": "^8.42.0",
         "webpack-cli": "^6.0.1"
     },
     "dependencies": {
         "@btc-vision/bitcoin": "^6.4.8",
-        "@btc-vision/transaction": "^1.6.11",
+        "@btc-vision/transaction": "^1.6.15",
         "@eslint/js": "^9.34.0",
         "css-loader": "^7.1.2",
         "eslint-plugin-react-hooks": "^5.2.0",
         "gulp-clean": "^0.4.0",
         "gulp-eslint-new": "^2.4.0",
         "gulp-logger-new": "^1.0.1",
-        "opnet": "^1.6.23",
+        "opnet": "^1.6.27",
         "style-loader": "^4.0.0",
         "webpack": "^5.101.3"
     }

package/src/provider/WalletConnectProvider.tsx

@@ -22,6 +22,7 @@ interface WalletConnectProviderProps {
 }
 
 const WalletConnectProvider: React.FC<WalletConnectProviderProps> = ({ theme, children }) => {
+    const [pageLoaded, setPageLoaded] = useState<boolean>(false);
     const [connectError, setConnectError] = useState<string | undefined>(undefined);
     const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -46,6 +47,21 @@ const WalletConnectProvider: React.FC<WalletConnectProviderProps> = ({ theme, ch
         timeoutRef.current = setTimeout(() => setConnectError(undefined), 5000);
     }, []);
 
+    // This will run one time after the component mounts
+    useEffect(() => {
+        // callback function to call when event triggers
+        const onPageLoad = () => {
+            setPageLoaded(true);
+        };
+
+        if (document.readyState === 'complete') {
+            onPageLoad();
+        } else {
+            window.addEventListener('load', onPageLoad, false);
+            return () => window.removeEventListener('load', onPageLoad);
+        }
+    }, []);
+
     useEffect(() => {
         if (connectError) {
             clearConnectError();
@@ -144,7 +160,7 @@ const WalletConnectProvider: React.FC<WalletConnectProviderProps> = ({ theme, ch
 
         await reconnect();
         // eslint-disable-next-line
-    }, [selectedWallet, connectToWallet]);
+    }, [selectedWallet, connectToWallet, pageLoaded]);
 
     useEffect(() => {
         void attemptReconnect();
@@ -184,13 +200,13 @@ const WalletConnectProvider: React.FC<WalletConnectProviderProps> = ({ theme, ch
             };
         });
         // eslint-disable-next-line
-    }, [supportedWallets, network]);
+    }, [supportedWallets, network, pageLoaded]);
 
     const availableWallets = useMemo(() => {
         return supportedWallets.filter((wallet) => wallet.controller.isInstalled());
         //return supportedWallets
         // eslint-disable-next-line
-    }, [supportedWallets, network]);
+    }, [supportedWallets, network, pageLoaded]);
 
     useEffect(() => {
         const walletType = walletAddress ? WalletController.getWalletType() : null;
@@ -317,7 +333,7 @@ const WalletConnectProvider: React.FC<WalletConnectProviderProps> = ({ theme, ch
                                     </button>
                                 ))}
                             </div>
-                        ) : (
+                        ) : pageLoaded ? (
                             <div>
                                 <p>No wallets available</p>
                                 <p>Supporting the following wallets</p>
@@ -341,6 +357,11 @@ const WalletConnectProvider: React.FC<WalletConnectProviderProps> = ({ theme, ch
                                     ))}
                                 </div>
                             </div>
+                        ) : (
+                            <div className="wallet-waiting-plugin">
+                                <p>Loading plugins...</p>
+                                <p>Please wait</p>
+                            </div>
                         )}
                     </div>
                 </div>

package/src/utils/style.css

@@ -114,6 +114,10 @@ div.wallet-not-installed {
     padding: 10px;
     font-size: medium;
 }
+div.wallet-waiting-plugin {
+    padding: 10px;
+    font-size: medium;
+}
 
 .wallet-connect-error {
     padding: 16px 16px 0;

package/src/wallets/unisat/controller.ts

@@ -1,8 +1,13 @@
-import { type Unisat, type UnisatChainInfo, UnisatChainType, UnisatSigner } from '@btc-vision/transaction';
+import { networks } from '@btc-vision/bitcoin';
+import {
+    type Unisat,
+    type UnisatChainInfo,
+    UnisatChainType,
+    UnisatSigner,
+} from '@btc-vision/transaction';
+import { AbstractRpcProvider, JSONRpcProvider } from 'opnet';
 import { type WalletBase } from '../types';
 import { type UnisatWalletInterface } from './interface';
-import { AbstractRpcProvider, JSONRpcProvider } from 'opnet';
-import { networks } from '@btc-vision/bitcoin';
 
 interface UnisatWalletWindow extends Window {
     unisat?: UnisatWalletInterface;