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;
  enableSearch?: boolean; // enable search input
}

export interface IHDWalletProps {
  afterConnect: () => void;
}