eclipse-wallet-adapter.md

How to enable wallet-adapter to be chain specific

https://github.com/anza-xyz/wallet-adapter/blob/3761cd8cc867da39da7c0b070bbf8779402cff36/packages/ui/react-ui/src/WalletModal.tsx#L25C1-L39C19

1. copy parent folder and import from here the useWalletModal() and add the WalletModalProvider in the app
2. the code is then set to only allow Eclipse specific wallet.

  const [listedWallets, collapsedWallets] = useMemo(() => {
    const installed: Wallet[] = [];
    const notInstalled: Wallet[] = [];
    const eclipseWalletsNames = ["Backpack", "Nightly"];
    const eclipseWallets = wallets.filter((wallet) => {
      return eclipseWalletsNames.includes(wallet.adapter.name);
    });
    const walletsUnique = new Set([...eclipseWallets]);

    for (const wallet of walletsUnique) {
      if (wallet.readyState === WalletReadyState.Installed) {
        installed.push(wallet);
      } else {
        notInstalled.push(wallet);
      }
    }

    return installed.length ? [installed, notInstalled] : [notInstalled, []];
  }, [wallets]);

How to detect chain connected in wallet?

• the code below switches the chain in the wallet. it sometimes may not work due to incompatibility, you can otherwise just detect the chain and prompt the user to switch by themselves.

const ECLIPSE_WALLETS = ['backpack', 'nightly'] as string[];
const ECLIPSE_MAINNET_GENESIS_HASH = 'EAQLJCV2mh23BsK2P9oYpV5CHVLDNHTxYss3URrNmg3s';
const SOLANA_MAINNET_GENESIS_HASH = '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdpKuc147dw2N9d';

export type UseStorageReturnValue = {
  getItem: (key: string) => string;
  setItem: (key: string, value: string) => boolean;
  removeItem: (key: string) => void;
};

export const useLocalStorage = (): UseStorageReturnValue => {
  const isBrowser: boolean = ((): boolean => typeof window !== 'undefined')();

  const getItem = (key: string): string => {
    return isBrowser ? window.localStorage[key] : '';
  };

  const setItem = (key: string, value: string): boolean => {
    if (isBrowser) {
      window.localStorage.setItem(key, value);
      return true;
    }

    return false;
  };

  const removeItem = (key: string): void => {
    window.localStorage.removeItem(key);
  };

  return {
    getItem,
    setItem,
    removeItem,
  };
};

export const changeBlockchainNetworkOrDisconnect = (
  connected: boolean,
  storage: UseStorageReturnValue,
  disconnect: () => Promise<void>,
) => {
  if (!connected) return;

  try {
    const walletName = storage.getItem('walletName').replace(/"/g, '').toLowerCase();
    const isEclipseWallet = ECLIPSE_WALLETS.includes(walletName);

    const handleEclipseWalletConnection = (genesisHash: string) => {
      if (walletName === 'backpack') {
        // @ts-ignore
        window.backpack.connect({ chainGenesisHash: genesisHash });
      } else if (walletName === 'nightly') {
        // @ts-ignore
        window.nightly?.solana?.changeNetwork({ genesisHash });
      }
    };

    if (isEclipseWallet) {
        handleEclipseWalletConnection(ECLIPSE_MAINNET_GENESIS_HASH);
    } else {
        // Disconnect non-eclipse wallets
        disconnect();
    }
  } catch {
    console.log('catching error')
  }
};