@dcentralab/wc-network-switcher v1.3.34
Networks icons
Instalation
npm install @dcentralab/wc-network-switcher
or
yarn add @dcentralab/wc-network-switcher
Getting started
Network switcher provides a way for handling app network switching (both evm and cardano) chains.
Exports
{
NetworkIcon
NetworksDropdown,
INetworkSwitcher,
NetworkSwitcher,
NetworkSwitcherContext,
NetworkSwitcherContextProvider,
}
NetworkIcon
will render the passed network object icon by prop chainInfo
which is type of INetworkOption
.
this code snippet will render the current selected chain icon
import {
NetworkIcon,
NetworkSwitcherContext,
} from "@dcentralab/wc-network-switcher";
const { networkInfo } = useContext(NetworkSwitcherContext);
<NetworkIcon chainInfo={networkInfo} />;
NetworksDropdown
will render a list of networks staked over each other and highlight on the selected one.
it's internally used in NetworkSwitcher
import {
NetworkIcon,
NetworkSwitcherContext,
} from "@dcentralab/wc-network-switcher";
function NetworkSwitcher({ children }: INetworkSwitcher) {
const { networksList } = useContext(NetworkSwitcherContext);
return(
<InlineModal
onToggle={setDropdownOpened}
closeOnContentClick
content={<NetworksDropdown />}
>
{children}
</InlineModal>)
NetworkSwitcherContextProvider
App should be wrapped with NetworkSwitcherContextProvider and used networks will be passed to it.
import { NetworkSwitcherContextProvider } from "@dcentralab/wc-network-switcher";
<NetworkSwitcherContextProvider networks={appNetworks}>
<App />
</NetworkSwitcherContextProvider>;
NetworkSwitcher
the main UI component for switching network. located in header and been added to duf header beside the wallet connect component
Note: it's hidden on mobile
import { NetworkSwitcher } from "@dcentralab/wc-network-switcher";
<div className="duf-header-wallet-container">
<NetworkSwitcher />
{walletComponent}
<ContextMenu links={menuLinks} rtl profileImage={profileImage} />
</div>;
Interfaces
import { BLOCKCHAIN_TYPE, TWalletType } from "@dcentralab/common";
import { ReactNode } from "react";
import { IMessage, IValues } from "../formatMessage";
export interface IIntl {
formatMessage: (msg: IMessage, values?: IValues) => string;
}
export interface INetwork {
rpcUrl: string;
networkId: number;
derivationPath?: string;
blockchainType: BLOCKCHAIN_TYPE;
}
export interface IWallet {
type: TWalletType;
blockchainType: BLOCKCHAIN_TYPE;
mobile?: boolean;
hwWallet?: boolean;
}
export interface INetworkOption extends INetwork {
Icon?: JSX.Element | string;
logo?: JSX.Element | string;
title?: string;
chainName?: string;
explorerUrl?: string;
}
export interface IContextState {
account: string;
connectingWalletType: TWalletType | null;
connectedWalletType: TWalletType | null;
accountType: string;
connectionType: string | null;
connectingWallet: boolean;
connectionError: string;
isModalOpen: boolean;
supportedWallets: IWallet[];
lsKey?: string;
}
export interface INetworkSwitcherContextProps {
children: ReactNode;
networks?: INetworkOption[];
defaultChainId?: number;
defaultBlockchainType?: BLOCKCHAIN_TYPE;
useStoredNetId?: boolean; // pass to store netwotkId and blockchainType in localstorage automaticly
onNetworkChange?: (networkInfo?: INetworkOption) => void;
}
export interface IHDWalletProps {
afterConnect: () => void;
}
24 hours ago
23 hours ago
13 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
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
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago