Introducing Dynamic's New Sidebar Widget: Easy, Elegant, and Just a Minute to Set Up

At Dynamic, we’ve noticed a growing trend in the wallet space: platforms like Uniswap, Phantom, and Zerion are rolling out sidebar wallet control panels. Inspired by this trend, we’re introducing our own sidebar widget, crafted to integrate seamlessly with Dynamic-powered embedded wallets.

This new feature is more than just a design update; it’s another step towards making Web3 interactions more simple and intuitive. With just a few lines of custom CSS, you can transform your wallet interface into a sleek sidebar widget that aligns perfectly with your website’s design.

‍

Why a Sidebar Widget?

Sidebar widgets offer a compact yet comprehensive view of wallet controls, keeping essential functions within reach without cluttering the interface. This is especially useful for Web3 platforms where seamless transactions and interactions are critical. Additionally, this enhances the overall experience for end-users by providing convenient access without interference.

The best part about sidebar widgets? Setting one up with Dynamic is incredibly simple! All it takes is a minute, and you’ll have a beautifully animated sidebar widget ready to go. Below is a step-by-step guide to get you started.
‍

How to Set Up Your Sidebar Widget with Dynamic

Step 1: Add Custom CSS

First off you need to include the custom CSS that defines the animation and layout for the sidebar widget. To do so, simply add the following code to your project:
‍

export const customCSS = `
  @media (min-width: 768px) {
    .accordion-item {
      max-height: 100vh !important;
    }

    .modal, .dynamic-widget-modal, .dynamic-widget-card {
      right: 0 !important;
      top: 0 !important;
      transform: none !important;
      height: 100vh !important;
      border-radius: 0 !important;
      left: auto !important;
    }

    .wallet-list__scroll-container {
      max-height: 80vh !important;
    }

    .settings-view__body {
      height: auto !important;
    }

    .modal-card, .dynamic-widget-card {
      border-radius: 0 !important;
      background: linear-gradient(to bottom, #e6f3ff, #ffffff) !important;
    }

    .social-redirect-view__container, .wallet-no-access__container, .pending-signature__container, .pending-connect__container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin-top: -15%;
    }

    .footer-options-switcher__container {
      border-radius: 0 !important;
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
    }

    .dynamic-user-profile-layout {
      height: 90vh !important;
    }

    .dynamic-footer, .tos-and-pp__footer {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
    }

    .tos-and-pp__footer {
      bottom: 30px !important;
    }
  }
`

Step 2: Embed the CSS into Your Dynamic-Powered Wallet Settings

Next, you’ll want to add the custom CSS to the Dynamic-powered embedded wallet settings. This ensures that the sidebar widget functionality is consistent across all of your end-users’ experiences.

Here's how to do it:

<DynamicContextProvider
settings={{
// ...
cssOverrides: sidebarCss, // pass JSX element to be included in the shadow DOM
// ...
}}
>
<HomePage />
</DynamicContextProvider>

Step 3: Fine Tune it to Your Liking

One of the best parts about using Dynamic’s embedded wallet solution is the advanced customization that comes along with it. By adding more custom CSS, you can change colors, styles, fonts, and much more, ensuring that the wallet seamlessly integrates with your brand’s look and feel.

That’s it! In just a minute, you’ve turned your wallet interface into a personalized and efficient sidebar widget, enhancing both usability and aesthetics for your end-users.
‍

Acknowledging the Sidebar Widget Innovators

Our inspiration for launching this new feature was sparked by three key Web3 players:

Uniswap

Phantom

Zerion

‍
-------------

With this new feature, Dynamic continues to empower developers with the tools they need to create outstanding Web3 experiences. We can’t wait to see how you use this new sidebar widget to enhance your projects.