Refactor home page (#3)

Author: Dhaiwat10

templates/default/pages/index.js

@@ -1,21 +1,25 @@
 import { useConnect, useAccount } from 'wagmi';
 
 const Home = () => {
-  const [{ data, error }, connect] = useConnect();
+  const [{ data: connectData, error: connectError }, connect] = useConnect();
+  const { connected } = connectData;
   const [{ data: accountData }, disconnect] = useAccount({
     fetchEns: true,
   });
-  const { connected } = data;
 
   if (connected) {
     return (
       <div className='py-24 text-center'>
         <p className='text-2xl font-bold'>
           Welcome {accountData?.ens?.name || accountData?.address}
         </p>
-        <button className='mx-auto mt-10 rounded bg-slate-200 p-2' onClick={disconnect}>
+        <button
+          className='mx-auto mt-10 rounded bg-slate-200 p-2'
+          onClick={disconnect}
+        >
           Disconnect
         </button>
+        <InfoSection />
       </div>
     );
   }
@@ -25,7 +29,8 @@ const Home = () => {
       <h1 className='text-2xl font-bold'>Welcome to create-web3-frontend</h1>
       <p className='mt-10'>Connect your wallet:</p>
       <div className='mt-5 flex justify-center gap-6'>
-        {data.connectors.map((x) => (
+        {/* connectData.connectors contains the list of available 'connectors' like Metamask, WalletConnect, etc */}
+        {connectData.connectors.map((x) => (
           <button
             className='rounded bg-slate-200 p-2'
             key={x.id}
@@ -37,9 +42,38 @@ const Home = () => {
         ))}
       </div>
 
-      {error && (
-        <p className='text-red-500'>{error?.message ?? 'Failed to connect'}</p>
+      {connectError && (
+        <p className='text-red-500'>
+          {connectError?.message ?? 'Failed to connect'}
+        </p>
       )}
+
+      <InfoSection />
+    </div>
+  );
+};
+
+const InfoSection = () => {
+  return (
+    <div className='mt-10'>
+      <hr className='my-4' />
+      <h2 className='text-xl font-bold'>If you need help</h2>
+      <div className='flex flex-col gap-2 mt-2'>
+        <a
+          href='https://wagmi.sh'
+          target='_blank'
+          className='underline text-gray-600'
+        >
+          Link to wagmi docs
+        </a>
+        <a
+          href='https://github.com/dhaiwat10/create-web3-frontend'
+          target='_blank'
+          className='underline text-gray-600'
+        >
+          Open an issue on Github
+        </a>
+      </div>
     </div>
   );
 };

templates/typescript/pages/index.tsx

@@ -1,13 +1,13 @@
-import type { NextPage } from 'next';
-import { useCallback } from 'react';
-import { useAccount, useConnect, useNetwork, useSignMessage } from 'wagmi';
+import { NextPage } from 'next';
+import { FC } from 'react';
+import { useConnect, useAccount } from 'wagmi';
 
 const Home: NextPage = () => {
-  const [{ data, error }, connect] = useConnect();
+  const [{ data: connectData, error: connectError }, connect] = useConnect();
+  const { connected } = connectData;
   const [{ data: accountData }, disconnect] = useAccount({
     fetchEns: true,
   });
-  const { connected } = data;
 
   if (connected) {
     return (
@@ -21,6 +21,7 @@ const Home: NextPage = () => {
         >
           Disconnect
         </button>
+        <InfoSection />
       </div>
     );
   }
@@ -30,7 +31,8 @@ const Home: NextPage = () => {
       <h1 className='text-2xl font-bold'>Welcome to create-web3-frontend</h1>
       <p className='mt-10'>Connect your wallet:</p>
       <div className='mt-5 flex justify-center gap-6'>
-        {data.connectors.map((x) => (
+        {/* connectData.connectors contains the list of available 'connectors' like Metamask, WalletConnect, etc */}
+        {connectData.connectors.map((x) => (
           <button
             className='rounded bg-slate-200 p-2'
             key={x.id}
@@ -42,9 +44,38 @@ const Home: NextPage = () => {
         ))}
       </div>
 
-      {error && (
-        <p className='text-red-500'>{error?.message ?? 'Failed to connect'}</p>
+      {connectError && (
+        <p className='text-red-500'>
+          {connectError?.message ?? 'Failed to connect'}
+        </p>
       )}
+
+      <InfoSection />
+    </div>
+  );
+};
+
+const InfoSection: FC = () => {
+  return (
+    <div className='mt-10'>
+      <hr className='my-4' />
+      <h2 className='text-xl font-bold'>If you need help</h2>
+      <div className='flex flex-col gap-2 mt-2'>
+        <a
+          href='https://wagmi.sh'
+          target='_blank'
+          className='underline text-gray-600'
+        >
+          Link to wagmi docs
+        </a>
+        <a
+          href='https://github.com/dhaiwat10/create-web3-frontend'
+          target='_blank'
+          className='underline text-gray-600'
+        >
+          Open an issue on Github
+        </a>
+      </div>
     </div>
   );
 };