chore: add clientId to web3modal info (#2365)

apps/laboratory/src/components/Ethers/EthersModalInfo.tsx

@@ -1,15 +1,33 @@
 import * as React from 'react'
-import { useWeb3ModalAccount } from '@web3modal/ethers/react'
+import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
+import EthereumProvider from '@walletconnect/ethereum-provider'
 
 import { Web3ModalInfo } from '../Web3ModalInfo'
 
 export function EthersModalInfo() {
   const { isConnected, address, chainId } = useWeb3ModalAccount()
   const [ready, setReady] = React.useState(false)
+  const [clientId, setClientId] = React.useState<string | null>(null)
+  const { walletProvider, walletProviderType } = useWeb3ModalProvider()
+  async function getClientId() {
+    if (walletProviderType === 'walletConnect') {
+      const ethereumProvider = walletProvider as unknown as EthereumProvider
+
+      return ethereumProvider?.signer?.client?.core?.crypto?.getClientId()
+    }
+
+    return null
+  }
+
+  React.useEffect(() => {
+    getClientId().then(setClientId)
+  }, [walletProvider])
 
   React.useEffect(() => {
     setReady(true)
   }, [])
 
-  return ready && isConnected ? <Web3ModalInfo address={address} chainId={chainId} /> : null
+  return ready && isConnected ? (
+    <Web3ModalInfo address={address} chainId={chainId} clientId={clientId} />
+  ) : null
 }

apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx

@@ -1,10 +1,29 @@
 import * as React from 'react'
+import EthereumProvider from '@walletconnect/ethereum-provider'
 
 import { useAccount } from 'wagmi'
 import { Web3ModalInfo } from '../Web3ModalInfo'
 
 export function WagmiModalInfo() {
-  const { isConnected, address, chainId } = useAccount()
+  const { isConnected, address, chainId, connector } = useAccount()
+  const [clientId, setClientId] = React.useState<string | null>(null)
 
-  return isConnected ? <Web3ModalInfo address={address} chainId={chainId} /> : null
+  async function getClientId() {
+    const provider = await connector?.getProvider()
+    if (connector?.type === 'walletConnect') {
+      const ethereumProvider = provider as EthereumProvider
+
+      return ethereumProvider?.signer?.client?.core?.crypto?.getClientId()
+    }
+
+    return null
+  }
+
+  React.useEffect(() => {
+    getClientId().then(setClientId)
+  }, [connector])
+
+  return isConnected ? (
+    <Web3ModalInfo address={address} chainId={chainId} clientId={clientId} />
+  ) : null
 }

apps/laboratory/src/components/Web3ModalInfo.tsx

@@ -11,7 +11,13 @@ import {
   Text
 } from '@chakra-ui/react'
 
-export function Web3ModalInfo({ address, chainId }: { address?: string; chainId?: number }) {
+type Web3ModalInfoProps = {
+  address?: string
+  chainId?: number
+  clientId: string | null
+}
+
+export function Web3ModalInfo({ address, chainId, clientId }: Web3ModalInfoProps) {
   return (
     <Card marginTop={10} marginBottom={10}>
       <CardHeader>
@@ -33,6 +39,14 @@ export function Web3ModalInfo({ address, chainId }: { address?: string; chainId?
             </Heading>
             <Text data-testid="w3m-chain-id">{chainId}</Text>
           </Box>
+          {clientId && (
+            <Box>
+              <Heading size="xs" textTransform="uppercase" pb="2">
+                Relay Client ID
+              </Heading>
+              <Text data-testid="w3m-chain-id">{clientId}</Text>
+            </Box>
+          )}
         </Stack>
       </CardBody>
     </Card>

apps/laboratory/src/pages/library/ethers-all.tsx

@@ -6,6 +6,7 @@ import { EthersTests } from '../../components/Ethers/EthersTests'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { siweConfig } from '../../utils/SiweUtils'
 import { SiweData } from '../../components/Siwe/SiweData'
+import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
 
 const modal = createWeb3Modal({
   ethersConfig: defaultConfig({
@@ -35,6 +36,7 @@ export default function Ethers() {
   return (
     <>
       <Web3ModalButtons />
+      <EthersModalInfo />
       <SiweData />
       <EthersTests />
     </>

apps/laboratory/src/pages/library/ethers-siwe.tsx

@@ -6,6 +6,7 @@ import { ThemeStore } from '../../utils/StoreUtil'
 import { EthersConstants } from '../../utils/EthersConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { siweConfig } from '../../utils/SiweUtils'
+import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
 
 const modal = createWeb3Modal({
   ethersConfig: defaultConfig({
@@ -28,6 +29,7 @@ export default function EthersSiwe() {
   return (
     <>
       <Web3ModalButtons />
+      <EthersModalInfo />
       <SiweData />
       <EthersTests />
     </>

apps/laboratory/src/pages/library/wagmi-all.tsx

@@ -9,6 +9,7 @@ import { CONFIGS } from '../../utils/WagmiConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { SiweData } from '../../components/Siwe/SiweData'
 import { siweConfig } from '../../utils/SiweUtils'
+import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
 
 const queryClient = new QueryClient()
 
@@ -39,6 +40,7 @@ export default function Wagmi() {
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <Web3ModalButtons />
+        <WagmiModalInfo />
         <SiweData />
         <WagmiTests />
       </QueryClientProvider>

apps/laboratory/src/pages/library/wagmi-siwe.tsx

@@ -8,6 +8,7 @@ import { CONFIGS } from '../../utils/WagmiConstants'
 import { SiweData } from '../../components/Siwe/SiweData'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { siweConfig } from '../../utils/SiweUtils'
+import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
 
 const queryClient = new QueryClient()
 
@@ -29,6 +30,7 @@ export default function Wagmi() {
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <Web3ModalButtons />
+        <WagmiModalInfo />
         <SiweData />
         <WagmiTests />
       </QueryClientProvider>