Styling the wallet

The wallet and its modal can be styled to fit in well with the integrating websites.

There are 3 options:

• Setting light or dark mode on initiation with initWaaP
• Toggling dark mode with toggleDarkMode()
• Styling with CSS

Setting light or dark mode with initWaaP

styles: { darkMode: true } can be set while calling initWaaP

import { initWaaP } from "@human.tech/waap-sdk";

const initConfig = {
  config: {
    allowedSocials: [
      "google",
      "twitter",
      "discord",
      "coinbase",
      "linkedin",
      "apple",
    ],
    authenticationMethods: ["email", "phone", "social"],
    styles: { darkMode: true },
  },
  useStaging: false,
  // walletConnectProjectId: "<PROJECT_ID>", // Required if 'wallet' in authenticationMethods
};

initWaaP(initConfig);

Toggling dark mode with toggleDarkMode()

After initialization, for certain UI screens and themes, the wallet can be toggled between light and dark mode as needed.

window.waap.toggleDarkMode();

Styling with CSS

For advanced customizations, developers can use CSS.

HTML structure is as below. To position and customize the modal styles, #waap-wallet-iframe-container and #waap-wallet-iframe-wrapper can be overriden.

<div id="waap-wallet-iframe-container">
  <div id="waap-wallet-iframe-wrapper">
    <iframe id="waap-wallet-iframe" />
  </div>
</div>

Below is the default stylings but all of them can be overridden with !important.

#waap-wallet-iframe-container {
  position: fixed;
  inset: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}

#waap-wallet-iframe-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    height: 531px;
    width: 380px;
}

Below is how the default styings are overriden with custom styles using !important.

#waap-wallet-iframe-container {
  backdrop-filter: none !important;
  // make background transparent instead of translucent
  background-color: transparent !important;
  width: 380px !important;
  // position to the left instead of default center
  left: 16px !important;
}

#waap-wallet-iframe-wrapper {
  // showing shadow
  filter: drop-shadow(2px 2px 2px #333);
}

Important considerations

To prevent clickjacking, WaaP uses IntersectionObserverV2 to determine if the iframe is visible and requires the user to complete a slider CAPTCHA if the iframe is not visible. For the best UX, avoid adding styles that cause IOV2 to mark the iframe as invisible. If any of the iframe's ancestor elements (including not just the iframe container but any element in your app that is an ancestor of the iframe) have such styles, the user will be required to complete the CAPTCHA before signing any message or transaction.

We suggest the following.

• Avoid CSS filters such as filter: grayscale(1%), filter: blur(0.1px), or filter: brightness(100%). Avoid using backdrop-filter on the iframe or parent of the iframe.
• Avoid setting CSS opacity to less than 1.
• Avoid non-trivial CSS transforms. Styles such as transform: translate(x, y), transform: scale(1.5), and transform: matrix(a, 0, 0, a, tx, ty) are safe. Styles such as transform: scale(1, 0.9) (non-uniform scaling), transform: rotate(1deg) (rotation), transform: skewX(10deg) (skewing), or transform: translateZ(10px) (3D transforms) are unsafe.
• Avoid occluding the iframe element.