Merge pull request #81 from ongama-team/ft-logout-implementation

Ft logout implementation

.env.development

@@ -7,5 +7,6 @@ NEXT_PUBLIC_CHAIN_WEB_SOCKET_URL=wss://ws-nd-801-935-229.p2pify.com/3b49b33557a7
 NEXT_PUBLIC_CHAIN_ID=80001
 NEXT_PUBLIC_WEB3_NODE_RPC=https://matic-mumbai.chainstacklabs.com
 NEXT_PUBLIC_IPFS_AUTH=7100c075ab2d434bb74187580c4bb49b
+NEXT_PUBLIC_WEB3_STORAGE_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDM1MzdCN0VkNGI1NGEzZTVjMjRiODUyOTA0ODM4OWI5ZDkxNWZBRWMiLCJpc3MiOiJ3ZWIzLXN0b3JhZ2UiLCJpYXQiOjE2NjExNjA0MzkyODMsIm5hbWUiOiJvbmdhbWFfc3RvcmFnZV90b2tlbiJ9.pt1xVsrxcpDrght2zSHreMqQE_3XDsVYioZpGXjLsxM
 NEXT_PUBLIC_STORAGE_FEE_RECEIVER_ADRESS=0x34bA628174007b82f5CF3449b435bB871518cD75
 NEXT_PUBLIC_STORAGE_FEE=0.0001

.env.sample

@@ -1,11 +1,12 @@
 NEXT_PUBLIC_SUBGRAPH_NAME=
 NEXT_PUBLIC_BACKEND_SERVICE_URL=https://ongama-nft-api.herokuapp.com/v1
-MINT_CONTRACT_ADDRESS=0xB08347548b9DC9B1211D37913CE0f305FF477AcE
-DEPLOYER_ADDRESS=0x8182677790c76d5a3CC8298d9643Cf8D4566C564
-SUBGRAPH_GRAPHQL_ENDPOINT=https://api.thegraph.com/subgraphs/name/verdotte/ongama
-CHAIN_WEB_SOCKET_URL=wss://ws-nd-801-935-229.p2pify.com/3b49b33557a73c552bae4a15c1843439
-CHAIN_ID=80001
-WEB3_NODE_RPC=https://matic-mumbai.chainstacklabs.com
-IPFS_AUTH=7100c075ab2d434bb74187580c4bb49b
-STORAGE_FEE_RECEIVER_ADRESS=0xdBc8997C1273bD8bc5af15f16df26C4FA03c0852
-STORAGE_FEE=0.0001
+NEXT_PUBLIC_MINT_CONTRACT_ADDRESS=0xb08347548b9dc9b1211d37913ce0f305ff477ace
+NEXT_PUBLIC_DEPLOYER_ADDRESS=0x8182677790c76d5a3CC8298d9643Cf8D4566C564
+NEXT_PUBLIC_SUBGRAPH_GRAPHQL_ENDPOINT=https://api.thegraph.com/subgraphs/name/verdotte/ongama
+NEXT_PUBLIC_CHAIN_WEB_SOCKET_URL=wss://ws-nd-801-935-229.p2pify.com/3b49b33557a73c552bae4a15c1843439
+NEXT_PUBLIC_CHAIN_ID=80001
+NEXT_PUBLIC_WEB3_NODE_RPC=https://matic-mumbai.chainstacklabs.com
+NEXT_PUBLIC_IPFS_AUTH=7100c075ab2d434bb74187580c4bb49b
+NEXT_PUBLIC_WEB3_STORAGE_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDM1MzdCN0VkNGI1NGEzZTVjMjRiODUyOTA0ODM4OWI5ZDkxNWZBRWMiLCJpc3MiOiJ3ZWIzLXN0b3JhZ2UiLCJpYXQiOjE2NjExNjA0MzkyODMsIm5hbWUiOiJvbmdhbWFfc3RvcmFnZV90b2tlbiJ9.pt1xVsrxcpDrght2zSHreMqQE_3XDsVYioZpGXjLsxM
+NEXT_PUBLIC_STORAGE_FEE_RECEIVER_ADRESS=0x34bA628174007b82f5CF3449b435bB871518cD75
+NEXT_PUBLIC_STORAGE_FEE=0.0001

components/CreateNftPage/index.tsx

@@ -16,7 +16,6 @@ import ChooseCollection from "./ChooseCollection";
 import NftPreview from "./NftPreview";
 import WalletInfoCard from "@components/modules/__modules__/Card/WalletInfoCard";
 import ProfileMenu from "@components/modules/__secured/ProfileMenu";
-import { saveFileWithIpfs } from "@lib/ipfsClient";
 import { generateTokenUri } from "@lib/Utils";
 import { web3Actions, Web3Service } from "@lib/web3";
 import CreateNftProcessModal, {
@@ -28,6 +27,7 @@ import { backendApiService } from "@lib/services/BackendApiService";
 import LocalStorage from "@lib/helper/LocalStorage";
 import UploadFileProcessing from "@components/modules/__modules__/Card/UploadFileProcessing";
 import UploadFileErrorCard from "@components/modules/__modules__/Card/UploadFileErrorCard";
+import { saveFileWithWeb3Storage } from "@lib/web3StorageClient";
 
 const CreateNftPage = () => {
   const [nftData, setNftData] = useState({
@@ -82,11 +82,11 @@ const CreateNftPage = () => {
     inputFileRef.current?.click();
   };
 
-  const uploadFileOnIPFS = async (inputFiles) => {
+  const uploadFileOnWeb3Storage = async (inputFiles) => {
     if (inputFiles) {
       setUploadFileProcessing(true);
 
-      const fileUrl = await saveFileWithIpfs(inputFiles);
+      const fileUrl = await saveFileWithWeb3Storage(inputFiles);
 
       setUploadFileProcessing(false);
       if (fileUrl) {
@@ -113,7 +113,7 @@ const CreateNftPage = () => {
     setIsImage((files[0].type as string).includes("image"));
     const filePreviewUrl = URL.createObjectURL(files[0]);
     try {
-      const uploadResult = await uploadFileOnIPFS(files);
+      const uploadResult = await uploadFileOnWeb3Storage(files);
 
       if (uploadResult) setPreviewUrl(filePreviewUrl);
     } catch (err) {
@@ -126,6 +126,7 @@ const CreateNftPage = () => {
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
     const { value, name } = event.target;
+
     setNftData((prevData) => ({ ...prevData, [name]: value }));
   };
 

components/EditProfilePage/index.tsx

@@ -5,12 +5,13 @@ import Header from "@components/modules/__noAuth/Header";
 import { useState, ChangeEvent, useEffect } from "react";
 import UpdateStatusModal from "./updateStatusModal";
 import ProfileMenu from "@components/modules/__secured/ProfileMenu";
-import ipfsClient, { saveFileWithIpfs } from "@lib/ipfsClient";
-import { VSpinner } from "@components/modules/__modules__/_vectors";
 import { Web3Service } from "@lib/web3";
 import { orderObject } from "@lib/Utils";
 import UploadFileProcessing from "@components/modules/__modules__/Card/UploadFileProcessing";
 import UploadFileErrorCard from "@components/modules/__modules__/Card/UploadFileErrorCard";
+import { saveFileWithWeb3Storage } from "@lib/web3StorageClient";
+import { useRecoilValue } from "recoil";
+import { currentAccountState } from "@lib/atoms";
 
 const EditProfile = () => {
   const [img, setImg] = useState<File | null>(null);
@@ -32,7 +33,11 @@ const EditProfile = () => {
   const [isWrongFileSize, setIsWrongFileSize] = useState(false);
   const [isUserAvaterUploading, setIsUserAvatarUploading] = useState(false);
   const [fileUploadingError, setFileUploadingError] = useState(false);
+
+  const userAccount = useRecoilValue(currentAccountState);
+
   const profilePlaceholder =
+    userAccount?.avatarUrl ||
     "https://lh3.googleusercontent.com/9KIL56q19B9i8BasJfTcVZFn7QOcvdtBqww5dgK5Zk5Mi5w4Ljekw0ibITpf6TBtGnyqcLTDNEEG9OpUC98aLukfcM9yXhSltJoe=w600";
 
   const checkFileSize = (file: FileList) => {
@@ -47,10 +52,13 @@ const EditProfile = () => {
     checkFileSize(files);
     setImg(files[0]);
     if (files.length === 0) return;
+
     const previewUrl = URL.createObjectURL(files[0]);
     setIsUserAvatarUploading(true);
-    const fileUrl = await saveFileWithIpfs(files);
+
+    const fileUrl = await saveFileWithWeb3Storage(files);
     setIsUserAvatarUploading(false);
+
     if (fileUrl) {
       setProfile({ ...profile, avatarUrl: fileUrl });
       setPreviewImgLink(previewUrl);
@@ -98,7 +106,7 @@ const EditProfile = () => {
           coverThumbnailUrl,
         })
       ),
-      walletAddress
+      walletAddress || userAccount?.walletAddress!
     );
 
     setIsStatusModal(true);

components/LandingPage/index.tsx

@@ -33,7 +33,7 @@ const LandingPage = () => {
   return (
     <>
       <Header />
-      <Presentation />
+      {/* <Presentation /> */}
       {/* <TopCollection /> */}
       <TopSellers />
       <HotCollections />

components/modules/__modules__/Card/AvatartAndCoverCard/index.tsx

@@ -2,12 +2,12 @@
 import UpdateStatusModal from "@components/EditProfilePage/updateStatusModal";
 import { currentAccountState } from "@lib/atoms";
 import LocalStorage from "@lib/helper/LocalStorage";
-import { saveFileWithIpfs } from "@lib/ipfsClient";
 import { UserAccount } from "@lib/models/UserAccount";
 import { NoCoverImg } from "@lib/Resources";
 import { backendApiService } from "@lib/services/BackendApiService";
 import { orderObject } from "@lib/Utils";
 import { Web3Service } from "@lib/web3";
+import { saveFileWithWeb3Storage } from "@lib/web3StorageClient";
 import { useRouter } from "next/router";
 import React, { useEffect, useRef, useState } from "react";
 import { useRecoilState } from "recoil";
@@ -77,7 +77,7 @@ const AvatarAndCoverCard = ({ isEditable, user }: IProps) => {
     setIsAddCover(false);
     setIsUpdateModal(!isUpdateModal);
     setIsUpdatePending(true);
-    const fileUrl = await saveFileWithIpfs(files);
+    const fileUrl = await saveFileWithWeb3Storage(files);
 
     if (fileUrl) {
       const signature = await getSignature(fileUrl);

components/modules/__noAuth/Header/Menu/index.tsx

@@ -10,11 +10,11 @@ interface IMenuListProps {
 }
 
 export const MenuList = ({ walletAddress, className }: IMenuListProps) => {
-  const [isWalletsDisplayed, setIsWalletsDisplayed] =
+  const [isWalletsModalDisplayed, setIsWalletsModalDisplayed] =
     useRecoilState(walletAtom);
 
-  const onDisplayWallets = () => {
-    setIsWalletsDisplayed(!isWalletsDisplayed);
+  const onDisplayWalletsModal = () => {
+    setIsWalletsModalDisplayed(!isWalletsModalDisplayed);
   };
 
   return (
@@ -31,7 +31,7 @@ export const MenuList = ({ walletAddress, className }: IMenuListProps) => {
         <li
           role="button"
           onKeyDown={() => null}
-          onClick={onDisplayWallets}
+          onClick={onDisplayWalletsModal}
           className="hidden  min-md:block min-lg:px-3 hover:text-black text-gray-500 hover:bg-gray-100 py-2 pl-2 rounded-md dark:text-gray-300 dark:hover:text-black transition-all cursor-pointer"
         >
           Sign in

components/modules/__noAuth/Header/index.tsx

@@ -29,7 +29,7 @@ import SwitchThemeButton from "./SwitchThemeButton";
 const Header = () => {
   const routes = useRouter();
   const [isMenuModal, setIsMenuModal] = useState(false);
-  const [isWalletsDisplayed, setIsWalletsDisplayed] =
+  const [isWalletsModalDisplayed, setIsWalletsModalDisplayed] =
     useRecoilState(walletAtom);
   const [currentAccount, setCurrentAccount] =
     useRecoilState(currentAccountState);
@@ -47,11 +47,11 @@ const Header = () => {
     setIsMenuModal(!isMenuModal);
   };
 
-  const toggleWallets = () => {
-    setIsWalletsDisplayed(!isWalletsDisplayed);
+  const toggleWalletsModal = () => {
+    setIsWalletsModalDisplayed(!isWalletsModalDisplayed);
   };
 
-  const onCreateNft = () => {
+  const onRedirectToCreateNftPage = () => {
     routes.push("/create");
   };
 
@@ -111,25 +111,32 @@ const Header = () => {
             <VSearch className="w-6 h-6" />
           </button>
           <button
-            onClick={onCreateNft}
+            onClick={onRedirectToCreateNftPage}
             className="border-none px-2 py-3 mx-1 w-20 font-bold rounded-full text-white transition-all duration-500 ease-in-out bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:from-blue-400 hover:to-blue-600 font-ibmPlexSans min-md:hidden"
           >
             Create
           </button>
           <button
-            onClick={toggleWallets}
+            onClick={toggleWalletsModal}
             className={`${address && "hidden"}
            border border-gray-300 transition-all duration-300 font-bold ease-in-out hover:border-gray-400 dark:text-white px-2 py-3 mx-1 w-20  rounded-full font-ibmPlexSans min-md:hidden`}
           >
             Sign in
           </button>
           <SwitchThemeButton />
-          <button
-            onClick={toggleMenuModal}
-            className="border border-gray-300 transition-all dark:text-white duration-300 ease-in-out hover:border-gray-400 px-3 py-3 mx-1 rounded-full min-md:block "
+          <ShowWidget
+            condition={
+              currentAccount?.walletAddress !== undefined ||
+              walletData.address !== ""
+            }
           >
-            <VMenu className="w-6 h-6" />
-          </button>
+            <button
+              onClick={toggleMenuModal}
+              className="border border-gray-300 transition-all dark:text-white duration-300 ease-in-out hover:border-gray-400 px-3 py-3 mx-1 rounded-full min-md:block "
+            >
+              <VMenu className="w-6 h-6" />
+            </button>
+          </ShowWidget>
           <div
             onClick={openProfileMenu}
             className={`${

components/modules/__noAuth/TopSellers/index.tsx

@@ -3,7 +3,7 @@ import AllTopSellers from "./AllTopSellers";
 
 const TopSellers = () => {
   return (
-    <div className="flex flex-col justify-center 2xl:w-[80%] xl:w-[85%] lg:w-[90%] md:w-[95%] mx-auto my-10">
+    <div className="flex flex-col justify-center 2xl:w-[80%] xl:w-[85%] lg:w-[90%] md:w-[95%] mx-auto pb-10 pt-24">
       <div className="font-bold text-xl text-black font-ibmPlexSans md:text-2xl lg:text-3xl">
         <span className="dark:text-white px-2">Top</span>
         <select

components/modules/__secured/ProfileMenu/index.tsx

@@ -12,6 +12,7 @@ import truncateAddress from "@lib/helper/truncateAddress";
 import { useRouter } from "next/router";
 import UserAvatarCard from "@components/modules/__modules__/Card/UserAvatarCard";
 import { UserAccount } from "@lib/models/UserAccount";
+import { web3Actions } from "@lib/web3";
 
 const ProfileMenu = () => {
   const currentAccount = useRecoilValue(currentAccountState);
@@ -34,6 +35,10 @@ const ProfileMenu = () => {
     setIsProfileMenu(!isProfileMenu);
   };
 
+  const onLogout = async () => {
+    await web3Actions.disconnectBrowserWallet();
+  };
+
   return (
     <div
       className={`${
@@ -87,6 +92,12 @@ const ProfileMenu = () => {
             </span>
           </button>
         </div>
+        <button
+          onClick={onLogout}
+          className="border rounded-xl py-3 hover:border-gray-400 font-bold transition-all"
+        >
+          Log out
+        </button>
       </div>
     </div>
   );

lib/web3/actions.ts

@@ -18,6 +18,11 @@ class Web3Actions {
     }
   }
 
+  public async disconnectBrowserWallet() {
+    LocalStorage.removeItem("ongama_signer_address");
+    window.location.href = "/";
+  }
+
   public async connectTrustOrConnectWallet() {
     let signer;
     try {

lib/web3/service.ts

@@ -17,7 +17,9 @@ class Web3Service {
     this.provider = new ethers.providers.JsonRpcProvider(
       CHAINS_ENV.polygon.nodeRPC
     );
-    this.web3Instance = new Web3(Web3.givenProvider || "http://localhost:8545");
+    this.web3Instance = new Web3(
+      Web3.givenProvider || this.provider || "http://localhost:8545"
+    );
   }
 
   public contract(chain: TChain = "polygon") {
@@ -77,11 +79,13 @@ class Web3Service {
     data: string,
     address: string
   ): Promise<SignResult | null> {
-    let signer: any;
     try {
       const web3 = this.web3Instance;
+
       const hashedData = web3.utils.sha3(data);
+
       const signature = await web3.eth.personal.sign(hashedData!, address, "");
+
       return {
         signature,
         data,

lib/web3StorageClient.ts

@@ -0,0 +1,19 @@
+import { Web3Storage } from "web3.storage";
+
+const storageClient = new Web3Storage({
+  token: `${process.env.NEXT_PUBLIC_WEB3_STORAGE_TOKEN}`,
+});
+
+export const saveFileWithWeb3Storage = async (file: FileList) => {
+  if (!file) return;
+
+  const fileIdenfier = await storageClient.put(file);
+
+  const retrieveFile = await storageClient.get(fileIdenfier);
+
+  if (!retrieveFile?.ok) throw new Error("Failed to retrieve File");
+
+  const storedFile = await retrieveFile.files();
+
+  return `https://${fileIdenfier}.ipfs.w3s.link/${storedFile[0].name}`;
+};