forked from Uniswap/interface
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDevFlagsBox.tsx
More file actions
99 lines (90 loc) · 3.07 KB
/
Copy pathDevFlagsBox.tsx
File metadata and controls
99 lines (90 loc) · 3.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { ColumnCenter } from 'components/deprecated/Column'
import { RowBetween } from 'components/deprecated/Row'
import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
import styled from 'lib/styled-components'
import { useState } from 'react'
import { Flag, Settings } from 'react-feather'
import { useCloseModal, useToggleModal } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer'
import { ThemedText } from 'theme/components'
import { Z_INDEX } from 'theme/zIndex'
import { Statsig } from 'uniswap/src/features/gating/sdk/statsig'
import { isBetaEnv, isDevEnv } from 'utilities/src/environment/env'
const Box = styled.div`
position: fixed;
bottom: 20px;
left: 20px;
background-color: ${({ theme }) => theme.surface1};
padding: 10px;
border: 1px solid ${({ theme }) => theme.surface3};
border-radius: 12px;
cursor: pointer;
box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.04);
user-select: none;
z-index: ${Z_INDEX.fixed};
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
bottom: 70px;
}
`
const Override = (name: string, value: any) => {
return (
<ThemedText.LabelSmall key={name}>
{name}: {JSON.stringify(value)}
</ThemedText.LabelSmall>
)
}
const SettingsContainer = styled(ColumnCenter)`
width: 30px;
height: 30px;
justify-content: center;
border-radius: 12px;
:hover {
background: ${({ theme }) => theme.surface2};
}
`
export default function DevFlagsBox() {
const statsigOverrides = Statsig.initializeCalled()
? Statsig.getAllOverrides()
: { gates: {}, configs: {}, layers: {} }
const configOverrides = Object.entries(statsigOverrides.configs)
const gateOverrides = Object.entries(statsigOverrides.gates)
const overrides = [...gateOverrides, ...configOverrides].map(([name, value]) => Override(name, value))
const hasOverrides = overrides.some((g) => g !== null)
const [isOpen, setIsOpen] = useState(false)
const toggleOpen = () => setIsOpen((open) => !open)
const toggleFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
const closeFeatureFlagsModal = useCloseModal()
return (
<Box
onClick={() => {
toggleOpen()
closeFeatureFlagsModal()
}}
>
{isOpen ? (
<RowBetween>
<ThemedText.SubHeader>
{isDevEnv() && 'Local Overrides'}
{isBetaEnv() && 'Staging Overrides'}
</ThemedText.SubHeader>
<MouseoverTooltip
size={TooltipSize.Small}
text="Protip: Set feature flags by adding '?featureFlagOverride={flag_name}' to the URL"
>
<SettingsContainer
onClick={(e) => {
e.stopPropagation()
toggleFeatureFlagsModal()
}}
>
<Settings width={15} height={15} />
</SettingsContainer>
</MouseoverTooltip>
</RowBetween>
) : (
<Flag />
)}
{isOpen && (hasOverrides ? overrides : <ThemedText.LabelSmall>No overrides</ThemedText.LabelSmall>)}
</Box>
)
}