mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
9a977d191b
* fail the app start if multichain config or essential dapps config were not generated properly * add timeouts for essential dapps and multichain config generators * fix "add to wallet" button in address tokens table * [skip ci] update docs * fix tx tables when there are no fee and value columns * add support for promoted multichain provider * fixes * change action button logic * fix tests * fix * hide "add network" button for multichain * shorten the amount of txs on multichain homepage * change name formatting for multichain button * add bright color variants and lg size for badges * fix y-axis margin calculation for chart with custom tick formatter * superchain bug fixes * bump versions of react and nextjs * update screenshot * bump dappscout-iframe --------- Co-authored-by: Max Alekseenko <[email protected]>
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { Text, chakra } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
|
|
|
|
import { route } from 'nextjs-routes';
|
|
|
|
import config from 'configs/app';
|
|
import * as mixpanel from 'lib/mixpanel/index';
|
|
import { Image } from 'toolkit/chakra/image';
|
|
import { Link } from 'toolkit/chakra/link';
|
|
|
|
type Props = {
|
|
data: NonNullable<AddressMetadataTagFormatted['meta']>;
|
|
className?: string;
|
|
txHash?: string;
|
|
source: 'Txn' | 'NFT collection' | 'NFT item';
|
|
};
|
|
|
|
const AppActionButton = ({ data, className, txHash, source }: Props) => {
|
|
const { appID, textColor, bgColor, appActionButtonText, appLogoURL, appMarketplaceURL } = data;
|
|
|
|
const actionURL = appMarketplaceURL?.replace('{chainId}', config.chain.id || '').replace('{txHash}', txHash || '');
|
|
|
|
const handleClick = React.useCallback(() => {
|
|
const info = appID || actionURL;
|
|
if (info) {
|
|
mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Action button', Info: info, Source: source });
|
|
}
|
|
}, [ source, appID, actionURL ]);
|
|
|
|
if ((!appID && !actionURL) || (!appActionButtonText && !appLogoURL)) {
|
|
return null;
|
|
}
|
|
|
|
const content = (
|
|
<>
|
|
{ appLogoURL && (
|
|
<Image
|
|
src={ appLogoURL }
|
|
alt={ `${ appActionButtonText } button` }
|
|
boxSize={ 5 }
|
|
borderRadius="sm"
|
|
mr={ 2 }
|
|
/>
|
|
) }
|
|
<Text textStyle="sm" fontWeight="500" color="currentColor">
|
|
{ appActionButtonText }
|
|
</Text>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<Link
|
|
className={ className }
|
|
href={ actionURL ?? (appID ? route({ pathname: '/apps/[id]', query: { id: appID, action: 'connect' } }) : undefined) }
|
|
external={ Boolean(actionURL) }
|
|
onClick={ handleClick }
|
|
variant="underlaid"
|
|
iconColor={ textColor }
|
|
color={ textColor }
|
|
bg={ bgColor }
|
|
_hover={{ color: textColor, opacity: textColor || bgColor ? 0.9 : 1 }}
|
|
_active={{ color: textColor, opacity: textColor || bgColor ? 0.9 : 1 }}
|
|
>
|
|
{ content }
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default chakra(AppActionButton);
|