Merge pull request #93 from GenaDrop/stagging

Stagging to main
GenaDrop · Jan 22, 2024 · 7f061e9 · 7f061e9
2 parents 4df5178 + 20dd77d
commit 7f061e9
Show file tree

Hide file tree

Showing 6 changed files with 362 additions and 36 deletions.
diff --git a/apps/BosGenaDrop/widget/CPlanet/DropsFund/Contest/Card.jsx b/apps/BosGenaDrop/widget/CPlanet/DropsFund/Contest/Card.jsx
@@ -248,7 +248,7 @@ const StartedButton = styled.div`
     background: #F77;
     color: #fff;
     text-align: center;
-
+    min-width: 100px;
     font-family: Helvetica Neue;
     font-size: 16px;
     font-weight: 500;
@@ -272,6 +272,7 @@ const StartedButton = styled.div`
     height: 48px;
     gap: 8px;
     width: max-content;
+    min-width: 100px;
     color: #b0b0b0;
     font-size: 12px;
     font-style: normal;
@@ -656,15 +657,24 @@ function handleCreateProposal() {
 
 const notOwner = nftData?.owner && props?.owner !== nftData?.owner
 
-const userVoted = totalUsersVoted.includes(context.accountId)
 
-const adminLists = ['genadrop.near', 'agwaze.near', 'minorityprogrammers.near', 'bashorun.near']
+
+const votedUsers = Near.view("fund-beta.genadrop.near", 'get_specific_art_voters', {
+  contest_id: Number(props?.contestId),
+  artist: props?.owner,
+  subscribe: true
+})
+
+const userVoted = votedUsers ? votedUsers.includes(context.accountId) : false
+const bannedFromVoting =  totalUsersVoted.includes(context.accountId)
+
 
 const userProfileImage = (profile) => {
   const getProfile = Social.get(`${profile}/profile/**`, "final")
   return getProfile.image ? getProfile.image.ipfs_cid : "bafkreih6spncoy6jyx2f46yxektxz44mmfq2juz4dvc36p7w5xwcnaqira"
 };
 
+
 return (
   <Container
     selected={
@@ -695,7 +705,7 @@ return (
          href={`#/bos.genadrop.near/widget/GenaDrop.Profile.Main?accountId=${props.owner}`}
         >
         <p>
-          NFT by {profileImage?.image?.ipfs_cid ? <img src={`https://ipfs.near.social/ipfs/${profileImage?.image?.ipfs_cid}`} /> : <NoProfile />} <span>{props?.owner}</span>
+          NFT by {<img src={`https://ipfs.near.social/ipfs/${profileImage?.image?.ipfs_cid}`} />} <span>{props?.owner}</span>
         </p>
         </a>
         <span className="dots"></span>
@@ -720,8 +730,8 @@ return (
         placement='auto'
 
         >
-        <button disabled={isAccountConnected || !context.accountId || notOwner || userVoted} onClick={handleVoteClick} 
-        className={userVoted ? "disabled": notOwner ? "banned" : "vote"}>
+        <button disabled={isAccountConnected || !context.accountId || notOwner || bannedFromVoting} onClick={handleVoteClick} 
+        className={bannedFromVoting ? "disabled": notOwner ? "banned" : "vote"}>
           {userVoted ? "Already Voted": notOwner ? "Banned": "Vote"}
         </button>
         </OverlayTrigger>
@@ -751,10 +761,10 @@ return (
            <p className="">Owner no longer owns the NFT</p>
         </div>
       )}
-        {/* <div className="imageContainer">
-            {adminLists.slice(0, 2).map((data, index) => <img key={index} src={`https://ipfs.near.social/ipfs/${userProfileImage(data)}`} />)}
+        <div className="imageContainer">
+            {votedUsers.slice(0, 5).map((data, index) => <img key={index} src={`https://ipfs.near.social/ipfs/${userProfileImage(data)}`} />)}
         </div>
-       {props?.content?.votes && <p>{props?.content?.votes ? adminLists.length - 2 : 0 } other Vote(s)</p>} */}
+       {votedUsers?.length - 5  > 0 && <p>{votedUsers.length - 5} other Vote(s)</p>}
     </StartedButton>
   </Root>
   {openModal && (
@@ -777,7 +787,7 @@ return (
                     href={`#/bos.genadrop.near/widget/GenaDrop.Profile.Main?accountId=${props.owner}`}
                     >
                     <p>
-                      NFT by {profileImage?.image?.ipfs_cid ? <img src={`https://ipfs.near.social/ipfs/${profileImage?.image?.ipfs_cid}`} /> : ""} <span>{props?.owner}</span>
+                      NFT by {<img src={`https://ipfs.near.social/ipfs/${profileImage?.image?.ipfs_cid ? profileImage.image.ipfs_cid : "bafkreih6spncoy6jyx2f46yxektxz44mmfq2juz4dvc36p7w5xwcnaqira"}`} />} <span>{props?.owner}</span>
                     </p>
                     </a>
                     <span className="dots"></span>

diff --git a/apps/BosGenaDrop/widget/CPlanet/DropsFund/Contest/Rules.jsx b/apps/BosGenaDrop/widget/CPlanet/DropsFund/Contest/Rules.jsx
@@ -503,7 +503,7 @@ return (
         <div className="mb-2">
           {totalUsersVoted?.map((accountId, i) => (
             <a
-              href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
+              href={`/bos.genadrop.near/widget/GenaDrop.Profile.Main?accountId=${accountId}`}
               className="text-decoration-none"
               key={i}
             >

diff --git a/apps/BosGenaDrop/widget/DropFlow/CreatePage/Bet.jsx b/apps/BosGenaDrop/widget/DropFlow/CreatePage/Bet.jsx
@@ -1,12 +1,11 @@
 const accountId = props.accountId ?? context.accountId;
 const widgetOwner = "jgodwill.near";
+const isLoggedIn = context.accountId ? true : false;
 
-if (!accountId) {
+if (!isLoggedIn) {
   return "Please sign in with NEAR wallet to edit your profile";
 }
 
-const isLoggedIn = context.accountId ? true : false;
-
 let profile = Social.getr(`${accountId}/profile`);
 
 if (profile === null) {
@@ -29,7 +28,7 @@ State.init({
   nftTokenId: null,
   nftContractId: null,
   isValidCummunityContractId: false,
-  disabled: false,
+  disabled: !initialMetadata.feed ? true : false,
   portfolioImage: {},
   nftsArray:
     initialMetadata.pageNFTs.type === "single"
@@ -39,6 +38,9 @@ State.init({
   feedTabs: initialMetadata.feedTabs ?? {},
   discussion: initialMetadata.discussion ?? {},
   createPoll: false,
+  feed: initialMetadata.feed ?? {},
+  portfolio: initialMetadata.portfolio ?? {},
+  theme: initialMetadata.theme ?? 0,
 });
 
 // const feedTabs = { Feed: "", Discussions: "", NFTs: "" };
@@ -98,6 +100,9 @@ if (
 //   });
 
 /* Feed Tabs start */
+const [selectedTheme, setSelectedTheme] = useState(
+  state.initialMetadata.theme ?? 0
+);
 const [selectedTabNames, setSelectedTabNames] = useState(
   Object.keys(initialMetadata.feedTabs || {})
 );
@@ -250,6 +255,119 @@ const TabCard = styled.div`
   }
 `;
 
+const themesData = [
+  {
+    name: "Default",
+    colors: {
+      body: "#fff",
+      text: "#000",
+      button: {
+        text: "#fff",
+        background: "#000",
+      },
+      link: {
+        text: "#000",
+        opacity: 0.8,
+      },
+    },
+    border: {
+      color: "#000",
+      width: "1px",
+      radius: "4px",
+    },
+    fontFamily: "Helvetica Neue",
+  },
+  {
+    name: "Midnight Muse",
+    colors: {
+      body: "#9be7ff",
+      text: "#0d47a1",
+      button: {
+        text: "#ffffff",
+        background: "#0d47a1",
+      },
+      link: {
+        text: "#0d47a1",
+        opacity: 0.8,
+      },
+    },
+    border: {
+      color: "#0d47a1",
+      width: "1px",
+      radius: "4px",
+    },
+    fontsFamily: "'Dancing Script', cursive",
+    sideEffects: {
+      // Define any CSS animations, transitions, etc.
+      hover: "transform: scale(1.1); transition: 0.5s ease-in-out",
+    },
+  },
+  {
+    name: "Neon Jungle",
+    colors: {
+      body: "#0C0B26",
+      text: "rgba(255, 255, 255, 1)",
+      button: {
+        text: "rgba(255, 255, 255, .8)",
+        background: "#AB1BA1",
+      },
+      link: {
+        text: "#AB1BA1",
+        opacity: 0.8,
+      },
+    },
+    border: {
+      color: "rgba(255, 255, 255, 1)",
+      width: "1px",
+      radius: "4px",
+    },
+    fontFamily: "'Bangers', cursive",
+    sideEffects: {
+      // Define any CSS animations, transitions, etc.
+      hover: "transform: scale(1.1); transition: 0.5s ease-in-out",
+    },
+  },
+];
+
+const handleThemeChange = (index) => {
+  setSelectedTheme(index);
+  State.update({
+    metadata: {
+      ...state.metadata,
+      theme: index,
+    },
+  });
+};
+const displayThemes = themesData.map((theme, index) => {
+  const { name } = theme;
+  console.log(`${index} selected? ${Number(selectedTheme) === index}`);
+  return (
+    <div
+      key={index}
+      className="themeCard"
+      style={{
+        backgroundColor: theme.colors.body,
+        color: theme.colors.text,
+        border: `${theme.border.width} solid ${theme.border.color}`,
+      }}
+    >
+      <input
+        type="radio"
+        id={index}
+        name="theme"
+        checked={Number(selectedTheme) === index}
+        onChange={() => handleThemeChange(index)}
+        className="form-check-input rounded-circle"
+      />
+      <label htmlFor={index}>{name}</label>
+    </div>
+  );
+});
+
+console.log("selectedTheme: ", selectedTheme);
+
+// select all input tags that are not checkboxes or radio buttons with css
+
 const Wrapper = styled.div`
   max-width: 1440px;
   padding: 32px;
@@ -260,6 +378,12 @@ const Wrapper = styled.div`
   }
   .section {
     margin-bottom: 32px;
+    padding-bottom: 2rem;
+    margin-top: 2rem;
+    border-bottom: 8px solid #efefef;
+  }
+  .section.portfolio {
+    border-bottom: none;
   }
   .tabsGrid {
     display: grid;
@@ -346,7 +470,7 @@ const Wrapper = styled.div`
     }
   }
   input {
-    :not([type="checkbox"]) {
+    :not([type="checkbox"]):not([type="radio"]) {
       border-radius: 8px;
       background: #fff;
       border: 2px solid #efefef;
@@ -433,6 +557,26 @@ const Wrapper = styled.div`
     background-color: #000;
     color: #fff;
   }
+  .themesCard {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+  .themeCard {
+    padding: 16px 24px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    border-radius: 32px;
+    width: 200px;
+    input {
+      margin-top: unset;
+      :hover {
+        cursor: pointer;
+      }
+    }
+  }
 `;
 
 const Actions = styled.div`
@@ -811,7 +955,7 @@ state.disabled &&
   State.update({
     metadata: {
       ...state.metadata,
-      feed: [],
+      feed: {},
     },
   });
 
@@ -889,8 +1033,16 @@ const addPortfolioEntryHandler = () => {
 
 const imagetooltip = <Tooltip id="tooltip">Upload an image</Tooltip>;
 return (
-  <Wrapper className="container" selectedNFTButton={singleOrCollectionActive}>
+  <Wrapper
+    className="container"
+    selectedNFTButton={singleOrCollectionActive}
+    theme={selectedTheme}
+  >
     <h1>Customize your Page </h1>
+    <div className="themes">
+      <h6>Choose a Theme</h6>
+      <div className="themesCard">{displayThemes}</div>
+    </div>
     <div className="section">
       <h6>Select the Tabs that you want to display</h6>
       <FeedTabs selectedTabNames={selectedTabNames} />
@@ -906,6 +1058,7 @@ return (
                 className="form-check-input rounded-circle"
                 type="checkbox"
                 onChange={onChangeDisabled}
+                checked={state.disabled}
               />
               <label class="form-check-label" for="flexCheckDefault">
                 Display The Default Feed