feat(ord-connect): add nav menu callback (#310)

ordzaar · May 24, 2024 · da62469 · da62469
1 parent e20cc4e
commit da62469
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/packages/ord-connect/src/components/OrdConnectKit.tsx b/packages/ord-connect/src/components/OrdConnectKit.tsx
@@ -12,6 +12,8 @@ import "./style.css";
 export interface OrdConnectKitProp {
   hideConnectButton?: boolean;
   onViewProfile?: () => void;
+  onChangeWalletClick?: () => void;
+  onDisconnectWalletClick?: () => void;
   renderAvatar?: (address: string, size: "large" | "small") => ReactNode;
 }
 
@@ -22,16 +24,26 @@ export interface OrdConnectKitProp {
  * @param {Object} props - Props for the OrdConnectKit component.
  * @param {boolean} [props.hideConnectButton] - Hides the connect and connected status button.
  * @param {Function} [props.renderAvatar] - Render prop for rendering wallet profile avatar when connected.
- * @param {Function} [props.onViewProfile] - Callback function to handle viewing wallet profile.
+ * @param {Function} [props.onViewProfile] - Callback function to handle clicking view wallet profile.
+ * @param {Function} [props.onChangeWalletClick] - Callback function to handle clicking change wallet.
+ * @param {Function} [props.onDisconnectWalletClick] - Callback function to handle clicking disconnect wallet.
  * @returns {JSX.Element} OrdConnectKit React component.
  */
 export function OrdConnectKit({
   hideConnectButton,
   onViewProfile,
+  onChangeWalletClick,
+  onDisconnectWalletClick,
   renderAvatar,
 }: OrdConnectKitProp) {
-  const { address, network, isModalOpen, openModal, closeModal } =
-    useOrdConnect();
+  const {
+    address,
+    disconnectWallet,
+    network,
+    isModalOpen,
+    openModal,
+    closeModal,
+  } = useOrdConnect();
 
   const hasMounted = useHasMounted();
 
@@ -45,7 +57,14 @@ export function OrdConnectKit({
         address={address.ordinals}
         network={network}
         onViewProfile={onViewProfile}
-        onChangeWallet={openModal}
+        onChangeWallet={() => {
+          openModal();
+          onChangeWalletClick?.();
+        }}
+        onDisconnectWallet={() => {
+          disconnectWallet();
+          onDisconnectWalletClick?.();
+        }}
         renderAvatar={renderAvatar}
       />
     ) : (

diff --git a/packages/ord-connect/src/components/PostConnectButton/index.tsx b/packages/ord-connect/src/components/PostConnectButton/index.tsx
@@ -25,6 +25,7 @@ interface PostConnectButtonProp {
   network: string;
   onViewProfile?: () => void;
   onChangeWallet?: () => void;
+  onDisconnectWallet?: () => void;
   renderAvatar?: (address: string, size: "large" | "small") => ReactNode;
 }
 
@@ -33,9 +34,10 @@ export function PostConnectButton({
   network,
   onViewProfile,
   onChangeWallet,
+  onDisconnectWallet,
   renderAvatar,
 }: PostConnectButtonProp) {
-  const { disconnectWallet, wallet } = useOrdConnect();
+  const { wallet } = useOrdConnect();
 
   return (
     <Menu
@@ -93,27 +95,23 @@ export function PostConnectButton({
               <Menu.Item
                 as="button"
                 className="dropdown-button"
-                onClick={() => {
-                  onViewProfile?.();
-                }}
+                onClick={() => onViewProfile?.()}
               >
                 <span className="label">View profile</span>
                 <span className="value">{truncateMiddle(address)}</span>
               </Menu.Item>
               <Menu.Item
                 as="button"
                 className="dropdown-button"
-                onClick={() => {
-                  onChangeWallet?.();
-                }}
+                onClick={() => onChangeWallet?.()}
               >
                 <span className="change-wallet-label">Change wallet</span>
               </Menu.Item>
               <hr className="horizontal-separator" />
               <Menu.Item
                 as="button"
                 className="dropdown-button"
-                onClick={disconnectWallet}
+                onClick={() => onDisconnectWallet?.()}
               >
                 <span className="label">Disconnect wallet</span>
                 <img src={LogoutIcon} className="logout-icon" alt="logout" />