# `@tronweb3/tronwallet-adapter-walletconnect`

This package provides an adapter to enable TRON DApps to connect to [WalletConnect](https://walletconnect.com/).

## Install

```shell
npm i @tronweb3/tronwallet-adapter-walletconnect
# yarn add @tronweb3/tronwallet-adapter-walletconnect
```

> If you are working in a typescript project, you must set `skipLibCheck: true` in `tsconfig.json`.

## Demo

```typescript
import { WalletConnectAdapter } from '@tronweb3/tronwallet-adapter-walletconnect';
import TronWeb from 'tronweb';

const tronWeb = new TronWeb({
    fullHost: 'https://api.trongrid.io',
    headers: { 'TRON-PRO-API-KEY': 'your api key' },
});

const adapter = new WalletConnectAdapter({
    network: 'Nile',
    options: {
        relayUrl: 'wss://relay.walletconnect.com',
        // example walletconnect app project ID
        projectId: '',
        metadata: {
            name: 'Example App',
            description: 'Example App',
            url: 'https://yourdapp-url.com',
            icons: ['https://yourdapp-url.com/icon.png'],
        },
    },
    themeMode: 'dark',
    themeVariables: {
        '--w3m-z-index': 1000,
    },
});
// connect
await adapter.connect();

// then you can get address
console.log(adapter.address);

// create a send TRX transaction
const unSignedTransaction = await tronWeb.transactionBuilder.sendTrx(targetAddress, 100, adapter.address);
// using adapter to sign the transaction
const signedTransaction = await adapter.signTransaction(unSignedTransaction);
// broadcast the transaction
await tronWeb.trx.sendRawTransaction(signedTransaction);
```

## Documentation

### API


-   `Constructor(config: WalletConnectAdapterConfig)`
    WalletAdapter will pass the config to [AppKit Modal](https://docs.reown.com/appkit/react/core/options).
    
    **Notice**: To keep backward compatibility WalletAdapter retains `web3ModalConfig`. However, only these configurations are currently available:
    - `web3ModalConfig.themeMode`
    - `web3ModalConfig.themeVariables`: 
        - `--wcm-z-index`
        - `--wcm-font-family`
    - `web3ModalConfig.explorerRecommendedWalletIds`

    It's recommended to use `themeMode`, `themeVariables` and `featuredWalletIds`.

    ```typescript
    interface WalletConnectAdapterConfig {
        /**
         * Network to use, one of Mainnet, Shasta, Nile
         * Default: Nile
         */
        network: 'Mainnet' | 'Shasta' | 'Nile';
        /**
         * Options passed to WalletConnect client
         */
        options: {
            projectId: '<YOUR PROJECT ID>';
            // optional parameters
            relayUrl: '<YOUR RELAY URL>';
            metadata: {
                name: 'Wallet name';
                description: 'A short description for your wallet';
                url: "<YOUR WALLET'S URL>";
                icons: ["<URL TO WALLET'S LOGO/ICON>"];
            };
        };
        /**
         * Theme mode configuration flag. By default themeMode option will be set to user system settings.
         * @default `system`
         * @type `dark` | `light`
         * @see https://docs.reown.com/appkit/react/core/theming
         */
        themeMode?: `dark` | `light`;
        /**
         * Theme variable configuration object.
         * @default undefined
         */
        themeVariables?: ThemeVariables;
        /**
         * Control the display of "All Wallets" button.
         * @default `HIDE` (recommended for Tron as most wallets don't support it)
         * @see https://docs.reown.com/appkit/react/core/options
         */
        allWallets?: 'SHOW' | 'HIDE' | 'ONLY_MOBILE';
        /**
         * List of featured wallet IDs to display first (in order).
         * @see https://walletguide.walletconnect.network/ to find wallet IDs
         */
        featuredWalletIds?: string[];
        /**
         * Whitelist of wallet IDs to include (if set, only these wallets will be shown).
         */
        includeWalletIds?: string[];
        /**
         * Blacklist of wallet IDs to exclude.
         */
        excludeWalletIds?: string[];
        /**
         * Custom wallets to add to the list.
         */
        customWallets?: any[];
        /**
         * Enable Reown cloud analytics.
         * @default true
         */
        enableAnalytics?: boolean;
        /**
         * Enable debug logs.
         * @default false
         */
        debug?: boolean;
        /**
         * Enable mobile deep linking optimization.
         * When enabled, automatically configures mobile wallet IDs and settings for better deep linking support.
         * @default true
         */
        enableMobileDeepLink?: boolean;
        /**
         * Additional AppKit configuration options.
         * Any extra properties will be passed directly to createAppKit.
         */
        [key: string]: any;
    }
    interface ThemeVariables {
        /**
         * Base font family.
         */
        '--w3m-font-family'?: string;
        /**
         * Color used for buttons, icons, labels, etc.
         */
        '--w3m-accent'?: string;
        /**
         * The color that blends in with the default colors.
         */
        '--w3m-color-mix'?: string;
        /**
         * The percentage on how much “—w3m-color-mix” should blend in.
         */
        '--w3m-color-mix-strength'?: number;
        /**
         * The base pixel size for fonts.
         */
        '--w3m-font-size-master'?: string;
        /**
         * The base border radius in pixels.
         */
        '--w3m-border-radius-master'?: string;
        /**
         * The z-index of the modal.
         */
        '--w3m-z-index'?: number;
        /**
         * The color of the QRCode.
         */
        '--w3m-qr-color'?: string;
    }
    ```

-   `connect(options?: WalletConnectConnectOptions): Promise<void>`

    Connect to WalletConnect with optional configuration for custom QR code rendering.

    ```typescript
    interface WalletConnectConnectOptions {
        /**
         * Callback to receive the WalletConnect URI for custom QR code rendering.
         * When provided, the AppKit modal will be skipped.
         */
        onUri?: (uri: string) => void;
    }
    ```

    **Example with custom QR code:**

    ```typescript
    await adapter.connect({
        onUri: (uri) => {
            console.log('WalletConnect URI:', uri);
            // Display your custom QR code here
            // You can use libraries like qrcode to generate QR code from the URI
        },
    });
    ```

-   `getConnectionStatus(): Promise<{ address: string }>`: Get current connection status. If WalletConnect is connected, the address will be a non-empty value.

### Caveates

-   `multiSign()` and `switchChain(chainId: string)` are not supported.

For more information about wallet adapter, please refer to [`@tronweb3/tronwallet-adapters`](https://github.com/tronweb3/tronwallet-adapter/tree/main/packages/adapters/adapters).