* origin/develop: (60 commits) Ensure that gas for swap tx submitted at same time as approval is in hex (#10135) Fix useTransactionDisplayData unit tests (#10134) Fix network settings Kovan block explorer link (#10117) Use destructured signal (#10115) throw a new wrapped error instead of default one from segment (#10118) @metamask/contract-metadata@1.20.0 (#10116) Use late-bound noop function when disabling console (#10110) Bump @metamask/contract-metadata from 1.19.0 to 1.20.0 (#10104) Remove unnecessary swaps footer space when in dropdown mode (#10100) Tighten up loading indication logic (#10103) Skip reporting of successive persistence failures (#10099) Update `@metamask/controllers` to v5.1.0 (#10096) @metamask/obs-store@5.0.0 (#10092) set last provider when switching to a customRPC (#10084) Fetch swap quote refresh time from API (#10069) Fix `fetch-with-cache` handling of interwoven requests (#10079) Fix 9874 - Improve gas maximum estimation (#10043) Add eth_getProof to safe methods (#10070) fix metametrics option tracking (#10071) Disable console in contentscript (#10040) ...feature/default_network_editable
Mark Stacey
4 years ago
commit
7606353100
@ -1,5 +0,0 @@ |
||||
#!/usr/bin/env bash |
||||
set -x |
||||
|
||||
mkdir -p build-artifacts/yarn-install-har |
||||
mv ./*.har build-artifacts/yarn-install-har/ |
||||
|
After Width: | Height: | Size: 636 B |
|
Before Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,46 @@ |
||||
import { MESSAGE_TYPE } from '../../enums' |
||||
|
||||
/** |
||||
* This RPC method gets background state relevant to the provider. |
||||
* The background sends RPC notifications on state changes, but the provider |
||||
* first requests state on initialization. |
||||
*/ |
||||
|
||||
const getProviderState = { |
||||
methodNames: [MESSAGE_TYPE.GET_PROVIDER_STATE], |
||||
implementation: getProviderStateHandler, |
||||
} |
||||
export default getProviderState |
||||
|
||||
/** |
||||
* @typedef {Object} ProviderStateHandlerResult |
||||
* @property {string} chainId - The current chain ID. |
||||
* @property {boolean} isUnlocked - Whether the extension is unlocked or not. |
||||
* @property {string} networkVersion - The current network ID. |
||||
*/ |
||||
|
||||
/** |
||||
* @typedef {Object} ProviderStateHandlerOptions |
||||
* @property {() => ProviderStateHandlerResult} getProviderState - A function that |
||||
* gets the current provider state. |
||||
*/ |
||||
|
||||
/** |
||||
* @param {import('json-rpc-engine').JsonRpcRequest<[]>} req - The JSON-RPC request object. |
||||
* @param {import('json-rpc-engine').JsonRpcResponse<ProviderStateHandlerResult>} res - The JSON-RPC response object. |
||||
* @param {Function} _next - The json-rpc-engine 'next' callback. |
||||
* @param {Function} end - The json-rpc-engine 'end' callback. |
||||
* @param {ProviderStateHandlerOptions} options |
||||
*/ |
||||
async function getProviderStateHandler( |
||||
req, |
||||
res, |
||||
_next, |
||||
end, |
||||
{ getProviderState: _getProviderState }, |
||||
) { |
||||
res.result = { |
||||
...(await _getProviderState(req.origin)), |
||||
} |
||||
return end() |
||||
} |
||||
@ -1,5 +1,6 @@ |
||||
import logWeb3Usage from './log-web3-usage' |
||||
import getProviderState from './get-provider-state' |
||||
import logWeb3ShimUsage from './log-web3-shim-usage' |
||||
import watchAsset from './watch-asset' |
||||
|
||||
const handlers = [logWeb3Usage, watchAsset] |
||||
const handlers = [getProviderState, logWeb3ShimUsage, watchAsset] |
||||
export default handlers |
||||
|
||||
@ -0,0 +1,57 @@ |
||||
import { MESSAGE_TYPE } from '../../enums' |
||||
|
||||
/** |
||||
* This RPC method is called by the inpage provider whenever it detects the |
||||
* accessing of a non-existent property on our window.web3 shim. |
||||
* We collect this data to understand which sites are breaking due to the |
||||
* removal of our window.web3. |
||||
*/ |
||||
|
||||
const logWeb3ShimUsage = { |
||||
methodNames: [MESSAGE_TYPE.LOG_WEB3_SHIM_USAGE], |
||||
implementation: logWeb3ShimUsageHandler, |
||||
} |
||||
export default logWeb3ShimUsage |
||||
|
||||
/** |
||||
* @typedef {Object} LogWeb3ShimUsageOptions |
||||
* @property {Function} sendMetrics - A function that registers a metrics event. |
||||
* @property {Function} getWeb3ShimUsageState - A function that gets web3 shim |
||||
* usage state for the given origin. |
||||
* @property {Function} setWeb3ShimUsageRecorded - A function that records web3 shim |
||||
* usage for a particular origin. |
||||
*/ |
||||
|
||||
/** |
||||
* @param {import('json-rpc-engine').JsonRpcRequest<unknown>} req - The JSON-RPC request object. |
||||
* @param {import('json-rpc-engine').JsonRpcResponse<true>} res - The JSON-RPC response object. |
||||
* @param {Function} _next - The json-rpc-engine 'next' callback. |
||||
* @param {Function} end - The json-rpc-engine 'end' callback. |
||||
* @param {LogWeb3ShimUsageOptions} options |
||||
*/ |
||||
function logWeb3ShimUsageHandler( |
||||
req, |
||||
res, |
||||
_next, |
||||
end, |
||||
{ sendMetrics, getWeb3ShimUsageState, setWeb3ShimUsageRecorded }, |
||||
) { |
||||
const { origin } = req |
||||
if (getWeb3ShimUsageState(origin) === undefined) { |
||||
setWeb3ShimUsageRecorded(origin) |
||||
|
||||
sendMetrics({ |
||||
event: `Website Accessed window.web3 Shim`, |
||||
category: 'inpage_provider', |
||||
eventContext: { |
||||
referrer: { |
||||
url: origin, |
||||
}, |
||||
}, |
||||
excludeMetaMetricsId: true, |
||||
}) |
||||
} |
||||
|
||||
res.result = true |
||||
return end() |
||||
} |
||||
@ -1,63 +0,0 @@ |
||||
import { MESSAGE_TYPE } from '../../enums' |
||||
|
||||
/** |
||||
* This RPC method is called by our inpage web3 proxy whenever window.web3 is |
||||
* accessed. We're collecting data on window.web3 usage so that we can warn |
||||
* website maintainers, and possibly our users, before we remove window.web3 |
||||
* by November 16, 2020. |
||||
*/ |
||||
|
||||
const logWeb3Usage = { |
||||
methodNames: [MESSAGE_TYPE.LOG_WEB3_USAGE], |
||||
implementation: logWeb3UsageHandler, |
||||
} |
||||
export default logWeb3Usage |
||||
|
||||
const recordedWeb3Usage = {} |
||||
|
||||
/** |
||||
* @typedef {Object} LogWeb3UsageOptions |
||||
* @property {string} origin - The origin of the request. |
||||
* @property {Function} sendMetrics - A function that registers a metrics event. |
||||
*/ |
||||
|
||||
/** |
||||
* @typedef {Object} LogWeb3UsageParam |
||||
* @property {string} action - The action taken (get or set). |
||||
* @property {string} name - The window.web3 property name subject to the action. |
||||
*/ |
||||
|
||||
/** |
||||
* @param {import('json-rpc-engine').JsonRpcRequest<[LogWeb3UsageParam]>} req - The JSON-RPC request object. |
||||
* @param {import('json-rpc-engine').JsonRpcResponse<true>} res - The JSON-RPC response object. |
||||
* @param {Function} _next - The json-rpc-engine 'next' callback. |
||||
* @param {Function} end - The json-rpc-engine 'end' callback. |
||||
* @param {LogWeb3UsageOptions} options |
||||
*/ |
||||
function logWeb3UsageHandler(req, res, _next, end, { origin, sendMetrics }) { |
||||
const { action, path } = req.params[0] |
||||
|
||||
if (!recordedWeb3Usage[origin]) { |
||||
recordedWeb3Usage[origin] = {} |
||||
} |
||||
if (!recordedWeb3Usage[origin][path]) { |
||||
recordedWeb3Usage[origin][path] = true |
||||
|
||||
sendMetrics( |
||||
{ |
||||
event: `Website Used window.web3`, |
||||
category: 'inpage_provider', |
||||
properties: { action, web3Path: path }, |
||||
referrer: { |
||||
url: origin, |
||||
}, |
||||
}, |
||||
{ |
||||
excludeMetaMetricsId: true, |
||||
}, |
||||
) |
||||
} |
||||
|
||||
res.result = true |
||||
return end() |
||||
} |
||||
@ -1,251 +0,0 @@ |
||||
/*global Web3*/ |
||||
|
||||
// TODO:deprecate:2020
|
||||
// Delete this file
|
||||
|
||||
import web3Entitites from './web3-entities.json' |
||||
import 'web3/dist/web3.min' |
||||
|
||||
const shouldLogUsage = ![ |
||||
'docs.metamask.io', |
||||
'metamask.github.io', |
||||
'metamask.io', |
||||
].includes(window.location.hostname) |
||||
|
||||
/** |
||||
* To understand how we arrived at this implementation, please see: |
||||
* https://github.com/ethereum/web3.js/blob/0.20.7/DOCUMENTATION.md
|
||||
*/ |
||||
export default function setupWeb3(log) { |
||||
// export web3 as a global, checking for usage
|
||||
let reloadInProgress = false |
||||
let lastTimeUsed |
||||
let lastSeenNetwork |
||||
let hasBeenWarned = false |
||||
|
||||
const web3 = new Web3(window.ethereum) |
||||
web3.setProvider = function () { |
||||
log.debug('MetaMask - overrode web3.setProvider') |
||||
} |
||||
Object.defineProperty(web3, '__isMetaMaskShim__', { |
||||
value: true, |
||||
enumerable: false, |
||||
configurable: false, |
||||
writable: false, |
||||
}) |
||||
|
||||
Object.defineProperty(window.ethereum, '_web3Ref', { |
||||
enumerable: false, |
||||
writable: true, |
||||
configurable: true, |
||||
value: web3.eth, |
||||
}) |
||||
|
||||
// Setup logging of nested property usage
|
||||
if (shouldLogUsage) { |
||||
// web3 namespaces with common and uncommon dapp actions
|
||||
const includedTopKeys = [ |
||||
'eth', |
||||
'db', |
||||
'shh', |
||||
'net', |
||||
'personal', |
||||
'bzz', |
||||
'version', |
||||
] |
||||
|
||||
// For each top-level property, create appropriate Proxy traps for all of
|
||||
// their properties
|
||||
includedTopKeys.forEach((topKey) => { |
||||
const applyTrapKeys = new Map() |
||||
const getTrapKeys = new Map() |
||||
|
||||
Object.keys(web3[topKey]).forEach((key) => { |
||||
const path = `web3.${topKey}.${key}` |
||||
|
||||
if (web3Entitites[path]) { |
||||
if (web3Entitites[path] === 'function') { |
||||
applyTrapKeys.set(key, path) |
||||
} else { |
||||
getTrapKeys.set(key, path) |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// Create apply traps for function properties
|
||||
for (const [key, path] of applyTrapKeys) { |
||||
web3[topKey][key] = new Proxy(web3[topKey][key], { |
||||
apply: (...params) => { |
||||
try { |
||||
window.ethereum.request({ |
||||
method: 'metamask_logInjectedWeb3Usage', |
||||
params: [ |
||||
{ |
||||
action: 'apply', |
||||
path, |
||||
}, |
||||
], |
||||
}) |
||||
} catch (error) { |
||||
log.debug('Failed to log web3 usage.', error) |
||||
} |
||||
|
||||
// Call function normally
|
||||
return Reflect.apply(...params) |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
// Create get trap for non-function properties
|
||||
web3[topKey] = new Proxy(web3[topKey], { |
||||
get: (web3Prop, key, ...params) => { |
||||
const name = stringifyKey(key) |
||||
|
||||
if (getTrapKeys.has(name)) { |
||||
try { |
||||
window.ethereum.request({ |
||||
method: 'metamask_logInjectedWeb3Usage', |
||||
params: [ |
||||
{ |
||||
action: 'get', |
||||
path: getTrapKeys.get(name), |
||||
}, |
||||
], |
||||
}) |
||||
} catch (error) { |
||||
log.debug('Failed to log web3 usage.', error) |
||||
} |
||||
} |
||||
|
||||
// return value normally
|
||||
return Reflect.get(web3Prop, key, ...params) |
||||
}, |
||||
}) |
||||
}) |
||||
|
||||
const topLevelFunctions = [ |
||||
'isConnected', |
||||
'setProvider', |
||||
'reset', |
||||
'sha3', |
||||
'toHex', |
||||
'toAscii', |
||||
'fromAscii', |
||||
'toDecimal', |
||||
'fromDecimal', |
||||
'fromWei', |
||||
'toWei', |
||||
'toBigNumber', |
||||
'isAddress', |
||||
] |
||||
|
||||
// apply-trap top-level functions
|
||||
topLevelFunctions.forEach((key) => { |
||||
// This type check is probably redundant, but we've been burned before.
|
||||
if (typeof web3[key] === 'function') { |
||||
web3[key] = new Proxy(web3[key], { |
||||
apply: (...params) => { |
||||
try { |
||||
window.ethereum.request({ |
||||
method: 'metamask_logInjectedWeb3Usage', |
||||
params: [ |
||||
{ |
||||
action: 'apply', |
||||
path: `web3.${key}`, |
||||
}, |
||||
], |
||||
}) |
||||
} catch (error) { |
||||
log.debug('Failed to log web3 usage.', error) |
||||
} |
||||
|
||||
// Call function normally
|
||||
return Reflect.apply(...params) |
||||
}, |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const web3Proxy = new Proxy(web3, { |
||||
get: (...params) => { |
||||
// get the time of use
|
||||
lastTimeUsed = Date.now() |
||||
|
||||
// show warning once on web3 access
|
||||
if (!hasBeenWarned) { |
||||
console.warn( |
||||
`MetaMask: We will stop injecting web3 in Q4 2020.\nPlease see this article for more information: https://medium.com/metamask/no-longer-injecting-web3-js-4a899ad6e59e`, |
||||
) |
||||
hasBeenWarned = true |
||||
} |
||||
|
||||
// return value normally
|
||||
return Reflect.get(...params) |
||||
}, |
||||
}) |
||||
|
||||
Object.defineProperty(window, 'web3', { |
||||
enumerable: false, |
||||
writable: true, |
||||
configurable: true, |
||||
value: web3Proxy, |
||||
}) |
||||
log.debug('MetaMask - injected web3') |
||||
|
||||
window.ethereum._publicConfigStore.subscribe((state) => { |
||||
// if the auto refresh on network change is false do not
|
||||
// do anything
|
||||
if (!window.ethereum.autoRefreshOnNetworkChange) { |
||||
return |
||||
} |
||||
|
||||
// if reload in progress, no need to check reload logic
|
||||
if (reloadInProgress) { |
||||
return |
||||
} |
||||
|
||||
const currentNetwork = state.networkVersion |
||||
|
||||
// set the initial network
|
||||
if (!lastSeenNetwork) { |
||||
lastSeenNetwork = currentNetwork |
||||
return |
||||
} |
||||
|
||||
// skip reload logic if web3 not used
|
||||
if (!lastTimeUsed) { |
||||
return |
||||
} |
||||
|
||||
// if network did not change, exit
|
||||
if (currentNetwork === lastSeenNetwork) { |
||||
return |
||||
} |
||||
|
||||
// initiate page reload
|
||||
reloadInProgress = true |
||||
const timeSinceUse = Date.now() - lastTimeUsed |
||||
// if web3 was recently used then delay the reloading of the page
|
||||
if (timeSinceUse > 500) { |
||||
triggerReset() |
||||
} else { |
||||
setTimeout(triggerReset, 500) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
// reload the page
|
||||
function triggerReset() { |
||||
window.location.reload() |
||||
} |
||||
|
||||
/** |
||||
* Returns a "stringified" key. Keys that are already strings are returned |
||||
* unchanged, and any non-string values are returned as "typeof <type>". |
||||
* |
||||
* @param {any} key - The key to stringify |
||||
*/ |
||||
function stringifyKey(key) { |
||||
return typeof key === 'string' ? key : `typeof ${typeof key}` |
||||
} |
||||
@ -1,101 +0,0 @@ |
||||
{ |
||||
"web3.bzz.blockNetworkRead": "function", |
||||
"web3.bzz.download": "function", |
||||
"web3.bzz.get": "function", |
||||
"web3.bzz.getHive": "function", |
||||
"web3.bzz.getInfo": "function", |
||||
"web3.bzz.hive": "TRAP", |
||||
"web3.bzz.info": "TRAP", |
||||
"web3.bzz.modify": "function", |
||||
"web3.bzz.put": "function", |
||||
"web3.bzz.retrieve": "function", |
||||
"web3.bzz.store": "function", |
||||
"web3.bzz.swapEnabled": "function", |
||||
"web3.bzz.syncEnabled": "function", |
||||
"web3.bzz.upload": "function", |
||||
"web3.db.getHex": "function", |
||||
"web3.db.getString": "function", |
||||
"web3.db.putHex": "function", |
||||
"web3.db.putString": "function", |
||||
"web3.eth.accounts": "object", |
||||
"web3.eth.blockNumber": "TRAP", |
||||
"web3.eth.call": "function", |
||||
"web3.eth.coinbase": "object", |
||||
"web3.eth.compile": "object", |
||||
"web3.eth.estimateGas": "function", |
||||
"web3.eth.gasPrice": "TRAP", |
||||
"web3.eth.getAccounts": "function", |
||||
"web3.eth.getBalance": "function", |
||||
"web3.eth.getBlock": "function", |
||||
"web3.eth.getBlockNumber": "function", |
||||
"web3.eth.getBlockTransactionCount": "function", |
||||
"web3.eth.getBlockUncleCount": "function", |
||||
"web3.eth.getCode": "function", |
||||
"web3.eth.getCoinbase": "function", |
||||
"web3.eth.getCompilers": "function", |
||||
"web3.eth.getGasPrice": "function", |
||||
"web3.eth.getHashrate": "function", |
||||
"web3.eth.getMining": "function", |
||||
"web3.eth.getProtocolVersion": "function", |
||||
"web3.eth.getStorageAt": "function", |
||||
"web3.eth.getSyncing": "function", |
||||
"web3.eth.getTransaction": "function", |
||||
"web3.eth.getTransactionCount": "function", |
||||
"web3.eth.getTransactionFromBlock": "function", |
||||
"web3.eth.getTransactionReceipt": "function", |
||||
"web3.eth.getUncle": "function", |
||||
"web3.eth.getWork": "function", |
||||
"web3.eth.hashrate": "TRAP", |
||||
"web3.eth.iban": "function", |
||||
"web3.eth.mining": "TRAP", |
||||
"web3.eth.protocolVersion": "TRAP", |
||||
"web3.eth.sendIBANTransaction": "function", |
||||
"web3.eth.sendRawTransaction": "function", |
||||
"web3.eth.sendTransaction": "function", |
||||
"web3.eth.sign": "function", |
||||
"web3.eth.signTransaction": "function", |
||||
"web3.eth.submitWork": "function", |
||||
"web3.eth.syncing": "TRAP", |
||||
"web3.net.getListening": "function", |
||||
"web3.net.getPeerCount": "function", |
||||
"web3.net.listening": "TRAP", |
||||
"web3.net.peerCount": "TRAP", |
||||
"web3.personal.ecRecover": "function", |
||||
"web3.personal.getListAccounts": "function", |
||||
"web3.personal.importRawKey": "function", |
||||
"web3.personal.listAccounts": "TRAP", |
||||
"web3.personal.lockAccount": "function", |
||||
"web3.personal.newAccount": "function", |
||||
"web3.personal.sendTransaction": "function", |
||||
"web3.personal.sign": "function", |
||||
"web3.personal.unlockAccount": "function", |
||||
"web3.providers.HttpProvider": "function", |
||||
"web3.providers.IpcProvider": "function", |
||||
"web3.shh.addPrivateKey": "function", |
||||
"web3.shh.addSymKey": "function", |
||||
"web3.shh.deleteKeyPair": "function", |
||||
"web3.shh.deleteSymKey": "function", |
||||
"web3.shh.generateSymKeyFromPassword": "function", |
||||
"web3.shh.getPrivateKey": "function", |
||||
"web3.shh.getPublicKey": "function", |
||||
"web3.shh.getSymKey": "function", |
||||
"web3.shh.hasKeyPair": "function", |
||||
"web3.shh.hasSymKey": "function", |
||||
"web3.shh.info": "function", |
||||
"web3.shh.markTrustedPeer": "function", |
||||
"web3.shh.newKeyPair": "function", |
||||
"web3.shh.newSymKey": "function", |
||||
"web3.shh.post": "function", |
||||
"web3.shh.setMaxMessageSize": "function", |
||||
"web3.shh.setMinPoW": "function", |
||||
"web3.shh.version": "function", |
||||
"web3.version.api": "string", |
||||
"web3.version.ethereum": "TRAP", |
||||
"web3.version.getEthereum": "function", |
||||
"web3.version.getNetwork": "function", |
||||
"web3.version.getNode": "function", |
||||
"web3.version.getWhisper": "function", |
||||
"web3.version.network": "string", |
||||
"web3.version.node": "TRAP", |
||||
"web3.version.whisper": "TRAP" |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
export const ALERT_TYPES = { |
||||
unconnectedAccount: 'unconnectedAccount', |
||||
web3ShimUsage: 'web3ShimUsage', |
||||
invalidCustomNetwork: 'invalidCustomNetwork', |
||||
} |
||||
|
||||
/** |
||||
* Alerts that can be enabled or disabled by the user. |
||||
*/ |
||||
export const TOGGLEABLE_ALERT_TYPES = [ |
||||
ALERT_TYPES.unconnectedAccount, |
||||
ALERT_TYPES.web3ShimUsage, |
||||
] |
||||
|
||||
export const WEB3_SHIM_USAGE_ALERT_STATES = { |
||||
RECORDED: 1, |
||||
DISMISSED: 2, |
||||
} |
||||
@ -1,101 +1,105 @@ |
||||
import React, { PureComponent } from 'react' |
||||
import React, { useState } from 'react' |
||||
import classnames from 'classnames' |
||||
import { Tooltip as ReactTippy } from 'react-tippy' |
||||
import PropTypes from 'prop-types' |
||||
import Button from '../../ui/button' |
||||
import Checkbox from '../../ui/check-box' |
||||
import Tooltip from '../../ui/tooltip' |
||||
|
||||
export default class HomeNotification extends PureComponent { |
||||
static contextTypes = { |
||||
metricsEvent: PropTypes.func, |
||||
} |
||||
const HomeNotification = ({ |
||||
acceptText, |
||||
checkboxText, |
||||
checkboxTooltipText, |
||||
classNames = [], |
||||
descriptionText, |
||||
ignoreText, |
||||
infoText, |
||||
onAccept, |
||||
onIgnore, |
||||
}) => { |
||||
const [checkboxState, setCheckBoxState] = useState(false) |
||||
|
||||
static defaultProps = { |
||||
onAccept: null, |
||||
ignoreText: null, |
||||
onIgnore: null, |
||||
infoText: null, |
||||
} |
||||
const checkboxElement = checkboxText && ( |
||||
<Checkbox |
||||
id="homeNotification_checkbox" |
||||
checked={checkboxState} |
||||
className="home-notification__checkbox" |
||||
onClick={() => setCheckBoxState((checked) => !checked)} |
||||
/> |
||||
) |
||||
|
||||
static propTypes = { |
||||
acceptText: PropTypes.node.isRequired, |
||||
onAccept: PropTypes.func, |
||||
ignoreText: PropTypes.node, |
||||
onIgnore: PropTypes.func, |
||||
descriptionText: PropTypes.node.isRequired, |
||||
infoText: PropTypes.node, |
||||
classNames: PropTypes.array, |
||||
} |
||||
|
||||
handleAccept = () => { |
||||
this.props.onAccept() |
||||
} |
||||
|
||||
handleIgnore = () => { |
||||
this.props.onIgnore() |
||||
} |
||||
|
||||
render() { |
||||
const { |
||||
descriptionText, |
||||
acceptText, |
||||
onAccept, |
||||
ignoreText, |
||||
onIgnore, |
||||
infoText, |
||||
classNames = [], |
||||
} = this.props |
||||
|
||||
return ( |
||||
<div className={classnames('home-notification', ...classNames)}> |
||||
<div className="home-notification__header"> |
||||
<div className="home-notification__header-container"> |
||||
<img |
||||
className="home-notification__icon" |
||||
alt="" |
||||
src="images/icons/connect.svg" |
||||
/> |
||||
<div className="home-notification__text">{descriptionText}</div> |
||||
</div> |
||||
{infoText ? ( |
||||
<ReactTippy |
||||
style={{ |
||||
display: 'flex', |
||||
}} |
||||
html={ |
||||
<p className="home-notification-tooltip__content">{infoText}</p> |
||||
} |
||||
offset={-36} |
||||
distance={36} |
||||
animation="none" |
||||
position="top" |
||||
arrow |
||||
theme="tippy-tooltip-home" |
||||
> |
||||
<img alt="" src="images/icons/info.svg" /> |
||||
</ReactTippy> |
||||
) : null} |
||||
return ( |
||||
<div className={classnames('home-notification', ...classNames)}> |
||||
<div className="home-notification__content"> |
||||
<div className="home-notification__content-container"> |
||||
<div className="home-notification__text">{descriptionText}</div> |
||||
</div> |
||||
<div className="home-notification__buttons"> |
||||
{onAccept && acceptText ? ( |
||||
<Button |
||||
type="primary" |
||||
className="home-notification__accept-button" |
||||
onClick={this.handleAccept} |
||||
> |
||||
{acceptText} |
||||
</Button> |
||||
) : null} |
||||
{onIgnore && ignoreText ? ( |
||||
<Button |
||||
type="secondary" |
||||
className="home-notification__ignore-button" |
||||
onClick={this.handleIgnore} |
||||
{infoText ? ( |
||||
<Tooltip |
||||
position="top" |
||||
title={infoText} |
||||
wrapperClassName="home-notification__tooltip-wrapper" |
||||
> |
||||
<i className="fa fa-info-circle" /> |
||||
</Tooltip> |
||||
) : null} |
||||
</div> |
||||
<div className="home-notification__buttons"> |
||||
{onAccept && acceptText ? ( |
||||
<Button |
||||
type="primary" |
||||
className="home-notification__accept-button" |
||||
onClick={onAccept} |
||||
> |
||||
{acceptText} |
||||
</Button> |
||||
) : null} |
||||
{onIgnore && ignoreText ? ( |
||||
<Button |
||||
type="secondary" |
||||
className="home-notification__ignore-button" |
||||
// Some onIgnore handlers use the checkboxState to determine whether
|
||||
// to disable the notification
|
||||
onClick={() => onIgnore(checkboxState)} |
||||
> |
||||
{ignoreText} |
||||
</Button> |
||||
) : null} |
||||
{checkboxText ? ( |
||||
<div className="home-notification__checkbox-wrapper"> |
||||
{checkboxTooltipText ? ( |
||||
<Tooltip |
||||
position="top" |
||||
title={checkboxTooltipText} |
||||
wrapperClassName="home-notification__checkbox-label-tooltip" |
||||
> |
||||
{checkboxElement} |
||||
</Tooltip> |
||||
) : ( |
||||
checkboxElement |
||||
)} |
||||
<label |
||||
className="home-notification__checkbox-label" |
||||
htmlFor="homeNotification_checkbox" |
||||
> |
||||
{ignoreText} |
||||
</Button> |
||||
) : null} |
||||
</div> |
||||
{checkboxText} |
||||
</label> |
||||
</div> |
||||
) : null} |
||||
</div> |
||||
) |
||||
} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
HomeNotification.propTypes = { |
||||
acceptText: PropTypes.node, |
||||
checkboxText: PropTypes.node, |
||||
checkboxTooltipText: PropTypes.node, |
||||
classNames: PropTypes.array, |
||||
descriptionText: PropTypes.node.isRequired, |
||||
ignoreText: PropTypes.node, |
||||
infoText: PropTypes.node, |
||||
onAccept: PropTypes.func, |
||||
onIgnore: PropTypes.func, |
||||
} |
||||
|
||||
export default HomeNotification |
||||
|
||||
@ -0,0 +1,54 @@ |
||||
import React from 'react' |
||||
|
||||
export default function PigIcon() { |
||||
return ( |
||||
<svg |
||||
width="31" |
||||
height="44" |
||||
viewBox="0 0 31 44" |
||||
fill="none" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
d="M1.86541 24.7218L1.79469 24.7925C1.02602 25.5611 0.602468 26.5834 0.602936 27.6702L1.86541 24.7218ZM1.86541 24.7218L1.93612 24.7925M1.86541 24.7218L1.93612 24.7925M1.93612 24.7925L2.34305 25.1994L2.74999 25.6063L2.82067 25.677M1.93612 24.7925L2.82067 25.677M2.82067 25.677L2.75002 25.7477M2.82067 25.677L2.75002 25.7477M2.75002 25.7477C2.23672 26.2615 1.95374 26.944 1.95374 27.6702C1.95374 28.3964 2.23672 29.0789 2.75002 29.5927L2.67928 29.6633L2.74995 29.5926C3.16102 30.0032 3.67296 30.2457 4.20842 30.3365M2.75002 25.7477L4.20842 30.3365M4.20842 30.3365V29.3801C4.20842 28.7473 4.29699 28.1236 4.44701 27.5174C5.26558 24.2082 8.15856 21.4247 11.5089 21.0552L11.5089 21.0551L11.5122 21.0549L11.5232 21.054C11.5234 21.054 11.5236 21.054 11.5238 21.054C14.4515 20.7946 17.4246 20.7241 20.3655 20.8456L20.3662 20.8456C20.4027 20.8474 20.4448 20.8518 20.4826 20.8558C20.4848 20.856 20.487 20.8562 20.4891 20.8564C21.3008 19.8016 22.4769 19.1281 23.7918 19.1281H24.3672H24.4672V19.2281V22.4872C25.6604 23.4555 26.6321 24.7942 27.2053 26.3565C27.6693 26.3858 28.1337 26.418 28.5993 26.4518L28.6 26.4519C29.8669 26.5531 30.8947 27.6691 30.8947 28.9423V33.532C30.8947 34.8021 29.8707 35.9275 28.6044 36.0438L28.6037 36.0439C28.0461 36.0912 27.4876 36.1351 26.9282 36.1755C26.2881 37.557 25.3323 38.7259 24.2059 39.5696V40.9581C24.2059 42.0522 23.3155 42.9421 22.2215 42.9421H21.2956C20.2321 42.9421 19.3615 42.1011 19.3137 41.0491C18.732 41.0644 18.149 41.0745 17.5651 41.0745C16.1032 41.0745 14.6374 41.0272 13.1767 40.9337V40.9581C13.1767 42.0522 12.2863 42.9421 11.1922 42.9421H10.2664C9.17234 42.9421 8.28244 42.0522 8.28244 40.9581V39.6399C5.89461 38.1267 4.20795 35.3776 4.20842 32.4825V31.7103C3.32631 31.6097 2.47056 31.2229 1.79516 30.5475C1.02648 29.7792 0.602947 28.757 0.602936 27.6702L4.20842 30.3365ZM11.5108 40.8072L11.5108 40.8072L11.5084 40.8069C10.8614 40.7357 10.2331 40.5697 9.63278 40.3321V40.9581C9.63278 41.307 9.91701 41.5913 10.2659 41.5913H11.1918C11.5412 41.5913 11.8254 41.307 11.8254 40.9581V40.8312C11.7948 40.8289 11.7636 40.8266 11.7324 40.8243C11.6578 40.8189 11.5824 40.8133 11.5108 40.8072ZM26.0661 27.2019C25.7283 26.1136 25.1685 25.1424 24.4672 24.3492V25.3928V25.4928H24.3672H23.2164H23.1164V25.3928V20.5711C21.7447 20.9526 20.6961 22.4798 20.6961 24.3256C20.6961 24.6853 20.7363 25.0339 20.8135 25.3705L20.8416 25.4928H20.716H19.5442H19.4607L19.4458 25.4107C19.3819 25.0577 19.3458 24.6961 19.3458 24.3256C19.3458 23.5585 19.4925 22.8324 19.7487 22.1769C19.0205 22.1527 18.291 22.138 17.5604 22.138C15.5864 22.138 13.6074 22.2251 11.6502 22.3983C10.0333 22.5788 8.51004 23.482 7.38991 24.765C6.26962 26.0482 5.55899 27.704 5.55923 29.3796V32.4825V32.5581C5.58001 34.2087 6.28668 35.835 7.38969 37.0991C8.5094 38.3822 10.031 39.2847 11.6432 39.4628C14.5132 39.7172 17.428 39.7865 20.3054 39.6673C22.5772 39.5684 24.8105 37.8103 25.8469 35.2745L25.8469 35.2744L25.9827 34.9431L26.0063 34.8856L26.0684 34.8813L26.4258 34.8565L26.4258 34.8565C27.1144 34.809 27.8016 34.7558 28.4842 34.698C29.0557 34.6452 29.5434 34.1087 29.5434 33.5316V28.9419C29.5434 28.3691 29.0595 27.8434 28.4958 27.7984C27.8886 27.7541 27.2797 27.713 26.6703 27.6762L26.6702 27.6762L26.2735 27.6519L26.2046 27.6477L26.1842 27.5818L26.0661 27.2019L26.0661 27.2019ZM22.8546 40.9581V40.3811C22.1527 40.7107 21.4138 40.9209 20.6629 40.9915C20.6803 41.325 20.9574 41.5913 21.2952 41.5913H22.221C22.5705 41.5913 22.8546 41.307 22.8546 40.9581Z" |
||||
fill="#037DD6" |
||||
stroke="#037DD6" |
||||
strokeWidth="0.2" |
||||
/> |
||||
<path |
||||
d="M15.4018 19.837C12.3221 19.837 9.81661 17.332 9.81661 14.2523C9.81661 11.1726 12.3217 8.66703 15.4018 8.66703C18.4811 8.66703 20.9866 11.1721 20.9866 14.2523C20.9866 17.3315 18.4816 19.837 15.4018 19.837ZM15.4018 10.0174C13.0673 10.0174 11.1674 11.9172 11.1674 14.2518C11.1674 16.5864 13.0673 18.4862 15.4018 18.4862C17.7364 18.4862 19.6358 16.5868 19.6358 14.2518C19.6358 11.9172 17.7369 10.0174 15.4018 10.0174Z" |
||||
fill="#037DD6" |
||||
stroke="#037DD6" |
||||
strokeWidth="0.2" |
||||
/> |
||||
<path |
||||
d="M15.4022 17.8575C13.4136 17.8575 11.7957 16.24 11.7957 14.2514C11.7957 12.2627 13.4136 10.6453 15.4022 10.6453C17.3909 10.6453 19.0083 12.2632 19.0083 14.2514C19.0083 16.2395 17.3909 17.8575 15.4022 17.8575ZM15.4022 11.9961C14.1583 11.9961 13.1465 13.0079 13.1465 14.2519C13.1465 15.4958 14.1582 16.5071 15.4022 16.5071C16.6458 16.5071 17.6575 15.4954 17.6575 14.2519C17.6575 13.0083 16.6457 11.9961 15.4022 11.9961Z" |
||||
fill="#037DD6" |
||||
stroke="#037DD6" |
||||
strokeWidth="0.2" |
||||
/> |
||||
<path |
||||
d="M14.6099 0.842163V0.742163H14.7099H15.8607H15.9607V0.842163V7.35593V7.45593H15.8607H14.7099H14.6099V7.35593V0.842163Z" |
||||
fill="#037DD6" |
||||
stroke="#037DD6" |
||||
strokeWidth="0.2" |
||||
/> |
||||
<path |
||||
d="M17.2175 4.59747V4.49747H17.3175H18.4683H18.5683V4.59747V8.34996V8.44996H18.4683H17.3175H17.2175V8.34996V4.59747Z" |
||||
fill="#037DD6" |
||||
stroke="#037DD6" |
||||
strokeWidth="0.2" |
||||
/> |
||||
<path |
||||
d="M24.4364 28.7993L24.4362 28.7993C24.3635 28.7716 24.2949 28.7581 24.2283 28.7581C23.9048 28.7581 23.6419 29.0179 23.6368 29.3397L23.6378 29.3474L23.6397 29.3614C23.6411 29.372 23.6431 29.3873 23.6447 29.4046L23.6448 29.4054C23.6735 29.7092 23.925 29.9417 24.2283 29.9417C24.5551 29.9417 24.8198 29.6769 24.8198 29.3501C24.8198 29.1005 24.6631 28.8854 24.4364 28.7993ZM23.6367 29.3501C23.6367 29.35 23.6367 29.3499 23.6367 29.3497V29.3501Z" |
||||
fill="#037DD6" |
||||
stroke="#037DD6" |
||||
/> |
||||
<path |
||||
d="M17.967 23.5994H12.8346C12.61 23.5994 12.4253 23.7836 12.4251 24.0094V24.1723C12.4251 24.3974 12.6091 24.5814 12.8342 24.5814H17.967C18.1924 24.5814 18.3766 24.397 18.3766 24.1723V24.009C18.3766 23.7836 18.1923 23.5994 17.967 23.5994Z" |
||||
fill="#037DD6" |
||||
stroke="#037DD6" |
||||
/> |
||||
</svg> |
||||
) |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue