In this tutorial, we will go through the implementation of a NFTs marketplace that uses chaincerts endpoints for backend and React JS as a frontend. We will show how to create a new user, to set a basic login page, save a token on the browser to keep the user signed in, how to mint, transfer, list NFTs. Some knowledge and experience with React is required. The complete code can be found in [github](https://github.com/wejdeneHaouari/demo-martplace). ### Prerequisites - Node version 12 installed. - Clone the demo code found in [github](https://github.com/wejdeneHaouari/demo-martplace) in a location of your choice. ### Project structure First let's take a look at the demo project structure. ``` . ├── public ├── package.json └── src ├── assets │ ├── fonts │ │ └── aileron │ └── images │ ├── storeFront │ └── storeSettings | App.js | Index.js ├── components │ ├── Common │ │ └── Footer │ ├── CountDownTimer │ ├── Header │ ├── MartplaceHeader │ ├── MetaMask │ ├── Modal │ ├── PriceConvert │ ├── StoreClosed │ ├── StoreSettings │ └── UserProfile ├── constants └── containers ├── AdminChangePassword ├── AdminDelivery ├── AdminOrders ├── AdminWallet ├── Collection ├── CreateCert ├── Dashboard ├── LandingPage ├── logout ├── Marketplace │ ├── MarketplaceCollection │ ├── MarketplaceStore │ └── ViewCert ├── MarketplaceAuthentication ├── Orders ├── StoreSettings ├── UserPasswordChange ├── UserProfile ├── UserUpdatePasswordForm └── ViewCert ``` - Public: Contains static files such as index.html and images, which we don’t want to be processed by webpack. Files in this folder are copied and pasted as they are directly into the build folder. - src: Is the main folder, and contains the majority of the code. - package.json: Contains the scripts and dependencies required for the project. - Index.js: Is the file that will be called once the project is started. - App.js: Is the component that gets loaded under index.js. This file includes all of our available routes. - Assets folder: Contains images and fonts used in our project. - Constants: Contains variables used throughout the project. - Containers: Contains a set of folders, each folder groups files and components by feature. - components: Contains components that are reusable such as header and footer. ### Available endpoints The available endpoints can be divided to three groups depending on role: #### Owner / client: - /userSignup: Create a new client account. - /userVerifyEmail: Verify email by providing the code received by email. - /logout: Logout from the application and destroy cookies. - /userForgotPassword: Form to provide email to send reset password link. - /userResetPassword: Form to provide the new password. - /userLogin: Request bearer token and store it in cookie to be used through the application. #### client: - /marketplace/user/passwordUpdate: Change current password interface. - /user/profile: Check profile, update information, update profile picture and export default private key. - /marketplace/home: Check NFTs available for sale. - /marketplace/viewCert?id={}: Check all the information of an NFT, this interface is the most proper place to add your `Buy` button. - /marketplace/collection: Check all NFTs owned by the logged-in user. - /marketplace/collection/viewCert?id={}: Check all the information of an owned NFT. #### owner: - /marketplace/owner/change-password: Change current password interface. - /createCert: Create a new NFT by uploading the NFT file and entering the NFT information such as title, description, type, quantity, production year, date of issue, origin location, dimensions, traits and level. Once the NFT is created it will be uploaded to our aws server and IPFS. - /dashboard: Check all uploaded NFTs. Depending on the NFT status three buttons may appear: `mint` to mint an NFT to polygon blockchain this operation cost 1 dollar. `list` to put a minted NFT for sale, a pop-up will appear to specify the price. `Transfer` to transfer a minted NFT to another user, a pop-up will appear to specify the receiver email. - /viewCert?id={}: Check all the information of an NFT, depending on the NFT status, buttons will appear as described below. - /marketplaceSettings: Check current store settings such as store name, title, details, store open and end time. Also, this information can be updated using the same interface. ### Set the marketplace owner profile - The first step is to create a marketplace `owner` profile # to do add link to interface Next the account must be verified by clicking on the activation link received via email. As explained in previous tutorials, for the owner to mint NFTs the account must be activated. In order to mint NFT you must verify your account by sending an email to [info@app-scoop.com](info@app-scoop.com). Once your account is activated you can log in to your account to mint and transfer NFTs. ### Add money to wallet Minting and transferring NFTs to polygon blockchain requires cryptocurrency. But you don't have to worry about setting up a crypto wallet, chaincerts get you cover, as we will do it on your behalf. You just need to add money to your chaincerts wallet using this link [todo](). And for each transaction 1 dollar will be reduced from your chaincerts wallet. ### Setup & Run - Under constants folder edit `index.js` and specify the `username` of the marketplace owner, in our case the marketplace name is `nftShop`. - Go to `demo` repository and run `npm install`. - To run the project, under the `demo` repository run `npm start`. - In your favorite web browser, visit `http://localhost:3000` to access the application interface. ### Code explanation In this section, we will explain the most important code portion of the application. #### Signup We will go through the implementation of the signup page. The complete code for signup can be found under `containers/MarketplaceAuthentification/signup.js`. The sign-up page looks like the image bellow. It's mainly a form where users can input there information and submit it to the backend by calling `api/users/signup` endpoint. [![1.png](https://i.postimg.cc/j2cjsJQv/1.png)](https://postimg.cc/QKBDmCzW) We have used `Yup` library to validate the user inputs: ```` const validationSchema = Yup.object().shape({ firstName: Yup.string().required("First Name is required"), lastName: Yup.string().required("Last Name is required"), email: Yup.string() .required("Email is required") .email("Email is invalid"), password: Yup.string() .required("Password is required") .matches( /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/, "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character" ) .min(8, "Password must be at least 8 characters") .max(40, "Password must not exceed 40 characters"), confirmPassword: Yup.string() .required("Confirm Password is required") .oneOf([Yup.ref("password"), null], "Confirm Password does not match"), recaptcha: Yup.bool().oneOf([true], "Recaptcha is required"), }); ```` The validation schema is used in the form to make sure that user enter the correct format. To do so we use React hooks for form validation: ```` const { register, handleSubmit, formState: { errors }, } = useForm({ resolver: yupResolver(validationSchema), }); ```` Below is a portion of the form code, for each input we add another `div` to display errors. ````

{errors.firstName?.message}

```` The final part is to call chaincerts signup endpoint and provide the user information. If there is no error the user id will be stored in a cookie, and he will be redirected to the email verification page, otherwise an error will appear. ```` const onSubmit = (data) => { const options = { headers: { "content-type": "application/json", "Access-Control-Allow-Origin": "*", }, }; data.userRole = "client"; if (recaptchaValue) { axios .post(env.apiUrl + "api/users/signup", data, options) .then((res) => { const userid = res.data.data.id; cookies.set("userId", userid, { path: "/" }); history.push("/userVerifyEmail"); }) .catch((err) => { notify("loginError", err.response.data.msg); }); } else { notify("loginError", "Recaptcha is Required"); } }; ```` #### Verify Email We will go through the implementation of the verify email page. The complete code for email verification can be found under `containers/MarketplaceAuthentication/UserVerifyEmail.js`. The email verification page looks like the image below. It's mainly a form where users can input the code received by email after signing up and submit it to the backend by calling `api/users/confirm-verification-code` endpoint. [![2.png](https://i.postimg.cc/gcKgR2MT/2.png)](https://postimg.cc/BtX5f4fT) We have used the same method for validation and form as explained in signup: ```` const validationSchema = Yup.object().shape({ code: Yup.number() .required("Code is required") .typeError("you must specify a number"), }); const { register, handleSubmit, formState: { errors }, } = useForm({ resolver: yupResolver(validationSchema), }); ```` When the form is submitted, we call chaincerts to verify the code endpoint and provide the received code. If there is no error the user will be redirected to the login page, otherwise an error will appear. ```` const onSubmit = (data) => { if (recaptchaValue) { const userId = cookies.get("userId"); data.userId = userId; const options = { headers: { "content-type": "application/json", }, }; axios .post(env.apiUrl + "api/users/confirm-verification-code", data, options) .then((res) => { notify("forgotError", res.data.msg); history.push("/userLogin"); }).catch((err) => { notify("forgotError", "Incorrect Code "); }); }else { notify("forgotError", "Recaptcha is Required"); } }; ```` #### Forgot Password The complete code for forgetting password can be found under `containers/MarketplaceAuthentication/Forgot.js`. The page looks like the image below. It's mainly a form where users can input their email and submit it to the backend by calling `api/users/forgotPassword` endpoint to receive a reset link. [![3.png](https://i.postimg.cc/DyRFkg15/3.png)](https://postimg.cc/PPb01138) We used the same methodology of previous section for input validation and form creation: ```` const validationSchema = Yup.object().shape({ emailId: Yup.string() .required("Email is required") .email("Email is invalid"), }); const { register, handleSubmit, formState: { errors }, } = useForm({ resolver: yupResolver(validationSchema), }); ```` When the form is submitted, we call chaincerts, forget password endpoint and provide the received email. The user will receive an email that includes the reset link. ```` const onSubmit = (data) => { axios .post(env.apiUrl + "api/users/forgotPassword", data, options) .then((res) => { notify("success", res.data.msg); }) .catch((error) => { if (error.response) { // Request made and server responded notify("forgotError", error.response.data.msg); } else if (error.request) { // The request was made but no response was received notify("forgotError", error.message); } else { // Something happened in setting up the request that triggered an Error notify("forgotError", error.message); } }); }; ```` #### Reset password The complete code for reset password can be found under `containers/MarketplaceAuthentication/Reset.js`. The page looks like the image below. It's mainly a form where users can input their new password and submit it to the backend by calling `api/users/resetPassword`. [![4.png](https://i.postimg.cc/sfwZxzPH/4.png)](https://postimg.cc/F1kKC2B0) We have used the same method for form validation as before: ```` const validationSchema = Yup.object().shape({ upass: Yup.string() .required("Password is required") .matches( /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/, "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character" ) .min(8, "Password must be at least 8 characters") .max(40, "Password must not exceed 40 characters"), confirmPassword: Yup.string() .required("Confirm Password is required") .oneOf([Yup.ref("upass"), null], "Confirm Password does not match"), }); const { register, handleSubmit, formState: { errors }, } = useForm({ resolver: yupResolver(validationSchema), }); ```` When the form is submitted, we call chaincerts reset password endpoint and provides the token received in the reset link and the new password. If there is no token in the link it will not be possible to submit the request. If there is no error the user will be redirected to the login page. ```` const onSubmit = (data) => { delete data.confirmPassword; var loc = window.location.href; loc = loc.split("?"); loc = loc[1].split("token="); if (loc[1] === undefined || loc[1] === "undefined") { window.location = "/"; } data.rtoken = loc[1]; const options = { headers: { "content-type": "application/json", "Access-Control-Allow-Origin": "*", }, }; axios .post(env.apiUrl + "api/users/resetPassword", data, options) .then((res) => { history.push("/userLogin"); }) .catch((err) => { notify("loginError", err.response.data.msg); }); }; ```` #### Login The complete code for login can be found under `containers/MarketplaceAuthentication/Signin.js`. The page looks like the image below. It's mainly a form where users can input their email and password and submit it to the backend by calling `api/users/login`. [![5.png](https://i.postimg.cc/9FwNCCsZ/5.png)](https://postimg.cc/jLKhh0xS) We have used the same method for form validation as before: ```` const validationSchema = Yup.object().shape({ email: Yup.string().required("Email is required").email("Email is invalid"), password: Yup.string().required("Password is required"), recaptcha: Yup.bool().oneOf([true], "Recaptcha is required"), }); const { register, handleSubmit, formState: { errors }, } = useForm({ resolver: yupResolver(validationSchema), }); ```` Once the user is logged in we receive the user information and a bearer token in the response, this information is stored in cookies for later use. You can change the cookie method to any other method of your choice. When the form is submitted, we first delete the old cookies, then we call chaincerts login password endpoint and provide the email and password. If there is no error the user information will be stored in cookies, and then will be redirected to either client or owner dashboard page depending on or received role. Some details are omitted from the code snippet for clarity. If the email is not verified the user will be redirected to the verified email page. ```` const onSubmit = (data) => { if (recaptchaValue) { axios .post(env.apiUrl + "api/users/login", data, options) .then((res) => { if (res.data.status === false) { notify("loginError", res.data.msg); if (res.data.msg === "User email is Not Verified.") { const userid = res.data.data; cookies.set("userId", userid, { path: "/" }); history.push("/userVerifyEmail"); } } else { //remove cookies old data cookies.remove("response", { path: "/" }); ... sessionStorage.clear(); // add new cookies console.log(new Date(Date.now() + 3600)); console.log(res.data); cookies.set("response", res.data.token, { path: "/", expires: new Date(Moment().add(60, "m").format()), }); cookies.set("userToken", res.data.token, { path: "/", expires: new Date(Moment().add(60, "m").format()), }); cookies.set("userId", res.data.data.id, { path: "/" }); ... sessionStorage.setItem("newKey", 1); if (res.data.data.userRole === "owner") { history.push("/dashboard"); } else if (res.data.data.userRole === "client") { history.push("/marketplace/home"); } } }) .catch((err) => { if (err.response) { notify("loginError", err.response.data.msg); } }); } else { notify("loginError", "Recaptcha is Required"); } }; ```` #### Landing page The complete code for landing page can be found under `containers/LandingPage/LandingPage.js`. The page looks like the image below. When an owner creates an account he/she can specify the marketplace open and close date. If the marketplace is closed the clients cannot access the marketplace page. The store information such as title, description, logo, open and close date can be updated in the store setting page (will be presented in details later). [![7.png](https://i.postimg.cc/7PVdV8FV/7.png)](https://postimg.cc/RqWgS8V6) Once the page is loaded, a request is sent to chaincerts endpoint `getUserProfile` to receive the marketplace details using `useEffect` React hook. ```` useEffect(() => { getStoreLogoBanner(); }, []); const getStoreLogoBanner = () => { fetch( env.apiUrl + `api/users/getUserProfile?username=${env.username}`, requestOptions ) .then((response) => response.json()) .then((result) => { setStoreTitle(result.data.title); setStoreDesc(result.data.banner_details || "default store description"); setStoreEndingDate(result.data.store_ending_date); setStoreOpeningDate(result.data.store_opening_date); }) .catch((error) => console.log("error", error)); }; ```` We will then verify if the store is open, based on that condition either we show the store is closed or store is open. #### Marketplace The complete code for marketplace dashboard can be found under `containers/Marketplace/MarketplaceStore/index.js`. The page looks like the image below. In this page we can see the list of NFTs for sales and filter basing on price, type, traits and availability. [![6.png](https://i.postimg.cc/k4pkCx75/6.png)](https://postimg.cc/62CHL42s) We have a predefined list of traits for filtering that includes colors, shapes and background. You can change this list by modifying colors, shapes and background variables: ```` const colors = [ "Yellow", "Blue", "Pink", ... ]; const shapes = [ "Circle", "Sky", "Hat", ... ]; const background = [ "Waves", "Desert Land", "Sky", "River", "Sea", ... ]; ```` When the page is first loaded, we first call `getUserProfile` endpoint to make sure that the marketplace is open. Next we call `getForSaleCertificatesByUsername` to retrieve the NFTs that are for sale for the shop specified in the configuration. We have omitted some details in the code snippet for clarity. ```` // get store setting and NFT list on loading useEffect(() => { getStoreLogoBanner(); allHomeCerts(currentPage); }, []); // Get store setting const getStoreLogoBanner = () => { fetch( env.apiUrl + `api/users/getUserProfile?username=${env.username}`, requestOptions ) .then((response) => response.json()) .then((result) => { const date = new Date(); const offset = date.getTimezoneOffset() * 60000; let countdownTimestampMsOpening = Date.parse(result.data.store_opening_date) + offset; setStoreOpeningDate(countdownTimestampMsOpening); let countdownTimestampMsEnding = Date.parse(result.data.store_ending_date) + offset; setStoreEndingDate(countdownTimestampMsEnding); checkIsBetween(countdownTimestampMsOpening, countdownTimestampMsEnding); }) .catch((error) => console.log("error", error)); }; \\ Get NFTs for sale const allHomeCerts = (page) => { history.push("/marketplace/home?page=" + page); sessionStorage.setItem("filterskey", "1"); axios .get( env.apiUrl + getNftsbyUsername + `?username=${env.username}&page=${page}` ) .then((res) => { if (res.data.data.length > 0) { setcertificates(res.data.data); } setInitialcertificates(res.data.data); setTotalRecords(res.data.totalCert); }); }; ```` We have used the `useState` react hook to declare the `certificates` variable that holds the retrieved NFTs. This will help us with implementing the filtering and pagination functions. Whenever `certificates` variables change, the NFTs list will be updated automatically. ```` const [certificates, setcertificates] = useState([]); ```` Now let's move on to the second part of the marketplace implementation which is pagination, filtering and sorting. In this demo, there are four options available: sort by price, filter by type, filter by traits and filter by availability. To make sure that we maintain the filter on pagination, we store a variable in the session store named `filterkey`. For each filter we assign a number, and when the variable that contains the current page changes, `callFunOnKey` function will be invoced automaticly using `useEffect` hook. In this function we check which filter is selected and call chaincerts endpoints accordingly. ```` useEffect(() => { callFunOnKey(); }, [currentPage]); const callFunOnKey = () => { var checkKey = sessionStorage.getItem("filterskey"); if (checkKey === "1") { allHomeCerts(currentPage); } else if (checkKey === "2") { handlePriceChange(currentOrder, true, currentPage, true); } else if (checkKey === "3") { handleTypeChange(currentOrder, true, currentPage, true); } else if (checkKey === "4") { handleTraitChange(currentOrder, true, currentPage, true); } else if (checkKey === "5") { if (document.getElementById("order-sold").checked) { handleAvailChange("sold", true, currentPage, true); } else if (document.getElementById("order-available").checked) { handleAvailChange("available", true, currentPage, true); } } else { window.history.replaceState(null, null, "#"); allHomeCerts(currentPage); } }; ```` The implementation of each filter is similar, so we will only go into details of sort by price functionality. [![9.png](https://i.postimg.cc/SK1M689h/9.png)](https://postimg.cc/06mjxzZW) First we have implemented `handlePriceChange` function that takes as an arguments the price order (ascending or descending), a boolean that indicated if this function is called by clicking on the pagination button while selecting a price order (in this case we don't change the select boxes), the current page number and if the selected checkbox is activated or not. If the box is not activated then we retrieve all the NFTs in the default order by calling the `allHomeCerts` function. In the other case we call `sortForSaleCertificates40` endpoint and provide the selected order and page number. ```` const handlePriceChange = (order, isPagination, page, active) => { if (!page) page = 1; sessionStorage.setItem("filterskey", "2"); setCurrentPage(page); setCurrentOrder(order); // box is unchecked if (!active) { allHomeCerts(currentPage); return; } else if (!isPagination) { if (order == "ascending") { document.getElementById("order-descending").checked = false; } else { document.getElementById("order-ascending").checked = false; } } axios .get( env.apiUrl + `api/users/sortForSaleCertificates40?username=${env.username}&order=${order}&page=${page}`, headers ) .then((res) => { console.log("resultArray", res.data); if (res.data.data.length > 0) { setcertificates(res.data.data); } setTotalRecords(res.data.totalCert); }); }; ```` In the HTML side, the price checkbox are linked to the `handlePriceChange` as following: ```` ```` The same logic is used to implement the other filters. #### View a single NFT The complete code for viewing a single NFT page can be found under `containers/Marketplace/ViewCert/index.js`. The page looks like the image below. [![10.png](https://i.postimg.cc/NFzCcnyz/10.png)](https://postimg.cc/5Q8S5nSB) When the page is first loaded, we first call the `getUserProfile` endpoint to make sure that the marketplace is open, similar to the landing page. Next we get id of the NFT from the url: ```` const ids = window.location.href.split("?id=")[1]; ```` Next we call `getFilesById` endpoint and provide the id of the image to get the NFT details. Once the response is received, the NFT is stored in a state variable, and the events history is stored in another state variable `certArray` for an easy display. ```` useEffect(() => { axios .post(env.apiUrl + `api/users/getFilesById`, imgId, certheaders) .then((res) => { setcerticateArray(res.data.data); const certArray = res.data.data; certArray.events.map((item) => { if (item.type == "Creation") { setContactAddress(item.contract_address); settokenId(item.token_id); } }); setImageExt(res.data.data.imageName.split(".").pop()); }) .catch((error) => { if (error.response) { if (error.response.status === 403) { Cookies.remove("response"); sessionStorage.clear(); notify("loginError", "Token is expired. Please try to login again"); } else { notify("loginError", "Something went wrong"); } } }); }, []); ```` #### Profile The complete code for profile can be found under `containers/UserProfile/UserProfileContainer.js` and `containers/UserProfile/UserProfile.js`. The page looks like the image below. [![12.png](https://i.postimg.cc/2SxSt7mb/12.png)](https://postimg.cc/bZsPDbZp) Using this interface, clients can update their personal information such as first name, last name and email. Also, they can upload a profile picture. When the page is first loaded, we retrieve the current information of the logged-in user from the cookie and display them into the input boxes: ```` First Name setFirstName(e.target.value)}> ```` We have used state value to store the updated personal information: ```` const [newFirstName, setFirstName] = useState(""); const [newLastName, setLastName] = useState(""); const [profilePicture, setProfilePicture] = useState(""); ```` When the user clicks on the update changes button, the chaincerts endpoint `changeDetails` is called to store the new information, if the endpoint returns a successful response the information stored in the cookie are updated. If the user changes the profile picture the endpoint `updateProfile` is also invoked. ```` const updateFirstAndLastName = (changeFirstname, changeLastName) => { const data = { userId: userId, firstName: changeFirstname, lastName: changeLastName, }; axios .post(env.apiUrl + "api/users/changeDetails", data, headers) .then((res) => { if (res.data.status === false) { notify("loginError", res.data.msg); } else { cookies.remove("firstname", { path: "/" }); cookies.set("firstname", changeFirstname, { path: "/" }); cookies.remove("lastname", { path: "/" }); cookies.set("lastname", changeLastName, { path: "/" }); toast(res.data.msg, { onClose: () => window.location.reload(true), }); } }) .catch((err) => { console.log(err); if (err.response) { notify("loginError", err.response.data.msg); } }); }; const updateUserProfile = () => { if (newFirstName && checkVoidString(newLastName)) { console.log(lastname); updateFirstAndLastName(newFirstName, lastname); } if (!newFirstName && newLastName) { updateFirstAndLastName(firstname, newLastName); } if (newFirstName && newLastName) { updateFirstAndLastName(newFirstName, newLastName); } if (profilePicture) { updateProfilePictureOnClick(); } }; ```` The next part of the user profile is update email, when the user click on update email button a new form will apear the user can enter his new email and password for extra security. [![13.png](https://i.postimg.cc/8s843rMc/13.png)](https://postimg.cc/5Q38QyPW) When the user click on `update`, the `updateEmail` endpoint is invoked to update the email. ```` const updateEmail = () => { const data = { userId: userID, newemail: email, password: password, }; axios .post(env.apiUrl + 'api/users/updateEmail', data, headers) .then((res) => { if (res.data.status === false) { notify('loginError', res.data.msg); if (res.data.msg === 'User email is Not Verified.') { history.push('/userVerifyEmail'); } } else { notify('loginError', res.data.msg); history.push('/logout'); } }) }; ```` The last part of the profile page is to export the blockchain private key. TO make it easier for people with no blockchain knowledge, when the user creates a profile a pair of public and private keys are generated. To export the public key, the endpoint `getuserPrivateKeybyPwd` is invoked. The password is also required for security. ```` const exportPrivateKey = () => { const data = { userId: userID, password: metaPassword, }; axios .post(env.apiUrl + `api/users/getuserPrivateKeybyPwd`, data, headers) .then((res) => { setPrivateKey(res.data.data); handleOpen(); }) .catch((err) => { if (err.response) { notify('loginError', err.response.data.msg); } }); }; ```` #### Change password The complete code for updating password can be found under `containers/UserPasswordChange/UserPasswordChangeContainer.js`. The page looks like the image below. [![14.png](https://i.postimg.cc/PqtB50cy/14.png)](https://postimg.cc/QFy66YjK) The implementation of update password is straightforward. It's a simple form with the three inputs: the current password, new password and new password validation. Before invoking the `changePassword` endpoint, validation is done to make sure that the password minimum length is eight and contains at least one special character. ```` function password_validate(password) { return password.match( /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/ ); } const handleFormSubmit = (e) => { let validationError = password_validate(newpassword); validationError ? setPasswordValidationError(false) : setPasswordValidationError(true); newpassword === reenterNewPassword ? setPasswordConfirmationError(false) : setPasswordConfirmationError(true); if (validationError && newpassword === reenterNewPassword) { fetch(env.apiUrl + "api/users/changePassword", { body: `userId=${userID}&oldPass=${currentPassword}&newPass=${newpassword}`, headers: { Accept: "application/json", Authorization: authToken, "Content-Type": "application/x-www-form-urlencoded", }, method: "POST", }) .then((response) => response.json()) .then((result) => toast(result.msg, { onClose: () => window.location.reload(true), }) ); } }; ```` #### Upload NFT The complete code for uploading a NFT can be found under `containers/CreateCert/index.js`. The page looks like the image below. [![16.png](https://i.postimg.cc/wBKyS8WW/16.png)](https://postimg.cc/G4QmyNnY) The page is a form where the owner can upload their NFT and thumbnail. It also contains fields for the NFT metadata such as title description, type, quantity, dimension, etc. As previous forms, `YupResolver` library is used for input validation. ```` const validationSchema = Yup.object().shape({ subject: Yup.string() .required("Title is required") .min(2, "Title must be at least 2 characters") .max(40, "Title must not exceed 40 characters"), category: Yup.string() .required("Description is required") .min(2, "Description must be at least 2 characters"), type: Yup.string().required("This field is required.").nullable(), productionYear: Yup.date() .nullable() .transform((curr, orig) => (orig === "" ? null : curr)) .required("Production Date is required"), quantity: Yup.number() .required("Quantity is required") .test( "Is positive?", "ERROR: The number must be greater than 0!", (value) => value > 0 ) .typeError("Quantity must be a number"), dateofIssue: Yup.date() .nullable() .transform((curr, orig) => (orig === "" ? null : curr)) .required("Start Date is required"), place: Yup.string() .required("Origin Location is required") .min(2, "Origin Location must be at least 2 characters") .max(40, "Origin Location must not exceed 40 characters"), }); const { register, handleSubmit, reset, formState: { errors }, } = useForm({ resolver: yupResolver(validationSchema), }); ```` When the user clicks on the submit button, the file hash will be calculated then the form is submitted to `uploadFile` endpoint. Some details are omitted for clarity. ```` const formSubmit = (data) => { axios .post( env.apiUrl + `api/users/uploadFile?userId=${userID}&imageHash=${fileHash}&${queryTosend2}`, formData, headers ) .then((res) => { if (res.data.msg === "Same Certificate uploaded on IPFS") { reset(); setImage({ preview: "", raw: "", }); certificateCreated(res.data.data.id); } else { certificateCreated(res.data.data.id); reset(); } }) } ```` #### Owner dashboard 1. Main dashboard The complete code for the owner dashboard can be found under `containers/Dashboard/index.js`. The page looks like the image below. [![17.png](https://i.postimg.cc/QMBjStGB/17.png)](https://postimg.cc/GBC0mbpr) When the page is loaded, two checks are made. The first one is to make sure that the current user role is `owner` by calling `getUserrole` endpoint. The second one is to make sure that the user is activated by chaincerts for minting by calling `checkUseractivated`. If the user is not an owner or is activated an error message will appear. ```` // check if user is owner useEffect(() => { axios .get(env.apiUrl + `api/users/getUserrole?userId=${userID}`, headers) .then((res) => { if (res.data.data === "owner") { showCreateCertificate(true); } else { showCreateCertificate(false); } }) .catch((error) => {}); }, []); ## check if user is active useEffect(() => { axios .get( env.apiUrl + "api/users/checkUseractivated?userId=" + userId, headers ) .then((res) => { callFunOnKey(); }) .catch((error) => { if (error.response.data.msg === "User is not activated by admin.") { setActivateError(true); } }); }, [currentPage]); // error message {activateError && (

{" "} Hi {userName}, You need to verify your authenticity in order to mint your NFT certificate in Blockchain, Please kindly send an email to info@app-scoop.com to activate your account on Chaincerts for minting

)} ```` The dashboard by default shows all the NFT owned or previously owned by the user, these NFTs can be retrieved by calling `getFilesByuserId40` endpoint. There are also three available filters: `MY` that only shows NFTs currently owned by the logged owner; these NFTs are retrieved by calling `getMyCertificates` endpoint. `TRANSFERED` shows NFTs previously owned by the user and transferred to another user, these NFTs are retrieved by calling `getFilesTransferred` endpoint. `UNVERIFIED` which are NFTs uploaded to the server, but not minted yet to the blockchain, these NFTs are retrieved by calling `getFilesUnverified` endpoint. The code is similar for all filters, below is get all NFTs function. ```` const allCerts = (page) => { history.push("/dashboard?page=" + page); sessionStorage.setItem("newKey", 1); window.history.replaceState(null, null, "#"); axios .post( env.apiUrl + `api/users/getFilesByuserId40?page=` + page, userIDObj, headers ) .then((res) => { if (res.data.data) { if (res.data.data.length > 0) { setResultArray(res.data.data); setTotalRecords(res.data.totalCert); } else { } } else { notify("loginError", res.data.msg); } }) .catch((error) => { if (error.response) { console.log(error); if (error.response.status === 403) { notify("loginError", "Token is expired. Please try to login again"); history.push("/userLogin"); cookies.remove("response"); sessionStorage.clear(); } else { notify("loginError", error.response.data.msg); } } else if (error.request) { // The request was made but no response was received notify("loginError", error.message); } else { // Something happened in setting up the request that triggered an Error notify("loginError", error.message); } }); }; ```` We have used the same method as before for pagination. The method is using session storage to store the selected filter. ```` const callFunOnKey = () => { var checkKey = sessionStorage.getItem("newKey"); if (checkKey === "1") { allCerts(currentPage); } else if (checkKey === "2") { myCerts(currentPage); } else if (checkKey === "3") { transferredCerts(currentPage); } else if (checkKey === "4") { unverifiedCerts(currentPage); } else { window.history.replaceState(null, null, "#"); allCerts(currentPage); } }; ```` 2. Mint NFT The mint NFT button will appear only if the NFT is uploaded and its status is unverified. When clicking on the button, a pop-up similar to the image bellow will appear. Minting an NFT cost 1$, the money will be reduced from the owner chaincerts wallet. When the user click on continue, the endpoint `uploadFileIntoBlockchainwithsqs` will be invoked and the mint transaction will be inserted in the queue for processing. [![18.png](https://i.postimg.cc/WbFcJ4rt/18.png)](https://postimg.cc/qzT5P41d) ```` const verifyCertificate = (t) => { const data = { imageId: t._id, userId: userId, }; axios .post( env.apiUrl + `api/users/uploadFileIntoBlockchainwithsqs`, data, headers ) .then((res) => { notify("success", res.data.msg); callFunOnKey(); }) .catch((error) => { if (error.response) { if (error.response.status === 403) { notify("loginError", "Token is expired. Please try to login again"); history.push("/"); cookies.remove("response"); sessionStorage.clear(); } else { notify("loginError", error.response.data.msg); } } else if (error.request) { // The request was made but no response was received notify("loginError", error.message); } else { // Something happened in setting up the request that triggered an Error notify("loginError", error.message); } }); }; ```` 3. Transfer NFT The transfer NFT button will appear only if the NFT is owned by the logged-in user and is verified. When clicking on the transfer button, a pop-up similar to the image bellow will appear. [![23.png](https://i.postimg.cc/fbKgt4R8/23.png)](https://postimg.cc/McnYNFRB) Transferring an NFT cost 1$, the money will be reduced from the owner chaincerts wallet. The first step is to indicate the receiver user email, when clicking on search the endpoint `find-email` will be invoked to make sure that the receiver has an account on chaincerts. ```` const onSubmit = (data) => { axios .get( env.apiUrl + `api/users/find-email?userId=${userId}&email=${data.email}`, headers ) .then((res) => { setReceiverID(res.data.user_id[0].id); setTransferShow(true); setSearchShow(false); setTransferShow(true); setshowTransferButton(true); }) .catch((err) => { notify("loginError", err.response.data.msg); if (err.response.data.msg === "No email found.") { setFirstNameShow(true); setSignData(data); setSearchShow(false); setSignUpTransferShow(true); } }); }; ```` If the receiver is not found, a new field will appear where the sender can inter the first name of the receiver to create a new account. The password will be generated automatically and send to the receiver via email. [![25.png](https://i.postimg.cc/Wz8TzTWY/25.png)](https://postimg.cc/tnsLmQHF) The endpoint for creating a user with a predefined password is `newsignup`. The user role is set to `client`. ```` const signUp = () => { const signnupData = { userRole: "client", email: signData.email, firstName: firstName, }; const options = { headers: { "content-type": "application/json", "Access-Control-Allow-Origin": "*", }, }; axios .post(env.apiUrl + "api/users/newsignup", signnupData, options) .then((res) => { setSearchShow(false); setSignUpTransferShow(false) setFirstNameShow(true); setTransferShow(true); setshowTransferButton(true) setReceiverID(res.data.data.id); }) .catch((err) => { if (err.response) { notify("loginError", err.response.data.msg); } }); }; ```` If the receiver is found or the receiver account is created, another form will appear where the user can provide their password for the transfer to be completed. [![21.png](https://i.postimg.cc/tT9QwtYM/21.png)](https://postimg.cc/HJvh7M0w) When the user clicks on transfer, the endpoint `transferFilewithsqs` will be invoked and the transfer transaction will be added to the queue for processing. ```` const transfer = (p) => { const transferData = { userId: userId, password: password, receiverId: receiverId, imageId: p, }; if (password) { axios .post( env.apiUrl + "api/users/transferFilewithsqs", transferData, headers ) .then((res) => { notify("loginError", res.data.msg); // setTransferShow(true); setFirstNameShow(false); setSearchShow(false); callFunOnKey(); // window.location.reload(); }) .catch((err) => { if (err.response) { notify("loginError", err.response.data.msg); if (err.response.data.status === false) { if ( err.response.data.msg === "User is not the owner of the Certificate." ) { } } } }); } else { notify("loginError", "Please provide login password"); } }; ```` #### Update store settings The complete code for store settings can be found under `containers/StoreSettings/StoreSettings.js`. The page looks like the image below. [![24.png](https://i.postimg.cc/MKqZnpQy/24.png)](https://postimg.cc/dDNcXvn1) When the page is first loaded, the endpoint `getUserProfile` is invoked to retrieve the current store information. ```` const getStoreLogoBanner = () => { fetch( env.apiUrl + `api/users/getUserProfile?userId=${userId}`, requestOptions ) .then((response) => response.json()) .then((result) => { setTitle(result.data.title); setBannerDetails(result.data.banner_details); setStoreDetails(result.data.store_details); setContact(result.data.contact); setStoreLogo("https://" + result.data.logo); setBanner("https://" + result.data.banner); const date = new Date(); const offset = date.getTimezoneOffset() * 60000; let countdownTimestampMsOpening = Date.parse(result.data.store_opening_date) + offset; setStoreOpeningDateDisplay(countdownTimestampMsOpening); let countdownTimestampMsEnding = Date.parse(result.data.store_ending_date) + offset; setStoreEndingDateDisplay(countdownTimestampMsEnding); }) .catch((error) => console.log("error", error)); }; useEffect(() => { getStoreLogoBanner(); }, [loader]); ```` The page is a form where the owner can change store information, including store name, title, banner details, contact information, store open and close date. When the user clicks on update changes the endpoint `updateProfile` is invoked. ```` const handleSettingSubmit = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("logo", storeLogo); formData.append("banner", banner); let myHeaders = new Headers(); myHeaders.append("Authorization", authToken); let requestOptions = { method: "POST", headers: myHeaders, body: formData, redirect: "follow", }; setLoader(true); //API request to update the store settings fetch( env.apiUrl + `userId=${cookies.get( "userId" )}&title=${title}&description=${description}&contact=${contact}&banner_details=${bannerDetails}&store_details=${storeDetails}&store_opening_date=${storeOpeningDate}&store_ending_date=${storeEndingDate}` + "api/users/updateProfile?", requestOptions ).then((res) => { setLoader(false); notify("loginError", "Store Details Updated Successfully"); }); }; ```` A different endpoint called `setUsername` is used to update the store username. This endpoint is invoked when the update username button is clicked. ```` const updateStoreUsername = () => { if (storeUsername.length > 0) { axios .post(env.apiUrl + `api/users/setUsername`, storeUsernameData, { headers: headers, }) .then((res) => { notify("loginError", res.data.msg); }); } }; ```` ### Conclusion Congratulations! You've implemented your first NFT marketplace using react and chaincerts endpoints. For the next steps, we suggest going through the repository and explore each file as details where omitted for clarity. Next you can improve the code by adding more validation and customize the interface as your marketplace requires.