npm i @cometh/connect-sdk-viem wagmi viem
"use client";
import "./lib/ui/globals.css";
import { cookieStorage, createStorage, WagmiProvider } from 'wagmi'
import { polygon } from "viem/chains";
import { createWeb3Modal } from "@web3modal/wagmi/react";
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
import { comethConnectConnector } from "@cometh/connect-sdk-viem";
const projectId = NEXT_PUBLIC_WALLET_CONNECT_ID;
const apiKey = NEXT_PUBLIC_COMETH_API_KEY;
const chains = [polygon] as const
// 1. Configure cometh connect wagmi connector
const connectorConnect = comethConnectConnector({
apiKey
});
// 2. Configure wagmi config
const metadata = {
name: 'Web3Modal',
description: 'Web3Modal Example',
url: 'https://web3modal.com', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/37784886']
}
export const wagmiConfig = defaultWagmiConfig({
chains,
projectId,
metadata,
ssr: true,
storage: createStorage({
storage: cookieStorage
}),
connectors: [connectorConnect],
...wagmiOptions // Optional - Override createConfig parameters
})
// 3. Add connect svg to web3modal
const connectorImages = {
"cometh-connect":
"https://pbs.twimg.com/profile_images/1679433363818442753/E2kNVLBe_400x400.jpg",
};
// 4. Create modal
createWeb3Modal({ wagmiConfig, projectId, connectorImages });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<WagmiProvider config={wagmiConfig}>{children}</WagmiProvider>
</body>
</html>
);
}
function ConnectWallet(): JSX.Element {
return <w3m-button />;
}
export default ConnectWallet;
