mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
zeekayandHanzo Dev
dcf0d9a048
v1.1.4 changed useProvider to return null (react-query v5 forbids undefined)
but only switched the lib/web3 hooks. Four UI consumers kept
'const { data: { wallet } = {} } = useProvider()'; '= {}' defaults only
undefined, not null, so null data threw 'Cannot destructure property wallet
of {} as it is null' -> whole-page error boundary. Fixed to
'useProvider().data ?? {}' in ChainWidget, MultichainEcosystemsTableItem,
NetworkAddToWallet, AddressAddToWallet (+ wrap a pre-existing 169-char line).
Co-authored-by: Hanzo Dev <[email protected]>
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { Button } from '@luxfi/ui/button';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
import useAddChainClick from 'lib/web3/useAddChainClick';
|
|
import useProvider from 'lib/web3/useProvider';
|
|
import { WALLETS_INFO } from 'lib/web3/wallets';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
interface Props {
|
|
source: 'Footer' | 'Top bar';
|
|
onAddSuccess?: () => void;
|
|
}
|
|
|
|
const NetworkAddToWallet = ({ source, onAddSuccess }: Props) => {
|
|
const { wallet } = useProvider().data ?? {};
|
|
|
|
const handleClick = useAddChainClick({ source, onSuccess: onAddSuccess });
|
|
|
|
if (!wallet) {
|
|
return null;
|
|
}
|
|
|
|
const walletInfo = WALLETS_INFO[wallet];
|
|
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
size="2xs"
|
|
className="border font-medium hover:text-[var(--color-link-primary-hover)] hover:border-[var(--color-link-primary-hover)]"
|
|
style={{ color: walletInfo.color, borderColor: walletInfo.color }}
|
|
onClick={ handleClick }
|
|
>
|
|
<IconSvg name={ walletInfo.icon } className="size-3"/>
|
|
Add { config.chain.name }
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default React.memo(NetworkAddToWallet);
|