Revamping and Refactoring the CKB Wallet Connection Experience: A Modular Compound Component for React Developers

English
,
1

Hi everyone,

The developer experience when integrating wallets is often a trade-off between speed and control. Standard “plug-and-play” components are fast to implement but difficult to style and control, while building from scratch is time-consuming and error-prone.

To bridge this gap for the Nervos ecosystem, I have refactored the CKB Wallet Connect component. This revamp focuses on a Compound Component pattern, specifically designed for React and CCC (Common Chain Connector) developers who need a seamless balance between sophisticated UX and developer flexibility.

        <ConnectWallet>
              <ConnectWalletButton />

              <ConnectWalletInfoContainer className="flex gap-1">

                <ConnectWalletInfoImage />

                <div className="flex flex-col gap-2">
                  <ConnectWalletInfoBalance withCurrency={false} />
                  <ConnectWalletInfoAddress frontChars={5} endChars={12} />
                </div>
              </ConnectWalletInfoContainer>
           </ConnectWallet>

What’s New?

  1. Compound Component Architecture

    Instead of a single, rigid <ConnectButton/>, the component is now broken down into modular sub-components (e.g., ConnectWalltetButton, ConnectWalletInfoImage, ConnectWalletInfoAddress, ConnectWalletInfoBalance). This allows developers to rearrange the UI or wrap specific parts in custom logic without breaking the internal state management.

  2. Custom styling control
    The ConnectWallet components comes with it’s own default styling, but styling can be easily changed or customized by the developer. Using the className prop on all the above listed components, developers who want custom styling can easily apply tailwind classes to any component as desired. This was made possible by clsx and tailwind merge.

  3. Human-Readable Financial Data

    Small details significantly impact user trust. The component now natively handles currency formatting, including standard comma separators for balances. This ensures that users see “1,000 CKB” rather than a raw, hard-to-read string of digits.

  4. Unified State via CCC

    By leveraging the CCC, the component maintains a robust connection state while abstracting away the boilerplate. Developers can now focus on their application logic rather than the edge cases of wallet handshakes.

  5. A Loading State
    Leveraged the animate pulse class from tailwindcss to show loading state while user’s data and details is being fetched. Users can now know when details are being fetched.

  6. Balance Decimal Places Control
    Developers can choose what amount of digits to show after the decimal point using the decimalPlaces prop on the <ConnectWalletInfoBalance decimalPlaces={4} />. Only values of 0-20 is allowed as the number of decimal places. 1,080.78090909 becomes 1,080.7809 when decimal places is set to 4.

  7. Address Truncation and Characters Control
    Developers can control what amount of characters from a user’s address would be shown. The ConnectWalletInfoAddress can take in this optional props - endChars and frontChars. These are used to control the amount of character that would be shown before and after an ellipsis i.e. .... It has a default of 10 characters as front characters and 6 for end characters. For example <ConnectWalletInfoAddressfrontChars={5}endChars={12} /> becomes ckt1q...3enuqqeax4g0

  8. Currency Visibility
    Developers can choose to show or not to show the CKB text behind the user’s Balance.
    Using the withCurrency prop on the ConnectWalletBalance component. It defaults to true when not set, which means the CKB text would show behind the balance by default. Implementation example: <ConnectWalletInfoBalance withCurrency={false} />.

Why This Matters

  • For Developers: It drastically reduces development time. You no longer have to choose between a “black box” component that ruins your design or a two-week custom build. You get the logic for free and the UI control you deserve.

  • For Users: The experience is smoother and more professional. Polished details like formatted balances and predictable modal behaviors make dApps feel production-ready and reliable.

  • For the Ecosystem: Standardization around high-quality, flexible UI components lowers the barrier to entry for new builders coming to Nervos.

Getting Started

Check out the live Demo and code on: https://ckb-connect-kit.vercel.app/
Also Read the documentation on: revamp-ckb-connect-wallet/ARCHITECTURE.md at main · Victor-Okenwa/revamp-ckb-connect-wallet · GitHub

I’m eager to hear your thoughts on this pattern. Would this modular approach help your current workflow? I’m open to feedback and looking forward to seeing how we can continue to improve the tooling for the CKB community.

Best, Victor Okenwa.

6 Likes
CKB Ecosystem Biweekly Update
2

This is awesome

2 Likes