Web3 onboard

.nvmrc

@@ -1 +1 @@
-14
+16

package.json

@@ -19,7 +19,7 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "build-desktop": "cross-env REACT_APP_BUILD_FOR_DESKTOP=true REACT_APP_ENV=production yarn build-mainnet",
-    "build-mainnet": "cross-env REACT_APP_NETWORK=mainnet yarn build",
+    "build-mainnet": "cross-env REACT_APP_NETWORK=xinfin yarn build",
     "build": "cross-env REACT_APP_APP_VERSION=$npm_package_version rescripts --max-old-space-size=8192 build",
     "copy-gateway-types": "rm -rf src/types/gateway; cp -r node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types src/types/gateway",
     "eject": "rescripts eject",
@@ -40,9 +40,8 @@
     "prettier:fix": "yarn prettier --write",
     "prettier": "prettier './src/**/*.{js,jsx,ts,tsx}'",
     "release": "electron-builder --mac --linux --windows -p always",
-    "start-mainnet": "REACT_APP_NETWORK=mainnet yarn start",
-    "start-polygon": "REACT_APP_LATEST_SAFE_VERSION='1.3.0' REACT_APP_NETWORK=polygon yarn start",
-    "start-bsc": "REACT_APP_LATEST_SAFE_VERSION='1.3.0' REACT_APP_NETWORK='bsc' yarn start",
+    "start-mainnet": "REACT_APP_NETWORK=xinfin yarn start",
+    "start-apothem": "REACT_APP_NETWORK=apothem yarn start",
     "start": "rescripts start",
     "test": "rescripts test --env=jsdom",
     "test:coverage": "yarn test --coverage --watchAll=false",
@@ -177,11 +176,16 @@
     "@sentry/react": "^6.10.0",
     "@sentry/tracing": "^6.10.0",
     "@unstoppabledomains/resolution": "^1.17.0",
+    "@web3-onboard/common": "^2.2.3",
+    "@web3-onboard/core": "^2.15.0",
+    "@web3-onboard/injected-wallets": "^2.7.0",
+    "@web3-onboard/react": "^2.6.2",
+    "@web3-onboard/transaction-preview": "^2.0.2",
+    "@web3-onboard/walletconnect": "^2.2.2",
     "@yplusvault/contract-deployments": "^0.9.0",
     "abi-decoder": "^2.4.0",
     "axios": "0.21.1",
     "bignumber.js": "9.0.1",
-    "bnc-onboard": "~1.36.0",
     "classnames": "^2.2.6",
     "connected-react-router": "6.8.0",
     "currency-flags": "2.1.2",

src/components/AppLayout/Header/components/Layout.tsx

@@ -16,9 +16,10 @@ import Row from 'src/components/layout/Row'
 import { headerHeight, md, screenSm, sm } from 'src/theme/variables'
 import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
-import SafeLogo from '../assets/yodaplus-logo-wide.png'
+import SafeLogo from 'src/assets/images/yodaplus-logo-wide.png'
 import { getNetworks } from 'src/config'
-import { shouldSwitchNetwork } from 'src/logic/wallets/utils/network'
+//import { shouldSwitchNetwork } from 'src/logic/wallets/utils/network'
+import { Web3OnboardProvider, init } from '@web3-onboard/react'
 
 const styles = () => ({
   root: {
@@ -87,7 +88,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
             <Popper
               anchorEl={providerRef.current}
               className={classes.popper}
-              open={open || shouldSwitchNetwork()}
+              open={open}
               placement="bottom"
               popperOptions={{ positionFixed: true }}
             >

src/components/AppLayout/Header/components/WalletIcon/icons/index.ts

@@ -25,6 +25,10 @@ const WALLET_ICONS: { [key in WALLET_PROVIDER]: { src: string; height: number }
     src: xinpayIcon,
     height: 25,
   },
+  [WALLET_PROVIDER.XDCPAYV1]: {
+    src: xinpayIcon,
+    height: 25,
+  },
   [WALLET_PROVIDER.METAMASK]: {
     src: metamaskIcon,
     height: 25,

src/components/AppLayout/Header/index.tsx

@@ -14,9 +14,10 @@ import {
   userAccountSelector,
 } from 'src/logic/wallets/store/selectors'
 import { removeProvider } from 'src/logic/wallets/store/actions'
-import { canSwitchNetwork, switchNetwork } from 'src/logic/wallets/utils/network'
-import { getNetworkId } from 'src/config'
-import { onboard } from 'src/components/ConnectButton'
+//import { canSwitchNetwork, switchNetwork } from 'src/logic/wallets/utils/network'
+//import { getNetworkId } from 'src/config'
+//import { onboard, State } from 'src/components/ConnectButton'
+import { OnboardUser, disconnectWallet } from 'src/logic/wallets/walletConnection'
 import { loadLastUsedProvider } from 'src/logic/wallets/store/middlewares/providerWatcher'
 
 const HeaderComponent = (): React.ReactElement => {
@@ -26,39 +27,39 @@ const HeaderComponent = (): React.ReactElement => {
   const loaded = useSelector(loadedSelector)
   const available = useSelector(availableSelector)
   const dispatch = useDispatch()
-  const showSwitchButton = canSwitchNetwork()
+  //const showSwitchButton = canSwitchNetwork()
 
   useEffect(() => {
     const tryToConnectToLastUsedProvider = async () => {
       const lastUsedProvider = await loadLastUsedProvider()
       if (lastUsedProvider) {
-        await onboard.walletSelect(lastUsedProvider)
+        //await onboard.walletSelect(lastUsedProvider)
+        OnboardUser()
       }
     }
 
     tryToConnectToLastUsedProvider()
   }, [])
 
-  const openDashboard = () => {
-    const { wallet } = onboard.getState()
-    return wallet.type === 'sdk' && wallet.dashboard
-  }
+  // const openDashboard = () => {
+  //   return PrimaryWallet.type === 'sdk' && PrimaryWallet.dashboard
+  // }
 
   const onDisconnect = () => {
     dispatch(removeProvider())
   }
 
-  const onNetworkChange = async () => {
-    const { wallet } = onboard.getState()
-    const desiredNetwork = getNetworkId()
-    try {
-      await switchNetwork(wallet, desiredNetwork)
-    } catch (e) {
-      e.log()
-      // Fallback to the onboard popup if switching isn't supported
-      await onboard.walletCheck()
-    }
-  }
+  // const onNetworkChange = async () => {
+  //   const { wallet } = State
+  //   const desiredNetwork = getNetworkId()
+  //   try {
+  //     await switchNetwork(wallet, desiredNetwork)
+  //   } catch (e) {
+  //     e.log()
+  //     // Fallback to the onboard popup if switching isn't supported
+  //     await onboard.walletCheck()
+  //   }
+  // }
 
   const getProviderInfoBased = () => {
     if (!loaded || !provider) {
@@ -78,8 +79,8 @@ const HeaderComponent = (): React.ReactElement => {
         connected={available}
         network={network}
         onDisconnect={onDisconnect}
-        onNetworkChange={showSwitchButton ? onNetworkChange : undefined}
-        openDashboard={openDashboard()}
+        // onNetworkChange={showSwitchButton ? onNetworkChange : undefined}
+        //openDashboard={openDashboard()}
         provider={provider}
         userAddress={userAddress}
       />

src/components/ConnectButton/index.tsx

@@ -1,107 +1,24 @@
-import Onboard from 'bnc-onboard'
 import React, { ReactElement } from 'react'
 
 import Button from 'src/components/layout/Button'
 import { getNetworkName, getNetworkId } from 'src/config'
-import { getWeb3, setWeb3 } from 'src/logic/wallets/getWeb3'
-import { fetchProvider, removeProvider } from 'src/logic/wallets/store/actions'
-import transactionDataCheck from 'src/logic/wallets/transactionDataCheck'
-import { getSupportedWallets } from 'src/logic/wallets/utils/walletList'
-import { store } from 'src/store'
-import { shouldSwitchNetwork, switchNetwork } from 'src/logic/wallets/utils/network'
-import { transformProviderFromXinfin } from 'src/utils/xinfin'
+//import { getWeb3, setWeb3 } from 'src/logic/wallets/getWeb3'
+// import { fetchProvider, removeProvider } from 'src/logic/wallets/store/actions'
+// import transactionDataCheck from 'src/logic/wallets/transactionDataCheck'
+//import { getSupportedWallets } from 'src/logic/wallets/utils/walletList'
+// import { store } from 'src/store'
+// import { shouldSwitchNetwork, switchNetwork } from 'src/logic/wallets/utils/network'
+// import { transformProviderFromXinfin } from 'src/utils/xinfin'
+import { OnboardUser } from 'src/logic/wallets/walletConnection'
 
 const networkId = getNetworkId()
 const networkName = getNetworkName().toLowerCase()
 
-let lastUsedAddress = ''
-let providerName
-
-const wallets = getSupportedWallets()
-
-export const onboard = Onboard({
-  networkId,
-  networkName,
-  subscriptions: {
-    wallet: (wallet) => {
-      if (wallet.provider && 'qrcodeModalOptions' in wallet.provider) {
-        wallet.provider.connector._qrcodeModalOptions = {
-          desktopLinks: [],
-        }
-      }
-
-      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(transformProviderFromXinfin(wallet.provider))
-        providerName = wallet.name
-      }
-    },
-    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
-        store.dispatch(removeProvider())
-      }
-    },
-  },
-  walletSelect: {
-    description: 'Please select a wallet to connect to Yodaplus Multi-Sig Safe',
-    explanation:
-      'Wallets are used to send, receive, and store digital assets. Wallets come in many forms. They are either built into your browser, an extension added to your browser, a piece of hardware plugged into your computer or even an app on your phone.',
-    wallets,
-  },
-  walletCheck: [
-    { checkName: 'derivationPath' },
-    { checkName: 'connect' },
-    { checkName: 'accounts' },
-    { checkName: 'network' },
-    transactionDataCheck(),
-  ],
-})
-
-const checkWallet = async (): Promise<boolean> => {
-  const ready = onboard.walletCheck()
-
-  if (shouldSwitchNetwork()) {
-    try {
-      await switchNetwork(onboard.getState().wallet, getNetworkId())
-      return true
-    } catch (e) {
-      e.log()
-      return false
-    }
-  }
-
-  return await ready
-}
-
-export const onboardUser = async (): Promise<boolean> => {
-  // 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 && checkWallet()
-}
-
-export const onConnectButtonClick = async (): Promise<void> => {
-  const walletSelected = await onboard.walletSelect()
-
-  // perform wallet checks only if user selected a wallet
-  if (walletSelected) {
-    await checkWallet()
-  }
-}
+// let lastUsedAddress = ''
+// let providerName
 
 const ConnectButton = (props: { 'data-testid': string }): ReactElement => (
-  <Button color="primary" minWidth={240} onClick={onConnectButtonClick} variant="contained" {...props}>
+  <Button color="primary" minWidth={240} onClick={OnboardUser} variant="contained" {...props}>
     Connect
   </Button>
 )

src/logic/safe/store/actions/createTransaction.ts

@@ -2,7 +2,7 @@ import { push } from 'connected-react-router'
 import { AnyAction } from 'redux'
 import { ThunkAction } from 'redux-thunk'
 
-import { onboardUser } from 'src/components/ConnectButton'
+import { OnboardUser } from 'src/logic/wallets/walletConnection'
 import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
 import { getNotificationsFromTxType, NOTIFICATIONS } from 'src/logic/notifications'
 import {
@@ -86,7 +86,7 @@ export const createTransaction =
       )
     }
 
-    const ready = await onboardUser()
+    const ready = await OnboardUser()
     if (!ready) return
 
     const { account: from, hardwareWallet, smartContractWallet } = providerSelector(state)