1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 03:12:42 +02:00

Update What's new screen with Token Detection information (#14124)

This commit is contained in:
Niranjana Binoy 2022-03-29 17:41:58 -04:00 committed by GitHub
parent 09512c7148
commit 4e6d61abcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 129 additions and 0 deletions

View File

@ -2097,6 +2097,28 @@
"notEnoughGas": {
"message": "Not Enough Gas"
},
"notifications10ActionText": {
"message": "Visit in settings",
"description": "The 'call to action' on the button, or link, of the 'Visit in settings' notification. Upon clicking, users will be taken to settings page."
},
"notifications10DescriptionOne": {
"message": "Improved token detection is currently available on Ethereum Mainnet, Polygon, BSC, and Avalanche networks. More to come!"
},
"notifications10DescriptionThree": {
"message": "Token detection feature is ON by default. But you can disable it from Settings."
},
"notifications10DescriptionTwo": {
"message": "We source tokens from third party tokens lists. Tokens listed on more than two token lists will be automatically detected."
},
"notifications10Title": {
"message": "Improved token detection is here"
},
"notifications11Description": {
"message": "Tokens can be created by anyone and can have duplicate names. If you see a token appear that you dont trust or havent interacted with - its safer to not trust it."
},
"notifications11Title": {
"message": "Scam and security risks"
},
"notifications1Description": {
"message": "MetaMask Mobile users can now swap tokens inside their mobile wallet. Scan the QR code to get the mobile app and start swapping.",
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."

View File

@ -0,0 +1,68 @@
<svg width="296" height="128" viewBox="0 0 296 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_85_2183)">
<rect width="296" height="128" rx="10" fill="#EAF6FF"/>
<path d="M190.249 -144.178C194.964 -141.475 199.004 -137.595 201.949 -133.169L393.025 163.267C399.883 173.845 400.209 186.936 394.262 197.995C388.315 209.053 376.979 215.85 364.343 216.036L-186.122 223.472C-200.738 223.696 -213.619 214.748 -218.789 201.227C-223.96 187.705 -219.904 172.434 -208.735 163.196L-15.2248 3.25028L151.243 -140.339C158.745 -146.596 168.646 -149.523 178.29 -147.905C182.544 -147.812 186.712 -146.205 190.249 -144.178Z" fill="url(#paint0_linear_85_2183)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M180.891 32.9781C198.139 42.9931 199.367 58.8541 184.547 69.7501C183.364 70.6151 182.084 71.4491 180.641 72.2841C179.248 73.0971 177.788 73.8371 176.275 74.5291C157.432 83.0761 130.029 82.3301 112.795 72.2841C94.096 61.4541 94.228 43.8071 112.99 32.9781C131.786 22.1261 162.217 22.1261 180.891 32.9781Z" fill="#A1A7A8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M243.483 103.472C245.372 104.569 245.492 107.253 243.708 108.515L239.623 111.404L175.924 70.957L176.674 64.647L243.483 103.472Z" fill="#7BA8BA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M101.89 44.0009L101.923 55.4389C101.904 49.5769 105.76 43.7059 113.469 39.2529C128.824 30.3869 153.779 30.3869 169.039 39.2529C176.611 43.6539 180.398 49.4249 180.412 55.2179L180.381 43.7709C180.365 37.9869 176.577 32.2069 169.008 27.8159C153.748 18.9429 128.794 18.9429 113.436 27.8159C105.725 32.2609 101.872 38.1299 101.89 44.0009Z" fill="#E54A21"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M169.008 32.4959C184.264 41.3589 184.152 55.7939 168.798 64.6649C153.438 73.5299 128.539 73.5299 113.281 64.6649C98.023 55.7939 98.109 41.3419 113.436 32.4959C128.794 23.6299 153.748 23.6299 169.008 32.4959Z" fill="#D7FF82" fill-opacity="0.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.146 44.033L93.176 55.475C93.195 62.547 97.839 69.617 107.131 74.995C124.357 85.036 151.768 85.784 170.605 77.241C172.117 76.55 173.58 75.802 174.971 75C176.416 74.161 177.697 73.327 178.877 72.462C185.742 67.41 189.164 61.303 189.146 55.198L189.113 43.759C189.133 49.855 185.709 55.973 178.846 61.015C177.664 61.88 176.384 62.714 174.94 63.549C173.547 64.361 172.088 65.102 170.574 65.794C151.731 74.341 124.328 73.595 107.094 63.549C97.808 58.17 93.166 51.109 93.146 44.033Z" fill="#FF6C3F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M168.798 59.987C184.152 51.114 184.264 36.676 169.008 27.816C153.748 18.943 128.794 18.943 113.436 27.816C98.109 36.661 98.023 51.114 113.281 59.987C128.539 68.846 153.438 68.846 168.798 59.987ZM175.19 24.243C192.438 34.258 193.666 50.119 178.846 61.015C177.664 61.88 176.384 62.714 174.94 63.549C173.547 64.361 172.088 65.102 170.574 65.794C151.731 74.341 124.328 73.595 107.094 63.549C88.396 52.719 88.527 35.071 107.289 24.243C126.086 13.391 156.516 13.391 175.19 24.243Z" fill="#FF8E66"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M176.061 64.1429C177.482 63.3229 178.762 63.2489 179.689 63.7859L212.67 82.9559C211.746 82.4139 210.461 82.4929 209.045 83.3129C206.269 84.9169 204.004 88.8319 204.01 92.0299C204.016 93.6369 204.583 94.7649 205.498 95.2929L172.514 76.1249C171.602 75.5989 171.037 74.4719 171.031 72.8599C171.021 69.6719 173.285 65.7519 176.061 64.1429Z" fill="#FF8E66"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M205.498 95.2931C204.583 94.7651 204.016 93.6371 204.01 92.0301C204.01 91.8581 204.082 91.6671 204.095 91.4951L171.113 72.3301C171.101 72.5041 171.031 72.6861 171.031 72.8601C171.037 74.4721 171.602 75.5991 172.514 76.1251L205.498 95.2931Z" fill="#E64A21"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M209.045 83.3129C206.269 84.9169 204.004 88.8319 204.01 92.0299C204.021 95.2559 206.299 96.5529 209.077 94.9479C211.887 93.3209 214.15 89.4079 214.142 86.1769C214.133 82.9849 211.853 81.6859 209.045 83.3129Z" fill="#FD6220"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M197.91 75.6931C199.623 74.7031 201.17 74.6141 202.282 75.2601L242.063 98.3791C240.946 97.7341 239.396 97.8181 237.691 98.8091C234.338 100.743 231.609 105.467 231.617 109.323C231.621 111.264 232.309 112.617 233.408 113.257L193.631 90.1471C192.53 89.5061 191.846 88.1471 191.841 86.2081C191.828 82.3511 194.56 77.6301 197.91 75.6931Z" fill="#FF8E66"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M233.408 113.257C232.309 112.617 231.621 111.264 231.617 109.323C231.613 108.692 231.793 108.022 231.926 107.359L192.15 84.2461C192.015 84.9061 191.838 85.5771 191.841 86.2081C191.846 88.1471 192.53 89.5061 193.631 90.1471L233.408 113.257Z" fill="#FF6C3F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M237.691 98.8091C234.338 100.743 231.609 105.467 231.617 109.323C231.629 113.214 234.376 114.779 237.726 112.843C241.118 110.893 243.846 106.165 243.835 102.266C243.824 98.4141 241.078 96.8511 237.691 98.8091Z" fill="#FF6C3F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M162.721 40C162.995 45.476 159.55 51.006 152.333 55.177C144.061 59.951 132.726 61.814 122 60.877C132.903 64.898 147.576 64.175 157.135 58.656C165.854 53.619 167.713 46.089 162.721 40Z" fill="#B9D299"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.69 58.259C137.011 58.093 136.273 58.087 135.57 58.191C136.279 58.232 136.98 58.251 137.69 58.259Z" fill="#FFC9B6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M106.908 63.428C97.752 58.065 93.166 51.057 93.146 44.033L93.176 55.475C93.195 62.483 97.773 69.494 106.908 74.855V63.428Z" fill="#E64A21"/>
<path d="M38.9983 99.2535C46.7879 93.9618 58.893 92.316 66.0476 95.5549C73.2022 98.7938 72.6467 105.746 64.8523 111.033C57.0579 116.319 44.9529 117.965 37.7983 114.726C30.6437 111.487 31.1947 104.54 38.9983 99.2535Z" fill="#A1A7A8"/>
<path d="M72.1144 95.0365C79.9164 89.7372 77.1431 79.2354 84.309 82.4789C91.4748 85.7223 99.5181 98.7237 95.3959 105.782C91.4026 112.62 80.4681 114.868 73.3022 111.624C66.1363 108.381 64.2985 100.33 72.1144 95.0365Z" fill="#A1A7A8"/>
<path d="M92.1239 100.347C90.0563 103.364 87.9841 106.384 85.9071 109.408C83.2887 113.23 77.3302 114.497 69.7152 112.166C58.098 108.62 47.016 98.0505 44.9663 88.5653C44.2521 85.2977 44.7119 82.587 46.0885 80.5744L52.3113 71.5149C50.9358 73.5212 50.4748 76.2383 51.1831 79.505C53.2328 88.9902 64.3159 99.553 75.932 103.105C83.5482 105.431 89.5067 104.163 92.1239 100.347Z" fill="url(#paint1_linear_85_2183)"/>
<g style="mix-blend-mode:overlay" opacity="0.6">
<path d="M75.2091 104.046C82.3787 106.244 88.0797 105.259 90.9305 101.96C87.9154 104.728 82.5188 105.42 75.8358 103.398C64.177 99.8252 53.0533 89.203 50.9963 79.6644C50.2854 76.3793 50.7481 73.6469 52.1286 71.6294L50.7647 73.623C49.9761 75.477 49.8019 77.7057 50.3637 80.312C52.4266 89.8514 63.5504 100.474 75.2091 104.046Z" fill="white"/>
</g>
<path d="M68.3086 69.0824C79.9374 72.6401 91.0325 83.219 93.0903 92.7195C95.148 102.22 87.3921 107.043 75.7455 103.483C64.099 99.9229 53.0217 89.3464 50.9699 79.8467C48.918 70.347 56.6799 65.5247 68.3086 69.0824Z" fill="url(#paint2_linear_85_2183)"/>
<g style="mix-blend-mode:overlay" opacity="0.4">
<path d="M50.9872 79.6931C53.0462 89.2483 64.1807 99.8892 75.8509 103.468C87.3885 107.003 95.132 102.303 93.3132 92.9693L52.129 71.6321C50.74 73.6587 50.2768 76.3958 50.9872 79.6931Z" fill="white"/>
</g>
<path d="M69.2375 73.3708C77.9694 76.0341 86.3009 83.9813 87.8713 91.117C89.4418 98.2528 83.5836 101.87 74.8529 99.2002C66.1221 96.5306 57.7906 88.5834 56.2202 81.4476C54.6498 74.3118 60.502 70.6941 69.2375 73.3708Z" fill="#FFAC47"/>
<path d="M67.8442 75.0487C76.5938 77.7274 84.9432 85.7016 86.4884 92.8512C86.9694 95.0669 86.7385 96.941 85.9375 98.4008C87.7734 96.8556 88.5438 94.3742 87.881 91.1954C86.3371 84.0394 77.9876 76.0652 69.207 73.389C63.1606 71.536 58.5032 72.6965 56.7112 75.9498C58.9907 74.0195 62.9574 73.5572 67.8442 75.0487Z" fill="#F7932F"/>
<path d="M59.3483 98.06C59.4477 100.064 59.5399 102.074 59.6382 104.084C59.6773 105.336 59.3585 106.599 58.7231 107.71C55.8831 112.93 47.28 116.399 39.5045 115.459C33.5801 114.744 29.8259 111.67 29.6682 107.935C29.5759 105.926 29.4765 103.922 29.3842 101.912C29.5599 105.65 33.2962 108.72 39.2205 109.436C46.9841 110.374 55.5992 106.907 58.4392 101.687C59.0759 100.576 59.3928 99.3119 59.3483 98.06Z" fill="url(#paint3_linear_85_2183)"/>
<g style="mix-blend-mode:overlay" opacity="0.6">
<path d="M39.0083 110.01C46.8263 110.964 55.502 107.442 58.3622 102.138C58.7886 101.368 59.0782 100.528 59.2154 99.6644C59.0555 100.386 58.7925 101.085 58.4358 101.736C55.5756 107.04 46.9119 110.564 39.0819 109.609C33.1161 108.882 29.3357 105.759 29.1771 101.964L29.2459 103.399C30.0012 106.69 33.6006 109.324 39.0083 110.01Z" fill="white"/>
</g>
<path d="M49.2592 90.7806C57.0141 91.7169 61.0192 96.7007 58.1753 101.917C55.3314 107.132 46.745 110.589 38.9782 109.651C31.2114 108.713 27.2242 103.731 30.061 98.5211C32.8978 93.3109 41.4984 89.8434 49.2592 90.7806Z" fill="url(#paint4_linear_85_2183)"/>
<g style="mix-blend-mode:overlay" opacity="0.4">
<path d="M35.3902 93.6283L42.2734 109.705C46.1328 109.624 49.9807 108.512 53.4581 106.474L46.696 90.7546C42.827 90.7197 38.9406 91.7076 35.3902 93.6283Z" fill="white"/>
</g>
<path d="M47.9761 93.1329C53.8104 93.8359 56.8118 97.5539 54.6748 101.488C52.5377 105.422 46.0887 108.007 40.2604 107.304C34.432 106.602 31.4306 102.884 33.5629 98.9428C35.6952 95.0016 42.1478 92.4306 47.9761 93.1329Z" fill="#FFAC47"/>
<path d="M34.362 100.253C36.4998 96.3244 42.964 93.7184 48.8039 94.423C51.5538 94.753 53.6718 95.7579 54.9198 97.1385C53.9806 95.1122 51.4858 93.5672 47.9413 93.1391C42.1014 92.4344 35.6372 95.0404 33.4995 98.9688C32.9652 99.8908 32.733 100.956 32.8414 101.987C32.9498 103.018 33.3923 103.953 34.0954 104.637C33.78 103.971 33.6388 103.218 33.6856 102.45C33.7323 101.682 33.9653 100.925 34.362 100.253Z" fill="#F7932F"/>
</g>
<defs>
<linearGradient id="paint0_linear_85_2183" x1="551.526" y1="148.245" x2="-241.732" y2="100.545" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA84"/>
<stop offset="1" stop-color="#FFC9F1"/>
</linearGradient>
<linearGradient id="paint1_linear_85_2183" x1="43.6854" y1="89.7662" x2="92.4112" y2="98.7972" gradientUnits="userSpaceOnUse">
<stop stop-color="#F28500"/>
<stop offset="1" stop-color="#FBA905"/>
</linearGradient>
<linearGradient id="paint2_linear_85_2183" x1="64.5856" y1="72.876" x2="87.7599" y2="107.655" gradientUnits="userSpaceOnUse">
<stop stop-color="#FBCF0A"/>
<stop offset="1" stop-color="#FBA505"/>
</linearGradient>
<linearGradient id="paint3_linear_85_2183" x1="2489.04" y1="3804.33" x2="3992.61" y2="4082.47" gradientUnits="userSpaceOnUse">
<stop stop-color="#F28500"/>
<stop offset="1" stop-color="#FBA905"/>
</linearGradient>
<linearGradient id="paint4_linear_85_2183" x1="3430.66" y1="3856.51" x2="2146.71" y2="2912.53" gradientUnits="userSpaceOnUse">
<stop stop-color="#FBCF0A"/>
<stop offset="1" stop-color="#FBA505"/>
</linearGradient>
<clipPath id="clip0_85_2183">
<rect width="296" height="128" rx="10" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -46,6 +46,18 @@ export const UI_NOTIFICATIONS = {
width: '80%',
},
},
10: {
id: 10,
date: '2022-04-18',
image: {
src: 'images/token-detection.svg',
width: '100%',
},
},
11: {
id: 11,
date: '2022-04-18',
},
};
export const getTranslatedUINoficiations = (t, locale) => {
@ -132,5 +144,26 @@ export const getTranslatedUINoficiations = (t, locale) => {
new Date(UI_NOTIFICATIONS[9].date),
),
},
10: {
...UI_NOTIFICATIONS[10],
title: t('notifications10Title'),
description: [
t('notifications10DescriptionOne'),
t('notifications10DescriptionTwo'),
t('notifications10DescriptionThree'),
],
actionText: t('notifications10ActionText'),
date: new Intl.DateTimeFormat(formattedLocale).format(
new Date(UI_NOTIFICATIONS[10].date),
),
},
11: {
...UI_NOTIFICATIONS[11],
title: t('notifications11Title'),
description: t('notifications11Description'),
date: new Intl.DateTimeFormat(formattedLocale).format(
new Date(UI_NOTIFICATIONS[11].date),
),
},
};
};

View File

@ -45,6 +45,10 @@ function getActionFunctionById(id, history) {
updateViewedNotifications({ 8: true });
history.push(ADVANCED_ROUTE);
},
10: () => {
updateViewedNotifications({ 10: true });
history.push(`${ADVANCED_ROUTE}#token-description`);
},
};
return actionFunctions[id];

View File

@ -719,6 +719,8 @@ function getAllowedNotificationIds(state) {
7: false,
8: supportsWebHid && currentKeyringIsLedger && currentlyUsingLedgerLive,
9: getIsMainnet(state),
10: Boolean(process.env.TOKEN_DETECTION_V2),
11: Boolean(process.env.TOKEN_DETECTION_V2),
};
}