Skip to content
This repository has been archived by the owner on Nov 10, 2023. It is now read-only.

Commit

Permalink
Feature: replace web3connect with onboardjs (#456)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
Co-authored-by: Mati Dastugue <[email protected]>
  • Loading branch information
3 people authored and fernandomg committed Mar 18, 2020
1 parent 59de829 commit fc61811
Show file tree
Hide file tree
Showing 10 changed files with 1,216 additions and 1,410 deletions.
85 changes: 40 additions & 45 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -143,30 +138,30 @@
"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",
"husky": "^4.2.2",
"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"
}
}
}
2 changes: 1 addition & 1 deletion src/components-v2/dataDisplay/IconText/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
133 changes: 82 additions & 51 deletions src/components/ConnectButton/index.jsx
Original file line number Diff line number Diff line change
@@ -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,
},
},
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,
},
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: '[email protected]',
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
}
},
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,
Expand All @@ -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}
Expand Down
9 changes: 6 additions & 3 deletions src/components/Header/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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()
}
}
}

Expand Down
7 changes: 4 additions & 3 deletions src/logic/wallets/store/actions/fetchProvider.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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)
}
17 changes: 8 additions & 9 deletions src/logic/wallets/store/actions/removeProvider.js
Original file line number Diff line number Diff line change
Expand Up @@ -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),
),
)
}
Loading

0 comments on commit fc61811

Please sign in to comment.