feat(ord-connect): add renderAvatar (#202)

ordzaar · Jan 11, 2024 · 98ecd63 · 98ecd63
1 parent 20a2d2e
commit 98ecd63
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 15 deletions.
diff --git a/packages/ord-connect/src/components/OrdConnectKit.tsx b/packages/ord-connect/src/components/OrdConnectKit.tsx
@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 import { useOrdConnect } from "../providers/OrdConnectProvider";
 
 import { PostConnectButton } from "./PostConnectButton";
@@ -10,6 +12,7 @@ export interface OrdConnectKitProp {
   customStyle?: string;
   onViewProfile?: () => void;
   disableMobile?: boolean;
+  renderAvatar?: (address: string, size: "large" | "small") => ReactNode;
 }
 
 /**
@@ -25,6 +28,7 @@ export function OrdConnectKit({
   customStyle,
   onViewProfile,
   disableMobile,
+  renderAvatar,
 }: OrdConnectKitProp) {
   const { address, network, isModalOpen, openModal, closeModal } =
     useOrdConnect();
@@ -37,6 +41,7 @@ export function OrdConnectKit({
           network={network}
           onViewProfile={onViewProfile}
           onChangeWallet={openModal}
+          renderAvatar={renderAvatar}
         />
       ) : (
         <PreConnectButton openModal={openModal} customStyle={customStyle} />
@@ -46,6 +51,7 @@ export function OrdConnectKit({
         isOpen={isModalOpen}
         closeModal={closeModal}
         disableMobile={disableMobile}
+        renderAvatar={renderAvatar}
       />
     </>
   );

diff --git a/packages/ord-connect/src/components/PostConnectButton/index.tsx b/packages/ord-connect/src/components/PostConnectButton/index.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, ReactNode } from "react";
 import Avatar from "boring-avatars";
 import { Menu, Transition } from "@headlessui/react";
 
@@ -14,13 +14,15 @@ interface PostConnectButtonProp {
   network: string;
   onViewProfile?: () => void;
   onChangeWallet?: () => void;
+  renderAvatar?: (address: string, size: "large" | "small") => ReactNode;
 }
 
 export function PostConnectButton({
   address,
   network,
   onViewProfile,
   onChangeWallet,
+  renderAvatar,
 }: PostConnectButtonProp) {
   const { disconnectWallet, wallet } = useOrdConnect();
 
@@ -33,12 +35,16 @@ export function PostConnectButton({
         <>
           <Menu.Button className="ord-wallet-connected-button">
             <div className="wallet-identifier-container">
-              <Avatar
-                size={28}
-                variant="beam"
-                name={address}
-                colors={["#1C2DCB", "#F226B8"]}
-              />
+              {renderAvatar ? (
+                renderAvatar(address, "large")
+              ) : (
+                <Avatar
+                  size={28}
+                  variant="beam"
+                  name={address}
+                  colors={["#1C2DCB", "#F226B8"]}
+                />
+              )}
               <img
                 src={
                   wallet === Wallet.XVERSE ? XverseWalletIcon : UnisatWalletIcon

diff --git a/packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx b/packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { ReactNode, useCallback, useState } from "react";
 import Avatar from "boring-avatars";
 
 import ChevronRightIcon from "../../assets/chevron-right.svg";
@@ -19,6 +19,7 @@ interface WalletButtonProp {
   setErrorMessage: (msg: string) => void;
   isDisabled?: boolean;
   isMobileDevice?: boolean;
+  renderAvatar?: (address: string, size: "large" | "small") => ReactNode;
 }
 
 export function WalletButton({
@@ -29,6 +30,7 @@ export function WalletButton({
   setErrorMessage,
   isDisabled,
   isMobileDevice,
+  renderAvatar,
 }: WalletButtonProp) {
   const { wallet: _connectedWallet, address: _connectedAddress } =
     useOrdConnect();
@@ -82,12 +84,16 @@ export function WalletButton({
         </div>
         {connectedWallet === wallet && connectedAddress.ordinals ? (
           <div className="wallet-option-connected-address">
-            <Avatar
-              size={16}
-              variant="beam"
-              name={connectedAddress.ordinals}
-              colors={["#1C2DCB", "#F226B8"]}
-            />
+            {renderAvatar ? (
+              renderAvatar(connectedAddress.ordinals, "small")
+            ) : (
+              <Avatar
+                size={16}
+                variant="beam"
+                name={connectedAddress.ordinals}
+                colors={["#1C2DCB", "#F226B8"]}
+              />
+            )}
             <span className="label">
               {truncateMiddle(connectedAddress.ordinals)}
             </span>

diff --git a/packages/ord-connect/src/components/SelectWalletModal/index.tsx b/packages/ord-connect/src/components/SelectWalletModal/index.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useState } from "react";
+import { Fragment, ReactNode, useCallback, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import {
   BrowserWalletNotInstalledError,
@@ -20,6 +20,7 @@ interface SelectWalletModalProp {
   isOpen: boolean;
   closeModal: () => void;
   disableMobile?: boolean;
+  renderAvatar?: (address: string, size: "large" | "small") => ReactNode;
 }
 
 const WALLET_CHROME_EXTENSION_URL: Record<Wallet, string> = {
@@ -31,6 +32,7 @@ export function SelectWalletModal({
   isOpen,
   closeModal,
   disableMobile,
+  renderAvatar,
 }: SelectWalletModalProp) {
   const {
     updateAddress,
@@ -269,6 +271,7 @@ export function SelectWalletModal({
                             setErrorMessage={setErrorMessage}
                             isDisabled={isMobile} // disable unisat on mobile until it is supported
                             isMobileDevice={isMobile}
+                            renderAvatar={renderAvatar}
                           />
                           <hr className="horizontal-separator" />
                         </>
@@ -280,6 +283,7 @@ export function SelectWalletModal({
                         icon={XverseWalletIcon}
                         setErrorMessage={setErrorMessage}
                         isMobileDevice={isMobile}
+                        renderAvatar={renderAvatar}
                       />
                     </section>
                   ) : (