feat: add custom props for styling ConnectBitcoin button #25
Conversation
📝 WalkthroughWalkthroughThe changes involve modifications to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Page
participant ConnectBitcoin
participant Connect
User->>Page: Load Page
Page->>ConnectBitcoin: Render with className and icon
ConnectBitcoin->>Connect: Pass className and icon
Connect->>User: Display Connect Button with icon
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
src/app/page.tsx (1)
10-10: Consider extracting styles to a dedicated constants file or CSS module.While the implementation is correct, the inline Tailwind classes could be moved to a dedicated constants file or CSS module for better maintainability and reusability.
Example approach using a constants file:
// constants/styles.ts export const CONNECT_BITCOIN_STYLES = { button: "bg-black border-2 border-gray-700 rounded-sm hover:bg-zinc-900", icon: "w-4 h-4 ml-2" };Then update the component usage:
-<ConnectBitcoin className="bg-black border-2 border-gray-700 rounded-sm hover:bg-zinc-900" icon={<Wallet className="w-4 h-4 ml-2" />} /> +<ConnectBitcoin className={CONNECT_BITCOIN_STYLES.button} icon={<Wallet className={CONNECT_BITCOIN_STYLES.icon} />} />src/components/ConnectBitcoin/index.tsx (4)
96-96: Consider extracting common button stylesThe button styling is duplicated between the "Copy Address" and "Disconnect" buttons. Consider extracting these common styles into a shared class or constant.
+ const commonButtonStyles = "flex-col flex-1 text-sm font-semibold transition-all bg-white active:scale-95 dark:text-white rounded-xl w-fit h-fit font-rounded hover hover:bg-zinc-50 hover:scale-1025 dark:bg-rainbowkit-profileAction" - className="flex-col flex-1 text-sm font-semibold transition-all bg-white active:scale-95 dark:text-white rounded-xl w-fit h-fit font-rounded hover hover:bg-zinc-50 hover:scale-1025 dark:bg-rainbowkit-profileAction" + className={commonButtonStyles}Also applies to: 108-108, 120-120
148-152: Simplify className conditionalThe current className conditional can be simplified using the nullish coalescing operator.
- className={ - className - ? className - : `mx-2 font-bold transition-all bg-white dark:bg-rainbowkit-dark dark:text-foreground dark:hover:text-white hover:bg-white font-rounded text-zinc-800 text-md rounded-xl shadow-rainbowkit hover:scale-1025 active:scale-95 ` - } + className={className ?? `mx-2 font-bold transition-all bg-white dark:bg-rainbowkit-dark dark:text-foreground dark:hover:text-white hover:bg-white font-rounded text-zinc-800 text-md rounded-xl shadow-rainbowkit hover:scale-1025 active:scale-95`}
154-154: Add spacing between text and iconConsider adding spacing between "Connect Bitcoin" text and the icon for better visual appearance.
- Connect Bitcoin {icon} + Connect Bitcoin {icon && <span className="ml-2">{icon}</span>}
194-210: Consider using prop spreading for better maintainabilityThe current implementation forwards props individually. Consider using prop spreading for better maintainability when new props are added in the future.
- export const ConnectBitcoin: React.FC<ConnectBitcoinProps> = ({ - className, - icon - }) => { + export const ConnectBitcoin: React.FC<ConnectBitcoinProps> = (props) => { const { address, loading, connectWallet, disconnect } = useBitcoinWallet(); const modalComponent = useMemo(() => { if (address) { return <Details address={address} disconnect={disconnect} />; } return ( <Connect connectWallet={connectWallet} - icon={icon} - loading={loading} - className={className} + loading={loading} + {...props} /> ); }, [address, loading, connectWallet, disconnect]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/app/page.tsx(1 hunks)src/components/ConnectBitcoin/index.tsx(5 hunks)
🔇 Additional comments (3)
src/app/page.tsx (1)
5-5: LGTM!
Clean import of the Wallet icon from lucide-react.
src/components/ConnectBitcoin/index.tsx (2)
62-65: LGTM: Minor styling improvements
The styling adjustments to the LoaderCircle and text container enhance visual consistency.
132-140: LGTM: Well-structured interface definition
The ConnectProps interface is well-defined with appropriate types for all properties.
Summary by CodeRabbit
New Features
ConnectBitcoincomponent with newclassNameandiconprops for improved styling and flexibility.Walleticon to theConnectBitcoincomponent.Bug Fixes
WalletButtonandLoaderCirclefor better readability and consistency.Refactor