Merge pull request #893 from dacadeorg/ft/change-walletConnect-package

Ft/change wallet connect package

Author: musayann

package.json

@@ -21,7 +21,7 @@
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@walletconnect/web3-provider": "^1.8.0",
+    "@web3modal/wagmi": "^3.2.0",
     "axios": "^1.3.4",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
@@ -75,6 +75,8 @@
     "unified": "^10.1.2",
     "unist-util-visit": "^2.0.0",
     "use-onclickoutside": "^0.4.1",
+    "viem": "^1.18.1",
+    "wagmi": "^1.4.5",
     "web3": "^1.10.0",
     "web3modal": "^1.9.12"
   },

public/locales/bg/common.json

@@ -276,6 +276,8 @@
   "profile.wallet.payout.request": "Payout request",
   "profile.wallet.payout.amount": "Amount",
   "profile.wallet.payout.send": "Send request",
+  "profile.achievement.mintable": "Монетен",
+  "profile.achievement.mintable-na": "Монетен N/A",
   "faq.title": "FAQ",
   "faq.subtitle": "If you have any additional questions or need help visit our ",
   "faq.discord": "Discord server.",

public/locales/en/common.json

@@ -305,6 +305,7 @@
   "profile.achievement.token-id": "Token id",
   "profile.achievement.ipfs-metadata": "Metadata",
   "profile.achievement.mintable": "Mintable",
+  "profile.achievement.mintable-na": "Mintable N/A",
   "profile.connect.wallet.button": "Connect wallet",
   "faq.title": "FAQ",
   "faq.subtitle": "If you have any additional questions or need help visit our ",

public/locales/es/common.json

@@ -277,6 +277,8 @@
   "profile.wallet.payout.request": "Solicite su pago",
   "profile.wallet.payout.amount": "Cantidad",
   "profile.wallet.payout.send": "Envíe una solicitud",
+  "profile.achievement.mintable": "Acuñable",
+  "profile.achievement.mintable-na": "Acuñable N/A",
   "faq.title": "FAQ",
   "faq.subtitle": "Si tiene más preguntas o necesita ayuda visite nuestro ",
   "faq.discord": "servidor de Discord.",

public/locales/hr/common.json

@@ -276,6 +276,8 @@
   "profile.wallet.payout.request": "Payout request",
   "profile.wallet.payout.amount": "Amount",
   "profile.wallet.payout.send": "Send request",
+  "profile.achievement.mintable": "Mintable",
+  "profile.achievement.mintable-na": "Mintable N/A",
   "faq.title": "FAQ",
   "faq.subtitle": "If you have any additional questions or need help visit our ",
   "faq.discord": "Discord server.",

src/components/cards/Achievement.tsx

@@ -1,8 +1,11 @@
 /* eslint-disable @next/next/no-img-element */
-import { ReactElement } from "react";
+import { ReactElement, useMemo } from "react";
 
 import Link from "next/link";
 import { Certificate } from "@/types/certificate";
+import { useTranslation } from "next-i18next";
+import classNames from "classnames";
+import Checkmark from "@/icons/checkMarkIcon.svg";
 
 /**
  * Achievement card props interface
@@ -16,9 +19,22 @@ interface AchievementCardProps {
   minting?: boolean;
 }
 
-export default function AchievementCard({ data }: AchievementCardProps): ReactElement {
-  
- 
+export default function AchievementCard({ data, minting }: AchievementCardProps): ReactElement {
+  const { t } = useTranslation();
+  const mintable = useMemo(() => {
+    return data?.community?.can_mint_certificates;
+  }, [data]);
+
+  const minted = useMemo(() => {
+    return !!data?.minting?.tx && mintable;
+  }, [data, mintable]);
+
+  const badgeText = useMemo(() => {
+    if (!mintable) {
+      return t("profile.achievement.mintable-na");
+    }
+    return !minted && !minting ? t("profile.achievement.mintable") : "NFT";
+  }, [mintable, minted, t]);
 
   const isNotCertificateIcon: boolean = !!data?.metadata?.image?.includes("/img/certificates/");
 
@@ -28,26 +44,28 @@ export default function AchievementCard({ data }: AchievementCardProps): ReactEl
         <div className="flex flex-col h-full">
           <div className="flex-grow w-full mx-auto text-left px-7">
             <div className="min-h-2xs">
-            <div
-              className={`mx-auto relative rounded-full mb-5 ${!isNotCertificateIcon ? "w-20 h-20" : ""}`}
-              style={{ backgroundColor: isNotCertificateIcon ? data?.community.colors?.cover?.background || data?.community.colors.primary : "" }}
-            >
-              <img src={data?.metadata?.image} alt="achievement" />
-            </div>
+              <div
+                className={`mx-auto relative rounded-full mb-5 ${!isNotCertificateIcon ? "w-20 h-20" : ""}`}
+                style={{ backgroundColor: isNotCertificateIcon ? data?.community.colors?.cover?.background || data?.community.colors.primary : "" }}
+              >
+                <img src={data?.metadata?.image} alt="achievement" />
+              </div>
             </div>
-            
-             <p className="text-sm font-medium text-center pb-5">{data?.metadata?.name}</p>
+
+            <p className="text-sm font-medium text-center pb-5">{data?.metadata?.name}</p>
           </div>
 
-          {/* <div
-            className={classNames("rounded-b-3.5xl border-t border-solid mt-4 py-4 bort flex flex-none justify-center items-center space-x-1", {
-              "bg-gray-100": minted,
-              invisible: !mintable,
-            })}
-          >
-            {minted && <Checkmark />}
-            <p className="text-base font-normal text-center">{badgeText}</p>
-          </div> */}
+          {minting && (
+            <div
+              className={classNames("rounded-b-3.5xl border-t border-solid mt-4 py-4 bort flex flex-none justify-center items-center space-x-1", {
+                "bg-gray-100": minted,
+                invisible: !mintable,
+              })}
+            >
+              {minted && <Checkmark />}
+              <p className="text-base font-normal text-center">{badgeText}</p>
+            </div>
+          )}
         </div>
       </Link>
     </div>

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

@@ -7,6 +7,10 @@ import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 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;
@@ -18,6 +22,7 @@ type Props = {
   error: CustomError | undefined | null;
   clearError: () => void;
   show: boolean;
+  openEditAddress: () => void;
 };
 
 /**
@@ -49,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,
@@ -58,11 +63,14 @@ export default function WalletAddressChangeForm({ connectionMethod, currentAddre
     setValue,
     formState: { errors },
   } = useForm<FormValues>();
+  const dispatch = useDispatch();
 
   const web3Adrress = useSelector((state) => state.web3Wallet.address);
 
   const address = watch("address");
 
+  const { walletConnectAddress } = useWalletConnect();
+
   const isMatchingTheExistingOne = useMemo(() => {
     if (!address || !currentAddress) return false;
     return currentAddress?.toLocaleLowerCase() === address?.toLocaleLowerCase();
@@ -88,6 +96,23 @@ export default function WalletAddressChangeForm({ connectionMethod, currentAddre
     if (!show) clear();
   }, [show]);
 
+  useEffect(() => {
+    if (connectionMethod === "wallet") {
+      setValue("address", walletConnectAddress || "");
+      dispatch(setWeb3Address(walletConnectAddress));
+    }
+  }, [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

@@ -4,7 +4,6 @@ import { useDispatch } from "@/hooks/useTypedDispatch";
 import { useMultiSelector } from "@/hooks/useTypedSelector";
 import { IRootState } from "@/store";
 import { clearCurrentWallet } from "@/store/feature/user/wallets.slice";
-import { connectWallet, disconnectWallet } from "@/store/feature/wallet.slice";
 import { fetchAllWallets, updateWallet } from "@/store/services/wallets.service";
 import { CustomError } from "@/types/error";
 import { Wallet } from "@/types/wallet";
@@ -13,7 +12,7 @@ import { ReactElement, useEffect, useMemo, useState } from "react";
 import WalletAddressChangeForm from "./_partials/Form";
 import { WalletInfo } from "./_partials/Info";
 import SelectWalletConnectionMethod from "./_partials/SelectConnectionMethod";
-
+import useWalletConnect from "@/hooks/useWalletConnect";
 
 /**
  * Interface for the edit profile props
@@ -46,7 +45,7 @@ export default function EditProfile({ show, wallet, onClose }: EditProfileProps)
   const [showWalletConnectionMethod, setShowWalletConnectionMethod] = useState(false);
   const [connectionMethod, setConnectionMethod] = useState("");
 
-
+  const { openWeb3Modal, isConnected, disconnectWallet } = useWalletConnect();
   const dispatch = useDispatch();
 
   const closeModal = () => {
@@ -91,12 +90,12 @@ export default function EditProfile({ show, wallet, onClose }: EditProfileProps)
   };
 
   const disconnect = async () => {
-    await dispatch(disconnectWallet());
+    await disconnectWallet();
   };
 
   const connect = async () => {
     try {
-      await dispatch(connectWallet());
+      isConnected ? disconnect() : openWeb3Modal();
       setShowEditAddress(true);
     } catch (e) {
       console.log(e);
@@ -137,7 +136,6 @@ export default function EditProfile({ show, wallet, onClose }: EditProfileProps)
     return wallets?.require_wallet_connection || false;
   }, [wallets?.require_wallet_connection]);
 
-
   const isWalletConnected = useMemo(() => {
     return requireWalletConnection && !!wallet?.address;
   }, [requireWalletConnection, wallet?.address]);
@@ -146,26 +144,32 @@ export default function EditProfile({ show, wallet, onClose }: EditProfileProps)
     return Boolean(showEditAddress && !showWalletConnectionMethod && connectionMethod);
   }, [connectionMethod, showEditAddress, showWalletConnectionMethod]);
 
-
   useEffect(() => {
     if (!currentAddress) {
-     setShowWalletConnectionMethod(true);
+      setShowWalletConnectionMethod(true);
     }
   }, [currentAddress]);
 
-
   return (
     <Modal show={show} onClose={closeModal}>
       <div className="px-6">
         <WalletHeader wallet={wallet} />
         {showWalletConnectionMethod && <SelectWalletConnectionMethod enableWalletConnection={requireWalletConnection} onSelect={setWalletConnectionMethod} />}
 
-        {!showWalletConnectionMethod && (
-          <WalletInfo address={currentAddress} connectionMethod={connectionMethod} onClick={openEditAddress} />
-        )}
-
+        {!showWalletConnectionMethod && <WalletInfo address={currentAddress} connectionMethod={connectionMethod} onClick={openEditAddress} />}
       </div>
-      <WalletAddressChangeForm show={showForm} onSave={onSave} currentAddress={currentAddress} loading={loading} error={error} token={wallet?.token} connectionMethod={connectionMethod} closeModal={closeModal} clearError={() => setError(null)} />
+      <WalletAddressChangeForm
+        show={showForm}
+        onSave={onSave}
+        currentAddress={currentAddress}
+        loading={loading}
+        error={error}
+        token={wallet?.token}
+        connectionMethod={connectionMethod}
+        closeModal={closeModal}
+        clearError={() => setError(null)}
+        openEditAddress={openEditAddress}
+      />
     </Modal>
   );
 }