Bug: Deployment on unknown networks, cached provider isn't deleted (#165

) * fix error when connecting to network with no name defined * fix cached provider * Update package.json version * fix duplicated destructuring for networkid * fix usage of chainId everywhere
safe-global · May 13, 2021 · 61e2726 · 61e2726
1 parent 3cf6dbc
commit 61e2726
Show file tree

Hide file tree

Showing 15 changed files with 73 additions and 78 deletions.
diff --git a/packages/safe-apps-developer-ui/package.json b/packages/safe-apps-developer-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-apps-developer-ui",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": true,
   "dependencies": {
     "@gnosis.pm/safe-apps-react-sdk": "2.3.0",

diff --git a/packages/safe-apps-developer-ui/src/api/eth.ts b/packages/safe-apps-developer-ui/src/api/eth.ts
@@ -1,9 +1,25 @@
 import { ethers } from 'ethers';
 
+enum ETHEREUM_NETWORK_TO_CHAIN_ID {
+  MAINNET = 1,
+  MORDEN = 62,
+  ROPSTEN = 3,
+  RINKEBY = 4,
+  GOERLI = 5,
+  KOVAN = 42,
+  XDAI = 100,
+  ENERGY_WEB_CHAIN = 246,
+  VOLTA = 73799,
+  UNKNOWN = 0,
+  LOCAL = 4447,
+}
+
+const getNetworkNameByChainId = (id: number): string => ETHEREUM_NETWORK_TO_CHAIN_ID[id] ?? 'UNKNOWN';
+
 const getEthBalance = async (provider: ethers.providers.BaseProvider, address: string): Promise<ethers.BigNumber> => {
   const balance = provider.getBalance(address);
 
   return balance;
 };
 
-export { getEthBalance };
+export { getEthBalance, getNetworkNameByChainId };
diff --git a/packages/safe-apps-developer-ui/src/api/provider.ts b/packages/safe-apps-developer-ui/src/api/provider.ts
@@ -19,20 +19,6 @@ const WALLET_PROVIDER = {
   UNKNOWN: 'UNKNOWN',
 };
 
-enum ETHEREUM_NETWORK_TO_ID {
-  MAINNET = 1,
-  MORDEN = 2,
-  ROPSTEN = 3,
-  RINKEBY = 4,
-  GOERLI = 5,
-  KOVAN = 42,
-  XDAI = 100,
-  ENERGY_WEB_CHAIN = 246,
-  VOLTA = 73799,
-  UNKNOWN = 0,
-  LOCAL = 4447,
-}
-
 const providerOptions: IProviderOptions = {
   walletconnect: {
     package: WalletConnectProvider,
@@ -50,4 +36,8 @@ const connectToProvider = async (): Promise<any> => {
   return provider;
 };
 
-export { WALLET_PROVIDER, ETHEREUM_NETWORK_TO_ID, connectToProvider };
+const getCachedProvider = (): string => web3Modal.cachedProvider;
+
+const clearCachedProvider = (): void => web3Modal.clearCachedProvider();
+
+export { WALLET_PROVIDER, connectToProvider, getCachedProvider, clearCachedProvider };
diff --git a/packages/safe-apps-developer-ui/src/components/Header/components/NetworkLabel.tsx b/packages/safe-apps-developer-ui/src/components/Header/components/NetworkLabel.tsx
@@ -3,8 +3,8 @@ import { ReactElement } from 'react';
 import Typography from '@material-ui/core/Typography';
 
 import { border, md, screenSm, sm, xs, fontColor } from 'src/styles/variables';
-import { ETHEREUM_NETWORK_TO_ID } from 'src/api/provider';
 import { upperFirst } from 'src/utils/strings';
+import { getNetworkNameByChainId } from 'src/api/eth';
 
 const useStyles = makeStyles({
   container: {
@@ -30,16 +30,16 @@ const useStyles = makeStyles({
 });
 
 type Props = {
-  networkId: number;
+  chainId: number;
 };
 
-const NetworkLabel = ({ networkId }: Props): ReactElement => {
+const NetworkLabel = ({ chainId }: Props): ReactElement => {
   const classes = useStyles();
 
   return (
     <div className={classes.container}>
       <Typography className={classes.text} variant="body2">
-        {upperFirst(ETHEREUM_NETWORK_TO_ID[networkId])}
+        {upperFirst(getNetworkNameByChainId(chainId))}
       </Typography>
     </div>
   );

diff --git a/...pps-developer-ui/src/components/Header/components/ProviderDetailsDropdown/UserDetails.tsx b/...pps-developer-ui/src/components/Header/components/ProviderDetailsDropdown/UserDetails.tsx
@@ -11,14 +11,13 @@ import { Hairline } from 'src/components/Layout/Hairline';
 import { Img } from 'src/components/Layout/Img';
 import { background, connected as connectedBg, lg, md, sm, warning, xs } from 'src/styles/variables';
 import { upperFirst, textShortener } from 'src/utils/strings';
-import { ETHEREUM_NETWORK_TO_ID } from 'src/api/provider';
 
-// import { getExplorerInfo } from 'src/config';
 import { KeyRing } from 'src/components/Header/components/KeyRing';
 import { CircleDot } from '../CircleDot';
 import { createStyles } from '@material-ui/core';
 
 import WalletIcon from '../../assets/wallet.svg';
+import { getNetworkNameByChainId } from 'src/api/eth';
 
 const styles = createStyles({
   container: {
@@ -83,7 +82,7 @@ const styles = createStyles({
 
 type Props = {
   connected: boolean;
-  networkId: number;
+  chainId: number;
   onDisconnect: () => void;
   openDashboard?: () => void | null;
   providerName?: string;
@@ -94,7 +93,7 @@ const useStyles = makeStyles(styles);
 
 export const UserDetails = ({
   connected,
-  networkId,
+  chainId,
   onDisconnect,
   providerName = 'UNKNOWN',
   userAddress,
@@ -133,7 +132,7 @@ export const UserDetails = ({
         <Typography className={classes.labels}>Network</Typography>
         <Spacer />
         <CircleDot className={classes.logo} />
-        <Typography className={classes.labels}>{upperFirst(ETHEREUM_NETWORK_TO_ID[networkId])}</Typography>
+        <Typography className={classes.labels}>{upperFirst(getNetworkNameByChainId(chainId))}</Typography>
       </Grid>
       <Hairline margin="xs" />
       <Grid container className={classes.disconnect}>

diff --git a/...fe-apps-developer-ui/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx b/...fe-apps-developer-ui/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
@@ -40,10 +40,10 @@ const useStyles = makeStyles({
 interface ProviderInfoProps {
   connected: boolean;
   userAddress?: string;
-  networkId: number;
+  chainId: number;
 }
 
-const ProviderInfo = ({ connected, userAddress, networkId }: ProviderInfoProps): React.ReactElement => {
+const ProviderInfo = ({ connected, userAddress, chainId }: ProviderInfoProps): React.ReactElement => {
   const classes = useStyles();
 
   return (
@@ -57,7 +57,7 @@ const ProviderInfo = ({ connected, userAddress, networkId }: ProviderInfoProps):
           <Typography variant="body2">Connection Error</Typography>
         )}
       </Grid>
-      <NetworkLabel networkId={networkId} />
+      <NetworkLabel chainId={chainId} />
     </>
   );
 };

diff --git a/packages/safe-apps-developer-ui/src/components/Header/index.tsx b/packages/safe-apps-developer-ui/src/components/Header/index.tsx
@@ -10,7 +10,7 @@ import ProviderDisconnected from './components/ProviderInfo/ProviderDisconnected
 const HeaderComponent = (): React.ReactElement => {
   const userAddress = useProviderStore((state) => state.account);
   const loaded = useProviderStore((state) => state.loaded);
-  const networkId = useProviderStore((state) => state.networkId);
+  const chainId = useProviderStore((state) => state.chainId);
   const disconnectFromProvider = useProviderStore((state) => state.disconnect);
 
   if (!loaded) {
@@ -19,11 +19,11 @@ const HeaderComponent = (): React.ReactElement => {
 
   return (
     <Layout
-      providerInfo={<ProviderAccessible networkId={networkId} connected={loaded} userAddress={userAddress} />}
+      providerInfo={<ProviderAccessible chainId={chainId} connected={loaded} userAddress={userAddress} />}
       dropdownContent={
         <UserDetails
           connected={loaded}
-          networkId={networkId}
+          chainId={chainId}
           onDisconnect={disconnectFromProvider}
           userAddress={userAddress}
         />

diff --git a/packages/safe-apps-developer-ui/src/components/Sidebar/index.tsx b/packages/safe-apps-developer-ui/src/components/Sidebar/index.tsx
@@ -5,12 +5,12 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
-import { ETHEREUM_NETWORK_TO_ID } from 'src/api/provider';
 import { useProviderStore } from 'src/stores/provider';
 import { upperFirst } from 'src/utils/strings';
 import { connected, headerHeight, sm } from 'src/styles/variables';
 import { SafeHeader } from './SafeHeader';
 import AppsIcon from './apps.svg';
+import { getNetworkNameByChainId } from 'src/api/eth';
 
 const SidebarContainer = styled.aside`
   width: 200px;
@@ -60,13 +60,13 @@ const ListItemLink = (props: ListItemLinkProps): React.ReactElement => {
 };
 
 const Sidebar = (): React.ReactElement => {
-  const networkId = useProviderStore((state) => state.networkId);
+  const chainId = useProviderStore((state) => state.chainId);
   const params = useParams<{ safeAddress: string }>();
   const { url } = useRouteMatch();
 
   return (
     <SidebarContainer>
-      <SafeHeader network={upperFirst(ETHEREUM_NETWORK_TO_ID[networkId])} safeAddress={params.safeAddress} />
+      <SafeHeader network={upperFirst(getNetworkNameByChainId(chainId))} safeAddress={params.safeAddress} />
       <Line />
       <List component="nav" aria-label="main safe features navigation">
         <ListItemLink

diff --git a/packages/safe-apps-developer-ui/src/components/pages/safes/apps/AppIframe.tsx b/packages/safe-apps-developer-ui/src/components/pages/safes/apps/AppIframe.tsx
@@ -10,9 +10,9 @@ import {
 } from '@gnosis.pm/safe-apps-sdk';
 import { useProviderStore } from 'src/stores/provider';
 import { TransactionModal } from 'src/components/pages/safes/apps/TransactionModal';
-import { ETHEREUM_NETWORK_TO_ID } from 'src/api/provider';
 import { SafeApp } from 'src/types/apps';
 import { useAppCommunicator } from './communicator';
+import { getNetworkNameByChainId } from 'src/api/eth';
 
 const SIframe = styled.iframe`
   border: none;
@@ -30,15 +30,16 @@ const AppIframe = ({ url, app }: { url: string; app: SafeApp }): React.ReactElem
   const iframeRef = React.useRef<HTMLIFrameElement>(null);
   const communicator = useAppCommunicator(iframeRef, app);
   const [proposedTxs, setProposedTxs] = React.useState<ProposedTxs | null>(null);
-  const [networkId, provider] = useProviderStore((state) => [state.networkId, state.provider]);
+  const [chainId, provider] = useProviderStore((state) => [state.chainId, state.provider]);
   const {
     params: { safeAddress },
   } = useRouteMatch<{ safeAddress: string }>();
 
   React.useEffect(() => {
     communicator?.on('getSafeInfo', () => ({
       safeAddress,
-      network: ETHEREUM_NETWORK_TO_ID[networkId],
+      network: getNetworkNameByChainId(chainId),
+      chainId,
     }));
 
     communicator?.on('sendTransactions', (msg) => {
@@ -66,7 +67,7 @@ const AppIframe = ({ url, app }: { url: string; app: SafeApp }): React.ReactElem
         return err;
       }
     });
-  }, [communicator, safeAddress, networkId, provider]);
+  }, [communicator, safeAddress, provider, chainId]);
 
   return (
     <>

diff --git a/packages/safe-apps-developer-ui/src/components/pages/safes/apps/TransactionModal/index.tsx b/packages/safe-apps-developer-ui/src/components/pages/safes/apps/TransactionModal/index.tsx
@@ -83,12 +83,12 @@ const TransactionModal = ({
   const classes = useStyles();
   const ethBalance = useEthBalance(safeAddress, true);
   const isMultiSend = txs.length > 1;
-  const [signer, networkId, userAddress] = useProviderStore((state) => [
+  const [signer, chainId, userAddress] = useProviderStore((state) => [
     state.signer as ethers.providers.JsonRpcSigner,
-    state.networkId,
+    state.chainId,
     state.account,
   ]);
-  const multiSendAddress = useContractsStore((state) => state.contracts[networkId].multiSend);
+  const multiSendAddress = useContractsStore((state) => state.contracts[chainId].multiSend);
   const [openedTransaction, setOpenedTransaction] = React.useState<Transaction | null>(null);
 
   const txRecipient = React.useMemo(

diff --git a/packages/safe-apps-developer-ui/src/index.tsx b/packages/safe-apps-developer-ui/src/index.tsx
@@ -7,10 +7,10 @@ import { theme as styledTheme } from 'src/styles/styled-theme';
 import GlobalStyle from 'src/styles/global';
 import reportWebVitals from './reportWebVitals';
 import App from './App';
-import { getFromLocalStorage } from './utils/localStorage';
 import { useProviderStore } from './stores/provider';
+import { getCachedProvider } from './api/provider';
 
-if (getFromLocalStorage('WEB3_CONNECT_CACHED_PROVIDER')) {
+if (getCachedProvider()) {
   useProviderStore.getState().connectProvider();
 }
 

diff --git a/packages/safe-apps-developer-ui/src/pages/Welcome.tsx b/packages/safe-apps-developer-ui/src/pages/Welcome.tsx
@@ -50,14 +50,14 @@ const useStyles = makeStyles({
 const WelcomePage = (): React.ReactElement => {
   const classes = useStyles();
   const [safeDeploying, setSafeDeploying] = React.useState(false);
-  const [providerLoaded, networkId, signer, account] = useProviderStore((state) => [
+  const [providerLoaded, chainId, signer, account] = useProviderStore((state) => [
     state.loaded,
-    state.networkId,
+    state.chainId,
     state.signer,
     state.account,
   ]);
   const [contracts, saveContracts] = useContractsStore(
-    React.useCallback((state) => [state.contracts[networkId], state.saveContracts], [networkId]),
+    React.useCallback((state) => [state.contracts[chainId], state.saveContracts], [chainId]),
   );
   const history = useHistory();
 
@@ -71,14 +71,14 @@ const WelcomePage = (): React.ReactElement => {
       ]);
       console.info('Deployed contracts: ', { proxyFactory, fallbackHandler, masterCopy, multiSend });
 
-      saveContracts(networkId, {
+      saveContracts(chainId, {
         fallbackHandler: fallbackHandler.address,
         proxyFactory: proxyFactory.address,
         masterCopy: masterCopy.address,
         multiSend: multiSend.address,
       });
     }
-  }, [networkId, saveContracts, signer]);
+  }, [chainId, saveContracts, signer]);
 
   const deploySafe = React.useCallback(async () => {
     if (signer) {

diff --git a/packages/safe-apps-developer-ui/src/stores/contracts.ts b/packages/safe-apps-developer-ui/src/stores/contracts.ts
@@ -1,5 +1,4 @@
 import create from 'zustand';
-import { ETHEREUM_NETWORK_TO_ID } from 'src/api/provider';
 import { getFromLocalStorage, saveToStorage } from 'src/utils/localStorage';
 
 type ContractNames = 'fallbackHandler' | 'proxyFactory' | 'masterCopy' | 'multiSend';
@@ -9,17 +8,17 @@ type ContractsMap = Record<string, DeployedContracts>;
 
 type ContractsState = {
   contracts: ContractsMap;
-  saveContracts: (networkId: ETHEREUM_NETWORK_TO_ID, deployedContracts: DeployedContracts) => void;
+  saveContracts: (chainId: number, deployedContracts: DeployedContracts) => void;
 };
 
 const CONTRACTS_STORE_KEY = 'contracts_state_v1';
 
 const useContractsStore = create<ContractsState>((set, get) => ({
   contracts: getFromLocalStorage(CONTRACTS_STORE_KEY) || {},
-  saveContracts(networkId: ETHEREUM_NETWORK_TO_ID, deployedContracts: DeployedContracts) {
+  saveContracts(chainId: number, deployedContracts: DeployedContracts) {
     const { contracts } = get();
 
-    const newContracts = { ...contracts, [networkId]: deployedContracts };
+    const newContracts = { ...contracts, [chainId]: deployedContracts };
     saveToStorage(CONTRACTS_STORE_KEY, newContracts);
 
     return set({ contracts: newContracts });