Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
F
frontend
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
vicotor
frontend
Commits
320ee8e6
Commit
320ee8e6
authored
Feb 14, 2024
by
Max Alekseenko
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
remove marketplace experiment
parent
75b0bbed
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
62 additions
and
127 deletions
+62
-127
init.ts
lib/growthbook/init.ts
+0
-1
MarketplaceAppCard.tsx
ui/marketplace/MarketplaceAppCard.tsx
+39
-75
MarketplaceList.tsx
ui/marketplace/MarketplaceList.tsx
+1
-4
useMarketplaceApps.tsx
ui/marketplace/useMarketplaceApps.tsx
+2
-7
useMarketplaceCategories.tsx
ui/marketplace/useMarketplaceCategories.tsx
+2
-4
Marketplace.tsx
ui/pages/Marketplace.tsx
+18
-36
No files found.
lib/growthbook/init.ts
View file @
320ee8e6
...
...
@@ -7,7 +7,6 @@ import { STORAGE_KEY, STORAGE_LIMIT } from './consts';
export
interface
GrowthBookFeatures
{
test_value
:
string
;
marketplace_exp
:
boolean
;
}
export
const
growthBook
=
(()
=>
{
...
...
ui/marketplace/MarketplaceAppCard.tsx
View file @
320ee8e6
...
...
@@ -4,7 +4,6 @@ import React, { useCallback } from 'react';
import
type
{
MarketplaceAppPreview
}
from
'
types/client/marketplace
'
;
import
useFeatureValue
from
'
lib/growthbook/useFeatureValue
'
;
import
*
as
mixpanel
from
'
lib/mixpanel/index
'
;
import
type
{
IconName
}
from
'
ui/shared/IconSvg
'
;
import
IconSvg
from
'
ui/shared/IconSvg
'
;
...
...
@@ -31,13 +30,10 @@ const MarketplaceAppCard = ({
onInfoClick
,
isFavorite
,
onFavoriteClick
,
isLoading
:
isDataLoading
,
isLoading
,
showDisclaimer
,
internalWallet
,
}:
Props
)
=>
{
const
{
value
:
isExperiment
,
isLoading
:
isExperimentLoading
}
=
useFeatureValue
(
'
marketplace_exp
'
,
false
);
const
isLoading
=
isDataLoading
||
isExperimentLoading
;
const
categoriesLabel
=
categories
.
join
(
'
,
'
);
const
handleClick
=
useCallback
((
event
:
MouseEvent
)
=>
{
...
...
@@ -59,7 +55,6 @@ const MarketplaceAppCard = ({
},
[
onFavoriteClick
,
id
,
isFavorite
]);
const
logoUrl
=
useColorModeValue
(
logo
,
logoDarkMode
||
logo
);
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
'
;
...
...
@@ -94,14 +89,14 @@ const MarketplaceAppCard = ({
role=
"group"
>
<
Box
display=
{
{
base
:
'
grid
'
,
sm
:
isExperiment
?
'
flex
'
:
'
block
'
}
}
flexDirection=
{
isExperiment
?
'
column
'
:
undefined
}
display=
{
{
base
:
'
grid
'
,
sm
:
'
flex
'
}
}
flexDirection=
"column"
gridTemplateColumns=
{
{
base
:
'
64px 1fr
'
,
sm
:
'
1fr
'
}
}
gridTemplateRows=
{
{
base
:
'
none
'
,
sm
:
'
none
'
}
}
gridRowGap=
{
{
base
:
2
,
sm
:
0
}
}
gridColumnGap=
{
{
base
:
4
,
sm
:
0
}
}
height=
"100%"
alignContent=
{
isExperiment
?
'
start
'
:
undefined
}
alignContent=
"start"
>
<
Skeleton
isLoaded=
{
!
isLoading
}
...
...
@@ -137,25 +132,23 @@ const MarketplaceAppCard = ({
title=
{
title
}
onClick=
{
handleClick
}
/>
{
isExperiment
&&
(
<
Tooltip
label=
{
integrationText
}
textAlign=
"center"
padding=
{
2
}
openDelay=
{
300
}
maxW=
{
400
}
>
<
IconSvg
name=
{
integrationIcon
}
boxSize=
{
5
}
color=
{
integrationIconColor
}
position=
"relative"
cursor=
"pointer"
verticalAlign=
"middle"
marginBottom=
{
1
}
/>
</
Tooltip
>
)
}
<
Tooltip
label=
{
integrationText
}
textAlign=
"center"
padding=
{
2
}
openDelay=
{
300
}
maxW=
{
400
}
>
<
IconSvg
name=
{
integrationIcon
}
boxSize=
{
5
}
color=
{
integrationIconColor
}
position=
"relative"
cursor=
"pointer"
verticalAlign=
"middle"
marginBottom=
{
1
}
/>
</
Tooltip
>
</
Skeleton
>
<
Skeleton
...
...
@@ -171,63 +164,34 @@ const MarketplaceAppCard = ({
isLoaded=
{
!
isLoading
}
fontSize=
{
{
base
:
'
xs
'
,
sm
:
'
sm
'
}
}
lineHeight=
"20px"
noOfLines=
{
isExperiment
?
3
:
4
}
noOfLines=
{
3
}
>
{
shortDescription
}
</
Skeleton
>
{
!
isLoading
&&
(
isExperiment
?
(
<
Box
display=
"flex"
position=
{
{
base
:
'
absolute
'
,
sm
:
'
relative
'
}
}
bottom=
{
{
base
:
3
,
sm
:
0
}
}
left=
{
{
base
:
3
,
sm
:
0
}
}
marginTop=
{
{
base
:
0
,
sm
:
'
auto
'
}
}
paddingTop=
{
{
base
:
0
,
sm
:
4
}
}
>
<
Link
fontSize=
{
{
base
:
'
xs
'
,
sm
:
'
sm
'
}
}
paddingRight=
{
{
sm
:
2
}
}
href=
"#"
onClick=
{
handleInfoClick
}
>
More info
</
Link
>
</
Box
>
)
:
(
<
Box
position=
"absolute"
right=
{
{
base
:
3
,
sm
:
'
20px
'
}
}
bottom=
{
{
base
:
3
,
sm
:
'
20px
'
}
}
paddingLeft=
{
8
}
bgGradient=
{
moreButtonBgGradient
}
<
Box
display=
"flex"
position=
{
{
base
:
'
absolute
'
,
sm
:
'
relative
'
}
}
bottom=
{
{
base
:
3
,
sm
:
0
}
}
left=
{
{
base
:
3
,
sm
:
0
}
}
marginTop=
{
{
base
:
0
,
sm
:
'
auto
'
}
}
paddingTop=
{
{
base
:
0
,
sm
:
4
}
}
>
<
Link
fontSize=
{
{
base
:
'
xs
'
,
sm
:
'
sm
'
}
}
paddingRight=
{
{
sm
:
2
}
}
href=
"#"
onClick=
{
handleInfoClick
}
>
<
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
>
)
More info
</
Link
>
</
Box
>
)
}
{
!
isLoading
&&
(
<
IconButton
display=
{
{
base
:
'
block
'
,
sm
:
isFavorite
||
isExperiment
?
'
block
'
:
'
none
'
}
}
display=
{
{
base
:
'
block
'
,
sm
:
isFavorite
?
'
block
'
:
'
none
'
}
}
_groupHover=
{
{
display
:
'
block
'
}
}
position=
"absolute"
right=
{
{
base
:
3
,
sm
:
'
10px
'
}
}
...
...
ui/marketplace/MarketplaceList.tsx
View file @
320ee8e6
...
...
@@ -4,7 +4,6 @@ import React from 'react';
import
type
{
MarketplaceAppPreview
}
from
'
types/client/marketplace
'
;
import
{
MarketplaceCategory
}
from
'
types/client/marketplace
'
;
import
useFeatureValue
from
'
lib/growthbook/useFeatureValue
'
;
import
{
apos
}
from
'
lib/html-entities
'
;
import
EmptySearchResult
from
'
ui/shared/EmptySearchResult
'
;
import
IconSvg
from
'
ui/shared/IconSvg
'
;
...
...
@@ -22,8 +21,6 @@ type Props = {
}
const
MarketplaceList
=
({
apps
,
onAppClick
,
favoriteApps
,
onFavoriteClick
,
isLoading
,
showDisclaimer
,
selectedCategoryId
}:
Props
)
=>
{
const
{
value
:
isExperiment
}
=
useFeatureValue
(
'
marketplace_exp
'
,
false
);
return
apps
.
length
>
0
?
(
<
Grid
templateColumns=
{
{
...
...
@@ -56,7 +53,7 @@ const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLo
)
:
(
<
EmptySearchResult
text=
{
(
selectedCategoryId
===
MarketplaceCategory
.
FAVORITES
&&
!
favoriteApps
.
length
&&
isExperiment
)
?
(
(
selectedCategoryId
===
MarketplaceCategory
.
FAVORITES
&&
!
favoriteApps
.
length
)
?
(
<>
You don
{
apos
}
t have any favorite apps.
Click on the
<
IconSvg
name=
"star_outline"
w=
{
4
}
h=
{
4
}
mb=
{
-
0.5
}
/>
icon on the app
{
apos
}
s card to add it to Favorites.
...
...
ui/marketplace/useMarketplaceApps.tsx
View file @
320ee8e6
...
...
@@ -7,7 +7,6 @@ import { MarketplaceCategory } from 'types/client/marketplace';
import
config
from
'
configs/app
'
;
import
type
{
ResourceError
}
from
'
lib/api/resources
'
;
import
useApiFetch
from
'
lib/api/useApiFetch
'
;
import
useFeatureValue
from
'
lib/growthbook/useFeatureValue
'
;
import
useFetch
from
'
lib/hooks/useFetch
'
;
import
{
MARKETPLACE_APP
}
from
'
stubs/marketplace
'
;
...
...
@@ -23,10 +22,7 @@ function isAppCategoryMatches(category: string, app: MarketplaceAppOverview, fav
app
.
categories
.
includes
(
category
);
}
function
sortApps
(
apps
:
Array
<
MarketplaceAppOverview
>
,
isExperiment
:
boolean
)
{
if
(
!
isExperiment
)
{
return
apps
.
sort
((
a
,
b
)
=>
a
.
title
.
localeCompare
(
b
.
title
));
}
function
sortApps
(
apps
:
Array
<
MarketplaceAppOverview
>
)
{
return
apps
.
sort
((
a
,
b
)
=>
{
const
priorityA
=
a
.
priority
||
0
;
const
priorityB
=
b
.
priority
||
0
;
...
...
@@ -50,7 +46,6 @@ function sortApps(apps: Array<MarketplaceAppOverview>, isExperiment: boolean) {
export
default
function
useMarketplaceApps
(
filter
:
string
,
selectedCategoryId
:
string
=
MarketplaceCategory
.
ALL
,
favoriteApps
:
Array
<
string
>
=
[])
{
const
fetch
=
useFetch
();
const
apiFetch
=
useApiFetch
();
const
{
value
:
isExperiment
}
=
useFeatureValue
(
'
marketplace_exp
'
,
false
);
const
{
isPlaceholderData
,
isError
,
error
,
data
}
=
useQuery
<
unknown
,
ResourceError
<
unknown
>
,
Array
<
MarketplaceAppOverview
>>
({
queryKey
:
[
'
marketplace-dapps
'
],
...
...
@@ -63,7 +58,7 @@ export default function useMarketplaceApps(filter: string, selectedCategoryId: s
return
apiFetch
(
'
marketplace_dapps
'
,
{
pathParams
:
{
chainId
:
config
.
chain
.
id
}
});
}
},
select
:
(
data
)
=>
sortApps
(
data
as
Array
<
MarketplaceAppOverview
>
,
isExperiment
),
select
:
(
data
)
=>
sortApps
(
data
as
Array
<
MarketplaceAppOverview
>
),
placeholderData
:
feature
.
isEnabled
?
Array
(
9
).
fill
(
MARKETPLACE_APP
)
:
undefined
,
staleTime
:
Infinity
,
enabled
:
feature
.
isEnabled
,
...
...
ui/marketplace/useMarketplaceCategories.tsx
View file @
320ee8e6
...
...
@@ -5,7 +5,6 @@ import type { MarketplaceAppOverview } from 'types/client/marketplace';
import
config
from
'
configs/app
'
;
import
type
{
ResourceError
}
from
'
lib/api/resources
'
;
import
useFeatureValue
from
'
lib/growthbook/useFeatureValue
'
;
import
useApiFetch
from
'
lib/hooks/useFetch
'
;
import
{
CATEGORIES
}
from
'
stubs/marketplace
'
;
...
...
@@ -14,7 +13,6 @@ const categoriesUrl = (feature.isEnabled && feature.categoriesUrl) || '';
export
default
function
useMarketplaceCategories
(
apps
:
Array
<
MarketplaceAppOverview
>
|
undefined
,
isAppsPlaceholderData
:
boolean
)
{
const
apiFetch
=
useApiFetch
();
const
{
value
:
isExperiment
}
=
useFeatureValue
(
'
marketplace_exp
'
,
false
);
const
{
isPlaceholderData
,
data
}
=
useQuery
<
unknown
,
ResourceError
<
unknown
>
,
Array
<
string
>>
({
queryKey
:
[
'
marketplace-categories
'
],
...
...
@@ -41,7 +39,7 @@ export default function useMarketplaceCategories(apps: Array<MarketplaceAppOverv
});
});
if
(
data
?.
length
&&
!
isPlaceholderData
&&
isExperiment
)
{
if
(
data
?.
length
&&
!
isPlaceholderData
)
{
categoryNames
=
data
;
}
else
{
categoryNames
=
Object
.
keys
(
grouped
);
...
...
@@ -50,7 +48,7 @@ export default function useMarketplaceCategories(apps: Array<MarketplaceAppOverv
return
categoryNames
.
map
(
category
=>
({
name
:
category
,
count
:
grouped
[
category
]
||
0
}))
.
filter
(
c
=>
c
.
count
>
0
);
},
[
apps
,
isAppsPlaceholderData
,
data
,
isPlaceholderData
,
isExperiment
]);
},
[
apps
,
isAppsPlaceholderData
,
data
,
isPlaceholderData
]);
return
React
.
useMemo
(()
=>
({
isPlaceholderData
:
isAppsPlaceholderData
||
isPlaceholderData
,
...
...
ui/pages/Marketplace.tsx
View file @
320ee8e6
...
...
@@ -6,10 +6,8 @@ import type { TabItem } from 'ui/shared/Tabs/types';
import
config
from
'
configs/app
'
;
import
throwOnResourceLoadError
from
'
lib/errors/throwOnResourceLoadError
'
;
import
useFeatureValue
from
'
lib/growthbook/useFeatureValue
'
;
import
useIsMobile
from
'
lib/hooks/useIsMobile
'
;
import
MarketplaceAppModal
from
'
ui/marketplace/MarketplaceAppModal
'
;
import
MarketplaceCategoriesMenu
from
'
ui/marketplace/MarketplaceCategoriesMenu
'
;
import
MarketplaceDisclaimerModal
from
'
ui/marketplace/MarketplaceDisclaimerModal
'
;
import
MarketplaceList
from
'
ui/marketplace/MarketplaceList
'
;
import
FilterInput
from
'
ui/shared/filters/FilterInput
'
;
...
...
@@ -64,7 +62,6 @@ const Marketplace = () => {
isCategoriesPlaceholderData
,
}
=
useMarketplace
();
const
isMobile
=
useIsMobile
();
const
{
value
:
isExperiment
}
=
useFeatureValue
(
'
marketplace_exp
'
,
false
);
const
categoryTabs
=
React
.
useMemo
(()
=>
{
const
tabs
:
Array
<
TabItem
>
=
categories
.
map
(
category
=>
({
...
...
@@ -143,43 +140,28 @@ const Marketplace = () => {
</
Flex
>
)
}
/>
{
isExperiment
&&
(
<
Box
marginTop=
{
{
base
:
0
,
lg
:
8
}
}
>
{
(
isCategoriesPlaceholderData
)
?
(
<
TabsSkeleton
tabs=
{
categoryTabs
}
/>
)
:
(
<
TabsWithScroll
tabs=
{
categoryTabs
}
onTabChange=
{
handleCategoryChange
}
defaultTabIndex=
{
selectedCategoryIndex
}
marginBottom=
{
{
base
:
0
,
lg
:
-
2
}
}
/>
)
}
</
Box
>
)
}
<
Box
display=
"flex"
flexDirection=
{
{
base
:
'
column
'
,
sm
:
'
row
'
}
}
>
{
!
isExperiment
&&
(
<
MarketplaceCategoriesMenu
categories=
{
categories
.
map
(
c
=>
c
.
name
)
}
selectedCategoryId=
{
selectedCategoryId
}
onSelect=
{
onCategoryChange
}
isLoading=
{
isPlaceholderData
}
<
Box
marginTop=
{
{
base
:
0
,
lg
:
8
}
}
>
{
(
isCategoriesPlaceholderData
)
?
(
<
TabsSkeleton
tabs=
{
categoryTabs
}
/>
)
:
(
<
TabsWithScroll
tabs=
{
categoryTabs
}
onTabChange=
{
handleCategoryChange
}
defaultTabIndex=
{
selectedCategoryIndex
}
marginBottom=
{
{
base
:
0
,
lg
:
-
2
}
}
/>
)
}
<
FilterInput
initialValue=
{
filterQuery
}
onChange=
{
onSearchInputChange
}
marginBottom=
{
{
base
:
'
4
'
,
lg
:
'
6
'
}
}
w=
"100%"
placeholder=
"Find app"
isLoading=
{
isPlaceholderData
}
/>
</
Box
>
<
FilterInput
initialValue=
{
filterQuery
}
onChange=
{
onSearchInputChange
}
marginBottom=
{
{
base
:
'
4
'
,
lg
:
'
6
'
}
}
w=
"100%"
placeholder=
"Find app"
isLoading=
{
isPlaceholderData
}
/>
<
MarketplaceList
apps=
{
displayedApps
}
onAppClick=
{
showAppInfo
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment