Design Techniques Tutorial

Let’s become familiar with the design customization techniques for your Dynamic implementation.

We achieve these three use cases along the way:

1. Redesign and implement a Connect Wallet button.
2. Change the whole design theme.
3. Customize the logged in widget to suit your own style needs.
4. Implement a custom welcome screen for our users when they click Connect Wallet.

During the guide we will utilize all three of the main design techniques, which are as follows:

• Configurations available via the Dashboard
• CSS Variable configurations
• CSS Overrides

Let’s go!

Pre-requisites

Make sure you have the SDK set up in a simple application, you can find the guide to do that here.

Implement a custom Connect Wallet button

We want to achieve three things here:

1. Change the default button colors
2. Change the default button text
3. Use our own custom button

Before we start you should know that the Connect button is a part of the DynamicWidget, but can also be used seperately through the Dynamic Connect Button component. It doesn’t matter which one you use here, the techniques will affect both!

Button colors

The easiest way to achieve this is to utilize the default CSS variables.

We’ll focus on the background color, main color and the text color here but there are more variables available such as the border, shadow etc. You can find the full reference here.

First we’ll need to make sure in our CSS we use the following class name:

.dynamic-shadow-dom {
}

Now we add add the following variables to that class:

.dynamic-shadow-dom {
  --dynamic-connect-button-background: #000;
  --dynamic-connect-button-color: #fff;
  --dynamic-text-primary: #fff;
}

Run your application and you’ll see the color changes. You can also use the inspector to see exactly which elements are being affected.

Button text & font

We can also change the text of the button and the font used. For the font, the approach is exactly the same as for the colors, we just need to use the correct variables.

.dynamic-shadow-dom {
  --dynamic-text-size-button-primary: 16px;
  --dynamic-font-family-primary: "Roboto", sans-serif;
}

For the text itself, we will use the innerButtonComponent prop on the DynamicWidget. This prop allows us to pass in a JSX element that will be rendered as the button.

<DynamicWidget
  innerButtonComponent={<button>My Custom Connect Wallet Button</button>}
>
  {/* ... rest of your app ... */}
</DynamicWidget>

Use our own button

For this we’ll want to utilize one of the handy functions available though the useDynamicContext hook: “setShowAuthFlow”.

We access it like this:

const { setShowAuthFlow } = useDynamicContext();

We can then use this function to trigger the Dynamic Connect Wallet flow when our custom button is clicked.

<button onClick={() => setShowAuthFlow(true)}>
  My Custom Connect Wallet Button
</button>

Change the whole design theme

This is as simple as a visit to the design section of your Dynamic dashboard.

Under the “Themes” section, choose any of the available themes, save when prompted, and you’ll be live immediately with your new design!

Customising the logged in widget

The logged in widget is the widget is the part of the DynamicWidget that renders the Dynamic User Profile component. As with the Connect button, you can use the Widget or the Widget Content component, this guide will work for both.

Let’s say in this example we want to do two things:

1. Remove the network picker from the logged in widget.
2. Rotate the wallet icon using animations in the logged in widget.

Remove the network picker

This is an option found under the “Branded Wallets” heading in the Log in & User Profile section of the dashboard,

Toggle on “Hide Network”, save, and you’re done!

Change the border radius

There is no CSS variable to do this, so it means we will use a CSS override.

Once you have found the class names you want to override, and know what css you wish to apply instead, we need to declare the css as a string literal, ideally stored under a variable called cssOverrides in whichever component you’re initialising DynamicContextProvider.

const cssOverrides = `
    .dynamic-widget-inline-controls__account-control > img {
      animation: rotation 2s infinite linear
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    };
  `;

Then, you can use this variable as a setting for DynamicContextProvider:

<DynamicContextProvider
  settings={{
    cssOverrides,
  }}
>
  {/* ... rest of your app ... */}
</DynamicContextProvider>

Note that you can also pass a JSX element rather than a string, but more on that here

That’s it! Run your app. Once logged in, you should no longer see your network picker and the wallet icon should be happily spinning!

Note that is you need to add extra content to the widget, not just style the existing content differently, we recommend following the custom widget content guide.

Implement a custom welcome screen

Here we see how to reach beyond the confines of the components themselves, and extending the flow into your own application using callbacks and functions.

You cannot implement a welcome screen inside the Dynamic modal, but you can of course create your own in your application. This raises the question about how to trigger it at the right time.

The answer is to use the onAuthSuccess callback. This callback is triggered when the user has successfully authenticated with Dynamic.

<DynamicContextProvider
  settings={{
    events: {
      onAuthSuccess: (args) => {
        console.log("onAuthSuccess was called", args);
      },
    },
  }}
>
  {/* ... rest of your app ... */}
</DynamicContextProvider>

The second part of the puzzle is to check if this is a new user or not, since we might want a different experience for new users. We can do this by checking the “newUser” property on the object supplied by the callback above.

This is because the callback supplies you with the user object, and this is a representation of the UserProfile which contains the newUser boolean.

  onAuthSuccess: (args) => {
        if(args.user.newUser) {
          console.log("This is a new user")
        }
      },

If this is indeed a new user, you can replace the console log above with your own logic to call your welcome screen component, and voila!

Conclusion

You just learned how to customize the design of your Dynamic implementation using the three main techniques:

1. Configurations available via the Dashboard
2. CSS Variable configurations
3. CSS Overrides

For more information on the design customization options available, check out the design customization section.

If you have any questions at all about these techniques or how to achieve a certain design use case, don’t hesitate to ask in the community slack.