feat: reshowedi editaddress when user cancels modal, add metamask extension and adjust styles

Author: serapieTuyishime

src/components/sections/profile/modals/EditAddress/_partials/Form.tsx

@@ -10,6 +10,7 @@ import EditAdressFooter from "./Footer";
 import { useDispatch } from "@/hooks/useTypedDispatch";
 import { setWeb3Address } from "@/store/feature/wallet.slice";
 import useWalletConnect from "@/hooks/useWalletConnect";
+import { modal } from "@/config/Web3Modal";
 
 type Props = {
   connectionMethod: string;
@@ -21,6 +22,7 @@ type Props = {
   error: CustomError | undefined | null;
   clearError: () => void;
   show: boolean;
+  openEditAddress: () => void;
 };
 
 /**
@@ -52,7 +54,7 @@ interface FormValues {
  * @param {boolean} param0.show
  * @returns {*}
  */
-export default function WalletAddressChangeForm({ connectionMethod, currentAddress, token, closeModal, onSave, loading, error, clearError, show }: Props) {
+export default function WalletAddressChangeForm({ connectionMethod, currentAddress, token, closeModal, onSave, loading, error, clearError, show, openEditAddress }: Props) {
   const { t } = useTranslation();
   const {
     watch,
@@ -101,6 +103,16 @@ export default function WalletAddressChangeForm({ connectionMethod, currentAddre
     }
   }, [walletConnectAddress]);
 
+  useEffect(() => {
+    modal.subscribeEvents(({ data }) => {
+      if (data.event === "MODAL_CLOSE" && !address) {
+        openEditAddress();
+      } else if (data.event === "CONNECT_ERROR") {
+        modal.close();
+      }
+    });
+  }, []);
+
   return (
     <form className="flex flex-col" onSubmit={handleSubmit(save)}>
       {show && (

src/components/sections/profile/modals/EditAddress/index.tsx

@@ -168,6 +168,7 @@ export default function EditProfile({ show, wallet, onClose }: EditProfileProps)
         connectionMethod={connectionMethod}
         closeModal={closeModal}
         clearError={() => setError(null)}
+        openEditAddress={openEditAddress}
       />
     </Modal>
   );

src/components/sections/profile/modals/MintCertificate.tsx

@@ -159,7 +159,7 @@ export default function MintCertificate({ show, close }: { show: boolean; wallet
 
   return (
     <Modal show={show} size="medium" onClose={onClose}>
-      <div className="px-6 pt-6">
+      <div className="px-6">
         <div className="pb-7">
           <p className="text-.5xl font-medium leading-snug">{achievement?.metadata?.name}</p>
         </div>
@@ -202,7 +202,7 @@ export default function MintCertificate({ show, close }: { show: boolean; wallet
             )}
           </div>
         </div>
-        <div className="flex items-center justify-between my-8">
+        <div className="flex items-center justify-between mt-8">
           <a className="text-sm font-medium cursor-pointer text-primary" onClick={onClose}>
             Close
           </a>

src/config/Web3Modal.ts

@@ -1,7 +1,7 @@
-import { createWeb3Modal } from "@web3modal/wagmi/react";
+import { EIP6963Connector, createWeb3Modal } from "@web3modal/wagmi/react";
 import { publicProvider } from "wagmi/providers/public";
 import { configureChains, createConfig } from "wagmi";
-import { polygonMumbai } from "wagmi/chains";
+import { polygonMumbai, mainnet } from "wagmi/chains";
 import { InjectedConnector } from "wagmi/connectors/injected";
 import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 import { walletConnectProvider } from "@web3modal/wagmi";
@@ -12,17 +12,21 @@ const metadata = {
   name: "Dacade",
   description: "Peer to peer learning platform",
   url: "https://dacade.org/",
-  icons: ["https://asset.cloudinary.com/dl1vj7yr9/8b5ea898819e51aef029c7b7971f1168"],
+  icons: ["https://dacade.org/fav-icons/apple-touch-icon.png"],
 };
 
-const { chains, publicClient } = configureChains([polygonMumbai], [walletConnectProvider({ projectId }), publicProvider()]);
+const { chains, publicClient } = configureChains([polygonMumbai, mainnet], [walletConnectProvider({ projectId }), publicProvider()]);
 export const config = createConfig({
   autoConnect: true,
-  connectors: [new WalletConnectConnector({ chains, options: { projectId, showQrModal: false, metadata } }), new InjectedConnector({ chains, options: { shimDisconnect: true } })],
+  connectors: [
+    new WalletConnectConnector({ chains, options: { projectId, showQrModal: false, metadata } }),
+    new EIP6963Connector({ chains }),
+    new InjectedConnector({ chains, options: { shimDisconnect: true } }),
+  ],
   publicClient,
 });
 
-createWeb3Modal({
+export const modal = createWeb3Modal({
   wagmiConfig: config,
   projectId,
   chains,