Header Component

Instalation

npm install @dcentralab/web3-wc-modal @dcentralab/language-provider

or

yarn add @dcentralab/web3-wc-modal @dcentralab/language-provider

Getting started

import { LangProvider } from '@dcentralab/language-provider';
import { Header } from '@dcentralab/header';
import { Web3WalletModal } from '@dcentralab/web3-wc-modal';
import emvProviders from '@dcentralab/evm-providers';
import cardanoProviders from '@dcentralab/cardano-providers';
import { NetworkSwitcherContextProvider } from '@dcentralab/wc-network-switcher'


<LangProvider enMessages={en} locales={locales} ref={lngRef}>
  <Header
    onCloseCallbackRef={ref}
    profileImage="https://hord-staging-users.s3.amazonaws.com/media/profile/4a4ece44-56dd-4e2a-8bc1-ba0b2d3d7e3b.jpg"
    links={links}
    menuLinks={menuLinks}
    mobileLinks={mobileLinks}
    sidebarLinks={sidebarLinks}
    sidebarAdditionalLinks={sidebarAdditionalLinks}
    sidebarBottomContent={<BottomContentElem />}
    isExpanded
    logo={{
      text: 'brandlogo',
      to: '/',
      // img: logo,
      img: <TokensFarmLogo />,
      imgWide: <TokensFarmLogoWide />,
    }}
    projectLogo={{
      text: 'projectlogo',
      href: 'https://projectlogo.com/',
      img: <Logo />,
    }}
    howToLink="https://google.com"
    networkSelectorProps={{
      networks,
      networkId,
      onNetworkSelect: handleNetChange,
      blockchainType,
      // account: '0x1b1872BE0f8685B234c487ECec406f7770ca63eD',
    }}
    onAuditsClicked={() => {}}
    defillamaLink="https://google.com"
    walletComponent={(
    <NetworkSwitcherContextProvider networks={appNetworks}>
      <Web3WalletModal
        rpcUrl={rpcUrl}
        networkId={networkId}
        pendingTx={0}
        onConnect={onConnect}
        onConnectError={onConnectError}
        onDisconnect={onDisconnect}
        onConnectRequest={onConnectRequest}
        autoConnectInPageProvider
        blockchainType={blockchainType}
        showBalance
        supportedWallets={[...evmProviders, ...cardanoProviders]}
        // supportedWallets={[MetaMaskConnector, ...cardanoProviders]}
        autoConnect
      />
    </NetworkSwitcherContextProvider>
    )}
  />
</LangProvider>

Props and Interfaces

interface ILogo {
  img: string | React.ReactNode
  imgWide?: string | React.ReactNode
  to?: string
  href?: string
  text?: string
  onClick?: () => void
}

type TVoidFunction = () => void;

export interface IBaseLink {
  id?: number | string
  text?: string
  className?: string
  to?: string
  icon?: string | React.ReactNode
  suffix?: string | React.ReactNode
  href?: string
  onClick?: (event: any) => void
  separator?: boolean
}
export interface ILink extends IBaseLink {
  items?: Array<IBaseLink>
}

interface IHeader {
  className?: string
  profileImage?: string
  logo: ILogo // app logo
  projectLogo: ILogo // for farm page
  links?: Array<ILink>
  sidebarLinks?: Array<ILink>
  sidebarAdditionalLinks?: Array<ILink>
  menuLinks?: Array<ILink>
  mobileLinks?: Array<ILink>
  networkSelectorProps?: INetworkSelector
  backButton?: React.ReactNode
  children?: React.ReactNode
  walletComponent?: React.ReactNode
  onCloseCallbackRef?: MutableRefObject<TVoidFunction>
  howToLink?: string
  defillamaLink?: string
  isExpanded?: boolean
  topContent?: JSX.Element | JSX.Element[]
  sidebarBottomContent?: JSX.Element | JSX.Element[]
  onToggleMenu?: (e?: boolean) => void,
  onAuditsClicked?: () => void,
}