Merge pull request #250 from dcrescimbeni/fix/disconnect-wallet

Fix: disconnect wallet

src/App.tsx

@@ -10,17 +10,12 @@ import { ProposalTypes } from 'components/ProposalTypes';
 import CreateProposalPage from 'Modules/Guilds/pages/CreateProposal';
 import { LandingPage } from 'Modules/Guilds/pages/LandingPage';
 import NotFound from 'Modules/Guilds/pages/NotFound';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { GuildsDarkTheme } from 'components/theme';
 import CreateDiscussionPage from 'Modules/Guilds/pages/CreateDiscussion';
-import { useNetwork } from 'wagmi';
 
 const App = () => {
-  const {
-    chain: { network },
-  } = useNetwork();
-
   return (
     <ThemeProvider theme={GuildsDarkTheme}>
       <TransactionsProvider>
@@ -29,7 +24,6 @@ const App = () => {
           <Header />
           <Container>
             <Routes>
-              <Route path="/" element={<Navigate replace to={network} />} />
               <Route path="/:chainName" element={<LandingPage />} />
               <Route path="/:chainName/:guildId" element={<GuildsPage />} />
               <Route

src/Modules/Guilds/pages/NotFound.tsx

@@ -3,16 +3,22 @@ import { Result, ResultState } from 'components/Result';
 import { UnstyledLink } from 'components/primitives/Links';
 import { FiArrowLeft } from 'react-icons/fi';
 
+import { useTranslation } from 'react-i18next';
+import { useTypedParams } from 'Modules/Guilds/Hooks/useTypedParams';
+
 const NotFound: React.FC = () => {
+  const { chainName } = useTypedParams();
+  const { t } = useTranslation();
+
   return (
     <Result
       state={ResultState.ERROR}
-      title="That page doesn't exist."
-      subtitle="Make sure you typed the correct address."
+      title={t('pageNotExist')}
+      subtitle={t('makeSureCorrectAddress')}
       extra={
-        <UnstyledLink to={`/`}>
+        <UnstyledLink to={`/${chainName}`}>
           <IconButton iconLeft>
-            <FiArrowLeft /> Take me home
+            <FiArrowLeft /> {t('takeMeHome')}
           </IconButton>
         </UnstyledLink>
       }

src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { useNetwork } from 'wagmi';
 import { NetworkButton } from '../NetworkButton';
 import { WalletButton } from '../WalletButton';
 import {
@@ -12,11 +13,15 @@ import {
 const Header = () => {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const { chain } = useNetwork();
 
   return (
     <HeaderWrapper as="header">
       <HeaderContainer>
-        <ClickableHeading onClick={() => navigate(`/`)} size={2}>
+        <ClickableHeading
+          onClick={() => navigate(`/${chain.network}`)}
+          size={2}
+        >
           <strong>{t('guilds.guilds')}</strong>
         </ClickableHeading>
         <MenuItems>

src/components/Web3Modals/EnsureReadOnlyConnection/index.tsx

@@ -1,16 +1,14 @@
 import { READ_ONLY_CONNECTOR_ID } from 'provider/ReadOnlyConnector';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import { useAccount, useConnect, useNetwork } from 'wagmi';
 
 const EnsureReadOnlyConnection = () => {
-  const { chains } = useNetwork();
-  const defaultChain = useMemo(() => {
-    if (chains?.length === 0) return null;
+  const { chain } = useNetwork();
 
-    // Localhost is only available on development environments.
-    // const localhost = chains.find(chain => chain.id === 1337);
-    return chains[0];
-  }, [chains]);
+  const [latestWorkingNetwork, setLatestWorkingNetwork] = useState(null);
+  useEffect(() => {
+    if (chain) setLatestWorkingNetwork(chain);
+  }, [chain]);
 
   const { connector, isConnecting, isReconnecting } = useAccount();
   const { connect, connectors } = useConnect();
@@ -22,7 +20,10 @@ const EnsureReadOnlyConnection = () => {
       );
       if (readOnlyConnector) {
         console.log('Initiating read only connection');
-        connect({ connector: readOnlyConnector, chainId: defaultChain?.id });
+        connect({
+          connector: readOnlyConnector,
+          chainId: latestWorkingNetwork?.id,
+        });
       }
     }
   }, [
@@ -31,9 +32,8 @@ const EnsureReadOnlyConnection = () => {
     isReconnecting,
     connector,
     connectors,
-    defaultChain,
+    latestWorkingNetwork,
   ]);
-
   return null;
 };
 

src/contexts/Guilds/guildAvailability.tsx

@@ -10,6 +10,7 @@ import { getNetworkById, getChainIcon } from 'utils';
 import { useTypedParams } from 'Modules/Guilds/Hooks/useTypedParams';
 import { useNetwork } from 'wagmi';
 import useSwitchNetwork from 'hooks/Guilds/web3/useSwitchNetwork';
+import { useTranslation } from 'react-i18next';
 
 interface ContractAvailability {
   [chainId: number]: boolean;
@@ -36,11 +37,12 @@ export const GuildAvailabilityContext =
 // TODO: Refactor this to not use the MultichainContext.
 // We should remove the MultichainContext as we no longer need it.
 const GuildAvailabilityProvider = ({ children }) => {
-  const { guildId } = useTypedParams();
+  const { guildId, chainName } = useTypedParams();
   const { providers: multichainProviders } = useContext(MultichainContext);
   const [availability, setAvailability] = useState<ContractAvailability>({});
   const { chain: currentChain } = useNetwork();
   const { switchNetwork } = useSwitchNetwork();
+  const { t } = useTranslation();
 
   const currentChainId = useMemo(() => currentChain?.id, [currentChain]);
 
@@ -84,11 +86,11 @@ const GuildAvailabilityProvider = ({ children }) => {
     return (
       <Result
         state={ResultState.ERROR}
-        title="Guild not available."
+        title={t('guildNotAvailable')}
         subtitle={
           Object.values(availability).includes(true)
-            ? 'This guild is not available on this network.'
-            : 'No guild exists on this address.'
+            ? t('guildNotAvailableOnThisNetwork')
+            : t('noGuildInThisAddress')
         }
         extra={
           Object.values(availability).includes(true) ? (
@@ -118,9 +120,9 @@ const GuildAvailabilityProvider = ({ children }) => {
               </div>
             </>
           ) : (
-            <UnstyledLink to={`/`}>
+            <UnstyledLink to={`/${chainName}`}>
               <IconButton iconLeft>
-                <FiArrowLeft /> Take me home
+                <FiArrowLeft /> {t('takeMeHome')}
               </IconButton>
             </UnstyledLink>
           )

src/locales/en/translation.json

@@ -216,5 +216,11 @@
   "none": "None",
   "expandLinesOfCode": "Expand {{numLines}} lines of code",
   "noGuildsRegistered": "No guilds registered on this network",
+  "guildNotAvailable": "Guild not available",
+  "guildNotAvailableOnThisNetwork": "This guild is not available on this network",
+  "noGuildInThisAddress": "No guild exists on this address",
+  "takeMeHome": "Take me home",
+  "pageNotExist": "That page doesn't exist",
+  "makeSureCorrectAddress": "Make sure you typed the correct address",
   "stakeTokens": "Stake {{token}} tokens"
 }