From 69c4be53a7b9a10b8497238683a14c73caa3a7c7 Mon Sep 17 00:00:00 2001
From: Gustavo Mauricio <gustavo.mauricio58@gmail.com>
Date: Thu, 15 Sep 2022 07:55:40 +0100
Subject: [PATCH] refactor: wallet buttons extracted to Button component

---
 components/Button.tsx | 22 ++++++++++++++++++++++
 components/Wallet.tsx | 19 ++++++++-----------
 2 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 components/Button.tsx

diff --git a/components/Button.tsx b/components/Button.tsx
new file mode 100644
index 00000000..e17d3e43
--- /dev/null
+++ b/components/Button.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+type Props = {
+  children: string;
+  className?: string;
+  onClick: () => void;
+};
+
+const Button = React.forwardRef<any, Props>(
+  ({ children, className = "", onClick }, ref) => (
+    <button
+      ref={ref}
+      onClick={onClick}
+      className={`rounded-3xl bg-green-500 py-2 px-5 text-white text-sm font-semibold overflow-hidden text-ellipsis ${className}`}
+    >
+      {children}
+    </button>
+  )
+);
+
+Button.displayName = "Button";
+export default Button;
diff --git a/components/Wallet.tsx b/components/Wallet.tsx
index ce65dfd7..c702a050 100644
--- a/components/Wallet.tsx
+++ b/components/Wallet.tsx
@@ -3,11 +3,11 @@ import { Popover } from "@headlessui/react";
 import { toast } from "react-toastify";
 import Image from "next/image";
 
-import { formatWalletAddress } from "utils/formatters";
-
+import Button from "./Button";
 import ConnectModal from "./ConnectModal";
 import useWalletStore from "stores/useWalletStore";
 import useInjectiveBalance from "hooks/useInjectiveBalance";
+import { formatWalletAddress } from "utils/formatters";
 
 const WalletPopover = ({ children }: { children: React.ReactNode }) => {
   const address = useWalletStore((state) => state.address);
@@ -17,7 +17,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <Popover className="relative">
-      <Popover.Button className="rounded-3xl bg-green-500 py-2 px-2 text-sm font-semibold w-[200px] overflow-hidden text-ellipsis">
+      <Popover.Button as={Button} className="w-[200px]">
         {children}
       </Popover.Button>
 
@@ -33,12 +33,12 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
                 </span>
               </p>
             </div>
-            <button
-              className="text-white text-sm bg-[#524bb1] rounded-3xl hover:bg-[#6962cc] cursor-pointer px-5 py-1.5 "
+            <Button
+              className=" bg-[#524bb1] hover:bg-[#6962cc]"
               onClick={() => actions.setAddress("")}
             >
               Disconnect
-            </button>
+            </Button>
           </div>
           <p className="mb-6 text-sm">{address}</p>
           <button
@@ -86,12 +86,9 @@ const Wallet = () => {
       {hasHydrated && address ? (
         <WalletPopover>{formatWalletAddress(address)}</WalletPopover>
       ) : (
-        <button
-          className="rounded-3xl bg-green-500 py-2 px-2 text-sm font-semibold w-[200px]"
-          onClick={() => setShowConnectModal(true)}
-        >
+        <Button className="w-[200px]" onClick={() => setShowConnectModal(true)}>
           Connect Wallet
-        </button>
+        </Button>
       )}
       <ConnectModal
         isOpen={showConnectModal}