mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
00d155ce2f
* feat(878): implement new incoming transaction toggle networks for setting and onboarding * Update state snapshots * feat(878): change gaps, migration types based on comment --------- Co-authored-by: Mark Stacey <markjstacey@gmail.com>
1320 lines
61 KiB
Plaintext
1320 lines
61 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||
|
||
exports[`Security Tab should match snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="settings-page__body"
|
||
>
|
||
<div
|
||
class="settings-tab__error"
|
||
>
|
||
warning
|
||
</div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header__bold"
|
||
>
|
||
Security
|
||
</span>
|
||
<div
|
||
class="settings-page__security-tab-sub-header"
|
||
>
|
||
Secret Recovery Phrase
|
||
</div>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<button
|
||
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
|
||
data-testid="reveal-seed-words"
|
||
type="danger"
|
||
>
|
||
Reveal Secret Recovery Phrase
|
||
</button>
|
||
</div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header__bold"
|
||
>
|
||
Privacy
|
||
</span>
|
||
<div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header"
|
||
>
|
||
Alerts
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Use phishing detection
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
Display a warning for phishing domains targeting Ethereum users
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="usePhishingDetection"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header"
|
||
>
|
||
Smart contracts
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Decode smart contracts
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
To improve user experience, we customize the activity tab with messages based on the smart contracts you interact with. MetaMask uses a service called 4byte.directory to decode data and show you a version of a smart contract that's easier to read. This helps reduce your chances of approving malicious smart contract actions, but can result in your IP address being shared.
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="4byte-resolution-container"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header"
|
||
>
|
||
Transactions
|
||
</span>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Show balance and token price checker
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
<span>
|
||
|
||
We use
|
||
<a
|
||
href="https://www.coingecko.com/"
|
||
rel="noreferrer"
|
||
target="_blank"
|
||
>
|
||
CoinGecko
|
||
</a>
|
||
and
|
||
<a
|
||
href="https://www.cryptocompare.com/"
|
||
rel="noreferrer"
|
||
target="_blank"
|
||
>
|
||
CryptoCompare
|
||
</a>
|
||
APIs to display your balance and token price.
|
||
<a
|
||
href="https://consensys.net/privacy-policy/"
|
||
rel="noreferrer"
|
||
target="_blank"
|
||
>
|
||
Privacy policy
|
||
</a>
|
||
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="currencyRateCheckToggle"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mm-box mm-incoming-transaction-toggle"
|
||
>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
|
||
>
|
||
Show incoming transactions
|
||
</p>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
|
||
>
|
||
This relies on each network which will have access to your Ethereum address and your IP address.
|
||
</p>
|
||
<div
|
||
class="mm-box mm-box--margin-top-3 mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
data-testid="incoming-transaction-toggle-enable-all"
|
||
>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-sm-bold mm-box--color-text-default"
|
||
>
|
||
Enable for all networks
|
||
</p>
|
||
<label
|
||
class="toggle-button toggle-button--off"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="false"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div
|
||
class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
data-testid="network-toggle-0x1"
|
||
>
|
||
<div
|
||
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
|
||
>
|
||
<div
|
||
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
|
||
>
|
||
C
|
||
</div>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
|
||
>
|
||
Custom Mainnet RPC
|
||
</p>
|
||
</div>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div
|
||
class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
data-testid="network-toggle-0xe708"
|
||
>
|
||
<div
|
||
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
|
||
>
|
||
<div
|
||
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
|
||
>
|
||
<img
|
||
alt="Linea Mainnet logo"
|
||
class="mm-avatar-network__network-image"
|
||
src="./images/linea-logo-mainnet.png"
|
||
/>
|
||
</div>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
|
||
>
|
||
Linea Mainnet
|
||
</p>
|
||
</div>
|
||
<label
|
||
class="toggle-button toggle-button--off"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="false"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div
|
||
class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
data-testid="network-toggle-0x5"
|
||
>
|
||
<div
|
||
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
|
||
>
|
||
<div
|
||
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
|
||
>
|
||
G
|
||
</div>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
|
||
>
|
||
Goerli
|
||
</p>
|
||
</div>
|
||
<label
|
||
class="toggle-button toggle-button--off"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="false"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div
|
||
class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
data-testid="network-toggle-0xaa36a7"
|
||
>
|
||
<div
|
||
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
|
||
>
|
||
<div
|
||
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
|
||
>
|
||
S
|
||
</div>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
|
||
>
|
||
Sepolia
|
||
</p>
|
||
</div>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div
|
||
class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
data-testid="network-toggle-0xe704"
|
||
>
|
||
<div
|
||
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
|
||
>
|
||
<div
|
||
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
|
||
>
|
||
<img
|
||
alt="Linea Goerli logo"
|
||
class="mm-avatar-network__network-image"
|
||
src="./images/linea-logo-testnet.png"
|
||
/>
|
||
</div>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
|
||
>
|
||
Linea Goerli
|
||
</p>
|
||
</div>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header"
|
||
>
|
||
Network provider
|
||
</span>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
|
||
data-testid="advanced-setting-choose-your-network"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Choose your network
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
<span>
|
||
|
||
We use Infura as our remote procedure call (RPC) provider to offer the most reliable and private access to Ethereum data we can. You can choose your own RPC, but remember that any RPC will receive your IP address and Ethereum wallet to make transactions. Read our
|
||
<a
|
||
href="https://consensys.net/privacy-policy/"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
Privacy policy
|
||
</a>
|
||
to learn more about how Infura handles data.
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
>
|
||
<button
|
||
class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
|
||
type="secondary"
|
||
>
|
||
Add custom network
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
|
||
data-testid="setting-ipfs-gateway"
|
||
>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
IPFS gateway
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
MetaMask uses third-party services to show images of your NFTs stored on IPFS, display information related to ENS addresses entered in your browser's address bar, and fetch icons for different tokens. Your IP address may be exposed to these services when you’re using them.
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="ipfsToggle"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Add your preferred IPFS gateway
|
||
</span>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
>
|
||
<div
|
||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
|
||
>
|
||
<div
|
||
class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
|
||
>
|
||
<input
|
||
aria-invalid="false"
|
||
class="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense"
|
||
dir="auto"
|
||
type="text"
|
||
value="dweb.link"
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--margin-top-3 mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
id="ens-domains"
|
||
>
|
||
<div>
|
||
Show ENS domains in address bar
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
<span
|
||
class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
|
||
>
|
||
MetaMask lets you see ENS domains like "https://metamask.eth" right in your browser's address bar. Here's how it works:
|
||
</span>
|
||
<ul
|
||
class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--padding-inline-start-4"
|
||
style="list-style-type: circle;"
|
||
>
|
||
<li
|
||
class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
|
||
>
|
||
MetaMask checks with Ethereum's ENS contract to find the code connected to the ENS name.
|
||
</li>
|
||
<li
|
||
class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
|
||
>
|
||
If the code is linked to IPFS, it gets the content from the IPFS network.
|
||
</li>
|
||
<li
|
||
class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
|
||
>
|
||
Then, you can see the content, usually a website or something similar.
|
||
</li>
|
||
</ul>
|
||
<span
|
||
class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
|
||
>
|
||
Regular browsers don't usually handle ENS or IPFS addresses, but MetaMask helps with that. Using this feature might share your IP address with IPFS third-party services.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="ipfs-gateway-resolution-container"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--off"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="false"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header"
|
||
>
|
||
Token autodetection
|
||
</span>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
data-testid="advanced-setting-gas-fee-estimation"
|
||
id="advanced-settings-autodetect-tokens"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Autodetect tokens
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
<span>
|
||
|
||
We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want the app to automatically pull data from those services.
|
||
<a
|
||
href="https://consensys.net/privacy-policy/"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
Learn More
|
||
</a>
|
||
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="autoDetectTokens"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Batch account balance requests
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
Get faster balance updates by batching account balance requests. This lets us fetch your account balances together, so you get quicker updates for an improved experience. When this feature is off, third parties may be less likely to associate your accounts with each other.
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="useMultiAccountBalanceChecker"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--off"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="false"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Display NFT media
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
Displaying NFT media and data exposes your IP address to OpenSea or other third parties. This can allow attackers to associate your IP address with your Ethereum address. NFT autodetection relies on this setting, and won't be available when this is turned off.
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="enableOpenSeaAPI"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Autodetect NFTs
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
|
||
>
|
||
We use third-party APIs to detect NFTs in your wallet, which means your IP address may be exposed to centralized servers. There are a few things to be cautious about when enabling this feature.
|
||
</p>
|
||
<ul
|
||
class="settings-page__content-unordered-list"
|
||
>
|
||
<li>
|
||
Your account address will be viewable to third-party APIs.
|
||
</li>
|
||
<li>
|
||
NFT metadata may contain links to scams or phishing sites.
|
||
</li>
|
||
<li>
|
||
Anyone can airdrop NFTs to your account. This can include offensive content that might be automatically displayed in your wallet.
|
||
</li>
|
||
</ul>
|
||
<p
|
||
class="mm-box mm-text mm-text--body-md mm-box--padding-top-4 mm-box--color-text-alternative"
|
||
>
|
||
Leave this feature off if you don't want the app to pull data from those services.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="useNftDetection"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--on"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="true"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header"
|
||
>
|
||
Metrics
|
||
</span>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Participate in MetaMetrics
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
<span>
|
||
Participate in MetaMetrics to help us make MetaMask better
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="participateInMetaMetrics"
|
||
>
|
||
<label
|
||
class="toggle-button toggle-button--off"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||
>
|
||
<div
|
||
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||
>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
|
||
/>
|
||
<div
|
||
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
|
||
/>
|
||
</div>
|
||
<div
|
||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||
>
|
||
<div
|
||
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
|
||
/>
|
||
</div>
|
||
<input
|
||
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||
type="checkbox"
|
||
value="false"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="toggle-button__status"
|
||
>
|
||
<span
|
||
class="toggle-button__label-off"
|
||
>
|
||
Off
|
||
</span>
|
||
<span
|
||
class="toggle-button__label-on"
|
||
>
|
||
On
|
||
</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|