mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
0c5a297834
* redesign "add chain" button * fix wallet detection * [skip ci] update default value for ENV * fix tests * return button to the footer and add source to mixpanel event * regcred from helmfile for review * [skip ci] remove wallets env from values for demo stand * use react-query to cache detection result * add cookie to hide button in the topbar * add prefix to svg ids to fix rabby icon * update screenshot * remove unnecessary comment --------- Co-authored-by: Nick Zenchik <[email protected]>
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
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 { Button } from 'toolkit/chakra/button';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
interface Props {
|
|
source: 'Footer' | 'Top bar';
|
|
onAddSuccess?: () => void;
|
|
}
|
|
|
|
const NetworkAddToWallet = ({ source, onAddSuccess }: Props) => {
|
|
const { data: { wallet } = {} } = useProvider();
|
|
|
|
const handleClick = useAddChainClick({ source, onSuccess: onAddSuccess });
|
|
|
|
if (!wallet) {
|
|
return null;
|
|
}
|
|
|
|
const walletInfo = WALLETS_INFO[wallet];
|
|
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
size="2xs"
|
|
borderWidth="1px"
|
|
fontWeight="500"
|
|
color={ walletInfo.color }
|
|
borderColor={ walletInfo.color }
|
|
onClick={ handleClick }
|
|
_hover={{
|
|
color: 'link.primary.hover',
|
|
borderColor: 'link.primary.hover',
|
|
}}
|
|
>
|
|
<IconSvg name={ walletInfo.icon } boxSize={ 3 }/>
|
|
Add { config.chain.name }
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default React.memo(NetworkAddToWallet);
|