Use rainbowkit for renewal page (#2564)

Author: arjun-dureja

apps/web/src/components/Basenames/RenewalForm/RenewalButton.tsx

@@ -1,7 +1,5 @@
-import classNames from 'classnames';
-import { ConnectWallet } from '@coinbase/onchainkit/wallet';
 import { Button, ButtonSizes, ButtonVariants } from 'apps/web/src/components/Button/Button';
-import { useAccount } from 'wagmi';
+import { ConnectButton, useConnectModal } from '@rainbow-me/rainbowkit';
 
 type RenewalButtonProps = {
   correctChain: boolean;
@@ -18,33 +16,43 @@ export function RenewalButton({
   disabled,
   isLoading,
 }: RenewalButtonProps) {
-  const { isConnected } = useAccount();
-
-  if (!isConnected) {
-    return (
-      <ConnectWallet
-        className={classNames(
-          'bg-button-black text-white hover:bg-button-blackHover active:bg-button-blackActive',
-          'px-10 py-3.5 text-sm md:text-lg',
-          'rounded-full',
-        )}
-        disconnectedLabel="Connect wallet"
-      />
-    );
-  }
+  const { openConnectModal } = useConnectModal();
 
   return (
-    <Button
-      onClick={correctChain ? renewNameCallback : switchToIntendedNetwork}
-      type="button"
-      variant={ButtonVariants.Black}
-      size={ButtonSizes.Medium}
-      disabled={disabled || isLoading}
-      isLoading={isLoading}
-      rounded
-      fullWidth
-    >
-      {correctChain ? 'Extend registration' : 'Switch to Base'}
-    </Button>
+    <ConnectButton.Custom>
+      {({ account, chain, mounted }) => {
+        const ready = mounted;
+        const connected = ready && account && chain;
+
+        if (!connected) {
+          return (
+            <Button
+              type="button"
+              variant={ButtonVariants.Black}
+              size={ButtonSizes.Medium}
+              onClick={openConnectModal}
+              rounded
+            >
+              Connect wallet
+            </Button>
+          );
+        }
+
+        return (
+          <Button
+            onClick={correctChain ? renewNameCallback : switchToIntendedNetwork}
+            type="button"
+            variant={ButtonVariants.Black}
+            size={ButtonSizes.Medium}
+            disabled={disabled}
+            isLoading={isLoading}
+            rounded
+            fullWidth
+          >
+            {correctChain ? 'Renew name' : 'Switch to Base'}
+          </Button>
+        );
+      }}
+    </ConnectButton.Custom>
   );
 }