<repo_name>bigbrain25/wearemasters<file_sep>/src/pages/Collectible.js
import React from "react";
import { Link } from "react-router-dom";
import Footer from "../components/Footer";
import Carousel from "react-multi-carousel";
import newImg from "../assets/img/new.jpg";
import MusicCard from "../components/cards/Music";
import artis from "../assets/img/artis.gif";
import NavigateBeforeIcon from "@material-ui/icons/NavigateBefore";

const Collectible = () => {
  const trackList = [
    {
      id: 1,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/CPe3saEkiRAMGiOuKIMtGXnent817rjIKGcwBRhSADk5zzFLsFxbHoWwc0qKqGqCFONS0E5SvT0ljbsZBiKLWolVFWP75PtcGCuh=s0",
      link: "#",
    },
    {
      id: 2,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
      link: "#",
    },
    {
      id: 3,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/KBPFHbreehLr7iQYTAeAmAoQqM4GwlRJk9O9x9bLpBy1uVqtJEZTTEXkJ2-0bClw1zvFAmEDhXHctKAdW8tp2LwpMSMSROsUlyjS1A=s0",
      link: "#",
    },
    {
      id: 4,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
      link: "#",
    },
    {
      id: 5,
      title: "Blue Woman Series",
      artist: "Ayoola -2ETH/$3000",
      thumbnail: newImg,
      link: "#",
    },
    {
      id: 6,
      title: "Blue Woman Series",
      artist: "Ayoola -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/SYy6eHKIOJF3y_-0dmyuRxwBAuKV4lt9dg_W2_QlqvGG4bDb67WVszlSY2Znhe7XlbwZg7d7OQ2EP1cqEFBWEXLn85AtRmi7HxzNuA=s0",
      link: "#",
    },

    {
      id: 7,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/PA-k72Ijyr6EVhOcT1XMSKfR3fLd24JaAQvXG8pTKzVsVBW2iFPv7TMg-6ZaRFZKbFsqgRfyTou44qAE-8J83fN3v8netgtb00bB=s0",
      link: "#",
    },
    {
      id: 1,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/CPe3saEkiRAMGiOuKIMtGXnent817rjIKGcwBRhSADk5zzFLsFxbHoWwc0qKqGqCFONS0E5SvT0ljbsZBiKLWolVFWP75PtcGCuh=s0",
      link: "#",
    },
    {
      id: 2,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
      link: "#",
    },
    {
      id: 3,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/KBPFHbreehLr7iQYTAeAmAoQqM4GwlRJk9O9x9bLpBy1uVqtJEZTTEXkJ2-0bClw1zvFAmEDhXHctKAdW8tp2LwpMSMSROsUlyjS1A=s0",
      link: "#",
    },
    {
      id: 4,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
      link: "#",
    },
    {
      id: 5,
      title: "Blue Woman Series",
      artist: "Ayoola -2ETH/$3000",
      thumbnail: newImg,
      link: "#",
    },
    {
      id: 6,
      title: "Blue Woman Series",
      artist: "Ayoola -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/SYy6eHKIOJF3y_-0dmyuRxwBAuKV4lt9dg_W2_QlqvGG4bDb67WVszlSY2Znhe7XlbwZg7d7OQ2EP1cqEFBWEXLn85AtRmi7HxzNuA=s0",
      link: "#",
    },

    {
      id: 7,
      title: "Kissed by the sun",
      artist: "Dorgu -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/PA-k72Ijyr6EVhOcT1XMSKfR3fLd24JaAQvXG8pTKzVsVBW2iFPv7TMg-6ZaRFZKbFsqgRfyTou44qAE-8J83fN3v8netgtb00bB=s0",
      link: "#",
    },
    {
      id: 1,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/CPe3saEkiRAMGiOuKIMtGXnent817rjIKGcwBRhSADk5zzFLsFxbHoWwc0qKqGqCFONS0E5SvT0ljbsZBiKLWolVFWP75PtcGCuh=s0",
      link: "#",
    },
    {
      id: 2,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
      link: "#",
    },
    {
      id: 3,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/KBPFHbreehLr7iQYTAeAmAoQqM4GwlRJk9O9x9bLpBy1uVqtJEZTTEXkJ2-0bClw1zvFAmEDhXHctKAdW8tp2LwpMSMSROsUlyjS1A=s0",
      link: "#",
    },
    {
      id: 4,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
      link: "#",
    },
    {
      id: 5,
      title: "Kaleidoscope Woman",
      artist: "IPneuma -2ETH/$3000",
      thumbnail: newImg,
      link: "#",
    },
    {
      id: 6,
      title: "Blue Woman Series",
      artist: "Ayoola -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/SYy6eHKIOJF3y_-0dmyuRxwBAuKV4lt9dg_W2_QlqvGG4bDb67WVszlSY2Znhe7XlbwZg7d7OQ2EP1cqEFBWEXLn85AtRmi7HxzNuA=s0",
      link: "#",
    },

    {
      id: 7,
      title: "Kissed by the sun",
      artist: "Dorgu -2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/PA-k72Ijyr6EVhOcT1XMSKfR3fLd24JaAQvXG8pTKzVsVBW2iFPv7TMg-6ZaRFZKbFsqgRfyTou44qAE-8J83fN3v8netgtb00bB=s0",
      link: "#",
    },
  ];
  const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 3,
      partialVisibilityGutter: 0,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 5,
      partialVisibilityGutter: 0,
    },
    tablet: {
      breakpoint: { max: 1024, min: 650 },
      items: 2,
      partialVisibilityGutter: 0,
    },
    mobile: {
      breakpoint: { max: 650, min: 0 },
      items: 1,
      partialVisibilityGutter: 0,
    },
  };

  const tracks = trackList.map((card) => {
    return <MusicCard key={card.id} card={card} />;
  });
  return (
    <div>
      <Link to="/">
        <a
          className="py-2 bg-gray-700 w-full h-10 fixed z-50 bg-opacity-90"
          alt="#"
          href="#"
        >
          <div className="bg-gray-400 ml-3 bg-gray-600 w-6 h-6 rounded">
            <NavigateBeforeIcon style={{ color: "#fff" }} />
          </div>
        </a>
      </Link>
          <div className="px-10">
          <h1 className="text-white font-black pt-20">Collectibles/ Meetbits</h1>
        <div className="flex pt-48 pb-12">
          <div className="w-full">
            <img src={artis} className="w-3/4 h-96 rounded" alt="img" />
          </div>
          <div className="w-full text-white mt-16">
            <p>
              - has been televised since Nigeria won it’s independence from the
              British in 1960. Our living rooms or parlors have become the arena
              citizens of our nascent nation have sat to watch the
              deconstruction of the dream our founding fathers had. We’ve seen
              civil war, coup’s , skirmishes and the dominance of our military.
              The deconstruction of a nation is mixed media reminding us how far
              we’ve come as a people.
            </p>
            <div className="flex">
              <button className="py-2 px-10 font-black uppercase rounded bg-appRed text-white mt-8">
                Bid now
              </button>
              <p className="mt-8 ml-8 py-2">- 2ETH/$3000</p>
            </div>
          </div>
        </div>
        <hr className="border border-gray-200 opacity-60 dark:border-sideBar" />
        <div>
          <div className="flex justify-between items-center mt-16">
            <h2 className="text-xl capitalize font-black text-bordyColor dark:text-gray-100">
              new week, new goals
            </h2>
          </div>
          <Carousel
            arrows={false}
            partialVisible={true}
            responsive={responsive}
            itemClass="px-2"
            className="mt-8"
          >
            {tracks}
          </Carousel>
          <Carousel
            arrows={false}
            partialVisible={true}
            responsive={responsive}
            itemClass="px-2"
            className="mt-8"
          >
            {tracks}
          </Carousel>
          <Carousel
            arrows={false}
            partialVisible={true}
            responsive={responsive}
            itemClass="px-2"
            className="mt-8"
          >
            {tracks}
          </Carousel>{" "}
          <Carousel
            arrows={false}
            partialVisible={true}
            responsive={responsive}
            itemClass="px-2"
            className="mt-8"
          >
            {tracks}
          </Carousel>{" "}
          <Carousel
            arrows={false}
            partialVisible={true}
            responsive={responsive}
            itemClass="px-2"
            className="mt-8"
          >
            {tracks}
          </Carousel>{" "}
          <Carousel
            arrows={false}
            partialVisible={true}
            responsive={responsive}
            itemClass="px-2"
            className="mt-8"
          >
            {tracks}
          </Carousel>{" "}
          <Carousel
            arrows={false}
            partialVisible={true}
            responsive={responsive}
            itemClass="px-2"
            className="mt-8"
          >
            {tracks}
          </Carousel>
        </div>
      </div>
      <div className="box fixed bottom-0 left-0 w-full z-50">
        <div className="items-center h-16 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 ... py-4 px-4 sm:flex space-y-4 sm:space-y-0 text-gray-100">
          <button className="mb-8">x</button>
          <div className="space-y-1 ml-6">
            <h2 className="text-base sm:text-xl font-semibold">
              We are building a community of 1000+ Digital Artists
            </h2>
          </div>
          <div className="ml-auto">
            <Link
              to="/sign-up"
              className="bg-gray-100 font-medium px-12 capitalize py-2 text-gray-600 flex focus:outline-none rounded"
            >
              Join Now
            </Link>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default Collectible;
<file_sep>/src/components/NewUpdateProfileModal.js
// import React, { useState } from "react";
// import NewUpdateProfile from "../pages/NewUpdateProfile";
// import Popup from "./Modal";

// const NewUpdateProfileModal = () => {
//   const [isToggled, setIsToggled] = useState(true);
//   const toggleModal = () => setIsToggled(!isToggled);

//   return (
//     <div>
//       {isToggled && (
//         <Popup isOpen={isToggled} nClose={toggleModal}>
//           <NewUpdateProfile />
//         </Popup>
//       )}
//     </div>
//   );
// };

// export default NewUpdateProfileModal;
<file_sep>/src/actions/assetActions.js
import axios from "axios";
import { spinnerService } from "@chevtek/react-spinners";
import {
  CLEAR_ERRORS,
  GET_ETH_RATE,
  ETH_RATE_LOADING,
  GET_ASSETS,
  GET_ASSET,
  GET_ALL_ASSETS,
  ASSET_LOADING,
  GET_ERRORS,
} from "./types";
import swal from "@sweetalert/with-react";

// Get Assets
export const getAssets = () => (dispatch) => {
  dispatch(setAssetLoading());
  axios
    .get("/api/assets")
    .then((res) =>
      dispatch({
        type: GET_ASSETS,
        payload: res.data,
      })
    )
    .catch((err) =>
      dispatch({
        type: GET_ASSETS,
        payload: null,
      })
    );
};

// Get Assets
export const getAllAssets = () => (dispatch) => {
  dispatch(setAssetLoading());
  axios
    .get("/api/assets/all")
    .then((res) =>
      dispatch({
        type: GET_ALL_ASSETS,
        payload: res.data,
      })
    )
    .catch((err) =>
      dispatch({
        type: GET_ALL_ASSETS,
        payload: null,
      })
    );
};

// Get Assets By Username
export const getAssetsByUsername = () => (dispatch) => {
  dispatch(setAssetLoading());
  axios
    .get("/api/assets")
    .then((res) =>
      dispatch({
        type: GET_ASSETS,
        payload: res.data,
      })
    )
    .catch((err) =>
      dispatch({
        type: GET_ASSETS,
        payload: null,
      })
    );
};

// Get Assets By ID
export const getAssetByID = (id) => (dispatch) => {
  dispatch(setAssetLoading());
  axios
    .get(`/api/assets/${id}`)
    .then((res) =>
      dispatch({
        type: GET_ASSET,
        payload: res.data,
      })
    )
    .catch((err) =>
      dispatch({
        type: GET_ASSET,
        payload: null,
      })
    );
};

// GET ETH RATE
export const getETHRate = () => (dispatch) => {
  dispatch(setETHRateLoading());
  axios
    .get("/api/assets/rate/get-eth-rate/")
    .then((res) => {
      console.log(res);
      dispatch({
        type: GET_ETH_RATE,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch({
        type: GET_ETH_RATE,
        payload: {},
      });
    });
};

// Upload Art
export const uploadArt = (uploadData, history) => (dispatch) => {
  spinnerService.hide("uploadNotLoading");
  spinnerService.show("uploadLoading");
  dispatch(clearErrors());

  axios
    .post("/api/assets/upload-digital-art", uploadData)
    .then((res) => {
      spinnerService.hide("uploadLoading");
      spinnerService.show("uploadNotLoading");
      swal(
        "Upload Successful!",
        "Your upload was successful, you will get a notification when your submission is approved.",
        "success"
      ).then(() => {
        history.push("/account");
      });
    })
    .catch((err) => {
      spinnerService.show("uploadNotLoading");
      spinnerService.hide("uploadLoading");
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Update Asset
export const updateAsset = (assetData, history) => (dispatch) => {
  spinnerService.hide("updateAssetNotLoading");
  spinnerService.show("updateAssetLoading");
  dispatch(clearErrors());

  axios
    .post("/api/assets/update-asset", assetData)
    .then((res) => {
      spinnerService.hide("updateAssetLoading");
      spinnerService.show("updateAssetNotLoading");
      swal(
        "Update Successful!",
        "Asset update was successful!",
        "success"
      ).then(() => {
        history.push("/assets");
      });
    })
    .catch((err) => {
      spinnerService.show("updateAssetNotLoading");
      spinnerService.hide("updateAssetLoading");
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
      window.scrollTo(0, 1);
    });
};

// Set Asset Loading State
export const setAssetLoading = () => {
  return {
    type: ASSET_LOADING,
  };
};

// ETH Rate Loading
export const setETHRateLoading = () => {
  return {
    type: ETH_RATE_LOADING,
  };
};

// Clear errors
export const clearErrors = () => {
  return {
    type: CLEAR_ERRORS,
  };
};
<file_sep>/src/actions/authActions.js
import axios from "axios";
import setAuthToken from "../utils/setAuthToken";
import jwt_decode from "jwt-decode";
import { spinnerService } from "@chevtek/react-spinners";
import swal from "@sweetalert/with-react";

// import Noty from "noty";
// import "noty/lib/noty.css";
// import "noty/lib/themes/mint.css";

import {
  GET_ERRORS,
  GET_MESSAGES,
  SET_CURRENT_USER,
  CLEAR_ERRORS,
} from "./types";

// Register User
export const registerUser = (userData) => (dispatch) => {
  dispatch(clearErrors());
  spinnerService.hide("registerNotLoading");
  spinnerService.show("registerLoading");
  axios
    .post("/api/users/register", userData)
    .then((res) => {
      spinnerService.hide("registerLoading");

      swal(
        "Account Created Successfully!",
        "Your account have been created sucessfully!",
        "success"
      );

      // Save to localStorage
      const { token } = res.data;
      // Set token to ls
      localStorage.setItem("jwtToken", token);
      // Set token to Auth header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      // Set current user
      dispatch(setCurrentUser(decoded));
    })
    .catch((err) => {
      spinnerService.hide("registerLoading");
      spinnerService.show("registerNotLoading");

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Login - User Login
export const loginUser = (userData, history) => (dispatch) => {
  dispatch(clearErrors());
  spinnerService.hide("loginNotLoading");
  spinnerService.show("loginLoading");
  axios
    .post("/api/users/login", userData)
    .then((res) => {
      spinnerService.hide("loginLoading");
      spinnerService.show("loginNotLoading");

      // Save to LocalStorage
      const { token } = res.data;
      // Set token to Local Storage
      localStorage.setItem("jwtToken", token);
      // Set token to Auth Header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      // Set Current User
      dispatch(setCurrentUser(decoded));
    })
    .catch((err) => {
      console.log(err);
      spinnerService.hide("loginLoading");
      spinnerService.show("loginNotLoading");

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Register Shipper
export const registerAsset = (assetData, history) => (dispatch) => {
  dispatch(clearErrors());
  spinnerService.hide("assetRegistrationNotLoading");
  spinnerService.show("assetRegistrationLoading");
  axios
    .post("/api/users/register-asset", assetData)
    .then((res) => {
      spinnerService.hide("assetRegistrationLoading");

      swal(
        "Success!",
        "New asset registration was successful!",
        "success"
      ).then(() => {
        history.push("/account");
      });
    })
    .catch((err) => {
      spinnerService.hide("assetRegistrationLoading");
      spinnerService.show("assetRegistrationNotLoading");

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Account Activation
export const activateAccount = (codeData, history) => (dispatch) => {
  spinnerService.hide("activationNotLoading");
  spinnerService.show("activationLoading");
  axios
    .post(`/api/users/activate-account`, codeData)
    .then((res) => {
      spinnerService.show("activationNotLoading");
      spinnerService.hide("activationLoading");

      dispatch(logoutUser());

      swal(
        "Activation Successful!",
        "Your account activation was successful, kindly proceed to Login.",
        "success"
      );

      // new Noty({
      //   type: "success",
      //   text: "Activation successful, Please Login.",
      //   timeout: 7500,
      //   progressBar: true,
      // }).show();

      dispatch({
        type: GET_MESSAGES,
        payload: res.data,
      });

      history.push("/account");
    })
    .catch((err) => {
      spinnerService.show("activationNotLoading");
      spinnerService.hide("activationLoading");
      swal("Error!", "Account activation unsuccessful", "error");
      // new Noty({
      //   type: "error",
      //   text: "Account activation unsuccessful!",
      //   timeout: 5000,
      //   progressBar: true,
      // }).show();

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });

      history.push("/account");
    });
};

// Resend Activation Token
export const resendActivationToken = (history) => (dispatch) => {
  spinnerService.hide("resendActivationNotLoading");
  spinnerService.show("resendActivationLoading");

  axios
    .post("/api/users/resend-activation-token")
    .then((res) => {
      spinnerService.show("resendActivationNotLoading");
      spinnerService.hide("resendActivationLoading");

      swal(
        "Success!",
        "We sent a new verification code to your email address. Kindly proceed to activate your account.",
        "success"
      ).then(() => {
        history.push("/account");
      });
    })
    .catch((err) => {
      spinnerService.show("resendActivationNotLoading");
      spinnerService.hide("resendActivationLoading");

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Update Personal Information
export const updatePersonalInfo = (personalInfo, history) => (dispatch) => {
  spinnerService.hide("updatePersonalInfoNotLoading");
  spinnerService.show("updatePersonalInfoLoading");
  axios
    .post("/api/users/update-personal-information", personalInfo)
    .then((res) => {
      // Save to LocalStorage
      const { token } = res.data;
      // Set token to Local Storage
      localStorage.setItem("jwtToken", token);
      // Set token to Auth Header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      // Set Current User
      dispatch(setCurrentUser(decoded));

      spinnerService.hide("updatePersonalInfoLoading");
      spinnerService.show("updatePersonalInfoNotLoading");
      swal("Success!", "Personal information updated successfully!", "success");
      // .then(() => {
      //   logoutUser();
      //   history.push("/login");
      // });
    })
    .catch((err) => {
      spinnerService.hide("updatePersonalInfoLoading");
      spinnerService.show("updatePersonalInfoNotLoading");

      // new Noty({
      //   type: "error",
      //   text: "Error updating Personal Info",
      //   timeout: 5000,
      //   progressBar: true,
      // }).show();

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Change Password
export const updatePassword = (passwordData, history) => (dispatch) => {
  spinnerService.hide("updatePasswordNotLoading");
  spinnerService.show("updatePasswordLoading");
  axios
    .post("/api/users/change-password", passwordData)
    .then((res) => {
      spinnerService.hide("updatePasswordLoading");
      spinnerService.show("updatePasswordNotLoading");
      swal(
        "Success!",
        "You have successfully changed your password",
        "success"
      ).then(() => {
        dispatch(logoutUser());
        history.push("/login");
      });
    })
    .catch((err) => {
      spinnerService.hide("updatePasswordLoading");
      spinnerService.show("updatePasswordNotLoading");

      swal("Error!", err.response.data.error, "error");

      // new Noty({
      //   type: "error",
      //   text: err.response.data.error,
      //   timeout: 5000,
      //   progressBar: true,
      // }).show();

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Forget Password
export const forgotPassword = (emailData, history) => (dispatch) => {
  spinnerService.hide("forgotPasswordNotLoading");
  spinnerService.show("forgotPasswordLoading");
  axios
    .post("/api/users/forgot-password", emailData)
    .then((res) => {
      spinnerService.hide("forgotPasswordLoading");
      spinnerService.show("forgotPasswordNotLoading");
      swal("Success!", res.data.msg, "success").then(() => {
        history.push("/login");
      });
    })
    .catch((err) => {
      spinnerService.hide("forgotPasswordLoading");
      spinnerService.show("forgotPasswordNotLoading");
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Reset Password
export const resetPassword = (passwordData, history) => (dispatch) => {
  spinnerService.hide("resetPasswordNotLoading");
  spinnerService.show("resetPasswordLoading");
  axios
    .post("/api/users/reset-password", passwordData)
    .then((res) => {
      spinnerService.hide("resetPasswordLoading");
      spinnerService.show("resetPasswordNotLoading");

      swal("Success!", res.data.msg, "success").then(() => {
        history.push("/login");
      });
    })
    .catch((err) => {
      spinnerService.hide("resetPasswordLoading");
      spinnerService.show("resetPasswordNotLoading");
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Set Logged in User
export const setCurrentUser = (decoded) => {
  return {
    type: SET_CURRENT_USER,
    payload: decoded,
  };
};

export const clearErrorMessages = () => (dispatch) => {
  dispatch(clearErrors());
};

// Clear Errors
export const clearErrors = () => {
  return {
    type: CLEAR_ERRORS,
  };
};

// Log User Out
export const logoutUser = () => (dispatch) => {
  // Remove token from localStorage
  localStorage.removeItem("jwtToken");
  // Remove auth header for future requests
  setAuthToken(false);
  // Set current user to {} which will set isAuthenticated to false
  dispatch(setCurrentUser({}));
};
<file_sep>/src/pages/Account.js
/* eslint-disable */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import Avatar from "react-avatar";
import {
  logoutUser,
  activateAccount,
  resendActivationToken,
} from "../actions/authActions";
import { CountdownCircleTimer } from "react-countdown-circle-timer";
import NavigateBeforeIcon from "@material-ui/icons/NavigateBefore";
import { getCurrentProfile } from "../actions/profileActions";
import { getAssets, getETHRate } from "../actions/assetActions";
import { compose } from "redux";
import { withStyles } from "@material-ui/core";
import Carousel from "react-multi-carousel";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
import Footer from "../components/Footer";
import swal from "@sweetalert/with-react";

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
  table: {
    minWidth: 650,
  },
});

const minuteSeconds = 60;
const hourSeconds = 3600;
const daySeconds = 86400;

const timerProps = {
  isPlaying: true,
  size: 120,
  strokeWidth: 6,
};

const renderTime = (dimension, time) => {
  return (
    <div className="time-wrapper">
      <div className="time">{time}</div>
      <div>{dimension}</div>
    </div>
  );
};

const stratTime = Date.now() / 1000; // use UNIX timestamp in seconds
const endTime = stratTime + 1043248; // use UNIX timestamp in seconds

const remainingTime = endTime - stratTime;
const days = Math.ceil(remainingTime / daySeconds);
const daysDuration = days * daySeconds;

const getTimeSeconds = (time) => (minuteSeconds - time) | 0;
const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
const getTimeHours = (time) => ((time % daySeconds) / hourSeconds) | 0;
const getTimeDays = (time) => (time / daySeconds) | 0;

const UrgeWithPleasureComponent = () => (
  <CountdownCircleTimer
    isPlaying
    duration={10}
    colors={[
      ["#004777", 0.33],
      ["#F7B801", 0.33],
      ["#A30000", 0.33],
    ]}
  >
    {({ remainingTime }) => remainingTime}
  </CountdownCircleTimer>
);
class Account extends Component {
  constructor() {
    super();
    this.state = {
      code: "",
      errors: {},
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    window.scrollTo(0, 1);
    this.props.getAssets();
    this.props.getCurrentProfile();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }

  onLogoutClick(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  resendCode(e) {
    e.preventDefault();

    this.props.resendActivationToken(this.props.history);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e) {
    e.preventDefault();

    if (this.state.code.length !== 6) {
      swal("Error!", "Authorization code provided must be 6 digits.", "error");

      return;
    }

    const codeData = {
      code: this.state.code,
    };

    this.props.activateAccount(codeData, this.props.history);
  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;
    const { user } = this.props.auth;
    const { profile, profileLoading } = this.props.profile;
    const { assets, assetLoading } = this.props.asset;

    const collection = [
      {
        img: "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
      },
      {
        img: "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
      },
      {
        img: "https://lh3.googleusercontent.com/CPe3saEkiRAMGiOuKIMtGXnent817rjIKGcwBRhSADk5zzFLsFxbHoWwc0qKqGqCFONS0E5SvT0ljbsZBiKLWolVFWP75PtcGCuh=s0",
      },
      {
        img: "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
      },
      {
        img: "https://lh3.googleusercontent.com/KBPFHbreehLr7iQYTAeAmAoQqM4GwlRJk9O9x9bLpBy1uVqtJEZTTEXkJ2-0bClw1zvFAmEDhXHctKAdW8tp2LwpMSMSROsUlyjS1A=s0",
      },
      {
        img: "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
      },
    ];
    const creation = [
      {
        img: "https://lh3.googleusercontent.com/CPe3saEkiRAMGiOuKIMtGXnent817rjIKGcwBRhSADk5zzFLsFxbHoWwc0qKqGqCFONS0E5SvT0ljbsZBiKLWolVFWP75PtcGCuh=s0",
      },
      {
        img: "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
      },
    ];
    const responsive = {
      superLargeDesktop: {
        // the naming can be any, depends on you.
        breakpoint: { max: 4000, min: 3000 },
        items: 1,
        partialVisibilityGutter: 0,
      },
      desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 1,
        partialVisibilityGutter: 0,
      },
      tablet: {
        breakpoint: { max: 1024, min: 650 },
        items: 1,
        partialVisibilityGutter: 0,
      },
      mobile: {
        breakpoint: { max: 650, min: 0 },
        items: 1,
        partialVisibilityGutter: 0,
      },
    };

    const getCollections = collection.map((img) => {
      return (
        <div className="w-full px-2 py-2">
          <img src={img.img} className="object-cover w-full"></img>
        </div>
      );
    });
    const getCreations = creation.map((img) => {
      return (
        <div className="w-full h-track">
          <img src={img.img} className="object-cover w-full h-full"></img>
        </div>
      );
    });
    const Navigation = ({ goToSlide, ...rest }) => {
      const {
        carouselState: { currentSlide },
      } = rest;
      return (
        <div className="carousel-button-group absolute top-0 right-0 left-0 text-center">
          {" "}
          <button
            onClick={() => goToSlide(0)}
            className={
              currentSlide === 0
                ? "px-2 sm:px-8 duration-100 ease-in-out py-2 mx-2 text-lg uppercase focus:outline-none border-b border-gray-400"
                : "px-2 sm:px-8 duration-100 ease-in-out py-2 mx-2 text-lg uppercase focus:outline-none"
            }
          >
            {" "}
            creations{" "}
          </button>
          <button
            onClick={() => goToSlide(1)}
            className={
              currentSlide === 1
                ? "px-2 sm:px-8 duration-100 ease-in-out py-2 mx-2 text-lg uppercase focus:outline-none border-b border-gray-400"
                : "px-2 sm:px-8 duration-100 ease-in-out py-2 mx-2 text-lg uppercase focus:outline-none"
            }
          >
            series
          </button>
        </div>
      );
    };
    return (
      //<div>
      //   {user.isVerified === true ? (
      <div>
        <Link to="/">
          <a
            className="py-2 bg-gray-700 w-full h-10 fixed z-50 bg-opacity-90"
            alt="#"
            href="#"
          >
            <div className="bg-gray-400 ml-3 bg-gray-600 w-6 h-6 rounded">
              <NavigateBeforeIcon style={{ color: "#fff" }} />
            </div>
            <div className="flex justify-end pr-4 relative -top-6">
              <Link
                to="/login"
                onClick={this.onLogoutClick.bind(this)}
                className="uppercase py-1 px-4 text-xs font-medium rounded text-white bg-appRed"
              >
                log out
              </Link>
            </div>
          </a>
        </Link>
        <div className="relative">
          <div className="max-w-7xl mx-auto text-bordyColor dark:text-gray-100 py-16 relative lg:px-8 px-10">
            <div className="grid grid-cols-12 gap-4 ml-20">
              <div className="col-span-12 sm:col-span-8 lg:col-span-5">
                <div className="w-24 h-24">
                  <Avatar
                    name={`${user.firstName} ${user.lastName}`}
                    size="100"
                    round="100%"
                    className="mx-auto"
                  />
                </div>
                <h4
                  className="mt-4"
                  style={{ fontWeight: "700", fontSize: "25px" }}
                >
                  {user.firstName + " " + user.lastName}{" "}
                </h4>
                <div className="flex space-x-6">
                  <p>Followers: 0</p>
                  <p className="">Following: 0</p>
                  <p className="">Creations: 0</p>
                </div>

                <div className="my-3">
                  <button
                    className="text-appRed focus:outline-none"
                    style={{ fontWeight: "600", fontSize: "20px" }}
                  >
                    @{user.username}
                  </button>
                  <div className="flex mt-4">
                    <p className="text-xl font-black">ETH Address :</p>
                    <p className="ml-2 text-xs mt-1 pt-1">3khbfjvnjnkcjk........</p>
                  </div>

                  <p className="mt-2">
                    British in 1960. Our living rooms or parlors have become the
                    arena citizens of our nascent nation have sat to watch the
                    deconstruction of the dream our founding fathers had. We’ve
                    seen
                  </p>
                </div>
                <div className="mt-8 mb-6">
                  <Link
                    to="/update-profile"
                    className="bg-gray-100 rounded-sm py-2 px-4 text-sm font-medium text-gray-600 mr-2"
                  >
                    Edit Profile
                  </Link>
                  <Link
                    to="/upload-art"
                    className="bg-gray-100 rounded-sm py-2 px-4 text-sm font-medium text-gray-600 mr-2"
                  >
                    Upload Art
                  </Link>
                  <div className="mt-6">
                    <Link
                      to="/next"
                      className="bg-gray-100 w-full rounded-sm py-2 ml-1 px-12 text-sm font-medium text-gray-600"
                    >
                      Next Drop Timer
                    </Link>
                  </div>
                </div>
              </div>
              <div className="border bg-gray-400 h-full w-96 font-black text-7xl pt-10 text-center ml-36">
                When Is Your Next Drop?
                <div className="relative top-28 flex w-full">
                  <CountdownCircleTimer
                    {...timerProps}
                    colors={[["#f8f8ff"]]}
                    duration={daysDuration}
                    initialRemainingTime={remainingTime}
                  >
                    {({ elapsedTime }) =>
                      renderTime(
                        "days",
                        getTimeDays(daysDuration - elapsedTime)
                      )
                    }
                  </CountdownCircleTimer>
                  <CountdownCircleTimer
                    {...timerProps}
                    colors={[["#f8f8ff"]]}
                    duration={daySeconds}
                    initialRemainingTime={remainingTime % daySeconds}
                    onComplete={(totalElapsedTime) => [
                      remainingTime - totalElapsedTime > hourSeconds,
                    ]}
                  >
                    {({ elapsedTime }) =>
                      renderTime(
                        "hours",
                        getTimeHours(daySeconds - elapsedTime)
                      )
                    }
                  </CountdownCircleTimer>
                  <CountdownCircleTimer
                    {...timerProps}
                    colors={[["#f8f8ff"]]}
                    duration={hourSeconds}
                    initialRemainingTime={remainingTime % hourSeconds}
                    onComplete={(totalElapsedTime) => [
                      remainingTime - totalElapsedTime > minuteSeconds,
                    ]}
                  >
                    {({ elapsedTime }) =>
                      renderTime(
                        "minutes",
                        getTimeMinutes(hourSeconds - elapsedTime)
                      )
                    }
                  </CountdownCircleTimer>
                  <CountdownCircleTimer
                    {...timerProps}
                    colors={[["#f8f8ff"]]}
                    duration={minuteSeconds}
                    initialRemainingTime={remainingTime % minuteSeconds}
                    onComplete={(totalElapsedTime) => [
                      remainingTime - totalElapsedTime > 0,
                    ]}
                  >
                    {({ elapsedTime }) =>
                      renderTime("seconds", getTimeSeconds(elapsedTime))
                    }
                  </CountdownCircleTimer>
                </div>
              </div>
            </div>
            <div className="grid grid-cols-12 mt-12">
              <div className="col-span-12 relative">
                <Carousel
                  renderButtonGroupOutside={true}
                  arrows={false}
                  customButtonGroup={<Navigation />}
                  partialVisible={true}
                  responsive={responsive}
                  itemClass="px-2"
                  className="mt-16"
                >
                  <div className="mt-8">
                    <ResponsiveMasonry
                      columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
                    >
                      <Masonry gutter="20">{getCollections}</Masonry>
                    </ResponsiveMasonry>
                    {/* <div className="grid grid-cols-4 gap-4">{getCollections}</div> */}
                  </div>
                  <div className="mt-8">
                    <div className="grid grid-cols-4 gap-4">{getCreations}</div>
                  </div>
                </Carousel>
              </div>
            </div>
          </div>

          <Footer />
        </div>
      </div>
      // ) : (
      //   <div>
      //     <Helmet>
      //       <meta charSet="utf-8" />
      //       <title>WeAreMasters - Upload Digital Art</title>
      //       <link
      //         href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      //         rel="stylesheet"
      //         integrity="<KEY>"
      //         crossorigin="anonymous"
      //       />
      //     </Helmet>

      //     <div className="container" style={{ height: "100vh" }}>
      //       <div className="row no-gutter">
      //         <div className="col-md-12 mt-4">
      //           <Link to="/account">
      //             <img
      //               width="100"
      //               src={logo}
      //               alt="WeAreMasters Logo"
      //               className="center-image mt-2 mb-4"
      //             />
      //           </Link>
      //         </div>
      //         <div className="col-md-5 m-auto">
      //           <h2 className="text-center mb-4">
      //             <strong>
      //               Welcome, {user.firstName}! <br />
      //             </strong>
      //           </h2>
      //           <form
      //             className="need-validation"
      //             onSubmit={this.onSubmit}
      //             noValidate
      //           >
      //             <div className="mb-4 text-center">
      //               {errors.verification && (
      //                 <div class="alert alert-danger" role="alert">
      //                   {errors.verification}
      //                 </div>
      //               )}

      //               <label for="code" className="form-label">
      //                 <strong style={{ fontSize: "20px" }}>
      //                   Enter 6 digit verification code sent to your email
      //                 </strong>
      //               </label>
      //               <input
      //                 type="number"
      //                 id="code"
      //                 name="code"
      //                 value={this.state.code}
      //                 onChange={this.onChange}
      //                 className={classnames(
      //                   "form-control form-control-lg text-center mt-2",
      //                   {
      //                     "is-invalid": errors.verification,
      //                   }
      //                 )}
      //                 placeholder="Enter 6 digit verification code"
      //                 autofocus
      //                 required
      //               />
      //             </div>

      //             <div className="d-grid gap-2">
      //               <button
      //                 className="btn btn-lg btn-primary mb-3"
      //                 type="submit"
      //               >
      //                 <Spinner name="activationLoading">
      //                   <Backdrop className={classes.backdrop} open={true}>
      //                     <CircularProgress color="inherit" />
      //                   </Backdrop>
      //                   Processing...
      //                 </Spinner>
      //                 <Spinner name="activationNotLoading" show={true}>
      //                   Proceed to Verify Account
      //                 </Spinner>
      //               </button>
      //             </div>
      //           </form>
      //           <hr />
      //           <div className="row">
      //             <div className="col-md-6">
      //               <div className="d-grid gap-2">
      //                 <button
      //                   className="btn btn-dark my-2"
      //                   onClick={this.resendCode.bind(this)}
      //                 >
      //                   <Spinner name="resendActivationLoading">
      //                     <Backdrop className={classes.backdrop} open={true}>
      //                       <CircularProgress color="inherit" />
      //                     </Backdrop>
      //                     Processing...
      //                   </Spinner>
      //                   <Spinner
      //                     name="resendActivationNotLoading"
      //                     show={true}
      //                   >
      //                     Resend Code
      //                   </Spinner>
      //                 </button>
      //               </div>
      //             </div>
      //             <div className="col-md-6">
      //               <div className="d-grid gap-2">
      //                 <button
      //                   className="btn btn-dark my-2"
      //                   onClick={this.onLogoutClick.bind(this)}
      //                 >
      //                   Log out
      //                 </button>
      //               </div>
      //             </div>
      //           </div>
      //           <hr className="mb-5" />
      //         </div>
      //       </div>
      //     </div>
      //   </div>
      // )}
      //</div>
    );
  }
}

Account.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  getAssets: PropTypes.func.isRequired,
  getETHRate: PropTypes.func.isRequired,
  activateAccount: PropTypes.func.isRequired,
  resendActivationToken: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  logoutUser: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  errors: state.errors,
  profile: state.profile,
  asset: state.asset,
  ethRate: state.ethRate,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, {
    getCurrentProfile,
    activateAccount,
    resendActivationToken,
    getAssets,
    logoutUser,
    getETHRate,
  })
)(Account);
<file_sep>/src/pages/UploadArt.js
/* eslint-disable */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { logoutUser } from "../actions/authActions";
import { getCurrentProfile } from "../actions/profileActions";
import classnames from "classnames";
import { compose } from "redux";
import { withStyles } from "@material-ui/core";
import CurrencyFormat from "react-currency-format";
import { client } from "filestack-react";
import { Spinner } from "@chevtek/react-spinners";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import { uploadArt } from "../actions/assetActions";
import { Helmet } from "react-helmet";
import { getETHRate } from "../actions/assetActions";
import exactMath from "exact-math";
import logo from "../assets/img/favicon.png";

const Validator = require("validator");

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
});

class UploadArt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      price: "",
      image_url: "",
      animation_url: "",
      youtube_url: "",
      facebook_url: "",
      twitter_url: "",
      instagram_url: "",
      description: "",
      errors: {},
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    window.scrollTo(0, 1);
    this.props.getCurrentProfile();
    this.props.getETHRate();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  uploadImage(e) {
    e.preventDefault();

    const apikey = "<KEY>";
    const options = {
      accept: "image/*",
      maxFiles: 1,
      transformations: {
        crop: true,
      },
      onFileUploadFinished: (res) => {
        this.setState({
          image_url: res.url,
        });
      },
    };

    const filestack = client.init(apikey, options);
    const picker = filestack.picker(options);
    picker.open();
  }

  onSubmit(e) {
    e.preventDefault();

    const uploadData = {
      title: this.state.title,
      price: this.state.price,
      image_url: this.state.image_url,
      animation_url: this.state.animation_url,
      youtube_url: this.state.youtube_url,
      facebook_url: this.state.facebook_url,
      twitter_url: this.state.twitter_url,
      instagram_url: this.state.instagram_url,
      description: this.state.description,
    };

    this.props.uploadArt(uploadData, this.props.history);
  }

  onLogoutClick(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;
    const { ethPrice, ethPriceLoading } = this.props.ethRate;
    const disableMathError = { invalidError: false };

    let imageBox;

    if (!Validator.isEmpty(this.state.image_url)) {
      imageBox = (
        <div className="col-md-6 m-auto">
          <img
            src={this.state.image_url}
            alt="Digital Art Preview"
            className="image-preview"
          />
        </div>
      );
    }

    return (
      <div>
        <Helmet>
          <meta charSet="utf-8" />
          <title>WeAreMasters - Upload Digital Art</title>
          <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="<KEY>"
            crossorigin="anonymous"
          />
        </Helmet>
        <div className="container mt-20 mb-100">
          <div className="row no-gutter">
            <div className="col-md-12 mt-4">
              <Link to="/account">
                <img
                  width="100"
                  src={logo}
                  alt="WeAreMasters Logo"
                  className="center-image mt-2"
                />
              </Link>
            </div>
            <div className="col-md-6 m-auto">
              <hr />
              <h2 className="text-center mb-4">
                <strong>UPLOAD DIGITAL ART</strong>
              </h2>
              <form
                className="need-validation"
                onSubmit={this.onSubmit}
                noValidate
              >
                <div className="mb-4">
                  <label for="title" className="form-label">
                    <strong>
                      Title of Digital Art (e.g Kaleidoscope Woman)
                    </strong>
                  </label>
                  <input
                    type="text"
                    id="title"
                    name="title"
                    value={this.state.title}
                    onChange={this.onChange}
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.title,
                    })}
                    placeholder="e.g Kaleidoscope Woman by IPneuma"
                    autofocus
                    required
                  />
                  {errors.title && (
                    <div className="invalid-feedback">{errors.title}</div>
                  )}
                </div>
                <div className="mb-4">
                  <label for="price" className="form-label">
                    <strong>
                      Price of Digital Art{" "}
                      {ethPrice === null || ethPriceLoading ? null : (
                        <CurrencyFormat
                          value={exactMath.mul(
                            1,
                            ethPrice.amount,
                            disableMathError
                          )}
                          displayType={"text"}
                          thousandSeparator={true}
                          decimalSeperator="."
                          decimalScale={2}
                          fixedDecimalScale={true}
                          renderText={(value) => (
                            <span>(1 ETH = &#36;{value})</span>
                          )}
                        />
                      )}
                    </strong>
                  </label>
                  <div className="input-group mb-4">
                    <span className="input-group-text">
                      <strong>ETH</strong>
                    </span>

                    <CurrencyFormat
                      name="price"
                      id="price"
                      thousandSeparator={true}
                      decimalSeperator="."
                      decimalScale={2}
                      fixedDecimalScale={true}
                      value={this.state.price}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.price,
                      })}
                      onValueChange={(values) => {
                        const { value } = values;
                        this.setState({
                          price: value,
                        });
                      }}
                      placeholder="e.g 2.75"
                      required
                    />
                  </div>
                  {errors.price && (
                    <div
                      style={{
                        color: "#dc3545",
                        fontSize: "12px",
                        marginTop: "-15px",
                        fontWeight: "400",
                      }}
                    >
                      {errors.price}
                    </div>
                  )}
                </div>
                <div className="mb-4">
                  {!Validator.isEmpty(this.state.image_url) ? (
                    imageBox
                  ) : (
                    <div
                      className="upload-image"
                      onClick={this.uploadImage.bind(this)}
                    >
                      Click this area to Select Image for Digital Art
                    </div>
                  )}

                  {errors.image_url && (
                    <div
                      style={{
                        color: "#dc3545",
                        fontSize: "12px",
                        marginTop: "5px",
                        fontWeight: "400",
                      }}
                    >
                      {errors.image_url}
                    </div>
                  )}
                </div>
                <div className="mb-4">
                  <label for="name" className="form-label">
                    <strong>Animation URL for Digital Art</strong>
                  </label>
                  <input
                    type="text"
                    id="animation_url"
                    name="animation_url"
                    value={this.state.animation_url}
                    onChange={this.onChange}
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.animation_url,
                    })}
                    placeholder="e.g https://youtu.be/WEA9EB7Q5RY (optional)"
                    required
                  />
                  {errors.animation_url && (
                    <div className="invalid-feedback">
                      {errors.animation_url}
                    </div>
                  )}
                </div>
                <div className="mb-4">
                  <label for="youtube_url" className="form-label">
                    <strong>YouTube URL for Digital Art</strong>
                  </label>
                  <input
                    type="text"
                    id="youtube_url"
                    name="youtube_url"
                    value={this.state.youtube_url}
                    onChange={this.onChange}
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.youtube_url,
                    })}
                    placeholder="e.g https://youtu.be/WEA9EB7Q5RY (optional)"
                    autofocus
                    required
                  />
                  {errors.youtube_url && (
                    <div className="invalid-feedback">{errors.youtube_url}</div>
                  )}
                </div>
                <div className="mb-4">
                  <label for="facebook_url" className="form-label">
                    <strong>FaceBook URL for Digital Art</strong>
                  </label>
                  <input
                    type="text"
                    id="facebook_url"
                    name="facebook_url"
                    value={this.state.facebook_url}
                    onChange={this.onChange}
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.facebook_url,
                    })}
                    placeholder="e.g https://facebook.com/WEA9EB7Q5RY (optional)"
                    autofocus
                    required
                  />
                  {errors.facebook_url && (
                    <div className="invalid-feedback">
                      {errors.facebook_url}
                    </div>
                  )}
                </div>
                <div className="mb-4">
                  <label for="twitter_url" className="form-label">
                    <strong>Twitter URL for Digital Art</strong>
                  </label>
                  <input
                    type="text"
                    id="twitter_url"
                    name="twitter_url"
                    value={this.state.twitter_url}
                    onChange={this.onChange}
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.twitter_url,
                    })}
                    placeholder="e.g https://twitter.com/WEA9EB7Q5RY (optional)"
                    autofocus
                    required
                  />
                  {errors.twitter_url && (
                    <div className="invalid-feedback">{errors.twitter_url}</div>
                  )}
                </div>
                <div className="mb-4">
                  <label for="instagram_url" className="form-label">
                    <strong>Instagram URL for Digital Art</strong>
                  </label>
                  <input
                    type="text"
                    id="instagram_url"
                    name="instagram_url"
                    value={this.state.instagram_url}
                    onChange={this.onChange}
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.instagram_url,
                    })}
                    placeholder="e.g https://instagram.com/WEA9EB7Q5RY (optional)"
                    autofocus
                    required
                  />
                  {errors.instagram_url && (
                    <div className="invalid-feedback">
                      {errors.instagram_url}
                    </div>
                  )}
                </div>
                <div className="mb-4">
                  <label for="name" className="form-label">
                    <strong>Description of Digital Art</strong>
                  </label>
                  <textarea
                    rows="5"
                    id="description"
                    name="description"
                    value={this.state.description}
                    onChange={this.onChange}
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.description,
                    })}
                    placeholder="Enter full description for Digital Art"
                    required
                  ></textarea>
                  {errors.description && (
                    <div className="invalid-feedback">{errors.description}</div>
                  )}
                </div>

                <div className="d-grid gap-2">
                  <button className="btn btn-lg btn-primary" type="submit">
                    <Spinner name="uploadLoading">
                      <Backdrop className={classes.backdrop} open={true}>
                        <CircularProgress color="inherit" />
                      </Backdrop>
                      Processing...
                    </Spinner>
                    <Spinner name="uploadNotLoading" show={true}>
                      Proceed to Submit Digital Art
                    </Spinner>
                  </button>
                </div>
              </form>
              <hr />
              <div className="row">
                <div className="col-md-6">
                  <div className="d-grid gap-2">
                    <Link to="/account" className="btn btn-dark my-2">
                      Back Home
                    </Link>
                  </div>
                </div>
                <div className="col-md-6">
                  <div className="d-grid gap-2">
                    <Link to="/market" className="btn btn-dark my-2">
                      Market Place
                    </Link>
                  </div>
                </div>
              </div>
              <hr className="mb-5" />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

UploadArt.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  uploadArt: PropTypes.func.isRequired,
  getETHRate: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  logoutUser: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile,
  ethRate: state.ethRate,
  errors: state.errors,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, {
    getCurrentProfile,
    uploadArt,
    logoutUser,
    getETHRate,
  })
)(UploadArt);
<file_sep>/src/pages/Login.js
/* eslint-disable */
import React, { Component } from "react";
import ModalVideo from "react-modal-video";
import { Link, withRouter } from "react-router-dom";
import login from "../assets/img/signup.jpg";
import logo from "../assets/img/logo-white.svg";

import PropTypes from "prop-types";
import { connect } from "react-redux";

import { loginUser } from "../actions/authActions";
import { Spinner } from "@chevtek/react-spinners";
import compose from "recompose/compose";
import { withStyles } from "@material-ui/core/styles";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import classnames from "classnames";
import "../assets/video.min.css";

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
});

class Login extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: "",
      isOpen: false,
      errors: {},
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    if (this.props.auth.isAuthenticated) {
      this.props.history.push("/account");
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.auth.isAuthenticated) {
      this.props.history.push("/account");
    }
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }

  onBlur = (field) => (e) => {
    e.preventDefault();

    this.setState({
      touched: { ...this.state.touched, [field]: true },
    });
  };

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e) {
    e.preventDefault();

    const userData = {
      email: this.state.email,
      password: <PASSWORD>,
    };

    this.props.loginUser(userData, this.props.history);
  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;

    return (
      <div className="relative h-full flex items-center justify-center">
        <div className="max-w-7xl mx-auto py-16 lg:px-8 px-4">
          <div className="grid lg:grid-cols-12 gap-8 text-bordyColor dark:text-gray-200 items-center">
            <div className="lg:col-span-4 lg:order-first order-last">
              <div>
                <Link to="/">
                  <img src={logo} width="225px" className="mb-10" />
                </Link>

                <h2 className="text-3xl sm:text-5xl sm:leading-extraLoose font-bold capitalize">
                  welcome Back!
                </h2>
              </div>
              <form
                className="mt-12 space-y-4"
                onSubmit={this.onSubmit}
                novalidate="novalidate"
              >
                <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400">
                  <label className="capitalize font-medium">
                    email address
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    placeholder="Enter your email address"
                    value={this.state.email}
                    onChange={this.onChange}
                    className={classnames(
                      "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                      {
                        "is-invalid": errors.email,
                      }
                    )}
                    required
                  />
                  {errors.email && (
                    <div className="form-error">{errors.email}</div>
                  )}
                </div>
                <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400">
                  <label className="capitalize font-medium">password</label>
                  <input
                    type="<PASSWORD>"
                    id="password"
                    name="<PASSWORD>"
                    placeholder="Enter your password"
                    value={this.state.password}
                    onChange={this.onChange}
                    className={classnames(
                      "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                      {
                        "is-invalid": errors.password,
                      }
                    )}
                    required
                  />
                  {errors.password && (
                    <div className="form-error">{errors.password}</div>
                  )}
                </div>
                <div className="flex justify-end text-xs space-y-2 text-bordyColor dark:text-gray-400">
                  <button className="font-medium underline">
                    Forgot your password?
                  </button>
                </div>
                <div className="flex flex-col justify-center items-center space-y-4">
                  <button className="px-4 py-3 bg-appRed text-sm text-gray-100 font-semibold rounded-sm w-full">
                    <Spinner name="loginLoading">
                      <Backdrop className={classes.backdrop} open={true}>
                        <CircularProgress color="inherit" />
                      </Backdrop>
                      Signing in...
                    </Spinner>
                    <Spinner name="loginNotLoading" show={true}>
                      Sign in
                    </Spinner>
                  </button>
                  {/* <p className="text-sm">or</p>
                  <div className="flex space-x-4 w-full">
                    <button className="flex items-center justify-center px-8 py-3 bg-gray-100 capitalize text-sm text-gray-600 font-semibold rounded-sm w-full">
                      <img src={fb} className="w-5 h-5 mr-4" alt="facebook" />
                      facebook
                    </button>
                    <button className="flex items-center justify-center px-8 py-3 bg-gray-100 capitalize text-sm text-gray-600 font-semibold rounded-sm w-full">
                      <img src={google} className="w-5 h-5 mr-4" alt="google" />
                      google
                    </button>
                  </div> */}
                  <div className="pt-8 text-sm text-center w-full space-y-4">
                    <p>Don't have account?</p>
                    <Link
                      to="/sign-up"
                      className="flex items-center justify-center px-8 py-3 bg-gray-100 text-sm text-gray-600 font-semibold rounded-sm w-full"
                    >
                      Create an Acccount
                    </Link>
                  </div>
                </div>
              </form>
            </div>
            <div className="lg:col-span-8">
              <div className="relative w-full text-gray-100">
                <img src={login} className="" alt="login" />
                <div className="absolute w-full h-full bg-gradient-to-t from-black top-0 left-0 bg-opacity-60 flex px-8 pb-8 items-end justify-start">
                  <div className="max-w-sm">
                    <h3 className="text-3xl sm:text-5xl sm:leading-extraLoose font-semibold mb-2">
                      Night Sky
                    </h3>
                    <p className="mb-6">
                      The `night sky` depicts a time of reflection and how all
                      our actions have consequences.
                    </p>
                    <React.Fragment>
                      <ModalVideo
                        channel="vimeo"
                        autoplay
                        isOpen={this.state.isOpen}
                        videoId="355087595"
                        onClose={() => setOpen(false)}
                      />

                      <button
                        className="px-12 py-3 bg-gray-100 rounded-full uppercase text-appRed font-medium focus:outline-none hover:bg-appRed hover:text-gray-100 duration-200"
                        onClick={() => this.state({ isOpen: true })}
                      >
                        View video
                      </button>
                    </React.Fragment>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Login.propTypes = {
  loginUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  errors: state.errors,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, { loginUser })
)(withRouter(Login));
<file_sep>/src/components/Hero.js
/* eslint-disable */

import heroImg from "../assets/img/hero.png";
function Hero(props) {
  const { title, subHeading, price, type } = props.hero;
  return (
    <div className="grid sm:grid-cols-2 gap-12 items-center relative">
      <div className="absolute left-0 z-10 top-0 text-gray-700">
        <svg>
          <defs>
            <pattern
              id="eab71dd9-9d7a-47bd-8044-256344ee00d0"
              x="0"
              y="0"
              width="20"
              height="20"
              patternUnits="userSpaceOnUse"
            >
              <rect x="0" y="0" width="4" height="4" fill="currentColor" />
            </pattern>
          </defs>
          <rect
            width="364"
            height="384"
            fill="url(#eab71dd9-9d7a-47bd-8044-256344ee00d0)"
          />
        </svg>
      </div>
      <div className="flex flex-col order-last sm:order-first items-baseline justify-start sm:space-y-10 space-y-4 relative z-20 text-bordyColor dark:text-gray-100">
        <h2 className="text-3xl xl:text-5xl uppercase font-normal xl:leading-extraLoose">
          {title}
        </h2>
        <div className="flex flex-col sm:space-y-8 space-y-6">
          <h3 className="text-2xl font-bold">{subHeading}</h3>
          <div className="flex space-x-8 items-center">
            <a
              href="#"
              className="text-base xl:text-lg uppercase whitespace-nowrap font-black py-3 xl:py-4 px-6 xl:px-12 rounded text-gray-100 bg-appRed"
            >
              BID NOW
            </a>
            <div>
              <h3 className="text-xl sm:text-3xl font-bold">{price}</h3>
              <p>{type}</p>
            </div>
          </div>
        </div>
      </div>
      <div className="relative z-20 ">
        <img src={heroImg} alt="hero" className="max-w-full" />
      </div>
    </div>
  );
}

export default Hero;
<file_sep>/src/pages/Asset.js
/* eslint-disable */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { logoutUser } from "../actions/authActions";
import { getAssetByID, getETHRate, updateAsset } from "../actions/assetActions";
import classnames from "classnames";
import { compose } from "redux";
import { withStyles } from "@material-ui/core";
import exactMath from "exact-math";
import { Spinner } from "@chevtek/react-spinners";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import CurrencyFormat from "react-currency-format";
import { Helmet } from "react-helmet";
import logo from "../assets/img/favicon.png";
import isEmpty from "../validation/is-empty";

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
});

class Asset extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      token_id: "",
      contract_address: "",
      price: "",
      description: "",
      image: "",
      youtube: "",
      facebook: "",
      twitter: "",
      instagram: "",
      errors: {},
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    window.scrollTo(0, 1);
    this.props.getETHRate();
    this.props.getAssetByID(this.props.match.params.id);
  }

  componentDidUpdate(prevProps) {
    if (this.props.match.params.id !== prevProps.match.params.id) {
      this.props.getAssetByID(this.props.match.params.id);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }

    if (nextProps.asset.asset) {
      const asset = nextProps.asset.asset;

      // If asset field doesn't exist, make empty string
      asset.name = !isEmpty(asset.name) ? asset.name : "";
      asset.token_id = !isEmpty(asset.token_id) ? asset.token_id : "";
      asset.contract_address = !isEmpty(asset.contract_address)
        ? asset.contract_address
        : "";
      asset.price = !isEmpty(asset.price) ? asset.price : "";
      asset.description = !isEmpty(asset.description) ? asset.description : "";
      asset.image = !isEmpty(asset.image) ? asset.image : "";
      asset.twitter = !isEmpty(asset.twitter) ? asset.twitter : "";
      asset.facebook = !isEmpty(asset.facebook) ? asset.facebook : "";
      asset.youtube = !isEmpty(asset.youtube) ? asset.youtube : "";
      asset.instagram = !isEmpty(asset.instagram) ? asset.instagram : "";

      // Set component field state
      this.setState({
        name: asset.name,
        token_id: asset.token_id,
        contract_address: asset.contract_address,
        price: asset.price,
        description: asset.description,
        image: asset.image,
        twitter: asset.twitter,
        facebook: asset.facebook,
        youtube: asset.youtube,
        instagram: asset.instagram,
      });
    }
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e) {
    e.preventDefault();

    const assetData = {
      id: this.props.match.params.id,
      name: this.state.name,
      token_id: this.state.token_id,
      contract_address: this.state.contract_address,
      price: this.state.price,
      description: this.state.description,
      image: this.state.image,
      youtube: this.state.youtube,
      facebook: this.state.facebook,
      twitter: this.state.twitter,
      instagram: this.state.instagram,
    };

    this.props.updateAsset(assetData, this.props.history);
  }

  onLogoutClick(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;
    const { ethPrice, ethPriceLoading } = this.props.ethRate;
    const disableMathError = { invalidError: false };

    return (
      <div>
        <Helmet>
          <meta charSet="utf-8" />
          <title>WeAreMasters - Update Profile</title>
          <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="<KEY>"
            crossorigin="anonymous"
          />
        </Helmet>

        <div className="container py-4">
          <div className="row no-gutter">
            <div className="col-md-4 m-auto mt-4">
              <Link to="/account">
                <img
                  width="100"
                  src={logo}
                  alt="WeAreMasters Logo"
                  className="center-image mt-2 mb-4"
                />
              </Link>
            </div>
            <div className="col-md-12">
              <div className="col-md-6 m-auto">
                <h2 className="text-center mb-4">
                  <strong style={{ wordSpacing: "5px" }}>
                    APPROVE DIGITAL ART
                  </strong>
                </h2>
                <form
                  className="need-validation"
                  onSubmit={this.onSubmit}
                  noValidate
                >
                  {errors.error && (
                    <div class="alert alert-danger text-center" role="alert">
                      {errors.error}
                    </div>
                  )}
                  <div className="mb-4">
                    <label for="name" className="form-label">
                      <strong>Title of Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={this.state.name}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.name,
                      })}
                      placeholder="Enter title of Digital Art"
                      autofocus
                      required
                    />
                    {errors.name && (
                      <div className="invalid-feedback">{errors.name}</div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="token_id" className="form-label">
                      <strong>Token ID for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="token_id"
                      name="token_id"
                      value={this.state.token_id}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.token_id,
                      })}
                      placeholder="Enter Token ID for Digital Art"
                      autofocus
                      required
                    />
                    {errors.token_id && (
                      <div className="invalid-feedback">{errors.token_id}</div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="contract_address" className="form-label">
                      <strong>Contract Address for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="contract_address"
                      name="contract_address"
                      value={this.state.contract_address}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.contract_address,
                      })}
                      placeholder="Enter Contract Address for Digital Art"
                      autofocus
                      required
                    />
                    {errors.contract_address && (
                      <div className="invalid-feedback">
                        {errors.contract_address}
                      </div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="price" className="form-label">
                      <strong>
                        Price of Digital Art in ETH{" "}
                        {ethPrice === null || ethPriceLoading ? null : (
                          <CurrencyFormat
                            value={exactMath.mul(
                              1,
                              ethPrice.amount,
                              disableMathError
                            )}
                            displayType={"text"}
                            thousandSeparator={true}
                            decimalSeperator="."
                            decimalScale={2}
                            fixedDecimalScale={true}
                            renderText={(value) => (
                              <span>(1 ETH = &#36;{value})</span>
                            )}
                          />
                        )}
                      </strong>
                    </label>
                    <div className="input-group mb-4">
                      <span className="input-group-text">
                        <strong>ETH</strong>
                      </span>
                      <input
                        type="text"
                        id="price"
                        name="price"
                        value={this.state.price}
                        onChange={this.onChange}
                        className={classnames("form-control form-control-lg", {
                          "is-invalid": errors.price,
                        })}
                        placeholder="e.g 2.5"
                        autofocus
                        required
                      />
                    </div>
                    {errors.price && (
                      <div className="invalid-feedback">{errors.price}</div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="description" className="form-label">
                      <strong>Description for Digital Art</strong>
                    </label>
                    <textarea
                      rows="5"
                      id="description"
                      name="description"
                      value={this.state.description}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.description,
                      })}
                      placeholder="Enter full description for your Digital Art"
                      required
                    ></textarea>
                    {errors.description && (
                      <div className="invalid-feedback">
                        {errors.description}
                      </div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="image" className="form-label">
                      <strong>Image URL for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="image"
                      name="image"
                      value={this.state.image}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.image,
                      })}
                      placeholder="e.g https://filestack.com/WEA9EB7Q5RY"
                      autofocus
                      required
                    />
                    {errors.image && (
                      <div className="invalid-feedback">{errors.image}</div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="youtube" className="form-label">
                      <strong>YouTube URL for Digital Art</strong>
                    </label>

                    <input
                      type="text"
                      id="youtube"
                      name="youtube"
                      value={this.state.youtube}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.youtube,
                      })}
                      placeholder="e.g https://youtu.be/WEA9EB7Q5RY (optional)"
                      autofocus
                      required
                    />
                    {errors.youtube && (
                      <div className="invalid-feedback">{errors.youtube}</div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="facebook" className="form-label">
                      <strong>FaceBook URL for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="facebook"
                      name="facebook"
                      value={this.state.facebook}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.facebook,
                      })}
                      placeholder="e.g https://facebook.com/WEA9EB7Q5RY (optional)"
                      autofocus
                      required
                    />
                    {errors.facebook && (
                      <div className="invalid-feedback">{errors.facebook}</div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="twitter" className="form-label">
                      <strong>Twitter URL for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="twitter"
                      name="twitter"
                      value={this.state.twitter}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.twitter,
                      })}
                      placeholder="e.g https://twitter.com/WEA9EB7Q5RY (optional)"
                      autofocus
                      required
                    />
                    {errors.twitter && (
                      <div className="invalid-feedback">{errors.twitter}</div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="instagram" className="form-label">
                      <strong>Instagram URL for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="instagram"
                      name="instagram"
                      value={this.state.instagram}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.instagram,
                      })}
                      placeholder="e.g https://instagram.com/WEA9EB7Q5RY (optional)"
                      autofocus
                      required
                    />
                    {errors.instagram && (
                      <div className="invalid-feedback">{errors.instagram}</div>
                    )}
                  </div>

                  <div className="d-grid gap-2">
                    <button className="btn btn-lg btn-primary" type="submit">
                      <Spinner name="updateAssetLoading">
                        <Backdrop className={classes.backdrop} open={true}>
                          <CircularProgress color="inherit" />
                        </Backdrop>
                        Processing...
                      </Spinner>
                      <Spinner name="updateAssetNotLoading" show={true}>
                        Proceed to Approve Digital Art
                      </Spinner>
                    </button>
                  </div>
                </form>
                <hr />
                <div className="row">
                  <div className="col-md-6">
                    <div className="d-grid gap-2">
                      <Link to="/account" className="btn btn-dark my-2">
                        Back Home
                      </Link>
                    </div>
                  </div>
                  <div className="col-md-6">
                    <div className="d-grid gap-2">
                      <Link to="/market" className="btn btn-dark my-2">
                        Market Place
                      </Link>
                    </div>
                  </div>
                </div>
                <hr className="mb-5" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Asset.propTypes = {
  getAssetByID: PropTypes.func.isRequired,
  updateProfile: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  asset: PropTypes.object.isRequired,
  logoutUser: PropTypes.func.isRequired,
  getETHRate: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile,
  errors: state.errors,
  ethRate: state.ethRate,
  asset: state.asset,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, {
    getAssetByID,
    getETHRate,
    updateAsset,
    logoutUser,
  })
)(Asset);
<file_sep>/src/components/cards/Music.js
/* eslint-disable */
import { Menu, Transition } from "@headlessui/react";
import { Fragment } from "react";
// import play from "../../assets/icons/play.svg";
function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}
function Music(props) {
  const { title, artist, thumbnail, eth, pricing, price } = props.card;
  return (
    <div className="cursor-pointer">
      <div className="relative flex h-track">
        <img
          src={thumbnail}
          alt="feature"
          className="rounded-md w-full object-cover"
        />
        <div className="absolute px-4 py-4 w-full h-full flex items-end text-sm text-gray-100 font-medium justify-end">
          {/* <button className="text-gray-100 w-8 h-8 rounded-full bg-gray-400 flex items-center justify-center flex-shrink-0 hover:appRed duration-300 focus:outline-none">
            <img src={play} />
          </button> */}
          <Menu as="div" className="relative inline-block text-left">
            {({ open }) => (
              <>
                <div>
                  <Menu.Button className="text-gray-100 w-6 h-6 rounded-full bg-grey-400 flex items-center justify-center flex-shrink-0 hover:appRed duration-300 focus:outline-none">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-three-dots"
                      viewBox="0 0 16 16"
                    >
                      <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
                    </svg>
                  </Menu.Button>
                </div>

                <Transition
                  show={open}
                  as={Fragment}
                  enter="transition ease-out duration-100"
                  enterFrom="transform opacity-0 scale-95"
                  enterTo="transform opacity-100 scale-100"
                  leave="transition ease-in duration-75"
                  leaveFrom="transform opacity-100 scale-100"
                  leaveTo="transform opacity-0 scale-95"
                >
                  <Menu.Items
                    static
                    className="origin-top-right absolute z-50 right-0 mt-2 w-44 rounded-md shadow-lg bg-white bg-opacity-60 ring-1 ring-black ring-opacity-5 focus:outline-none"
                  >
                    <div className="py-1">
                      <Menu.Item>
                        {({ active }) => (
                          <a
                            href="#"
                            className={classNames(
                              active
                                ? "bg-gray-100 text-gray-900"
                                : "text-black font-black",
                              "block px-4 py-2 text-sm"
                            )}
                          >
                            Share To Twitter
                          </a>
                        )}
                      </Menu.Item>
                      <Menu.Item>
                        {({ active }) => (
                          <a
                            href="#"
                            className={classNames(
                              active
                                ? "bg-gray-100 text-gray-900"
                                : "text-black font-black",
                              "block px-4 py-2 text-sm"
                            )}
                          >
                            Share To Instagram
                          </a>
                        )}
                      </Menu.Item>
                      <Menu.Item>
                        {({ active }) => (
                          <a
                            href="#"
                            className={classNames(
                              active
                                ? "bg-gray-100 text-gray-900"
                                : "text-black font-black",
                              "block px-4 py-2 text-sm"
                            )}
                          >
                            Share To Facebook
                          </a>
                        )}
                      </Menu.Item>
                      <form method="POST" action="#">
                      </form>
                    </div>
                  </Menu.Items>
                </Transition>
              </>
            )}
          </Menu>
          {/* <button className="text-gray-100 w-8 h-8 rounded-full bg-appRed flex items-center justify-center flex-shrink-0 hover:appRed duration-300 focus:outline-none">
            <svg className="w-6 h-6" viewBox="0 0 24 24">
              <path
                fill="currentColor"
                d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
              />
            </svg>
          </button> */}
        </div>
      </div>
      <div className="flex justify-between flex-wrap text-bordyColor dark:text-gray-100">
        <a href="#" className="flex flex-col capitalize text-sm my-2">
          <p>{title}</p>
          <div className="flex justify-between">
            <p>{artist}</p>
            <p className="ml-24">{price}</p>
          </div>
        </a>
        <div className="text-xs my-2 uppercase">
          <p className="">{eth}</p>
          <p>{pricing}</p>
        </div>
      </div>
    </div>
  );
}

export default Music;
<file_sep>/src/components/Content.js
/* eslint-disable */

import React from "react";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import newImg from "../assets/img/new.jpg";
import fOne from "../assets/img/special/1.gif";
import fTwo from "../assets/img/special/2.gif";
import fThree from "../assets/img/special/3.gif";
import FeatureCard from "../components/cards/Feature";
import FeatureCardB from "../components/cards/FeatureB";
import MusicCard from "../components/cards/Music";
import RadioCard from "../components/cards/Radio";
import SpecialCard from "../components/cards/Special";
import Hero from "../components/Hero";
import artis from "../assets/img/artis.gif";
import Track from "../components/Track";
import { Link } from "react-router-dom";

function Content() {
  const featureList = [
    {
      id: 1,
      artist: "Night Sky By",
      heading1: "Iconicevol",
      heading2: "BID - 0.11 ETH ($455.12)",
      title:
        "The `night sky` depicts a time of reflection and how all our actions have consequences.",
      img: fOne,
      link: "#",
    },
    {
      id: 2,
      artist: "<NAME>",
      heading1: "Aradeinde",
      heading2: "BID - 1.75 ETH ($7,256.95)",
      title: "Explore the rich, vibrant sounds from across the continent.",
      img: fTwo,
      link: "#",
    },
    {
      id: 3,
      artist: "Verstappen in Color By",
      heading1: "Osikhena x Simisola",
      heading2: "BID - 1.75 ETH ($7,256.95)",
      title: "Bensoul gets wrapped up in the thrill of the honeymoon phase.",
      img: fThree,
      link: "#",
    },
  ];
  const trackList = [
    {
      id: 1,
      title: "Kaleidoscope Woman",
      artist: "IPneuma",
      price: "-2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/CPe3saEkiRAMGiOuKIMtGXnent817rjIKGcwBRhSADk5zzFLsFxbHoWwc0qKqGqCFONS0E5SvT0ljbsZBiKLWolVFWP75PtcGCuh=s0",
      link: "#",
    },
    {
      id: 2,
      title: "Kaleidoscope Woman",
      artist: "IPneuma",
      price: "-2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
      link: "#",
    },
    {
      id: 3,
      title: "Kaleidoscope Woman",
      artist: "IPneuma",
      price: "-2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/KBPFHbreehLr7iQYTAeAmAoQqM4GwlRJk9O9x9bLpBy1uVqtJEZTTEXkJ2-0bClw1zvFAmEDhXHctKAdW8tp2LwpMSMSROsUlyjS1A=s0",
      link: "#",
    },
    {
      id: 4,
      title: "Kaleidoscope Woman",
      artist: "IPneuma",
      price: "-2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
      link: "#",
    },
    {
      id: 5,
      title: "Kaleidoscope Woman",
      artist: "IPneuma",
      price: "-2ETH/$3000",
      thumbnail:
        "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
      link: "#",
    },
  ];

  const artistList = [
    {
      id: 1,
      artist: "mrmisang",
      thumbnail:
        "https://ipfs.pixura.io/ipfs/QmTmytwKogPqvoUrtnX2vHdcZA2stNirbNk7BBu3AAs4Rt/facebook.gif",
      link: "artist",
    },
    {
      id: 2,
      artist: "annadreambrush",
      thumbnail:
        "https://ipfs.pixura.io/ipfs/QmdzWRYb8QpsASXuGKW3QgU8JWeU35iQoMCNGxEMjndBZB/profile-300.gif",
      link: "artist",
    },
    {
      id: 3,
      artist: "giovannimotta",
      thumbnail:
        "https://ipfs.pixura.io/ipfs/QmVk6XdyASigysct5H5zdcxNQBTgP7jMLARiHJXDe2EdJD/jb.gif",
      link: "artist",
    },
    {
      id: 4,
      artist: "Killercid",
      thumbnail:
        "https://ipfs.pixura.io/ipfs/QmP7nRMbPt6hNLm4PE5mwLjPmE2WZquRYso7e3AVRFyyFR/KillerAcidMouth.gif",
      link: "artist",
    },
    {
      id: 5,
      artist: "opheliafu",
      thumbnail:
        "https://ipfs.pixura.io/ipfs/QmY8jYdqQHrJ2fGaDwwgpmKHEkGV6yt6HM3JnD6TxLEfih",
      link: "artist",
    },
    {
      id: 6,
      artist: "frenetikvoid",
      thumbnail:
        "https://ipfs.pixura.io/ipfs/QmXJVH1ftXkhYafvkY1sp5iJPEMMV5ydwSgcn7rrnebDye/icon.jpg",
      link: "artist",
    },
    {
      id: 7,
      artist: "federicoclapis",
      thumbnail:
        "https://ipfs.pixura.io/ipfs/QmfLyf2JYovKQRsBMHGE6Pt5tNMKjyUYoqMLZ9KGsu9VLQ/foro%20profilo%20media%20risoluzi.jpg",
      link: "artist",
    },
  ];

  const tracksGrid = [
    {
      id: 1,
      title: "Meetbits",
      artist: "Apple Music African",
      thumbnail:
        "https://lh3.googleusercontent.com/d784iHHbqQFVH1XYD6HoT4u3y_Fsu_9FZUltWjnOzoYv7qqB5dLUqpGyHBd8Gq3h4mykK5Enj8pxqOUorgD2PfIWcVj9ugvu8l0=s64",
      link: "#",
    },
    {
      id: 2,
      title: "Zed Run",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/tgpgbT3OwxX4REASLdyafzCWQ5EhOtgSiIlhI3am3aZ_mYPS0WbM9Z4F6hOhb0D-AKqhHlFg6BNBquchQy-_bwY=s64",
      link: "#",
    },
    {
      id: 3,
      title: "crypto punk",
      artist: "Apple Music African",
      thumbnail:
        "https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE=s64",
      link: "#",
    },
    {
      id: 4,
      title: "<NAME>",
      artist: "Apple Music African",
      thumbnail:
        "https://lh3.googleusercontent.com/p6uV0RJZwJb9hcEDOg2VUzw8pr5ZRd62y-VLe7nld5j6yGfJmsUeWugg1RBbEcC84khGArqMX3BwWp6vFa5FjpmUF5pIu6fliNf2=s64",
      link: "#",
    },
    {
      id: 5,
      title: "Rarible",
      artist: "Apple Music African",
      thumbnail:
        "https://lh3.googleusercontent.com/FG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw=s64",
      link: "#",
    },
    {
      id: 6,
      title: "<NAME>",
      artist: "Apple Music African",
      thumbnail:
        "https://lh3.googleusercontent.com/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB=s64",
      link: "#",
    },
    {
      id: 7,
      title: "Sorare",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/gj47nmAR3valkmpVbwamiuTJfWEWSCyVeORdjM6DRWrZ1o8WaqBxFXmpBrzZnGoWaPwq1Y0jiXRrBLbnLcawAp92=s64",
      link: "#",
    },
    {
      id: 8,
      title: "<NAME>",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/ZTBjAOy61poNh1htSHJ-BeokMpvbui7DdUUMIVk1OI1MtcpGN6sG_oHs38r3AF1JO1l-AxVQZ-aam_h43Dr0XZZC2jblvNYUmZLyTkw=s64",
      link: "#",
    },
    {
      id: 9,
      title: "Decentraland",
      artist: "Apple Music gospel",
      thumbnail: newImg,
      link: "https://lh3.googleusercontent.com/5KIxEGmnAiL5psnMCSLPlfSxDxfRSk4sTQRSyhPdgnu70nGb2YsuVxTmO2iKEkOZOfq476Bl1hAu6aJIKjs1myY=s64",
    },
    {
      id: 10,
      title: "Apymon",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/8OogKrYF_3kTL3w_8J_TwEWTn6E4OS_SP5EVdeAJnw7GycEJJy36uZYkLKoMnrX-ObWNYlMpEIu5fGoRMtJrkL8HRnVz4gY8jrD2Cw=s64",
      link: "#",
    },
    {
      id: 11,
      title: "M<NAME>",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/KgKgvjxO8YUDbr747VRfmAEqhvjP8GzNIC23UMheTkzUQ1JmOK07FQ6BhlfBOtrKG_Jm7NoasA6PVch_0Ujf55mp=s64",
      link: "#",
    },
    {
      id: 12,
      title: "Art Blocks Curated",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/ClKm5VUVeA_XuEvxx_jaDyCodqLqQcSNI6Cjk1S_b6YAMK6kLp8t4175jvmb9lQMiv9mWVFcbh4XksrhnHYqwoPD2tOxmVNK6Qn6=s64",
      link: "#",
    },
    {
      id: 13,
      title: "Cryptovoxels",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/Jy6UrKMSi0e9w9jYtC1ON-4tOVXA1mXLk7XCLxvWEDuXeLFExJSYnw2DLAGtP3Ly98WJbrrFm6xEodcrpGnKB2tF=s64",
      link: "#",
    },
    {
      id: 14,
      title: "Somnium space VR",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/mzUNo5vk95qQfpAbXir0_6oJmZlyqnq_ix3BIjmfeVGrFPoxeAqf-vYHMvh115bSdJGxRtgGTWKldOzdJQGtEqGW=s64",
      link: "#",
    },
    {
      id: 15,
      title: "Ghxsts",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/uVziXd8Q64_zvofgrKFp5SmrcObngHoVWZMJQOHAZ3bdERsO4GaYvQcuGsz0ofr8zy8iajJdNQHCwFkSdBmkVy_osTPvoAuQFv489g=s64",
      link: "#",
    },
    {
      id: 16,
      title: "The Sandbox",
      artist: "Apple Music gospel",
      thumbnail:
        "https://lh3.googleusercontent.com/SXH8tW1siikB80rwCRnjm1a5xM_MwTg9Xl9Db6mioIk9HIlDM09pVoSR7GKJgS6ulSUpgW9BDtMk_ePX_NKgO9A=s64",
      link: "#",
    },
  ];
  let specialList = [
    {
      id: 1,
      title: "<NAME>",
      subHeading: "the honeymoon phase",
      img: fOne,
      link: "#",
    },
    {
      id: 2,
      title: "Explore the rich",
      subHeading: "the honeymoon phase",
      img: fTwo,
      link: "#",
    },
    {
      id: 3,
      title: "<NAME>",
      subHeading: "the honeymoon phase",
      img: fThree,
      link: "#",
    },
  ];
  const ButtonGroup = ({ next, previous, ...rest }) => {
    const {
      carouselState: { currentSlide },
    } = rest;
    return (
      <div className="carousel-button-group absolute w-full flex items-center">
        <button
          className={
            currentSlide === 0
              ? "hidden"
              : "absolute text-white left-0 bg-gray-700 duration-150 bg-opacity-70 focus:outline-none hover:bg-red-600 rounded-full w-6 h-6 flex items-center justify-center"
          }
          onClick={() => previous()}
        >
          <svg className="h-5 w-5" viewBox="0 0 24 24">
            <path
              fill="currentColor"
              d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
            />
          </svg>
        </button>
        <button
          className={
            currentSlide === trackList.length - 5
              ? "hidden"
              : "absolute text-white right-0 bg-gray-700 duration-150 bg-opacity-70 focus:outline-none hover:bg-red-600 rounded-full w-6 h-6 flex items-center justify-center"
          }
          onClick={() => next()}
        >
          <svg className="h-5 w-5" viewBox="0 0 24 24">
            <path
              fill="currentColor"
              d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
            />
            {currentSlide}
          </svg>
        </button>
      </div>
    );
  };
  const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 3,
      partialVisibilityGutter: 0,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 5,
      partialVisibilityGutter: 0,
    },
    tablet: {
      breakpoint: { max: 1024, min: 650 },
      items: 2,
      partialVisibilityGutter: 0,
    },
    mobile: {
      breakpoint: { max: 650, min: 0 },
      items: 1,
      partialVisibilityGutter: 0,
    },
  };

  const heroResponsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 1,
      partialVisibilityGutter: 0,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 1,
      partialVisibilityGutter: 0,
    },
    tablet: {
      breakpoint: { max: 1024, min: 650 },
      items: 1,
      partialVisibilityGutter: 0,
    },
    mobile: {
      breakpoint: { max: 650, min: 0 },
      items: 1,
      partialVisibilityGutter: 0,
    },
  };

  const heroes = [
    {
      title: "NEMO ENIM IPSAM VOLUPTATEM QUIA VOLUPTAS",
      subHeading: "80/90s",
      price: "ETH 23",
      type: "XD/20-93",
    },
    {
      title: "IPSAM VOLUPTATEM NEMO ENIM QUIA VOLUPTAS",
      subHeading: "80/90s",
      price: "ETH 19.99",
      type: "XD/20-93",
    },
  ];

  const features = featureList.map((card) => {
    return <FeatureCard key={card.id} card={card} />;
  });
  const featuresB = featureList.map((card) => {
    return <FeatureCardB key={card.id} card={card} />;
  });
  const tracks = trackList.map((card) => {
    return <MusicCard key={card.id} card={card} />;
  });
  const featureCreation = trackList.map((card) => {
    return (
      <div>
        <MusicCard key={card.id} card={card} />{" "}
        <hr className="my-4 border-gray-400 border-opacity-10 dark:border-sideBar" />
        <MusicCard key={card.id} card={card} />
      </div>
    );
  });
  const special = specialList.map((card) => {
    return <SpecialCard key={card.id} card={card} />;
  });
  const radioTracks = artistList.map((card) => {
    return <RadioCard key={card.id} card={card} />;
  });
  const getHeroes = heroes.map((hero) => {
    return <Hero key={hero.title} hero={hero} />;
  });
  const gridTracks = <Track cards={tracksGrid} />;
  return (
    <div className="max-w-7xl sm:mx-8 mx-auto text-gray-50 pb-24">
      <div className="h-full">
        <Carousel
          arrows={false}
          showDots={true}
          autoPlay={true}
          infinite={true}
          transitionDuration={500}
          partialVisible={true}
          responsive={heroResponsive}
          itemClass="px-2"
          className="mt-4 pt-7 pb-8"
        >
          {getHeroes}
        </Carousel>
      </div>
      <div>
        <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      </div>
      <div className="mt-12 grid lg:grid-cols-3 gap-6 items-end">
        {featuresB}
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div>
        <div className="flex justify-between items-center">
          <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
            Featured Creations
          </h2>
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        <Carousel
          arrows={false}
          customButtonGroup={<ButtonGroup />}
          partialVisible={true}
          responsive={responsive}
          itemClass="px-2"
          className="mt-8"
        >
          {featureCreation}
        </Carousel>
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div>
        <br></br>
        <div className="grid md:grid-cols-12 gap-8 text-bordyColor dark:text-gray-100">
          <div className="xl:col-span-2 md:col-span-3 col-span-12">
            <img
              src="https://ipfs.pixura.io/ipfs/QmTmytwKogPqvoUrtnX2vHdcZA2stNirbNk7BBu3AAs4Rt/facebook.gif"
              className="mx-auto"
            />
          </div>
          <div className="xl:col-span-10 md:col-span-9 col-span-12 space-y-8 md:px-0 px-4">
            <div className="grid md:grid-cols-12 gap-8">
              <div className="md:col-span-4 col-span-12 text-center space-y-2">
                <h3 className="text-lg capitalize font-semibold">SIGN UP</h3>
                <p className="text-sm">
                  Create an account , update your profile, add social links,
                  profile image and bio.
                </p>
              </div>
              <div className="md:col-span-4 col-span-12 text-center space-y-2">
                <h3 className="text-lg capitalize font-semibold">
                  ADD YOUR NFTs{" "}
                </h3>
                <p className="text-sm">
                  Upload your work (image, video, audio, or 3D art), add a title
                  and description, add social links.
                </p>
              </div>
              <div className="md:col-span-4 col-span-12 text-center space-y-2">
                <h3 className="text-lg capitalize font-semibold">
                  LIST THEM FOR SALE
                </h3>
                <p className="text-sm">
                  Choose between auctions and fixed-price listings, and set
                  editions for your works, and we help you sell them!
                </p>
              </div>
            </div>
            <div className="text-center">
              <button className="py-3 px-10 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 ... rounded uppercase text-white text-sm font-medium">
                enter marketplace
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div>
        <div className="flex justify-between items-center">
          <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
            MBPR Agency
          </h2>
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        <Carousel
          arrows={false}
          customButtonGroup={<ButtonGroup />}
          partialVisible={true}
          responsive={responsive}
          itemClass="px-2"
          className="mt-8"
        >
          {featureCreation}
        </Carousel>
      </div>
      <div className="mt-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div className="mt-12">
        <div className="flex justify-between items-center">
          <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
            Upcoming Hot Drops
          </h2>
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        <div className="mt-6 grid lg:grid-cols-3 gap-4 items-end">
          {special}
        </div>
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div className="mt-12 grid lg:grid-cols-3 gap-6 items-end">
        {features}
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div>
        <div className="flex justify-between items-center">
          <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
            featured artists
          </h2>
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        <Carousel
          arrows={false}
          customButtonGroup={<ButtonGroup />}
          partialVisible={true}
          responsive={responsive}
          itemClass="px-2"
          className="mt-8"
        >
          {radioTracks}
        </Carousel>
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div>
        <div className="flex justify-between items-center">
          <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
            new week, new goals
          </h2>
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        <Carousel
          arrows={false}
          customButtonGroup={<ButtonGroup />}
          partialVisible={true}
          responsive={responsive}
          itemClass="px-2"
          className="mt-8"
        >
          {tracks}
        </Carousel>
      </div>
      <div className="mt-6 mb-2 pt-2 border-b border-gray-400 border-opacity-20" />
      <div>
        <div className="flex relative top-4 justify-between items-center">
          <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
            Collectibles/coming soon
          </h2>
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        {gridTracks}
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div>
        <div className="flex justify-between items-center">
          <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
            new week, new goals
          </h2>
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        <Carousel
          arrows={false}
          customButtonGroup={<ButtonGroup />}
          partialVisible={true}
          responsive={responsive}
          itemClass="px-2"
          className="mt-8"
        >
          {tracks}
        </Carousel>
      </div>
      <div className="mt-6 pt-4 mb-6 border-b border-gray-400 border-opacity-20" />
      <div className="mb-2">
        <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100 mb-4">
          New Set
        </h2>
        <div className="flex flex-row-reverse relative bottom-10">
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        <div className="flex">
          <div className="w-full">
            <img src={artis} className="w-96 h-80 rounded" alt="img" />
            <div className="flex">
              <p className="text-xl">Kissed by the sun</p>
              <span className="text-sm mt-2 ml-28">-2ETH/$3000</span>
            </div>
            <p className="text-lg">Dorgu</p>
          </div>
          <div className="w-full pt-20 pr-24 relative -left-20">
            <p className="text-sm">
              <p className="inline font-black text-lg">
                {" "}
                The Deconstruction Of A Nation
              </p>{" "}
              - has been televised since Nigeria won it’s independence from the
              British in 1960. Our living rooms or parlors have become the arena
              citizens of our nascent nation have sat to watch the
              deconstruction of the dream our founding fathers had. We’ve seen
              civil war, coup’s , skirmishes and the dominance of our military.
              The deconstruction of a nation is mixed media reminding us how far
              we’ve come as a people.
            </p>
          </div>
        </div>
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <div>
        <div className="flex justify-between items-center">
          <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
            new week, new goals
          </h2>
          <Link to="/view">
            <a href="#" className="capitalize text-appRed flex items-center">
              view all
              <svg className="w-5 h-5 ml-2" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                />
              </svg>
            </a>
          </Link>
        </div>
        <Carousel
          arrows={false}
          customButtonGroup={<ButtonGroup />}
          partialVisible={true}
          responsive={responsive}
          itemClass="px-2"
          className="mt-8"
        >
          {tracks}
        </Carousel>
      </div>
      <div className="mt-6 mb-6 pt-4 border-b border-gray-400 border-opacity-20" />
      <h2 className="text-xl capitalize font-medium text-bordyColor dark:text-gray-100">
        Something something
      </h2>
      <div className="flex justify-between mt-16">
        <div className="w-full">
          <img src={artis} className="w-96 h-80 rounded" alt="img" />
          <div className="flex">
            <p className="text-xl">Kissed by the sun</p>
            <span className="text-sm mt-2 ml-28">-2ETH/$3000</span>
          </div>
          <p className="text-base">Dorgu</p>
        </div>
        <div className="w-full">
          <img src={artis} className="w-96 h-80 rounded" alt="img" />
          <div className="flex">
            <p className="text-xl">Kissed by the sun</p>
            <span className="text-sm mt-2 ml-28">-2ETH/$3000</span>
          </div>
          <p className="text-base">Dorgu</p>
        </div>
        <div className="w-full">
          <img src={artis} className="w-96 h-80 rounded" alt="img" />
          <div className="flex">
            <p className="text-xl">Kissed by the sun</p>
            <span className="text-sm mt-2 ml-28">-2ETH/$3000</span>
          </div>
          <p className="text-base">Dorgu</p>
        </div>
      </div>
    </div>
  );
}

export default Content;
<file_sep>/src/pages/Signup.js
/* eslint-disable */
// import insta from "../assets/icons/insta.png";
// import twitter from "../assets/icons/twitter.png";
import React, { Component } from "react";
import ModalVideo from "react-modal-video";
import signup from "../assets/img/signup.jpg";
import "../assets/video.min.css";
import logo from "../assets/img/logo-white.svg";
import PropTypes from "prop-types";
import classnames from "classnames";
import { connect } from "react-redux";
import { withRouter, Link } from "react-router-dom";
import { registerUser } from "../actions/authActions";
import { Spinner } from "@chevtek/react-spinners";
import { withStyles } from "@material-ui/core/styles";
import compose from "recompose/compose";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import "../assets/video.min.css";

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
});

class Signup extends Component {
  constructor() {
    super();
    this.state = {
      firstName: "",
      lastName: "",
      username: "",
      email: "",
      phone: "",
      location: "",
      password: "",
      confirmPassword: "",
      isOpen: false,
      errors: {},
    };

    this.onChange = this.onChange.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    if (this.props.auth.isAuthenticated) {
      this.props.history.push("/account");
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.auth.isAuthenticated) {
      this.props.history.push("/account");
    }

    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  handleKeyDown(e) {
    if (e.key === " ") {
      e.preventDefault();
    }
  }

  onSubmit(e) {
    e.preventDefault();

    const newUser = {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      username: this.state.username,
      email: this.state.email,
      phone: this.state.phone,
      location: this.state.location,
      password: <PASSWORD>,
      confirmPassword: <PASSWORD>,
    };

    console.log("Reached here...");
    this.props.registerUser(newUser);
  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;

    return (
      <div className="relative h-full flex items-center justify-center">
        <div className="max-w-7xl mx-auto py-16 lg:px-8 px-4">
          <div className="grid lg:grid-cols-7 gap-8 text-bordyColor dark:text-gray-200 items-center">
            <div className="lg:col-span-3 px-8 lg:order-first order-last">
              <div>
                <Link to="/">
                  <img src={logo} width="225px" className="mb-10" />
                </Link>

                <h2 className="sm:text-5xl text-3xl sm:leading-extraLoose font-bold">
                  Create Account
                </h2>
              </div>
              <form
                className="mt-12 space-y-4"
                onSubmit={this.onSubmit}
                novalidate="novalidate"
              >
                <div className="grid xl:grid-cols-2 lg:grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400 w-full">
                    <label className="capitalize font-medium">First Name</label>
                    <input
                      type="text"
                      id="firstName"
                      name="firstName"
                      placeholder="Enter first name"
                      onChange={this.onChange}
                      className={classnames(
                        "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                        {
                          "is-invalid": errors.firstName,
                        }
                      )}
                      required
                    />
                    {errors.firstName && (
                      <div className="form-error">{errors.firstName}</div>
                    )}
                  </div>
                  <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400 w-full">
                    <label className="capitalize font-medium">Last Name</label>
                    <input
                      type="text"
                      id="lastName"
                      name="lastName"
                      placeholder="Enter last name"
                      value={this.state.lastName}
                      onChange={this.onChange}
                      className={classnames(
                        "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                        {
                          "is-invalid": errors.lastName,
                        }
                      )}
                      required
                    />
                    {errors.lastName && (
                      <div className="form-error">{errors.lastName}</div>
                    )}
                  </div>
                  <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400 w-full">
                    <label className="capitalize font-medium">username</label>
                    <input
                      type="text"
                      id="username"
                      name="username"
                      placeholder="Enter Username"
                      value={this.state.username}
                      onChange={this.onChange}
                      onKeyDown={this.handleKeyDown}
                      className={classnames(
                        "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                        {
                          "is-invalid": errors.username,
                        }
                      )}
                      required
                    />
                    {errors.username && (
                      <div className="form-error">{errors.username}</div>
                    )}
                  </div>
                  <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400 w-full">
                    <label className="capitalize font-medium">
                      email address
                    </label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      placeholder="Enter Email Address"
                      value={this.state.email}
                      onChange={this.onChange}
                      className={classnames(
                        "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                        {
                          "is-invalid": errors.email,
                        }
                      )}
                      required
                    />
                    {errors.email && (
                      <div className="form-error">{errors.email}</div>
                    )}
                  </div>
                  <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400 w-full">
                    <label className="capitalize font-medium">phone</label>
                    <input
                      type="text"
                      id="phone"
                      name="phone"
                      placeholder="Enter Phone"
                      value={this.state.phone}
                      onChange={this.onChange}
                      className={classnames(
                        "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                        {
                          "is-invalid": errors.phone,
                        }
                      )}
                      required
                    />
                    {errors.email && (
                      <div className="form-error">{errors.email}</div>
                    )}
                  </div>
                  <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400 w-full">
                    <label className="capitalize font-medium">location</label>
                    <div className="select-wrapper country relative">
                      <select
                        id="location"
                        name="location"
                        value={this.state.location}
                        onChange={this.onChange}
                        className="px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar w-full focus:outline-none"
                      >
                        <option value={0}>Select Location</option>
                        <option value="Afghanistan">Afghanistan</option>
                        <option value="Åland Islands">Åland Islands</option>
                        <option value="Albania">Albania</option>
                        <option value="Algeria">Algeria</option>
                        <option value="American Samoa">American Samoa</option>
                        <option value="Andorra">Andorra</option>
                        <option value="Angola">Angola</option>
                        <option value="Anguilla">Anguilla</option>
                        <option value="Antarctica">Antarctica</option>
                        <option value="Antigua and Barbuda">
                          Antigua and Barbuda
                        </option>
                        <option value="Argentina">Argentina</option>
                        <option value="Armenia">Armenia</option>
                        <option value="Aruba">Aruba</option>
                        <option value="Australia">Australia</option>
                        <option value="Austria">Austria</option>
                        <option value="Azerbaijan">Azerbaijan</option>
                        <option value="Bahamas">Bahamas</option>
                        <option value="Bahrain">Bahrain</option>
                        <option value="Bangladesh">Bangladesh</option>
                        <option value="Barbados">Barbados</option>
                        <option value="Belarus">Belarus</option>
                        <option value="Belgium">Belgium</option>
                        <option value="Belize">Belize</option>
                        <option value="Benin">Benin</option>
                        <option value="Bermuda">Bermuda</option>
                        <option value="Bhutan">Bhutan</option>
                        <option value="Bolivia">Bolivia</option>
                        <option value="Bosnia and Herzegovina">
                          Bosnia and Herzegovina
                        </option>
                        <option value="Botswana">Botswana</option>
                        <option value="Bouvet Island">Bouvet Island</option>
                        <option value="Brazil">Brazil</option>
                        <option value="British Indian Ocean Territory">
                          British Indian Ocean Territory
                        </option>
                        <option value="Brunei Darussalam">
                          Brunei Darussalam
                        </option>
                        <option value="Bulgaria">Bulgaria</option>
                        <option value="Burkina Faso">Burkina Faso</option>
                        <option value="Burundi">Burundi</option>
                        <option value="Cambodia">Cambodia</option>
                        <option value="Cameroon">Cameroon</option>
                        <option value="Canada">Canada</option>
                        <option value="Cape Verde">Cape Verde</option>
                        <option value="Cayman Islands">Cayman Islands</option>
                        <option value="Central African Republic">
                          Central African Republic
                        </option>
                        <option value="Chad">Chad</option>
                        <option value="Chile">Chile</option>
                        <option value="China">China</option>
                        <option value="Christmas Island">
                          Christmas Island
                        </option>
                        <option value="Cocos (Keeling) Islands">
                          Cocos (Keeling) Islands
                        </option>
                        <option value="Colombia">Colombia</option>
                        <option value="Comoros">Comoros</option>
                        <option value="Congo">Congo</option>
                        <option value="Congo, The Democratic Republic of The">
                          Congo, The Democratic Republic of The
                        </option>
                        <option value="Cook Islands">Cook Islands</option>
                        <option value="Costa Rica">Costa Rica</option>
                        <option value="Cote D'ivoire">Cote D'ivoire</option>
                        <option value="Croatia">Croatia</option>
                        <option value="Cuba">Cuba</option>
                        <option value="Cyprus">Cyprus</option>
                        <option value="Czech Republic">Czech Republic</option>
                        <option value="Denmark">Denmark</option>
                        <option value="Djibouti">Djibouti</option>
                        <option value="Dominica">Dominica</option>
                        <option value="Dominican Republic">
                          Dominican Republic
                        </option>
                        <option value="Ecuador">Ecuador</option>
                        <option value="Egypt">Egypt</option>
                        <option value="El Salvador">El Salvador</option>
                        <option value="Equatorial Guinea">
                          Equatorial Guinea
                        </option>
                        <option value="Eritrea">Eritrea</option>
                        <option value="Estonia">Estonia</option>
                        <option value="Ethiopia">Ethiopia</option>
                        <option value="Falkland Islands (Malvinas)">
                          Falkland Islands (Malvinas)
                        </option>
                        <option value="Faroe Islands">Faroe Islands</option>
                        <option value="Fiji">Fiji</option>
                        <option value="Finland">Finland</option>
                        <option value="France">France</option>
                        <option value="French Guiana">French Guiana</option>
                        <option value="French Polynesia">
                          French Polynesia
                        </option>
                        <option value="French Southern Territories">
                          French Southern Territories
                        </option>
                        <option value="Gabon">Gabon</option>
                        <option value="Gambia">Gambia</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Germany">Germany</option>
                        <option value="Ghana">Ghana</option>
                        <option value="Gibraltar">Gibraltar</option>
                        <option value="Greece">Greece</option>
                        <option value="Greenland">Greenland</option>
                        <option value="Grenada">Grenada</option>
                        <option value="Guadeloupe">Guadeloupe</option>
                        <option value="Guam">Guam</option>
                        <option value="Guatemala">Guatemala</option>
                        <option value="Guernsey">Guernsey</option>
                        <option value="Guinea">Guinea</option>
                        <option value="Guinea-bissau">Guinea-bissau</option>
                        <option value="Guyana">Guyana</option>
                        <option value="Haiti">Haiti</option>
                        <option value="Heard Island and Mcdonald Islands">
                          Heard Island and Mcdonald Islands
                        </option>
                        <option value="Holy See (Vatican City State)">
                          Holy See (Vatican City State)
                        </option>
                        <option value="Honduras">Honduras</option>
                        <option value="Hong Kong">Hong Kong</option>
                        <option value="Hungary">Hungary</option>
                        <option value="Iceland">Iceland</option>
                        <option value="India">India</option>
                        <option value="Indonesia">Indonesia</option>
                        <option value="Iran, Islamic Republic of">
                          Iran, Islamic Republic of
                        </option>
                        <option value="Iraq">Iraq</option>
                        <option value="Ireland">Ireland</option>
                        <option value="Isle of Man">Isle of Man</option>
                        <option value="Israel">Israel</option>
                        <option value="Italy">Italy</option>
                        <option value="Jamaica">Jamaica</option>
                        <option value="Japan">Japan</option>
                        <option value="Jersey">Jersey</option>
                        <option value="Jordan">Jordan</option>
                        <option value="Kazakhstan">Kazakhstan</option>
                        <option value="Kenya">Kenya</option>
                        <option value="Kiribati">Kiribati</option>
                        <option value="Korea, Democratic People's Republic of">
                          Korea, Democratic People's Republic of
                        </option>
                        <option value="Korea, Republic of">
                          Korea, Republic of
                        </option>
                        <option value="Kuwait">Kuwait</option>
                        <option value="Kyrgyzstan">Kyrgyzstan</option>
                        <option value="Lao People's Democratic Republic">
                          Lao People's Democratic Republic
                        </option>
                        <option value="Latvia">Latvia</option>
                        <option value="Lebanon">Lebanon</option>
                        <option value="Lesotho">Lesotho</option>
                        <option value="Liberia">Liberia</option>
                        <option value="Libyan Arab Jamahiriya">
                          Libyan Arab Jamahiriya
                        </option>
                        <option value="Liechtenstein">Liechtenstein</option>
                        <option value="Lithuania">Lithuania</option>
                        <option value="Luxembourg">Luxembourg</option>
                        <option value="Macao">Macao</option>
                        <option value="Macedonia, The Former Yugoslav Republic of">
                          Macedonia, The Former Yugoslav Republic of
                        </option>
                        <option value="Madagascar">Madagascar</option>
                        <option value="Malawi">Malawi</option>
                        <option value="Malaysia">Malaysia</option>
                        <option value="Maldives">Maldives</option>
                        <option value="Mali">Mali</option>
                        <option value="Malta">Malta</option>
                        <option value="Marshall Islands">
                          Marshall Islands
                        </option>
                        <option value="Martinique">Martinique</option>
                        <option value="Mauritania">Mauritania</option>
                        <option value="Mauritius">Mauritius</option>
                        <option value="Mayotte">Mayotte</option>
                        <option value="Mexico">Mexico</option>
                        <option value="Micronesia, Federated States of">
                          Micronesia, Federated States of
                        </option>
                        <option value="Moldova, Republic of">
                          Moldova, Republic of
                        </option>
                        <option value="Monaco">Monaco</option>
                        <option value="Mongolia">Mongolia</option>
                        <option value="Montenegro">Montenegro</option>
                        <option value="Montserrat">Montserrat</option>
                        <option value="Morocco">Morocco</option>
                        <option value="Mozambique">Mozambique</option>
                        <option value="Myanmar">Myanmar</option>
                        <option value="Namibia">Namibia</option>
                        <option value="Nauru">Nauru</option>
                        <option value="Nepal">Nepal</option>
                        <option value="Netherlands">Netherlands</option>
                        <option value="Netherlands Antilles">
                          Netherlands Antilles
                        </option>
                        <option value="New Caledonia">New Caledonia</option>
                        <option value="New Zealand">New Zealand</option>
                        <option value="Nicaragua">Nicaragua</option>
                        <option value="Niger">Niger</option>
                        <option value="Nigeria">Nigeria</option>
                        <option value="Niue">Niue</option>
                        <option value="Norfolk Island">Norfolk Island</option>
                        <option value="Northern Mariana Islands">
                          Northern Mariana Islands
                        </option>
                        <option value="Norway">Norway</option>
                        <option value="Oman">Oman</option>
                        <option value="Pakistan">Pakistan</option>
                        <option value="Palau">Palau</option>
                        <option value="Palestinian Territory, Occupied">
                          Palestinian Territory, Occupied
                        </option>
                        <option value="Panama">Panama</option>
                        <option value="Papua New Guinea">
                          Papua New Guinea
                        </option>
                        <option value="Paraguay">Paraguay</option>
                        <option value="Peru">Peru</option>
                        <option value="Philippines">Philippines</option>
                        <option value="Pitcairn">Pitcairn</option>
                        <option value="Poland">Poland</option>
                        <option value="Portugal">Portugal</option>
                        <option value="Puerto Rico">Puerto Rico</option>
                        <option value="Qatar">Qatar</option>
                        <option value="Reunion">Reunion</option>
                        <option value="Romania">Romania</option>
                        <option value="Russian Federation">
                          Russian Federation
                        </option>
                        <option value="Rwanda">Rwanda</option>
                        <option value="Saint Helena">Saint Helena</option>
                        <option value="Saint Kitts and Nevis">
                          Saint Kitts and Nevis
                        </option>
                        <option value="Saint Lucia">Saint Lucia</option>
                        <option value="Saint Pierre and Miquelon">
                          Saint Pierre and Miquelon
                        </option>
                        <option value="Saint Vincent and The Grenadines">
                          Saint Vincent and The Grenadines
                        </option>
                        <option value="Samoa">Samoa</option>
                        <option value="San Marino">San Marino</option>
                        <option value="Sao Tome and Principe">
                          Sao Tome and Principe
                        </option>
                        <option value="Saudi Arabia">Saudi Arabia</option>
                        <option value="Senegal">Senegal</option>
                        <option value="Serbia">Serbia</option>
                        <option value="Seychelles">Seychelles</option>
                        <option value="Sierra Leone">Sierra Leone</option>
                        <option value="Singapore">Singapore</option>
                        <option value="Slovakia">Slovakia</option>
                        <option value="Slovenia">Slovenia</option>
                        <option value="Solomon Islands">Solomon Islands</option>
                        <option value="Somalia">Somalia</option>
                        <option value="South Africa">South Africa</option>
                        <option value="South Georgia and The South Sandwich Islands">
                          South Georgia and The South Sandwich Islands
                        </option>
                        <option value="Spain">Spain</option>
                        <option value="Sri Lanka">Sri Lanka</option>
                        <option value="Sudan">Sudan</option>
                        <option value="Suriname">Suriname</option>
                        <option value="Svalbard and Jan Mayen">
                          Svalbard and Jan Mayen
                        </option>
                        <option value="Swaziland">Swaziland</option>
                        <option value="Sweden">Sweden</option>
                        <option value="Switzerland">Switzerland</option>
                        <option value="Syrian Arab Republic">
                          Syrian Arab Republic
                        </option>
                        <option value="Taiwan, Province of China">
                          Taiwan, Province of China
                        </option>
                        <option value="Tajikistan">Tajikistan</option>
                        <option value="Tanzania, United Republic of">
                          Tanzania, United Republic of
                        </option>
                        <option value="Thailand">Thailand</option>
                        <option value="Timor-leste">Timor-leste</option>
                        <option value="Togo">Togo</option>
                        <option value="Tokelau">Tokelau</option>
                        <option value="Tonga">Tonga</option>
                        <option value="Trinidad and Tobago">
                          Trinidad and Tobago
                        </option>
                        <option value="Tunisia">Tunisia</option>
                        <option value="Turkey">Turkey</option>
                        <option value="Turkmenistan">Turkmenistan</option>
                        <option value="Turks and Caicos Islands">
                          Turks and Caicos Islands
                        </option>
                        <option value="Tuvalu">Tuvalu</option>
                        <option value="Uganda">Uganda</option>
                        <option value="Ukraine">Ukraine</option>
                        <option value="United Arab Emirates">
                          United Arab Emirates
                        </option>
                        <option value="United Kingdom">United Kingdom</option>
                        <option value="United States">United States</option>
                        <option value="United States Minor Outlying Islands">
                          United States Minor Outlying Islands
                        </option>
                        <option value="Uruguay">Uruguay</option>
                        <option value="Uzbekistan">Uzbekistan</option>
                        <option value="Vanuatu">Vanuatu</option>
                        <option value="Venezuela">Venezuela</option>
                        <option value="Viet Nam">Viet Nam</option>
                        <option value="Virgin Islands, British">
                          Virgin Islands, British
                        </option>
                        <option value="Virgin Islands, U.S.">
                          Virgin Islands, U.S.
                        </option>
                        <option value="Wallis and Futuna">
                          Wallis and Futuna
                        </option>
                        <option value="Western Sahara">Western Sahara</option>
                        <option value="Yemen">Yemen</option>
                        <option value="Zambia">Zambia</option>
                        <option value="Zimbabwe">Zimbabwe</option>
                      </select>
                      {errors.location && (
                        <div className="form-error">{errors.location}</div>
                      )}
                    </div>
                  </div>
                  <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400 w-full">
                    <label className="capitalize font-medium">Password</label>
                    <input
                      type="password"
                      id="password"
                      name="password"
                      placeholder="Enter Password"
                      value={this.state.password}
                      onChange={this.onChange}
                      className={classnames(
                        "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                        {
                          "is-invalid": errors.password,
                        }
                      )}
                      required
                    />
                    {errors.password && (
                      <div className="form-error">{errors.password}</div>
                    )}
                  </div>
                  <div className="form-control flex flex-col text-sm space-y-2 text-bordyColor dark:text-gray-400 w-full">
                    <label className="capitalize font-medium">
                      Confirm Password
                    </label>
                    <input
                      type="password"
                      id="confirmPassword"
                      name="confirmPassword"
                      placeholder="Confirm Password"
                      value={this.state.confirmPassword}
                      onChange={this.onChange}
                      className={classnames(
                        "px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-sideBar",
                        {
                          "is-invalid": errors.confirmPassword,
                        }
                      )}
                      required
                    />
                    {errors.confirmPassword && (
                      <div className="form-error">{errors.confirmPassword}</div>
                    )}
                  </div>
                </div>
                <div className="flex flex-col justify-center items-center space-y-4">
                  <button className="px-4 py-3 bg-appRed text-sm text-gray-100  font-semibold rounded-sm w-full mt-8">
                    <Spinner name="registerLoading">
                      <Backdrop className={classes.backdrop} open={true}>
                        <CircularProgress color="inherit" />
                      </Backdrop>
                      Signing up...
                    </Spinner>
                    <Spinner name="registerNotLoading" show={true}>
                      Sign up
                    </Spinner>
                  </button>
                  {/* <p className="text-sm">or</p>
                  <div className="flex space-x-4 w-full">
                    <button className="flex items-center justify-center px-8 py-3 bg-gray-100 capitalize text-sm text-gray-600 font-semibold rounded-sm w-full">
                      <img src={insta} className="w-5 h-5 mr-4" alt="google" />
                      instagram
                    </button>
                    <button className="flex items-center justify-center px-8 py-3 bg-gray-100 capitalize text-sm text-gray-600 font-semibold rounded-sm w-full">
                      <img
                        src={twitter}
                        className="w-5 h-5 mr-4"
                        alt="twitter"
                      />
                      twitter
                    </button>
                  </div> */}
                  <div className="pt-8 text-sm text-center w-full space-y-4">
                    <p>Already have account?</p>
                    <Link
                      to="/login"
                      className="flex items-center justify-center px-8 py-3 bg-gray-100 text-sm text-gray-600 font-semibold rounded-sm w-full"
                    >
                      Sign in
                    </Link>
                  </div>
                </div>
              </form>
            </div>
            <div className="lg:col-span-4">
              <div className="relative w-full text-gray-100">
                <img src={signup} className="" alt="signup" />
                <div className="absolute w-full h-full bg-gradient-to-t from-black top-0 left-0 bg-opacity-60 flex px-8 pb-8 items-end justify-start">
                  <div className="max-w-sm">
                    <h3 className="text-3xl sm:text-5xl sm:leading-extraLoose font-semibold mb-2">
                      Night Sky
                    </h3>
                    <p className="mb-6">
                      The `night sky` depicts a time of reflection and how all
                      our actions have consequences.
                    </p>
                    <React.Fragment>
                      <ModalVideo
                        channel="vimeo"
                        autoplay
                        isOpen={this.state.isOpen}
                        videoId="355087595"
                        onClose={() => this.setState({ isOpen: false })}
                      />

                      <button
                        className="px-12 py-3 bg-gray-100 rounded-full uppercase text-appRed font-medium focus:outline-none hover:bg-appRed hover:text-gray-100 duration-200"
                        onClick={() => this.setState({ isOpen: true })}
                      >
                        View video
                      </button>
                    </React.Fragment>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Signup.propTypes = {
  registerUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  errors: state.errors,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, { registerUser })
)(withRouter(Signup));
<file_sep>/src/components/Modal.js
// import React from "react";
// import Modal from "react-modal";

// const customStyles = {
//   content: {
//     top: "50%",
//     left: "50%",
//     right: "auto",
//     bottom: "auto",
//     marginRight: "-50%",
//     transform: "translate(-50%, -50%)",
//     width: "335px",
//     borderRadius: "15px",
//   },
// };

// Modal.setAppElement("#root");

// export const Popup = ({ children }) => {
//   const [isOpen, setIsOpen] = React.useState(false);
// //   //   const isOpen = () => {
// //   //     setIsOpen(true);
// //   //   };
//   const onClose = () => {
//     setIsOpen(false);
//   };
//   isOpen ? (
//     <Modal
//       isOpen={isOpen}
//       onRequestClose={onClose}
//       style={customStyles}
//       className="top-2/4 right-auto bottom-auto left-2/4 -mr-2 absolute bg-white overflow-auto outline-none rounded-md px-7 md:px-10 transform translate-x-1/2 translate-y-1/2 md:w-4/5 overscroll-auto h-4/5"
//       overlayClassName="bg-elr-black bg-opacity-60 fixed inset-0"
//     >
//       <div
//         className="cursor-pointer text-right mt-2 text-elr-black font-bold rounded w-50"
//         onClick={onClose}
//       >
//         X
//       </div>
//       {children}
//     </Modal>
//   ) : null;
// };
<file_sep>/src/reducers/assetReducer.js
import {
  GET_ASSETS,
  GET_RECENT_ASSETS,
  GET_ALL_ASSETS,
  GET_ASSET,
  ASSET_LOADING,
} from "../actions/types";

const initialState = {
  assets: [],
  recentAssets: [],
  allAssets: [],
  asset: {},
  assetLoading: false,
};

// eslint-disable-next-line
export default function (state = initialState, action) {
  switch (action.type) {
    case ASSET_LOADING:
      return {
        ...state,
        assetLoading: true,
      };
    case GET_ASSETS:
      return {
        ...state,
        assets: action.payload,
        assetLoading: false,
      };
    case GET_RECENT_ASSETS:
      return {
        ...state,
        recentAssets: action.payload,
        assetLoading: false,
      };
    case GET_ALL_ASSETS:
      return {
        ...state,
        allAssets: action.payload,
        assetLoading: false,
      };
    case GET_ASSET:
      return {
        ...state,
        asset: action.payload,
        assetLoading: false,
      };
    default:
      return state;
  }
}
<file_sep>/src/actions/profileActions.js
import axios from "axios";
import { spinnerService } from "@chevtek/react-spinners";
import swal from "@sweetalert/with-react";
// import Noty from "noty";
// import "../../node_modules/noty/lib/noty.css";
// import "../../node_modules/noty/lib/themes/mint.css";

import {
  GET_PROFILE,
  GET_PROFILES,
  PROFILE_LOADING,
  CLEAR_CURRENT_PROFILE,
  GET_ERRORS,
  SET_CURRENT_USER,
  CLEAR_ERRORS,
} from "./types";

// Get current profile
export const getCurrentProfile = () => (dispatch) => {
  dispatch(setProfileLoading());
  axios
    .get("/api/profile")
    .then((res) =>
      dispatch({
        type: GET_PROFILE,
        payload: res.data,
      })
    )
    .catch((err) => {
      console.log(err);
      dispatch({
        type: GET_PROFILE,
        payload: {},
      });
    });
};

// Get profile by username
export const getProfileByUsername = (username) => (dispatch) => {
  dispatch(setProfileLoading());
  axios
    .get(`/api/profile/username/${username}`)
    .then((res) =>
      dispatch({
        type: GET_PROFILE,
        payload: res.data,
      })
    )
    .catch((err) =>
      dispatch({
        type: GET_PROFILE,
        payload: null,
      })
    );
};

// Update Profile
export const updateProfile = (profileData, history) => (dispatch) => {
  dispatch(clearErrors());
  spinnerService.hide("updateProfileNotLoading");
  spinnerService.show("updateProfileLoading");

  axios
    .post("/api/profile", profileData)
    .then((res) => {
      spinnerService.hide("updateProfileLoading");
      spinnerService.show("updateProfileNotLoading");

      dispatch({
        type: GET_PROFILE,
        payload: res.data,
      });

      swal("Success!", "Profile Updated Successfully.", "success").then(() => {
        history.push("/account");
      });
    })
    .catch((err) => {
      spinnerService.show("updateProfileNotLoading");
      spinnerService.hide("updateProfileLoading");
      window.scrollTo(0, 1);

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};

// Get all profiles
export const getProfiles = () => (dispatch) => {
  dispatch(setProfileLoading());
  axios
    .get("/api/profile/all")
    .then((res) =>
      dispatch({
        type: GET_PROFILES,
        payload: res.data,
      })
    )
    .catch((err) =>
      dispatch({
        type: GET_PROFILES,
        payload: null,
      })
    );
};

// Delete account & profile
export const deleteAccount = () => (dispatch) => {
  if (window.confirm("Are you sure? This can NOT be undone!")) {
    axios
      .delete("/api/profile")
      .then((res) =>
        dispatch({
          type: SET_CURRENT_USER,
          payload: {},
        })
      )
      .catch((err) =>
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data,
        })
      );
  }
};

// Set Logged in User
export const setCurrentUser = (decoded) => {
  return {
    type: SET_CURRENT_USER,
    payload: decoded,
  };
};

// Profile Loading
export const setProfileLoading = () => {
  return {
    type: PROFILE_LOADING,
  };
};

// Clear profile
export const clearCurrentProfile = () => {
  return {
    type: CLEAR_CURRENT_PROFILE,
  };
};

// Clear errors
export const clearErrors = () => {
  return {
    type: CLEAR_ERRORS,
  };
};
<file_sep>/src/reducers/ethRateReducer.js
import { GET_ETH_RATE, ETH_RATE_LOADING } from "../actions/types";

const initialState = {
  ethPrice: null,
  ethPriceLoading: false,
};

export default function getETHRate(state = initialState, action) {
  switch (action.type) {
    case ETH_RATE_LOADING:
      return {
        ...state,
        ethPriceLoading: true,
      };
    case GET_ETH_RATE:
      return {
        ...state,
        ethPrice: action.payload,
        ethPriceLoading: false,
      };
    default:
      return state;
  }
}
<file_sep>/src/pages/Profile.js
/* eslint-disable */
import React from "react";
import Carousel from "react-multi-carousel";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
import { Link } from "react-router-dom";
import artist from "../assets/img/artis.gif";
import Footer from "../components/Footer";
import NewSideBar from "../components/NewSideBar";

function Profile() {
  const minuteSeconds = 60;
  const hourSeconds = 3600;
  const daySeconds = 86400;

  const timerProps = {
    isPlaying: true,
    size: 120,
    strokeWidth: 6,
  };

  const renderTime = (dimension, time) => {
    return (
      <div className="time-wrapper">
        <div className="time">{time}</div>
        <div>{dimension}</div>
      </div>
    );
  };

  const stratTime = Date.now() / 1000; // use UNIX timestamp in seconds
  const endTime = stratTime + 1043248; // use UNIX timestamp in seconds

  const remainingTime = endTime - stratTime;
  const days = Math.ceil(remainingTime / daySeconds);
  const daysDuration = days * daySeconds;

  const getTimeSeconds = (time) => (minuteSeconds - time) | 0;
  const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
  const getTimeHours = (time) => ((time % daySeconds) / hourSeconds) | 0;
  const getTimeDays = (time) => (time / daySeconds) | 0;

  const UrgeWithPleasureComponent = () => (
    <CountdownCircleTimer
      isPlaying
      duration={10}
      colors={[
        ["#004777", 0.33],
        ["#F7B801", 0.33],
        ["#A30000", 0.33],
      ]}
    >
      {({ remainingTime }) => remainingTime}
    </CountdownCircleTimer>
  );
  const collection = [
    {
      img: "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
    },
    {
      img: "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
    },
    {
      img: "https://lh3.googleusercontent.com/CPe3saEkiRAMGiOuKIMtGXnent817rjIKGcwBRhSADk5zzFLsFxbHoWwc0qKqGqCFONS0E5SvT0ljbsZBiKLWolVFWP75PtcGCuh=s0",
    },
    {
      img: "https://lh3.googleusercontent.com/m6rihxymByjWXFJWO3h4lIz2EJcWWxtlmRuH9VgpFbTRjBxltm7oyO7G0vfkeSZArdqsE-VI573oygdpURJtCtwqfAiJlMO-Fvfkjw=s0",
    },
    {
      img: "https://lh3.googleusercontent.com/KBPFHbreehLr7iQYTAeAmAoQqM4GwlRJk9O9x9bLpBy1uVqtJEZTTEXkJ2-0bClw1zvFAmEDhXHctKAdW8tp2LwpMSMSROsUlyjS1A=s0",
    },
    {
      img: "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
    },
  ];
  const creation = [
    {
      img: "https://lh3.googleusercontent.com/CPe3saEkiRAMGiOuKIMtGXnent817rjIKGcwBRhSADk5zzFLsFxbHoWwc0qKqGqCFONS0E5SvT0ljbsZBiKLWolVFWP75PtcGCuh=s0",
    },
    {
      img: "https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0",
    },
  ];
  const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 1,
      partialVisibilityGutter: 0,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 1,
      partialVisibilityGutter: 0,
    },
    tablet: {
      breakpoint: { max: 1024, min: 650 },
      items: 1,
      partialVisibilityGutter: 0,
    },
    mobile: {
      breakpoint: { max: 650, min: 0 },
      items: 1,
      partialVisibilityGutter: 0,
    },
  };

  const getCollections = collection.map((img) => {
    return (
      <div className="w-full px-2 py-2">
        <img src={img.img} className="object-cover w-full"></img>
      </div>
    );
  });
  const getCreations = creation.map((img) => {
    return (
      <div className="w-full h-track">
        <img src={img.img} className="object-cover w-full h-full"></img>
      </div>
    );
  });
  const Navigation = ({ goToSlide, ...rest }) => {
    const {
      carouselState: { currentSlide },
    } = rest;
    return (
      <div className="carousel-button-group absolute top-0 right-0 left-0 text-center">
        <button
          onClick={() => goToSlide(0)}
          className={
            currentSlide === 0
              ? "px-2 sm:px-8 duration-100 ease-in-out py-2 mx-2 text-lg uppercase focus:outline-none border-b border-gray-400"
              : "px-2 sm:px-8 duration-100 ease-in-out py-2 mx-2 text-lg uppercase focus:outline-none"
          }
        >
          {" "}
          creations{" "}
        </button>
        <button
          onClick={() => goToSlide(1)}
          className={
            currentSlide === 1
              ? "px-2 sm:px-8 duration-100 ease-in-out py-2 mx-2 text-lg uppercase focus:outline-none border-b border-gray-400"
              : "px-2 sm:px-8 duration-100 ease-in-out py-2 mx-2 text-lg uppercase focus:outline-none"
          }
        >
          {" "}
          series{" "}
        </button>
      </div>
    );
  };
  return (
    <div>
      <div className="py-1 bg-black w-full h-10 fixed z-30 bg-opacity-90">
      <NewSideBar />
      </div>
      <div className="pb-24 pt-12">
        <div className="max-w-7xl mx-auto text-bordyColor dark:text-gray-100 py-1 relative lg:px-16 px-4 mb-16">
          <div className="grid grid-cols-12 gap-4 -mb-60">
            <div className="col-span-12 sm:col-span-4 lg:col-span-5">
              <div className="w-24 h-24">
                <img src={artist} className="mx-auto rounded-full" />
              </div>
              <h4 className="mt-4">@artistname</h4>
              <div className="flex space-x-6">
                <p>Followers: 786</p>
                <p className="">Following: 6</p>
              </div>

              <div className="my-4">
                <button className="text-appRed focus:outline-none">
                  twitter.com/@artistname
                </button>
              </div>
              <div className="mt-8 mb-12">
                <a
                  href="#"
                  className="bg-gray-100  rounded-sm py-2 px-4 text-sm font-medium text-gray-600"
                >
                  Sign up to follow
                </a>
              </div>
              <h2 className="text-xl font-semibold uppercase mt-4">
                product name
              </h2>
              <div className="my-4">
                <p>
                  The `night sky` depicts a time of reflection and how all our
                  actions have consequences.
                </p>
                <p className="text-gray-400 mt-4">
                  #2d #3d #animated #animation #cartoon #future #illustration
                  #misang #mrmisang #psychedelic #scifi #SF #surreal
                </p>
              </div>
              <div className="flex">
                <button className="py-2 px-10 font-black uppercase rounded bg-appRed text-white mt-8">
                  Bid now
                </button>
                <p className="mt-8 ml-8 py-2">- 2ETH/$3000</p>
              </div>
            </div>
            <div className="col-span-12 lg:col-span-7">
              <img src="https://lh3.googleusercontent.com/9nTeFgvJAxS5I2es5KkxnjuP7dwbt0wWyR4V34LlaUPOQnBHK-omJbSw3lUeWvRhki7AJocyzYspSneOuXqqQdauxF_4-dyLwwz5=s0" className="h-3/4 w-3/4"/>
            </div>
          </div>
          <div className="pb-10 pt-40 border-b border-gray-400 border-opacity-20" />
          <div className="grid grid-cols-12 mt-8">
            <div className="col-span-12 relative">
              <Carousel
                renderButtonGroupOutside={true}
                arrows={false}
                customButtonGroup={<Navigation />}
                partialVisible={true}
                responsive={responsive}
                itemClass="px-2"
                className="mt-16"
              >
                <div className="mt-8">
                  <ResponsiveMasonry
                    columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
                  >
                    <Masonry gutter="20">{getCollections}</Masonry>
                  </ResponsiveMasonry>
                  {/* <div className="grid grid-cols-4 gap-4">{getCollections}</div> */}
                </div>
                <div className="mt-8">
                  <div className="grid grid-cols-4 gap-4">{getCreations}</div>
                </div>
              </Carousel>
            </div>
          </div>
        </div>
        <div className="box fixed bottom-0 left-0 w-full z-50">
        <div className="items-center h-16 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 ... py-4 px-4 sm:flex space-y-4 sm:space-y-0 text-gray-100">
            <button className="mb-8">x</button>
            <div className="border-l h-14 border-white-600 border-opacity-90 mt-4 ml-16"/>
          <div className="space-y-1 ml-6">
            <h2 className="text-base sm:text-xl font-semibold">
              We are building a community of 1000+ Digital Artists
            </h2>
          </div>
          <div className="ml-auto">
            <Link
              to="/sign-up"
              className="bg-gray-100 font-medium px-12 capitalize py-2 text-gray-600 flex focus:outline-none rounded"
            >
              Try it Now
            </Link>
          </div>
        </div>
      </div>
      <Footer />
      </div>
    </div>
  );
}

export default Profile;
<file_sep>/src/pages/UpdateProfile.js
/* eslint-disable */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { logoutUser } from "../actions/authActions";
import { getCurrentProfile, updateProfile } from "../actions/profileActions";
import classnames from "classnames";
import { compose } from "redux";
import { withStyles } from "@material-ui/core";
import { client } from "filestack-react";
import { Spinner } from "@chevtek/react-spinners";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import { Helmet } from "react-helmet";
import logo from "../assets/img/favicon.png";
import isEmpty from "../validation/is-empty";

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
});

class UpdateProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      phone: "",
      location: "",
      ethAddress: "",
      youtubeURL: "",
      facebookURL: "",
      twitterURL: "",
      instagramURL: "",
      errors: {},
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    window.scrollTo(0, 1);
    this.props.getCurrentProfile();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }

    if (nextProps.profile.profile) {
      const profile = nextProps.profile.profile;

      // If profile field doesn't exist, make empty string
      profile.firstName = !isEmpty(profile.firstName) ? profile.firstName : "";
      profile.lastName = !isEmpty(profile.lastName) ? profile.lastName : "";
      profile.phone = !isEmpty(profile.phone) ? profile.phone : "";
      profile.location = !isEmpty(profile.location) ? profile.location : "";
      profile.ethAddress = !isEmpty(profile.ethAddress)
        ? profile.ethAddress
        : "";
      profile.bio = !isEmpty(profile.bio) ? profile.bio : "";
      profile.social = !isEmpty(profile.social) ? profile.social : {};
      profile.twitter = !isEmpty(profile.social.twitter)
        ? profile.social.twitter
        : "";
      profile.facebook = !isEmpty(profile.social.facebook)
        ? profile.social.facebook
        : "";
      profile.linkedin = !isEmpty(profile.social.linkedin)
        ? profile.social.linkedin
        : "";
      profile.youtube = !isEmpty(profile.social.youtube)
        ? profile.social.youtube
        : "";
      profile.instagram = !isEmpty(profile.social.instagram)
        ? profile.social.instagram
        : "";

      // Set component field state
      this.setState({
        firstName: profile.firstName,
        lastName: profile.lastName,
        ethAddress: profile.ethAddress,
        phone: profile.phone,
        location: profile.location,
        bio: profile.bio,
        twitter: profile.twitter,
        facebook: profile.facebook,
        linkedin: profile.linkedin,
        youtube: profile.youtube,
        instagram: profile.instagram,
      });
    }
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  uploadImage(e) {
    e.preventDefault();

    const apikey = "<KEY>";
    const options = {
      accept: "image/*",
      maxFiles: 1,
      transformations: {
        crop: true,
      },
      onFileUploadFinished: (res) => {
        this.setState({
          image_url: res.url,
        });
      },
    };

    const filestack = client.init(apikey, options);
    const picker = filestack.picker(options);
    picker.open();
  }

  onSubmit(e) {
    e.preventDefault();

    const profileData = {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      phone: this.state.phone,
      location: this.state.location,
      ethAddress: this.state.ethAddress,
      bio: this.state.bio,
      youtube_url: this.state.youtube_url,
      facebook_url: this.state.facebook_url,
      twitter_url: this.state.twitter_url,
      instagram_url: this.state.instagram_url,
    };

    this.props.updateProfile(profileData, this.props.history);
  }

  onLogoutClick(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;

    return (
      <div>
        <Helmet>
          <meta charSet="utf-8" />
          <title>WeAreMasters - Update Profile</title>
          <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="<KEY>"
            crossorigin="anonymous"
          />
        </Helmet>

        <div className="container py-4" style={{ minHeight: "100vh" }}>
          <div className="row no-gutter">
            <div className="col-md-4 m-auto mt-4">
              <Link to="/account">
                <img
                  width="100"
                  src={logo}
                  alt="WeAreMasters Logo"
                  className="center-image mt-2 mb-4"
                />
              </Link>
            </div>
            <div className="col-md-12">
              <div className="col-md-6 m-auto">
                <h2 className="text-center mb-4">
                  <strong>UPDATE PROFILE</strong>
                </h2>
                <form
                  className="need-validation"
                  onSubmit={this.onSubmit}
                  noValidate
                >
                  <div className="row">
                    <div className="col-md-6">
                      <div className="mb-4">
                        <label for="firstName" className="form-label">
                          <strong>First Name</strong>
                        </label>
                        <input
                          type="text"
                          id="firstName"
                          name="firstName"
                          value={this.state.firstName}
                          onChange={this.onChange}
                          className={classnames(
                            "form-control form-control-lg",
                            {
                              "is-invalid": errors.firstName,
                            }
                          )}
                          placeholder="Enter <NAME>"
                          autofocus
                          required
                        />
                        {errors.firstName && (
                          <div className="invalid-feedback">
                            {errors.firstName}
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="mb-4">
                        <label for="lastName" className="form-label">
                          <strong>Last Name</strong>
                        </label>
                        <input
                          type="text"
                          id="lastName"
                          name="lastName"
                          value={this.state.lastName}
                          onChange={this.onChange}
                          className={classnames(
                            "form-control form-control-lg",
                            {
                              "is-invalid": errors.lastName,
                            }
                          )}
                          placeholder="Enter <NAME>"
                          autofocus
                          required
                        />
                        {errors.lastName && (
                          <div className="invalid-feedback">
                            {errors.lastName}
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="mb-4">
                        <label for="firstName" className="form-label">
                          <strong>Location</strong>
                        </label>
                        <div class="input-group input-group-lg">
                          <select
                            id="location"
                            name="location"
                            value={this.state.location}
                            onChange={this.onChange}
                            className="form-select"
                          >
                            <option value={0}>Select Location</option>
                            <option value="Afghanistan">Afghanistan</option>
                            <option value="Åland Islands">Åland Islands</option>
                            <option value="Albania">Albania</option>
                            <option value="Algeria">Algeria</option>
                            <option value="American Samoa">
                              American Samoa
                            </option>
                            <option value="Andorra">Andorra</option>
                            <option value="Angola">Angola</option>
                            <option value="Anguilla">Anguilla</option>
                            <option value="Antarctica">Antarctica</option>
                            <option value="Antigua and Barbuda">
                              Antigua and Barbuda
                            </option>
                            <option value="Argentina">Argentina</option>
                            <option value="Armenia">Armenia</option>
                            <option value="Aruba">Aruba</option>
                            <option value="Australia">Australia</option>
                            <option value="Austria">Austria</option>
                            <option value="Azerbaijan">Azerbaijan</option>
                            <option value="Bahamas">Bahamas</option>
                            <option value="Bahrain">Bahrain</option>
                            <option value="Bangladesh">Bangladesh</option>
                            <option value="Barbados">Barbados</option>
                            <option value="Belarus">Belarus</option>
                            <option value="Belgium">Belgium</option>
                            <option value="Belize">Belize</option>
                            <option value="Benin">Benin</option>
                            <option value="Bermuda">Bermuda</option>
                            <option value="Bhutan">Bhutan</option>
                            <option value="Bolivia">Bolivia</option>
                            <option value="Bosnia and Herzegovina">
                              Bosnia and Herzegovina
                            </option>
                            <option value="Botswana">Botswana</option>
                            <option value="Bouvet Island">Bouvet Island</option>
                            <option value="Brazil">Brazil</option>
                            <option value="British Indian Ocean Territory">
                              British Indian Ocean Territory
                            </option>
                            <option value="Brunei Darussalam">
                              Brunei Darussalam
                            </option>
                            <option value="Bulgaria">Bulgaria</option>
                            <option value="Burkina Faso">Burkina Faso</option>
                            <option value="Burundi">Burundi</option>
                            <option value="Cambodia">Cambodia</option>
                            <option value="Cameroon">Cameroon</option>
                            <option value="Canada">Canada</option>
                            <option value="Cape Verde">Cape Verde</option>
                            <option value="Cayman Islands">
                              Cayman Islands
                            </option>
                            <option value="Central African Republic">
                              Central African Republic
                            </option>
                            <option value="Chad">Chad</option>
                            <option value="Chile">Chile</option>
                            <option value="China">China</option>
                            <option value="Christmas Island">
                              Christmas Island
                            </option>
                            <option value="Cocos (Keeling) Islands">
                              Cocos (Keeling) Islands
                            </option>
                            <option value="Colombia">Colombia</option>
                            <option value="Comoros">Comoros</option>
                            <option value="Congo">Congo</option>
                            <option value="Congo, The Democratic Republic of The">
                              Congo, The Democratic Republic of The
                            </option>
                            <option value="Cook Islands">Cook Islands</option>
                            <option value="Costa Rica">Costa Rica</option>
                            <option value="Cote D'ivoire">Cote D'ivoire</option>
                            <option value="Croatia">Croatia</option>
                            <option value="Cuba">Cuba</option>
                            <option value="Cyprus">Cyprus</option>
                            <option value="Czech Republic">
                              Czech Republic
                            </option>
                            <option value="Denmark">Denmark</option>
                            <option value="Djibouti">Djibouti</option>
                            <option value="Dominica">Dominica</option>
                            <option value="Dominican Republic">
                              Dominican Republic
                            </option>
                            <option value="Ecuador">Ecuador</option>
                            <option value="Egypt">Egypt</option>
                            <option value="El Salvador">El Salvador</option>
                            <option value="Equatorial Guinea">
                              Equatorial Guinea
                            </option>
                            <option value="Eritrea">Eritrea</option>
                            <option value="Estonia">Estonia</option>
                            <option value="Ethiopia">Ethiopia</option>
                            <option value="Falkland Islands (Malvinas)">
                              Falkland Islands (Malvinas)
                            </option>
                            <option value="Faroe Islands">Faroe Islands</option>
                            <option value="Fiji">Fiji</option>
                            <option value="Finland">Finland</option>
                            <option value="France">France</option>
                            <option value="French Guiana">French Guiana</option>
                            <option value="French Polynesia">
                              French Polynesia
                            </option>
                            <option value="French Southern Territories">
                              French Southern Territories
                            </option>
                            <option value="Gabon">Gabon</option>
                            <option value="Gambia">Gambia</option>
                            <option value="Georgia">Georgia</option>
                            <option value="Germany">Germany</option>
                            <option value="Ghana">Ghana</option>
                            <option value="Gibraltar">Gibraltar</option>
                            <option value="Greece">Greece</option>
                            <option value="Greenland">Greenland</option>
                            <option value="Grenada">Grenada</option>
                            <option value="Guadeloupe">Guadeloupe</option>
                            <option value="Guam">Guam</option>
                            <option value="Guatemala">Guatemala</option>
                            <option value="Guernsey">Guernsey</option>
                            <option value="Guinea">Guinea</option>
                            <option value="Guinea-bissau">Guinea-bissau</option>
                            <option value="Guyana">Guyana</option>
                            <option value="Haiti">Haiti</option>
                            <option value="Heard Island and Mcdonald Islands">
                              Heard Island and Mcdonald Islands
                            </option>
                            <option value="Holy See (Vatican City State)">
                              Holy See (Vatican City State)
                            </option>
                            <option value="Honduras">Honduras</option>
                            <option value="Hong Kong">Hong Kong</option>
                            <option value="Hungary">Hungary</option>
                            <option value="Iceland">Iceland</option>
                            <option value="India">India</option>
                            <option value="Indonesia">Indonesia</option>
                            <option value="Iran, Islamic Republic of">
                              Iran, Islamic Republic of
                            </option>
                            <option value="Iraq">Iraq</option>
                            <option value="Ireland">Ireland</option>
                            <option value="Isle of Man">Isle of Man</option>
                            <option value="Israel">Israel</option>
                            <option value="Italy">Italy</option>
                            <option value="Jamaica">Jamaica</option>
                            <option value="Japan">Japan</option>
                            <option value="Jersey">Jersey</option>
                            <option value="Jordan">Jordan</option>
                            <option value="Kazakhstan">Kazakhstan</option>
                            <option value="Kenya">Kenya</option>
                            <option value="Kiribati">Kiribati</option>
                            <option value="Korea, Democratic People's Republic of">
                              Korea, Democratic People's Republic of
                            </option>
                            <option value="Korea, Republic of">
                              Korea, Republic of
                            </option>
                            <option value="Kuwait">Kuwait</option>
                            <option value="Kyrgyzstan">Kyrgyzstan</option>
                            <option value="Lao People's Democratic Republic">
                              Lao People's Democratic Republic
                            </option>
                            <option value="Latvia">Latvia</option>
                            <option value="Lebanon">Lebanon</option>
                            <option value="Lesotho">Lesotho</option>
                            <option value="Liberia">Liberia</option>
                            <option value="Libyan Arab Jamahiriya">
                              Libyan Arab Jamahiriya
                            </option>
                            <option value="Liechtenstein">Liechtenstein</option>
                            <option value="Lithuania">Lithuania</option>
                            <option value="Luxembourg">Luxembourg</option>
                            <option value="Macao">Macao</option>
                            <option value="Macedonia, The Former Yugoslav Republic of">
                              Macedonia, The Former Yugoslav Republic of
                            </option>
                            <option value="Madagascar">Madagascar</option>
                            <option value="Malawi">Malawi</option>
                            <option value="Malaysia">Malaysia</option>
                            <option value="Maldives">Maldives</option>
                            <option value="Mali">Mali</option>
                            <option value="Malta">Malta</option>
                            <option value="Marshall Islands">
                              Marshall Islands
                            </option>
                            <option value="Martinique">Martinique</option>
                            <option value="Mauritania">Mauritania</option>
                            <option value="Mauritius">Mauritius</option>
                            <option value="Mayotte">Mayotte</option>
                            <option value="Mexico">Mexico</option>
                            <option value="Micronesia, Federated States of">
                              Micronesia, Federated States of
                            </option>
                            <option value="Moldova, Republic of">
                              Moldova, Republic of
                            </option>
                            <option value="Monaco">Monaco</option>
                            <option value="Mongolia">Mongolia</option>
                            <option value="Montenegro">Montenegro</option>
                            <option value="Montserrat">Montserrat</option>
                            <option value="Morocco">Morocco</option>
                            <option value="Mozambique">Mozambique</option>
                            <option value="Myanmar">Myanmar</option>
                            <option value="Namibia">Namibia</option>
                            <option value="Nauru">Nauru</option>
                            <option value="Nepal">Nepal</option>
                            <option value="Netherlands">Netherlands</option>
                            <option value="Netherlands Antilles">
                              Netherlands Antilles
                            </option>
                            <option value="New Caledonia">New Caledonia</option>
                            <option value="New Zealand">New Zealand</option>
                            <option value="Nicaragua">Nicaragua</option>
                            <option value="Niger">Niger</option>
                            <option value="Nigeria">Nigeria</option>
                            <option value="Niue">Niue</option>
                            <option value="Norfolk Island">
                              Norfolk Island
                            </option>
                            <option value="Northern Mariana Islands">
                              Northern Mariana Islands
                            </option>
                            <option value="Norway">Norway</option>
                            <option value="Oman">Oman</option>
                            <option value="Pakistan">Pakistan</option>
                            <option value="Palau">Palau</option>
                            <option value="Palestinian Territory, Occupied">
                              Palestinian Territory, Occupied
                            </option>
                            <option value="Panama">Panama</option>
                            <option value="Papua New Guinea">
                              Papua New Guinea
                            </option>
                            <option value="Paraguay">Paraguay</option>
                            <option value="Peru">Peru</option>
                            <option value="Philippines">Philippines</option>
                            <option value="Pitcairn">Pitcairn</option>
                            <option value="Poland">Poland</option>
                            <option value="Portugal">Portugal</option>
                            <option value="Puerto Rico">Puerto Rico</option>
                            <option value="Qatar">Qatar</option>
                            <option value="Reunion">Reunion</option>
                            <option value="Romania">Romania</option>
                            <option value="Russian Federation">
                              Russian Federation
                            </option>
                            <option value="Rwanda">Rwanda</option>
                            <option value="Saint Helena">Saint Helena</option>
                            <option value="Saint Kitts and Nevis">
                              Saint Kitts and Nevis
                            </option>
                            <option value="Saint Lucia">Saint Lucia</option>
                            <option value="Saint Pierre and Miquelon">
                              Saint Pierre and Miquelon
                            </option>
                            <option value="Saint Vincent and The Grenadines">
                              Saint Vincent and The Grenadines
                            </option>
                            <option value="Samoa">Samoa</option>
                            <option value="San Marino">San Marino</option>
                            <option value="Sao Tome and Principe">
                              Sao Tome and Principe
                            </option>
                            <option value="Saudi Arabia">Saudi Arabia</option>
                            <option value="Senegal">Senegal</option>
                            <option value="Serbia">Serbia</option>
                            <option value="Seychelles">Seychelles</option>
                            <option value="Sierra Leone">Sierra Leone</option>
                            <option value="Singapore">Singapore</option>
                            <option value="Slovakia">Slovakia</option>
                            <option value="Slovenia">Slovenia</option>
                            <option value="Solomon Islands">
                              Solomon Islands
                            </option>
                            <option value="Somalia">Somalia</option>
                            <option value="South Africa">South Africa</option>
                            <option value="South Georgia and The South Sandwich Islands">
                              South Georgia and The South Sandwich Islands
                            </option>
                            <option value="Spain">Spain</option>
                            <option value="Sri Lanka">Sri Lanka</option>
                            <option value="Sudan">Sudan</option>
                            <option value="Suriname">Suriname</option>
                            <option value="Svalbard and Jan Mayen">
                              Svalbard and Jan Mayen
                            </option>
                            <option value="Swaziland">Swaziland</option>
                            <option value="Sweden">Sweden</option>
                            <option value="Switzerland">Switzerland</option>
                            <option value="Syrian Arab Republic">
                              Syrian Arab Republic
                            </option>
                            <option value="Taiwan, Province of China">
                              Taiwan, Province of China
                            </option>
                            <option value="Tajikistan">Tajikistan</option>
                            <option value="Tanzania, United Republic of">
                              Tanzania, United Republic of
                            </option>
                            <option value="Thailand">Thailand</option>
                            <option value="Timor-leste">Timor-leste</option>
                            <option value="Togo">Togo</option>
                            <option value="Tokelau">Tokelau</option>
                            <option value="Tonga">Tonga</option>
                            <option value="Trinidad and Tobago">
                              Trinidad and Tobago
                            </option>
                            <option value="Tunisia">Tunisia</option>
                            <option value="Turkey">Turkey</option>
                            <option value="Turkmenistan">Turkmenistan</option>
                            <option value="Turks and Caicos Islands">
                              Turks and Caicos Islands
                            </option>
                            <option value="Tuvalu">Tuvalu</option>
                            <option value="Uganda">Uganda</option>
                            <option value="Ukraine">Ukraine</option>
                            <option value="United Arab Emirates">
                              United Arab Emirates
                            </option>
                            <option value="United Kingdom">
                              United Kingdom
                            </option>
                            <option value="United States">United States</option>
                            <option value="United States Minor Outlying Islands">
                              United States Minor Outlying Islands
                            </option>
                            <option value="Uruguay">Uruguay</option>
                            <option value="Uzbekistan">Uzbekistan</option>
                            <option value="Vanuatu">Vanuatu</option>
                            <option value="Venezuela">Venezuela</option>
                            <option value="Viet Nam">Viet Nam</option>
                            <option value="Virgin Islands, British">
                              Virgin Islands, British
                            </option>
                            <option value="Virgin Islands, U.S.">
                              Virgin Islands, U.S.
                            </option>
                            <option value="Wallis and Futuna">
                              Wallis and Futuna
                            </option>
                            <option value="Western Sahara">
                              Western Sahara
                            </option>
                            <option value="Yemen">Yemen</option>
                            <option value="Zambia">Zambia</option>
                            <option value="Zimbabwe">Zimbabwe</option>
                          </select>
                          {errors.location && (
                            <div className="form-error">{errors.location}</div>
                          )}
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="mb-4">
                        <label for="lastName" className="form-label">
                          <strong>Phone</strong>
                        </label>
                        <input
                          type="text"
                          id="phone"
                          name="phone"
                          value={this.state.phone}
                          onChange={this.onChange}
                          className={classnames(
                            "form-control form-control-lg",
                            {
                              "is-invalid": errors.phone,
                            }
                          )}
                          placeholder="Enter phone number"
                          autofocus
                          required
                        />
                        {errors.phone && (
                          <div className="invalid-feedback">{errors.phone}</div>
                        )}
                      </div>
                    </div>
                  </div>

                  <div className="mb-4">
                    <label for="ethAddress" className="form-label">
                      <strong>ETH Payout Address</strong>
                    </label>
                    <div className="mb-4">
                      <input
                        type="text"
                        id="ethAddress"
                        name="ethAddress"
                        value={this.state.ethAddress}
                        onChange={this.onChange}
                        className={classnames("form-control form-control-lg", {
                          "is-invalid": errors.ethAddress,
                        })}
                        placeholder="Enter ETH payout address"
                        autofocus
                        required
                      />
                      {errors.ethAddress && (
                        <div className="invalid-feedback">
                          {errors.ethAddress}
                        </div>
                      )}
                    </div>
                    {errors.ethAddress && (
                      <div className="invalid-feedback">
                        {errors.ethAddress}
                      </div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="bio" className="form-label">
                      <strong>Profile Bio</strong>
                    </label>
                    <textarea
                      rows="5"
                      id="bio"
                      name="bio"
                      value={this.state.bio}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.bio,
                      })}
                      placeholder="Enter full bio for your profile"
                      required
                    ></textarea>
                    {errors.bio && (
                      <div className="invalid-feedback">{errors.bio}</div>
                    )}
                  </div>

                  <div className="mb-4">
                    <label for="youtubeURL" className="form-label">
                      <strong>YouTube URL for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="youtubeURL"
                      name="youtubeURL"
                      value={this.state.youtubeURL}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.youtubeURL,
                      })}
                      placeholder="e.g https://youtu.be/WEA9EB7Q5RY (optional)"
                      autofocus
                      required
                    />
                    {errors.youtubeURL && (
                      <div className="invalid-feedback">
                        {errors.youtubeURL}
                      </div>
                    )}
                  </div>
                  <div className="mb-4">
                    <label for="facebookURL" className="form-label">
                      <strong>FaceBook URL for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="facebookURL"
                      name="facebookURL"
                      value={this.state.facebookURL}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.facebookURL,
                      })}
                      placeholder="e.g https://facebook.com/WEA9EB7Q5RY (optional)"
                      autofocus
                      required
                    />
                    {errors.facebookURL && (
                      <div className="invalid-feedback">
                        {errors.facebookURL}
                      </div>
                    )}
                  </div>
                  <div className="mb-4">
                    <label for="twitterURL" className="form-label">
                      <strong>Twitter URL for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="twitterURL"
                      name="twitterURL"
                      value={this.state.twitterURL}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.twitterURL,
                      })}
                      placeholder="e.g https://twitter.com/WEA9EB7Q5RY (optional)"
                      autofocus
                      required
                    />
                    {errors.twitterURL && (
                      <div className="invalid-feedback">
                        {errors.twitterURL}
                      </div>
                    )}
                  </div>
                  <div className="mb-4">
                    <label for="instagramURL" className="form-label">
                      <strong>Instagram URL for Digital Art</strong>
                    </label>
                    <input
                      type="text"
                      id="instagramURL"
                      name="instagramURL"
                      value={this.state.instagramURL}
                      onChange={this.onChange}
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.instagramURL,
                      })}
                      placeholder="e.g https://instagram.com/WEA9EB7Q5RY (optional)"
                      autofocus
                      required
                    />
                    {errors.instagramURL && (
                      <div className="invalid-feedback">
                        {errors.instagramURL}
                      </div>
                    )}
                  </div>

                  <div className="d-grid gap-2">
                    <button className="btn btn-lg btn-primary" type="submit">
                      <Spinner name="updateProfileLoading">
                        <Backdrop className={classes.backdrop} open={true}>
                          <CircularProgress color="inherit" />
                        </Backdrop>
                        Processing...
                      </Spinner>
                      <Spinner name="updateProfileNotLoading" show={true}>
                        Proceed to Update Profile
                      </Spinner>
                    </button>
                  </div>
                </form>
                <hr />
                <div className="row">
                  <div className="col-md-6">
                    <div className="d-grid gap-2">
                      <Link to="/account" className="btn btn-dark my-2">
                        Back Home
                      </Link>
                    </div>
                  </div>
                  <div className="col-md-6">
                    <div className="d-grid gap-2">
                      <Link to="/market" className="btn btn-dark my-2">
                        Market Place
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

UpdateProfile.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  updateProfile: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  logoutUser: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile,
  errors: state.errors,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, {
    getCurrentProfile,
    updateProfile,
    logoutUser,
  })
)(UpdateProfile);
<file_sep>/src/components/cards/Radio.js
/* eslint-disable */
function Radio(props) {
  const { artist, thumbnail } = props.card;
  return (
    <div className="cursor-pointer">
      <div className="relative flex h-track lg:h-radio">
        <img
          src={thumbnail}
          alt="feature"
          className="rounded-md w-full object-cover"
        />
        <div className="absolute px-4 py-4 w-full h-full flex items-end text-sm text-white font-medium justify-between"></div>
      </div>
      <a
        href="/artist"
        className="flex flex-col mt-2 text-sm capitalize text-bordyColor dark:text-gray-100"
      >
        <p>{artist}</p>
      </a>
    </div>
  );
}

export default Radio;
<file_sep>/src/pages/Onhover.js
import React from "react";
import category from "../assets/img/category.jpg";

const Onhover = () => {
  return (
    <div>
      <div className="overlay h-28 m-32 border border-elr-green border-opacity-30 rounded-md">
        {/* <img
          src={category}
          alt="burna"
          className="overlay h-28 m-32 border border-elr-green border-opacity-30 rounded-md"
        /> */}
        <div className="overlay-first-elem bg-elr-white-400 opacity-90 rounded-md text-center transform translate-x-0 translate-y-10">
          yes please
        </div>
        <div className="overlay-second-elem flex ml-3 md:ml-5 mt-5 mr-1.5">
          hey
        </div>
      </div>
    </div>
  );
};

export default Onhover;
<file_sep>/src/pages/NewUploadArt.js
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { logoutUser } from "../actions/authActions";
import { getCurrentProfile } from "../actions/profileActions";
import classnames from "classnames";
import { client } from "filestack-react";
import { getETHRate } from "../actions/assetActions";
import { compose } from "redux";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import { Spinner } from "@chevtek/react-spinners";
import { withStyles } from "@material-ui/core";
import Footer from "../components/Footer";
import { uploadArt } from "../actions/assetActions";
import { Link } from "react-router-dom";
import NavigateBeforeIcon from "@material-ui/icons/NavigateBefore";
import exactMath from "exact-math";
import CurrencyFormat from "react-currency-format";

const Validator = require("validator");

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
});

class NewUploadArt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      price: "",
      image_url: "",
      animation_url: "",
      youtube_url: "",
      facebook_url: "",
      twitter_url: "",
      instagram_url: "",
      description: "",
      edition: "",
      errors: {},
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    window.scrollTo(0, 1);
    this.props.getCurrentProfile();
    this.props.getETHRate();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  uploadImage(e) {
    e.preventDefault();

    const apikey = "ADBFWdFLGQ8C3n9tImp8Ez";
    const options = {
      accept: "image/*",
      maxFiles: 1,
      transformations: {
        crop: true,
      },
      onFileUploadFinished: (res) => {
        this.setState({
          image_url: res.url,
        });
      },
    };

    const filestack = client.init(apikey, options);
    const picker = filestack.picker(options);
    picker.open();
  }

  onSubmit(e) {
    e.preventDefault();

    const uploadData = {
      title: this.state.title,
      price: this.state.price,
      image_url: this.state.image_url,
      animation_url: this.state.animation_url,
      youtube_url: this.state.youtube_url,
      facebook_url: this.state.facebook_url,
      twitter_url: this.state.twitter_url,
      instagram_url: this.state.instagram_url,
      description: this.state.description,
    };

    this.props.uploadArt(uploadData, this.props.history);
  }

  onLogoutClick(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;
    const { ethPrice, ethPriceLoading } = this.props.ethRate;
    const disableMathError = { invalidError: false };

    let imageBox;

    if (!Validator.isEmpty(this.state.image_url)) {
      imageBox = (
        <div className="col-md-6 m-auto">
          <img
            src={this.state.image_url}
            alt="Digital Art Preview"
            className="image-preview"
          />
        </div>
      );
    }
    return (
      <div className="bg-black">
        <div>
          <Link to="/account">
            <a
              className="py-2 bg-gray-700 w-full h-10 fixed z-50 bg-opacity-60"
              alt="#"
              href="#"
            >
              <div className="bg-gray-400 ml-3 bg-gray-600 w-6 h-6 rounded">
                <NavigateBeforeIcon style={{ color: "#fff" }} />
              </div>
            </a>
          </Link>
          <div>
            <p className="text-white font-black text-xl ml-12 pt-14">
              Upload Item
            </p>
          </div>
          <form
            onSubmit={this.onSubmit}
            noValidate
            className="border border-gray-300 ml-12 mt-7 w-96 p-7 mb-16 rounded"
          >
            <div>
              <p className="text-white font-black text-base">Title Of Item</p>
              <input
                type="text"
                id="title"
                name="title"
                value={this.state.title}
                onChange={this.onChange}
                className={classnames(
                  "w-full text-xs rounded p-3 mt-2 mb-4 text-bordyColor dark:text-gray-100 bg-gray-white dark:bg-bordyColor border-gray-300 dark:border-bordyColor focus:outline-none focus:border focus:border-gray-500",
                  {
                    "is-invalid": errors.title,
                  }
                )}
                placeholder="e.g Kaleidoscope Woman"
                autofocus
                required
              />
              {errors.title && (
                <div className="invalid-feedback">{errors.title}</div>
              )}
            </div>
            <div className="mb-4">
              <p className="text-white font-black text-base">
                {" "}
                Price of Item
                {ethPrice === null || ethPriceLoading ? null : (
                  <CurrencyFormat
                    value={exactMath.mul(1, ethPrice.amount, disableMathError)}
                    displayType={"text"}
                    thousandSeparator={true}
                    decimalSeperator="."
                    decimalScale={2}
                    fixedDecimalScale={true}
                    renderText={(value) => <span>(1 ETH = &#36;{value})</span>}
                  />
                )}
              </p>
              <div>
                <span className="border rounded-l-lg text-xs border-gray-300 bg-gray-300 p-2">
                  ETH
                </span>

                <CurrencyFormat
                  name="price"
                  id="price"
                  thousandSeparator={true}
                  decimalSeperator="."
                  decimalScale={2}
                  fixedDecimalScale={true}
                  value={this.state.price}
                  className={classnames(
                    "w-64 rounded p-3 pl-3 text-xs mt-2 mb-4 text-bordyColor dark:text-gray-100 bg-gray-white dark:bg-bordyColor border-gray-300 dark:border-bordyColor focus:outline-none focus:border focus:border-gray-500",
                    {
                      "is-invalid": errors.price,
                    }
                  )}
                  onValueChange={(values) => {
                    const { value } = values;
                    this.setState({
                      price: value,
                    });
                  }}
                  placeholder="e.g 2.75"
                  required
                />
              </div>
              {errors.price && (
                <div
                  style={{
                    color: "#dc3545",
                    fontSize: "12px",
                    marginTop: "-15px",
                    fontWeight: "400",
                  }}
                >
                  {errors.price}
                </div>
              )}
            </div>
            <div className="mb-4">
              {!Validator.isEmpty(this.state.image_url) ? (
                imageBox
              ) : (
                <button
                  className="p-3 w-full rounded text-xs text-center cursor-pointer text-bordyColor dark:text-gray-100 bg-blue-400 border-gray-300 dark:border-bordyColor"
                  onClick={this.uploadImage.bind(this)}
                >
                  Click to Upload
                </button>
              )}
              {errors.image_url && (
                <div
                  style={{
                    color: "#dc3545",
                    fontSize: "12px",
                    marginTop: "5px",
                    fontWeight: "400",
                  }}
                >
                  {errors.image_url}
                </div>
              )}
            </div>
            <div className="mb-4">
              <p className="text-white font-black text-base">Editions</p>
              <input
                type="number"
                value={this.state.animation_url}
                onChange={this.onChange}
                className={classnames(
                  "w-full rounded text-xs p-3 mt-2 mb-4 text-bordyColor dark:text-gray-100 bg-gray-white dark:bg-bordyColor border-gray-300 dark:border-bordyColor focus:outline-none focus:border focus:border-gray-500",
                  {
                    "is-invalid": errors.animation_url,
                  }
                )}
                placeholder="Item No e.g 1/10 (optional)"
                required
              />
              {errors.animation_url && (
                <div className="invalid-feedback">{errors.animation_url}</div>
              )}
            </div>
            <div className="mb-4">
              <p className="text-white font-black text-base">
                Description of Digital Art
              </p>
              <textarea
                rows="5"
                id="description"
                name="description"
                value={this.state.description}
                onChange={this.onChange}
                className={classnames(
                  "w-full text-xs rounded p-2 mt-2 mb-4 text-bordyColor dark:text-gray-100 bg-gray-white dark:bg-bordyColor border-gray-300 dark:border-bordyColor focus:outline-none focus:border focus:border-gray-500",
                  {
                    "is-invalid": errors.description,
                  }
                )}
                placeholder="Enter full description for Digital Art"
                required
              ></textarea>
              {errors.description && (
                <div className="invalid-feedback">{errors.description}</div>
              )}
            </div>
            <button className="ml-20 py-6 px-8">
              <Link
                to="/login"
                onClick={this.onLogoutClick.bind(this)}
                className="uppercase py-2 px-6 text-sm font-medium rounded text-white bg-appRed"
              >
                <Spinner name="uploadLoading">
                  <Backdrop className={classes.backdrop} open={true}>
                    <CircularProgress color="inherit" />
                  </Backdrop>
                  Processing...
                </Spinner>
                <Spinner name="uploadNotLoading" show={true}>
                  Submit
                </Spinner>
              </Link>
            </button>
          </form>
        </div>
        <div></div>
        <div className="">
          <Footer />
        </div>
      </div>
    );
  }
}

NewUploadArt.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  uploadArt: PropTypes.func.isRequired,
  getETHRate: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  logoutUser: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile,
  ethRate: state.ethRate,
  errors: state.errors,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, {
    getCurrentProfile,
    uploadArt,
    logoutUser,
    getETHRate,
  })
)(NewUploadArt);
<file_sep>/src/App.js
import React from "react";
import { Provider } from "react-redux";
import PrivateRoute from "./components/common/PrivateRoute";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import jwt_decode from "jwt-decode";
import Profile from "./pages/Profile";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Signup from "./pages/Signup";
import Account from "./pages/Account";
import UploadArt from "./pages/UploadArt";
import UpdateProfile from "./pages/UpdateProfile";
import Assets from "./pages/Assets";
import Asset from "./pages/Asset";

import store from "./store";

import setAuthToken from "./utils/setAuthToken";

import { setCurrentUser, logoutUser } from "./actions/authActions";
import { clearCurrentProfile } from "./actions/profileActions";
import NewSideBar from "./components/NewSideBar";
import NewUploadArt from "./pages/NewUploadArt";
import ViewAll from "./pages/ViewAll";
import Onhover from "./pages/Onhover";
import NewUpdateProfile from "./pages/NewUpdateProfile";
import Collectible from "./pages/Collectible";
import NextDrop from "./pages/NextDrop";

// Check for token
if (localStorage.jwtToken) {
  // Set auth token header auth
  setAuthToken(localStorage.jwtToken);
  // Decode token and get user info and exp
  const decoded = jwt_decode(localStorage.jwtToken);
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));

  // Check for expired token
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());

    // Clear current Profile
    store.dispatch(clearCurrentProfile());

    // Redirect to login
    window.location.href = "/login";
  }
}

function App() {
  return (
    <Provider store={store}>
      <div className="bg-white dark:bg-bordyColor">
        <Router>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/side" component={NewSideBar} />
            <Route exact path="/up" component={NewUploadArt} />
            <Route exact path="/upp" component={NewUpdateProfile} />
            <Route exact path="/collectible" component={Collectible} />
            <Route exact path="/next" component={NextDrop} />
            <Route exact path="/view" component={ViewAll} />
            <Route exact path="/hover" component={Onhover} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/sign-up" component={Signup} />
            <Route exact path="/profile" component={Profile} />
            <PrivateRoute exact path="/account" component={Account} />
            <PrivateRoute exact path="/upload-art" component={UploadArt} />
            <PrivateRoute exact path="/assets" component={Assets} />
            <PrivateRoute exact path="/asset/:id" component={Asset} />
            <PrivateRoute
              exact
              path="/update-profile"
              component={UpdateProfile}
            />
          </Switch>
        </Router>
      </div>
    </Provider>
  );
}

export default App;
<file_sep>/src/components/Track.js
/* eslint-disable */
function Track(props) {
  return (
    <div className="grid xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 gap-4 mt-8">
      {props.cards.map((item) => (
        <a href="#">
          <div className="flex justify-between text-sm border-t border-gray-200 border-opacity-20 dark:border-sideBar py-4">
            <div className="flex space-x-2">
              <div className="w-10 h-10">
                <img src={item.thumbnail} className="rounded-sm" alt="track" />
              </div>
              <div>
                <h3 className="capitalize text-bordyColor dark:text-gray-100">
                  {item.title}
                </h3>
                <h3 className="lowercase text-gray-500">{item.artist}</h3>
              </div>
            </div>
            <button className="text-appRed flex content-features focus:outline-none">
              <svg className="w-6 h-6" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
                />
              </svg>
            </button>
          </div>
        </a>
      ))}
    </div>
  );
}

export default Track;
<file_sep>/src/pages/Assets.js
/* eslint-disable */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { logoutUser } from "../actions/authActions";
import { getCurrentProfile } from "../actions/profileActions";
import { getAllAssets, getETHRate } from "../actions/assetActions";
import { compose } from "redux";
import exactMath from "exact-math";
import { withStyles } from "@material-ui/core";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import CurrencyFormat from "react-currency-format";
import Moment from "react-moment";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import { Helmet } from "react-helmet";
import logo from "../assets/img/favicon.png";

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
  table: {
    minWidth: 650,
  },
});

class Assets extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    window.scrollTo(0, 1);
    this.props.getCurrentProfile();
    this.props.getAllAssets();
    this.props.getETHRate();
  }

  onLogoutClick(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  render() {
    const { classes } = this.props;
    const { allAssets, assetLoading } = this.props.asset;
    const { ethPrice, ethPriceLoading } = this.props.ethRate;
    const disableMathError = { invalidError: false };

    let assetsTable;

    if (allAssets === null || assetLoading) {
      assetsTable = assetsTable = <div />;
    } else {
      if (Object.keys(allAssets).length > 0) {
        assetsTable = (
          <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell>Title</TableCell>
                  <TableCell>Price</TableCell>
                  <TableCell>Status</TableCell>
                  <TableCell align="right">Date</TableCell>
                  <TableCell align="right">Action</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {allAssets.map((asset) => (
                  <TableRow key={asset._id}>
                    <TableCell component="th" scope="row">
                      {asset.name}
                    </TableCell>
                    <TableCell>
                      {asset.price} ETH{" "}
                      {ethPrice === null || ethPriceLoading ? null : (
                        <CurrencyFormat
                          value={exactMath.mul(
                            asset.price,
                            ethPrice.amount,
                            disableMathError
                          )}
                          displayType={"text"}
                          thousandSeparator={true}
                          decimalSeperator="."
                          decimalScale={2}
                          fixedDecimalScale={true}
                          renderText={(value) => <span>(&#36; {value})</span>}
                        />
                      )}
                    </TableCell>
                    <TableCell>{asset.status}</TableCell>
                    <TableCell align="right">
                      <Moment format="Do MMM, YYYY">{asset.date}</Moment>
                    </TableCell>
                    <TableCell align="right">
                      <Link
                        to={`/asset/${asset._id}`}
                        className="btn btn-primary btn-sm"
                      >
                        APPROVE
                      </Link>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        );
      } else {
        assetsTable = (
          <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell>Title</TableCell>
                  <TableCell>Price</TableCell>
                  <TableCell>Status</TableCell>
                  <TableCell align="right">Date</TableCell>
                  <TableCell align="right">Action</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                <p className="p-3">All assets will show here...</p>
              </TableBody>
            </Table>
          </TableContainer>
        );
      }
    }

    return (
      <div>
        <Helmet>
          <meta charSet="utf-8" />
          <title>WeAreMasters - Approve Digital Art</title>
          <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="<KEY>"
            crossorigin="anonymous"
          />
        </Helmet>

        <div className="container py-4" style={{ minHeight: "100vh" }}>
          <Backdrop
            className={classes.backdrop}
            open={!assetLoading ? false : true}
          >
            <CircularProgress color="inherit" />
          </Backdrop>
          <div className="row no-gutter">
            <div className="col-md-4 m-auto mt-4">
              <Link to="/account">
                <img
                  width="100"
                  src={logo}
                  alt="WeAreMasters Logo"
                  className="center-image"
                />
              </Link>
            </div>
            <div className="col-md-12 pt-4">
              <div className="row text-center">
                <div className="col-md-4 mb-10 mt-10 px-10">
                  <div className="d-grid gap-2">
                    <Link to="/upload" className="btn btn-dark">
                      <strong style={{ fontWeight: 600 }}>UPLOAD ART</strong>
                    </Link>
                  </div>
                </div>
                <div className="col-md-4 mb-10 mt-10 px-10">
                  <div className="d-grid gap-2">
                    <Link to="/market" className="btn btn-dark">
                      <strong style={{ fontWeight: 600 }}>MARKET PLACE</strong>
                    </Link>
                  </div>
                </div>
                <div className="col-md-4 mb-10 mt-10 px-10">
                  <div className="d-grid gap-2">
                    <Link
                      className="btn btn-dark"
                      onClick={this.onLogoutClick.bind(this)}
                    >
                      <strong style={{ fontWeight: 600 }}>LOG OUT</strong>
                    </Link>
                  </div>
                </div>
              </div>
              <h2 className="text-center mb-4">
                <strong style={{ wordSpacing: "5px" }}>
                  DIGITAL ART UPLOADS
                </strong>
              </h2>
            </div>
            <div className="col-md-12">
              <div className="row">
                <div className="col-xl-12 col-sm-12 m-auto">
                  <div className="p-2">{assetsTable}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Assets.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  getAllAssets: PropTypes.func.isRequired,
  getETHRate: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  logoutUser: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile,
  asset: state.asset,
  ethRate: state.ethRate,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, {
    getCurrentProfile,
    getAllAssets,
    logoutUser,
    getETHRate,
  })
)(Assets);
<file_sep>/src/pages/NewUpdateProfile.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { logoutUser } from "../actions/authActions";
import { getCurrentProfile, updateProfile } from "../actions/profileActions";
import classnames from "classnames";
import { compose } from "redux";
import { withStyles } from "@material-ui/core";
import { client } from "filestack-react";
import * as AiIcons from "react-icons/ai";
import { Spinner } from "@chevtek/react-spinners";
import isEmpty from "../validation/is-empty";
import Backdrop from "@material-ui/core/Backdrop";
import * as IconName from "react-icons/io";
import CircularProgress from "@material-ui/core/CircularProgress";
import NavigateBeforeIcon from "@material-ui/icons/NavigateBefore";
import hero from "../assets/img/hero.png";

const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#fff",
  },
});

class NewUpdateProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      userName: "",
      ethAddress: "",
      confirmEthAddress: "",
      twitterURL: "",
      errors: {},
    };
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    window.scrollTo(0, 1);
    this.props.getCurrentProfile();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }

    if (nextProps.profile.profile) {
      const profile = nextProps.profile.profile;

      // If profile field doesn't exist, make empty string
      profile.firstName = !isEmpty(profile.firstName) ? profile.firstName : "";
      profile.lastName = !isEmpty(profile.lastName) ? profile.lastName : "";
      profile.userName = !isEmpty(profile.userName) ? profile.userName : "";
      profile.ethAddress = !isEmpty(profile.ethAddress)
        ? profile.ethAddress
        : "";
      profile.confirmEthAddress = !isEmpty(profile.confirmEthAddress)
        ? profile.confirmEthAddress
        : "";
      profile.bio = !isEmpty(profile.bio) ? profile.bio : "";
      profile.social = !isEmpty(profile.social) ? profile.social : {};
      profile.twitter = !isEmpty(profile.social.twitter)
        ? profile.social.twitter
        : "";
      profile.youtube = !isEmpty(profile.social.youtube)
        ? profile.social.youtube
        : "";

      // Set component field state
      this.setState({
        firstName: profile.firstName,
        lastName: profile.lastName,
        userName: profile.userName,
        ethAddress: profile.ethAddress,
        confirmEthAddress: profile.confirmEthAddress,
        bio: profile.bio,
        twitter: profile.twitter,
        youtube: profile.youtube,
      });
    }
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  uploadImage(e) {
    e.preventDefault();

    const apikey = "<KEY>";
    const options = {
      accept: "image/*",
      maxFiles: 1,
      transformations: {
        crop: true,
      },
      onFileUploadFinished: (res) => {
        this.setState({
          image_url: res.url,
        });
      },
    };

    const filestack = client.init(apikey, options);
    const picker = filestack.picker(options);
    picker.open();
  }

  onSubmit(e) {
    e.preventDefault();

    const profileData = {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      userName: this.state.userName,
      ethAddress: this.state.ethAddress,
      confrimEthAddress: this.state.confirmEthAddress,
      bio: this.state.bio,
      youtube_url: this.state.youtube_url,
      twitter_url: this.state.twitter_url,
    };

    this.props.updateProfile(profileData, this.props.history);
  }

  onLogoutClick(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;
    return (
      <div className="bg-black text-gray pb-1">
        <div>
          <div className="">
            <Link to="/account">
              <a
                className="py-2 bg-gray-700 w-full h-10 fixed z-50 bg-opacity-60"
                alt="#"
                href="#"
              >
                <div className="bg-gray-400 ml-3 bg-gray-600 w-6 h-6 rounded">
                  <NavigateBeforeIcon style={{ color: "#fff" }} />
                </div>
              </a>
            </Link>
          </div>
          <div>
            <p className="text-white font-black text-xl ml-20 pt-6" />
          </div>
          <div className="flex justify-evenly">
            <form
              onSubmit={this.onSubmit}
              noValidate
              className="border border-gray-300 mt-7 w-96 p-7 ml-10 bg-gray-300 mb-16 rounded need-validation"
            >
              <div className="h-24 w-24 rounded-full bg-gray-400 flex-end mb-7 pt-4 pl-6 flex justify-between">
                <button className="focus:outline-none">
                  <AiIcons.AiOutlineUserAdd size="50px" color="skyblue" />
                </button>
                <div className="ml-10 mt-2 ">
                  <IconName.IoIosAddCircle
                    color="skyblue"
                    size="40px"
                    onMouseOver={({ target }) => (target.style.color = "white")}
                    onMouseOut={({ target }) =>
                      (target.style.color = "skyblue")
                    }
                  />
                </div>
              </div>
              <div className="flex justify-between">
                <div className="mb-1">
                  <div><NAME></div>
                  <input
                    type="text"
                    id="firstName"
                    name="firstName"
                    value={this.state.firstName}
                    onChange={this.onChange}
                    className={classnames(
                      "w-full text-xs rounded p-3 mt-2 mb-1 text-black dark:text-black bg-gray-white dark:bg-gray-300 border border-black dark:border-black focus:border focus:border-black",
                      {
                        "is-invalid": errors.firstName,
                      }
                    )}
                    placeholder="Enter first name"
                    autofocus
                    required
                  />
                  {errors.firstName && (
                    <div className="invalid-feedback">{errors.firstName}</div>
                  )}
                </div>
                <div className="mb-1">
                  <div>Last Name</div>
                  <input
                    type="text"
                    id="lastName"
                    name="lastName"
                    value={this.state.lastName}
                    onChange={this.onChange}
                    className={classnames(
                      "w-full text-xs rounded p-3 mt-2 mb-1 text-black dark:text-black bg-gray-white dark:bg-gray-300 border border-black dark:border-black focus:border focus:border-black",
                      {
                        "is-invalid": errors.lastName,
                      }
                    )}
                    placeholder="Enter last name"
                    autofocus
                    required
                  />
                  {errors.lastName && (
                    <div className="invalid-feedback">{errors.lastName}</div>
                  )}
                </div>
              </div>
              <div className="flex justify-between space-x-1">
                <div className="mb-1">
                  <div>Username</div>
                  <input
                    type="text"
                    id="userName"
                    name="userName"
                    value={this.state.userName}
                    onChange={this.onChange}
                    className={classnames(
                      "w-full text-xs rounded p-3 mt-2 mb-1 text-black dark:text-black bg-gray-white dark:bg-gray-300 border border-black dark:border-black focus:border focus:border-black",
                      {
                        "is-invalid": errors.userName,
                      }
                    )}
                    placeholder="Enter first Username"
                    autofocus
                    required
                  />
                  {errors.firstName && (
                    <div className="invalid-feedback">{errors.userName}</div>
                  )}
                </div>
                <div className="mb-1">
                  <div>Twitter Url</div>
                  <input
                    type="text"
                    id="twitterUrl"
                    name="twitterUrl"
                    value={this.state.twitterUrl}
                    onChange={this.onChange}
                    className={classnames(
                      "w-full text-xs rounded p-3 mt-2 mb-1 text-black dark:text-black bg-gray-white dark:bg-gray-300 border border-black dark:border-black focus:border focus:border-black",
                      {
                        "is-invalid": errors.twitterUrl,
                      }
                    )}
                    placeholder="e.g https://twitterUrl.be/WEA9EB7Q5RY (optional)"
                    autofocus
                    required
                  />
                  {errors.twitterUrl && (
                    <div className="invalid-feedback">{errors.ltwitterUrl}</div>
                  )}
                </div>
              </div>
              <div className="mb-1">
                <label for="ethAddress" className="form-label">
                  <strong>ETH Payout Address</strong>
                </label>
                <div className="mb-4">
                  <input
                    type="text"
                    id="ethAddress"
                    name="ethAddress"
                    value={this.state.ethAddress}
                    onChange={this.onChange}
                    className={classnames(
                      "w-full text-xs rounded p-3 mt-2 mb-1 text-black dark:text-black bg-gray-white dark:bg-gray-300 border border-black dark:border-black focus:border focus:border-black",
                      {
                        "is-invalid": errors.ethAddress,
                      }
                    )}
                    placeholder="Enter ETH payout address"
                    autofocus
                    required
                  />
                  {errors.ethAddress && (
                    <div className="invalid-feedback">{errors.ethAddress}</div>
                  )}
                </div>
                {errors.ethAddress && (
                  <div className="invalid-feedback">{errors.ethAddress}</div>
                )}
              </div>

              <div className="mb-1">
                <label for="bio" className="form-label">
                  <strong>Profile Bio</strong>
                </label>
                <textarea
                  rows="5"
                  id="bio"
                  name="bio"
                  value={this.state.bio}
                  onChange={this.onChange}
                  className={classnames(
                    "w-full text-xs rounded p-3 mt-2 mb-1 text-black dark:text-black bg-gray-white dark:bg-gray-300 border border-black dark:border-black focus:border focus:border-black",
                    {
                      "is-invalid": errors.bio,
                    }
                  )}
                  placeholder="Enter full bio for your profile"
                  required
                ></textarea>
                {errors.bio && (
                  <div className="invalid-feedback">{errors.bio}</div>
                )}
              </div>
              <div className="mb-1">
                <label for="youtubeURL" className="form-label">
                  <strong>Website Url</strong>
                </label>
                <input
                  type="text"
                  id="youtubeURL"
                  name="youtubeURL"
                  value={this.state.youtubeURL}
                  onChange={this.onChange}
                  className={classnames(
                    "w-full text-xs rounded p-3 mt-2 mb-1 text-black dark:text-black bg-gray-white dark:bg-gray-300 border border-black dark:border-black focus:border focus:border-black",
                    {
                      "is-invalid": errors.youtubeURL,
                    }
                  )}
                  placeholder="e.g https://youtu.be/WEA9EB7Q5RY (optional)"
                  autofocus
                  required
                />
                {errors.youtubeURL && (
                  <div className="invalid-feedback">{errors.youtubeURL}</div>
                )}
              </div>
              <button className="ml-16 py-6 px-8">
                <Link
                  to="/login"
                  onClick={this.onLogoutClick.bind(this)}
                  className="uppercase py-2 px-6 text-sm font-medium rounded text-white bg-blue-400"
                >
                  <Spinner name="uploadLoading">
                    <Backdrop className={classes.backdrop} open={true}>
                      <CircularProgress color="inherit" />
                    </Backdrop>
                    Processing...
                  </Spinner>
                  <Spinner name="uploadNotLoading" show={true}>
                    Update
                  </Spinner>
                </Link>
              </button>
            </form>
            <div className="self-center ml-40">
              <img
                src={hero}
                alt="hero"
                className="h-1/2 mt-10 rounded w-1/2"
              />
              <h6 className="text-white font-black text-2xl ml-40 mt-2">
                Hey Dodo
              </h6>
              <h6 className="text-white font-black text-xl ml-28 text-appRed">
                Just Add Details Dodo
              </h6>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

NewUpdateProfile.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  updateProfile: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  logoutUser: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile,
  errors: state.errors,
});

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, {
    getCurrentProfile,
    updateProfile,
    logoutUser,
  })
)(NewUpdateProfile);
<file_sep>/src/components/NewSideBarData.js
import React from "react";
import * as AiIcons from "react-icons/ai";


export const NewSideBarData = [
    {
        title: "Market Place",
        path: "/",
        icon: <AiIcons.AiFillQqSquare color="pink"/>,
        cName: "nav-text",
    },
    {
        title: "WAMLabs",
        path: "/",
        icon: <AiIcons.AiOutlineGitlab color="skyblue"/>,
        cName: "nav-text",
    },
];<file_sep>/src/reducers/index.js
import { combineReducers } from "redux";
import authReducer from "./authReducer";
import errorReducer from "./errorReducer";
import profileReducer from "./profileReducer";
import assetReducer from "./assetReducer";
import ethRateReducer from "./ethRateReducer";

export default combineReducers({
  auth: authReducer,
  errors: errorReducer,
  profile: profileReducer,
  asset: assetReducer,
  ethRate: ethRateReducer,
});
<file_sep>/src/components/Footer.js
import { TiSocialInstagram } from "react-icons/ti";
import { TiSocialFacebook } from "react-icons/ti";
import { TiSocialTwitter } from "react-icons/ti";
import { IconContext } from "react-icons";
import newlogo from "../assets/img/newlogo.png";


/* eslint-disable */

function Footer() {
  return (
    <footer className="bg-footer text-white px-20">
      <IconContext.Provider value={{ size: "25px" }}>
        <div className="flex h-28">
          <img src={newlogo} className="relative top-10" alt="logo" />
          <div className="border-l h-44 border-gray-400 border-opacity-40 mt-4 ml-28" />
          <div className="w-80 mx-6">
            <p className="text-gray-400 text-sm mt-20">
              Digital marketplace for crypto collectibles and non-fungible
              tokens (NFTs). Buy, sell, and discover exclusive digital assets.
            </p>
          </div>
        </div>
        <div className="-mt-8">
          <div className="flex flex-row-reverse">
            <TiSocialInstagram />
            <TiSocialFacebook />
            <TiSocialTwitter />
          </div>
          <div className="mt-2 text-gray-400 text-sm flex flex-row-reverse">
            <EMAIL>
          </div>
        </div>
        <div className="mt-16 pt-4 border-b border-gray-400 border-opacity-20" />
        <div className="text-gray-400 mt-4 flex justify-between">
          <p className="text-gray-400 text-sm mt-2">
            Copyright © 2021
            <a href="https://www.apple.com/uk/" target="_blank" rel="noopener">
              WEAREMASTERS.IO
            </a>
            All Rights Reserved.
          </p>
        </div>
      </IconContext.Provider>
    </footer>
  );
}

export default Footer;
