chore: custom connect button

src/components/button/Button.jsx

@@ -1,13 +1,14 @@
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import icon from '../assets/loading.png';
+import icon from '../../assets/loading.png';
 
-export const Button = ({ children, onClick, loading }) => (
+export const Button = ({ children, onClick, loading, className }) => (
   <button
     className={cn(
       'px-3 py-2 rounded-full justify-center flex',
-      'text-white text-sm font-semibold leading-none w-24 text-center',
-      loading ? 'bg-blue-400' : 'bg-blue-600'
+      'text-white text-sm font-semibold leading-none min-w-24 text-center',
+      loading ? 'bg-blue-400' : 'bg-blue-600',
+      className
     )}
     onClick={onClick}
     disabled={loading}
@@ -24,4 +25,5 @@ Button.propTypes = {
   children: PropTypes.node,
   onClick: PropTypes.func,
   loading: PropTypes.bool,
+  className: PropTypes.string,
 };

src/components/button/ConnectButton.jsx

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import { ConnectButton as RainbowBtn } from '@rainbow-me/rainbowkit';
+import { Button } from './Button';
+import defaultAvatar from '../../assets/avatar.svg';
+import { usePrimaryName } from '../../hooks/usePrimaryName';
+
+const Custom = ({
+  account,
+  chain,
+  openAccountModal,
+  openChainModal,
+  openConnectModal,
+}) => {
+  const { name, avatar } = usePrimaryName();
+  const connected = account && chain;
+
+  if (!connected) {
+    return <Button onClick={openConnectModal}>Connect Wallet</Button>;
+  }
+
+  if (chain.unsupported) {
+    return (
+      <Button
+        onClick={openChainModal}
+        type="button"
+        className="bg-red-600 whitespace-nowrap"
+      >
+        Wrong network
+      </Button>
+    );
+  }
+
+  return (
+    <button
+      className="p-1 bg-white rounded-lg shadow justify-start items-center inline-flex gap-1 cursor-pointer hover:scale-105 transition duration-200"
+      onClick={openAccountModal}
+    >
+      <div className="text-sky-950 font-semibold hidden md:block pl-1">
+        {account.displayBalance}
+      </div>
+      <div className="px-1.5 py-1 bg-neutral-100 rounded-lg justify-end items-center gap-1.5 flex">
+        <img
+          alt={name}
+          src={avatar || account.ensAvatar || defaultAvatar}
+          className="w-6 h-6  rounded-full overflow-hidden"
+        />
+
+        <div className="text-neutral-900 font-semibold">
+          {name || account.ensName || account.displayName}
+        </div>
+      </div>
+    </button>
+  );
+};
+
+Custom.propTypes = {
+  account: PropTypes.object,
+  chain: PropTypes.object,
+  openAccountModal: PropTypes.func,
+  openChainModal: PropTypes.func,
+  openConnectModal: PropTypes.func,
+};
+
+export const ConnectButton = () => {
+  return <RainbowBtn.Custom>{Custom}</RainbowBtn.Custom>;
+};

src/components/button/RegisterButton.jsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
-import { useRegister } from '../hooks/useRegister';
-import { domainDetails } from '../types';
+import { useRegister } from '../../hooks/useRegister';
+import { domainDetails } from '../../types';
 import { Button } from './Button';
 import { useState } from 'react';
 

src/components/search/SearchCTA.jsx

@@ -1,9 +1,9 @@
-import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { ConnectButton } from '../button/ConnectButton';
 import Skeleton from 'react-loading-skeleton';
 import { useAccount } from 'wagmi';
 import { TLD } from '../../constants';
 import { domainDetails } from '../../types';
-import { RegisterButton } from '../RegisterButton';
+import { RegisterButton } from '../button/RegisterButton';
 
 export const SearchCTA = ({ details }) => {
   const { address, isConnected } = useAccount();