@btc-vision/walletconnect 1.5.0 → 1.5.2

package/src/provider/WalletConnectProvider.tsx

@@ -0,0 +1,341 @@
+import { Address, Unisat, UnisatSigner } from '@btc-vision/transaction';
+import React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DefaultWalletConnectNetwork } from '../consts';
+import { WalletConnectContext } from '../context/WalletConnectContext';
+import type { WalletConnectNetwork, WalletInformation } from '../types.ts';
+import '../utils/style.css';
+import '../utils/theme.css';
+import { SupportedWallets, WalletController } from '../wallets';
+import type {
+    ControllerConnectAccounts,
+    ControllerErrorResponse,
+    ControllerResponse,
+    WalletConnectWallet,
+} from '../wallets/types.ts';
+
+const AUTO_RECONNECT_RETRIES = 5;
+
+interface WalletConnectProviderProps {
+    theme?: 'light' | 'dark' | 'moto';
+    children: ReactNode;
+}
+
+const WalletConnectProvider: React.FC<WalletConnectProviderProps> = ({ theme, children }) => {
+    const [connectError, setConnectError] = useState<string | undefined>(undefined);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const [network, setNetwork] = useState<WalletConnectNetwork>(DefaultWalletConnectNetwork);
+
+    const [supportedWallets] = useState<WalletConnectWallet[]>(WalletController.getWallets);
+    const [selectedWallet, setSelectedWallet] = useState<SupportedWallets | null>(
+        () => (localStorage.getItem('WC_SelectedWallet') as SupportedWallets) || null,
+    );
+    const [connecting, setConnecting] = useState<boolean>(false);
+    const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+    const [walletAddress, setWalletAddress] = useState<string | null>(null);
+    const [publicKey, setPublicKey] = useState<string | null>(null);
+    const [walletType, setWalletType] = useState<SupportedWallets | null>(null);
+    const [provider, setProvider] = useState<Unisat | null>(null);
+    const [signer, setSigner] = useState<UnisatSigner | null>(null);
+
+    const clearConnectError = useCallback(() => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setConnectError(undefined), 5000);
+    }, []);
+
+    useEffect(() => {
+        if (connectError) {
+            clearConnectError();
+        }
+    }, [connectError, clearConnectError]);
+
+    const openConnectModal = () => {
+        setConnectError(undefined);
+        setModalOpen(true);
+    };
+
+    const closeConnectModal = () => {
+        setModalOpen(false);
+        setConnectError(undefined);
+    };
+
+    const disconnect = useCallback(async () => {
+        console.log('DISCONNECTING FROM WALLET');
+        localStorage.removeItem('WC_SelectedWallet');
+        setSelectedWallet(null);
+        setPublicKey(null);
+        setWalletAddress(null);
+        setConnecting(false);
+        WalletController.removeDisconnectHook();
+        WalletController.removeChainChangedHook();
+        WalletController.removeAccountsChangedHook();
+        await WalletController.disconnect();
+        setNetwork(DefaultWalletConnectNetwork); // Triggers allWallets update after disconnecting
+    }, []);
+
+    const connectToWallet = useCallback(
+        async (wallet: SupportedWallets) => {
+            setConnecting(true);
+            try {
+                const response: ControllerResponse<
+                    ControllerConnectAccounts | ControllerErrorResponse
+                > = await WalletController.connect(wallet);
+
+                if (response.code === 200 && Array.isArray(response.data)) {
+                    if (!response.data || response.data.length === 0) {
+                        return;
+                    }
+                    setWalletAddress(response.data[0]);
+                    const publicKey = await WalletController.getPublicKey();
+                    setPublicKey(publicKey);
+                    const network = await WalletController.getNetwork();
+                    setNetwork(network);
+
+                    WalletController.setAccountsChangedHook(accountsChanged);
+                    WalletController.setChainChangedHook(chainChanged);
+                    WalletController.setDisconnectHook(disconnect);
+
+                    closeConnectModal();
+                    setSelectedWallet(wallet);
+                    localStorage.setItem('WC_SelectedWallet', wallet);
+                } else if (response.data && 'message' in response.data) {
+                    setConnectError(response.data.message);
+                } else {
+                    setConnectError('Unknown error');
+                }
+            } catch (err: unknown) {
+                setConnectError((err as Error).message || 'Unexpected error');
+            } finally {
+                setConnecting(false);
+            }
+        },
+        // eslint-disable-next-line
+        [disconnect],
+    );
+
+    const attemptReconnect = useCallback(async () => {
+        console.warn('Trying to reconnect...', selectedWallet, connecting);
+        if (!selectedWallet || connecting) return;
+
+        // Ensure we can connect without launching modal popup windows!
+        const canAutoConnect = await WalletController.canAutoConnect(selectedWallet);
+        console.log('CanAutoConnect', canAutoConnect);
+        if (!canAutoConnect) return;
+
+        let attempts = 0;
+
+        const reconnect = async () => {
+            attempts++;
+
+            const walletAvailable = WalletController.isWalletInstalled(selectedWallet);
+            if (walletAvailable) {
+                console.log(`Attempting to reconnect to ${selectedWallet} (Attempt ${attempts})`);
+                await connectToWallet(selectedWallet);
+                return;
+            }
+
+            if (attempts < AUTO_RECONNECT_RETRIES) {
+                setTimeout(reconnect, 1000 * attempts);
+            }
+        };
+
+        await reconnect();
+        // eslint-disable-next-line
+    }, [selectedWallet, connectToWallet]);
+
+    useEffect(() => {
+        void attemptReconnect();
+    }, [attemptReconnect]);
+
+    const accountsChanged = useCallback(
+        async (accounts: string[]) => {
+            console.log('Accounts', accounts);
+            if (selectedWallet) {
+                const account = accounts.length > 0 ? accounts[0] : null;
+                setWalletAddress(account);
+                const publicKey = account ? await WalletController.getPublicKey() : null;
+                setPublicKey(publicKey);
+            }
+        },
+        [selectedWallet, setWalletAddress, setPublicKey],
+    );
+
+    const chainChanged = useCallback(
+        (network: WalletConnectNetwork): void => {
+            if (selectedWallet) {
+                setNetwork(network);
+            }
+        },
+        [selectedWallet, setNetwork],
+    );
+
+    const allWallets = useMemo(() => {
+        //console.log("Refreshing all wallets");
+        return supportedWallets.map((wallet): WalletInformation => {
+            //console.log(" --> ", wallet.name, wallet.controller.isInstalled(), wallet.controller.isConnected());
+            return {
+                name: wallet.name,
+                icon: wallet.icon,
+                isInstalled: wallet.controller.isInstalled(),
+                isConnected: wallet.controller.isConnected(),
+            };
+        });
+        // eslint-disable-next-line
+    }, [supportedWallets, network]);
+
+    const availableWallets = useMemo(() => {
+        return supportedWallets.filter((wallet) => wallet.controller.isInstalled());
+        //return supportedWallets
+        // eslint-disable-next-line
+    }, [supportedWallets, network]);
+
+    useEffect(() => {
+        const walletType = walletAddress ? WalletController.getWalletType() : null;
+        setWalletType(walletType);
+        const provider = walletAddress ? WalletController.getProvider() : null;
+        setProvider(provider);
+    }, [walletAddress]);
+
+    useEffect(() => {
+        const updateSigner = async () => {
+            const signer = publicKey ? await WalletController.getSigner() : null;
+            setSigner(signer);
+        };
+        void updateSigner();
+    }, [network, publicKey]);
+
+    const currentTheme = useMemo(() => {
+        const currentTheme = theme || 'light';
+        return `wallet-connect-${currentTheme}-theme`;
+    }, [theme]);
+
+    const address = useMemo(() => {
+        return publicKey ? Address.fromString(publicKey) : null;
+    }, [publicKey]);
+
+    return (
+        <WalletConnectContext.Provider
+            value={{
+                walletAddress,
+                publicKey,
+                address,
+                connecting,
+                connectToWallet,
+                disconnect,
+                openConnectModal,
+                network,
+                allWallets,
+                provider,
+                signer,
+                walletType,
+            }}>
+            {children}
+            {modalOpen && (
+                <div className={`wallet-connect-modal-backdrop ${currentTheme}`}>
+                    <div
+                        className="wallet-connect-modal"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-labelledby="wallet-connect-modal-title">
+                        <div className="wallet-connect-header">
+                            <span>Connect Wallet</span>
+                            <button
+                                className="close"
+                                onClick={() => closeConnectModal()}>
+                                <span className="close-icon">
+                                    <svg
+                                        width="30px"
+                                        height="30px"
+                                        viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            className="close-x-path"
+                                            d="M16 8L8 16M8.00001 8L16 16"
+                                            stroke="#fff"
+                                            strokeWidth="1.5"
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                        />
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+                        {connectError && (
+                            <div className="wallet-connect-error">
+                                <p className="error-message">{connectError}</p>
+                            </div>
+                        )}
+                        {availableWallets.length > 0 ? (
+                            <div className="wallet-list">
+                                {availableWallets.map((wallet) => (
+                                    <button
+                                        key={wallet.name}
+                                        onClick={() => connectToWallet(wallet.name)}
+                                        disabled={connecting || !wallet.controller.isInstalled()}
+                                        className={`wallet-button ${
+                                            wallet.controller.isInstalled()
+                                                ? 'wallet-installed'
+                                                : 'wallet-not-installed'
+                                        }`}>
+                                        {wallet.icon ? (
+                                            <div
+                                                className="wallet-icon"
+                                                title={wallet.name}>
+                                                <img
+                                                    src={wallet.icon}
+                                                    alt={wallet.name}
+                                                />
+                                            </div>
+                                        ) : (
+                                            <div className="wallet-name">{wallet.name}</div>
+                                        )}
+
+                                        {wallet.controller.isConnected() ? (
+                                            <div className="wallet-connected">(Connected)</div>
+                                        ) : (
+                                            <></>
+                                        )}
+                                        {wallet.controller.isInstalled() ? (
+                                            <></>
+                                        ) : (
+                                            <div className="wallet-not-installed">
+                                                (Not Installed)
+                                            </div>
+                                        )}
+                                    </button>
+                                ))}
+                            </div>
+                        ) : (
+                            <div>
+                                <p>No wallets available</p>
+                                <p>Supporting the following wallets</p>
+                                <div className="wallet-list">
+                                    {supportedWallets.map((wallet) => (
+                                        <a
+                                            href={`https://chromewebstore.google.com/search/${wallet.name}`}>
+                                            {wallet.icon ? (
+                                                <div
+                                                    className="wallet-icon"
+                                                    title={wallet.name}>
+                                                    <img
+                                                        src={wallet.icon}
+                                                        alt={wallet.name}
+                                                    />
+                                                </div>
+                                            ) : (
+                                                <div className="wallet-name">{wallet.name}</div>
+                                            )}
+                                        </a>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </WalletConnectContext.Provider>
+    );
+};
+
+export default WalletConnectProvider;

package/src/types.ts

@@ -0,0 +1,13 @@
+import { Network } from '@btc-vision/bitcoin';
+import { UnisatChainType } from '@btc-vision/transaction';
+
+export interface WalletConnectNetwork extends Network {
+    chainType: UnisatChainType;
+}
+
+export interface WalletInformation {
+    name: string;
+    icon: string;
+    isInstalled: boolean;
+    isConnected: boolean;
+}

package/src/utils/accessibility/definitions.ts

@@ -0,0 +1,9 @@
+export const genericErrors: Record<string, string> = {
+    UserRejected: 'Wallet Dialog was closed by the user',
+    UnknownError: 'Unknown error occurred',
+    IndexingInProgress: 'Node is still indexing. Please try again shortly',
+};
+
+export const errorDefinitions: Record<string, string> = {
+    ...genericErrors,
+};

package/src/utils/accessibility/errorDecoder.ts

@@ -0,0 +1,105 @@
+import type { ErrorTranslations } from './patterns';
+import { patternMap, patternRegExp } from './patterns';
+
+// Sample: Error in calling function: Spender can not be dead at ~lib/@btc-vision/btc-runtime/runtime/contracts/DeployableOP_20.ts:291:50
+// matches[2] == null
+// matches[3] == 'Spender can not be dead'
+// Sample: Error in calling function: NATIVE_SWAP: LOCKED at ~lib/@btc-vision/btc-runtime/runtime/contracts/DeployableOP_20.ts:291:50
+// matches[2] == 'NATIVE_SWAP'
+// matches[3] == 'LOCKED'
+const RE_EXTRACT_ERROR = new RegExp(
+    '^(.*?):\\s*(?:([^:]+):)?\\s*(.*?)\\s+at\\s(\\S+\\s\\()?\\S+\\d+:\\d+\\)?',
+    'm',
+);
+
+const _translation = (err: ErrorTranslations, locale: string | null) => {
+    // Using a switch here to be sure we are safe as to not try to use
+    // a function or other attributes.  For exemple if someone create
+    // a 'get' locale, we should not try to call err['get']...
+    switch (locale) {
+        case 'en':
+            return err['en'] || '';
+        case 'en-us':
+            return err['en-US'] || '';
+        case 'fr':
+            return err['fr'] || '';
+        case 'fr-ca':
+            return err['fr-CA'] || '';
+        default:
+            return '';
+    }
+};
+
+const _errors = (err: string | ErrorTranslations, locales: string[]) => {
+    if (typeof err === 'string') {
+        return err;
+    } else {
+        for (const locale of locales) {
+            const translation = _translation(err, locale);
+            if (translation) return translation;
+        }
+        return err['en']; // Return default locale
+    }
+};
+
+const _normalizeLocales = (locales: string[]) => {
+    const _locales = locales.map((l) => l.toLowerCase().trim());
+    // Add fallback locales if needed
+    for (const locale of _locales) {
+        const language = locale.split('-')[0];
+        if (!_locales.includes(language)) {
+            _locales.push(language);
+        }
+    }
+    return _locales;
+};
+
+// When translation will be enabled, will need to feed locale
+// with the locale from the user's browser
+export const _e = (err: string | Error, locales: string[] = ['en']): string => {
+    const [, , error] = _match_e(err.toString(), locales);
+    return error;
+};
+// This is mostly for debugging as it return the full matched information.
+// returns [orig, pattern, translation] where
+// - orig is the original key in the patterns definition
+// - pattern is the transformed (lowercase, regex, etc.) key
+// - translation is the resulting translation for the current key
+export const _match_e = (err: string, locales: string[] = ['en']): string[] => {
+    const normalizedLocales = _normalizeLocales(locales);
+    const matches = RE_EXTRACT_ERROR.exec(err);
+    const packageName = matches ? matches[2] : '';
+    let msg = matches ? matches[3] : err;
+
+    const lookup = `${packageName}: ${msg}`.trim();
+    const lookupLower = lookup.toLowerCase();
+
+    // First checks with regex as these messages may be catched by includes later
+    for (const [orig, pattern, translation] of patternRegExp) {
+        const placeHolders = pattern.exec(lookup);
+        if (placeHolders) {
+            msg = _errors(translation, normalizedLocales) || msg;
+            for (let i = 0; i < placeHolders.length; i++) {
+                const regex = new RegExp(`\\$${i}`, 'g');
+                msg = msg.replace(regex, placeHolders[i] ?? '');
+            }
+            return [orig, pattern.source, msg];
+        }
+    }
+
+    // Next checks fast patterns that are matched as lower case strings
+    for (const [orig, pattern, translation] of patternMap) {
+        if (lookupLower == pattern) {
+            return [orig, pattern, _errors(translation, normalizedLocales) || msg];
+        }
+    }
+
+    // Finally checks fast patterns that are matched as lower case includes
+    for (const [orig, pattern, translation] of patternMap) {
+        if (lookupLower.includes(pattern)) {
+            return [orig, pattern, _errors(translation, normalizedLocales) || msg];
+        }
+    }
+
+    return ['', '', msg];
+};

package/src/utils/accessibility/patterns.ts

@@ -0,0 +1,86 @@
+import { errorDefinitions } from './definitions';
+
+export type ErrorTranslations = {
+    en: ErrorMessage; // Default language, required
+    'en-US'?: ErrorMessage;
+    fr?: ErrorMessage;
+    'fr-CA'?: ErrorMessage;
+};
+
+type ErrorMessage = (typeof errorDefinitions)[keyof typeof errorDefinitions];
+type ErrorMessages = ErrorMessage | ErrorTranslations;
+
+const rawPatternGeneric: Record<string, ErrorMessages> = {
+    'User rejected the request.': errorDefinitions.UserRejected,
+    "TypeError: Cannot read properties of undefined (reading 'addresses')":
+        errorDefinitions.UserRejected,
+};
+
+const rawPatternUnitTest: Record<string, ErrorMessages> = {
+    //'TEST_CASE: not there': ''
+    'TEST_CASE: empty': '',
+    'TEST_CASE: simple': 'simple',
+    'TEST_CASE: regex1 ${value}': 'regex1',
+    'TEST_CASE: regex2 ${value}': 'regex2 $1',
+
+    //'Test case not there': ''
+    'Test case empty': '',
+    'Test case simple': 'simple',
+    'Test case regex1 ${value}': 'regex1',
+    'Test case regex2 ${value.get()}': 'regex2 $1',
+
+    // Multi-language
+    'TEST_MULTI: multi1': {
+        en: 'Test English',
+        'en-US': 'Test American English',
+        fr: 'Test French',
+        'fr-CA': 'Test Canadian French',
+    },
+
+    'TEST_MULTI: multi2 ${value}': {
+        en: 'Test English: $1',
+        'en-US': 'Test American English: $1',
+        fr: 'Test French: $1',
+        'fr-CA': 'Test Canadian French: $1',
+    },
+};
+
+// Patterns may be
+// - simple string (if key don't contain a closing parenthesis '(' ).
+// - regex expression (if key contains at least one '(' for regex group matching).
+// The group matching don't need to be used in translation
+// Group matching start at $0 (full match) and $1 (first group), $2...
+//
+// Simple key
+// 'Test': 'This is a translated test',
+// Regex key
+// 'Test for (\\w+)': 'This is a test for some function',
+// 'Test function (\\w+)': 'This is a testing sample for function $1',
+const rawPatternMap: Record<string, ErrorMessage> = {
+    'NATIVE_SWAP: Liquidity value is too low in satoshis.':
+        errorDefinitions.NativeSwapLiquidityValueTooLow,
+    'Unknown Error': errorDefinitions.UnknownError,
+    'Invalid Address': errorDefinitions.IndexingInProgress,
+    'Error Indexing at Block': errorDefinitions.IndexingInProgress,
+    'Valid Reservation for this Address': errorDefinitions.NoValidReservation,
+
+    ...rawPatternGeneric,
+    ...rawPatternUnitTest,
+};
+
+export const patternMap: Array<[string, string, ErrorMessages]> = Object.entries(rawPatternMap)
+    .filter(([key, value]) => !!value && !key.includes('${'))
+    .sort((a, b) => b[0].length - a[0].length)
+    .map(([key, value]) => [key, key.toLowerCase(), value]);
+
+export const escapeKey = (key: string): string => {
+    return key
+        .replace(/\(/g, '\\(')
+        .replace(/\)/g, '\\)')
+        .replace(/\./g, '\\.')
+        .replace(/\$\{.*?}/g, '(.+)');
+};
+export const patternRegExp: Array<[string, RegExp, ErrorMessages]> = Object.entries(rawPatternMap)
+    .filter(([key, value]) => !!value && key.includes('${'))
+    .sort((a, b) => b[0].length - a[0].length)
+    .map(([key, value]) => [key, new RegExp(escapeKey(key), 'i'), value]);

package/src/utils/style.css

@@ -0,0 +1,131 @@
+.wallet-connect-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(10, 11, 13, 0.5);
+    backdrop-filter: blur(10px);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.wallet-connect-modal {
+    background-color: var(--background-color);
+    border: 1px solid var(--border-color);
+    color: var(--primaryColor);
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 400px;
+    max-width: 90%;
+    z-index: 10000;
+}
+
+.wallet-connect-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: bold;
+    user-select: none;
+}
+
+.wallet-connect-header > button.close {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primaryColor);
+    fill: var(--primaryColor);
+    background-color: var(--background-color);
+    cursor: pointer;
+}
+.wallet-connect-header > button.close:hover {
+    border: 1px solid rgba(254, 121, 1, 0.3);
+    background-color: rgba(254, 121, 1, 0.1);
+}
+.wallet-connect-header > button.close svg {
+    display: flex;
+}
+
+.wallet-connect-header > button.close .close-x-path {
+    stroke: var(--primaryColor);
+    transition: stroke 0.2s ease;
+}
+
+.wallet-connect-header > button.close:hover .close-x-path {
+}
+
+.wallet-list {
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.wallet-list > button {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 64px;
+    justify-content: space-between;
+    padding: 12px;
+    color: #fff;
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
+    background-color: var(--button-background-color);
+}
+.wallet-list > button:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.wallet-list > button:hover {
+    border: 1px solid rgba(254, 121, 1, 0.3);
+    background-color: rgba(254, 121, 1, 0.1);
+}
+.wallet-icon {
+    display: flex;
+}
+.wallet-icon img {
+    max-height: 32px;
+    filter: var(--icon-filter);
+}
+.wallet-name {
+    font-size: x-large;
+    text-align: left;
+}
+.wallet-connected {
+    padding: 10px;
+    font-size: medium;
+    color: green;
+}
+div.wallet-not-installed {
+    padding: 10px;
+    font-size: medium;
+}
+
+.wallet-connect-error {
+    padding: 16px 16px 0;
+}
+
+.wallet-connect-error > p {
+    color: #ff4d4d;
+    text-align: center;
+    background-color: rgba(255, 77, 77, 0.1);
+    font-size: 14px;
+    font-weight: bolder;
+    padding: 20px 10px;
+    border-radius: 10px;
+    border: 1px solid #ff4d4d;
+}