mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-26 12:29:06 +01:00
4c37448c97
* added ipfs toggle * added placeholder valur * fixed snapshot * updated tests * updated spec file * hide input if toggle is disabled * updated e2e tests for nft image * fixed view-ercc-1155 spec * updated e2e tests for nfts * added ipfs toggle modal * updated UI for ipfs * updated tests * updated classname * added placeholder image * lint fix * removed prop ipfsEnabled and used with selector * fixed ui for ipfs toggle * updated test * updated test to handle cases * nit fix * ensure default image height match nft image
799 lines
32 KiB
Plaintext
799 lines
32 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-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="settings-page__content-row"
|
||
>
|
||
<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"
|
||
>
|
||
<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"
|
||
>
|
||
Transactions
|
||
</span>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="settings-page__content-row"
|
||
>
|
||
<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"
|
||
>
|
||
<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>
|
||
<div
|
||
class="settings-page__content-row"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Show incoming transactions
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
<span>
|
||
|
||
This relies on
|
||
<a
|
||
href="https://etherscan.io/privacyPolicy"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
Etherscan
|
||
</a>
|
||
which will have access to your Ethereum address and your IP address.
|
||
<a
|
||
href="https://consensys.net/privacy-policy/"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
Privacy policy
|
||
</a>
|
||
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<div
|
||
class="settings-page__content-item-col"
|
||
data-testid="showIncomingTransactions"
|
||
>
|
||
<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"
|
||
>
|
||
Network provider
|
||
</span>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="settings-page__content-row"
|
||
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"
|
||
>
|
||
<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-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>
|
||
<div
|
||
class="settings-page__content-row"
|
||
data-testid="setting-ipfs-gateway"
|
||
>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<span>
|
||
Add custom IPFS gateway
|
||
</span>
|
||
<div
|
||
class="settings-page__content-description"
|
||
>
|
||
The IPFS gateway makes it possible to access and view data hosted by third parties. You can add a custom IPFS gateway or continue using the default.
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="settings-page__content-item"
|
||
>
|
||
<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="dweb.link"
|
||
/>
|
||
</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="settings-page__content-item"
|
||
>
|
||
<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="settings-page__content-item"
|
||
id="ens-domains"
|
||
>
|
||
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"
|
||
>
|
||
<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="settings-page__content-row"
|
||
data-testid="advanced-setting-gas-fee-estimation"
|
||
>
|
||
<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"
|
||
>
|
||
<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>
|
||
<div
|
||
class="settings-page__content-row"
|
||
>
|
||
<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"
|
||
>
|
||
<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>
|
||
</div>
|
||
<span
|
||
class="settings-page__security-tab-sub-header"
|
||
>
|
||
Metrics
|
||
</span>
|
||
<div
|
||
class="settings-page__content-padded"
|
||
>
|
||
<div
|
||
class="settings-page__content-row"
|
||
>
|
||
<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"
|
||
>
|
||
<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>
|
||
</div>
|
||
`;
|