Latest Prod W3O packages

.github/workflows/pr-status-checks.yml

@@ -1,7 +1,7 @@
 name: PR Status Checks
 
 on:
-  # Allows it to be manually triggered, used primarily for debugging 
+  # Allows it to be manually triggered, used primarily for debugging
   workflow_dispatch:
   pull_request:
     branches:
@@ -10,7 +10,7 @@ on:
 
 jobs:
   checks:
-    name: "Checks"
+    name: 'Checks'
     runs-on: ubuntu-latest
 
     steps:
@@ -20,15 +20,14 @@ jobs:
       - name: Setup Nodejs and yarn
         uses: actions/setup-node@v2
         with:
-          node-version: "16"
+          node-version: '18'
           cache: yarn
 
       - name: Install dependencies
         run: yarn
-        
+
       - name: Check that it builds
         run: yarn build
         env:
-          NODE_OPTIONS: "--max_old_space_size=8192"
+          NODE_OPTIONS: '--max_old_space_size=8192'
           CI: false
-

package.json

@@ -1,13 +1,13 @@
 {
   "name": "onboard-notify-react",
-  "version": "0.35.13-0.0.1",
+  "version": "0.40.1",
   "dependencies": {
     "@safe-global/safe-apps-provider": "^0.18.0",
     "@safe-global/safe-apps-sdk": "^8.1.0",
     "@web3-onboard/arcana-auth": "^2.0.0",
     "@web3-onboard/bitget": "^2.0.1",
     "@web3-onboard/blocto": "^2.0.1",
-    "@web3-onboard/capsule": "^2.0.1",
+    "@web3-onboard/capsule": "^2.0.2",
     "@web3-onboard/cede-store": "^2.2.0",
     "@web3-onboard/coinbase": "^2.2.7",
     "@web3-onboard/dcent": "^2.2.8",
@@ -23,7 +23,7 @@
     "@web3-onboard/keystone": "^2.3.8",
     "@web3-onboard/ledger": "^2.6.0",
     "@web3-onboard/magic": "^2.1.7",
-    "@web3-onboard/metamask": "^2.0.3",
+    "@web3-onboard/metamask": "^2.0.6",
     "@web3-onboard/mew-wallet": "^2.0.4",
     "@web3-onboard/phantom": "^2.0.3",
     "@web3-onboard/portis": "^2.1.7",
@@ -36,7 +36,7 @@
     "@web3-onboard/trust": "^2.0.4",
     "@web3-onboard/uauth": "^2.1.2",
     "@web3-onboard/venly": "^2.0.0",
-    "@web3-onboard/walletconnect": "^2.5.4",
+    "@web3-onboard/walletconnect": "^2.5.5",
     "@web3-onboard/web3auth": "^2.2.3",
     "@web3-onboard/xdefi": "^2.0.5",
     "@web3-onboard/zeal": "^2.0.4",

src/App.js

@@ -38,8 +38,8 @@ const App = () => {
   const [bnGasPrices, setBNGasPrices] = useState('')
   const [rpcInfuraGasPrices, setRPCInfuraGasPrices] = useState('')
   const [toAddress, setToAddress] = useState('')
-  // default test transaction to Goerli
-  const [toChain, setToChain] = useState('0x5')
+  // default test transaction to Sepolia
+  const [toChain, setToChain] = useState(11155111)
   const [accountCenterPosition, setAccountCenterPosition] = useState('topRight')
   const [notifyPosition, setNotifyPosition] = useState('topRight')
   const [locale, setLocale] = useState('en')
@@ -84,7 +84,6 @@ const App = () => {
       provider = null
     } else {
       provider = new ethers.providers.Web3Provider(wallet.provider, 'any')
-
     }
   }, [wallet])
 
@@ -573,7 +572,10 @@ const App = () => {
                       value={toChain}
                     >
                       {chains.map(({ id, label }) => {
-                        if (label === 'Goerli' || label === 'Polygon - Mumbai') {
+                        if (
+                          label === 'Sepolia' ||
+                          label === 'Polygon - Mumbai'
+                        ) {
                           return (
                             <option value={id} key={id}>
                               {label}

src/networkEnum.js

@@ -1,8 +1,9 @@
 const networkEnum = Object.freeze({
   '0x1': 'Ethereum Main',
+  '0xaa36a7': 'Sepolia',
   '0x38': 'BSC',
   '0x89': 'Polygon',
   '0xfa': 'Fantom',
   localhost: 'localhost'
-});
-export default networkEnum;
+})
+export default networkEnum

src/services.js

@@ -35,12 +35,16 @@ import bloctoModule from '@web3-onboard/blocto'
 import bitgetModule from '@web3-onboard/bitget'
 import metamaskModule from '@web3-onboard/metamask'
 import arcanaAuthModule from '@web3-onboard/arcana-auth'
-import capsuleModule from '@web3-onboard/capsule'
-import { Environment } from '@web3-onboard/capsule'
+import metamaskSDK from '@web3-onboard/metamask'
+import capsuleModule, {
+  Environment,
+  OAuthMethod,
+  Theme
+} from '@web3-onboard/capsule'
 
 // Replace with your DApp's Infura ID
-const INFURA_ID = 'cea9deb6467748b0b81b920b005c10c1'
-export const infuraRPC = `https://mainnet.infura.io/v3/${INFURA_ID}`
+const INFURA_ID = '80633e48116943128cbab25e402764ab'
+export const infuraRPC = `https://eth.llamarpc.com`
 
 const dappId = '937627e1-3507-44b8-af10-72728aa5f74b'
 
@@ -84,8 +88,9 @@ const injected = injectedModule({
 const coinbase = coinbaseModule()
 
 const walletConnect = walletConnectModule({
+  handleUri: uri => console.log(uri),
   projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
-  dappUrl: 'https://reactdemo.blocknative.com/'
+  dappUrl: 'https://www.onboard.blocknative.com'
 })
 const portis = portisModule({
   apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'
@@ -144,7 +149,7 @@ const uauthOptions = {
   walletConnectProjectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
   redirectUri: 'http://localhost:8080/',
   scope:
-  'openid wallet email:optional humanity_check:optional profile:optional social:optional'
+    'openid wallet email:optional humanity_check:optional profile:optional social:optional'
 }
 const uauth = uauthModule(uauthOptions)
 
@@ -167,9 +172,30 @@ const arcanaAuth = arcanaAuthModule({
   clientID: 'xar_test_c9c3bc702eb13255c58dab0e74cfa859711c13cb'
 })
 
+const metamaskSDKWallet = metamaskSDK({
+  options: {
+    extensionOnly: false,
+    i18nOptions: {
+      enabled: true
+    },
+    dappMetadata: {
+      name: 'Demo Web3Onboard'
+    }
+  }
+})
+
 const capsule = capsuleModule({
   environment: Environment.DEVELOPMENT,
-  apiKey: '992bbd9146d5de8ad0419f141d9a7ca7'
+  apiKey: '992bbd9146d5de8ad0419f141d9a7ca7',
+  modalProps: {
+    oAuthMethods: [OAuthMethod.GOOGLE, OAuthMethod.TWITTER],
+    theme: Theme.dark
+  },
+  constructorOpts: {
+    portalBackgroundColor: '#5e5656',
+    portalPrimaryButtonColor: '#ff6700',
+    portalTextColor: '#ffffff'
+  }
 })
 
 export const initWeb3Onboard = init({
@@ -209,6 +235,7 @@ export const initWeb3Onboard = init({
     venly,
     blocto,
     arcanaAuth,
+    metamaskSDKWallet,
     capsule
   ],
   chains: [
@@ -232,10 +259,10 @@ export const initWeb3Onboard = init({
       ]
     },
     {
-      id: '0x5',
+      id: 11155111,
       token: 'ETH',
-      label: 'Goerli',
-      rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
+      label: 'Sepolia',
+      rpcUrl: 'https://rpc.sepolia.org/'
     },
     {
       id: '0x13881',
@@ -310,14 +337,14 @@ export const initWeb3Onboard = init({
   },
   accountCenter: {
     desktop: {
-        enabled: true,
-        position: 'topRight',
+      enabled: true,
+      position: 'topRight'
     },
     mobile: {
-        enabled: true,
-        position: 'topRight'
+      enabled: true,
+      position: 'topRight'
     }
-},
+  },
   // example customizing copy
   i18n: {
     es: {
@@ -360,7 +387,7 @@ export const initWeb3Onboard = init({
           // message: `Your transaction is pending, click <a href="https://goerli.etherscan.io/tx/${transaction.hash}" rel="noopener noreferrer" target="_blank">here</a> for more info.`,
           // or you could use onClick for when someone clicks on the notification itself
           onClick: () =>
-            window.open(`https://goerli.etherscan.io/tx/${transaction.hash}`)
+            window.open(`https://sepolia.etherscan.io/tx/${transaction.hash}`)
         }
       }
     }

src/views/Header/Header.js

@@ -24,7 +24,11 @@ const Header = props => {
             <img
               className="user-avatar"
               // This will change when we switch to Viem
-              src={(ens.avatar && ens.avatar.url) ? ens.avatar.url : avatarPlaceholder}
+              src={
+                ens.avatar && ens.avatar.url
+                  ? ens.avatar.url
+                  : avatarPlaceholder
+              }
               alt="avatar"
             ></img>
             <div