diff --git a/.nvmrc b/.nvmrc
index 8351c1939..b6a7d89c6 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-14
+16
diff --git a/package.json b/package.json
index 2d5d90996..957928b61 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/icons/xdc-icon.svg b/src/assets/icons/xdc-icon.svg
new file mode 100644
index 000000000..7d28d07e6
--- /dev/null
+++ b/src/assets/icons/xdc-icon.svg
@@ -0,0 +1,777 @@
+
+
+
+
+
+
+
+
+
+
+
+]>
+
diff --git a/src/assets/icons/xdc-logo.svg b/src/assets/icons/xdc-logo.svg
new file mode 100644
index 000000000..27b5d0931
--- /dev/null
+++ b/src/assets/icons/xdc-logo.svg
@@ -0,0 +1,826 @@
+
+
+
+
+
+
+
+
+
+
+
+]>
+
diff --git a/src/assets/images/xdcpay.png b/src/assets/images/xdcpay.png
new file mode 100644
index 000000000..96e42d011
Binary files /dev/null and b/src/assets/images/xdcpay.png differ
diff --git a/src/assets/images/yodaplus-logo-wide.png b/src/assets/images/yodaplus-logo-wide.png
new file mode 100644
index 000000000..58993fecb
Binary files /dev/null and b/src/assets/images/yodaplus-logo-wide.png differ
diff --git a/src/assets/images/yodaplus_icon.png b/src/assets/images/yodaplus_icon.png
new file mode 100644
index 000000000..5d7520e44
Binary files /dev/null and b/src/assets/images/yodaplus_icon.png differ
diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx
index c6852400b..c72fcd4c1 100644
--- a/src/components/AppLayout/Header/components/Layout.tsx
+++ b/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 }) => {
diff --git a/src/components/AppLayout/Header/components/WalletIcon/icons/index.ts b/src/components/AppLayout/Header/components/WalletIcon/icons/index.ts
index 7e41e7307..cb40dce62 100644
--- a/src/components/AppLayout/Header/components/WalletIcon/icons/index.ts
+++ b/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,
diff --git a/src/components/AppLayout/Header/index.tsx b/src/components/AppLayout/Header/index.tsx
index 861e08e4d..d1dade14b 100644
--- a/src/components/AppLayout/Header/index.tsx
+++ b/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}
/>
diff --git a/src/components/ConnectButton/index.tsx b/src/components/ConnectButton/index.tsx
index a4dd393da..29ef44f25 100644
--- a/src/components/ConnectButton/index.tsx
+++ b/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 => {
- 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 => {
- // 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 => {
- 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 => (
-