mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
f0e713b877
* UI customizations: new features Fixes #2905 * colors for graphs * introduce env variable * colors for topbar, stats, selected state and tabs * fix build * fix validator * refactor link.primary.hover color token * refactor selected colors * update styles for switch and fix some color tokens * change color for selectable controls * icon color tokens refactoring * UI customizations: new features Fixes #2905 * test for common components * tweaks * migrate from color-mode-hex cookie to color-theme cookie * clean up * update screenshots * more screenshot updates * update default color of chart line * update envs for mega eth
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Tooltip } from 'toolkit/chakra/tooltip';
|
|
import type { IconName } from 'ui/shared/IconSvg';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
type Props = {
|
|
internalWallet: boolean | undefined;
|
|
external: boolean | undefined;
|
|
};
|
|
|
|
const MarketplaceAppIntegrationIcon = ({ external, internalWallet }: Props) => {
|
|
const [ icon, iconColor, text, boxSize ] = React.useMemo(() => {
|
|
let icon: IconName = 'integration/partial';
|
|
let color = 'icon.secondary';
|
|
let text = 'This app opens in Blockscout without Blockscout wallet functionality. Use your external web3 wallet to connect directly to this application';
|
|
let boxSize = 5;
|
|
|
|
if (external) {
|
|
icon = 'link_external';
|
|
color = 'icon.secondary';
|
|
text = 'This app opens in a separate tab';
|
|
boxSize = 4;
|
|
} else if (internalWallet) {
|
|
icon = 'integration/full';
|
|
color = 'green.500';
|
|
text = 'This app opens in Blockscout and your Blockscout wallet connects automatically';
|
|
}
|
|
|
|
return [ icon, color, text, boxSize ];
|
|
}, [ external, internalWallet ]);
|
|
|
|
return (
|
|
<Tooltip
|
|
content={ text }
|
|
openDelay={ 300 }
|
|
contentProps={{ maxW: { base: 'calc(100vw - 8px)', lg: '400px' } }}
|
|
>
|
|
<IconSvg
|
|
name={ icon }
|
|
boxSize={ boxSize }
|
|
color={ iconColor }
|
|
position="relative"
|
|
cursor="pointer"
|
|
verticalAlign="middle"
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export default MarketplaceAppIntegrationIcon;
|