diff --git a/apps/laboratory/src/components/Ethers/EthersModalInfo.tsx b/apps/laboratory/src/components/Ethers/EthersModalInfo.tsx index acd1729dd0..0137fc1d8c 100644 --- a/apps/laboratory/src/components/Ethers/EthersModalInfo.tsx +++ b/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(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 ? : null + return ready && isConnected ? ( + + ) : null } diff --git a/apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx b/apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx index e2620b7c69..8e6317071d 100644 --- a/apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx +++ b/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(null) - return isConnected ? : 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 ? ( + + ) : null } diff --git a/apps/laboratory/src/components/Web3ModalInfo.tsx b/apps/laboratory/src/components/Web3ModalInfo.tsx index 8dac76ece9..5768e355c1 100644 --- a/apps/laboratory/src/components/Web3ModalInfo.tsx +++ b/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 ( @@ -33,6 +39,14 @@ export function Web3ModalInfo({ address, chainId }: { address?: string; chainId? {chainId} + {clientId && ( + + + Relay Client ID + + {clientId} + + )} diff --git a/apps/laboratory/src/pages/library/ethers-all.tsx b/apps/laboratory/src/pages/library/ethers-all.tsx index f22a18a3db..3e1f873d8a 100644 --- a/apps/laboratory/src/pages/library/ethers-all.tsx +++ b/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 ( <> + diff --git a/apps/laboratory/src/pages/library/ethers-siwe.tsx b/apps/laboratory/src/pages/library/ethers-siwe.tsx index 6c7a433875..1ef806022f 100644 --- a/apps/laboratory/src/pages/library/ethers-siwe.tsx +++ b/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 ( <> + diff --git a/apps/laboratory/src/pages/library/wagmi-all.tsx b/apps/laboratory/src/pages/library/wagmi-all.tsx index 953f6019d3..73f79d5f89 100644 --- a/apps/laboratory/src/pages/library/wagmi-all.tsx +++ b/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() { + diff --git a/apps/laboratory/src/pages/library/wagmi-siwe.tsx b/apps/laboratory/src/pages/library/wagmi-siwe.tsx index a2b41e17cd..1cda569239 100644 --- a/apps/laboratory/src/pages/library/wagmi-siwe.tsx +++ b/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() { +