DAO-92 upgrade use wallet to 0.9.0 (#1557)

* use use-wallet 0.9.0 * remove unnecessary dependency * fix the CI error @toruslabs/[email protected] for node version too old * Re-order templates (#1558) * detect network change * use injected instead of provided connector, as provided connector is a hack to around web3.js overrides * switch welcome page content base on network * more reactive network changes * fix error on missing networkType * eth node and ipfs settings by network * getAppLocator by network type Co-authored-by: Rekard0 <[email protected]>
aragon · Jul 27, 2021 · b92c787 · b92c787
1 parent fafccce
commit b92c787
Show file tree

Hide file tree

Showing 63 changed files with 3,477 additions and 1,405 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -9,7 +9,7 @@ jobs:
     - name: Install node
       uses: actions/setup-node@v1
       with:
-        node-version: 12
+        node-version: 14
     - name: Install dependencies
       run: yarn install --frozen-lockfile
     - name: Build Aragon

diff --git a/HACKS.md b/HACKS.md
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "regenerator-runtime": "^0.13.3",
     "resolve-pathname": "^3.0.0",
     "styled-components": "^4.1.3",
-    "use-wallet": "^0.7.1",
+    "use-wallet": "https://github.com/aragon/use-wallet#multichain",
     "web3": "^1.2.6",
     "web3-eth-abi": "^1.2.6",
     "web3-utils": "^1.2.6"

diff --git a/src/App.js b/src/App.js
@@ -4,12 +4,10 @@ import { Spring, animated } from 'react-spring'
 import { useTheme } from '@aragon/ui'
 import { EthereumAddressType, ClientThemeType } from './prop-types'
 import { useWallet } from './wallet'
-import { network, web3Providers, enableMigrateBanner } from './environment'
 import { useClientTheme } from './client-theme'
 import { useRouting } from './routing'
 import initWrapper, { pollConnectivity } from './aragonjs-wrapper'
 import { Onboarding } from './onboarding'
-import { getWeb3 } from './web3-utils'
 import { log } from './utils'
 import { ActivityProvider } from './contexts/ActivityContext'
 import { FavoriteDaosProvider } from './contexts/FavoriteDaosContext'
@@ -21,7 +19,7 @@ import GlobalPreferences from './components/GlobalPreferences/GlobalPreferences'
 import CustomToast from './components/CustomToast/CustomToast'
 import OrgView from './components/OrgView/OrgView'
 import { identifyUser } from './analytics'
-
+import { networkConfigs } from './network-config'
 import { isKnownRepo } from './repo-utils'
 
 import {
@@ -34,13 +32,18 @@ import {
   DAO_STATUS_LOADING,
   DAO_STATUS_UNLOADED,
 } from './symbols'
+import { getWeb3Provider } from './web3-utils'
 
 const MIGRATION_BANNER_HIDE = 'MIGRATION_BANNER_HIDE&'
 const MIGRATION_LAST_DATE_ELIGIBLE_TIMESTAMP = new Date(
   '2021-05-14T15:43:08Z'
 ).getTime()
 
-const getMigrateBannerKey = address => `${MIGRATION_BANNER_HIDE}${address}`
+const getMigrateBannerKey = (networkType, address) =>
+  `${MIGRATION_BANNER_HIDE}${address}:${networkType}`
+
+const enableMigrateBanner = networkType =>
+  Boolean(networkConfigs[networkType]?.enableMigrateBanner)
 
 const INITIAL_DAO_STATE = {
   apps: [],
@@ -54,39 +57,23 @@ const INITIAL_DAO_STATE = {
   showMigrateBanner: false,
 }
 
-const SELECTOR_NETWORKS = [
-  ['main', 'Ethereum Mainnet', 'https://client.aragon.org/'],
-  [
-    'rinkeby',
-    'Ethereum Testnet (Rinkeby)',
-    'https://rinkeby.client.aragon.org/',
-  ],
-]
-if (network.type === 'ropsten') {
-  SELECTOR_NETWORKS.push([
-    'ropsten',
-    'Ethereum Testnet (Ropsten)',
-    'https://aragon.ropsten.aragonpm.com/',
-  ])
-}
-
 class App extends React.Component {
   static propTypes = {
     clientTheme: ClientThemeType.isRequired,
     routing: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
     walletAccount: EthereumAddressType,
+    web3: PropTypes.object.isRequired,
+    networkType: PropTypes.string.isRequired,
   }
 
   state = {
     ...INITIAL_DAO_STATE,
     connected: false,
     fatalError: null,
     identityIntent: null,
-    selectorNetworks: SELECTOR_NETWORKS,
     transactionBag: null,
     signatureBag: null,
-    web3: getWeb3(web3Providers.default),
     wrapper: null,
   }
 
@@ -99,7 +86,7 @@ class App extends React.Component {
     }
 
     // Only the default, because the app can work without the wallet
-    pollConnectivity([web3Providers.default], connected => {
+    pollConnectivity([this.props.web3], connected => {
       this.setState({ connected })
     })
   }
@@ -127,7 +114,12 @@ class App extends React.Component {
   }
 
   updateDao(orgAddress) {
-    const { clientTheme, walletAccount } = this.props
+    const {
+      clientTheme,
+      walletAccount,
+      web3,
+      networkType: walletNetwork,
+    } = this.props
 
     // Cancel the subscriptions / unload the wrapper
     if (this.state.wrapper) {
@@ -152,19 +144,18 @@ class App extends React.Component {
 
     log('Init DAO', orgAddress)
     initWrapper(orgAddress, {
+      networkType: walletNetwork,
       guiStyle: {
         appearance: clientTheme.appearance,
         theme: clientTheme.theme,
       },
-      provider: web3Providers.default,
+      provider: web3,
       walletAccount,
-      onDaoAddress: ({ address, domain, createdAt }) => {
-        log('dao address', address)
-        log('dao domain', domain)
-        log('dao createdAt', createdAt)
-        const hideMigrateBanner = getMigrateBannerKey(address)
+      onDaoAddress: ({ networkType, address, domain, createdAt }) => {
+        log('dao', networkType, address, domain, createdAt)
+        const hideMigrateBanner = getMigrateBannerKey(networkType, address)
         const showMigrateBanner =
-          enableMigrateBanner &&
+          enableMigrateBanner(networkType) &&
           createdAt &&
           !localStorage.getItem(hideMigrateBanner) &&
           createdAt < MIGRATION_LAST_DATE_ELIGIBLE_TIMESTAMP
@@ -321,7 +312,7 @@ class App extends React.Component {
   }
 
   render() {
-    const { theme, routing } = this.props
+    const { theme, routing, web3 } = this.props
     const {
       apps,
       appIdentifiers,
@@ -334,10 +325,8 @@ class App extends React.Component {
       permissions,
       permissionsLoading,
       repos,
-      selectorNetworks,
       transactionBag,
       signatureBag,
-      web3,
       wrapper,
       showMigrateBanner,
     } = this.state
@@ -428,10 +417,7 @@ class App extends React.Component {
                           </div>
                         </PermissionsProvider>
 
-                        <Onboarding
-                          selectorNetworks={selectorNetworks}
-                          web3={web3}
-                        />
+                        <Onboarding web3={web3} />
 
                         <GlobalPreferences
                           apps={appsWithIdentifiers}
@@ -451,11 +437,18 @@ class App extends React.Component {
 }
 
 export default function AppHooksWrapper(props) {
-  const { account, connected, networkName, providerInfo } = useWallet()
+  const {
+    account,
+    connected,
+    networkType,
+    networkName,
+    providerInfo,
+  } = useWallet()
 
   const theme = useTheme()
   const clientTheme = useClientTheme()
   const routing = useRouting()
+  const web3 = getWeb3Provider(networkType)
 
   // analytics
   useEffect(() => {
@@ -475,6 +468,8 @@ export default function AppHooksWrapper(props) {
       routing={routing}
       theme={theme}
       walletAccount={account}
+      networkType={networkType}
+      web3={web3}
       {...props}
     />
   )

diff --git a/src/apps/AppCenter/AppCenter.js b/src/apps/AppCenter/AppCenter.js
@@ -14,6 +14,7 @@ import InstalledApps from './InstalledApps/InstalledApps'
 import DiscoverApps from './DiscoverApps/DiscoverApps'
 import UpgradeAppPanel from './UpgradeAppPanel'
 import EmptyBlock from './EmptyBlock'
+import { useWallet } from '../../wallet'
 
 const SCREENS = [
   { id: 'installed', label: 'Installed apps' },
@@ -69,7 +70,7 @@ function useUpgradeApp(wrapper, kernelAddress, { onDone }) {
 }
 
 // Extend, cache and return the repos
-function getExtendedRepos(appInstanceGroups, repos) {
+function getExtendedRepos(appInstanceGroups, repos, networkType) {
   return repos.map(repo => {
     const appGroup = appInstanceGroups.find(
       appGroup => appGroup.appId === repo.appId
@@ -79,7 +80,7 @@ function getExtendedRepos(appInstanceGroups, repos) {
     return {
       ...repo,
       // Use latest version’s assets
-      baseUrl: repoBaseUrl(repo.appId, repo.latestVersion),
+      baseUrl: repoBaseUrl(repo.appId, repo.latestVersion, networkType),
       instances: instances || [],
       name: name || '',
       repoName: repoName || '',
@@ -104,10 +105,11 @@ const AppCenter = React.memo(function AppCenter({
   wrapper,
 }) {
   const [upgradePanelOpened, setUpgradePanelOpened] = useState(false)
+  const { networkType } = useWallet()
 
   const extendedRepos = useMemo(
-    () => getExtendedRepos(appInstanceGroups, repos),
-    [appInstanceGroups, repos]
+    () => getExtendedRepos(appInstanceGroups, repos, networkType),
+    [appInstanceGroups, repos, networkType]
   )
 
   const { screen, openedRepo } = getLocation(localPath, extendedRepos)

diff --git a/src/apps/AppCenter/InstalledApps/AppContent.js b/src/apps/AppCenter/InstalledApps/AppContent.js
@@ -19,14 +19,15 @@ import ContentMarkdown from './ContentMarkdown'
 import LocalIdentityBadge from '../../../components/IdentityBadge/LocalIdentityBadge'
 import { RepoType } from '../../../prop-types'
 import { useRepoDetails } from '../../../hooks'
-import { network } from '../../../environment'
 import Screenshots from '../Screenshots'
 import { sanitizeCodeRepositoryUrl } from '../../../url-utils'
+import { useWallet } from '../../../wallet'
 
 const AppContent = React.memo(
   ({ repo, repoVersions, onRequestUpgrade, onClose }) => {
     const theme = useTheme()
     const { layoutName } = useLayout()
+    const { networkType } = useWallet()
     const {
       name,
       instances,
@@ -196,7 +197,7 @@ const AppContent = React.memo(
                           <Link
                             external
                             href={blockExplorerUrl('address', repoAddress, {
-                              networkType: network.type,
+                              networkType,
                             })}
                           >
                             {repoName}

diff --git a/src/apps/Organization/Organization.js b/src/apps/Organization/Organization.js
@@ -16,9 +16,8 @@ import {
 } from '@aragon/ui'
 import LocalIdentityBadge from '../../components/IdentityBadge/LocalIdentityBadge'
 import appIds from '../../known-app-ids'
-import { network } from '../../environment'
 import { getProviderString } from '../../ethereum-providers'
-import { sanitizeNetworkType } from '../../network-config'
+import { sanitizeNetworkType, getNetworkConfig } from '../../network-config'
 import { AppType, DaoAddressType } from '../../prop-types'
 import { useRouting, ARAGONID_ENS_DOMAIN } from '../../routing'
 import airdrop, { testTokensEnabled } from '../../testnet/airdrop'
@@ -39,6 +38,8 @@ const Organization = React.memo(function Organization({
   const { mode } = useRouting()
   const { orgAddress } = mode
 
+  const { settings: network } = getNetworkConfig(wallet.networkType)
+
   const handleDepositTestTokens = useCallback(() => {
     const finance = apps.find(app => app.appId === appIds.Finance)
     if (finance && finance.proxyAddress) {
@@ -97,15 +98,14 @@ const Organization = React.memo(function Organization({
       `project=${projectName}&` +
       `contracts=${contractsQueryParameter}`
     )
-  }, [apps, appsLoading, orgAddress])
+  }, [apps, appsLoading, orgAddress, network.chainId])
 
   const apmApps = apps.filter(app => !app.isAragonOsInternalApp)
   const hasAgentApp = apps.some(app => app.appId === appIds.Agent)
   const hasFinanceApp = apps.some(app => app.appId === appIds.Finance)
   const checksummedDaoAddr =
     daoAddress.address && toChecksumAddress(daoAddress.address)
-  const enableTransactions =
-    wallet.connected && wallet.networkType === network.type
+  const enableTransactions = wallet.connected && wallet.account
   const isMainnet = network.type === 'main'
   const shortAddresses = layoutName !== 'large'