WalletConnect Customization and Usage

Question

I want to make use of the WalletConnect platform to connect the crypto wallets and send transaction notifications to customer accounts when they want to purchase some products and pay for them via our web application. It should support web as well as mobile wallets. I tested that and it works.

I need the info on customizing the UI like, we will provide the option of Wallet like Metamask, TrustWallet, etc. and on clicking those options it should directly trigger the wallet connect and send transaction info such as the amount and merchant wallet address (non-editable).

For this type of customization, I did not find the official documentation.

Please provide some information regarding the same.

"use client"

import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'

// 1. Get projectId at https://cloud.walletconnect.com
const projectId = 'My Project ID'

// 2. Set chains
const mainnet = {
  chainId: 1,
  name: 'Ethereum',
  currency: 'ETH',
  explorerUrl: 'https://etherscan.io',
  rpcUrl: 'https://cloudflare-eth.com'
}

// 3. Create modal
const metadata = {
  name: 'My Website',
  description: 'My Website description',
  url: 'https://mywebsite.com',
  icons: ['https://avatars.mywebsite.com/']
}

createWeb3Modal({
  ethersConfig: defaultConfig({ metadata }),
  chains: [mainnet],
  includeWalletIds: [
    'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
    '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
  ],
  projectId
})

export function Web3ModalProvider({ children }) {
  return children;
}

Here i am using Web3 Modal to show only 2 wallets Metamask and TrustWallet. What i want to achieve is from my custom UI (Metamask and TrustWallet Button / Div Tags), When clicked on those buttons i directly want to connect to respcetive wallet. but now it shows the WalletConnect Default Modal with its QR code and also the All Wallets Option. Can we customize this ?