Skip to content

F
frontend
Commit bb0c4993 authored by Max Alekseenko's avatar Max Alekseenko
Browse files
Options

add integration mark

parent e56e8754
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 32 deletions
icons/integration/full.svg 0 → 100644
View file @ bb0c4993
<svg viewBox="-1 -1 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24.661a.964.964 0 1 0-1.831.607l.426 1.285a.964.964 0 0 0 1.83-.606L7.24.661Zm10.478.985A.964.964 0 0 0 16.354.283l-3.495 3.495-.204-.204a2.893 2.893 0 0 0-4.091 0L6.75 5.388A.964.964 0 0 0 5.388 6.75L3.575 8.562a2.893 2.893 0 0 0 0 4.091l.204.204-3.496 3.497a.964.964 0 1 0 1.364 1.363l3.496-3.496.205.205a2.893 2.893 0 0 0 4.091 0l1.813-1.813a.964.964 0 0 0 1.361-1.361l1.815-1.814a2.893 2.893 0 0 0 0-4.091l-.206-.206 3.496-3.495ZM11.25 9.887l1.813-1.813a.964.964 0 0 0 0-1.364l-.839-.839a.996.996 0 0 1-.096-.096l-.838-.838a.964.964 0 0 0-1.363 0L8.114 6.751l3.137 3.136Zm-4.5-1.773L4.939 9.926a.964.964 0 0 0 0 1.364l.864.864a1.193 1.193 0 0 1 .044.043l.865.866a.964.964 0 0 0 1.363 0l1.812-1.812-3.136-3.137Zm4.196 6.72a.964.964 0 0 1 1.218.613l.426 1.285a.964.964 0 1 1-1.83.607l-.426-1.286a.964.964 0 0 1 .612-1.219Zm3.888-3.887a.964.964 0 0 1 1.218-.612l1.286.425a.964.964 0 1 1-.607 1.831l-1.285-.426a.964.964 0 0 1-.612-1.218ZM1.268 5.409a.964.964 0 1 0-.607 1.83l1.286.426a.964.964 0 1 0 .606-1.83l-1.285-.426Z" fill="#38A169"/>
</svg>
icons/integration/partial.svg 0 → 100644
View file @ bb0c4993
<svg viewBox="0 -1 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.394.273a.931.931 0 0 1 0 1.316l-1.825 1.825.194.194h.001a2.795 2.795 0 0 1 0 3.956l-1.747 1.747a.931.931 0 0 1-1.354 1.278l-.609-.61-.011-.01-.012-.012L8.71 5.635l-.011-.011-.011-.012-.61-.609A.931.931 0 0 1 9.355 3.65l1.747-1.747a2.794 2.794 0 0 1 3.956 0l.195.194L17.077.273a.931.931 0 0 1 1.317 0Zm-2.945 5.973L13.7 7.994l-3.028-3.029 1.748-1.747a.93.93 0 0 1 1.319 0l1.708 1.708a.93.93 0 0 1 0 1.32ZM6.563 8.304l-.893-.893a.931.931 0 0 0-1.354 1.278L2.57 10.435l-.001.001a2.793 2.793 0 0 0 0 3.956l.195.194-1.825 1.825a.931.931 0 0 0 1.317 1.316l1.824-1.824.194.194a2.793 2.793 0 0 0 3.956 0h.001l1.747-1.747a.931.931 0 0 0 1.278-1.353l-.894-.893.894-.894a.931.931 0 0 0-1.317-1.317l-.893.894L7.88 9.62l.893-.894a.931.931 0 1 0-1.317-1.316l-.893.893Zm-.655 1.978-.003-.003-.004-.003-.27-.27-1.747 1.748a.931.931 0 0 0 0 1.32l.845.844.01.01.01.01.843.843.001.002a.93.93 0 0 0 1.319 0l1.748-1.748-2.752-2.753Z" fill="#A0AEC0"/>
</svg>
lib/growthbook/init.ts
View file @ bb0c4993
...@@ -7,6 +7,7 @@ import { STORAGE_KEY, STORAGE_LIMIT } from './consts'; ...@@ -7,6 +7,7 @@ import { STORAGE_KEY, STORAGE_LIMIT } from './consts';
export interface GrowthBookFeatures { export interface GrowthBookFeatures {
test_value: string; test_value: string;
marketplace_exp: boolean;
} }
export const growthBook = (() => { export const growthBook = (() => {
......
public/icons/name.d.ts
View file @ bb0c4993
...@@ -53,6 +53,8 @@ ...@@ -53,6 +53,8 @@
| "globe" | "globe"
| "graphQL" | "graphQL"
| "info" | "info"
| "integration/full"
| "integration/partial"
| "key" | "key"
| "lightning" | "lightning"
| "link" | "link"
......
types/client/marketplace.ts
View file @ bb0c4993
...@@ -7,6 +7,7 @@ export type MarketplaceAppPreview = { ...@@ -7,6 +7,7 @@ export type MarketplaceAppPreview = {
shortDescription: string; shortDescription: string;
categories: Array<string>; categories: Array<string>;
url: string; url: string;
internalWallet?: boolean;
} }
export type MarketplaceAppOverview = MarketplaceAppPreview & { export type MarketplaceAppOverview = MarketplaceAppPreview & {
......
ui/marketplace/MarketplaceAppCard.tsx
View file @ bb0c4993
import { Box, IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue } from '@chakra-ui/react'; import { Box, IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, Tooltip } from '@chakra-ui/react';
import type { MouseEvent } from 'react'; import type { MouseEvent } from 'react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import type { MarketplaceAppPreview } from 'types/client/marketplace'; import type { MarketplaceAppPreview } from 'types/client/marketplace';
import useFeatureValue from 'lib/growthbook/useFeatureValue';
import * as mixpanel from 'lib/mixpanel/index'; import * as mixpanel from 'lib/mixpanel/index';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
import MarketplaceAppCardLink from './MarketplaceAppCardLink'; import MarketplaceAppCardLink from './MarketplaceAppCardLink';
...@@ -29,9 +31,13 @@ const MarketplaceAppCard = ({ ...@@ -29,9 +31,13 @@ const MarketplaceAppCard = ({
onInfoClick, onInfoClick,
isFavorite, isFavorite,
onFavoriteClick, onFavoriteClick,
isLoading, isLoading: isDataLoading,
showDisclaimer, showDisclaimer,
internalWallet,
}: Props) => { }: Props) => {
const { value: isExperiment, isLoading: isExperimentLoading } = useFeatureValue('marketplace_exp', false);
const isLoading = isDataLoading || isExperimentLoading;
const categoriesLabel = categories.join(', '); const categoriesLabel = categories.join(', ');
const handleClick = useCallback((event: MouseEvent) => { const handleClick = useCallback((event: MouseEvent) => {
...@@ -55,6 +61,23 @@ const MarketplaceAppCard = ({ ...@@ -55,6 +61,23 @@ const MarketplaceAppCard = ({
const logoUrl = useColorModeValue(logo, logoDarkMode || logo); const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
const moreButtonBgGradient = `linear(to-r, ${ useColorModeValue('whiteAlpha.50', 'blackAlpha.50') }, ${ useColorModeValue('white', 'black') } 20%)`; const moreButtonBgGradient = `linear(to-r, ${ useColorModeValue('whiteAlpha.50', 'blackAlpha.50') }, ${ useColorModeValue('white', 'black') } 20%)`;
const [ integrationIcon, integrationIconColor, integrationText ] = React.useMemo(() => {
let icon: IconName = 'integration/partial';
let color = 'gray.400';
let text = 'This app opens in Blockscout without Blockscout wallet functionality. Use your external web3 wallet to connect directly to this application';
if (external) {
icon = 'arrows/north-east';
text = 'This app opens in a separate tab';
} 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 ];
}, [ external, internalWallet ]);
return ( return (
<LinkBox <LinkBox
_hover={{ _hover={{
...@@ -71,12 +94,14 @@ const MarketplaceAppCard = ({ ...@@ -71,12 +94,14 @@ const MarketplaceAppCard = ({
role="group" role="group"
> >
<Box <Box
display={{ base: 'grid', sm: 'block' }} display={{ base: 'grid', sm: isExperiment ? 'flex' : 'block' }}
flexDirection={ isExperiment ? 'column' : undefined }
gridTemplateColumns={{ base: '64px 1fr', sm: '1fr' }} gridTemplateColumns={{ base: '64px 1fr', sm: '1fr' }}
gridTemplateRows={{ base: 'none', sm: 'none' }} gridTemplateRows={{ base: 'none', sm: 'none' }}
gridRowGap={{ base: 2, sm: 'none' }} gridRowGap={{ base: 2, sm: 0 }}
gridColumnGap={{ base: 4, sm: 'none' }} gridColumnGap={{ base: 4, sm: 0 }}
height="100%" height="100%"
alignContent={ isExperiment ? 'start' : undefined }
> >
<Skeleton <Skeleton
isLoaded={ !isLoading } isLoaded={ !isLoading }
...@@ -103,7 +128,8 @@ const MarketplaceAppCard = ({ ...@@ -103,7 +128,8 @@ const MarketplaceAppCard = ({
fontSize={{ base: 'sm', sm: 'lg' }} fontSize={{ base: 'sm', sm: 'lg' }}
fontWeight="semibold" fontWeight="semibold"
fontFamily="heading" fontFamily="heading"
display="inline-block" display={ isExperiment ? 'flex' : 'inline-block' }
alignItems={ isExperiment ? 'center' : undefined }
> >
<MarketplaceAppCardLink <MarketplaceAppCardLink
id={ id } id={ id }
...@@ -112,6 +138,24 @@ const MarketplaceAppCard = ({ ...@@ -112,6 +138,24 @@ const MarketplaceAppCard = ({
title={ title } title={ title }
onClick={ handleClick } onClick={ handleClick }
/> />
{ isExperiment && (
<Tooltip
label={ integrationText }
textAlign="center"
padding={ 2 }
openDelay={ 300 }
maxW={ 400 }
>
<IconSvg
name={ integrationIcon }
marginLeft={ 2 }
boxSize={ 5 }
color={ integrationIconColor }
position="relative"
cursor="pointer"
/>
</Tooltip>
) }
</Skeleton> </Skeleton>
<Skeleton <Skeleton
...@@ -127,43 +171,63 @@ const MarketplaceAppCard = ({ ...@@ -127,43 +171,63 @@ const MarketplaceAppCard = ({
isLoaded={ !isLoading } isLoaded={ !isLoading }
fontSize={{ base: 'xs', sm: 'sm' }} fontSize={{ base: 'xs', sm: 'sm' }}
lineHeight="20px" lineHeight="20px"
noOfLines={ 4 } noOfLines={ isExperiment ? 3 : 4 }
> >
{ shortDescription } { shortDescription }
</Skeleton> </Skeleton>
{ !isLoading && ( { !isLoading && (
<Box isExperiment ? (
position="absolute" <Box
right={{ base: 3, sm: '20px' }}
bottom={{ base: 3, sm: '20px' }}
paddingLeft={ 8 }
bgGradient={ moreButtonBgGradient }
>
<Link
fontSize={{ base: 'xs', sm: 'sm' }}
display="flex" display="flex"
alignItems="center" position={{ base: 'absolute', sm: 'relative' }}
paddingRight={{ sm: 2 }} bottom={{ base: 3, sm: 0 }}
maxW="100%" left={{ base: 3, sm: 0 }}
overflow="hidden" marginTop={{ base: 0, sm: 'auto' }}
href="#" paddingTop={{ base: 0, sm: 4 }}
onClick={ handleInfoClick }
> >
More <Link
fontSize={{ base: 'xs', sm: 'sm' }}
<IconSvg paddingRight={{ sm: 2 }}
name="arrows/north-east" href="#"
marginLeft={ 1 } onClick={ handleInfoClick }
boxSize={ 4 } >
/> More info
</Link> </Link>
</Box> </Box>
) : (
<Box
position="absolute"
right={{ base: 3, sm: '20px' }}
bottom={{ base: 3, sm: '20px' }}
paddingLeft={ 8 }
bgGradient={ moreButtonBgGradient }
>
<Link
fontSize={{ base: 'xs', sm: 'sm' }}
display="flex"
alignItems="center"
paddingRight={{ sm: 2 }}
maxW="100%"
overflow="hidden"
href="#"
onClick={ handleInfoClick }
>
More
<IconSvg
name="arrows/north-east"
marginLeft={ 1 }
boxSize={ 4 }
/>
</Link>
</Box>
)
) } ) }
{ !isLoading && ( { !isLoading && (
<IconButton <IconButton
display={{ base: 'block', sm: isFavorite ? 'block' : 'none' }} display={{ base: 'block', sm: isFavorite || isExperiment ? 'block' : 'none' }}
_groupHover={{ display: 'block' }} _groupHover={{ display: 'block' }}
position="absolute" position="absolute"
right={{ base: 3, sm: '10px' }} right={{ base: 3, sm: '10px' }}
......
ui/marketplace/MarketplaceList.tsx
View file @ bb0c4993
...@@ -43,6 +43,7 @@ const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLo ...@@ -43,6 +43,7 @@ const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLo
onFavoriteClick={ onFavoriteClick } onFavoriteClick={ onFavoriteClick }
isLoading={ isLoading } isLoading={ isLoading }
showDisclaimer={ showDisclaimer } showDisclaimer={ showDisclaimer }
internalWallet={ app.internalWallet }
/> />
)) } )) }
</Grid> </Grid>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment