-
Notifications
You must be signed in to change notification settings - Fork 5.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add power users survey support #27361
Changes from 3 commits
e92ed6c
09bbad8
cc7de50
f3284e7
5d985d9
67532c7
b89dbcb
3de0419
8f1c289
9397653
4019875
273de84
99f1e3f
c314570
7ae015e
fc93fd6
9c82a0d
d6200a7
9a9d65c
8b9ba3e
7332167
37f8fc3
7309e54
6929a76
a1ef8fe
a10f0df
b1a785e
0d1e0d5
74ec16e
1f40a5c
2d9097a
da0279c
91356d9
60db42c
a69cd62
7c6f2d1
c9f6436
b44976c
2c0cdef
d52a76d
e62983a
ed63fdb
a5110eb
9cc3b03
6325061
824c6a3
6a4e227
bfd455a
9313acd
ddd696f
fa83767
2c3338d
763be5f
9df3c50
24b4986
ec9a8e0
a7b9f4b
a42bd5f
4e8c2c8
887de62
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { SurveyToast } from './survey-toast'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
import React, { useEffect, useState, useContext } from 'react'; | ||
import { useSelector, useDispatch } from 'react-redux'; | ||
import fetchWithCache from '../../../../shared/lib/fetch-with-cache'; | ||
import { DAY } from '../../../../shared/constants/time'; | ||
import { MetaMetricsContext } from '../../../contexts/metametrics'; | ||
import { | ||
MetaMetricsEventCategory, | ||
MetaMetricsEventName, | ||
} from '../../../../shared/constants/metametrics'; | ||
import { | ||
getSelectedInternalAccount, | ||
getLastViewedUserSurvey, | ||
getUseExternalServices, | ||
getParticipateInMetaMetrics, | ||
} from '../../../selectors'; | ||
import { setLastViewedUserSurvey } from '../../../store/actions'; | ||
import { Toast } from '../../multichain'; | ||
|
||
type Survey = { | ||
url: string; | ||
description: string; | ||
cta: string; | ||
surveyId: number; | ||
}; | ||
|
||
export function SurveyToast() { | ||
const [survey, setSurvey] = useState<Survey | null>(null); | ||
const dispatch = useDispatch(); | ||
const trackEvent = useContext(MetaMetricsContext); | ||
const lastViewedUserSurvey = useSelector(getLastViewedUserSurvey); | ||
const participateInMetaMetrics = useSelector(getParticipateInMetaMetrics); | ||
const basicFunctionality = useSelector(getUseExternalServices); | ||
const internalAccount = useSelector(getSelectedInternalAccount); | ||
|
||
useEffect(() => { | ||
if (!basicFunctionality) { | ||
return; | ||
} | ||
|
||
const surveyId = 1; | ||
const surveyUrl = `https://accounts.dev-api.cx.metamask.io/v1/users/${internalAccount.address}/surveys?surveyId=${surveyId}`; | ||
jonybur marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
const fetchSurvey = async () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you can useCallback for fetchSurvey |
||
try { | ||
const response = await fetchWithCache({ | ||
url: surveyUrl, | ||
fetchOptions: { | ||
method: 'GET', | ||
headers: { | ||
'x-metamask-clientproduct': 'metamask-extension', | ||
}, | ||
}, | ||
functionName: 'fetchSurveys', | ||
cacheOptions: { cacheRefreshTime: DAY * 7 }, | ||
}); | ||
|
||
const _survey: Survey = response?.surveys?.[0]; | ||
|
||
if ( | ||
response.surveys.length === 0 || | ||
darkwing marked this conversation as resolved.
Show resolved
Hide resolved
|
||
!_survey || | ||
lastViewedUserSurvey <= _survey.surveyId | ||
) { | ||
return; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: You can improve the readability and efficiency of this code by simplifying the condition. Instead of checking if the object keys length is zero, you can directly check if the survey is falsy or if the survey ID is less than or equal to the last viewed survey ID.
|
||
|
||
setSurvey(_survey); | ||
} catch (error) { | ||
console.error('Failed to fetch survey:', error); | ||
} | ||
}; | ||
|
||
fetchSurvey(); | ||
}, [ | ||
andreahaku marked this conversation as resolved.
Show resolved
Hide resolved
|
||
internalAccount.address, | ||
lastViewedUserSurvey, | ||
basicFunctionality, | ||
dispatch, | ||
]); | ||
|
||
function handleActionClick() { | ||
if (!survey) { | ||
andreahaku marked this conversation as resolved.
Show resolved
Hide resolved
|
||
return; | ||
} | ||
window.open(survey.url, '_blank'); | ||
darkwing marked this conversation as resolved.
Show resolved
Hide resolved
|
||
dispatch(setLastViewedUserSurvey(survey.surveyId)); | ||
trackAction('accept'); | ||
} | ||
|
||
function handleClose() { | ||
if (!survey) { | ||
andreahaku marked this conversation as resolved.
Show resolved
Hide resolved
|
||
return; | ||
} | ||
dispatch(setLastViewedUserSurvey(survey.surveyId)); | ||
jonybur marked this conversation as resolved.
Show resolved
Hide resolved
|
||
trackAction('deny'); | ||
} | ||
|
||
function trackAction(response: 'accept' | 'deny') { | ||
if (!participateInMetaMetrics || !survey) { | ||
return; | ||
} | ||
|
||
trackEvent({ | ||
event: MetaMetricsEventName.SurveyToast, | ||
category: MetaMetricsEventCategory.Feedback, | ||
properties: { | ||
response, | ||
survey: survey.surveyId, | ||
}, | ||
}); | ||
} | ||
|
||
if (!survey) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Toast | ||
dataTestId="survey-toast" | ||
key="survey-toast" | ||
text={survey.description} | ||
actionText={survey.cta} | ||
onActionClick={handleActionClick} | ||
onClose={handleClose} | ||
startAdornment={undefined} | ||
jonybur marked this conversation as resolved.
Show resolved
Hide resolved
|
||
/> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is set to 1, we should remove this