As far as the login methods to display, this is determined firstly by whatever you have enabled at the time, but you can override it using Login Views and also handle custom ordering there - learn more in the tutorial.
By default, if you use our DynamicWidget, it will show up as a button which opens the login screen in a modal. You can change this to an embedded widget so that the whole signup/login modal shows up directly on the page.You can see both these options in action on the demo in the “Widget integration” section under “Design”. Learn more about the standard widget here and the embedded widget here.
By default, we split email login into two components, an input and a continue button directly below it. You can merge them into one single component using the “Display email submit button inside the input field” button in “Design Settings”.
The login screen normally lists wallets one by one, which can clutter the screen if branded wallet login is not the most important thing to your users. You can collapse this list down into a single “Continue with a wallet” button (which will in turn open this list) but using the “Collapse wallet list” button in “Design Settings”.
The social and email sections of the login screen are bundled together by default i.e. without an OR seperator like with branded wallets, but you can change this using the “Split email and social into separate sections” button in “Design Settings”.
The default UI shows email login above social if both are enabled. You can switch the default ordering using the “Place social above email section” button in “Design Settings”.
If you want to change the text/css, please refer to the Changing CSS section below. To change 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.
Copy
Ask AI
<DynamicWidget innerButtonComponent={<button>My Custom Connect Wallet Button</button>}> {/* ... rest of your app ... */}</DynamicWidget>
If you want to use your own custom button we can use setShowAuthFlow available though the useDynamicContext hook.We access it like this:
Copy
Ask AI
const { setShowAuthFlow } = useDynamicContext();
We can then use this function to trigger the Dynamic Connect Wallet flow when our custom button is clicked.
Copy
Ask AI
<button onClick={() => setShowAuthFlow(true)}> My Custom Connect Wallet Button</button>