Feature: replace web3connect with onboardjs (#456)
* init onboard.js * dep bump * initial replacement of web3connect with onboard.js * use averta font in the modal * update onboard.js, add handlers for session murder * update preferred wallets * implement reconnecting to injected provider * fix duplicate wallet disconnected notification * update onboard dep * onboardjs fixes * test onboard js with hw * add https to rpcUrl * Added saved wallet and transactions validation * made Transactions validation * bnc-onboard version updated * Fix lock/unlock problem * bump onboardjs version * fixed material-ui lab version * Update onboard version * Added hw wallets integration * Updated preferred wallets * Add ledger modal * Merge with dev * Update onboard * BUmp new version of onboardjs * Added some logs * Added some logs * Update onboardjs version fix ledger connection * Update onboardjs version fix ledger connection * Bump new onboardjs version * Update new version * Made improvements * yarn.lock regenration * remove https=true * Remove comments and added some improvements * Updated package.json dep * Removed unused deps * Remove web3connect dep Co-authored-by: lukasschor <lukas.schor@gnosis.pm> Co-authored-by: Mati Dastugue <matiasdastugue@gmail.com>
This commit is contained in:
Mikhail Mikheev
GitHub
parent
b084c80a42
commit
8adf6c266e
85
package.json
85
package.json
|
|
@ -46,21 +46,17 @@
|
|||
"@material-ui/core": "4.8.0",
|
||||
"@material-ui/icons": "4.5.1",
|
||||
"@material-ui/lab": "4.0.0-alpha.39",
|
||||
"@portis/web3": "^2.0.0-beta.45",
|
||||
"@testing-library/jest-dom": "4.2.4",
|
||||
"@toruslabs/torus-embed": "0.2.10",
|
||||
"@walletconnect/web3-provider": "^1.0.0-beta.37",
|
||||
"@testing-library/jest-dom": "5.0.0",
|
||||
"@welldone-software/why-did-you-render": "3.4.1",
|
||||
"authereum": "^0.0.4-beta.83",
|
||||
"axios": "0.19.0",
|
||||
"bignumber.js": "9.0.0",
|
||||
"bnc-onboard": "1.3.0",
|
||||
"connected-react-router": "6.6.1",
|
||||
"currency-flags": "^2.1.1",
|
||||
"date-fns": "2.8.1",
|
||||
"date-fns": "2.9.0",
|
||||
"dotenv": "^8.2.0",
|
||||
"ethereum-ens": "0.8.0",
|
||||
"final-form": "4.18.6",
|
||||
"fortmatic": "^1.0.1",
|
||||
"history": "4.10.1",
|
||||
"immortal-db": "^1.0.2",
|
||||
"immutable": "^4.0.0-rc.9",
|
||||
|
|
@ -71,7 +67,7 @@
|
|||
"optimize-css-assets-webpack-plugin": "5.0.3",
|
||||
"polished": "^3.4.2",
|
||||
"qrcode.react": "1.0.0",
|
||||
"query-string": "6.9.0",
|
||||
"query-string": "6.10.1",
|
||||
"react": "16.12.0",
|
||||
"react-dev-utils": "^10.0.0",
|
||||
"react-dom": "16.12.0",
|
||||
|
|
@ -84,42 +80,41 @@
|
|||
"react-router-dom": "5.1.2",
|
||||
"react-window": "^1.8.5",
|
||||
"recompose": "^0.30.0",
|
||||
"redux": "4.0.4",
|
||||
"redux": "4.0.5",
|
||||
"redux-actions": "^2.6.5",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"reselect": "^4.0.0",
|
||||
"semver": "^7.1.1",
|
||||
"styled-components": "^5.0.1",
|
||||
"web3": "1.2.4",
|
||||
"web3connect": "1.0.0-beta.25"
|
||||
"web3": "1.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "7.7.5",
|
||||
"@babel/core": "7.7.5",
|
||||
"@babel/plugin-proposal-class-properties": "7.7.4",
|
||||
"@babel/plugin-proposal-decorators": "7.7.4",
|
||||
"@babel/plugin-proposal-do-expressions": "7.7.4",
|
||||
"@babel/plugin-proposal-export-default-from": "7.7.4",
|
||||
"@babel/plugin-proposal-export-namespace-from": "7.7.4",
|
||||
"@babel/plugin-proposal-function-bind": "7.7.4",
|
||||
"@babel/plugin-proposal-function-sent": "7.7.4",
|
||||
"@babel/plugin-proposal-json-strings": "7.7.4",
|
||||
"@babel/plugin-proposal-logical-assignment-operators": "7.7.4",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4",
|
||||
"@babel/plugin-proposal-numeric-separator": "7.7.4",
|
||||
"@babel/plugin-proposal-optional-chaining": "7.7.5",
|
||||
"@babel/plugin-proposal-pipeline-operator": "7.7.4",
|
||||
"@babel/plugin-proposal-throw-expressions": "7.7.4",
|
||||
"@babel/plugin-syntax-dynamic-import": "7.7.4",
|
||||
"@babel/plugin-syntax-import-meta": "7.7.4",
|
||||
"@babel/plugin-transform-member-expression-literals": "7.7.4",
|
||||
"@babel/plugin-transform-property-literals": "7.7.4",
|
||||
"@babel/polyfill": "7.7.0",
|
||||
"@babel/preset-env": "7.7.6",
|
||||
"@babel/preset-flow": "7.7.4",
|
||||
"@babel/preset-react": "7.7.4",
|
||||
"@babel/cli": "7.8.3",
|
||||
"@babel/core": "7.8.3",
|
||||
"@babel/plugin-proposal-class-properties": "7.8.3",
|
||||
"@babel/plugin-proposal-decorators": "7.8.3",
|
||||
"@babel/plugin-proposal-do-expressions": "7.8.3",
|
||||
"@babel/plugin-proposal-export-default-from": "7.8.3",
|
||||
"@babel/plugin-proposal-export-namespace-from": "7.8.3",
|
||||
"@babel/plugin-proposal-function-bind": "7.8.3",
|
||||
"@babel/plugin-proposal-function-sent": "7.8.3",
|
||||
"@babel/plugin-proposal-json-strings": "7.8.3",
|
||||
"@babel/plugin-proposal-logical-assignment-operators": "7.8.3",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
|
||||
"@babel/plugin-proposal-numeric-separator": "7.8.3",
|
||||
"@babel/plugin-proposal-optional-chaining": "7.8.3",
|
||||
"@babel/plugin-proposal-pipeline-operator": "7.8.3",
|
||||
"@babel/plugin-proposal-throw-expressions": "7.8.3",
|
||||
"@babel/plugin-syntax-dynamic-import": "7.8.3",
|
||||
"@babel/plugin-syntax-import-meta": "7.8.3",
|
||||
"@babel/plugin-transform-member-expression-literals": "7.8.3",
|
||||
"@babel/plugin-transform-property-literals": "7.8.3",
|
||||
"@babel/polyfill": "7.8.3",
|
||||
"@babel/preset-env": "7.8.3",
|
||||
"@babel/preset-flow": "7.8.3",
|
||||
"@babel/preset-react": "7.8.3",
|
||||
"@testing-library/react": "9.4.0",
|
||||
"autoprefixer": "9.7.3",
|
||||
"autoprefixer": "9.7.4",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.3",
|
||||
"babel-jest": "24.9.0",
|
||||
|
|
@ -129,7 +124,7 @@
|
|||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"classnames": "^2.2.6",
|
||||
"css-loader": "3.4.0",
|
||||
"css-loader": "3.4.2",
|
||||
"detect-port": "^1.3.0",
|
||||
"dotenv-expand": "^5.1.0",
|
||||
"eslint": "^6.8.0",
|
||||
|
|
@ -143,7 +138,7 @@
|
|||
"ethereumjs-abi": "0.6.8",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"file-loader": "5.0.2",
|
||||
"flow-bin": "0.114.0",
|
||||
"flow-bin": "0.116.1",
|
||||
"fs-extra": "8.1.0",
|
||||
"html-loader": "^0.5.5",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
|
|
@ -151,22 +146,22 @@
|
|||
"jest": "24.9.0",
|
||||
"jest-dom": "4.0.0",
|
||||
"json-loader": "^0.5.7",
|
||||
"mini-css-extract-plugin": "0.8.1",
|
||||
"mini-css-extract-plugin": "0.9.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-mixins": "6.2.3",
|
||||
"postcss-simple-vars": "^5.0.2",
|
||||
"prettier": "^1.19.1",
|
||||
"run-with-testrpc": "0.3.1",
|
||||
"style-loader": "1.0.2",
|
||||
"terser-webpack-plugin": "2.3.1",
|
||||
"truffle": "5.1.4",
|
||||
"style-loader": "1.1.3",
|
||||
"terser-webpack-plugin": "2.3.2",
|
||||
"truffle": "5.1.9",
|
||||
"truffle-contract": "4.0.31",
|
||||
"truffle-solidity-loader": "0.1.32",
|
||||
"url-loader": "3.0.0",
|
||||
"webpack": "4.41.3",
|
||||
"webpack": "4.41.5",
|
||||
"webpack-bundle-analyzer": "3.6.0",
|
||||
"webpack-cli": "3.3.10",
|
||||
"webpack-dev-server": "3.9.0",
|
||||
"webpack-dev-server": "3.10.1",
|
||||
"webpack-manifest-plugin": "2.2.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ const Text = styled.span`
|
|||
|
||||
const IconText = ({ iconUrl, text }: { iconUrl: string, text: string }) => (
|
||||
<Wrapper>
|
||||
<Icon src={iconUrl} alt={text} />
|
||||
<Icon alt={text} src={iconUrl} />
|
||||
<Text>{text}</Text>
|
||||
</Wrapper>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,69 +1,99 @@
|
|||
// @flow
|
||||
import Portis from '@portis/web3'
|
||||
import Torus from '@toruslabs/torus-embed'
|
||||
import WalletConnectProvider from '@walletconnect/web3-provider'
|
||||
import Authereum from 'authereum'
|
||||
import Fortmatic from 'fortmatic'
|
||||
import Onboard from 'bnc-onboard'
|
||||
import React from 'react'
|
||||
import Web3Connect from 'web3connect'
|
||||
|
||||
import Button from '~/components/layout/Button'
|
||||
import { getNetwork } from '~/config'
|
||||
import { fetchProvider, removeProvider } from '~/logic/wallets/store/actions'
|
||||
import { getNetworkId } from '~/config'
|
||||
import { getWeb3, setWeb3 } from '~/logic/wallets/getWeb3'
|
||||
import { fetchProvider } from '~/logic/wallets/store/actions'
|
||||
import transactionDataCheck from '~/logic/wallets/transactionDataCheck'
|
||||
import { store } from '~/store'
|
||||
|
||||
const isMainnet = process.env.REACT_APP_NETWORK === 'mainnet'
|
||||
|
||||
const BLOCKNATIVE_API_KEY = isMainnet ? process.env.REACT_APP_BLOCKNATIVE_KEY : '7fbb9cee-7e97-4436-8770-8b29a9a8814c'
|
||||
const PORTIS_DAPP_ID = isMainnet ? process.env.REACT_APP_PORTIS_ID : '852b763d-f28b-4463-80cb-846d7ec5806b'
|
||||
// const SQUARELINK_CLIENT_ID = isMainnet ? process.env.REACT_APP_SQUARELINK_ID : '46ce08fe50913cfa1b78'
|
||||
const FORTMATIC_API_KEY = isMainnet ? process.env.REACT_APP_FORTMATIC_KEY : 'pk_test_CAD437AA29BE0A40'
|
||||
|
||||
export const web3Connect = new Web3Connect.Core({
|
||||
network: getNetwork().toLowerCase(),
|
||||
providerOptions: {
|
||||
walletconnect: {
|
||||
package: WalletConnectProvider,
|
||||
options: {
|
||||
infuraId: process.env.REACT_APP_INFURA_TOKEN,
|
||||
},
|
||||
const wallets = [
|
||||
{ walletName: 'metamask', preferred: true },
|
||||
{
|
||||
walletName: 'walletConnect',
|
||||
preferred: true,
|
||||
infuraKey: process.env.REACT_APP_INFURA_TOKEN,
|
||||
},
|
||||
{
|
||||
walletName: 'trezor',
|
||||
appUrl: 'gnosis-safe.io',
|
||||
preferred: true,
|
||||
email: 'safe@gnosis.io',
|
||||
rpcUrl: 'https://rinkeby.infura.io/v3/b42c928da8fd4c1f90374b18aa9ac6ba',
|
||||
},
|
||||
{
|
||||
walletName: 'ledger',
|
||||
preferred: true,
|
||||
rpcUrl: 'https://rinkeby.infura.io/v3/b42c928da8fd4c1f90374b18aa9ac6ba',
|
||||
},
|
||||
{ walletName: 'trust', preferred: true },
|
||||
{ walletName: 'dapper' },
|
||||
{
|
||||
walletName: 'fortmatic',
|
||||
apiKey: FORTMATIC_API_KEY,
|
||||
},
|
||||
{
|
||||
walletName: 'portis',
|
||||
apiKey: PORTIS_DAPP_ID,
|
||||
label: 'Login with Email',
|
||||
},
|
||||
{ walletName: 'authereum' },
|
||||
{ walletName: 'coinbase' },
|
||||
{ walletName: 'opera' },
|
||||
{ walletName: 'operaTouch' },
|
||||
]
|
||||
|
||||
let lastUsedAddress = ''
|
||||
let providerName
|
||||
|
||||
export const onboard = new Onboard({
|
||||
dappId: BLOCKNATIVE_API_KEY,
|
||||
networkId: getNetworkId(),
|
||||
subscriptions: {
|
||||
wallet: wallet => {
|
||||
if (wallet.provider) {
|
||||
// this function will intialize web3 and store it somewhere available throughout the dapp and
|
||||
// can also instantiate your contracts with the web3 instance
|
||||
setWeb3(wallet.provider)
|
||||
providerName = wallet.name
|
||||
}
|
||||
},
|
||||
portis: {
|
||||
package: Portis,
|
||||
options: {
|
||||
id: PORTIS_DAPP_ID,
|
||||
},
|
||||
},
|
||||
fortmatic: {
|
||||
package: Fortmatic,
|
||||
options: {
|
||||
key: FORTMATIC_API_KEY,
|
||||
},
|
||||
},
|
||||
torus: {
|
||||
package: Torus,
|
||||
options: {
|
||||
enableLogging: false,
|
||||
buttonPosition: 'bottom-left',
|
||||
buildEnv: process.env.NODE_ENV,
|
||||
showTorusButton: true,
|
||||
},
|
||||
},
|
||||
authereum: {
|
||||
package: Authereum,
|
||||
options: {},
|
||||
address: address => {
|
||||
if (!lastUsedAddress && address) {
|
||||
lastUsedAddress = address
|
||||
store.dispatch(fetchProvider(providerName))
|
||||
}
|
||||
|
||||
// we don't have an unsubscribe event so we rely on this
|
||||
if (!address && lastUsedAddress) {
|
||||
lastUsedAddress = ''
|
||||
providerName = undefined
|
||||
}
|
||||
},
|
||||
},
|
||||
walletSelect: {
|
||||
wallets,
|
||||
},
|
||||
walletCheck: [{ checkName: 'connect' }, transactionDataCheck(), { checkName: 'network' }, { checkName: 'accounts' }],
|
||||
})
|
||||
|
||||
web3Connect.on('connect', (provider: any) => {
|
||||
if (provider) {
|
||||
store.dispatch(fetchProvider(provider))
|
||||
}
|
||||
})
|
||||
|
||||
web3Connect.on('disconnect', () => {
|
||||
store.dispatch(removeProvider())
|
||||
})
|
||||
export const onboardUser = async () => {
|
||||
// before calling walletSelect you want to check if web3 has been instantiated
|
||||
// which indicates that a wallet has already been selected
|
||||
// and web3 has been instantiated with that provider
|
||||
const web3 = getWeb3()
|
||||
const walletSelected = web3 ? true : await onboard.walletSelect()
|
||||
return walletSelected && onboard.walletCheck()
|
||||
}
|
||||
|
||||
type Props = {
|
||||
enqueueSnackbar: Function,
|
||||
|
|
@ -74,8 +104,9 @@ const ConnectButton = (props: Props) => (
|
|||
<Button
|
||||
color="primary"
|
||||
minWidth={140}
|
||||
onClick={() => {
|
||||
web3Connect.toggleModal()
|
||||
onClick={async () => {
|
||||
await onboard.walletSelect()
|
||||
await onboard.walletCheck()
|
||||
}}
|
||||
variant="contained"
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import ProviderAccessible from './components/ProviderInfo/ProviderAccessible'
|
|||
import ProviderDisconnected from './components/ProviderInfo/ProviderDisconnected'
|
||||
import selector, { type SelectorProps } from './selector'
|
||||
|
||||
import { web3Connect } from '~/components/ConnectButton'
|
||||
import { onboard } from '~/components/ConnectButton'
|
||||
import { NOTIFICATIONS, showSnackbar } from '~/logic/notifications'
|
||||
import { INJECTED_PROVIDERS } from '~/logic/wallets/getWeb3'
|
||||
import { loadLastUsedProvider } from '~/logic/wallets/store/middlewares/providerWatcher'
|
||||
|
|
@ -38,8 +38,11 @@ class HeaderComponent extends React.PureComponent<Props, State> {
|
|||
|
||||
async componentDidMount() {
|
||||
const lastUsedProvider = await loadLastUsedProvider()
|
||||
if (INJECTED_PROVIDERS.includes(lastUsedProvider) || process.env.NODE_ENV === 'test') {
|
||||
web3Connect.connectToInjected()
|
||||
if (INJECTED_PROVIDERS.includes(lastUsedProvider.toUpperCase()) || process.env.NODE_ENV === 'test') {
|
||||
const hasSelectedWallet = await onboard.walletSelect(lastUsedProvider)
|
||||
if (hasSelectedWallet) {
|
||||
await onboard.walletCheck()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
/* Onboard.js custom styles */
|
||||
|
||||
:global(.bn-onboard-custom.bn-onboard-modal) {
|
||||
font-family: "Averta";
|
||||
z-index: 2001;
|
||||
}
|
||||
|
|
@ -15,6 +15,7 @@ import { history, store } from '~/store'
|
|||
import theme from '~/theme/mui'
|
||||
|
||||
import './index.scss'
|
||||
import './OnboardCustom.scss'
|
||||
|
||||
const Root = () => (
|
||||
<Provider store={store}>
|
||||
|
|
|
|||
|
|
@ -42,4 +42,4 @@ body {
|
|||
body > div:first-child {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,9 @@ export const getNetwork = () =>
|
|||
? ETHEREUM_NETWORK.MAINNET
|
||||
: ETHEREUM_NETWORK.RINKEBY
|
||||
|
||||
export const getNetworkId = () =>
|
||||
process.env.REACT_APP_NETWORK === "mainnet" ? 1 : 4
|
||||
|
||||
const getConfig = ensureOnce(configuration)
|
||||
|
||||
export const getTxServiceHost = () => {
|
||||
|
|
@ -75,4 +78,4 @@ export const getIntercomId = () =>
|
|||
|
||||
export const getExchangeRatesUrl = () => 'https://api.exchangeratesapi.io/latest'
|
||||
|
||||
export const getSafeLastVersion = () => process.env.REACT_APP_LATEST_SAFE_VERSION || '1.1.1'
|
||||
export const getSafeLastVersion = () => process.env.REACT_APP_LATEST_SAFE_VERSION || '1.1.1'
|
||||
|
|
|
|||
|
|
@ -95,6 +95,7 @@ export const NOTIFICATIONS: Notifications = {
|
|||
},
|
||||
WALLET_DISCONNECTED_MSG: {
|
||||
message: 'Wallet disconnected',
|
||||
key: 'WALLET_DISCONNECTED_MSG',
|
||||
options: {
|
||||
variant: SUCCESS,
|
||||
persist: false,
|
||||
|
|
|
|||
|
|
@ -78,57 +78,6 @@ export const resetWeb3 = () => {
|
|||
web3 = web3ReadOnly
|
||||
}
|
||||
|
||||
const getProviderName: Function = (web3Provider): string => {
|
||||
let name
|
||||
|
||||
switch (web3Provider.currentProvider.constructor.name) {
|
||||
case 'SafeWeb3Provider':
|
||||
name = WALLET_PROVIDER.SAFE
|
||||
break
|
||||
case 'MetamaskInpageProvider':
|
||||
name = WALLET_PROVIDER.METAMASK
|
||||
|
||||
if (web3Provider.currentProvider.isTorus) {
|
||||
name = WALLET_PROVIDER.TORUS
|
||||
}
|
||||
break
|
||||
case 'Object':
|
||||
if (navigator && /Opera|OPR\//.test(navigator.userAgent)) {
|
||||
name = WALLET_PROVIDER.OPERA
|
||||
} else {
|
||||
name = 'Wallet'
|
||||
}
|
||||
break
|
||||
case 'DapperLegacyProvider':
|
||||
name = WALLET_PROVIDER.DAPPER
|
||||
break
|
||||
default:
|
||||
name = 'Wallet'
|
||||
}
|
||||
|
||||
if (web3Provider.currentProvider.isPortis) {
|
||||
name = WALLET_PROVIDER.PORTIS
|
||||
}
|
||||
|
||||
if (web3Provider.currentProvider.isFortmatic) {
|
||||
name = WALLET_PROVIDER.FORTMATIC
|
||||
}
|
||||
|
||||
if (web3Provider.currentProvider.isSquarelink) {
|
||||
name = WALLET_PROVIDER.SQUARELINK
|
||||
}
|
||||
|
||||
if (web3Provider.currentProvider.isWalletConnect) {
|
||||
name = WALLET_PROVIDER.WALLETCONNECT
|
||||
}
|
||||
|
||||
if (web3Provider.currentProvider.isAuthereum) {
|
||||
name = WALLET_PROVIDER.AUTHEREUM
|
||||
}
|
||||
|
||||
return name
|
||||
}
|
||||
|
||||
export const getAccountFrom: Function = async (web3Provider): Promise<string | null> => {
|
||||
const accounts = await web3Provider.eth.getAccounts()
|
||||
|
||||
|
|
@ -145,10 +94,13 @@ const getNetworkIdFrom = async web3Provider => {
|
|||
return networkId
|
||||
}
|
||||
|
||||
export const getProviderInfo: Function = async (web3Provider): Promise<ProviderProps> => {
|
||||
export const getProviderInfo: Function = async (
|
||||
web3Provider,
|
||||
providerName?: string = 'Wallet',
|
||||
): Promise<ProviderProps> => {
|
||||
web3 = new Web3(web3Provider)
|
||||
|
||||
const name = getProviderName(web3)
|
||||
const name = providerName
|
||||
const account = await getAccountFrom(web3)
|
||||
const network = await getNetworkIdFrom(web3)
|
||||
|
||||
|
|
@ -170,6 +122,10 @@ export const getAddressFromENS = async (name: string) => {
|
|||
return address
|
||||
}
|
||||
|
||||
export const setWeb3 = (provider: Object) => {
|
||||
web3 = new Web3(provider)
|
||||
}
|
||||
|
||||
export const getBalanceInEtherOf = async (safeAddress: string) => {
|
||||
if (!web3) {
|
||||
return '0'
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import addProvider from './addProvider'
|
|||
import { getNetwork } from '~/config'
|
||||
import { NOTIFICATIONS, enhanceSnackbarForAction } from '~/logic/notifications'
|
||||
import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
|
||||
import { ETHEREUM_NETWORK, ETHEREUM_NETWORK_IDS, getProviderInfo } from '~/logic/wallets/getWeb3'
|
||||
import { ETHEREUM_NETWORK, ETHEREUM_NETWORK_IDS, getProviderInfo, getWeb3 } from '~/logic/wallets/getWeb3'
|
||||
import type { ProviderProps } from '~/logic/wallets/store/model/provider'
|
||||
import { makeProvider } from '~/logic/wallets/store/model/provider'
|
||||
|
||||
|
|
@ -58,8 +58,9 @@ const handleProviderNotification = (provider: ProviderProps, dispatch: Function)
|
|||
}
|
||||
}
|
||||
|
||||
export default (provider: Object) => async (dispatch: ReduxDispatch<*>) => {
|
||||
const providerInfo: ProviderProps = await getProviderInfo(provider)
|
||||
export default (providerName?: string) => async (dispatch: ReduxDispatch<*>) => {
|
||||
const web3 = getWeb3()
|
||||
const providerInfo: ProviderProps = await getProviderInfo(web3, providerName)
|
||||
await handleProviderNotification(providerInfo, dispatch)
|
||||
processProviderResponse(dispatch, providerInfo)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,23 +2,22 @@
|
|||
import type { Dispatch as ReduxDispatch } from 'redux'
|
||||
import { createAction } from 'redux-actions'
|
||||
|
||||
import { onboard } from '~/components/ConnectButton'
|
||||
import { NOTIFICATIONS, enhanceSnackbarForAction } from '~/logic/notifications'
|
||||
import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
|
||||
import { getWeb3, resetWeb3 } from '~/logic/wallets/getWeb3'
|
||||
import { resetWeb3 } from '~/logic/wallets/getWeb3'
|
||||
|
||||
export const REMOVE_PROVIDER = 'REMOVE_PROVIDER'
|
||||
|
||||
const removeProvider = createAction<string, *, *>(REMOVE_PROVIDER)
|
||||
|
||||
export default () => (dispatch: ReduxDispatch<*>) => {
|
||||
dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.WALLET_DISCONNECTED_MSG)))
|
||||
|
||||
const web3 = getWeb3()
|
||||
|
||||
if (web3.currentProvider && web3.currentProvider.close) {
|
||||
web3.currentProvider.close()
|
||||
}
|
||||
|
||||
onboard.walletReset()
|
||||
resetWeb3()
|
||||
dispatch(removeProvider())
|
||||
dispatch(
|
||||
enqueueSnackbar(
|
||||
enhanceSnackbarForAction(NOTIFICATIONS.WALLET_DISCONNECTED_MSG, NOTIFICATIONS.WALLET_DISCONNECTED_MSG.key),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,10 +33,9 @@ const providerWatcherMware = (store: Store<GlobalState>) => (next: Function) =>
|
|||
clearInterval(watcherInterval)
|
||||
}
|
||||
|
||||
if (currentProviderProps.name === WALLET_PROVIDER.METAMASK && window.ethereum) {
|
||||
if (currentProviderProps.name.toUpperCase() === WALLET_PROVIDER.METAMASK && window.ethereum) {
|
||||
window.ethereum.autoRefreshOnNetworkChange = false
|
||||
}
|
||||
|
||||
saveToStorage(LAST_USED_PROVIDER_KEY, currentProviderProps.name)
|
||||
|
||||
watcherInterval = setInterval(async () => {
|
||||
|
|
@ -50,7 +49,7 @@ const providerWatcherMware = (store: Store<GlobalState>) => (next: Function) =>
|
|||
}
|
||||
|
||||
if (currentProviderProps.account !== providerInfo.account || networkChanged) {
|
||||
store.dispatch(fetchProvider(web3))
|
||||
store.dispatch(fetchProvider(currentProviderProps.name))
|
||||
}
|
||||
}, 2000)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
// @flow
|
||||
function transactionDataCheck() {
|
||||
let completed = false
|
||||
return stateAndHelpers => {
|
||||
const { wallet } = stateAndHelpers
|
||||
|
||||
if (wallet && wallet.name === 'Ledger' && !completed) {
|
||||
return {
|
||||
heading: 'Allow Transaction Data', // edit modal heading here
|
||||
description: 'Please allow transaction data on your Ledger device.', // edit modal description that is displayed here. You can include html strings here and they will be rendered as html elements.
|
||||
eventCode: 'allowTransactionData',
|
||||
button: {
|
||||
text: 'Done',
|
||||
onclick: () => {
|
||||
completed = true
|
||||
},
|
||||
},
|
||||
icon: `
|
||||
<svg height="14" viewBox="0 0 18 14" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m10.29375 4.05351563c0-.04921875 0-.09140625 0-.13007813 0-1.0546875 0-2.109375 0-3.1640625 0-.43945312.3480469-.76992188.7804688-.7453125.2003906.01054688.3585937.10546875.4992187.24609375.5800781.58359375 1.1566406 1.16367188 1.7367187 1.74023438 1.4695313 1.46953125 2.9390625 2.93906249 4.4050782 4.40859375.1335937.13359375.2425781.27421875.2707031.46757812.0351562.20742188-.0246094.421875-.1652344.58007813-.0246094.028125-.0492187.05273437-.0738281.08085937-2.0601563 2.06367188-4.1203125 4.1238281-6.1804688 6.1875-.2109375.2109375-.4570312.3023438-.7453125.2179688-.2707031-.0808594-.4464843-.2707032-.5132812-.5484375-.0140625-.0738282-.0175781-.1441407-.0140625-.2179688 0-1.0335937 0-2.0707031 0-3.1042969 0-.0386719 0-.08085935 0-.13359372h-5.06953125c-.49570313 0-.80507813-.309375-.80507813-.80859375 0-1.42382813 0-2.84414063 0-4.26796875 0-.49570313.30585938-.8015625.8015625-.8015625h4.93593748z"/><path d="m5.69882812 13.978125h-4.01132812c-.928125 0-1.6875-.8753906-1.6875-1.9511719v-10.06171872c0-1.07578125.75585938-1.95117188 1.6875-1.95117188h4.01132812c.34101563 0 .61523438.31992188.61523438.71015625 0 .39023438-.27421875.71015625-.61523438.71015625h-4.01132812c-.253125 0-.45703125.23554688-.45703125.52734375v10.06171875c0 .2917969.20390625.5273437.45703125.5273437h4.01132812c.34101563 0 .61523438.3199219.61523438.7101563s-.27773438.7171875-.61523438.7171875z"/></g></svg>
|
||||
`,
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export default transactionDataCheck
|
||||
|
|
@ -71,7 +71,6 @@ const ReviewTx = ({
|
|||
const web3 = getWeb3()
|
||||
const { fromWei, toBN } = web3.utils
|
||||
let txData = EMPTY_DATA
|
||||
|
||||
if (!isSendingETH) {
|
||||
const StandardToken = await getHumanFriendlyToken()
|
||||
const tokenInstance = await StandardToken.at(txToken.address)
|
||||
|
|
@ -98,7 +97,6 @@ const ReviewTx = ({
|
|||
const web3 = getWeb3()
|
||||
let txData = EMPTY_DATA
|
||||
let txAmount = web3.utils.toWei(tx.amount, 'ether')
|
||||
|
||||
if (!isSendingETH) {
|
||||
const HumanFriendlyToken = await getHumanFriendlyToken()
|
||||
const tokenInstance = await HumanFriendlyToken.at(txToken.address)
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@ const ReviewRemoveOwner = ({
|
|||
const estimateGas = async () => {
|
||||
const web3 = getWeb3()
|
||||
const { fromWei, toBN } = web3.utils
|
||||
|
||||
const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
|
||||
const safeOwners = await gnosisSafe.getOwners()
|
||||
const index = safeOwners.findIndex(owner => owner.toLowerCase() === ownerAddress.toLowerCase())
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ const ReviewRemoveOwner = ({
|
|||
const estimateGas = async () => {
|
||||
const web3 = getWeb3()
|
||||
const { fromWei, toBN } = web3.utils
|
||||
|
||||
const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
|
||||
const safeOwners = await gnosisSafe.getOwners()
|
||||
const index = safeOwners.findIndex(owner => owner.toLowerCase() === ownerAddress.toLowerCase())
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ const ChangeThreshold = ({ classes, onChangeThreshold, onClose, owners, safeAddr
|
|||
const estimateGasCosts = async () => {
|
||||
const web3 = getWeb3()
|
||||
const { fromWei, toBN } = web3.utils
|
||||
|
||||
const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
|
||||
const txData = safeInstance.contract.methods.changeThreshold('1').encodeABI()
|
||||
const estimatedGasCosts = await estimateTxGasCosts(safeAddress, safeAddress, txData)
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ type Props = {
|
|||
cancelThresholdReached: boolean,
|
||||
cancelTx: Transaction,
|
||||
classes: Object,
|
||||
granted: boolean,
|
||||
onTxReject: Function,
|
||||
onTxConfirm: Function,
|
||||
onTxExecute: Function,
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import { type TransactionType } from '~/routes/safe/store/models/transaction'
|
||||
import { getAppInfo } from '~/routes/safe/components/Apps/appsList'
|
||||
import { IconText } from '~/components-v2'
|
||||
|
||||
import OutgoingTxIcon from './assets/outgoing.svg'
|
||||
import IncomingTxIcon from './assets/incoming.svg'
|
||||
import CustomTxIcon from './assets/custom.svg'
|
||||
import IncomingTxIcon from './assets/incoming.svg'
|
||||
import OutgoingTxIcon from './assets/outgoing.svg'
|
||||
import SettingsTxIcon from './assets/settings.svg'
|
||||
|
||||
import { IconText } from '~/components-v2'
|
||||
import { getAppInfo } from '~/routes/safe/components/Apps/appsList'
|
||||
import { type TransactionType } from '~/routes/safe/store/models/transaction'
|
||||
|
||||
const typeToIcon = {
|
||||
outgoing: OutgoingTxIcon,
|
||||
incoming: IncomingTxIcon,
|
||||
|
|
@ -29,7 +30,7 @@ const typeToLabel = {
|
|||
upgrade: 'Contract Upgrade',
|
||||
}
|
||||
|
||||
const TxType = ({ txType, origin }: { txType: TransactionType, origin: string | null }) => {
|
||||
const TxType = ({ origin, txType }: { txType: TransactionType, origin: string | null }) => {
|
||||
const iconUrl = txType === 'third-party-app' ? getAppInfo(origin).iconUrl : typeToIcon[txType]
|
||||
const text = txType === 'third-party-app' ? getAppInfo(origin).name : typeToLabel[txType]
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { push } from 'connected-react-router'
|
||||
import type { GetState, Dispatch as ReduxDispatch } from 'redux'
|
||||
|
||||
import { onboardUser } from '~/components/ConnectButton'
|
||||
import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
|
||||
import { type NotificationsQueue, getNotificationsFromTxType, showSnackbar } from '~/logic/notifications'
|
||||
import {
|
||||
|
|
@ -55,6 +56,9 @@ const createTransaction = ({
|
|||
dispatch(push(`${SAFELIST_ADDRESS}/${safeAddress}/transactions`))
|
||||
}
|
||||
|
||||
const ready = await onboardUser()
|
||||
if (!ready) return
|
||||
|
||||
const from = userAccountSelector(state)
|
||||
const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
|
||||
const lastTx = await getLastTx(safeAddress)
|
||||
|
|
|
|||
Loading…
Reference in New Issue