Connect Button

This component provides the same functionality as the one from Readymade Components. The difference here is in the way of implementation.

Usage

"use client";
import { ConnectButtonPrimitive } from "@nazeeh2000/comp-kit";

export default function Home() {
  return (
    <>
      <ConnectButtonPrimitive>
         <ConnectButtonPrimitive.Button>
            Compound Connect Button
          </ConnectButtonPrimitive.Button>
          <ConnectButtonPrimitive.Modal
            heading="Custom Connect Wallet"
            closeOnOverlayClick={true}
            style={{ background: '#333', color: 'white', opacity: 0.9 }}
            closeButtonProps={{
              style: {
                background: '#ccc',
                color: 'black',
                border: '1.5px solid black',
              },
            }}
          >
            <ConnectButtonPrimitive.MetaMaskButton
              style={{
                background: '#2c97de',
                color: 'white',
                fontWeight: 'bold',
              }}
            >
              Metamask
            </ConnectButtonPrimitive.MetaMaskButton>
            <ConnectButtonPrimitive.WalletConnect
              style={{
                background: '#2c97de',
                color: 'white',
                fontWeight: 'bold',
              }}
            >
              WalletConnect
            </ConnectButtonPrimitive.WalletConnect>
          </ConnectButtonPrimitive.Modal>
      </ConnectButtonPrimitive>
    </>
  );
}