Skip to content

Commit

Permalink
fix: unsupported chain flagging (#341)
Browse files Browse the repository at this point in the history
* fix: unsupported chains not correctly being identified

* closeable modal

* Update CHANGELOG.md

* bump version

* update examples

* missing syntax
  • Loading branch information
lochie authored Feb 6, 2024
1 parent 98ff303 commit 66fa24c
Show file tree
Hide file tree
Showing 22 changed files with 107 additions and 106 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
# 1.7.1

This update fixes a bug where the chain was incorrectly detected as unsupported when only one chain is configured.

## Fixed

- Chain being incorrectly detected as unsupported when only one chain is configured.

# 1.7.0

This update moves peer dependencies wagmi and viem up to their latest versions.
Expand Down
2 changes: 0 additions & 2 deletions examples/nextjs-app/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
export const config = createConfig(
getDefaultConfig({
appName: 'ConnectKit Next.js demo',
//infuraId: process.env.NEXT_PUBLIC_INFURA_ID,
//alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_ID,
chains: [mainnet, polygon, optimism, arbitrum],
walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
})
Expand Down
1 change: 0 additions & 1 deletion examples/nextjs-siwe/src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { WagmiProvider, createConfig } from 'wagmi';

const config = createConfig(
getDefaultConfig({
alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_ID,
walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
appName: 'My ConnectKit App',
})
Expand Down
11 changes: 9 additions & 2 deletions examples/testbench/src/components/Web3Provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { WagmiProvider, createConfig } from 'wagmi';
import { defineChain, type Chain, http } from 'viem';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { mainnet } from 'viem/chains';

const avalanche: Chain = defineChain({
id: 43_114,
Expand All @@ -27,10 +28,16 @@ const avalanche: Chain = defineChain({
});

const ckConfig = getDefaultConfig({
chains: [avalanche],
/*
chains: [
mainnet,
//avalanche
],
transports: {
[avalanche.id]: http(avalanche.rpcUrls.default.http[0]),
[mainnet.id]: http(mainnet.rpcUrls.default.http[0]),
//[avalanche.id]: http(avalanche.rpcUrls.default.http[0]),
},
*/
appName: 'ConnectKit testbench',
appIcon: '/app.png',
walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
Expand Down
33 changes: 15 additions & 18 deletions examples/testbench/src/pages/chains.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const Home: NextPage = () => {
return () => clearInterval(interval);
}, []);

const { chain } = useAccount();
const chains = useChains();
const { chain } = useAccount();

if (!mounted) return null;

Expand All @@ -36,12 +36,7 @@ const Home: NextPage = () => {
<div className="panel">
<h1>Chains</h1>
<h2>Connected to</h2>
<ChainIcon
id={chain?.id}
unsupported={Boolean(
chain && !chains.some((x) => x.id !== chain?.id)
)}
/>
<ChainIcon id={chain?.id} />
<h2>Configured/Supported Chains</h2>
<div style={{ display: 'flex', gap: 8 }}>
{chains.map((chain) => (
Expand Down Expand Up @@ -93,17 +88,19 @@ const Home: NextPage = () => {
gap: 8,
}}
>
{allChains.map((chain) => (
<div
key={chain.id}
style={{ display: 'flex', gap: 8, alignItems: 'center' }}
>
<ChainIcon id={chain.id} size={42} />
<span>
{chain.name} <code>{chain.id}</code>
</span>
</div>
))}
{allChains
.sort((a, b) => a.id - b.id)
.map((chain) => (
<div
key={chain.id}
style={{ display: 'flex', gap: 8, alignItems: 'center' }}
>
<ChainIcon id={chain.id} size={42} />
<span>
{chain.name} <code>{chain.id}</code>
</span>
</div>
))}
</div>
</div>
</main>
Expand Down
22 changes: 3 additions & 19 deletions examples/testbench/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
useSendTransaction,
useSignMessage,
useSignTypedData,
useSimulateContract,
useConnect,
useDisconnect,
} from 'wagmi';
Expand Down Expand Up @@ -103,12 +102,7 @@ const AccountInfo = () => {
</tr>
<tr>
<td>Chain Supported</td>
<td>
{!chain ||
Boolean(chain && !chains.some((x) => x.id !== chain?.id))
? 'No'
: 'Yes'}
</td>
<td>{chains.some((x) => x.id === chain?.id) ? 'Yes' : 'No'}</td>
</tr>
<tr>
<td>Address</td>
Expand Down Expand Up @@ -318,12 +312,7 @@ const Home: NextPage = () => {
<div className="panel">
<h2>Chains</h2>
<div style={{ display: 'flex', gap: 8 }}>
<ChainIcon
id={chain?.id}
unsupported={Boolean(
chain && !chains.some((x) => x.id !== chain?.id)
)}
/>
<ChainIcon id={chain?.id} />
<ChainIcon id={1} size={64} radius={6} />
<ChainIcon id={1337} size={32} radius={0} />
<ChainIcon id={2} unsupported />
Expand Down Expand Up @@ -364,12 +353,7 @@ const Home: NextPage = () => {
}}
>
{chain?.name}
<ChainIcon
id={chain?.id}
unsupported={Boolean(
chain && !chains.some((x) => x.id !== chain?.id)
)}
/>
<ChainIcon id={chain?.id} />
<Avatar address={address} size={12} />
{ensName ?? address}
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/connectkit/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "connectkit",
"version": "1.7.0",
"version": "1.7.1",
"author": "Family",
"homepage": "https://docs.family.co/connectkit",
"license": "BSD-2-Clause license",
Expand Down
4 changes: 3 additions & 1 deletion packages/connectkit/src/components/BalanceButton/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { chainConfigs } from '../../constants/chainConfigs';
import ThemedButton from '../Common/ThemedButton';
import { nFormatter } from '../../utils';
import { useChains } from '../../hooks/useChains';
import { useChainIsSupported } from '../../hooks/useChainIsSupported';

const Container = styled(motion.div)`
display: flex;
Expand Down Expand Up @@ -52,6 +53,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {

const { address, chain } = useAccount();
const chains = useChains();
const unsupported = useChainIsSupported(chain?.id);

const queryClient = useQueryClient();
const { data: blockNumber } = useBlockNumber({ watch: true });
Expand Down Expand Up @@ -112,7 +114,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
</PulseContainer>
</span>
</Container>
) : Boolean(chain && !chains.some((x) => x.id !== chain?.id)) ? (
) : unsupported ? (
<Container>
{!hideIcon && <Chain id={chain?.id} />}
<span style={{ minWidth: 32 }}>???</span>
Expand Down
11 changes: 10 additions & 1 deletion packages/connectkit/src/components/Common/Chain/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { AnimatePresence } from 'framer-motion';
import { chainConfigs } from '../../../constants/chainConfigs';
import Chains from '../../../assets/chains';
import useIsMounted from '../../../hooks/useIsMounted';
import { useChainIsSupported } from '../../../hooks/useChainIsSupported';

const Spinner = (
<svg
Expand Down Expand Up @@ -55,7 +56,15 @@ const Chain: React.FC<{
unsupported?: boolean;
radius?: number | string;
size?: number | string;
}> = ({ id, unsupported, radius = '50%', size = 24 }) => {
}> = ({
id,
unsupported: controlledUnsupported,
radius = '50%',
size = 24,
}) => {
const isChainSupported = useChainIsSupported(id);
const unsupported = controlledUnsupported ?? !isChainSupported;

const chain = chainConfigs.find((c) => c.id === id);
const isMounted = useIsMounted();
if (!isMounted)
Expand Down
14 changes: 2 additions & 12 deletions packages/connectkit/src/components/Common/ChainSelect/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -172,20 +172,10 @@ const ChainSelector: React.FC = () => {
>
{disabled ? (
<Tooltip message={locales.chainNetwork} xOffset={-6} delay={0.01}>
<Chain
id={chain?.id}
unsupported={Boolean(
chain && !chains.some((x) => x.id !== chain?.id)
)}
/>
<Chain id={chain?.id} />
</Tooltip>
) : (
<Chain
id={chain?.id}
unsupported={Boolean(
chain && !chains.some((x) => x.id !== chain?.id)
)}
/>
<Chain id={chain?.id} />
)}
{!disabled && <ChevronDown style={{ top: 1, left: -3 }} />}
</SwitchChainButton>
Expand Down
17 changes: 9 additions & 8 deletions packages/connectkit/src/components/ConnectButton/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { AuthIcon } from '../../assets/icons';
import { useSIWE } from '../../siwe';
import useLocales from '../../hooks/useLocales';
import { Chain } from 'viem';
import { useChains } from '../../hooks/useChains';
import { useChainIsSupported } from '../../hooks/useChainIsSupported';

const contentVariants: Variants = {
initial: {
Expand Down Expand Up @@ -124,7 +124,8 @@ const ConnectButtonRenderer: React.FC<ConnectButtonRendererProps> = ({
const { open, setOpen } = useModal();

const { address, isConnected, chain } = useAccount();
const chains = useChains();
const isChainSupported = useChainIsSupported(chain?.id);

const { data: ensName } = useEnsName({
chainId: 1,
address: address,
Expand All @@ -148,7 +149,7 @@ const ConnectButtonRenderer: React.FC<ConnectButtonRendererProps> = ({
show,
hide,
chain: chain,
unsupported: Boolean(chain && !chains.some((x) => x.id !== chain?.id)),
unsupported: !isChainSupported,
isConnected: !!address,
isConnecting: open, // Using `open` to determine if connecting as wagmi isConnecting only is set to true when an active connector is awaiting connection
address: address,
Expand All @@ -175,7 +176,8 @@ function ConnectKitButtonInner({
const { isSignedIn } = useSIWE();

const { address, chain } = useAccount();
const chains = useChains();
const isChainSupported = useChainIsSupported(chain?.id);

const { data: ensName } = useEnsName({
chainId: 1,
address: address,
Expand Down Expand Up @@ -214,7 +216,7 @@ function ConnectKitButtonInner({
<AuthIcon />
</motion.div>
)}
{Boolean(chain && !chains.some((x) => x.id !== chain?.id)) && (
{!isChainSupported && (
<UnsupportedNetworkContainer
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
Expand Down Expand Up @@ -331,7 +333,7 @@ export function ConnectKitButton({
const context = useContext();

const { isConnected, address, chain } = useAccount();
const chains = useChains();
const chainIsSupported = useChainIsSupported(chain?.id);

function show() {
context.setOpen(true);
Expand All @@ -346,8 +348,7 @@ export function ConnectKitButton({

if (!isMounted) return null;

const shouldShowBalance =
showBalance && Boolean(chain && !chains.some((x) => x.id !== chain?.id));
const shouldShowBalance = showBalance && chainIsSupported;
const willShowBalance = address && shouldShowBalance;

return (
Expand Down
12 changes: 6 additions & 6 deletions packages/connectkit/src/components/ConnectKit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { isFamily } from '../utils/wallets';
import { useConnector } from '../hooks/useConnectors';
import { WagmiContext, useAccount } from 'wagmi';
import { Web3ContextProvider } from './contexts/web3';
import { useChainIsSupported } from '../hooks/useChainIsSupported';

export const routes = {
ONBOARDING: 'onboarding',
Expand Down Expand Up @@ -201,16 +202,15 @@ export const ConnectKitProvider = ({
useEffect(() => setErrorMessage(null), [route, open]);

// Check if chain is supported, elsewise redirect to switches page
const { chain } = useAccount();
const { chain, isConnected } = useAccount();
const isChainSupported = useChainIsSupported(chain?.id);

useEffect(() => {
if (
opts.enforceSupportedChains &&
Boolean(chain && !chains.some((x) => x.id !== chain?.id))
) {
if (isConnected && opts.enforceSupportedChains && !isChainSupported) {
setOpen(true);
setRoute(routes.SWITCHNETWORKS);
}
}, [chain, route, open]);
}, [isConnected, isChainSupported, chain, route, open]);

// Autoconnect to Family wallet if available
useEffect(() => {
Expand Down
8 changes: 5 additions & 3 deletions packages/connectkit/src/components/ConnectModal/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitTh

import styled from './../../styles/styled';
import { keyframes } from 'styled-components';
import { useChains } from '../../hooks/useChains';
import { Web3ContextProvider } from '../contexts/web3';
import { useChainIsSupported } from '../../hooks/useChainIsSupported';

const dist = 8;
const shake = keyframes`
Expand Down Expand Up @@ -99,13 +99,15 @@ const ConnectModal: React.FC<{
onClose,
}) => {
const context = useContext();

const { isConnected, chain } = useAccount();
const chains = useChains();
const chainIsSupported = useChainIsSupported(chain?.id);

//if chain is unsupported we enforce a "switch chain" prompt
const closeable = !(
context.options?.enforceSupportedChains &&
Boolean(chain && !chains.some((x) => x.id !== chain?.id))
isConnected &&
!chainIsSupported
);

const showBackButton =
Expand Down
7 changes: 4 additions & 3 deletions packages/connectkit/src/components/ConnectModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import SignInWithEthereum from '../Pages/SignInWithEthereum';

import { getAppIcon, getAppName } from '../../defaultConfig';
import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitThemeProvider';
import { useChains } from '../../hooks/useChains';
import { useChainIsSupported } from '../../hooks/useChainIsSupported';

const customThemeDefault: object = {};

Expand All @@ -33,12 +33,13 @@ const ConnectModal: React.FC<{
}) => {
const context = useContext();
const { isConnected, chain } = useAccount();
const chains = useChains();
const chainIsSupported = useChainIsSupported(chain?.id);

//if chain is unsupported we enforce a "switch chain" prompt
const closeable = !(
context.options?.enforceSupportedChains &&
Boolean(chain && !chains.some((x) => x.id !== chain?.id))
isConnected &&
!chainIsSupported
);

const showBackButton =
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
WalletConfigProps,
walletConfigs,
} from '../../../wallets/walletConfigs';
import wallet from '../../../assets/wallet';

const MoreIcon = (
<svg
Expand Down
Loading

0 comments on commit 66fa24c

Please sign in to comment.