@dcentralab/header v1.3.34
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,
}
1 day ago
1 day ago
13 days ago
20 days ago
20 days ago
20 days ago
22 days ago
22 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
11 months ago
6 months ago
6 months ago
10 months ago
8 months ago
11 months ago
6 months ago
11 months ago
6 months ago
6 months ago
6 months ago
8 months ago
9 months ago
10 months ago
9 months ago
11 months ago
7 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
7 months ago
8 months ago
11 months ago
11 months ago
7 months ago
11 months ago
9 months ago
9 months ago
11 months ago
9 months ago
10 months ago
7 months ago
7 months ago
9 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
7 months ago
10 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
10 months ago
11 months ago
7 months ago
11 months ago
11 months ago
9 months ago
7 months ago
8 months ago
11 months ago
10 months ago
10 months ago
8 months ago
9 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
7 months ago
11 months ago
11 months ago