web3-onboard-monorepo/packages/magic/src/login-modal.ts

Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, mul

import { firstValueFrom, Subject, take } from 'rxjs'
import LoginModal from './view/LoginModal.svelte'
import { loggedIn$ } from './streams.js'
import { SofiaProRegular, SofiaProLight } from '@web3-onboard/common'
import type { LoginOptions } from './types.js'

// eslint-disable-next-line max-len
const loginModal = async (options: LoginOptions): Promise<boolean> => {
  if (options) {
    const error = !options

    if (error) {
      throw error
    }
  }

  const app = mountLoginModal(options, loggedIn$)

  loggedIn$.pipe(take(1)).subscribe(() => {
    app.$destroy()
    const modalEl = document.body.querySelector('onboard-magic-login-modal')
    modalEl && document.body.removeChild(modalEl)
  })

  return firstValueFrom(loggedIn$)
}

// eslint-disable-next-line max-len
const mountLoginModal = (
  loginOptions: LoginOptions,
  loggedIn$: Subject<boolean>
) => {
  class loginModalEl extends HTMLElement {
    constructor() {
      super()
    }
  }

  if (!customElements.get('onboard-magic-login-modal')) {
    customElements.define('onboard-magic-login-modal', loginModalEl)
  }

  // Add Fonts to main page
  const styleEl = document.createElement('style')

  styleEl.innerHTML = `
    ${SofiaProRegular}
    ${SofiaProLight}
  `
  document.body.appendChild(styleEl)

  // add to DOM
  const loginModalDomElement = document.createElement(
    'onboard-magic-login-modal'
  )
  const target = loginModalDomElement.attachShadow({ mode: 'open' })

  loginModalDomElement.style.all = 'initial'

  target.innerHTML = `
    <style>
      :host {  
        /* COLORS */
        --white: white;
        --black: black;
        --primary-300: #b1b8f2;
        --primary-500: #6370e5;
        --gray-200: #c2c4c9;
        --gray-500: #33394b;
        --danger-500: #ff4f4f;

        /* FONTS */
        --font-family-normal: Sofia Pro;
        --font-family-light: Sofia Pro Light;
        --font-size-5: 1rem;
        --font-line-height-1: 24px;

        /* SPACING */
        --margin-4: 1rem;
        --margin-5: 0.5rem;

        /* MODAL POSITION */
        --login-modal-z-index: 25;
        --login-modal-top: unset;
        --login-modal-right: unset;
        --login-modal-bottom: unset;
        --login-modal-left: unset;
      }

    </style>
  `

  document.body.appendChild(loginModalDomElement)

  const app = new LoginModal({
    target: target,
    props: {
      loginOptions,
      loggedIn$
    }
  })

  return app
}

export default loginModal