Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] feat: chain toggle changes wallet chain #530

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

[WIP] feat: chain toggle changes wallet chain #530

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28d72c8
feat: change wallet chain id when change chain type
solidovic Oct 30, 2024
5ded626
Merge branch 'feature/si-1641-refactoring-single-source-of-truth-for-…
solidovic Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions modules/web3/web3-provider/dapp-chain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import React, {
useState,
useMemo,
useEffect,
useCallback,
} from 'react';
import invariant from 'tiny-invariant';

import { CHAINS, isSDKSupportedL2Chain } from 'consts/chains';
import { useAccount } from 'wagmi';
import { useAccount, useSwitchChain } from 'wagmi';
import { config } from 'config';
import { useLidoSDK } from './lido-sdk';
import { wagmiChainMap } from './web3-provider';
Expand All @@ -20,7 +21,7 @@ export enum DAPP_CHAIN_TYPE {

type DappChainContextValue = {
chainType: DAPP_CHAIN_TYPE;
setChainType: React.Dispatch<React.SetStateAction<DAPP_CHAIN_TYPE>>;
setChainType: React.Dispatch<DAPP_CHAIN_TYPE>;
supportedChainIds: number[];
isChainTypeMatched: boolean;
isChainTypeOnL2: boolean;
Expand Down Expand Up @@ -119,6 +120,7 @@ export const useDappChain = (): UseDappChainValue => {
export const SupportL2Chains: React.FC<React.PropsWithChildren> = ({
children,
}) => {
const { switchChain } = useSwitchChain();
const { chainId: walletChainId, isConnected } = useAccount();
const [chainType, setChainType] = useState<DAPP_CHAIN_TYPE>(
DAPP_CHAIN_TYPE.Ethereum,
Expand All @@ -139,12 +141,25 @@ export const SupportL2Chains: React.FC<React.PropsWithChildren> = ({
}
}, [walletChainId, isConnected, setChainType]);

const handleSetChainType = useCallback<React.Dispatch<DAPP_CHAIN_TYPE>>(
(newChainType) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am thinking we try something here:
Instead of chainType on selector, we select chainId. So for tesntent we would have Holesky and OP sepolia namings. No changes to prod UX. Also would allow in dev to select any chain you have in supported. This would also simpligy this code as chainId->chainType mapping is very clear.
ChainType still serves a purpose, as it allows us to get correct UI color and etc.

setChainType(newChainType);

const newChainId =
getChainIdByChainType(newChainType, config.supportedChains) ??
config.defaultChain;

switchChain({ chainId: newChainId });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to check if cuurent connector has switchChain method and avoid calling this. Also error handlers that print warning to console if switchChain failed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also would love to experiment with async UX, where we on user selecting chain and if there is switchChain avaliable:

  • disable selector UI
  • try with timeout to swithChain
  • if successfull then commit changes with setChainType
  • if error toast user

},
[switchChain],
);

return (
<DappChainContext.Provider
value={useMemo(
() => ({
chainType,
setChainType,
setChainType: handleSetChainType,
supportedChainIds: config.supportedChains,
isChainTypeMatched:
chainType === getChainTypeByChainId(walletChainId),
Expand All @@ -153,7 +168,7 @@ export const SupportL2Chains: React.FC<React.PropsWithChildren> = ({
// or use an array or Set (for example with L2_DAPP_CHAINS_TYPE)
isChainTypeOnL2: chainType === DAPP_CHAIN_TYPE.Optimism,
}),
[chainType, walletChainId],
[chainType, handleSetChainType, walletChainId],
)}
>
{children}
Expand Down
Loading