mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
feat(878): add new incomingTxn component and change styles of settings (#20374)
* feat(878): add new incomingTxn component and change styles of settings * feat(878): relocate openSea tab from rebase regression * feat(878): make UI and test modifications * feat(878): transfer to ts * feat(878): rename network-toggle.tsx
This commit is contained in:
Danica Shen
GitHub
parent
66b4d7c9fb
commit
a85a4cf97e
6
app/_locales/en/messages.json
generated
6
app/_locales/en/messages.json
generated
@ -1397,6 +1397,9 @@
|
||||
"enableAutoDetect": {
|
||||
"message": " Enable autodetect"
|
||||
},
|
||||
"enableForAllNetworks": {
|
||||
"message": "Enable for all networks"
|
||||
},
|
||||
"enableFromSettings": {
|
||||
"message": " Enable it from Settings."
|
||||
},
|
||||
@ -3850,6 +3853,9 @@
|
||||
"message": "This relies on $1 which will have access to your Ethereum address and your IP address. $2",
|
||||
"description": "$1 is the link to etherscan url and $2 is the link to the privacy policy of consensys APIs"
|
||||
},
|
||||
"showIncomingTransactionsInformation": {
|
||||
"message": "This relies on each network which will have access to your Ethereum address and your IP address."
|
||||
},
|
||||
"showMore": {
|
||||
"message": "Show more"
|
||||
},
|
||||
|
||||
@ -0,0 +1,472 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`IncomingTransactionToggle should render existing incoming transaction preferences 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mm-box mm-incoming-transaction-toggle"
|
||||
>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-lg-medium mm-text--font-weight-bold mm-box--color-text-default"
|
||||
>
|
||||
Show incoming transactions
|
||||
</p>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-md 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--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-md 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"
|
||||
>
|
||||
<img
|
||||
alt="Ethereum Mainnet logo"
|
||||
class="mm-avatar-network__network-image"
|
||||
src="./images/eth_logo.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"
|
||||
>
|
||||
Ethereum Mainnet
|
||||
</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-0xfa"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
F
|
||||
</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"
|
||||
>
|
||||
FANTOM
|
||||
</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-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>
|
||||
`;
|
||||
@ -0,0 +1,209 @@
|
||||
import React from 'react';
|
||||
import { fireEvent, within } from '@testing-library/react';
|
||||
import configureMockState from 'redux-mock-store';
|
||||
import thunk from 'redux-thunk';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import mockState from '../../../../test/data/mock-state.json';
|
||||
import { MetaMetricsContext } from '../../../contexts/metametrics';
|
||||
import IncomingTransactionToggle from './incoming-transaction-toggle';
|
||||
|
||||
const mockTrackEvent = jest.fn();
|
||||
const ALL_NETWORKS_DATA = [
|
||||
{
|
||||
chainId: '0x1',
|
||||
nickname: 'Ethereum Mainnet',
|
||||
rpcUrl: 'https://mainnet.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
|
||||
rpcPrefs: {
|
||||
imageUrl: './images/eth_logo.png',
|
||||
},
|
||||
providerType: 'mainnet',
|
||||
ticker: 'ETH',
|
||||
id: 'mainnet',
|
||||
removable: false,
|
||||
},
|
||||
{
|
||||
chainId: '0xe708',
|
||||
nickname: 'Linea Mainnet',
|
||||
rpcUrl:
|
||||
'https://linea-mainnet.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
|
||||
rpcPrefs: {
|
||||
imageUrl: './images/linea-logo-mainnet.png',
|
||||
},
|
||||
providerType: 'linea-mainnet',
|
||||
id: 'linea-mainnet',
|
||||
removable: false,
|
||||
},
|
||||
{
|
||||
chainId: '0xfa',
|
||||
nickname: 'FANTOM',
|
||||
rpcPrefs: {},
|
||||
rpcUrl: 'http://ftmscan.com5',
|
||||
ticker: 'FTM',
|
||||
},
|
||||
{
|
||||
chainId: '0x5',
|
||||
nickname: 'Goerli',
|
||||
rpcUrl: 'https://goerli.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
|
||||
providerType: 'goerli',
|
||||
ticker: 'GoerliETH',
|
||||
id: 'goerli',
|
||||
removable: false,
|
||||
},
|
||||
{
|
||||
chainId: '0xaa36a7',
|
||||
nickname: 'Sepolia',
|
||||
rpcUrl: 'https://sepolia.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
|
||||
providerType: 'sepolia',
|
||||
ticker: 'SepoliaETH',
|
||||
id: 'sepolia',
|
||||
removable: false,
|
||||
},
|
||||
{
|
||||
chainId: '0xe704',
|
||||
nickname: 'Linea Goerli',
|
||||
rpcUrl:
|
||||
'https://linea-goerli.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
|
||||
rpcPrefs: {
|
||||
imageUrl: './images/linea-logo-testnet.png',
|
||||
},
|
||||
providerType: 'linea-goerli',
|
||||
ticker: 'LineaETH',
|
||||
id: 'linea-goerli',
|
||||
removable: false,
|
||||
},
|
||||
];
|
||||
|
||||
const INCOMING_DATA = {
|
||||
'0x1': true,
|
||||
'0xe708': false,
|
||||
'0xfa': true,
|
||||
'0x5': false,
|
||||
'0xaa36a7': true,
|
||||
'0xe704': true,
|
||||
};
|
||||
|
||||
describe('IncomingTransactionToggle', () => {
|
||||
const mockStore = configureMockState([thunk])(mockState);
|
||||
let setIncomingTransactionsPreferencesStub;
|
||||
|
||||
beforeEach(() => {
|
||||
setIncomingTransactionsPreferencesStub = jest.fn();
|
||||
});
|
||||
|
||||
it('should render existing incoming transaction preferences', () => {
|
||||
const { container, getByTestId } = renderWithProvider(
|
||||
<MetaMetricsContext.Provider value={mockTrackEvent}>
|
||||
<IncomingTransactionToggle
|
||||
setIncomingTransactionsPreferences={
|
||||
setIncomingTransactionsPreferencesStub
|
||||
}
|
||||
allNetworks={ALL_NETWORKS_DATA}
|
||||
incomingTransactionsPreferences={INCOMING_DATA}
|
||||
/>
|
||||
</MetaMetricsContext.Provider>,
|
||||
mockStore,
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
const enableForAllCheckbox = within(
|
||||
getByTestId('incoming-transaction-toggle-enable-all'),
|
||||
).getByRole('checkbox');
|
||||
expect(enableForAllCheckbox.checked).toStrictEqual(false);
|
||||
|
||||
const ethMainnetCheckbox = within(
|
||||
getByTestId(`network-toggle-${ALL_NETWORKS_DATA[0].chainId}`),
|
||||
).getByRole('checkbox');
|
||||
expect(ethMainnetCheckbox.value).toStrictEqual('true');
|
||||
const lineaMainnetCheckbox = within(
|
||||
getByTestId(`network-toggle-${ALL_NETWORKS_DATA[1].chainId}`),
|
||||
).getByRole('checkbox');
|
||||
expect(lineaMainnetCheckbox.value).toStrictEqual('false');
|
||||
const fantomCheckbox = within(
|
||||
getByTestId(`network-toggle-${ALL_NETWORKS_DATA[2].chainId}`),
|
||||
).getByRole('checkbox');
|
||||
expect(fantomCheckbox.value).toStrictEqual('true');
|
||||
const goerliCheckbox = within(
|
||||
getByTestId(`network-toggle-${ALL_NETWORKS_DATA[3].chainId}`),
|
||||
).getByRole('checkbox');
|
||||
expect(goerliCheckbox.value).toStrictEqual('false');
|
||||
const sepoliaCheckbox = within(
|
||||
getByTestId(`network-toggle-${ALL_NETWORKS_DATA[4].chainId}`),
|
||||
).getByRole('checkbox');
|
||||
expect(sepoliaCheckbox.value).toStrictEqual('true');
|
||||
const lineaGoerliCheckbox = within(
|
||||
getByTestId(`network-toggle-${ALL_NETWORKS_DATA[5].chainId}`),
|
||||
).getByRole('checkbox');
|
||||
expect(lineaGoerliCheckbox.value).toStrictEqual('true');
|
||||
});
|
||||
|
||||
it('should trigger settle for all when click toggle all button', () => {
|
||||
const { getByTestId } = renderWithProvider(
|
||||
<MetaMetricsContext.Provider value={mockTrackEvent}>
|
||||
<IncomingTransactionToggle
|
||||
setIncomingTransactionsPreferences={
|
||||
setIncomingTransactionsPreferencesStub
|
||||
}
|
||||
allNetworks={ALL_NETWORKS_DATA}
|
||||
incomingTransactionsPreferences={INCOMING_DATA}
|
||||
/>
|
||||
</MetaMetricsContext.Provider>,
|
||||
mockStore,
|
||||
);
|
||||
const enableForAllCheckbox = within(
|
||||
getByTestId('incoming-transaction-toggle-enable-all'),
|
||||
).getByRole('checkbox');
|
||||
fireEvent.click(enableForAllCheckbox);
|
||||
// set 2 false to true
|
||||
expect(setIncomingTransactionsPreferencesStub).toHaveBeenCalledTimes(2);
|
||||
expect(
|
||||
setIncomingTransactionsPreferencesStub.mock.calls[0][0],
|
||||
).toStrictEqual('0xe708');
|
||||
expect(
|
||||
setIncomingTransactionsPreferencesStub.mock.calls[0][1],
|
||||
).toStrictEqual(true);
|
||||
expect(
|
||||
setIncomingTransactionsPreferencesStub.mock.calls[1][0],
|
||||
).toStrictEqual('0x5');
|
||||
expect(
|
||||
setIncomingTransactionsPreferencesStub.mock.calls[1][1],
|
||||
).toStrictEqual(true);
|
||||
});
|
||||
|
||||
it('should trigger settle for one when click toggle one button', () => {
|
||||
const { getByTestId } = renderWithProvider(
|
||||
<MetaMetricsContext.Provider value={mockTrackEvent}>
|
||||
<IncomingTransactionToggle
|
||||
setIncomingTransactionsPreferences={
|
||||
setIncomingTransactionsPreferencesStub
|
||||
}
|
||||
allNetworks={ALL_NETWORKS_DATA}
|
||||
incomingTransactionsPreferences={INCOMING_DATA}
|
||||
/>
|
||||
</MetaMetricsContext.Provider>,
|
||||
mockStore,
|
||||
);
|
||||
const lineaMainnetCheckbox = within(
|
||||
getByTestId(`network-toggle-${ALL_NETWORKS_DATA[1].chainId}`),
|
||||
).getByRole('checkbox');
|
||||
fireEvent.click(lineaMainnetCheckbox);
|
||||
// set 1 false to true
|
||||
expect(setIncomingTransactionsPreferencesStub).toHaveBeenCalledTimes(1);
|
||||
expect(
|
||||
setIncomingTransactionsPreferencesStub.mock.calls[0][0],
|
||||
).toStrictEqual('0xe708');
|
||||
expect(
|
||||
setIncomingTransactionsPreferencesStub.mock.calls[0][1],
|
||||
).toStrictEqual(true);
|
||||
|
||||
// set 1 false to true
|
||||
const goerliCheckbox = within(
|
||||
getByTestId(`network-toggle-${ALL_NETWORKS_DATA[3].chainId}`),
|
||||
).getByRole('checkbox');
|
||||
fireEvent.click(goerliCheckbox);
|
||||
expect(
|
||||
setIncomingTransactionsPreferencesStub.mock.calls[1][0],
|
||||
).toStrictEqual('0x5');
|
||||
expect(
|
||||
setIncomingTransactionsPreferencesStub.mock.calls[1][1],
|
||||
).toStrictEqual(true);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,145 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import { I18nContext } from '../../../contexts/i18n';
|
||||
|
||||
import ToggleButton from '../../ui/toggle-button';
|
||||
import { Box, Text } from '../../component-library';
|
||||
import {
|
||||
Display,
|
||||
FlexDirection,
|
||||
JustifyContent,
|
||||
TextVariant,
|
||||
FontWeight,
|
||||
TextColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import { PolymorphicRef } from '../../component-library/box';
|
||||
import { TEST_CHAINS } from '../../../../shared/constants/network';
|
||||
import NetworkToggle from './network-toggle';
|
||||
|
||||
interface IncomingTransactionToggleProps {
|
||||
wrapperRef: PolymorphicRef<any>;
|
||||
incomingTransactionsPreferences: Record<string, boolean>;
|
||||
allNetworks: [Record<string, any>];
|
||||
setIncomingTransactionsPreferences: (
|
||||
chainId: string,
|
||||
isAllEnabledValue: boolean,
|
||||
) => void;
|
||||
}
|
||||
|
||||
const IncomingTransactionToggle = ({
|
||||
wrapperRef,
|
||||
incomingTransactionsPreferences,
|
||||
allNetworks,
|
||||
setIncomingTransactionsPreferences,
|
||||
}: IncomingTransactionToggleProps) => {
|
||||
const t = useContext(I18nContext);
|
||||
|
||||
const [networkPreferences, setNetworkPreferences] = useState(
|
||||
generateIncomingNetworkPreferences(
|
||||
incomingTransactionsPreferences,
|
||||
allNetworks,
|
||||
),
|
||||
);
|
||||
|
||||
const [isAllEnabled, setIsAllEnabled] = useState(
|
||||
checkAllNetworks(incomingTransactionsPreferences),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setNetworkPreferences(
|
||||
generateIncomingNetworkPreferences(
|
||||
incomingTransactionsPreferences,
|
||||
allNetworks,
|
||||
),
|
||||
);
|
||||
}, [incomingTransactionsPreferences, allNetworks]);
|
||||
|
||||
useEffect(() => {
|
||||
setIsAllEnabled(checkAllNetworks(incomingTransactionsPreferences));
|
||||
}, [incomingTransactionsPreferences]);
|
||||
|
||||
const toggleAllEnabled = (isAllEnabledValue: boolean): void => {
|
||||
Object.keys(incomingTransactionsPreferences).forEach((chainId) => {
|
||||
if (incomingTransactionsPreferences[chainId] !== isAllEnabledValue) {
|
||||
setIncomingTransactionsPreferences(chainId, isAllEnabledValue);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toggleSingleNetwork = (chainId: string, value: boolean): void => {
|
||||
setIncomingTransactionsPreferences(chainId, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box ref={wrapperRef} className="mm-incoming-transaction-toggle">
|
||||
<Text variant={TextVariant.bodyLgMedium} fontWeight={FontWeight.Bold}>
|
||||
{t('showIncomingTransactions')}
|
||||
</Text>
|
||||
|
||||
<Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
|
||||
{t('showIncomingTransactionsInformation')}
|
||||
</Text>
|
||||
<Box
|
||||
marginTop={3}
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
data-testid="incoming-transaction-toggle-enable-all"
|
||||
>
|
||||
<Text variant={TextVariant.bodyMd}> {t('enableForAllNetworks')}</Text>
|
||||
<ToggleButton
|
||||
value={isAllEnabled}
|
||||
onToggle={(value) => toggleAllEnabled(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</Box>
|
||||
{Object.keys(networkPreferences).map((chainId, index) => {
|
||||
return (
|
||||
<NetworkToggle
|
||||
key={index}
|
||||
chainId={chainId}
|
||||
networkPreferences={networkPreferences[chainId]}
|
||||
toggleSingleNetwork={toggleSingleNetwork}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default IncomingTransactionToggle;
|
||||
|
||||
IncomingTransactionToggle.propTypes = {
|
||||
wrapperRef: PropTypes.object,
|
||||
incomingTransactionsPreferences: PropTypes.object.isRequired,
|
||||
allNetworks: PropTypes.array.isRequired,
|
||||
setIncomingTransactionsPreferences: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function generateIncomingNetworkPreferences(
|
||||
incomingTransactionsPreferences: Record<string, boolean>,
|
||||
allNetworks: Record<string, any>,
|
||||
): Record<string, any> {
|
||||
const incomingTxnPreferences: Record<string, any> = {};
|
||||
|
||||
Object.keys(allNetworks).forEach((id) => {
|
||||
const { chainId } = allNetworks[id];
|
||||
incomingTxnPreferences[chainId] = {
|
||||
isShowIncomingTransactions: incomingTransactionsPreferences[chainId],
|
||||
isATestNetwork: TEST_CHAINS.includes(chainId),
|
||||
label: allNetworks[id].nickname,
|
||||
imageUrl: allNetworks[id].rpcPrefs?.imageUrl,
|
||||
};
|
||||
});
|
||||
|
||||
return incomingTxnPreferences;
|
||||
}
|
||||
|
||||
function checkAllNetworks(
|
||||
incomingTransactionsPreferences: Record<string, boolean>,
|
||||
): boolean {
|
||||
return Object.values(incomingTransactionsPreferences).every(Boolean);
|
||||
}
|
||||
104
ui/components/app/incoming-trasaction-toggle/network-toggle.tsx
Normal file
104
ui/components/app/incoming-trasaction-toggle/network-toggle.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
AvatarNetwork,
|
||||
AvatarNetworkSize,
|
||||
Box,
|
||||
Text,
|
||||
} from '../../component-library';
|
||||
import {
|
||||
AlignItems,
|
||||
BackgroundColor,
|
||||
BlockSize,
|
||||
Display,
|
||||
FlexDirection,
|
||||
JustifyContent,
|
||||
TextColor,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Tooltip from '../../ui/tooltip';
|
||||
import ToggleButton from '../../ui/toggle-button';
|
||||
import { I18nContext } from '../../../contexts/i18n';
|
||||
|
||||
const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 20;
|
||||
|
||||
interface NetworkPreferences {
|
||||
isShowIncomingTransactions: boolean;
|
||||
label: string;
|
||||
imageUrl: string;
|
||||
}
|
||||
|
||||
interface NetworkToggleProps {
|
||||
networkPreferences: NetworkPreferences;
|
||||
toggleSingleNetwork: (chainId: string, value: boolean) => void;
|
||||
chainId: string;
|
||||
}
|
||||
|
||||
const NetworkToggle = ({
|
||||
networkPreferences,
|
||||
toggleSingleNetwork,
|
||||
chainId,
|
||||
}: NetworkToggleProps) => {
|
||||
const t = useContext(I18nContext);
|
||||
|
||||
const { isShowIncomingTransactions } = networkPreferences;
|
||||
|
||||
const networkName = networkPreferences.label;
|
||||
|
||||
return (
|
||||
<Box
|
||||
marginTop={6}
|
||||
marginBottom={6}
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
data-testid={`network-toggle-${chainId}`}
|
||||
className="network-toggle-wrapper"
|
||||
>
|
||||
<Box
|
||||
gap={2}
|
||||
backgroundColor={BackgroundColor.transparent}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
width={BlockSize.Full}
|
||||
>
|
||||
<AvatarNetwork
|
||||
size={AvatarNetworkSize.Sm}
|
||||
src={networkPreferences.imageUrl}
|
||||
name={networkName}
|
||||
/>
|
||||
<Text
|
||||
color={TextColor.textDefault}
|
||||
backgroundColor={BackgroundColor.transparent}
|
||||
variant={TextVariant.bodyMd}
|
||||
ellipsis
|
||||
marginLeft={2}
|
||||
>
|
||||
{networkName.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
|
||||
<Tooltip title={networkName} position="bottom">
|
||||
{networkName}
|
||||
</Tooltip>
|
||||
) : (
|
||||
networkName
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<ToggleButton
|
||||
value={isShowIncomingTransactions}
|
||||
onToggle={(value) => toggleSingleNetwork(chainId, !value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkToggle;
|
||||
|
||||
NetworkToggle.propTypes = {
|
||||
chainId: PropTypes.string.isRequired,
|
||||
networkPreferences: PropTypes.object.isRequired,
|
||||
toggleSingleNetwork: PropTypes.func.isRequired,
|
||||
};
|
||||
@ -1,13 +1,15 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Box from '../../../components/ui/box';
|
||||
import Typography from '../../../components/ui/typography';
|
||||
import { Box, Text } from '../../../components/component-library';
|
||||
import ToggleButton from '../../../components/ui/toggle-button';
|
||||
import {
|
||||
JustifyContent,
|
||||
TypographyVariant,
|
||||
FONT_WEIGHT,
|
||||
TextVariant,
|
||||
AlignItems,
|
||||
Display,
|
||||
FontWeight,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
|
||||
export const Setting = ({
|
||||
value,
|
||||
@ -16,20 +18,31 @@ export const Setting = ({
|
||||
description,
|
||||
showToggle = true,
|
||||
}) => {
|
||||
const t = useI18nContext();
|
||||
|
||||
return (
|
||||
<Box justifyContent={JustifyContent.center} margin={3}>
|
||||
<Box
|
||||
display={Display.Flex}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
alignItems={AlignItems.center}
|
||||
marginTop={3}
|
||||
marginBottom={3}
|
||||
className="privacy-settings__setting__wrapper"
|
||||
>
|
||||
<div className="privacy-settings__setting">
|
||||
<Typography
|
||||
variant={TypographyVariant.H5}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
>
|
||||
<Text variant={TextVariant.bodyLgMedium} fontWeight={FontWeight.Bold}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant={TypographyVariant.H6}>{description}</Typography>
|
||||
</Text>
|
||||
<Text variant={TextVariant.bodyMd}>{description}</Text>
|
||||
</div>
|
||||
{showToggle ? (
|
||||
<div className="privacy-settings__setting__toggle">
|
||||
<ToggleButton value={value} onToggle={(val) => setValue(!val)} />
|
||||
<ToggleButton
|
||||
value={value}
|
||||
onToggle={(val) => setValue(!val)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</Box>
|
||||
|
||||
@ -0,0 +1,656 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AdvancedTab Component should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="settings-page__body"
|
||||
>
|
||||
<div
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
|
||||
data-testid="advanced-setting-state-logs"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
State logs
|
||||
</span>
|
||||
<span
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
State logs contain your public account addresses and sent transactions.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary btn--large"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Download state logs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
|
||||
data-testid="advanced-setting-reset-account"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Clear activity and nonce data
|
||||
</span>
|
||||
<span
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
This resets the account's nonce and erases data from the activity tab in your wallet. Only the current account and network will be affected. Your balances and incoming transactions won't change.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-danger btn--large settings-tab__button--red"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Clear activity tab data
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
data-testid="advanced-setting-hex-data"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Show hex data
|
||||
</span>
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
Select this to show the hex data field on the send screen
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<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--flex-direction-row mm-box--justify-content-space-between"
|
||||
data-testid="advanced-setting-show-testnet-conversion"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Show conversion on test networks
|
||||
</span>
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
Select this to show fiat conversion on test networks
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<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--flex-direction-row mm-box--justify-content-space-between"
|
||||
data-testid="advanced-setting-show-testnet-conversion"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Show test networks
|
||||
</span>
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
Select this to show test networks in network list
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<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--flex-direction-row mm-box--justify-content-space-between"
|
||||
data-testid="advanced-setting-custom-nonce"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Customize transaction nonce
|
||||
</span>
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<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--flex-direction-column"
|
||||
data-testid="advanced-setting-auto-lock"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Auto-lock timer (minutes)
|
||||
</span>
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
Set the idle time in minutes before MetaMask will become locked.
|
||||
</div>
|
||||
</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"
|
||||
data-testid="auto-lockout-time"
|
||||
dir="auto"
|
||||
id="autoTimeout"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
type="text"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button
|
||||
class="button btn--rounded btn-primary settings-tab__rpc-save-button"
|
||||
data-testid="auto-lockout-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
|
||||
data-testid="advanced-setting-data-backup"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Backup your data
|
||||
</span>
|
||||
<span
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
You can backup user settings containing preferences and account addresses into a JSON file.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary btn--large"
|
||||
data-testid="backup-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
|
||||
data-testid="advanced-setting-data-restore"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Restore user data
|
||||
</span>
|
||||
<span
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
You can restore user settings containing preferences and account addresses from a previously backed up JSON file.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<label
|
||||
class="button btn btn--rounded btn-secondary btn--large settings-page__button"
|
||||
for="restore-file"
|
||||
>
|
||||
Restore
|
||||
</label>
|
||||
<input
|
||||
accept=".json"
|
||||
data-testid="restore-file"
|
||||
id="restore-file"
|
||||
style="visibility: hidden;"
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
|
||||
data-testid="ledger-live-control"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Preferred Ledger connection type
|
||||
</span>
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
<span>
|
||||
|
||||
Customize how you connect your Ledger to MetaMask.
|
||||
U2F
|
||||
is recommended, but other options are available. Read more here:
|
||||
<a
|
||||
class="button btn-link settings-page__inline-link"
|
||||
href="https://metamask.zendesk.com/hc/en-us/articles/360020394612-How-to-connect-a-Trezor-or-Ledger-Hardware-Wallet"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
learn more
|
||||
</a>
|
||||
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<div
|
||||
class="dropdown"
|
||||
>
|
||||
<select
|
||||
class="dropdown__select"
|
||||
>
|
||||
<option
|
||||
value="ledgerLive"
|
||||
>
|
||||
Ledger Live
|
||||
</option>
|
||||
<option
|
||||
value="u2f"
|
||||
>
|
||||
U2F
|
||||
</option>
|
||||
</select>
|
||||
<span
|
||||
class="mm-box dropdown__icon-caret-down mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
|
||||
style="mask-image: url('./images/icons/arrow-down.svg');"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
data-testid="advanced-setting-dismiss-reminder"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Dismiss Secret Recovery Phrase backup reminder
|
||||
</span>
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
Turn this on to dismiss the Secret Recovery Phrase backup reminder message. We highly recommend that you back up your Secret Recovery Phrase to avoid loss of funds
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<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--flex-direction-row mm-box--justify-content-space-between"
|
||||
data-testid="advanced-setting-toggle-ethsign"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<span>
|
||||
Eth_sign requests
|
||||
</span>
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
If you enable this setting, you might get signature requests that aren’t readable. By signing a message you don't understand, you could be agreeing to give away your funds and NFTs.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<label
|
||||
class="toggle-button toggle-button--off eth-sign-toggle"
|
||||
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 (Recommended)
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
ON (Not recommended)
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,11 +1,18 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Box, BannerAlert } from '../../../components/component-library';
|
||||
import ToggleButton from '../../../components/ui/toggle-button';
|
||||
import TextField from '../../../components/ui/text-field';
|
||||
import Button from '../../../components/ui/button';
|
||||
import Dropdown from '../../../components/ui/dropdown';
|
||||
import Dialog from '../../../components/ui/dialog';
|
||||
|
||||
import {
|
||||
Display,
|
||||
FlexDirection,
|
||||
JustifyContent,
|
||||
SEVERITIES,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { getPlatform } from '../../../../app/scripts/lib/util';
|
||||
|
||||
import { PLATFORM_FIREFOX } from '../../../../shared/constants/app';
|
||||
@ -29,11 +36,6 @@ import {
|
||||
} from '../../../helpers/utils/export-utils';
|
||||
import ActionableMessage from '../../../components/ui/actionable-message';
|
||||
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
|
||||
import { BannerAlert } from '../../../components/component-library';
|
||||
import {
|
||||
SEVERITIES,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
const CORRUPT_JSON_FILE = 'CORRUPT_JSON_FILE';
|
||||
|
||||
@ -167,9 +169,11 @@ export default class AdvancedTab extends PureComponent {
|
||||
const { displayWarning } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={this.settingsRefs[0]}
|
||||
<Box
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
ref={this.settingsRefs[0]}
|
||||
data-testid="advanced-setting-state-logs"
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
@ -201,7 +205,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -210,9 +214,11 @@ export default class AdvancedTab extends PureComponent {
|
||||
const { showResetAccountConfirmationModal } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[1]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
data-testid="advanced-setting-reset-account"
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
@ -241,7 +247,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -250,9 +256,12 @@ export default class AdvancedTab extends PureComponent {
|
||||
const { sendHexData, setHexDataFeatureFlag } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[2]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
data-testid="advanced-setting-hex-data"
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
@ -261,17 +270,15 @@ export default class AdvancedTab extends PureComponent {
|
||||
{t('showHexDataDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={sendHexData}
|
||||
onToggle={(value) => setHexDataFeatureFlag(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={sendHexData}
|
||||
onToggle={(value) => setHexDataFeatureFlag(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -281,9 +288,12 @@ export default class AdvancedTab extends PureComponent {
|
||||
this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[3]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
data-testid="advanced-setting-show-testnet-conversion"
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
@ -292,19 +302,18 @@ export default class AdvancedTab extends PureComponent {
|
||||
{t('showFiatConversionInTestnetsDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={showFiatInTestnets}
|
||||
onToggle={(value) =>
|
||||
setShowFiatConversionOnTestnetsPreference(!value)
|
||||
}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={showFiatInTestnets}
|
||||
onToggle={(value) =>
|
||||
setShowFiatConversionOnTestnetsPreference(!value)
|
||||
}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -313,10 +322,13 @@ export default class AdvancedTab extends PureComponent {
|
||||
const { showTestNetworks, setShowTestNetworks } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[4]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-show-testnet-conversion"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('showTestnetNetworks')}</span>
|
||||
@ -324,17 +336,16 @@ export default class AdvancedTab extends PureComponent {
|
||||
{t('showTestnetNetworksDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={showTestNetworks}
|
||||
onToggle={(value) => setShowTestNetworks(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={showTestNetworks}
|
||||
onToggle={(value) => setShowTestNetworks(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -343,10 +354,13 @@ export default class AdvancedTab extends PureComponent {
|
||||
const { useNonceField, setUseNonceField } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[5]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-custom-nonce"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('nonceField')}</span>
|
||||
@ -354,17 +368,16 @@ export default class AdvancedTab extends PureComponent {
|
||||
{t('nonceFieldDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={useNonceField}
|
||||
onToggle={(value) => setUseNonceField(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={useNonceField}
|
||||
onToggle={(value) => setUseNonceField(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -374,10 +387,12 @@ export default class AdvancedTab extends PureComponent {
|
||||
const { setAutoLockTimeLimit } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[6]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-auto-lock"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('autoLockTimeLimit')}</span>
|
||||
@ -411,7 +426,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -461,10 +476,12 @@ export default class AdvancedTab extends PureComponent {
|
||||
: LEDGER_TRANSPORT_NAMES.U2F;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[7]}
|
||||
className="settings-page__content-row"
|
||||
data-testId="ledger-live-control"
|
||||
data-testid="ledger-live-control"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('preferredLedgerConnectionType')}</span>
|
||||
@ -517,7 +534,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -527,10 +544,13 @@ export default class AdvancedTab extends PureComponent {
|
||||
this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[8]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-dismiss-reminder"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('dismissReminderField')}</span>
|
||||
@ -538,17 +558,16 @@ export default class AdvancedTab extends PureComponent {
|
||||
{t('dismissReminderDescriptionField')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={dismissSeedBackUpReminder}
|
||||
onToggle={(value) => setDismissSeedBackUpReminder(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={dismissSeedBackUpReminder}
|
||||
onToggle={(value) => setDismissSeedBackUpReminder(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -571,10 +590,13 @@ export default class AdvancedTab extends PureComponent {
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[9]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-toggle-ethsign"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('toggleEthSignField')}</span>
|
||||
@ -583,7 +605,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{disabledRpcMethodPreferences?.eth_sign === true ? (
|
||||
{disabledRpcMethodPreferences?.eth_sign ? (
|
||||
<BannerAlert
|
||||
severity={SEVERITIES.DANGER}
|
||||
marginBottom={5}
|
||||
@ -592,20 +614,19 @@ export default class AdvancedTab extends PureComponent {
|
||||
{t('toggleEthSignBannerDescription')}
|
||||
</BannerAlert>
|
||||
) : null}
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
className="eth-sign-toggle"
|
||||
value={disabledRpcMethodPreferences?.eth_sign || false}
|
||||
onToggle={(value) => {
|
||||
value ? toggleOff(value) : showEthSignModal();
|
||||
}}
|
||||
offLabel={t('toggleEthSignOff')}
|
||||
onLabel={t('toggleEthSignOn')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
className="eth-sign-toggle"
|
||||
value={disabledRpcMethodPreferences?.eth_sign || false}
|
||||
onToggle={(value) => {
|
||||
value ? toggleOff(value) : showEthSignModal();
|
||||
}}
|
||||
offLabel={t('toggleEthSignOff')}
|
||||
onLabel={t('toggleEthSignOn')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -650,10 +671,12 @@ export default class AdvancedTab extends PureComponent {
|
||||
renderUserDataBackup() {
|
||||
const { t } = this.context;
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[10]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-data-backup"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('backupUserData')}</span>
|
||||
@ -673,7 +696,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -690,10 +713,12 @@ export default class AdvancedTab extends PureComponent {
|
||||
: defaultRestoreMessage;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[11]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-data-restore"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('restoreUserData')}</span>
|
||||
@ -735,7 +760,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -19,6 +19,12 @@ jest.mock('../../../store/actions.ts', () => {
|
||||
describe('AdvancedTab Component', () => {
|
||||
const mockStore = configureMockStore([thunk])(mockState);
|
||||
|
||||
it('should match snapshot', () => {
|
||||
const { container } = renderWithProvider(<AdvancedTab />, mockStore);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render backup button', () => {
|
||||
const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
|
||||
const backupButton = queryByTestId('backup-button');
|
||||
|
||||
@ -31,5 +31,6 @@
|
||||
padding: 16px 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
|
||||
Privacy
|
||||
</h4>
|
||||
<div
|
||||
class="settings-page__content-row settings-page__content-row-experimental"
|
||||
class="mm-box settings-page__content-row settings-page__content-row-experimental mm-box--margin-bottom-3"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
@ -112,24 +112,24 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
<p
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
|
||||
>
|
||||
We use third-party APIs to detect and display risks involved in unsigned transaction and signature requests before you sign them. These services will have access to your unsigned transaction and signature requests, your account address, and your preferred language.
|
||||
</p>
|
||||
<p
|
||||
</h6>
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-3 mm-box--margin-bottom-1 mm-box--color-text-alternative"
|
||||
>
|
||||
Select providers:
|
||||
</p>
|
||||
</h6>
|
||||
<div
|
||||
class="settings-page__content-item-col settings-page__content-item-col-open-sea"
|
||||
>
|
||||
<p
|
||||
<h5
|
||||
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-box--margin-bottom-0 mm-box--color-text-default"
|
||||
>
|
||||
OpenSea + Blockaid (Beta)
|
||||
</p>
|
||||
</h5>
|
||||
<label
|
||||
class="toggle-button toggle-button--off"
|
||||
tabindex="0"
|
||||
@ -172,7 +172,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<p
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-0 mm-box--color-text-alternative"
|
||||
>
|
||||
<span>
|
||||
@ -188,17 +188,17 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
|
||||
.
|
||||
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
</h6>
|
||||
<h5
|
||||
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--color-text-muted"
|
||||
>
|
||||
More providers coming soon
|
||||
</p>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
data-testid="advanced-setting-desktop-pairing"
|
||||
>
|
||||
<div
|
||||
@ -209,19 +209,15 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
<button
|
||||
class="button btn--rounded btn-primary btn--large"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-primary btn--large"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Disable Desktop App
|
||||
</button>
|
||||
</div>
|
||||
Disable Desktop App
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,11 +6,17 @@ import {
|
||||
handleSettingsRefs,
|
||||
} from '../../../helpers/utils/settings-search';
|
||||
import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
|
||||
import { Text } from '../../../components/component-library';
|
||||
|
||||
import { Text, Box } from '../../../components/component-library';
|
||||
import {
|
||||
FontWeight,
|
||||
TextColor,
|
||||
TextVariant,
|
||||
FontWeight,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(desktop)
|
||||
Display,
|
||||
FlexDirection,
|
||||
JustifyContent,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../../helpers/constants/design-system';
|
||||
///: BEGIN:ONLY_INCLUDE_IN(desktop)
|
||||
import DesktopEnableButton from '../../../components/app/desktop-enable-button';
|
||||
@ -57,6 +63,7 @@ export default class ExperimentalTab extends PureComponent {
|
||||
const { t } = this.context;
|
||||
|
||||
const { securityAlertsEnabled, setSecurityAlertsEnabled } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Text
|
||||
@ -144,21 +151,24 @@ export default class ExperimentalTab extends PureComponent {
|
||||
<>
|
||||
<Text
|
||||
variant={TextVariant.headingSm}
|
||||
as="h4"
|
||||
color={TextColor.textAlternative}
|
||||
marginBottom={2}
|
||||
fontWeight={FontWeight.Bold}
|
||||
>
|
||||
{t('privacy')}
|
||||
</Text>
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[1]}
|
||||
className="settings-page__content-row settings-page__content-row-experimental"
|
||||
marginBottom={3}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('transactionSecurityCheck')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
<Text
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
color={TextColor.textAlternative}
|
||||
>
|
||||
{t('transactionSecurityCheckDescription')}
|
||||
@ -167,6 +177,7 @@ export default class ExperimentalTab extends PureComponent {
|
||||
marginTop={3}
|
||||
marginBottom={1}
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
color={TextColor.textAlternative}
|
||||
>
|
||||
{t('selectProvider')}
|
||||
@ -174,6 +185,7 @@ export default class ExperimentalTab extends PureComponent {
|
||||
<div className="settings-page__content-item-col settings-page__content-item-col-open-sea">
|
||||
<Text
|
||||
variant={TextVariant.bodyMd}
|
||||
as="h5"
|
||||
color={TextColor.textDefault}
|
||||
fontWeight={FontWeight.Medium}
|
||||
marginBottom={0}
|
||||
@ -197,6 +209,7 @@ export default class ExperimentalTab extends PureComponent {
|
||||
</div>
|
||||
<Text
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
color={TextColor.textAlternative}
|
||||
marginTop={0}
|
||||
>
|
||||
@ -213,15 +226,16 @@ export default class ExperimentalTab extends PureComponent {
|
||||
</Text>
|
||||
<Text
|
||||
variant={TextVariant.bodyMd}
|
||||
color={TextColor.textMuted}
|
||||
as="h5"
|
||||
fontWeight={FontWeight.Medium}
|
||||
color={TextColor.textMuted}
|
||||
marginTop={2}
|
||||
>
|
||||
{t('moreComingSoon')}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -231,20 +245,22 @@ export default class ExperimentalTab extends PureComponent {
|
||||
const { t } = this.context;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[6]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-desktop-pairing"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('desktopEnableButtonDescription')}</span>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<DesktopEnableButton />
|
||||
</div>
|
||||
|
||||
<div className="settings-page__content-item-col">
|
||||
<DesktopEnableButton />
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
|
||||
@ -258,7 +258,7 @@
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 12px 24px;
|
||||
padding: 24px;
|
||||
|
||||
@include screen-sm-min {
|
||||
padding: 12px;
|
||||
@ -266,23 +266,18 @@
|
||||
}
|
||||
|
||||
&__content-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 0 20px;
|
||||
}
|
||||
|
||||
&__content-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
@include screen-sm-max {
|
||||
height: initial;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
&--without-height {
|
||||
@ -364,10 +359,10 @@
|
||||
max-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 8px;
|
||||
|
||||
@include screen-sm-max {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.eth-sign-toggle .toggle-button__status {
|
||||
|
||||
@ -47,7 +47,7 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
class="settings-page__content-padded"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
@ -62,58 +62,54 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="usePhishingDetection"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="usePhishingDetection"
|
||||
<label
|
||||
class="toggle-button toggle-button--on"
|
||||
tabindex="0"
|
||||
>
|
||||
<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="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;"
|
||||
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="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>
|
||||
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="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"
|
||||
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
|
||||
class="toggle-button__status"
|
||||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||
>
|
||||
<span
|
||||
class="toggle-button__label-off"
|
||||
>
|
||||
Off
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
On
|
||||
</span>
|
||||
<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>
|
||||
</label>
|
||||
</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>
|
||||
@ -126,7 +122,7 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
class="settings-page__content-padded"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
@ -169,62 +165,58 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="currencyRateCheckToggle"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="currencyRateCheckToggle"
|
||||
<label
|
||||
class="toggle-button toggle-button--on"
|
||||
tabindex="0"
|
||||
>
|
||||
<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="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;"
|
||||
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="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>
|
||||
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="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"
|
||||
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
|
||||
class="toggle-button__status"
|
||||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||
>
|
||||
<span
|
||||
class="toggle-button__label-off"
|
||||
>
|
||||
Off
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
On
|
||||
</span>
|
||||
<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>
|
||||
</label>
|
||||
</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-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
@ -259,58 +251,54 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="showIncomingTransactions"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="showIncomingTransactions"
|
||||
<label
|
||||
class="toggle-button toggle-button--off"
|
||||
tabindex="0"
|
||||
>
|
||||
<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="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;"
|
||||
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="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>
|
||||
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="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"
|
||||
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
|
||||
class="toggle-button__status"
|
||||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||
>
|
||||
<span
|
||||
class="toggle-button__label-off"
|
||||
>
|
||||
Off
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
On
|
||||
</span>
|
||||
<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>
|
||||
</label>
|
||||
</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>
|
||||
@ -323,7 +311,7 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
class="settings-page__content-padded"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
|
||||
data-testid="advanced-setting-choose-your-network"
|
||||
>
|
||||
<div
|
||||
@ -351,22 +339,18 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
Add custom network
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
|
||||
data-testid="setting-ipfs-gateway"
|
||||
>
|
||||
<div
|
||||
@ -382,7 +366,7 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
>
|
||||
<label
|
||||
class="toggle-button toggle-button--on"
|
||||
@ -458,48 +442,46 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="mm-box settings-page__content-row mm-box--margin-top-3 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
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"
|
||||
<div>
|
||||
Show ENS domains in address bar
|
||||
<div
|
||||
class="settings-page__content-description"
|
||||
>
|
||||
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
|
||||
<span
|
||||
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
|
||||
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"
|
||||
>
|
||||
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>
|
||||
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>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="ipfs-gateway-resolution-container"
|
||||
@ -562,7 +544,7 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
class="settings-page__content-padded"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
data-testid="advanced-setting-gas-fee-estimation"
|
||||
>
|
||||
<div
|
||||
@ -590,62 +572,58 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="autoDetectTokens"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="autoDetectTokens"
|
||||
<label
|
||||
class="toggle-button toggle-button--on"
|
||||
tabindex="0"
|
||||
>
|
||||
<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="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;"
|
||||
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="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>
|
||||
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="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"
|
||||
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
|
||||
class="toggle-button__status"
|
||||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||
>
|
||||
<span
|
||||
class="toggle-button__label-off"
|
||||
>
|
||||
Off
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
On
|
||||
</span>
|
||||
<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>
|
||||
</label>
|
||||
</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-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
@ -660,62 +638,58 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="useMultiAccountBalanceChecker"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="useMultiAccountBalanceChecker"
|
||||
<label
|
||||
class="toggle-button toggle-button--off"
|
||||
tabindex="0"
|
||||
>
|
||||
<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="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;"
|
||||
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="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>
|
||||
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="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"
|
||||
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
|
||||
class="toggle-button__status"
|
||||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||
>
|
||||
<span
|
||||
class="toggle-button__label-off"
|
||||
>
|
||||
Off
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
On
|
||||
</span>
|
||||
<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>
|
||||
</label>
|
||||
</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="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
@ -730,62 +704,58 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="displayNftMedia"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="displayNftMedia"
|
||||
<label
|
||||
class="toggle-button toggle-button--off"
|
||||
tabindex="0"
|
||||
>
|
||||
<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="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;"
|
||||
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="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>
|
||||
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="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"
|
||||
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
|
||||
class="toggle-button__status"
|
||||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||
>
|
||||
<span
|
||||
class="toggle-button__label-off"
|
||||
>
|
||||
Off
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
On
|
||||
</span>
|
||||
<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>
|
||||
</label>
|
||||
</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="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
@ -822,58 +792,54 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="useNftDetection"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="useNftDetection"
|
||||
<label
|
||||
class="toggle-button toggle-button--off"
|
||||
tabindex="0"
|
||||
>
|
||||
<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="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;"
|
||||
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="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>
|
||||
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="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"
|
||||
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
|
||||
class="toggle-button__status"
|
||||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||
>
|
||||
<span
|
||||
class="toggle-button__label-off"
|
||||
>
|
||||
Off
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
On
|
||||
</span>
|
||||
<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>
|
||||
</label>
|
||||
</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>
|
||||
@ -886,7 +852,7 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
class="settings-page__content-padded"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-row"
|
||||
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
@ -903,58 +869,54 @@ exports[`Security Tab should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settings-page__content-item"
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="participateInMetaMetrics"
|
||||
>
|
||||
<div
|
||||
class="settings-page__content-item-col"
|
||||
data-testid="participateInMetaMetrics"
|
||||
<label
|
||||
class="toggle-button toggle-button--off"
|
||||
tabindex="0"
|
||||
>
|
||||
<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="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;"
|
||||
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="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>
|
||||
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="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"
|
||||
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
|
||||
class="toggle-button__status"
|
||||
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||
>
|
||||
<span
|
||||
class="toggle-button__label-off"
|
||||
>
|
||||
Off
|
||||
</span>
|
||||
<span
|
||||
class="toggle-button__label-on"
|
||||
>
|
||||
On
|
||||
</span>
|
||||
<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>
|
||||
</label>
|
||||
</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>
|
||||
|
||||
@ -24,19 +24,23 @@ import SRPQuiz from '../../../components/app/srp-quiz-modal/SRPQuiz';
|
||||
import {
|
||||
BUTTON_SIZES,
|
||||
Button,
|
||||
} from '../../../components/component-library/button';
|
||||
Box,
|
||||
Text,
|
||||
} from '../../../components/component-library';
|
||||
import TextField from '../../../components/ui/text-field';
|
||||
import ToggleButton from '../../../components/ui/toggle-button';
|
||||
import {
|
||||
Display,
|
||||
FlexDirection,
|
||||
JustifyContent,
|
||||
TextColor,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
|
||||
import {
|
||||
getNumberOfSettingsInSection,
|
||||
handleSettingsRefs,
|
||||
} from '../../../helpers/utils/settings-search';
|
||||
import { Box, Text } from '../../../components/component-library';
|
||||
import {
|
||||
TextColor,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
export default class SecurityTab extends PureComponent {
|
||||
static contextTypes = {
|
||||
@ -169,7 +173,13 @@ export default class SecurityTab extends PureComponent {
|
||||
this.props;
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[1]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[1]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('showIncomingTransactions')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
@ -195,22 +205,18 @@ export default class SecurityTab extends PureComponent {
|
||||
])}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="showIncomingTransactions"
|
||||
>
|
||||
<ToggleButton
|
||||
value={showIncomingTransactions}
|
||||
onToggle={(value) =>
|
||||
setShowIncomingTransactionsFeatureFlag(!value)
|
||||
}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="showIncomingTransactions"
|
||||
>
|
||||
<ToggleButton
|
||||
value={showIncomingTransactions}
|
||||
onToggle={(value) => setShowIncomingTransactionsFeatureFlag(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -219,27 +225,32 @@ export default class SecurityTab extends PureComponent {
|
||||
const { usePhishDetect, setUsePhishDetect } = this.props;
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[2]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[2]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('usePhishingDetection')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
{t('usePhishingDetectionDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="usePhishingDetection"
|
||||
>
|
||||
<ToggleButton
|
||||
value={usePhishDetect}
|
||||
onToggle={(value) => setUsePhishDetect(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="usePhishingDetection"
|
||||
>
|
||||
<ToggleButton
|
||||
value={usePhishDetect}
|
||||
onToggle={(value) => setUsePhishDetect(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -249,27 +260,32 @@ export default class SecurityTab extends PureComponent {
|
||||
this.props;
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[3]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[3]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('participateInMetaMetrics')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
<span>{t('participateInMetaMetricsDescription')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="participateInMetaMetrics"
|
||||
>
|
||||
<ToggleButton
|
||||
value={participateInMetaMetrics}
|
||||
onToggle={(value) => setParticipateInMetaMetrics(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="participateInMetaMetrics"
|
||||
>
|
||||
<ToggleButton
|
||||
value={participateInMetaMetrics}
|
||||
onToggle={(value) => setParticipateInMetaMetrics(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -277,10 +293,12 @@ export default class SecurityTab extends PureComponent {
|
||||
const { t } = this.context;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[4]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-choose-your-network"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('chooseYourNetwork')}</span>
|
||||
@ -298,24 +316,22 @@ export default class SecurityTab extends PureComponent {
|
||||
])}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<Button
|
||||
type="secondary"
|
||||
className="settings-page__button"
|
||||
onClick={() => {
|
||||
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
|
||||
? global.platform.openExtensionInBrowser(
|
||||
ADD_POPULAR_CUSTOM_NETWORK,
|
||||
)
|
||||
: this.props.history.push(ADD_POPULAR_CUSTOM_NETWORK);
|
||||
}}
|
||||
>
|
||||
{t('addCustomNetwork')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="settings-page__content-item-col">
|
||||
<Button
|
||||
type="secondary"
|
||||
className="settings-page__button"
|
||||
onClick={() => {
|
||||
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
|
||||
? global.platform.openExtensionInBrowser(
|
||||
ADD_POPULAR_CUSTOM_NETWORK,
|
||||
)
|
||||
: this.props.history.push(ADD_POPULAR_CUSTOM_NETWORK);
|
||||
}}
|
||||
>
|
||||
{t('addCustomNetwork')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -367,10 +383,12 @@ export default class SecurityTab extends PureComponent {
|
||||
: handleIpfsGatewayChange('');
|
||||
};
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[5]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="setting-ipfs-gateway"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('ipfsGateway')}</span>
|
||||
@ -378,7 +396,7 @@ export default class SecurityTab extends PureComponent {
|
||||
{t('ipfsGatewayDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={this.state.ipfsGateway}
|
||||
onToggle={(value) => {
|
||||
@ -405,51 +423,56 @@ export default class SecurityTab extends PureComponent {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="settings-page__content-item"
|
||||
<Box
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
ref={this.settingsRefs[9]}
|
||||
marginTop={3}
|
||||
id="ens-domains"
|
||||
>
|
||||
{t('ensDomainsSettingTitle')}
|
||||
<div className="settings-page__content-description">
|
||||
<Text color={TextColor.inherit} variant={TextVariant.inherit}>
|
||||
{t('ensDomainsSettingDescriptionIntro')}
|
||||
</Text>
|
||||
<Box
|
||||
as="ul"
|
||||
marginTop={4}
|
||||
marginBottom={4}
|
||||
paddingInlineStart={4}
|
||||
style={{ listStyleType: 'circle' }}
|
||||
>
|
||||
<Text
|
||||
as="li"
|
||||
color={TextColor.inherit}
|
||||
variant={TextVariant.inherit}
|
||||
>
|
||||
{t('ensDomainsSettingDescriptionPoint1')}
|
||||
<div>
|
||||
{t('ensDomainsSettingTitle')}
|
||||
<div className="settings-page__content-description">
|
||||
<Text color={TextColor.inherit} variant={TextVariant.inherit}>
|
||||
{t('ensDomainsSettingDescriptionIntro')}
|
||||
</Text>
|
||||
<Text
|
||||
as="li"
|
||||
color={TextColor.inherit}
|
||||
variant={TextVariant.inherit}
|
||||
<Box
|
||||
as="ul"
|
||||
marginTop={4}
|
||||
marginBottom={4}
|
||||
paddingInlineStart={4}
|
||||
style={{ listStyleType: 'circle' }}
|
||||
>
|
||||
{t('ensDomainsSettingDescriptionPoint2')}
|
||||
<Text
|
||||
as="li"
|
||||
color={TextColor.inherit}
|
||||
variant={TextVariant.inherit}
|
||||
>
|
||||
{t('ensDomainsSettingDescriptionPoint1')}
|
||||
</Text>
|
||||
<Text
|
||||
as="li"
|
||||
color={TextColor.inherit}
|
||||
variant={TextVariant.inherit}
|
||||
>
|
||||
{t('ensDomainsSettingDescriptionPoint2')}
|
||||
</Text>
|
||||
<Text
|
||||
as="li"
|
||||
color={TextColor.inherit}
|
||||
variant={TextVariant.inherit}
|
||||
>
|
||||
{t('ensDomainsSettingDescriptionPoint3')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text color={TextColor.inherit} variant={TextVariant.inherit}>
|
||||
{t('ensDomainsSettingDescriptionOutro')}
|
||||
</Text>
|
||||
<Text
|
||||
as="li"
|
||||
color={TextColor.inherit}
|
||||
variant={TextVariant.inherit}
|
||||
>
|
||||
{t('ensDomainsSettingDescriptionPoint3')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text color={TextColor.inherit} variant={TextVariant.inherit}>
|
||||
{t('ensDomainsSettingDescriptionOutro')}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="ipfs-gateway-resolution-container"
|
||||
@ -461,8 +484,8 @@ export default class SecurityTab extends PureComponent {
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -471,10 +494,13 @@ export default class SecurityTab extends PureComponent {
|
||||
const { useTokenDetection, setUseTokenDetection } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[6]}
|
||||
className="settings-page__content-row"
|
||||
data-testid="advanced-setting-gas-fee-estimation"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('autoDetectTokens')}</span>
|
||||
@ -492,27 +518,26 @@ export default class SecurityTab extends PureComponent {
|
||||
])}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="autoDetectTokens"
|
||||
>
|
||||
<ToggleButton
|
||||
value={useTokenDetection}
|
||||
onToggle={(value) => {
|
||||
this.toggleSetting(
|
||||
value,
|
||||
MetaMetricsEventName.KeyAutoDetectTokens,
|
||||
MetaMetricsEventName.KeyAutoDetectTokens,
|
||||
setUseTokenDetection,
|
||||
);
|
||||
}}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="autoDetectTokens"
|
||||
>
|
||||
<ToggleButton
|
||||
value={useTokenDetection}
|
||||
onToggle={(value) => {
|
||||
this.toggleSetting(
|
||||
value,
|
||||
MetaMetricsEventName.KeyAutoDetectTokens,
|
||||
MetaMetricsEventName.KeyAutoDetectTokens,
|
||||
setUseTokenDetection,
|
||||
);
|
||||
}}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -522,34 +547,39 @@ export default class SecurityTab extends PureComponent {
|
||||
this.props;
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[7]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[7]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('useMultiAccountBalanceChecker')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
{t('useMultiAccountBalanceCheckerSettingDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="useMultiAccountBalanceChecker"
|
||||
>
|
||||
<ToggleButton
|
||||
value={useMultiAccountBalanceChecker}
|
||||
onToggle={(value) => {
|
||||
this.toggleSetting(
|
||||
value,
|
||||
MetaMetricsEventName.KeyBatchAccountBalanceRequests,
|
||||
MetaMetricsEventName.KeyBatchAccountBalanceRequests,
|
||||
setUseMultiAccountBalanceChecker,
|
||||
);
|
||||
}}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="useMultiAccountBalanceChecker"
|
||||
>
|
||||
<ToggleButton
|
||||
value={useMultiAccountBalanceChecker}
|
||||
onToggle={(value) => {
|
||||
this.toggleSetting(
|
||||
value,
|
||||
MetaMetricsEventName.KeyBatchAccountBalanceRequests,
|
||||
MetaMetricsEventName.KeyBatchAccountBalanceRequests,
|
||||
setUseMultiAccountBalanceChecker,
|
||||
);
|
||||
}}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -558,7 +588,13 @@ export default class SecurityTab extends PureComponent {
|
||||
const { useCurrencyRateCheck, setUseCurrencyRateCheck } = this.props;
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[8]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[8]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('currencyRateCheckToggle')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
@ -590,20 +626,19 @@ export default class SecurityTab extends PureComponent {
|
||||
])}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="currencyRateCheckToggle"
|
||||
>
|
||||
<ToggleButton
|
||||
value={useCurrencyRateCheck}
|
||||
onToggle={(value) => setUseCurrencyRateCheck(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="currencyRateCheckToggle"
|
||||
>
|
||||
<ToggleButton
|
||||
value={useCurrencyRateCheck}
|
||||
onToggle={(value) => setUseCurrencyRateCheck(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -617,41 +652,46 @@ export default class SecurityTab extends PureComponent {
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[10]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[10]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('displayNftMedia')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
{t('displayNftMediaDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="displayNftMedia"
|
||||
>
|
||||
<ToggleButton
|
||||
value={openSeaEnabled}
|
||||
onToggle={(value) => {
|
||||
this.context.trackEvent({
|
||||
category: MetaMetricsEventCategory.Settings,
|
||||
event: 'Enabled/Disable OpenSea',
|
||||
properties: {
|
||||
action: 'Enabled/Disable OpenSea',
|
||||
legacy_event: true,
|
||||
},
|
||||
});
|
||||
// value is positive when being toggled off
|
||||
if (value && useNftDetection) {
|
||||
setUseNftDetection(false);
|
||||
}
|
||||
setOpenSeaEnabled(!value);
|
||||
}}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="displayNftMedia"
|
||||
>
|
||||
<ToggleButton
|
||||
value={openSeaEnabled}
|
||||
onToggle={(value) => {
|
||||
this.context.trackEvent({
|
||||
category: MetaMetricsEventCategory.Settings,
|
||||
event: 'Enabled/Disable OpenSea',
|
||||
properties: {
|
||||
action: 'Enabled/Disable OpenSea',
|
||||
legacy_event: true,
|
||||
},
|
||||
});
|
||||
// value is positive when being toggled off
|
||||
if (value && useNftDetection) {
|
||||
setUseNftDetection(false);
|
||||
}
|
||||
setOpenSeaEnabled(!value);
|
||||
}}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -664,7 +704,13 @@ export default class SecurityTab extends PureComponent {
|
||||
setUseNftDetection,
|
||||
} = this.props;
|
||||
return (
|
||||
<div ref={this.settingsRefs[11]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[11]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('useNftDetection')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
@ -681,33 +727,32 @@ export default class SecurityTab extends PureComponent {
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="useNftDetection"
|
||||
>
|
||||
<ToggleButton
|
||||
value={useNftDetection}
|
||||
onToggle={(value) => {
|
||||
this.context.trackEvent({
|
||||
category: MetaMetricsEventCategory.Settings,
|
||||
event: 'NFT Detected',
|
||||
properties: {
|
||||
action: 'NFT Detected',
|
||||
legacy_event: true,
|
||||
},
|
||||
});
|
||||
if (!value && !openSeaEnabled) {
|
||||
setOpenSeaEnabled(!value);
|
||||
}
|
||||
setUseNftDetection(!value);
|
||||
}}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="settings-page__content-item-col"
|
||||
data-testid="useNftDetection"
|
||||
>
|
||||
<ToggleButton
|
||||
value={useNftDetection}
|
||||
onToggle={(value) => {
|
||||
this.context.trackEvent({
|
||||
category: MetaMetricsEventCategory.Settings,
|
||||
event: 'NFT Detected',
|
||||
properties: {
|
||||
action: 'NFT Detected',
|
||||
legacy_event: true,
|
||||
},
|
||||
});
|
||||
if (!value && !openSeaEnabled) {
|
||||
setOpenSeaEnabled(!value);
|
||||
}
|
||||
setUseNftDetection(!value);
|
||||
}}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -5,6 +5,10 @@ import availableCurrencies from '../../../helpers/constants/available-conversion
|
||||
import {
|
||||
TextVariant,
|
||||
TextColor,
|
||||
Display,
|
||||
FlexDirection,
|
||||
JustifyContent,
|
||||
AlignItems,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Dropdown from '../../../components/ui/dropdown';
|
||||
import ToggleButton from '../../../components/ui/toggle-button';
|
||||
@ -18,7 +22,7 @@ import {
|
||||
handleSettingsRefs,
|
||||
} from '../../../helpers/utils/settings-search';
|
||||
import { ThemeType } from '../../../../shared/constants/preferences';
|
||||
import { Text } from '../../../components/component-library';
|
||||
import { Text, Box } from '../../../components/component-library';
|
||||
|
||||
const sortedCurrencies = availableCurrencies.sort((a, b) => {
|
||||
return a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase());
|
||||
@ -89,7 +93,12 @@ export default class SettingsTab extends PureComponent {
|
||||
this.props;
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[0]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[0]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('currencyConversion')}</span>
|
||||
<span className="settings-page__content-description">
|
||||
@ -111,7 +120,7 @@ export default class SettingsTab extends PureComponent {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -124,7 +133,12 @@ export default class SettingsTab extends PureComponent {
|
||||
const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : '';
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[2]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[2]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span className="settings-page__content-label">
|
||||
{t('currentLanguage')}
|
||||
@ -144,7 +158,7 @@ export default class SettingsTab extends PureComponent {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -153,26 +167,28 @@ export default class SettingsTab extends PureComponent {
|
||||
const { hideZeroBalanceTokens, setHideZeroBalanceTokens } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[5]}
|
||||
data-testid="hide-zero-balance-tokens"
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Row}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
alignItems={AlignItems.center}
|
||||
id="toggle-zero-balance"
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('hideZeroBalanceTokens')}</span>
|
||||
</div>
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={hideZeroBalanceTokens}
|
||||
onToggle={(value) => setHideZeroBalanceTokens(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-page__content-item-col">
|
||||
<ToggleButton
|
||||
value={hideZeroBalanceTokens}
|
||||
onToggle={(value) => setHideZeroBalanceTokens(!value)}
|
||||
offLabel={t('off')}
|
||||
onLabel={t('on')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -189,9 +205,11 @@ export default class SettingsTab extends PureComponent {
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
<Box
|
||||
ref={this.settingsRefs[4]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
id="blockie-optin"
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
@ -275,7 +293,7 @@ export default class SettingsTab extends PureComponent {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -287,7 +305,12 @@ export default class SettingsTab extends PureComponent {
|
||||
useNativeCurrencyAsPrimaryCurrency,
|
||||
} = this.props;
|
||||
return (
|
||||
<div ref={this.settingsRefs[1]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[1]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{t('primaryCurrencySetting')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
@ -334,7 +357,7 @@ export default class SettingsTab extends PureComponent {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -369,7 +392,12 @@ export default class SettingsTab extends PureComponent {
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[3]} className="settings-page__content-row">
|
||||
<Box
|
||||
ref={this.settingsRefs[3]}
|
||||
className="settings-page__content-row"
|
||||
display={Display.Flex}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div className="settings-page__content-item">
|
||||
<span>{this.context.t('theme')}</span>
|
||||
<div className="settings-page__content-description">
|
||||
@ -386,7 +414,7 @@ export default class SettingsTab extends PureComponent {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user